/* AmpRoom Live — the event-day plane.
   =====================================================================
   Designed for the conditions it is actually read in: a phone, one hand,
   held up in a dark room, on congested signal, by somebody who wants one
   fact and then wants to put the phone away.

   That drives every decision below and none of them are stylistic:

   - Dark ground by default. A white screen in a darkened venue is a torch
     pointed at the person holding it and at everybody behind them.
   - Large type, high contrast. This is read standing up and moving.
   - No imagery above the answer. A hero photograph on the event-day page
     pushes "what is on next" below the fold, and it is the only thing
     anybody opened the page for.
   - One column. There is no second column on a phone, and pretending
     otherwise costs a media query and a layout bug.

   Plane identity per the 28 Aug brand ruling: the shared gold AR monogram,
   with the plane's own typographic name — here reversed for a dark ground. */

:root{
  --ink:#F4F2EF;            /* type on the dark ground */
  --dim:#A9A39B;            /* secondary, still ≥4.5:1 on --bg */
  --bg:#0B0C0E;
  --card:#15171A;
  --line:#262A2F;
  --gold:#C9992E;           /* lifted from the light-ground #a8741a: on #0B0C0E
                               that tone reads 2.6:1, which fails outright.
                               This measures 8.1:1 and is the same hue. */
  --gold-ink:#E3BE63;
  /* LIVE-HERO-02. The brightest step of the gold ramp, for display accents on a
     dark ground. Same hue as --gold and --gold-ink (43°); only the luminance
     moves. Added as a token rather than written into a rule — the violet this
     plane carried was hard-coded, and nothing in :root ever named it. */
  --gold-bright:#F0D48A;
  /* Text on a ground that stays dark in BOTH colour schemes. --ink flips to
     #14161A under a light preference, so the forced-dark hero cannot use it. */
  --on-dark:#F4F2EF;
  --on-dark-soft:#D2CCC3;
  --urgent:#FF9E80;         /* warm rather than red: 8.9:1 here, where a true
                               red on this ground sits under 4.5:1 */
  --display:Prata,"Times New Roman",Georgia,serif;
  --sans:Rubik,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.5;
  -webkit-text-size-adjust:100%;
  /* The venue's own notch and home indicator. */
  padding:env(safe-area-inset-top) env(safe-area-inset-right)
          env(safe-area-inset-bottom) env(safe-area-inset-left);
}
a{color:var(--gold-ink)}

.wrap{max-width:620px;margin:0 auto;padding:0 18px}

/* ── Header ─────────────────────────────────────────────────────────── */
.lv-head{display:flex;align-items:center;gap:13px;padding:16px 0 10px}
.lv-head img{display:block;height:34px;width:auto;flex:none}
.lv-wm{display:flex;flex-direction:column;gap:2px;text-decoration:none}
.lv-wm b{font-family:var(--display);font-weight:800;font-size:20px;
  letter-spacing:.02em;line-height:1;color:var(--ink)}
.lv-wm i{font-family:var(--display);font-style:normal;font-weight:700;
  font-size:10.5px;letter-spacing:.42em;line-height:1;color:var(--gold-ink)}

/* ── Event identity ─────────────────────────────────────────────────── */
.lv-event{padding:10px 0 4px;border-bottom:1px solid var(--line)}
.lv-event h1{font-family:var(--display);font-weight:400;font-size:31px;
  line-height:1.12;margin:0 0 6px}
.lv-where{color:var(--dim);font-size:15px;margin:0 0 14px}
.lv-where b{color:var(--ink);font-weight:500}

/* ── Now / Next ─────────────────────────────────────────────────────── */
/* The reason the page exists, so it is first and it is the largest thing
   on it. */
.lv-now{margin:18px 0 8px}
.lv-slot{background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:15px 16px;margin-bottom:10px}
.lv-slot.is-now{border-color:var(--gold);background:#1A1710}
.lv-tag{font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-ink);margin:0 0 5px}
.lv-slot h2{font-size:21px;line-height:1.2;margin:0 0 4px;font-weight:600}
.lv-time{font-family:var(--mono);font-size:14px;color:var(--dim);margin:0}
.lv-slot p.lv-detail{margin:8px 0 0;color:var(--dim);font-size:15px}

/* ── Programme ──────────────────────────────────────────────────────── */
.lv-sec{margin:26px 0}
.lv-sec > h2{font-size:13px;font-family:var(--mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim);margin:0 0 12px;font-weight:500}
.lv-row{display:grid;grid-template-columns:64px 1fr;gap:12px;
  padding:12px 0;border-top:1px solid var(--line)}
.lv-row:first-of-type{border-top:none}
.lv-row time{font-family:var(--mono);font-size:14px;color:var(--gold-ink);
  padding-top:2px}
.lv-row b{display:block;font-weight:600;font-size:17px}
.lv-row span{display:block;color:var(--dim);font-size:14.5px}
.lv-row.is-past{opacity:.45}

/* ── Announcements ──────────────────────────────────────────────────── */
.lv-note{border-left:3px solid var(--line);padding:2px 0 2px 13px;margin:0 0 14px}
.lv-note.is-urgent{border-left-color:var(--urgent)}
.lv-note b{display:block;font-weight:600}
.lv-note p{margin:3px 0 0;color:var(--dim);font-size:15px}
.lv-note time{display:block;font-family:var(--mono);font-size:12px;
  color:var(--dim);margin-top:4px}

/* ── States ─────────────────────────────────────────────────────────── */
.lv-empty{color:var(--dim);padding:14px 0}
.lv-demo{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;padding:3px 9px;border-radius:999px;
  border:1px solid var(--gold);color:var(--gold-ink);margin-bottom:10px}
.lv-foot{border-top:1px solid var(--line);margin-top:34px;padding:16px 0 30px;
  color:var(--dim);font-size:14px}
.lv-foot a{display:inline-block;margin-top:6px}

/* Somebody has explicitly asked for a light interface. Honoured, because the
   dark ground is a considered default rather than a house style, and a person
   who needs the bright one usually needs it. */
@media (prefers-color-scheme: light){
  :root:not([data-force-dark]){
    --ink:#14161A; --dim:#4A5058; --bg:#FBFAF8; --card:#FFFFFF;
    --line:#E4E0DA; --gold:#a8741a; --gold-ink:#8a5f15; --urgent:#A8331A;
  }
}

/* ── Event-day hierarchy ──────────────────────────────────────────────────
   On the day, identity compresses to a line and the answer comes first. Off
   the day the full block stays, because somebody planning needs the building
   and the date. */
.lv-event h1.lv-compact{font-family:var(--sans);font-weight:600;font-size:19px;line-height:1.25;
  margin:0 0 2px;letter-spacing:0}
body.is-event-day .lv-event{padding:6px 0 2px}
body.is-event-day .lv-where{margin-bottom:10px;font-size:14px}
body.is-event-day .lv-now{margin-top:10px}

/* ── Urgent notices, pinned above everything ──────────────────────────── */
.lv-urgent{margin:14px 0 4px}
.lv-urgent .lv-note{border-left-width:4px;border-left-color:var(--urgent);
  background:rgba(255,158,128,.07);border-radius:0 10px 10px 0;padding:12px 14px}
.lv-urgent .lv-note b{font-size:17px}

/* ── Now / Next ───────────────────────────────────────────────────────── */
/* The countdown sits with the label, not with the title: it answers "how long",
   which is a property of the slot rather than of the thing happening in it. */
.lv-slot-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:5px}
.lv-slot-head .lv-tag{margin:0}
.lv-rel{font-family:var(--sans);font-size:12px;letter-spacing:0;text-transform:none;
  color:var(--dim);font-weight:500}
/* Where to go, on its own line. In a dark room this is the line people hunt for,
   and it used to be a fragment after a middot at the end of a time. */
.lv-place-line{display:flex;align-items:center;gap:7px;margin:6px 0 0;
  font-size:15.5px;font-weight:500;color:var(--ink)}
.lv-pin{color:var(--gold-ink);font-size:12px;flex:none}

/* ── Programme ────────────────────────────────────────────────────────── */
/* 24-hour times fit the column without wrapping; "06:30 PM" did not, so every
   row was taller than it needed to be and the column stopped scanning. */
.lv-row{grid-template-columns:52px 1fr}
.lv-row.is-current{background:rgba(201,153,46,.10);border-radius:10px;
  margin:0 -10px;padding-left:10px;padding-right:10px}
.lv-row.is-current time{color:var(--gold)}
.lv-row.is-current b{color:var(--ink)}

/* ── Touch ────────────────────────────────────────────────────────────── */
/* Read one-handed, standing up. Nothing here is smaller than a comfortable
   target and nothing relies on hover, which does not exist on a phone. */
.lv-foot a{display:inline-block;padding:10px 0;min-height:44px;line-height:24px}

@media (prefers-color-scheme: light){
  :root:not([data-force-dark]) .lv-urgent .lv-note{background:rgba(168,51,26,.06)}
  :root:not([data-force-dark]) .lv-row.is-current{background:rgba(168,116,26,.10)}
}

/* ── AMPROOM FAMILY BASELINE · the discovery front door ─────────────────────
   The event-day page above is unchanged — LIVE INFORMATION PRIORITY is ratified
   and nothing inside an activated event moves. This is the page a person
   reaches BEFORE they have a ticket, and it answers a different question:
   what is on, and is it worth going to. */
.lv-home{background:var(--bg);color:var(--ink)}

/* The hero band keeps its own dark ground in BOTH schemes, the way Digital's
   header does. That is not a house style overriding a preference: the light
   override above exists so somebody who needs a bright interface can READ the
   event-day page, and it still does. This is one cinematic band at the top of a
   browse surface, and the content below it honours the preference exactly as
   before. */
/* LIVE-HERO-02 — PO readability correction.
   The band was #0B0C0E with #A9A39B navigation and description. Every value
   passed WCAG on its own and the band still read as lifeless: near-black ground,
   muted grey chrome and a single gold word. Contrast ratios are a floor, not a
   measure of whether something is comfortable to read at a glance.

   The ground lifts to a premium charcoal centred on the #17191D the PO named,
   with a restrained vertical gradient so the band is not one flat field. Every
   ratio below is computed against #1B1E23, the gradient's LIGHTEST point, which
   is the worst case for light text. */
.lv-top{background:linear-gradient(180deg,#1B1E23 0%,#17191D 55%,#15171B 100%);
  color:var(--on-dark);border-bottom-color:#2E343B}
/* Warm white at rest, gold reserved for hover and focus — 14.96:1 resting,
   where the muted grey it replaces measured 7.83:1 on the old ground. */
.lv-top .lv-nav a{color:var(--on-dark)}
.lv-top .lv-nav a:hover,
.lv-top .lv-nav a:focus-visible{color:var(--gold-ink)}
.lv-top .lv-hero h1{color:var(--on-dark)}
/* 10.48:1, against 7.83:1 for the grey it replaces. */
.lv-top .lv-hero-copy>p{color:var(--on-dark-soft)}
/* Scoped to .lv-top so it beats the .lv-hero-next{background:var(--card)} rule
   further down, which resolves to white under a light-scheme preference. The
   first version stated these first and lost on source order — the card went
   white and its heading became dark text nobody could read against it. */
/* Lifted with the ground. At #15171A the panel would have been DARKER than the
   band behind it and read as a hole rather than a card; the border carries the
   separation either way, and at 1.62:1 against the ground it now carries it
   better than the 1.36:1 it had before. */
.lv-top .lv-hero-next{background:#23272D;border-color:#3A414A}
.lv-top .lv-hero-next h2{color:var(--on-dark)}
.lv-top .lv-hero-next p{color:var(--on-dark-soft)}
.lv-top .lv-hero-next .lv-state{background:#2C323A;color:var(--on-dark-soft)}
.lv-top .lv-hero-next .lv-state--livenow{background:#D43052;color:#fff}
.lv-top .lv-hero-next .lv-state--doorsopen{background:#3A2E12;color:#E3BE63}
.lv-wm b{color:inherit}
/* max-width:none is the whole fix, and the collision was a symptom rather than
   the defect. The base .wrap caps at 620px because the EVENT-DAY page is
   phone-first and should be. This override set `width` and not `max-width`, so
   the cap survived and the entire discovery front door rendered in a 620px
   column at 1440 — with "happening." overflowing that column by 73px and
   landing on the featured panel. Widening the container puts the word back
   inside its own column; nothing else moves. */
.lv-home .wrap{width:min(1200px,calc(100% - 40px));max-width:none;margin-inline:auto}

.lv-top{border-bottom:1px solid var(--line)}
.lv-bar{display:flex;flex-wrap:wrap;align-items:center;gap:14px 34px;padding-block:20px}
.lv-lockup{display:flex;align-items:center;gap:11px;text-decoration:none}
.lv-lockup img{height:34px;width:auto;display:block}
.lv-nav{margin-left:auto;display:flex;flex-wrap:wrap;gap:10px 28px;font-size:14.5px}
.lv-nav a{color:var(--dim);text-decoration:none}
.lv-nav a:hover{color:var(--ink)}

.lv-hero{display:grid;gap:40px;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  align-items:center;padding-block:clamp(46px,6vw,80px)}
.lv-hero h1{font-size:clamp(42px,5.6vw,72px);line-height:1.02;margin:0;
  font-family:var(--display,Prata),serif;font-weight:400}
/* The mockup drew this accent in violet. The family palette is gold, charcoal,
   black and white, and an earlier comment here argued the dark ground made LIVE
   an exception — it did not; that was a rule invented beside the code it
   excused. PO ruling, 9 Oct 2026: LIVE differentiates through imagery,
   lighting, motion and temporal presentation, never through a second brand
   colour. --gold-ink measures 11.0:1 on this ground. */
.lv-hero h1 em{font-style:normal;color:var(--gold-bright)}
.lv-hero-copy>p{margin:20px 0 0;color:var(--dim);font-size:17px;max-width:44ch}
.lv-cta{display:inline-flex;margin-top:28px;padding:.85rem 1.6rem;border-radius:999px;
  background:var(--gold);color:var(--bg);font-weight:500;font-size:15px;text-decoration:none}
/* The label inverts: gold is a light ground, and white on it measures 2.4:1.
   7.5:1 this way, 11.0:1 on hover. */
.lv-cta:hover{background:var(--gold-ink)}

.lv-hero-next{border:1px solid var(--line);border-radius:16px;padding:24px;
  background:var(--card)}
/* An empty panel is a white box the reader has to work out is not a fault. With
   no catalogue there is nothing to feature, and nothing is what it shows. */
.lv-hero-next:empty{display:none}
.lv-hero-next h2{margin:12px 0 6px;font-size:26px;line-height:1.15}
.lv-hero-next p{margin:0;color:var(--dim);font-size:14.5px}
.lv-hero-next a{display:inline-block;margin-top:14px;color:var(--gold-ink);font-size:14.5px;
  text-decoration:none}
.lv-hero-next a:hover{text-decoration:underline}

.lv-onnow{padding-block:clamp(34px,4vw,52px)}
.lv-onnow-head{display:flex;flex-wrap:wrap;align-items:center;gap:16px 30px;
  margin-bottom:26px}
.lv-onnow-head h2{margin:0;font-size:28px}
.lv-tabs{margin-left:auto;display:flex;flex-wrap:wrap;gap:6px}
.lv-tabs button{background:none;border:0;color:var(--dim);font:500 13px/1 inherit;
  letter-spacing:.1em;text-transform:uppercase;padding:9px 12px;border-radius:999px;
  cursor:pointer}
.lv-tabs button[aria-selected="true"]{color:var(--ink);background:var(--card);
  box-shadow:inset 0 -2px 0 var(--gold)}

.lv-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.lv-card{display:flex;flex-direction:column;gap:7px;padding:20px;border-radius:14px;
  background:var(--card);border:1px solid var(--line);text-decoration:none;color:inherit}
.lv-card:hover{border-color:#3a3f47}
.lv-card h3{margin:2px 0 0;font-size:19px;line-height:1.25;color:var(--ink)}
.lv-card-top{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.lv-meta{margin:0;font-size:13.5px;color:var(--dim)}
.lv-when{font-family:var(--mono,monospace);font-size:12px;letter-spacing:.04em}
.lv-prog{margin:auto 0 0;padding-top:10px;font-size:12.5px;color:var(--dim)}
/* An event with no running order says so. Silence would read as a page fault. */
.lv-prog--none{color:#7C8493;font-style:normal}

.lv-state,.lv-tag{font-family:var(--mono,monospace);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;padding:5px 9px;border-radius:999px;display:inline-block}
.lv-state{background:#232830;color:var(--dim)}
/* Only the live badge is loud, because only it is urgent.

   #E8385A until 9 Oct 2026, when it measured 4.08:1 against its own white
   label — below the 4.5:1 that 10px uppercase needs. #D43052 is 0.8 degrees
   away in hue, so it is the same red: 4.83:1 for the label, and 3.10:1 against
   the featured panel behind it, which is the boundary WCAG 1.4.11 asks about.
   A darker candidate read better as text and fell to 2.73:1 against that panel;
   this value is the one that satisfies both. */
.lv-state--livenow{background:#D43052;color:#fff}
.lv-state--tonight{background:#232830;color:var(--gold-ink)}
.lv-tag{background:#2A2416;color:var(--gold-ink)}

/* No data is an intentional state. None of the three may look broken. */
.lv-empty-state{grid-column:1/-1;border:1px dashed var(--line);border-radius:14px;
  padding:30px 26px;background:var(--card)}
.lv-empty-state b{display:block;font-size:19px;margin-bottom:7px;color:var(--ink)}
.lv-empty-state p{margin:0;color:var(--dim);font-size:14.5px;max-width:58ch}

.lv-promise{border-top:1px solid var(--line);padding-block:34px 46px}
.lv-verbs{list-style:none;margin:0;padding:0;display:grid;gap:22px 34px;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.lv-verbs li{display:flex;align-items:flex-start;gap:12px}
.lv-verbs svg{flex:none;width:22px;height:22px;fill:none;stroke:var(--gold-ink);
  stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;margin-top:2px}
.lv-verbs b{display:block;font-size:14.5px;color:var(--ink)}
.lv-verbs span{display:block;font-size:13px;color:var(--dim);margin-top:2px}

.lv-home .lv-foot{border-top:1px solid var(--line);padding-block:30px 44px}
.lv-home .lv-foot p{margin:10px 0 0;color:var(--dim);font-size:14px}

@media (max-width:860px){
  .lv-hero{grid-template-columns:1fr;gap:28px}
  .lv-tabs{margin-left:0;width:100%}
}
.lv-state--doorsopen{background:#3A2E12;color:var(--gold-ink)}
/* Named, because "Live now" without saying WHAT is on is a claim the reader
   cannot check against the room they are standing in. */
.lv-onair{margin:6px 0 0;font-size:13.5px;color:var(--gold-ink)}