/* ══════════════════════════════════════════════════════════════════
   SCHĪR — /supplements page CSS
   Ported faithfully from _resources/competitor-study/prototypes/
   supplements-v1.html (Toby-approved layout v1).
   Palette = brand/palette.md (canonical 8 digital colors) used as a
   SYSTEM. Composition: occasion-lane sections + consistent card system
   + standards strip, re-skinned in SCHĪR's 70s national-park poster +
   ukiyo-e woodblock idiom.

   Scoped under .supp to keep the prototype's self-contained palette and
   layout from leaking into the rest of the site (shared.css owns nav /
   footer / global tokens). Where shared.css globals would break the
   prototype (heading white-space:nowrap, * word-break !important), they
   are overridden inside .supp below.
   ══════════════════════════════════════════════════════════════════ */

.supp{
  /* ── Canonical SCHĪR digital palette (brand/palette.md) ── */
  --alpine-blue:    #12598d;  /* cold-subject accent only — alpine sky / North Star art; NOT default chrome (2026-06-19) */
  --web-accent:    #9a6f2b;  /* warm chrome accent — links/labels/kickers; de-blued 2026-06-19 (one-line swap to retint) */
  --ukiyo-indigo:   #1a2e5c;  /* deep night sky/sea — gravitas grounds */
  --gold-leaf:      #c39b3c;  /* metallic focal — sun, stars, rules, accents */
  --gold-leaf-lt:   #e0c069;  /* lifted gold for hover/sheen */
  --sumac:          #c24234;  /* warm red-orange — punctuation, never ground */
  --persimmon:      #d67d4c;  /* alpenglow / dusk warm gradient fill */
  --desert-ochre:   #b8863c;  /* sandstone earth band */
  --pine:           #1f4a2a;  /* NE conifer — forest band */
  --cream:          #f2e8d0;  /* paper / silk ground */
  --cream-deep:     #e8dcbe;  /* slightly deeper paper for layering */
  --ink:            #0f0f0f;  /* sumi-ink linework + type */

  /* ── Derived working tokens ── */
  --ink-soft:       rgba(15,15,15,.72);
  --ink-faint:      rgba(15,15,15,.52);

  --supp-maxw:      1180px;
  --supp-ease:      cubic-bezier(0.65, 0.01, 0.05, 0.99);

  --supp-serif:     "Cormorant Garamond", Georgia, serif;
  --supp-display:   "Cinzel", serif;

  font-family:var(--supp-serif);
  color:var(--ink);
  line-height:1.6;
  background:var(--cream);
}

/* Reset the aggressive shared.css globals inside the supplements page so
   ported headings wrap exactly as the prototype intends. */
.supp *{ box-sizing:border-box; }
.supp h1,.supp h2,.supp h3,.supp h4{
  white-space:normal;
  overflow:visible;
  width:auto;
  max-width:none;
  word-break:normal !important;
  overflow-wrap:normal !important;
}
.supp img{ display:block; max-width:100%; }
.supp a{ color:inherit; text-decoration:none; }

/* Paper grain — woodblock-print tooth, scoped to the supplements page.
   (shared.css already paints a global grain at body::after; this adds the
   prototype's warmer multiply tooth only over .supp content.) */
.supp::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  mix-blend-mode:multiply;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px;
}
.supp{ position:relative; }

/* ── Shared editorial atoms ─────────────────────────────────────────── */
.supp .eyebrow{
  font-family:var(--supp-display);
  font-size:11px;letter-spacing:.30em;text-transform:uppercase;
  font-weight:600;color:inherit;opacity:1;display:inline-block;text-align:inherit;
}
.supp .wrap{ max-width:var(--supp-maxw); margin:0 auto; padding:0 32px; }

/* Gold focal rule with a center sun-disc — recurring poster motif */
.supp .sun-rule{
  display:flex;align-items:center;justify-content:center;gap:14px;
  margin:18px auto 0;width:min(220px,60%);
}
.supp .sun-rule::before,.supp .sun-rule::after{
  content:"";height:1.5px;flex:1;background:var(--gold-leaf);opacity:.7;
}
.supp .sun-rule i{
  width:9px;height:9px;border-radius:50%;
  background:var(--gold-leaf);
  box-shadow:0 0 0 3px rgba(195,155,60,.22);
  flex:0 0 auto;
}

/* ════════════════════════════════════════════════════════════════════
   1 · HERO — supplement-first, category clear in 5s
   Poster sky: alpine-blue → indigo gradient, gold sun-disc, ink ridgeline.
   ════════════════════════════════════════════════════════════════════ */
.supp-hero{
  position:relative;min-height:92vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;overflow:hidden;
  padding:120px 24px 90px;
  background:
    radial-gradient(circle at 50% 30%, rgba(214,125,76,.22), transparent 42%),
    linear-gradient(180deg, var(--alpine-blue) 0%, #163a66 46%, var(--ukiyo-indigo) 100%);
}
/* Gold sun-disc behind the wordmark */
.supp-hero-sun{
  position:absolute;top:18%;left:50%;transform:translate(-50%,-50%);
  width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle, var(--gold-leaf-lt) 0%, var(--gold-leaf) 38%, rgba(195,155,60,0) 70%);
  opacity:.55;z-index:0;
}
/* Concentric poster sun-rays (thin gold strokes) */
.supp-hero-rays{
  position:absolute;top:18%;left:50%;transform:translate(-50%,-50%);
  width:620px;height:620px;z-index:0;opacity:.30;
}
/* Layered ridgelines — ink woodblock silhouettes anchoring the base */
.supp-hero-ridge{ position:absolute;left:0;right:0;bottom:0;width:100%;z-index:1; }
.supp-hero-ridge.r1{ bottom:0;opacity:1; }
.supp-hero-content{ position:relative;z-index:3;max-width:760px; }
.supp-hero .eyebrow{ color:var(--gold-leaf-lt);display:block;margin-bottom:22px; }
.supp-hero h1{
  font-family:var(--supp-display);font-weight:700;
  font-size:clamp(40px,7vw,82px);line-height:.98;letter-spacing:.02em;
  color:var(--cream);text-transform:uppercase;
  text-shadow:0 2px 24px rgba(15,15,15,.45);
}
.supp-hero h1 .macron{ position:relative; }
.supp-hero-sub{
  font-size:clamp(19px,2.3vw,25px);font-weight:400;
  color:var(--cream);opacity:.94;
  max-width:540px;margin:26px auto 0;line-height:1.5;
  text-shadow:0 1px 14px rgba(15,15,15,.4);
}
.supp-hero-cats{
  display:flex;gap:10px 8px;flex-wrap:wrap;justify-content:center;
  margin:30px auto 0;max-width:560px;
}
.supp-hero-cat{
  font-family:var(--supp-display);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cream);border:1px solid rgba(242,232,208,.32);
  padding:6px 14px;border-radius:40px;font-weight:500;opacity:.9;
}
.supp-hero-cat b{ color:var(--gold-leaf-lt);font-weight:600; }
.supp-hero-actions{ margin-top:38px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap;align-items:center; }
.supp .btn-gold{
  font-family:var(--supp-display);font-size:13px;letter-spacing:.12em;text-transform:uppercase;
  font-weight:600;color:var(--ink);background:var(--gold-leaf);
  padding:16px 38px;border-radius:2px;border:none;cursor:pointer;
  box-shadow:0 8px 30px rgba(15,15,15,.32);
  transition:background .25s, transform .25s, box-shadow .25s;
  display:inline-block;
}
.supp .btn-gold:hover{ background:var(--gold-leaf-lt);transform:translateY(-2px);box-shadow:0 12px 38px rgba(15,15,15,.4); }
.supp .btn-ghost{
  font-family:var(--supp-display);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  font-weight:500;color:var(--cream);
  border:1px solid rgba(242,232,208,.4);padding:14px 28px;border-radius:2px;
  transition:background .25s,border-color .25s;display:inline-block;
}
.supp .btn-ghost:hover{ background:rgba(242,232,208,.08);border-color:var(--gold-leaf-lt); }
.supp-hero-scroll{
  position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:3;
  font-family:var(--supp-display);font-size:10px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--cream);opacity:.6;
}

/* ════════════════════════════════════════════════════════════════════
   2 · STANDARDS STRIP  (non-clinical, SCHĪR voice)
   On cream paper, ink + gold. Sits between hero and lineup as credibility.
   ════════════════════════════════════════════════════════════════════ */
.supp-standards{ background:var(--cream);border-bottom:1px solid rgba(15,15,15,.10);position:relative;z-index:2; }
.supp-standards .row{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  max-width:var(--supp-maxw);margin:0 auto;
}
.supp-std{
  padding:30px 26px;text-align:center;
  border-right:1px solid rgba(15,15,15,.10);
}
.supp-std:last-child{ border-right:none; }
.supp-std .k{
  font-family:var(--supp-display);font-size:24px;font-weight:600;color:var(--web-accent);
  letter-spacing:.02em;margin-bottom:4px;
}
.supp-std .l{ font-size:14.5px;color:var(--ink-soft);font-style:italic; }
@media(max-width:760px){
  .supp-standards .row{ grid-template-columns:repeat(2,1fr); }
  .supp-std:nth-child(2){ border-right:none; }
  .supp-std:nth-child(1),.supp-std:nth-child(2){ border-bottom:1px solid rgba(15,15,15,.10); }
}

/* ════════════════════════════════════════════════════════════════════
   3 · LINEUP INTRO
   ════════════════════════════════════════════════════════════════════ */
.supp-lineup-intro{ background:var(--cream);text-align:center;padding:84px 24px 8px;position:relative;z-index:2; }
.supp-lineup-intro .eyebrow{ color:var(--desert-ochre);display:block;margin-bottom:16px; }
.supp-lineup-intro h2{
  font-family:var(--supp-display);font-weight:600;
  font-size:clamp(28px,4vw,46px);line-height:1.1;letter-spacing:.01em;color:var(--ink);
}
.supp-lineup-intro p{
  max-width:560px;margin:18px auto 0;font-size:18px;color:var(--ink-soft);line-height:1.6;
}

/* ════════════════════════════════════════════════════════════════════
   4 · OCCASION LANES  (section = a moment, not an ingredient)
   Each lane is a banded section. Header names the OCCASION first, SKU
   second. Lane color field shifts with time-of-day to match the
   artwork's own light.
   ════════════════════════════════════════════════════════════════════ */
.supp-lane{ position:relative;padding:64px 0 72px;overflow:hidden;z-index:2; }

/* Lane band header */
.supp-lane-head{ max-width:var(--supp-maxw);margin:0 auto;padding:0 32px 38px;text-align:center; }
.supp-lane-num{
  font-family:var(--supp-display);font-size:12px;letter-spacing:.30em;font-weight:600;
  display:inline-block;margin-bottom:10px;
}
.supp-lane-title{
  font-family:var(--supp-display);font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  font-size:clamp(30px,4.6vw,54px);line-height:1;
}
.supp-lane-when{
  font-family:var(--supp-serif);font-style:italic;font-size:18px;margin-top:12px;opacity:.85;
}
.supp-lane-when b{ font-style:normal;font-weight:600; }

/* Cards row inside a lane */
.supp-lane-cards{
  max-width:var(--supp-maxw);margin:0 auto;padding:0 32px;
  display:grid;gap:22px;
}
.supp-lane-cards.two{ grid-template-columns:repeat(2,1fr); }
.supp-lane-cards.one{ grid-template-columns:minmax(0,560px);justify-content:center; }
@media(max-width:760px){ .supp-lane-cards.two{ grid-template-columns:1fr; } }

/* ── SKU card: consistent system — framed art, badge, name, benefit ── */
.supp-sku{
  position:relative;border-radius:6px;overflow:hidden;
  display:flex;flex-direction:column;
  background:var(--cream);
  border:1px solid rgba(15,15,15,.14);
  box-shadow:0 10px 30px rgba(15,15,15,.10);
  transition:transform .4s var(--supp-ease), box-shadow .4s var(--supp-ease);
}
.supp-sku:hover{ transform:translateY(-5px);box-shadow:0 18px 46px rgba(15,15,15,.18); }
.supp-sku-art{
  position:relative;aspect-ratio:1;overflow:hidden;
  /* colored ground per lane is set on the lane; art is the framed panel */
}
.supp-sku-art img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--supp-ease);
}
.supp-sku:hover .supp-sku-art img{ transform:scale(1.045); }
/* Top-left badge — gold woodblock chip */
.supp-sku-badge{
  position:absolute;top:14px;left:14px;z-index:2;
  font-family:var(--supp-display);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:var(--ink);
  background:var(--cream);border:1px solid var(--gold-leaf);
  padding:5px 11px;border-radius:2px;
  box-shadow:0 2px 8px rgba(15,15,15,.18);
}
.supp-sku-badge.dot::before{
  content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--gold-leaf);margin-right:7px;vertical-align:middle;
}
.supp-sku-body{ padding:24px 26px 26px;display:flex;flex-direction:column;flex:1; }
.supp-sku-line{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:2px;
}
.supp-sku-name{
  font-family:var(--supp-display);font-size:20px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink);display:block;margin-bottom:0;
}
.supp-sku-form{
  font-family:var(--supp-display);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);
}
.supp-sku-use{
  font-family:var(--supp-display);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  font-weight:500;margin-bottom:12px;
}
.supp-sku-tag{
  font-size:18px;font-style:italic;color:var(--ink);margin-bottom:14px;line-height:1.4;
}
.supp-sku-claim{
  font-size:14.5px;color:var(--ink-soft);line-height:1.55;
  padding-top:14px;border-top:1px solid rgba(15,15,15,.12);margin-top:auto;
}
.supp-sku-inside{
  margin-top:14px;font-family:var(--supp-display);font-size:11px;letter-spacing:.10em;
  text-transform:uppercase;font-weight:600;color:var(--web-accent);
  display:inline-flex;align-items:center;gap:7px;align-self:flex-start;
  border-bottom:1px solid transparent;transition:border-color .25s,gap .25s;
}
.supp-sku-inside:hover{ border-color:var(--web-accent);gap:11px; }
.supp-sku-inside .arr{ font-style:normal; }

/* ── Lane skins (time-of-day color fields, all from the canonical palette) ── */
/* MORNING — cream paper warmed by first light: ochre/persimmon wash, alpine accents */
.supp-lane-morning{
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(214,125,76,.16), transparent 60%),
    linear-gradient(180deg, var(--cream) 0%, var(--cream-deep) 100%);
}
.supp-lane-morning .supp-lane-num{ color:var(--desert-ochre); }
.supp-lane-morning .supp-lane-title{ color:var(--ink); }
.supp-lane-morning .supp-sku-art{ background:var(--ukiyo-indigo); }
.supp-lane-morning .supp-sku-use{ color:var(--desert-ochre); }

/* IN-MOTION — high alpine day: alpine-blue → persimmon alpenglow energy field */
.supp-lane-motion{
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(214,125,76,.30), transparent 55%),
    linear-gradient(180deg, var(--alpine-blue) 0%, #1d4675 60%, var(--ukiyo-indigo) 100%);
}
.supp-lane-motion .supp-lane-num{ color:var(--gold-leaf-lt); }
.supp-lane-motion .supp-lane-title{ color:var(--cream); }
.supp-lane-motion .supp-lane-when{ color:var(--cream);opacity:.9; }
.supp-lane-motion .supp-sku-art{ background:var(--ink); }
.supp-lane-motion .supp-sku-use{ color:var(--sumac); }
/* cards on dark field get a warm inner glow seam */
.supp-lane-motion .supp-sku{ border-color:rgba(195,155,60,.35); box-shadow:0 14px 40px rgba(15,15,15,.4); }

/* WIND-DOWN — deep ukiyo-e night: indigo → ink, gold moon accents */
.supp-lane-winddown{
  background:
    radial-gradient(90% 70% at 50% 12%, rgba(195,155,60,.14), transparent 55%),
    linear-gradient(180deg, var(--ukiyo-indigo) 0%, #14224a 55%, var(--ink) 100%);
}
.supp-lane-winddown .supp-lane-num{ color:var(--gold-leaf-lt); }
.supp-lane-winddown .supp-lane-title{ color:var(--cream); }
.supp-lane-winddown .supp-lane-when{ color:var(--cream);opacity:.85; }
.supp-lane-winddown .supp-sku-art{ background:var(--ink); }
.supp-lane-winddown .supp-sku-use{ color:var(--gold-leaf-lt); }
.supp-lane-winddown .supp-sku{ border-color:rgba(195,155,60,.30); box-shadow:0 16px 44px rgba(0,0,0,.5); }

/* thin gold seam between lanes */
.supp-lane + .supp-lane::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--gold-leaf),transparent);opacity:.6;
}

/* ════════════════════════════════════════════════════════════════════
   5 · WHAT'S INSIDE  — honest-doses affordance pointing to a future page
   ════════════════════════════════════════════════════════════════════ */
.supp-inside{
  background:var(--cream);
  padding:88px 24px;border-top:1px solid rgba(15,15,15,.12);position:relative;z-index:2;
}
.supp-inside-grid{
  max-width:var(--supp-maxw);margin:0 auto;
  display:grid;grid-template-columns:1.1fr 1fr;gap:54px;align-items:center;
}
@media(max-width:820px){ .supp-inside-grid{ grid-template-columns:1fr;gap:34px; } }
.supp-inside .eyebrow{ color:var(--desert-ochre);display:block;margin-bottom:16px; }
.supp-inside h2{
  font-family:var(--supp-display);font-weight:600;font-size:clamp(26px,3.6vw,40px);
  line-height:1.12;color:var(--ink);margin-bottom:18px;letter-spacing:.01em;
}
.supp-inside p{ font-size:18px;color:var(--ink-soft);line-height:1.65;max-width:46ch;margin-bottom:14px; }
.supp-inside-link{
  display:inline-flex;align-items:center;gap:9px;margin-top:14px;
  font-family:var(--supp-display);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  font-weight:600;color:var(--web-accent);
  border-bottom:1px solid var(--web-accent);padding-bottom:3px;transition:gap .25s;
}
.supp-inside-link:hover{ gap:14px; }
/* sample "honest dose" panel — a teaser of the deeper page, not the page */
.supp-dose{
  background:var(--cream-deep);border:1px solid rgba(15,15,15,.16);border-radius:6px;
  padding:30px 30px 22px;box-shadow:0 10px 30px rgba(15,15,15,.10);position:relative;
}
.supp-dose::before{
  content:"";position:absolute;inset:7px;border:1px solid rgba(195,155,60,.5);border-radius:3px;pointer-events:none;
}
.supp-dose-h{
  font-family:var(--supp-display);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;color:var(--ink);margin-bottom:6px;
}
.supp-dose-sub{ font-size:13.5px;font-style:italic;color:var(--ink-faint);margin-bottom:18px; }
.supp-dose-row{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:11px 0;border-top:1px solid rgba(15,15,15,.12);
}
.supp-dose-row:first-of-type{ border-top:none; }
.supp-dose-ing{ font-size:16px;color:var(--ink); }
.supp-dose-ing small{ display:block;font-size:12.5px;color:var(--ink-faint);font-style:italic; }
.supp-dose-amt{
  font-family:var(--supp-display);font-size:14px;font-weight:600;color:var(--web-accent);
  letter-spacing:.04em;white-space:nowrap;
}
.supp-dose-foot{ margin-top:16px;font-size:12px;color:var(--ink-faint);font-style:italic; }

/* ════════════════════════════════════════════════════════════════════
   6 · WAITLIST BAND  — the only pre-launch conversion
   Full-bleed ukiyo-e night field, gold focal, single email field.
   ════════════════════════════════════════════════════════════════════ */
.supp-waitlist{
  position:relative;overflow:hidden;text-align:center;
  padding:96px 24px 104px;z-index:2;
  background:
    radial-gradient(70% 120% at 50% 0%, rgba(18,89,141,.55), transparent 60%),
    linear-gradient(180deg, var(--ukiyo-indigo), var(--ink));
}
.supp-waitlist .sun-rule::before,.supp-waitlist .sun-rule::after{ opacity:.85; }
.supp-waitlist .eyebrow{ color:var(--gold-leaf-lt);display:block;margin-bottom:10px; }
.supp-waitlist h2{
  font-family:var(--supp-display);font-weight:700;text-transform:uppercase;letter-spacing:.03em;
  font-size:clamp(30px,4.4vw,52px);color:var(--cream);line-height:1.04;margin-top:18px;
  text-shadow:0 2px 22px rgba(0,0,0,.45);
}
.supp-waitlist p{
  font-size:19px;color:var(--cream);opacity:.9;max-width:460px;margin:18px auto 0;line-height:1.55;
}
.supp-wl-form{
  display:flex;gap:10px;max-width:440px;margin:32px auto 0;flex-wrap:wrap;justify-content:center;
}
.supp-wl-form input{
  flex:1;min-width:220px;background:rgba(242,232,208,.10);
  border:1px solid rgba(242,232,208,.35);color:var(--cream);
  padding:15px 18px;border-radius:2px;font-family:var(--supp-serif);font-size:16px;
}
.supp-wl-form input::placeholder{ color:rgba(242,232,208,.6); }
.supp-wl-form input:focus{ outline:none;border-color:var(--gold-leaf); }
.supp-wl-note{
  margin-top:16px;font-family:var(--supp-display);font-size:11px;letter-spacing:.10em;
  text-transform:uppercase;color:var(--cream);opacity:.6;
}

/* FDA disclaimer — site footer (shared.css) handles the wordmark/footer chrome,
   so the prototype's own footer block is dropped in favor of the live footer. */
.supp-fda{
  background:var(--ink);color:rgba(242,232,208,.42);
  font-size:11px;line-height:1.6;text-align:center;padding:26px 32px;
  border-top:1px solid rgba(242,232,208,.08);position:relative;z-index:2;
}