/* ============================================================
   Waseem Ilyas portfolio
   Personal operating console meets portfolio essay.
   Two surfaces: warm-graphite console + near-white paper essay.
   Self-hosted Geist + Geist Mono. No framework. ~one file.
   ============================================================ */

/* ---------- self-hosted fonts (no CDN dependency) ---------- */
@font-face {
  font-family: "Geist";
  src: url("/assets/fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/assets/fonts/GeistMono-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}

:root {
  /* Console (warm graphite — not black, not beige) */
  --graphite-900: oklch(0.17 0.008 65);
  --graphite-800: oklch(0.21 0.009 65);
  --graphite-700: oklch(0.27 0.010 65);
  --bone: oklch(0.93 0.006 75);
  --bone-mute: oklch(0.70 0.008 70);
  --line-dark: oklch(1 0 0 / 0.12);
  /* Essay (paper — true near-white, not cream) */
  --paper: oklch(0.985 0.002 70);
  --paper-sink: oklch(0.955 0.003 70);
  --ink: oklch(0.22 0.010 60);
  --ink-mute: oklch(0.46 0.010 60);
  --line-light: oklch(0.22 0.01 60 / 0.14);
  /* Signal */
  --signal: oklch(0.66 0.185 42);
  --signal-deep: oklch(0.53 0.170 40);
  --trace: oklch(0.80 0.130 78);
  --on-signal: oklch(0.16 0.02 40);

  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --step--1: clamp(0.78rem, 0.75rem + 0.15vw, 0.86rem);
  --step-0: clamp(0.98rem, 0.93rem + 0.25vw, 1.08rem);
  --step-1: clamp(1.18rem, 1.05rem + 0.6vw, 1.45rem);
  --step-2: clamp(1.5rem, 1.25rem + 1.1vw, 2.1rem);
  --step-3: clamp(2.1rem, 1.6rem + 2.4vw, 3.4rem);
  --step-4: clamp(2.7rem, 1.9rem + 4vw, 5.4rem);

  /* Radius rungs — pick a rung, never a fresh number */
  --rounded-xs: 2px;    /* focus ring */
  --rounded-sm: 8px;    /* buttons, flags, nav toggle, skip link */
  --rounded-md: 10px;   /* proof list */
  --rounded-lg: 12px;   /* panels, cards, figures, datasheet */
  --rounded-xl: 14px;   /* framed media: worklist, capfig, diagram */
  --rounded-pill: 999px; /* nav CTA */

  /* Spacing rhythm — the repeated measures, not every gap */
  --space-section-block: clamp(3.5rem, 8vh, 6rem);  /* .section padding-block */
  --space-shell-inline: clamp(1.1rem, 4vw, 3rem);   /* page gutter */
  --space-card-inline: clamp(1.1rem, 2.5vw, 1.8rem); /* card gutter */
  --space-grid-gap: clamp(1.4rem, 3vw, 2.6rem);     /* two-column split */
  --space-head-gap: 1rem;                           /* within a section head */
  --space-head-below: 2.4rem;                       /* below a head */

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --maxw: 78rem;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.55;
  color: var(--bone);
  background: var(--graphite-900);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}
img, svg { max-width: 100%; }
a { color: inherit; }
::selection { background: var(--signal); color: var(--on-signal); }
h1, h2, h3 { font-weight: 700; line-height: 1.04; letter-spacing: -0.03em; text-wrap: balance; }
p, li { text-wrap: pretty; }
.mono { font-family: var(--mono); font-weight: 500; letter-spacing: 0.02em; }
.label { font-family: var(--mono); font-size: var(--step--1); letter-spacing: 0.08em; text-transform: uppercase; color: var(--bone-mute); }
.shell { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--space-shell-inline); }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: var(--rounded-xs); }

/* skip link */
.skip { position: absolute; left: -999px; top: 0; z-index: 100; background: var(--signal); color: var(--on-signal); padding: .6rem 1rem; border-radius: 0 0 var(--rounded-sm) 0; font-weight: 600; }
.skip:focus { left: 0; }

/* ---------- top bar ---------- */
.topbar { position: sticky; top: 0; z-index: 40; background: color-mix(in oklch, var(--graphite-900) 88%, transparent); border-bottom: 1px solid var(--line-dark); -webkit-backdrop-filter: saturate(1.2) blur(6px); backdrop-filter: saturate(1.2) blur(6px); }
.topbar .shell { display: flex; align-items: center; justify-content: space-between; height: 3.5rem; gap: 1rem; }
.wordmark { font-weight: 700; letter-spacing: -0.02em; font-size: var(--step-0); text-decoration: none; transition: color .2s var(--ease); }
.wordmark b { color: var(--signal); transition: color .2s var(--ease); }
.wordmark:hover { color: var(--bone-mute); }
.nav { display: flex; gap: clamp(0.6rem, 1.6vw, 1.4rem); align-items: center; }
.nav a { font-size: var(--step--1); color: var(--bone-mute); text-decoration: none; transition: color .2s var(--ease); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--bone); }
.nav a[aria-current="page"] { color: var(--signal); }
.nav .cta { color: var(--bone); border: 1px solid var(--line-dark); padding: .35rem .7rem; border-radius: var(--rounded-pill); }
.nav .cta:hover { border-color: var(--signal); color: var(--signal); }
/* mobile nav toggle */
.nav-toggle { display: none; background: none; border: 1px solid var(--line-dark); border-radius: var(--rounded-sm); color: var(--bone); width: 2.3rem; height: 2.3rem; cursor: pointer; align-items: center; justify-content: center; transition: border-color .2s var(--ease); }
.nav-toggle:hover { border-color: var(--signal); }
.nav-toggle svg { width: 18px; height: 18px; }
.nav-toggle svg path { transition: transform .25s var(--ease), opacity .2s var(--ease); transform-box: fill-box; transform-origin: center; }
.nav-toggle[aria-expanded="true"] svg path:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] svg path:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] svg path:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 720px) {
  .nav-toggle { display: inline-flex; }
  .nav { position: fixed; inset: 3.5rem 0 auto 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--graphite-800); border-bottom: 1px solid var(--line-dark); padding: .5rem var(--space-shell-inline) 1rem; transform: translateY(-120%); visibility: hidden; transition: transform .3s var(--ease), visibility 0s linear .3s; }
  .nav[data-open="true"] { transform: translateY(0); visibility: visible; transition: transform .3s var(--ease), visibility 0s; }
  .nav a { padding: .7rem 0; border-bottom: 1px solid var(--line-dark); font-size: var(--step-0); }
  .nav .cta { border-radius: var(--rounded-sm); margin-top: .7rem; text-align: center; }
}

/* ---------- console surface ---------- */
.console { position: relative; background: var(--graphite-900); overflow: hidden; }
.console::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(var(--line-dark) 1px, transparent 1px), linear-gradient(90deg, var(--line-dark) 1px, transparent 1px);
  background-size: 54px 54px;
  -webkit-mask-image: radial-gradient(120% 90% at 75% 0%, #000 30%, transparent 78%);
          mask-image: radial-gradient(120% 90% at 75% 0%, #000 30%, transparent 78%);
}
.console > * { position: relative; }
.reg { position: absolute; width: 14px; height: 14px; pointer-events: none; color: var(--bone-mute); opacity: .55; }
.reg::before, .reg::after { content: ""; position: absolute; background: currentColor; }
.reg::before { left: 50%; top: 0; width: 1px; height: 100%; transform: translateX(-.5px); }
.reg::after { top: 50%; left: 0; height: 1px; width: 100%; transform: translateY(-.5px); }
.reg.tl { top: 18px; left: 18px; } .reg.tr { top: 18px; right: 18px; } .reg.bl { bottom: 18px; left: 18px; } .reg.br { bottom: 18px; right: 18px; }

/* ---------- hero ---------- */
.hero { position: relative; padding-block: clamp(3.5rem, 9vh, 6.5rem); }
.hero .shell { position: relative; display: grid; gap: clamp(1.8rem, 4vw, 3.2rem); grid-template-columns: 1.55fr 1fr; align-items: center; }
@media (max-width: 860px) { .hero .shell { grid-template-columns: 1fr; } }
.hero .eyebrow { display: inline-flex; gap: .6rem; align-items: center; margin-bottom: 1.4rem; }
.hero .eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 4px color-mix(in oklch, var(--signal) 22%, transparent); }
.hero h1 { font-size: var(--step-4); font-weight: 800; letter-spacing: -0.038em; max-width: 16ch; }
.hero h1 em { font-style: normal; color: var(--signal); }
.hero .lede { margin-top: 1.5rem; max-width: 46ch; color: var(--bone-mute); font-size: var(--step-1); line-height: 1.45; font-weight: 400; }
.hero .actions { margin-top: 2.1rem; display: flex; gap: .9rem; flex-wrap: wrap; align-items: center; }

.btn { font-family: var(--sans); font-size: var(--step-0); font-weight: 500; text-decoration: none; padding: .7rem 1.15rem; border-radius: var(--rounded-sm); display: inline-flex; gap: .5rem; align-items: center; transition: .2s var(--ease); cursor: pointer; }
.btn-primary { background: var(--signal); color: var(--on-signal); border: 1px solid var(--signal); }
.btn-primary:hover { background: var(--signal-deep); color: var(--bone); transform: translateY(-1px); }
.btn-ghost { color: var(--bone); border: 1px solid var(--line-dark); background: none; }
.btn-ghost:hover { border-color: var(--bone-mute); }
.essay .btn-ghost { color: var(--ink); border-color: var(--line-light); }
.essay .btn-ghost:hover { border-color: var(--ink-mute); }

/* status panel */
.panel { border: 1px solid var(--line-dark); border-radius: var(--rounded-lg); background: linear-gradient(180deg, var(--graphite-800), var(--graphite-900)); padding: 1.15rem 1.2rem 1.3rem; position: relative; }
.panel .phead { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line-dark); padding-bottom: .7rem; margin-bottom: .5rem; }
.panel .phead .label { color: var(--bone); }
.panel .phead .live { display: inline-flex; gap: .45rem; align-items: center; color: var(--bone-mute); font-size: var(--step--1); }
.panel .phead .live .blip { width: 6px; height: 6px; border-radius: 50%; background: var(--signal); animation: blip 2.4s var(--ease) infinite; }
@keyframes blip { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.readout { display: grid; grid-template-columns: auto 1fr; gap: .55rem 1rem; padding-block: .7rem; border-bottom: 1px solid var(--line-dark); }
.readout:last-of-type { border-bottom: 0; }
.readout dt { font-family: var(--mono); font-size: var(--step--1); letter-spacing: .06em; color: var(--signal); }
.readout dd { font-size: var(--step--1); color: var(--bone); }

/* ---------- section frame ---------- */
.section { padding-block: var(--space-section-block); }
.section-head { display: flex; align-items: baseline; gap: var(--space-head-gap); margin-bottom: var(--space-head-below); flex-wrap: wrap; }
.section-head .ref { font-family: var(--mono); font-size: var(--step--1); color: var(--signal); letter-spacing: .06em; }
.section-head h1, .section-head h2 { font-size: var(--step-3); font-weight: 700; }
.section-head p { color: var(--bone-mute); max-width: 42ch; margin-left: auto; font-size: var(--step-0); }
@media (max-width: 620px) { .section-head p { margin-left: 0; } .section-head .ref { flex-basis: 100%; } }
.essay .section-head .ref { color: var(--signal-deep); }
.essay .section-head h1, .essay .section-head h2 { color: var(--ink); }
.essay .section-head p { color: var(--ink-mute); }

/* ---------- capability map ---------- */
.cap { display: grid; grid-template-columns: 1.4fr .9fr; gap: var(--space-grid-gap); align-items: center; }
@media (max-width: 820px) { .cap { grid-template-columns: 1fr; } }
.capfig { border: 1px solid var(--line-dark); border-radius: var(--rounded-xl); background: radial-gradient(120% 120% at 80% 10%, var(--graphite-800), var(--graphite-900)); padding: .5rem; container-type: inline-size; min-inline-size: 0; }
.capfig svg { display: block; width: 100%; height: auto; }
.node { cursor: pointer; }
.node circle { transition: .25s var(--ease); }
.node .ring { fill: var(--graphite-700); stroke: var(--line-dark); stroke-width: 1.5; }
.node .core { fill: var(--bone-mute); transition: .25s var(--ease); }
.node text { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; fill: var(--bone-mute); transition: .25s var(--ease); }
.trace { fill: none; stroke: var(--line-dark); stroke-width: 1.5; transition: .3s var(--ease); }
.node:hover .core, .node:focus-visible .core, .node.on .core { fill: var(--signal); }
.node:hover .ring, .node:focus-visible .ring, .node.on .ring { stroke: var(--signal); }
.node:hover text, .node:focus-visible text, .node.on text { fill: var(--bone); }
.trace.on { stroke: var(--trace); stroke-width: 2.5; }
.hub circle { fill: var(--graphite-700); stroke: var(--signal); stroke-width: 1.5; }
.hub text { font-family: var(--mono); font-size: 10px; fill: var(--signal); letter-spacing: .08em; }
.capread { border: 1px solid var(--line-dark); border-radius: var(--rounded-lg); padding: 1.2rem 1.3rem; background: var(--graphite-800); min-height: 9.5rem; }
.capread .k { font-family: var(--mono); font-size: var(--step--1); color: var(--signal); letter-spacing: .06em; }
.capread h3 { font-size: var(--step-1); margin: .5rem 0 .55rem; letter-spacing: -0.02em; }
.capread p { color: var(--bone-mute); font-size: var(--step-0); }
.caphint { margin-top: .9rem; font-size: var(--step--1); color: var(--bone-mute); }

/* ---------- work / case-study index cards ---------- */
.worklist { display: grid; gap: 1px; border: 1px solid var(--line-dark); border-radius: var(--rounded-xl); overflow: hidden; background: var(--line-dark); }
.workcard { display: grid; grid-template-columns: auto 1fr auto; gap: 1.2rem; align-items: center; padding: 1.4rem var(--space-card-inline); background: var(--graphite-900); text-decoration: none; transition: background .2s var(--ease); }
.workcard:hover { background: var(--graphite-800); }
.workcard .ref { min-width: 11ch; font-family: var(--mono); font-size: var(--step--1); color: var(--signal); letter-spacing: .05em; white-space: nowrap; align-self: start; padding-top: .2rem; }
.workcard h2, .workcard h3 { font-size: var(--step-2); letter-spacing: -0.02em; }
.workcard .kick { display: block; color: var(--bone-mute); margin-top: .3rem; font-size: var(--step-0); text-wrap: pretty; }
.workcard .go { color: var(--bone-mute); font-family: var(--mono); font-size: var(--step--1); transition: color .2s var(--ease), transform .2s var(--ease); }
.workcard:hover .go { color: var(--signal); transform: translateX(3px); }
@media (max-width: 620px) { .workcard { grid-template-columns: 1fr; gap: .5rem; } .workcard .go { display: none; } }

/* ---------- essay / case study (paper) ---------- */
.essay { background: var(--paper); color: var(--ink); }
.essay .label { color: var(--ink-mute); }
.casehead { border-bottom: 1px solid var(--line-light); padding-bottom: 1.6rem; margin-bottom: var(--space-head-below); }
.casehead .ref { font-family: var(--mono); color: var(--signal-deep); font-size: var(--step--1); letter-spacing: .06em; }
.casehead h1, .casehead h2 { font-size: var(--step-3); color: var(--ink); margin: .7rem 0 .5rem; max-width: 20ch; }
.casehead .kick { color: var(--ink-mute); font-size: var(--step-1); font-weight: 400; }
.casegrid { display: grid; grid-template-columns: 1.6fr .9fr; gap: clamp(1.6rem, 4vw, 3.4rem); align-items: start; }
@media (max-width: 860px) { .casegrid { grid-template-columns: 1fr; } }
.prose { max-width: 70ch; }
.prose h2 { font-size: var(--step-2); color: var(--ink); margin: 2rem 0 .8rem; letter-spacing: -0.02em; }
.prose h3 { font-size: var(--step-1); color: var(--ink); margin: 1.6rem 0 .6rem; }
.prose p { max-width: 68ch; margin-bottom: 1.1rem; color: var(--ink); font-size: var(--step-0); line-height: 1.62; }
.prose a { color: var(--signal-deep); text-underline-offset: 3px; transition: text-decoration-thickness .2s var(--ease); }
.prose a:hover { text-decoration-thickness: 2px; }
.prose ul { margin: 0 0 1.1rem 1.1rem; color: var(--ink); }
.prose li { margin-bottom: .4rem; line-height: 1.55; }
.prose strong { font-weight: 600; }
.prose p.flag, .flag { border: 1px dashed var(--signal-deep); background: oklch(0.66 0.185 42 / .06); padding: .8rem .95rem; border-radius: var(--rounded-sm); color: var(--ink-mute); font-size: var(--step--1); }
.figure { margin: 1.6rem 0; border: 1px solid var(--line-light); border-radius: var(--rounded-lg); background: var(--paper-sink); padding: .4rem; container-type: inline-size; min-inline-size: 0; }
.figure svg { display: block; width: 100%; height: auto; }
.figure figcaption { font-family: var(--mono); font-size: var(--step--1); color: var(--ink-mute); padding: .6rem .8rem 0; letter-spacing: .02em; }
.datasheet { border: 1px solid var(--line-light); border-radius: var(--rounded-lg); background: var(--paper-sink); position: sticky; top: 4.5rem; }
@media (max-width: 860px) { .datasheet { position: static; } }
.datasheet .dh { font-family: var(--mono); font-size: var(--step--1); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-mute); padding: .9rem 1.1rem; border-bottom: 1px solid var(--line-light); }
.datasheet dl { display: grid; grid-template-columns: 1fr; padding: .4rem 1.1rem 1.1rem; }
.datasheet dt { font-family: var(--mono); font-size: var(--step--1); letter-spacing: .05em; color: var(--signal-deep); margin-top: 1rem; }
.datasheet dd { font-size: var(--step--1); color: var(--ink); line-height: 1.5; margin-top: .25rem; }
.datasheet a { color: var(--signal-deep); text-underline-offset: 3px; transition: text-decoration-thickness .2s var(--ease); }
.datasheet a:hover { text-decoration-thickness: 2px; }
.casenav { margin-top: 3rem; padding-top: 1.4rem; border-top: 1px solid var(--line-light); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.casenav a { font-family: var(--mono); font-size: var(--step--1); color: var(--signal-deep); text-decoration: none; }
.casenav a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- about (essay) ---------- */
.lede-essay { font-size: var(--step-2); line-height: 1.32; color: var(--ink); max-width: 24ch; letter-spacing: -0.02em; font-weight: 600; }
.about-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(1.6rem, 4vw, 3.4rem); align-items: start; margin-top: var(--space-head-below); }
@media (max-width: 820px) { .about-grid { grid-template-columns: 1fr; } }

/* ---------- timeline / arc (console) ---------- */
.arc { position: relative; }
.arc-line { position: relative; margin-left: .2rem; padding-left: 1.8rem; border-left: 1px solid var(--line-dark); }
.milestone { position: relative; padding-bottom: 2.2rem; }
.milestone:last-child { padding-bottom: 0; }
.milestone::before { content: ""; position: absolute; left: calc(-1.8rem - 5px); top: .35rem; width: 9px; height: 9px; border-radius: 50%; background: var(--graphite-700); border: 1.5px solid var(--bone-mute); }
.milestone.key::before { background: var(--signal); border-color: var(--signal); box-shadow: 0 0 0 4px color-mix(in oklch, var(--signal) 18%, transparent); }
.milestone .era { font-family: var(--mono); font-size: var(--step--1); color: var(--signal); letter-spacing: .05em; }
.milestone h3 { font-size: var(--step-1); margin: .25rem 0 .4rem; letter-spacing: -0.02em; }
.milestone p { color: var(--bone-mute); max-width: 60ch; }
.proof { max-width: 60ch; margin: 1rem 0 0 0; padding: 1rem 1.2rem; border: 1px solid var(--line-dark); border-radius: var(--rounded-md); background: var(--graphite-800); list-style: none; }
.proof li { display: flex; gap: .6rem; padding: .35rem 0; color: var(--bone); font-size: var(--step--1); }
.proof li::before { content: "→"; color: var(--signal); font-family: var(--mono); }

/* ---------- automancer panel (console) ---------- */
.amancer { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(1.6rem, 4vw, 3rem); align-items: center; }
@media (max-width: 820px) { .amancer { grid-template-columns: 1fr; } }
.amancer .body p { color: var(--bone-mute); margin-bottom: 1rem; max-width: 56ch; }
.amancer .body p.note-line { color: var(--bone); border-left: 2px solid var(--signal); padding-left: 1rem; }
.amancer .actions { margin-top: 1.6rem; display: flex; gap: .9rem; flex-wrap: wrap; }
.diagram-panel { border: 1px solid var(--line-dark); border-radius: var(--rounded-xl); background: radial-gradient(120% 120% at 20% 10%, var(--graphite-800), var(--graphite-900)); padding: .6rem; container-type: inline-size; min-inline-size: 0; }
.diagram-panel svg { display: block; width: 100%; height: auto; }
/* var() does not resolve in SVG presentation attributes — style the diagram here.
   Two values stay literal in the partial: the node hairline (white at 18%, no token
   matches — --line-dark is 12%) and the live node's label (oklch(0.80 0.13 50)). */
.diagram-panel .wf-trace { stroke: color-mix(in oklch, var(--trace) 55%, transparent); }
.diagram-panel .wf-arrowhead { fill: var(--signal); }
.diagram-panel .wf-node rect { fill: var(--graphite-700); }
.diagram-panel .wf-node text { fill: var(--bone); }
/* the live node is deliberately NOT .wf-node — its label keeps a literal fill, and any
   CSS rule would beat that presentation attribute */
.diagram-panel .wf-node-live rect { fill: color-mix(in oklch, var(--signal) 16%, transparent); stroke: var(--signal); }
.diagram-panel .wf-ticks { stroke: var(--line-dark); }

/* Phone-readable diagram labels.
   Settled SVG labels are user units, so they shrink with the viewBox.
   At 390px they render about 6px, while captions and prose stay readable.
   The wide SVG is the settled design and is left unchanged. When the frame
   is too narrow for that composition to keep labels at the settled desktop
   size, the same authored words are shown in HTML at --step-0.
   One query per frame, not a viewport ladder.
   36rem: capability column and case-study figure (settled near 660px and up).
   28rem: workflow panel (settled desktop column is about 500px; do not restyle it). */
.diagram-phone, .cap-phone { display: none; }
.dflow { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; padding-block: 0.85rem; padding-inline: 0.45rem; }
.drow { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.55rem; max-inline-size: 100%; }
.dnode {
  font-family: var(--mono);
  font-size: var(--step-0);
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  padding-block: 0.5rem;
  padding-inline: 0.85rem;
  border-radius: var(--rounded-sm);
  max-inline-size: 100%;
}
.djoin {
  inline-size: 1px;
  block-size: 0.8rem;
  position: relative;
  background: color-mix(in oklch, var(--signal-deep) 70%, transparent);
}
.djoin::after {
  content: "";
  position: absolute;
  inset-inline-start: 50%;
  inset-block-end: -1px;
  translate: -50% 0;
  border-inline: 4px solid transparent;
  border-block-start: 5px solid color-mix(in oklch, var(--signal-deep) 70%, transparent);
}
.figure .dnode {
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line-light);
}
.figure .dnode-live {
  color: var(--signal-deep);
  background: color-mix(in oklch, var(--signal) 12%, var(--paper));
  border-color: var(--signal-deep);
}
.diagram-panel .dnode {
  color: var(--bone);
  background: var(--graphite-700);
  border: 1px solid var(--line-dark);
}
.diagram-panel .dnode-live {
  color: oklch(0.80 0.13 50); /* same literal as the settled live-node label */
  background: color-mix(in oklch, var(--signal) 16%, transparent);
  border-color: var(--signal);
}
.diagram-panel .djoin { background: color-mix(in oklch, var(--trace) 55%, transparent); }
.diagram-panel .djoin::after { border-block-start-color: color-mix(in oklch, var(--trace) 55%, transparent); }
.cap-phone { padding-block: 0.85rem 0.7rem; padding-inline: 0.35rem; }
.cap-phone-hub {
  margin: 0 0 0.7rem;
  text-align: center;
  font-family: var(--mono);
  font-size: var(--step-0);
  letter-spacing: 0.08em;
  color: var(--signal);
}
.cap-phone-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem; }
.cap-phone .node {
  appearance: none;
  font-family: var(--mono);
  font-size: var(--step-0);
  letter-spacing: 0.04em;
  line-height: 1.2;
  color: var(--bone-mute);
  background: var(--graphite-700);
  border: 1px solid var(--line-dark);
  border-radius: var(--rounded-sm);
  min-block-size: 2.75rem;
  padding-block: 0.55rem;
  padding-inline: 0.7rem;
  text-align: center;
}
.cap-phone .node[data-key="creative"] { grid-column: 1 / -1; }
.cap-phone .node.on {
  color: var(--bone);
  border-color: var(--signal);
  background: color-mix(in oklch, var(--signal) 16%, var(--graphite-700));
}
.cap-phone .node:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) {
  .cap-phone .node:hover {
    color: var(--bone);
    border-color: var(--signal);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .cap-phone .node { transition: transform 160ms var(--ease), border-color 160ms var(--ease), color 160ms var(--ease), background-color 160ms var(--ease); }
}
@container (max-width: 36rem) {
  .capfig > svg, .figure > svg { display: none; }
  .cap-phone, .figure > .diagram-phone { display: block; }
}
@container (max-width: 28rem) {
  .diagram-panel > svg { display: none; }
  .diagram-panel > .diagram-phone { display: block; }
}


/* ---------- lab (console) ---------- */
.lab-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.1rem; }
.lab-card { border: 1px solid var(--line-dark); border-radius: var(--rounded-lg); padding: 1.3rem 1.4rem; background: var(--graphite-800); text-decoration: none; display: flex; flex-direction: column; gap: .5rem; transition: border-color .2s var(--ease), transform .2s var(--ease); }
.lab-card:hover { border-color: var(--signal); transform: translateY(-2px); }
.lab-card .tag { font-family: var(--mono); font-size: var(--step--1); color: var(--signal); letter-spacing: .05em; }
.lab-card h2, .lab-card h3 { font-size: var(--step-1); letter-spacing: -0.02em; }
.lab-card p { color: var(--bone-mute); font-size: var(--step-0); }
/* Long URLs are single unbreakable tokens; without this they spill past the card. */
.lab-card .ext { font-family: var(--mono); font-size: var(--step--1); color: var(--bone-mute); margin-top: auto; overflow-wrap: anywhere; }
.lab-card:hover .ext { color: var(--bone); }

/* ---------- contact ---------- */
.contact-cta { display: flex; flex-direction: column; gap: 1.4rem; align-items: flex-start; }
.email-big { font-family: var(--mono); font-size: clamp(1.3rem, 1rem + 2.2vw, 2.4rem); color: var(--bone); text-decoration: none; letter-spacing: -0.01em; border-bottom: 2px solid var(--signal); padding-bottom: .2rem; word-break: break-word; }
.email-big:hover { color: var(--signal); }
.contact-close { color: var(--bone-mute); max-width: 48ch; }
.contact-close a { color: var(--bone); transition: color .2s var(--ease); }
.contact-close a:hover { color: var(--signal); }

/* ---------- notes (essay) ---------- */
.notes-list { display: grid; gap: 1.2rem; }
.note-item { border-bottom: 1px solid var(--line-light); padding-bottom: 1.2rem; }
.note-item .date { font-family: var(--mono); font-size: var(--step--1); color: var(--ink-mute); }
.note-item h2 { font-size: var(--step-2); margin: .3rem 0; }
.note-item h2 a { color: var(--ink); text-decoration: none; }
.note-item h2 a:hover { color: var(--signal-deep); }
.note-item p { color: var(--ink-mute); max-width: 66ch; }
.notes-empty { border: 1px dashed var(--line-light); border-radius: var(--rounded-lg); padding: 2rem; color: var(--ink-mute); max-width: 56ch; }
.notes-empty a { color: var(--signal-deep); text-underline-offset: 3px; transition: text-decoration-thickness .2s var(--ease); }
.notes-empty a:hover { text-decoration-thickness: 2px; }

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--line-dark); padding-block: 2.6rem; color: var(--bone-mute); font-size: var(--step--1); }
.foot .shell { display: grid; grid-template-columns: 1fr auto; gap: 1.4rem; align-items: start; }
@media (max-width: 620px) { .foot .shell { grid-template-columns: 1fr; } }
.foot a { color: var(--bone); text-decoration: none; }
.foot a:hover { color: var(--signal); }
.foot .fnav { display: flex; gap: 1.2rem; flex-wrap: wrap; }
@media (max-width: 620px) {
  .foot .fnav { display: grid; grid-template-columns: repeat(4, max-content); justify-content: space-between; gap: .2rem 0; }
  .foot .fnav a { display: inline-block; padding-block: .45rem; }
}
.foot .meta { color: var(--bone-mute); }
.foot .meta + .meta { margin-top: .4rem; }

/* ---------- calibration motion ----------
   Content is visible by DEFAULT. The reveal only enhances. */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fadein { from { opacity: 0; } to { opacity: .55; } }
.js [data-cal].in { animation: rise .7s var(--ease) both; }
.js .reg.in { animation: fadein .9s var(--ease) both; }
@media (prefers-reduced-motion: reduce) {
  .js [data-cal].in, .js .reg.in { animation: none; }
  .panel .phead .live .blip { animation: none; }
  .nav, .nav-toggle svg path { transition: none; }
}