/* ==========================================================================
   Aman Singhal — techinventoraman.com

   Direction:  Swiss Technical on warm paper.
   Type:       Inter alone. Hierarchy comes from size, weight, case, tracking
               and space — never from a second family. That restraint is the
               whole point of the style.
   Accent:     HV Interlock #D86B38. Orange is the mandated colour for
               high-voltage EV systems (ISO 6469 / AIS-038), so here it is
               vocabulary rather than decoration. Used surgically, then once
               at full bleed on Contact.

   Contrast note: #D86B38 measures 3.31:1 on this paper — fine for large text
   and rules, NOT for body copy. Small orange text uses --accent-ink (5.00:1),
   and orange fills carry ink-coloured text (5.03:1), never white (3.45:1).
   That constraint is why buttons are black-on-orange, which happens to be
   exactly how high-voltage warning labels are printed.
   ========================================================================== */

:root{
  --paper:      #FBFAF7;
  --paper-2:    #F3F0E9;
  --paper-3:    #EAE5DB;
  --ink:        #1C1A17;
  --ink-2:      #423D36;
  --muted:      #6E6960;
  --faint:      #9A938A;
  --rule:       #E0DAD0;
  --rule-2:     #CFC7B9;

  --accent:     #D86B38;   /* fills, rules, large type */
  --accent-ink: #B34E20;   /* small text on paper — 5.00:1 */
  --accent-dim: rgba(216,107,56,.10);

  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;

  --shell: 1200px;
  --gut: clamp(20px, 5vw, 60px);
  --ease: cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

/* Cross-document transitions between the index and the case studies.
   Native, costs nothing, and browsers without it just navigate normally. */
@view-transition{ navigation:auto; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font);
  font-size:clamp(15.5px,.35vw + 14.6px,17px);
  line-height:1.65;
  font-feature-settings:'cv05' 1,'ss03' 1;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg,canvas{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul,ol,dl,dd{ margin:0; padding:0; }
ul,ol{ list-style:none; }
h1,h2,h3,p{ margin:0; }

::selection{ background:var(--accent); color:var(--ink); }

:focus-visible{ outline:2px solid var(--accent-ink); outline-offset:3px; }

.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--gut); }

/* ── Intro ──────────────────────────────────────────────────── */
.intro{
  position:fixed; inset:0; z-index:1000;
  background:var(--paper);
  display:grid; place-items:center;
  padding:24px;
}
.intro.gone{ opacity:0; visibility:hidden; transition:opacity .55s var(--ease), visibility .55s; }
html.intro-on, html.intro-on body{ overflow:hidden; }

.intro-scope{ width:min(560px,86vw); height:auto; }
.sc-line{ fill:none; stroke:var(--ink); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.sc-grat{ fill:none; stroke:var(--rule-2); stroke-width:1; opacity:0; }
/* One continuous string. It arrives from the left, oscillates, then coils
   onto itself to spell the greeting — same line throughout, never redrawn. */
.sc-wave{ fill:none; stroke:var(--accent); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.intro-skip{
  position:fixed; right:22px; bottom:20px;
  background:none; border:1px solid var(--rule-2); border-radius:2px;
  padding:9px 16px; cursor:pointer;
  font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); transition:color .2s, border-color .2s;
}
.intro-skip:hover{ color:var(--ink); border-color:var(--ink); }

.skip-link{
  position:fixed; top:-100px; left:16px; z-index:999;
  background:var(--accent); color:var(--ink); padding:11px 18px;
  font-weight:600; font-size:13px; border-radius:2px;
}
.skip-link:focus{ top:14px; }

/* ── Shared label style ─────────────────────────────────────── */
.eyebrow,.sec-label,.side-label,.proj-cat,.stack dt,.foot p,.nav-link,
.role-org span,.elsewhere span{
  font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
}

/* ── Topbar ─────────────────────────────────────────────────── */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(251,250,247,.88);
  border-bottom:1px solid transparent;
  transition:border-color .3s, background .3s;
}
.topbar.stuck{
  border-bottom-color:var(--rule);
  background:rgba(251,250,247,.94);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.topbar-in{ display:flex; align-items:center; gap:22px; height:64px; }

.mark{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.mark-sig{ width:28px; color:var(--accent); }
.mark-txt{ font-size:14px; font-weight:600; letter-spacing:-.01em; }

.nav{ margin-left:auto; }
.nav ul{ display:flex; gap:2px; }
.nav-link{
  display:block; padding:9px 13px; color:var(--muted);
  transition:color .2s;
}
.nav-link:hover{ color:var(--ink); }
.nav-link.active{ color:var(--accent-ink); }

.topbar-right{ display:flex; align-items:center; gap:12px; margin-left:auto; }
.nav + .topbar-right{ margin-left:20px; }

.progress{ height:2px; width:0%; background:var(--accent); }

/* ── Buttons ────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 26px; border:1px solid var(--rule-2);
  font-size:13px; font-weight:500; letter-spacing:.01em;
  color:var(--ink); background:transparent; border-radius:2px;
  transition:border-color .22s, background .22s, color .22s, transform .22s var(--ease);
}
.btn:hover{ border-color:var(--ink); transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn-sm{ padding:9px 16px; font-size:12px; }
/* Ink on orange, not white on orange — the accessible pairing, and the way
   high-voltage warning labels are actually printed. */
.btn-solid{
  background:var(--accent); border-color:var(--accent); color:var(--ink);
  font-weight:600;
}
.btn-solid:hover{ background:var(--accent-ink); border-color:var(--accent-ink); color:var(--paper); }

.burger{
  display:none; width:36px; height:36px; padding:0;
  background:none; border:1px solid var(--rule-2); border-radius:2px;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
  cursor:pointer;
}
.burger span{ display:block; width:15px; height:1.5px; background:var(--ink); transition:transform .3s var(--ease); }
.burger[aria-expanded="true"] span:first-child{ transform:translateY(3.25px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child{ transform:translateY(-3.25px) rotate(-45deg); }

/* ── Hero ───────────────────────────────────────────────────── */
.hero{ padding-top:clamp(120px,17vh,190px); padding-bottom:clamp(50px,7vw,80px); }

.eyebrow{
  display:flex; align-items:center; gap:10px;
  color:var(--accent-ink); margin-bottom:clamp(26px,3.5vw,38px);
}
.pip{ width:7px; height:7px; border-radius:50%; background:var(--accent); flex-shrink:0; }

.display{
  font-size:clamp(3.2rem,13.5vw,11rem);
  font-weight:600; line-height:.90; letter-spacing:-.045em;
  text-transform:uppercase; margin-bottom:clamp(30px,4vw,46px);
}
.dline{ display:block; overflow:hidden; }
.dw{ display:inline-block; }

/* The copper trace: the one piece of ornament on the page. Routed with true
   45° corners — a real trace never turns 90°, because right angles create
   acid traps in etching and reflections at frequency. Vias mark layer changes. */
.signal-wrap{
  height:clamp(62px,8vw,100px);
  border-top:1px solid var(--rule);
  margin-bottom:clamp(34px,4.5vw,52px);
}
.board{ width:100%; height:100%; }
.t-base{ fill:none; stroke:var(--rule-2); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.t-stub{ fill:none; stroke:var(--rule);   stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.via{ fill:var(--paper); stroke:var(--rule-2); stroke-width:1.5; }
.pad{ fill:var(--rule-2); }
.electron{ fill:var(--accent); }
.halo{ fill:var(--accent); opacity:.16; }

.hero-grid{
  display:grid; grid-template-columns:minmax(0,1.35fr) auto;
  gap:clamp(24px,4vw,56px); align-items:end;
  margin-bottom:clamp(52px,7vw,90px);
}
.lede{ max-width:60ch; font-size:clamp(16.5px,1.15vw,19px); color:var(--ink-2); }
.lede a{
  color:var(--accent-ink); font-weight:500;
  border-bottom:1px solid var(--accent); padding-bottom:1px;
  transition:background .22s;
}
.lede a:hover{ background:var(--accent-dim); }
.hero-actions{ display:flex; gap:12px; flex-wrap:wrap; }

.stats{
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--ink);
}
.stat{ padding:22px 22px 0 0; }
.stat + .stat{ padding-left:22px; border-left:1px solid var(--rule); }
.stat dt b{
  display:block; font-size:clamp(2rem,3.6vw,3rem); font-weight:600;
  line-height:1; letter-spacing:-.04em; font-variant-numeric:tabular-nums;
}
.stat dt b span{ font-size:.46em; font-weight:500; color:var(--muted); margin-left:.06em; }
.stat dd{ margin-top:12px; font-size:13px; line-height:1.5; color:var(--muted); max-width:22ch; }

/* ── Section scaffolding ────────────────────────────────────── */
.sec{ padding-block:clamp(72px,10vw,132px); border-top:1px solid var(--rule); }
.sec-head{ margin-bottom:clamp(40px,5.5vw,68px); }
.sec-label{ color:var(--accent-ink); margin-bottom:18px; }
.sec-title{
  font-size:clamp(1.8rem,4.6vw,3.4rem); font-weight:600;
  line-height:1.04; letter-spacing:-.038em; text-transform:uppercase;
  text-wrap:balance;
}

/* Reveal */
.rv{ opacity:0; transform:translateY(16px); }
.rv.in{ opacity:1; transform:none; transition:opacity .7s var(--ease), transform .7s var(--ease); }

/* Signature moment: an accent line sweeps across the black rule that opens
   each block, drawn once when the block scrolls into view. */
.drawline{ position:relative; }
.drawline::after{
  content:''; position:absolute; top:-1px; left:0; right:0; height:1px;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
}
.drawline.in::after{ transform:scaleX(1); transition:transform 1s var(--ease) .15s; }

/* ── About ──────────────────────────────────────────────────── */
.about{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:clamp(36px,6vw,88px); }
.prose p{ color:var(--ink-2); margin-bottom:20px; max-width:62ch; }
.prose .lead{ font-size:clamp(17px,1.4vw,20px); line-height:1.58; color:var(--ink); }
.prose p:last-child{ margin-bottom:0; }

.side{ display:grid; gap:34px; align-content:start; }
.side-label{ color:var(--muted); padding-bottom:12px; border-bottom:1px solid var(--ink); margin-bottom:4px; }
.side-block ul{ display:grid; }
.side-block li{
  display:grid; gap:3px; padding:15px 0; border-bottom:1px solid var(--rule);
}
.side-block strong{ font-size:14.5px; font-weight:600; }
.side-block span{ font-size:13px; color:var(--muted); line-height:1.5; }

/* ── Experience ─────────────────────────────────────────────── */
.roles{ border-top:1px solid var(--ink); }
.role{
  display:grid; grid-template-columns:180px minmax(0,1fr);
  gap:clamp(20px,4vw,56px);
  padding:clamp(28px,3.4vw,42px) 0;
  border-bottom:1px solid var(--rule);
  transition:background .3s, transform .35s var(--ease);
}
.role:hover{ background:var(--paper-2); transform:translateX(8px); }
.role-when{
  display:flex; gap:7px; align-items:baseline; flex-wrap:wrap;
  font-size:13px; font-weight:500; color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.role-when .dash{ color:var(--faint); }
.role:hover .role-when{ color:var(--accent-ink); }

.role-what h3{
  font-size:clamp(1.05rem,1.9vw,1.42rem); font-weight:600;
  line-height:1.22; letter-spacing:-.022em; margin-bottom:7px; text-wrap:balance;
}
.role-org{ font-size:14.5px; font-weight:500; color:var(--ink-2); margin-bottom:18px; }
.role-org span{ color:var(--faint); margin-left:10px; }
.role-what ul{ display:grid; gap:10px; margin-bottom:18px; }
.role-what ul li{
  position:relative; padding-left:19px; color:var(--ink-2);
  font-size:14.8px; line-height:1.62; max-width:74ch;
}
.role-what ul li::before{
  content:''; position:absolute; left:0; top:.72em;
  width:9px; height:1px; background:var(--accent);
}
.role-tags{ font-size:12.5px; color:var(--muted); letter-spacing:.01em; }

/* ── Work ───────────────────────────────────────────────────── */
.projects{
  display:grid; grid-template-columns:repeat(2,1fr);
  border-top:1px solid var(--ink);
}
.proj{
  padding:clamp(26px,3vw,40px) clamp(22px,2.6vw,36px) clamp(30px,3.4vw,44px) 0;
  border-bottom:1px solid var(--rule);
  transition:background .3s;
}
.proj:nth-child(even){ padding-left:clamp(22px,2.6vw,36px); border-left:1px solid var(--rule); }
.proj-lead{ grid-column:1 / -1; padding-right:0; }
.proj:hover{ background:var(--paper-2); }

.proj-cat{ color:var(--accent-ink); margin-bottom:16px; }
.proj h3{
  font-size:clamp(1.25rem,2.4vw,1.85rem); font-weight:600;
  line-height:1.12; letter-spacing:-.03em; margin-bottom:14px; text-wrap:balance;
}
.proj-lead h3{ font-size:clamp(1.6rem,3.4vw,2.6rem); }
.proj-desc{ color:var(--ink-2); font-size:14.8px; line-height:1.62; max-width:62ch; }
.proj-lead .proj-desc{ font-size:clamp(15.5px,1.2vw,17.5px); }

.figs{ display:flex; flex-wrap:wrap; gap:clamp(28px,4vw,64px); margin-top:26px; }
.figs dt{
  font-size:clamp(1.7rem,2.8vw,2.4rem); font-weight:600; line-height:1;
  letter-spacing:-.04em; color:var(--accent-ink); font-variant-numeric:tabular-nums;
}
.figs dd{ margin-top:7px; font-size:12.5px; color:var(--muted); }

.proj-tags{ margin-top:22px; font-size:12.5px; color:var(--muted); }

/* ── Stack ──────────────────────────────────────────────────── */
.stack{ border-top:1px solid var(--ink); }
.grp{
  display:grid; grid-template-columns:280px minmax(0,1fr);
  gap:clamp(18px,4vw,56px); align-items:baseline;
  padding:24px 0; border-bottom:1px solid var(--rule);
  transition:background .3s;
}
.grp:hover{ background:var(--paper-2); }
.stack dt{ color:var(--muted); }
.stack dd{ font-size:15.5px; color:var(--ink); line-height:1.7; }

/* ── Contact — the single flood ─────────────────────────────── */
.contact{
  background:var(--accent); color:var(--ink);
  padding-block:clamp(80px,11vw,150px);
}
.contact .sec-label{ color:var(--ink); opacity:.62; margin-bottom:22px; }
.contact-h{
  font-size:clamp(2.6rem,9.5vw,7.5rem); font-weight:600;
  line-height:.92; letter-spacing:-.048em; text-transform:uppercase;
  margin-bottom:clamp(24px,3vw,36px);
}
.contact-lede{
  max-width:46ch; font-size:clamp(16px,1.3vw,19px);
  color:var(--ink); opacity:.78; margin-bottom:clamp(36px,5vw,58px);
}

.mail{
  display:inline-flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding-bottom:14px; border-bottom:2px solid var(--ink);
  font-size:clamp(17px,3.2vw,2.6rem); font-weight:600; letter-spacing:-.03em;
  transition:gap .3s var(--ease);
}
.mail svg{ width:clamp(22px,3vw,40px); flex-shrink:0; }
.mail:hover{ gap:26px; }

.elsewhere{
  margin-top:clamp(50px,7vw,84px); max-width:660px;
  border-top:1px solid rgba(28,26,23,.28);
}
.elsewhere li{
  display:flex; justify-content:space-between; align-items:baseline; gap:20px;
  padding:15px 0; border-bottom:1px solid rgba(28,26,23,.16);
}
.elsewhere span{ opacity:.66; flex-shrink:0; }
.elsewhere a{
  font-size:14.5px; font-weight:500; text-align:right; word-break:break-word;
  border-bottom:1px solid transparent; transition:border-color .2s;
}
.elsewhere a:hover{ border-bottom-color:var(--ink); }
.elsewhere a[data-todo]{ opacity:.72; font-style:italic; }

/* ── Footer ─────────────────────────────────────────────────── */
.foot{ padding-block:30px; }
.foot-in{ display:flex; justify-content:space-between; align-items:center; gap:18px; flex-wrap:wrap; }
.foot p{ color:var(--muted); letter-spacing:.1em; }
.to-top{
  font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); transition:color .2s;
}
.to-top:hover{ color:var(--accent-ink); }

/* ══ TWO DOORS ══════════════════════════════════════════════════
   The site serves two readers — someone hiring, and someone who came
   from the channel. Rather than dilute one page into addressing
   neither, name both and point them at what they came for. */

.doors{
  display:grid; grid-template-columns:repeat(2,1fr);
  border-top:1px solid var(--ink);
  margin-top:clamp(44px,6vw,72px);
}
.door{
  display:block; padding:26px 26px 26px 0;
  transition:background .3s;
}
.door + .door{ padding-left:26px; border-left:1px solid var(--rule); }
.door:hover{ background:var(--paper-2); }
.door-who{
  font-size:10.5px; font-weight:500; letter-spacing:.15em; text-transform:uppercase;
  color:var(--accent-ink); margin-bottom:12px;
}
.door-what{
  font-size:clamp(1.05rem,1.9vw,1.35rem); font-weight:600;
  letter-spacing:-.024em; line-height:1.22; margin-bottom:10px; text-wrap:balance;
}
.door-go{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12.5px; color:var(--muted); transition:gap .25s var(--ease), color .2s;
}
.door:hover .door-go{ gap:14px; color:var(--accent-ink); }

/* ══ TECHNICAL SAMPLES ══════════════════════════════════════════
   Mono is a functional requirement here — a log that does not align
   stops reading as a log. It comes from the system stack, so the
   page still loads exactly one designed typeface. */

.sample{
  margin:30px 0; border:1px solid var(--rule); border-radius:3px;
  background:var(--paper-2); overflow:hidden;
}
.sample-hd{
  display:flex; justify-content:space-between; align-items:baseline; gap:14px;
  flex-wrap:wrap; padding:11px 16px; border-bottom:1px solid var(--rule);
  font-size:10.5px; font-weight:500; letter-spacing:.13em; text-transform:uppercase;
  color:var(--muted);
}
.sample-hd em{
  font-style:normal; text-transform:none; letter-spacing:.01em;
  font-size:11.5px; color:var(--faint);
}
.sample pre{
  margin:0; padding:16px; overflow-x:auto;
  font-family:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;
  font-size:12.5px; line-height:1.75; color:var(--ink-2);
  font-variant-ligatures:none; tab-size:2;
}
.sample pre b{ color:var(--accent-ink); font-weight:600; }
.sample pre i{ color:var(--faint); font-style:normal; }

/* ══ THE CHANNEL ════════════════════════════════════════════════ */
.channel{ display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:clamp(32px,5vw,72px); }
.channel-copy p{ color:var(--ink-2); margin-bottom:20px; max-width:58ch; }
.channel-copy p:last-child{ margin-bottom:0; }
.channel-links{ display:grid; gap:0; align-content:start; border-top:1px solid var(--ink); }
.channel-links a,
.channel-links span.pending{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  padding:16px 0; border-bottom:1px solid var(--rule);
  font-size:14.5px; font-weight:500; transition:color .2s, padding .25s var(--ease);
}
.channel-links a:hover{ color:var(--accent-ink); padding-left:8px; }
.channel-links b{
  font-size:10.5px; font-weight:500; letter-spacing:.15em; text-transform:uppercase;
  color:var(--muted); flex-shrink:0;
}
.channel-links span.pending{ color:var(--accent-ink); font-style:italic; }

/* ══ CASE STUDY PAGES ═══════════════════════════════════════════
   Same system, narrower measure. Long-form reading wants a shorter
   line than a landing page does. */

.case{ padding-top:clamp(112px,16vh,168px); }

.back{
  display:inline-flex; align-items:center; gap:9px; margin-bottom:clamp(28px,4vw,44px);
  font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); transition:color .2s, gap .25s var(--ease);
}
.back:hover{ color:var(--accent-ink); gap:14px; }

.case-cat{ color:var(--accent-ink); margin-bottom:18px; }
.case-title{
  font-size:clamp(2rem,5.6vw,4.2rem); font-weight:600; line-height:1.0;
  letter-spacing:-.042em; text-transform:uppercase; text-wrap:balance;
  margin-bottom:clamp(22px,3vw,32px);
}
.case-standfirst{
  max-width:56ch; font-size:clamp(17px,1.5vw,21px); line-height:1.55;
  color:var(--ink-2); margin-bottom:clamp(40px,5vw,60px);
}

.case-meta{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:24px; padding-block:26px;
  border-top:1px solid var(--ink); border-bottom:1px solid var(--rule);
  margin-bottom:clamp(48px,6vw,76px);
}
.case-meta dt{
  font-size:10px; font-weight:500; letter-spacing:.15em; text-transform:uppercase;
  color:var(--muted); margin-bottom:8px;
}
.case-meta dd{ margin:0; font-size:14.5px; font-weight:500; line-height:1.45; }

/* Long-form body */
.body{ max-width:68ch; }
.body h2{
  font-size:clamp(1.3rem,2.4vw,1.8rem); font-weight:600; line-height:1.15;
  letter-spacing:-.03em; margin:clamp(48px,6vw,72px) 0 18px;
  padding-top:22px; border-top:1px solid var(--rule); text-wrap:balance;
}
.body h3{
  font-size:clamp(1.02rem,1.6vw,1.18rem); font-weight:600; letter-spacing:-.015em;
  margin:34px 0 12px;
}
.body p{ color:var(--ink-2); margin-bottom:20px; }
.body p strong{ color:var(--ink); font-weight:600; }
.body > p:first-child{ margin-top:0; }
.body ul,.body ol{ display:grid; gap:11px; margin-bottom:22px; }
.body ul li,.body ol li{
  position:relative; padding-left:22px; color:var(--ink-2); line-height:1.62;
}
.body ul li::before{
  content:''; position:absolute; left:0; top:.72em; width:10px; height:1px; background:var(--accent);
}
.body ol{ counter-reset:n; }
.body ol li{ counter-increment:n; }
.body ol li::before{
  content:counter(n); position:absolute; left:0; top:0;
  font-size:12px; font-weight:600; color:var(--accent-ink); font-variant-numeric:tabular-nums;
}
.body a{
  color:var(--accent-ink); font-weight:500;
  border-bottom:1px solid var(--accent); transition:background .2s;
}
.body a:hover{ background:var(--accent-dim); }

/* A measured result, pulled out of the flow */
.figure{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  gap:22px; margin:34px 0; padding:26px;
  background:var(--paper-2); border:1px solid var(--rule); border-radius:3px;
}
.figure dt{
  font-size:clamp(1.6rem,3vw,2.2rem); font-weight:600; line-height:1;
  letter-spacing:-.04em; color:var(--accent-ink); font-variant-numeric:tabular-nums;
}
.figure dd{ margin:8px 0 0; font-size:12.5px; color:var(--muted); line-height:1.45; }

.callout{
  margin:34px 0; padding:24px 26px;
  border-left:2px solid var(--accent); background:var(--paper-2);
}
.callout p{ margin:0; color:var(--ink); font-size:16.5px; line-height:1.6; }
.callout cite{
  display:block; margin-top:12px; font-style:normal;
  font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}

/* Visible gap marker — obvious on the page, easy to grep, never silent */
.todo{
  margin:28px 0; padding:20px 22px;
  border:1px dashed var(--accent); border-radius:3px; background:var(--accent-dim);
}
.todo p{ margin:0; color:var(--ink); font-size:14.5px; }
.todo b{
  display:block; margin-bottom:8px;
  font-size:10px; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--accent-ink);
}

/* Next / previous */
.case-nav{
  margin-top:clamp(64px,8vw,104px); padding-top:30px; border-top:1px solid var(--ink);
  display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.case-nav a{ display:grid; gap:7px; max-width:30ch; }
.case-nav span{
  font-size:10px; font-weight:500; letter-spacing:.15em; text-transform:uppercase; color:var(--muted);
}
.case-nav strong{
  font-size:clamp(1rem,1.8vw,1.3rem); font-weight:600; letter-spacing:-.022em; line-height:1.2;
  transition:color .2s;
}
.case-nav a:hover strong{ color:var(--accent-ink); }
.case-nav .prev{ text-align:left; }
.case-nav .next{ text-align:right; margin-left:auto; }

/* Card link affordance on the index */
.proj-more{
  display:inline-flex; align-items:center; gap:8px; margin-top:20px;
  font-size:12px; font-weight:600; letter-spacing:.02em; color:var(--accent-ink);
  border-bottom:1px solid var(--accent); padding-bottom:2px;
  transition:gap .25s var(--ease);
}
.proj:hover .proj-more{ gap:14px; }
.proj h3 a{ transition:color .2s; }
.proj h3 a:hover{ color:var(--accent-ink); }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width:1000px){
  .about{ grid-template-columns:1fr; }
  .hero-grid{ grid-template-columns:1fr; align-items:start; }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .stat:nth-child(3){ padding-left:0; border-left:0; }
  .stat:nth-child(n+3){ border-top:1px solid var(--rule); margin-top:22px; padding-top:22px; }
  .grp{ grid-template-columns:1fr; gap:8px; }
}

@media (max-width:860px){
  .nav{
    position:fixed; inset:64px 0 auto; margin:0;
    background:var(--paper); border-bottom:1px solid var(--rule);
    clip-path:inset(0 0 100% 0); transition:clip-path .4s var(--ease);
  }
  .nav.open{ clip-path:inset(0 0 0 0); }
  .nav ul{ flex-direction:column; gap:0; padding:6px var(--gut) 20px; }
  .nav-link{ padding:15px 0; font-size:14px; letter-spacing:.06em; border-bottom:1px solid var(--rule); }
  .topbar-right,.nav + .topbar-right{ margin-left:auto; }
  .burger{ display:flex; }
  .topbar-right .btn-sm{ display:none; }

  .role{ grid-template-columns:1fr; gap:12px; }
  .projects{ grid-template-columns:1fr; }
  .proj,.proj:nth-child(even){ padding-left:0; padding-right:0; border-left:0; }
}

@media (max-width:560px){
  .stats{ grid-template-columns:1fr; }
  .stat,.stat + .stat{ padding-left:0; border-left:0; }
  .stat + .stat{ border-top:1px solid var(--rule); margin-top:20px; padding-top:20px; }
  .elsewhere li{ flex-direction:column; align-items:flex-start; gap:5px; }
  .elsewhere a{ text-align:left; }
  .foot-mid{ display:none; }
}

/* ── Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .rv{ opacity:1; transform:none; }
}

/* ── Print ──────────────────────────────────────────────────── */
@media print{
  .topbar,.signal-wrap{ display:none !important; }
  body{ background:#fff; color:#000; }
  .rv{ opacity:1; transform:none; }
  .contact{ background:#fff; color:#000; border-top:2px solid #000; }
  .sec,.role,.proj,.grp{ break-inside:avoid; }
}