/* ============================================================
   WARM THEME for the convention page.

   Pure recolour. It changes NO markup and NO behaviour - it is loaded
   after the page's own <style> and only re-points colours, so every
   data-subtitle-key, list editor, live speaker fetch, countdown, tour
   and map keeps working exactly as before.

   Scoped under [data-theme="warm"] so it is a switchable theme rather
   than a replacement.
   ============================================================ */

[data-theme="warm"]{
  /* the page's own tokens, re-pointed */
  --paper:#FDF3E3;      /* warm sand instead of white          */
  --mist:#F7E7CE;       /* tinted section band                 */
  --line:#EBD9BC;       /* warm hairline                       */
  --ink:#22190F;        /* warmer near-black                   */
  --shadow:0 18px 50px -22px rgba(120,80,30,.30);
  /* greens, sun, gold and magenta are deliberately untouched */
  --card:#FFFBF3;       /* new: warm card face, replaces flat #fff */
  --warm-body:#4A3B2C;  /* new: warm body text, replaces the cool greys */
  --terracotta:#C2410C;
  --pano-h:17vw;        /* the hero panorama band - see the hero section below */
}
/* At phone widths 17vw is a 64px sliver. The artwork is drawn with
   preserveAspectRatio="xMidYMax slice", so a taller box crops the sides and
   keeps the seafront filling rather than letterboxing. */
@media (max-width:560px){ [data-theme="warm"]{--pano-h:124px} }

/* ---------- ground ---------- */
[data-theme="warm"] body{background:var(--paper);color:var(--warm-body)}

/* Card faces were hardcoded #fff, which reads cold on sand. */
[data-theme="warm"] .xcard,
[data-theme="warm"] .spk-card,
[data-theme="warm"] .act,
[data-theme="warm"] .tli-card,
[data-theme="warm"] .wcard,
[data-theme="warm"] .venue-card{background:var(--card)}

/* Cool greys used for body copy throughout. */
[data-theme="warm"] .tli p,
[data-theme="warm"] .spk-blurb,
[data-theme="warm"] .sec-head p,
[data-theme="warm"] .xcard p,
[data-theme="warm"] .act .d,
[data-theme="warm"] .wcard p,
[data-theme="warm"] .venue-card p{color:var(--warm-body)}
[data-theme="warm"] .tli .time .til{color:#8C7A66}

/* The culture band is the one DARK panel that carries a .sec-head, so the rule
   above would paint its intro dark brown on dark green - measured at a 1.4:1
   contrast ratio, i.e. invisible. The page's own `.culture .sec-head p` has
   IDENTICAL specificity (0,2,1) to the themed rule, so loading this file last
   silently beat it. Restored here at (0,3,1) so it cannot lose again.
   Any future rule targeting a bare `.sec-head`/`p` needs the same treatment. */
[data-theme="warm"] .culture .sec-head p{color:#d6f0e2}

/* The repeats heading is 11px/800 magenta. On the original white card it just
   cleared 4.5:1; on the warm card face (#FFFBF3) it drops to 4.36. Darkened a
   step to 5.16:1 - still unmistakably the brand magenta. */
[data-theme="warm"] .tli-repeats-h{color:#D1006F}

/* ---------- hero: warm ground, panorama in place of the poster ---------- */
[data-theme="warm"] .hero{
  background:
    radial-gradient(58% 40% at 88% 24%, rgba(246,211,167,.60) 0%, transparent 64%),
    radial-gradient(52% 34% at 4% 84%, rgba(246,104,47,.10) 0%, transparent 60%),
    var(--paper);
  color:var(--ink);
}
[data-theme="warm"] .hero .glow{display:none}
/* the white wave that separated the dark hero from the page is now invisible
   against sand, and would cut a pale band across the panorama - remove it */
[data-theme="warm"] .hero .waves{display:none}
[data-theme="warm"] .hero-title{color:var(--ink)}
/* gold reads weakly on sand, so the wordmark gradient starts at terracotta */
[data-theme="warm"] .hero-title .grad{
  background:linear-gradient(100deg,var(--terracotta) 0%,var(--sun) 42%,var(--magenta) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
[data-theme="warm"] .hero-title .pop{color:var(--green)}
[data-theme="warm"] .hero .tag{color:var(--warm-body)}
[data-theme="warm"] .hero .tag em{color:var(--ink)}
[data-theme="warm"] .meta-row .m{background:var(--card);border:1px solid var(--line);color:var(--ink)}
[data-theme="warm"] .meta-row .m b{color:var(--ink)}
[data-theme="warm"] .cd{background:var(--green-deep);border-color:transparent}
[data-theme="warm"] .cd .n{color:var(--gold)}
[data-theme="warm"] .cd .l{color:rgba(255,255,255,.72)}
[data-theme="warm"] .btn-ghost{color:var(--green-deep);box-shadow:inset 0 0 0 2px var(--green);background:transparent}

/* The panorama replaces the hero poster. It is a direct child of .hero (see
   build-themed.cjs) so it is full width with no offset arithmetic; the poster
   column is collapsed and the copy takes the full measure.
   The poster div is hidden, not removed - conv_hero_image stays in the DOM and
   returns intact the moment the theme is switched off. */
/* The poster column is dropped, so the copy is centred over the panorama
   rather than left in place with a void beside it. .wrap is a flex item with
   basis auto, so a content-sized grid would shrink it and stop the track
   centring - hence width:100%. The track is capped so the text keeps a
   readable measure instead of stretching the full width. */
[data-theme="warm"] .hero .wrap{width:100%}
[data-theme="warm"] .hero-grid{grid-template-columns:minmax(0,660px);justify-content:center}
[data-theme="warm"] .hero-poster{display:none}
/* centring the block alone would leave every row ranged left inside it, which
   reads as a mistake rather than a choice - so the rows centre too */
[data-theme="warm"] .hero-copy{text-align:center}
/* the tagline's 511px cap was cut for the old left column; centred, it left a
   one-word orphan on a third line. 600px balances it across two. */
[data-theme="warm"] .hero-copy .tag{max-width:600px;margin-left:auto;margin-right:auto}
[data-theme="warm"] .hero-copy .meta-row,
[data-theme="warm"] .hero-copy .cta-row,
[data-theme="warm"] .hero-copy .countdown{justify-content:center}
/* .hero is a flex ROW, so an in-flow panorama becomes a column beside the copy.
   It is therefore taken out of flow and pinned to the hero's foot (.hero is
   already position:relative), with matching padding-bottom reserving the space
   so it can never overlap the countdown. 17vw = 100vw x 204/1200, the artwork's
   own ratio, so the band scales exactly with the viewport. */
/* One variable drives both the band and the space reserved for it, so the two
   can never drift apart at a breakpoint and leave the panorama overlapping the
   countdown. 17vw is the artwork's own 1200x204 ratio at full bleed. */
[data-theme="warm"] .hero{padding-bottom:calc(var(--pano-h) + 52px)}
[data-theme="warm"] .hero-pano{
  display:block;position:absolute;left:0;right:0;bottom:0;
  height:var(--pano-h);margin:0;overflow:hidden;
}
[data-theme="warm"] .hero-pano svg{width:100%;height:100%;display:block}
.hero-pano{display:none}                                     /* hidden in the default theme */

/* ---------- bands ---------- */
[data-theme="warm"] .mist{background:var(--mist)}
[data-theme="warm"] .funders{background:var(--card)}

/* culture band: keep it a deep panel for contrast, warmed towards the palette */
[data-theme="warm"] .culture{
  background:linear-gradient(155deg,#11402f,#1b5e44 62%,#7a2f12 130%);
}

/* footer stays deep green: it anchors the page and carries white marks */
[data-theme="warm"] footer.site{background:var(--green-deep)}

/* ---------- accents ---------- */
[data-theme="warm"] .eyebrow{color:var(--terracotta)}
[data-theme="warm"] .culture .eyebrow{color:var(--gold)}
[data-theme="warm"] .northstrip .ns-mid{background:var(--maroon,#431515)}

/* a couple of inline styles on the page carry colour and would otherwise
   leak through the theme; these are the only two that need overriding */
[data-theme="warm"] .venue-card p[style]{color:var(--warm-body)!important}
[data-theme="warm"] a.btn[style*="var(--mist)"]{background:var(--mist)!important;color:var(--green-deep)!important}