/*
 * Comedy Republic components (Brett, 07 Oct 2026; phase 1 of the design system, docs: design-system.md
 * in the theme root). Loaded on every page after the page's own design-*.css and before
 * design-brand.css (functions.php). It holds the :root tokens, the .crd remap of the ported sheets'
 * names, the system components (.cr-section, .cr-card, buttons, .cr-label, .cr-script), the home
 * components moved from design-home.css (night card, show row, stub, chip, Bar tile, and the polish
 * pass's scale rules), and the shared chrome moved from design-brand.css — header (at rest and
 * compact), menu, search panel, sticky offer bar (the dock), footer, buttons, stubs, chips, labels,
 * prices, inputs. Cascade: the block that was the top of design-brand.css keeps its place; the block
 * that was its end (Polish pass, Search panel) now comes before design-brand.css's page sweeps, so a
 * sweep there at equal specificity wins over it (none does today). The home page's own sections
 * (billboard, date strip, Most booked, New here, Citizens, Bar section) stay in design-home.css.
 */

/* ---- Design tokens (Brett, 07 Oct): defined once; every component points at them. ---------------
   The ported page sheets (design-*.css, regenerated from the canvas) speak in --ink, --cream, --card,
   --gold, --ox, --muted and --ivory: those are remapped onto the tokens below, so every page and every
   new page built on the same sheets inherits the system. */
:root{
  --cr-black:#0F0E0C;
  --cr-black-raised:#1C1B18;
  --cr-cream:#F5F0D3;
  --cr-paper:#FFFDF6;
  --cr-ink:#2E2D2A;
  --cr-ink-muted:#5C5A53;
  --cr-oxblood:#720002;
  --cr-marigold:#FFBC29;
  --cr-brass:#B8913A;
  /* Green means Citizens and nothing else (Brett, 07 Oct): Citizens text and small Citizens UI; the
     deep green for big surfaces (the Citizens band); the light green for Citizens text on black. */
  --cr-green:#4F744A;
  --cr-green-deep:#3F5F3B;
  --cr-green-on-dark:#8CAE86;
  --cr-shadow-card:0 24px 48px -32px rgba(15,14,12,.5);

  /* The palette's working tints (design-system.md): hairlines on paper and on black, the search
     dim, the frosted pill on photos, the Citizens pass's spine. */
  --cr-ink-line:rgba(46,45,42,.16);
  --cr-cream-line:rgba(245,240,211,.28);
  --cr-cream-rule:rgba(245,240,211,.12);
  --cr-cream-40:color-mix(in srgb,var(--cr-cream) 40%,transparent);
  --cr-dim:rgba(15,14,12,.7);
  --cr-glass:rgba(20,17,12,.3);
  --cr-pass-spine:#263D23;

  /* Type families (the stacks the ported sheets use). */
  --cr-font-body:'futura-pt','Helvetica Neue',Helvetica,Arial,sans-serif;
  --cr-font-display:'futura-pt-bold','Futura',sans-serif;
  --cr-font-script:"corner-store-jf","Norican",cursive;

  /* Radius (Brett, 07 Oct polish pass): sm for controls (buttons, stubs, inputs, date pills, calendar
     cells and arrows, square tags), md for mid containers (the Citizens pass), lg for every card,
     pill for status chips only. Round arrow buttons stay 50%. */
  --cr-radius-sm:6px;
  --cr-radius-md:12px;
  --cr-radius-lg:16px;
  --cr-radius-pill:999px;
  --cr-radius-btn:var(--cr-radius-sm);
  --cr-radius-card:var(--cr-radius-lg);

  --cr-marigold-hover:#E6A61F;
  --cr-btn-h:54px;

  /* Type scale. Display is Guess Sans 800, uppercase, 0.01em. */
  --cr-fs-hero:56px;
  --cr-fs-h2:46px;
  --cr-fs-h3:24px;
  --cr-fs-h4:17px;
  --cr-fs-tile:20px; /* the Bar tiles' names at every width (and h3 on phones) */
  --cr-fs-lede:18px;
  --cr-fs-body:14.5px;
  --cr-fs-price:14px;
  --cr-fs-btn:15px;
  --cr-fs-link:14px;
  --cr-fs-fine:12px;
  --cr-fs-label:11px;
  --cr-fs-script:42px;
  --cr-fs-input:16px; /* form fields stay 16px so phones don't zoom into them */

  --cr-label-track:0.15em;
  --cr-section-pad:96px;
}
@media (max-width:768px){
  :root{--cr-section-pad:64px;--cr-fs-hero:40px;--cr-fs-h2:32px;--cr-fs-h3:20px;--cr-fs-h4:16px;--cr-fs-script:32px}
}
.crd{--cream:var(--cr-cream);--ivory:var(--cr-cream);--card:var(--cr-paper);--ink:var(--cr-ink);--muted:var(--cr-ink-muted);--ox:var(--cr-oxblood);--gold:var(--cr-marigold)}


/* ---- System components (design-system.md) ------------------------------------------------------
   The generic classes the system is built from. They are written at zero specificity (:where), so on
   today's pages the ported page sheets and the rules below still decide every value: the home page
   already wears these classes and matches them value for value. Phase 2 lets them lead elsewhere. */

/* Section: the rhythm (96px top and bottom, 64px on phones) and the three grounds — black, cream
   (the page's own paper), and the Citizens green. */
:where(.cr-section){padding-block:var(--cr-section-pad)}
:where(.cr-section--black){background-color:var(--cr-black);color:var(--cr-cream)}
:where(.cr-section--cream){color:var(--cr-ink)}
:where(.cr-section--green){background-color:var(--cr-green-deep);color:var(--cr-cream)}

/* Card: paper, the lg corner, the card shadow, ink type. */
:where(.cr-card){border-radius:var(--cr-radius-lg);background-color:var(--cr-paper);color:var(--cr-ink);box-shadow:var(--cr-shadow-card)}

/* Buttons: one primary (marigold: buying and signing up only), one outline, one text link. Both
   buttons are 54px (--cr-btn-h); the outline's height isn't set here yet because the event page's
   outline buttons (.ev-cit__btn, .ev-pick__open: 44-50px) already carry .cr-btn--outline (phase 2). */
:where(.cr-btn--primary){height:var(--cr-btn-h);padding:0 22px;border:0;border-radius:var(--cr-radius-sm);background:var(--cr-marigold);color:var(--cr-ink);font-weight:900;font-size:var(--cr-fs-btn);letter-spacing:.02em;box-shadow:none}
:where(.cr-btn--primary:hover){background:var(--cr-marigold-hover)}
:where(.cr-btn--outline){padding:0 22px;border:1px solid currentColor;border-radius:var(--cr-radius-sm);background:transparent;font-weight:900;font-size:var(--cr-fs-btn);letter-spacing:.02em;box-shadow:none}
:where(.cr-btn--outline:hover){background:color-mix(in srgb,currentColor 6%,transparent)}
:where(.cr-btn--link){padding:0;border:0;background:none;font-weight:700;font-size:var(--cr-fs-link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
:where(.cr-btn--link:hover){text-decoration-color:var(--cr-marigold)}

/* Label: Lato (the page's type) 900, 11px, uppercase, 0.15em. Colour follows its ground (brass on
   black for eyebrows). */
:where(.cr-label){font-weight:900;font-size:var(--cr-fs-label);letter-spacing:var(--cr-label-track);text-transform:uppercase}

/* Script: Corner Store JF (Adobe Fonts; Norican the fallback) 42px (32px on phones), oxblood on cream, brass on black (in a system section; the
   inner pages' scripts keep their own colours until phase 2). Once per section at most. */
:where(.cr-script){font-family:"corner-store-jf","Norican",cursive;font-size:var(--cr-fs-script)}
/* Corner Store JF (Adobe Fonts, one 400 weight) with Norican, self-hosted, as the fallback. The page sheets still name Norican at .crd .cr-script, so this one outranks them. */
.crd.crd .cr-script{font-family:"corner-store-jf","Norican",cursive;font-weight:400}
:where(.cr-section--cream .cr-script){color:var(--cr-oxblood)}
:where(.cr-section--black .cr-script){color:var(--cr-brass)}


/* ---- Home components (moved from design-home.css, phase 1; in their original order) -----------
   The night card (and the All future dates card in its shape), the show row, the ticket stub, the
   chips and the Bar tile, plus the polish pass's scale rules (radius, type, labels) that span them.
   Scoped :where(body.home) (no specificity), so they hold on the home page only, as before; their
   base is still the home canvas port (design-home.css) until phase 2. */
:where(body.home) .crd .cr-hero__photo{position:absolute;inset:0;z-index:-2;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 25%}
:where(body.home) .crd .cr-hero--photo::before{background:linear-gradient(180deg,rgba(20,17,12,.45) 0%,rgba(20,17,12,.25) 22%,rgba(20,17,12,.55) 40%,rgba(20,17,12,.9) 100%)}
:where(body.home) .crd .cr-hero--photo .cr-hero__line, :where(body.home) .crd .cr-hero--photo .cr-hero__meta{text-shadow:0 1px 8px rgba(20,17,12,.75)}
@media (prefers-reduced-motion:reduce){
  :where(body.home) .crd .cr-barcard.is-dup{display:none}
}
:where(body.home) .crd .cr-day{container-type:inline-size}
:where(body.home) .crd .cr-show__title{overflow-wrap:anywhere}
@media (min-width:640px) and (max-width:899px){
  :where(body.home) .crd .cr-day{width:max(calc((100% - 12px) / 2),360px)}
}
@media (min-width:900px) and (max-width:1199px){
  :where(body.home) .crd .cr-day{width:calc((100% - 20px) / 2)}
}
@media (max-width:899px){
  :where(body.home) .crd .cr-show__title.is-long{font-size:13px}
}
@media (pointer:coarse){
  :where(body.home) .crd .cr-calbtn, :where(body.home) .crd .cr-filter, :where(body.home) .crd a.cr-cal__cell, :where(body.home) .crd .cr-nextav{position:relative}
  :where(body.home) .crd .cr-calbtn::after{content:'';position:absolute;inset:-4px}
  :where(body.home) .crd .cr-filter::after{content:'';position:absolute;inset:-4px 0}
  :where(body.home) .crd a.cr-cal__cell::after{content:'';position:absolute;inset:-2px 0}
  :where(body.home) .crd .cr-nextav::after{content:'';position:absolute;inset:min(0px,calc(50% - 22px)) 0}
}
:where(body.home) .crd .cr-day{width:calc((100% - 40px) / 3);border-radius:var(--cr-radius-lg);box-shadow:0 22px 40px -30px rgba(0,0,0,.45),0 4px 10px -8px rgba(0,0,0,.2)}
@media (hover:hover){
  :where(body.home) .crd .cr-day:hover{box-shadow:0 26px 46px -30px rgba(0,0,0,.5),0 6px 12px -8px rgba(0,0,0,.22)}
}
:where(body.home) .crd .cr-hero{height:228px}
:where(body.home) .crd .cr-hero__line{font-size:var(--cr-fs-label)}
:where(body.home) .crd .cr-hero__title{font-size:var(--cr-fs-h2)}
:where(body.home) .crd .cr-bookbar{padding:19px 20px}
:where(body.home) .crd .cr-show{padding:16px 15px}
:where(body.home) .crd .cr-day .cr-tag, :where(body.home) .crd .cr-day .cr-chip{border-radius:var(--cr-radius-pill)}
:where(body.home) .crd .cr-day .cr-chip{padding:0 10px}
:where(body.home) .crd .cr-day .cr-chip::after{display:none}
:where(body.home) .crd .cr-day .cr-tix__body{border-radius:var(--cr-radius-sm)}
@media (min-width:900px) and (max-width:1199px){
  :where(body.home) .crd .cr-day{width:calc((100% - 20px) / 2)}
}
@media (max-width:899px){
  :where(body.home) .crd .cr-day{width:calc(100% - 28px)}
  :where(body.home) .crd .cr-hero{height:177px}
  :where(body.home) .crd .cr-bookbar{padding:16px}
  :where(body.home) .crd .cr-show{padding:14px 11px}
}
@media (min-width:640px) and (max-width:899px){
  :where(body.home) .crd .cr-day{width:max(calc((100% - 12px) / 2),360px)}
}
:where(body.home) .crd .cr-show{grid-template-columns:minmax(0,1fr) auto}
/* Without the tile the words have room beside the stub down to a 240px card; only narrower cards drop
   the stub under the words (after the rule above, as they were in design-home.css). */
@container (max-width:319px){
  :where(body.home) .crd .cr-show{grid-template-columns:minmax(0,1fr) auto}
  :where(body.home) .crd .cr-show>.cr-tix{grid-column:auto;justify-self:auto}
}
@container (max-width:239px){
  :where(body.home) .crd .cr-show{grid-template-columns:minmax(0,1fr)}
  :where(body.home) .crd .cr-show>.cr-tix{grid-column:1;justify-self:start}
}
:where(body.home) .crd .cr-day .cr-hero{height:auto;aspect-ratio:3 / 2}
:where(body.home) .crd .cr-hero__photo{object-position:center}
:where(body.home) .crd .cr-day .cr-hero__title,
:where(body.home) .crd .cr-day .cr-hero__line,
:where(body.home) .crd .cr-day .cr-hero__meta,
:where(body.home) .crd .cr-day .cr-doors{text-shadow:none}
:where(body.home) .crd .cr-day .cr-filter, :where(body.home) .crd .cr-day .cr-filter:hover{color:var(--ink)}
:where(body.home) .crd .cr-hero--venue::before{background:linear-gradient(180deg,rgba(20,17,12,.2) 0%,rgba(20,17,12,0) 30%,rgba(20,17,12,.25) 55%,rgba(20,17,12,.8) 100%)}
:where(body.home) .crd .cr-hero__top{justify-content:flex-start;gap:8px;flex-wrap:wrap}
:where(body.home) .crd .cr-hero__top .cr-doors{height:30px;font-size:var(--cr-fs-label);color:var(--cream);background:rgba(20,17,12,.3);border:1px solid rgba(245,240,211,.5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
:where(body.home) .crd .cr-hero__top .cr-doors .cr-dot--go{background:currentColor;animation:none}
:where(body.home) .crd .cr-day.is-sparse .cr-shows::after{margin:0;background-position:center bottom 40px;background-size:auto min(76px,calc(100% - 40px))}
@media (max-width:639px){
  :where(body.home) .crd .cr-day{width:100%}
}
:where(body.home) .crd .cr-bar .cr-barcard__art{background:#0F0E0C;color:var(--cream)}
:where(body.home) .crd .cr-bar .cr-barcard__art::before{display:none}
:where(body.home) .crd .cr-bar .cr-typetile__a{color:var(--cream)}
:where(body.home) .crd .cr-bar .cr-typetile__b{color:var(--gold)}
@media (max-width:639px){
  :where(body.home) .crd .cr-day.is-sparse .cr-shows::after{display:none}
}
:where(body.home) .crd.crd .cr-pop .cr-price{font-weight:900;color:var(--cr-ink)}
:where(body.home) .crd.crd .cr-pop .cr-price__cit{font-weight:700;color:var(--cr-green)}
body.home .crd .cr-tonight .cr-day{color:var(--ink)}
body.home .crd.crd :is(.cr-btn,.cr-pill,.cr-strip__item,.cr-calbtn,.cr-cal__cell,.cr-cattag,.cr-tix__body){border-radius:var(--cr-radius-sm)}
body.home .crd.crd :is(.cr-day,.cr-popcard,.cr-barcard,.cr-new__media,.cr-new__photo){border-radius:var(--cr-radius-lg)}
body.home .crd.crd :is(.cr-dot,.cr-lg,.cr-status i){border-radius:var(--cr-radius-pill)}
body.home .crd.crd :is(.cr-tag,.cr-chip,.cr-doors,.cr-rank){border-radius:var(--cr-radius-pill)}
body.home .crd.crd .cr-tix:not(.cr-tix--wait) .cr-tix__body{background:var(--cr-marigold);color:var(--cr-ink);font-family:'futura-pt',sans-serif;font-weight:900;font-size:var(--cr-fs-btn);box-shadow:none}
body.home .crd.crd .cr-tix:not(.cr-tix--wait):hover .cr-tix__body{background:var(--cr-marigold-hover)}
body.home .crd.crd .cr-tix__body{height:var(--cr-btn-h);padding-right:22px}
.crd.crd .cr-tix--wait .cr-tix__body{background:transparent;border:1px solid var(--cr-ink);color:var(--cr-ink);font-size:var(--cr-fs-btn)}
.crd.crd .cr-tix--wait:hover .cr-tix__body{background:color-mix(in srgb,var(--cr-ink) 6%,transparent)}
body.home .crd.crd .cr-tag--live{background:var(--cr-cream);color:var(--cr-ink)}
body.home .crd.crd .cr-chip--fast{background:var(--cr-brass);color:var(--cr-ink)}
body.home .crd.crd a.cr-cal__cell:hover{background:color-mix(in srgb,var(--cr-ink) 6%,var(--cr-paper));color:var(--cr-ink)}
body.home .crd.crd a.cr-cal__cell.is-tight:hover{background:color-mix(in srgb,var(--cr-brass) 24%,var(--cr-paper));color:var(--cr-ink)}
body.home .crd.crd .cr-calbtn{border:1px solid currentColor;box-shadow:none}
body.home .crd.crd .cr-calbtn:hover:not(:disabled){background:color-mix(in srgb,var(--cr-ink) 6%,transparent);box-shadow:none}
body.home .crd.crd .cr-nextav{font-family:'futura-pt',sans-serif;font-weight:700;font-size:var(--cr-fs-link);color:var(--cr-ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
body.home .crd.crd .cr-nextav:hover{text-decoration-color:var(--cr-marigold)}
body.home .crd.crd .cr-nextav::after{content:"\00a0\2192" / ""}
body.home .crd.crd .cr-filter{font-weight:700;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:currentColor}
body.home .crd.crd .cr-filter:hover{text-decoration-color:var(--cr-marigold)}
body.home .crd.crd :is(.cr-promo__title,.cr-hero__title,.cr-allf__title,.cr-new__title,.cr-pop__title,.cr-cit__title,.cr-bar__title,.cr-popcard__title,.cr-barcard__name,.cr-show__title,.cr-signup__title,.cr-stat__n){font-family:'futura-pt-bold','Futura',sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:.01em}
body.home .crd.crd :is(.cr-hero__title,.cr-allf__title,.cr-new__title,.cr-pop__title,.cr-cit__title,.cr-bar__title){font-size:var(--cr-fs-h2)}
body.home .crd.crd .cr-barcard__name{font-size:var(--cr-fs-tile)}
body.home .crd.crd :is(.cr-show__title,.cr-show__title a){font-size:var(--cr-fs-h4)}
body.home .crd.crd :is(.cr-new__lede,.cr-pop__lede,.cr-cit__text,.cr-bar__lede,.cr-bar__lede span){font-size:var(--cr-fs-lede);font-weight:400}
body.home .crd.crd :is(.cr-show__meta,.cr-popcard__dates,.cr-allf__lede,.cr-allf__lede span,.cr-stat__l,.cr-barcard__note){font-size:var(--cr-fs-body);font-weight:400}
body.home .crd.crd .cr-price{font-size:var(--cr-fs-price);font-weight:900}
body.home .crd.crd :is(.cr-price__cit,.cr-price__cit span){font-size:var(--cr-fs-price);font-weight:700;color:var(--cr-green)}
body.home .crd.crd :is(.cr-fine,.cr-legend,.cr-legend span,.cr-tix__t){font-size:var(--cr-fs-fine);font-weight:400}
body.home .crd.crd :is(.cr-cal__cell,.cr-cal__cell span){font-size:var(--cr-fs-price);font-weight:900}
body.home .crd.crd :is(.cr-bookbar__label,.cr-tag,.cr-chip,.cr-rank,.cr-cattag,.cr-status,.cr-strip__dow,.cr-cal__month,.cr-cal__dow,.cr-cal__dow span,.cr-tix__w,.cr-pop__eyebrow,.cr-hero__line,.cr-doors,.cr-count),
body.home .crd.crd .cr-pop :is(.cr-rank,.cr-cattag,.cr-status){font-family:'futura-pt',sans-serif;font-weight:900;font-size:var(--cr-fs-label);letter-spacing:var(--cr-label-track);text-transform:uppercase}
body.home .crd.crd .cr-cal__cell.is-tight{border-color:var(--cr-brass);color:var(--cr-ink);background:color-mix(in srgb,var(--cr-brass) 14%,var(--cr-paper))}
body.home .crd.crd .cr-lg--tight{background:var(--cr-brass)}



/* Header: his extruded wordmark (header.php) with the tagline centred under it; nav links smaller,
   further apart and cream; What's on cream. Near-black on the homepage. */
.crd .cr-header .cr-tagline,.crd .cr-menu__bar .cr-tagline{color:var(--cr-cream)}
.crd .cr-nav{gap:0}
.crd .cr-nav a{font-size:12.5px;font-weight:700;letter-spacing:.01em;padding:10px 14px;color:var(--cream)}
.crd .cr-header .cr-whatson,.crd .cr-header .cr-whatson:hover{background:var(--cream);color:var(--ink)}
/* Search is the bare white icon, no ring (Brett, 07 Oct); hover / open turn the icon gold. */
.crd .cr-header .cr-search,.crd .cr-header .cr-search:hover,.crd .cr-header .cr-search.is-on{border:0;border-radius:0;background:transparent;color:var(--cream)}
.crd .cr-header .cr-search:hover,.crd .cr-header .cr-search.is-on{color:var(--gold)}
/* Phones and tablets: the logo sits dead centre between the burger and What's on (equal side columns). */
@media (max-width:959px){
  .crd .cr-header .cr-header__inner{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);column-gap:8px;align-items:center}
  .crd .cr-header .cr-header__inner>noscript{display:none}
  .crd .cr-header .cr-burger{grid-column:1;grid-row:1;justify-self:start}
  .crd .cr-header .cr-brand{grid-column:2;grid-row:1;justify-self:center;flex:none}
  .crd .cr-header .cr-tagline{letter-spacing:.1em}
  .crd .cr-header .cr-whatson{grid-column:3;grid-row:1;justify-self:end;box-shadow:none}
  /* What's on is a white calendar icon, the burger's size and weight (its words stay for screen readers). */
  .crd .cr-header .cr-whatson,.crd .cr-header .cr-whatson:hover{width:46px;height:46px;padding:0;gap:0;justify-content:flex-end;border-radius:0;background:transparent;color:var(--cream);box-shadow:none;transform:none}
  /* Mirrors the burger: its lines start on the left margin, so the calendar's drawn edge ends on the
     right one (the icon's box carries 3.5px of air on that side). */
  .crd .cr-header .cr-whatson .cr-ico{display:block;width:24px;height:24px;margin-right:-3.5px}
  .crd .cr-header .cr-whatson>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@media (min-width:900px){
  .crd .cr-brand{align-items:center;gap:10px}
  /* 280px: your extruded logo's 3D steps read at this size (at 206px they flattened to 1-2px). */
  .crd .cr-brand__logo{width:280px}
  .crd .cr-header.is-compact .cr-brand__logo{width:220px}
  .crd .cr-tagline{padding-left:0;font-size:8.5px;letter-spacing:.2em}
}
body.home .crd .cr-header{background:var(--cr-black)}

/* The "Get 10% off" dock (bar, peek tab, thank-you) and the footer: the near-black var(--cr-black). */
.crd .cr-signup,.crd .cr-done,.crd .cr-tab,.crd .cr-footer{background:var(--cr-black)}

/* "/ Citizens $20" and "/ Free for Citizens" are the Citizens green on every listing (Brett, 07 Oct:
   green means Citizens; 5.2:1 on paper, 4.7:1 on cream). A sold-out row's muted grey still wins
   (higher specificity in the page sheets). */
.crd span.cr-price__cit,.crd span.ev-when__cit{color:var(--cr-green)}

/* Buy is one colour everywhere: every ticket stub (night cards, Most booked, What's on rows, the show
   page's Book button, the Bar page's what's-on stub) is gold with ink type and a dark-gold step. The
   waitlist stub keeps its grey (later the outline stub). Join Citizens became marigold (sign-up). */
.crd .cr-tix:not(.cr-tix--wait),.crd .ev-buy:not(.ev-buy--wait),.crd .pg-tix,.crd .cr-tix:not(.cr-tix--wait):hover,.crd .ev-buy:not(.ev-buy--wait):hover,.crd .pg-tix:hover,.crd .cr-tix:not(.cr-tix--wait):active,.crd .ev-buy:not(.ev-buy--wait):active,.crd .pg-tix:active{filter:none;transform:none}
.crd .cr-tix:not(.cr-tix--wait) .cr-tix__body,.crd .ev-buy:not(.ev-buy--wait) .ev-buy__body,.crd .pg-tix__body{background:var(--gold);color:var(--ink)}
.crd .cr-tix:not(.cr-tix--wait) .cr-tix__body::before,.crd .ev-buy:not(.ev-buy--wait) .ev-buy__body::before,.crd .pg-tix__body::before{border-left-color:rgba(46,45,42,.4)}
/* All future dates' calendar button matches. */

/* No 3D heading effects: the extrudes on display type, tile initials and show-art titles go. */
.crd .cr-x-light,.crd .cr-x-ink,.crd .cr-x-sm,.crd .ct-pass__price,.crd .bf-hero__title,.crd .cr-popart__type,.crd .ct-show__type,.crd .cr-art__ini,.crd .cr-sp__ini,.crd .yv-steps__n{text-shadow:none}

/* The menu fly-out takes the same scheme (Brett, 07 Oct): a var(--cr-black) bar laid out like the phone header
   (close, logo dead centre, a white calendar icon on the right margin), and its two buttons, What's on
   tonight and Sign up, in the brand gold with ink type. */
.crd .cr-menu__bar::before{background:var(--cr-black)}
.crd .cr-menu__bar{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);column-gap:8px;align-items:center}
.crd .cr-menu__bar .cr-burger{grid-column:1;grid-row:1;justify-self:start;color:var(--cream)}
.crd .cr-menu__bar .cr-brand{grid-column:2;grid-row:1;justify-self:center;flex:none}
.crd .cr-menu__bar .cr-tagline{letter-spacing:.1em}
.crd .cr-menu__bar .cr-whatson,.crd .cr-menu__bar .cr-whatson:hover{grid-column:3;grid-row:1;justify-self:end;width:46px;height:46px;padding:0;gap:0;justify-content:flex-end;border-radius:0;background:transparent;color:var(--cream);box-shadow:none;transform:none}
.crd .cr-menu__bar .cr-whatson .cr-ico{display:block;width:24px;height:24px;margin-right:-3.5px}
.crd .cr-menu__bar .cr-whatson>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.crd .cr-msign__btn{background:var(--gold);color:var(--ink)}

/* One marigold button (Brett, 07 Oct): every gold button and ticket stub, and the header's What's on,
   has the sm corner (--cr-radius-btn, now 6px) and no shadow, like the billboard's Tickets stub; hover
   takes the marigold hover. */
.crd .cr-btn--gold,.crd .cr-msign__btn,.crd .cr-submit,.crd .cr-ftform__btn,.crd .cr-header .cr-whatson,.crd .cr-header.is-compact .cr-whatson{border-radius:var(--cr-radius-btn);box-shadow:none;transform:none}
.crd .cr-btn--gold:hover,.crd .cr-msign__btn:hover,.crd .cr-submit:hover,.crd .cr-ftform__btn:hover,.crd .cr-header .cr-whatson:hover,.crd .cr-header.is-compact .cr-whatson:hover{box-shadow:none;transform:none}
.crd .cr-btn--gold:hover,.crd .cr-msign__btn:hover,.crd .cr-submit:hover,.crd .cr-ftform__btn:hover{background:var(--cr-marigold-hover)}
@media (min-width:960px){
  .crd .cr-header.is-compact .cr-whatson:hover{background:var(--cr-marigold-hover)}
}
.crd .cr-tix__body,.crd .ev-buy__body,.crd .pg-tix__body{border-radius:var(--cr-radius-btn)}

/* Brett's consistency pass (07 Oct), everywhere:
   - one cream and one ink: light text is cream #F5F0D3 (ivory folds into it), dark text ink #2E2D2A
     (var(--cr-black) is for surfaces only); the header's whites are cream too (above).
   - secondary buttons are the sm-corner (6px) hairline outline, like the gold ones' shape;
   - status pills are full-round with no shadow (LIVE TONIGHT, day tags, #1 Most booked, Doors, the
     Selling fast / Last tickets chips); the small square category tags are the only other shape;
   - green leaves the type: links are ink, the status words muted ink, a green dot still says
     "available";
   - every small-caps label tracks at 0.15em.
   .crd.crd lifts these over the page sheets' and earlier per-width rules. */
.crd.crd .cr-btn--ghost,.crd.crd .cr-btn--outline,.crd.crd .cr-pill{border:0;border-radius:var(--cr-radius-btn);background:transparent;box-shadow:inset 0 0 0 1px currentColor;transform:none}
.crd.crd .cr-btn--outline,.crd.crd .cr-pill{color:var(--ink)}
.crd.crd .cr-btn--outline:hover,.crd.crd .cr-pill:hover{background:var(--ink);color:var(--cream);box-shadow:inset 0 0 0 1px var(--ink)}
.crd.crd .cr-tag,.crd.crd .cr-rank,.crd.crd .cr-doors,.crd.crd .cr-chip{border-radius:var(--cr-radius-pill);box-shadow:none}
.crd.crd .cr-chip{padding:0 10px}
.crd.crd .cr-chip::after{display:none}
.crd.crd .cr-filter,.crd.crd .cr-filter:hover{color:var(--ink)}
.crd.crd .cr-status{color:var(--muted)}
.crd.crd .cr-status--ok i{background:var(--green)}
.crd.crd .cr-status--fast i{background:var(--cr-brass)}
.crd.crd :is(.cr-tag,.cr-rank,.cr-bookbar__label,.cr-hero__line,.cr-cal__month,.cr-cattag,.cr-chip,.cr-ftform__label,.cr-msign__label,.cr-pass__t,.cr-sp__label,.cr-tagline,.cr-tix__w,.cr-tab,.cr-count,.cr-strip__dow,.bf-today,.ct-pass__kicker,.ev-stub__label,.wo-cell__dark,.wo-when,.yv-steps__l,.yv-toc__label,.pg-fact dt){letter-spacing:var(--cr-label-track)}

/* What's on in the desktop header is a nav item, not a button (Brett, 07 Oct): where it was, in the
   nav links' type (12.5px / 700, cream) with the calendar icon at the search icon's size and weight,
   the same hover tint as the links; scrolled (compact) it stays a nav item too. */
@media (min-width:960px){
  .crd.crd .cr-header .cr-whatson,.crd.crd .cr-header.is-compact .cr-whatson{height:auto;gap:8px;margin-left:4px;padding:10px 14px;border-radius:var(--cr-radius-pill);background:transparent;color:var(--cr-cream);font-size:12.5px;font-weight:700;letter-spacing:.01em;box-shadow:none;transform:none}
  .crd.crd .cr-header .cr-whatson:hover,.crd.crd .cr-header.is-compact .cr-whatson:hover{background:transparent;color:var(--cr-marigold);box-shadow:none;transform:none}
  .crd.crd .cr-header .cr-whatson .cr-ico{width:18px;height:18px;stroke-width:2.2}
  /* The words first, then the calendar icon. */
  .crd.crd .cr-header .cr-whatson{flex-direction:row-reverse}
}

/* Nav links: no hover pill; hover turns a link marigold (Brett, 07 Oct). The current page is cream
   with a 1px cream underline at 4px, never marigold text (Brett, 08 Oct: What's on's state, now on
   every page). .crd.crd.crd ties with the page sheets' own current-page underlines (Bar's 2px
   marigold one at 8px, Citizens', Your Visit's, What's on's) and wins as the later sheet (functions.php
   loads components.css after the page's); What's on in the header stays cream without one. */
.crd.crd .cr-nav a:hover{background:transparent;color:var(--cr-marigold);text-decoration:none}
.crd.crd.crd .cr-nav a[aria-current]{background:transparent;color:var(--cr-cream);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:var(--cr-cream)}
.crd.crd.crd .cr-nav a[aria-current]:hover{color:var(--cr-marigold)}
@media (min-width:960px){
  .crd.crd .cr-header .cr-whatson[aria-current]{color:var(--cr-cream)}
  .crd.crd .cr-header .cr-whatson[aria-current]:hover{color:var(--cr-marigold)}
}

/* ---- Shared: components printed on more than one page (proposed by two or more groups) ---- */

/* Waitlist stubs (homepage night cards, What's on rows): no drop-shadow step or press; grey and notches kept. */
.crd.crd .cr-tix--wait,.crd.crd .cr-tix--wait:hover,.crd.crd .cr-tix--wait:active{filter:none;transform:none}
/* Last tickets chip (night cards, What's on rows, event hero flag, Bar): cream type on oxblood (was #FFF6E0). */
.crd.crd .cr-chip--last{color:var(--cr-cream)}
/* Gold buttons don't jump on press either (the page sheets' :active nudge outranked "One marigold button"). */
.crd.crd .cr-btn--gold:active{transform:none;box-shadow:none}
/* The M mark on every pass (homepage Citizens band, Citizens, Gift cards) reads cream, not sepia gold. */

/* Chrome on every page: the search panel's links and the menu's sign-up confirmation are ink, the
   footer form's confirmation cream (it sits on black); search results are paper cards. */
.crd.crd .cr-sp__all,.crd.crd .cr-sp__all:hover,.crd.crd .cr-sp__empty a,.crd.crd .cr-msign__done{color:var(--cr-ink)}
.crd.crd .cr-ftform__done{color:var(--cr-cream)}
.crd.crd .cr-sp__item{border-radius:var(--cr-radius-card);background:var(--cr-paper)}


/* ==== Polish pass (Brett, 07 Oct): one radius scale, three button styles, one type scale. The
   homepage's own scale rules are in the Home components section above; these are the parts every page
   shares. ==== */

/* Primary (marigold): only for what converts. Here: Sign up in the footer, the dock's Get 10% and the
   menu's sign-up. Lato 900 15px, 54px tall, 0 22px, the sm corner, no border or shadow. */
.crd.crd :is(.cr-ftform__btn,.cr-submit,.cr-msign__btn){height:var(--cr-btn-h);padding:0 22px;border:0;border-radius:var(--cr-radius-sm);background:var(--cr-marigold);color:var(--cr-ink);font-family:'futura-pt',sans-serif;font-weight:900;font-size:var(--cr-fs-btn);box-shadow:none}
.crd.crd :is(.cr-ftform__btn,.cr-submit,.cr-msign__btn):hover{background:var(--cr-marigold-hover)}
/* The inputs beside them: 54px (on a phone's stuck dock too), the sm corner, Lato 16px. */
.crd.crd :is(.cr-ftform__input,.cr-input,.cr-msign__input){height:var(--cr-btn-h);border-radius:var(--cr-radius-sm);font-family:'futura-pt',sans-serif;font-size:var(--cr-fs-input)}
.crd.crd .cr-dock.is-stuck :is(.cr-submit,.cr-input){height:var(--cr-btn-h)}
/* The dock's dismiss takes the sm corner too. (The search panel is its own block, at the end.) */
.crd.crd .cr-close{border-radius:var(--cr-radius-sm)}

/* Secondary (outline): transparent, a 1px border, Lato 900 15px, 54px, the sm corner. On cream: ink
   text and border, a 6% ink wash on hover; on dark: cream text, a 40% cream border, full border and a
   6% cream wash on hover. The menu's What's on (on the cream menu panel) is on cream; the dock's
   dismiss is on dark. */
.crd.crd .cr-menu__cta,.crd.crd .cr-menu__cta:hover{height:var(--cr-btn-h);padding:0 22px;border:1px solid var(--cr-ink);border-radius:var(--cr-radius-sm);background:transparent;color:var(--cr-ink);font-weight:900;font-size:var(--cr-fs-btn);box-shadow:none;transform:none}
.crd.crd .cr-menu__cta:hover{background:color-mix(in srgb,var(--cr-ink) 6%,transparent);color:var(--cr-ink)}
.crd.crd .cr-close{border:1px solid color-mix(in srgb,var(--cr-cream) 40%,transparent)}
.crd.crd .cr-close:hover{border-color:var(--cr-cream);background:color-mix(in srgb,var(--cr-cream) 6%,transparent)}
/* One tracking for every button's label. */
.crd.crd :is(.cr-btn,.cr-tix__body,.cr-promo__cta,.cr-promo__cta span,.cr-ftform__btn,.cr-submit,.cr-msign__btn,.cr-menu__cta){letter-spacing:.02em}

/* The skip link (keyboard only): the sm corner, ink with cream type (marigold is for buying). */
.cr-skip:focus{border-radius:var(--cr-radius-sm);background:var(--cr-ink);color:var(--cr-cream)}
/* It sits outside .crd, so it names the type itself (the home sheet never did: it fell to Times). */
.cr-skip{font-family:var(--cr-font-body);font-weight:700}

/* Text link: no box. Lato 700 14px, a 1px underline 4px below; ink on light, cream on dark; the
   underline turns marigold on hover. (.cr-pop__all, Most booked's "Everything on", is the reference.) */
.crd.crd .cr-link{display:inline-block;padding:0;border:0;background:none;font-family:'futura-pt',sans-serif;font-weight:700;font-size:var(--cr-fs-link);line-height:1.4;color:var(--cr-ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:currentColor;box-shadow:none}
.crd.crd .cr-link:hover{text-decoration-color:var(--cr-marigold)}
/* The search panel's "Browse the full calendar" and the footer's links are text links too (cream on the
   footer); the legal links keep the fine-print size. */
.crd.crd .cr-sp__all,.crd.crd .cr-sp__all:hover{padding:0;margin:0;font-weight:700;font-size:var(--cr-fs-link);color:var(--cr-ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:currentColor}
.crd.crd .cr-footer__links a{font-weight:700;font-size:var(--cr-fs-link);background:none;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:currentColor}
.crd.crd .cr-footer__legal a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:currentColor}
.crd.crd :is(.cr-sp__all,.cr-footer__links a,.cr-footer__legal a):hover{text-decoration-color:var(--cr-marigold)}

/* Header nav links and What's on are text now: no corner left on them. */
.crd.crd .cr-nav a{border-radius:0}
@media (min-width:960px){
  .crd.crd .cr-header .cr-whatson,.crd.crd .cr-header.is-compact .cr-whatson{border-radius:0}
}

/* Footer on the type scale: links and address body size, the legal line fine print, the form label a label. */
.crd.crd .cr-footer__addr{font-size:var(--cr-fs-body)}
.crd.crd :is(.cr-footer__base,.cr-footer__base span,.cr-footer__legal a){font-size:var(--cr-fs-fine)}
.crd.crd :is(.cr-ftform__label,.cr-msign__label){font-size:var(--cr-fs-label);font-weight:900;letter-spacing:var(--cr-label-track);text-transform:uppercase}
/* The menu on the scale: its names h2 and their notes body, the name underlined marigold on hover. */
.crd.crd .cr-menu__label{font-size:var(--cr-fs-h2)}
.crd.crd .cr-menu__desc{font-size:var(--cr-fs-body)}
.crd.crd .cr-menu__item:hover .cr-menu__label{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:var(--cr-marigold)}
/* Form messages: errors and notes fine print, the thank-you h3, its line body. */
.crd.crd :is(.cr-err,.cr-ftform__note,.cr-msign__note){font-size:var(--cr-fs-fine)}
/* The menu sign-up's note is muted ink (it was oxblood, which is for urgency only). */
.crd.crd .cr-msign__note{color:var(--cr-ink-muted)}
.crd.crd :is(.cr-done__msg,.cr-ftform__done,.cr-msign__done){font-size:var(--cr-fs-h3);letter-spacing:.01em}
.crd.crd .cr-done__sub{font-size:var(--cr-fs-body)}
/* The dock: its title on h3 whether it's stuck to the screen's foot or resting open; its line body
   size; the phone's bar ("Get 10% off your first booking") a label. */
.crd.crd .cr-dock .cr-signup__title,.crd.crd .cr-dock.is-stuck .cr-signup__title{font-size:var(--cr-fs-h3)}
.crd.crd .cr-signup__sub{font-size:var(--cr-fs-body)}
.crd.crd .cr-tab{font-size:var(--cr-fs-label);letter-spacing:var(--cr-label-track);box-shadow:none}
.crd.crd .cr-tab:hover{background:color-mix(in srgb,var(--cr-cream) 6%,var(--cr-black))}
/* Its top rule is brass, not marigold (marigold is for buying). */
.crd.crd .cr-signup::before{background:var(--cr-brass)}

/* ==== Search panel (Brett, 07 Oct): the header's search drops a dark panel, not a cream one; the
   menu's search (under 960px) takes the same field, label, cards and notes. Markup:
   template-parts/components/search-panel.php, menu-dialog.php; cards: inc/chrome.php cr_nav_search_item_html()
   and design.js. The 404's picks reuse the cards on cream. ==== */

/* The panel: laid over the page just under the (sticky) header, so nothing behind it moves; near-black,
   a faint cream rule at its foot, the page dimmed behind it (a spread shadow, clipped above the panel
   so the header stays clear), 48px top and bottom. A focused card keeps room for its ring when the
   panel scrolls. */
.crd.crd .cr-sp{position:absolute;top:100%;left:0;right:0;scroll-padding-block:12px;border-top:0;border-bottom:1px solid rgba(245,240,211,.12);background:var(--cr-black);background-image:none;color:var(--cr-cream);box-shadow:0 0 0 100vmax rgba(15,14,12,.7);clip-path:inset(0 -100vmax -100vmax -100vmax)}
.crd.crd .cr-sp > .cr-wrap{padding:48px 0}
@media (max-width:959px){
  .crd.crd .cr-sp > .cr-wrap{padding:24px 0}
}
@media (prefers-reduced-motion:reduce){
  .crd.crd .cr-sp{animation:none}
}
/* (With search open, the homepage header turns near-black: design-home.css 31.) */

/* The field and Close on one line. The field: 54px, the sm corner, raised black, a 28% cream line;
   Lato 18px cream, the placeholder at 55%, the magnifier at 70%. Focused: the line at 60% and a cream
   ring (never marigold). */
.crd.crd .cr-sp__row{display:flex;align-items:center;gap:24px}
.crd.crd :is(.cr-sp__input,.cr-ms__input){height:var(--cr-btn-h);padding:0 16px 0 48px;border:1px solid rgba(245,240,211,.28);border-radius:var(--cr-radius-sm);background:var(--cr-black-raised);color:var(--cr-cream);font-family:'futura-pt',sans-serif;font-weight:400;font-size:18px;box-shadow:none}
.crd.crd :is(.cr-sp__input,.cr-ms__input)::placeholder{color:color-mix(in srgb,var(--cr-cream) 55%,transparent);opacity:1}
.crd.crd :is(.cr-sp__input,.cr-ms__input):focus{outline:none;border-color:rgba(245,240,211,.6);box-shadow:none}
.crd.crd :is(.cr-sp__input,.cr-ms__input):focus-visible,.crd.crd .cr-sp .cr-sp__input:focus-visible{outline:3px solid var(--cr-cream);outline-offset:3px;border-color:rgba(245,240,211,.6);box-shadow:none}
.crd.crd :is(.cr-sp__field,.cr-ms__field) .cr-sp__ico{left:16px;width:20px;height:20px;margin-top:-10px;color:color-mix(in srgb,var(--cr-cream) 70%,transparent)}
/* Every other control in the panel and the menu's search: the same cream ring. */
.crd.crd :is(.cr-sp,.cr-ms) :focus-visible{outline:3px solid var(--cr-cream);outline-offset:3px;box-shadow:none}

/* Close and Browse the full calendar: cream text links (700 14px, 1px underline 4px below, marigold
   on hover), not boxes. Close's × is text; the calendar link's → is drawn here. */
.crd.crd .cr-sp :is(.cr-sp__close,.cr-sp__all),.crd.crd .cr-sp :is(.cr-sp__close,.cr-sp__all):hover{display:inline-block;height:auto;line-height:1.4;margin:0;padding:0;border:0;border-radius:0;background:none;color:var(--cr-cream);font-family:'futura-pt',sans-serif;font-weight:700;font-size:var(--cr-fs-link);letter-spacing:0;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:currentColor;box-shadow:none;transform:none;white-space:nowrap;cursor:pointer}
.crd.crd .cr-sp :is(.cr-sp__close,.cr-sp__all):hover{text-decoration-color:var(--cr-marigold)}
/* The × and → sit outside the underline (an inline-block inside inline text isn't underlined). */
.crd.crd .cr-sp .cr-sp__close span{display:inline-block;margin-left:.35em}
.crd.crd .cr-sp .cr-sp__all::after{content:"\2192" / "";display:inline-block;margin-left:.35em}

/* The label row: MOST BOOKED RIGHT NOW / N SHOWS MATCH in brass (6.6:1 on the black), the calendar
   link at the right. */
.crd.crd .cr-sp__meta{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-top:32px}
.crd.crd :is(.cr-sp,.cr-ms) .cr-sp__label{margin:0;font-family:'futura-pt',sans-serif;font-weight:900;font-size:var(--cr-fs-label);line-height:1.2;letter-spacing:var(--cr-label-track);text-transform:uppercase;color:var(--cr-brass)}

/* The cards: three across from 1100px, two from 700px, one below; 16px apart. Paper, the lg corner,
   the card shadow, 12px in, at least 80px tall; the whole card is the link. Hover lifts 2px and turns
   the arrow marigold; a sold-out show sits at 55%. */
.crd.crd .cr-sp__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin-top:16px}
@media (min-width:700px){
  .crd.crd .cr-sp__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1100px){
  .crd.crd .cr-sp__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.crd.crd .cr-sp__item{display:flex;align-items:center;gap:14px;min-width:0;min-height:80px;padding:12px;border:0;border-radius:var(--cr-radius-lg);background:var(--cr-paper);color:var(--cr-ink);box-shadow:var(--cr-shadow-card);text-decoration:none;transition:transform .2s ease}
.crd.crd .cr-sp__item:hover{border:0;color:var(--cr-ink);transform:translateY(-2px)}
.crd.crd .cr-sp__item{scroll-margin-block:8px}
.crd.crd .cr-sp__item.is-sold{opacity:.55}
.crd.crd .cr-sp__item.is-sold:focus-visible{opacity:1}
@media (prefers-reduced-motion:reduce){
  .crd.crd .cr-sp__item,.crd.crd .cr-sp__item:hover{transition:none;transform:none}
}
/* The thumbnail: 56px, the sm corner, the show's photo cropped to fill; with none, its initials in
   cream on black (never the coloured tiles). */
.crd.crd .cr-sp__art{flex:none;width:56px;height:56px;border-radius:var(--cr-radius-sm);background-color:var(--cr-black);background-size:cover;background-position:center;background-repeat:no-repeat;color:var(--cr-cream)}
.crd.crd .cr-sp__art::before{display:none}
.crd.crd .cr-sp__ini{font-family:'futura-pt-bold','Futura',sans-serif;font-weight:800;font-size:18px;line-height:1;letter-spacing:.01em;color:var(--cr-cream);text-shadow:none}
.crd.crd .cr-sp__txt{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}
/* Title: Guess Sans 800 16px, two lines at most with an ellipsis. Meta: Lato 13px, muted ink. */
.crd.crd .cr-sp__title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;font-family:'futura-pt-bold','Futura',sans-serif;font-weight:800;text-transform:uppercase;font-size:16px;line-height:1.1;letter-spacing:.01em;color:var(--cr-ink)}
.crd.crd .cr-sp__when{font-family:'futura-pt',sans-serif;font-weight:400;font-size:13px;line-height:1.35;color:var(--cr-ink-muted)}
/* Price ($22 900 ink, / Citizens $20 700 green) and the Selling fast / Sold out chip. */
.crd.crd .cr-sp__foot{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:2px}
.crd.crd .cr-sp__foot .cr-price{font-family:'futura-pt',sans-serif;font-weight:900;font-size:var(--cr-fs-price);line-height:1.3;color:var(--cr-ink)}
.crd.crd .cr-sp__foot .cr-price__cit{font-weight:700;color:var(--cr-green)}
.crd.crd .cr-sp__foot .cr-chip{display:inline-flex;align-items:center;height:22px;padding:0 10px;border-radius:var(--cr-radius-pill);font-family:'futura-pt',sans-serif;font-weight:900;font-size:var(--cr-fs-label);line-height:1;letter-spacing:var(--cr-label-track);text-transform:uppercase;box-shadow:none}
.crd.crd .cr-sp__foot .cr-chip--fast{background:var(--cr-brass);color:var(--cr-ink)}
.crd.crd .cr-sp__foot .cr-chip--sold{background:var(--cr-ink);color:var(--cr-cream)}
/* The arrow: a plain →, ink at 70%, centred at the right; marigold on hover. */
.crd.crd .cr-sp__go{flex:none;width:auto;height:auto;font-family:'futura-pt',sans-serif;font-weight:700;font-size:18px;line-height:1;color:color-mix(in srgb,var(--cr-ink) 70%,transparent);transition:color .2s;transform:none}
.crd.crd .cr-sp__item:hover .cr-sp__go{color:var(--cr-marigold);transform:none}

/* No match / nothing on: cream 18px, centred, 48px around; the link under it (a cream text link with
   its →). The label row above it goes, so the note speaks alone. */
.crd.crd .cr-sp__results:has(.cr-sp__empty) .cr-sp__meta,.crd.crd .cr-ms__results:has(.cr-sp__empty) .cr-sp__label{display:none}
.crd.crd :is(.cr-sp,.cr-ms) .cr-sp__empty{margin:16px 0 0;padding:48px 16px;border:0;border-radius:0;background:none;text-align:center;font-family:'futura-pt',sans-serif;font-weight:400;font-size:18px;line-height:1.5;color:var(--cr-cream)}
.crd.crd :is(.cr-sp,.cr-ms) .cr-sp__empty a{display:table;margin:10px auto 0;font-weight:700;font-size:var(--cr-fs-link);color:var(--cr-cream);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.crd.crd :is(.cr-sp,.cr-ms) .cr-sp__empty a:hover{text-decoration-color:var(--cr-marigold)}
.crd.crd :is(.cr-sp,.cr-ms) .cr-sp__empty a::after{content:"\2192" / "";display:inline-block;margin-left:.35em}

/* The menu's search (under 960px): a near-black band under the menu's bar, so the field, label,
   cards and notes are the panel's; one column, 12px cards, 48px thumbnails. */
.crd.crd .cr-ms{position:relative;isolation:isolate;margin-top:0;padding:24px 0}
.crd.crd .cr-ms::before{content:'';position:absolute;z-index:-1;top:0;bottom:0;left:calc(50% - 50vw);right:calc(50% - 50vw);background:var(--cr-black)}
.crd.crd .cr-ms__results{display:flex;flex-direction:column;gap:12px;margin-top:16px}
.crd.crd .cr-ms__results[hidden]{display:none}
.crd.crd .cr-ms__results .cr-sp__item{padding:12px}
.crd.crd .cr-ms__results .cr-sp__art{width:48px;height:48px;border-radius:var(--cr-radius-sm)}
.crd.crd .cr-ms__results .cr-sp__ini{font-size:16px}
.crd.crd .cr-ms__results .cr-sp__empty{margin-top:0}

/* Phones and tablets carry the full logo, wordmark and tagline (Brett, 23 Oct: back as before 21 Oct). */


/* Dashed lines on 3x phones (Brett, 23 Oct: the ticket stubs' perforation "gone" on mobile): Safari
   draws a 1.5px dashed border on a 3x screen as one dot, so there they print at 1px. */
@media (-webkit-min-device-pixel-ratio:2.5),(min-resolution:2.5dppx){
  .crd :is(.cr-tix__body,.cr-promo__cta)::before{border-left-width:1px !important}
  .crd :is(.cr-sp__empty,.ev-house,.ev-lg--sold,.wo-empty){border-width:1px !important}
}

/* Futura PT at the designs' sizes (Brett, 23 Oct): every size on the site was set for Lato, whose
   lowercase stands taller (x-height .51 of the size against Futura PT Book's .42), so Futura read a
   step small. font-size-adjust scales each face to a .47 x-height: body text lands where Lato's lines
   broke (pages measured within a few px of their Lato heights) and headings gain ~4%, nearer Guess
   Sans's caps. The script faces keep their own size. */
:root{font-size-adjust:.47}
.crd :is(.cr-script,.bf-type__b,.ev-typetile__b,.cr-typetile__b){font-size-adjust:none}