/* ============================================================
   SCARAB — scarab.city · site stylesheet v1
   Tokens inherit SCARAB_THEME_TOKENS_v1 (B 1.2). Oasis leads (§9),
   Light secondary. THE LAW (§2): themes restyle the stage, never
   the signal — the severity ramp is theme-invariant per stage class.
   ============================================================ */

/* ---------- tokens · Oasis (default stage) ---------- */
:root, [data-theme="oasis"]{
  --stage:#080503; --bg:#0B0704; --surface:#171008; --surface-2:#221809;
  --card:#1B1309;  --card-bd:#41311B;
  --line:#271D10;  --line-2:#41311B;
  --text:#F8F0E1;  --muted:#BCAB8E; --dim:#83745A; --faint:#514634;
  --brand:#E7A436;
  /* THE LAW: dark-stage severity ramp — identical to Dark */
  --low:#E6E0D2; --mod:#5FBF8A; --high:#E0B948; --vhigh:#EA843C; --crit:#E5544A;
  --warm:#D2B08A; --warm-bg:#241B10; --warm-bd:#52402A;
  --shadow:rgba(0,0,0,.82); color-scheme:dark;
  /* launch-sky night (§8) for the horizon */
  --sky-a:#030304; --sky-b:#100C08;
  --dune-1:#0C0906; --dune-2:#100C08; --dune-3:#15100A; --dune-4:#1A140C;
  --ridge:#3C2E1A; --star:#EFE6D2;
}

/* ---------- tokens · Light (secondary stage) ---------- */
[data-theme="light"]{
  --stage:#E6EAF2; --bg:#EFF2F8; --surface:#FFFFFF; --surface-2:#F5F7FC;
  --card:#FFFFFF;  --card-bd:#D7DEEA;
  --line:#E3E8F0;  --line-2:#D3DAE7;
  --text:#121829;  --muted:#586079; --dim:#8B94A7; --faint:#AFB7C7;
  --brand:#B8801C;
  /* THE LAW: light-stage calibrated ramp */
  --low:#8A8070; --mod:#1F9D5E; --high:#BC8410; --vhigh:#C5611F; --crit:#C8362B;
  --warm:#9A6B3C; --warm-bg:#FBF3E8; --warm-bd:#E6D3BC;
  --shadow:rgba(40,52,84,.18); color-scheme:light;
  --sky-a:#F6E9CC; --sky-b:#EFC183;
  --dune-1:#E3C691; --dune-2:#D4AF74; --dune-3:#C2985C; --dune-4:#AC8148;
  --ridge:#7E5F35; --star:#E7A436;
}

/* ---------- base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:"Hanken Grotesk",system-ui,sans-serif;
  font-size:15px; line-height:1.66;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
main{display:block}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline; text-underline-offset:3px}
:focus-visible{outline:2px solid var(--brand); outline-offset:3px; border-radius:2px}
::selection{background:color-mix(in srgb, var(--brand) 32%, transparent)}
img,svg{display:block; max-width:100%}

.wrap{max-width:1060px; margin:0 auto; padding:0 24px}
.prose{max-width:64ch}
.prose p{margin:0 0 1.1em; color:color-mix(in srgb, var(--text) 90%, transparent)}
.prose p:last-child{margin-bottom:0}

/* type roles (§7) */
h1,h2,h3{font-family:"Fraunces",serif; font-weight:500; line-height:1.12; margin:0}
h1{font-size:clamp(34px,5.2vw,58px); font-variation-settings:"opsz" 72,"SOFT" 50,"WONK" 0; letter-spacing:-.01em}
h2{font-size:clamp(24px,3vw,34px); font-variation-settings:"opsz" 72,"SOFT" 50,"WONK" 0}
h3{font-size:19px; font-variation-settings:"opsz" 40,"SOFT" 40,"WONK" 0}
.lede{font-size:17px; color:var(--muted); max-width:56ch}

.stamp{
  font-family:"IBM Plex Mono",monospace; font-size:11px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--dim);
}
.eyebrow{composes:stamp}
.eyebrow, .stamp{font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase}
.eyebrow{color:var(--brand); font-weight:500}

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:20;
  background:color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-in{display:flex; align-items:center; justify-content:space-between; height:60px}
.wordmark{
  font-family:"Fraunces",serif; font-weight:430; font-size:17px;
  font-variation-settings:"opsz" 40,"SOFT" 40,"WONK" 0;
  letter-spacing:.26em; color:var(--text); text-transform:uppercase;
}
.wordmark:hover{text-decoration:none; color:var(--brand)}
.nav-links{display:flex; align-items:center; gap:26px}
.nav-links a{color:var(--muted); font-size:14px; font-weight:500}
.nav-links a:hover{color:var(--text); text-decoration:none}
.nav-links a[aria-current="page"]{color:var(--text)}
.theme-btn{
  appearance:none; background:none; border:1px solid var(--line-2); color:var(--muted);
  font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; padding:7px 12px; border-radius:999px; cursor:pointer;
}
.theme-btn:hover{color:var(--text); border-color:var(--dim)}

/* ---------- hero (home) ---------- */
.hero{position:relative; overflow:hidden; border-bottom:1px solid var(--line)}
.hero-in{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;
  padding:88px 0 132px;
}
.hero h1{max-width:12ch}
.hero .lede{margin:22px 0 30px}
.cta-row{display:flex; align-items:center; gap:18px; flex-wrap:wrap}
.btn{
  display:inline-block; background:var(--brand); color:#080503;
  font-weight:600; font-size:14px; padding:12px 22px; border-radius:999px;
  border:1px solid color-mix(in srgb, var(--brand) 70%, #000);
}
.btn:hover{text-decoration:none; filter:brightness(1.07)}
[data-theme="light"] .btn{background:var(--text);border-color:var(--text);color:#FFFDF7}
.chip{
  font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--warm); background:var(--warm-bg);
  border:1px solid var(--warm-bd); padding:7px 12px; border-radius:999px;
}

/* horizon — the launch-sky field (§8), the site's one signature */
.horizon{position:absolute; inset:auto 0 0 0; height:46%; z-index:0; pointer-events:none}
[data-theme="light"] .horizon,[data-theme="light"] .glade,[data-theme="light"] .star,[data-theme="light"] .hero::before{display:none}
[data-theme="light"] .hero-in{padding-bottom:88px}
.horizon svg{width:100%; height:100%}
.hero::before{ /* sky wash */
  content:""; position:absolute; inset:0 0 46% 0; z-index:0;
  background:linear-gradient(var(--sky-a), var(--sky-b));
  opacity:.55;
}
.glade{ /* the light at the horizon — gold, quiet */
  position:absolute; z-index:1; left:12%; bottom:34%;
  width:340px; height:180px; pointer-events:none;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--brand) 26%, transparent), transparent 72%);
}
.star{position:absolute; z-index:1; top:64px; right:14%; color:var(--star); opacity:.9}

/* ---------- the card (dyad mock) ---------- */
.card{
  --accent:var(--low); --k:0.8; /* calm .5 × 1.6 dark-stage multiplier (§6) */
  position:relative; z-index:2;
  border:1px solid var(--card-bd); border-radius:18px; padding:26px 26px 20px;
  box-shadow:0 30px 60px -30px var(--shadow);
  background:
    radial-gradient(135% 95% at 50% 10%,  color-mix(in srgb, var(--accent) calc(30% * var(--k)), transparent), transparent 64%),
    radial-gradient(120% 80% at 50% 116%, color-mix(in srgb, var(--accent) calc(15% * var(--k)), transparent), transparent 60%),
    var(--card);
}
[data-theme="light"] .card{--k:0.5}
.card-top{display:flex; justify-content:space-between; align-items:baseline; gap:12px}
.card-city{font-family:"Fraunces",serif; font-weight:500; font-size:20px;
  font-variation-settings:"opsz" 40,"SOFT" 40,"WONK" 0; letter-spacing:.04em}
.card-city small{display:block; font-family:"Hanken Grotesk",sans-serif; font-weight:500;
  font-size:11px; letter-spacing:.18em; color:var(--dim); margin-top:3px}
.score-row{display:flex; align-items:baseline; gap:20px; margin:10px 0 2px}
.score{
  font-family:"Fraunces",serif; font-weight:330; font-size:104px; line-height:1;
  font-variation-settings:"opsz" 144,"SOFT" 60,"WONK" 1;
  font-variant-numeric:tabular-nums lining-nums;
  color:var(--accent);
}
.tier{display:flex; flex-direction:column; gap:6px; padding-bottom:10px}
.tier-word{font-family:"IBM Plex Mono",monospace; font-size:12px; font-weight:500;
  letter-spacing:.22em; color:var(--accent)}
.trend{font-size:13px; color:var(--muted)}
.trend .arrow{color:var(--dim)} /* stable → rides muted per §4 */
.card-brief{margin:12px 0 16px; color:color-mix(in srgb, var(--text) 88%, transparent); font-size:14.5px; max-width:44ch}
.card-foot{display:flex; justify-content:space-between; gap:12px; border-top:1px solid var(--line);
  padding-top:12px}
.disclaimer{margin-top:14px; font-size:12px; color:var(--dim); text-align:center}

/* ---------- sections ---------- */
.section{padding:84px 0; border-bottom:1px solid var(--line)}
.section:last-of-type{border-bottom:0}
.section-head{margin-bottom:40px}
.section-head .eyebrow{display:block; margin-bottom:14px}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:40px}
.beat h3{margin-bottom:10px}
.beat h3 .g{color:var(--brand)}
.beat p{color:var(--muted); margin:0}

.trust{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start}
.pipeline{display:flex; flex-direction:column; gap:0; margin-top:6px}
.pipe-step{display:flex; gap:16px; align-items:flex-start; padding:16px 0; border-top:1px solid var(--line)}
.pipe-step:last-child{border-bottom:1px solid var(--line)}
.pipe-step .stamp{padding-top:3px; min-width:104px; color:var(--brand)}
.pipe-step p{margin:0; color:var(--muted); font-size:14px}
.pipe-step strong{color:var(--text); font-weight:600}

/* ---------- method page ---------- */
.page-head{padding:72px 0 48px; border-bottom:1px solid var(--line)}
.page-head .lede{margin-top:18px}
.ruler{margin:34px 0 10px}
.ruler-bar{display:flex; height:12px; border-radius:999px; overflow:hidden; border:1px solid var(--line-2)}
.ruler-bar span{display:block; height:100%}
.r-low{flex:2;   background:var(--low)}
.r-mod{flex:2;   background:var(--mod)}
.r-high{flex:1;  background:var(--high)}
.r-vhigh{flex:3; background:var(--vhigh)}
.r-crit{flex:2;  background:var(--crit)}
.ruler-ticks{display:flex; justify-content:space-between; margin-top:8px}
.ruler-ticks .stamp{letter-spacing:.08em}
.ruler-words{display:flex; margin-top:14px}
.ruler-words span{font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.16em; color:var(--muted)}
.rw-low{flex:2}.rw-mod{flex:2}.rw-high{flex:1}.rw-vhigh{flex:3}.rw-crit{flex:2; text-align:right}
.note{font-size:13px; color:var(--dim); max-width:60ch}

.dont{list-style:none; margin:0; padding:0}
.dont li{padding:14px 0 14px 30px; border-top:1px solid var(--line); position:relative; color:var(--muted)}
.dont li:last-child{border-bottom:1px solid var(--line)}
.dont li::before{content:"—"; position:absolute; left:0; color:var(--brand)}
.dont li strong{color:var(--text); font-weight:600}

/* ---------- support / faq ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:20px;
  padding:20px 0; font-family:"Fraunces",serif; font-weight:500; font-size:18px;
  font-variation-settings:"opsz" 40,"SOFT" 40,"WONK" 0;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--brand); font-family:"Hanken Grotesk",sans-serif; font-weight:400}
.faq details[open] summary::after{content:"–"}
.faq .prose{padding:0 0 22px; color:var(--muted)}
.faq .prose p{color:var(--muted)}

/* ---------- legal pages ---------- */
.legal h2{font-size:21px; margin:44px 0 12px}
.legal h2:first-of-type{margin-top:0}
.legal .prose p, .legal li{color:var(--muted)}
.legal ul{padding-left:20px; margin:0 0 1.1em}
.pending{
  border:1px dashed var(--warm-bd); background:var(--warm-bg); color:var(--warm);
  border-radius:12px; padding:16px 18px; font-size:13.5px; margin:14px 0;
}
.updated{margin-top:56px}

/* ---------- footer ---------- */
.footer{border-top:1px solid var(--line); background:var(--stage)}
.footer-in{display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:40px; padding:56px 0 28px}
.footer .wordmark{font-size:14px}
.f-tag{margin-top:14px; color:var(--dim); font-size:13px; max-width:30ch}
.f-col h4{font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--dim); margin:0 0 14px; font-weight:500}
.f-col a{display:block; color:var(--muted); font-size:14px; padding:5px 0}
.f-col a:hover{color:var(--text); text-decoration:none}
.footer-base{border-top:1px solid var(--line); padding:20px 0 26px;
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap}
.footer-base .stamp{font-size:10px}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .hero-in{grid-template-columns:1fr; gap:48px; padding:64px 0 120px}
  .grid-3{grid-template-columns:1fr; gap:32px}
  .trust{grid-template-columns:1fr; gap:36px}
  .footer-in{grid-template-columns:1fr; gap:32px}
  .score{font-size:88px}
}
@media (max-width:520px){
  .nav-links{gap:16px}
  .nav-links a.hide-s{display:none}
  .hero-in{padding:48px 0 110px}
  .section{padding:64px 0}
  .card{padding:22px 20px 16px}
  .card-foot{flex-direction:column; gap:6px}
}