/* ═══════════════════════════════════════════════════════════════════════════
   STORKLIFE SKIN — theme layer for The Stork Life
   ---------------------------------------------------------------------------
   Loads AFTER assets/design.css AND the inline <style> of index.html (and,
   on sub-pages, after assets/legal.css). Re-declares visual tokens (colors,
   fonts, radii, shadows, motion) plus a small number of explicitly-requested
   structural additions (hero copy layer, 4-column footer, header
   transparent→solid scroll behaviour) — marked below where they depart from
   pure paint-only rules.
   Palette source: "Storklife Home" design (teal #17788C + amber #F59120 on
   ivory/mint by day, deep navy by night). Fonts unchanged from the prior
   Nandi skin — Philosopher (display) + Raleway (body) — kept per request.
   ═══════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Philosopher:ital,wght@0,400;0,700;1,400;1,700&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

/* ─────────────────────── TOKENS LIVE ELSEWHERE NOW ───────────────────────
   The day/night token blocks that used to sit here moved to
   assets/stork-theme.css, which is the single source of truth for the palette
   across the whole site (public pages, Know-Thyself tools and admin alike).
   They were duplicated in five stylesheets and had drifted apart.

   That file MUST be linked before this one on any page that loads this skin.
   Its selectors are (0,1,1) so it does not actually depend on order — but if
   it is missing entirely, every var() below falls back to the legacy :root in
   assets/design.css and the page renders in the dead Gradient-Noir palette.

   Everything from here down is component paint that consumes those tokens. */

/* ─────────── FONTS — force Storklife pair over every hardcoded family ───────────
   index.html's inline <style> and design.css hardcode 'Fraunces' and
   'Hanken Grotesk' in ~35 rules. Variables alone can't reach those, so we
   re-declare each hardcoded selector with the Storklife fonts. Same or higher
   specificity + later load order = the skin wins. .devanagari stays on
   Noto Serif Devanagari for Hindi glyphs. */

/* display serif → Philosopher */
.serif,.loader-mark,.home-tagline,.about-type,.tk-head,.testi-fb,
.ed-title,.ed-title.name,.h2,.stat .num,.num-plus,.subscribe-box h3,
.scheduler h3,.philo-quote,.philo-card h3,.book-cover .fallback,.poem-title,
.poem-quote,.poems-list-grid li a,.adv-philosophy,.summit-h,.quote-mark,
.quote-slide p,.tm-clk-v,.tm-desc,.paper-year,.ab-lead,.ab-stork h3,
.cform h3,.ct-card h3,.product-img .fallback,#mobnav .mob-cta,#mobnav button.mtab,
.home-intro-text,.hero-headline,.foot-brand-name,.foot-mantra{font-family:var(--font-display)}

/* body / UI sans → Raleway */
body,.tab-dd-item,.goog-te-combo,.tm-clk-l,.ticker-box .tk-sub{
  font-family:var(--font-body);
}

/* inline-styled headings inside the contact template */
.cform h3,.ct-card h3{font-family:var(--font-display)}

/* ─────────────────── PAINT-ONLY COMPONENT RULES ─────────────────── */
/* selection, focus, scrollbar — amber */
::selection{background:#F59120;color:#fff}
html[data-theme="day"] ::selection{background:#C2600A;color:#fff}
:focus-visible{outline:3px solid rgba(245,145,32,.85);outline-offset:3px;border-radius:4px;box-shadow:0 0 0 6px rgba(245,145,32,.15)}
html[data-theme="day"] :focus-visible{outline-color:rgba(194,96,10,.85);box-shadow:0 0 0 6px rgba(194,96,10,.15)}
::-webkit-scrollbar-thumb{background:#8F4700;background-clip:padding-box}
html[data-theme="day"] ::-webkit-scrollbar-thumb{background:#D98A3D;background-clip:padding-box}

/* buttons — Storklife pill shape, amber fill (fixes the leftover cyan
   gradient inherited from the older "Coral Reef Dawn" design.css) */
.btn{border-radius:9999px}
.btn-solid{background:var(--grad-cta);color:#fff}
.btn-solid:hover{background:linear-gradient(135deg,var(--accent-bright) 0%,var(--accent) 55%,var(--accent-deep) 100%);color:#fff}
.btn-solid,.book-free,.product-buy,.ktpay .close{box-shadow:0 12px 32px -14px rgba(245,145,32,.5),inset 0 1px 0 rgba(255,255,255,.4)}

/* curtain / loader — navy→teal→amber */
#curtain{background:linear-gradient(115deg,#0A121A 10%,#17788C 55%,#F59120 115%)}
html[data-theme="day"] #curtain{background:linear-gradient(115deg,#EDF8FB 10%,#8FD1DE 55%,#F59120 115%)}

/* ─────────── HERO — full-viewport, starfield + waves kept exactly ───────────
   Structural note: making the hero fill the viewport (rather than a fixed
   21:9 strip) is one of the explicitly-requested layout changes, so this
   section departs from paint-only rules for sizing/position. The rotating
   starfield, pulsing wave rings and the typed tagline are UNCHANGED motion —
   only their tint is nudged from amber to the new palette. */

.home-hero img{width:100%;height:100%;object-fit:cover;display:block;position:absolute;inset:0}

/* Sky wash. The hero photo (assets/hero-cosmic.jpg) is a NIGHT sky in both
   themes, so this veil stays dark in day mode too — a light veil would wash
   the stars out and leave the copy unreadable. */
.home-hero-overlay,
html[data-theme="day"] .home-hero-overlay{
  background:
    linear-gradient(180deg,rgba(4,6,16,.72) 0%,rgba(4,6,16,.30) 34%,rgba(4,8,20,.20) 62%,rgba(4,8,20,.55) 100%),
    radial-gradient(70% 90% at 50% 108%,rgba(245,145,32,.16),transparent 60%);
}

/* rotating starfield — 4 layers at 18s/22s/36s/40s, motion unchanged */
.starfield{
  position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;
  overflow:hidden;z-index:1;pointer-events:none;
}
.starfield > span{
  position:absolute;top:0;left:0;height:100%;width:100%;
  transform-origin:50% 50%;
  background-image:
    radial-gradient(2px 2px at 40px 60px,#cccccc,rgba(0,0,0,0)),
    radial-gradient(2px 2px at 20px 50px,#dddddd,rgba(0,0,0,0)),
    radial-gradient(2px 2px at 30px 100px,#eeeeee,rgba(0,0,0,0)),
    radial-gradient(2px 2px at 40px 60px,#ffffff,rgba(0,0,0,0)),
    radial-gradient(2px 2px at 110px 90px,#cccccc,rgba(0,0,0,0)),
    radial-gradient(2px 2px at 190px 150px,#dddddd,rgba(0,0,0,0));
  background-repeat:repeat;background-size:200px 200px;
  animation:starfieldRotate linear infinite;
}
.starfield > span:nth-child(1){animation-duration:18s}
.starfield > span:nth-child(2){animation-duration:22s}
.starfield > span:nth-child(3){animation-duration:36s}
.starfield > span:nth-child(4){animation-duration:40s}
@keyframes starfieldRotate{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

/* pulsing wave rings rising from the hero floor */
.hero-waves{
  position:absolute;left:50%;bottom:-120px;margin-left:-120px;
  width:240px;height:240px;z-index:1;pointer-events:none;
}
.hero-waves > span{
  position:absolute;left:0;top:0;width:240px;height:240px;border-radius:50%;
  background:rgba(0,0,0,.03);border:1px solid rgba(245,178,92,.6);
  transform:scale(.1,.1);opacity:0;
  animation:heroWave 3000ms ease-out infinite;
}
.hero-waves > span:nth-child(2){animation-delay:600ms}
.hero-waves > span:nth-child(3){animation-delay:1200ms}
@keyframes heroWave{
  0%{transform:scale(.1,.1);opacity:0}
  50%{opacity:.9}
  100%{transform:scale(1.15,1.15);opacity:0}
}

/* typed tagline on the hero — amber glow, always readable over the sky.
   Light in both themes: it sits on the night-sky photo, not on the page. */
.about-type,
html[data-theme="day"] .about-type{font-family:var(--font-display);font-weight:480;color:#FFF3DD;text-shadow:0 2px 24px rgba(4,6,16,.8),0 0 30px rgba(245,145,32,.35);background:linear-gradient(90deg,rgba(15,25,34,.55),rgba(15,25,34,.32) 55%,transparent)}

/* hero headline + subhead + CTA + scroll cue — new copy layer, hero content
   only (starfield/waves/typed-tag above are untouched siblings) */
.hero-copy{position:relative;z-index:3;max-width:900px;margin:0 auto;padding:9.5rem 2rem 2rem;text-align:center;display:flex;flex-direction:column;align-items:center;gap:1.5rem}
.hero-headline{font-weight:400;font-size:clamp(2.3rem,5.6vw,4.2rem);line-height:1.1;color:#fff;text-shadow:0 4px 40px rgba(0,0,0,.55)}
.hero-headline .accent{color:#F59120}
.hero-sub{font-family:var(--font-body);font-size:clamp(1rem,1.3vw,1.15rem);line-height:1.75;color:rgba(255,255,255,.86);max-width:56ch;font-weight:400}
.hero-cta-row{display:flex;flex-wrap:wrap;justify-content:center;gap:.9rem;margin-top:.3rem}
.hero-cta-row .btn-solid{box-shadow:0 10px 34px -10px rgba(245,145,32,.55)}
/* The cue's job is to say "there is more below the fold", so it has to BE
   above the fold. The hero can now exceed 100vh (it grows toward the hero
   photo's aspect ratio so the meditator's feet are not cropped — see the
   .home-hero clamp in index.html), and a flat bottom:2rem would have parked
   the cue off-screen. The max() keeps it 2rem above the fold whenever the hero
   is taller than the viewport, and collapses to a plain bottom:2rem when it
   is not. */
.hero-scroll-cue{position:absolute;left:50%;bottom:max(2rem, calc(100% - 100vh + 2rem));transform:translateX(-50%);z-index:3;color:rgba(255,255,255,.65);display:flex;animation:heroTwinkle 2.6s ease-in-out infinite}
@supports (height:100svh){
  .hero-scroll-cue{bottom:max(2rem, calc(100% - 100svh + 2rem))}
}
.hero-scroll-cue svg{width:26px;height:26px;display:block}
@keyframes heroTwinkle{0%,100%{opacity:.4}50%{opacity:.95}}
/* The hero copy stays light in day mode too — it sits over the night-sky
   photo, so ink-coloured text would be unreadable there. */
html[data-theme="day"] .hero-headline{color:#fff;text-shadow:0 4px 40px rgba(0,0,0,.55)}
html[data-theme="day"] .hero-headline .accent{color:#F59120}
html[data-theme="day"] .hero-sub{color:rgba(255,255,255,.86)}
html[data-theme="day"] .hero-scroll-cue{color:rgba(255,255,255,.65)}
@media(max-width:640px){.hero-copy{padding:7.5rem 1.2rem 1.4rem;gap:1.15rem}}

/* ─────────────────── PAGE BACKGROUND — clean, flat, no photo ───────────────────
   The design's page surface is a flat colour: deep navy (--page #0F1922) by
   night, white/mint (#FFFFFF / #EDF8FB) by day. design.css instead paints a
   nebula PHOTO (cosmos-bg.webp) + gold auroras at night and a cream gradient
   by day, neither of which is reachable through the token overrides above —
   both are explicit background shorthands. These rules replace them. */

/* night — flat navy with a barely-there depth fade, no photo, no aurora */
#cosmos-bg{
  background-image:none;
  background:linear-gradient(180deg,#0F1922 0%,#15202B 55%,#0A121A 100%);
}
#cosmos-bg::before,#cosmos-bg::after{background:none;animation:none;opacity:0}
/* canvas starfield — kept, but as a faint texture rather than a feature.
   (The hero's own rotating .starfield is untouched.) */
#bgfx{opacity:.18;filter:none}

/* day — white page, mint depth; overrides design.css §12's cream gradient */
html[data-theme="day"] body{
  background:
    radial-gradient(1000px 640px at 86% -12%,rgba(245,145,32,.07),transparent 60%),
    radial-gradient(880px 600px at -12% 32%,rgba(23,120,140,.07),transparent 58%),
    linear-gradient(180deg,#FFFFFF 0%,#F7FDFE 55%,#EDF8FB 100%);
  background-attachment:fixed;
}
html[data-theme="day"] #cosmos-bg{background:none;background-image:none}
html[data-theme="day"] #bgfx{display:none}

/* Home cards carry a hardcoded dark-navy gradient (rgba(13,18,28,.55)) from
   the night design; on the new white page that reads as mud. Repaint them as
   the design's white cards. Paint only — sizing/'grid' untouched. */
html[data-theme="day"] .home-meditator,
html[data-theme="day"] .ticker-box,
html[data-theme="day"] .time-module{
  background:linear-gradient(150deg,rgba(245,145,32,.05),#FFFFFF 60%);
  border-color:rgba(22,33,43,.10);
  box-shadow:0 16px 40px -28px rgba(22,33,43,.18);
}
html[data-theme="day"] .tm-clk,
html[data-theme="day"] .svc-pill{background:#F7FDFE}

/* admin wallpaper veil — night: navy like the page */
html[data-theme="night"] #wallpaper::after{background:linear-gradient(180deg,rgba(15,25,34,.34) 0%,rgba(15,25,34,.62) 55%,rgba(15,25,34,.86) 100%)}

/* social icon chips — amber hover */
.footer-social li a:hover,.social-icons a:hover{background:var(--accent);color:var(--gold-ink)}

/* ─────────────────── HEADER — transparent-over-hero → solid-on-scroll ───────────────────
   Structural note (explicitly requested): the header now starts transparent
   over the hero image and turns to a solid glass bar once scrolled (or on
   any view other than the hero), replacing the previous hide/reveal-on-
   scroll behaviour. Same logo, info and actions as before. */

#nav{
  top:0;left:0;transform:none;
  width:100%;
  border-radius:0;
  padding:.45rem 0;
  background:transparent;
  border-bottom:1px solid transparent;
  box-shadow:none;
  transition:background .35s ease,box-shadow .35s ease,border-color .35s ease,transform .35s var(--ease),backdrop-filter .35s ease;
}
#nav.nav-solid{
  background:rgba(15,25,34,.94);
  border-bottom-color:rgba(233,241,247,.10);
  box-shadow:0 8px 30px -10px rgba(0,0,0,.4);
  -webkit-backdrop-filter:blur(10px) saturate(1.15);
  backdrop-filter:blur(10px) saturate(1.15);
}
.nav-inner{max-width:1220px;margin:0 auto}
/* design.css §12 styles the day nav as an always-on porcelain bar via
   `html[data-theme="day"] #nav` — higher specificity than the `#nav` above,
   so it wins on load order alone. Match its specificity to keep the day
   header transparent over the hero, same as night. */
html[data-theme="day"] #nav{
  background:transparent;
  border:1px solid transparent;
  box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
html[data-theme="day"] #nav.nav-solid{
  background:rgba(255,255,255,.94);
  border-bottom-color:rgba(22,33,43,.08);
  box-shadow:0 8px 30px -10px rgba(22,33,43,.14);
}

/* brand — Philosopher (inherited), bright on night, ink on day. */
#nav .brand-name{color:#fff}
/* day: light while the bar is transparent over the night-sky hero, ink once
   it solidifies on scroll. */
html[data-theme="day"] #nav .brand-name{color:#fff}
html[data-theme="day"] #nav.nav-solid .brand-name{color:var(--text)}
.brand-logo{height:48px;width:auto}
@media(max-width:640px){.brand-logo{height:46px;width:auto}}

/* tabs — five tabs, each carrying its own accent: About amber, Philosophy
   teal, Science teal-bright, Blog mint, Shop light amber. Active tab fills
   with its accent. */
.tabs{
  max-width:none;
  justify-content:flex-end;
  gap:.6rem;
  margin:.08rem 0 0 auto;
  width:fit-content;
}
.tab{
  font-family:var(--font-body);
  --tc:#F59120;
  border-radius:100px;
  padding:.5rem 1.15rem;
  color:#fff;
  border:1px solid transparent;
  font-size:1.06rem;
  font-weight:600;
}
.tab .tab-icon{color:var(--tc);filter:drop-shadow(0 0 8px rgba(255,255,255,.28))}
.tab[data-view="profile"]{--tc:#F59120}
.tab[data-view="philosophy"]{--tc:#17788C}
.tab[data-view="science"]{--tc:#2AA3B1}
.tab[data-view="blog"]{--tc:#4FAE86}
.tab[data-view="shop"]{--tc:#FFB25C}

/* About sub-tabs — widened, spread across the row, each with its own
   theme highlight. General (amber) active by default. */
.about-subtabs{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  gap:.7rem;
  width:100%;
  margin:2rem 0;
  border-bottom:1px solid var(--line);
  padding-bottom:1rem;
}
.about-stab{
  --sc:#F59120;
  width:100%;
  font:600 1.02rem var(--font-body);
  color:var(--text-dim);
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
  padding:.85rem 1rem;
  border-radius:100px;
  cursor:pointer;
  text-align:center;
  transition:all .3s;
}
.about-stab[data-about-tab="general"]{--sc:#F59120}
.about-stab[data-about-tab="aviation"]{--sc:#17788C}
.about-stab[data-about-tab="adventure"]{--sc:#2AA3B1}
.about-stab[data-about-tab="music"]{--sc:#E0709A}
.about-stab[data-about-tab="books"]{--sc:#FFB25C}
.about-stab:hover{color:var(--sc);border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.07)}
.about-stab.active{color:#fff;background:var(--sc);border-color:var(--sc);box-shadow:0 12px 28px -14px var(--sc)}
html[data-theme="day"] .about-stab{color:var(--text-dim);background:rgba(255,255,255,.72);border-color:rgba(0,0,0,.1)}
html[data-theme="day"] .about-stab:hover{color:var(--sc);border-color:rgba(0,0,0,.2)}
html[data-theme="day"] .about-stab.active{color:#fff;background:var(--sc)}
.tab::after{display:none}
.tab:hover{color:var(--tc);background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16)}
.tab.active{background:var(--tc);color:#fff;border-color:var(--tc);box-shadow:0 10px 26px -12px var(--tc)}
html[data-theme="day"] .tab{color:#fff}
html[data-theme="day"] #nav.nav-solid .tab{color:var(--text-dim)}
html[data-theme="day"] .tab:hover{color:var(--tc);background:rgba(255,255,255,.72)}
html[data-theme="day"] .tab.active{background:var(--tc);color:#fff;box-shadow:0 10px 26px -12px var(--tc)}

/* About dropdown — navy glass at night */
.tab-dropdown-menu{background:rgba(15,25,34,.97);border-color:rgba(245,145,32,.22)}
.tab-dropdown-menu .tab-dd-item:hover{background:rgba(245,145,32,.12)}
html[data-theme="day"] .tab-dropdown-menu{background:rgba(255,255,255,.98);border-color:rgba(23,120,140,.3)}
html[data-theme="day"] .tab-dropdown-menu .tab-dd-item{color:var(--text-dim)}
html[data-theme="day"] .tab-dropdown-menu .tab-dd-item:hover{background:rgba(194,96,10,.08);color:var(--accent-deep)}

/* utility pills — white glass, amber ring; day: mint glass, teal ring */
.gt-wrap,.kt-nav-cta,.theme-toggle{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,178,92,.22);
}
html[data-theme="day"] .gt-wrap,html[data-theme="day"] .kt-nav-cta,html[data-theme="day"] .theme-toggle{
  background:rgba(255,255,255,.72);
  border-color:rgba(23,120,140,.24);
}

/* Know Thyself CTA — amber fill, white text */
.nav-utility .kt-nav-cta{
  background:var(--grad-cta);
  border-color:transparent;
  color:#fff;
  box-shadow:0 10px 18px -12px rgba(245,145,32,.55);
}
.nav-utility .kt-nav-cta:hover{border-color:transparent;color:#fff;background:linear-gradient(135deg,#FFCB85,#F59120 55%,#C2600A)}
html[data-theme="day"] .nav-utility .kt-nav-cta{
  background:var(--grad-cta);
  border-color:transparent;
  color:#fff;
}
html[data-theme="day"] .nav-utility .kt-nav-cta:hover{border-color:transparent;color:#fff}

/* cart — amber ring on hover, badge already amber */
.nav-utility .cart-btn{border-color:rgba(255,178,92,.22)}
html[data-theme="day"] .nav-utility .cart-btn{border-color:rgba(23,120,140,.24);background:rgba(255,255,255,.72)}

/* mobile sheet — navy at night, mint-white by day */
#mobnav{background:rgba(15,22,30,.98)}
html[data-theme="day"] #mobnav{background:rgba(255,255,255,.98)}
html[data-theme="day"] #mobnav button.mtab{color:var(--text-dim)}

/* wallpaper — light theme is a clean mint surface: never a photo */
html[data-theme="day"] #wallpaper{display:none!important}
html[data-theme="day"] #lakeside{display:none!important}

/* Know Thyself cards — shop-style: badge shows price + add-to-cart cue */
.kt-cta .kt-badge{font-size:.8rem}
.kt-cta .kt-badge.paid::after{content:" · add to cart";font-weight:500;font-size:.72em;opacity:.85}

/* ─────────────────── FOOTER — 4-column layout ───────────────────
   Structural note (explicitly requested): the previous footer was two rows
   (copyright + legal links). This replaces it with a brand+socials column
   plus three link columns and a bottom bar, matching the new design while
   keeping every existing link/target. Requires matching markup in
   index.html (id="site-footer" .foot-grid / .foot-brand / .foot-col /
   .foot-bottom). */
#site-footer{background:var(--bg-deep);border-top:1px solid var(--line-soft);padding:5.5rem 0 0}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:3rem;padding-bottom:4rem}
.foot-brand{display:flex;flex-direction:column;gap:1.3rem}
.foot-brand-top{display:flex;align-items:center;gap:.8rem}
.foot-logo{width:44px;height:44px;flex:0 0 44px;object-fit:contain;border-radius:50%}
.foot-brand-txt{display:flex;flex-direction:column;line-height:1.15}
.foot-brand-name{font-size:1.25rem;color:#fff}
.foot-brand-sub{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-top:.2rem}
.foot-desc{font-size:.95rem;line-height:1.75;color:rgba(255,255,255,.6);font-weight:300;max-width:34ch}
.foot-socials{margin-top:.2rem}
.foot-col{display:flex;flex-direction:column;gap:.9rem}
.foot-h{font-family:var(--font-body);font-size:1.02rem;font-weight:700;color:#fff;margin-bottom:.2rem}
.foot-col a{font-size:.92rem;color:rgba(255,255,255,.62);transition:color .25s}
.foot-col a:hover{color:var(--accent)}
.foot-bottom{border-top:1px solid rgba(255,255,255,.10);padding:1.6rem 0 2rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem}
.foot-bottom .foot-copy{font-size:.88rem;color:rgba(255,255,255,.5)}
.foot-bottom .foot-mantra{font-size:.95rem;color:var(--accent)}
html[data-theme="day"] #site-footer{background:#0F1922;border-top-color:rgba(255,255,255,.08)}
@media(max-width:900px){.foot-grid{grid-template-columns:1fr 1fr;gap:2.4rem 2rem}.foot-brand{grid-column:1/-1}}
@media(max-width:560px){.foot-grid{grid-template-columns:1fr;gap:2.2rem}}


/* ═══════════════════════════════════════════════════════════════════════════
   STORKTHEME PASS — 2026-08-04
   ---------------------------------------------------------------------------
   Source: StorkTheme.html (design-studio export; bundled artifact — the real
   page lives in its `__bundler/template` island, unpacked to inspect).
   The design is LIGHT-FIRST editorial: white / mint #EDF8FB alternating bands,
   ink #16212B headings with an amber highlight phrase, teal #17788C for every
   small text accent, flat amber #F59120 pills, 6px cards on near-invisible
   shadows, and black bands for the footer. Night keeps the design's own dark
   token set.
   PAINT ONLY — no section was reordered, added or removed (per request).
   Fonts stay Fraunces + Hanken Grotesk (per request); only scale/weight/colour
   are retuned to the design's rhythm.
   This block loads last, so equal-specificity rules here beat design.css §12.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────── 1 · TOKENS — MOVED ───────────
   This file used to declare the day/night palette TWICE: once near the top
   (the older Nandi set) and again here (the StorkTheme set). Both were
   html[data-theme=...] at (0,1,1), so the winner was decided purely by which
   came later in the file — and the two disagreed about --accent, --line and
   every shadow. That is precisely how the home page and the blog ended up
   rendering two different day accents at the same time.

   Both are now gone. The single palette lives in assets/stork-theme.css §1,
   which every page links. The values there are the ones that used to win
   here, so nothing about the rendering changed — only where you edit it.

   Note --accent-ink: in day it is teal, because amber #F59120 is a display
   colour that fails contrast as small text on white. Colouring text with
   var(--accent) in day is the single most common mistake in this codebase. */

/* day page surface — flat white settling into mint, per the design.
   (Overrides design.css §12's cream gradient, an explicit shorthand that
   the token swap above cannot reach.) */
html[data-theme="day"] body{
  background:linear-gradient(180deg,#FFFFFF 0%,#FFFFFF 62%,#F7FCFD 100%);
  background-attachment:fixed;
}

/* ─────────── 2 · HEADINGS — flat ink + amber highlight phrase ───────────
   design.css §12 fills day headings with a clipped ink GRADIENT
   (-webkit-text-fill-color:transparent). That swallows any coloured child
   span, so the design's signature amber second phrase could never show.
   Flatten it back to a plain colour. */
html[data-theme="day"] .h2,
html[data-theme="day"] .sec-title,
html[data-theme="day"] .ed-title,
html[data-theme="day"] h1,
html[data-theme="day"] h2{
  background:none;
  -webkit-background-clip:border-box;background-clip:border-box;
  -webkit-text-fill-color:currentColor;
  -webkit-text-stroke:0;
  color:var(--text);
  text-shadow:none;
}
.h2,.sec-title{
  font-size:clamp(1.9rem,3.6vw,2.85rem);
  line-height:1.16;
  font-weight:520;
  letter-spacing:-.005em;
}
/* the amber highlight phrase — `<span class="accent">` inside any heading */
.h2 .accent,.ed-title .accent,.sec-title .accent,
h1 .accent,h2 .accent,h3 .accent,
html[data-theme="day"] .h2 .accent,
html[data-theme="day"] .ed-title .accent,
html[data-theme="day"] h2 .accent{
  color:#F59120;-webkit-text-fill-color:#F59120;background:none;
}
/* section intro paragraph — 300-weight, generous leading, --body colour */
.h2 + p,.sec-title + p,.ed-subtitle,.lead{
  font-weight:300;line-height:1.8;color:var(--text-muted);
}
html[data-theme="day"] .ed-subtitle,html[data-theme="day"] .lead{font-weight:300}

/* ─────────── 3 · EYEBROW + LINKS — teal, the design's small-text accent ─────────── */
.eyebrow,#view-about .eyebrow{
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.24em;
  color:var(--accent-ink);
}
html[data-theme="day"] .eyebrow,
html[data-theme="day"] #view-about .eyebrow,
html[data-theme="day"] .foot-creed-label{color:#17788C}
.eyebrow::before,.eyebrow::after,
.home-lead .eyebrow::after,.home-meditator .eyebrow::after{background:currentColor;opacity:.55}

/* body links — teal, amber on hover (design a / a:hover) */
html[data-theme="day"] .post-body a,
html[data-theme="day"] .ed-subtitle a,
html[data-theme="day"] .book-link,
html[data-theme="day"] .read-arrow,
html[data-theme="day"] .pf-card .go,
html[data-theme="day"] .blog-card:hover .blog-card-title{color:#17788C}
html[data-theme="day"] .post-body a:hover,
html[data-theme="day"] .ed-subtitle a:hover,
html[data-theme="day"] .book-link:hover,
html[data-theme="day"] .read-arrow:hover{color:#F59120}
/* Numerals, prices and standing sub-heads sit on WHITE here, where amber is
   only ~2.3:1 — the design only ever puts amber text on black (the counters
   band) or at 32-50px display scale. So these take teal, which is the
   design's own small-accent colour and passes AA on white. */
html[data-theme="day"] .product-price,
html[data-theme="day"] .ktpay .price,
html[data-theme="day"] .stat .num,
html[data-theme="day"] .num-plus,
html[data-theme="day"] .summit-h,
html[data-theme="day"] .tm-clk-v,
html[data-theme="day"] .ticker-box .tk-head,
html[data-theme="day"] .home-tagline,
html[data-theme="day"] .svc-pill .pr,
html[data-theme="day"] .cal-detail .cd-stat{color:#17788C;-webkit-text-fill-color:#17788C}
/* amber stays where it has the contrast for it: the decorative title dot and
   the footer mantra, which sits on the black band. */
html[data-theme="day"] .ed-title .dot,
html[data-theme="day"] .foot-mantra{color:#F59120;-webkit-text-fill-color:#F59120}
/* design.css hardcodes #1A3630 on the landing statement — off-palette ink */
html[data-theme="day"] .home-intro-text,
html[data-theme="day"] .home-lead .home-intro-text{color:var(--text-muted)}
html[data-theme="day"] .home-intro-text p{color:inherit}

/* ─────────── 4 · BUTTONS — flat amber pill, teal secondary ─────────── */
.btn{
  font-size:.95rem;font-weight:500;
  padding:.95rem 2rem;border-radius:999px;
  letter-spacing:0;
}
.btn-solid,
html[data-theme="day"] .btn-solid,
html[data-theme="day"] .book-free{
  background:#F59120;color:#fff;border-color:transparent;text-shadow:none;
  box-shadow:0 6px 20px rgba(245,145,32,.35);
}
.btn-solid:hover,
html[data-theme="day"] .btn-solid:hover,
html[data-theme="day"] .book-free:hover{
  background:#E07C0A;color:#fff;
  transform:translateY(-1px);
  box-shadow:0 10px 28px rgba(245,145,32,.40);
}
.btn-ghost{border-color:var(--accent-ink);color:var(--accent-ink);background:none}
.btn-ghost:hover{background:var(--accent-ink);border-color:var(--accent-ink);color:#fff}
html[data-theme="day"] .btn-ghost{border-color:#17788C;color:#17788C}
html[data-theme="day"] .btn-ghost:hover{background:#17788C;color:#fff}
/* the design's teal action button (About "Know More") */
html[data-theme="day"] .product-buy,
html[data-theme="day"] .cal-day.sel,
html[data-theme="day"] .slot.sel{background:#F59120;color:#fff;border-color:transparent}

/* ─────────── 5 · CARDS — white, 6px, near-invisible shadow, lift on hover ───────────
   design: background var(--surface); border-radius 6px;
   box-shadow 0 2px 18px rgba(22,33,43,.06); hover translateY(-6px) +
   0 20px 44px rgba(22,33,43,.13). No borders — the shadow does the work. */
html[data-theme="day"] .home-meditator,
html[data-theme="day"] .ticker-box,
html[data-theme="day"] .time-module,
html[data-theme="day"] .quote-band,
html[data-theme="day"] .flash-box,
html[data-theme="day"] .shop-featured,
html[data-theme="day"] .ab-stork,
html[data-theme="day"] .scheduler,
html[data-theme="day"] .cform,
html[data-theme="day"] .para,
html[data-theme="day"] .summit,
html[data-theme="day"] .feat-video,
html[data-theme="day"] .blog-feature,
html[data-theme="day"] .home-intro-text,
html[data-theme="day"] .home-lead .home-intro-text,
html[data-theme="day"] .pillar,
html[data-theme="day"] .book,
html[data-theme="day"] .blog-card,
html[data-theme="day"] .product,
html[data-theme="day"] .trek,
html[data-theme="day"] .song,
html[data-theme="day"] .paper,
html[data-theme="day"] .pf-card,
html[data-theme="day"] .philo-card,
html[data-theme="day"] .testi-card,
html[data-theme="day"] .cert-card,
html[data-theme="day"] .kt-cta,
html[data-theme="day"] .paper-prev,
html[data-theme="day"] .ach,
html[data-theme="day"] .stat,
html[data-theme="day"] .poem-book,
html[data-theme="day"] .co-card,
html[data-theme="day"] .pc-item,
html[data-theme="day"] .pc-signin,
html[data-theme="day"] .cal-detail,
html[data-theme="day"] .li-card{
  background:#FFFFFF;
  border:1px solid transparent;
  border-radius:6px;
  box-shadow:0 2px 18px var(--sl-shadow);
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
html[data-theme="day"] .pillar:hover,
html[data-theme="day"] .book:hover,
html[data-theme="day"] .blog-card:hover,
html[data-theme="day"] .product:hover,
html[data-theme="day"] .trek:hover,
html[data-theme="day"] .song:hover,
html[data-theme="day"] .paper:hover,
html[data-theme="day"] .pf-card:hover,
html[data-theme="day"] .philo-card:hover,
html[data-theme="day"] .kt-cta:hover,
html[data-theme="day"] .li-card:hover,
html[data-theme="day"] .stat:hover{
  background:#FFFFFF;
  transform:translateY(-6px);
  box-shadow:0 20px 44px var(--sl-shadow-hover);
  border-color:transparent;
}
/* the pointer-tracking radial glow reads as a smudge on white paper */
html[data-theme="day"] .pillar::before,
html[data-theme="day"] .book::before,
html[data-theme="day"] .blog-card::before,
html[data-theme="day"] .product::before{opacity:0}
/* inner chips inside those cards — the design's --deco wash */
html[data-theme="day"] .tm-clk,
html[data-theme="day"] .tm-row,
html[data-theme="day"] .svc-pill,
html[data-theme="day"] .slot,
html[data-theme="day"] .cred,
html[data-theme="day"] .ct-amt,
html[data-theme="day"] .ps-btn,
html[data-theme="day"] .read-btn,
html[data-theme="day"] .cart-qty button{background:#F4F7F8;border-color:rgba(22,33,43,.08)}
html[data-theme="day"] .tm-row{border-left-color:#F59120}
html[data-theme="day"] .home-meditator h3{color:var(--text)}
html[data-theme="day"] .quote-mark{color:rgba(23,120,140,.22)}
html[data-theme="day"] .quote-dots button{background:rgba(22,33,43,.18)}
html[data-theme="day"] .quote-dots button.on{background:#F59120}
/* inputs — white field, hairline rule, amber focus */
html[data-theme="day"] .sub-row input,
html[data-theme="day"] .fg input,
html[data-theme="day"] .fg textarea,
html[data-theme="day"] .fg select,
html[data-theme="day"] .pc-form textarea,
html[data-theme="day"] .co-card input,
html[data-theme="day"] .co-card textarea,
html[data-theme="day"] .ct-card input{
  background:#FFFFFF;border-color:rgba(22,33,43,.16);color:var(--text);border-radius:999px;
}
html[data-theme="day"] .fg textarea,
html[data-theme="day"] .pc-form textarea,
html[data-theme="day"] .co-card textarea{border-radius:10px}
html[data-theme="day"] .sub-row input::placeholder{color:#8296A6}

/* ─────────── 6 · SECTION BANDS — the design's white / mint rhythm ───────────
   The design alternates full-bleed --page and --page-alt bands. The home
   blocks live inside `.wrap` (max-width 1240 + 2.5rem gutters), so the band
   is painted past the gutter with a spread box-shadow and clipped back to the
   viewport. No markup moved; only the backdrop behind existing blocks. */
.sl-band,
#view-about > .wrap > .home-time-ticker,
#view-about > .wrap > #faq-home{
  position:relative;
  background:var(--page-alt);
  box-shadow:0 0 0 100vmax var(--page-alt);
  clip-path:inset(0 -100vmax);
  padding-top:clamp(3rem,6vw,5rem);
  padding-bottom:clamp(3rem,6vw,5rem);
  margin-top:clamp(3rem,6vw,5rem);
  margin-bottom:clamp(3rem,6vw,5rem);
}
/* the FAQ band already carries .section-pad; don't double its padding */
#view-about > .wrap > #faq-home.section-pad{padding-top:clamp(3rem,6vw,5rem)}

/* Join the Circle — the design's dark photo band, full-bleed.
   Same hero sky, heavily scrimmed, white copy, amber submit. */
#view-about > .wrap > .subscribe-box{
  position:relative;
  border:0;
  border-radius:0;
  text-align:center;
  /* A true full-bleed box, not the spread-shadow trick the flat bands use:
     a box-shadow can only carry a colour, and this band needs the hero photo
     to run edge to edge. body already has overflow-x:hidden, so the 100vw
     escape cannot introduce a horizontal scrollbar. */
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  margin-top:clamp(3.5rem,7vw,6rem);
  padding:clamp(3.5rem,7vw,6rem) max(1.5rem,calc(50vw - 590px));
  box-shadow:none;
  clip-path:none;
  background:
    linear-gradient(180deg,rgba(4,7,15,.86) 0%,rgba(4,7,15,.74) 100%),
    url("hero-cosmic.jpg?v=1") center 22%/cover no-repeat,
    #04070f;
}
html[data-theme="day"] #view-about > .wrap > .subscribe-box{
  background:
    linear-gradient(180deg,rgba(4,7,15,.86) 0%,rgba(4,7,15,.74) 100%),
    url("hero-cosmic.jpg?v=1") center 22%/cover no-repeat,
    #04070f;
  border-color:transparent;
  box-shadow:none;
}
#view-about > .wrap > .subscribe-box .eyebrow,
html[data-theme="day"] #view-about > .wrap > .subscribe-box .eyebrow{color:#F59120;justify-content:center}
#view-about > .wrap > .subscribe-box h3,
html[data-theme="day"] #view-about > .wrap > .subscribe-box h3{
  color:#fff;-webkit-text-fill-color:#fff;background:none;
  font-size:clamp(1.8rem,3.6vw,2.7rem);line-height:1.16;
}
#view-about > .wrap > .subscribe-box p,
html[data-theme="day"] #view-about > .wrap > .subscribe-box p{
  color:rgba(255,255,255,.76);font-weight:300;max-width:56ch;margin-left:auto;margin-right:auto;
}
#view-about > .wrap > .subscribe-box .sub-row{max-width:540px;margin-left:auto;margin-right:auto}
#view-about > .wrap > .subscribe-box .sub-row input,
html[data-theme="day"] #view-about > .wrap > .subscribe-box .sub-row input{
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.24);color:#fff;border-radius:999px;
}
#view-about > .wrap > .subscribe-box .sub-row input::placeholder,
html[data-theme="day"] #view-about > .wrap > .subscribe-box .sub-row input::placeholder{color:rgba(255,255,255,.55)}
#view-about > .wrap > .subscribe-box .subscribe-socials{justify-content:center}
#view-about > .wrap > .subscribe-box .subscribe-socials a,
html[data-theme="day"] #view-about > .wrap > .subscribe-box .subscribe-socials a{
  border:1px solid rgba(255,255,255,.20);color:rgba(255,255,255,.72);background:none;box-shadow:none;
}
#view-about > .wrap > .subscribe-box .subscribe-socials a:hover,
html[data-theme="day"] #view-about > .wrap > .subscribe-box .subscribe-socials a:hover{
  background:#F59120;border-color:#F59120;color:#fff;
}

/* design.css §12 feathers an ivory "calm zone" (rgba(244,241,233,.82)) behind
   the landing statement — a leftover from the cream page. On the design's
   white page it reads as a beige stain across the whole first screen. */
html[data-theme="day"] .home-lead{background:none}

/* Community Creed — a quiet rule-bounded stanza between the bands */
html[data-theme="day"] .home-creed{border-color:rgba(22,33,43,.10)}
html[data-theme="day"] .foot-creed{color:var(--text-muted);font-weight:300}

/* FAQ — hairline rules, ink questions, amber plus */
html[data-theme="day"] .faq-item{border-bottom-color:rgba(22,33,43,.10)}
html[data-theme="day"] .faq-q{color:var(--text);font-weight:500}
html[data-theme="day"] .faq-q .plus{color:#F59120}
html[data-theme="day"] .faq-a{color:var(--text-muted);font-weight:300}

/* ─────────── 7 · HEADER — transparent over the hero, dark glass on scroll ───────────
   The design solidifies the bar to rgba(8,10,18,.94) in BOTH themes: the hero
   behind it is a night sky, and on the light page a dark bar is the design's
   anchor. So day no longer flips to a porcelain bar and the nav text stays
   light throughout — which also removes the old day/solid contrast problem. */
html[data-theme="day"] #nav,
html[data-theme="day"] #nav.solid{
  background:transparent;
  border:1px solid transparent;
  box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
#nav.nav-solid,
html[data-theme="day"] #nav.nav-solid{
  background:rgba(8,10,18,.94);
  border-bottom:1px solid rgba(255,255,255,.09);
  box-shadow:0 8px 30px rgba(0,0,0,.30);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
html[data-theme="day"] #nav .brand-name,
html[data-theme="day"] #nav.nav-solid .brand-name{color:#fff;-webkit-text-fill-color:#fff;background:none}
html[data-theme="day"] .tab,
html[data-theme="day"] #nav.nav-solid .tab{color:rgba(255,255,255,.88)}
html[data-theme="day"] .tab:hover{color:var(--tc);background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16)}
html[data-theme="day"] .tab.active{background:var(--tc);color:#fff;border-color:var(--tc)}
/* THE HEADER IS DARK IN BOTH THEMES — it sits on the night-sky hero photo, so
   its controls are painted light-on-dark even in day. Everything in this list
   is therefore deliberately white; do not "fix" it to var(--text).

   .sa-chip was missing from this list, and that was a real bug rather than an
   oversight of taste: the account chip and the ⚙ Admin pill are injected by
   assets/auth.js AFTER the CSS was written, so they kept .sa-chip's default
   color:var(--text) — which in day is the dark ink #16212B. Dark ink on a dark
   starfield is invisible, and the reported symptom was exactly that: signed in
   as an admin, the Admin pill simply could not be seen in day mode while every
   hand-written pill beside it was perfectly legible.

   :not(.sa-chip-cta) matters — the logged-OUT "Log in / Join" chip is an amber
   CTA whose fill and --gold-ink text must survive this rule. */
html[data-theme="day"] .gt-wrap,
html[data-theme="day"] .kt-nav-cta,
html[data-theme="day"] .theme-toggle,
html[data-theme="day"] .nav-utility .cart-btn,
html[data-theme="day"] .nav-utility .sa-chip:not(.sa-chip-cta),
html[data-theme="day"] #admin-nav-pill{
  background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.22);color:#fff;
}
/* Night keeps its own token-driven chrome; only the dark-ink-in-day case above
   needed correcting. The hover states stay amber in both themes. */
html[data-theme="day"] .nav-utility .sa-chip:not(.sa-chip-cta):hover,
html[data-theme="day"] #admin-nav-pill:hover{
  border-color:rgba(245,145,32,.55);color:#FFB25C;
}
html[data-theme="day"] .goog-te-combo{color:transparent}
html[data-theme="day"] .hamburger span{background:#fff}
/* Know Thyself pill keeps its amber fill in both themes */
html[data-theme="day"] .nav-utility .kt-nav-cta{background:#F59120;border-color:transparent;color:#fff}
html[data-theme="day"] .nav-utility .kt-nav-cta:hover{background:#E07C0A;color:#fff}

/* ─────────── 8 · CHROME — selection, focus, scrollbar, fabs, loader ─────────── */
html[data-theme="day"] ::selection{background:#F59120;color:#fff}
html[data-theme="day"] :focus-visible{outline:2px solid #F59120;outline-offset:3px;box-shadow:none;border-radius:4px}
html[data-theme="day"] ::-webkit-scrollbar-track{background:#F4F7F8}
html[data-theme="day"] ::-webkit-scrollbar-thumb{background:#C7D5DD;background-clip:padding-box}
html[data-theme="day"] ::-webkit-scrollbar-thumb:hover{background:#F59120;background-clip:padding-box}
html[data-theme="day"] #wa-fab{background:#25D366;color:#fff}
html[data-theme="day"] #loader{background:#FFFFFF}
html[data-theme="day"] .loader-bar{background:rgba(22,33,43,.12)}
html[data-theme="day"] .loader-mark{color:var(--text);-webkit-text-fill-color:var(--text);background:none}
html[data-theme="day"] .loader-sub{color:#17788C}
html[data-theme="day"] #curtain{background:linear-gradient(115deg,#EDF8FB 10%,#17788C 62%,#F59120 115%)}
html[data-theme="day"] .contact-strip{border-top-color:rgba(22,33,43,.10)}
html[data-theme="day"] #mobnav{background:rgba(255,255,255,.98)}
html[data-theme="day"] #mobnav button.mtab{color:var(--text-muted)}
html[data-theme="day"] #mobnav button.mtab:hover{color:#17788C}
html[data-theme="day"] #mobnav .mob-cta{border-color:#F59120;color:#F59120}
html[data-theme="day"] #cart-drawer{background:#FFFFFF;border-left-color:rgba(22,33,43,.12)}
html[data-theme="day"] .ktpay{background:#FFFFFF;border-color:rgba(22,33,43,.12)}
html[data-theme="day"] .ct-card{background:#FFFFFF;border-color:rgba(22,33,43,.12)}
/* Legal / policy pages (assets/legal.css). That file styles links as
   `a{color:var(--accent-2)}`, and this skin loads after it — so its own day
   tokens lose and links would inherit the amber highlight tint. Name the
   colours here instead: teal links, amber for the decorative numerals and
   the active tab, which have the size or the fill to carry it. */
html[data-theme="day"] .legal a,
html[data-theme="day"] .legal-foot a,
html[data-theme="day"] body #legal-nav .legal-tabs a:hover{color:#17788C}
html[data-theme="day"] .legal a:hover{color:#F59120}
html[data-theme="day"] .legal h2 .num{color:#F59120}
html[data-theme="day"] body #legal-nav .legal-tabs a.active{background:#F59120;color:#fff}
html[data-theme="day"] .callout{background:#FFFFFF;border-left-color:#F59120}

/* 404 — its secondary button is inline-styled `color:var(--accent)`; teal it,
   same reason as the blog chips below. */
html[data-theme="day"] .nf a.ghost{color:#17788C;border-color:rgba(23,120,140,.30)}
html[data-theme="day"] .nf a.ghost:hover{color:#F59120;border-color:#F59120}

/* Blog index + the 43 static post pages. Their tag chips and the "read in
   the interactive site" pill are styled inline, AFTER this file, as
   `.bp-tags span{color:var(--accent)}` — so they need a higher-specificity
   rule rather than load order. 11.5px amber on white is ~2.3:1; teal it is.
   Night keeps the amber, which has plenty of contrast on navy. */
html[data-theme="day"] .bp-tags span,
html[data-theme="day"] .bp-interactive{color:#17788C;border-color:rgba(23,120,140,.30)}
html[data-theme="day"] .bp-interactive:hover{border-color:#F59120;color:#F59120}

/* tag / topic chips — teal family instead of the old per-section hues */
html[data-theme="day"] .trek-badge{background:#FFFFFF;border-color:rgba(23,120,140,.45);color:#17788C}
html[data-theme="day"] .trek-tags span,
html[data-theme="day"] .para-levels span{color:#17788C;background:rgba(23,120,140,.07);border-color:rgba(23,120,140,.25)}
html[data-theme="day"] .paper-topic{color:#17788C;border-color:rgba(23,120,140,.30)}
html[data-theme="day"] .vid-play{background:rgba(245,145,32,.94)}

/* ─────────── 9 · RESPONSIVE — bands collapse their gutter on phones ─────────── */
@media(max-width:640px){
  .sl-band,
  #view-about > .wrap > .home-time-ticker,
  #view-about > .wrap > #faq-home{
    padding-top:2.4rem;padding-bottom:2.4rem;margin-top:2.4rem;margin-bottom:2.4rem;
  }
  #view-about > .wrap > .subscribe-box{padding:2.8rem 1.2rem;margin-top:2.8rem}
  .btn{font-size:.9rem;padding:.85rem 1.6rem}
}

/* ══════════════════════════════════════════════════════════════════════════
   STORKTHEME PASS 2 — 2026-08-04
   Header collapsed to the design's single row, the design's "Enter the
   Library" CTA band, and the Blog → Library rename.
   ══════════════════════════════════════════════════════════════════════════ */

/* ─────────── 10 · HEADER — one row: brand · nav · actions ───────────
   The design's bar is a single 78px flex row. Our markup used to stack a
   brand/utility row above a tabs row; #tabs now lives inside .nav-top and the
   two `margin-left:auto` hinges push the nav and the actions to the right.
   The Know Thyself pill was removed from the markup entirely — the tool is
   still reachable from the Shop view and the footer's "The Circle" column. */
#nav{padding:0}
.nav-inner{max-width:1300px;padding:0 2rem}
.nav-top{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:1.6rem;
  width:100%;
  min-height:74px;
}
.brand{flex-shrink:0}
.brand-logo{height:46px;width:auto}
.tabs{
  margin:0 0 0 auto;
  gap:1.45rem;
  width:auto;
  max-width:none;
  flex-wrap:nowrap;
  justify-content:flex-end;
}
.nav-utility{margin-left:auto;gap:.7rem;flex-shrink:0}

/* nav links — the design uses plain text, not pills; the amber underline
   carries the "which view am I in" state the pills used to carry. */
#nav .tab{
  background:none;
  border:0;
  border-radius:0;
  box-shadow:none;
  padding:.45rem 0;
  font-size:1.02rem;
  font-weight:500;
  color:rgba(255,255,255,.88);
  white-space:nowrap;
}
#nav .tab .tab-icon{font-size:.95rem;opacity:.92}
#nav .tab::after{
  display:block;content:"";position:absolute;
  left:0;right:0;bottom:0;height:2px;
  background:#F59120;border-radius:2px;
  transform:scaleX(0);transform-origin:left center;
  transition:transform .28s var(--ease,cubic-bezier(.4,0,.2,1));
}
#nav .tab:hover,
html[data-theme="day"] #nav .tab:hover,
html[data-theme="day"] #nav.nav-solid .tab:hover{background:none;border-color:transparent;color:#F59120}
#nav .tab.active,
html[data-theme="day"] #nav .tab.active,
html[data-theme="day"] #nav.nav-solid .tab.active{
  background:none;border-color:transparent;box-shadow:none;color:#F59120;
}
#nav .tab.active::after,
#nav .tab:hover::after{transform:scaleX(1)}
html[data-theme="day"] #nav .tab,
html[data-theme="day"] #nav.nav-solid .tab{color:rgba(255,255,255,.88)}

/* utility pills — the design keeps them small and even; the old symmetric
   130px minimum was sized for a four-pill row that no longer exists. */
@media(min-width:861px){
  .nav-utility .gt-wrap,
  .nav-utility .sa-chip{height:38px;min-width:0;padding:0 1rem}
  .nav-utility .sa-chip.sa-chip-cta{padding:0 1.35rem}
  .nav-utility .cart-btn{height:38px;width:38px;min-width:38px}
  .theme-toggle{width:38px;height:38px}
}

/* one row has to survive the mid widths: shrink the type before the tabs
   give way to the hamburger at 860. */
@media(max-width:1180px){
  .nav-inner{padding:0 1.4rem}
  .nav-top{gap:1.1rem}
  .tabs{gap:1rem}
  #nav .tab{font-size:.96rem}
  .brand-name{font-size:1.55rem}
}
@media(max-width:1024px){
  .tabs{gap:.75rem}
  #nav .tab{font-size:.9rem}
  #nav .tab .tab-icon{display:none}
  .nav-utility{gap:.5rem}
  .brand-name{font-size:1.34rem}
  /* Language collapses to its globe glyph; the select keeps its hit area. */
  .nav-utility .gt-wrap{padding:0 .5rem}
  .nav-utility .gt-wrap .goog-te-combo{max-width:24px;width:24px;font-size:0;color:transparent}
  .nav-utility .sa-chip.sa-chip-cta{padding:0 .9rem;font-size:.85rem}
}
@media(max-width:860px){
  /* index.html blows the logo up to 89px here for the old stacked header —
     the single row wants the same 46px mark as the desktop bar. */
  .brand-logo{height:44px;width:auto}
  .nav-top{min-height:64px;gap:.6rem}
  .nav-inner{padding:0 1rem}
  /* design.css §13 floats the phone nav as a rounded pill and pushes the hero
     down 6rem to clear it. StorkTheme's bar is full-bleed over the hero at
     every width — and it has to be, because §7 paints the header chrome white:
     on that white strip the cart, language and hamburger were invisible. */
  #nav{top:0;width:100%;border-radius:0;padding:0}
  .home-hero{margin-top:0}
}

/* ─────────── 11 · ENTER THE LIBRARY — the design's post-hero CTA band ─────────── */
.library-cta-band{
  display:flex;
  justify-content:center;
  padding:clamp(2.6rem,5vw,3.75rem) 1.5rem;
  background:var(--bg);
}
.library-cta-band .btn.library-cta{
  display:inline-flex;
  align-items:center;
  gap:.7rem;
  font-size:1.03rem;
  padding:1.05rem 2.25rem;
  box-shadow:0 10px 34px rgba(245,145,32,.30);
}
.library-cta-band .btn.library-cta:hover{transform:translateY(-2px)}
.library-cta .lc-arrow{font-size:1.05em;line-height:1;transition:transform .2s ease}
.library-cta:hover .lc-arrow{transform:translateX(3px)}
@media(max-width:640px){
  .library-cta-band{padding:2.2rem 1.2rem}
  .library-cta-band .btn.library-cta{font-size:.95rem;padding:.95rem 1.7rem}
}