/* ============================================================================
   COLOUR ZONES — THE LIVE LOOK (Metztli picked "warm" Sep 4 2026: "im leaning more
   towards the warm tones and maybe earth is a close 2nd")
   ----------------------------------------------------------------------------
   Ported from explore/bands.css, where this shipped as a variant she could toggle.
   Still gated on html[data-zones="on"] + html[data-pal], so the switcher keeps
   working and Juan can flip palettes or turn it off without touching CSS.
   ⚠️ explore/bands.css is the frozen copy behind a link she was sent; it is NOT
   kept in sync with this file on purpose.
   ----------------------------------------------------------------------------
   ORIGINAL HEADER FOLLOWS
   ----------------------------------------------------------------------------
   Every rule is gated on html[data-zones="on"], so "Off" in the switcher returns
   the page to exactly the live look with nothing to undo. Palette order comes
   from html[data-pal]; all three fills are the same AA-verified colours in a
   different sequence, so no palette needs re-checking.

   WHY THESE FILLS ARE DEEPER THAN HER BANDS: cream text on the live band colours
   measures 3.55 (olive) and 3.43 (terracotta) — under the 4.5 body threshold.
   Fine for a 34px band with one large line; it fails once a band carries body copy.
       deep olive #41562F  cream 7.44
       deep terra #9A4A28  cream 5.71
       deep cobalt #153B84 cream 9.71
   CLASH RULE: a card's slab vanishes when it matches its zone, so every card in a
   zone takes a marigold slab. Pillar cards stay in the cream zone and keep their
   own green/red/cobalt coding.
   TWO MARIGOLDS: --z-slab is her real one and only paints solid blocks (3:1 is the
   bar there). --z-accent is lightened for TEXT — an 11.5px bold eyebrow is not
   "large", so it needs 4.5, and the true marigold is only 3.37 on deep terracotta.
   ========================================================================== */
:root{--z-olive:#41562F;--z-terra:#9A4A28;--z-cobalt:#153B84;
  --z-slab:#F6B32E;--z-accent:#FFE08F}

/* ---- palette order: four zones over three fills, no two adjacent alike ---- */
[data-zones="on"][data-pal="earth"] .zone-1{--zfill:var(--z-olive)}
[data-zones="on"][data-pal="earth"] .zone-2{--zfill:var(--z-terra)}
[data-zones="on"][data-pal="earth"] .zone-3{--zfill:var(--z-cobalt)}
[data-zones="on"][data-pal="earth"] .zone-4{--zfill:var(--z-olive)}
[data-zones="on"][data-pal="warm"]  .zone-1{--zfill:var(--z-terra)}
[data-zones="on"][data-pal="warm"]  .zone-2{--zfill:var(--z-cobalt)}
[data-zones="on"][data-pal="warm"]  .zone-3{--zfill:var(--z-olive)}
[data-zones="on"][data-pal="warm"]  .zone-4{--zfill:var(--z-terra)}
[data-zones="on"][data-pal="cool"]  .zone-1{--zfill:var(--z-cobalt)}
[data-zones="on"][data-pal="cool"]  .zone-2{--zfill:var(--z-olive)}
[data-zones="on"][data-pal="cool"]  .zone-3{--zfill:var(--z-terra)}
[data-zones="on"][data-pal="cool"]  .zone-4{--zfill:var(--z-cobalt)}

/* "As seen in" is PROOF FOR the pillars above it, not a new subject, so in this variant it joins
   the cream field instead of opening a band. Its live styling is a green fill with cream text, so
   both have to be undone here or it keeps announcing itself as its own section. */
[data-zones="on"] .proof.band{background:none!important;border-top:0;border-bottom:0}
[data-zones="on"] .proof .lbl{color:var(--red-txt)}
[data-zones="on"] .proof .logo{background-color:var(--ink)}
[data-zones="on"] .proof .logo + .logo::before{color:var(--yellow)}

/* ---- the fill. Has to out-specify .proof.band (skins.css 0,2,0) and .res/.about ---- */
[data-zones="on"] .zone{position:relative;
  background-color:var(--zfill)!important;
  background-image:radial-gradient(rgba(255,255,255,.10) 1.4px,transparent 1.8px)!important;
  background-size:13px 13px!important}
/* the marigold divider is a <div>, not a <section> — it sits BETWEEN two zoned
   sections and stayed cream, cutting the colour run in half. It joins the zone. */
[data-zones="on"] .divider.zone{padding-block:22px}
/* the footer takes the last zone's colour so the page ends on one blue rather than
   the live #1C52B8 butting against #153B84, which reads as a seam */
[data-zones="on"][data-pal="earth"] .foot{background-color:var(--z-olive)!important}
[data-zones="on"][data-pal="warm"]  .foot{background-color:var(--z-terra)!important}
[data-zones="on"][data-pal="cool"]  .foot{background-color:var(--z-cobalt)!important}

/* ---- type on colour ---- */
[data-zones="on"] .zone h2,[data-zones="on"] .zone h2.poster{color:var(--paper);text-shadow:4px 4px 0 rgba(20,14,10,.45)}
[data-zones="on"] .zone .eyebrow{color:var(--z-accent)}
[data-zones="on"] .zone .kicker .ln{background:var(--z-accent)}
[data-zones="on"] .zone .script{color:var(--z-accent)}
[data-zones="on"] .zone > .wrap > p,[data-zones="on"] .zone .sub,
[data-zones="on"] .zone .reelnote,[data-zones="on"] .zone .freeline,
[data-zones="on"] .zone > .wrap > div > p{color:rgba(250,245,235,.88)}
[data-zones="on"] .zone .medlbl{color:rgba(250,245,235,.72)}
[data-zones="on"] .zone p a:not([class]){color:var(--z-accent);text-decoration-color:rgba(255,224,143,.55)}
/* the run-recs label is --ink, i.e. 1.45 on deep olive */
/* ">" not a bare "label": the choice pills are labels inside .recform too, and this
   rule turned their text cream ON a cream chip - 1.02:1, invisible. Same capture that
   ".recform label" caused in site.css; copying this file over reintroduced it. */
[data-zones="on"] .zone .recform > label{color:var(--paper)}
[data-zones="on"] .zone .recform input{border-color:var(--ink)}

/* ---- cards keep their white face and take a marigold slab ---- */
[data-zones="on"] .zone .offer,[data-zones="on"] .zone .mini,[data-zones="on"] .zone .reel,
[data-zones="on"] .zone .ytcard,[data-zones="on"] .zone .podcard,[data-zones="on"] .zone .aboutart{
  --slab:var(--z-slab);box-shadow:6px 6px 0 var(--z-slab)}
[data-zones="on"] .zone .mini,[data-zones="on"] .zone .podcard,[data-zones="on"] .zone .aboutart{background:#fff}
[data-zones="on"] .zone .b.gl{background:var(--paper-2)}

/* ---- the "as seen in" strip sits directly on the fill ---- */
[data-zones="on"] .zone.proof .lbl{color:var(--z-accent)}
[data-zones="on"] .zone.proof .logo{color:var(--paper)}
[data-zones="on"] .zone.proof .logo + .logo::before{color:var(--z-accent)}

/* ---- email capture on colour ---- */
[data-zones="on"] .zone.email label,[data-zones="on"] .zone.email h2{color:var(--paper)}

/* ---- hard edge where one zone meets the next ---- */
[data-zones="on"] .zone-boundary{border-top:3px solid rgba(20,14,10,.35)}


/* ============================================================================
   ADDITIONS FOR THE SECTIONS THAT DID NOT EXIST WHEN THIS WAS A VARIANT
   (training + events, Sep 11 2026)
   ========================================================================== */
/* The form's ask line is a <p class="asklbl">, not a <label>, so the rule above
   that lifts ".zone .recform label" to cream does NOT reach it - it would have
   stayed --ink on a deep fill. Same silent-exclusion family as the pill labels. */
[data-zones="on"] .zone .recform .asklbl{color:var(--paper)}

/* CLASH RULE, applied to the choice pills: the checked pill is cobalt, and the
   training zone IS cobalt under "warm" - a cobalt chip on a deep cobalt fill
   loses its edge. In a zone the checked pill takes the marigold slab instead,
   which is what every card in a zone already does. Ink text on marigold, because
   an 11px-ish bold label is not "large" and needs the 4.5 bar. */
[data-zones="on"] .zone .pick input:checked + label{background:var(--z-slab);color:var(--ink)}
[data-zones="on"] .zone .pick label{background:var(--paper-2)}