/* Pillar & Page — design system (source of truth: approved v2 design, 2026-06-11) */

@font-face{
  font-family:'Fraunces';font-style:normal;font-weight:400 600;font-display:swap;
  src:url('/fonts/fraunces.woff2') format('woff2');
}
@font-face{
  font-family:'Fraunces';font-style:italic;font-weight:400 500;font-display:swap;
  src:url('/fonts/fraunces-italic.woff2') format('woff2');
}
@font-face{
  font-family:'Hanken Grotesk';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('/fonts/hanken.woff2') format('woff2');
}

:root{
  --night:#1c222e;
  --night-deep:#161c26;
  --night-deeper:#10151d;
  --panel:#222a38;
  --panel-edge:#2e3848;
  --cream:#fffaf0;
  --cream-warm:#eaddbd;
  --muted:#9aa3b4;
  --gold:#e3b35b;
  --gold-bright:#f0c873;
  --gold-deep:#c5933a;
  --green:#56b394;
  --rose:#dd8b87;
  --wood:#71603f;
  --display:'Fraunces',serif;
  --body:'Hanken Grotesk',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--body);
  background:var(--night);
  color:var(--cream);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:var(--gold);color:var(--night)}

/* atmosphere: grain */
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}
.glow-pool{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none}

.tricolor{display:flex;height:4px;width:64px;border-radius:2px;overflow:hidden}
.tricolor span{flex:1}
.tricolor span:nth-child(1){background:var(--green)}
.tricolor span:nth-child(2){background:var(--gold)}
.tricolor span:nth-child(3){background:var(--rose)}
.tricolor--full{width:100%;height:5px;border-radius:0}

/* ---------- nav ---------- */
header{
  position:sticky;top:0;z-index:50;
  background:rgba(22,28,38,.88);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--panel-edge);
}
.nav{
  max-width:1200px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 24px;
}
.wordmark{
  display:flex;align-items:center;gap:12px;
  font-family:var(--display);font-weight:500;
  font-size:1.4rem;letter-spacing:.01em;
  text-decoration:none;color:var(--cream);
}
.wordmark .mark{width:36px;height:34px;flex-shrink:0}
.wordmark em{color:var(--gold);font-style:normal}
.nav-links{display:flex;align-items:center;gap:28px;list-style:none}
.nav-links a{
  text-decoration:none;color:var(--muted);
  font-size:.92rem;font-weight:500;
  transition:color .2s;
}
.nav-links a:hover{color:var(--cream)}
.btn{
  display:inline-block;
  background:linear-gradient(180deg,var(--gold-bright),var(--gold));
  color:var(--night);
  font-family:var(--body);font-weight:700;font-size:.95rem;
  padding:13px 26px;border-radius:100px;
  text-decoration:none;border:none;cursor:pointer;
  box-shadow:0 4px 18px rgba(227,179,91,.22);
  transition:transform .2s cubic-bezier(.2,.8,.3,1.2),box-shadow .25s,filter .2s;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(227,179,91,.4);filter:brightness(1.05)}
.btn:active{transform:scale(.97);filter:brightness(.98)}
.btn--big{font-size:1.05rem;padding:17px 36px}
.btn--ghost{
  background:none;color:var(--cream);box-shadow:none;
  border:1px solid var(--panel-edge);font-weight:600;
}
.btn--ghost:hover{border-color:var(--gold);color:var(--gold-bright);box-shadow:none}
.nav .btn{padding:10px 20px;font-size:.88rem}
.menu-btn{display:none;background:none;border:1px solid var(--panel-edge);border-radius:10px;padding:9px 11px;cursor:pointer;margin-left:6px}
.menu-btn span{display:block;width:18px;height:2px;background:var(--cream-warm);margin:4px 0;border-radius:2px;transition:transform .25s,opacity .2s}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.nav-panel{display:none;background:var(--night-deeper);border-bottom:1px solid var(--panel-edge)}
.nav-panel.open{display:block}
.nav-panel a{display:block;padding:17px 24px;color:var(--cream-warm);text-decoration:none;font-weight:600;font-size:1.02rem;border-top:1px solid var(--panel-edge)}
.nav-panel a:active{background:var(--panel)}
@media(max-width:720px){
  .nav-links li:not(:last-child){display:none}
  .menu-btn{display:block}
}
@media(max-width:480px){
  .wordmark{font-size:1.12rem;gap:8px}
  .wordmark .mark{width:29px;height:28px}
  .nav{padding:12px 16px}
  .nav .btn{padding:8px 13px;font-size:.78rem;white-space:nowrap}
}
@media(min-width:721px){.nav-panel{display:none !important}}

/* ---------- hero ---------- */
.hero{
  position:relative;
  max-width:1200px;margin:0 auto;
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:40px;align-items:center;
  padding:90px 24px 110px;
}
.hero .glow-pool{width:560px;height:560px;right:-80px;top:40px;background:radial-gradient(circle,rgba(227,179,91,.16),rgba(74,55,31,.07) 55%,transparent 75%)}
.hero-copy{position:relative;z-index:2}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:.78rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);margin-bottom:28px;
}
@media(max-width:480px){.eyebrow{font-size:.66rem;letter-spacing:.1em;gap:8px}.eyebrow .tricolor{width:36px}}
h1{
  font-family:var(--display);
  font-size:clamp(2.8rem,6vw,4.9rem);
  line-height:1.04;letter-spacing:-.01em;font-weight:500;
  margin-bottom:28px;
}
h1 .accent{color:var(--gold-bright);font-style:italic;font-weight:400}
.hero-sub{
  font-size:1.16rem;line-height:1.7;color:var(--muted);
  max-width:33rem;margin-bottom:38px;
}
.hero-sub strong{color:var(--cream-warm);font-weight:600}
.hero-ctas{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
@media(max-width:480px){
  .hero-ctas{flex-direction:column;align-items:stretch}
  .hero-ctas .btn{text-align:center}
}
.hero-note{margin-top:24px;font-size:.88rem;color:var(--muted);display:flex;align-items:center;gap:9px}
.hero-note .shield{color:var(--gold)}

/* floating brand pages */
.fly{position:absolute;z-index:1;opacity:.16;pointer-events:none;animation:drift 16s ease-in-out infinite}
.fly--1{width:54px;top:12%;left:46%;animation-delay:0s}
.fly--2{width:38px;top:64%;left:38%;animation-delay:-6s;animation-duration:20s;opacity:.11}
.fly--3{width:30px;top:28%;right:6%;animation-delay:-11s;animation-duration:23s;opacity:.13}
@keyframes drift{
  0%,100%{transform:translate(0,0) rotate(8deg)}
  50%{transform:translate(14px,-22px) rotate(16deg)}
}

/* the book in its lit alcove */
.hero-book{position:relative;display:flex;justify-content:center;perspective:1600px;z-index:2}
.alcove{
  position:absolute;inset:-12% -6%;
  background:radial-gradient(ellipse 60% 52% at 50% 42%,rgba(240,200,115,.2),rgba(74,55,31,.1) 55%,transparent 72%);
  pointer-events:none;
}
.book{
  position:relative;width:min(310px,70vw);aspect-ratio:10/14.6;
  transform:rotateY(-17deg) rotateX(2deg);
  transform-style:preserve-3d;
  transition:transform .6s cubic-bezier(.2,.8,.3,1);
  animation:bookFloat 7s ease-in-out infinite;
}
.hero-book:hover .book{transform:rotateY(-8deg) rotateX(1deg)}
@keyframes bookFloat{0%,100%{translate:0 0}50%{translate:0 -12px}}
.book-cover{
  position:absolute;inset:0;
  background:linear-gradient(165deg,#242c3b 0%,#1a202b 60%,#141923 100%);
  border:1px solid rgba(240,200,115,.28);
  border-radius:4px 14px 14px 4px;
  box-shadow:
    0 60px 90px -24px rgba(0,0,0,.65),
    0 0 70px -8px rgba(227,179,91,.18);
  padding:9% 10%;
  display:flex;flex-direction:column;
  overflow:hidden;
}
.book-cover::after{
  content:'';position:absolute;top:0;bottom:0;left:14px;width:2px;
  background:linear-gradient(90deg,rgba(255,250,240,.14),transparent);
}
.book-spine{
  position:absolute;top:2px;bottom:2px;left:-16px;width:17px;
  background:linear-gradient(90deg,#0c0f15,#222a38);
  transform:rotateY(-78deg);transform-origin:right;
  border-radius:3px 0 0 3px;
}
.book-pages{
  position:absolute;top:6px;bottom:6px;right:-9px;width:10px;
  background:repeating-linear-gradient(180deg,#fffaf0 0 2px,#d9cba4 2px 3px);
  transform:rotateY(72deg);transform-origin:left;
  border-radius:0 2px 2px 0;
}
.bc-press{font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--cream-warm);opacity:.85;display:flex;align-items:center;gap:8px}
.bc-press .tricolor{width:30px;height:3px}
.bc-title{
  font-family:var(--display);font-weight:500;
  font-size:clamp(1.7rem,4vw,2.4rem);
  line-height:1.08;margin-top:15%;color:var(--cream);
}
.bc-title em{font-style:italic;color:var(--gold-bright);font-weight:400}
.bc-sub{font-size:.78rem;line-height:1.55;color:var(--muted);margin-top:12px;max-width:92%}
.bc-foot{margin-top:auto;display:flex;justify-content:space-between;align-items:flex-end;font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cream-warm);opacity:.7}
.badge-float{
  position:absolute;right:-5%;top:-5%;
  background:linear-gradient(180deg,var(--gold-bright),var(--gold));
  color:var(--night);
  font-weight:800;font-size:.82rem;
  padding:11px 16px;border-radius:100px;
  box-shadow:0 14px 34px rgba(227,179,91,.35);
  rotate:6deg;z-index:3;
}
@media(max-width:900px){
  .hero{grid-template-columns:1fr;padding:50px 24px 80px;gap:54px}
  .hero-book{order:-1}
  .book{width:min(240px,62vw)}
  .hero .glow-pool{right:auto;left:50%;translate:-50% 0;top:-40px;width:420px;height:420px}
}

/* ---------- ticker ---------- */
.ticker{
  border-top:1px solid var(--panel-edge);border-bottom:1px solid var(--panel-edge);
  background:var(--night-deeper);
  overflow:hidden;white-space:nowrap;position:relative;z-index:2;
}
.ticker-track{display:inline-flex;animation:tick 30s linear infinite;padding:13px 0}
.ticker:hover .ticker-track{animation-play-state:paused}
@keyframes tick{to{transform:translateX(-50%)}}
.ticker span{
  font-size:.84rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--cream-warm);
  padding:0 28px;display:inline-flex;align-items:center;gap:28px;
}
.ticker .dot{color:var(--gold);font-size:.9rem}

/* ---------- sections ---------- */
section{max-width:1200px;margin:0 auto;padding:100px 24px;position:relative}
.sec-label{
  display:flex;align-items:center;gap:14px;
  font-size:.78rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);
  margin-bottom:22px;
}
h2{
  font-family:var(--display);font-weight:500;
  font-size:clamp(2rem,4.2vw,3.3rem);
  line-height:1.08;letter-spacing:-.005em;
  max-width:26ch;margin-bottom:18px;
}
h2 em{font-style:italic;color:var(--gold-bright);font-weight:400}

/* featured */
.featured{display:grid;grid-template-columns:.85fr 1.15fr;gap:72px;align-items:center}
.featured-visual{position:relative;display:flex;justify-content:center}
.featured-visual .book{width:min(265px,66vw);animation:none;transform:rotateY(14deg) rotateX(1deg)}
.featured-visual:hover .book{transform:rotateY(7deg)}
.feat-kicker{color:var(--rose);font-weight:700;font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:14px;display:block}
.feat-sub{font-size:1.07rem;line-height:1.7;color:var(--muted);margin-bottom:30px;max-width:36rem}
.feat-list{list-style:none;display:grid;gap:14px;margin-bottom:36px}
.feat-list li{display:flex;gap:13px;align-items:flex-start;font-size:1rem;line-height:1.55;color:var(--cream-warm)}
.feat-list .tick{
  flex-shrink:0;width:22px;height:22px;border-radius:50%;
  background:rgba(86,179,148,.16);color:var(--green);
  border:1px solid rgba(86,179,148,.4);
  display:flex;align-items:center;justify-content:center;
  font-size:.72rem;font-weight:700;margin-top:1px;
}
.price-row{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.price{font-family:var(--display);font-size:2.6rem;color:var(--gold-bright)}
.price small{font-family:var(--body);font-size:.84rem;color:var(--muted);display:block;font-weight:500}
.spec-strip{display:flex;gap:14px;margin-top:28px;flex-wrap:wrap}
.spec{
  font-size:.82rem;font-weight:600;color:var(--cream-warm);
  border:1px solid var(--panel-edge);border-radius:100px;padding:7px 16px;
  background:var(--night-deep);
}
@media(max-width:900px){.featured{grid-template-columns:1fr;gap:48px}}

/* pillars */
.pillars-wrap{background:var(--night-deeper);border-top:1px solid var(--panel-edge);border-bottom:1px solid var(--panel-edge)}
.pillars-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:54px}
.pillar-card{
  border:1px solid var(--panel-edge);border-radius:18px;
  padding:34px 30px 30px;position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--panel),var(--night-deep));
  transition:transform .25s,border-color .25s,box-shadow .3s;
}
.pillar-card:hover{transform:translateY(-6px)}
.pillar-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px}
.pillar-card.green::before{background:var(--green);box-shadow:0 0 18px var(--green)}
.pillar-card.gold::before{background:var(--gold);box-shadow:0 0 18px var(--gold)}
.pillar-card.rose::before{background:var(--rose);box-shadow:0 0 18px var(--rose)}
.pillar-card.green:hover{border-color:rgba(86,179,148,.55);box-shadow:0 18px 44px -18px rgba(86,179,148,.25)}
.pillar-card.gold:hover{border-color:rgba(227,179,91,.55);box-shadow:0 18px 44px -18px rgba(227,179,91,.25)}
.pillar-card.rose:hover{border-color:rgba(221,139,135,.55);box-shadow:0 18px 44px -18px rgba(221,139,135,.25)}
.pillar-num{font-family:var(--display);font-style:italic;font-size:.95rem;color:var(--muted)}
.pillar-card h3{font-family:var(--display);font-weight:500;font-size:1.85rem;margin:14px 0 10px}
.pillar-card.green h3{color:#9fd9c4}
.pillar-card.gold h3{color:var(--gold-bright)}
.pillar-card.rose h3{color:#ecb3af}
.pillar-card p{font-size:.95rem;line-height:1.65;color:var(--muted);margin-bottom:26px}
.pillar-status{
  font-size:.78rem;font-weight:600;letter-spacing:.05em;
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border-radius:100px;border:1px solid var(--panel-edge);color:var(--cream-warm);
  background:var(--night-deeper);
}
.pillar-status .pulse{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
@media(max-width:900px){.pillars-grid{grid-template-columns:1fr}}

/* standards */
.standards{display:grid;grid-template-columns:repeat(2,1fr);border:1px solid var(--panel-edge);border-radius:20px;overflow:hidden;margin-top:54px;background:var(--night-deep)}
.standard{padding:42px 40px;border-bottom:1px solid var(--panel-edge);position:relative}
.standard:nth-child(odd){border-right:1px solid var(--panel-edge)}
.standard:nth-child(3),.standard:nth-child(4){border-bottom:none}
.standard .num{font-family:var(--display);font-style:italic;font-size:1rem;color:var(--gold)}
.standard h3{font-family:var(--display);font-weight:500;font-size:1.5rem;margin:12px 0 10px}
.standard p{font-size:.96rem;line-height:1.7;color:var(--muted)}
@media(max-width:760px){
  .standards{grid-template-columns:1fr}
  .standard{border-right:none !important;border-bottom:1px solid var(--panel-edge) !important}
  .standard:last-child{border-bottom:none !important}
}

/* email capture — the lamplit panel */
.capture{
  position:relative;border-radius:24px;overflow:hidden;
  border:1px solid rgba(240,200,115,.3);
  background:
    radial-gradient(ellipse 90% 130% at 18% -20%,rgba(240,200,115,.22),transparent 55%),
    radial-gradient(ellipse 70% 100% at 95% 120%,rgba(221,139,135,.1),transparent 60%),
    linear-gradient(180deg,var(--panel),var(--night-deep));
  padding:72px 56px;display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:center;
}
.capture h2{margin-bottom:12px}
.capture p{color:var(--muted);line-height:1.7;font-size:1.04rem}
.capture-form{display:flex;gap:10px}
.capture-form input[type=email]{
  flex:1;border:1px solid var(--panel-edge);border-radius:100px;padding:16px 22px;
  font-family:var(--body);font-size:1rem;outline:none; /* ≥16px: prevents iOS focus zoom */
  background:var(--night-deeper);color:var(--cream);
  transition:border-color .2s;
}
.capture-form input[type=email]::placeholder{color:#6b7382}
.capture-form input[type=email]:focus{border-color:var(--gold)}
.capture small{display:block;margin-top:14px;font-size:.8rem;color:var(--muted)}
@media(max-width:900px){
  .capture{grid-template-columns:1fr;padding:54px 30px}
  .capture-form{flex-direction:column}
}

/* faq */
.faq-list{margin-top:40px;border-top:1px solid var(--panel-edge)}
.faq-item{border-bottom:1px solid var(--panel-edge)}
.faq-item summary{
  list-style:none;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:26px 6px;font-weight:600;font-size:1.08rem;color:var(--cream-warm);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'+';font-family:var(--display);font-size:1.5rem;color:var(--gold);transition:rotate .25s}
.faq-item[open] summary::after{rotate:45deg}
.faq-item .faq-a{padding:0 6px 26px;color:var(--muted);line-height:1.7;max-width:46rem}

/* prose pages (about, legal) */
.prose{max-width:760px}
.prose h1{font-family:var(--display);font-weight:500;font-size:clamp(2.2rem,4.6vw,3.4rem);line-height:1.08;margin-bottom:18px}
.prose h1 em{font-style:italic;color:var(--gold-bright);font-weight:400}
.prose .lede{font-size:1.15rem;line-height:1.7;color:var(--muted);margin-bottom:34px}
.prose h2{font-size:1.6rem;margin:42px 0 12px;max-width:none}
.prose p{font-size:1rem;line-height:1.75;color:var(--muted);margin-bottom:16px}
.prose p strong{color:var(--cream-warm)}
.prose ul{margin:0 0 16px 22px;color:var(--muted);line-height:1.75}
.prose a{color:var(--gold-bright)}
.page-hero{padding-bottom:30px}
.updated{font-size:.82rem;color:var(--muted);letter-spacing:.04em;margin-top:18px}

/* mobile sticky buy bar (sales pages) */
.buybar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  display:none;align-items:center;justify-content:space-between;gap:14px;
  padding:12px 18px calc(12px + env(safe-area-inset-bottom));
  background:rgba(16,21,29,.94);backdrop-filter:blur(12px);
  border-top:1px solid var(--panel-edge);
}
.buybar .bb-price{font-family:var(--display);font-size:1.4rem;color:var(--gold-bright)}
.buybar .bb-price small{display:block;font-family:var(--body);font-size:.68rem;color:var(--muted)}
.buybar .btn{padding:12px 26px;font-size:.95rem;white-space:nowrap}
@media(max-width:760px){.buybar.show{display:flex}}

/* footer */
footer{background:var(--night-deeper);border-top:1px solid var(--panel-edge);margin-top:40px}
.foot-inner{max-width:1200px;margin:0 auto;padding:64px 24px 40px;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
.foot-brand .mark{width:64px;height:61px;margin-bottom:16px;filter:drop-shadow(0 0 24px rgba(227,179,91,.25))}
footer .wm{font-family:var(--display);font-size:1.3rem;color:var(--cream);margin-bottom:12px}
footer .wm em{color:var(--gold);font-style:normal}
footer p{font-size:.9rem;line-height:1.7;max-width:30rem;color:var(--muted)}
footer h4{font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:16px;font-weight:600}
footer ul{list-style:none;display:grid;gap:10px}
footer ul a{color:var(--cream-warm);text-decoration:none;font-size:.93rem;transition:color .2s;display:inline-block;padding:5px 0}
footer ul a:hover{color:var(--gold-bright)}
.foot-base{border-top:1px solid var(--panel-edge);margin-top:30px}
.foot-base-inner{max-width:1200px;margin:0 auto;padding:22px 24px;display:flex;justify-content:space-between;align-items:center;font-size:.8rem;color:var(--muted)}
@media(max-width:760px){.foot-inner{grid-template-columns:1fr;gap:36px}}

/* reveal — gated behind body.js so content is never hidden without JS */
body.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
body.js .reveal.in{opacity:1;transform:none}
body.js .hero .reveal{transition-delay:calc(var(--i,0)*90ms)}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  body.js .reveal{opacity:1;transform:none}
}