/* krishansaini.com · OBSERVABLE. Hand-written, no build step. */

/* ── tokens ─────────────────────────────────────────────────── */
:root{
  color-scheme:dark;
  --bg:#0A0E14;
  --surface:#121826;
  --text:#E7EDF4;
  --muted:#93A0B4;
  --violet:#A78BFA;
  --green:#34D399;
  --amber:#E8B15C;
  --border:rgba(167,139,250,.12);
  --mono:"IBM Plex Mono","PM-fallback",ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:"Space Grotesk","SG-fallback",system-ui,-apple-system,sans-serif;
}
@font-face{font-family:"Space Grotesk";src:url("/fonts/space-grotesk-var.woff2") format("woff2");
  font-weight:300 700;font-style:normal;font-display:swap;}
@font-face{font-family:"IBM Plex Mono";src:url("/fonts/plex-mono-400.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"IBM Plex Mono";src:url("/fonts/plex-mono-500.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:"SG-fallback";src:local("Arial");size-adjust:101%;ascent-override:98%;}
@font-face{font-family:"PM-fallback";src:local("Courier New");size-adjust:108%;}

/* ── base ───────────────────────────────────────────────────── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:44px}
body{
  background:var(--bg);color:var(--text);
  font-family:var(--sans);font-size:1.0625rem;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  padding-top:32px;
}
img{max-width:100%;display:block}
a{color:var(--violet)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.amber{color:var(--amber);font-style:normal}
:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip{position:fixed;top:-48px;left:12px;z-index:99;background:var(--surface);color:var(--text);
  padding:10px 16px;border-radius:8px;transition:top .2s}
.skip:focus{top:44px}

h1{font-size:clamp(2.6rem,7vw,6rem);font-weight:700;letter-spacing:-.02em;line-height:1.04}
h2{font-size:clamp(1.6rem,3.5vw,2.6rem);font-weight:700;letter-spacing:-.015em;line-height:1.15;text-wrap:balance}
h3{font-weight:700}
section,header.hero,nav.contents{padding-inline:clamp(20px,5vw,64px)}

.sec-index{font-family:var(--mono);color:var(--muted);text-transform:uppercase;
  letter-spacing:.08em;font-size:13px;margin-bottom:2.2rem}
.sec-back{color:var(--muted);text-decoration:none}
.sec-back:hover{color:var(--violet)}
.sec-back::after{content:" ↖";opacity:0;transition:opacity .2s}
.sec-back:hover::after{opacity:1}

/* ── reveals (JS only) ──────────────────────────────────────── */
.js [data-reveal]{opacity:0;transform:translateY(10px);
  transition:opacity .38s ease,transform .38s ease;
  transition-delay:calc(var(--d,0)*45ms)}
.js [data-reveal].in{opacity:1;transform:none}
.js .ledger-row[data-reveal]{transform:none;clip-path:inset(0 100% 0 0);
  transition:clip-path .35s ease;transition-delay:calc(var(--d,0)*45ms)}
.js .ledger-row[data-reveal].in{clip-path:inset(0 -2% 0 0)}

/* ── telemetry bar ──────────────────────────────────────────── */
.telemetry{
  position:fixed;top:0;left:0;right:0;height:32px;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:0 clamp(12px,3vw,28px);
  background:rgba(10,14,20,.86);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
  font-family:var(--mono);font-size:12px;font-variant-numeric:tabular-nums;
  white-space:nowrap;overflow:hidden;
}
.tel-stats{display:flex;gap:18px;min-width:0;order:2}
.tel-l{color:var(--muted)}
.tel-v{color:var(--green)}
.tel-caption{color:var(--muted);overflow:hidden;text-overflow:ellipsis;min-width:0;order:1}

/* ── hero ───────────────────────────────────────────────────── */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;overflow:hidden}
#flow{position:absolute;inset:0;width:100%;height:100%;opacity:.68}
.hero-vignette{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 60% 56% at 36% 52%,rgba(10,14,20,.85) 0%,rgba(10,14,20,.42) 55%,rgba(10,14,20,0) 100%)}
.hero-inner{position:relative;max-width:calc(1200px - 2*clamp(20px,5vw,64px));margin-inline:auto;width:100%}
.kicker{color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-size:13px;margin-bottom:1.6rem}
.hero .sub{max-width:56ch;margin-top:1.6rem;font-size:clamp(1.02rem,1.6vw,1.22rem);color:var(--muted)}
.cta-row{display:flex;gap:14px;margin-top:2.4rem;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4ch;
  padding:13px 26px;border-radius:10px;text-decoration:none;font-weight:500;min-height:48px}
.btn-solid{background:var(--violet);color:#0A0E14}
.btn-solid:hover{filter:brightness(1.1)}
.btn-ghost{border:1px solid var(--border);color:var(--text);font-size:14px;
  background:rgba(10,14,20,.65)}
.btn-ghost:hover{border-color:var(--violet)}
.hero-shapes{margin-top:1.6rem;font-size:13px;color:var(--muted);letter-spacing:.1em}
.hero-shapes a{color:var(--muted);text-decoration:none}
.hero-shapes a:hover{color:var(--violet)}
.hero-lay{margin-top:1rem;font-size:12.5px;letter-spacing:.08em}
.hero-lay a.lay-btn{color:var(--text);font-size:12px;padding:9px 16px;min-height:40px;text-decoration:none}
.hero-lay a.lay-btn:hover{border-color:var(--violet)}
.contents-lay{color:var(--muted);max-width:52ch;margin:-1.2rem 0 2rem;font-size:.98rem}
.hero-fig{position:absolute;bottom:52px;left:clamp(20px,5vw,64px);color:var(--muted);font-size:12px}
.scroll-cue{position:absolute;bottom:20px;left:clamp(20px,5vw,64px);color:var(--muted);font-size:12px;
  animation:cue 2.2s ease-in-out infinite}
@keyframes cue{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

/* ── ledger rows (signature) ────────────────────────────────── */
.ledger-row{display:flex;gap:12px;text-decoration:none;color:var(--text);
  padding:.55rem 0;min-height:44px;align-items:center}
.lr-label{font-size:1.4rem;font-weight:500}
.lr-label.sm{font-size:.95rem;font-weight:400;color:var(--muted)}
.lr-leader{flex:1;min-width:24px;height:1em;align-self:center;opacity:.3;
  background:repeating-linear-gradient(90deg,currentColor 0 1px,transparent 1px 6px);
  background-size:100% 1px;background-position:0 60%;background-repeat:no-repeat}
.lr-fig{font-family:var(--mono);font-size:.85rem;color:var(--muted);letter-spacing:.04em;text-align:right}
.lr-fig.big{color:var(--text);font-size:1.05rem;font-weight:500;text-align:left}
.lr-key{font-family:var(--mono);font-size:.82rem;font-weight:500;color:var(--text);
  letter-spacing:.06em;text-decoration:none}
.lr-key.live{color:var(--green)}
.engage .ledger-row,.panel .ledger .ledger-row{row-gap:2px}
.engage .lr-label.sm,.panel .ledger .lr-label.sm{flex:1 1 16ch;min-width:16ch;text-align:right}
.engage .lr-label.sm{text-align:left;flex-basis:100%;order:3;margin-top:.1rem;color:var(--text);font-size:.98rem}
.engage .lr-leader{order:2}
.engage .lr-key{order:1}
.engage .rownum{order:2;font-size:.72rem;color:var(--muted);opacity:.7;margin-left:.4rem}
a.lr-key.live:hover{text-decoration:underline;text-underline-offset:3px}
a.ledger-row .lr-label{text-decoration:underline;text-decoration-thickness:.06em;text-underline-offset:4px;
  text-decoration-color:var(--border)}
@media (hover:hover) and (pointer:fine){
  a.ledger-row:hover .lr-label{text-decoration-thickness:.12em;text-decoration-color:var(--violet)}
  a.ledger-row:hover .lr-fig{color:var(--violet)}
}

/* ── contents ───────────────────────────────────────────────── */
.contents{max-width:1200px;margin-inline:auto;padding-block:14vh 10vh}
.contents .ledger-row{max-width:880px}

/* ── work panels ────────────────────────────────────────────── */
.work{display:flex;flex-direction:column;gap:8rem;padding-block:6rem;
  max-width:1200px;margin-inline:auto}
.panel{display:grid;grid-template-columns:40% 1fr;gap:clamp(2rem,4vw,4rem);max-width:1200px}
.panel-left,.panel-right{min-width:0}
.panel-left{position:sticky;top:6rem;align-self:start}
.panel-human{margin-top:1rem;max-width:34ch;font-size:1.08rem;line-height:1.5}
.panel-what{color:var(--muted);margin-top:.8rem;max-width:38ch;font-size:.95rem}
.panel .ledger{margin-top:1.8rem}
.panel .ledger .ledger-row{flex-wrap:wrap;position:relative;padding-block:.65rem;
  border-bottom:1px solid rgba(167,139,250,.07)}
.lr-bar{position:absolute;left:0;bottom:-1px;height:2px;width:var(--w,0);
  background:var(--violet);opacity:.45}
.stack{margin-top:1.6rem;font-size:12px;color:var(--muted);letter-spacing:.08em}
.btn-try{margin-top:1.2rem;font-size:12px;padding:10px 18px}
.lay-note{margin-top:1.2rem;color:var(--muted);font-size:.9rem;max-width:36ch;
  border-left:2px solid rgba(167,139,250,.3);padding-left:.9rem}
.ledger-note{font-size:11px;color:var(--muted);letter-spacing:.08em;margin-top:.4rem;text-transform:uppercase}
.deep-link{margin-top:1.4rem;font-size:12px;letter-spacing:.05em}
.deep-link a{color:var(--violet);text-decoration:none}
.deep-link a:hover{text-decoration:underline;text-underline-offset:4px}
.appendix .lr-label{flex:0 0 auto;white-space:nowrap}
.appendix .lr-fig{flex:1 1 auto;min-width:0;white-space:normal;text-align:right}
.work-close{margin-top:0}
.work-foot{margin-top:2rem;font-size:11px;color:var(--muted);letter-spacing:.14em}
.doctrine{margin-top:2.4rem;font-size:12px;color:var(--muted);letter-spacing:.04em;line-height:2;max-width:56ch}
.panel-body{max-width:62ch;display:flex;flex-direction:column;gap:1rem;margin-top:1.6rem}
.panel-foot{margin-top:2rem;font-size:12px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.fig{font-size:12px;color:var(--muted);margin-top:.8rem}
.marginal{margin-top:1.6rem;font-style:italic;color:var(--muted);max-width:44ch;
  border-left:2px solid var(--violet);padding-left:1rem}

/* diagrams */
.diagram-wrap{position:relative;max-width:100%}
.diagram-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--border);border-radius:12px;background:var(--surface)}
.diagram-wrap::after{content:"";position:absolute;top:1px;bottom:1px;right:1px;width:44px;
  border-radius:0 12px 12px 0;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,transparent,rgba(18,24,38,.9))}
.diagram-wrap.scrollable::after{opacity:1}
.diagram{min-width:560px;width:100%;height:auto;display:block;padding:8px}
.diagram text{font-family:var(--mono);font-size:12.5px;fill:var(--text);letter-spacing:.05em}
.diagram .dsubtext{font-size:10px;fill:var(--muted)}
.diagram .dlabel{font-size:10px;fill:var(--muted)}
.dnode rect{fill:rgba(18,24,38,.85);stroke:var(--violet);stroke-width:1.5}
.dnode rect.hit{fill:transparent;stroke:none!important}
.dnode{cursor:pointer;outline:none}
.dnode:focus-visible rect:not(.hit){stroke-width:2.5;stroke:var(--violet)}
.dnode[aria-pressed="true"] rect:not(.hit){stroke:var(--green)}
.dedge{stroke:var(--violet);stroke-width:1.5;fill:none}
.sub-band{fill:rgba(167,139,250,.07);stroke:var(--border);stroke-width:1}
.phi-seal{fill:none;stroke:var(--green);stroke-width:1.5;stroke-dasharray:.014 .009}
.amber-node rect{stroke:var(--amber);stroke-width:2}
.amber-edge{stroke:var(--amber)}
.dcaption{margin-top:1rem;min-height:5em;font-size:13px;color:var(--muted);max-width:62ch}
@media (max-width:768px){.dcaption{min-height:6.5em}}
.dcaption.active-cap{color:var(--text)}

/* draw-in: dash technique, JS adds .lit to svg */
.js .diagram .dseg{opacity:0;transition:opacity .4s ease;transition-delay:calc(var(--i,0)*50ms)}
.js .diagram path.dseg,.js .diagram rect.dseg:not(.phi-seal),.js .diagram .dnode rect:not(.hit){
  stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset .6s ease,opacity .4s ease;
  transition-delay:calc(var(--i,0)*50ms)}
.js .diagram .dnode.dseg rect{transition-delay:calc(var(--i,0)*50ms)}
.js .diagram.lit .dseg{opacity:1}
.js .diagram.lit path.dseg,.js .diagram.lit rect.dseg:not(.phi-seal),.js .diagram.lit .dnode rect:not(.hit){stroke-dashoffset:0}
/* dnode groups: the rect inside inherits the group's --i via CSS var scope */
.js .diagram .dnode.dseg{opacity:0}
.js .diagram.lit .dnode.dseg{opacity:1}

/* ── trace ──────────────────────────────────────────────────── */
.trace{max-width:1200px;margin-inline:auto;padding-block:7rem}
.trace-ruler{position:relative;height:1.4rem;color:var(--muted);font-size:12px;
  border-bottom:1px solid var(--border);padding-bottom:.5rem;margin-bottom:2.4rem}
.trace-ruler span{position:absolute;left:calc(var(--y)/13*100%);transform:translateX(-2px)}
.trace-ruler span:last-child{transform:translateX(-100%)}
.trace-grid{position:relative;
  background:repeating-linear-gradient(90deg,rgba(167,139,250,.04) 0 1px,transparent 1px calc(100%/13));
}
.span-block{margin-bottom:2.2rem;position:relative}
.span-bar{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;
  background:var(--surface);border:1px solid var(--border);border-radius:10px;
  padding:.8rem 1.1rem;position:relative;
  margin-left:calc((var(--c1,1) - 1)/26*100%);
  width:calc((var(--c2,27) - var(--c1,1))/26*100%);
  min-width:min(100%,340px);
}
.js [data-reveal] .span-bar{transform:scaleX(0);transform-origin:left;transition:transform .5s ease}
.js [data-reveal].in .span-bar{transform:scaleX(1)}
.span-title{font-weight:700}
.span-org{font-size:11.5px;color:var(--muted);letter-spacing:.06em}
.span-cap{position:absolute;right:-4px;top:50%;width:8px;height:8px;border-radius:50%;
  background:var(--green);transform:translateY(-50%);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
.span-line{color:var(--muted);max-width:68ch;margin-top:.7rem;
  margin-left:calc((var(--c1,1) - 1)/26*100%)}
.span-ledger{max-width:480px;margin-top:.4rem;margin-left:calc((var(--c1,1) - 1)/26*100%)}
.ledger-row.tight{min-height:0;padding:.25rem 0}
.edu .span-line{color:var(--muted);font-size:12.5px;margin-left:0}
.trace-close{max-width:60ch;margin-top:3rem;font-size:1.15rem}

/* ── capabilities ───────────────────────────────────────────── */
.caps{max-width:1200px;margin-inline:auto;padding-block:7rem}
.caps-preface{font-size:1.25rem;max-width:48ch;margin-bottom:2.6rem}
.caps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}
.cap-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:1.4rem 1.5rem}
.cap-card h3{font-family:var(--mono);font-size:13px;letter-spacing:.08em;font-weight:500;
  border-left:3px solid var(--violet);padding-left:.8rem;margin-bottom:1rem}
.cap-list{font-size:14px;line-height:1.9;color:var(--muted);font-weight:400}
.cap-list b{color:var(--text);font-weight:500}

/* ── operator ───────────────────────────────────────────────── */
.operator{max-width:1200px;margin-inline:auto;padding-block:7rem}
.op-grid{display:grid;grid-template-columns:40% 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
.op-photo-col{position:sticky;top:6rem;align-self:start}
@media (max-width:900px){.op-photo-col{position:static}}
.op-frame{max-width:280px;margin-inline:auto;border:1px solid var(--violet);border-radius:14px;
  overflow:hidden;position:relative}
.op-frame img{filter:grayscale(1) contrast(1.05);width:100%;height:auto}
.op-frame::after{content:"";position:absolute;inset:0;background:var(--violet);
  mix-blend-mode:color;opacity:.3;pointer-events:none}
.op-label{margin-top:1rem;text-align:center;font-size:12px;color:var(--muted);letter-spacing:.06em}
.op-rb-label{color:var(--muted);letter-spacing:.08em;font-size:13px;margin-bottom:1.8rem}
.principle{margin-bottom:1.9rem;max-width:56ch}
.principle h3{font-size:1.25rem;margin-bottom:.45rem}
.principle p{color:var(--muted)}

/* ── contact ────────────────────────────────────────────────── */
.contact{max-width:1200px;margin-inline:auto;padding-block:7rem 3rem}
.clock{margin-bottom:4.5rem}
.clock-band{margin-bottom:1.1rem;position:relative}
.clock-label{font-size:12px;color:var(--muted);letter-spacing:.08em;margin-bottom:.35rem}
.clock-now{color:var(--green);margin-left:.8rem}
.clock-cells{display:grid;grid-template-columns:repeat(24,1fr);grid-auto-rows:16px;gap:2px;height:16px;position:relative}
.clock-cells span{background:rgba(147,160,180,.12);border-radius:2px;height:16px}
.clock-cells span.cell-work{background:rgba(167,139,250,.7)}
.clock-cells span.cell-olap{background:rgba(52,211,153,.55)}
.now-line{position:absolute;top:-4px;bottom:-4px;width:1px;background:var(--text);opacity:.8}
.clock-caption{color:var(--muted);font-size:.95rem;margin-top:1.4rem;max-width:64ch}

.contact-head{display:flex;align-items:center;gap:1.1rem;margin-bottom:.4rem}
.contact-face{border-radius:50%;border:1px solid var(--violet);width:64px;height:64px;
  object-fit:cover;filter:grayscale(1) contrast(1.05)}
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(2rem,4vw,4.5rem);align-items:start}
.contact-rail{display:flex;flex-direction:column;gap:1rem;font-size:13px;padding-top:.6rem}
.contact-rail a{color:var(--text);text-decoration:none;letter-spacing:.04em}
.contact-rail a:hover{color:var(--violet)}
.rail-btn{justify-content:flex-start;font-size:12px}
.rail-note{font-size:11px;color:var(--muted)!important;letter-spacing:.05em}
.rail-note:hover{color:var(--violet)!important}
.contact-text{color:var(--muted);max-width:52ch;margin-top:1rem}
.email-mega{display:inline-block;margin-top:1.8rem;font-size:clamp(1.25rem,3vw,2.1rem);font-weight:700;
  color:var(--text);text-decoration:underline;text-decoration-color:var(--amber);
  text-decoration-thickness:.08em;text-underline-offset:6px}
@media (max-width:420px){.email-mega{word-break:break-all}}
@media (hover:hover) and (pointer:fine){.email-mega:hover{text-decoration-thickness:.16em}}
.copy-btn{margin-left:1rem;background:none;border:1px solid var(--border);color:var(--muted);
  border-radius:8px;padding:10px 16px;cursor:pointer;font-size:12px;min-height:44px;min-width:44px}
.copy-btn:hover{border-color:var(--violet);color:var(--text)}
.copied{margin-left:.8rem;color:var(--green);font-size:12px}
.engage{margin-top:1.6rem;max-width:720px}
.engage .ledger-row{flex-wrap:wrap;min-height:0;padding:.45rem 0;border-bottom:1px solid rgba(167,139,250,.07)}
.on-request{color:var(--muted);letter-spacing:.04em;font-size:12px}

.colophon{border-top:1px solid var(--border);margin-top:4rem;padding:1.6rem clamp(20px,5vw,64px) 2.2rem;
  max-width:1200px;margin-inline:auto;color:var(--muted);font-size:12px;line-height:1.8}

/* ── responsive ─────────────────────────────────────────────── */
@media (max-width:1100px){
  .marginal{margin-top:1.6rem}
}
@media (max-width:900px){
  .panel{grid-template-columns:1fr}
  .panel-left{position:static}
  .op-grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr;align-items:start}
}
@media (max-width:768px){
  #flow{opacity:.45}
  .trace,.caps,.operator{padding-block:4rem}
  .contact{padding-block:4rem 3rem}
  .work{padding-block:4rem;gap:4.5rem}
  .contents{padding-block:8vh 5vh}
  .appendix{flex-wrap:wrap}
  .appendix .lr-label{flex:1 1 100%}
  .appendix .lr-leader{display:none}
  .appendix .lr-fig{flex:1 1 100%;text-align:left;margin-top:.3rem}
  body{padding-top:0;padding-bottom:calc(40px + env(safe-area-inset-bottom))}
  .telemetry{top:auto;bottom:0;border-bottom:none;border-top:1px solid var(--border);
    padding-bottom:env(safe-area-inset-bottom);height:calc(32px + env(safe-area-inset-bottom))}
  .tel-desk{display:none}
  .tel-caption{display:none}
  .telemetry.show-cap .tel-caption{display:block;position:fixed;bottom:calc(34px + env(safe-area-inset-bottom));
    left:0;right:0;background:var(--surface);padding:10px 16px;font-size:11px;border-top:1px solid var(--border);
    white-space:normal}
  .cta-row .btn{width:100%}
  .hero-fig{display:none}
  .lr-label{font-size:1.1rem}
  .work{gap:5rem}
  .trace-grid{background:none}
  .trace-ruler{display:none}
  .span-bar,.span-line,.span-ledger{margin-left:0!important}
  .span-bar{width:var(--w,100%)!important;min-width:min(100%,300px)}
  .span-block{border-left:1px solid var(--border);padding-left:1.1rem}
  .contents{padding-block:9vh 7vh}
}
.telemetry .tel-info{display:none;background:none;border:none;color:var(--muted);font-family:var(--mono);
  font-size:12px;cursor:pointer;padding:0 16px;min-height:32px;min-width:44px}
@media (max-width:768px){.telemetry .tel-info{display:inline-flex;align-items:center}}

@media (max-width:400px){
  .lr-fig{font-size:.72rem}
  .lr-label{font-size:1rem}
}

/* ── reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce) and (max-width:768px){
  .tel-caption{display:block;white-space:normal;font-size:11px}
}
@media (prefers-reduced-motion:reduce){
  .tel-stats{display:none}
  html{scroll-behavior:auto}
  .js [data-reveal],.js .ledger-row[data-reveal]{opacity:1;transform:none;clip-path:none;transition:none}
  .js [data-reveal] .span-bar{transform:none;transition:none}
  .js .diagram .dseg,.js .diagram path.dseg,.js .diagram rect.dseg:not(.phi-seal),.js .diagram .dnode rect:not(.hit){
    opacity:1;stroke-dashoffset:0;transition:none}
  .scroll-cue{animation:none}
  .span-cap{animation:none}
}

/* QA-only: ?shot= flattens vh-dependent sections for full-page capture */
.flat *,.flat *::before,.flat *::after{transition:none!important;animation:none!important}
.flat .hero{min-height:820px}
.flat .contents{padding-block:6rem}

/* no-JS: the page is a complete static resume · hide what only JS makes true */
.no-js .telemetry{display:none}
.no-js .clock-cells,.no-js .clock-now,.no-js .clock-legend{display:none}
.no-js body{padding-top:0;padding-bottom:0}
.no-js .dcaption,.no-js .hero-fig,.no-js .scroll-cue{display:none}

/* ── print: a clean light document · buyers print pages like this ── */
@media print{
  body{background:#fff;color:#1a1f26;padding:0;font-size:10.5pt;line-height:1.5}
  .telemetry,#flow,.hero-vignette,.scroll-cue,.hero-fig,.copy-btn,.copied,
  .contents,.clock,.skip,.cta-row{display:none!important}
  .hero{min-height:auto;padding-top:.5cm}
  h1,h2,h3,.lr-label,.span-title,.email-mega,.lr-fig.big,.lr-key,.panel-human{color:#000}
  .kicker,.sub,.muted,.panel-what,.span-line,.span-org,.lr-label.sm,.lr-fig,
  .cap-list,.principle p,.contact-text,.clock-caption,.stack,.sec-index,
  .dcaption,.fig,.marginal,.op-label,.trace-close,.on-request{color:#444}
  .amber,.lr-key.live{color:#000}
  a{color:#000;text-decoration:underline}
  .btn{border:1px solid #999;color:#000;background:none}
  .cap-card,.span-bar,.diagram-scroll{background:#fff;border-color:#bbb}
  .cap-card h3{border-left-color:#000}
  .diagram text{fill:#222}.diagram .dsubtext,.diagram .dlabel{fill:#666}
  .dnode rect{fill:#fff;stroke:#555}.dedge{stroke:#777}
  .sub-band{fill:#f2f2f2;stroke:#ccc}.phi-seal{stroke:#2a8a63}
  .amber-node rect{stroke:#8a6a2a}.amber-edge{stroke:#8a6a2a}
  .op-frame{border-color:#999}.op-frame::after{display:none}
  .op-frame img{filter:grayscale(1)}
  .marginal{border-left-color:#999}
  .lr-bar{background:#888}
  .span-cap{display:none}
  .trace-grid{background:none}
  .colophon{border-top-color:#ccc;color:#666}
  .js [data-reveal],.js .ledger-row[data-reveal]{opacity:1!important;transform:none!important;clip-path:none!important}
  .js .diagram .dseg,.js .diagram path.dseg,.js .diagram rect.dseg,.js .diagram .dnode rect{
    opacity:1!important;stroke-dashoffset:0!important}
  .js [data-reveal] .span-bar{transform:none!important}
  .panel,.principle,.cap-card,.span-block{break-inside:avoid}
  section,header.hero,nav.contents{padding-inline:0}
}

.ui-shot{margin-top:1.4rem;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:#fff}
.ui-shot img{width:100%;height:auto;display:block}
.ui-shot figcaption{padding:.6rem .9rem;font-size:11px;color:var(--muted);letter-spacing:.06em;
  background:var(--surface);border-top:1px solid var(--border)}
.clock-legend{font-size:10.5px;color:var(--muted);letter-spacing:.08em;margin-bottom:1rem}
.lg-work{color:rgba(167,139,250,.85)}
.lg-olap{color:rgba(52,211,153,.75)}

.entity-link{color:var(--muted);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--border)}
.entity-link:hover{color:var(--violet)}