/* Signal, light: off-white ground, hairline surfaces with corner marks,
   chamfered buttons, a technical mono for short readouts. Colours come from
   Benedikt's own wardrobe: a taupe sweater for the ground, a burgundy henley,
   a muted teal cardigan, amber glasses frames. Burgundy-to-amber is the one gradient: the claim and thin accent
   lines, never a surface or the photo. */

@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo.woff2") format("woff2");
  font-weight: 600 900;
  font-stretch: 100% 125%;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/assets/fonts/atkinson-next.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Martian Mono";
  src: url("/assets/fonts/martian-mono.woff2") format("woff2");
  font-weight: 100 800;
  font-display: swap;
}

:root {
  color-scheme: light;
  --bg: #dcdcdc;
  --panel: #e8e1d9;
  --panel-2: #ddd5cc;
  --ink: #211b1c;
  --soft: #3d3533;
  --muted: #5d5550;
  --line: #c5c2bf;
  --line-strong: #a9a49f;
  --teal: #4a6869;
  --teal-2: #415e60;
  --teal-line: #789192;
  --on-teal: #e6eeee;
  --wine: #5c2230;
  --amber: #b0703f;
  --amber-text: #7f4f2e;
  --peach: #f8e2cc;
  --grad: linear-gradient(120deg, var(--wine), var(--amber));
  --display: "Archivo", "Arial Black", system-ui, sans-serif;
  --text: "Atkinson Hyperlegible Next", system-ui, sans-serif;
  --mono: "Martian Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --gutter: clamp(1rem, 4vw, 3.5rem);
  --tick: var(--ink);
  --cut: 12px;
  --fast: 140ms;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { scroll-padding-top: 5rem; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  background: var(--bg);
  color: var(--ink);
  font: 400 1.1875rem/1.65 var(--text);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--wine); color: var(--bg); }

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
a:hover { color: var(--wine); text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--wine); outline-offset: 3px; }
ul, ol { padding: 0; list-style: none; }

h1, h2, h3, h4 { font-family: var(--display); line-height: 1.1; text-wrap: balance; overflow-wrap: break-word; }
h2 { font-size: clamp(1.9rem, 6.4vw, 4rem); font-weight: 800; font-stretch: 112%; line-height: 1; }
h3, h4 { font-size: 1.4rem; font-weight: 700; }
p { text-wrap: pretty; }

.wrap { max-width: 1240px; margin-inline: auto; padding-inline: var(--gutter); }
.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 10; background: var(--ink); color: var(--bg); padding: 0.6rem 1rem; }
.skip-link:focus { top: 1rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Readouts: short labels in the technical mono */
.hud { font-family: var(--mono); font-size: 0.8rem; font-weight: 500; line-height: 1.5; letter-spacing: 0.04em; text-transform: uppercase; }

/* Corner marks: two ticks on a hairline frame, the one surface treatment */
.frame, .card, .profile, .invite, .doc-cta, .bio {
  border: 1px solid var(--line-strong);
  background:
    linear-gradient(var(--tick), var(--tick)) top left / 14px 2px no-repeat,
    linear-gradient(var(--tick), var(--tick)) top left / 2px 14px no-repeat,
    linear-gradient(var(--tick), var(--tick)) bottom right / 14px 2px no-repeat,
    linear-gradient(var(--tick), var(--tick)) bottom right / 2px 14px no-repeat,
    var(--panel);
}

/* Buttons: chamfered, solid, the gradient arrives on hover */
.btn {
  display: inline-flex; align-items: center; gap: 0.75rem;
  padding: 0.9rem 1.4rem;
  background: var(--wine); color: var(--bg);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
  font-family: var(--mono); font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
  text-decoration: none; line-height: 1.2;
  transition: background-color var(--fast), color var(--fast);
}
.btn::after { content: "→"; font-family: var(--text); font-size: 1.1em; transition: transform var(--fast) ease-out; }
.btn:hover { color: var(--bg); background-image: var(--grad); text-decoration: none; }
.btn:hover::after { transform: translateX(3px); }
.btn--ghost { background: var(--ink); }
.btn--sm { padding: 0.55rem 0.95rem; font-size: 0.75rem; --cut: 8px; }
.btn--sm::after { content: none; }
.link { font-weight: 700; }
/* Links that open a new tab say so to screen readers; the visible cue is the ↗ where a link has an arrow. */
a[target="_blank"]::after { content: "" / " (opens in new tab)"; }
:lang(de) a[target="_blank"]::after { content: "" / " (öffnet in neuem Tab)"; }
.lead { color: var(--muted); max-width: 46ch; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 5; background: rgb(220 220 220 / 0.88); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line-strong); }
.header__inner { display: flex; align-items: center; gap: 1rem 2rem; padding-block: 0.8rem; flex-wrap: wrap; }
.wordmark { font-family: var(--display); font-weight: 800; font-stretch: 118%; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.1; text-decoration: none; margin-right: auto; }
.wordmark:hover { text-decoration: none; }
.nav { display: flex; gap: 0.25rem 1.75rem; flex-wrap: wrap; }
.nav a { color: var(--soft); text-decoration: none; font-family: var(--mono); font-size: 0.8rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; padding-block: 0.45rem; background: var(--grad) left bottom / 0 2px no-repeat; transition: background-size var(--fast) ease-out; }
.nav a:hover, .nav a:focus-visible { color: var(--ink); background-size: 100% 2px; }
.nav a { white-space: nowrap; }
/* The same page in the other language, as on hackers&wizards: one link naming it. */
.lang { color: var(--soft); font-family: var(--mono); font-size: 0.8rem; font-weight: 500; letter-spacing: 0.04em; text-decoration: none; padding: 0.3rem 0.5rem; border: 1px solid var(--line-strong); }
.lang:hover, .lang:focus-visible { color: var(--ink); border-color: var(--ink); text-decoration: none; }
/* The header button needs about 1170px (German) to share the row; below that, Connect in the nav carries it. */
@media (max-width: 1180px) {
  .header__inner > .btn { display: none; }
}
/* Below about 940px the German nav no longer fits beside the name, so it takes its own row. */
@media (max-width: 960px) {
  .header__inner { gap: 0.25rem 1rem; padding-block: 0.75rem 0.5rem; }
  .nav { width: 100%; gap: 0 0.5rem; justify-content: space-between; }
  .nav a { font-size: 0.75rem; }
  .nav { order: 2; }
  .lang { font-size: 0.75rem; padding: 0.2rem 0.45rem; }
}
@media (max-width: 360px) {
  .nav { gap: 0 0.3rem; }
  .nav a { font-size: 0.7rem; letter-spacing: 0; }
}

/* Hero: the name, the claim, the profile frame */
.hero { position: relative; }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--grad); transform-origin: left; }
@media (prefers-reduced-motion: no-preference) {
  .hero::after { animation: signal 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s both; }
}
@keyframes signal { from { transform: scaleX(0); } }
.hero__inner { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: center; padding-block: clamp(3rem, 7vw, 6.5rem); }
.hero__text { container-type: inline-size; }
.hero__name { font-family: var(--display); font-size: min(12.5cqi, 6.25rem); overflow-wrap: normal; text-transform: uppercase; line-height: 0.9; }
/* One name, two cuts: the first name narrow and semibold, the surname expanded black. */
.hero__name span { display: block; }
.hero__name span:first-child { font-weight: 600; font-stretch: 100%; letter-spacing: 0.04em; }
.hero__name span:last-child { font-weight: 900; font-stretch: 125%; letter-spacing: -0.01em; }
.cheat .hero__name { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__claim { font-family: var(--display); font-weight: 700; font-size: clamp(1.6rem, 6cqi, 2.5rem); line-height: 1.1; margin: 1.75rem 0 1.25rem; max-width: 20ch; }
.grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.spark { color: var(--amber); font-size: 1.1em; line-height: 0; vertical-align: -0.04em; }
.hero__lead { color: var(--muted); max-width: 40ch; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 1.75rem; margin-top: 2.25rem; }

.profile { max-width: 30rem; width: 100%; justify-self: end; padding: 10px; }
.profile__photo { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: var(--panel-2); }
.profile__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.profile__stats { display: grid; grid-template-columns: auto 1fr; gap: 0.45rem 1.25rem; padding: 1rem 0.5rem 0.4rem; }
.profile__stats dt { color: var(--wine); }
.profile__stats dd { font-family: var(--mono); font-size: 0.8rem; line-height: 1.5; font-variant-numeric: tabular-nums; }
@media (max-width: 860px) {
  .hero__inner { grid-template-columns: 1fr; }
  .profile { justify-self: start; max-width: 26rem; }
}
/* Tablet: the stacked profile card turns sideways, photo left, readout right. */
@media (min-width: 561px) and (max-width: 860px) {
  .profile { max-width: none; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 1.5rem; align-items: center; }
  .profile__stats { padding: 0.5rem 0.75rem 0.5rem 0; }
}

/* Scroller: a row that drifts on its own, with prev, play and next.
   Without JavaScript it stays a plain sideways-scrolling row. */
.scroller__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.scroller__head > :first-child { margin: 0; }
.scroller__ctrl { display: flex; gap: 0.5rem; }
.scroller__ctrl[hidden] { display: none; }
.ctrl {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  background: transparent; color: var(--ink); border: 1px solid var(--line-strong);
  cursor: pointer; transition: background-color var(--fast), color var(--fast), border-color var(--fast);
}
.ctrl svg { width: 16px; height: 16px; fill: currentColor; }
.ctrl:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.ctrl .i-play, .ctrl[data-state="paused"] .i-pause { display: none; }
.ctrl[data-state="paused"] .i-play { display: block; }
.scroller__track { display: flex; gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.scroller__track::-webkit-scrollbar { display: none; }
.scroller__track > * { flex: 0 0 auto; scroll-snap-align: start; }
.is-drifting .scroller__track { scroll-snap-type: none; }
.scroller__hint { color: var(--muted); font-size: 0.95rem; margin-top: 0.75rem; }
.scroller:has(.scroller__ctrl:not([hidden])) .scroller__hint { display: none; }
/* The row runs to the window edges; its first item still lines up with the text. */

/* Logo band */
.logos { padding-block: 2.5rem 3rem; border-bottom: 1px solid var(--line-strong); background: var(--panel); }
/* A still wall in two groups: where I was employed, and who I built with. */
.logos h2 { margin-bottom: 1.75rem; }
.wall { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 1.75rem 2rem; }
.wall__label { color: var(--muted); padding-top: 0.7rem; border-top: 1px solid var(--line-strong); }
.wall__list { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 2.75rem; padding-top: 0.7rem; border-top: 1px solid var(--line-strong); }
@media (max-width: 600px) {
  .wall { grid-template-columns: 1fr; gap: 0.75rem; }
  .wall__list { border-top: 0; padding-top: 0; margin-bottom: 1.25rem; gap: 1.25rem 2rem; }
}
.logos li { display: flex; align-items: center; height: 40px; }
.logos img { height: 40px; width: auto; filter: grayscale(1) contrast(1.15); opacity: 0.75; transition: filter var(--fast), opacity var(--fast); }
.logos li:hover img { filter: none; opacity: 1; }

/* Sections */
.section { padding-block: clamp(4rem, 9vw, 8rem); }
.section-head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head h2 { max-width: 18ch; margin-bottom: 1.25rem; }
/* On wide screens the lead sits beside the heading instead of leaving the right half empty.
   Below about 1180px the heading column gets too narrow and breaks into five or six lines. */
@media (min-width: 1180px) {
  .section-head:has(.lead) { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 3rem; align-items: end; }
  .section-head:has(.lead) h2 { margin-bottom: 0; }
  .section-head .lead { margin-bottom: 0.35rem; }
}
.subhead { display: flex; align-items: center; gap: 0.75rem; font-family: var(--mono); font-weight: 500; font-size: 0.85rem; line-height: 1.4; text-transform: uppercase; letter-spacing: 0.05em; color: var(--wine); margin: 4rem 0 1.25rem; }
.subhead::before { content: ""; width: 1.75rem; height: 2px; background: var(--grad); flex: none; }
.subhead + .lead { margin: -0.5rem 0 1.25rem; }

/* Columns without frames: a hairline over each item, spacing does the grouping. */
.cols { display: grid; gap: 2.25rem 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .cols--3, .cols--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .cols--3, .cols--4 { grid-template-columns: 1fr; } }
.cols > li { border-top: 1px solid var(--line-strong); padding-top: 1.25rem; }
.cols h3 { margin-bottom: 0.6rem; }
.cols p { color: var(--muted); }
.card { padding: 1.6rem; }
.card h4 { margin-bottom: 0.6rem; }
.card p { color: var(--muted); }
.for { color: var(--amber-text); font-family: var(--mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.03em; text-transform: uppercase; line-height: 1.6; margin-top: 1rem; }

/* The six domains, numbered */
.domains { counter-reset: domain; }
.domains > li { counter-increment: domain; }
.domains > li::before { content: counter(domain, decimal-leading-zero); display: block; font-family: var(--mono); font-size: 0.8rem; font-weight: 500; color: var(--wine); margin-bottom: 0.9rem; }

/* Values: four words set large, the explanation under each */
.values { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem 3rem; }
.values > li { border-top: 2px solid var(--ink); padding-top: 1rem; container-type: inline-size; }
.values h3 { font-size: min(11cqi, 4.5rem); font-weight: 900; font-stretch: 125%; text-transform: uppercase; line-height: 0.95; margin-bottom: 1rem; overflow-wrap: normal; hyphens: auto; }
.values p { color: var(--muted); max-width: 46ch; }
@media (max-width: 760px) { .values { grid-template-columns: 1fr; gap: 2.25rem; } }

/* Slate band: the stage */
.band { --tick: var(--peach); background: var(--teal); color: var(--on-teal); border-bottom: 0; }
.band .subhead, .band .talks .year { color: var(--peach); }
.band .lead, .band .card p, .band .formats span, .band .bio, .band .scroller__hint { color: var(--on-teal); }
.band .card, .band .bio { border-color: var(--teal-line); background-color: var(--teal-2); }
.band .card { background:
    linear-gradient(var(--tick), var(--tick)) top left / 14px 2px no-repeat,
    linear-gradient(var(--tick), var(--tick)) top left / 2px 14px no-repeat,
    linear-gradient(var(--tick), var(--tick)) bottom right / 14px 2px no-repeat,
    linear-gradient(var(--tick), var(--tick)) bottom right / 2px 14px no-repeat,
    var(--teal-2); }
.band .bio { background: var(--teal-2); }
.band .card .for { color: var(--peach); }
.band .formats li, .band .chips li { border-color: var(--teal-line); }
.band .chips li { color: var(--on-teal); }
.band a:hover { color: var(--peach); }
.band .btn { background: var(--bg); color: var(--wine); }
.band .btn:hover { background: var(--peach); color: var(--ink); }
.band .ctrl { color: var(--on-teal); border-color: var(--teal-line); }
.band .ctrl:hover { background: var(--bg); color: var(--teal); border-color: var(--bg); }
.band :focus-visible { outline-color: var(--peach); }
.topics .card { width: min(24rem, 82vw); }

/* Speaking details */
.split { display: grid; gap: 0 3rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }
.formats li { padding-block: 1.1rem; border-top: 1px solid var(--line); }
.formats strong { display: block; font-family: var(--display); font-weight: 700; }
.formats span { color: var(--muted); }
.bio { padding: 1.6rem; color: var(--muted); }
.kit { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 1rem; margin-top: 1rem; }
.band .kit .hud { color: var(--peach); }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chips li { border: 1px solid var(--line-strong); padding: 0.35rem 0.8rem; font-family: var(--mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink); }
/* The archive ruler: one column per year, one mark per entry */
.ruler__legend { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.5rem; margin-bottom: 1.5rem; }
.ruler__legend .mark { display: inline-block; width: 1.4rem; margin-right: 0.5rem; vertical-align: -0.1em; }
.ruler__years { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0.5rem; align-items: end; }
.ruler__year { display: flex; flex-direction: column; gap: 0.4rem; }
.ruler__year ul { display: flex; flex-direction: column-reverse; gap: 4px; }
.ruler__count { font-family: var(--display); font-weight: 900; font-stretch: 125%; font-size: clamp(1.1rem, 2.4vw, 1.9rem); line-height: 1; }
.ruler__label { border-top: 1px solid currentColor; padding-top: 0.5rem; margin-top: 0.3rem; }
.ruler__short { display: none; }
@media (max-width: 600px) { .ruler__century { display: none; } .ruler__short { display: inline; } .ruler__years { gap: 0.3rem; } }
@media (max-width: 400px) { .ruler__years { gap: 0.15rem; } .ruler__label { font-size: 0.65rem; letter-spacing: 0; } }
.mark { height: 14px; }
.mark--stage { background: var(--wine); }
.mark--page { border: 1px solid var(--wine); }
.ruler__year li.mark:hover { background: var(--amber); border-color: var(--amber); }
.ruler__note { color: var(--muted); margin-top: 1.25rem; }
/* Talk video: a poster in the site's own type, swapped for the YouTube player on click. */
.reel { margin: 0 0 clamp(2.5rem, 5vw, 4rem); }
.reel__frame { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
.reel__poster { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "play meta" "play title"; align-items: center; gap: 0.5rem clamp(1.25rem, 3vw, 2.25rem); padding: clamp(1.25rem, 3vw, 2rem); background: var(--ink); color: var(--bg); text-decoration: none; }
.reel__poster::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--grad); }
.reel__poster:hover { text-decoration: none; }
.reel__meta { grid-area: meta; align-self: end; color: var(--peach); }
.reel__title { grid-area: title; align-self: start; font-family: var(--display); font-weight: 800; font-size: clamp(1.3rem, 3vw, 2.2rem); line-height: 1.1; }
.reel__play { grid-area: play; width: clamp(3.5rem, 8vw, 5rem); aspect-ratio: 1; border: 2px solid var(--amber); display: grid; place-items: center; transition: background-color var(--fast); }
.reel__play::after { content: ""; width: 40%; aspect-ratio: 1; margin-left: 12%; background: var(--amber); clip-path: polygon(0 0, 0 100%, 90% 50%); }
.reel__poster:hover .reel__play, .reel__poster:focus-visible .reel__play { background: var(--amber); }
.reel__poster:hover .reel__play::after, .reel__poster:focus-visible .reel__play::after { background: var(--ink); }
.band .mark--stage { background: var(--peach); }
.band .mark--page { border-color: var(--peach); }
.band .ruler__note { color: var(--on-teal); }

/* Recent talks as a spec sheet: a year column, then title and abstract. */
.talks li { display: grid; grid-template-columns: 7rem minmax(0, 1fr); grid-template-areas: "year title" "year text"; column-gap: 1.5rem; padding-block: 1.5rem; border-top: 1px solid var(--line-strong); }
.talks li:last-child { border-bottom: 1px solid var(--line-strong); }
.talks h4 { grid-area: title; margin: 0 0 0.5rem; }
.talks .year { grid-area: year; margin: 0.3rem 0 0; color: var(--wine); font-family: var(--mono); font-weight: 500; font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.talks p:not(.year) { grid-area: text; max-width: 68ch; }
.band .talks li { border-color: var(--teal-line); }
@media (max-width: 560px) {
  .talks li { grid-template-columns: 1fr; grid-template-areas: "year" "title" "text"; }
  .talks .year { margin: 0 0 0.4rem; }
}
.talks h4 a { text-decoration: none; }
.talks h4 a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
/* The "Today" line site.js puts between upcoming and past entries. */
.today { display: flex; align-items: center; gap: 0.75rem; margin: 0; padding-block: 0.75rem; color: var(--amber-text); }
.today::after { content: ""; flex: 1; height: 2px; background: var(--grad); }
.talks li.today { display: flex; border-top: 0; }
.band .today { color: var(--peach); }
.band .today::after { background: var(--peach); }
.listen__lead { max-width: 68ch; margin-bottom: 1rem; }
.cta-row { display: flex; flex-wrap: wrap; gap: 1.25rem 1.75rem; align-items: center; margin-top: 3rem; }

/* The path: a gradient track with diamond waypoints */
.track { position: relative; max-width: 52rem; }
.track::before { content: ""; position: absolute; left: 6px; top: 0.6rem; bottom: 0.6rem; width: 1px; background: linear-gradient(var(--wine), var(--line-strong)); }
.stop { position: relative; padding: 0 0 2.75rem 2.6rem; }
.stop::before { content: ""; position: absolute; left: 1px; top: 0.35rem; width: 11px; height: 11px; transform: rotate(45deg); background: var(--bg); border: 1px solid var(--ink); }
.stop--now::before { background: var(--grad); border: 0; box-shadow: 0 0 0 4px var(--bg), 0 0 0 5px var(--wine); }
.stop .years { color: var(--wine); }
.stop h3 { margin: 0.3rem 0 0.5rem; }
.stop p:not(.years) { color: var(--muted); max-width: 60ch; }
.now-tag { display: inline-block; margin-left: 0.75rem; padding: 0 0.45rem; border: 1px solid var(--wine); }

/* The arc: each stage fills more of its meter */
.arc > li { position: relative; border-top: 0; padding-top: 1.75rem; }
.arc > li::before, .arc > li::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; }
.arc > li::before { background: var(--line-strong); }
.arc > li::after { background: var(--grad); right: auto; width: 25%; }
.arc > li:nth-child(2)::after { width: 50%; }
.arc > li:nth-child(3)::after { width: 75%; }
.arc > li:nth-child(4)::after { width: 100%; }

/* Beliefs as numbered theses */
.theses { counter-reset: thesis; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 3rem; }
.theses > li { counter-increment: thesis; display: grid; align-content: start; grid-template-columns: 3rem minmax(0, 1fr); column-gap: 0.75rem; }
.theses > li::before { content: counter(thesis); grid-row: span 2; font-family: var(--display); font-weight: 900; font-stretch: 125%; font-size: 2.6rem; line-height: 0.9; color: var(--amber); }
.theses h4 { margin-bottom: 0.5rem; }
.theses p { color: var(--muted); }
@media (max-width: 760px) { .theses { grid-template-columns: 1fr; } }
.bigquote { font-family: var(--display); font-weight: 700; font-size: clamp(1.7rem, 4vw, 3.2rem); line-height: 1.12; max-width: 24ch; margin-block: clamp(3.5rem, 7vw, 6rem); }
.bigquote::before { content: "✦"; display: block; font-size: 1.6em; line-height: 1; margin-bottom: 0.15em; color: var(--amber); }
.quote blockquote { font-size: 1.15rem; color: var(--ink); }
.quote p { color: var(--wine); margin-top: 0.75rem; }

/* Story */
.story { display: grid; gap: 3rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); align-items: center; }
.story__text p { color: var(--muted); max-width: 60ch; margin-bottom: 1.1rem; }
.story__text { container-type: inline-size; }
/* Beside the question card the column is narrow; the heading follows its width. */
.story__text h2 { max-width: 18ch; margin-bottom: 1.5rem; font-size: min(clamp(1.9rem, 6.4vw, 4rem), 12cqi); }
.question { position: relative; background: var(--ink); color: var(--bg); padding: clamp(1.6rem, 4vw, 2.5rem); clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%); }
.question blockquote { font-family: var(--display); font-weight: 700; font-size: clamp(1.45rem, 2.6vw, 2.1rem); line-height: 1.2; }
.question figcaption { color: var(--peach); margin-top: 1.25rem; }
.question figcaption::after { content: "_"; margin-left: 0.2em; }
@media (prefers-reduced-motion: no-preference) {
  .question figcaption::after { animation: caret 1.1s steps(1) infinite; }
}
@keyframes caret { 50% { opacity: 0; } }

/* Borrowed thinking */
/* Heroes as credits: the name wide and loud, their line beside it */
.credits > li { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); grid-template-areas: "name line" "field line"; column-gap: 2.5rem; padding-block: 1.1rem; border-top: 1px solid var(--line-strong); }
.credits > li:last-child { border-bottom: 1px solid var(--line-strong); }
.credits .name { grid-area: name; font-family: var(--display); font-weight: 800; font-stretch: 118%; font-size: clamp(1.25rem, 2.4vw, 1.75rem); line-height: 1.1; }
.credits .field { grid-area: field; color: var(--amber-text); font-family: var(--mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.03em; text-transform: uppercase; margin-top: 0.3rem; }
.credits .line { grid-area: line; color: var(--soft); font-size: 1.1rem; align-self: center; }
@media (max-width: 680px) { .credits > li { grid-template-columns: 1fr; grid-template-areas: "name" "field" "line"; } .credits .line { margin-top: 0.5rem; } }
.books { display: grid; gap: 0 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.books li { padding-block: 0.8rem; border-top: 1px solid var(--line); }
.books strong { display: block; font-weight: 700; }
.books span { color: var(--muted); font-size: 0.95rem; }

/* Connect */
.connect { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }
.invite { position: relative; align-self: start; padding: clamp(1.6rem, 4vw, 2.75rem); }
.invite::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 3px; background: var(--grad); }
.invite h3 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 0.75rem; }
.invite p { color: var(--muted); margin-bottom: 1.5rem; }
.direct { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-top: 1.75rem; font-weight: 700; }
.routes li { padding-block: 1.25rem; border-top: 1px solid var(--line); }
.routes li:first-child { border-top: 0; padding-top: 0; }
.routes p { color: var(--muted); margin: 0.3rem 0 0.5rem; }
.socials { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; margin-top: 3rem; font-family: var(--mono); font-size: 0.85rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; }

/* Footer */
.site-footer { padding-block: 2.5rem; color: var(--muted); font-size: 0.95rem; }
.footer__inner { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; align-items: center; }
.footer__inner .wordmark { margin: 0; color: var(--ink); font-size: 1rem; }

/* Toast for the cheat code */
.toast { position: fixed; left: 50%; bottom: 1.5rem; z-index: 20; transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: 0.8rem 1.2rem; max-width: calc(100vw - 2rem); border-top: 2px solid var(--amber); }
.toast:empty { display: none; }

/* Deep pages */
.doc { padding-block: clamp(2.5rem, 6vw, 5rem); }
.doc-back { display: inline-block; color: var(--soft); text-decoration: none; margin-bottom: 2.5rem; font-family: var(--mono); font-size: 0.8rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; }
.doc-back:hover { color: var(--wine); }
.doc-head { margin-bottom: clamp(3rem, 6vw, 5rem); }
.doc-head__title { font-size: clamp(2.5rem, 7vw, 4.75rem); font-weight: 900; font-stretch: 112%; line-height: 0.95; margin-bottom: 1.25rem; }
.doc-head__lead { color: var(--muted); font-size: 1.25rem; max-width: 60ch; }
.doc-group { margin-bottom: 3.5rem; }
.doc-group__label { font-family: var(--mono); font-size: 0.85rem; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; line-height: 1.3; color: var(--wine); padding-bottom: 0.75rem; border-bottom: 1px solid var(--line-strong); }
.entry { padding-block: 1.6rem; border-bottom: 1px solid var(--line); }
.entry__meta { color: var(--amber-text); font-family: var(--mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.03em; text-transform: uppercase; margin-bottom: 0.6rem; }
.entry__title, .entry__name { font-family: var(--display); font-size: 1.35rem; font-weight: 700; line-height: 1.2; margin: 0 0 0.35rem; }
.entry__quote { font-size: 1.15rem; margin-bottom: 0.4rem; }
.entry__text { color: var(--soft); max-width: 65ch; }
.entry__links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-top: 0.75rem; font-weight: 700; }
.doc--log .entry { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title meta" "text text" "links links"; column-gap: 2rem; }
.doc--log .entry__title { grid-area: title; }
.doc--log .entry__meta { grid-area: meta; margin: 0.4rem 0 0; color: var(--wine); }
.doc--log .entry__text { grid-area: text; }
.doc--log .entry__links { grid-area: links; }
.doc--log .ruler { margin-bottom: clamp(3rem, 6vw, 5rem); }
@media (max-width: 600px) {
  .doc--log .entry { grid-template-columns: minmax(0, 1fr); grid-template-areas: "meta" "title" "text" "links"; }
  .doc--log .entry__meta { margin: 0 0 0.5rem; }
}
.prose { max-width: 65ch; }
.prose h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); font-stretch: 100%; margin: 2.5rem 0 0.9rem; }
.prose h3 { margin: 2rem 0 0.6rem; }
.prose p, .prose ul { margin-bottom: 1.1rem; color: var(--soft); }
.prose ul { padding-left: 1.2rem; list-style: square; }
.prose strong { color: var(--ink); }
.prose__close { font-family: var(--display); font-weight: 700; font-size: 1.5rem; color: var(--ink) !important; }
.prose--chapters { counter-reset: chapter; }
.prose--chapters h2 { counter-increment: chapter; position: relative; }
.prose--chapters h2::before { content: counter(chapter, decimal-leading-zero); display: block; margin-bottom: 0.5rem; font-family: var(--mono); font-size: 0.8rem; font-weight: 500; color: var(--wine); }
.doc-cta { position: relative; margin-top: 4rem; padding: clamp(1.6rem, 4vw, 2.75rem); }
.doc-cta::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 3px; background: var(--grad); }
.doc-cta__title { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 0.75rem; }
.doc-cta__text { color: var(--muted); margin-bottom: 1.5rem; max-width: 55ch; }
.doc-cta__actions { display: flex; flex-wrap: wrap; gap: 1rem; }
/* Wide: a label rail on the left, like the logo wall. Group labels ride along while their group scrolls. */
/* The title splits from its lead only from 1180px, like the section heads. */
@media (min-width: 1180px) {
  .doc-head { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 3rem; align-items: end; }
  .doc-head__title { margin-bottom: 0; font-size: clamp(2.5rem, 5.5vw, 4.75rem); }
}
@media (min-width: 900px) {
  .doc { --rail: 14rem; }
  .doc-group { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); column-gap: 3rem; }
  .doc-group__label { grid-row: 1 / span 60; align-self: start; position: sticky; top: 6rem; padding: 0.75rem 0 0; border-bottom: 0; border-top: 1px solid var(--line-strong); }
  .doc-group > :not(.doc-group__label) { grid-column: 2; }
  .doc-group > .entry { border-bottom: 0; border-top: 1px solid var(--line); }
  .doc--shelf .doc-group { grid-template-columns: var(--rail) repeat(2, minmax(0, 1fr)); }
  .doc--shelf .doc-group > :not(.doc-group__label) { grid-column: auto; }
  .prose, .doc-cta, .doc--log .ruler { margin-left: calc(var(--rail) + 3rem); }
  .prose--chapters h2::before { position: absolute; right: calc(100% + 3rem); top: 0; margin: 0; font-family: var(--display); font-size: inherit; font-weight: 900; font-stretch: 125%; line-height: inherit; color: var(--amber); }
}

/* 404 */
.notfound { min-height: 70vh; display: grid; align-content: center; gap: 1.25rem; padding-block: 4rem; }
.notfound__code { font-family: var(--mono); font-weight: 200; font-size: clamp(4.5rem, 20vw, 11rem); line-height: 0.9; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.notfound__title { font-size: clamp(2rem, 5vw, 3.2rem); }
.notfound__text { color: var(--muted); max-width: 48ch; }
.notfound__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 0.75rem; }

@media (prefers-reduced-motion: reduce) {
  .btn, .btn::after, .ctrl, .nav a, .logos img { transition: none; }
}

/* Scroll gauge: a gradient line along the top edge, filled as the page scrolls. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    body::before { content: ""; position: fixed; z-index: 30; top: 0; left: 0; right: 0; pointer-events: none; height: 3px; background: var(--grad); transform-origin: left; animation: gauge linear both; animation-timeline: scroll(root); }
  }
}
@keyframes gauge { from { transform: scaleX(0); } }

/* On the homepage the header name waits until the hero name has scrolled away, so the name shows once. */
@supports (animation-timeline: view()) {
  html:has(.hero__name) { timeline-scope: --name; }
  .hero__name { view-timeline-name: --name; }
  .site-header .wordmark { animation: wordmark linear both; animation-timeline: --name; animation-range: exit 0% exit 100%; }
  .site-header .wordmark:focus-visible, :root.agent .site-header .wordmark { animation: none; }
}
@keyframes wordmark { from { opacity: 0; translate: 0 0.4rem; } }

/* Page to page, the wordmark stays put and the rest cross-fades. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .site-header .wordmark { view-transition-name: wordmark; }
}

/* Read as: human or agent */
.mode { display: inline-flex; align-items: center; gap: 0; margin-top: 2rem; border: 1px solid var(--line-strong); }
.mode[hidden] { display: none; }
.mode__label { padding: 0 0.9rem; color: var(--muted); }
.mode__btn { min-height: 44px; padding: 0 1rem; border: 0; border-left: 1px solid var(--line-strong); background: none; color: var(--soft); font: 500 0.8rem/1 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; }
.mode__btn:hover { color: var(--ink); background: var(--panel); }
.mode__btn[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.agent-only, .alt-text { display: none; }

/* Agent view: the same page as a plain markdown context file. */
:root.agent body { background: var(--panel); }
:root.agent body *, :root.agent body *::before, :root.agent body *::after { background: none; box-shadow: none; clip-path: none; animation: none; transition: none; }
:root.agent body *::before, :root.agent body *::after { content: none; display: inline; position: static; transform: none; width: auto; height: auto; border: 0; font: inherit; color: inherit; margin: 0; padding: 0; grid-row: auto; }
:root.agent body * { font-family: var(--mono); font-size: 0.95rem; font-weight: 400; font-stretch: 100%; font-style: normal; letter-spacing: 0; text-transform: none; line-height: 1.65; color: var(--ink); -webkit-text-fill-color: currentColor; border-color: transparent; text-align: left; max-width: none; }
:root.agent main, :root.agent .site-footer, :root.agent .header__inner { max-width: calc(78ch + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
:root.agent .header__inner { display: block; }
:root.agent .nav { display: flex; flex-wrap: wrap; gap: 0 2ch; }
:root.agent main *, :root.agent .site-footer * { margin: 0; padding: 0; position: static; transform: none; width: auto; height: auto; min-height: 0; aspect-ratio: auto; justify-self: auto; align-self: auto; }
:root.agent body :is(.wrap, .hero__inner, .hero__text, .section-head, .cols, .values, .theses, .theses > li, .credits > li, .wall, .wall__list, .split, .story, .connect, .direct, .footer__inner, .talks li, .ruler, .ruler__years, .ruler__year, .ruler__year ul, .track, .stop, .scroller, .scroller__head, .scroller__track, .profile, .routes, .cta-row, .hero__actions, .socials, .chips, .formats, .books, .invite, .doc-cta, .bio, .card, .logos li, figure) { display: block; }
:root.agent body :is(img, picture, svg, .ruler__legend, .ruler__count, .now-tag, .scroller__ctrl, .scroller__hint, .spark, [aria-hidden="true"]:not(.mode__label)) { display: none; }
:root.agent body :is(.alt-text, .visually-hidden) { display: inline; position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; }
:root.agent .reel__poster { display: inline; color: inherit; }
:root.agent .reel__meta::after { content: ": "; }
:root.agent body .agent-only { display: block; position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; }
:root.agent .skip-link { display: none; }
:root.agent .site-header * { margin: 0; padding: 0; }
:root.agent body .ruler__short { display: none; }
:root.agent body .ruler__century { display: inline; }
:root.agent .site-header { position: static; backdrop-filter: none; border-bottom: 1px dashed var(--line-strong); }
:root.agent body .agent-only { white-space: pre-wrap; color: var(--muted); margin-bottom: 1.5rem; }
:root.agent main :is(section, .section, .hero, .logos) { padding-block: 0; margin-top: 2.5rem; border: 0; }
:root.agent main :is(h1, h2, h3, h4) { font-weight: 700; margin-top: 1.6em; margin-bottom: 0.4em; }
:root.agent main :is(p, blockquote, dl, ul, ol, pre) { margin-bottom: 0.9em; }
:root.agent body h1::before { content: "# "; color: var(--wine); }
:root.agent body h2::before { content: "## "; color: var(--wine); }
:root.agent body h3::before { content: "### "; color: var(--wine); }
:root.agent body h4::before { content: "#### "; color: var(--wine); }
:root.agent main li::before { content: "- "; color: var(--wine); }
:root.agent main li { padding-left: 2ch; text-indent: -2ch; }
:root.agent main li > * { text-indent: 0; display: inline; }
:root.agent main li > :is(p, blockquote) { display: inline; }
:root.agent main li > :is(p, blockquote) + :is(p, blockquote, h3, h4)::before { content: " · "; color: var(--muted); }
:root.agent main blockquote::before { content: "> "; color: var(--wine); }
:root.agent main blockquote > p { display: inline; }
:root.agent body .band * { color: var(--ink); }
:root.agent body .formats strong::after { content: ": "; }
:root.agent body li.ruler__year { display: flex; flex-direction: column; }
:root.agent body .ruler__year::before { content: none; }
:root.agent body .ruler__label { order: -1; font-weight: 700; margin-top: 0.8em; }
:root.agent body .ruler__label::before { content: "#### "; color: var(--wine); }
:root.agent body a { text-decoration: none; color: var(--ink); }
:root.agent body a::before { content: "["; color: var(--muted); }
:root.agent body a[href]::after { content: "](" attr(href) ")"; color: var(--muted); word-break: break-all; }
:root.agent body .profile__stats { display: grid; grid-template-columns: auto 1fr; column-gap: 1ch; }
:root.agent body .profile__stats dt { text-transform: lowercase; color: var(--wine); }
:root.agent body .profile__stats dt::after { content: ":"; }
:root.agent body .hero__claim .grad { color: var(--ink); }
:root.agent body .hero__name span { display: inline; }
:root.agent body .btn { display: inline; padding: 0; gap: 0; }
:root.agent body .header__inner > .btn { display: inline; }
:root.agent body .mode { display: inline-flex; border: 1px dashed var(--line-strong); margin-top: 1rem; }
:root.agent body .mode__btn { padding: 0 1rem; min-height: 44px; cursor: pointer; }
:root.agent body .mode__btn::before { content: "( ) "; }
:root.agent body .mode__btn[aria-pressed="true"]::before { content: "(x) "; color: var(--wine); }
:root.agent body .toast { background: var(--ink); color: var(--bg); padding: 0.8rem 1.2rem; position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%); }
:root.agent body .toast * { color: var(--bg); }
:root.agent body .toast:empty { display: none; }
:root.agent body::before { display: none; }

@media print {
  body::before { display: none; }
  body { background: #fff; color: #000; }
  .site-header, .logos, .scroller__ctrl, .toast { display: none; }
}