/* Hallmark · shape: Index-First (draw 13c913 swapped: Letter refused, the job needs actions in the hero) · genre: editorial · theme: Editorial (by request, palette re-keyed to the portrait: near-white, ink, tangerine) · job: hire · draw: 13c913
 * sections: hero (portrait) · What I do (three across, closed by rules) · Selected work (rows) · AI in practice (ink band, PropAI lead with two items beside) · Credentials (three ruled columns) · My story (framed by heavy rules, his own line as the headline, serif prose beside it) · Beyond work (side head, rows) · Let's talk (ink band, the address large) · footer (colophon)
 * type roles: hero head, section head, one item-title size, one description size; the story head and the address are the two display moments
 * hero: Stage (portrait on 7 to 12, standing on the hero rule) · nav: edge bar, solid ink, a large wordmark with a short tangerine marker left, three links, a tangerine-outlined Contact and the language switch right, a menu button on phones (the switch moves into the menu) · footer: a colophon line under a hairline · imagery: the user's portrait · signature: the portrait as the cover, standing on the rule that closes the first screen
 * axes: light/display-condensed/chromatic-orange · posture: restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S3 R4 V4 · weakest: S, the headline could sit on another consultant's page; the portrait carries the specificity and the sections below carry the facts */
/* Hallmark · hero-review: fix · 5 findings · 4 resolved 1 partial (1920: about 170px of paper above the cover, the cover height is capped so the face stays legible; text and cover centre together); masthead later removed at the client's request */
/* Hallmark · finish-review: subagent · 8 findings · 3 resolved (DE placeholder hidden, phone address enlarged, What I do set across one row) · 5 kept on the record: the tangerine section marker is the client's chosen signature (approved in 8C); no picture below the hero, no photo available and no stock by rule; repeated "Munich" and "built with Claude" kept by the client; section heads kept plain for recruiter scanning · gap: material below the hero */
/* Hallmark · waive 59 · sections that start under a rule or a band edge sit 96px below it (64px on phones); the rule or edge parts the sections · set at the client's request */
/* Hallmark · waive 44a · the portrait stands on the hero rule so nothing sits below it · approved in preview 8C: the photo anchors the first screen and parts it from What I do */
@font-face { font-family: "Bricolage Grotesque"; src: url("./fonts/bricolage-grotesque.woff2") format("woff2-variations"); font-weight: 200 800; font-stretch: 75% 100%; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("./fonts/source-serif-4.woff2") format("woff2-variations"); font-weight: 200 900; font-style: normal; font-display: swap; }
:root {
  color-scheme: light;
  --space-3xs: 2px; --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px; --space-4xl: 144px;
  --text-xs: 0.8125rem; --text-sm: 0.875rem; --text-md: 1rem; --text-lg: 1.25rem; --text-xl: 1.5625rem; --text-2xl: 1.953rem; --text-3xl: 2.441rem;
  --text-display-s: clamp(2.25rem, 4vw + 0.5rem, 3.75rem); --text-display: clamp(2.75rem, 5vw + 1rem, 5.25rem);
  --text-hero: clamp(3rem, 7.8vw + 0.25rem, 7.5rem); --text-hero-phone: 3.5rem;
  --text-wordmark: clamp(1.875rem, 1.2vw + 1.25rem, 2.5rem); --text-role: clamp(1.125rem, 0.4vw + 1rem, 1.375rem);
  --text-section: clamp(2.5rem, 3vw + 1.25rem, 4rem); --text-item: clamp(1.375rem, 0.7vw + 1rem, 1.625rem); --text-desc: 1.125rem; --text-title: clamp(1.25rem, 0.75vw + 0.875rem, 1.625rem); --text-lead: clamp(1.125rem, 0.35vw + 1rem, 1.375rem);
  --text-standfirst: clamp(1.25rem, 0.6vw + 1rem, 1.5rem); --text-org: 1.125rem; --text-story: clamp(1.375rem, 1.1vw + 1rem, 2rem); --text-lead-title: clamp(2rem, 1.5vw + 1.25rem, 2.5rem);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms; --dur-short: 220ms; --dur-long: 420ms;
  --color-error: oklch(52% 0.19 27); --color-success: oklch(50% 0.12 150);
  --container: 1440px; --gutter: 64px; --gap-columns: 32px; --section-gap-s: 120px; --section-gap: 144px; --section-gap-l: 176px;
  --z-base: 1; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-sticky-nav: 300; --z-modal: 400; --z-toast: 500; --z-tooltip: 600;
  --nav-h: 84px; --marker-short: 48px; --marker-mini: 32px;

  /* Locked palette (option 8C): near-white paper, ink black, one vivid tangerine taken from the portrait */
  --color-paper: oklch(99.4% 0.002 250); --color-paper-2: oklch(96.5% 0.004 250); --color-paper-3: oklch(93% 0.006 250);
  --color-ink: oklch(16% 0.012 280); --color-ink-2: oklch(29% 0.011 280); --color-muted: oklch(46% 0.010 260);
  --color-rule: oklch(88% 0.006 250); --color-rule-2: oklch(64% 0.010 250);
  --color-band: oklch(16% 0.012 280); --color-on-band: oklch(97% 0.004 85); --color-on-band-muted: oklch(78% 0.006 85);
  --color-accent: #ff7a1a; --color-accent-ink: oklch(16% 0.012 280);
  --color-focus: oklch(16% 0.012 280); --color-focus-on-band: #ff7a1a;

  --font-display: "Bricolage Grotesque", ui-sans-serif, sans-serif; --font-body: "Source Serif 4", ui-serif, Georgia, serif;
  --radius-card: 0; --radius-pill: 0; --rule-hair: 1px; --rule-heavy: 4px; --shadow-card: none;
  --tracking-display: -0.012em; --display-weight: 800;
}
@media (max-width: 60rem) { :root { --nav-h: 72px; } }
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scrollbar-color: var(--color-muted) var(--color-paper); scroll-padding-top: var(--space-3xl); }
body { margin: 0; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-md); line-height: 1.55; -webkit-font-smoothing: antialiased; caret-color: var(--color-accent); }
::selection { background: color-mix(in oklab, var(--color-accent) 22%, transparent); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: var(--display-weight, 700); font-synthesis: none; letter-spacing: var(--tracking-display); line-height: 1.05; overflow-wrap: break-word; min-width: 0; text-wrap: balance; }
h1 { max-width: 20ch; font-size: var(--text-display); } h2 { max-width: 30ch; font-size: var(--text-section); } h3 { max-width: 40ch; font-size: var(--text-title); line-height: 1.2; }
.lead { font-size: var(--text-lead); line-height: 1.45; max-width: 52ch; }
p { margin: 0; text-wrap: pretty; }
p:not([class]) { max-width: 65ch; }
img, video { max-width: 100%; height: auto; display: block; }
svg { display: block; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; }
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); box-sizing: border-box; }
.num, .figure, td.num { font-variant-numeric: tabular-nums; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[data-slot] { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--color-paper-2, var(--color-paper)), var(--color-paper-3, var(--color-paper))); }
[data-slot] > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
[data-slot]:has(> img) > :not(img):not([data-keep]) { display: none !important; }
@media (max-width: 60rem) { :root { --gutter: 24px; --section-gap-s: 80px; --section-gap: 96px; --section-gap-l: 120px; } }
@media (max-width: 40rem) { :root { --gutter: 16px; --section-gap-s: 56px; --section-gap: 72px; --section-gap-l: 96px; --gap-columns: 16px; } }
@media (prefers-reduced-motion: reduce) { *:not(.keep-motion), *:not(.keep-motion)::before, *:not(.keep-motion)::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }
/* photographs: natural sat=-10 con=4 */
[data-slot] > img { filter: saturate(0.9) contrast(1.04); }

/* ==========================================================================
   How this file is organised
   1. Page basics          5. Section frame (shared by every section)
   2. Buttons              6. One block per section, top to bottom
   3. Top bar and menu     7. Footer
   4. Hero
   Each block keeps its own phone and tablet rules right below it.
   Breakpoints: tablet and below = max-width 60rem; phone = max-width 40rem. The top bar switches to the
   menu button at max-width 68rem (1088px), so five section links plus Contact sit centred with room in German.
   ========================================================================== */

/* 1. Page basics ---------------------------------------------------------- */
body { background: var(--color-paper); color: var(--color-ink); }
::selection { background: color-mix(in oklab, var(--color-accent) 35%, transparent); }
html { scrollbar-color: var(--color-muted) var(--color-paper); scroll-padding-top: calc(var(--nav-h) + var(--space-lg)); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
h1, h2, h3, .wordmark { font-variation-settings: "wdth" 75, "opsz" 96; }

.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); background: var(--color-accent); color: var(--color-accent-ink); font-family: var(--font-display); font-weight: 500; }
.skip:focus-visible { top: var(--space-md); outline: 2px solid var(--color-ink); outline-offset: 2px; }

/* 2. Buttons: one filled recipe (tangerine), one outlined, one for ink bands */
.btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--space-lg); border: 1px solid var(--color-ink); border-radius: 0; background: var(--color-accent); color: var(--color-accent-ink); font-family: var(--font-display); font-weight: 500; font-variation-settings: "opsz" 12; font-size: var(--text-md); line-height: 1; white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:hover { background: var(--color-ink); color: var(--color-paper); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.btn--outline { background: transparent; color: var(--color-ink); }
.btn--outline:hover { background: var(--color-ink); color: var(--color-paper); }
.btn--on-band { background: transparent; color: var(--color-on-band); border-color: var(--color-on-band); }
.btn--on-band:hover { background: var(--color-on-band); color: var(--color-ink); }
@media (prefers-reduced-motion: reduce) { .btn { transition: background-color var(--dur-short) linear, color var(--dur-short) linear; } .btn:active { transform: none; } }

/* 3. Top bar: solid ink, sticky. Wide screens: name left, section links centred on the page, Contact and
   the language switch right. Tablets and phones: a menu button replaces the section links */
.nav { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: var(--color-band); color: var(--color-on-band); }
.nav__inner { min-height: var(--nav-h); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: var(--space-lg); padding-block: var(--space-sm); }
.nav a:focus-visible { outline: 2px solid var(--color-focus-on-band); outline-offset: 3px; }
.wordmark { justify-self: start; display: inline-flex; flex-direction: column; gap: var(--space-2xs); font-family: var(--font-display); font-weight: 800; font-size: var(--text-wordmark); line-height: 1; letter-spacing: var(--tracking-display); color: var(--color-on-band); text-decoration: none; white-space: nowrap; transition: color var(--dur-short) var(--ease-out); }
.wordmark::after { content: ""; width: var(--marker-mini); height: var(--rule-heavy); background: var(--color-accent); }
.wordmark:hover { color: var(--color-accent); }
.nav__links { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--space-xs) var(--space-xl); margin: 0; padding: 0; list-style: none; font-family: var(--font-display); font-weight: 500; font-variation-settings: "opsz" 12; font-size: var(--text-md); }
.nav__links a:not(.btn) { color: var(--color-on-band); text-decoration: none; white-space: nowrap; padding-block: var(--space-xs); text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
.nav__links a:not(.btn):hover { text-decoration: underline; text-decoration-color: var(--color-accent); }
.nav__actions { justify-self: end; column-gap: var(--space-lg); }
.nav .btn { min-height: 48px; background: transparent; color: var(--color-accent); border-color: var(--color-accent); }
.nav .btn:hover { background: var(--color-accent); color: var(--color-accent-ink); }
.lang { display: flex; align-items: center; gap: var(--space-xs); }
.lang__item--current { color: var(--color-on-band); font-weight: 700; }
.nav__links a.lang__item, .menu__links a.lang__item { color: var(--color-on-band-muted); }
.nav__links a.lang__item:hover, .menu__links a.lang__item:hover { color: var(--color-on-band); text-decoration: underline; text-decoration-color: var(--color-accent); }
.lang__sep { color: var(--color-on-band-muted); }
.nav__progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--color-accent); transform: scaleX(0); transform-origin: left center; pointer-events: none; }
.nav__toggle { display: none; }
.menu { display: none; }

@media (max-width: 68rem) {
  .nav__inner { display: flex; align-items: center; column-gap: var(--space-xs); }
  .nav__inner > nav { display: none; }
  .nav__actions { margin-left: auto; }
  .nav__links .nav__page { display: none; }

  /* The menu button exists only when scripting runs; without it, Contact stays reachable */
  .js .nav__toggle { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; background: transparent; border: 0; color: var(--color-on-band); cursor: pointer; }
  .nav__toggle:focus-visible { outline: 2px solid var(--color-focus-on-band); outline-offset: 2px; }
  .nav__bars, .nav__bars::before, .nav__bars::after { display: block; width: 24px; height: 3px; background: currentColor; }
  .nav__bars { position: relative; }
  .nav__bars::before, .nav__bars::after { content: ""; position: absolute; left: 0; transition: transform var(--dur-short) var(--ease-out); }
  .nav__bars::before { transform: translateY(-8px); }
  .nav__bars::after { transform: translateY(8px); }
  .nav__toggle[aria-expanded="true"] .nav__bars { background: transparent; }
  .nav__toggle[aria-expanded="true"] .nav__bars::before { background: var(--color-on-band); transform: rotate(45deg); }
  .nav__toggle[aria-expanded="true"] .nav__bars::after { background: var(--color-on-band); transform: rotate(-45deg); }

  .menu:not([hidden]) { display: block; position: fixed; left: 0; right: 0; bottom: 0; top: calc(var(--nav-h) + env(safe-area-inset-top, 0px)); background: var(--color-band); overflow-y: auto; overscroll-behavior: contain; border-top: 1px solid var(--color-ink-2); }
  .menu__links { margin: 0; padding: var(--space-xl) 0; list-style: none; display: flex; flex-direction: column; }
  .menu__links a { display: block; padding-block: var(--space-md); border-bottom: 1px solid var(--color-ink-2); font-family: var(--font-display); font-weight: 800; font-variation-settings: "wdth" 75, "opsz" 96; font-size: var(--text-section); line-height: 1; letter-spacing: var(--tracking-display); color: var(--color-on-band); text-decoration: none; }
  .menu__links a:hover { color: var(--color-accent); }
  .menu__links a:focus-visible { outline: 2px solid var(--color-focus-on-band); outline-offset: 4px; }
  .menu__links .menu__lang { padding-top: var(--space-lg); font-family: var(--font-display); font-weight: 500; font-variation-settings: "opsz" 16; font-size: var(--text-org); }
  .menu__links .menu__lang .lang__item { display: inline-block; padding: var(--space-xs) 0; border-bottom: 0; font: inherit; letter-spacing: 0; }
  .menu__links .menu__lang .lang__item--current { font-weight: 700; }
}
@media (max-width: 68rem) and (prefers-reduced-motion: reduce) { .nav__bars::before, .nav__bars::after { transition: none; } }

/* Orange full stop closing the three sentence headings (hero, story, contact); the small gap keeps it off the last letter */
.dot { color: var(--color-accent); margin-left: 0.04em; }

/* 4. Hero: text on columns 1 to 6, the portrait on 7 to 12, standing on the rule that closes the first screen */
.hero { --hero-h: calc(100svh - var(--nav-h) - var(--rule-heavy)); border-bottom: var(--rule-heavy) solid var(--color-ink); }
.hero__inner { min-height: var(--hero-h); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: end; align-content: end; padding-top: var(--space-2xl); }
.hero__text { grid-column: 1 / span 6; align-self: stretch; display: flex; flex-direction: column; justify-content: center; gap: var(--space-lg); padding-top: var(--space-xl); }
.hero h1 { max-width: 14ch; font-size: var(--text-hero); line-height: 0.92; color: var(--color-ink); text-wrap: wrap; overflow-wrap: break-word; min-width: 0; }
.hero__lede { max-width: 34ch; font-size: var(--text-standfirst); line-height: 1.35; color: var(--color-ink); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); padding-top: var(--space-xs); }
.hero__who { display: flex; flex-direction: column; gap: var(--space-2xs); padding-top: var(--space-sm); }
.hero__who::before { content: ""; display: block; width: var(--marker-short); max-width: 100%; height: var(--rule-heavy); margin-bottom: var(--space-sm); background: var(--color-accent); }
.hero__role { font-family: var(--font-display); font-weight: 500; font-variation-settings: "opsz" 24; font-size: var(--text-role); line-height: 1.2; color: var(--color-ink); }
.hero__place { font-family: var(--font-display); font-weight: 500; font-variation-settings: "opsz" 12; font-size: var(--text-md); line-height: 1.3; color: var(--color-muted); }
.cover { grid-column: 7 / span 6; justify-self: stretch; position: relative; margin: 0; width: 100%; height: min(calc(var(--hero-h) - var(--space-2xl)), 52rem); overflow: hidden; background: var(--color-ink-2); }
.cover picture { display: contents; }
.cover img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 30%; }

@media (max-width: 60rem) {
  .hero__inner { min-height: 0; grid-template-columns: minmax(0, 1fr); row-gap: var(--space-xl); padding-top: var(--space-xl); }
  .hero__text { grid-column: 1; padding-top: 0; }
  .cover { grid-column: 1; height: auto; aspect-ratio: 4 / 5; max-width: 30rem; }
}
@media (max-width: 40rem) {
  .hero h1 { font-size: var(--text-hero-phone); }
  /* Phones: the face first, in a head-and-shoulders crop, then the headline and the actions */
  .hero__inner { row-gap: var(--space-lg); padding-top: var(--space-lg); padding-bottom: var(--space-xl); }
  .cover { order: -1; max-width: none; aspect-ratio: 4 / 3; }
  .cover img { object-position: 55% 22%; }
}

/* 5. Section frame ------------------------------------------------------------
   Every section below the hero opens with a short tangerine marker over its heading.
   Spacing rule: a section that starts under a rule or a band edge sits 96px below it
   (64px on phones). The two ink bands and the framed story sit after open paper,
   so they take the larger section gap above them. */
.sec { padding-top: var(--space-3xl); }
.sec--first { padding-top: calc(var(--space-xl) * 2); }
.sec .container { display: flex; flex-direction: column; gap: var(--space-2xl); }
.sec__head { display: flex; flex-direction: column; gap: var(--space-md); }
.sec__head::before { content: ""; display: block; width: var(--marker-short); height: var(--rule-heavy); margin-bottom: var(--space-xs); background: var(--color-accent); }
.sec h2 { font-size: var(--text-section); line-height: 1; color: var(--color-ink); overflow-wrap: break-word; min-width: 0; }
.sec h3 { font-size: var(--text-item); line-height: 1.05; color: var(--color-ink); overflow-wrap: break-word; min-width: 0; }

/* Ink bands (AI in practice, Let's talk) */
.sec--band { margin-top: var(--section-gap); padding-block: calc(var(--space-2xl) + var(--space-xs)) var(--space-3xl); background: var(--color-band); color: var(--color-on-band); }
.sec--band h2, .sec--band h3 { color: var(--color-on-band); }
.sec--band .btn:focus-visible { outline: 2px solid var(--color-focus-on-band); outline-offset: 4px; }
.sec--band .btn:not(.btn--on-band) { border-color: var(--color-accent); }
.sec--band .btn:not(.btn--on-band):hover { background: var(--color-on-band); color: var(--color-ink); border-color: var(--color-on-band); }

/* Two-column layout: heading on columns 1 to 4, content on 5 to 12 (story, Beyond work) */
.sec .side { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-xl); align-items: start; }
.side > .sec__head { grid-column: 1 / span 4; }
.side > :not(.sec__head) { grid-column: 5 / span 8; }

/* Shared list resets */
.caps, .rows, .offclock__list { margin: 0; padding: 0; list-style: none; }

/* Shared employer line: the organisation over the years */
.row__org, .cred dt, .offclock__list li { font-family: var(--font-display); font-weight: 500; font-variation-settings: "opsz" 16; font-size: var(--text-org); line-height: 1.3; color: var(--color-ink); }
.row__when { font-family: var(--font-display); font-weight: 500; font-variation-settings: "opsz" 12; font-size: var(--text-sm); line-height: 1.3; color: var(--color-muted); }

@media (max-width: 60rem) {
  .sec .container { gap: var(--space-xl); }
  .sec--band { margin-top: var(--space-2xl); padding-block: var(--space-2xl) var(--space-3xl); }
  .sec .side { grid-template-columns: minmax(0, 1fr); }
  .side > .sec__head, .side > :not(.sec__head) { grid-column: 1; }
}
@media (max-width: 40rem) {
  .sec { padding-top: var(--space-2xl); }
  .sec--band { padding-top: var(--space-3xl); }
}

/* 6a. What I do: three across under heavy ink rules, each closed by a rule */
.caps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-xl); }
.cap { display: flex; flex-direction: column; gap: var(--space-sm); padding-block: var(--space-lg); border-block: 2px solid var(--color-ink); }
.cap p { font-size: var(--text-desc); line-height: 1.45; color: var(--color-ink-2); max-width: 38ch; }
@media (max-width: 40rem) {
  .sec--first { padding-top: var(--space-2xl); }
  .caps { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-lg); }
  .cap { padding-bottom: 0; border-bottom: 0; }
  .cap:last-child { padding-bottom: var(--space-lg); border-bottom: 2px solid var(--color-ink); }
}

/* 6b. Selected work: hairline rows, the title, its line, the employer over the years */
.row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-xs); align-items: baseline; padding-block: var(--space-2xl); border-top: 1px solid var(--color-rule); }
.row:last-child { border-bottom: 1px solid var(--color-rule); }
.row h3 { grid-column: 1 / span 5; }
.row p { grid-column: 6 / span 4; font-size: var(--text-desc); line-height: 1.45; color: var(--color-ink-2); max-width: 40ch; }
.row .row__meta { grid-column: 10 / span 3; justify-self: end; display: flex; flex-direction: column; gap: var(--space-2xs); text-align: right; }
@media (max-width: 60rem) {
  .row { grid-template-columns: minmax(0, 1fr); padding-block: var(--space-lg); }
  .row h3, .row p, .row .row__meta { grid-column: 1; }
  .row .row__meta { justify-self: start; text-align: left; }
}

/* 6c. AI in practice: PropAI as the lead, two smaller items beside it */
.ai { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-2xl); align-items: start; }
.ai__lead { grid-column: 1 / span 6; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-lg); }
.ai__lead h3 { font-size: var(--text-lead-title); line-height: 1; }
.ai__lead .tag { margin-top: calc(var(--space-xs) - var(--space-lg)); } /* the tag sits tight under the title */
.tag { display: inline-flex; align-items: center; min-height: 32px; padding: 0 var(--space-sm); background: var(--color-accent); color: var(--color-accent-ink); border: 1px solid var(--color-accent); font-family: var(--font-display); font-weight: 500; font-variation-settings: "opsz" 12; font-size: var(--text-sm); line-height: 1.2; }
.ai__text { font-size: var(--text-standfirst); line-height: 1.35; color: var(--color-on-band); max-width: 46ch; }
.ai__note { font-size: var(--text-md); line-height: 1.55; color: var(--color-on-band-muted); max-width: 52ch; }
.ai__side { grid-column: 8 / span 5; display: flex; flex-direction: column; }
.ai__item { display: flex; flex-direction: column; gap: var(--space-sm); padding-block: var(--space-lg) var(--space-xl); border-top: 2px solid var(--color-on-band); }
.ai__item p { font-size: var(--text-desc); line-height: 1.55; color: var(--color-on-band-muted); max-width: 40ch; }
@media (max-width: 60rem) {
  .ai { grid-template-columns: minmax(0, 1fr); }
  .ai__lead, .ai__side { grid-column: 1; }
}
@media (max-width: 40rem) {
  .ai__lead h3 { font-size: 2rem; }
}

/* 6d. Credentials: three ruled columns, each a short definition list */
.creds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap-columns); }
.cred { display: flex; flex-direction: column; gap: var(--space-lg); padding-top: var(--space-lg); border-top: 2px solid var(--color-ink); }
.cred dl { display: flex; flex-direction: column; gap: var(--space-md); margin: 0; }
.cred dd { margin: var(--space-2xs) 0 0; font-size: var(--text-md); line-height: 1.45; color: var(--color-muted); }
@media (max-width: 60rem) {
  .creds { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-xl); }
}

/* 6e. Still curious (My story): framed by heavy rules, his own line as the headline, the prose beside it */
.sec--framed { margin-top: var(--section-gap); padding-block: var(--space-3xl) var(--section-gap-s); border-block: var(--rule-heavy) solid var(--color-ink); }
.sec .story__title { font-size: var(--text-display); line-height: 0.92; max-width: 8ch; }
.story { display: flex; flex-direction: column; gap: var(--space-3xl); }
.story p { font-size: var(--text-story); line-height: 1.4; color: var(--color-ink); max-width: 36ch; }
@media (max-width: 40rem) {
  .sec--framed { margin-top: var(--space-3xl); padding-block: var(--space-2xl) var(--space-3xl); }
  .sec .story__title { font-size: var(--text-hero-phone); }
  .story { gap: var(--space-xl); }
  .story p { font-size: var(--text-lg); }
}

/* 6f. Beyond work: side heading with the hobbies under it, rows on the right */
.offclock { display: flex; flex-direction: column; gap: var(--space-xs); padding-top: var(--space-sm); }
.offclock__label { font-family: var(--font-display); font-weight: 500; font-variation-settings: "opsz" 12; font-size: var(--text-md); color: var(--color-muted); }
.offclock__list { display: flex; flex-direction: column; gap: var(--space-2xs); }
.offclock__list li { line-height: 1.35; }
.rows--side .row { grid-template-columns: repeat(8, minmax(0, 1fr)); grid-template-rows: auto 1fr; }
.rows--side .row:first-child { padding-top: 0; border-top: 0; }
.rows--side .row h3 { grid-column: 1 / span 3; grid-row: 1; }
.rows--side .row p { grid-column: 4 / span 5; grid-row: 1 / span 2; line-height: 1.5; }
.rows--side .row .row__meta { grid-column: 1 / span 3; grid-row: 2; justify-self: start; text-align: left; }
@media (max-width: 60rem) {
  .rows--side .row { grid-template-columns: minmax(0, 1fr); }
  .rows--side .row:first-child { padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); }
  .rows--side .row h3, .rows--side .row p, .rows--side .row .row__meta { grid-column: 1; grid-row: auto; }
}

/* 6g. Let's talk: the second ink band, the address set large, the actions beside it */
.contact { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-lg); align-items: end; }
.contact__email { grid-column: 1 / span 8; justify-self: start; min-width: 0; font-family: var(--font-display); font-weight: 600; font-variation-settings: "wdth" 80, "opsz" 96; font-size: var(--text-display); line-height: 1; letter-spacing: var(--tracking-display); white-space: nowrap; color: var(--color-on-band); text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--color-accent); text-underline-offset: 0.18em; transition: color var(--dur-short) var(--ease-out); }
.contact__email:hover { color: var(--color-accent); }
.contact__email:focus-visible { outline: 2px solid var(--color-focus-on-band); outline-offset: 4px; }
.contact__actions { grid-column: 9 / span 4; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-sm); padding-top: var(--space-xs); }
.contact__place { flex-basis: 100%; text-align: right; font-family: var(--font-display); font-weight: 500; font-variation-settings: "opsz" 12; font-size: var(--text-md); color: var(--color-on-band-muted); }
.contact__status { grid-column: 1 / -1; min-height: 1.5em; font-family: var(--font-display); font-weight: 500; font-variation-settings: "opsz" 12; font-size: var(--text-sm); color: var(--color-on-band-muted); }
@media (max-width: 60rem) {
  .contact { grid-template-columns: minmax(0, 1fr); }
  .contact__email, .contact__actions, .contact__status { grid-column: 1; }
  .contact__actions { justify-content: flex-start; }
  .contact__place { text-align: left; }
}
@media (max-width: 40rem) {
  .contact__email { font-size: clamp(1.5rem, 8.6vw, 2.75rem); }
  .contact__status:empty { display: none; }
}

/* 7. Footer: one colophon line under a hairline */
.footer { padding-block: var(--space-xl); }
.footer__inner { border-top: 1px solid var(--color-rule); padding-top: var(--space-lg); }
.footer__note { font-family: var(--font-display); font-weight: 500; font-variation-settings: "opsz" 12; font-size: var(--text-sm); color: var(--color-muted); }