/* Homepage: "A booking page that looks like yours" - the colour styles and the done-for-you website match.
   Everything is scoped to .homeColours. The three small booking pages are decoration (aria-hidden): they show
   the idea of one page in different colours and are not screenshots of any venue. */
.homeColours{background:#efe5d2;color:#2f1c2d;padding:0;border-block:1px solid #dfd3bf;overflow:hidden;scroll-margin-top:85px}
.homeColours .coloursInner{max-width:1136px;margin-inline:auto;padding:64px 24px;display:grid;grid-template-columns:minmax(0,1fr) 540px;gap:48px;align-items:center}
.homeColours .eyebrow{font-size:10px;letter-spacing:2px;font-weight:700;text-transform:uppercase;color:#92412c;margin-bottom:18px}
.homeColours h2{font-weight:500;font-size:46px;letter-spacing:-1.2px;line-height:1.14;margin:0 0 20px}
.homeColours .lead{font-size:16px;line-height:1.75;color:#5e4f59;margin:0;max-width:520px}
.homeColours .coloursPoints{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:16px;max-width:520px}
.homeColours .coloursPoints li{border-left:3px solid #cda350;padding:2px 0 2px 16px;font-size:15px;line-height:1.7;color:#5e4f59}
.homeColours .coloursPoints b{display:block;color:#2f1c2d;font-weight:650;font-size:16px}
.homeColours .coloursLink{display:inline-flex;align-items:center;min-height:44px;margin-top:22px;font-size:15px;font-weight:650;color:#92412c;text-decoration:underline;text-underline-offset:4px}
.homeColours .coloursLink:focus-visible{outline:3px solid #cf913c;outline-offset:3px}

.homeColours .coloursStage{height:330px;position:relative}
.homeColours .coloursStack{position:absolute;left:0;top:0;width:540px;height:330px;transform-origin:top left}
.homeColours .cPage{position:absolute;width:206px;border-radius:18px;overflow:hidden;background:var(--p-bg);border:1px solid rgba(47,28,45,.1);box-shadow:0 22px 50px rgba(47,28,45,.2),0 3px 8px rgba(47,28,45,.1);font-family:Inter,system-ui,sans-serif}
.homeColours .cPage .cHero{background:var(--p-hero);color:var(--p-heroink);padding:13px 15px 12px;box-shadow:inset 0 -3px var(--p-rule)}
.homeColours .cPage .cHero b{display:block;font-family:Fraunces,Georgia,serif;font-size:17px;font-weight:600;line-height:1.15}
.homeColours .cPage .cHero span{font-size:10.5px;opacity:.88}
.homeColours .cPage .cBody{padding:12px 13px 14px}
.homeColours .cPage .cCard{background:var(--p-card);border:1px solid var(--p-line);border-radius:12px;padding:11px;display:flex;flex-direction:column;gap:8px}
.homeColours .cPage .cLbl{font-size:8.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--p-ink2)}
.homeColours .cPage .cChips{display:flex;gap:5px;flex-wrap:wrap}
.homeColours .cPage .cChip{font-size:10.5px;font-weight:600;padding:5px 8px;border-radius:7px;border:1px solid var(--p-field);color:var(--p-ink);background:var(--p-card)}
.homeColours .cPage .cChip.on{background:var(--p-cta);border-color:var(--p-cta);color:var(--p-ctaink)}
.homeColours .cPage .cBtn{font-size:11.5px;font-weight:700;text-align:center;padding:9px;border-radius:8px;background:var(--p-cta);color:var(--p-ctaink)}
.homeColours .cTag{position:absolute;font-size:11px;font-weight:650;letter-spacing:.02em;color:#2f1c2d;background:#fffdf6;border:1px solid #d9cbb3;border-radius:999px;padding:5px 12px;white-space:nowrap;box-shadow:0 4px 12px rgba(47,28,45,.1)}

/* left: a matched page (an invented green and brass, no venue's own colours) */
.homeColours .cp1{left:0;top:64px;transform:rotate(-5deg);--p-bg:#f5f3ec;--p-card:#fff;--p-ink:#1d2a25;--p-ink2:#53615a;--p-line:#dcdacb;--p-field:#7f8a82;--p-cta:#1f3d34;--p-ctaink:#fff;--p-hero:#1f3d34;--p-heroink:#fff;--p-rule:#b08d57}
/* middle: Cream, what new venues start on */
.homeColours .cp2{left:167px;top:14px;z-index:2;--p-bg:#f7f0e2;--p-card:#fffdf6;--p-ink:#382b36;--p-ink2:#655665;--p-line:#d2bfa8;--p-field:#8f796e;--p-cta:#a9422b;--p-ctaink:#fff;--p-hero:#432940;--p-heroink:#fffaf2;--p-rule:#cda350}
/* right: Midnight, one of the dark styles */
.homeColours .cp3{left:334px;top:64px;transform:rotate(5deg);--p-bg:#0e1929;--p-card:#16253a;--p-ink:#eaf1f8;--p-ink2:#a9bacb;--p-line:#2a3d57;--p-field:#5d7590;--p-cta:#8cc4f2;--p-ctaink:#0e1929;--p-hero:#0a1320;--p-heroink:#eaf1f8;--p-rule:#8cc4f2}
.homeColours .ct1{left:14px;top:292px}
.homeColours .ct2{left:236px;top:292px;z-index:3}
.homeColours .ct3{left:392px;top:292px}

@media(max-width:1120px){
  .homeColours .coloursInner{grid-template-columns:1fr;gap:34px}
  .homeColours .coloursStage{width:540px;margin-inline:auto}
}
@media(max-width:760px){
  .homeColours .coloursInner{padding:40px 25px 44px}
  .homeColours h2{font-size:35px;letter-spacing:-.9px;margin-bottom:17px}
  .homeColours .eyebrow{font-size:9px;margin-bottom:16px}
  .homeColours .lead{font-size:15px}
}
@media(max-width:620px){
  .homeColours .coloursStage{width:324px;height:200px}
  .homeColours .coloursStack{transform:scale(.6)}
}
@media(max-width:373px){
  .homeColours .coloursStage{width:270px;height:168px}
  .homeColours .coloursStack{transform:scale(.5)}
}
