/* ============================================================
   Brave Intentions — Cinematic Site
   Tokens are the design system's; components rebuilt in vanilla CSS
   to stay faithful while remaining portable (Netlify → Divi Code module).
   ============================================================ */

/* ---------- Fonts: loaded via <link> in index.html head ---------- */

/* ---------- Tokens ---------- */
:root {
  /* palette */
  --bi-terracotta:#C4826A; --bi-coral:#D4998A; --bi-blush:#F4E6E1; --bi-cream:#FAF8F6;
  --bi-espresso:#2C2826; --bi-brown:#6B5E58; --bi-stone:#9A8D88; --bi-linen:#E8DDD8;
  --bi-forest:#3D6B5E; --bi-white:#FFFFFF;
  --bi-terracotta-deep:#A86A52; --bi-coral-soft:#E9C7BB; --bi-blush-deep:#EAD4CB;
  --bi-cream-warm:#F6EEE9; --bi-forest-soft:#E2EAE6; --bi-gold:#C9A24B;
  /* deeper cosmic tints for cinematic dark scenes */
  --bi-night:#211C1A; --bi-night-2:#2C2826; --bi-ember:#7A4636;

  /* semantic */
  --surface-page:var(--bi-cream); --surface-card:var(--bi-white); --surface-blush:var(--bi-blush);
  --surface-feature:var(--bi-terracotta); --surface-inverse:var(--bi-espresso);
  --text-heading:var(--bi-espresso); --text-body:var(--bi-brown); --text-muted:var(--bi-stone);
  --text-on-dark:var(--bi-cream); --text-accent:var(--bi-terracotta); --text-link:var(--bi-forest);
  --border-subtle:var(--bi-linen); --divider:var(--bi-linen);
  --action-primary-bg:var(--bi-espresso); --action-primary-text:var(--bi-cream);
  --action-cta-bg:var(--bi-terracotta); --action-cta-bg-hover:var(--bi-coral); --action-cta-text:var(--bi-cream);
  --action-go-bg:var(--bi-forest); --action-go-text:var(--bi-white);

  /* type */
  --font-serif:'Playfair Display',Georgia,serif;
  --font-sans:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-script:'Cormorant Garamond',Georgia,serif;
  --weight-regular:400; --weight-medium:500;

  /* spacing & radii */
  --gutter:24px; --container-max:1100px;
  --radius-input:8px; --radius-card:14px; --radius-card-lg:16px; --radius-pill:24px; --radius-full:999px;

  /* effects */
  --shadow-sm:0 2px 8px rgba(44,40,38,.06); --shadow-md:0 8px 24px rgba(44,40,38,.08);
  --shadow-lg:0 18px 48px rgba(44,40,38,.10); --shadow-card:0 10px 30px rgba(166,106,82,.12);
  --gradient-terracotta:linear-gradient(135deg,#C4826A 0%,#B5755D 100%);
  --gradient-warm-fade:linear-gradient(180deg,#FAF8F6 0%,#F4E6E1 100%);
  --ease-soft:cubic-bezier(.22,.61,.36,1); --ease-inout:cubic-bezier(.45,0,.25,1);
  --dur-fast:140ms; --dur-base:240ms; --dur-slow:420ms;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; font-family:var(--font-sans); font-weight:var(--weight-regular);
  font-size:17px; line-height:1.7; color:var(--text-body); background:var(--surface-page);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden;
}
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-serif); font-weight:var(--weight-medium); color:var(--text-heading);
  line-height:1.2; letter-spacing:-.01em; margin:0 0 .5em;
}
h1{font-size:clamp(40px,6vw,58px);} h2{font-size:clamp(30px,4vw,38px);}
h3{font-size:24px; letter-spacing:0;}
p{margin:0 0 1em;} p:last-child{margin-bottom:0;}
a{color:var(--text-link); text-decoration:none; transition:color var(--dur-fast) var(--ease-soft);}
a:hover{color:var(--bi-terracotta);}
strong{font-weight:var(--weight-medium);}
img{max-width:100%; display:block;}
::selection{background:var(--bi-blush); color:var(--bi-espresso);}
:focus-visible{outline:none; box-shadow:0 0 0 3px rgba(196,130,106,.28); border-radius:6px;}

/* ---------- Helpers ---------- */
.container{width:100%; max-width:var(--container-max); margin-inline:auto; padding-inline:var(--gutter);}
.container-wide{max-width:1240px;}
.eyebrow{font-family:var(--font-sans); font-size:12px; font-weight:500; letter-spacing:.08em;
  text-transform:uppercase; color:var(--text-muted); display:inline-block; margin:0 0 14px;}
.eyebrow.on-feature{color:rgba(250,248,246,.82);}
.script{font-family:var(--font-script); font-style:italic; color:var(--text-accent); font-weight:500;
  font-size:21px; letter-spacing:.01em; line-height:1.2;}
.lead{font-size:20px; line-height:1.7;}
.muted{color:var(--text-muted);}
.center{text-align:center;}
.times{font-family:var(--font-serif);}

/* section rhythm */
.section{padding-block:96px;}
@media(max-width:720px){.section{padding-block:64px;}}

/* ---------- Buttons (DS Button) ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-sans); font-weight:500; letter-spacing:.04em; text-transform:uppercase;
  border-radius:var(--radius-pill); cursor:pointer; line-height:1; white-space:nowrap;
  padding:13px 28px; font-size:14px; border:1.5px solid transparent;
  transition:background var(--dur-base) var(--ease-soft),color var(--dur-base) var(--ease-soft),
    transform var(--dur-fast) var(--ease-soft),box-shadow var(--dur-base) var(--ease-soft);}
.btn:active{transform:scale(.98);}
.btn-sm{padding:9px 18px; font-size:13px;}
.btn-lg{padding:16px 36px; font-size:15px;}
.btn-primary{background:var(--action-primary-bg); color:var(--action-primary-text); border-color:var(--action-primary-bg);}
.btn-primary:hover{background:#3c3633; color:var(--bi-cream); box-shadow:var(--shadow-md);}
.btn-secondary{background:transparent; color:var(--bi-espresso); border-color:var(--bi-espresso);}
.btn-secondary:hover{background:var(--bi-espresso); color:var(--bi-cream);}
.btn-secondary.on-dark{color:var(--bi-cream); border-color:rgba(250,248,246,.7);}
.btn-secondary.on-dark:hover{background:var(--bi-cream); color:var(--bi-espresso);}
.btn-cta{background:var(--action-cta-bg); color:var(--action-cta-text); border-color:var(--action-cta-bg);}
.btn-cta:hover{background:var(--action-cta-bg-hover); border-color:var(--action-cta-bg-hover); box-shadow:var(--shadow-card);}
.btn-action{background:var(--action-go-bg); color:var(--action-go-text); border-color:var(--action-go-bg);}
.btn-action:hover{background:#34614f; box-shadow:var(--shadow-md);}
.btn-ghost{background:transparent; color:var(--bi-terracotta); border-color:transparent;}
.btn-ghost:hover{color:var(--bi-terracotta-deep);}
.btn-full{width:100%;}

/* ---------- Cards (DS Card) ---------- */
.card{background:var(--surface-card); border-radius:var(--radius-card-lg); padding:24px;
  border:1px solid var(--border-subtle); transition:transform var(--dur-base) var(--ease-soft),
    box-shadow var(--dur-base) var(--ease-soft);}
.card-soft{background:var(--bi-cream); box-shadow:none;}
.card-white{box-shadow:var(--shadow-sm);}
.card-blush{background:var(--bi-blush); border-color:transparent;}
.card-hover{cursor:pointer;}
.card-hover:hover{transform:translateY(-6px); box-shadow:var(--shadow-card);}

/* badge / tag */
.badge{display:inline-flex; align-items:center; gap:6px; font-family:var(--font-sans);
  font-size:11px; font-weight:500; letter-spacing:.06em; text-transform:uppercase;
  padding:5px 11px; border-radius:var(--radius-full);}
.badge-terracotta{background:var(--bi-terracotta); color:var(--bi-cream);}
.badge-forest{background:var(--bi-forest); color:var(--bi-white);}
.badge-blush{background:var(--bi-blush); color:var(--bi-espresso);}
.badge-gold{background:rgba(201,162,75,.16); color:#8c6f2b;}

/* pricing */
.price{font-family:var(--font-serif); font-size:22px; color:var(--text-accent);}

/* ---------- Figure placeholders ---------- */
.figure{position:relative; overflow:hidden; border-radius:16px; display:flex;
  align-items:center; justify-content:center; isolation:isolate;}
.figure svg.ph{opacity:.85;} 
.figure .ph-label{position:absolute; bottom:12px; left:14px; font-family:var(--font-sans);
  font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:rgba(250,248,246,.92);}
.fig-blush{background:linear-gradient(135deg,#F4E6E1 0%,#E9C7BB 100%);}
.fig-coral{background:linear-gradient(135deg,#D4998A 0%,#C4826A 100%);}
.fig-sun{background:linear-gradient(135deg,#E9C7BB 0%,#C9A24B 120%);}
.fig-stone{background:linear-gradient(135deg,#EDE7E3 0%,#D8CFC9 100%);}
/* real photography inside figure placeholders */
.figure .fig-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;}
.figure:has(.fig-img) svg.ph{display:none;}
.figure:has(.fig-img)::after{content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to top, rgba(44,40,38,.42), rgba(44,40,38,0) 58%);}
.figure .ph-label{z-index:2;}
.article-thumb .badge{z-index:2;}
.diagram-link{display:inline-flex; align-items:center; gap:8px; font-family:var(--font-sans);
  font-size:13px; font-weight:500; letter-spacing:.06em; text-transform:uppercase;
  color:var(--bi-terracotta); border-bottom:1.5px solid transparent; padding-bottom:2px;
  transition:gap var(--dur-base) var(--ease-soft), border-color var(--dur-base) var(--ease-soft), color var(--dur-base) var(--ease-soft);}
.diagram-link:hover{color:var(--bi-terracotta-deep); border-color:var(--bi-coral); gap:12px;}

/* ---------- NavBar ---------- */
.nav{position:fixed; inset:0 0 auto 0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:14px var(--gutter); background:rgba(250,248,246,0); border-bottom:1px solid transparent;
  transition:background var(--dur-slow) var(--ease-soft),border-color var(--dur-slow) var(--ease-soft),
    padding var(--dur-slow) var(--ease-soft),box-shadow var(--dur-slow) var(--ease-soft);}
.nav.scrolled{background:rgba(250,248,246,.92); backdrop-filter:saturate(140%) blur(8px);
  border-bottom-color:var(--border-subtle); box-shadow:0 2px 16px rgba(44,40,38,.05);}
.nav.on-dark .nav-link{color:rgba(250,248,246,.86);}
.nav.on-dark .nav-link:hover,.nav.on-dark .nav-link.active{color:var(--bi-cream);}
.nav.on-dark.scrolled .nav-link{color:var(--bi-espresso);}
.nav.on-dark.scrolled .nav-link:hover,.nav.on-dark.scrolled .nav-link.active{color:var(--bi-terracotta);}
.nav.on-dark .nav-util .cart svg{stroke:rgba(250,248,246,.86);}
.nav.on-dark.scrolled .nav-util .cart svg{stroke:var(--bi-espresso);}
.nav.on-dark .nav-util .util-label{color:rgba(250,248,246,.86);}
.nav.on-dark.scrolled .nav-util .util-label{color:var(--bi-espresso);}
.nav-logo{display:inline-flex; align-items:center; gap:9px; cursor:pointer;}
.nav-logo img{height:38px; width:auto;}
.nav-logo .wordmark{font-family:var(--font-serif); font-weight:500; font-size:21px;
  color:var(--bi-espresso); letter-spacing:.02em; transition:color var(--dur-slow) var(--ease-soft);}
.nav.on-dark .wordmark{color:var(--bi-cream);} .nav.on-dark.scrolled .wordmark{color:var(--bi-espresso);}
.nav-links{display:flex; align-items:center; gap:34px;}
.nav-link{font-size:12px; font-weight:500; letter-spacing:.07em; text-transform:uppercase;
  color:var(--bi-espresso); cursor:pointer; position:relative; padding-bottom:3px;}
.nav-link::after{content:''; position:absolute; left:0; bottom:0; height:1.5px; width:0;
  background:var(--bi-terracotta); transition:width var(--dur-base) var(--ease-soft);}
.nav-link:hover,.nav-link.active{color:var(--bi-terracotta);}
.nav-link.active::after,.nav-link:hover::after{width:100%;}
.nav-util{display:flex; align-items:center; gap:16px;}
.nav-util .util-label{font-size:12px; font-weight:500; letter-spacing:.07em; text-transform:uppercase;
  color:var(--bi-espresso); cursor:pointer;}
.nav-util .cart{position:relative; display:inline-flex; cursor:pointer;}
.nav-util .cart .count{position:absolute; top:-7px; right:-8px; min-width:16px; height:16px; padding:0 4px;
  border-radius:var(--radius-full); background:var(--bi-terracotta); color:var(--bi-cream);
  font-size:10px; font-weight:500; line-height:16px; text-align:center;}
.nav-burger{display:none; flex-direction:column; gap:5px; cursor:pointer; padding:6px;}
.nav-burger span{width:24px; height:2px; background:var(--bi-espresso); border-radius:2px;
  transition:background var(--dur-slow) var(--ease-soft);}
.nav.on-dark:not(.scrolled) .nav-burger span{background:var(--bi-cream);}

@media(max-width:880px){
  .nav-links,.nav-util .util-label{display:none;}
  .nav-burger{display:flex;}
  .nav-links.open{display:flex; position:fixed; inset:62px 0 auto 0; flex-direction:column;
    align-items:flex-start; gap:0; background:var(--bi-cream); padding:8px 0 16px;
    border-bottom:1px solid var(--border-subtle); box-shadow:var(--shadow-lg);}
  .nav-links.open .nav-link{width:100%; padding:14px 24px; color:var(--bi-espresso);}
  .nav-links.open .nav-link::after{display:none;}
}

/* ---------- Pages / routing ---------- */
.page{display:none;}
.page.active{display:block; animation:pageIn var(--dur-slow) var(--ease-soft) both;}
@keyframes pageIn{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;}}

/* ---------- Scroll reveal (progressive: hidden only when html.anim is set by JS) ---------- */
html.anim .reveal{opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease-soft),transform .8s var(--ease-soft);}
.reveal.in{opacity:1; transform:none;}
.reveal-d1{transition-delay:.08s;} .reveal-d2{transition-delay:.16s;} .reveal-d3{transition-delay:.24s;}
.reveal-d4{transition-delay:.32s;} .reveal-d5{transition-delay:.40s;}
html.anim .reveal-scale{opacity:0; transform:scale(.94); transition:opacity .9s var(--ease-soft),transform .9s var(--ease-soft);}
.reveal-scale.in{opacity:1; transform:none;}

/* word-by-word hero reveal */
html.anim .word{opacity:0; transform:translateY(.5em); filter:blur(6px);
  transition:opacity .7s var(--ease-soft),transform .7s var(--ease-soft),filter .7s var(--ease-soft);}
.word{display:inline-block;}
.word.in{opacity:1; transform:none; filter:blur(0);}

/* safety net: if the engine never runs, reveal everything after a beat */
html.reveal-fallback .reveal,html.reveal-fallback .reveal-scale,html.reveal-fallback .word{opacity:1 !important; transform:none !important; filter:none !important;}

/* ---------- HERO ---------- */
.hero{position:relative; min-height:100vh; display:flex; align-items:center;
  background-color:#211C1A;
  background-image:radial-gradient(120% 120% at 82% 12%,#6E3B2B 0%,#43302A 34%,#2C2826 62%,#1C1715 100%);
  color:var(--bi-cream); overflow:hidden;}
.hero::after{content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 80% at 50% 122%,rgba(20,16,14,.6),transparent 58%);}
.hero-canvas{position:absolute; inset:0; width:100%; height:100%; z-index:1;}
.hero-glow{position:absolute; z-index:1; right:8%; top:50%; width:560px; height:560px;
  transform:translateY(-50%); pointer-events:none;
  background:radial-gradient(closest-side,rgba(201,162,75,.20),rgba(196,130,106,.12) 45%,transparent 72%);
  filter:blur(8px);}
.hero-inner{position:relative; z-index:3; display:grid; grid-template-columns:1.08fr .92fr;
  gap:56px; align-items:center; width:100%;}
.hero-accent{font-family:var(--font-script); font-style:italic; font-weight:500;
  font-size:20px; letter-spacing:.02em; color:var(--bi-coral-soft); display:block; margin-bottom:18px;}
.hero-eyebrow{color:rgba(250,248,246,.74); letter-spacing:.2em;}
.hero-eyebrow .x{color:var(--bi-coral); font-size:1.15em; padding:0 .06em;}
.hero h1{color:var(--bi-cream); font-size:clamp(42px,5.6vw,62px); line-height:1.08; margin:14px 0 24px;}
.hero p{color:rgba(250,248,246,.86); font-size:18px; max-width:500px; margin:0 0 32px;}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap;}
.hero-art{position:relative; display:flex; align-items:center; justify-content:center; min-height:520px;}
.hero-art .bodygraph{max-width:380px;}
.scroll-cue{position:absolute; left:50%; bottom:26px; z-index:4; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px; color:rgba(250,248,246,.8);
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;}
.scroll-cue .mouse{width:22px; height:34px; border:1.5px solid rgba(250,248,246,.7); border-radius:12px; position:relative;}
.scroll-cue .mouse::after{content:''; position:absolute; left:50%; top:7px; width:3px; height:6px;
  border-radius:2px; background:rgba(250,248,246,.9); transform:translateX(-50%); animation:scrollDot 1.7s var(--ease-inout) infinite;}
@keyframes scrollDot{0%{opacity:0; transform:translate(-50%,0);}30%{opacity:1;}70%{opacity:1; transform:translate(-50%,9px);}100%{opacity:0; transform:translate(-50%,12px);}}

@media(max-width:880px){
  .hero{min-height:auto; padding:120px 0 80px;}
  .hero-inner{grid-template-columns:1fr; gap:36px;}
  .hero-art{min-height:380px; order:-1;}
}

/* ---------- Bodygraph (animated SVG) ---------- */
.bodygraph{width:100%; max-width:360px; height:auto; overflow:visible;}
.bg-channel{stroke:rgba(250,248,246,.22); stroke-width:3.4; fill:none; stroke-linecap:round;}
.bg-channel.lit{stroke-dasharray:var(--len); stroke-dashoffset:var(--len);
  transition:stroke-dashoffset 1.1s var(--ease-soft),stroke .6s var(--ease-soft);}
.bg-channel.lit.on{stroke-dashoffset:0;}
.bg-channel.def{stroke:url(#chFlow);}
.bg-center{fill:rgba(250,248,246,.06); stroke:rgba(250,248,246,.5); stroke-width:1.6;
  transition:fill .7s var(--ease-soft),stroke .7s var(--ease-soft),filter .7s var(--ease-soft);}
.bg-center.def{fill:var(--def-fill); stroke:rgba(250,248,246,.85);}
.bg-center.glow{filter:drop-shadow(0 0 14px var(--glow));}
.bg-gate{fill:rgba(250,248,246,.55); font-family:var(--font-sans); font-size:7px; text-anchor:middle;}
.bg-pulse{animation:bgPulse 4.5s var(--ease-inout) infinite;}
@keyframes bgPulse{0%,100%{opacity:.85;}50%{opacity:1;}}
/* bodygraph on light surfaces */
.bodygraph.on-light .bg-channel{stroke:rgba(44,40,38,.14);}
.bodygraph.on-light .bg-center{fill:rgba(44,40,38,.03); stroke:rgba(44,40,38,.35);}
.bodygraph.on-light .bg-gate{fill:rgba(44,40,38,.5);}

/* ---------- Split section ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}
.split.reverse .split-media{order:-1;}
@media(max-width:820px){.split{grid-template-columns:1fr; gap:36px;}
  .split.reverse .split-media{order:0;}}

/* feature (terracotta) section */
.feature{background:var(--surface-feature); color:var(--bi-cream); position:relative; overflow:hidden;}
.feature h2,.feature h3{color:var(--bi-cream);}
.feature .body{color:rgba(250,248,246,.9);}

/* dark cosmic section — CSS-painted starfield (renders in exports; no live canvas) */
.cosmic{background-color:#1B1614;
  background-image:radial-gradient(125% 110% at 50% -8%,#332B27 0%,#241E1B 42%,#1A1513 100%);
  color:var(--bi-cream); position:relative; overflow:hidden;}
/* soft nebula glows */
.cosmic::after{content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    radial-gradient(42% 52% at 20% 64%, rgba(201,162,75,.12), transparent 70%),
    radial-gradient(46% 56% at 80% 26%, rgba(196,130,106,.14), transparent 72%);}
/* twinkling stars */
.cosmic::before{content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-repeat:no-repeat;
  background-image:
    radial-gradient(1.6px 1.6px at 8% 18%, rgba(250,248,246,.9), transparent 60%),
    radial-gradient(1.2px 1.2px at 15% 52%, rgba(233,199,187,.7), transparent 60%),
    radial-gradient(1.8px 1.8px at 22% 80%, rgba(250,248,246,.85), transparent 60%),
    radial-gradient(1.1px 1.1px at 29% 30%, rgba(201,162,75,.7), transparent 60%),
    radial-gradient(1.5px 1.5px at 34% 66%, rgba(250,248,246,.75), transparent 60%),
    radial-gradient(1.2px 1.2px at 41% 12%, rgba(233,199,187,.7), transparent 60%),
    radial-gradient(1.7px 1.7px at 47% 44%, rgba(250,248,246,.9), transparent 60%),
    radial-gradient(1.1px 1.1px at 53% 74%, rgba(201,162,75,.6), transparent 60%),
    radial-gradient(1.4px 1.4px at 60% 22%, rgba(250,248,246,.8), transparent 60%),
    radial-gradient(1.2px 1.2px at 66% 58%, rgba(233,199,187,.7), transparent 60%),
    radial-gradient(1.9px 1.9px at 72% 86%, rgba(250,248,246,.85), transparent 60%),
    radial-gradient(1.1px 1.1px at 78% 34%, rgba(201,162,75,.65), transparent 60%),
    radial-gradient(1.5px 1.5px at 84% 70%, rgba(250,248,246,.8), transparent 60%),
    radial-gradient(1.2px 1.2px at 90% 16%, rgba(233,199,187,.7), transparent 60%),
    radial-gradient(1.6px 1.6px at 94% 50%, rgba(250,248,246,.85), transparent 60%),
    radial-gradient(1.1px 1.1px at 5% 88%, rgba(250,248,246,.7), transparent 60%);
  animation:cosmicTwinkle 6s var(--ease-soft) infinite alternate;}
@keyframes cosmicTwinkle{from{opacity:.7;}to{opacity:1;}}
@media(prefers-reduced-motion:reduce){.cosmic::before{animation:none; opacity:.9;}}
.cosmic h2,.cosmic h3{color:var(--bi-cream);}
.cosmic .body{color:rgba(250,248,246,.82);}
.cosmic .container{position:relative; z-index:2;}

/* ---------- Section heading ---------- */
.sh{max-width:560px;}
.sh.center{margin-inline:auto;}
.sh .script{font-size:23px; display:block; margin-bottom:4px;}
.sh .body{margin-top:14px; color:var(--text-body);}
.feature .sh .body,.cosmic .sh .body{color:rgba(250,248,246,.88);}

/* ---------- Grids ---------- */
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
@media(max-width:900px){.grid-3{grid-template-columns:1fr 1fr;} .grid-4{grid-template-columns:1fr 1fr;}}
@media(max-width:600px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}}

/* insight / principle card */
.insight{display:flex; flex-direction:column; gap:14px; text-align:center; align-items:center;}
.insight .figure{width:100%;}
.principle{display:flex; flex-direction:column; gap:10px;}
.principle .num{font-family:var(--font-serif); font-size:30px; color:var(--bi-terracotta); line-height:1;}

/* article / journal card */
.article-grid{gap:28px;}
.article-card{padding:0; overflow:hidden; cursor:pointer; display:flex; flex-direction:column;
  transition:transform var(--dur-base) var(--ease-soft),box-shadow var(--dur-base) var(--ease-soft);}
.article-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-card);}
.article-thumb{aspect-ratio:16/9; border-radius:0; align-items:flex-start; justify-content:flex-start; padding:16px;}
.article-thumb .badge{position:relative;}
.article-body{padding:22px 24px 26px; display:flex; flex-direction:column; gap:9px; text-align:left;}
.article-body .post-meta{margin-bottom:-1px;}
.article-body h3{margin:0; font-size:22px; line-height:1.28; color:var(--text-heading);
  transition:color var(--dur-base) var(--ease-soft);}
.article-card:hover .article-body h3{color:var(--bi-terracotta);}
.article-excerpt{margin:0; color:var(--text-body); font-size:15.5px; line-height:1.6;}
.article-link{font-family:var(--font-sans); font-size:13px; font-weight:500; letter-spacing:.04em;
  text-transform:uppercase; color:var(--bi-terracotta); margin-top:7px;}
.article-card:hover .article-link{color:var(--bi-terracotta-deep);}
/* readable blog excerpts */
.post-card .muted{color:var(--text-body);}

/* ---------- Stat band ---------- */
.stat-band{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; text-align:center;}
.stat .n{font-family:var(--font-serif); font-size:clamp(34px,4vw,46px); color:var(--bi-terracotta); line-height:1;}
.stat .l{font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); margin-top:8px;}
.cosmic .stat .n{color:var(--bi-gold);} .cosmic .stat .l{color:rgba(250,248,246,.7);}
@media(max-width:600px){.stat-band{grid-template-columns:repeat(2,1fr); gap:24px;}}

/* ---------- Forms ---------- */
.field{display:flex; flex-direction:column; gap:7px;}
.field label{font-family:var(--font-sans); font-size:13px; font-weight:500; color:var(--text-heading);}
.field .req{color:var(--bi-terracotta);}
.field .hint{font-size:12px; color:var(--text-muted);}
.input,.select{font-family:var(--font-sans); font-size:15px; color:var(--text-heading);
  background:var(--bi-white); border:1px solid var(--border-subtle); border-radius:var(--radius-input);
  padding:12px 14px; width:100%; transition:border-color var(--dur-base) var(--ease-soft),box-shadow var(--dur-base) var(--ease-soft);}
.input::placeholder{color:var(--text-muted);}
.input:focus,.select:focus{outline:none; border-color:var(--bi-terracotta);
  box-shadow:0 0 0 3px rgba(196,130,106,.16);}
.select{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B5E58' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:40px;}

/* property rows */
.prop-list{display:flex; flex-direction:column;}
.prop{display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 18px; border-radius:var(--radius-input); cursor:default;}
.prop:nth-child(odd){background:var(--bi-blush);}
.prop .k{font-family:var(--font-sans); font-size:16px; font-weight:500; color:var(--text-heading);}
.prop .v{font-size:16px; color:var(--text-body); text-align:right;}

/* avatar */
.avatar{width:72px; height:72px; border-radius:var(--radius-full); background:var(--bi-white);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-serif);
  font-size:24px; color:var(--bi-terracotta); flex:none; box-shadow:var(--shadow-sm);}

/* planet column (chart readout) */
.planet-col{display:flex; flex-direction:column; gap:8px;}
.planet{border-radius:6px; padding:8px 10px; font-family:var(--font-sans); font-size:13px;
  font-weight:500; text-align:center;}
.planet.t{background:var(--bi-terracotta); color:var(--bi-cream);}
.planet.alt{background:var(--bi-cream-warm); color:var(--text-heading);}
.planet.s{background:#6e7b8a; color:var(--bi-cream);}
.planet.s-alt{background:#e7ebee; color:var(--text-heading);}

/* embed frame */
.embed-shell{background:var(--bi-white); border:1px solid var(--border-subtle); border-radius:18px;
  box-shadow:var(--shadow-card); padding:8px; overflow:hidden;}
.embed-note{font-size:12px; color:var(--text-muted); text-align:center; margin-top:14px;}

/* ---------- Newsletter ---------- */
.newsletter-form{display:flex; gap:12px; max-width:520px; margin-top:22px;}
.newsletter-form .input{flex:1;}
@media(max-width:520px){.newsletter-form{flex-direction:column;}}

/* ---------- Blog ---------- */
.post-feat{display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center;}
@media(max-width:820px){.post-feat{grid-template-columns:1fr;}}
.post-meta{font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted);}
.post-card h3{transition:color var(--dur-base) var(--ease-soft);}
.post-card:hover h3{color:var(--bi-terracotta);}

/* ---------- Footer ---------- */
.footer{background:var(--bi-espresso); color:rgba(250,248,246,.78); padding:64px 0 28px; font-size:14px;}
.footer a{color:rgba(250,248,246,.7);}
.footer a:hover{color:var(--bi-cream);}
.footer-top{display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:40px; padding-bottom:40px;
  border-bottom:1px solid rgba(250,248,246,.12);}
.footer .wordmark{font-family:var(--font-serif); font-size:22px; color:var(--bi-cream); margin-bottom:14px;}
.footer-col h4{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--bi-cream);
  font-family:var(--font-sans); font-weight:500; margin:0 0 14px;}
.footer-col ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; font-size:13.5px;}
.footer-bottom{display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding-top:24px; font-size:12px; flex-wrap:wrap;}
@media(max-width:820px){.footer-top{grid-template-columns:1fr 1fr;}}
@media(max-width:520px){.footer-top{grid-template-columns:1fr;}}

/* toast */
.toast{position:fixed; left:50%; bottom:28px; transform:translate(-50%,20px); z-index:90;
  background:var(--bi-espresso); color:var(--bi-cream); padding:13px 22px; border-radius:var(--radius-pill);
  font-size:14px; box-shadow:var(--shadow-lg); opacity:0; pointer-events:none;
  transition:opacity var(--dur-base) var(--ease-soft),transform var(--dur-base) var(--ease-soft);}
.toast.show{opacity:1; transform:translate(-50%,0);}

/* floating gate motes in hero handled by canvas; subtle float util */
.float{animation:floaty 7s var(--ease-inout) infinite;}
@keyframes floaty{0%,100%{transform:translateY(0);}50%{transform:translateY(-12px);}}

/* ---------- Cart Drawer ---------- */
.cart-overlay{position:fixed;inset:0;z-index:80;background:rgba(44,40,38,.48);
  opacity:0;pointer-events:none;transition:opacity var(--dur-slow) var(--ease-soft);}
.cart-overlay.open{opacity:1;pointer-events:auto;}
.cart-drawer{position:fixed;inset:0 0 0 auto;z-index:81;
  width:min(420px,100vw);background:var(--bi-cream);
  box-shadow:var(--shadow-lg);display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform var(--dur-slow) var(--ease-soft);}
.cart-drawer.open{transform:translateX(0);}
.cart-drawer-head{display:flex;align-items:center;justify-content:space-between;
  padding:20px 24px;border-bottom:1px solid var(--border-subtle);flex:none;}
.cart-close{background:none;border:none;cursor:pointer;padding:8px;line-height:0;
  color:var(--bi-espresso);border-radius:8px;
  transition:background var(--dur-fast) var(--ease-soft),color var(--dur-fast) var(--ease-soft);}
.cart-close:hover{background:var(--bi-blush);}
.cart-drawer-items{flex:1;overflow-y:auto;padding:0 24px;display:flex;flex-direction:column;gap:0;}
.cart-item{display:flex;gap:14px;align-items:flex-start;padding:16px 0;
  border-bottom:1px solid var(--border-subtle);}
.cart-item:last-child{border-bottom:none;}
.cart-item-fig{width:64px;height:64px;border-radius:10px;flex:none;}
.cart-item-info{flex:1;min-width:0;}
.cart-item-info h4{margin:0 0 4px;font-size:16px;line-height:1.25;}
.cart-item-price{font-family:var(--font-serif);font-size:18px;color:var(--bi-terracotta);}
.cart-item-remove{display:block;margin-top:6px;background:none;border:none;cursor:pointer;
  font-family:var(--font-sans);font-size:11px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--text-muted);padding:0;
  transition:color var(--dur-fast) var(--ease-soft);}
.cart-item-remove:hover{color:var(--bi-terracotta);}
.cart-empty{flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:14px;padding:40px 24px;color:var(--text-muted);text-align:center;}
.cart-empty p{margin:0;font-size:15px;}
.cart-drawer-foot{padding:20px 24px 28px;border-top:1px solid var(--border-subtle);flex:none;}
.cart-subtotal{display:flex;justify-content:space-between;align-items:baseline;
  margin-bottom:14px;font-weight:500;font-family:var(--font-sans);}
.cart-subtotal span:last-child{font-family:var(--font-serif);font-size:22px;color:var(--bi-terracotta);}

/* ---------- Blog post article ---------- */
.post-hd{margin-bottom:40px;padding-bottom:32px;border-bottom:1px solid var(--border-subtle);}
.post-hd .post-meta{margin-bottom:14px;}
.post-title{font-size:clamp(28px,4.5vw,42px);margin:0 0 18px;line-height:1.15;}
.post-hd .lead{font-size:19px;line-height:1.7;color:var(--text-body);margin:0;}
.post-bd{font-size:17px;line-height:1.85;color:var(--text-body);}
.post-bd h2{font-size:23px;margin:40px 0 14px;color:var(--text-heading);letter-spacing:-.01em;}
.post-bd p{margin:0 0 1.3em;}
.post-bd p:last-child{margin-bottom:0;}
.post-bd em{font-style:italic;}
.post-bd strong{font-weight:var(--weight-medium);color:var(--text-heading);}
.post-ft{display:flex;gap:12px;flex-wrap:wrap;margin-top:52px;padding-top:32px;
  border-top:1px solid var(--border-subtle);}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; transition-duration:.001ms !important;}
  .reveal,.reveal-scale,.word{opacity:1 !important; transform:none !important; filter:none !important;}
}

/* ============================================================
   Site Gate — password entry overlay
   Remove #siteGate from index.html to disable
   ============================================================ */
#siteGate {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--bi-espresso);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  transition: opacity 600ms var(--ease-soft), visibility 600ms;
}
#siteGate.gate-open {
  opacity: 0; visibility: hidden; pointer-events: none;
}
.gate-inner {
  text-align: center; max-width: 360px; width: 100%;
}
.gate-logo {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; margin-bottom: 36px;
}
.gate-logo img { height: 36px; width: auto; }
.gate-logo span {
  font-family: var(--font-serif); font-size: 18px; font-weight: 500;
  color: var(--bi-cream); letter-spacing: -.01em;
}
.gate-label {
  font-family: var(--font-sans); font-size: 12px; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--bi-stone); margin-bottom: 28px;
}
#gateForm {
  display: flex; gap: 10px;
}
#gateInput {
  flex: 1; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px; padding: 14px 16px;
  font-family: var(--font-sans); font-size: 15px; color: var(--bi-cream);
  outline: none; transition: border-color 200ms;
}
#gateInput::placeholder { color: var(--bi-stone); }
#gateInput:focus { border-color: var(--bi-terracotta); }
#gateForm button {
  background: var(--bi-terracotta); color: var(--bi-cream);
  border: none; border-radius: 8px; padding: 14px 22px;
  font-family: var(--font-sans); font-size: 14px; font-weight: 500;
  letter-spacing: .05em; text-transform: uppercase;
  cursor: pointer; transition: background 200ms;
  white-space: nowrap;
}
#gateForm button:hover { background: #B5755D; }
.gate-error {
  margin-top: 14px; font-size: 13px; color: #E07A5F;
  min-height: 18px;
}