/* ==========================================================================
   PREMIUM LAYER
   Dark product surfaces, depth, and motion. Loaded after every other
   stylesheet so it wins without !important.
   ========================================================================== */

:root{
  /* Dark surfaces — product, code, console, proof */
  --void:        #0A0A0C;
  --void-2:      #101013;
  --void-3:      #17171B;
  --void-line:   rgba(255,255,255,.07);
  --void-line-2: rgba(255,255,255,.13);
  --void-text:   rgba(255,255,255,.72);
  --void-dim:    rgba(255,255,255,.44);
  --void-faint:  rgba(255,255,255,.22);

  /* Accent on dark reads brighter than the print gold */
  --gold-lit:    #E09A47;
  --gold-glow:   rgba(224,154,71,.14);

  --ok:          #4ADE80;
  --ok-bg:       rgba(74,222,128,.10);
  --bad:         #F87171;
  --bad-bg:      rgba(248,113,113,.10);
  --warn-lit:    #FBBF24;
  --warn-bg:     rgba(251,191,36,.10);

  /* Depth — four levels, used consistently */
  --lift-1: 0 1px 2px rgba(20,16,10,.04);
  --lift-2: 0 2px 6px rgba(20,16,10,.05), 0 8px 24px rgba(20,16,10,.05);
  --lift-3: 0 4px 12px rgba(20,16,10,.07), 0 18px 48px rgba(20,16,10,.08);
  --lift-4: 0 8px 24px rgba(20,16,10,.10), 0 36px 90px rgba(20,16,10,.12);
  --lift-dark: 0 20px 60px rgba(0,0,0,.45), 0 4px 14px rgba(0,0,0,.30);

  --e-out:  cubic-bezier(.16,1,.3,1);
  --e-soft: cubic-bezier(.33,1,.68,1);
}

/* ══════════════════════════════════════════════ DARK SECTIONS ═══ */

.section--void{
  background:var(--void);
  color:var(--void-text);
  position:relative;
  overflow:hidden;
}
.section--void::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 480px at 78% -8%, var(--gold-glow), transparent 68%),
    radial-gradient(640px 420px at 6% 104%, rgba(224,154,71,.06), transparent 62%);
  pointer-events:none;
}
.section--void > *{position:relative;z-index:1}

.section--void h1,
.section--void h2,
.section--void h3,
.section--void h4{color:#fff}
.section--void .lead,
.section--void p{color:var(--void-text)}
.section--void .accent{color:var(--gold-lit)}
.section--void .eyebrow{color:var(--gold-lit)}
.section--void .eyebrow::before{background:var(--gold-lit);opacity:.6}
.section--void .sec-head{border-color:var(--void-line)}

/* Hairline that fades at both ends — used to separate dark bands */
.void-rule{
  height:1px;
  background:linear-gradient(90deg,transparent,var(--void-line-2) 18%,var(--void-line-2) 82%,transparent);
  margin-block:clamp(40px,5vh,64px);
}

/* ══════════════════════════════════════════════════ 3D CARDS ═══ */

.tilt{
  transform-style:preserve-3d;
  will-change:transform;
  transition:transform .5s var(--e-out), box-shadow .5s var(--e-out);
}
.tilt__in{transform:translateZ(0);transition:transform .5s var(--e-out)}
.tilt:hover .tilt__in{transform:translateZ(26px)}

/* Cause cards get real depth rather than a 1px outline */
.cause{
  position:relative;
  background:var(--white);
  border:1px solid var(--line);
  box-shadow:var(--lift-1);
  transition:transform .55s var(--e-out),
             box-shadow .55s var(--e-out),
             border-color .55s var(--e-out);
  overflow:hidden;
}
.cause::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(200,125,46,.055), transparent 46%);
  opacity:0;
  transition:opacity .55s var(--e-out);
  pointer-events:none;
}
.cause:hover{
  transform:translateY(-6px);
  box-shadow:var(--lift-3);
  border-color:var(--line-gold);
}
.cause:hover::after{opacity:1}

/* Top edge lights up on hover */
.cause::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:2px;
  background:linear-gradient(90deg,var(--gold),var(--gold-pale));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .6s var(--e-out);
}
.cause:hover::before{transform:scaleX(1)}

.ind{
  box-shadow:var(--lift-1);
  transition:transform .55s var(--e-out),
             box-shadow .55s var(--e-out),
             border-color .55s var(--e-out);
}
.ind:hover{transform:translateY(-5px);box-shadow:var(--lift-3)}

.postcard{
  box-shadow:var(--lift-1);
  transition:transform .55s var(--e-out),
             box-shadow .55s var(--e-out),
             border-color .55s var(--e-out);
}
.postcard:hover{transform:translateY(-5px);box-shadow:var(--lift-3)}

/* ══════════════════════════════════════ TERMINAL / PRODUCT ═══ */

.term{
  background:var(--void-2);
  border:1px solid var(--void-line);
  border-radius:2px;
  box-shadow:var(--lift-dark);
  overflow:hidden;
  transform-style:preserve-3d;
}
.term__bar{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 18px;
  background:var(--void-3);
  border-bottom:1px solid var(--void-line);
}
.term__lights{display:flex;gap:6px}
.term__lights i{
  width:9px;height:9px;border-radius:50%;
  background:var(--void-line-2);
  display:block;
}
.term__lights i:first-child{background:rgba(248,113,113,.45)}
.term__lights i:nth-child(2){background:rgba(251,191,36,.45)}
.term__lights i:last-child{background:rgba(74,222,128,.42)}
.term__name{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.06em;
  color:var(--void-dim);
  margin:0;
}
.term__tag{
  margin-left:auto;
  font-family:var(--font-mono);
  font-size:9px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold-lit);
  border:1px solid rgba(224,154,71,.28);
  padding:3px 9px;
  border-radius:2px;
}
.term__body{
  padding:clamp(18px,2.2vw,26px);
  font-family:var(--font-mono);
  font-size:12.5px;
  line-height:2;
  color:var(--void-text);
  overflow-x:auto;
}
@media(max-width:640px){
  .term__body{font-size:10.5px;line-height:1.95;padding:16px}
}

.term__line{display:block;white-space:pre;opacity:0;transform:translateY(4px)}
.term__line.is-in{
  opacity:1;transform:none;
  transition:opacity .5s var(--e-soft), transform .5s var(--e-soft);
}
.tl-dim{color:var(--void-faint)}
.tl-gold{color:var(--gold-lit)}
.tl-ok{color:var(--ok)}
.tl-bad{color:var(--bad)}
.tl-warn{color:var(--warn-lit)}
.tl-white{color:#fff}

.term__cursor{
  display:inline-block;
  width:7px;height:14px;
  background:var(--gold-lit);
  vertical-align:text-bottom;
  animation:blink 1.1s steps(2,start) infinite;
}
@keyframes blink{0%,50%{opacity:1}51%,100%{opacity:0}}

/* Code blocks go dark everywhere */
.codeblock{
  background:var(--void-2);
  border:1px solid var(--void-line);
  border-left:2px solid var(--gold-lit);
  box-shadow:var(--lift-3);
  border-radius:2px;
}
.section--alt .codeblock,
.section--void .codeblock{background:var(--void-2)}
.codeblock__label{
  border-bottom:1px solid var(--void-line);
  color:var(--gold-lit);
  background:var(--void-3);
}
.codeblock__pre{color:var(--void-text)}

/* ══════════════════════════════════════════════ CONSOLE DARK ═══ */

.cons{
  background:var(--void-2);
  border:1px solid var(--void-line);
  box-shadow:var(--lift-dark);
  border-radius:2px;
}
.section--alt .cons{background:var(--void-2)}
.cons__bar{background:var(--void-3);border-bottom:1px solid var(--void-line)}
.cons__path{color:var(--void-dim)}
.cons__mode{color:var(--gold-lit)}
.cons__dot{background:var(--gold-lit);box-shadow:0 0 10px var(--gold-glow)}

.cstat__n{color:#fff}
.cstat__to{color:var(--gold-lit)}
.cstat__u{color:var(--void-dim)}
.cstat__l{color:var(--void-dim)}
.cons__stats{border-bottom:1px solid var(--void-line)}

.cons__table thead th{
  color:var(--void-faint);
  border-bottom:1px solid var(--void-line-2);
}
.cons__table tbody td{
  color:var(--void-text);
  border-bottom:1px solid var(--void-line);
}
.cons__table .mono{color:#fff}
.cons__num{color:#fff}
.cons__table tbody tr{transition:background .3s var(--e-out)}
.cons__table tbody tr:hover{background:rgba(255,255,255,.028)}
.cons__foot{color:var(--void-dim);border-top:1px solid var(--void-line)}
.cons__foot em{color:var(--void-text)}

.cpath{border-bottom:1px solid var(--void-line)}
.cpath__head{color:var(--void-dim)}
.cpath__chain{color:#fff}
.cpath__chain .mono{background:var(--void-3);color:var(--gold-lit)}
.cpath__arrow{color:var(--gold-lit)}
.cpath__meta{color:var(--void-faint)}
.cpath__fix{color:var(--void-dim);border-left-color:rgba(224,154,71,.3)}

/* Pills on dark */
.cons .pill,
.term .pill{border-radius:2px}
.cons .pill--ready,.cons .pill--allow{background:var(--ok-bg);color:var(--ok)}
.cons .pill--deny,.cons .pill--crit{background:var(--bad-bg);color:var(--bad)}
.cons .pill--learn,.cons .pill--esc,
.cons .pill--warn,.cons .pill--sig{background:var(--warn-bg);color:var(--warn-lit)}

/* ══════════════════════════════════════════════ STAT COUNTERS ═══ */

.statband .stat{
  position:relative;
  padding-left:22px;
}
.statband .stat::before{
  content:'';
  position:absolute;
  left:0;top:4px;bottom:4px;
  width:2px;
  background:linear-gradient(180deg,var(--gold),transparent);
  transform:scaleY(0);
  transform-origin:top;
  transition:transform .9s var(--e-out);
}
.statband .stat.is-visible::before{transform:scaleY(1)}
.section--void .stat__num{color:#fff}
.section--void .stat__label{color:var(--void-dim)}
.section--void .statband{border-top-color:var(--void-line)}
.section--void .statband .stat::before{
  background:linear-gradient(180deg,var(--gold-lit),transparent);
}

/* ══════════════════════════════════════════════════ BUTTONS ═══ */

.btn{
  position:relative;
  overflow:hidden;
  border-radius:2px;
  isolation:isolate;
}
.btn--primary{box-shadow:var(--lift-2)}
.btn--primary::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,var(--gold-deep),var(--gold));
  opacity:0;
  transition:opacity .5s var(--e-out);
  z-index:-1;
}
.btn--primary:hover::before{opacity:1}
.btn--primary:hover{box-shadow:var(--lift-3);border-color:transparent}

.section--void .btn--ghost{
  color:#fff;
  border-color:var(--void-line-2);
}
.section--void .btn--ghost:hover{
  color:var(--gold-lit);
  border-color:var(--gold-lit);
  background:rgba(224,154,71,.06);
}
.section--void .btn--primary{background:var(--gold);border-color:var(--gold);color:#0A0A0C}
.section--void .btn--primary:hover{color:#0A0A0C}

/* ══════════════════════════════════════════════════ MOTION ═══ */

/* Reveal — slower, with a slight scale so it reads as depth not just fade */
.rv{
  opacity:0;
  transform:translateY(22px) scale(.995);
  transition:opacity .9s var(--e-out), transform .9s var(--e-out);
}
.rv.is-visible{opacity:1;transform:none}

.rv-stagger > *{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .85s var(--e-out), transform .85s var(--e-out);
}
.rv-stagger.is-visible > *{opacity:1;transform:none}
.rv-stagger.is-visible > *:nth-child(1){transition-delay:0s}
.rv-stagger.is-visible > *:nth-child(2){transition-delay:.08s}
.rv-stagger.is-visible > *:nth-child(3){transition-delay:.16s}
.rv-stagger.is-visible > *:nth-child(4){transition-delay:.24s}
.rv-stagger.is-visible > *:nth-child(5){transition-delay:.32s}
.rv-stagger.is-visible > *:nth-child(6){transition-delay:.40s}
.rv-stagger.is-visible > *:nth-child(7){transition-delay:.48s}
.rv-stagger.is-visible > *:nth-child(8){transition-delay:.56s}
.rv-stagger.is-visible > *:nth-child(9){transition-delay:.64s}

/* Scroll progress — a single hairline, no chrome */
.progress{
  position:fixed;
  top:0;left:0;
  height:2px;
  width:0;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold-pale));
  z-index:200;
  transition:width .12s linear;
  pointer-events:none;
}

/* ══════════════════════════════════════════════════ NAV ═══ */

/* The navbar's surface lives in navbar.css (a floating pill drawn on ::before). */
.nav__drop-link{transition:background .3s var(--e-out)}

/* ══════════════════════════════════════════════════ HERO ═══ */

.hero{position:relative}
.hero__title{letter-spacing:-.026em}

/* Parallax on the hero visual — set by JS */
.hero__par{will-change:transform}

/* ══════════════════════════════════════════════ SPLIT BAND ═══ */

.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:clamp(36px,5vw,84px);
}
.split--wide{grid-template-columns:.85fr 1.15fr}
@media(max-width:940px){
  .split,.split--wide{grid-template-columns:1fr;gap:40px}
}
.split__copy h2{max-width:17ch}
.split__copy .lead{max-width:52ch;margin-top:20px}

/* ══════════════════════════════════════════ DIAGRAM NODES ═══ */

.flow{
  display:flex;
  align-items:center;
  gap:clamp(10px,1.6vw,20px);
  flex-wrap:wrap;
  padding:clamp(22px,3vw,34px) 0;
}
.flow__node{
  flex:1 1 160px;
  min-width:0;
  padding:16px 18px;
  background:var(--void-3);
  border:1px solid var(--void-line);
  border-radius:2px;
  transition:border-color .5s var(--e-out), transform .5s var(--e-out);
}
.flow__node:hover{border-color:rgba(224,154,71,.35);transform:translateY(-3px)}
.flow__node--deny{border-color:rgba(248,113,113,.3);background:rgba(248,113,113,.05)}
.flow__k{
  font-family:var(--font-mono);
  font-size:9px;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--void-faint);
  margin-bottom:7px;
}
.flow__v{
  font-family:var(--font-mono);
  font-size:12px;
  color:#fff;
  margin:0;
  word-break:break-word;
}
.flow__node--deny .flow__v{color:var(--bad)}
.flow__arrow{
  color:var(--gold-lit);
  font-size:15px;
  flex:0 0 auto;
}
@media(max-width:700px){
  .flow{flex-direction:column;align-items:stretch}
  .flow__arrow{transform:rotate(90deg);align-self:center}
}

/* ══════════════════════════════════════════════ GAP METER ═══ */

.meter{margin-top:clamp(26px,3vh,38px)}
.meter__row{margin-bottom:22px}
.meter__row:last-child{margin-bottom:0}
.meter__k{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--void-dim);
  margin-bottom:10px;
}
.meter__n{font-size:15px;color:#fff;letter-spacing:0}
.meter__track{
  height:6px;
  background:rgba(255,255,255,.055);
  border-radius:1px;
  overflow:hidden;
}
.meter__fill{
  height:100%;
  width:0;
  border-radius:1px;
  transition:width 1.5s var(--e-out);
}
.meter__fill--held{background:linear-gradient(90deg,rgba(248,113,113,.55),rgba(248,113,113,.28))}
.meter__fill--used{background:linear-gradient(90deg,var(--ok),rgba(74,222,128,.42))}

/* ══════════════════════════════════════════════ QUOTE BAND ═══ */

.qband{
  text-align:center;
  padding-block:clamp(72px,10vh,124px);
}
.qband__t{
  font-family:var(--font-display);
  font-size:clamp(26px,3.4vw,46px);
  line-height:1.32;
  color:#fff;
  max-width:22ch;
  margin-inline:auto;
  letter-spacing:-.018em;
}
.qband__s{
  margin-top:24px;
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gold-lit);
}

/* ══════════════════════════════════════════════════ CEILING ═══ */

.ceiling{box-shadow:var(--lift-2);border-radius:2px;overflow:hidden}
.ceiling tbody tr{transition:background .35s var(--e-out)}
.ceiling tbody tr:hover{background:var(--gold-wash)}
.ceiling__mark td{position:relative}

/* ══════════════════════════════════════════════════ NOTE ═══ */

.note{border-radius:2px}
.section--void .note{
  background:rgba(224,154,71,.07);
  border-left-color:var(--gold-lit);
  color:var(--void-text);
}
.section--void .note strong{color:#fff}
.section--void .note--plain{background:none;border-left-color:var(--void-line-2)}

/* ══════════════════════════════════════════════════ FOOTER ═══ */

.footer{
  background:var(--void);
  color:var(--void-text);
  border-top:0;
  position:relative;
  overflow:hidden;
}
.footer::before{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(760px 340px at 12% 0%, rgba(224,154,71,.07), transparent 66%);
  pointer-events:none;
}
.footer .wrap{position:relative;z-index:1}
.footer__brand{color:#fff}
.footer__brand span{color:var(--gold-lit)}
.footer__blurb{color:var(--void-dim)}
.footer__loc{color:var(--void-faint)}
.footer__col-title{color:var(--gold-lit)}
.footer__link{color:var(--void-dim);transition:color .35s var(--e-out)}
.footer__link:hover{color:#fff}
.footer__top{border-bottom-color:var(--void-line)}
.footer__bottom{border-top-color:var(--void-line);color:var(--void-faint)}
.footer__legal a{color:var(--void-faint)}
.footer__legal a:hover{color:var(--gold-lit)}
.footer__social a{
  border-color:var(--void-line-2);
  color:var(--void-dim);
  transition:border-color .35s var(--e-out), color .35s var(--e-out);
}
.footer__social a:hover{border-color:var(--gold-lit);color:var(--gold-lit)}

/* ══════════════════════════════════════════════ ACCESSIBILITY ═══ */

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
  }
  .rv,.rv-stagger > *{opacity:1 !important;transform:none !important}
  .tilt{transform:none !important}
  .term__line{opacity:1 !important;transform:none !important}
}

/* Touch devices get no tilt — it fights with scrolling */
@media(hover:none){
  .tilt{transform:none !important}
  .tilt__in{transform:none !important}
  .cause:hover,.ind:hover,.postcard:hover{transform:none}
}

/* ---- Post byline -------------------------------------------------------- */
.post__by{
  margin-top:26px;
  padding-top:20px;
  border-top:1px solid var(--line);
  font-size:13.5px;
  color:var(--ink-2);
}
.post__by span{color:var(--muted);font-size:12.5px}

/* Prose code blocks sit flush in the reading column */
.prose .codeblock{margin-block:clamp(28px,3.6vh,44px)}

/* ---- Type scale lock: one size per heading level, on every page --------- */
.cause__title,.finding__title,.module__title,.row__title,.ref-step__t{font-size:var(--fs-h3)}
.postcard__title{font-size:var(--fs-doc-h)}