@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=Barlow:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

/* ============================================================
   NORTH WEST CARD SHOW - teaser site
   Black + gold (#F0BD4C). Black carries the identity; gold and
   cream bands break the scroll so it never reads as one long
   dark tunnel. Gold on black is 12:1 - it does real work here.
   ============================================================ */

:root {
  color-scheme: dark;

  /* warm blacks - a cool black is what made the last pass feel dingy */
  --ink:        #0C0B09;
  --ink-2:      #16140F;
  --ink-3:      #211D15;
  --line:       #342F22;
  --line-soft:  #4A422F;

  --gold:       #F0BD4C;
  --gold-hi:    #FFD87A;
  --gold-deep:  #8A6410;

  --paper:      #FBF8F1;
  --paper-dim:  #DAD3C4;
  --muted:      #9A927F;

  --cream:      #F7F2E6;
  --cream-2:    #EFE7D4;
  --cream-line: #DCD1B6;
  --cream-ink:  #17140E;
  --cream-mut:  #6B6252;

  --foil: linear-gradient(115deg,
    #F0BD4C 0%, #FFE9A8 20%, #F0BD4C 42%,
    #C89321 62%, #FFD87A 82%, #F0BD4C 100%);

  --font-display: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  --font-body: 'Barlow', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Courier New', monospace;

  --pad: clamp(20px, 5vw, 64px);
  --maxw: 1240px;

  --t: 200ms cubic-bezier(.2, .7, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

::selection { background: var(--gold); color: var(--ink); }

/* ---------- type ---------- */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.015em;
  line-height: 0.92;
  margin: 0;
  text-wrap: balance;
}

.h-hero  { font-size: clamp(3.4rem, 12vw, 9.5rem); }
.h-1     { font-size: clamp(2.6rem, 7.5vw, 6rem); }
.h-2     { font-size: clamp(1.9rem, 4.2vw, 3.4rem); }
.h-3     { font-size: clamp(1.35rem, 2.4vw, 1.9rem); letter-spacing: 0; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: clamp(1.05rem, 1.9vw, 1.4rem);
  line-height: 1.5;
  color: var(--paper-dim);
  max-width: 46ch;
}

.label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin-bottom: 1.1rem;
}
.label--muted { color: var(--muted); }

.body-dim { color: var(--paper-dim); max-width: 62ch; }

.gold-text { color: var(--gold); }

/* ---------- layout ---------- */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad);
}

section { position: relative; }

.band {
  padding-block: clamp(64px, 10vw, 132px);
  border-top: 1px solid var(--line);
}
.band--tight { padding-block: clamp(44px, 6vw, 72px); }
.band--flush { border-top: none; }

.grid { display: grid; gap: clamp(20px, 3vw, 36px); }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.split {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}

/* ---------- skip link ---------- */

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--gold);
  color: var(--ink);
  padding: 12px 20px;
  font-weight: 600;
}
.skip:focus { left: 0; }

/* ---------- header ---------- */

.hdr {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(12, 11, 9, 0.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.hdr__in { display: flex; align-items: center; gap: 24px; min-height: 68px; }

.lockup {
  display: flex; align-items: center; gap: 11px;
  text-decoration: none; margin-right: auto; flex-shrink: 0;
}

/* the real NWCS roundel - circular PNG with a transparent surround,
   so it drops onto black, cream or gold without a plate behind it */
.lockup__mark {
  width: 40px; height: 40px; flex: none;
  display: block;
  transition: transform var(--t);
}
.lockup:hover .lockup__mark { transform: scale(1.07); }

.lockup--lg .lockup__mark { width: 60px; height: 60px; }
.lockup--lg .lockup__txt { font-size: 1.24rem; }

.lockup__txt {
  font-family: var(--font-display);
  font-weight: 700; text-transform: uppercase;
  font-size: 1.02rem; line-height: 1.02;
}
.lockup__txt span {
  display: block; color: var(--gold);
  font-size: 0.72rem; letter-spacing: 0.14em; font-weight: 500;
}

.nav { display: flex; align-items: center; gap: 4px; }

/* :not(.btn) throughout - otherwise .nav a (0,2,0) outranks .btn--primary
   (0,1,0) and paints dim grey text onto the gold Tickets button. */
.nav a:not(.btn) {
  font-family: var(--font-display);
  text-transform: uppercase; font-weight: 600;
  font-size: 1.02rem; letter-spacing: 0.03em;
  text-decoration: none; padding: 10px 14px;
  color: var(--paper-dim);
  position: relative;
  transition: color var(--t);
}
.nav a:not(.btn):hover { color: var(--paper); }
.nav a:not(.btn)::after {
  content: '';
  position: absolute;
  left: 14px; right: 14px; bottom: 4px;
  height: 2px; background: var(--gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t);
}
.nav a:not(.btn):hover::after,
.nav a:not(.btn)[aria-current="page"]::after { transform: scaleX(1); }
.nav a:not(.btn)[aria-current="page"] { color: var(--paper); }

.burger {
  display: none;
  width: 44px; height: 44px;
  background: none;
  border: 1px solid var(--line-soft);
  color: var(--paper);
  cursor: pointer; padding: 0; place-items: center;
}
.burger svg { width: 20px; height: 20px; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 9px; min-height: 48px; padding: 12px 24px;
  font-family: var(--font-display);
  font-weight: 700; text-transform: uppercase;
  font-size: 1.08rem; letter-spacing: 0.03em;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background var(--t), color var(--t), border-color var(--t), transform var(--t);
  white-space: nowrap;
}
.btn svg { width: 17px; height: 17px; flex: none; }

/* gold fill always takes ink text - paper on gold is 1.3:1 */
.btn--primary { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.btn--primary:hover { background: var(--gold-hi); border-color: var(--gold-hi); color: var(--ink); }

.btn--ghost { border-color: var(--line-soft); color: var(--paper); }
.btn--ghost:hover { border-color: var(--gold); color: var(--gold); }

.btn--onGold { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn--onGold:hover { background: transparent; color: var(--ink); border-color: var(--ink); }

.btn--onLight { background: var(--cream-ink); color: var(--cream); border-color: var(--cream-ink); }
.btn--onLight:hover { background: var(--gold); color: var(--ink); border-color: var(--gold); }

.btn--sm { min-height: 40px; padding: 8px 16px; font-size: 0.95rem; }
.btn:active { transform: translateY(1px); }

:where(a, button, input, textarea, select, summary):focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 2rem; }

/* ---------- hero ---------- */

.hero {
  position: relative;
  padding-block: clamp(56px, 9vw, 118px) clamp(48px, 7vw, 92px);
  overflow: hidden;
}
.hero__in { position: relative; z-index: 2; }
.hero h1 { margin-bottom: 1.6rem; }
.hero h1 em {
  font-style: normal;
  display: block;
  background: var(--foil);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: foil 9s linear infinite;
}
@keyframes foil { to { background-position: 220% 0; } }

/* real show photography behind the hero. The scrim is two gradients:
   one across (keeps the headline on near-solid ink), one down (anchors
   the header and the ticker edge). */
.hero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 64% 44%;
  opacity: .54;
  filter: saturate(.92) contrast(1.04);
}
.hero__bg::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(96deg, var(--ink) 3%, rgba(12,11,9,.9) 31%, rgba(12,11,9,.3) 66%, rgba(12,11,9,.62) 100%),
    linear-gradient(180deg, rgba(12,11,9,.74) 0%, rgba(12,11,9,0) 26%, rgba(12,11,9,.92) 100%);
}
.hero--shot { padding-block: clamp(70px, 11vw, 146px) clamp(60px, 9vw, 116px); }

/* ---------- photographic bands ----------
   Same idea as the hero, dialled right down: the photo is texture behind
   the type, not a picture. Content sits above it on its own layer.       */
.band--shot { overflow: hidden; }
.band--shot > .wrap { position: relative; z-index: 1; }

.band__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
/* ONE veil gradient, not two stacked - two multiply out to near-solid black
   and the photograph disappears. Heaviest at the left where the headline
   sits, lightest on the right where the picture can breathe. */
.band__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 60% 46%;
  filter: saturate(.82) brightness(.86);
}
.band__bg::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(96deg,
    rgba(12,11,9,.94) 0%,
    rgba(12,11,9,.85) 30%,
    rgba(12,11,9,.66) 62%,
    rgba(12,11,9,.73) 100%);
}

/* content-dense bands (the ticket table, the floorplan) sit further back
   so nothing competes with the thing you actually have to read */
.band--shot-faint .band__bg img { filter: saturate(.75) brightness(.8); }
.band--shot-faint .band__bg::after {
  background: linear-gradient(96deg,
    rgba(12,11,9,.95) 0%,
    rgba(12,11,9,.9) 34%,
    rgba(12,11,9,.84) 100%);
}

/* the stats strip is short - even veil, no left-to-right drama */
.stats.band--shot .band__bg::after {
  background: linear-gradient(180deg, rgba(12,11,9,.88), rgba(12,11,9,.8) 50%, rgba(12,11,9,.9));
}
.stats.band--shot > .wrap { position: relative; z-index: 1; }

.hero--short { padding-block: clamp(44px, 6vw, 84px) clamp(36px, 5vw, 64px); }

/* photo bled to the panel edges */
.panel__img {
  display: block;
  width: calc(100% + 2 * clamp(24px, 3vw, 36px));
  max-width: none;            /* the img reset's max-width:100% cancels the bleed */
  height: 250px;              /* explicit - aspect-ratio alone let these run tall */
  margin: calc(-1 * clamp(24px, 3vw, 36px)) calc(-1 * clamp(24px, 3vw, 36px)) clamp(20px, 2.4vw, 28px);
  object-fit: cover;
}

/* standalone photo inside a text column */
.shot {
  display: block;
  width: 100%;
  height: 380px;              /* explicit - aspect-ratio alone let it run tall */
  max-height: 46vh;
  object-fit: cover;
  border: 1px solid var(--line-soft);
  margin-bottom: 1.7rem;
}
.band--light .shot { border-color: var(--cream-line); }

/* ---------- ticker ---------- */

.ticker {
  border-block: 1px solid var(--line);
  background: var(--ink-2);
  overflow: hidden;
  padding-block: 13px;
  display: flex;
}
.ticker__track {
  display: flex; gap: 44px; padding-right: 44px;
  flex: none; animation: slide 38s linear infinite;
}
.ticker span {
  font-family: var(--font-display);
  text-transform: uppercase; font-weight: 600;
  font-size: 1.08rem; letter-spacing: 0.06em;
  color: var(--paper-dim);
  white-space: nowrap;
  display: flex; align-items: center; gap: 44px;
}
.ticker span::after { content: ''; width: 6px; height: 6px; background: var(--gold); flex: none; }
@keyframes slide { to { transform: translateX(-100%); } }

/* ---------- stats ---------- */

.stats { border-top: 1px solid var(--line); }
.stats .grid { gap: 0; }

.stat { padding: clamp(24px, 3.4vw, 40px) clamp(18px, 2.4vw, 30px); border-right: 1px solid var(--line); }
.stat:last-child { border-right: none; }
.stat b {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.6rem, 5.4vw, 4.2rem);
  line-height: 0.9; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--gold);
}
.stat span {
  display: block; margin-top: 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.72rem; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--muted);
  line-height: 1.5;
}

/* ---------- panels ---------- */

.panel {
  background: var(--ink-2);
  border: 1px solid var(--line);
  padding: clamp(24px, 3vw, 36px);
  transition: border-color var(--t), background var(--t);
}
.panel--hover:hover { border-color: var(--gold); }

.panel__n {
  font-family: var(--font-mono);
  font-size: 0.72rem; letter-spacing: 0.15em;
  color: var(--gold); display: block; margin-bottom: 1.4rem;
}
.panel h3 { margin-bottom: 0.7rem; }
.panel p { color: var(--paper-dim); font-size: 0.97rem; }

.zone { position: relative; overflow: hidden; }
.zone__count {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3.6rem, 8vw, 6.4rem);
  line-height: 0.85; letter-spacing: -0.03em;
  display: block;
  font-variant-numeric: tabular-nums;
  color: var(--gold);
}
.zone__count sup {
  font-size: 0.28em; vertical-align: super;
  font-family: var(--font-mono); font-weight: 400;
  letter-spacing: 0.12em; color: var(--muted); margin-left: 0.5em;
}
.zone ul { list-style: none; margin: 1.6rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.zone ul li {
  font-family: var(--font-mono); font-size: 0.75rem;
  letter-spacing: 0.06em; text-transform: uppercase;
  border: 1px solid var(--line-soft); padding: 6px 11px; color: var(--paper-dim);
}

/* ---------- LIGHT BAND ---------- */

.band--light {
  background: var(--cream);
  color: var(--cream-ink);
  border-top: none;
}
.band--light :is(h1, h2, h3, h4) { color: var(--cream-ink); }
.band--light .label { color: var(--gold-deep); }
.band--light .lede { color: #443D30; }
.band--light .body-dim { color: #4E4638; }
.band--light .panel {
  background: #FFFDF8;
  border-color: var(--cream-line);
}
.band--light .panel p { color: var(--cream-mut); }
.band--light .panel__n { color: var(--gold-deep); }
.band--light .panel--hover:hover { border-color: var(--gold-deep); }
.band--light .zone__count { color: var(--cream-ink); }
.band--light .zone__count sup { color: var(--cream-mut); }
.band--light .zone ul li { border-color: var(--cream-line); color: var(--cream-mut); }
.band--light .rows, .band--light .row { border-color: var(--cream-line); }
.band--light .row__k { color: var(--gold-deep); }
.band--light .row__b p { color: var(--cream-mut); }
.band--light .row__t { color: var(--cream-mut); }
.band--light .stat { border-color: var(--cream-line); }
.band--light .stat b { color: var(--cream-ink); }
.band--light .stat span { color: var(--cream-mut); }
.band--light .logos span { border-color: var(--cream-line); color: #433C2F; }
.band--light .logos span:hover { border-color: var(--gold-deep); color: var(--cream-ink); }
.band--light .rule { background: var(--cream-line); }
.band--light .meta div { border-color: var(--cream-line); }
.band--light .meta .k { color: var(--cream-mut); }
.band--light .flag { color: var(--cream-mut); }
.band--light .flag::before { background: var(--gold-deep); }
.band--light .btn--ghost { border-color: var(--cream-line); color: var(--cream-ink); }
.band--light .btn--ghost:hover { border-color: var(--cream-ink); background: var(--cream-ink); color: var(--cream); }

/* ---------- GOLD BAND (gold as ground, ink type - 12:1) ---------- */

.gold-band {
  background: var(--gold);
  color: var(--ink);
  border-top: none;
}
.gold-band :is(h1, h2, h3, h4, p, li, span, dt, dd,
  .label, .lede, .body-dim, .row__k, .row__t, .flag) { color: var(--ink); }
.gold-band .rule { background: rgba(12,11,9,.25); }
.gold-band .flag::before { background: var(--ink); }
.gold-band .rows, .gold-band .row { border-color: rgba(12,11,9,.22); }
.gold-band .logos span { border-color: rgba(12,11,9,.3); color: var(--ink); }

/* ---------- list rows ---------- */

.rows { border-top: 1px solid var(--line); }
.row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: clamp(14px, 2.4vw, 32px);
  align-items: center;
  padding: clamp(18px, 2.4vw, 26px) 0;
  border-bottom: 1px solid var(--line);
}
.row__k { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.15em; color: var(--gold); min-width: 3ch; }
.row__b h3 { margin-bottom: 0.35rem; }
.row__b p { color: var(--muted); font-size: 0.94rem; margin: 0; }
.row__t {
  font-family: var(--font-mono); font-size: 0.75rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--paper-dim); text-align: right;
}

/* ---------- countdown ---------- */

.count { display: flex; flex-wrap: wrap; gap: clamp(10px, 1.6vw, 18px); margin-top: 1.8rem; }
.count div {
  border: 1px solid var(--line-soft);
  background: var(--ink-2);
  padding: 14px 6px 11px;
  text-align: center;
  min-width: 78px; flex: 1 1 78px; max-width: 130px;
}
.count b {
  display: block;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2rem, 4vw, 2.9rem); line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--gold);
}
.count span {
  display: block; margin-top: 6px;
  font-family: var(--font-mono); font-size: 0.64rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
}

.flag {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 14px;
  font-family: var(--font-mono); font-size: 0.7rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
}
.flag::before { content: ''; width: 7px; height: 7px; background: var(--gold); flex: none; }

/* ---------- Eventbrite checkout ---------- */

/* Eventbrite's checkout is a white iframe - it sits on its own white
   plate rather than pretending to match the dark bands. The box stays
   collapsed until site.js has actually put an iframe in it. */
.ebx { margin-top: 2.6rem; max-width: 820px; }
.ebx__frame { background: #fff; margin-top: 1rem; }
.ebx__frame:empty { display: none; }
.ebx__frame iframe { display: block; width: 100%; border: 0; }
.ebx__alt {
  display: inline-block; margin-top: 12px;
  font-family: var(--font-mono); font-size: 0.72rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}
.ebx__alt a { color: var(--gold); }

/* ---------- booking: date stub + checkout ----------
   Every checkout sits beside its own date, printed like a ticket stub,
   so nobody books Liverpool thinking it is Leigh (or the reverse).
   .stub is laid out as a ROW by default (home show cards, phones) and
   turns into a tall column beside the checkout on wide screens. */
.book {
  display: grid;
  grid-template-columns: 1fr;
  background: #fff;
  border: 1px solid var(--cream-line);
  margin-top: 2.4rem;
}
.stub {
  background: var(--gold);
  color: var(--ink);
  padding: clamp(20px, 2.6vw, 32px);
  border-bottom: 2px dashed rgba(12, 11, 9, .4);
  display: flex; flex-direction: column; gap: 1.2rem;
}
.stub__date {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "day dow" "day mon";
  column-gap: 16px;
  align-items: center;
}
.stub__dow {
  grid-area: dow; align-self: end;
  font-family: var(--font-mono); font-size: 0.74rem; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
}
.stub__day {
  grid-area: day;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(4.4rem, 9vw, 5.6rem); line-height: 0.8;
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.stub__mon {
  grid-area: mon; align-self: start; margin-top: 4px;
  font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1;
}
.stub__facts {
  margin: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  column-gap: 20px;
  border-top: 1px solid rgba(12, 11, 9, .28);
}
.stub__facts div { padding: 10px 0; border-bottom: 1px solid rgba(12, 11, 9, .28); }
.stub__facts dt {
  font-family: var(--font-mono); font-size: 0.66rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: rgba(12, 11, 9, .7);
}
.stub__facts dd { margin: 2px 0 0; font-weight: 600; line-height: 1.35; }

.book__main { padding: clamp(22px, 3vw, 40px); min-width: 0; color: var(--cream-ink); }
.book__main .label { color: var(--gold-deep); }
.book__main :is(h2, h3) { color: var(--cream-ink); margin-bottom: 0.7rem; }
/* anchors land below the sticky header, not under it */
section[id], .book { scroll-margin-top: 84px; }
.book__main p { color: var(--cream-mut); max-width: 60ch; }
.book__main p a { color: var(--cream-ink); font-weight: 600; text-underline-offset: 3px; text-decoration-color: var(--gold-deep); }
.book .ebx__frame { margin-top: 1.6rem; }
.book .ebx__alt { color: var(--cream-mut); }
.book .ebx__alt a { color: var(--cream-ink); }
/* no checkout drawn (preview file, blocked script) -> one big plain link;
   checkout drawn -> the big link steps aside for the small fallback line */
.book__go { margin-top: 1.8rem; }
.book .ebx__frame:not(:empty) ~ .book__go { display: none; }
.book .ebx__frame:empty ~ .ebx__alt { display: none; }

@media (min-width: 861px) {
  .book { grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); }
  .book .stub { border-bottom: none; border-right: 2px dashed rgba(12, 11, 9, .4); }
  .book .stub__date { display: flex; flex-direction: column; }
  .book .stub__dow, .book .stub__mon { align-self: flex-start; }
  .book .stub__day { font-size: clamp(6rem, 9vw, 8.4rem); margin-top: 0.7rem; }
  .book .stub__mon { margin-top: 0.6rem; }
  .book .stub__facts { grid-template-columns: 1fr; }
}

/* home: one card per show */
.showcard { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--cream-line); }
.showcard__b { padding: clamp(22px, 2.8vw, 34px); display: flex; flex-direction: column; flex: 1; }
.showcard__b .label { color: var(--gold-deep); margin-bottom: 0.6rem; }
.showcard__b h3 { color: var(--cream-ink); margin-bottom: 0.7rem; }
.showcard__b p { color: var(--cream-mut); font-size: 0.97rem; }
.showcard__b .btn-row { margin-top: auto; padding-top: 1.6rem; }
/* cards are narrow - keep all four countdown boxes on one line */
.showcard .count { flex-wrap: nowrap; }
.showcard .count div { min-width: 0; flex: 1 1 0; }

/* the date beside a show's name in the header */
.nav__d {
  font-family: var(--font-mono); font-size: 0.66rem; font-weight: 500;
  letter-spacing: 0.08em; color: var(--gold); margin-left: 5px;
  vertical-align: 0.14em;
}

/* ---------- meta ---------- */

.meta { display: grid; gap: 0; border-top: 1px solid var(--line); margin-top: 2rem; }
.meta div {
  display: grid; grid-template-columns: 8.5rem 1fr; gap: 16px;
  padding: 14px 0; border-bottom: 1px solid var(--line); align-items: baseline;
}
.meta .k {
  font-family: var(--font-mono); font-size: 0.71rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}
.meta .v { margin: 0; font-weight: 500; }

/* ---------- tickets ---------- */

.tix { display: grid; gap: 0; border: 1px solid var(--line); }
.tix__r {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) auto;
  gap: clamp(14px, 2.4vw, 30px);
  align-items: center;
  padding: clamp(18px, 2.2vw, 24px) clamp(18px, 2.4vw, 28px);
  border-bottom: 1px solid var(--line);
  transition: background var(--t);
}
.tix__r:last-child { border-bottom: none; }
/* information only - booking happens in the checkout, not per row */
.tix--info .tix__r { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); }
.tix__r:hover { background: var(--ink-2); }
.tix__r--hi { background: var(--ink-2); }
.tix__r h3 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tix__r p { color: var(--muted); font-size: 0.94rem; margin: 0; }

.pill {
  font-family: var(--font-mono); font-size: 0.62rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  background: var(--gold); color: var(--ink);
  padding: 4px 9px; font-weight: 500;
}
.pill--out { background: transparent; border: 1px solid var(--line-soft); color: var(--muted); }

/* ---------- logos ---------- */

.logos { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 1.8rem; }
.logos span {
  font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; font-size: 1.1rem; letter-spacing: 0.04em;
  border: 1px solid var(--line-soft); padding: 9px 16px; color: var(--paper-dim);
  transition: border-color var(--t), color var(--t);
}
.logos span:hover { border-color: var(--gold); color: var(--gold); }

/* ---------- shows page: a gold rule opens each show ---------- */

.chapter { border-top: 3px solid var(--gold); }
.chapter__date {
  display: block; margin-top: 0.9rem; color: var(--gold);
  font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; line-height: 0.95;
}
.hero h1 em.em-inline { display: inline; }

/* ---------- sponsors ---------- */

.spons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); }
.spon {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--ink-2); border: 1px solid var(--line);
  transition: border-color var(--t);
}
.spon:hover { border-color: var(--gold); }
/* logos arrive on their own grounds (black, white, gradient) - squared, never recoloured */
.spon__logo { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-bottom: 1px solid var(--line); }
.spon__b { padding: clamp(16px, 2.2vw, 26px); display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.spon__b h3 { overflow-wrap: anywhere; }
.spon__b p { color: var(--paper-dim); font-size: 0.95rem; line-height: 1.45; margin: 0; }
.spon__links {
  margin-top: auto; padding-top: 0.8rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.spon__soc {
  width: 38px; height: 38px; display: grid; place-items: center;
  border: 1px solid var(--line-soft); color: var(--paper-dim);
  transition: border-color var(--t), color var(--t);
}
.spon__soc:hover { border-color: var(--gold); color: var(--gold); }
.spon__soc svg { width: 17px; height: 17px; }
.spon__link {
  flex-basis: 100%; margin-bottom: 4px;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em;
  color: var(--gold); text-decoration: none; overflow-wrap: anywhere;
}
.spon__link svg { width: 14px; height: 14px; flex: none; transition: transform var(--t); }
.spon__link:hover svg { transform: translateX(3px); }

/* ---------- headline sponsors ----------
   A separate tier above the A-Z wall. Differs by LAYOUT, not just colour:
   a 2:1 banner (logos letterboxed into the asset on their own ground, so a
   wide mark like Get Graded or TikTok is never cropped the way .spon__logo
   crops a square), a wider card, and a gold frame.
   5 cards -> a row of 3 then a centred pair. Revisit the :nth-child rules
   if the headline count ever changes. */
.hspons { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(16px, 2.2vw, 28px); }
.hspon {
  grid-column: span 2;
  display: flex; flex-direction: column; min-width: 0;
  background: var(--ink-2); border: 1px solid var(--gold-deep);
  transition: border-color var(--t), transform var(--t);
}
.hspon:nth-child(4) { grid-column: 2 / span 2; }
.hspon:hover { border-color: var(--gold); transform: translateY(-3px); }
.hspon__logo {
  display: block; width: 100%; height: auto;
  aspect-ratio: 2 / 1; object-fit: cover;
  border-bottom: 1px solid var(--line);
}
.hspon__b { padding: clamp(18px, 2.4vw, 30px); display: flex; flex-direction: column; gap: 0.55rem; flex: 1; }
.hspon__b .label { margin-bottom: 0.1rem; }
.hspon__b h3 { font-size: clamp(1.3rem, 2vw, 1.7rem); overflow-wrap: anywhere; }
.hspon__b p { color: var(--paper-dim); font-size: 1rem; line-height: 1.45; margin: 0; }

.spics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.8vw, 20px); }
.spic { margin: 0; min-width: 0; }
.spic img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border: 1px solid var(--cream-line); }
.spic figcaption { padding-top: 0.7rem; line-height: 1.35; }
.spic figcaption b { display: block; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 1.1rem; color: var(--cream-ink); }
.spic figcaption span { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cream-mut); }

@media (max-width: 1000px) {
  .spics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 4 cols, span 2 => 2 per row; the 5th centres itself */
  .hspons { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hspon:nth-child(4) { grid-column: span 2; }
  .hspon:nth-child(5) { grid-column: 2 / span 2; }
}
@media (max-width: 640px) {
  .spons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spon__b p { font-size: 0.88rem; }
  /* one headline card per row */
  .hspons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hspon:nth-child(4), .hspon:nth-child(5) { grid-column: span 2; }
}

/* ============================================================
   FLOORPLAN MOCKUP (app page)
   ============================================================ */

.appdemo {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 52px);
  align-items: start;
}

/* --- phone --- */
.phone {
  border: 2px solid var(--line-soft);
  border-radius: 26px;
  background: var(--ink-2);
  padding: 12px;
  box-shadow: 0 30px 70px rgba(0,0,0,.55);
  position: sticky; top: 92px;
}
.phone__scr {
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}
.phone__bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 14px 7px;
  font-family: var(--font-mono); font-size: 0.6rem;
  letter-spacing: 0.1em; color: var(--muted);
  border-bottom: 1px solid var(--line);
}
.phone__body { padding: 16px 14px 20px; }
.phone__brand { font-size: 1.2rem; margin-bottom: 5px; }

/* ---------- CardSeeker lockup ----------
   Built the same way as the app (cardradar-web components/CardSeekerMark.tsx
   and every app bar): the lens + card + diamond + handle mark, then "Card"
   plain and "Seeker" in the accent, mixed case, extra-bold, tight tracking.
   The only change is the accent: the app cyan (#00D4FF) becomes NWCS gold.
   The mark draws in currentColor, so .cs__mark sets its colour.          */
.cs {
  display: inline-flex; align-items: center; gap: 0.42em;
  font-family: var(--font-body); font-weight: 800;
  letter-spacing: -0.015em; text-transform: none;
  line-height: 1; color: var(--paper); white-space: nowrap;
}
/* one element, so the flex gap sits between mark and name, never inside the name */
.cs__word { display: block; }
.cs b { color: var(--gold); font-weight: 800; }
.cs__mark { width: 1.5em; height: 1.5em; flex: none; display: block; color: var(--gold); }
.cs-by {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  margin-top: 1.8rem;
  font-family: var(--font-mono); font-size: 0.68rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
}
.cs-by .cs { font-size: 1.12rem; }
.phone__sub {
  font-family: var(--font-mono); font-size: 0.6rem;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 14px;
}
.phone__search {
  display: flex; align-items: center; gap: 9px;
  border: 1px solid var(--line-soft);
  background: var(--ink-2);
  padding: 10px 12px;
  margin-bottom: 12px;
}
.phone__search svg { width: 15px; height: 15px; color: var(--gold); flex: none; }
.phone__search span { font-size: 0.92rem; color: var(--paper); }
.phone__search span.is-empty { color: var(--muted); }

.hits { display: grid; gap: 8px; }
.hit {
  border: 1px solid var(--line);
  background: var(--ink-2);
  padding: 10px 12px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
}
.hit strong {
  font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; font-size: 1.02rem; line-height: 1.1;
  display: block;
}
.hit em {
  font-style: normal; display: block;
  font-family: var(--font-mono); font-size: 0.62rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
  margin-top: 3px;
}
.hit b {
  font-family: var(--font-display); font-weight: 700;
  background: var(--gold); color: var(--ink);
  padding: 4px 9px; font-size: 0.9rem; white-space: nowrap;
}
.hits__empty { color: var(--muted); font-size: 0.88rem; }

/* --- search chips --- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 1.6rem; }
.chip {
  font-family: var(--font-mono); font-size: 0.72rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--line-soft);
  color: var(--paper-dim);
  padding: 9px 13px; cursor: pointer; min-height: 40px;
  transition: border-color var(--t), color var(--t), background var(--t);
}
.chip:hover { border-color: var(--gold); color: var(--gold); }
.chip[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: var(--ink); }

/* --- the plan --- */
.plan {
  border: 1px solid var(--line-soft);
  background:
    linear-gradient(var(--ink-2), var(--ink-2)),
    repeating-linear-gradient(0deg, transparent 0 23px, rgba(240,189,76,.05) 23px 24px);
  background-blend-mode: normal;
  padding: clamp(14px, 2vw, 24px);
}
.plan__head {
  display: flex; flex-wrap: wrap; gap: 10px 20px;
  justify-content: space-between; align-items: baseline;
  margin-bottom: 16px;
}
.plan__head h3 { font-size: 1.3rem; }
.plan__head p {
  font-family: var(--font-mono); font-size: 0.65rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 0;
}

.hall {
  display: grid;
  grid-template-columns: repeat(14, minmax(0, 1fr));
  gap: 5px;
  border: 1px dashed var(--line-soft);
  padding: 10px;
}

.tbl {
  aspect-ratio: 1 / 1;
  border: 1px solid var(--line-soft);
  background: var(--ink-3);
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-size: 0.52rem;
  color: var(--muted);
  cursor: pointer;
  padding: 0;
  transition: background var(--t), border-color var(--t), color var(--t), transform var(--t);
  min-width: 0;
}
.tbl:hover { border-color: var(--gold); color: var(--gold); }
.tbl.is-hit {
  background: var(--gold);
  border-color: var(--gold-hi);
  color: var(--ink);
  font-weight: 500;
  transform: scale(1.12);
  z-index: 2;
  box-shadow: 0 0 0 3px rgba(240,189,76,.22);
}
.tbl.is-dim { opacity: 0.4; }

.feat {
  border: 1px solid var(--line-soft);
  background: transparent;
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-size: 0.55rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted);
  text-align: center; padding: 4px 2px; min-width: 0;
}
.feat--door { border-style: solid; border-color: var(--gold); color: var(--gold); }
.feat--aisle { border: none; }

.legend {
  display: flex; flex-wrap: wrap;
  gap: 8px 22px; margin-top: 16px;
  font-family: var(--font-mono); font-size: 0.64rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
}
.legend i { display: inline-flex; align-items: center; gap: 8px; font-style: normal; }
.legend i::before {
  content: ''; width: 11px; height: 11px; flex: none;
  border: 1px solid var(--line-soft); background: var(--ink-3);
}
.legend i.k-hit::before { background: var(--gold); border-color: var(--gold); }
.legend i.k-door::before { background: transparent; border-color: var(--gold); }

/* ---------- footer ---------- */

.ftr {
  border-top: 1px solid var(--line);
  padding-block: clamp(44px, 6vw, 72px) 32px;
  background: var(--ink-2);
}
.ftr__top {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
}
.ftr h4 { font-size: 0.95rem; letter-spacing: 0.1em; color: var(--gold); margin-bottom: 1rem; }
.ftr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.ftr ul a {
  text-decoration: none; color: var(--paper-dim);
  transition: color var(--t);
  display: inline-flex; align-items: center; gap: 9px;
}
.ftr ul a:hover { color: var(--gold); }
.ftr ul svg { width: 16px; height: 16px; flex: none; }

.ftr__btm {
  margin-top: clamp(32px, 5vw, 56px);
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 14px 28px; justify-content: space-between;
  font-family: var(--font-mono); font-size: 0.71rem;
  letter-spacing: 0.08em; color: var(--muted); text-transform: uppercase;
  align-items: center;
}

/* bottom-right credit slot, where a site maker usually signs: Powered by
   CardSeeker on every page. (0,2,0) so it outranks any .ftr a rule. */
/* margin-left:auto keeps it bottom RIGHT when the row wraps on phones */
.ftr__btm .cs-by { margin: 0 0 0 auto; gap: 9px; color: var(--muted); text-decoration: none; }
.ftr__btm .cs-by .cs { font-size: 0.98rem; }
.ftr__btm .cs-by:hover .cs__word,
.ftr__btm .cs-by:focus-visible .cs__word {
  text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px;
}

/* ---------- pitch banner ---------- */

.pitch {
  background: var(--ink-3);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 0.71rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); padding-block: 9px;
}
.pitch b { color: var(--gold); font-weight: 500; }

.rule { height: 1px; background: var(--line); margin-block: clamp(28px, 4vw, 48px); }

/* ---------- intro: logo lands big, then flies into the header ---------- */

.intro {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  background: rgba(12, 11, 9, .74);
  transition: background 720ms ease, opacity 320ms ease;
}
.intro.is-flying { background: rgba(12, 11, 9, 0); }
.intro.is-done { opacity: 0; pointer-events: none; }

.intro__logo {
  width: min(58vw, 300px);
  height: auto;
  transform-origin: top left;
  filter: drop-shadow(0 26px 64px rgba(0, 0, 0, .65));
  /* transition declared up front so setting transform later animates it */
  transition: transform 780ms cubic-bezier(.66, 0, .18, 1);
  animation: introIn 540ms cubic-bezier(.2, .7, .3, 1) both;
}
@keyframes introIn {
  from { opacity: 0; transform: scale(.84); }
  to   { opacity: 1; transform: none; }
}

body.intro-on { overflow: hidden; }
body.intro-on :is(.pitch, .hdr, main, .ftr) {
  filter: blur(13px);
  transition: filter 780ms ease;
}
body.intro-on .lockup__mark { opacity: 0; }

/* added at take-off; must sit after the .intro-on rules to win on order */
body.intro-clearing :is(.pitch, .hdr, main, .ftr) { filter: blur(0); }
body.intro-clearing .lockup__mark { opacity: 1; transition: opacity 280ms ease 540ms; }

/* ---------- reveal ---------- */

.rv { opacity: 0; transform: translateY(18px); transition: opacity .6s ease-out, transform .6s cubic-bezier(.2,.7,.3,1); }
.rv.in { opacity: 1; transform: none; }

/* ---------- responsive ---------- */

@media (max-width: 1000px) {
  .split { grid-template-columns: 1fr; }
  .ftr__top { grid-template-columns: 1fr 1fr; }
  .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(2) { border-right: none; }
  .stat:nth-child(1), .stat:nth-child(2) { border-bottom: 1px solid var(--line); }
  .fan { opacity: .45; right: -18%; width: min(460px, 62vw); }
  .appdemo { grid-template-columns: 1fr; }
  .phone { position: static; max-width: 360px; }
}

/* burger comes in earlier than the rest: the two dated show links make
   the header too wide to fit below ~1080px */
@media (max-width: 1080px) {
  .burger { display: grid; }
  .nav {
    position: fixed; inset: 68px 0 auto 0;
    flex-direction: column; align-items: stretch;
    background: var(--ink);
    border-bottom: 1px solid var(--line);
    padding: 10px var(--pad) 22px;
    gap: 0; display: none;
  }
  .nav.open { display: flex; }
  .nav a:not(.btn) { padding: 15px 0; font-size: 1.5rem; border-bottom: 1px solid var(--line); }
  .nav a:not(.btn)::after { left: 0; right: auto; width: 34px; bottom: 8px; }
  .nav .btn { margin-top: 16px; align-self: flex-start; }
}

@media (max-width: 860px) {
  .tix__r, .tix--info .tix__r { grid-template-columns: 1fr; gap: 12px; }
  .tix__r .btn { justify-self: start; }
  .row { grid-template-columns: auto 1fr; }
  .row__t { grid-column: 2; text-align: left; }
  .hall { grid-template-columns: repeat(10, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .g-2, .g-3 { grid-template-columns: 1fr; }
  .g-4 { grid-template-columns: 1fr 1fr; }
  .ftr__top { grid-template-columns: 1fr; }
  .stat { border-right: none; border-bottom: 1px solid var(--line); }
  .stat:last-child { border-bottom: none; }
  .meta div { grid-template-columns: 1fr; gap: 4px; }
  .fan { display: none; }
  .hall { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; }
  .tbl { font-size: 0.44rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .rv { opacity: 1; transform: none; }
  .tbl.is-hit { transform: none; }
}

/* ============================================================
   GALLERY - editorial mosaic + lightbox
   ------------------------------------------------------------
   Four columns, and the row height is 0.75x the column width.
   That one ratio is what puts every tile shape on a sensible
   aspect without a single aspect-ratio declaration (which, on
   these images, does not hold - see NOTES.md):

     .tile--port  1 col x 2 rows  ->  2:3   the native frame
     .tile--sq    1 col x 1 row   ->  4:3
     .tile--wide  2 cols x 1 row  ->  8:3
     .tile--feat  2 cols x 2 rows ->  4:3

   Sections run feat/port/port/wide/sq/sq then
   wide/sq/sq/port/port/feat, which tiles four columns flush with
   no holes and no grid-auto-flow: dense. Change that order and
   you get gaps - change it in make-media.mjs instead and
   regenerate. The script warns if a section stops tiling.
   ============================================================ */

/* ---------- section head ---------- */

.gsec__hd {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 clamp(14px, 2vw, 26px);
  align-items: baseline;
  padding-bottom: clamp(16px, 2.2vw, 26px);
  margin-bottom: clamp(18px, 2.6vw, 30px);
  border-bottom: 1px solid var(--line);
}
.gsec__n {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  color: var(--gold);
}
.gsec__hd h2 { margin: 0; }
.gsec__hd p {
  grid-column: 2;
  margin: 0.7rem 0 0;
  color: var(--muted);
  font-size: 0.97rem;
  max-width: 58ch;
}

/* ---------- jump nav ---------- */

.gnav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 1.9rem; }
.gnav a {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 15px;
  border: 1px solid var(--line-soft);
  color: var(--paper-dim);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  transition: border-color var(--t), color var(--t), background var(--t);
}
.gnav a b { color: var(--gold); font-weight: 500; }
.gnav a:hover { border-color: var(--gold); color: var(--gold); background: var(--ink-2); }
.gnav a:hover b { color: inherit; }

/* each section opens on six tiles; this reveals the rest in place */
.gmore { margin-top: clamp(14px, 2vw, 24px); width: 100%; }
/* .tile sets display:block, which outranks the browser's own [hidden] rule */
.tile[hidden] { display: none; }

/* ---------- the mosaic ---------- */

.mosaic {
  --mos-gap: clamp(6px, 0.85vw, 12px);
  --mos-cols: 4;
  /* .wrap is border-box, so its content box is the viewport (or the
     max width) less the two page gutters. Deriving the row height
     from that keeps every tile on its intended aspect at any width. */
  --mos-cw: calc(
    (min(100vw, var(--maxw)) - 2 * var(--pad) - (var(--mos-cols) - 1) * var(--mos-gap))
    / var(--mos-cols)
  );
  display: grid;
  grid-template-columns: repeat(var(--mos-cols), minmax(0, 1fr));
  grid-auto-rows: calc(var(--mos-cw) * 0.75);
  gap: var(--mos-gap);
}

.tile {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: var(--ink-2);
  color: var(--paper);
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tile:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.tile--port { grid-column: span 1; grid-row: span 2; }
.tile--sq   { grid-column: span 1; grid-row: span 1; }
.tile--wide { grid-column: span 2; grid-row: span 1; }
.tile--feat { grid-column: span 2; grid-row: span 2; }

/* max-width: none - the global img reset caps these at their intrinsic
   width and the fill leaves a sliver of background down one side */
.tile img,
.tile .tile__vid {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  display: block;
  filter: saturate(0.94);
  transition: transform 0.55s cubic-bezier(.2,.7,.3,1), filter var(--t);
}
.tile:hover img,
.tile:focus-visible img { transform: scale(1.045); filter: saturate(1.06); }

/* the gold rule draws in from the left on hover */
.tile::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  z-index: 3;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s cubic-bezier(.2,.7,.3,1);
}
.tile:hover::after,
.tile:focus-visible::after { transform: scaleX(1); }

.tile__cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 40px 13px 13px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  line-height: 1.35;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper);
  background: linear-gradient(to top, rgba(12,11,9,.94), rgba(12,11,9,.5) 46%, transparent);
  opacity: 0;
  transform: translateY(9px);
  transition: opacity var(--t), transform var(--t);
}
.tile:hover .tile__cap,
.tile:focus-visible .tile__cap { opacity: 1; transform: none; }

/* Video tiles: gold play badge, plus a muted loop that fades in over
   the poster on hover. site.js creates that <video> on demand - ten
   of them sitting in the markup would be ten preloads on page load. */
.tile__play {
  position: absolute;
  left: 12px; top: 12px;
  z-index: 2;
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 2px 16px rgba(0,0,0,.5);
  transition: transform var(--t);
}
.tile__play::before {
  content: '';
  width: 0; height: 0;
  margin-left: 3px;
  border-left: 11px solid var(--ink);
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
}
.tile:hover .tile__play { transform: scale(1.12); }

.tile .tile__vid {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.tile.is-playing .tile__vid { opacity: 1; }

/* ---------- lightbox ---------- */

.lb { position: fixed; inset: 0; z-index: 200; display: none; }
.lb.is-open { display: block; }
body.lb-on { overflow: hidden; }

.lb__veil { position: absolute; inset: 0; background: rgba(6,5,4,.95); }

.lb__fig {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: clamp(12px, 2vh, 20px);
  padding: clamp(56px, 8vh, 82px) clamp(12px, 4vw, 70px) clamp(18px, 3vh, 30px);
}
/* the minmax(0, 1fr) above plus this min-height is what lets a tall
   image shrink into the row instead of shoving the caption off screen */
.lb__media { min-height: 0; position: relative; }
/* Absolutely placed, so max-height:100% resolves against the row's real
   height. As a plain grid child it did not in Chrome - a 1500px still
   rendered full size and ran over the caption on desktop. */
.lb__media img,
.lb__media video {
  position: absolute;
  inset: 0;
  margin: auto;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border: 1px solid var(--line);
  background: var(--ink-2);
}

.lb__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.lb__cap {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--paper-dim);
}
.lb__n {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  color: var(--muted);
  flex: none;
}
.lb__n b { color: var(--gold); font-weight: 500; }

.lb__btn {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  padding: 0;
  border: 1px solid var(--line-soft);
  background: rgba(12,11,9,.72);
  color: var(--paper);
  cursor: pointer;
  transition: border-color var(--t), color var(--t), background var(--t);
}
.lb__btn:hover { border-color: var(--gold); color: var(--gold); background: var(--ink-2); }
.lb__btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.lb__btn svg { width: 20px; height: 20px; }
.lb__x    { top: clamp(10px, 2vh, 20px); right: clamp(10px, 2vw, 22px); }
.lb__prev { left: clamp(6px, 1.4vw, 18px); top: 50%; transform: translateY(-50%); }
.lb__next { right: clamp(6px, 1.4vw, 18px); top: 50%; transform: translateY(-50%); }

/* ---------- home page teaser strip ---------- */

.gteaser { margin-top: clamp(26px, 4vw, 44px); }
.gteaser .mosaic { grid-auto-rows: calc(var(--mos-cw) * 0.75); }

/* ---------- gallery responsive ---------- */

@media (max-width: 860px) {
  .gsec__hd { grid-template-columns: 1fr; }
  .gsec__hd p { grid-column: 1; }
}

@media (max-width: 720px) {
  .mosaic { --mos-cols: 2; }
  /* two columns, so the wide and feature tiles simply go full bleed */
  .tile--wide, .tile--feat { grid-column: span 2; }
  .tile__cap { font-size: 0.62rem; padding: 30px 10px 10px; letter-spacing: 0.07em; }
  .tile__play { width: 28px; height: 28px; left: 9px; top: 9px; }
  .tile__play::before { border-left-width: 9px; border-top-width: 6px; border-bottom-width: 6px; }
  .lb__btn { width: 40px; height: 40px; }
  .lb__prev { left: 6px; }
  .lb__next { right: 6px; }
}

/* A coarse pointer never gets a hover, so show the caption outright
   rather than leaving half the labelling behind an interaction. */
@media (hover: none) {
  .tile__cap { opacity: 1; transform: none; }
  .tile::after { transform: scaleX(1); opacity: 0.5; }
}