/* ══════════════════════════════════════════════════════════════════
   SCHĪR — Homepage CSS
   Ported faithfully from _resources/competitor-study/prototypes/
   homepage-v8.html (Toby-approved homepage v8). Palette = brand/palette.md
   (canonical digital colors) used as a SYSTEM, shared with /supplements so
   the site reads as one brand.

   Scoped under .home (same strategy as supplements.css's .supp scope) so the
   prototype's self-contained palette + button/editorial atoms don't leak
   into the rest of the site, and so shared.css's aggressive globals
   (h1-h4 white-space:nowrap, * word-break:keep-all !important) are reset
   here exactly as the prototype intends. Nav / footer / head chrome come
   from the live base layout; only the in-page homepage styles live here.

   The one piece of v8's NAV behavior kept (adapted to the live #v8nav):
   an .on-cream contrast flip so the fixed nav stays legible over the cream
   sections — wired by the scroll-spy script in index.njk via data-nav.
   ══════════════════════════════════════════════════════════════════ */

.home{
  /* ── 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 · the LIVE cue */
  --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,.74);
  --ink-faint:      rgba(15,15,15,.54);
  --bronze-ink:     #9a6f2b;  /* deeper gold for body emphasis on cream */

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

  --serif:          "Cormorant Garamond", Georgia, serif;
  --display:        "Cinzel", serif;
  --sans:           "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

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

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

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

/* inline emphasis atoms — medium-weight serif lift, not heavy browser-bold */
.home .em{ font-weight:600; color:var(--bronze-ink); font-style:normal; }
.home .em-gold{ font-weight:600; color:var(--gold-leaf-lt); font-style:normal; }

/* Gold focal rule with a center sun-disc — recurring poster motif */
.home .sun-rule{
  display:flex;align-items:center;justify-content:center;gap:14px;
  margin:18px auto 0;width:min(220px,60%);
}
.home .sun-rule::before,.home .sun-rule::after{
  content:"";height:1.5px;flex:1;background:var(--gold-leaf);opacity:.7;
}
.home .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;
}

/* ════════════════════════════════════════════════════════════════════
   SHARED BUTTON ATOMS
   ════════════════════════════════════════════════════════════════════ */
.home .btn-gold{
  font-family:var(--display);font-size:13px;letter-spacing:.12em;text-transform:uppercase;
  font-weight:600;color:var(--ink);background:var(--gold-leaf);
  padding:17px 40px;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;
}
.home .btn-gold:hover{ background:var(--gold-leaf-lt);transform:translateY(-2px);box-shadow:0 12px 38px rgba(15,15,15,.4); }
.home .btn-gold.lg{ font-size:14px;padding:19px 48px; }
.home .btn-ghost{
  font-family:var(--display);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  font-weight:500;color:var(--cream);
  border:1px solid rgba(242,232,208,.55);padding:14px 28px;border-radius:2px;
  transition:background .25s,border-color .25s;display:inline-block;
}
.home .btn-ghost:hover{ background:rgba(242,232,208,.10);border-color:var(--gold-leaf-lt); }
.home .btn-ghost-ink{
  font-family:var(--display);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  font-weight:600;color:var(--ink);
  border:1px solid rgba(15,15,15,.40);padding:14px 28px;border-radius:2px;
  transition:background .25s,border-color .25s,color .25s;display:inline-block;
}
.home .btn-ghost-ink:hover{ border-color:var(--gold-leaf);color:var(--web-accent); }

.home .btn-line{
  font-family:var(--display);font-size:12px;letter-spacing:.13em;text-transform:uppercase;
  font-weight:600;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 26px;border-radius:2px;
  border:1.5px solid currentColor;
  transition:transform .25s var(--ease), box-shadow .25s, background .25s, color .25s, gap .25s;
}
.home .btn-line .arr{ font-style:normal;transition:transform .25s var(--ease); }
.home .btn-line:hover{ transform:translateY(-2px);box-shadow:0 10px 26px rgba(15,15,15,.16); }
.home .btn-line:hover .arr{ transform:translateX(4px); }
.home .btn-line.fill{ color:var(--ink);background:var(--gold-leaf);border:1.5px solid var(--gold-leaf); }
.home .btn-line.fill:hover{ background:var(--gold-leaf-lt);border-color:var(--gold-leaf-lt);color:var(--ink); }

/* ════════════════════════════════════════════════════════════════════
   NAV CONTRAST FLIP — the one piece of v8's nav behavior kept, adapted to
   the live #v8nav. When the fixed nav overlaps a cream section, flip its
   glass light + type to ink so it never reads as a harsh dark slab on the
   cream. Scoped to the homepage body so it never affects other pages.
   Doubled selector so it reliably beats #v8nav.scrolled when both are set.
   ════════════════════════════════════════════════════════════════════ */
body#landing-page #v8nav.on-cream.on-cream{
  background:rgba(242,232,208,.82);
  border-bottom:1px solid rgba(15,15,15,.12);
  box-shadow:0 6px 24px rgba(15,15,15,.10);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
}
body#landing-page #v8nav.on-cream.on-cream .nav-logo{ color:var(--ink);text-shadow:none; }
body#landing-page #v8nav.on-cream.on-cream .nav-logo-i{ color:var(--bronze-ink); }
body#landing-page #v8nav.on-cream.on-cream .nav-section-link{ color:var(--ink);text-shadow:none;opacity:.9; }
body#landing-page #v8nav.on-cream.on-cream .nav-section-link:hover{ color:var(--web-accent);opacity:1; }
/* the gold SHOP button stays gold on both grounds (constant focal) */
body#landing-page #v8nav.on-cream.on-cream .nav-menu-btn{
  border-color:rgba(15,15,15,.2);color:var(--ink);
}

/* ════════════════════════════════════════════════════════════════════
   2 · THE CURRENT DROP — LIVE, SHOPPABLE APPAREL CAROUSEL (data-driven)
   ════════════════════════════════════════════════════════════════════ */
.home .drop{ background:var(--cream);padding:78px 24px 84px;position:relative;border-bottom:1px solid rgba(15,15,15,.08); }
.home .drop-head{
  max-width:var(--maxw);margin:0 auto 34px;
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;
}
.home .drop-head-l{ max-width:640px; }
.home .drop-head .eyebrow{ color:var(--pine);display:flex;align-items:center;gap:8px;margin-bottom:12px; }
.home .drop-head .eyebrow::before{
  content:"";width:8px;height:8px;border-radius:50%;background:var(--pine);
  display:inline-block;flex:0 0 auto;box-shadow:0 0 0 0 rgba(31,74,42,.5);
  animation:dropPulse 2.4s var(--ease) infinite;
}
@keyframes dropPulse{
  0%{ box-shadow:0 0 0 0 rgba(31,74,42,.45); }
  70%{ box-shadow:0 0 0 7px rgba(31,74,42,0); }
  100%{ box-shadow:0 0 0 0 rgba(31,74,42,0); }
}
.home .drop-head h2{
  font-family:var(--display);font-weight:600;
  font-size:clamp(28px,3.8vw,44px);line-height:1.06;letter-spacing:.01em;color:var(--ink);
}
.home .drop-head p{
  font-size:16.5px;color:var(--ink-soft);line-height:1.55;margin-top:12px;max-width:52ch;
}
.home .drop-shopall{
  font-family:var(--display);font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;
  font-weight:600;color:var(--ink);white-space:nowrap;
  display:inline-flex;align-items:center;gap:9px;padding-bottom:4px;
  border-bottom:1.5px solid var(--gold-leaf);
  transition:color .25s, gap .25s, border-color .25s;
}
.home .drop-shopall .arr{ font-style:normal;transition:transform .25s var(--ease); }
.home .drop-shopall:hover{ color:var(--web-accent); }
.home .drop-shopall:hover .arr{ transform:translate(3px,-3px); }

.home .drop-grid{
  max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:repeat(5,1fr);gap:18px;
}
.home .drop-card{
  display:flex;flex-direction:column;border-radius:6px;overflow:hidden;
  background:var(--cream);border:1px solid rgba(15,15,15,.14);
  box-shadow:0 6px 18px rgba(15,15,15,.08);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
}
.home .drop-card:hover{ transform:translateY(-6px);box-shadow:0 18px 42px rgba(15,15,15,.18);border-color:var(--gold-leaf); }
.home .drop-card-art{
  position:relative;aspect-ratio:1;overflow:hidden;
  background:#fbf7ec;border-bottom:1px solid rgba(15,15,15,.10);
}
.home .drop-card-art img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:opacity .5s var(--ease), transform .8s var(--ease);
}
.home .drop-card-art .img-alt{ opacity:0; }
.home .drop-card:hover .drop-card-art .img-pri{ opacity:0;transform:scale(1.04); }
.home .drop-card:hover .drop-card-art .img-alt{ opacity:1;transform:scale(1.04); }
.home .drop-badge{
  position:absolute;top:11px;right:11px;z-index:2;
  font-family:var(--display);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;
  font-weight:600;color:var(--pine);
  background:rgba(242,232,208,.92);border:1px solid var(--pine);
  padding:5px 10px;border-radius:2px;
  box-shadow:0 2px 8px rgba(15,15,15,.16);
  display:inline-flex;align-items:center;gap:6px;
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
}
.home .drop-badge::before{
  content:"";width:5px;height:5px;border-radius:50%;background:var(--pine);
  display:inline-block;flex:0 0 auto;
}
.home .drop-card-body{ padding:15px 15px 17px;display:flex;flex-direction:column;flex:1; }
.home .drop-meta{
  font-family:var(--sans);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  font-weight:600;color:var(--ink-faint);margin-bottom:7px;
}
.home .drop-name{
  font-family:var(--display);font-size:16px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink);line-height:1.1;
}
.home .drop-cta{
  margin-top:14px;
  font-family:var(--display);font-size:11.5px;letter-spacing:.10em;text-transform:uppercase;
  font-weight:600;color:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;
  padding:11px 12px;border-radius:2px;border:1.5px solid var(--ink);
  transition:background .25s var(--ease), color .25s, border-color .25s, gap .25s, transform .25s;
}
.home .drop-cta .arr{ font-style:normal;transition:transform .25s var(--ease); }
.home .drop-card:hover .drop-cta{
  background:var(--gold-leaf);border-color:var(--gold-leaf);color:var(--ink);gap:11px;
}
.home .drop-card:hover .drop-cta .arr{ transform:translate(3px,-3px); }
.home .drop-swipe-cue{ display:none; }

/* ════════════════════════════════════════════════════════════════════
   1 · HERO — generated alpine backdrop + PROMINENT cream SCHĪR wordmark
   ════════════════════════════════════════════════════════════════════ */
/* v2 POSTER COMPOSITION: calm open-sky backdrop (hero-backdrop-v2) + ONE centred
   title block (eyebrow / SCHĪR wordmark / subhead / CTAs) living in the open sky
   with deterministic spacing + a single cohesive scrim. Replaces the old
   absolute-wordmark approach where the eyebrow collided with the wordmark over
   busy clouds (the "invisible text" bug). */
.home .hero{
  position:relative;min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  text-align:center;overflow:hidden;
  padding:clamp(134px,18vh,212px) 24px clamp(90px,12vh,132px);
  background:linear-gradient(180deg, #10203f 0%, #163a66 46%, var(--ukiyo-indigo) 100%);
}
.home .hero-backdrop{
  position:absolute;inset:0;z-index:0;pointer-events:none;display:block;
}
.home .hero-backdrop img{
  width:100%;height:100%;object-fit:cover;object-position:50% 24%;
  will-change:transform; /* hero parallax target (motion.js) — borderless art, no scale-crop */
}
/* one cohesive scrim — a soft wash behind the upper title block + a base fade
   into the next section. Guarantees the eyebrow + wordmark contrast on the sky. */
.home .hero-scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg, rgba(8,11,26,.52) 0%, rgba(8,11,26,.28) 26%, rgba(8,11,26,.12) 46%, rgba(8,11,26,0) 60%),
    linear-gradient(0deg, rgba(8,11,26,.48) 0%, rgba(8,11,26,0) 22%);
}
.home .hero-content{
  position:relative;z-index:3;max-width:900px;
  display:flex;flex-direction:column;align-items:center;
}
.home .hero .eyebrow{
  color:var(--gold-leaf-lt);display:block;
  letter-spacing:.34em;margin:0 0 clamp(18px,2.6vh,30px);
  text-shadow:0 1px 12px rgba(0,0,0,.65);
}
.home .hero-wordmark{
  margin:0;line-height:.92;
  font-family:var(--display);font-weight:700;letter-spacing:.09em;white-space:nowrap;
  font-size:clamp(66px,12.5vw,196px);
}
/* Wordmark: cream at rest, with a single gold-leaf shimmer sweep on load.
   A mostly-cream gradient (one gold band at 50%) is clipped to the letterforms
   and animated left→right ONCE so the band crosses the word and exits, settling
   back to cream. The clip is applied to BOTH .hero-wm-ink (SCH…R) and the .wm-i
   wrapper — a positioned child needs its OWN clipped gradient or its glyph
   inherits the transparent fill and vanishes. The word = SCH + .wm-i(I + custom
   macron) + R. Depth via drop-shadow (renders reliably on clipped text). */
.home .hero-wm-ink,
.home .hero-wm-ink .wm-i{
  background-image:linear-gradient(100deg,
      var(--cream) 0%, var(--cream) 40%,
      var(--gold-leaf-lt) 50%,
      var(--cream) 60%, var(--cream) 100%);
  background-repeat:no-repeat;
  background-size:300% 100%;
  background-position:0% 0;            /* rest = cream (gold band parked off-frame) */
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  animation:wmShimmer 1.6s var(--ease) .4s 1 both;
}
.home .hero-wm-ink{
  position:relative;
  filter:drop-shadow(0 2px 14px rgba(8,11,26,.5)) drop-shadow(0 1px 2px rgba(8,11,26,.55));
}
@keyframes wmShimmer{
  0%   { background-position:0% 0; }
  100% { background-position:100% 0; } /* gold band sweeps across once, ends on cream */
}
/* Custom macron — a tuned bar centred over the I, replacing the detached U+012A
   glyph bar. Sized in em so it scales with the responsive wordmark clamp(). The
   I wrapper is inline-block so the bar centres on the glyph and tracks its cap. */
.home .hero-wm-ink .wm-i{ position:relative;display:inline-block; }
.home .hero-wm-ink .wm-macron{
  position:absolute;left:50%;top:-0.05em;
  transform:translateX(-50%);
  width:0.48em;height:0.05em;border-radius:0.5px;
  background:var(--cream);
}
@media(prefers-reduced-motion:reduce){
  .home .hero-wm-ink,
  .home .hero-wm-ink .wm-i{ animation:none;background-position:0% 0; }
}
.home .hero h1{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(18px,2.1vw,25px);line-height:1.55;letter-spacing:.005em;
  color:var(--cream);max-width:540px;margin:clamp(20px,3vh,34px) auto 0;
  text-shadow:0 2px 20px rgba(9,12,24,.62);
}
.home .hero h1 .em-gold{ font-weight:600;color:var(--gold-leaf-lt); }
.home .hero-actions{ margin-top:clamp(28px,4vh,44px);display:flex;gap:16px;align-items:center;justify-content:center;flex-wrap:wrap; }
/* frosted backdrop on the ghost CTA so it reads crisply wherever it lands over
   the art (the secondary button can fall on the bright snow-caps). */
.home .hero-actions .btn-ghost{
  background:rgba(10,14,30,.34);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  border-color:rgba(242,232,208,.7);
}
.home .hero-actions .btn-ghost:hover{ background:rgba(10,14,30,.52);border-color:var(--gold-leaf-lt); }
.home .hero-scroll{
  position:absolute;bottom:24px;left:50%;transform:translateX(-50%);z-index:3;
  font-family:var(--display);font-size:10px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--cream);opacity:.7;
}

/* ════════════════════════════════════════════════════════════════════
   3 · WHAT SCHĪR IS — 3-up sub-nav (interactive cards)
   ════════════════════════════════════════════════════════════════════ */
.home .frame{ background:var(--cream);border-bottom:1px solid rgba(15,15,15,.10);padding:26px 24px; }
.home .frame .row{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
  max-width:var(--maxw);margin:0 auto;
}
.home .frame-cell{
  display:block;padding:26px 26px;text-align:left;border-radius:6px;
  background:var(--cream);border:1px solid rgba(15,15,15,.14);
  box-shadow:0 4px 16px rgba(15,15,15,.06);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
  position:relative;
}
.home .frame-cell:hover{ transform:translateY(-4px);box-shadow:0 14px 32px rgba(15,15,15,.14);border-color:rgba(195,155,60,.6); }
.home .frame-cell .k{
  font-family:var(--display);font-size:20px;font-weight:600;color:var(--web-accent);
  letter-spacing:.02em;margin-bottom:7px;display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.home .frame-cell .k .arr{
  font-family:var(--sans);font-size:18px;color:var(--desert-ochre);
  opacity:.55;transition:transform .25s var(--ease), opacity .25s;
}
.home .frame-cell:hover .k .arr{ opacity:1;transform:translateX(4px); }
.home .frame-cell .l{ font-size:16px;color:var(--ink-soft);line-height:1.5; }
.home .frame-cell .tag{
  font-family:var(--sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:var(--desert-ochre);display:flex;align-items:center;gap:7px;margin-bottom:12px;
}
.home .frame-cell .tag::before{
  content:"";width:7px;height:7px;border-radius:50%;background:var(--desert-ochre);
  display:inline-block;flex:0 0 auto;
}
.home .frame-cell .tag.is-live{ color:var(--pine); }
.home .frame-cell .tag.is-live::before{ background:var(--pine); }
.home .frame-cell .tag.is-soon{ color:var(--desert-ochre); }
.home .frame-cell .tag.is-soon::before{ background:var(--gold-leaf); }
.home .frame-cell .tag.tag-neutral{ color:var(--web-accent); }
.home .frame-cell .tag.tag-neutral::before{ background:var(--web-accent); }
@media(max-width:760px){
  .home .frame .row{ grid-template-columns:1fr; }
}

/* ════════════════════════════════════════════════════════════════════
   4 · THE TWO PILLARS — favor the apparel (LIVE = revenue today)
   ════════════════════════════════════════════════════════════════════ */
.home .pillars{ background:var(--cream);padding:88px 24px 92px;position:relative; }
.home .pillars-intro{ text-align:center;max-width:660px;margin:0 auto 48px; }
.home .pillars-intro .eyebrow{ color:var(--desert-ochre);display:block;margin-bottom:16px; }
.home .pillars-intro h2{
  font-family:var(--display);font-weight:600;
  font-size:clamp(30px,4.2vw,48px);line-height:1.08;letter-spacing:.01em;color:var(--ink);
}
.home .pillars-intro p{
  max-width:560px;margin:16px auto 0;font-size:18px;color:var(--ink-soft);line-height:1.6;
}
.home .pillars-grid{
  max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:repeat(2,1fr);gap:26px;align-items:start;
}
@media(max-width:820px){ .home .pillars-grid{ grid-template-columns:1fr; } }

.home .pillar{
  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 12px 34px rgba(15,15,15,.11);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.home .pillar:hover{ transform:translateY(-6px);box-shadow:0 22px 54px rgba(15,15,15,.20); }
.home .pillar-apparel{
  border-color:rgba(195,155,60,.45);
  box-shadow:0 16px 40px rgba(15,15,15,.13), 0 6px 30px rgba(195,155,60,.20);
}
.home .pillar-apparel:hover{
  box-shadow:0 26px 60px rgba(15,15,15,.22), 0 10px 38px rgba(195,155,60,.28);
}
.home .pillar-art{ position:relative;aspect-ratio:16/11;overflow:hidden;background:var(--ukiyo-indigo); }
.home .pillar-art img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--ease);
}
.home .pillar:hover .pillar-art img{ transform:scale(1.045); }
.home .pillar-chip{
  position:absolute;top:16px;left:16px;z-index:2;
  font-family:var(--display);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;color:var(--ink);
  background:var(--cream);border:1px solid var(--gold-leaf);
  padding:6px 13px;border-radius:2px;
  box-shadow:0 2px 8px rgba(15,15,15,.18);
}
.home .pillar-chip::before{
  content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  margin-right:8px;vertical-align:middle;
}
.home .pillar-chip.live{ border-color:var(--pine);color:var(--pine); }
.home .pillar-chip.live::before{ background:var(--pine); }
.home .pillar-chip.soon::before{ background:var(--gold-leaf); }
.home .pillar-body{ padding:30px 32px 34px;display:flex;flex-direction:column;flex:1; }
.home .pillar-kicker{
  font-family:var(--display);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;margin-bottom:10px;display:flex;align-items:center;gap:8px;
}
.home .pillar-kicker .dot{ width:7px;height:7px;border-radius:50%;display:inline-block;flex:0 0 auto; }
.home .pillar-apparel .pillar-kicker .dot{ background:var(--pine); }
.home .pillar-supp .pillar-kicker .dot{ background:var(--gold-leaf); }
.home .pillar-name{
  font-family:var(--display);font-size:clamp(26px,3vw,34px);font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink);line-height:1;
}
.home .pillar-tag{
  font-size:19px;font-style:italic;color:var(--ink);margin-top:12px;line-height:1.4;
}
.home .pillar-claim{
  font-size:15.5px;color:var(--ink-soft);line-height:1.6;
  padding-top:16px;border-top:1px solid rgba(15,15,15,.12);margin-top:18px;
}
.home .pillar-cta{ margin-top:24px; }
.home .pillar-cta .btn-line{ width:100%; }
.home .pillar-apparel .pillar-kicker{ color:var(--pine); }
.home .pillar-supp .pillar-kicker{ color:var(--web-accent); }
.home .pillar-supp .pillar-cta .btn-line{ color:var(--web-accent); }
.home .pillar-supp .pillar-cta .btn-line:hover{ background:var(--web-accent);color:var(--cream); }

/* ════════════════════════════════════════════════════════════════════
   4b · THE FIVE — enlarged SKU cards (mobile = scroll-snap slider)
   ════════════════════════════════════════════════════════════════════ */
.home .five{ max-width:var(--maxw);margin:54px auto 0; }
.home .five-head{ text-align:center;margin-bottom:26px; }
.home .five-head .lbl{
  font-family:var(--display);font-size:12px;letter-spacing:.20em;text-transform:uppercase;
  font-weight:600;color:var(--desert-ochre);
}
.home .five-head .sub{
  font-size:16px;color:var(--ink-soft);margin-top:8px;font-style:italic;
}
.home .five-grid{
  display:grid;grid-template-columns:repeat(5,1fr);gap:16px;
}
.home .five-card{
  display:flex;flex-direction:column;border-radius:6px;overflow:hidden;
  background:var(--cream);border:1px solid rgba(15,15,15,.14);
  box-shadow:0 6px 18px rgba(15,15,15,.08);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
}
.home .five-card:hover{ transform:translateY(-5px);box-shadow:0 16px 38px rgba(15,15,15,.18);border-color:var(--gold-leaf); }
.home .five-card-art{ position:relative;aspect-ratio:1;overflow:hidden;background:var(--ukiyo-indigo); }
.home .five-card-art img{ width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease); }
.home .five-card:hover .five-card-art img{ transform:scale(1.06); }
.home .five-card-body{ padding:14px 14px 16px;text-align:center; }
.home .five-card-name{
  font-family:var(--display);font-size:15px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink);
}
.home .five-card-use{
  font-family:var(--sans);font-size:12px;letter-spacing:.04em;
  color:var(--ink);margin-top:5px;font-weight:600;
}
.home .five-foot{ text-align:center;margin-top:30px; }
.home .five-swipe-cue{ display:none; }

/* ════════════════════════════════════════════════════════════════════
   5 · THE NAME / ETYMOLOGY — 2×2 grid (data-driven) on the night field
   ════════════════════════════════════════════════════════════════════ */
.home .name{
  position:relative;overflow:hidden;
  background:
    radial-gradient(90% 70% at 70% 14%, rgba(195,155,60,.13), transparent 55%),
    linear-gradient(180deg, var(--ukiyo-indigo) 0%, #16284f 60%, #11203f 100%);
}
.home .name::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--gold-leaf),transparent);opacity:.6;
}
.home .name-grid{
  max-width:var(--maxw);margin:0 auto;padding:92px 32px 96px;
  display:grid;grid-template-columns:1.08fr .92fr;gap:58px;align-items:center;
}
@media(max-width:880px){ .home .name-grid{ grid-template-columns:1fr;gap:40px; } }
.home .name-copy .eyebrow{ color:var(--gold-leaf-lt);display:block;margin-bottom:16px; }
.home .name-accent{
  font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.03em;
  font-size:clamp(30px,4.2vw,50px);color:var(--cream);line-height:1.04;
  text-shadow:0 2px 24px rgba(0,0,0,.5);
}
.home .name-accent .gold{ color:var(--gold-leaf-lt); }
.home .name-lede{
  font-size:19px;color:var(--cream);opacity:.92;margin-top:18px;line-height:1.62;max-width:52ch;font-weight:400;
}
.home .etym-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:16px;
  margin-top:26px;align-items:stretch;
}
.home .etym-card{
  position:relative;overflow:hidden;
  background:rgba(242,232,208,.05);
  border:1px solid rgba(242,232,208,.16);
  border-radius:8px;padding:24px 22px 22px;
  display:flex;flex-direction:column;min-height:178px;
}
.home .etym-card .etym-corner{
  position:absolute;top:6px;left:12px;
  font-family:var(--serif);font-size:64px;line-height:1;
  color:var(--gold-leaf);opacity:.12;pointer-events:none;
}
.home .etym-card .etym-lang{
  display:block;font-family:var(--display);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-leaf-lt);opacity:.85;margin-bottom:8px;position:relative;
}
.home .etym-card .etym-word{
  display:block;font-family:var(--display);font-size:clamp(24px,2.4vw,30px);font-weight:600;
  letter-spacing:.05em;color:var(--cream);margin-bottom:14px;position:relative;
}
.home .etym-card .etym-meaning{
  font-size:14.5px;font-weight:300;line-height:1.6;color:var(--cream);opacity:.78;
  margin-top:auto;position:relative;
}
.home .name-keeper{
  font-size:18px;color:var(--cream);opacity:.92;margin-top:26px;line-height:1.62;max-width:52ch;
}
.home .name-actions{ margin-top:30px;display:flex;gap:14px;flex-wrap:wrap;align-items:center; }
.home .name-art{ position:relative; }
.home .name-art img{
  width:100%;height:auto;display:block;border-radius:4px;
  -webkit-mask-image:radial-gradient(120% 120% at 50% 50%, #000 72%, transparent 100%);
          mask-image:radial-gradient(120% 120% at 50% 50%, #000 72%, transparent 100%);
  filter:drop-shadow(0 26px 60px rgba(0,0,0,.6));
}
.home .name-art .cap{
  margin-top:16px;text-align:center;
  font-family:var(--display);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--cream);opacity:.7;
}

/* ════════════════════════════════════════════════════════════════════
   6 · OUR STORY — "Fuel what brought you here." kicker above the headline
   ════════════════════════════════════════════════════════════════════ */
.home .story{ background:var(--cream);padding:90px 24px 96px;position:relative; }
.home .story-grid{
  max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:.92fr 1.08fr;gap:58px;align-items:center;
}
@media(max-width:880px){ .home .story-grid{ grid-template-columns:1fr;gap:38px; } .home .story-art{ order:-1; } }
.home .story-art{ position:relative;border-radius:6px;overflow:hidden;box-shadow:0 16px 44px rgba(15,15,15,.18); }
.home .story-art img{ width:100%;height:100%;object-fit:cover;display:block; }
.home .story-art .tag{
  position:absolute;left:14px;bottom:14px;z-index:2;
  font-family:var(--display);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  font-weight:600;color:var(--ink);
  background:var(--cream);border:1px solid var(--gold-leaf);
  padding:6px 13px;border-radius:2px;box-shadow:0 2px 8px rgba(15,15,15,.2);
}
.home .story-kicker{
  font-family:var(--display);font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  font-weight:600;color:var(--desert-ochre);display:block;margin-bottom:14px;
}
.home .story-copy h2{
  font-family:var(--display);font-weight:600;letter-spacing:.01em;
  font-size:clamp(28px,3.8vw,44px);color:var(--ink);line-height:1.1;
}
.home .story-copy .sun-rule{ margin:20px 0 0; }
.home .story-copy p{
  font-size:17.5px;color:var(--ink-soft);line-height:1.72;margin-top:18px;max-width:54ch;
}
.home .story-actions{ margin-top:30px;display:flex;gap:14px;flex-wrap:wrap;align-items:center; }

/* ════════════════════════════════════════════════════════════════════
   7 · WAITLIST — FRAMED-POSTER card holding the REAL Klaviyo restore form
   ════════════════════════════════════════════════════════════════════ */
.home .waitlist{
  position:relative;text-align:center;
  background:var(--cream);
  padding:84px 24px 64px;
  border-top:1px solid rgba(15,15,15,.08);
}
.home .wl-card{
  position:relative;overflow:hidden;
  max-width:760px;margin:0 auto;
  padding:64px 40px 60px;
  border-radius:8px;
  background:
    radial-gradient(80% 120% at 50% 0%, rgba(18,89,141,.50), transparent 62%),
    linear-gradient(180deg, var(--ukiyo-indigo) 0%, #16284f 58%, #11203f 100%);
  border:1.5px solid var(--gold-leaf);
  box-shadow:
    0 0 0 1px rgba(15,15,15,.55),
    0 26px 60px rgba(15,15,15,.30),
    0 6px 24px rgba(195,155,60,.16);
}
.home .wl-card-sun{
  position:absolute;top:-58px;left:50%;transform:translateX(-50%);
  width:300px;height:300px;border-radius:50%;z-index:0;pointer-events:none;
  background:radial-gradient(circle, var(--gold-leaf-lt) 0%, var(--gold-leaf) 36%, rgba(195,155,60,0) 70%);
  opacity:.30;
}
.home .wl-card-ridge{
  position:absolute;left:0;right:0;bottom:0;width:100%;z-index:0;
  opacity:.55;pointer-events:none;
}
.home .wl-card > *{ position:relative;z-index:1; }
.home .wl-card .eyebrow{ color:var(--gold-leaf-lt);display:block;margin-bottom:14px; }
.home .wl-card h2{
  font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.03em;
  font-size:clamp(28px,4vw,46px);color:var(--cream);line-height:1.06;
  text-shadow:0 2px 22px rgba(0,0,0,.45);
}
.home .wl-card p{
  font-size:18px;color:var(--cream);opacity:.90;max-width:460px;margin:16px auto 0;line-height:1.55;
}
.home .wl-note{
  margin-top:18px;font-family:var(--sans);font-size:13px;letter-spacing:.01em;
  color:var(--cream);opacity:.80;font-weight:500;
}

/* The REAL Klaviyo restore form (#kl-restore-form, included inside the card)
   ships with dark inline styles meant for the supplements dark hero. Re-skin
   it to the v8 framed-card look: crisp cream/gold-bordered email field + the
   gold Join button, matching the prototype's .wl-form. Overrides the inline
   styles via higher specificity inside .home .wl-card. */
.home .wl-card #kl-restore-form{ margin:0; }
.home .wl-card #kl-restore-form .kl-form-inner{ margin:30px auto 0;max-width:480px; }
.home .wl-card #kl-form{
  display:flex;gap:12px;max-width:480px;margin:0 auto;flex-wrap:wrap;justify-content:center;
}
.home .wl-card #kl-form input#kl-email{
  flex:1;min-width:230px;
  background:var(--cream);
  border:2px solid var(--gold-leaf);
  color:var(--ink);
  padding:16px 18px;border-radius:2px;
  font-family:var(--sans);font-size:16px;font-weight:500;
  box-shadow:0 6px 22px rgba(0,0,0,.28);
}
.home .wl-card #kl-form input#kl-email::placeholder{ color:rgba(15,15,15,.55);font-weight:500; }
.home .wl-card #kl-form input#kl-email:focus{ outline:none;border-color:var(--gold-leaf-lt);box-shadow:0 0 0 3px rgba(224,192,105,.35); }
.home .wl-card #kl-form .submit-btn{
  font-family:var(--display);font-size:13px;letter-spacing:.12em;text-transform:uppercase;
  font-weight:600;color:var(--ink);background:var(--gold-leaf);
  padding:16px 32px;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;
}
.home .wl-card #kl-form .submit-btn:hover{ background:var(--gold-leaf-lt);transform:translateY(-2px);box-shadow:0 12px 38px rgba(15,15,15,.4); }
.home .wl-card #kl-msg{ color:var(--gold-leaf-lt); }
.home .wl-card #kl-err{ color:var(--cream); }

/* FDA disclaimer — clean full-width band on the cream ground */
.home .legal{
  background:var(--cream);
  padding:30px 24px 36px;
  border-top:1px solid rgba(15,15,15,.12);
}
.home .fda{
  font-family:var(--sans);font-size:12.5px;line-height:1.7;letter-spacing:.005em;
  color:var(--ink-soft);
  text-align:center;max-width:760px;margin:0 auto;
}

/* ════════════════════════════════════════════════════════════════════
   MOBILE PASS — verified at ~390px (ported from v8 @media blocks)
   ════════════════════════════════════════════════════════════════════ */
@media(max-width:768px){
  .home .hero{ padding:clamp(88px,12vh,116px) 22px 72px;min-height:100svh; }
  .home .hero-backdrop img{ object-position:50% 40%; }
  /* stronger, taller scrim on mobile — the title block extends past the portrait
     art's calm-sky band onto the snow-capped mountains, so cream type needs more
     darkening to stay legible (the art still reads through it). */
  .home .hero-scrim{
    background:
      linear-gradient(180deg, rgba(8,11,26,.66) 0%, rgba(8,11,26,.52) 30%, rgba(8,11,26,.34) 54%, rgba(8,11,26,.08) 74%),
      linear-gradient(0deg, rgba(8,11,26,.55) 0%, rgba(8,11,26,0) 20%);
  }
  .home .hero-wordmark{ font-size:clamp(60px,18vw,104px); }
  .home .hero h1{ font-size:clamp(17px,4.4vw,22px);line-height:1.5;max-width:94%; }
  .home .hero-actions{ margin-top:26px;gap:13px;width:100%; }
  .home .hero-actions .btn-gold{ width:100%;max-width:330px; }
  .home .hero-actions .btn-ghost{ width:100%;max-width:330px;text-align:center; }

  .home .five-grid{
    display:flex;gap:14px;
    overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    padding:4px 22px 14px;margin:0 -22px;
    scrollbar-width:none;
  }
  .home .five-grid::-webkit-scrollbar{ display:none; }
  .home .five-card{
    flex:0 0 64%;max-width:260px;scroll-snap-align:center;
  }
  .home .five-swipe-cue{
    display:block;text-align:center;margin-top:4px;
    font-family:var(--sans);font-size:12px;letter-spacing:.04em;font-weight:500;
    color:var(--ink-faint);
  }

  .home .drop{ padding:54px 22px 60px; }
  .home .drop-head{ margin-bottom:22px;gap:14px; }
  .home .drop-grid{
    display:flex;gap:14px;
    overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    padding:4px 22px 14px;margin:0 -22px;
    scrollbar-width:none;
  }
  .home .drop-grid::-webkit-scrollbar{ display:none; }
  .home .drop-card{
    flex:0 0 66%;max-width:280px;scroll-snap-align:center;
  }
  .home .drop-card-art .img-alt{ opacity:0; }
  .home .drop-swipe-cue{
    display:block;text-align:center;margin-top:4px;
    font-family:var(--sans);font-size:12px;letter-spacing:.04em;font-weight:500;
    color:var(--ink-faint);
  }

  .home .etym-grid{ grid-template-columns:1fr; }
  .home .etym-card{ min-height:0; }

  .home .pillars{ padding:64px 22px 70px; }
  .home .name-grid{ padding:70px 24px 74px; }
  .home .story{ padding:70px 22px 74px; }
  .home .waitlist{ padding:60px 16px 44px; }
  .home .wl-card{ padding:48px 22px 44px;border-radius:6px; }
  .home .legal{ padding:26px 22px 32px; }

  .home .name-actions .btn-gold,
  .home .name-actions .btn-ghost,
  .home .story-actions .btn-gold,
  .home .story-actions .btn-ghost-ink{ width:100%;text-align:center; }
  .home .wl-card #kl-form input#kl-email{ min-width:0; }
}
@media(max-width:600px){
  .home .etym-grid{ grid-template-columns:1fr; }
}