/* Layout: one sheet of reeded chrome behind everything (NodeCraft's Liquid
   Glass backdrop), and content set on slabs of liquid glass that float over
   it. The glass is drawn by a WebGL canvas behind the page, exactly under
   each panel, so every panel element here is transparent when it runs.
   Dark by default (Mono Glass: #0A0A0A, #151515, #2A2A2A, #C8C8C8); the
   toggle in the nav switches to a pearl-white sheet (html[data-theme="light"])
   and the choice is remembered. */
:root {
  --ink: #0a0a0a;
  --text: #f2f2f2;
  --text-2: rgba(242, 242, 242, .74);
  --text-3: rgba(242, 242, 242, .52);
  --line: rgba(255, 255, 255, .13);
  --line-2: rgba(255, 255, 255, .24);
  --ice: #c8c8c8;          /* silver, the light behind the glass at night */
  --ice-ink: #0a0a0a;      /* text on --ice */
  --accent-2: rgba(42, 42, 42, .7);   /* raised graphite, used sparingly */
  --glow: rgba(210, 210, 210, .075);  /* behind the preloader */
  --fill: rgba(255, 255, 255, .07);
  --fill-2: rgba(255, 255, 255, .12);
  --fill-3: rgba(255, 255, 255, .18);
  --solid: #f2f2f2;        /* the bright button */
  --solid-2: #fff;
  --on-solid: #0a0a0a;
  --well: rgba(8, 8, 8, .55);
  --node: #151515;
  --node-line: rgba(255, 255, 255, .16);
  --wire: #e4e4e4;
  --pulse: #fff;
  --fb-glass: rgba(21, 21, 21, .5);
  --fb-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 0 0 1px rgba(255, 255, 255, .09), 0 20px 50px -24px rgba(0, 0, 0, .8);
  --pin-bg: rgba(18, 18, 18, .62);
  --pin-rim: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -1px 0 rgba(255, 255, 255, .06), inset 0 0 0 1px rgba(255, 255, 255, .12), 0 14px 34px -14px rgba(0, 0, 0, .75);
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --r-slab: 32px;
  --r-card: 28px;
  --r-soft: 22px;
  --ease: cubic-bezier(.2, .75, .2, 1);
  /* "only" stops browser force-dark modes from repainting the page over the glass */
  color-scheme: only dark;
}
/* Pearl: warm white with faint champagne, blush and jade sheens, no blue cast */
:root[data-theme="light"] {
  --ink: #f3f0eb;
  --text: #171512;
  --text-2: rgba(23, 21, 18, .74);
  --text-3: rgba(23, 21, 18, .54);
  --line: rgba(23, 21, 18, .12);
  --line-2: rgba(23, 21, 18, .22);
  --ice: #7f5d24;
  --ice-ink: #fff;
  --accent-2: rgba(214, 198, 170, .3);
  --glow: rgba(186, 160, 118, .16);
  --fill: rgba(23, 21, 18, .05);
  --fill-2: rgba(23, 21, 18, .09);
  --fill-3: rgba(23, 21, 18, .14);
  --solid: #171512;
  --solid-2: #000;
  --on-solid: #f7f4ef;
  --well: rgba(255, 253, 249, .5);
  --node: #fffdf9;
  --node-line: rgba(23, 21, 18, .16);
  --wire: #4a443b;
  --pulse: #171512;
  --fb-glass: rgba(255, 253, 249, .45);
  --fb-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 0 0 1px rgba(23, 21, 18, .08), 0 20px 50px -24px rgba(60, 50, 35, .32);
  --pin-bg: rgba(252, 250, 246, .55);
  --pin-rim: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(23, 21, 18, .05), inset 0 0 0 1px rgba(23, 21, 18, .09), 0 14px 34px -14px rgba(60, 50, 35, .34);
  color-scheme: only light;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* Lenis drives the scroll when it loads */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--ink); color: var(--text-2); font: 400 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }
.no-gl body { background-color: var(--ink); background-image: radial-gradient(60% 40% at 62% 30%, rgba(200, 200, 200, .16), transparent 70%), radial-gradient(45% 30% at 24% 88%, rgba(42, 42, 42, .7), transparent 70%), repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 2px, transparent 2px 52px); background-position: center; background-size: cover; background-attachment: fixed; }
.no-gl[data-theme="light"] body { background-image: radial-gradient(60% 40% at 62% 30%, rgba(214, 196, 168, .5), transparent 70%), radial-gradient(50% 30% at 24% 88%, rgba(226, 214, 196, .45), transparent 70%), radial-gradient(25% 35% at 92% 62%, rgba(196, 220, 204, .4), transparent 70%), repeating-linear-gradient(90deg, rgba(255, 255, 255, .5) 0 18px, rgba(23, 21, 18, .03) 30px, rgba(255, 255, 255, .5) 52px); }
::selection { background: var(--ice); color: var(--ice-ink); }
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; color: var(--text); font-family: var(--sans); font-weight: 600; letter-spacing: -.025em; line-height: 1.05; text-wrap: balance; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--ice); outline-offset: 3px; border-radius: 8px; }
.i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.glass-gl { position: fixed; z-index: 0; left: 0; top: 0; width: 100vw; height: 100vh; height: 100lvh; display: block; pointer-events: none; }
.nav, main, .contact, .foot { position: relative; z-index: 1; }
/* On touch screens the page scrolls on its own thread, ahead of any script.
   There the canvas rides inside the page (glass.js moves it back into view
   each frame), so between frames it scrolls with the panels instead of
   lagging behind them. It is a little taller than the screen, so a fast
   flick never shows its edge. */
html:not(.gl-on) .glass-gl { visibility: hidden; }
html.gl-attach body { position: relative; }
.glass-clip { position: absolute; inset: 0; z-index: 0; overflow: hidden; overflow: clip; pointer-events: none; }
html.gl-attach .glass-gl { position: absolute; will-change: transform; }
/* One column width for everything, so slabs, bars and grids share both edges */
:root { --gutter: max(16px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)); --page: min(1240px, calc(100% - 2 * var(--gutter))); }
.wrap { width: var(--page); margin-inline: auto; }

/* ---------- Glass surfaces ----------
   With WebGL the canvas draws the glass, so these stay clear. Without it
   they fall back to a frosted CSS panel over a still of the same sheet. */
.slab, .page-hero .wrap, .block.on-paper > .wrap, .contact > .wrap, .foot .wrap, .next-proj { width: var(--page); margin-inline: auto; padding: clamp(24px, 4vw, 56px); border-radius: var(--r-slab); }
.no-gl .nav-bar, .no-gl .hero-card, .no-gl .page-hero .wrap, .no-gl .block.on-paper > .wrap, .no-gl .contact > .wrap, .no-gl .sec-head, .no-gl .block.on-ink .h-sec,
.no-gl .pcard, .no-gl .wcard, .no-gl .filters, .no-gl .media-glass, .no-gl .sc, .no-gl .nlist li, .no-gl .rd figure, .no-gl .trio figure, .no-gl .gallery figure,
.no-gl .release, .no-gl .kit > div, .no-gl .block.on-ink .note, .no-gl .block.on-ink .loglist, .no-gl .block.on-ink .cols > .prose, .no-gl .block.on-ink .statement,
.no-gl .next-proj, .no-gl .foot .wrap, .no-gl .theme-tog {
  background: var(--fb-glass); -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
  box-shadow: var(--fb-shadow);
}
.no-gl .hero-lens { display: none; }
.no-gl .hero-hint { display: none; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 8px 0 22px; border: 0; border-radius: 999px; cursor: pointer; text-decoration: none; white-space: nowrap; font: 600 15px/1 var(--sans); letter-spacing: -.005em; transition: background-color .2s, box-shadow .2s, transform .3s var(--ease); }
.btn .arrow { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; transition: transform .3s var(--ease); }
.btn:hover .arrow { transform: translateX(2px); }
.btn:active { transform: scale(.98); }
.btn-hot { background: var(--solid); color: var(--on-solid); }
.btn-hot .arrow { background: var(--on-solid); color: var(--solid); }
.btn-hot:hover { background: var(--solid-2); }
.btn-line, .btn-ink { background: var(--fill); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); }
.btn-line .arrow, .btn-ink .arrow { background: var(--fill-2); }
.btn-line:hover, .btn-ink:hover { background: var(--fill-2); }
.btn-sm { height: 42px; padding-left: 18px; font-size: 14px; }
.btn-sm .arrow { width: 30px; height: 30px; }
.pill { display: inline-flex; align-items: center; height: 32px; padding: 0 13px; border-radius: 999px; font-size: 14px; color: var(--text); background: var(--fill); box-shadow: inset 0 0 0 1px var(--line); white-space: nowrap; }
.pills { display: flex; flex-wrap: wrap; gap: 6px; }
.label { display: inline-block; font-size: 14px; font-weight: 500; color: var(--text-3); }

/* ---------- Nav ---------- */
/* The nav stays pinned. At the top of the page it is pure liquid glass (drawn by
   the canvas); once content scrolls beneath it, a frosted backing fades in so
   the page never shows through the links. */
.nav { position: sticky; top: 0; z-index: 50; padding-top: calc(16px + env(safe-area-inset-top, 0px)); pointer-events: none; }
.nav .nav-bar, .nav .nav-right > * { pointer-events: auto; }
.nav-bar, .theme-tog { transition: background-color .45s, box-shadow .45s, -webkit-backdrop-filter .45s, backdrop-filter .45s; }
.nav.pinned .nav-bar, .nav.pinned .theme-tog { background: var(--pin-bg); -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%); box-shadow: var(--pin-rim); }
.nav-clock { transition: opacity .35s; }
.nav.pinned .nav-clock { opacity: 0; pointer-events: none; }
[id] { scroll-margin-top: 96px; }
.nav .wrap { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.nav-bar { display: flex; align-items: center; gap: 2px; padding: 6px; border-radius: 999px; }
.brand { display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 14px 0 4px; text-decoration: none; color: var(--text); font-weight: 600; font-size: 15px; white-space: nowrap; }
/* The logo: a block N (its signature only shows where the N is large) */
.mark { width: 23px; height: auto; margin-left: 9px; margin-right: 1px; flex: none; fill: var(--text); }
.nav-links { display: flex; }
.nav-links a { display: flex; align-items: center; height: 42px; padding: 0 16px; border-radius: 999px; color: var(--text-2); text-decoration: none; font-size: 15px; font-weight: 500; transition: color .2s, background-color .2s; }
.nav-links a:hover { color: var(--text); }
.nav-links a[aria-current="page"] { color: var(--text); background: var(--fill-2); }
.nav-right { display: flex; align-items: center; gap: 14px; }
.nav-clock { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.nav-clock b { color: var(--text-2) !important; font-weight: 500 !important; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: #48d597; box-shadow: 0 0 0 3px rgba(72, 213, 151, .2); }
@media (max-width: 980px) { .nav-clock { display: none; } }
@media (max-width: 720px) {
  .brand > span:last-child { display: none; }
  .brand { padding-right: 4px; }
  .nav-links a { padding: 0 12px; font-size: 14px; }
  .nav-right .btn { display: none; }
  .nav .wrap { justify-content: center; }
}

/* ---------- Hero: the name sits in the glass sheet, the lens bends it ---------- */
.hero-inner { position: relative; display: grid; align-content: center; gap: clamp(24px, 4vw, 40px); min-height: clamp(560px, 84svh, 860px); padding-block: 40px 56px; }
.hero-name { font: 400 clamp(4.6rem, 1.4rem + 11.6vw, 13.5rem)/.86 var(--serif); letter-spacing: -.025em; color: var(--text); user-select: none; }
.hero-name span { display: block; width: fit-content; }
.hero-name span + span { padding-left: .55em; }
.gl-on .hero-name { color: transparent; }
.hero-lens { position: absolute; z-index: 3; left: 0; top: 0; width: clamp(112px, 17vw, 250px); aspect-ratio: 1; border-radius: 50%; cursor: grab; touch-action: none; will-change: transform; }
.hero-lens.held { cursor: grabbing; }
.hero-card { justify-self: end; display: grid; gap: 18px; max-width: 540px; padding: 26px; border-radius: var(--r-card); }
.hero-role { color: var(--text); font-size: clamp(1.08rem, 1rem + .35vw, 1.28rem); line-height: 1.5; }
.status { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.status li { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: 999px; font-size: 13.5px; color: var(--text); background: var(--fill); box-shadow: inset 0 0 0 1px var(--line); }
.status li b { font-weight: 500; color: var(--ice); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.hero-hint { font-size: 13.5px; color: var(--text-3); }
@media (max-width: 760px) {
  .hero-name span + span { padding-left: .2em; }
  .hero-inner { align-content: start; padding-top: 48px; min-height: 0; }
  .hero-card { justify-self: stretch; padding: 20px; }
}

/* ---------- Sections ---------- */
.sec, .block, .media-band { padding-block: clamp(20px, 3vw, 36px); }
.on-ink, .on-paper { background: transparent; }
.sec-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px 30px; margin-bottom: 22px; }
.sec-head h2 { font-size: clamp(1.9rem, 1rem + 2.6vw, 3.2rem); }
.sec-head p { max-width: 46ch; }
.sec .sec-head { padding: 14px 14px 14px 28px; border-radius: 30px; }
.sec .sec-head p { padding-right: 14px; }
.skills .sec-head p { max-width: none; }
.block.on-paper .sec-head { margin-bottom: clamp(24px, 3vw, 40px); }
.big { font-size: clamp(2rem, 1rem + 3vw, 3.6rem); }

/* Home project cards */
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 760px) { .cards { grid-template-columns: minmax(0, 1fr); } }
.pcard { display: grid; gap: 4px; padding: 12px; border-radius: var(--r-card); text-decoration: none; color: inherit; }
.pcard.wide { grid-column: 1 / -1; }
.pcard-media { aspect-ratio: 16 / 10; border-radius: 18px; overflow: hidden; background: var(--well); }
.pcard.wide .pcard-media { aspect-ratio: 21 / 9; }
.pcard-media > .shot, .pcard-media > .panel { height: 100%; }
.shot { overflow: hidden; }
.shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform 1s var(--ease); }
.shot img.mid { object-position: 50% 50%; }
.pcard:hover .shot img, a.wcard:hover .shot img { transform: scale(1.025); }
.pcard-top { display: flex; align-items: center; gap: 14px; padding: 12px 6px 6px 12px; }
.pcard .t { display: grid; gap: 3px; flex: 1; min-width: 0; }
.pcard h3 { font-size: clamp(1.2rem, 1rem + .7vw, 1.6rem); }
.pcard .t span { font-size: 15px; color: var(--text-2); }
.pcard .go { width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--solid); color: var(--on-solid); transition: transform .3s var(--ease); }
.pcard:hover .go { transform: translateX(3px); }

/* Schematic panels (projects without screenshots) */
.panel { position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: 8px; padding: clamp(14px, 2vw, 22px); border-radius: 18px; background: var(--well); background-image: radial-gradient(circle, var(--fill-2) 1px, transparent 1.4px); background-size: 20px 20px; overflow: hidden; min-height: 0; }
.panel .ph { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--text-3); }
.panel .ph b { font-weight: 500; color: var(--ice); }
.panel svg { width: 100%; height: 100%; min-height: 0; }
.panel .pt { font: 400 clamp(1.4rem, 1rem + 1.6vw, 2.4rem)/1.02 var(--serif); color: var(--text); max-width: 20ch; }
.panel.small { grid-template-rows: auto 1fr; }
.panel.small .pt { align-self: end; font-size: clamp(1.1rem, .9rem + .8vw, 1.6rem); }
.panel.wide { aspect-ratio: 21 / 9; }
@media (max-width: 760px) { .panel.wide { aspect-ratio: 4 / 3; } }
.sx-node rect.b { fill: var(--node); stroke: var(--node-line); stroke-width: 1; }
.sx-node rect.s { fill: var(--ice); }
.sx-node line { stroke: var(--node-line); stroke-width: 1; }
.sx-t { font: 600 11.5px var(--sans); letter-spacing: .04em; fill: var(--text); text-transform: uppercase; }
.sx-s { font: 400 12px var(--sans); fill: var(--text-3); }
.sx-w { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sx-w.e { stroke: var(--wire); }
.sx-w.d { stroke: var(--ice); }
.sx-pe { fill: var(--wire); }
.sx-pd { fill: var(--ice); }
.sx-pulse { fill: var(--pulse); }
.sx-pulse.d { fill: var(--ice); }
.lite .sx-pulse { display: none; }

/* What I build */
.rows { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--line); }
.rows .row { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(14px, 3vw, 44px); align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--line); }
.rows h3 { font-size: clamp(1.2rem, 1rem + .9vw, 1.75rem); font-weight: 500; }
@media (max-width: 760px) { .rows .row { grid-template-columns: minmax(0, 1fr); gap: 8px; } }
/* the intro above the rows sits on the same two columns, so its text lines up with theirs */
.rows-head { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 14px clamp(14px, 3vw, 44px); }
.rows-head p { max-width: none; }
@media (max-width: 760px) { .rows-head { grid-template-columns: minmax(0, 1fr); } }

/* Ship log */
.loglist { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--line); }
.loglist li { display: grid; grid-template-columns: 110px 100px minmax(0, 1fr) 36px; gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.loglist time { font-size: 14px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.loglist .tag { justify-self: start; font-size: 12.5px; font-weight: 500; padding: 4px 10px; border-radius: 999px; color: var(--text-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.loglist .tag.hot { color: var(--ice-ink); background: var(--ice); box-shadow: none; }
.loglist p { color: var(--text); font-size: 16px; }
.loglist a { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--text); text-decoration: none; background: var(--fill); transition: background-color .2s; }
.loglist a:hover { background: var(--fill-3); }
.block.on-ink .loglist { padding: 8px 22px; border-radius: var(--r-soft); border-top: 0; }
.block.on-ink .loglist li:last-child { border-bottom: 0; }
@media (max-width: 720px) { .loglist li { grid-template-columns: auto minmax(0, 1fr) 36px; row-gap: 6px; } .loglist p { grid-column: 1 / 3; } .loglist a { grid-row: 1; grid-column: 3; } }

/* ---------- Contact and footer ---------- */
.contact { padding-block: 36px 16px; }
.contact > .wrap { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(26px, 5vw, 64px); align-items: end; }
@media (max-width: 900px) { .contact > .wrap { grid-template-columns: minmax(0, 1fr); } }
.contact h2 { font: 400 clamp(2.6rem, 1rem + 5vw, 5.4rem)/.95 var(--serif); letter-spacing: -.02em; }
.contact h2 .g, .statement .g { font-style: italic; }
.mailcard { display: grid; gap: 16px; padding: 22px; border-radius: var(--r-soft); background: var(--fill); box-shadow: inset 0 0 0 1px var(--line); }
.mailcard .addr { color: var(--text); font-size: clamp(1.1rem, .95rem + .7vw, 1.45rem); font-weight: 500; overflow-wrap: anywhere; user-select: all; }
.mailcard .acts { display: flex; flex-wrap: wrap; gap: 8px; }
.links { list-style: none; margin: 0; padding: 0; display: grid; }
.links li { border-top: 1px solid var(--line); }
.links a, .links span { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 2px; color: var(--text); text-decoration: none; font-weight: 500; }
.links a:hover { color: var(--ice); }
.links small { font-size: 13px; color: var(--text-3); }
.foot { padding-block: 16px 36px; }
.wordmark { font: 400 clamp(2.4rem, 9vw, 9rem)/.9 var(--serif); letter-spacing: -.03em; color: var(--text); text-align: center; white-space: nowrap; }
.foot-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); }
.foot-grid h4 { font-size: 14px; font-weight: 500; color: var(--text-3); margin-bottom: 12px; letter-spacing: 0; }
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.foot-grid a { color: var(--text); text-decoration: none; }
.foot-grid a:hover { color: var(--ice); }
.foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 32px; font-size: 13.5px; color: var(--text-3); }
@media (max-width: 680px) { .foot-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Inner pages ---------- */
.page-hero { padding-block: clamp(24px, 4vw, 44px) 12px; }
.page-hero .wrap { display: grid; gap: 22px; }
.crumbs { display: flex; gap: 10px; align-items: center; font-size: 14px; color: var(--text-3); }
.crumbs a { color: var(--text-2); text-decoration: none; }
.crumbs a:hover { color: var(--text); }
.page-hero h1 { font: 400 clamp(3rem, 1rem + 7vw, 7.6rem)/.92 var(--serif); letter-spacing: -.025em; }
.page-hero h1.long { font-size: clamp(2.5rem, 1rem + 5vw, 5.6rem); }
.page-hero .lede { max-width: 60ch; color: var(--text); font-size: clamp(1.05rem, .98rem + .4vw, 1.25rem); }
.page-hero .meta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; padding-top: 20px; border-top: 1px solid var(--line); }
.media-glass { padding: 12px; border-radius: var(--r-card); }
.frame { position: relative; overflow: hidden; border-radius: 18px; background: #000; }
.frame img, .frame video { width: 100%; height: 100%; object-fit: cover; }
.frame.r169 { aspect-ratio: 16 / 9; }
.frame.r1610 { aspect-ratio: 16 / 10; }
.frame video { position: absolute; inset: 0; opacity: 0; transition: opacity .8s; }
.frame video.on { opacity: 1; }
.vbtn { position: absolute; right: 14px; bottom: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 12px; border-radius: 999px; border: 0; cursor: pointer; background: var(--solid); color: var(--on-solid); font: 600 14px/1 var(--sans); }
.vbtn svg { width: 14px; height: 14px; fill: currentColor; }
.vbtn[data-state="playing"] .i-play, .vbtn[data-state="paused"] .i-pause { display: none; }
.media-glass > .panel { border-radius: 18px; }

.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--line); }
.facts div { padding: 18px 18px 18px 0; display: grid; gap: 6px; border-bottom: 1px solid var(--line); }
.facts dt { font-size: 13.5px; color: var(--text-3); }
.facts dd { margin: 0; color: var(--text); font-weight: 500; }
.facts a { color: inherit; text-decoration-color: var(--ice); text-underline-offset: 3px; }
.facts a:hover { color: var(--ice); }
@media (max-width: 820px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.statement { font: 400 clamp(1.7rem, 1rem + 2.5vw, 3.2rem)/1.1 var(--serif); letter-spacing: -.015em; color: var(--text); max-width: 26ch; text-wrap: balance; }
.block.on-ink .statement { max-width: none; padding: 26px 30px; border-radius: var(--r-soft); }
.cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(26px, 5vw, 70px); align-items: start; margin-top: 40px; }
@media (max-width: 860px) { .cols { grid-template-columns: minmax(0, 1fr); } }
.prose { display: grid; gap: 16px; font-size: 17.5px; line-height: 1.65; }
.prose strong { font-weight: 600; color: var(--text); }
.block.on-ink .cols > .prose { padding: 26px 30px; border-radius: var(--r-soft); }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; }
.ticks li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; padding: 13px 0; border-top: 1px solid var(--line); color: var(--text); font-weight: 500; }
.ticks li::before { content: ""; width: 7px; height: 7px; margin-top: 9px; border-radius: 50%; background: var(--ice); }
.story-side { display: grid; gap: 26px; justify-items: start; }
.story-side .ticks { width: 100%; }

.h-sec { display: grid; gap: 6px; margin-bottom: 18px; }
.h-sec h2 { font-size: clamp(1.8rem, 1rem + 2.4vw, 3rem); }
.block.on-ink .h-sec { padding: 18px 28px 20px; border-radius: var(--r-soft); }
.nlist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: 14px; counter-reset: n; }
.nlist li { counter-increment: n; display: grid; gap: 10px; align-content: start; padding: 24px; border-radius: var(--r-soft); }
.nlist li::before { content: counter(n, decimal-leading-zero); font-size: 13px; color: var(--ice); font-variant-numeric: tabular-nums; }
.on-paper .nlist li { padding: 20px 0 0; border-top: 1px solid var(--line); border-radius: 0; }
.nlist h3 { font-size: 1.15rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; }
.nlist p { font-size: 15.5px; }

.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.gallery figure { margin: 0; display: grid; gap: 10px; padding: 12px; border-radius: var(--r-card); }
.gallery figcaption { font-size: 15px; padding: 0 6px 4px; }
@media (max-width: 760px) { .gallery { grid-template-columns: minmax(0, 1fr); } }
.trio { display: grid; gap: 14px; }
.trio figure { margin: 0; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(18px, 3vw, 40px); align-items: center; padding: 12px; border-radius: var(--r-card); }
.trio img { border-radius: 14px; width: 100%; }
.trio figcaption { display: grid; gap: 8px; padding-right: 14px; }
.trio figcaption b { font: 400 clamp(1.9rem, 1.3rem + 2vw, 3rem)/1 var(--serif); color: var(--text); }
.on-paper .trio figure { padding: 0; }
@media (max-width: 760px) { .trio figure { grid-template-columns: minmax(0, 1fr); } .trio figcaption { padding: 4px 8px 10px; } }

/* Carousel */
.sc { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 12px; border-radius: var(--r-card); }
.sc .frame { aspect-ratio: 16 / 9; }
.sc-track { display: flex; height: 100%; transition: transform .7s var(--ease); touch-action: pan-y; }
.sc-track.drag { transition: none; }
.sc-slide { flex: 0 0 100%; margin: 0; }
.sc-slide img { pointer-events: none; user-select: none; }
.sc-nav { position: absolute; top: 50%; z-index: 2; width: 46px; height: 46px; margin-top: -23px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; background: var(--solid); color: var(--on-solid); }
.sc-prev { left: 12px; } .sc-next { right: 12px; }
.sc-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 4px 6px 2px; }
.sc-cap { color: var(--text); min-height: 1.6em; }
.sc-tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.sc-tabs::-webkit-scrollbar { display: none; }
.sc-tabs button { flex: none; height: 34px; padding: 0 14px; border-radius: 999px; border: 0; cursor: pointer; background: var(--fill); color: var(--text-2); font-size: 14px; }
.sc-tabs button[aria-selected="true"] { background: var(--solid); color: var(--on-solid); }

/* Routing diagrams */
.rd { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 860px) { .rd { grid-template-columns: minmax(0, 1fr); } }
.rd figure { margin: 0; padding: 12px; border-radius: var(--r-card); }
.on-paper .rd figure { padding: 0; }
.rd svg { display: block; width: 100%; height: auto; border-radius: 14px; background: radial-gradient(circle, var(--fill-2) 1px, transparent 1.5px) 0 0 / 15px 15px, var(--well); }
.rd-node rect { fill: var(--node); stroke: var(--node-line); stroke-width: 1; }
.rd-bar { fill: var(--ice); }
.rd-wire { fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.rd-exec { stroke: var(--wire); }
.rd-data { stroke: var(--ice); }
.rd-pin-data { fill: var(--ice); }
.rd-pin-exec { fill: var(--wire); }
.rd figcaption { display: grid; gap: 4px; padding: 14px 6px 6px; }
.rd figcaption b { color: var(--text); font-weight: 600; font-size: 1.1rem; }
.rd figcaption span { font-size: 15px; }

.releases { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.release { display: grid; grid-template-columns: minmax(110px, 200px) minmax(0, 1fr); gap: 24px; padding: 24px 28px; border-radius: var(--r-soft); }
.release .v { font: 400 clamp(2.4rem, 1.6rem + 2.4vw, 3.6rem)/.9 var(--serif); color: var(--text); }
.release .v small { display: block; margin-top: 10px; font: 500 13px/1.2 var(--sans); color: var(--ice); }
.release p { color: var(--text); }
.release p + p { color: var(--text-2); font-size: 16px; margin-top: 8px; }
@media (max-width: 640px) { .release { grid-template-columns: minmax(0, 1fr); gap: 8px; } }

.road { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); border-top: 1px solid var(--line); }
.road li { display: grid; gap: 6px; align-content: start; padding: 20px 16px 20px 0; border-bottom: 1px solid var(--line); }
.road li::before { content: ""; width: 11px; height: 11px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--text-3); margin-bottom: 6px; }
.road li.done::before { background: var(--text); box-shadow: none; }
.road li.now::before { background: var(--ice); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ice) 24%, transparent); }
.road b { color: var(--text); font-weight: 600; }
.road span { font-size: 13px; color: var(--text-3); }
.road p { font-size: 14.5px; }

.note { display: flex; gap: 12px; align-items: flex-start; padding: 16px 20px; border-radius: 16px; color: var(--text); font-size: 16px; background: var(--fill); box-shadow: inset 0 0 0 1px var(--line); }
.note::before { content: ""; width: 3px; align-self: stretch; border-radius: 2px; background: var(--ice); flex: none; }
.block.on-ink .note { background: none; box-shadow: none; }

.next-proj { display: block; margin-block: clamp(20px, 3vw, 36px); text-decoration: none; text-align: center; }
.next-proj > span { display: block; font-size: 14px; color: var(--text-3); margin-bottom: 10px; }
.next-proj b { display: inline-block; font: 400 clamp(2.4rem, 1rem + 5.4vw, 6rem)/.95 var(--serif); color: var(--text); transition: transform .4s var(--ease); }
.next-proj:hover b { transform: translateX(6px); }

/* Work grid */
.filters { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 5px; border-radius: 999px; width: fit-content; }
.filters button { height: 38px; padding: 0 16px; border-radius: 999px; border: 0; cursor: pointer; background: transparent; color: var(--text-2); font-size: 14.5px; font-weight: 500; }
.filters button[aria-pressed="true"] { background: var(--solid); color: var(--on-solid); }
.wgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 760px) { .wgrid { grid-template-columns: minmax(0, 1fr); } }
.wcard { display: grid; gap: 14px; align-content: start; padding: 12px; border-radius: var(--r-card); text-decoration: none; color: inherit; }
.wcard .shot, .wcard .panel { aspect-ratio: 16 / 10; border-radius: 18px; }
.wcard .shot img { width: 100%; height: 100%; object-fit: cover; }
.wcard .body { display: grid; gap: 8px; padding: 4px 12px 12px; }
.wcard .k { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; color: var(--text-3); }
.wcard h3 { font-size: clamp(1.25rem, 1rem + .9vw, 1.7rem); }
.wcard .more { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; color: var(--text); font-weight: 500; }
.wcard .soon { margin-top: 4px; font-size: 14px; color: var(--text-3); }
.wcard[hidden] { display: none; }
/* the last card spans the row, picture beside its text, so no card sits alone */
@media (min-width: 761px) {
  .wcard.span { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 20px; }
  .wcard.span .body { padding: 12px 24px; }
}

/* About page */
.timeline { list-style: none; margin: 0; padding: 0; display: grid; }
.tl { display: grid; grid-template-columns: minmax(130px, 220px) minmax(0, 1fr); gap: clamp(18px, 4vw, 48px); padding: 26px 0; border-top: 1px solid var(--line); }
.tl .when { color: var(--text); font-weight: 500; }
.tl .when small { display: block; margin-top: 6px; font-size: 13px; color: var(--ice); }
.tl h3 { font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem); }
.tl .org { margin-top: 6px; color: var(--text-3); font-size: 15px; }
.tl ul { margin: 12px 0 0; padding-left: 18px; display: grid; gap: 6px; font-size: 16px; }
.tl a { color: var(--text); text-decoration-color: var(--ice); text-underline-offset: 3px; }
@media (max-width: 680px) { .tl { grid-template-columns: minmax(0, 1fr); gap: 6px; } }
.kit { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: 14px; }
.kit > div { padding: 24px; border-radius: var(--r-soft); display: grid; gap: 14px; align-content: start; }
.kit h3 { font-size: 14px; font-weight: 500; color: var(--ice); letter-spacing: 0; }

.toast { position: fixed; z-index: 99; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 16px); opacity: 0; pointer-events: none; padding: 13px 20px; border-radius: 999px; background: var(--solid); color: var(--on-solid); font-weight: 600; font-size: 14.5px; transition: opacity .25s, transform .4s var(--ease); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
/* ---------- Theme toggle ---------- */
.theme-tog { position: relative; width: 48px; height: 48px; flex: none; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--text); cursor: pointer; transition: transform .3s var(--ease); }
.theme-tog:active { transform: scale(.94); }
.theme-tog svg { grid-area: 1 / 1; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transition: transform .6s var(--ease), opacity .35s; }
.theme-tog .moon { opacity: 0; transform: rotate(-70deg) scale(.6); }
[data-theme="light"] .theme-tog .sun { opacity: 0; transform: rotate(70deg) scale(.6); }
[data-theme="light"] .theme-tog .moon { opacity: 1; transform: none; }

/* ---------- Theme switch: the drop ----------
   During the switch the page is captured in three layers: the root (just a
   base colour), the live canvas drawing the drop, and the body above it with
   a clear background. The new body is clipped to the drop and the old one
   shows only outside it. site.js drives --vt-x, --vt-y (in body space) and
   --vt-r every frame, so text changes exactly at the drop's edge. */
html.vt, html.vt body { background: transparent !important; }
html.vt body { view-transition-name: page; }
html.vt .glass-gl { view-transition-name: glass-gl; }
::view-transition-group(root) { z-index: 0; }
::view-transition-group(glass-gl) { z-index: 1; animation: none; }
::view-transition-group(page) { z-index: 2; animation: none; }
::view-transition-old(glass-gl) { display: none; }
::view-transition-new(glass-gl) { animation: none; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
::view-transition-old(page), ::view-transition-new(page) { animation: none; mix-blend-mode: normal; }
::view-transition-new(page) { clip-path: circle(var(--vt-r, 0px) at var(--vt-x, 50%) var(--vt-y, 0px)); }
::view-transition-old(page) {
  -webkit-mask-image: radial-gradient(circle at var(--vt-x, 50%) var(--vt-y, 0px), transparent calc(var(--vt-r, 0px) - .5px), #000 calc(var(--vt-r, 0px) + .5px));
  mask-image: radial-gradient(circle at var(--vt-x, 50%) var(--vt-y, 0px), transparent calc(var(--vt-r, 0px) - .5px), #000 calc(var(--vt-r, 0px) + .5px));
}

/* ---------- Entrance and leaving ----------
   The page opens through a growing drop (the canvas draws its glass rim);
   leaving fills the screen with a drop of ink from where you clicked. */
html.intro::after { content: ""; position: fixed; inset: 0; z-index: 300; background: var(--ink); pointer-events: none; animation: veil-safety .5s 4s forwards; }
html.intro-go::after {
  -webkit-mask-image: radial-gradient(circle at var(--in-x, 50%) var(--in-y, 45%), transparent var(--in-r, 0px), #000 calc(var(--in-r, 0px) + 1px));
  mask-image: radial-gradient(circle at var(--in-x, 50%) var(--in-y, 45%), transparent var(--in-r, 0px), #000 calc(var(--in-r, 0px) + 1px));
}
@keyframes veil-safety { to { opacity: 0; visibility: hidden; } }
/* ---------- Preloader: opening the site ----------
   On a fresh visit or a reload (never between this site's own pages) the
   logo draws itself, the name comes into focus word by word and a counter
   runs to 100 while the glass builds; then the screen lifts away like a
   curtain and the page's own entrance plays beneath it. Any tap, key or
   scroll skips it. */
.loader { display: none; }
html.boot { overflow: hidden; }
html.boot.intro::after { animation-delay: 7s; }
html.boot .loader {
  position: fixed; inset: 0; z-index: 301; display: grid; place-items: center; padding: 24px; color: var(--text);
  background: radial-gradient(ellipse 58% 52% at 50% 46%, var(--glow), transparent 72%), var(--ink);
  clip-path: inset(0 0 0 0); transition: clip-path 1.05s cubic-bezier(.72, 0, .22, 1);
  animation: veil-safety .5s 7s forwards;
}
html.ld-out .loader { clip-path: inset(0 0 100% 0); }
.ld-core { display: grid; justify-items: center; text-align: center; transition: transform 1s cubic-bezier(.72, 0, .22, 1), opacity .5s ease; }
html.ld-out .ld-core { transform: translateY(-44px); opacity: 0; }
/* the logo rises into place, then its signature is written in */
.ld-logo { position: relative; width: clamp(76px, 7vw, 102px); aspect-ratio: 768 / 777.5; }
.ld-n { display: block; width: 100%; height: 100%; fill: var(--text); clip-path: inset(100% 0 0 0); }
/* the handwritten "N Akhtar" from the logo, cut into the N; it writes itself in */
.ld-sig { position: absolute; left: 66.8%; top: 80.32%; width: 24.61%; height: 15.31%; background: var(--ink); clip-path: inset(0 100% 0 0);
  -webkit-mask: url(img/signature.png) 0 0 / 100% 100% no-repeat; mask: url(img/signature.png) 0 0 / 100% 100% no-repeat; }
html.ld-go .ld-n { animation: ld-wipe .9s .05s cubic-bezier(.6, 0, .2, 1) forwards; }
html.ld-go .ld-sig { animation: ld-wipe-x 1.2s .85s cubic-bezier(.45, 0, .25, 1) forwards; }
/* name, rule and role arrive in turn */
.ld-name { margin-top: 30px; font: italic 400 clamp(2.75rem, 1.5rem + 4.6vw, 5.4rem)/1 var(--serif); letter-spacing: -.02em; color: var(--text); white-space: nowrap; }
.ld-name span { display: inline-block; opacity: 0; transform: translateY(.35em); filter: blur(8px); }
html.ld-go .ld-name span { animation: ld-focus .95s cubic-bezier(.2, .7, .2, 1) forwards; animation-delay: calc(.35s + var(--i) * .13s); }
.ld-rule { display: block; width: min(320px, 60vw); height: 1px; margin-top: 28px; background: var(--ice); opacity: .8; transform: scaleX(0); }
html.ld-go .ld-rule { animation: ld-grow 1s .85s cubic-bezier(.6, 0, .2, 1) forwards; }
.ld-role { margin-top: 18px; padding-left: .34em; font: 400 12px/1.5 var(--mono); letter-spacing: .34em; text-transform: uppercase; color: var(--text-2); opacity: 0; }
html.ld-go .ld-role { animation: ld-rise .8s 1.1s cubic-bezier(.2, .7, .2, 1) forwards; }
@media (max-width: 480px) { .ld-role { font-size: 10.5px; letter-spacing: .22em; padding-left: .22em; } }
.ld-foot { position: absolute; left: 0; right: 0; bottom: calc(28px + env(safe-area-inset-bottom, 0px)); width: var(--page); margin-inline: auto; display: flex; justify-content: space-between; gap: 20px; font: 400 11.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); opacity: 0; }
html.ld-go .ld-foot { animation: ld-rise .8s .2s cubic-bezier(.2, .7, .2, 1) forwards; }
html.ld-out .ld-foot { opacity: 0 !important; transition: opacity .3s; }
.ld-count { min-width: 3ch; text-align: right; color: var(--text-2); font-variant-numeric: tabular-nums; }
@keyframes ld-wipe { to { clip-path: inset(0 0 0 0); } }
@keyframes ld-wipe-x { to { clip-path: inset(0 0 0 0); } }
@keyframes ld-focus { to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes ld-grow { to { transform: none; } }
@keyframes ld-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.veil-out { position: fixed; z-index: 300; width: 0; height: 0; transform: translate(-50%, -50%); border-radius: 50%; background: var(--ink); pointer-events: none;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .3), inset 16px 20px 46px rgba(255, 255, 255, .14), inset -20px -24px 60px rgba(0, 0, 0, .35), 0 30px 90px rgba(0, 0, 0, .35); }

/* ---------- Split headings ---------- */
.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .08em .16em 0; margin: 0 -.08em -.16em 0; }
.split .wi { display: inline-block; transform-origin: 0 100%; }

/* ---------- Words behind the glass ----------
   With WebGL the canvas draws these behind the flutes, where they bend. */
.deep { position: relative; z-index: 1; height: clamp(150px, 22vw, 300px); display: flex; align-items: center; overflow: hidden; white-space: nowrap; font: italic 400 clamp(7rem, 16vw, 15rem)/1 var(--serif); letter-spacing: -.02em; color: var(--text-3); user-select: none; pointer-events: none; }
.deep span { display: inline-block; padding-right: .3em; animation: deep-roll 50s linear infinite; }
.gl-on .deep { color: transparent; }
.gl-on .deep span { animation: none; }
@keyframes deep-roll { to { transform: translateX(-50%); } }

/* ---------- Small helpers ---------- */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.shot.logo { position: relative; }
.shot-tag { position: absolute; left: 14px; bottom: 14px; padding: 7px 12px; border-radius: 999px; font: 500 12.5px/1 var(--sans); color: #f3f5f8; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
[data-theme="light"] .shot-tag { color: #0c0f14; background: rgba(12, 15, 20, .05); box-shadow: inset 0 0 0 1px rgba(12, 15, 20, .1); }
.wcard .vault { aspect-ratio: 16 / 10; }

/* ---------- Theme-aware images ---------- */
[data-theme="light"] .th-dark, .th-light { display: none !important; }
[data-theme="light"] .th-light { display: block !important; }

/* ---------- The secret project ---------- */
.secret { cursor: default; }
.vault { position: relative; height: 100%; display: grid; place-items: center; overflow: hidden; border-radius: 18px; background: radial-gradient(90% 80% at 28% 18%, color-mix(in srgb, var(--ice) 22%, transparent), transparent 62%), radial-gradient(70% 70% at 90% 100%, var(--accent-2), transparent 60%), var(--well); }
.vault::before { content: ""; position: absolute; inset: -40%; background: repeating-linear-gradient(115deg, transparent 0 26px, var(--fill-2) 26px 27px); animation: vault-drift 14s linear infinite; }
@keyframes vault-drift { to { transform: translateX(-29.8px); } }
.vault .lock { position: relative; display: grid; gap: 16px; justify-items: center; text-align: center; padding: 20px; }
.vault .lock svg { width: 30px; height: 30px; fill: none; stroke: var(--text); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.vault .stamp { font: 600 11.5px/1 var(--sans); letter-spacing: .32em; text-transform: uppercase; color: var(--ice); padding: 9px 12px 9px 16px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--ice); }
.vault .bars { display: grid; gap: 8px; justify-items: center; width: 220px; max-width: 100%; }
.vault .bars i { display: block; height: 9px; border-radius: 3px; background: linear-gradient(90deg, var(--fill-3), var(--line-2), var(--fill-3)); background-size: 200% 100%; animation: bar-shine 2.4s ease-in-out infinite; }
.vault .bars i:nth-child(1) { width: 100%; } .vault .bars i:nth-child(2) { width: 72%; animation-delay: .2s; } .vault .bars i:nth-child(3) { width: 84%; animation-delay: .4s; }
@keyframes bar-shine { 50% { background-position: 100% 0; } }
.redact { display: inline-block; height: .78em; width: 6.2em; border-radius: 4px; background: currentColor; opacity: .85; vertical-align: -.06em; }

/* ---------- Skills, wired to the work (a Blueprint graph) ---------- */
.bp { --nb: rgba(10, 10, 10, .58); position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .82fr) minmax(0, 1fr); gap: clamp(48px, 8vw, 130px); align-items: center; padding: clamp(20px, 3vw, 40px); border-radius: var(--r-slab); }
[data-theme="light"] .bp { --nb: rgba(255, 253, 249, .72); }
.bp-wires { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.bp-col { position: relative; z-index: 1; display: grid; gap: 18px; align-content: center; }
/* Mono at night: each kind is a shade of silver, nudged only slightly warm or cool */
.bp-node { --k: #e6e6e6; border-radius: 14px; background: var(--nb); box-shadow: inset 0 0 0 1px var(--node-line), 0 14px 34px -22px rgba(0, 0, 0, .7); overflow: hidden; }
.bp-node[data-kind="ue"] { --k: #b9aa9b; } .bp-node[data-kind="lang"] { --k: #8e8e8e; } .bp-node[data-kind="tool"] { --k: #9fabb6; }
[data-theme="light"] .bp-node { --k: #8f6a2a; } [data-theme="light"] .bp-node[data-kind="ue"] { --k: #b0583a; } [data-theme="light"] .bp-node[data-kind="lang"] { --k: #5f584e; } [data-theme="light"] .bp-node[data-kind="tool"] { --k: #4f6a85; }
.bp-h { display: flex; align-items: center; gap: 9px; padding: 10px 14px; font: 600 11.5px/1 var(--sans); letter-spacing: .09em; text-transform: uppercase; color: var(--text); background: linear-gradient(90deg, color-mix(in srgb, var(--k) 34%, transparent), transparent 90%); box-shadow: inset 0 -1px 0 var(--node-line); }
.bp-h::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--k); }
[data-side="r"] .bp-h { flex-direction: row-reverse; background: linear-gradient(270deg, color-mix(in srgb, var(--k) 34%, transparent), transparent 90%); }
.bp-node ul { list-style: none; margin: 0; padding: 6px 0 8px; }
.bp-pin { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 14px; border: 0; background: none; cursor: pointer; font: 500 14.5px/1.3 var(--sans); color: var(--text-2); text-align: left; transition: color .2s, background-color .2s, opacity .3s; }
[data-side="r"] .bp-pin { flex-direction: row-reverse; text-align: right; }
.bp-pin sup { font-size: 10.5px; font-weight: 500; color: var(--text-3); margin-left: 3px; }
.bp-pin i { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--k); box-shadow: 0 0 0 3px color-mix(in srgb, var(--k) 22%, transparent); transition: transform .3s var(--ease); }
.bp-pin.free i { background: transparent; box-shadow: inset 0 0 0 1.5px var(--k); }
.bp-pin:hover, .bp-pin.on, .bp-pin:focus-visible { color: var(--text); background: var(--fill); }
.bp-pin[aria-pressed="true"] { background: var(--fill-2); color: var(--text); }
.bp-pin.on i { transform: scale(1.4); }
.bp.lit .bp-pin:not(.on) { opacity: .42; }
.bp-mid { gap: 10px; }
.bp-proj { position: relative; display: grid; gap: 3px; padding: 12px 20px; border-radius: 12px; text-decoration: none; color: var(--text); background: var(--nb); box-shadow: inset 0 0 0 1px var(--node-line); text-align: center; transition: box-shadow .3s, transform .4s var(--ease), opacity .3s; }
.bp-proj b { font-weight: 600; font-size: 15px; letter-spacing: -.01em; }
.bp-proj span { font-size: 12.5px; color: var(--text-3); }
.bp-in { position: absolute; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--wire); box-shadow: 0 0 0 3px var(--fill-2); }
.bp-in.l { left: -5px; } .bp-in.r { right: -5px; }
.bp-proj.on { box-shadow: inset 0 0 0 1.5px var(--ice), 0 0 0 5px color-mix(in srgb, var(--ice) 16%, transparent); transform: scale(1.03); }
.bp.lit .bp-proj:not(.on) { opacity: .38; }
.bp-proj .redact { width: 3.4em; }
.bp-w { fill: none; stroke-width: 1.6; stroke: #e6e6e6; opacity: .32; stroke-linecap: round; transition: opacity .3s, stroke-width .3s; }
.bp-w.k-ue { stroke: #b9aa9b; } .bp-w.k-lang { stroke: #8e8e8e; } .bp-w.k-tool { stroke: #9fabb6; }
[data-theme="light"] .bp-w { stroke: #8f6a2a; } [data-theme="light"] .bp-w.k-ue { stroke: #b0583a; } [data-theme="light"] .bp-w.k-lang { stroke: #5f584e; } [data-theme="light"] .bp-w.k-tool { stroke: #4f6a85; }
.bp.lit .bp-w { opacity: .07; }
.bp .bp-w.on { opacity: 1; stroke-width: 2.4; stroke-dasharray: 9 7; animation: bp-flow .6s linear infinite; }
@keyframes bp-flow { to { stroke-dashoffset: -16; } }
@media (max-width: 920px) {
  .bp { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .bp-wires { display: none; }
  .bp-mid { order: -1; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .bp-in { display: none; }
  [data-side="r"] .bp-pin { flex-direction: row; text-align: left; }
  [data-side="r"] .bp-h { flex-direction: row; background: linear-gradient(90deg, color-mix(in srgb, var(--k) 34%, transparent), transparent 90%); }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation: none !important; } }