/* lights.css -- the look of lights.html, the front door as a short film (2026-10-18).

   THE IDEA. Night, and lights coming on. A warm black, warm off-white type, and one colour: the sodium-amber of
   a lamp or a lit marquee, used ONLY for things that are lit (a state with rooms, a sold seat, the ask). No
   purple-blue, no gradient text, no glass, no cards with shadows. Archivo, one variable family; its width moves.

   HOW THE FILM WORKS. Each .scene is tall (its height is how long the scene plays). Inside it, .pin sticks to
   the screen while the scene scrolls past. lights.js writes the scene's progress, 0 to 1, into --p, and the CSS
   below turns --p into movement. So the motion is tied to the scroll: scroll back and the film runs backwards.

   Spacing on the 4px scale (DESIGN.md). Phone first: ad visitors are almost all on phones. */

:root {
  --night: #0c0b0a;
  --night-2: #17150f;
  --text: #f2ede4;
  --dim: #9a9285;
  --faint: rgba(242, 237, 228, .14);
  --lamp: #ffb547;               /* the one colour: things that are lit */
  --lamp-deep: #e58e17;
  --gutter: 16px;
  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;
}
@media (min-width: 600px) { :root { --gutter: 24px; } }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--night); color: var(--text); font: 400 17px/1.55 var(--font); font-stretch: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
img { display: block; }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
body[data-for="gigs"] .only-rooms, body[data-for="rooms"] .only-gigs { display: none !important; }

/* ---------------- THE TOP BAR ---------------- */
.bar { position: fixed; z-index: 20; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 12px; padding: 12px var(--gutter);
       background: linear-gradient(var(--night) 0, rgba(12,11,10,.0) 100%); }
.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 700; font-size: 17px; letter-spacing: -.01em; }
.brand img { width: 24px; height: 24px; }
.switch { display: flex; margin-left: auto; border: 1px solid var(--faint); border-radius: 999px; padding: 2px; background: rgba(12,11,10,.7); }
.switch button { border: 0; background: none; padding: 8px 12px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--dim); cursor: pointer; white-space: nowrap; }
.switch button[aria-selected="true"] { background: var(--text); color: var(--night); }
.bar-in { display: none; text-decoration: none; font-size: 14px; color: var(--dim); }
.bar-in:hover { color: var(--text); }
@media (min-width: 720px) { .bar-in { display: inline-block; } }
.bar-ask { display: none; text-decoration: none; font-size: 14px; font-weight: 600; color: var(--night); background: var(--lamp); padding: 8px 16px; border-radius: 999px; }
@media (min-width: 720px) { .bar-ask { display: inline-block; } .switch { margin-left: auto; } }
/* on a phone the ask floats at the foot of the screen instead, and steps aside once the real ask is in view */
@media (max-width: 719px) {
  .bar-ask { display: inline-block; position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); padding: 12px 24px; font-size: 16px;
             box-shadow: 0 8px 24px rgba(0,0,0,.5); transition: opacity .3s, transform .3s; }
  .at-ask .bar-ask { opacity: 0; pointer-events: none; transform: translate(-50%, 16px); }
  .cue { display: none; }
}
@media (max-width: 380px) { .brand span, .brand { font-size: 0; } .brand img { width: 28px; height: 28px; } }

/* ---------------- THE SCENES ---------------- */
.scene { position: relative; }
.pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }

/* ---------------- SCENE 1: THE OPENING ---------------- */
.s-open { height: 320vh; }
/* the window: small between the two words at first, the whole screen at the end */
.win { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
       width: calc(64vw + 36vw * var(--grow, 0)); height: calc(20vh + 80vh * var(--grow, 0));
       border-radius: calc(12px * (1 - var(--grow, 0))); overflow: hidden; }
.win img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%;
           transform: scale(calc(1.25 - .25 * var(--grow, 0))); filter: brightness(calc(1 - .45 * var(--dark, 0))); }
/* the two words: they part (up and down on a phone, left and right on a wide screen) and widen as they go */
.word { position: absolute; left: 0; right: 0; margin: 0; text-align: center; font-weight: 800; text-transform: uppercase;
        font-size: 18vw; line-height: .9; letter-spacing: -.02em; font-stretch: calc(75% + 50% * var(--grow, 0)); pointer-events: none; }
.w1 { top: calc(50% - 10vh - 18vw); transform: translateY(calc(-60vh * var(--grow, 0))); }
.w2 { top: calc(50% + 10vh + 1vw); transform: translateY(calc(60vh * var(--grow, 0))); }
@media (min-width: 900px) {
  .win { width: calc(34vw + 66vw * var(--grow, 0)); height: calc(26vh + 74vh * var(--grow, 0)); }
  .word { top: 50% !important; font-size: 11vw; }
  .w1 { left: 0; right: auto; width: calc(50% - 17vw); text-align: right; padding-right: 2vw; transform: translate(calc(-60vw * var(--grow, 0)), -50%); }
  .w2 { left: auto; right: 0; width: calc(50% - 17vw); text-align: left; padding-left: 2vw; transform: translate(calc(60vw * var(--grow, 0)), -50%); }
}
/* the promise, rising over the photo once the window is open */
.over { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 var(--gutter) 64px; max-width: 1200px; margin: 0 auto;
        opacity: var(--say, 0); transform: translateY(calc(32px * (1 - var(--say, 0)))); }
.over h1 { font-size: 40px; line-height: 1; font-weight: 800; letter-spacing: -.025em; margin: 0 0 16px; max-width: 13ch; font-stretch: 88%; text-wrap: balance; }
.over p { margin: 0; max-width: 34em; font-size: 18px; color: var(--text); }
@media (min-width: 600px) { .over h1 { font-size: 64px; } .over p { font-size: 20px; } }
@media (min-width: 1000px) { .over h1 { font-size: 84px; } }
.cue { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); margin: 0; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--dim);
       opacity: calc(1 - 4 * var(--p)); }

/* ---------------- SCENE 2: NIGHTFALL ---------------- */
.s-map { height: 420vh; }
.s-map .pin { display: flex; flex-direction: column; justify-content: center; gap: 24px; padding: 72px var(--gutter) 24px; max-width: 1100px; margin: 0 auto; }
.map-head h2 { font-size: 30px; line-height: 1.05; font-weight: 750; letter-spacing: -.02em; margin: 4px 0 0; font-stretch: 90%; max-width: 18ch; }
.clock { margin: 0; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--lamp); font-variant-numeric: tabular-nums; }
@media (min-width: 600px) { .map-head h2 { font-size: 44px; } }

/* the tile map: 11 columns by 8 rows, each state one square in its rough place */
.tiles { display: grid; grid-template-columns: repeat(11, 1fr); grid-template-rows: repeat(8, auto); gap: 4px; width: 100%; max-width: 720px; align-self: center; }
.tile { aspect-ratio: 1; border: 1px solid var(--faint); border-radius: 4px; background: var(--night-2); color: var(--dim); font-size: 10px; font-weight: 600;
        display: flex; align-items: flex-end; justify-content: flex-start; padding: 3px 4px; cursor: pointer; position: relative;
        transition: background .5s ease, color .5s ease, box-shadow .6s ease, border-color .5s ease; }
/* lit: the brighter the state, the more rooms (or towns) it has; --b is 0 to 1, set by lights.js */
.tile.on { color: var(--night); border-color: transparent;
           background: color-mix(in srgb, var(--lamp) calc(35% + 65% * var(--b)), var(--night-2));
           box-shadow: 0 0 calc(4px + 22px * var(--b)) color-mix(in srgb, var(--lamp) calc(20% + 50% * var(--b)), transparent); }
.tile:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.tile.picked { outline: 2px solid var(--text); outline-offset: 2px; }
@media (min-width: 600px) { .tile { font-size: 12px; padding: 4px 6px; } .tiles { gap: 6px; } }

.tally { display: flex; flex-wrap: wrap; gap: 8px 32px; }
.tally b { display: block; font-size: 40px; line-height: 1; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; font-stretch: 85%; }
.tally span { display: block; font-size: 14px; color: var(--dim); margin-top: 4px; }
@media (min-width: 600px) { .tally b { font-size: 56px; } }
.map-foot { margin: 0; font-size: 13px; color: var(--dim); }
.tap { color: var(--text); opacity: var(--done, 0); transition: opacity .4s; }

/* one state's own numbers, when tapped */
.state-card { position: absolute; z-index: 5; right: var(--gutter); bottom: 72px; width: min(300px, calc(100% - 2 * var(--gutter)));
              background: var(--text); color: var(--night); border-radius: 8px; padding: 16px; font-size: 14px; }
.state-card h3 { margin: 0 0 8px; font-size: 22px; font-weight: 800; letter-spacing: -.01em; font-stretch: 90%; }
.state-card dl { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; margin: 0; font-variant-numeric: tabular-nums; }
.state-card dt { color: #5c564d; }
.state-card dd { margin: 0; font-weight: 700; text-align: right; }
.state-card button { position: absolute; top: 8px; right: 8px; border: 0; background: none; font-size: 20px; line-height: 1; cursor: pointer; padding: 4px 8px; }

/* ---------------- SCENE 3: THE CLOSE-UP ---------------- */
.s-close { height: 320vh; }
.s-close .pin { display: grid; align-content: center; gap: 32px; padding: 72px var(--gutter) 24px; max-width: 1100px; margin: 0 auto; }
@media (min-width: 900px) { .s-close .pin { grid-template-columns: 1fr 1.2fr; align-items: center; gap: 64px; } }
.close-words h2 { font-size: 32px; line-height: 1.02; font-weight: 800; letter-spacing: -.02em; margin: 0 0 16px; font-stretch: 88%; max-width: 15ch; }
.close-words p { margin: 0; color: var(--dim); max-width: 30em; }
@media (min-width: 600px) { .close-words h2 { font-size: 48px; } }
/* the words arrive first, the picture comes in behind them */
.close-words { opacity: calc(var(--p) * 4); transform: translateY(calc(24px * (1 - min(1, var(--p) * 4)))); }

/* City Gigs: the record card, pushed in from far off; the black bars land one after another */
.record { background: var(--text); color: var(--night); border-radius: 8px; padding: 20px; max-width: 460px; width: 100%; justify-self: center;
          transform: perspective(900px) rotateX(calc(18deg * (1 - var(--in, 0)))) scale(calc(.8 + .2 * var(--in, 0))); opacity: var(--in, 0); }
.record-top { display: flex; justify-content: space-between; margin: 0 0 12px; padding-bottom: 8px; border-bottom: 2px solid var(--lamp-deep);
              font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.record-top span:last-child { color: var(--lamp-deep); }
.record dl { display: grid; grid-template-columns: auto 1fr; gap: 12px 16px; margin: 0; font-size: 15px; line-height: 20px; }
.record dt { color: #6a6358; }
.record dd { margin: 0; font-weight: 500; }
.blot { display: inline-block; height: 16px; vertical-align: -3px; background: var(--night); max-width: 100%;
       width: calc(var(--w) * clamp(0, (var(--seal, 0) - var(--d)) * 3, 1)); }

/* Box Office: the seat map, printed in lamp light: a sold seat is lit, a seat still for sale is a ring */
.seats { width: 100%; opacity: var(--in, 0); transform: scale(calc(.85 + .15 * var(--in, 0))); }
.seats svg { display: block; width: 100%; height: auto; max-height: 56vh; }
.seats .floor { fill: none; stroke: var(--faint); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.seats .stage { fill: var(--text); }
.seats .stage-t { fill: var(--night); font-family: var(--font); font-weight: 700; letter-spacing: .3em; text-anchor: middle; }
.seats .seat { fill: transparent; stroke: var(--dim); stroke-width: 1px; vector-effect: non-scaling-stroke; transition: fill .2s, stroke .2s; }
.seats .seat.sold { fill: var(--lamp); stroke: var(--lamp); }
.seats .seat.held { fill: var(--faint); stroke: none; }
.night { display: flex; gap: 32px; margin: 24px 0 0; }
.night dt { font-size: 13px; color: var(--dim); }
.night dd { margin: 4px 0 0; font-size: 40px; line-height: 1; font-weight: 800; font-variant-numeric: tabular-nums; font-stretch: 85%; }

/* ---------------- SCENE 4: THE ASK ---------------- */
.ask-scene { max-width: 760px; margin: 0 auto; padding: 128px var(--gutter) 96px; }
.ask-scene h2 { font-size: 64px; line-height: .95; font-weight: 800; letter-spacing: -.03em; margin: 0 0 16px; font-stretch: 80%; }
@media (min-width: 600px) { .ask-scene h2 { font-size: 112px; } }
.ask-sub { margin: 0 0 32px; color: var(--dim); font-size: 18px; max-width: 30em; }
.ask { display: grid; gap: 16px; }
.ask label span { display: block; font-size: 13px; color: var(--dim); margin-bottom: 4px; }
.ask input { width: 100%; font: 400 20px/1.3 var(--font); color: var(--text); background: transparent; border: 0; border-bottom: 1px solid var(--dim); padding: 8px 0; border-radius: 0; }
.ask input:focus { outline: none; border-bottom-color: var(--lamp); }
.ask button { justify-self: start; border: 0; border-radius: 999px; background: var(--lamp); color: var(--night); font-size: 18px; font-weight: 700; padding: 16px 32px; cursor: pointer; }
.ask button:hover { background: var(--lamp-deep); }
.ask button[disabled] { opacity: .6; cursor: wait; }
.ask button:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
.fine { margin: 0; font-size: 14px; color: var(--dim); }
.fine.err { color: #ffb4a6; }
@media (min-width: 720px) { .ask { grid-template-columns: 1fr 1.4fr auto; align-items: end; } .fine { grid-column: 1 / -1; } }
.thanks-big { font-size: 40px; font-weight: 800; margin: 0 0 8px; letter-spacing: -.02em; }
.thanks p { margin: 0 0 4px; }

.foot { border-top: 1px solid var(--faint); padding: 24px var(--gutter) 32px; text-align: center; font-size: 13px; color: var(--dim); }
.foot p { margin: 0; }

/* ---------------- REDUCED MOTION: the finished pictures, no pinning ---------------- */
.calm .scene { height: auto !important; }
.calm .pin { position: relative; height: auto; min-height: 100svh; }
.calm .tile, .calm .seats .seat { transition: none; }