/* =====================================================================
   WARD RADIO — ورد
   A garden that broadcasts.

   Palette: FLOOD. No neutral surface anywhere — the ground is a warm
   saturated cream and every section takes a band of a seven-colour
   spectrum, so colour meets colour. Chosen over three calmer options.

   Written against semantic tokens (--bg, --fg, --line, --surface).
   Per-band values live in WARD.spectrum: `hex` is the surface, `ink` is
   text ON that surface, `text` is that hue darkened enough to be legible
   as text on the cream ground.
   ===================================================================== */

/* ---------- 1. THE SPECTRUM (constant across themes) ---------- */
:root{
  --baladi:     #FF2E4D;
  --damascene:  #FF6FA8;
  --saffron:    #FFB627;
  --lemon:      #C6FF3D;
  --nile:       #00C2A8;
  --medit:      #2D5BFF;
  --violet:     #8B3DFF;

  --live:       #FF2E4D;   /* retuned by the Tuner */
  --on-live:    #16101A;

  --disp: "Bricolage Grotesque", "Archivo Black", Impact, sans-serif;
  --ui:   "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --mono: "Space Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --ar:   "Reem Kufi", "IBM Plex Sans Arabic", "Geeza Pro", serif;
  --ar-b: "IBM Plex Sans Arabic", "Geeza Pro", sans-serif;

  --gut: clamp(16px, 3.2vw, 48px);
  --deck-h: 88px;
  --ease: cubic-bezier(.16,.84,.28,1);

  --tint: 14%;      /* how much colour a tinted section takes */
  --solid: 100%;    /* how much colour a solid section takes */
  --grain-op: .13;
  --grain-blend: multiply;
}

/* ---------- 2. THE PALETTE — FLOOD ----------------------------------
   No neutral surface anywhere. The ground is a warm saturated cream and
   every section takes a band of the spectrum, so colour meets colour.
   Text is near-black on tinted grounds, and switches per band on solid
   ones via --onC, which each band carries as its own `ink` value.
------------------------------------------------------------------- */
:root{
  --bg:       #FFF0CE;
  --bg-2:     #FFE1A8;
  --fg:       #1A0B10;
  --fg-soft:  #1A0B10c4;
  --line:     #1A0B1038;
  --surface:  #FFFFFF3d;
  --surface-2:#FFFFFF24;
  --tint:  58%;
  --solid: 100%;
  --grain-op: .19;
  --grain-blend: multiply;
}

*,*::before,*::after{ box-sizing:border-box; }
html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;   /* stop Android Chrome inflating body text */
  text-size-adjust:100%;
}
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--ui);
  font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
  padding-bottom:calc(var(--deck-h) + 6px + env(safe-area-inset-bottom, 0px));
  overflow-x:hidden;
  transition:background .5s var(--ease), color .5s var(--ease);
}
body.locked{ overflow:hidden; position:fixed; inset-inline:0; width:100%; }

/* the ground itself carries a wash of the live colour */
body{
  background:
    radial-gradient(130% 85% at 8% -10%, color-mix(in oklab, var(--live) 30%, transparent), transparent 62%),
    radial-gradient(90% 70% at 100% 5%, color-mix(in oklab, var(--live) 16%, transparent), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}

:lang(ar){ font-family:var(--ar-b); }
html[dir="rtl"] body{ font-family:var(--ar-b); }
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3,
html[dir="rtl"] .sheet__t{
  font-family:var(--ar); font-weight:700; letter-spacing:0; line-height:1.22;
}
/* Arabic script joins. Letter-spacing pulls the joins apart and makes the
   word unreadable, so every tracked/uppercased UI class is reset in RTL. */
html[dir="rtl"] .eyebrow, html[dir="rtl"] .tuner__kicker, html[dir="rtl"] .runorder h4,
html[dir="rtl"] .slot__f, html[dir="rtl"] .slot__t span, html[dir="rtl"] .preview,
html[dir="rtl"] .live__meta, html[dir="rtl"] .btn, html[dir="rtl"] .tkBtn, html[dir="rtl"] .field label,
html[dir="rtl"] .bloom__kind, html[dir="rtl"] .bloom__by, html[dir="rtl"] .bloom__foot,
html[dir="rtl"] .person__role, html[dir="rtl"] .foot__col h4,
html[dir="rtl"] .foot__mono, html[dir="rtl"] .deck__line1 strong, html[dir="rtl"] .onair,
html[dir="rtl"] .sheet__note, html[dir="rtl"] .nav a b, html[dir="rtl"] .opt em,
html[dir="rtl"] .tk__facts span, html[dir="rtl"] .det__dl dt{
  letter-spacing:0; text-transform:none;
  /* Space Mono carries no Arabic, so the browser falls back per character
     and the advances go wrong. Give Arabic an Arabic face instead. */
  font-family:var(--ar-b);
}
/* Latin runs inside RTL keep their own direction. Inside prose they should
   read as prose, so only the mono UI slots get the mono face back. */
html[dir="rtl"] [dir="ltr"]{ letter-spacing:normal; }
html[dir="rtl"] .eyebrow [dir="ltr"],
html[dir="rtl"] .live__meta [dir="ltr"],
html[dir="rtl"] .slot__t [dir="ltr"],
html[dir="rtl"] .deck__line2 [dir="ltr"],
html[dir="rtl"] .tk__facts [dir="ltr"],
html[dir="rtl"] .det__dl [dir="ltr"],
html[dir="rtl"] .bloom__by [dir="ltr"],
html[dir="rtl"] .toast [dir="ltr"]{ font-family:var(--mono); letter-spacing:.05em; }

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

.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip{ position:fixed; top:-100px; inset-inline-start:12px; z-index:999; background:var(--live);
  color:var(--on-live); padding:10px 16px; font-family:var(--mono); text-decoration:none; }
.skip:focus{ top:12px; }
/* --live is 1.0:1 against a solid section of the same band. Ink clears 3:1
   on every one of the seven grounds (worst 3.69). */
:focus-visible{ outline:3px solid #1A0B10; outline-offset:2px; }

/* ---------- 3. TEXTURE ---------- */
.grain{
  position:fixed; inset:0; z-index:900; pointer-events:none;
  opacity:var(--grain-op); mix-blend-mode:var(--grain-blend);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 4. MASTHEAD ---------- */
.masthead{
  position:sticky; top:0; z-index:600;
  display:flex; align-items:center; gap:clamp(10px,1.6vw,22px);
  padding:12px var(--gut);
  background:color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter:blur(16px) saturate(1.4);
  border-bottom:1px solid var(--line);
}
.mark{ display:flex; align-items:center; gap:11px; text-decoration:none; flex:0 0 auto; }
.mark__rose{ width:40px; height:40px; }
.mark__rose svg{ width:100%; height:100%; }
.mark__word{ display:flex; flex-direction:column; line-height:.9; }
.mark__word b{ font-family:var(--disp); font-weight:800; font-size:23px; font-variation-settings:"wdth" 86; }
.mark__word i{ font-family:var(--ar); font-style:normal; font-size:15px; color:var(--live-text, var(--live)); transition:color .5s var(--ease); }

.nav{ display:flex; gap:1px; flex-wrap:wrap; margin-inline-start:auto; }
.nav a{
  text-decoration:none; padding:7px 11px 6px; display:flex; flex-direction:column; align-items:center;
  line-height:1.05; border:1px solid transparent; border-radius:2px; transition:background .22s var(--ease);
}
.nav a b{ font-family:var(--ui); font-weight:700; font-size:11px; letter-spacing:.13em; text-transform:uppercase; }
.nav a i{ font-family:var(--ar); font-style:normal; font-size:12px; opacity:.55; margin-top:1px; }
html[dir="rtl"] .nav a b{ font-size:10px; opacity:.55; order:2; }
html[dir="rtl"] .nav a i{ opacity:1; font-size:14px; order:1; }
.nav a:hover{ background:color-mix(in oklab, var(--fg) 8%, transparent); }
.nav a[aria-current="page"]{ background:var(--live); color:var(--on-live); }
.nav a[aria-current="page"] i{ opacity:.7; }

.chrome{ display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.tkBtn{
  background:var(--live); color:var(--on-live); border:0; border-radius:2px; cursor:pointer;
  padding:9px 15px; font-family:var(--ui); font-weight:700; font-size:11px;
  letter-spacing:.13em; text-transform:uppercase; white-space:nowrap;
  transition:transform .18s var(--ease);
}
.tkBtn:hover{ transform:translateY(-2px); }
.langBtn{
  min-width:44px; height:44px; border:1px solid var(--line); background:transparent; border-radius:2px;
  cursor:pointer; font-family:var(--mono); font-size:13px; font-weight:700;
  transition:background .2s var(--ease), border-color .2s;
}
.langBtn:hover{ background:var(--live); color:var(--on-live); border-color:var(--live); }

.navToggle{ display:none; }

/* ---------- 6. SECTIONS ---------- */
.sect{ padding:clamp(44px,6.5vw,100px) var(--gut); position:relative; --hueC:var(--live); --onC:#16101A; }
.sect.tint{ background:color-mix(in oklab, var(--hueC) var(--tint), var(--bg)); }
.sect.solid{ background:var(--hueC); color:var(--onC); }
.sect.solid .eyebrow{ opacity:1; }
.sect.solid .eyebrow::before{ background:currentColor; }
.sect.solid .card, .sect.solid .value{
  background:color-mix(in oklab, var(--onC) 10%, transparent);
  border-color:color-mix(in oklab, var(--onC) 26%, transparent);
}
.sect.solid .card p, .sect.solid .value p{ color:inherit; }
.sect.solid .field input, .sect.solid .field textarea, .sect.solid .field select{ color:inherit; }

.head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:clamp(20px,3.2vw,40px); }
.head__l{ max-width:66ch; }
.eyebrow{ display:inline-flex; align-items:center; gap:9px; font-family:var(--mono); font-size:10px;
  letter-spacing:.24em; text-transform:uppercase; opacity:.78; margin:0 0 12px; }
.eyebrow::before{ content:""; width:22px; height:1px; background:var(--live); }
.sect.solid .eyebrow::before{ background:currentColor; }

h1,h2,h3{ margin:0; font-family:var(--disp); font-weight:800; line-height:.94; letter-spacing:-.015em; }
h1{ font-size:clamp(42px,8vw,118px); font-variation-settings:"wdth" 82; }
h2{ font-size:clamp(29px,4.4vw,64px); font-variation-settings:"wdth" 86; }
h3{ font-size:clamp(18px,1.9vw,26px); }
.lede{ font-size:clamp(15px,1.3vw,18.5px); line-height:1.62; color:var(--fg-soft); max-width:62ch; }
.sect.solid .lede{ color:inherit; }
.lede--ar{ font-family:var(--ar-b); direction:rtl; text-align:right; }
html[dir="rtl"] .lede--ar{ direction:ltr; text-align:left; font-family:var(--ui); }

.btn{
  display:inline-flex; align-items:center; gap:9px; text-decoration:none;
  background:var(--live); color:var(--on-live); border:1px solid var(--live);
  padding:14px 22px; min-height:44px; font-family:var(--ui); font-weight:700; font-size:12px;
  letter-spacing:.13em; text-transform:uppercase; cursor:pointer; border-radius:2px;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease);
}
.btn:hover{ transform:translate(-2px,-2px); box-shadow:4px 4px 0 color-mix(in oklab,var(--fg) 55%, transparent); }
.btn--ghost{ background:transparent; color:inherit; border-color:currentColor; }
.btn--ghost:hover{ background:var(--live); color:var(--on-live); border-color:var(--live); }
.btn i{ font-family:var(--ar); font-style:normal; opacity:.6; font-size:13px; letter-spacing:0; }
.sect.solid .btn{ background:var(--fg); color:var(--bg); border-color:var(--fg); }
.sect.solid .btn--ghost{ background:transparent; color:inherit; border-color:currentColor; }

/* ============================================================
   7. THE LIVE PANEL — first thing on the site
   ============================================================ */
.live{
  padding:clamp(22px,3vw,40px) var(--gut) clamp(30px,4vw,52px);
  background:color-mix(in oklab, var(--hueC, var(--live)) var(--tint), var(--bg));
  border-bottom:1px solid var(--line);
  position:relative; overflow:hidden;
}
.live__field{ position:absolute; inset:0; pointer-events:none; opacity:.5; }
.live__field span{ position:absolute; }
.live__grid{
  position:relative; z-index:2;
  display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,.85fr);
  gap:clamp(18px,2.6vw,44px); align-items:start;
}

.onair{
  display:inline-flex; align-items:center; gap:10px;
  border:1px solid currentColor; border-radius:100px; padding:6px 15px 6px 11px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
}
.onair b{ width:8px; height:8px; border-radius:50%; background:currentColor; }
.onair.is-live{ background:var(--live); color:var(--on-live); border-color:var(--live); }
.onair.is-live b{ animation:pulse 2s infinite; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 currentColor; } 70%{ box-shadow:0 0 0 11px transparent; } 100%{ box-shadow:0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce){
  .onair.is-live b, .deck[data-live="1"] .deck__dot{ animation:none; }
}

.live__now{ display:grid; gap:12px; margin-top:16px; }
.live__title{ font-family:var(--disp); font-weight:800; font-size:clamp(30px,5.2vw,74px); line-height:.95;
  font-variation-settings:"wdth" 84; letter-spacing:-.02em; }
.live__meta{ display:flex; gap:clamp(12px,2vw,28px); flex-wrap:wrap; font-family:var(--mono);
  font-size:11px; letter-spacing:.12em; text-transform:uppercase; opacity:.72; }
.live__meta b{ color:var(--live); }

.live__bar{ height:4px; background:color-mix(in oklab,var(--fg) 16%, transparent); border-radius:2px; overflow:hidden; }
.live__bar i{ display:block; height:100%; background:var(--live); width:0; transition:width 1s linear; }

.live__ctl{ display:flex; align-items:center; gap:clamp(12px,2vw,22px); flex-wrap:wrap; margin-top:6px; }
.bigplay{
  width:clamp(62px,7vw,86px); height:clamp(62px,7vw,86px); border-radius:50%;
  border:2px solid var(--live); background:var(--live); color:var(--on-live);
  display:grid; place-items:center; cursor:pointer; flex:0 0 auto;
  transition:transform .2s var(--ease), background .3s;
}
.bigplay:hover{ transform:scale(1.06); }
.bigplay svg{ width:30%; height:30%; fill:currentColor; }
.bigplay .ico-pause{ display:none; }
.live[data-playing="1"] .bigplay .ico-play{ display:none; }
.live[data-playing="1"] .bigplay .ico-pause{ display:block; }
.live[data-live="0"] .bigplay{ background:transparent; color:var(--fg); border-color:var(--line); }

.live__scope{ flex:1 1 240px; height:56px; min-width:180px; }
.live__vol{ display:flex; align-items:center; gap:9px; font-family:var(--mono); font-size:10px; letter-spacing:.14em; }
.live__vol input{ -webkit-appearance:none; appearance:none; width:96px; height:2px; background:color-mix(in oklab,var(--fg) 30%, transparent); outline:0; }
.live__vol input::-webkit-slider-thumb{ -webkit-appearance:none; width:13px; height:13px; border-radius:50%; background:var(--live); cursor:pointer; }
.live__vol input::-moz-range-thumb{ width:13px; height:13px; border:0; border-radius:50%; background:var(--live); cursor:pointer; }

.toast{
  margin-top:14px; padding:11px 16px; border:1px solid var(--live);
  background:color-mix(in oklab,var(--live) 16%, transparent);
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; border-radius:2px;
  display:none;
}
.toast.on{ display:block; animation:msgin .4s var(--ease); }

/* the running order */
.runorder{ border:1px solid var(--line); border-radius:3px; background:var(--surface); overflow:hidden; }
.runorder h4{ margin:0; padding:12px 15px; border-bottom:1px solid var(--line); font-family:var(--mono);
  font-size:10px; letter-spacing:.2em; text-transform:uppercase; opacity:.6; font-weight:400; }
.slot{ display:grid; grid-template-columns:auto 1fr auto; gap:11px; align-items:center;
  padding:11px 15px; border-bottom:1px solid var(--line); }
.slot:last-child{ border-bottom:0; }
.slot__r{ width:24px; height:24px; }
.slot__t{ min-width:0; }
.slot__t b{ display:block; font-family:var(--ui); font-weight:700; font-size:13px; line-height:1.25; }
.slot__t span{ font-family:var(--mono); font-size:9.5px; letter-spacing:.08em; opacity:.55; }
.slot__f{ font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; opacity:.75; text-transform:uppercase; }
.slot.on{ background:color-mix(in oklab,var(--live) 16%, transparent); }
.slot.on .slot__f{ color:var(--live); opacity:1; }

.preview{ display:flex; align-items:center; gap:9px; margin-top:12px; font-family:var(--mono);
  font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; opacity:.65; }
.preview input{ accent-color:var(--live); }

/* embeds */
.sc, .chatFrame{ width:100%; border:1px solid var(--line); border-radius:3px; display:block; background:var(--surface-2); }

/* ---------- embeds with a real fallback ----------
   The panel sits underneath. If the iframe loads it covers it; if it is
   blocked, the panel is what the reader gets — never a blank rectangle. */
.embed{ position:relative; min-height:var(--eh,290px); margin-top:14px; }
.embed__fallback{
  position:absolute; inset:0; display:grid; gap:14px; align-content:center; justify-items:center;
  text-align:center; padding:22px 20px; border:1px solid var(--line); border-radius:3px;
  background:color-mix(in oklab, var(--live) 16%, var(--bg));
}
.embed__rose{ width:76px; height:76px; }
.embed__rose svg{ width:100%; height:100%; }
.embed__txt{ display:grid; gap:5px; max-width:42ch; }
.embed__txt b{ font-family:var(--disp); font-weight:700; font-size:clamp(17px,2vw,22px); }
.embed__txt em{ font-style:normal; font-size:13.5px; line-height:1.5; color:var(--fg-soft); }
.embed__frame{ position:relative; z-index:2; margin-top:0; opacity:0; transition:opacity .3s var(--ease); }
.embed--ok .embed__frame{ opacity:1; }
.embed--ok .embed__fallback{ display:none; }
.embed--failed .embed__frame{ display:none; }

/* ---------- the chat, framed so it belongs to the page ----------
   The widget itself is cross-origin and cannot be restyled from here; its
   colours are set in the Minnit dashboard. This is the housing around it. */
.chatPanel{
  border:1px solid var(--line); border-radius:4px; overflow:hidden;
  background:var(--surface); box-shadow:0 1px 0 color-mix(in oklab,var(--fg) 8%, transparent);
}
.chatPanel__bar{
  display:flex; align-items:center; gap:10px;
  padding:11px 14px; background:var(--live); color:var(--on-live);
}
.chatPanel__bar b{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; font-weight:700;
}
html[dir="rtl"] .chatPanel__bar b{ font-family:var(--ar-b); letter-spacing:0; text-transform:none; font-size:13px; }
.chatPanel__bar i{ font-family:var(--ar); font-style:normal; font-size:13px; opacity:.7; }
.chatPanel__dot{
  width:8px; height:8px; border-radius:50%; background:currentColor; flex:0 0 auto;
  animation:pulse 2.4s infinite;
}
@media (prefers-reduced-motion: reduce){ .chatPanel__dot{ animation:none; } }
.chatPanel__alt{
  margin-inline-start:auto; font-family:var(--mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; text-decoration:none; opacity:.82;
  border:1px solid currentColor; border-radius:100px; padding:4px 10px;
}
html[dir="rtl"] .chatPanel__alt{ letter-spacing:0; text-transform:none; font-family:var(--ar-b); }
.chatPanel__alt:hover{ opacity:1; background:color-mix(in oklab,var(--on-live) 16%, transparent); }
/* the widget sits flush inside the housing */
.chatPanel .embed{ margin-top:0; }
.chatPanel .chatFrame{ border:0; border-radius:0; background:#fff; }
.sc{ height:290px; margin-top:14px; }
.chatFrame{ height:400px; max-height:62vh; }

/* ---------- 8. TICKER ---------- */
.ticker{ overflow:hidden; border-block:1px solid var(--line); background:var(--live); color:var(--on-live); }
.ticker__row{ display:flex; width:max-content; animation:slide 46s linear infinite; }
.ticker:hover .ticker__row{ animation-play-state:paused; }
@media (prefers-reduced-motion: reduce){ .ticker__row{ animation:none; } }
@keyframes slide{ to{ transform:translateX(-50%); } }
.ticker__row span{ display:inline-flex; align-items:center; gap:14px; padding:9px 24px;
  font-family:var(--mono); font-size:11px; letter-spacing:.13em; text-transform:uppercase; white-space:nowrap; }
.ticker__row span::after{ content:"✳"; opacity:.5; }
.ticker__row span[lang="ar"]{ font-family:var(--ar-b); letter-spacing:0; text-transform:none; font-size:13px; }

/* ---------- 9. THE GARDEN ---------- */
.cardGrid{ display:grid; gap:clamp(10px,1.2vw,16px); grid-template-columns:repeat(auto-fill,minmax(min(100%,212px),1fr)); }
.bloom{
  display:flex; flex-direction:column; border:1px solid var(--line); border-radius:3px; overflow:hidden;
  text-decoration:none;
  background:var(--surface); transition:transform .28s var(--ease), border-color .28s, opacity .35s;
  cursor:pointer; text-align:start; padding:0; font:inherit; color:inherit;
}
.bloom:hover{ transform:translateY(-4px); border-color:var(--pc,var(--live)); }
.bloom.dim{ opacity:.22; filter:saturate(.2); }
.bloom__art{ position:relative; aspect-ratio:1/1; display:grid; place-items:center; overflow:hidden; }
.bloom__art::after{ content:""; position:absolute; inset:0; background-image:radial-gradient(transparent .9px, color-mix(in oklab,var(--fg) 60%, transparent) 1px);
  background-size:5px 5px; opacity:.13; pointer-events:none; }
.bloom__art svg{ width:84%; height:84%; transition:transform .55s var(--ease); }
.bloom:hover .bloom__art svg{ transform:rotate(22deg) scale(1.05); }
.bloom__kind{ position:absolute; top:8px; inset-inline-start:8px; z-index:3; font-family:var(--mono);
  font-size:8.5px; letter-spacing:.15em; text-transform:uppercase; background:var(--fg); color:var(--bg); padding:3px 7px; border-radius:2px; }
.bloom__age{ position:absolute; top:8px; inset-inline-end:8px; z-index:3; font-family:var(--mono);
  font-size:8.5px; background:var(--bg); padding:3px 6px; border-radius:2px; opacity:.75; }
.bloom__body{ padding:11px 12px 13px; border-top:1px solid var(--line); display:grid; gap:5px; }
.bloom__title{ font-family:var(--disp); font-weight:700; font-size:14.5px; line-height:1.18; }
.bloom__by{ font-family:var(--mono); font-size:10px; letter-spacing:.05em; opacity:.78; }
.bloom__by b{ color:var(--pc,var(--live)); font-weight:400; }
.bloom__ar{ font-family:var(--ar-b); font-size:12px; direction:rtl; text-align:right; opacity:.6; }
.bloom__foot{ display:flex; justify-content:space-between; align-items:center; margin-top:2px; font-family:var(--mono); font-size:9px; opacity:.55; }

/* ---------- 10. SPECTRUM ---------- */
.spectrum{ display:grid; gap:2px; }
.band{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) auto; gap:clamp(14px,2.4vw,38px);
  align-items:center; padding:clamp(17px,2.3vw,30px) clamp(15px,2.3vw,30px);
  position:relative; overflow:hidden; cursor:pointer; border:0; width:100%; text-align:start; }

/* ---------- 13. AHL ---------- */
.ahl{ display:grid; gap:clamp(12px,1.6vw,18px); grid-template-columns:repeat(auto-fill,minmax(min(100%,262px),1fr)); }
.person{ border:1px solid var(--line); border-radius:3px; overflow:hidden; background:var(--surface);
  display:grid; grid-template-rows:auto 1fr; cursor:pointer; text-align:start; color:inherit; font:inherit; padding:0;
  transition:border-color .28s, transform .28s var(--ease); }
.person:hover{ border-color:var(--pc,var(--live)); transform:translateY(-4px); }
.person__art{ aspect-ratio:5/3.2; position:relative; display:grid; place-items:center; overflow:hidden;
  background:color-mix(in oklab,var(--pc,var(--live)) 16%, transparent); }
.person__art svg{ width:62%; height:92%; position:relative; z-index:2; }
.person__body{ padding:13px 14px 15px; display:grid; gap:6px; align-content:start; }
.person__name{ font-family:var(--disp); font-weight:800; font-size:20px; }
.person__role{ font-family:var(--mono); font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--live-text, var(--live)); }
.person__ar{ font-family:var(--ar-b); direction:rtl; text-align:right; font-size:13px; opacity:.65; margin:0; }
.map{ position:relative; border:1px solid var(--line); border-radius:3px; overflow:hidden; }
.map svg{ width:100%; height:auto; display:block; }
.pin{ cursor:pointer; }
.pin circle.hit{ fill:transparent; }
.pin .dot{ transition:r .25s var(--ease); }
.pin:hover .dot, .pin.on .dot{ r:9; }
.pin text{ font-family:var(--mono); font-size:8px; letter-spacing:.1em; fill:#F5EEE2; opacity:.75; text-transform:uppercase; } .place.on{ padding-inline-start:12px; }

/* ---------- 15. DOORWAY ---------- */
.door{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.8fr); gap:clamp(24px,4vw,60px); align-items:start; }
.door__opts{ display:grid; gap:8px; grid-template-columns:repeat(auto-fill,minmax(min(100%,172px),1fr)); }
.opt{ display:grid; gap:4px; padding:15px 14px; border:1px solid var(--line); border-radius:3px; background:var(--surface);
  cursor:pointer; text-align:start; color:inherit; transition:all .22s var(--ease); }
.opt:hover{ border-color:var(--pc,var(--live)); transform:translateY(-3px); }
.opt[aria-pressed="true"]{ background:var(--pc,var(--live)); color:var(--on-live); border-color:transparent; }
.opt b{ font-family:var(--disp); font-weight:700; font-size:16.5px; }
.opt i{ font-family:var(--ar); font-style:normal; font-size:14px; opacity:.65; }
.opt em{ font-family:var(--mono); font-style:normal; font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; opacity:.6; }

.form{ display:grid; gap:13px; margin-top:24px; }
.field{ display:grid; gap:5px; }
.field label{ font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; opacity:.62; }
.field input, .field textarea, .field select{
  font-family:var(--ui); font-size:16px; /* 16px minimum or iOS Safari zooms on focus */
  color:inherit; background:transparent;
  border:0; border-bottom:1px solid color-mix(in oklab,currentColor 32%, transparent);
  padding:9px 2px; border-radius:0; outline:0; transition:border-color .22s; }
.field select{ padding-inline-end:20px; }
.field select option{ background:var(--bg); color:var(--fg); }
.field input:focus, .field textarea:focus, .field select:focus{ border-color:var(--pc,var(--live)); }
.field textarea{ resize:vertical; min-height:84px; }

/* ---------- 16. AIRWAVE ---------- */
.airwave{ display:grid; border:1px solid var(--line); border-radius:3px; max-height:340px; overflow:hidden; position:relative; background:var(--surface); }
.airwave::after{ content:""; position:absolute; inset:auto 0 0 0; height:64px;
  background:linear-gradient(180deg,transparent,var(--surface)); pointer-events:none; }
@keyframes msgin{ from{ opacity:0; transform:translateY(-8px);} to{ opacity:1; transform:none;} }

/* ---------- 17. GENERIC BLOCKS ---------- */
.split{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:clamp(20px,3vw,52px); align-items:center; }
.card{ border:1px solid var(--line); border-radius:3px; padding:clamp(17px,2.3vw,28px); display:grid; gap:11px;
  align-content:start; background:var(--surface); }
.card p{ margin:0; font-size:14.5px; line-height:1.6; color:var(--fg-soft); }
.values{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,198px),1fr)); gap:2px; }
.value{ padding:clamp(17px,2.1vw,26px); border:1px solid var(--line); margin:-.5px; display:grid; gap:7px;
  align-content:start; position:relative; overflow:hidden; background:var(--surface); }
.value::before{ content:""; position:absolute; top:0; inset-inline:0; height:5px; background:var(--vc); }
.value b{ font-family:var(--disp); font-weight:800; font-size:clamp(18px,2vw,25px); }
.value i{ font-family:var(--ar); font-style:normal; font-size:16px; color:var(--vc); }
.value p{ margin:0; font-size:13.5px; line-height:1.55; color:var(--fg-soft); }

/* ---------- 18. DECK ---------- */
.deck{
  position:fixed; inset-inline:0; bottom:0; z-index:700; height:var(--deck-h);
  display:grid; grid-template-columns:auto minmax(0,1fr) minmax(0,.9fr) auto;
  align-items:center; gap:clamp(11px,1.8vw,24px);
  padding:0 var(--gut) env(safe-area-inset-bottom, 0px);
  height:calc(var(--deck-h) + env(safe-area-inset-bottom, 0px));
  background:color-mix(in oklab, var(--bg) 94%, transparent);
  backdrop-filter:blur(18px) saturate(1.3);
  border-top:2px solid var(--live);
}
.deck__play{ width:52px; height:52px; border-radius:50%; border:1px solid var(--live);
  background:var(--live); color:var(--on-live); display:grid; place-items:center; cursor:pointer; flex:0 0 auto;
  transition:transform .18s var(--ease); }
.deck__play:hover{ transform:scale(1.06); }
.deck__play svg{ width:20px; height:20px; fill:currentColor; }
.deck__play .ico-pause{ display:none; }
.deck[data-playing="1"] .deck__play .ico-play{ display:none; }
.deck[data-playing="1"] .deck__play .ico-pause{ display:block; }
.deck[data-live="0"] .deck__play{ background:transparent; color:var(--fg); border-color:var(--line); }
.deck__meta{ display:grid; gap:3px; min-width:0; }
.deck__line1{ display:flex; align-items:center; gap:9px; }
.deck__dot{ width:7px; height:7px; border-radius:50%; background:currentColor; opacity:.3; }
.deck[data-live="1"] .deck__dot{ background:var(--live); opacity:1; animation:pulse 2s infinite; }
.deck__line1 strong{ font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; }
.deck__ar{ font-family:var(--ar); font-size:12.5px; opacity:.6; }
.deck__line2{ font-size:12.5px; color:var(--fg-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.deck__scope{ width:100%; height:54px; opacity:.9; }
.deck__right{ display:flex; align-items:center; gap:14px; }
.deck__freq{ font-family:var(--mono); font-size:13px; color:var(--live-text, var(--live)); }
.deck__vol input{ -webkit-appearance:none; appearance:none; width:82px; height:2px; background:color-mix(in oklab,var(--fg) 30%, transparent); outline:0; }
.deck__vol input::-webkit-slider-thumb{ -webkit-appearance:none; width:12px; height:12px; border-radius:50%; background:var(--live); cursor:pointer; }
.deck__vol input::-moz-range-thumb{ width:12px; height:12px; border:0; border-radius:50%; background:var(--live); cursor:pointer; }

/* ---------- 19. SHEETS (popups) ---------- */
.sheetWrap{ position:fixed; inset:0; z-index:800; display:grid; place-items:center; padding:clamp(10px,3vw,40px); }
.sheetWrap[aria-hidden="true"]{ pointer-events:none; }
.sheetBack{ position:absolute; inset:0; background:color-mix(in oklab,var(--fg) 62%, transparent);
  backdrop-filter:blur(6px); opacity:0; transition:opacity .3s var(--ease); }
.sheetWrap[aria-hidden="false"] .sheetBack{ opacity:1; }
.sheet{
  position:relative; width:min(100%, 640px); max-height:min(88dvh, 900px); overflow:auto;
  background:var(--bg); color:var(--fg); border:1px solid var(--line); border-radius:4px;
  box-shadow:0 30px 90px color-mix(in oklab,var(--fg) 40%, transparent);
  padding:clamp(20px,3vw,34px); opacity:0; transform:translateY(18px) scale(.98);
  transition:opacity .3s var(--ease), transform .3s var(--ease); --pc:var(--live);
}
.sheet--wide{ width:min(100%, 940px); }
.sheetWrap[aria-hidden="false"] .sheet{ opacity:1; transform:none; }
.sheet::before{ content:""; position:absolute; inset:0 0 auto 0; height:5px; background:var(--pc); }
.sheet__x{ position:absolute; top:10px; inset-inline-end:10px; width:44px; height:44px; border-radius:50%;
  border:1px solid var(--line); background:var(--bg); cursor:pointer; font-size:14px; z-index:3; }
.sheet__x:hover{ background:var(--pc); color:var(--on-live); border-color:transparent; }
.sheet__hd{ margin-bottom:16px; padding-inline-end:40px; }
.sheet__t{ font-family:var(--disp); font-weight:800; font-size:clamp(22px,3.2vw,38px); line-height:1; }
.sheet__ar{ font-family:var(--ar); font-size:clamp(15px,1.8vw,21px); margin:8px 0 0; color:var(--live-text, var(--pc)); }
.sheet__note{ font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; opacity:.78; line-height:1.7; margin:10px 0 0; }
.sheet__url{ font-family:var(--mono); font-size:11px; word-break:break-all; opacity:.6;
  border:1px dashed var(--line); padding:9px 11px; border-radius:2px; }

.det{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(16px,2.5vw,30px); align-items:start; }
.det__art{ border-radius:3px; display:grid; place-items:center; padding:14px; border:1px solid var(--line); }
.det__art svg{ width:100%; height:auto; }
.det__body{ display:grid; gap:13px; }
.det__note{ margin:0; font-size:15px; line-height:1.6; color:var(--fg-soft); }
.det__dl{ display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px; margin:0; }
.det__dl div{ display:grid; gap:2px; }
.det__dl dt{ font-family:var(--mono); font-size:10px; letter-spacing:.15em; text-transform:uppercase; opacity:.78; }
.det__dl dd{ margin:0; font-size:13.5px; font-weight:500; }
.det__acts{ display:flex; gap:10px; flex-wrap:wrap; margin-top:6px; }

.tk{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(16px,2.6vw,32px); align-items:start; }
.tk__rose{ display:grid; place-items:center; }
.tk__rose svg{ width:100%; max-width:230px; height:auto; }
.tk__facts{ display:grid; gap:8px; margin-top:12px; }
.tk__facts div{ display:grid; gap:1px; border-top:1px solid var(--line); padding-top:7px; }
.tk__facts span{ font-family:var(--mono); font-size:10px; letter-spacing:.16em; opacity:.78; }
.tk__facts b{ font-size:14px; }
.tk__line{ font-family:var(--mono); font-size:10px; letter-spacing:.08em; opacity:.6; line-height:1.8; margin:14px 0 0; }
.tk__form{ margin-top:0; }
.tk__done{ display:grid; justify-items:center; gap:12px; text-align:center; padding:14px 0; }
.tk__done svg{ width:190px; height:190px; }

/* ---------- 20. FOOTER ---------- */
.foot{ border-top:1px solid var(--line); padding:clamp(36px,5vw,68px) var(--gut) 24px; background:var(--bg-2); }
.foot__grid{ display:grid; grid-template-columns:minmax(0,1.6fr) repeat(2,minmax(0,.6fr)); gap:clamp(20px,3vw,48px); }
.foot__col h4{ margin:0 0 12px; font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; opacity:.78; font-weight:400; }
.foot__manifesto{ margin:0 0 14px; font-size:14.5px; line-height:1.68; color:var(--fg-soft); max-width:56ch; }
.foot__manifesto b{ color:var(--live-text, var(--live)); font-weight:500; }
.foot__manifesto--ar{ font-family:var(--ar-b); font-size:14px; opacity:.85; }
/* in Arabic the injected paragraph is already Arabic, so the static mirror
   would print the same sentence twice */
html[dir="rtl"] .foot__manifesto--ar{ display:none; }
.foot__links{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.foot__links a, .foot__links button{ text-decoration:none; font-size:13.5px; opacity:.75; display:inline-flex; gap:8px;
  align-items:baseline; transition:opacity .2s, color .2s; background:none; border:0; padding:0; cursor:pointer; text-align:start; }
.foot__links a:hover, .foot__links button:hover{ opacity:1; color:var(--live); }
.foot__links i{ font-family:var(--ar); font-style:normal; font-size:12px; opacity:.55; }
.foot__base{ margin-top:clamp(26px,4vw,50px); padding-top:17px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:11.5px; opacity:.75; }
.foot__mono{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; }

/* ---------- 20b. LAUNCH ADDITIONS ---------- */
.btnRow{ display:flex; gap:10px; flex-wrap:wrap; margin-top:20px; }
.cards2{ display:grid; gap:clamp(12px,1.6vw,20px); grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); }
.flyer{ width:100%; max-width:400px; border:1px solid color-mix(in oklab,currentColor 45%, transparent); }
.prose{ max-width:68ch; }
.lede--wide{ max-width:68ch; margin:0 0 16px; }
.prose .lede--wide:last-child{ margin-bottom:0; }

/* the running order rows are buttons now */
.slot{ width:100%; background:none; border:0; border-bottom:1px solid var(--line);
  text-align:start; color:inherit; font:inherit; cursor:pointer; transition:background .2s var(--ease); }
.slot:last-of-type{ border-bottom:0; }
.slot:hover{ background:color-mix(in oklab, var(--live) 14%, transparent); }

/* artist quote inside a popup */
.det__quote{ margin:0; padding-inline-start:14px; border-inline-start:3px solid var(--pc);
  font-size:clamp(16px,1.7vw,20px); line-height:1.5; font-style:normal; }

/* ticket form error */
.tk__err{ margin:2px 0 0; font-size:13px; line-height:1.5; color:#B00020;
  background:#B0002014; border:1px solid #B0002040; padding:9px 11px; border-radius:2px; }
.tk__err a{ color:inherit; font-weight:700; }
.sect.solid .tk__err{ color:inherit; background:color-mix(in oklab,var(--onC) 14%, transparent); }
.tk__side{ display:grid; align-content:start; }

/* the "bring something" chips on About */
.opt{ text-align:center; place-items:center; }
.opt b{ font-size:clamp(15px,1.6vw,19px); }

/* ---------- 21. MOTION ---------- */
.rise{ opacity:0; transform:translateY(20px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.rise.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .rise{ opacity:1; transform:none; transition:none; } }

/* ---------- 22. RESPONSIVE ---------- */
@media (max-width: 1180px){
  .live__grid{ grid-template-columns:1fr; }
  .corner{ grid-template-columns:1fr; }
  .door{ grid-template-columns:1fr; }
  .seedling{ position:static; }
  .det{ grid-template-columns:1fr; }
  .tk{ grid-template-columns:1fr; }
  .foot__grid{ grid-template-columns:1fr 1fr; }
  .foot__col--wide{ grid-column:1/-1; }
}
@media (max-width: 980px){
  .nav{ position:fixed; inset:var(--mh-h, 65px) 0 auto 0; flex-direction:column; gap:0; margin:0; background:var(--bg);
    border-bottom:1px solid var(--line); padding:6px var(--gut) 16px; display:none; z-index:601; }
  .nav.open{ display:flex; }
  .nav a{ flex-direction:row; gap:12px; align-items:baseline; justify-content:flex-start; padding:13px 6px;
    border-bottom:1px solid var(--line); border-radius:0; }
  .navToggle{ display:grid; gap:4px; background:none; border:1px solid var(--line); padding:9px 11px;
    border-radius:2px; cursor:pointer; justify-items:center; }
  .navToggle span{ width:18px; height:1.5px; background:currentColor; transition:transform .3s var(--ease), opacity .3s; }
  .navToggle em{ font-family:var(--mono); font-size:8px; letter-spacing:.16em; font-style:normal; margin-top:2px; }
  .navToggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(5.5px) rotate(45deg); }
  .navToggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
  .navToggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-5.5px) rotate(-45deg); }
  .masthead{ flex-wrap:wrap; }
  .band{ grid-template-columns:1fr; gap:7px; }
  :root{ --deck-h:74px; }   /* must be on :root — body's padding reads it too */
  .deck{ grid-template-columns:auto minmax(0,1fr) auto; }
  .deck__scope, .deck__vol{ display:none; }
  .foot__grid{ grid-template-columns:1fr; }
}
@media (max-width: 620px){
  .cardGrid{ grid-template-columns:repeat(auto-fill,minmax(min(100%,148px),1fr)); }
  .tkBtn{ font-size:10px; padding:8px 11px; }
}



/* =====================================================================
   PHONE PASS
   The audience is overwhelmingly on phones. Everything below is about
   the small end: fewer competing elements per row, bigger tap targets,
   and type that does not run out of room.
   ===================================================================== */
@media (max-width: 700px){
  /* the live panel is the first thing anyone sees — give it room */
  .live{ padding:18px var(--gut) 26px; }
  .live__grid{ gap:20px; }
  .live__title{ font-size:clamp(26px,7.4vw,40px); line-height:1.02; }
  .live__meta{ gap:6px 14px; font-size:10px; }
  /* play + volume only; the waveform is decoration and was squeezing them */
  .live__scope{ display:none; }
  .live__ctl{ gap:16px; }
  .bigplay{ width:66px; height:66px; }
  .live__vol{ flex:1 1 auto; }
  .live__vol input{ width:100%; }

  /* full-width stacked buttons beat three cramped ones side by side */
  .btnRow{ gap:8px; }
  .btnRow .btn{ flex:1 1 100%; justify-content:center; }

  .sect{ padding:34px var(--gut) 38px; }
  h1{ font-size:clamp(34px,9vw,56px); }
  h2{ font-size:clamp(24px,6.4vw,38px); }
  .lede{ font-size:15px; }

  /* two up reads better than three cramped columns */
  .cardGrid{ grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr)); gap:9px; }
  .ahl{ grid-template-columns:repeat(auto-fill,minmax(min(100%,158px),1fr)); gap:9px; }
  .person__art{ aspect-ratio:1/1; }
  .person__body{ padding:10px 11px 12px; }
  .person__name{ font-size:16px; }
  .values{ grid-template-columns:1fr; }

  /* sheets: use the dynamic viewport and keep the close button clear of the notch */
  .sheet{ max-height:92dvh; padding:18px 16px 22px; border-radius:0; width:100%; }
  .sheetWrap{ padding:0; align-items:end; }
  .sheet__t{ font-size:clamp(21px,6vw,30px); }
  .sheet__x{ top:8px; inset-inline-end:8px; }
  .tk__rose{ display:none; }          /* the form matters more than the flower */
  .tk__facts{ grid-template-columns:1fr 1fr; gap:8px 14px; }

  .flyer{ max-width:100%; }
  .embed{ min-height:auto; }
  .sc{ height:240px; }
  .chatFrame{ height:340px; }
  .runorder h4{ font-size:9.5px; }
  .slot{ padding:12px; }
  .slot__t b{ font-size:13.5px; }
  .foot__base{ gap:8px; font-size:11px; }
}

/* landscape phones: almost no vertical room, so let the sheet use it all */
@media (max-height: 480px) and (orientation: landscape){
  .sheet{ max-height:96dvh; }
  .live{ padding-block:14px 20px; }
  .live__title{ font-size:clamp(22px,5vw,32px); }
}

/* very narrow: single column, nothing clipped */
@media (max-width: 380px){
  .cardGrid, .ahl{ grid-template-columns:1fr; }
  .mark__word b{ font-size:20px; }
  .tkBtn{ padding:8px 10px; font-size:10px; }
  .live__meta span{ font-size:9.5px; }
}