/* assets/site.css: shared by index.html, atlas/ and guardian/. Tokens first; no hex literals outside :root. */
/* ───────── Design tokens: ink on paper ───────── */
:root{
  --paper:#ECEEE8;   /* page ground */
  --paper-2:#E3E7DF; /* sunken panels, diagram and demo surfaces (opaque) */
  --ink:#1A2420;     /* text, thread, primary buttons, outlines */
  --ink-hover:#26342D;
  --muted:#5A665F;   /* secondary text, unlit states */
  --rule:#C8CEC3;    /* hairlines and dividers */
  --moss:#2F5D46;    /* links, focus ring, live or healthy */
  --amber:#F2A900;   /* fill only: a person decides */
  --clay:#B04A2F;    /* problem or volatile */
  --font-display:Besley,Rockwell,Clarendon,Georgia,serif;
  --font-body:"Source Sans 3",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --radius:2px;
  --border:1px solid var(--rule);
  --focus:2px solid var(--moss);
}
/* ───────── Layout utilities (compiled Tailwind v3.4.17, pruned to what is used) ───────── */
*,:after,:before{box-sizing:border-box;border:0 solid var(--rule)}
:after,:before{--tw-content:""}
:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:var(--font-body);font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}
body{margin:0;line-height:inherit}
hr{height:0;color:inherit;border-top-width:1px}
abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}
h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}
a{color:inherit;text-decoration:inherit}
b,strong{font-weight:bolder}
code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}
small{font-size:80%}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sub{bottom:-.25em}
sup{top:-.5em}
table{text-indent:0;border-color:inherit;border-collapse:collapse}
button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}
button,select{text-transform:none}
button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}
:-moz-focusring{outline:auto}
progress{vertical-align:baseline}
::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}
[type=search]{-webkit-appearance:textfield;outline-offset:-2px}
::-webkit-search-decoration{-webkit-appearance:none}
::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}
summary{display:list-item}
blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}
fieldset{margin:0}
fieldset,legend{padding:0}
menu,ol,ul{list-style:none;margin:0;padding:0}
dialog{padding:0}
textarea{resize:vertical}
input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:var(--muted)}
input::placeholder,textarea::placeholder{opacity:1;color:var(--muted)}
[role=button],button{cursor:pointer}
:disabled{cursor:default}
audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}
img,video{max-width:100%;height:auto}
[hidden]:where(:not([hidden=until-found])){display:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}
.fixed{position:fixed}
.absolute{position:absolute}
.relative{position:relative}
.inset-x-0{left:0;right:0}
.top-0{top:0}
.z-50{z-index:50}
.mx-auto{margin-left:auto;margin-right:auto}
.mt-1{margin-top:.25rem}
.mt-2{margin-top:.5rem}
.mt-3{margin-top:.75rem}
.mt-4{margin-top:1rem}
.mt-5{margin-top:1.25rem}
.mt-6{margin-top:1.5rem}
.mt-8{margin-top:2rem}
.mt-9{margin-top:2.25rem}
.block{display:block}
.inline{display:inline}
.flex{display:flex}
.grid{display:grid}
.hidden{display:none}
.h-1\.5{height:.375rem}
.h-16{height:4rem}
.h-4{height:1rem}
.h-7{height:1.75rem}
.h-9{height:2.25rem}
.min-h-\[100svh\]{min-height:100svh}
.w-1\.5{width:.375rem}
.w-4{width:1rem}
.w-7{width:1.75rem}
.w-9{width:2.25rem}
.w-full{width:100%}
.max-w-2xl{max-width:42rem}
.max-w-3xl{max-width:48rem}
.max-w-5xl{max-width:64rem}
.max-w-6xl{max-width:72rem}
.max-w-\[420px\]{max-width:420px}
.max-w-\[720px\]{max-width:720px}
.max-w-xl{max-width:36rem}
.flex-none{flex:none}
.grow{flex-grow:1}
.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
.flex-col{flex-direction:column}
.flex-wrap{flex-wrap:wrap}
.place-items-center{place-items:center}
.content-start{align-content:flex-start}
.items-start{align-items:flex-start}
.items-center{align-items:center}
.justify-center{justify-content:center}
.justify-between{justify-content:space-between}
.gap-1{gap:.25rem}
.gap-10{gap:2.5rem}
.gap-2{gap:.5rem}
.gap-2\.5{gap:.625rem}
.gap-3{gap:.75rem}
.gap-4{gap:1rem}
.gap-5{gap:1.25rem}
.gap-6{gap:1.5rem}
.gap-8{gap:2rem}
.self-start{align-self:flex-start}
.justify-self-start{justify-self:start}
.rounded-full{border-radius:9999px}
.border{border-width:1px}
.border-b{border-bottom-width:1px}
.border-t{border-top-width:1px}
.border-transparent{border-color:transparent}
.p-6{padding:1.5rem}
.px-5{padding-left:1.25rem;padding-right:1.25rem}
.py-2{padding-top:.5rem;padding-bottom:.5rem}
.py-3{padding-top:.75rem;padding-bottom:.75rem}
.py-8{padding-top:2rem;padding-bottom:2rem}
.pb-10{padding-bottom:2.5rem}
.pb-24{padding-bottom:6rem}
.pb-28{padding-bottom:7rem}
.pb-8{padding-bottom:2rem}
.pt-10{padding-top:2.5rem}
.pt-24{padding-top:6rem}
.pt-28{padding-top:7rem}
.text-\[11px\]{font-size:11px}
.text-\[15px\]{font-size:15px}
.text-base{font-size:1rem;line-height:1.5rem}
.text-lg{font-size:1.125rem;line-height:1.75rem}
.text-sm{font-size:.875rem;line-height:1.25rem}
.text-xl{font-size:1.25rem;line-height:1.75rem}
.font-bold{font-weight:700}
.font-medium{font-weight:500}
.font-semibold{font-weight:600}
.leading-relaxed{line-height:1.625}
.tracking-tight{letter-spacing:-.025em}
.line-through{text-decoration-line:line-through}
@media (min-width:640px){.sm\:flex-row{flex-direction:row}.sm\:p-7{padding:1.75rem}.sm\:px-8{padding-left:2rem;padding-right:2rem}.sm\:pt-32{padding-top:8rem}}
@media (min-width:768px){.md\:flex{display:flex}.md\:hidden{display:none}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1024px){.lg\:col-span-2{grid-column:span 2/span 2}.lg\:col-span-4{grid-column:span 4/span 4}.lg\:col-span-5{grid-column:span 5/span 5}.lg\:col-span-7{grid-column:span 7/span 7}.lg\:col-span-8{grid-column:span 8/span 8}.lg\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:justify-end{justify-content:flex-end}.lg\:gap-8{gap:2rem}}
.space-y-20>:not([hidden])~:not([hidden]){margin-top:5rem}
/* ───────── Base ───────── */
html{ background:var(--paper); color-scheme:light; scroll-behavior:smooth; scroll-padding-top:5rem; }
body{
  margin:0; overflow-x:hidden; color:var(--ink); background:var(--paper);
  font-family:var(--font-body); font-size:1.0625rem; line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility;
}
::selection{ background:color-mix(in srgb, var(--moss) 22%, transparent); color:var(--ink); }
:focus-visible{ outline:var(--focus); outline-offset:3px; border-radius:var(--radius); }
.is-off{ display:none!important; }
:where([data-icon]){ display:inline-block; width:1.125rem; height:1.125rem; flex:none; }
[data-icon] > svg{ display:block; width:100%; height:100%; }

/* Colour and radius helpers for the layout utilities */
.c-muted{ color:var(--muted); }
.c-paper{ color:var(--paper); }
.bg-ink{ background:var(--ink); }
.bg-muted{ background:var(--muted); }
.bg-paper{ background:var(--paper); }
.border-rule{ border-color:var(--rule); }
.rounded-md,.rounded-lg{ border-radius:var(--radius); }
.transition{ transition:color .2s ease, background-color .2s ease, border-color .2s ease, transform .2s ease; }
.skip-link:focus{
  position:fixed; left:1rem; top:1rem; z-index:60; width:auto; height:auto; margin:0; overflow:visible; clip:auto; white-space:normal;
  padding:.5rem .75rem; border-radius:var(--radius); background:var(--ink); color:var(--paper); font-size:.875rem; font-weight:600;
}
.menu-btn{ border:1px solid var(--ink); color:var(--ink); background:transparent; }
.menu-btn:hover{ background:var(--paper-2); }
.foot-link{ color:var(--moss); text-decoration:underline; text-underline-offset:3px; }
.foot-link:hover{ color:var(--ink); }

/* SVG fills and strokes as classes, so no hex lives outside :root */
.fill-ink{ fill:var(--ink); } .fill-muted{ fill:var(--muted); } .fill-moss{ fill:var(--moss); }
.fill-clay{ fill:var(--clay); } .fill-amber{ fill:var(--amber); } .fill-paper{ fill:var(--paper); } .fill-paper-2{ fill:var(--paper-2); }
.stroke-ink{ stroke:var(--ink); } .stroke-moss{ stroke:var(--moss); } .stroke-clay{ stroke:var(--clay); } .stroke-muted{ stroke:var(--muted); }

/* ───────── Type: Besley for headlines and numerals, Source Sans 3 for everything else ───────── */
h1,h2,h3,.h1-statement,.h1-case,.h2,.proj-title,.wordmark,.display,.stat-num,.dgc h3{ font-family:var(--font-display); font-weight:600; text-wrap:balance; }
.h1-statement{ font-size:clamp(2.25rem,5vw,3.75rem); line-height:1.08; letter-spacing:-.01em; }
.h1-case{ font-size:clamp(2.5rem,6vw,4.25rem); line-height:1.08; letter-spacing:-.01em; }
.h2{ font-size:clamp(1.9rem,3.8vw,2.75rem); line-height:1.12; letter-spacing:-.005em; color:var(--ink); }
.wordmark{ font-size:1.1875rem; line-height:1; letter-spacing:0; color:var(--ink); }
.stat-num{ font-size:clamp(4rem,11vw,8rem); line-height:.95; font-weight:700; letter-spacing:0; font-variant-numeric:tabular-nums; }
.val{ font-family:var(--font-display); }
main p, main li{ max-width:68ch; text-wrap:pretty; }
.inline-link{ color:var(--moss); text-decoration:underline; text-underline-offset:3px; }
.inline-link:hover{ color:var(--ink); }

/* ───────── Buttons and links ───────── */
.btn{
  --h:2.75rem;
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  height:var(--h); padding:0 1.15rem; border-radius:var(--radius);
  font-size:.9375rem; font-weight:600; white-space:nowrap; cursor:pointer;
  transition:transform .2s ease, background-color .2s ease, border-color .2s ease, opacity .2s ease;
}
.btn-sm{ --h:2.25rem; padding:0 .95rem; font-size:.875rem; }
.btn-lg{ --h:3.1rem; padding:0 1.5rem; font-size:1rem; }
.btn-primary{ color:var(--paper); background:var(--ink); border:1px solid var(--ink); }
.btn-primary:hover{ transform:translateY(-1px); background:var(--ink-hover); border-color:var(--ink-hover); }
.btn-ghost{ color:var(--ink); border:1px solid var(--ink); background:transparent; }
.btn-ghost:hover{ transform:translateY(-1px); background:var(--paper-2); }
.is-soon{ color:var(--muted); border-color:var(--muted); border-style:dashed; background:transparent; pointer-events:none; cursor:default; }
.link-ext{ display:inline-flex; align-items:center; gap:.45rem; font-size:.9375rem; font-weight:600; color:var(--moss); text-decoration:underline; text-underline-offset:3px; transition:color .2s ease; }
.link-ext:hover{ color:var(--ink); }
.link-back{ display:inline-flex; align-items:center; gap:.45rem; font-size:.9375rem; font-weight:500; color:var(--moss); text-decoration:underline; text-underline-offset:3px; transition:color .2s ease; }
.link-back:hover{ color:var(--ink); }

/* ───────── Chips: filled = live, solid outline = in development, dotted = building ───────── */
.chip{ display:inline-flex; align-items:center; gap:.5rem; height:1.75rem; padding:0 .7rem; border-radius:var(--radius); font-size:.8125rem; font-weight:500; white-space:nowrap; border:1px solid transparent; color:var(--ink); }
.chip-live{ background:var(--paper-2); border-color:var(--paper-2); }
.chip-live .dot{ background:var(--moss); }
.chip-solid{ border:1px solid var(--ink); }
.chip-dotted{ border:1px dotted var(--ink); }
.dot{ width:.5rem; height:.5rem; border-radius:50%; background:currentColor; }

/* ───────── Draft markers: dashed = still to confirm ───────── */
.tbc{
  display:inline-block; padding:.3em .8em; border-radius:var(--radius); font-size:.8125rem; font-weight:500; line-height:1.55;
  color:var(--ink); background:var(--paper-2); border:1px dashed var(--muted);
}
body.hide-tbc .tbc{ display:none!important; }
.draft-pill{
  position:fixed; left:1rem; bottom:calc(1rem + env(safe-area-inset-bottom,0px)); z-index:55;
  display:inline-flex; align-items:center; gap:.5rem; height:2.25rem; padding:0 .85rem; border-radius:var(--radius);
  border:1px dashed var(--muted); background:var(--paper-2); color:var(--ink);
  font-size:.75rem; font-weight:600; cursor:pointer;
}
.draft-pill[aria-pressed="false"]{ border-style:solid; }

/* ───────── Navigation ───────── */
#nav{ background:var(--paper); }
#nav.is-scrolled, #nav.menu-open{ border-bottom-color:var(--rule); }
.nav-link{ position:relative; padding:.5rem .8rem; border-radius:var(--radius); font-size:.9375rem; font-weight:500; color:var(--muted); transition:color .2s; }
.nav-link:hover{ color:var(--ink); }
.nav-link[data-active="true"]{ color:var(--ink); }
.nav-link[data-active="true"]::after{ content:""; position:absolute; left:.8rem; right:.8rem; bottom:.1rem; height:2px; background:var(--ink); }

/* ───────── Panels ───────── */
.panel{ border:var(--border); border-radius:var(--radius); background:var(--paper-2); }

/* ───────── Diagram base ───────── */
.dgsvg{ display:block; width:100%; height:auto; }
.dgsvg text{ font-family:var(--font-body); fill:var(--ink); }
.nd{ cursor:pointer; outline:none; }
.nd.static{ cursor:default; }
.nd rect.bx{ fill:var(--paper); stroke:var(--ink); stroke-width:1; transition:stroke .2s, stroke-width .2s; }
.nd.per rect.bx{ fill:var(--amber); stroke:var(--ink); }
.nd.ok rect.bx{ stroke:var(--moss); stroke-width:2; }
.nd.no rect.bx{ stroke:var(--muted); stroke-dasharray:5 4; fill:transparent; }
.nd text{ font-size:15px; font-weight:600; }
.nd.big text{ font-size:17px; font-weight:500; }
.nd .sub{ font-size:12px; font-weight:400; fill:var(--muted); }
.nd:hover rect.bx{ stroke-width:2.5; }
.nd:focus-visible{ outline:var(--focus); outline-offset:3px; }
.nd:focus-visible rect.bx{ stroke:var(--moss); stroke-width:3; }
.nd.is-sel rect.bx{ stroke:var(--moss); stroke-width:2.5; }
.nd.static:hover rect.bx{ stroke-width:1; }
.ln{ fill:none; stroke:var(--ink); stroke-width:1.8; stroke-linecap:round; }
.ln.per{ stroke:var(--ink); }
.ln.dim{ stroke:var(--muted); stroke-width:1.2; }
.ln.dash{ stroke-dasharray:5 5; }
.cap{ font-size:12.5px; font-weight:500; fill:var(--muted)!important; }
.cap.per{ fill:var(--ink)!important; font-weight:600; }
.cap.bad{ fill:var(--ink)!important; }
.cap.ok{ fill:var(--moss)!important; }
.halo{ paint-order:stroke; stroke:var(--paper-2); stroke-width:4px; stroke-linejoin:round; }
.val{ font-size:20px; font-weight:700; fill:var(--ink)!important; }

.dg .lp-line, .dg .lp-fade, .dg .grow{ animation-play-state:paused; }
.dg.in .lp-line, .dg.in .lp-fade, .dg.in .grow{ animation-play-state:running; }
.lp-line{ stroke-dasharray:1; animation:lpDraw .7s cubic-bezier(.3,.7,.2,1) backwards; animation-delay:var(--d,0s); }
.lp-fade{ animation:lpFade .6s ease backwards; animation-delay:var(--d,0s); }
.grow{ transform-box:fill-box; transform-origin:50% 100%; animation:grow .9s cubic-bezier(.2,.7,.2,1) backwards; animation-delay:var(--d,0s); }
@keyframes lpDraw{ from{ stroke-dashoffset:1; } to{ stroke-dashoffset:0; } }
@keyframes lpFade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes grow{ from{ transform:scaleY(0); } to{ transform:scaleY(1); } }
.lp-hub-ring{ fill:var(--ink); stroke:none; }
.lp-label{ font-size:17px; font-weight:600; fill:var(--paper)!important; }
.legend{ display:flex; gap:1.25rem; justify-content:center; font-size:.8125rem; color:var(--muted); }
.legend i{ display:inline-block; width:.6rem; height:.6rem; border-radius:50%; margin-right:.4rem; vertical-align:-.05rem; }

/* diagram cards */
.dgc{ border:var(--border); border-radius:var(--radius); background:var(--paper-2); padding:1.25rem 1.25rem 1rem; }
.dgc h3{ font-size:1.375rem; line-height:1.2; color:var(--ink); }
.dgc .dg-cap{ margin-top:.2rem; font-size:.9375rem; color:var(--muted); }
.dg .tip{
  margin-top:.8rem; min-height:3.1em; padding:.7rem .9rem; border:var(--border);
  background:var(--paper); border-radius:var(--radius); font-size:.9375rem; line-height:1.5; color:var(--ink);
}
.dg .tip.is-hint{ color:var(--muted); }

/* ───────── Proof strip (kept for later demos) ───────── */
.proof{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; border:var(--border); border-radius:var(--radius); overflow:hidden; background:var(--rule); }
@media (min-width:1024px){ .proof{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.pt{ background:var(--paper-2); padding:1.25rem 1.25rem 1.15rem; min-width:0; }
.pt-viz{ height:4.75rem; display:flex; align-items:center; }
.pt-num{ margin-top:.8rem; font-family:var(--font-display); font-size:clamp(1.5rem,2.7vw,2.35rem); font-weight:700; color:var(--ink); line-height:1.05; font-variant-numeric:tabular-nums; }
.pt-num small{ font-size:.42em; font-weight:500; color:var(--muted); margin-left:.2rem; }
.pt-num .arr{ color:var(--ink); margin:0 .1em; font-weight:400; }
.pt-cap{ margin-top:.55rem; font-size:.875rem; font-weight:500; color:var(--ink); }
.pt-sub{ margin-top:.1rem; font-size:.8125rem; color:var(--muted); }
.pct-ring{ width:4.75rem; height:4.75rem; }
.pct-ring .trk{ fill:none; stroke:var(--rule); stroke-width:7; }
.pct-ring .prog{ fill:none; stroke:var(--ink); stroke-width:7; stroke-linecap:round; stroke-dasharray:175.93; stroke-dashoffset:175.93; transform:rotate(-90deg); transform-origin:36px 36px; transition:stroke-dashoffset 1.3s cubic-bezier(.2,.7,.2,1) .2s; }
.in .pct-ring .prog{ stroke-dashoffset:114.35; }
.ring text{ font-size:15px; font-weight:700; fill:var(--ink); font-family:var(--font-body); }
.mbars{ width:100%; display:grid; gap:.55rem; }
.mbar{ display:grid; grid-template-columns:4.6rem 1fr; align-items:center; gap:.6rem; font-size:.8125rem; color:var(--muted); }
.mbar i{ display:block; position:relative; height:.6rem; border-radius:var(--radius); background:var(--rule); overflow:hidden; }
.mbar i b{ position:absolute; inset:0 auto 0 0; width:0; border-radius:inherit; background:var(--ink); transition:width 1.2s cubic-bezier(.2,.7,.2,1) .2s; }
.mbar.live i b{ background:var(--moss); }
.in .mbar i b{ width:var(--w); }
.dots-viz{ width:100%; max-width:11rem; }
.dots-viz .srv{ fill:var(--paper); stroke:var(--ink); stroke-width:1; }
.dots-viz .dot-link{ stroke:var(--muted); stroke-width:1; fill:none; }
.dot-loc{ fill:var(--ink); opacity:0; }
.in .dot-loc{ opacity:1; transition:opacity .4s calc(var(--i) * 28ms + .2s); }
.deal{ display:flex; align-items:center; gap:.35rem; flex-wrap:wrap; font-size:.8125rem; font-weight:600; color:var(--ink); }
.deal span{ padding:.3rem .55rem; border:1px solid var(--ink); border-radius:var(--radius); background:var(--paper); }
.deal span.per{ background:var(--amber); }
.deal i{ font-style:normal; color:var(--ink); }

/* ───────── Project bands (kept for later) ───────── */
.band{ position:relative; padding:4.5rem 0; }
.band-alt{ background:var(--paper-2); border-block:var(--border); }

/* ───────── Before / After morph ───────── */
.morph-bar{ display:inline-flex; gap:.25rem; padding:.25rem; border:1px solid var(--ink); border-radius:var(--radius); background:transparent; }
.morph-bar button{ padding:.4rem .95rem; border-radius:var(--radius); font-size:.875rem; font-weight:600; color:var(--ink); cursor:pointer; transition:color .2s, background-color .2s; }
.morph-bar button[aria-pressed="true"]{ color:var(--paper); background:var(--ink); }
.morph-stage{ position:relative; margin-top:.9rem; aspect-ratio:16/11; border:var(--border); border-radius:var(--radius); background:var(--paper-2); overflow:hidden; }
.morph-lines{ position:absolute; inset:0; z-index:1; width:100%; height:100%; pointer-events:none; }
.morph-lines path{ fill:none; stroke:var(--ink); stroke-width:1.5; vector-effect:non-scaling-stroke; opacity:0; transition:opacity .7s ease .45s; }
.is-after .morph-lines path{ opacity:1; }
.mhub{
  position:absolute; left:50%; top:50%; z-index:2; display:grid; place-items:center; width:5.5rem; height:5.5rem; border-radius:50%;
  text-align:center; font-size:.875rem; font-weight:700; line-height:1.15; color:var(--paper); padding:.5rem;
  background:var(--ink);
  opacity:0; transform:translate(-50%,-50%) scale(.4); transition:opacity .6s ease .3s, transform .8s cubic-bezier(.2,.8,.2,1) .3s;
}
.is-after .mhub{ opacity:1; transform:translate(-50%,-50%) scale(1); }
.mchip{
  position:absolute; z-index:3; display:grid; max-width:34%;
  left:calc(var(--x0) * 1%); top:calc(var(--y0) * 1%); transform:translate(-50%,-50%) rotate(calc(var(--r0) * 1deg));
  padding:.45rem .7rem; border-radius:var(--radius); border:1px solid var(--muted); background:var(--paper);
  font-size:clamp(.72rem,1.55vw,.9rem); font-weight:600; line-height:1.2; text-align:center; color:var(--ink);
  transition:left .95s cubic-bezier(.2,.75,.2,1), top .95s cubic-bezier(.2,.75,.2,1), transform .95s cubic-bezier(.2,.75,.2,1), border-color .6s, background-color .6s, color .6s;
}
.mchip > span{ grid-area:1 / 1; transition:opacity .5s ease; }
.mchip .a{ opacity:0; }
.is-after .mchip{ left:calc(var(--x1) * 1%); top:calc(var(--y1) * 1%); transform:translate(-50%,-50%) rotate(0deg); border-color:var(--ink); background:var(--paper); }
.is-after .mchip .a{ opacity:1; }
.is-after .mchip .b{ opacity:0; }
.mchip.warn{ border-color:var(--clay); color:var(--ink); }
.is-after .mchip.warn{ border-color:var(--ink); color:var(--ink); }
.morph-cap{ margin-top:.7rem; min-height:1.5em; font-size:1rem; color:var(--ink); }

/* ───────── Click-through demo frame (placeholder) ───────── */
.demo{ border:var(--border); border-radius:var(--radius); overflow:hidden; background:var(--paper-2); }
.demo-bar{ display:flex; align-items:center; gap:.75rem; padding:.55rem .9rem; border-bottom:var(--border); }
.demo-bar .dots{ display:flex; gap:.35rem; }
.demo-bar .dots i{ width:.6rem; height:.6rem; border-radius:50%; background:var(--rule); }
.demo-url{ flex:1; min-width:0; text-align:center; font-size:.8125rem; color:var(--muted); border:var(--border); border-radius:var(--radius); padding:.2rem .6rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.demo-screen{ position:relative; aspect-ratio:16/10; padding:1rem; overflow:hidden; }
.demo-intro{ position:absolute; inset:0; z-index:3; display:grid; place-items:center; align-content:center; gap:.6rem; text-align:center; background:var(--paper-2); transition:opacity .45s ease; }
.demo.is-running .demo-intro{ opacity:0; pointer-events:none; }
.demo-play{ position:relative; display:grid; place-items:center; width:4rem; height:4rem; border-radius:50%; color:var(--paper); cursor:pointer; background:var(--ink); }
.demo-play::after{ content:""; position:absolute; inset:-.35rem; border-radius:50%; border:2px solid var(--ink); animation:ping 2s ease-out infinite; }
.demo-play [data-icon]{ width:1.5rem; height:1.5rem; margin-left:.15rem; }
@keyframes ping{ 0%{ transform:scale(.85); opacity:.9; } 100%{ transform:scale(1.35); opacity:0; } }
.demo-title{ font-size:1.0625rem; font-weight:600; color:var(--ink); }
.demo-sub{ font-size:.875rem; color:var(--muted); }
.demo-steps{ display:flex; flex-wrap:wrap; gap:.4rem; padding:.7rem .9rem; border-top:var(--border); }
.demo-steps button{ flex:none; padding:.35rem .75rem; border-radius:var(--radius); border:1px solid var(--ink); font-size:.875rem; font-weight:600; color:var(--ink); cursor:pointer; transition:background-color .2s, color .2s; }
.demo-steps button:hover{ background:var(--paper); }
.demo-steps button[aria-selected="true"]{ background:var(--ink); color:var(--paper); }
.demo-note{ min-height:2.5rem; padding:.55rem .9rem .8rem; font-size:.875rem; color:var(--muted); }
/* The one gradient left: the skeleton shimmer, built only from paper-2 and rule */
.sk{ display:block; height:.55rem; border-radius:var(--radius); background:linear-gradient(90deg,var(--rule) 25%,var(--paper-2) 37%,var(--rule) 63%); background-size:400% 100%; animation:shimmer 1.8s ease infinite; }
@keyframes shimmer{ 0%{ background-position:100% 50%; } 100%{ background-position:0 50%; } }
.sk-wrap{ position:absolute; inset:1rem; display:flex; flex-direction:column; gap:.65rem; animation:lpFade .45s ease both; }
.sk-head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-bottom:.5rem; border-bottom:var(--border); }
.sk-pill{ height:1.25rem; width:5rem; border-radius:var(--radius); border:1px solid var(--ink); background:transparent; font-size:.7rem; font-weight:600; line-height:1.15rem; text-align:center; color:var(--ink); }
.sk-pill.per{ background:var(--amber); }
.sk-row{ display:flex; align-items:center; gap:.7rem; padding:.55rem .7rem; border:var(--border); border-radius:var(--radius); background:var(--paper); }
.sk-row.hot{ border-color:var(--clay); }
.sk-dot{ flex:none; width:.65rem; height:.65rem; border-radius:50%; background:var(--moss); }
.sk-row.hot .sk-dot{ background:var(--clay); }
.sk-tag{ flex:none; margin-left:auto; width:3.4rem; height:1.1rem; border-radius:var(--radius); border:1px solid var(--muted); font-size:.65rem; font-weight:600; line-height:1rem; text-align:center; color:var(--muted); }
.sk-cols{ flex:1; display:grid; grid-template-columns:1.4fr 1fr; gap:.9rem; min-height:0; }
.sk-col{ display:flex; flex-direction:column; gap:.55rem; }
.sk-bub{ max-width:78%; padding:.55rem .7rem; border-radius:var(--radius); border:var(--border); background:var(--paper); display:grid; gap:.4rem; }
.sk-bub.me{ align-self:flex-end; border-color:var(--ink); }
.sk-card{ padding:.7rem; border:var(--border); border-radius:var(--radius); background:var(--paper); display:grid; gap:.45rem; align-content:start; }
.sk-card.per{ border:1px dashed var(--ink); }
.sk-lab{ width:fit-content; padding:.1em .5em; border-radius:var(--radius); font-size:.7rem; font-weight:700; color:var(--ink); background:var(--amber); }
.sk-grid{ flex:1; display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; }
.sk-field{ display:grid; gap:.35rem; }
.sk-input{ height:1.5rem; border-radius:var(--radius); border:1px solid var(--muted); background:var(--paper); }
.sk-btn{ align-self:flex-start; height:1.9rem; padding:0 .9rem; border-radius:var(--radius); font-size:.75rem; font-weight:700; line-height:1.9rem; color:var(--paper); background:var(--ink); }
.sk-btn.per{ color:var(--ink); background:var(--amber); }
.sk-meter{ display:grid; grid-template-columns:5rem 1fr; align-items:center; gap:.7rem; font-size:.75rem; color:var(--muted); }
.sk-meter i{ display:block; height:.55rem; border-radius:var(--radius); background:var(--rule); position:relative; overflow:hidden; }
.sk-meter i b{ position:absolute; inset:0 auto 0 0; width:var(--w); background:var(--ink); border-radius:inherit; }
.sk-meter.hi i b{ background:var(--amber); }
.sk-avatar{ width:3rem; height:3rem; border-radius:var(--radius); background:var(--rule); border:1px solid var(--muted); }
.hotspot{ position:absolute; z-index:2; width:1.6rem; height:1.6rem; border-radius:50%; cursor:pointer; background:var(--amber); border:2px solid var(--ink); transform:translate(-50%,-50%); }
.hotspot::after{ content:""; position:absolute; inset:-.45rem; border-radius:50%; border:2px solid var(--ink); animation:ping 1.8s ease-out infinite; }

/* ───────── Chains and pipelines ───────── */
.chain{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; }
.cn{ padding:.7rem 1rem; border:1px solid var(--ink); border-radius:var(--radius); background:var(--paper); font-size:1rem; font-weight:600; color:var(--ink); cursor:pointer; transition:background-color .2s, border-color .2s; }
.cn small{ display:block; font-size:.8125rem; font-weight:400; color:var(--muted); }
.cn.per{ background:var(--amber); }
.cn.per small{ color:var(--ink); }
.cn.ok{ border-color:var(--moss); border-width:2px; padding:calc(.7rem - 1px) calc(1rem - 1px); }
.cn:hover, .cn:focus-visible{ background:var(--paper-2); }
.cn.per:hover, .cn.per:focus-visible{ background:var(--amber); }
.cn.is-sel{ border-color:var(--moss); border-width:2px; padding:calc(.7rem - 1px) calc(1rem - 1px); }
.cc{ flex:none; width:2.2rem; height:2px; background:var(--ink); }
@media (max-width:640px){
  .chain{ flex-direction:column; align-items:stretch; gap:.35rem; }
  .cc{ width:2px; height:1.1rem; margin-left:1.4rem; }
}
.pl{ position:relative; display:grid; gap:.75rem; grid-template-columns:1fr; counter-reset:pl; }
@media (min-width:768px){ .pl{ grid-template-columns:repeat(4,1fr); gap:1.6rem; } }
.pl li{ position:relative; padding:1.1rem 1.1rem 1rem; border:1px solid var(--ink); border-radius:var(--radius); background:var(--paper); }
.pl li.per{ background:var(--amber); }
.pl li b{ display:block; font-size:1.125rem; font-weight:600; color:var(--ink); }
.pl li span{ display:block; margin-top:.2rem; font-size:.9375rem; color:var(--muted); }
.pl li.per span{ color:var(--ink); }
.pl li::before{ counter-increment:pl; content:counter(pl); display:grid; place-items:center; width:1.6rem; height:1.6rem; margin-bottom:.7rem; border-radius:50%; font-size:.8125rem; font-weight:700; color:var(--paper); background:var(--ink); }
.pl li.per::before{ color:var(--ink); background:var(--amber); }
.pl li:not(:last-child)::after{ content:""; position:absolute; background:var(--ink); left:100%; top:2.1rem; width:1.6rem; height:2px; }
@media (max-width:767px){
  .pl li:not(:last-child)::after{ left:2rem; top:100%; width:2px; height:.75rem; }
}

/* ───────── Case-study header facts: definition rows, no tiles ───────── */
.facts{ display:grid; gap:0; margin:0; }
.facts > div{ display:grid; grid-template-columns:minmax(0,1fr); gap:.15rem; padding:.85rem 0; border-top:1px solid var(--rule); }
.facts > div:last-child{ border-bottom:1px solid var(--rule); }
@media (min-width:640px){ .facts > div{ grid-template-columns:9rem minmax(0,1fr); gap:1.5rem; align-items:baseline; } }
.facts dt{ font-size:.9375rem; font-weight:600; color:var(--muted); }
.facts dd{ margin:0; font-size:1.0625rem; font-weight:600; line-height:1.4; color:var(--ink); }
.facts dd small{ display:block; font-size:.9375rem; font-weight:400; color:var(--muted); }

/* ───────── Stat numerals: 950 and 35% ───────── */
.stats{ display:grid; grid-template-columns:minmax(0,1fr); gap:1.5rem; margin-top:2rem; }
@media (min-width:768px){ .stats{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:3rem; align-items:start; } .stat-sm{ padding-top:3.5rem; } }
.stat-num{ margin:0; min-width:3.1ch; display:inline-block; }
.stat-sm .stat-num{ font-size:clamp(2.75rem,6.5vw,5rem); line-height:1; }
.stat-cap{ margin:.5rem 0 0; font-size:1.0625rem; color:var(--ink); }
.stat-cap time{ white-space:nowrap; }

/* ───────── Threshold simulator ───────── */
.sim{ display:grid; gap:1.25rem; }
@media (min-width:900px){ .sim{ grid-template-columns:1fr 1.15fr; align-items:start; } }
.sim label{ display:grid; gap:.35rem; font-size:.9375rem; font-weight:600; color:var(--ink); }
.sim label span{ display:flex; justify-content:space-between; }
.sim output{ color:var(--moss); font-variant-numeric:tabular-nums; }
.sim input[type=range]{ width:100%; accent-color:var(--ink); }
.meter{ position:relative; margin-top:.2rem; }
.meter .bar{ position:relative; height:.8rem; border-radius:var(--radius); background:var(--rule); overflow:visible; }
.meter .fill{ position:absolute; inset:0 auto 0 0; width:0; border-radius:var(--radius); background:var(--ink); }
.meter.hit .fill{ background:var(--amber); }
.meter .thr{ position:absolute; top:-.35rem; bottom:-.35rem; width:2px; background:var(--ink); }
.meter .row{ display:flex; justify-content:space-between; font-size:.875rem; color:var(--muted); margin-bottom:.35rem; }
.meter .row em{ font-style:normal; font-variant-numeric:tabular-nums; color:var(--ink); }
.sim-flow{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin-top:1rem; }
.sim-flow li{ padding:.5rem .8rem; border:1px solid var(--muted); border-radius:var(--radius); font-size:.9375rem; font-weight:600; color:var(--muted); background:var(--paper); transition:background-color .4s ease, color .4s ease, border-color .4s ease; }
.sim-flow li.on{ color:var(--ink); border-color:var(--ink); }
.sim-flow li.on.per{ background:var(--amber); }
.sim-flow li.on.ok{ border-color:var(--moss); border-width:2px; padding:calc(.5rem - 1px) calc(.8rem - 1px); }

/* ───────── Closing call to action (kept for later) ───────── */
.cta{ position:relative; border-radius:var(--radius); border:var(--border); background:var(--paper-2); }

/* ───────── Reduced motion: keep the end state, drop the movement ───────── */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms!important; animation-delay:0s!important; animation-iteration-count:1!important;
    transition-duration:.001ms!important; transition-delay:0s!important;
  }
  .particles{ display:none; }
}

/* ───────── Small additions ───────── */
.nd .hit{ fill:transparent; stroke:none; }
.nd:hover text.cap, .nd:focus-visible text.cap{ fill:var(--ink)!important; }
.nd:focus-visible .hit{ stroke:var(--moss); stroke-width:1.5; rx:2; }
.pulse{ transform-box:fill-box; transform-origin:center; animation:pulse2 2s ease-out infinite; }
@keyframes pulse2{ 0%{ transform:scale(1); opacity:.55; } 100%{ transform:scale(2.4); opacity:0; } }

/* ───────── Career strip (kept for later) ───────── */
.career{ display:flex; gap:4px; height:2.5rem; }
.seg{ width:0; overflow:hidden; display:flex; align-items:center; padding:0 .85rem; border-radius:var(--radius); font-size:.875rem; font-weight:600; white-space:nowrap; transition:width 1.3s cubic-bezier(.2,.7,.2,1) .15s; }
.in .seg{ width:var(--w); }
.seg.a{ background:var(--rule); color:var(--ink); }
.seg.b{ background:var(--ink); color:var(--paper); }
.career-ticks{ position:relative; height:1.2rem; margin-top:.45rem; font-size:.8125rem; color:var(--muted); }
.career-ticks span{ position:absolute; top:0; }
@media (max-width:640px){ .seg.a span{ display:none; } }

/* captions and values inside clickable nodes keep their own size */
.nd text.cap{ font-size:12.5px; font-weight:500; }
.nd text.val{ font-size:20px; font-weight:700; }

/* ───────── Phones ───────── */
.dg-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.swipe-hint{ display:none; }
.only-narrow{ display:none; }
.demo, .demo-bar{ min-width:0; }
.demo-bar .chip{ flex:none; }
@media (max-width:699px){
  .dg-scroll > svg{ min-width:560px; }
  .swipe-hint{ display:block; margin-top:.35rem; font-size:.8125rem; color:var(--muted); }
  .only-wide{ display:none; }
  .only-narrow{ display:block; }
}
@media (max-width:640px){
  .nav-cv{ display:none!important; }
  .pt{ padding:1rem; }
  .mbar{ grid-template-columns:3.9rem minmax(0,1fr); }
  .morph-stage{ aspect-ratio:1 / 1.08; }
  .mchip{ max-width:38%; padding:.35rem .5rem; font-size:.72rem; }
  .mhub{ width:4.6rem; height:4.6rem; font-size:.75rem; }
  .demo-screen{ aspect-ratio:5 / 4; }
  .career-ticks span:nth-child(2){ display:none; }
  .draft-pill{ height:2rem; font-size:.75rem; padding:0 .7rem; left:.6rem; bottom:calc(.6rem + env(safe-area-inset-bottom,0px)); }
}
@media (max-width:480px){
  .demo-url{ display:none; }
  .demo-bar{ justify-content:space-between; }
}

/* ───────── Shared lede and lists ───────── */
.lead{ font-size:1.1875rem; line-height:1.6; color:var(--ink); max-width:36rem; }
.proj-title{ font-size:clamp(2rem,4vw,3rem); color:var(--ink); line-height:1.1; letter-spacing:0; }
.proj-tag{ margin-top:.45rem; font-size:1.125rem; color:var(--ink); }

/* ───────── Hero: typed greeting ───────── */
.tw-h1{ position:relative; }
.tw-line{ display:block; }
.tw-w{ display:inline-block; white-space:nowrap; }
.tw-c{ opacity:0; }
.tw-c.on{ opacity:1; }
.tw-caret{ position:absolute; width:3px; background:var(--ink); pointer-events:none; animation:twblink 1s steps(1) infinite; }
.tw-caret.done{ animation:none; opacity:0; transition:opacity .6s ease; }
@keyframes twblink{ 50%{ opacity:0; } }