/* Home — "the black room, the white light". Extends site.css tokens; transform/opacity motion only. */

/* ---------- hero: the stage ---------- */
.hero { min-height: 100svh; display: grid; align-items: end; border-bottom: 0; isolation: isolate; }
.hero-light { position: absolute; left: 0; top: 0; width: 960px; height: 960px; z-index: 1; pointer-events: none; opacity: 0; will-change: transform;
  background: radial-gradient(circle at center, rgba(255,255,255,.14), transparent 62%); transition: opacity 400ms var(--ease-out); }
.motion-toggle { position: absolute; left: var(--gutter); bottom: 14px; z-index: 3; min-height: 32px; padding: 0 12px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: rgba(0,0,0,.6); color: var(--muted);
  font-family: var(--font-mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; transition: color var(--t-fast), border-color var(--t-fast); }
.motion-toggle:hover { color: var(--text); border-color: var(--faint); }
.motion-toggle[aria-pressed="true"] { color: var(--text); }
/* the pause button reaches the same still ticker as prefers-reduced-motion: wrapped, no duplicates, every label reachable (re-audit motion-a11y-1) */
html.motion-off .ticker .track { animation: none; width: auto; flex-wrap: wrap; row-gap: 6px; }
html.motion-off .ticker .dupe { display: none; }
.motion-off .hero-media video { display: none; }
.motion-off .hero-media img { display: block; }

.hero-media video { opacity: 0; transition: opacity 900ms var(--ease-out); }
.hero-media video.on { opacity: 1; }

/* next open Saturdays (live from availability.json) */
.dates { background: rgba(0,0,0,.66); border: 1px solid var(--line-strong); border-radius: var(--r-lg); padding: 16px; display: grid; gap: 10px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: var(--shadow-2); }
.dates .head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.dates .head h2 { font-size: 1.05rem; letter-spacing: -0.01em; }
.dates ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.dates li > a { display: grid; grid-template-columns: 12px 1fr auto; gap: 12px; align-items: center; min-height: 44px; padding: 4px 10px; border-radius: var(--r-md);
  text-decoration: none; color: var(--text); border: 1px solid transparent; transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast) var(--ease-spring); }
.dates li > a:hover { background: var(--accent-soft); border-color: var(--line-strong); transform: translateX(2px); }
.dates li > a:active { transform: scale(.99); }
.dates .d { font-family: var(--font-mono); font-size: .86rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dates .s { font-weight: 600; font-size: .92rem; text-align: right; }
.dates .dot { width: 10px; height: 10px; }
.dates .ok .dot { background: var(--good); box-shadow: 0 0 0 4px var(--good-soft); }
.dates .ok .s { color: var(--good); }
.dates .limited .dot { background: var(--accent); box-shadow: 0 0 10px rgba(255,255,255,.7); }
.dates .full .dot { background: var(--warn); box-shadow: 0 0 0 4px var(--warn-soft); }
.dates .full .s, .dates .full .d { color: var(--faint); }
.dates .more { font-size: .86rem; color: var(--muted); margin: 2px 0 0; }
.dates .more a { color: var(--text); }

/* ---------- the hero visualizer (Step 8, 09-13; Wayne's references: an LED equalizer with a mirrored reflection): ONE canvas draws the
   LED bars, the ice-blue bloom, the floor line and the reflection — no per-bar DOM, no per-frame filter (home.js eqCanvas). Power-up
   left → right on load, then idle at 60 fps; the scroll-velocity swell and the pointer light feed the same draw. A still frame under
   #motion-toggle and under reduced motion (data-state="still"). The bars stay white; the glow (--eq-glow) is the one colour on the site.
   The top ~68% of the box is the bar field, then the floor line, then the reflection; the hero stage's bottom padding clears the field. */
.eq { position: absolute; left: 0; right: 0; bottom: 0; height: clamp(128px, 17vh, 176px); z-index: 1; padding: 0 var(--gutter); pointer-events: none;
  /* two masks, intersected: the ends fade into the gutters, the tips dissolve upward into the photograph and the reflection
     dissolves before the strip below — nothing terminates on a hard line (Wayne 09-13: "it looks pasted on") */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent), linear-gradient(180deg, transparent, #000 40%, #000 72%, transparent 97%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent), linear-gradient(180deg, transparent, #000 40%, #000 72%, transparent 97%);
  mask-composite: intersect; }
.eq canvas { display: block; width: 100%; height: 100%; }
/* the rendered floor (Step 8b): a black-background loop blended with screen — black becomes nothing, only the light lands on
   the photograph; it fades in once it plays and the canvas parks underneath (visibility, so the layout never moves) */
.eq .eq-film { position: absolute; left: var(--gutter); right: var(--gutter); top: 0; bottom: 0; width: calc(100% - 2 * var(--gutter)); height: 100%; object-fit: cover; object-position: 50% 50%; mix-blend-mode: screen; opacity: 0; transition: opacity var(--t-editorial) var(--ease-editorial); pointer-events: none; }
.eq[data-film="on"] .eq-film { opacity: .58; } /* well under full so the wall sits in the photograph as background light, never the focal point (Wayne, third review) */
.eq[data-film="on"] canvas { visibility: hidden; }
/* depth: the wall drifts a few px through the viewport on the kit's parallax (motion.js sets --fy on [data-parallax]; desktop only, never under reduced motion) */
.eq .eq-film[data-parallax] { transform: translateY(calc(var(--fy, 0) * 1px)); will-change: transform; }
/* light spill: the wall lights the haze above it — one static radial, over the photograph, under the stage; no filter, nothing animates */
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  body[data-hero] .hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 46%; z-index: 1; pointer-events: none;
    background: radial-gradient(52% 78% at 50% 100%, rgba(255,255,255,.085), transparent 72%); }
}
/* desktop with motion allowed = the rendered floor's home: a taller box for the wall + its reflection (the loop is 5.1:1), a gentler
   top dissolve so the silhouette survives, and the stage clears it; reduced motion keeps the short box and the canvas still frame */
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  /* Wayne 09-13 (third review): "don't let it draw so much attention, a bit smaller, not the focal point" — a low box, the loop cropped
     to the lower bars + the floor line, deep dissolves top and bottom */
  .eq { height: clamp(170px, 24vh, 250px);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent), linear-gradient(180deg, transparent, #000 24%, #000 66%, transparent 95%);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent), linear-gradient(180deg, transparent, #000 24%, #000 66%, transparent 95%); }
  .eq .eq-film { object-position: 50% 55%; }                    /* the Seedance strip is low and thin: sit it on the floor line */
  .eq[data-look="filmb"] .eq-film { object-position: 50% 42%; } /* the Kling wall runs diagonally: centre on it */
}
@media (max-width: 899px) { .eq { height: 76px; } }

/* ---------- ticker ---------- */
.ticker { overflow: hidden; border-top: 0; border-bottom: 0; padding: 14px 0; background: var(--ink-0); }
.ticker .track { display: flex; width: max-content; animation: marquee 42s linear infinite; }
.ticker:hover .track, .ticker:focus-within .track { animation-play-state: paused; }
.ticker span { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.05rem, 2.2vw, 1.55rem); letter-spacing: -0.02em; text-transform: uppercase; white-space: nowrap; padding: 0 20px; color: var(--text); display: inline-flex; align-items: center; gap: 40px; }
.ticker span::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px rgba(255,255,255,.8); flex: none; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- doors: light sweep ---------- */
.door { position: relative; overflow: hidden; }
.door::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.16) 50%, transparent 70%); transform: translateX(-130%); transition: transform 520ms var(--ease-out); }
.door:hover::before { transform: translateX(130%); }

/* ---------- spotlight: one rig at a time ---------- */
/* Two doors — the defect was two identical grey boxes, not boxes as such. Killing the fill
   while the DJ door keeps its lit ground makes the pair read as a choice, not a menu.
   (.door.dj is 0,2,0 in site.css, so it has to be restated here to lose the --ink-1 layer.) */
.door { background: none; box-shadow: none; }
.door.dj { background: linear-gradient(160deg, rgba(255, 255, 255, .12), transparent 55%); }

/* Spotlight — the work-page grammar Wayne approved: photographs at cell width, no card
   chrome, title burned onto a local black fade, real size hierarchy. Replaces a sticky
   left column that left ~2,000px of dead black beside four squeezed photographs. */
.spot { display: block; }
.spot .sticky { position: static; display: grid; gap: 14px; max-width: 42ch; margin-bottom: clamp(32px, 5vw, 64px); }
.spot .count { font-family: var(--font-mono); font-size: .8rem; color: var(--muted); letter-spacing: .12em; }
.spot .count b { color: var(--text); text-shadow: var(--glow-text); font-weight: 600; display: inline-block; min-width: 2ch; transition: opacity 120ms var(--ease-out), transform 120ms var(--ease-out); }
.spot .count b.out { opacity: 0; transform: translateY(-5px); transition-duration: 70ms; } /* exit faster than enter */
.spot .count b.pre { transition: none; opacity: 0; transform: translateY(5px); }
.spot .items { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
/* feature · pair · feature — size hierarchy instead of one uniform column */
.spot-item { position: relative; isolation: isolate; display: grid; gap: 0; min-width: 0; grid-column: span 12; }
@media (min-width: 900px) {
  .spot-item:nth-child(2) { grid-column: span 7; }
  .spot-item:nth-child(3) { grid-column: span 5; }
  /* 4th slot is wedding-de-harte.jpg — 1360px natural, ratio 0.58 at DPR 2 full-bleed, and the
     one photo Wayne called out as blurry. Capped at span 7 so it never renders above its
     resolution. rimsa (1600px, ratio 0.68 full-bleed) is the sanctioned feature. */
  .spot-item:nth-child(4) { grid-column: span 7; }
}
/* the numeral now sits ON the photograph, top-left, clear of the caption fade */
.spot-item .num { position: absolute; top: 10px; left: 16px; z-index: 3; pointer-events: none; font-family: var(--font-display); font-weight: 800; font-size: clamp(2.4rem, 5vw, 4rem); line-height: .9; letter-spacing: -0.05em;
  color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.4); transition: color 400ms var(--ease-out); }
.spot-item.in .num { color: #fff; text-shadow: var(--glow-text); -webkit-text-stroke: 0; }
/* media and meta share one grid cell: the caption sits ON the photograph */
.spot-item .media { grid-area: 1 / 1; width: 100%; height: 100%; aspect-ratio: 16 / 10; min-height: clamp(260px, 30vw, 400px); border-radius: var(--r-md); box-shadow: none; transform: scale(.985) translateY(10px); opacity: .62; transition: transform var(--t-cinematic) var(--ease-out), opacity var(--t-cinematic) var(--ease-out); }
.spot-item:first-child .media { aspect-ratio: 16 / 9; min-height: 340px; }
.spot-item.in .media { transform: none; opacity: 1; }
.spot-item .meta { grid-area: 1 / 1; align-self: end; z-index: 1; display: grid; gap: 8px; min-width: 0; pointer-events: none;
  padding: 72px clamp(18px, 2.6vw, 30px) 22px; border-radius: 0 0 var(--r-md) var(--r-md);
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .86) 34%, rgba(0, 0, 0, .95)); }
.spot-item .meta h3 { font-size: clamp(1.3rem, 2.4vw, 1.85rem); max-width: 28ch; line-height: 1.1; }
.spot-item:first-child .meta h3 { font-size: clamp(1.7rem, 3.4vw, 2.8rem); max-width: 24ch; }
.spot-item .meta p { color: var(--muted); margin: 0; max-width: 60ch; font-size: .875rem; line-height: 1.5; }
/* tags lose their boxes and become hairline-separated labels, as on the approved work page */
.spot-item .meta .tag { padding: 0; border: 0; border-radius: 0; background: none; color: var(--muted); font-size: .9rem; font-family: var(--font-body); letter-spacing: 0; text-transform: none; }
.spot-item .meta .tag + .tag { padding-left: 14px; border-left: 0; color: var(--text); }
.spot-item .meta .tags { display: flex; gap: 8px; flex-wrap: wrap; }
.spot-item[data-clip], .spot-item[data-yt] { cursor: pointer; }

/* ---------- proof ---------- */
.proof-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0 28px; }
.proof-stats .stat .k { font-size: clamp(2rem, 4vw, 3.1rem); font-variant-numeric: tabular-nums; }
.badges { display: flex; flex-wrap: wrap; gap: 12px 32px; margin-top: 22px; }
.badge { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 4px 0; border-radius: 0; border: 0; background: none; color: var(--text); text-decoration: none;
  transition: border-color var(--t-fast), transform var(--t-fast) var(--ease-spring); }
.badge:hover { color: var(--text); transform: translateY(-1px); }
.badge:hover .p b, .badge:focus-visible .p b { text-decoration: underline; text-underline-offset: 3px; }
.badge:active { transform: scale(.98); }
.badge .r { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; letter-spacing: -0.02em; }
.badge .p { font-size: .88rem; color: var(--muted); line-height: 1.25; }
.badge .p b { color: var(--text); font-weight: 600; display: block; }
.brands { display: flex; flex-wrap: wrap; align-items: center; gap: 22px 40px; margin-top: 30px; padding-top: 22px; border-top: 0; }
.brands .lbl { font-family: var(--font-body); font-size: .88rem; letter-spacing: 0; text-transform: none; color: var(--faint); }
.brands img { height: 24px; width: auto; opacity: .82; }
.brands .lic { display: inline-flex; align-items: center; gap: 12px; margin-left: auto; font-family: var(--font-body); font-size: .88rem; letter-spacing: 0; text-transform: none; color: var(--muted); }
.brands .lic img { height: 36px; border-radius: 6px; background: #fff; padding: 3px 6px; opacity: 1; }

/* ---------- films (YouTube facades) ---------- */
.films { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.film { position: relative; display: grid; gap: 10px; align-content: start; text-align: left; background: none; border: 0; padding: 0; color: var(--text); cursor: pointer; font: inherit; }
.film .media { aspect-ratio: 16 / 9; border-radius: var(--r-md); border: 1px solid var(--line); transition: transform var(--t-base) var(--ease-spring), border-color var(--t-base); }
.film:hover .media, .film:focus-visible .media { transform: translateY(-3px); border-color: var(--faint); }
.film .media img { transition: transform 900ms var(--ease-out); }
.film:hover .media img { transform: scale(1.04); }
.film .media .play { left: 50%; top: 50%; right: auto; bottom: auto; transform: translate(-50%, -50%); width: 52px; height: 52px; box-shadow: var(--glow); }
.film:hover .media .play { transform: translate(-50%, -50%) scale(1.06); }
.film .views { position: static; display: block; margin-top: -4px; padding: 0; background: none; border: 0; border-radius: 0; font-family: var(--font-body); font-size: .85rem; letter-spacing: 0; text-transform: none; color: var(--faint); font-weight: 400; }
.chips a.chip { text-decoration: none; }
.film h3 { font-size: 1.05rem; }
.film:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* ---------- services rig-board ---------- */
.rig { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.rig .card { position: relative; }
.rig .card::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.10) 50%, transparent 65%); transform: translateX(-130%); transition: transform 520ms var(--ease-out); }
.rig .card:hover::before { transform: translateX(130%); }

/* ---------- reviews rail ---------- */
.rail-wrap { position: relative; }
.rail { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 6px 0 16px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.rail::-webkit-scrollbar { display: none; }
.rail .review { flex: 0 0 min(86%, 420px); scroll-snap-align: start; grid-template-rows: auto 1fr auto; min-height: 250px; transition: border-color var(--t-base), transform var(--t-base) var(--ease-spring); }
.rail .review.in { border-color: rgba(255,255,255,.45); box-shadow: var(--glow); }
.review .quote { font-family: var(--font-display); font-weight: 700; font-size: 1.06rem; letter-spacing: -0.01em; line-height: 1.38; margin: 0; }
/* long reviews: grid-rows 0fr→1fr wrapper (smooth open AND close; instant under reduced-motion via the global kill) */
.review .qwrap { display: grid; grid-template-rows: 1fr; }
.review[data-long] .qwrap { position: relative; grid-template-rows: 0fr; transition: none; } /* close curve: gentle ease-in — the min-height floor hides fr<.64, so a decelerating curve would snap shut; this one starts moving on the click and lands the visible close ≈300ms */
.review[data-long] .quote { overflow: hidden; min-height: calc(7 * 1.38em); } /* floor = the old 7-line clamp height */
.review[data-long] .qwrap::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.9em; background: linear-gradient(180deg, transparent, var(--ink-1)); pointer-events: none; opacity: 1; transition: opacity var(--t-reveal) var(--ease-out); }
.review[data-long].open .qwrap { grid-template-rows: 1fr; transition-timing-function: var(--ease-out); } /* open curve */
.review[data-long].open .qwrap::after { opacity: 0; }
.review .more { justify-self: start; background: none; border: 0; padding: 0; color: var(--muted); font: inherit; font-size: .86rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 32px; }
.review .more:hover { color: var(--text); }
@media (max-width: 899px) { .review .quote { font-size: .98rem; font-weight: 600; } }
.review .who { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: .85rem; }
.review .who .n { font-weight: 700; color: var(--text); font-family: var(--font-display); font-size: .95rem; }
.review .who .src { color: var(--muted); font-size: .9rem; }
.rail-nav { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }
.rail-nav button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--ink-1); color: var(--text); cursor: pointer; display: grid; place-items: center;
  transition: transform var(--t-fast) var(--ease-spring), border-color var(--t-fast); }
.rail-nav button:hover { transform: translateY(-1px); border-color: var(--faint); box-shadow: var(--glow); }
.rail-nav button:active { transform: scale(.95); }
.rail-nav svg { width: 18px; height: 18px; }
.sources { font-size: .86rem; color: var(--muted); margin-top: 12px; }

/* ---------- venues ---------- */
.venue-chips .venue { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; }
.venue.play { cursor: pointer; color: var(--text); background: var(--ink-1); font: inherit; font-family: var(--font-display); font-weight: 700; transition: transform var(--t-fast) var(--ease-spring), border-color var(--t-fast); }
.venue.play:hover { transform: translateY(-1px); border-color: var(--faint); box-shadow: var(--glow); }
.venue.play:active { transform: scale(.98); }
.venue.play svg { width: 16px; height: 16px; }

/* ---------- how a night runs: cinema (Wayne's pick from three candidates, 09-12) ----------
   The stage fills the viewport and pins for six screens. Three real frames of ONE room, all framed
   on the same truss cube (day, tables laid -> night, lit, guests seated -> under the cube at peak),
   hold through each pair of steps and cross-dissolve at the chapter boundaries, so the room builds
   itself under the reader's thumb. Top and bottom of the stage dissolve into the black page
   (mask), no hairlines around the section: the film flows in and out of the site.
   Phones, reduced motion and no-JS get one still (800px, same soft edges) + the plain step list. */
#night-section, #night-section + .section { border-top: 0; }
#night-section .section-head { margin-bottom: clamp(8px, 2vw, 20px); }
.night { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.night .step-c { display: grid; gap: 10px; align-content: start; padding: 0; border: 0; background: none; }
.night .k { display: none; } /* the mono key is drawn as the display numeral below */
.night .step-c::before { content: attr(data-k); display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(2.6rem, 4.5vw, 4rem); line-height: .9; letter-spacing: -0.05em; margin-bottom: 4px;
  color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .38); transition: color 400ms var(--ease-out); }
.night .step-c.on::before { color: #fff; text-shadow: var(--glow-text); -webkit-text-stroke: 0; }
.night .step-c.in:not(.on)::before { color: var(--muted); text-shadow: none; }
.night h3 { font-size: clamp(1.5rem, 2.3vw, 2.1rem); letter-spacing: -0.03em; line-height: 1.05; max-width: 18ch; }
.night p { margin: 0; color: var(--muted); font-size: clamp(1rem, 1.15vw, 1.125rem); line-height: 1.6; max-width: 38ch; }
.night-scroll { display: grid; gap: 28px; }
.night-stage { position: relative; overflow: hidden; aspect-ratio: 3 / 2; margin: 0 calc(var(--gutter) * -1); /* phones: the still bleeds to the screen edges */
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent); }
.night-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; filter: saturate(0.88) contrast(1.06); }
.night-stage picture:last-child img { opacity: 1; } /* before the first paint (and on phones, where only one frame is inserted) the payoff frame shows */
/* registration: the cube's top bar sits at the same screen height in all three frames */
.night-stage img[src*="night-01"] { object-position: center 46%; }
.night-stage img[src*="night-02"] { object-position: center 50%; }
.night-stage img[src*="night-03"] { object-position: center 40%; }
.night-rail, .night-cards { display: none; }
/* 09-14: a chapter photograph every two steps on a phone, so the six steps stop being an unbroken wall of text.
   Full-bleed to the screen edges like the stage above them, the same soft top and bottom fade so nothing reads as a
   pasted-in box, and the same grade as every other photograph on the site. Desktop never sees these: there the three
   frames belong to the pinned stage, and night() does not insert them. */
.night-frame { position: relative; overflow: hidden; aspect-ratio: 3 / 2; margin: 12px calc(var(--gutter) * -1) 6px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent); }
.night-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.88) contrast(1.06); }
/* the same registration the stage uses, so the cube sits at one height as you scroll from frame to frame */
.night-frame img[src*="night-01"] { object-position: center 46%; }
.night-frame img[src*="night-02"] { object-position: center 50%; }
.night-frame img[src*="night-03"] { object-position: center 40%; }
@media (min-width: 900px) { .night-frame { display: none; } }

@media (min-width: 900px) {
  #night-section { overflow-x: clip; } /* 100vw includes the scrollbar; clip keeps sticky alive, hidden would not */
  .night-scroll { display: block; position: relative; }
  .night-stage { position: sticky; top: 0; height: 100svh; aspect-ratio: auto; width: 100vw; margin: 0 0 0 calc(50% - 50vw); z-index: 0; }
  .night-stage::after { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(90deg, rgba(0, 0, 0, .74), rgba(0, 0, 0, .28) 46%, rgba(0, 0, 0, .06)), linear-gradient(180deg, rgba(0, 0, 0, .2), transparent 30%, transparent 60%, rgba(0, 0, 0, .55)); }
  /* the six in-flow steps are invisible spacers here, one screen each: they give the film its
     scroll distance and keep the copy in the accessibility tree (opacity, not visibility) */
  .night-scroll .night { display: grid; grid-template-columns: 1fr; gap: 0; position: relative; z-index: 1; margin-top: -100svh; padding: 0; pointer-events: none; }
  .night-scroll .night .step-c { min-height: 100svh; opacity: 0; transform: none; transition: none; }
  /* title cards inside the pinned stage: bottom-left on the wrap's left edge, one at a time.
     The lit card is the step the picture is showing (orientation feedback, not decoration). */
  .night-cards::before { content: ""; position: absolute; inset: -56px -48px -36px -48px; z-index: -1; pointer-events: none; background: radial-gradient(120% 110% at 0% 100%, rgba(0,0,0,.88), rgba(0,0,0,.55) 40%, rgba(0,0,0,0) 72%); }
  .night-cards { display: block; position: absolute; z-index: 2; left: calc(max(0px, (100vw - var(--wrap)) / 2) + var(--gutter)); right: clamp(18px, 4vw, 48px); bottom: 12vh; max-width: 44ch; min-height: 34vh; }
  .night-card { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 10px; opacity: 0; transform: translateY(22px);
    transition: opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out); } /* exit: 240ms, drops away */
  .night-card.on { opacity: 1; transform: none; transition-duration: var(--t-cinematic); transition-delay: 90ms; } /* enter: 560ms, after the outgoing card has cleared */
  .night-card::before { content: attr(data-k); display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(4rem, 8vw, 7rem); line-height: .9; letter-spacing: -0.05em; color: #fff; text-shadow: var(--glow-text); margin-bottom: 4px; }
  .night-card h3 { font-size: clamp(2rem, 3.6vw, 3.2rem); letter-spacing: -0.03em; line-height: 1.05; max-width: 16ch; }
  .night-card p { margin: 0; font-size: clamp(1.05rem, 1.3vw, 1.2rem); line-height: 1.6; color: #D9D9D9; max-width: 40ch; }
  /* progress rail on the right edge: 01–06 with a hairline track whose fill follows the scroll */
  .night-rail { position: absolute; right: clamp(18px, 4vw, 48px); top: 50%; transform: translateY(-50%); z-index: 2; display: grid; grid-template-columns: auto 1px; gap: 0 14px; align-items: stretch; padding: 14px 10px 14px 18px; border-radius: var(--r-md); background: linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,.55) 35%); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); /* its own scrim: the frames get bright under the ticks (09-13 pass 2) */ }
  .night-ticks { margin: 0; padding: 0; list-style: none; display: grid; gap: 16px; font-family: var(--font-mono); font-size: .74rem; letter-spacing: .14em; color: var(--faint); text-align: right; }
  .night-ticks li { transition: color var(--t-base) var(--ease-out); }
  .night-ticks li.on { color: #fff; text-shadow: var(--glow-text); }
  .night-track { position: relative; width: 1px; background: rgba(255, 255, 255, .18); }
  .night-track .fill { position: absolute; inset: 0; background: #fff; box-shadow: 0 0 10px rgba(255, 255, 255, .7); transform-origin: top; transform: scaleY(0); }
}

@media (prefers-reduced-motion: reduce) {
  /* one still with the same soft edges, then the six steps as a plain list — no six-screen scroll over a static photograph */
  .night-stage { position: relative; top: auto; height: auto; aspect-ratio: 16 / 9; }
  .night-scroll .night { margin-top: 28px; gap: 28px; }
  .night-scroll .night { pointer-events: auto; }
  .night-scroll .night .step-c { min-height: 0; padding: 0; opacity: 1 !important; transform: none !important; transition: none !important; }
  .night .step-c::before { color: #fff; -webkit-text-stroke: 0; }
  .night-rail, .night-cards { display: none; }
}

/* ---------- closing CTA over the reel poster ---------- */
.cta-final { position: relative; overflow: hidden; border-radius: var(--r-lg); border: 1px solid var(--line); padding: clamp(32px, 6vw, 72px); display: grid; gap: 18px; isolation: isolate; }
.cta-final img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; opacity: .55; }
.cta-final:not(.xe-glass)::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(0,0,0,.94), rgba(0,0,0,.5)), radial-gradient(40% 60% at 82% 40%, rgba(255,255,255,.16), transparent 70%); }
.cta-final h2 { font-size: clamp(2rem, 5vw, 3.6rem); max-width: 14ch; }

/* atmosphere layer (Higgsfield tranche B — monochrome light art, desktop only for the weight budget) */
@media (min-width: 900px) {
  #night-section { position: relative; isolation: isolate; }
  #night-section::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("media/atmos/atmos-haze-16x9.jpg") center 30% / cover no-repeat; opacity: .18; pointer-events: none;
    /* the haze starts and stops on a soft edge too — a hard-edged backplate read as a line above and below the film (09-12) */
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent); }
  /* wizard pages: soft haze floor under the whole flow */
  main:has(#dj-wizard), main:has(#tech-wizard) { position: relative; isolation: isolate; }
  /* Quiet atmosphere, not a grey wash: low opacity, no fixed attachment (hard seam at main's
     edge), and a mask that fades the layer out before it can meet the black footer (09-12). */
  main:has(#dj-wizard)::before, main:has(#tech-wizard)::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("media/atmos/atmos-wizard.jpg") center bottom / cover no-repeat; opacity: .16; pointer-events: none; -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 82%, transparent); mask-image: linear-gradient(180deg, transparent, #000 12%, #000 82%, transparent); }
  /* about: followspot cone behind the timeline */
  section:has(#timeline) { position: relative; isolation: isolate; }
  section:has(#timeline)::before { content: ""; position: absolute; inset: 0; z-index: -1; -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 78%, transparent); mask-image: linear-gradient(180deg, transparent, #000 14%, #000 78%, transparent); /* the plate fades in and out: no hard seam (09-13 pass 2) */ background: url("media/atmos/atmos-about.jpg") center top / cover no-repeat; opacity: .22; pointer-events: none; }
  /* work: par-can fan behind the page header */
}
.cta-final img { opacity: .6; }

/* art direction: portrait/square sources in 16:10 frames — keep the subject, not the centre crop */
#services .media img[src*="line-array-tower"] { object-position: center 18%; }
#services .media img[src*="lighting.jpg"] { object-position: center 25%; }
#services .media img[src*="dj-decks-festoon"] { object-position: center 62%; }
#services .media img[src*="photo.jpg"] { object-position: center 35%; }

/* ---------- stagger for reveal groups ---------- */
.stagger > .reveal { transition-delay: calc(var(--i, 0) * 60ms); }

/* ---------- responsive ---------- */
@media (max-width: 899px) {
  .hero .hero-grid { grid-template-columns: 1fr; padding-top: 104px; padding-bottom: 96px; gap: 22px; }
  .hero h1 { max-width: 12ch; }
 
  .cue { display: none; }
  .spot { grid-template-columns: 1fr; gap: 24px; }
  .spot .sticky { position: static; }
  .spot-item .num { font-size: 3rem; top: -.35em; }
  .rig { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); gap: 12px; margin: 0 calc(var(--gutter) * -1); padding: 4px var(--gutter) 14px; scrollbar-width: none; } /* scroll-padding keeps card 0 on the content edge (09-13 pass 2) */
  .rig::-webkit-scrollbar { display: none; }
  .rig .card { flex: 0 0 78%; scroll-snap-align: start; }
  .night { grid-template-columns: 1fr 1fr; }
  .brands .lic { margin-left: 0; }
}
@media (max-width: 560px) { .night { grid-template-columns: 1fr; } .films { grid-template-columns: 1fr 1fr; } .film h3 { font-size: .92rem; } }

/* ---------- reduced motion: everything readable, nothing moving ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero h1 .w, .hero .hero-rest, .hero .dates { opacity: 1; transform: none; animation: none; }
  .hero-light, .motion-toggle { display: none; }
  .ticker .track { animation: none; width: auto; flex-wrap: wrap; row-gap: 6px; }
  .ticker .dupe { display: none; } /* the seamless-loop copy is dead weight when nothing moves */
  .spot-item .media { transform: none; opacity: 1; }
  .spot-item .num { color: #fff; -webkit-text-stroke: 0; }
  .hero::before { display: none; }
}

/* ============ Family pass 2026-09-12 — the weddings exhibit language, everywhere ============
   The weddings page set the bar (near-square panels, hairline structure, mono museum labels,
   one photographic grade). These rules carry that vocabulary to the pages built before it,
   without touching the wizard UI, where the softer card radius reads correctly as controls. */

/* One grade over every photograph on the site — six different shooters read as one gallery. */
.masonry .media img,
.rig .card .media img,
.spot-item .media img,
.film .media img,
#about-media .media img { filter: saturate(0.88) contrast(1.06); }

/* Exhibit panels: near-square corners + hairline edges on the content pages (not the wizard). */
.masonry .card,
.rig .card { border-radius: 6px; border-color: var(--hairline, rgba(255,255,255,.14)); }
.masonry .card .media,
.rig .card .media { border-radius: 0; }
.spot-item .media,
.film .media { border-radius: 4px; }

/* Door cards: the whole card is an <a>, so every text node inherited an underline. */
.door { text-decoration: none; }
.door h3, .door p, .door .eyebrow, .door .btn { text-decoration: none; }

/* Gear-brand row: optical sizing beats one uniform height — wide wordmarks read heavier. */
.brands img { height: 26px; }
.brands img[src*="peavey"] { height: 32px; }
.brands img[src*="shure"], .brands img[src*="l-acoustics"] { height: 19px; }
.brands img[src*="fbt"] { height: 22px; }
@media (max-width: 640px) { .brands { justify-content: center; gap: 18px 28px; } .brands .lic { margin-left: 0; } }

/* ============ 2026-09-12 — Two doors as photographs · three candidate evolutions of "How a night runs" ============
   Doors: Wayne asked for "more inviting". Two grey text boxes became two photographs at cell width with
   the copy burned onto a local black fade (the work-page grammar he approved). The DJ door is the product,
   so it is wider and carries the date-check form itself. Photos load 240px ahead of the viewport
   (lazyPictures in home.js) so the cold-load weight gate never pays for them.
   Night: the cinema block above replaced the old sticky-beside-the-steps layout (its two rival
   candidates, a stage-dominant sticky and three exhibit chapters, were built, reviewed and dropped
   by Wayne's choice, 09-12 evening). */

/* ---------- doors ---------- */
.doors { grid-template-columns: 1fr; gap: 14px; }
.door, .door.dj, .door.tech { display: grid; align-content: end; /* the copy row sits on the door's floor; min-height above it is photograph */ padding: 0; border: 0; border-radius: 4px; background: var(--ink-1); box-shadow: none; overflow: hidden; isolation: isolate; min-height: 380px; color: var(--text); text-decoration: none; }
/* the photograph is an absolute fill behind the copy: the copy sets the door's height, the photo
   always reaches every edge (a grid-cell photo came up short under a taller copy block and left a
   flat strip — Wayne's screenshot, 09-12) */
.door .door-copy { grid-area: 1 / 1; min-width: 0; }
.door .door-media { position: absolute; inset: 0; z-index: 0; display: block; }
.door .door-media img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.88) contrast(1.06); opacity: 0; transform: scale(1.001);
  transition: transform 900ms var(--ease-out), opacity var(--t-cinematic) var(--ease-out); }
.door .door-media.loaded img { opacity: 1; }
.door.dj .door-media img { object-position: center 42%; }
.door.tech .door-media img { object-position: center 55%; }
.door .door-copy { position: relative; align-self: end; z-index: 1; display: grid; gap: 10px; padding: 120px clamp(18px, 2.6vw, 30px) clamp(20px, 2.4vw, 28px);
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .72) 42%, rgba(0, 0, 0, .94)); }
.door h3 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); letter-spacing: -0.03em; line-height: 1.02; }
.door p { color: #D4D4D4; max-width: 46ch; font-size: .95rem; line-height: 1.55; margin: 0; }
.door .btn { justify-self: start; margin-top: 4px; }
/* the base card hover lifted the box; photographs sit still — the light moves instead */
.door:hover, .door.dj:hover { transform: none; border-color: transparent; }
.door::before { z-index: 2; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .09) 50%, transparent 70%); }
.door:hover .door-media img, .door:focus-within .door-media img { transform: scale(1.035); }
a.door:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
a.door:active .door-media img { transform: scale(1.012); transition-duration: var(--t-fast); }
/* the DJ door carries the date-check form: same field and action as the hero, no box around it */
.datecheck-door { max-width: 440px; background: none; border: 0; padding: 0; box-shadow: none; margin-top: 6px; }
.datecheck-door .dateface { background: rgba(0, 0, 0, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.datecheck-door .btn { min-height: 48px; }
@media (min-width: 900px) {
  .doors { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px; }
  .door, .door.dj, .door.tech { min-height: clamp(380px, 32vw, 460px); }
}
@media (prefers-reduced-motion: reduce) {
  .door .door-media img { transition: none; }
  .door:hover .door-media img, .door:focus-within .door-media img { transform: none; }
}

/* ============ 2026-09-13 — evolve pass, batch two ============
   Services rig-board in the doors/work grammar: the photograph at cell width, no card chrome,
   the copy burned onto a local black fade. Venue chips that are not films read as text, not buttons. */
.rig { gap: 14px; }
.rig .card { display: grid; align-content: end; padding: 0; border: 0; border-radius: 4px; background: none; box-shadow: none; overflow: hidden; min-height: clamp(300px, 26vw, 380px); isolation: isolate; gap: 0; }
.rig .card .media { position: absolute; inset: 0; z-index: 0; aspect-ratio: auto; border-radius: 0; }
.rig .card .media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-out); }
.rig .card .body { position: relative; z-index: 1; display: grid; gap: 8px; padding: 120px clamp(16px, 2vw, 24px) clamp(18px, 2vw, 24px); background: linear-gradient(180deg, transparent, rgba(0,0,0,.74) 42%, rgba(0,0,0,.94)); }
.rig .card h3 { font-size: clamp(1.25rem, 1.7vw, 1.5rem); letter-spacing: -0.02em; line-height: 1.05; }
.rig .card p { color: #D4D4D4; font-size: .92rem; line-height: 1.5; margin: 0; max-width: 40ch; }
.rig .card::before { z-index: 2; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.09) 50%, transparent 70%); }
.rig .card:hover { transform: none; border-color: transparent; }
.rig .card:hover .media img, .rig .card:focus-within .media img { transform: scale(1.035); }
.venue.plain { border-color: transparent; background: none; padding-left: 0; padding-right: 0; color: var(--muted); font-weight: 600; }
@media (max-width: 899px) { .rig .card { min-height: 320px; } }
@media (prefers-reduced-motion: reduce) { .rig .card .media img { transition: none; } .rig .card:hover .media img { transform: none; } }
.venue.plain + .venue.plain::before { content: "\00b7"; margin-right: 12px; color: var(--faint); }

/* 09-13 polish: the ticker fades at its edges like the equalizer; the reviews rail does not smooth-scroll under reduced motion */
.ticker { -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
@media (prefers-reduced-motion: reduce) { .rail { scroll-behavior: auto; } }

/* ============ 2026-09-13 — the hero: Wayne's pick B in Astra's composition, evolved (Step 7B). Scope: body[data-hero]. ============ */
/* the stage is the viewport below the sticky header (--header-h, measured live by motion.js); the equalizer floor sits on the fold */
body[data-hero] .hero { --stage: calc(100svh - var(--header-h, 69px)); min-height: var(--stage); display: grid; align-items: center; position: relative; isolation: isolate; overflow: clip; border-bottom: 0; }
body[data-hero] .hero::before { display: none; }
body[data-hero] .hero-still { position: absolute; inset: 0; z-index: 0; }
body[data-hero] .hero-still picture { display: block; height: 100%; }
body[data-hero] .hero-still img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, center 40%); display: block; }
/* the photograph stays; three fades protect the copy, the floor and the clear header */
body[data-hero] .hero-still::after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(90deg, rgba(0,0,0,.84), rgba(0,0,0,.58) 38%, rgba(0,0,0,.08) 72%),
  linear-gradient(0deg, #000, rgba(0,0,0,0) 28%),
  linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 22%); }
body[data-hero] .hero .hero-stage { position: relative; z-index: 2; width: 100%; display: grid; gap: 30px; padding-top: clamp(64px, 8vh, 96px); padding-bottom: clamp(150px, 19vh, 196px); }
/* the rendered floor is low enough (≤ 200px) that the base bottom padding clears it; the console may cover the dissolved tips only */
/* a soft pool of light behind the block: the beams reach the copy (static, never animated) */
body[data-hero] .hero-stage::before { content: ""; position: absolute; inset: -6% -10% -14% -12%; z-index: -1; pointer-events: none; background: radial-gradient(46% 44% at 32% 54%, rgba(255,255,255,.10), transparent 70%); }
body[data-hero] .hero-top { display: grid; gap: 22px; }
body[data-hero] .hero-origin { margin: 0; font-size: 1rem; color: var(--muted); }
body[data-hero] .hero h1 { font-size: clamp(3rem, 6.8vw, 6rem); letter-spacing: -.03em; line-height: 1; max-width: none; margin: 0; text-shadow: 0 2px 6px rgba(0,0,0,.45); }
body[data-hero] .hero-line { display: block; }
body[data-hero] .hero-bottom { display: grid; gap: 26px; max-width: 640px; min-width: 0; }
body[data-hero] .hero .lede { max-width: 49ch; margin: 0; font-size: 1.125rem; color: #E4E4E4; line-height: 1.55; text-wrap: pretty; }
/* The rig powers up first, then the masked headline and booking console settle.
   Keyboard focus and the pause preference reveal controls immediately. */
body[data-hero] .hero .hero-bottom, body[data-hero] .hero .hero-origin { animation: rise var(--t-editorial) var(--ease-editorial) backwards; animation-delay: 480ms; }
body[data-hero] .hero .hero-origin { animation-delay: 80ms; }
body[data-hero] .hero h1 .xe-line { transition-duration: var(--t-editorial); transition-timing-function: var(--ease-editorial); transition-delay: calc(160ms + var(--i, 0) * 45ms); }
body[data-hero] .hero .hero-bottom:focus-within { animation: none; }
body[data-hero] .hero-console { display: grid; gap: 20px; padding: 20px; min-width: 0; background: color-mix(in srgb, var(--ink-0) 72%, transparent); border: 1px solid var(--line-strong); box-shadow: var(--sh-3); }
body[data-hero] .hero-console::after { inset: -1px; opacity: .7; transition: opacity var(--t-fast) var(--ease-out); }
body[data-hero] .hero-console:focus-within::after { opacity: 1; }
body[data-hero] .hero-console::before { content: ""; position: absolute; top: -1px; left: 20px; width: 44px; height: 1px; background: var(--text); box-shadow: var(--glow); pointer-events: none; }

/* The console holds the existing native form; the white pill remains the brightest object. */
body[data-hero] .datecheck { background: transparent; border: 0; box-shadow: none; padding: 0; max-width: none; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: end; }
body[data-hero] .datecheck label { font-family: inherit; font-size: .92rem; letter-spacing: 0; text-transform: none; color: #CFCFCF; gap: 6px; min-width: 0; }
body[data-hero] .datefield .dateface { background: transparent; border: 0; border-bottom: 1px solid rgba(255,255,255,.55); border-radius: 0; padding: 12px 32px 12px 0; min-height: 56px; font-family: inherit; font-size: 1.15rem; font-weight: 500; letter-spacing: -0.01em; text-transform: none; color: var(--muted); transition: transform var(--t-fast) var(--ease-spring); }
body[data-hero] .datefield .dateface.set { color: var(--text); font-variant-numeric: tabular-nums; }
/* the calendar glyph, drawn in CSS (Astra): a box and its header line, at the field's right edge */
body[data-hero] .datefield::after { content: ""; position: absolute; right: 2px; bottom: 20px; width: 16px; height: 15px; border: 1px solid currentColor; border-radius: 2px; pointer-events: none; color: var(--muted); }
body[data-hero] .datefield::before { content: ""; position: absolute; right: 2px; bottom: 30px; width: 16px; border-top: 1px solid currentColor; pointer-events: none; color: var(--muted); }
body[data-hero] .datefield input[type="date"] { height: 56px; min-height: 56px; transition: none; }
body[data-hero] .datefield:has(input:focus-visible) .dateface { outline: 2px solid var(--text); outline-offset: 3px; }
body[data-hero] .datefield:hover .dateface { border-bottom-color: #fff; color: var(--text); }
body[data-hero] .datefield:focus-within .dateface { border-bottom-color: #fff; box-shadow: 0 1px 0 0 #fff, 0 6px 22px rgba(255,255,255,.18); }
body[data-hero] .datefield:hover::after, body[data-hero] .datefield:hover::before, body[data-hero] .datefield:focus-within::after, body[data-hero] .datefield:focus-within::before { color: #fff; }
body[data-hero] .datefield:active .dateface { background: var(--accent-soft); transform: scale(.97); }
body[data-hero] .datecheck .btn-primary { min-height: 56px; padding: 0 24px; transition: transform var(--t-fast) var(--ease-spring), opacity var(--t-fast); }
body[data-hero] .datecheck .btn-primary svg { transition: transform var(--t-fast) var(--ease-spring); }
body[data-hero] .datecheck .btn-primary:hover svg { transform: translateX(3px); }
body[data-hero] .datecheck .btn-primary:active { transform: scale(.97); }

/* Six illuminated date keys, three across on phones. No availability implied. */
body[data-hero] .dates-line { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: center; gap: 10px 8px; font-family: inherit; font-size: .92rem; letter-spacing: 0; color: var(--muted); }
body[data-hero] .dates-line .k { grid-column: 1 / -1; font-weight: 600; color: var(--muted); text-transform: none; letter-spacing: 0; }
body[data-hero] .dates-line > a { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 4px; background: var(--ink-1); border: 1px solid var(--line-strong); border-radius: var(--r-sm); box-shadow: var(--sh-1); color: var(--text); text-decoration: none; font-family: inherit; font-weight: 600; font-size: .9rem; font-variant-numeric: tabular-nums; white-space: nowrap; transition: transform var(--t-fast) var(--ease-spring); } /* body face, not mono: a date is a word, not a code (evolve pass 09-14) */
body[data-hero] .dates-line > a:hover, body[data-hero] .dates-line > a:focus-visible { background: var(--ink-2); border-color: var(--hair); box-shadow: var(--sh-1), var(--glow); transform: translateY(-2px); }
body[data-hero] .dates-line a:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
body[data-hero] .dates-line > a:active { transform: scale(.97); }
body[data-hero] .dates-line .note { grid-column: 1 / -1; margin-top: 2px; color: var(--muted); letter-spacing: 0; line-height: 1.6; }
body[data-hero] .dates-line .note a { display: inline; color: var(--text); text-decoration-color: var(--hair); text-underline-offset: 4px; }
body[data-hero] .dates-line .note a:hover { text-decoration-color: var(--text); }
body[data-hero] .dates-line .note a:active { opacity: .7; }

/* the strip under the hero: the ticker and the one pause control for everything that moves (ticker + equalizer) */
body[data-hero] .hero-strip { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; background: var(--ink-0); padding-right: var(--gutter); }
body[data-hero] .hero-strip .motion-toggle { position: static; min-height: 44px; padding: 0 14px; border: 0; border-radius: var(--r-sm); background: var(--ink-0); color: var(--muted); font-family: var(--font-body); font-size: .875rem; letter-spacing: 0; text-transform: none; text-decoration: underline; text-underline-offset: 4px; transition: transform var(--t-fast) var(--ease-spring); }
body[data-hero] .hero-strip .motion-toggle:hover { color: var(--text); background: var(--ink-2); }
body[data-hero] .hero-strip .motion-toggle:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
body[data-hero] .hero-strip .motion-toggle:active { transform: scale(.97); }

@media (max-width: 899px) {
  body[data-hero] .hero .hero-stage { padding-top: 32px; padding-bottom: 100px; gap: 24px; }
  body[data-hero] .hero-top { gap: 18px; }
  body[data-hero] .hero-origin { font-size: .875rem; }
  body[data-hero] .hero h1 { font-size: clamp(2.5rem, 11.8vw, 4.5rem); line-height: 1.02; }
  body[data-hero] .hero-line:last-child { max-width: 10ch; }
  body[data-hero] .hero-bottom { gap: 24px; max-width: 520px; }
  body[data-hero] .hero-console { padding: 16px; gap: 18px; }
  body[data-hero] .hero .lede { font-size: 1rem; }
  body[data-hero] .datecheck { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  body[data-hero] .datecheck .btn-primary { width: 100%; }
  body[data-hero] .hero-still::after { background:
    linear-gradient(90deg, rgba(0,0,0,.60), rgba(0,0,0,.22)),
    linear-gradient(0deg, #000, rgba(0,0,0,.75) 40%, rgba(0,0,0,.1) 80%),
    linear-gradient(180deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,0) 26%); }
  body[data-hero] .dates-line { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  body[data-hero] .dates-line > a { min-height: 44px; }
  body[data-hero] .dates-line .note { display: block; margin-top: 4px; font-size: .875rem; }
  /* phones: the site bar repeats the hero's own button, so it waits (off screen, inert via motion.js) until the hero form has scrolled past the header */
  body[data-hero].hero-booking-visible .mobile-bar { transform: translateY(120%); }
}
html.motion-off body[data-hero] .hero .hero-bottom, html.motion-off body[data-hero] .hero .hero-origin { animation: none; opacity: 1; transform: none; }
html.motion-off body[data-hero] .hero h1 .xe-line { transition: none; transform: none; }
@media (prefers-reduced-motion: reduce) {
  body[data-hero] .hero .hero-bottom, body[data-hero] .hero .hero-origin { opacity: 1; animation: none; }
  .eq { transform: none !important; }
}


/* kept from the Claude lane: a one-shot pulse on the button when a date is set (the pointer light now lives in the canvas, home.js eqCanvas) */
body[data-hero] .datecheck:has(.dateface.set) .btn-primary { animation: heropulse 720ms var(--ease-out) 1; }
@keyframes heropulse { 0% { transform: scale(1); } 100% { transform: scale(1); } } /* Wayne 09-13 (fourth review): "take the breath motion away, keep it one size" — the pulse is retired; the keyframe stays inert so nothing else needs to change */
@media (prefers-reduced-motion: reduce) { body[data-hero] .datecheck:has(.dateface.set) .btn-primary { animation: none; } }

/* the other two date forms match the hero: no box, a hairline underline, the button as the lit object */
.door .datecheck, .datecheck-mid { background: transparent; border: 0; box-shadow: none; padding: 0; grid-template-columns: minmax(180px, 1fr) auto; gap: 14px; align-items: end; }
.door .datecheck label, .datecheck-mid label { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: #D9D9D9; gap: 8px; }
.door .datefield .dateface, .datecheck-mid .datefield .dateface { background: transparent; border: 0; border-bottom: 1px solid rgba(255,255,255,.55); border-radius: 0; padding: 12px 0; min-height: 52px; font-size: 1.05rem; font-weight: 600; color: var(--muted); }
.door .datefield .dateface.set, .datecheck-mid .datefield .dateface.set { color: var(--text); }
.door .datefield:focus-within .dateface, .datecheck-mid .datefield:focus-within .dateface { border-bottom-color: #fff; box-shadow: 0 1px 0 0 #fff; }
@media (max-width: 899px) { .datecheck-mid { grid-template-columns: 1fr; } .datecheck-mid .btn-primary { width: 100%; } }