/* Hallmark · shape: Long Document led by a ledger · genre: editorial · theme: brand · redesign: full · job: hire
 * paper: oklch(15% 0.012 285) · accent: oklch(66.5% 0.15 287) · display: Geist 600 · body: Geist 400 · hero: Stage (/), Banner (/blog) · nav: edge-aligned bar, wordmark left, section links, one quiet action (decided: a one-page profile needs its sections in reach) · footer: mast, the name large over the links · signature: the outcome ledger, eight real figures set large under the one-sentence promise
 * axes: tinted-dark/grotesk/violet · posture: Restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V3 · weakest: V, the page keeps all eleven content sections in their order; varied the compositions instead (Figures, Split, Rows, Bento, Showcase, Index) and merged the tagline, speaking and music beats */
/* Hallmark · dropped the full-screen loader, the hero network canvas, the scroll progress bar, the scroll-scrubbed tagline, the animated sound wave, the counter roll-up and the timeline fill · each was motion with no fact in it, and the loader hid the first screen for up to 3 seconds */
/* Hallmark · dropped the hero proof row (€3B, 6, 100+) and the "6 programs funded" chip · the same facts sit in the ledger one screen down */
/* Hallmark · dropped the case-study category tags (Agentic AI, Origination, Portfolio governance) · 54 names a category tag over a card */
/* Hallmark · reworded "Mentoring the next generation of delivery leaders" to "Mentoring new delivery leaders" · 19 names next-generation */
/* Hallmark · dropped #loader, #net, #progress, #tlFill, #wave and the loader's icon-512.png · the motion pieces listed above, no script or test reads them now */
/* Hallmark · waive 71 · accordion rows, each question centred in its own hairline row of 72px · the FAQ and services questions are rows, not section heads */
/* Hallmark · dismissed 59 · twelve sections because the redesign keeps every section the owner had plus the two he asked for (open source, writing) */
/* Hallmark · answered F4 · the second match is the menu icon's bars, not a button fill */
/* Hallmark · answered F7 · photo, tiles, code and covers share one radius on purpose, one radius per nesting level */
/* Hallmark · waive 44c · Stage posture, the portrait runs from y 162 to 808 and the text block centres on it within 6px · the portrait is the hero visual, the measure stops at the text */
/* Hallmark · waive 79 · Stage posture, the portrait and its caption reach y 808 of 900 · the band under the text sits beside the portrait, not under the hero */
/* Hallmark · answered F15 · sections share the 96px column gap; 24px and 64px are inside components (form rows, facts, head rows) */
/* Hallmark · dismissed 77 · the blog page is a listing, its sections are the head and the article list by design */
/* Hallmark · dismissed 69 · the €3B, $15M+ and €30M+ figures repeat in the FAQ answers on purpose, they are the text search engines and AI answer engines quote */
@import url("./hallmark/tokens.css");
@import url("./hallmark/base.css");

@font-face { font-family: "Geist"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/geist-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/geist-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/geist-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/geist-mono-latin-400-normal.woff2) format("woff2"); }

:root { --nav-h: 72px; color-scheme: dark; }
html { scroll-padding-top: calc(var(--nav-h) + var(--space-lg)); }
body { font-weight: 400; }
h1, h2, h3 { color: var(--color-ink); }
p, li, dd { color: var(--color-ink-2); }
.lead { color: var(--color-ink); }
.num { font-variant-numeric: tabular-nums; }
a { color: var(--color-ink); }
p a, dd a, .lead a { text-decoration-color: var(--color-accent); transition: color var(--dur-short) var(--ease-out); }
p a:hover, dd a:hover, .lead a:hover { color: var(--color-accent-hover); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: var(--space-2xs); }
main:focus { outline: none; }
ul, ol, dl, dd, figure { margin: 0; padding: 0; }

.skip { position: fixed; left: var(--space-md); top: var(--space-md); z-index: var(--z-modal); padding: var(--space-xs) var(--space-sm); background: var(--color-accent); color: var(--color-accent-ink); border-radius: var(--radius-card); text-decoration: none; font-weight: 600; transform: translateY(-200%); }
.skip:focus { transform: none; }

/* Buttons: one filled primary style, one quiet outline, one text link */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 48px; padding: 0 var(--space-lg); border-radius: var(--radius-control); border: 1px solid transparent; font-size: var(--text-md); font-weight: 500; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); color: var(--color-accent-ink); }
.btn-primary:hover { background: var(--color-accent-hover); }
.btn-quiet { background: transparent; color: var(--color-ink); border-color: var(--color-rule-strong); }
.btn-quiet:hover { border-color: var(--color-ink-2); background: var(--color-paper-2); }
.btn-text { display: inline-flex; align-items: center; min-height: 48px; color: var(--color-ink); font-weight: 500; text-decoration: underline; text-decoration-color: var(--color-rule-strong); text-underline-offset: 0.3em; transition: text-decoration-color var(--dur-short) var(--ease-out); white-space: nowrap; }
.btn-text:hover { text-decoration-color: var(--color-accent); }

/* Nav */
.site-head { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: var(--color-paper); border-bottom: var(--rule-hair) solid var(--color-rule); }
.nav { display: flex; align-items: center; gap: var(--space-xl); height: var(--nav-h); }
.wordmark { font-size: var(--text-lg); font-weight: 600; letter-spacing: -0.02em; text-decoration: none; white-space: nowrap; margin-right: auto; }
.nav-links { display: flex; gap: var(--space-2xs); list-style: none; }
.nav-links a { display: block; padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-control); font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); text-decoration: none; white-space: nowrap; transition: color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.nav-links a:hover { color: var(--color-ink); }
.nav-links a[aria-current] { color: var(--color-ink); background: var(--color-paper-3); }
.nav-cta { min-height: 44px; font-size: var(--text-sm); }
.menu-btn { display: none; width: 44px; height: 44px; border: 1px solid var(--color-rule-strong); border-radius: var(--radius-control); background: transparent; cursor: pointer; position: relative; }
.menu-btn span { position: absolute; left: 13px; right: 13px; height: 2px; background: var(--color-ink); border-radius: 2px; transition: transform var(--dur-short) var(--ease-out); }
.menu-btn span:first-child { transform: translateY(-4px); }
.menu-btn span:last-child { transform: translateY(4px); }
.menu-open .menu-btn span:first-child { transform: rotate(45deg); }
.menu-open .menu-btn span:last-child { transform: rotate(-45deg); }
.panel { position: fixed; inset: var(--nav-h) 0 0; z-index: var(--z-sticky); background: var(--color-scrim); visibility: hidden; opacity: 0; transition: opacity var(--dur-short) var(--ease-out), visibility 0s linear var(--dur-short); }
.panel .container { display: grid; gap: var(--space-2xs); padding-block: var(--space-xl); }
.panel a:not(.btn) { font-size: var(--text-xl); font-weight: 500; text-decoration: none; padding: var(--space-xs) 0; }
.panel .btn { margin-top: var(--space-lg); justify-self: start; }
.menu-open .panel { visibility: visible; opacity: 1; transition: opacity var(--dur-short) var(--ease-out); }

/* Shared section rhythm */
main > section { padding-block: var(--section-gap) 0; }
main > section:last-child { padding-bottom: var(--section-gap); }
.head-block { display: grid; gap: var(--space-md); max-width: 52rem; margin-bottom: var(--space-2xl); }
.head-split { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-lg) var(--space-2xl); margin-bottom: var(--space-2xl); }
.head-split > div:first-child { display: grid; gap: var(--space-md); max-width: 52rem; }
.head-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

/* Hero: Stage, text on seven columns, the portrait on five */
main > section.hero { padding-block: 0; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-3xl); align-items: center; min-height: calc(100svh - var(--nav-h)); padding-block: var(--space-2xl); }
.hero h1 { font-size: clamp(3.25rem, 8vw + 0.25rem, 8rem); line-height: 0.95; letter-spacing: -0.04em; max-width: 9ch; }
.hero .lead { margin-top: var(--space-lg); font-size: clamp(1.25rem, 0.8vw + 1rem, 1.75rem); line-height: 1.3; color: var(--color-ink-2); max-width: 30ch; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); margin-top: var(--space-xl); }
.hero-actions .btn-text { margin-left: var(--space-md); }
.portrait { justify-self: end; align-self: center; width: 100%; max-width: 340px; }
.portrait picture { display: block; overflow: hidden; border-radius: var(--radius-card); background: var(--color-paper-2); box-shadow: 0 0 0 1px var(--color-rule); }
.portrait img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 12%; transform: scale(1.18); transform-origin: 50% 22%; filter: grayscale(1) contrast(1.08) brightness(0.95); }
.portrait figcaption { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); max-width: 32ch; }
.settle { animation: settle 640ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 80ms); }
@keyframes settle { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .settle { animation: none; } }

/* The record: the promise as a statement, the figures as a ledger */
main > section.record { padding-top: var(--section-gap-s); }
.statement { font-size: var(--text-section); line-height: 1.1; max-width: 26ch; font-weight: 500; letter-spacing: -0.03em; }
.ledger { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: var(--space-3xl); border-top: var(--rule-hair) solid var(--color-rule); }
.ledger > div { padding: var(--space-xl) var(--space-lg) var(--space-xl) 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
.ledger > div:not(:nth-child(4n + 1)) { padding-left: var(--space-lg); border-left: var(--rule-hair) solid var(--color-rule); }
.ledger dt { font-size: var(--text-display-s); font-weight: 500; letter-spacing: -0.035em; line-height: 1; color: var(--color-ink); white-space: nowrap; }
.ledger dd { margin-top: var(--space-sm); max-width: 26ch; color: var(--color-muted); }
.ledger > div:first-child dt { color: var(--color-accent); }

/* About: the story beside the four pillars */
.about-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--space-2xl) var(--space-3xl); align-items: start; }
.story h2 { margin-bottom: var(--space-lg); }
.story .lead { margin-bottom: var(--space-xl); max-width: 46ch; }
.story p + p { margin-top: var(--space-md); }
.pillars { display: grid; gap: 0; padding-top: var(--space-xs); }
.pillars > div { padding-block: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); }
.pillars h3 { font-size: var(--text-title); font-weight: 600; letter-spacing: -0.02em; color: var(--color-ink); }
.pillars p { margin-top: var(--space-xs); }

/* Journey: one row per role */
.roles { list-style: none; border-top: var(--rule-hair) solid var(--color-rule); }
.role { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--space-lg) var(--gap-columns); padding-block: var(--space-xl); border-bottom: var(--rule-hair) solid var(--color-rule); }
.role-meta { display: grid; align-content: start; gap: var(--space-2xs); font-size: var(--text-sm); color: var(--color-muted); }
.role-meta time { color: var(--color-ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.role-body h3 { margin-bottom: var(--space-md); }
.role-body ul { display: grid; gap: var(--space-sm); padding-left: 1.1em; max-width: 72ch; }
.role-body li::marker { color: var(--color-accent); }
.stack-line { margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-muted); }

/* Case studies: a bento, the procurement case leading */
.bento { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap-columns); }
.tile { display: flex; flex-direction: column; gap: var(--space-md); padding: var(--space-xl); background: var(--color-paper-2); border-radius: var(--radius-card); text-decoration: none; transition: background-color var(--dur-short) var(--ease-out); }
.tile:hover { background: var(--color-paper-3); }
.tile-lead { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); grid-template-areas: "title figs" "text figs" "go figs"; align-content: center; column-gap: var(--space-3xl); row-gap: var(--space-md); padding: var(--space-2xl); }
.tile-lead h3 { grid-area: title; align-self: end; }
.tile-lead > p { grid-area: text; }
.tile-lead .go { grid-area: go; align-self: start; }
.tile-lead .tile-figures { grid-area: figs; align-self: center; }
.tile-figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl) var(--space-lg); padding-left: var(--space-2xl); border-left: var(--rule-hair) solid var(--color-rule); }
.tile-figures dt { font-variant-numeric: tabular-nums; font-size: var(--text-3xl); font-weight: 500; letter-spacing: -0.03em; line-height: 1; color: var(--color-ink); }
.tile-figures dd { margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-muted); }
.tile-lead h3 { font-size: var(--text-2xl); max-width: 22ch; }
.tile-figure { color: var(--color-muted); font-size: var(--text-sm); margin-bottom: var(--space-md); }
.tile-figure .num { display: block; font-variant-numeric: tabular-nums; font-size: var(--text-3xl); font-weight: 500; letter-spacing: -0.03em; line-height: 1; color: var(--color-ink); margin-bottom: var(--space-xs); }
.go { margin-top: var(--space-xs); font-size: var(--text-sm); font-weight: 500; color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: 0.3em; }

/* Rows: services and FAQ, the head held beside the list */
.rows-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-xl) var(--space-3xl); align-items: start; }
.rows-head { position: sticky; top: calc(var(--nav-h) + var(--space-xl)); display: grid; gap: var(--space-md); }
.acc { border-top: var(--rule-hair) solid var(--color-rule); }
.acc details { border-bottom: var(--rule-hair) solid var(--color-rule); }
.acc summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) 24px; gap: var(--space-2xs) var(--space-lg); padding-block: var(--space-lg); }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: ""; grid-column: 2; grid-row: 1; align-self: center; width: 14px; height: 14px; justify-self: center; background: linear-gradient(var(--color-muted), var(--color-muted)) center / 14px 2px no-repeat, linear-gradient(var(--color-muted), var(--color-muted)) center / 2px 14px no-repeat; transition: transform var(--dur-short) var(--ease-out); }
.acc details[open] > summary::after { transform: rotate(45deg); }
.acc summary:hover .sum-title { color: var(--color-accent-hover); }
.sum-title { margin: 0; max-width: none; font-family: var(--font-body); font-size: var(--text-title); font-weight: 500; letter-spacing: -0.015em; line-height: 1.25; color: var(--color-ink); transition: color var(--dur-short) var(--ease-out); }
.sum-line { grid-column: 1; color: var(--color-muted); }
.acc-body { padding-bottom: var(--space-xl); display: grid; gap: var(--space-md); max-width: 68ch; }
.acc-body ul { display: grid; gap: var(--space-xs); padding-left: 1.1em; }
.acc-body li::marker { color: var(--color-accent); }

/* Open source */
.repo { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-2xl) var(--space-3xl); align-items: start; padding-block: var(--space-2xl); border-top: var(--rule-hair) solid var(--color-rule); }
.repo-text { display: grid; gap: var(--space-lg); }
.repo-text h3, .platform-text h3, .framework-text h3 { font-size: var(--text-2xl); max-width: 24ch; }
.repo-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); padding-block: var(--space-md); border-block: var(--rule-hair) solid var(--color-rule); }
.repo-facts dt { font-size: var(--text-lg); font-weight: 600; color: var(--color-ink); }
.repo-facts dd { margin-top: var(--space-2xs); font-size: var(--text-sm); color: var(--color-muted); }
.repo-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.repo-hint { font-size: var(--text-sm); color: var(--color-muted); }
.code { margin: 0; padding: var(--space-lg); background: var(--color-paper-2); border-radius: var(--radius-card); overflow-x: auto; font-family: var(--font-code); font-size: var(--text-sm); line-height: 1.7; color: var(--color-ink-2); }
.repo-text .code { margin-top: calc(var(--space-sm) * -1); white-space: pre-wrap; overflow-wrap: anywhere; }
.repo-tree .code { padding: var(--space-xl); color: var(--color-ink); }
.repo-tree figcaption { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }
.platform { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl) var(--space-3xl); align-items: center; padding-block: var(--space-2xl); border-top: var(--rule-hair) solid var(--color-rule); }
.shot { aspect-ratio: 16 / 10; border-radius: var(--radius-card); box-shadow: 0 0 0 1px var(--color-rule); }
.platform-text { display: grid; gap: var(--space-lg); justify-items: start; }
.framework { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-2xl) var(--space-3xl); align-items: start; padding-block: var(--space-2xl) 0; border-top: var(--rule-hair) solid var(--color-rule); }
.framework-text { display: grid; gap: var(--space-md); }
.gates { list-style: none; counter-reset: gate; border-top: var(--rule-hair) solid var(--color-rule); }
.gates li { counter-increment: gate; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 0 var(--space-md); padding-block: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
.gates li::before { content: counter(gate); grid-row: span 2; font-size: var(--text-xl); font-weight: 500; color: var(--color-accent); font-variant-numeric: tabular-nums; line-height: 1.2; }
.gates b { font-weight: 600; color: var(--color-ink); }
.gates span { color: var(--color-muted); font-size: var(--text-sm); }

/* Forms */
.field { display: grid; gap: var(--space-xs); min-width: 0; }
.field label { font-size: var(--text-sm); font-weight: 500; color: var(--color-ink-2); }
input, select, textarea { width: 100%; min-height: 48px; padding: var(--space-sm) var(--space-md); background: var(--color-paper); color: var(--color-ink); border: 1px solid var(--color-muted); border-radius: var(--radius-card); font-size: var(--text-md); transition: border-color var(--dur-short) var(--ease-out); }
input::placeholder, textarea::placeholder { color: var(--color-muted); }
input:hover, select:hover, textarea:hover { border-color: var(--color-ink-2); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 0; }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--color-error); }
input:disabled, select:disabled, textarea:disabled { opacity: 0.55; cursor: not-allowed; }
textarea { min-height: 140px; resize: vertical; }
.err { min-height: 1lh; font-size: var(--text-sm); color: var(--color-error); }
.err:empty { min-height: 0; }
.note { font-size: var(--text-sm); min-height: 1lh; }
.note.ok { color: var(--color-success); }
.note.bad { color: var(--color-error); }
.notify { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-xs) var(--space-sm); align-items: start; margin-top: var(--space-md); max-width: 34rem; }
.notify .captcha, .notify .note { grid-column: 1 / -1; }
.captcha { display: grid; gap: var(--space-2xs); }
.captcha .hc:empty { display: none; }

/* Writing */
.posts { list-style: none; display: grid; border-top: var(--rule-hair) solid var(--color-rule); }
.post { border-bottom: var(--rule-hair) solid var(--color-rule); }
.post-link { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); padding-block: var(--space-xl); text-decoration: none; }
.post.has-cover .post-link { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: center; gap: var(--space-xl) var(--space-2xl); }
.post-lead.has-cover .post-link { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.post-cover img { width: 100%; aspect-ratio: 1200 / 630; object-fit: cover; border-radius: var(--radius-card); background: var(--color-paper-2); }
.post-text { display: grid; gap: var(--space-sm); max-width: 68ch; }
.post-text h3 { transition: color var(--dur-short) var(--ease-out); }
.post-lead .post-text h3 { font-size: var(--text-2xl); max-width: 26ch; }
.post-link:hover h3 { color: var(--color-accent-hover); }
.post-text small { font-size: var(--text-sm); color: var(--color-muted); }
.posts-fallback { padding-block: var(--space-xl); border-block: var(--rule-hair) solid var(--color-rule); font-size: var(--text-lead); }

/* Speaking and music */
.split-even { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3xl); align-items: start; }
.talks { list-style: none; margin-block: var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule); }
.talks li { display: grid; gap: var(--space-xs); padding-block: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); }
.talk-where { font-size: var(--text-sm); color: var(--color-muted); }
.beyond { padding: var(--space-2xl); background: var(--color-paper-2); border-radius: var(--radius-card); display: grid; gap: var(--space-md); }
.beyond h2 { margin-bottom: var(--space-sm); }

/* Contact */
.contact-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl) var(--space-3xl); align-items: start; }
.contact-text { display: grid; gap: var(--space-lg); }
.contact-facts { display: grid; gap: var(--space-md); margin-top: var(--space-md); padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); }
.contact-facts dt { font-size: var(--text-sm); color: var(--color-muted); }
.contact-facts dd { color: var(--color-ink); }
.cform { display: grid; gap: var(--space-md); padding: var(--space-xl); background: var(--color-paper-2); border-radius: var(--radius-card); }
.cform input, .cform select, .cform textarea { background: var(--color-paper); }
.row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-md); }
.cform .btn { justify-self: start; }

/* Booking: a Cal.com calendar, loaded when it nears the screen */
.book { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-xl) var(--space-3xl); margin-top: var(--space-3xl); padding-top: var(--space-2xl); border-top: var(--rule-hair) solid var(--color-rule); }
.book-head { display: grid; gap: var(--space-md); align-content: start; justify-items: start; }
.book-head h3 { font-size: var(--text-2xl); }
.book-cal { min-height: 640px; border-radius: var(--radius-card); background: var(--color-paper-2); overflow: hidden; }
.book-cal:empty { min-height: 0; background: none; }
.btn-sm { min-height: 44px; padding: 0 var(--space-md); font-size: var(--text-sm); }

/* Footer: a mast */
.site-foot { padding-block: var(--section-gap-s) var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule); }
.foot-mark { font-size: clamp(3rem, 8vw, 7.5rem); font-weight: 600; letter-spacing: -0.045em; line-height: 0.95; color: var(--color-ink); overflow-wrap: break-word; min-width: 0; }
.foot-links { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-xl); margin-top: var(--space-2xl); }
.foot-links a { color: var(--color-ink-2); text-decoration: none; transition: color var(--dur-short) var(--ease-out); white-space: nowrap; }
.foot-links a:hover { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); }
.foot-legal { margin-top: var(--space-lg); font-size: var(--text-sm); color: var(--color-muted); }

/* Back to top: hidden only once the script runs */
.to-top { position: fixed; right: var(--space-lg); bottom: var(--space-lg); z-index: var(--z-raised); width: 48px; height: 48px; display: grid; place-items: center; border-radius: var(--radius-control); border: 1px solid var(--color-rule-strong); background: var(--color-paper-2); color: var(--color-ink); cursor: pointer; transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.to-top svg { width: 18px; height: 18px; }
.to-top:hover { background: var(--color-paper-3); }
.js .to-top:not(.show) { opacity: 0; transform: translateY(8px); pointer-events: none; }

/* Blog page */
.page-head { padding-block: var(--section-gap-s) var(--space-2xl); display: grid; gap: var(--space-lg); }
.page-head h1 { max-width: 16ch; }
.page-head .lead { color: var(--color-ink-2); }
.crumbs { font-size: var(--text-sm); color: var(--color-muted); }
.crumbs a { color: var(--color-muted); }

/* Under 75rem the nav folds into the menu */
@media (max-width: 75rem) {
  .nav-links, .nav-cta { display: none; }
  .menu-btn { display: block; }
}
@media (max-width: 60rem) {
  :root { --nav-h: 64px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); min-height: 0; padding-block: var(--space-xl) var(--space-2xl); }
  .hero-grid { gap: var(--space-lg); }
  .portrait { justify-self: start; width: 112px; order: -1; }
  .portrait img { aspect-ratio: 1; max-height: none; object-position: 50% 18%; transform: scale(1.12); transform-origin: 45% 25%; }
  .portrait figcaption { display: none; }
  .hero-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-sm); }
  .hero-actions .btn { width: 100%; padding: 0 var(--space-xs); font-size: var(--text-sm); }
  .hero-actions .btn-text { grid-column: 1 / -1; justify-self: start; margin-left: 0; }
  .ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ledger > div:not(:nth-child(4n + 1)) { padding-left: 0; border-left: 0; }
  .ledger > div:nth-child(2n) { padding-left: var(--space-lg); border-left: var(--rule-hair) solid var(--color-rule); }
  .book { grid-template-columns: minmax(0, 1fr); }
  .about-grid, .rows-grid, .repo, .platform, .framework, .split-even, .contact-grid, .bento { grid-template-columns: minmax(0, 1fr); }
  .rows-head { position: static; }
  .tile-lead { grid-column: auto; grid-template-columns: minmax(0, 1fr); grid-template-areas: "figs" "title" "text" "go"; padding: var(--space-xl); }
  .tile-lead .tile-figures { padding-left: 0; border-left: 0; padding-bottom: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); }
  .role { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
  .post.has-cover .post-link, .post-lead.has-cover .post-link { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 40rem) {
  .ledger > div { padding-block: var(--space-lg); }
  .ledger > div:nth-child(2n) { padding-left: var(--space-md); }
  .ledger dt { font-size: var(--text-2xl); }
  .ledger dd { font-size: var(--text-sm); }
  .repo-facts, .row2, .notify { grid-template-columns: minmax(0, 1fr); }
  .tile, .cform, .beyond { padding: var(--space-lg); }
  .repo-tree .code { padding: var(--space-lg); }
  .to-top { right: var(--space-md); bottom: var(--space-md); }
}
main > section.blog-list { padding-top: 0; padding-bottom: var(--section-gap); }
.blog-more { margin-top: var(--space-2xl); }