/* Hallmark · shape: Marquee Hero, re-themed (draw 598ec2) · genre: modern-minimal · theme: Cobalt (by request), with Studio's crop marks, proof grid and type guides, recoloured in Console's graphite tone with one amber signal (by request) · redesign: full
 * hero: Stage, the field bleeding behind the copy · nav: wordmark and one key, sticky on glass (by request) · controls: glass keys, one 14px radius on every surface (by request) · footer: mast · imagery: the user's own photo as an avatar beside the closing head; client logos and reference headshots · signature: an ASCII field where raw ideas resolve into five running lanes (roadmap, architecture, code, delivery, scale)
 * axes: light/grotesk-sans/cool · posture: restrained · contrast: pass · fold: pass · job: hire · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · weakest: R, the field, the typed session and the measured wordmark all move; the field is the only loop, the session types once and the guides draw once */
/* Hallmark · hero-review: fix · 5 findings · 5 resolved · the headline now comes from the owner's own LinkedIn about */
/* Hallmark · finish-review: subagent · 8 findings · 8 resolved · gap: none, Vesper is named */
/* Hallmark · dropped imagesloaded.pkgd.min.js, gsap.min.js, ScrollTrigger.min.js, lenis.min.js, split-types.min.js, matter.min.js, career-tabs.js, swiper.min.js, headroom.min.js, vanila-marquee.min.js, script.js · they animated the old composition (split-letter reveals, the marquee, smooth scroll, the gradient hero) that the redesign replaces; the files stay on disk */
/* Hallmark · dropped hero-gradient, hero-gradient-wrapper, hero-gradient-background.png, gradient-bg.png, logo.png, knockloud-white.png, arrow-Icon.svg · the gradient blob (29), the white dark-mode mark and the arrow glued to the button (63) went with the old dark page; the dark K in knockloud.png carries the brand */
/* Hallmark · dropped boldking.svg, vesper.svg, matt.svg, wonderkind.svg, victus.svg · the same five client logos now sit inline as SVG in the ink token, because the files are filled white for the old dark page; the owner added Tixel, its mark taken from tixel.com */
/* Hallmark · dropped eduardo stuart, alessio evangelista, marjon siero, denis mysenko, oleksander dyriavin, khendi lee · each name now labels its own reference as a cite in the figcaption, not as a page heading */
/* Hallmark · reworded "transforming ideas into digital product that drive success" to "Product strategy, shipped and scaled." · 19 swap test and 38i italic accent words; the line is from the owner's LinkedIn about */
/* Hallmark · reworded "discovery", "development", "advice" to "Strategy", "Architecture", "Code", "AI" · the owner asked for personal copy and gave the LinkedIn about as the source; they now run as a pipeline with AI underneath */
/* Hallmark · reworded "based in the netherlands, we have built product" to "Built from the ground up." · first person for a portfolio of one engineer; the owner asked for a short title over a longer line, without singling out one client */
/* Hallmark · reworded "we offer" to "Move fast, without the mess." · 19 names the dash, and a category label is not a section head */
/* Hallmark · dropped have trust in, what other says · the logo row takes a figcaption (54 bans the eyebrow) and the references sit as six glass cards on a navy band */
/* Hallmark · dropped tel:+31622640178, +31622640178 · the owner asked to take the phone number off the page */
/* Hallmark · dropped 2018 · the owner asked for a funnier footer line, Building software before vibe coders existed */
@import url("./tokens.css");
@import url("./base.css");

:root {
  --nav-h: 72px;
  --hero-head: clamp(2.75rem, 4.6vw + 0.6rem, 5rem);
  color-scheme: dark;
  --color-paper: oklch(17% 0.008 250); --color-paper-2: oklch(21% 0.009 250); --color-paper-3: oklch(13.5% 0.007 250);
  --color-ink: oklch(95% 0.005 250); --color-ink-2: oklch(83% 0.008 250); --color-muted: oklch(71% 0.01 250);
  --color-rule: oklch(31% 0.01 250); --color-rule-2: oklch(42% 0.012 250);
  --color-key-face: oklch(23.5% 0.01 250); --color-key-edge: oklch(11% 0.006 250);
  --shadow-key: 0 3px 0 0 var(--color-key-edge), 0 6px 8px -4px oklch(5% 0 0 / 0.55), inset 0 1px 0 oklch(100% 0 0 / 0.07);
  --shadow-key-press: inset 0 1px 2px oklch(5% 0 0 / 0.6);
  --shadow-card: none;
  --color-shadow: oklch(6% 0.006 250);
  --radius-ui: 14px; --radius-card: var(--radius-ui); --radius-input: var(--radius-ui);
  --color-glyph-1: oklch(29% 0.006 250); --color-glyph-2: oklch(38% 0.008 250); --color-glyph-3: oklch(52% 0.01 250); --color-glyph-4: oklch(66% 0.012 250);
  --color-navy: var(--color-paper-3); --color-navy-2: var(--color-paper-2); --color-navy-ink: var(--color-ink); --color-navy-muted: var(--color-muted); --color-navy-rule: var(--color-rule);
  --color-graphite: var(--color-navy); --color-graphite-2: var(--color-navy-2); --color-graphite-ink: var(--color-navy-ink); --color-graphite-muted: var(--color-navy-muted);
  --color-graphite-glyph-1: oklch(23% 0.006 250); --color-graphite-glyph-2: oklch(31% 0.008 250); --color-graphite-glyph-3: oklch(44% 0.01 250);
  --color-accent: oklch(82% 0.15 80); --color-accent-ink: oklch(18% 0.04 75); --color-accent-edge: oklch(62% 0.13 72); --color-accent-deep: oklch(82% 0.15 80); --color-accent-wash: oklch(29% 0.05 80); --color-focus: oklch(82% 0.15 80); --color-field-signal: oklch(82% 0.15 80);
  --color-accent-2: oklch(82% 0.15 80);
  --shadow-key-accent: 0 3px 0 0 var(--color-accent-edge), 0 6px 8px -4px oklch(5% 0 0 / 0.55), inset 0 1px 0 oklch(100% 0 0 / 0.35);
  --color-mark: color-mix(in oklab, var(--color-ink) 45%, transparent);
  --color-dot: color-mix(in oklab, var(--color-ink) 14%, transparent);
}

/* ---------- shared ---------- */

body { font-family: var(--font-body); }
h1, h2, h3 { color: var(--color-ink); }
h3 { font-weight: 500; }

.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-input); background: var(--color-ink); color: var(--color-paper); }
.skip:focus-visible { top: var(--space-md); }

.cut { border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper); box-shadow: var(--shadow-card); }

.key { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 48px; padding: 0 var(--space-lg); border: var(--rule-hair) solid color-mix(in oklab, var(--color-ink) 16%, transparent); border-radius: var(--radius-ui); background-color: color-mix(in oklab, var(--color-ink) 7%, transparent); -webkit-backdrop-filter: blur(14px) saturate(170%); backdrop-filter: blur(14px) saturate(170%); color: var(--color-ink); font: 500 var(--text-md)/1 var(--font-display); white-space: nowrap; text-decoration: none; cursor: pointer; box-shadow: inset 0 1px 0 color-mix(in oklab, var(--color-ink) 14%, transparent), 0 10px 24px -14px color-mix(in oklab, var(--color-shadow) 90%, transparent); transition: transform var(--dur-micro) var(--ease-out), background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.key:hover { background-color: color-mix(in oklab, var(--color-ink) 12%, transparent); border-color: color-mix(in oklab, var(--color-ink) 26%, transparent); }
.key:active, .key[aria-pressed="true"] { transform: translateY(1px); background-color: color-mix(in oklab, var(--color-ink) 4%, transparent); box-shadow: inset 0 1px 2px color-mix(in oklab, var(--color-shadow) 60%, transparent); }
.key:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.key:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.key--primary { border-color: color-mix(in oklab, var(--color-accent) 70%, var(--color-ink)); background-color: color-mix(in oklab, var(--color-accent) 92%, transparent); color: var(--color-accent-ink); box-shadow: inset 0 1px 0 color-mix(in oklab, var(--color-ink) 55%, transparent), 0 10px 24px -14px color-mix(in oklab, var(--color-shadow) 90%, transparent); }
.key--primary:hover { border-color: var(--color-accent); background-color: var(--color-accent); }
.key--primary:active { background-color: color-mix(in oklab, var(--color-accent) 78%, transparent); }
.key--sm { min-height: 44px; padding: 0 var(--space-md); font-size: var(--text-sm); }

a { text-decoration-color: var(--color-rule-2); text-underline-offset: 0.2em; transition: text-decoration-color var(--dur-short) var(--ease-out); }
a:hover { text-decoration-color: var(--color-accent-deep); }
a:active { color: var(--color-ink-2); }

.crop { position: relative; --l: 10px; --o: 14px; }
.crop::before { content: ""; position: absolute; inset: calc(-1 * var(--o)); z-index: 0; pointer-events: none; background:
  linear-gradient(var(--color-mark), var(--color-mark)) 0 var(--o) / var(--l) 1px no-repeat,
  linear-gradient(var(--color-mark), var(--color-mark)) var(--o) 0 / 1px var(--l) no-repeat,
  linear-gradient(var(--color-mark), var(--color-mark)) 100% var(--o) / var(--l) 1px no-repeat,
  linear-gradient(var(--color-mark), var(--color-mark)) calc(100% - var(--o)) 0 / 1px var(--l) no-repeat,
  linear-gradient(var(--color-mark), var(--color-mark)) 0 calc(100% - var(--o)) / var(--l) 1px no-repeat,
  linear-gradient(var(--color-mark), var(--color-mark)) var(--o) 100% / 1px var(--l) no-repeat,
  linear-gradient(var(--color-mark), var(--color-mark)) 100% calc(100% - var(--o)) / var(--l) 1px no-repeat,
  linear-gradient(var(--color-mark), var(--color-mark)) calc(100% - var(--o)) 100% / 1px var(--l) no-repeat; }

.mark { display: block; flex-shrink: 0; width: 18px; height: auto; filter: brightness(0) invert(0.93); }

.sec-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: end; }
.sec-head h2 { grid-column: 1 / 7; }
.sec-head .lead { grid-column: 7 / -1; color: var(--color-ink-2); }

/* ---------- nav ---------- */

.nav { position: sticky; top: 0; z-index: var(--z-sticky-nav); border-bottom: var(--rule-hair) solid color-mix(in oklab, var(--color-ink) 10%, transparent); background: color-mix(in oklab, var(--color-paper) 58%, transparent); -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%); box-shadow: inset 0 1px 0 color-mix(in oklab, var(--color-ink) 6%, transparent); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .nav { background: var(--color-paper); } }
.nav__in { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: var(--nav-h); }
.brand { display: inline-flex; flex-shrink: 0; align-items: center; gap: var(--space-sm); border-radius: var(--radius-input); color: var(--color-ink); font: 600 var(--text-lg)/1 var(--font-display); letter-spacing: -0.015em; white-space: nowrap; text-decoration: none; }
.brand:hover { color: var(--color-ink-2); }
.brand:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 6px; }

/* ---------- hero: the field ---------- */

.hero { position: relative; display: flex; align-items: center; min-height: calc(100dvh - var(--nav-h)); padding-block: var(--space-2xl); background-image: radial-gradient(circle at 50% 50%, var(--color-glyph-1) 1px, transparent 1.4px); background-size: var(--cell-w) var(--cell-h); }
.js .hero { background-image: none; }
.hero__field { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
.hero__in { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); width: 100%; }
.hero__copy { grid-column: 1 / 8; }
.hero h1 { max-width: 18ch; font-size: var(--hero-head); line-height: 1.02; }
.hero .lead { max-width: 38ch; margin-top: var(--space-lg); color: var(--color-ink-2); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); margin-top: var(--space-xl); }



/* ---------- where: Vesper and the teams ---------- */

.where { padding-block: var(--section-gap-l) var(--section-gap); }
.where__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: center; }
.where__text { grid-column: 1 / 6; }
.where .lead { max-width: 46ch; margin-top: var(--space-lg); color: var(--color-ink-2); }
.clients { grid-column: 7 / -1; margin: 0; }
.clients__board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); margin: 0; padding: 0; list-style: none; }
.clients__board li { display: grid; place-items: center; min-height: 112px; padding: var(--space-lg); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-ui); background: var(--color-paper-2); }
.clients figcaption { margin-top: var(--space-md); color: var(--color-muted); font: 500 var(--text-sm)/1.4 var(--font-display); }
.logo { display: block; width: auto; max-width: 100%; color: var(--color-ink); }
.logo--boldking { height: 24px; aspect-ratio: 300 / 45; }
.logo--vesper { height: 30px; aspect-ratio: 123 / 32; }
.logo--matt { height: 26px; aspect-ratio: 85 / 27; }
.logo--wonderkind { height: 22px; aspect-ratio: 176 / 25; }
.logo--victus { height: 20px; aspect-ratio: 185 / 24; }
.logo--tixel { height: 26px; aspect-ratio: 109 / 29; }

/* ---------- what I do: four layers ---------- */

.work { padding-block: var(--section-gap) var(--section-gap-s); }
.layers { margin-top: var(--space-2xl); }
.layer-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "s a c" "ai ai ai"; gap: var(--space-xl) var(--space-2xl); margin: 0; padding: 0; list-style: none; }
.layer[data-layer="0"] { grid-area: s; }
.layer[data-layer="1"] { grid-area: a; }
.layer[data-layer="2"] { grid-area: c; }
.layer[data-layer="3"] { grid-area: ai; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--space-2xl); align-items: center; background-color: color-mix(in oklab, var(--color-accent) 7%, var(--color-paper-2)); }
.layer[data-layer="3"] h3, .layer[data-layer="3"] p { grid-column: 1; }
.layer[data-layer="3"] .layer__diag { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
.layer { position: relative; display: flex; flex-direction: column; padding: var(--space-xl); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-ui); background: var(--color-paper-2); transition: border-color var(--dur-short) var(--ease-out); }
.layer[data-layer="0"]::before, .layer[data-layer="1"]::before { content: ""; position: absolute; top: 50%; right: calc(-1 * var(--space-2xl) - 1px); width: var(--space-2xl); height: var(--rule-hair); background: var(--color-accent-deep); }
.layer h3 { font-size: var(--text-xl); }
.layer__btn { display: inline-flex; align-items: center; min-height: 44px; margin: 0; padding: 0; border: 0; border-radius: 4px; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-align: left; cursor: pointer; }
.layer__btn::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-ui); }
.layer__btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.layer p { max-width: 48ch; margin-top: 0; color: var(--color-ink-2); }
.layer:hover { border-color: var(--color-rule-2); }
.layer.is-active { border-color: var(--color-accent); }
.layer__diag { margin: auto 0 0; padding: var(--space-md) var(--space-lg); overflow-x: auto; border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-ui); background: var(--color-paper-3); color: var(--color-muted); font: 400 var(--text-sm)/1.6 var(--font-outlier); white-space: pre; transition: color var(--dur-short) var(--ease-out); }
.layer p + .layer__diag { margin-top: var(--space-lg); }
.layer.is-active .layer__diag { color: var(--color-ink-2); }

/* ---------- the session: a git log of an engagement ---------- */

.session { padding-block: var(--section-gap-s) var(--section-gap); }
.term { margin: var(--space-2xl) 0 0; border: var(--rule-hair) solid var(--color-navy-2); border-radius: var(--radius-card); background: var(--color-navy); color: var(--color-navy-ink); }
.term__bar { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-xs) var(--space-lg); padding: var(--space-md) var(--space-xl); border-bottom: var(--rule-hair) solid var(--color-navy-rule); color: var(--color-navy-muted); font: 500 var(--text-sm)/1.3 var(--font-body); }
.term__bar code { color: var(--color-navy-ink); font: 400 var(--text-sm)/1.3 var(--font-outlier); }
.term pre { position: relative; z-index: 1; margin: 0; padding: var(--space-xl); overflow-x: auto; font: 400 var(--text-md)/2 var(--font-outlier); }
.term pre:focus-visible { outline: 2px solid var(--color-accent-2); outline-offset: -2px; }
.t-line { display: block; min-height: 2em; }
.t-out { display: grid; grid-template-columns: auto minmax(var(--space-lg), 1fr) auto; align-items: baseline; column-gap: var(--space-sm); }
.t-out::after { content: ""; grid-column: 2; grid-row: 1; align-self: center; border-bottom: var(--rule-hair) dotted var(--color-navy-rule); }
.t-msg { grid-column: 1; }
.t-lane { grid-column: 3; color: var(--color-accent-2); }
.t-prompt, .t-hash { color: var(--color-navy-muted); }
.t-ref { color: var(--color-accent-2); }
.t-cmd a { color: var(--color-navy-ink); text-decoration-color: var(--color-accent-2); }
.t-cmd a:hover { text-decoration-color: var(--color-navy-ink); }
.t-cmd a:focus-visible { outline: 2px solid var(--color-accent-2); outline-offset: 2px; border-radius: 2px; }
.t-caret { display: inline-block; width: 0.6em; height: 1.15em; margin-left: var(--space-2xs); vertical-align: -0.2em; background: var(--color-accent-2); }
.term.is-typing .t-line.is-later { visibility: hidden; }
.term.is-done .t-caret { animation: caret 1s steps(1) 5 forwards; }
.t-repl { display: block; }
.t-repl .t-line { white-space: pre-wrap; }
.t-repl a { color: var(--color-navy-ink); text-decoration-color: var(--color-accent-2); }
.t-repl a:hover { text-decoration-color: var(--color-navy-ink); }
.t-repl a:focus-visible { outline: 2px solid var(--color-accent-2); outline-offset: 2px; border-radius: 2px; }
.t-echo { color: var(--color-navy-ink); }
.t-out-line { color: var(--color-navy-ink); }
.t-dim { color: var(--color-navy-muted); }
.t-ask { display: flex; align-items: center; gap: 0.6em; cursor: text; }
.t-ask .t-caret { margin-left: 0; }
.t-ask input { flex: 1; min-width: 0; margin: 0; padding: 0; border: 0; min-height: 44px; border-bottom: var(--rule-hair) dotted var(--color-navy-muted); border-radius: 0; background: transparent; color: var(--color-navy-ink); font: inherit; caret-color: var(--color-accent-2); outline: 2px solid transparent; transition: border-color var(--dur-short) var(--ease-out); }
.t-ask input::placeholder { color: var(--color-navy-muted); opacity: 1; }
.t-ask input:focus-visible { border-bottom-style: solid; border-bottom-color: var(--color-accent-2); }
.t-ask:focus-within .t-caret, .t-ask.has-value .t-caret { display: none; }
@keyframes caret { 50% { opacity: 0; } }
.term__note { margin-top: var(--space-md); color: var(--color-muted); font: 500 var(--text-sm)/1.4 var(--font-body); }

/* ---------- references: glass over a glyph field ---------- */

.refs { --color-focus: var(--color-accent-2); position: relative; overflow: hidden; padding-block: var(--section-gap-s); background-color: var(--color-navy); background-image: radial-gradient(circle at 1px 1px, var(--color-navy-rule) 1px, transparent 1.4px); background-size: var(--cell-w) var(--cell-h); color: var(--color-navy-ink); }
.js .refs { background-image: none; }
.refs__field { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
.refs__in { position: relative; z-index: 1; }
.refs h2 { max-width: 24ch; color: var(--color-navy-ink); }
.refs__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); margin: var(--space-2xl) 0 0; padding: 0; list-style: none; }
.refs__grid:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 6px; border-radius: var(--radius-ui); }
.glass { border: var(--rule-hair) solid color-mix(in oklab, var(--color-navy-ink) 16%, transparent); border-radius: var(--radius-ui); background-color: color-mix(in oklab, var(--color-navy-2) 38%, transparent); background-image: linear-gradient(140deg, color-mix(in oklab, var(--color-navy-ink) 9%, transparent), transparent 45%); -webkit-backdrop-filter: blur(10px) saturate(170%); backdrop-filter: blur(10px) saturate(170%); box-shadow: inset 0 1px 0 color-mix(in oklab, var(--color-navy-ink) 20%, transparent), 0 24px 48px -28px color-mix(in oklab, var(--color-shadow) 85%, transparent); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass { background: var(--color-navy-2); } }
.ref { display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-lg); height: 100%; margin: 0; padding: var(--space-lg); }
.ref blockquote { margin: 0; }
.ref blockquote p { color: var(--color-navy-ink); font-size: var(--text-md); line-height: 1.6; text-indent: -0.4em; }
.ref figcaption { display: flex; align-items: center; gap: var(--space-sm); padding-top: var(--space-md); border-top: var(--rule-hair) solid color-mix(in oklab, var(--color-navy-ink) 12%, transparent); font-size: var(--text-sm); line-height: 1.35; }
.ref figcaption img { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; object-fit: cover; outline: 1px solid color-mix(in oklab, var(--color-navy-ink) 20%, transparent); outline-offset: -1px; }
.ref cite { display: block; color: var(--color-navy-ink); font: 500 var(--text-sm)/1.3 var(--font-display); font-style: normal; }
.ref__role { color: var(--color-navy-muted); }
.ref figcaption img[src*="denis"] { object-position: 50% 8%; }

/* ---------- the close ---------- */

.contact { padding-block: var(--section-gap-s) var(--section-gap); border-top: var(--rule-hair) solid var(--color-rule); }
.contact__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: center; }
.contact__text { grid-column: 1 / 7; }
.contact__head { display: flex; align-items: center; gap: var(--space-lg); }
.avatar { flex-shrink: 0; width: 88px; height: 88px; border-radius: 50%; object-fit: cover; outline: var(--rule-hair) solid color-mix(in oklab, var(--color-ink) 14%, transparent); outline-offset: -1px; }
.contact h2 { max-width: 12ch; font-size: var(--text-display); line-height: 1.02; }
.contact .lead { max-width: 38ch; margin-top: var(--space-lg); color: var(--color-ink-2); }
.contact .key { margin-top: var(--space-xl); }
.contact__card { grid-column: 8 / -1; margin: 0; padding: var(--space-xs) var(--space-lg); }
.contact__card div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); align-items: center; gap: var(--space-md); min-height: 64px; border-bottom: var(--rule-hair) solid var(--color-rule); }
.contact__card div:last-child { border-bottom: 0; }
.contact__card dt { color: var(--color-muted); font: 500 var(--text-sm)/1.3 var(--font-display); }
.contact__card dd { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm); margin: 0; }
.contact__card a { color: var(--color-ink); }
.contact__card .mono { font: 400 var(--text-sm)/1.3 var(--font-outlier); }

/* ---------- footer: the mast under construction ---------- */

.foot { padding-block: var(--space-3xl) var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule); background-image: radial-gradient(circle at 1px 1px, var(--color-dot) 1px, transparent 1.4px); background-size: 24px 24px; -webkit-mask-image: linear-gradient(to bottom, transparent, var(--color-ink) var(--space-3xl)); mask-image: linear-gradient(to bottom, transparent, var(--color-ink) var(--space-3xl)); }
.mast { position: relative; }
.foot__mast { position: relative; z-index: 1; margin: 0; color: var(--color-ink); font: 600 clamp(3rem, 15vw, 14rem)/0.9 var(--font-display); letter-spacing: -0.045em; white-space: nowrap; }
.guide { position: absolute; left: 0; right: 0; top: var(--y, 0); display: none; height: var(--rule-hair); background: var(--color-accent-deep); transform-origin: left center; transition: transform var(--dur-long) var(--ease-out); transition-delay: calc(var(--i, 0) * 120ms); }
.guide i { position: absolute; right: 0; bottom: var(--space-2xs); color: var(--color-ink-2); font: 500 var(--text-xs)/1 var(--font-body); font-style: normal; font-variant-numeric: tabular-nums; background: var(--color-paper); padding-left: var(--space-xs); }
.mast.is-measured .guide { display: block; }
.js .mast.is-measured:not(.is-in) .guide { transform: scaleX(0); }
.mguide { position: absolute; left: 0; top: var(--mt, 0); z-index: 2; width: var(--rule-hair); height: var(--mh, 0); background: var(--color-accent-deep); transform: translateX(var(--mx, 0)); transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); pointer-events: none; }
.mguide__label { position: absolute; left: 0; top: calc(var(--mt, 0) - var(--space-lg)); z-index: 2; padding: var(--space-3xs) var(--space-xs); border-radius: var(--radius-ui); background: var(--color-paper-2); color: var(--color-ink-2); font: 500 var(--text-xs)/1.2 var(--font-body); font-variant-numeric: tabular-nums; white-space: nowrap; transform: translateX(var(--mx, 0)); transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); pointer-events: none; }
.mguide__label:empty { display: none; }
.js .mast:not(.is-pointing) .mguide, .js .mast:not(.is-pointing) .mguide__label { opacity: 0; }
.foot__mast .ml { display: inline-block; }
.foot__row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-md) var(--space-xl); margin-top: var(--space-xl); color: var(--color-muted); font-size: var(--text-sm); }
.foot__links { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); margin: 0; padding: 0; list-style: none; }
.foot__row a { color: var(--color-ink); }

/* ---------- narrow ---------- */

@media (max-width: 60rem) {
  .hero { align-items: flex-start; min-height: 0; padding-block: var(--space-2xl) calc(var(--cell-h) * 22); }
  .hero__in { grid-template-columns: minmax(0, 1fr); }
  .hero__copy { grid-column: 1; }
  .sec-head { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-md); }
  .sec-head h2, .sec-head .lead { grid-column: 1; }
  .layer-list { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "s a" "c ai"; gap: var(--space-lg); }
  .layer[data-layer="3"] { display: flex; align-items: stretch; }
  .layer[data-layer="3"] .layer__diag { margin: auto 0 0; }
  .layer[data-layer="3"] p + .layer__diag { margin-top: var(--space-lg); }
  .layer[data-layer="0"]::before, .layer[data-layer="1"]::before { display: none; }
  .refs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact__grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-2xl); }
  .contact__text, .contact__card { grid-column: 1; }
  .avatar { width: 64px; height: 64px; }
  .contact__head { gap: var(--space-md); }
  .where__grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-2xl); }
  .where__text, .clients { grid-column: 1; }
}

@media (max-width: 40rem) {
  .layer-list { grid-template-columns: minmax(0, 1fr); grid-template-areas: "s" "a" "c" "ai"; gap: var(--space-sm); }
  .layer { padding: var(--space-lg); }
  .layer__diag { padding: var(--space-sm) var(--space-md); font-size: var(--text-xs); }
  .layer p + .layer__diag { margin-top: var(--space-md); }
  .t-out::after { display: none; }
  .term pre { padding: var(--space-lg) var(--space-md); white-space: pre-wrap; overflow-wrap: normal; font-size: var(--text-sm); line-height: 1.5; }
  .t-ask input { font-size: max(16px, 1em); }
  .term__bar { padding-inline: var(--space-md); }
  .t-line { min-height: 1.5em; }
  .t-path { display: none; }
  .t-out { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "hash lane" "text text"; row-gap: var(--space-3xs); padding-block: var(--space-sm); border-top: var(--rule-hair) dotted var(--color-navy-rule); }
  .t-out + .t-line:not(.t-out) { margin-top: var(--space-xs); border-top: var(--rule-hair) dotted var(--color-navy-rule); }
  .t-msg { display: contents; }
  .t-hash { grid-area: hash; font-size: var(--text-xs); }
  .t-lane { grid-area: lane; justify-self: end; font-size: var(--text-xs); }
  .t-text { grid-area: text; color: var(--color-navy-ink); }
  .crop { --o: 8px; --l: 6px; }
  .mast .guide, .mast.is-measured .guide { display: none; }
  .ref blockquote p { text-indent: 0; }
  .nav .key { display: none; }
  .refs__grid { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 86%; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding: var(--space-2xs) var(--gutter) var(--space-lg); }
  .refs__grid > li { scroll-snap-align: start; }
  .contact__card div { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); padding-block: var(--space-sm); }
}

@media (prefers-reduced-motion: reduce) {
  .key, .guide, .mguide, .mguide__label, .layer, .layer__diag, a { transition: none; }
  .js .mast.is-measured:not(.is-in) .guide { transform: none; }
  .term.is-done .t-caret { animation: none; }
  .key:active { transform: none; }
}