/* ============================================================
   THE HONEST ENGINE — SECOND EDITION
   shaquillegurung.com · design system
   ------------------------------------------------------------
   The page performs trustworthy AI instead of describing it.
   Certainty = crisp, still, opaque ink. Uncertainty = lighter,
   translucent, faintly trembling. The machine speaks monospace;
   the founder speaks serif. Green is a guarantee, sienna is an
   admitted limit — neither ever decorates.
   ============================================================ */

/* ------------------------------------------------------------
   0 · FONTS — self-hosted variable faces, latin subsets.
   The live axes (wght / opsz / SOFT) are the design: the
   proximity thesis and confidence-weighted tokens depend on them.
   ------------------------------------------------------------ */
@font-face{
  font-family:"Fraunces";
  src:url("/fonts/fraunces-roman.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Fraunces";
  src:url("/fonts/fraunces-italic.woff2") format("woff2");
  font-weight:100 900; font-style:italic; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Hanken Grotesk";
  src:url("/fonts/hanken-roman.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Geist Mono";
  src:url("/fonts/geist-mono.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ------------------------------------------------------------
   1 · TOKENS
   ------------------------------------------------------------ */
:root{
  /* color — warm-paper near-monochrome, two semantic accents */
  --paper:#F4F1EA;        /* warm bone ground */
  --paper-sunk:#ECE6DA;   /* recessed panels / evidence cards */
  --ink:#1A1714;          /* warm near-black — high-confidence voice */
  --ink-mid:#6E665C;      /* secondary voice */
  --uncertain:#A89F90;    /* low-confidence — short secondary text only,
                             always reinforced by motion + a textual label */
  --hairline:rgba(26,23,20,.14);
  --field-line:rgba(26,23,20,.42); /* input boundaries — clears WCAG 1.4.11 (3:1) on paper */
  --baseline:rgba(26,23,20,.06);
  --verified:#2F6B4F;     /* deep botanical green — confirmed-true ONLY */
  --flag:#A34420;         /* burnt sienna — admitted limits ONLY. Darkened from #B4532A
                             so its small-text uses clear AA (4.5:1) on paper and sunk;
                             still unmistakably sienna at the hero-accent size. */
  --bg:var(--paper);
  --bg-sunk:var(--paper-sunk);

  /* type — founder serif / reading grotesk / machine mono */
  --serif:"Fraunces","Iowan Old Style",Georgia,"Times New Roman",serif;
  --sans:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"Geist Mono",ui-monospace,"SF Mono","Cascadia Code",Menlo,monospace;

  /* fluid modular scale — minor third → perfect fourth */
  --step--1:clamp(0.78rem,0.74rem + 0.18vw,0.9rem);
  --step-0: clamp(1rem,0.95rem + 0.3vw,1.2rem);
  --step-1: clamp(1.2rem,1.08rem + 0.6vw,1.6rem);
  --step-2: clamp(1.5rem,1.25rem + 1.1vw,2.4rem);
  --step-3: clamp(1.95rem,1.4rem + 2.4vw,3.6rem);
  --hero:   clamp(2.6rem,1.15rem + 7.1vw,8.4rem);

  /* space — 8px base */
  --sp-1:4px; --sp-2:8px; --sp-3:16px; --sp-4:24px;
  --sp-5:32px; --sp-6:48px; --sp-7:64px; --sp-8:96px; --sp-9:128px;

  /* radii — instrument-sharp */
  --r-1:2px; --r-2:3px;

  /* motion primitives — every animation draws from these */
  --ease-out:cubic-bezier(0.22,0.61,0.36,1);   /* entrances: decisive, settles */
  --ease-inout:cubic-bezier(0.65,0,0.35,1);    /* state changes */
  --ease-lift:cubic-bezier(0.34,1.56,0.64,1);  /* micro spring: hover / press */
  --t-1:120ms;  /* instant feedback */
  --t-2:220ms;  /* micro-interaction */
  --t-3:450ms;  /* component state */
  --t-4:700ms;  /* section element */
  --t-5:1000ms; /* hero-scale reveal */

  --maxw:1180px;
  --margin-w:clamp(56px,7vw,96px);
}

html[data-theme="dark"]{
  --paper:#14130F;         /* warm graphite, never blue-black */
  --paper-sunk:#1E1C16;
  --ink:#F2EFE7;
  --ink-mid:#A39A8C;
  --uncertain:#8C8475;
  --hairline:rgba(242,239,231,.16);
  --field-line:rgba(242,239,231,.44); /* input boundaries — 3:1 on graphite */
  --baseline:rgba(242,239,231,.07);
  --verified:#4FA37E;      /* brightened for AA on dark ground */
  --flag:#D9774B;
  --bg:var(--paper);
  --bg-sunk:var(--paper-sunk);
}

/* ------------------------------------------------------------
   2 · BASE
   ------------------------------------------------------------ */
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  font-size:var(--step-0);
  line-height:1.55;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  transition:background var(--t-3) var(--ease-inout),color var(--t-3) var(--ease-inout);
}
::selection{background:var(--verified);color:var(--paper);}
a{color:inherit;text-decoration:none;}
h1,h2,h3{margin:0;font-family:var(--serif);font-weight:480;letter-spacing:-0.03em;line-height:0.97;}
button{font:inherit;}

/* keep the UA outline as a fallback where :focus-visible is unsupported (older Safari):
   only the :not(:focus-visible) rule is dropped there, so focus is never invisible. */
:focus-visible{outline:2px solid var(--verified);outline-offset:3px;border-radius:var(--r-1);}
:focus:not(:focus-visible){outline:none;}

/* visually-hidden but announced to assistive tech */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.skip-link{
  position:fixed;top:10px;left:10px;z-index:100;
  transform:translateY(-200%);
  background:var(--ink);color:var(--paper);
  font-family:var(--mono);font-size:12px;letter-spacing:.04em;
  padding:10px 14px;border-radius:var(--r-1);
  transition:transform var(--t-2) var(--ease-out);
}
.skip-link:focus{transform:none;outline:2px solid var(--verified);outline-offset:2px;}

/* machine voice */
.mono{font-family:var(--mono);font-feature-settings:"ss01";letter-spacing:0.01em;}
.kicker{
  font-family:var(--mono);text-transform:uppercase;letter-spacing:0.1em;
  font-size:var(--step--1);color:var(--ink-mid);font-weight:400;
}

/* paper grain — the only texture. A tiled SVG-noise background (not an inline
   SVG element: default filter-region sizing paints a visible seam there). */
.grain{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  opacity:.03;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat:repeat;
}
html[data-theme="dark"] .grain{mix-blend-mode:screen;opacity:.04;}

/* ------------------------------------------------------------
   3 · MOTION STATES
   theme-boot.js adds html.motion-on before first paint (JS on,
   reduced-motion off). If site.js never runs, the failsafe class
   forces everything visible — content can never be lost to motion.
   ------------------------------------------------------------ */
html.motion-on .reveal{opacity:0;}
html.reveal-failsafe .reveal{opacity:1 !important;transform:none !important;clip-path:none !important;}

/* ------------------------------------------------------------
   4 · SHELL & CHROME
   ------------------------------------------------------------ */
.shell{
  position:relative;z-index:1;
  max-width:var(--maxw);margin:0 auto;
  padding:0 clamp(20px,4vw,56px);
}
.page{margin-left:var(--margin-w);}
@media (max-width:768px){.page{margin-left:0;}}

/* left margin index — the running chrome of an instrument */
.margin-index{
  position:fixed;top:0;left:0;bottom:0;width:var(--margin-w);z-index:40;
  display:flex;flex-direction:column;justify-content:space-between;align-items:center;
  padding:22px 0;border-right:1px solid var(--hairline);
  /* near-opaque paper, no backdrop blur — keeps the rail cheap to composite while
     scrolling, and the brief rules out glassmorphism anyway */
  background:color-mix(in srgb,var(--bg) 92%,transparent);
}
.mi-progress{ /* how far you've read — a plain measurement, in ink */
  position:absolute;top:0;right:-1px;width:1px;height:100%;
  background:var(--ink);opacity:.55;
  transform:scaleY(0);transform-origin:top;
}
.mi-mark{font-family:var(--serif);font-weight:600;font-size:18px;letter-spacing:-0.04em;}
.mi-nav{display:flex;flex-direction:column;gap:14px;align-items:center;}
.mi-nav a{
  font-family:var(--mono);font-size:11px;color:var(--ink-mid);letter-spacing:0.04em;
  transition:color var(--t-2) var(--ease-out),transform var(--t-2) var(--ease-out);
  position:relative;
}
.mi-nav a[aria-current="true"]{color:var(--ink);transform:scale(1.35);font-weight:500;}
.mi-nav a[aria-current="true"]::before{
  content:"";position:absolute;left:-9px;top:50%;transform:translateY(-50%);
  width:4px;height:4px;border-radius:50%;background:var(--verified);
}
.mi-foot{display:flex;flex-direction:column;gap:10px;align-items:center;}
.mi-clock{font-family:var(--mono);font-size:10px;color:var(--ink-mid);writing-mode:vertical-rl;letter-spacing:0.12em;}
.mi-foot a{font-family:var(--mono);font-size:10px;color:var(--ink-mid);}
.mi-foot a:hover{color:var(--verified);}

@media (max-width:768px){
  .margin-index{
    position:sticky;flex-direction:row;width:100%;height:auto;bottom:auto;
    padding:8px clamp(14px,4vw,20px);border-right:none;border-bottom:1px solid var(--hairline);
    gap:14px;justify-content:space-between;
  }
  .mi-progress{top:auto;bottom:-1px;left:0;right:auto;width:100%;height:1px;transform:scaleX(0);transform-origin:left;}
  .mi-nav{flex-direction:row;gap:11px;}
  .mi-clock{writing-mode:horizontal-tb;}
  .mi-foot{flex-direction:row;gap:12px;}
}

/* masthead */
.masthead{
  display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap;
  padding:30px 0 22px;border-bottom:1px solid var(--hairline);
}
.wordmark{font-family:var(--serif);font-size:var(--step-1);font-weight:520;letter-spacing:-0.03em;}
.masthead .kicker{display:block;margin-top:var(--sp-1);}
.mast-right{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}

.btn-ghost{
  font-family:var(--mono);font-size:var(--step--1);letter-spacing:0.04em;
  padding:9px 13px;border:1px solid var(--hairline);border-radius:var(--r-1);
  background:transparent;color:var(--ink);cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;
  transition:border-color var(--t-2) var(--ease-out),color var(--t-2) var(--ease-out),transform var(--t-1) var(--ease-lift);
}
.btn-ghost:hover{border-color:var(--ink);}
.btn-ghost:active{transform:scale(0.97);}
#contactBtn:hover{border-color:var(--verified);color:var(--verified);}

.theme-toggle{
  width:36px;height:36px;display:grid;place-items:center;
  border:1px solid var(--hairline);border-radius:var(--r-1);background:transparent;
  cursor:pointer;color:var(--ink);
  transition:border-color var(--t-2) var(--ease-out),transform var(--t-1) var(--ease-lift);
}
.theme-toggle:hover{border-color:var(--ink);}
.theme-toggle:active{transform:scale(0.94);}
.theme-toggle svg{width:16px;height:16px;}

/* ------------------------------------------------------------
   5 · SECTION SCAFFOLD
   ------------------------------------------------------------ */
section{padding:clamp(70px,9vw,128px) 0;border-bottom:1px solid var(--hairline);}
.sec-head{display:flex;align-items:baseline;gap:var(--sp-3);margin-bottom:clamp(28px,4vw,52px);}
.sec-num{font-family:var(--mono);font-size:var(--step--1);color:var(--ink-mid);letter-spacing:0.08em;}
.sec-title{font-size:var(--step-2);}

/* asymmetric 7/5 split */
.split{display:grid;grid-template-columns:7fr 5fr;gap:clamp(28px,4vw,64px);align-items:start;}
@media (max-width:880px){.split{grid-template-columns:1fr;gap:36px;}}

.baseline-rule{background-image:repeating-linear-gradient(to bottom,transparent 0 27px,var(--baseline) 27px 28px);}

/* ------------------------------------------------------------
   6 · 01 HERO — proximity thesis + the engine
   ------------------------------------------------------------ */
.hero{padding-top:clamp(40px,6vw,72px);}
.hero-num{display:block;margin-bottom:clamp(14px,2vw,22px);}

/* the open challenge — sits under the rehearsed demo; the contrast IS the point.
   Green rule = a true, checkable claim: this one is live, go break it. */
.guide-challenge{
  display:flex;align-items:center;gap:clamp(16px,3vw,28px);flex-wrap:wrap;
  margin-top:clamp(18px,2.5vw,28px);padding:16px clamp(18px,3vw,30px);
  border:1px solid var(--hairline);border-left:3px solid var(--verified);
  border-radius:var(--r-2);background:var(--bg);
}
.guide-challenge[hidden]{display:none;}
.gc-line{flex:1 1 340px;min-width:260px;margin:0;font-size:var(--step-0);line-height:1.55;color:var(--ink-mid);}
.gc-line strong{color:var(--ink);}
.gc-btn{border-color:var(--verified);background:var(--verified);}
.gc-btn:hover{background:var(--ink);border-color:var(--ink);}
.hero-thesis{
  font-family:var(--serif);font-size:var(--hero);line-height:0.95;letter-spacing:-0.035em;
  font-weight:380;max-width:14ch;margin:0 0 14px;cursor:default;
}
.hero-thesis .word{display:inline-block;white-space:nowrap;}
/* no will-change: font-variation-settings isn't compositable (each change re-rasterizes
   the glyph anyway), so a permanent hint on ~46 glyphs would just hold GPU layers for nothing */
.hero-thesis .glyph{display:inline-block;font-variation-settings:"opsz" 96,"wght" 380,"SOFT" 0;}
.hero-thesis .accent{color:var(--flag);font-style:italic;}
.hero-cue{margin-bottom:clamp(40px,5vw,64px);}
/* the cue would be a small lie on devices where the effect can't run */
@media (hover:none),(pointer:coarse){.hero-cue{visibility:hidden;}}

.engine{border:1px solid var(--hairline);background:var(--bg-sunk);border-radius:var(--r-2);overflow:hidden;}
.engine-bar{display:flex;align-items:center;gap:10px;padding:11px 16px;border-bottom:1px solid var(--hairline);}
.engine-bar .dot{width:7px;height:7px;border-radius:50%;background:var(--ink-mid);opacity:.4;}
.engine-q{font-family:var(--mono);font-size:var(--step--1);color:var(--ink);}
.engine-q .you{color:var(--ink-mid);}
.engine-body{display:grid;grid-template-columns:1fr 280px;gap:0;}
@media (max-width:760px){.engine-body{grid-template-columns:1fr;}}

.engine-answer{
  position:relative;padding:clamp(20px,3vw,34px);
  font-family:var(--serif);font-size:var(--step-1);line-height:1.5;letter-spacing:-0.01em;
}
.tok{display:inline;font-variation-settings:"opsz" 32,"wght" 360;opacity:0;}
.tok.claim{position:relative;}
.tok.claim.supported{color:var(--ink);}
.tok .why{
  font-family:var(--mono);font-size:0.5em;color:var(--ink-mid);vertical-align:super;margin-left:2px;
  opacity:0;transition:opacity var(--t-2) var(--ease-out);
}
.tok .why.lowconf{color:var(--flag);}
body.show-why .tok .why{opacity:1;}

.engine-side{border-left:1px solid var(--hairline);padding:clamp(18px,2.5vw,26px);display:flex;flex-direction:column;gap:var(--sp-3);}
@media (max-width:760px){.engine-side{border-left:none;border-top:1px solid var(--hairline);}}

/* cited-evidence index card */
.source-card{
  border:1px solid var(--hairline);border-left:2px solid var(--verified);background:var(--bg);
  padding:13px 14px;border-radius:var(--r-1);
  font-family:var(--mono);font-size:11px;line-height:1.5;color:var(--ink-mid);
  transform:translateX(16px);opacity:0;
  transition:border-color var(--t-3) var(--ease-inout);
}
.source-card.shown{transform:none;opacity:1;}
/* pulled = evidence removed. Fade and strike the source line, but keep the status
   header fully legible and flip it to sienna — a change of state must stay readable,
   and green (a guarantee) must not survive on a pulled card. */
.source-card.pulled{border-left-color:var(--flag);}
.source-card.pulled .sc-head{color:var(--flag);}
.source-card.pulled .vdot{background:var(--flag);}
.source-card.pulled .sc-line{opacity:.4;text-decoration:line-through;}
.source-card .sc-head{display:flex;align-items:center;gap:7px;color:var(--verified);margin-bottom:6px;font-weight:500;letter-spacing:0.04em;}
.source-card .vdot{width:6px;height:6px;border-radius:50%;background:var(--verified);flex:none;}

/* confidence meter — the recurring motif; the fill never reaches 100% */
.meter{margin-top:6px;}
.meter-top{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--mono);font-size:11px;color:var(--ink-mid);margin-bottom:7px;}
.meter-val{color:var(--ink);font-weight:500;}
.meter-track{position:relative;height:3px;background:var(--hairline);border-radius:var(--r-1);overflow:visible;}
.meter-fill{position:absolute;left:0;top:0;bottom:0;width:0%;background:var(--verified);border-radius:var(--r-1);}
.meter-cap{position:absolute;top:-4px;bottom:-4px;width:1px;background:var(--ink-mid);opacity:.5;left:92%;}
.meter-gap{font-family:var(--mono);font-size:10px;color:var(--ink-mid);margin-top:6px;display:block;}

.engine-controls{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px clamp(20px,3vw,34px);border-top:1px solid var(--hairline);}
.engine-invite{font-family:var(--serif);font-style:italic;font-size:var(--step-0);color:var(--ink-mid);flex:1 1 240px;min-width:220px;margin:0;}
/* the engine's own admission, printed where the claim is made — so "it says so
   itself" in the challenge strip below is literally true */
.engine-disc{flex-basis:100%;font-size:11px;letter-spacing:0.04em;color:var(--ink-mid);}
.btn-act{
  font-family:var(--mono);font-size:var(--step--1);letter-spacing:0.03em;
  padding:9px 14px;border:1px solid var(--ink);border-radius:var(--r-1);
  background:var(--ink);color:var(--paper);cursor:pointer;white-space:nowrap;
  transition:opacity var(--t-2) var(--ease-out),background var(--t-2) var(--ease-inout),border-color var(--t-2) var(--ease-inout),transform var(--t-1) var(--ease-lift);
}
.btn-act:hover{opacity:.85;}
.btn-act:active{transform:scale(0.97);}
.btn-act.pulled{background:var(--flag);border-color:var(--flag);}
.btn-why{
  font-family:var(--mono);font-size:var(--step--1);
  padding:9px 12px;border:1px solid var(--hairline);border-radius:var(--r-1);
  background:transparent;color:var(--ink-mid);cursor:pointer;
  transition:border-color var(--t-2) var(--ease-out),color var(--t-2) var(--ease-out);
}
.btn-why[aria-pressed="true"]{color:var(--ink);border-color:var(--ink);}

.connector{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;}
.connector path{fill:none;stroke:var(--verified);stroke-width:1;}

/* ------------------------------------------------------------
   7 · 02 MANIFESTO
   ------------------------------------------------------------ */
.manifesto{display:flex;flex-direction:column;gap:clamp(10px,1.6vw,20px);}
.principle{
  font-family:var(--serif);font-size:var(--step-3);font-weight:360;letter-spacing:-0.03em;line-height:1.02;color:var(--ink);
  display:inline-block;width:max-content;max-width:100%;position:relative;
  transition:color var(--t-2) var(--ease-out);
}
.principle em{font-style:italic;color:var(--ink);}
.principle .arrow{font-family:var(--mono);font-size:0.34em;color:var(--ink-mid);vertical-align:middle;margin-left:14px;letter-spacing:0.05em;transition:transform var(--t-2) var(--ease-lift),color var(--t-2) var(--ease-out);display:inline-block;}
.principle::after{content:"";position:absolute;left:0;bottom:-2px;height:1px;width:0;background:var(--verified);transition:width var(--t-3) var(--ease-out);}
.principle:hover{color:var(--verified);}
.principle:hover::after{width:100%;}
.principle:hover .arrow{color:var(--verified);transform:translateX(4px);}
.manifesto-support{margin-top:clamp(22px,3vw,38px);max-width:62ch;font-size:var(--step-0);color:var(--ink);}
.manifesto-support em{font-family:var(--serif);}

/* ------------------------------------------------------------
   8 · 03 EXHIBITS
   ------------------------------------------------------------ */
.exhibits{display:flex;flex-direction:column;gap:clamp(56px,8vw,104px);}
.exhibit{position:relative;}
.ex-head{display:flex;align-items:baseline;gap:var(--sp-3);flex-wrap:wrap;margin-bottom:18px;}
.ex-num{font-family:var(--mono);font-size:var(--step--1);color:var(--ink-mid);}
.ex-name{font-family:var(--serif);font-size:var(--step-2);font-weight:480;letter-spacing:-0.03em;}
.ex-name a{border-bottom:1px solid transparent;transition:border-color var(--t-2) var(--ease-out);}
.ex-name a:hover{border-color:var(--verified);}
.ex-blurb{max-width:58ch;font-size:var(--step-0);color:var(--ink);margin:14px 0 0;}
.ex-artifact{margin-top:22px;}

/* status chips — strict provenance vocabulary */
.chip{
  font-family:var(--mono);font-size:10px;letter-spacing:0.1em;text-transform:uppercase;
  padding:4px 9px;border:1px solid var(--hairline);border-radius:var(--r-1);
  color:var(--ink-mid);display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
}
.chip .vdot{width:6px;height:6px;border-radius:50%;flex:none;background:var(--ink-mid);}
.chip.live{color:var(--verified);border-color:color-mix(in srgb,var(--verified) 50%,transparent);}
.chip.live .vdot{background:var(--verified);animation:pulse 2.4s var(--ease-inout) infinite;}
.chip.checking .vdot{animation:pulse 1.2s var(--ease-inout) infinite;}
.chip.unverified .vdot{opacity:.5;}
.chip.progress .vdot{opacity:.55;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.3;}}

.pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--sp-1);}
.pill{font-family:var(--mono);font-size:10px;color:var(--ink-mid);padding:3px 8px;border:1px solid var(--hairline);border-radius:var(--r-1);}

/* code primitive (NoxNocTech) */
.code-card{
  background:var(--bg-sunk);border:1px solid var(--hairline);border-radius:var(--r-2);
  font-family:var(--mono);font-size:13px;line-height:1.7;color:var(--ink);
  padding:18px 20px;overflow-x:auto;max-width:680px;margin-top:18px;
}
.code-card .cmt{color:var(--ink-mid);}
.code-card .kw{color:var(--verified);}

/* expandable receipt */
.receipt-trigger{cursor:pointer;border-bottom:1px dashed var(--verified);color:var(--verified);font-weight:500;}
.receipt{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--t-3) var(--ease-inout);}
.receipt > div{overflow:hidden;}
.receipt.open{grid-template-rows:1fr;}
.receipt-inner{
  margin-top:14px;padding:13px 14px;border:1px solid var(--hairline);border-left:2px solid var(--verified);
  border-radius:var(--r-1);background:var(--bg);
  font-family:var(--mono);font-size:12px;line-height:1.6;color:var(--ink-mid);
}
.receipt-inner code{color:var(--ink);}
.receipt-kicker{display:block;margin-bottom:6px;color:var(--verified);}

/* ClaimSarathi — quoted, never guessed */
.cs-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px);align-items:start;}
@media (max-width:760px){.cs-grid{grid-template-columns:1fr;}}
.cs-finewall{position:relative;border:1px solid var(--hairline);border-radius:var(--r-2);background:var(--bg-sunk);padding:18px;max-height:340px;overflow:hidden;}
.cs-finewall .fineline{
  font-family:var(--sans);font-size:11px;line-height:1.9;color:var(--ink-mid);
  filter:blur(2.4px);opacity:.55;user-select:none;
  transition:filter var(--t-4) var(--ease-inout),opacity var(--t-4) var(--ease-inout),transform var(--t-4) var(--ease-inout);
}
.cs-finewall .fineline.lifted{filter:none;opacity:1;transform:scale(1.06);transform-origin:left center;color:var(--ink);position:relative;z-index:2;}
.cs-finewall .fineline.lifted::after{content:"";position:absolute;left:0;bottom:-3px;height:1px;background:var(--verified);width:0;animation:drawline var(--t-4) 200ms var(--ease-out) forwards;}
@keyframes drawline{to{width:100%;}}
.cs-finewall::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom,transparent 60%,var(--bg-sunk));}

.cs-stage{display:flex;flex-direction:column;gap:18px;}
.cs-question{font-family:var(--mono);font-size:13px;color:var(--ink);padding:11px 13px;border:1px solid var(--hairline);border-radius:var(--r-1);background:var(--bg-sunk);}
.cs-question + .cs-refusal,.cs-question.second{margin-top:var(--sp-2);}
.cs-question .you{color:var(--ink-mid);}
.cs-answer{border-left:2px solid var(--verified);padding:6px 0 6px 16px;}
.cs-answer .stamp{font-family:var(--mono);font-size:10px;letter-spacing:0.08em;color:var(--verified);display:block;margin-bottom:6px;}
.cs-answer .quoted{font-family:var(--serif);font-style:italic;font-size:var(--step-1);line-height:1.3;color:var(--ink);}
.cs-answer .conf-label{font-family:var(--mono);font-size:10px;color:var(--ink-mid);margin-top:8px;display:block;}
.cs-refusal{border-left:2px solid var(--ink-mid);padding:6px 0 6px 16px;}
.cs-refusal .stamp{font-family:var(--mono);font-size:10px;letter-spacing:0.08em;color:var(--ink-mid);display:block;margin-bottom:6px;}
.cs-refusal .r-text{font-family:var(--serif);font-style:italic;font-size:var(--step-1);color:var(--ink-mid);}
.cs-bilingual{display:flex;gap:18px;flex-wrap:wrap;font-size:12px;border-top:1px solid var(--hairline);padding-top:14px;}
.cs-bilingual .bl{flex:1 1 200px;}
.cs-bilingual .bl .lab{font-family:var(--mono);font-size:10px;color:var(--ink-mid);letter-spacing:0.06em;display:block;margin-bottom:4px;}
.cs-bilingual .bl .txt{font-family:var(--serif);font-style:italic;color:var(--ink);}

/* ReTeach — admits what it can't read */
.rt-book{border:1px solid var(--hairline);border-radius:var(--r-2);overflow:hidden;max-width:640px;}
.rt-row{display:grid;grid-template-columns:1.4fr 1fr auto;gap:14px;align-items:center;padding:13px 16px;border-bottom:1px solid var(--hairline);font-family:var(--mono);font-size:13px;}
.rt-row:last-child{border-bottom:none;}
.rt-row .stu{color:var(--ink);}
.rt-row .ans{color:var(--ink-mid);}
.rt-ok{color:var(--verified);font-size:11px;}
.rt-flag{color:var(--flag);display:inline-flex;align-items:center;gap:7px;}
.rt-confirm{
  font-family:var(--mono);font-size:11px;padding:6px 11px;border:1px solid var(--flag);color:var(--flag);
  border-radius:var(--r-1);background:transparent;cursor:pointer;
  transition:background var(--t-2) var(--ease-out),color var(--t-2) var(--ease-out),border-color var(--t-2) var(--ease-out);
}
.rt-confirm:hover{background:var(--flag);color:var(--paper);}
.rt-confirm.done{border-color:var(--verified);color:var(--verified);}
.rt-confirm.done:hover{background:transparent;}
.rt-draft{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--t-3) var(--ease-inout);}
.rt-draft > div{overflow:hidden;}
.rt-draft.open{grid-template-rows:1fr;}
.rt-draft-inner{padding:16px;background:var(--bg-sunk);border-top:1px solid var(--hairline);font-family:var(--sans);font-size:14px;color:var(--ink);}
.rt-draft-inner .lab{font-family:var(--mono);font-size:10px;letter-spacing:0.08em;color:var(--verified);display:block;margin-bottom:8px;}

/* Jhalako — the non-negotiable rules, printed like the spec they come from */
.jk-rules{border:1px solid var(--hairline);border-radius:var(--r-2);background:var(--bg-sunk);padding:18px 22px 8px;max-width:560px;}
/* break the uniform left edge — the calm rules beat sits offset to the right,
   label left / artifact right, so the four exhibits don't stack as one column */
#ex-jhalako .jk-rules{margin-left:auto;}
@media (max-width:640px){#ex-jhalako .jk-rules{margin-left:0;}}
.jk-kicker{display:block;margin-bottom:10px;color:var(--verified);}
.jk-rule{display:grid;grid-template-columns:150px 1fr;gap:12px;padding:10px 0;border-bottom:1px solid var(--baseline);font-family:var(--mono);font-size:13px;}
.jk-rule:last-child{border-bottom:none;}
.jk-rule .k{color:var(--ink);text-transform:uppercase;letter-spacing:0.06em;font-size:11px;padding-top:1px;}
.jk-rule .v{color:var(--ink-mid);}
@media (max-width:520px){.jk-rule{grid-template-columns:1fr;gap:3px;}}

/* ------------------------------------------------------------
   8b · 04 ATLAS — the site's one genuine image
   ------------------------------------------------------------ */
.atlas{display:grid;grid-template-columns:5fr 7fr;gap:clamp(28px,4vw,56px);align-items:center;}
@media (max-width:880px){.atlas{grid-template-columns:1fr;gap:clamp(24px,4vw,34px);}}
.atlas-primitive{margin-top:18px;max-width:52ch;font-size:var(--step-0);line-height:1.55;color:var(--ink);}
.atlas-primitive em{font-family:var(--serif);font-style:italic;}
/* honest markers speak the machine's warning register — sienna = an admitted limit */
.mark-uns{font-family:var(--mono);font-size:0.86em;letter-spacing:0.01em;color:var(--flag);}
/* the register link is an admitted limit made public — so it wears sienna, not green */
.atlas-register{color:var(--flag);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;}
.atlas-register:hover{text-decoration-thickness:2px;}
.atlas-lede .pills{margin-top:20px;}
.atlas-figure{margin:0;}
.atlas-shot{
  display:block;position:relative;border:1px solid var(--hairline);border-radius:var(--r-2);
  overflow:hidden;background:var(--bg-sunk);
  transition:border-color var(--t-2) var(--ease-out),box-shadow var(--t-3) var(--ease-out);
}
.atlas-shot img{display:block;width:100%;height:auto;aspect-ratio:1600/942;}
.atlas-shot:hover{border-color:var(--verified);}
.atlas-cap{display:flex;align-items:center;gap:14px;margin-top:13px;flex-wrap:wrap;}
.atlas-link{
  font-family:var(--mono);font-size:var(--step--1);letter-spacing:0.02em;color:var(--ink-mid);
  border-bottom:1px solid transparent;
  transition:color var(--t-2) var(--ease-out),border-color var(--t-2) var(--ease-out);
}
.atlas-link:hover{color:var(--verified);border-color:var(--verified);}

/* ------------------------------------------------------------
   9 · 04 HOW I WORK
   ------------------------------------------------------------ */
.work-prose{max-width:62ch;font-size:var(--step-1);line-height:1.55;}
.work-prose p{margin:0 0 1em;}
.stat-line{
  margin-top:clamp(28px,4vw,46px);display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap;
  padding-top:clamp(22px,3vw,34px);border-top:1px solid var(--hairline);
}
.stat-line .stat-sentence{font-family:var(--serif);font-style:italic;font-size:var(--step-1);line-height:1.35;color:var(--ink);flex:1 1 320px;max-width:48ch;margin:0;}
.stat-chip{
  font-family:var(--mono);font-size:10px;letter-spacing:0.06em;line-height:1.5;
  padding:8px 11px;border:1px solid var(--hairline);border-left:2px solid var(--flag);
  border-radius:var(--r-1);color:var(--ink-mid);align-self:flex-start;white-space:nowrap;
}
.stat-chip.verified{border-left-color:var(--verified);color:var(--verified);}

/* ------------------------------------------------------------
   10 · 05 BUILD WITH ME + honest contact form
   ------------------------------------------------------------ */
.build-lead{font-size:var(--step-1);line-height:1.5;max-width:48ch;color:var(--ink);}
.build-steps{list-style:none;margin:clamp(24px,3vw,40px) 0;padding:0;}
.build-steps li{display:grid;grid-template-columns:auto 1fr;gap:var(--sp-3);align-items:baseline;padding:16px 0;border-top:1px solid var(--hairline);}
.build-steps li:last-child{border-bottom:1px solid var(--hairline);}
.build-steps .bs-n{font-family:var(--mono);font-size:var(--step--1);color:var(--verified);letter-spacing:0.04em;}
.build-steps .bs-t{font-family:var(--serif);font-size:var(--step-1);line-height:1.35;color:var(--ink);}
.build-side{background:var(--bg-sunk);border:1px solid var(--hairline);border-radius:var(--r-2);padding:clamp(20px,2.5vw,28px);align-self:start;}
.build-side .kicker{display:block;margin-bottom:12px;}
.build-list{list-style:none;margin:0;padding:0;}
.build-list li{font-family:var(--serif);font-size:var(--step-1);color:var(--ink);padding:11px 0;border-bottom:1px solid var(--baseline);}
.build-list li:last-child{border-bottom:none;}
.build-guide-note{margin-top:18px;font-size:11px;color:var(--ink-mid);line-height:1.6;padding-top:14px;border-top:1px solid var(--hairline);}

/* the form — plain words in, a real email out */
.lead-form{margin-top:clamp(24px,3vw,40px);max-width:560px;}
.lead-form .lf-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3);}
@media (max-width:560px){.lead-form .lf-row{grid-template-columns:1fr;}}
.lf-field{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--sp-3);}
.lf-field label{font-family:var(--mono);font-size:10px;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-mid);}
.lf-field input,.lf-field textarea{
  font-family:var(--sans);font-size:var(--step-0);color:var(--ink);
  background:var(--bg);border:1px solid var(--field-line);border-radius:var(--r-1);
  padding:10px 12px;transition:border-color var(--t-2) var(--ease-out);
}
.lf-field input:hover,.lf-field textarea:hover{border-color:var(--ink-mid);}
.lf-field input:focus-visible,.lf-field textarea:focus-visible{outline:2px solid var(--verified);outline-offset:1px;border-color:transparent;}
.lf-field textarea{resize:vertical;min-height:110px;}
.lf-foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.lf-status{font-family:var(--mono);font-size:11px;line-height:1.5;color:var(--ink-mid);flex:1 1 220px;min-height:1em;}
.lf-status.ok{color:var(--verified);}
.lf-status.err{color:var(--flag);}
.lf-status a{border-bottom:1px dashed currentColor;}
.btn-act[disabled]{opacity:.55;cursor:default;transform:none;}

/* ------------------------------------------------------------
   11 · 06 COLOPHON
   ------------------------------------------------------------ */
.spine{display:flex;flex-direction:column;gap:0;margin-bottom:clamp(36px,5vw,56px);}
.spine-row{display:grid;grid-template-columns:auto 1fr auto;gap:var(--sp-3);align-items:baseline;padding:16px 0;border-bottom:1px solid var(--hairline);}
.spine-row .yr{font-family:var(--mono);font-size:12px;color:var(--ink-mid);}
.spine-row .what{font-family:var(--serif);font-size:var(--step-1);}
.colophon-note{margin-bottom:clamp(36px,5vw,56px);}
.colophon-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);align-items:start;}
@media (max-width:680px){.colophon-grid{grid-template-columns:1fr;}}
.contact-block .label{display:block;}
.email-copy{
  font-family:var(--serif);font-size:var(--step-2);font-weight:460;letter-spacing:-0.02em;
  cursor:pointer;background:none;border:none;color:var(--ink);padding:0;text-align:left;
  display:inline-flex;align-items:center;gap:12px;
}
.email-copy .tick{width:18px;height:18px;opacity:0;transform:scale(.6);transition:opacity var(--t-2) var(--ease-lift),transform var(--t-2) var(--ease-lift);color:var(--verified);}
.email-copy.copied .tick{opacity:1;transform:scale(1);}
.copy-status{font-family:var(--mono);font-size:11px;color:var(--verified);display:block;min-height:14px;margin-top:6px;}
.copy-status.err{color:var(--flag);}
.contact-meta{display:flex;flex-direction:column;gap:6px;margin-top:14px;}
.contact-meta a{font-family:var(--mono);font-size:12px;color:var(--ink-mid);}
.contact-meta a:hover{color:var(--verified);}
.colophon-credit{font-family:var(--mono);font-size:11px;color:var(--ink-mid);line-height:1.7;margin:0;}
.colophon-credit em{font-family:var(--serif);font-style:italic;}

/* ------------------------------------------------------------
   12 · MARQUEE + FOOTER
   ------------------------------------------------------------ */
.marquee{overflow:hidden;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);padding:14px 0;white-space:nowrap;}
.marquee-track{display:inline-flex;gap:0;will-change:transform;}
.marquee-track span{font-family:var(--mono);font-size:13px;color:var(--ink-mid);letter-spacing:0.04em;padding:0 26px;position:relative;}
.marquee-track span::after{content:"·";position:absolute;right:-3px;color:var(--hairline);}

footer{padding:clamp(56px,8vw,104px) 0 clamp(40px,6vw,72px);}
.signoff{display:flex;flex-direction:column;gap:clamp(18px,2.5vw,30px);max-width:72ch;}
.signoff p{margin:0;font-size:var(--step-0);}
.signoff .so-disc{font-family:var(--sans);color:var(--ink-mid);padding-left:18px;border-left:1px solid var(--hairline);}
.closer{
  font-family:var(--serif);font-size:var(--step-2);font-weight:380;letter-spacing:-0.03em;
  line-height:1.2;color:var(--ink);margin-top:clamp(10px,2vw,22px);
}
.redact{
  display:inline-block;background:var(--ink-mid);color:transparent;border-radius:var(--r-1);
  letter-spacing:-0.05em;user-select:none;vertical-align:baseline;opacity:.55;
}
.foot-meter{margin-top:22px;max-width:380px;}
.foot-meter .meter-fill{background:var(--ink-mid);}
.foot-meter .meter-top span{font-size:11px;}

/* ------------------------------------------------------------
   13 · CUSTOM CURSOR
   ------------------------------------------------------------ */
.cursor-ring{
  position:fixed;top:0;left:0;z-index:9999;pointer-events:none;
  width:26px;height:26px;border:1px solid var(--ink);border-radius:50%;
  transform:translate(-50%,-50%);mix-blend-mode:difference;
  opacity:0; /* revealed on first pointer movement */
  transition:width var(--t-2) var(--ease-lift),height var(--t-2) var(--ease-lift),background var(--t-2) var(--ease-out),opacity var(--t-2) var(--ease-out);
  display:none;
}
body.cursor-live .cursor-ring{opacity:1;}
.cursor-label{
  position:fixed;top:0;left:0;z-index:9999;pointer-events:none;
  font-family:var(--mono);font-size:9px;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--paper);background:var(--ink);padding:3px 6px;border-radius:var(--r-1);
  transform:translate(14px,8px);opacity:0;transition:opacity var(--t-1) var(--ease-out);
  white-space:nowrap;mix-blend-mode:difference;display:none;
}
@media (hover:hover) and (pointer:fine){
  body.cursor-on .cursor-ring{display:block;}
  body.cursor-on .cursor-label{display:block;}
  body.cursor-on{cursor:none;}
  body.cursor-on a,body.cursor-on button,body.cursor-on [tabindex]{cursor:none;}
}
.cursor-ring.grow{width:54px;height:54px;background:color-mix(in srgb,var(--ink) 8%,transparent);}

/* ------------------------------------------------------------
   14 · 404 — an honest dead end
   ------------------------------------------------------------ */
.notfound{min-height:100svh;display:grid;place-items:center;padding:clamp(20px,4vw,56px);}
.nf-card{max-width:640px;}
.nf-code{font-family:var(--mono);font-size:var(--step--1);color:var(--flag);letter-spacing:0.08em;display:block;margin-bottom:18px;}
.nf-title{font-family:var(--serif);font-size:var(--step-3);font-weight:380;letter-spacing:-0.03em;line-height:1.05;margin:0 0 18px;}
.nf-sub{color:var(--ink-mid);max-width:52ch;margin:0 0 26px;}
.nf-meter{max-width:320px;margin-bottom:34px;}
.nf-meter .meter-fill{background:var(--flag);}
.nf-home{
  font-family:var(--mono);font-size:var(--step--1);letter-spacing:0.03em;
  padding:10px 16px;border:1px solid var(--ink);border-radius:var(--r-1);
  background:var(--ink);color:var(--paper);display:inline-block;
  transition:opacity var(--t-2) var(--ease-out);
}
.nf-home:hover{opacity:.85;}

/* ------------------------------------------------------------
   15 · REDUCED MOTION — CSS half of the kill switch
   (site.js gates the JS half on the same media query)
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important;scroll-behavior:auto !important;}
  .grain{opacity:.015;}
  .hero-cue{visibility:hidden;} /* proximity type is off — don't promise it */
  .chip .vdot{animation:none !important;}
  .cs-finewall .fineline.lifted::after{animation:none !important;width:100%;}
  html.motion-on .reveal{opacity:1 !important;}
}