/* Hallmark · shape: Map / Diagram, the specimen first and the path second · genre: modern-minimal · theme: Rim (by request) · job: hire · draw: none · copy: verbatim (hero narration is Ömer's own)
 * hero: Stage · nav: edge-aligned with a live Rome clock · footer: not built yet · imagery: none so far, the mark as specimen and a chart of real places and years · signature: the 天 mark measured upright and turned to read ÖK
 * axes: dark/grotesk-sans/warm · posture: committed · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · waive 44c · hero ends at 805 where a hairline opens the path · the narration is two verbatim sentences beside the mark, held centred with equal air */
/* Hallmark · waive 79 · about 140px of dark under the specimen to the path rule · his own two-sentence narration stays as written rather than padded or enlarged into a slogan */
/* Hallmark · dismissed 9 · the experience head is sticky beside the list, so the half-column is the scroll track, not a hole */
/* Hallmark · answered 'generic heads' · Selected work is the owner's chosen wording; Experience and About double as the nav labels a visitor scans for */
/* Hallmark · waive 83 · every picture below the hero is Ömer's own work or portrait · a comms portfolio whose owner asked to show his campaigns, identities and publications in full */
/* Hallmark · answered F20 · project links are an inline list that wraps with the text column; a third link on its own line is a natural wrap */
/* Hallmark · waive 49b · two field story links are full story titles of nine and ten words, wrapping to two lines only at 320px · these are the published titles of his UNDP Turkey stories and cannot be shortened */
/* Hallmark · waive 71 · 120px above and 40px below each group title measured in the live page · the render reads the collapsed project rows of the previous group, whose hidden bodies sit at the group title in the full-page capture */
/* Hallmark · waive 77 · Experience rows run their hairlines across nine columns, About pairs the portrait with prose at a 60ch measure · widening Ömer's bio or role lines past a reading measure would make the text harder to read, not fuller */
/* Hallmark · waive 39b · each skill dot is 16px drawn inside a 44px invisible hit area · the constellation needs small dots so 21 skills and their links stay legible on one field */
/* Hallmark · pre-emit critique: P4 H5 E4 S5 R5 V5 · weakest: E, the hero narration runs longer than one sentence; kept verbatim at his request and held under the screen budget */
/* Hallmark · finish-review: subagent · 7 findings · 5 resolved 1 partial (heads: one renamed, three kept by owner choice) 1 dismissed (experience head is sticky) · gap: measured material stops after the path */
@import url("./tokens.css");
@import url("./base.css");

:root { --nav-h: 72px; --color-accent-3: oklch(72% 0.17 45); --color-mint: oklch(80% 0.14 160); --color-rose: oklch(74% 0.15 355); --color-accent-text: var(--color-accent); --color-flash: var(--color-accent); }

/* light theme: an accessibility switch in the nav; warm paper, blue takes over as the main accent (yellow cannot be read on paper), and a deep gold takes blue's place in the rotation */
[data-theme="light"] {
  color-scheme: light;
  --color-paper: oklch(96% 0.008 80); --color-paper-2: oklch(92.5% 0.010 80); --color-paper-3: oklch(89% 0.012 80);
  --color-ink: oklch(19% 0.012 75); --color-ink-2: oklch(31% 0.012 75); --color-muted: oklch(46% 0.012 75); --color-muted-2: oklch(60% 0.010 75);
  --color-rule: oklch(84% 0.010 78); --color-rule-2: oklch(90% 0.010 78);
  --color-accent: oklch(52% 0.15 252); --color-accent-ink: oklch(98% 0.005 252); --color-accent-2: oklch(62% 0.14 82); --color-accent-3: oklch(58% 0.18 42);
  --color-mint: oklch(52% 0.12 160); --color-rose: oklch(56% 0.17 355); --color-focus: oklch(52% 0.15 252);
  --color-accent-text: var(--color-accent); --color-flash: var(--color-accent);
}
[data-theme="light"] .field .links line { opacity: 0.22; }
[data-theme="light"] .field.is-active .links line { opacity: 0.07; }
[data-theme="light"] .field.is-active .links line.is-on { opacity: 1; }


body { font-weight: 400; }
h1, h2, h3 { font-weight: var(--display-weight); line-height: 1.02; }
h2 { letter-spacing: -0.03em; }
.measure { font-family: var(--font-outlier); font-variant-numeric: tabular-nums; }
.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-ink); color: var(--color-paper); }
.skip:focus-visible { top: var(--space-md); }

/* nav */
.nav { border-bottom: var(--rule-hair) solid var(--color-rule); }
.nav .container { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; min-height: var(--nav-h); gap: var(--space-lg); }
.brand { display: inline-flex; align-items: center; gap: var(--space-sm); color: var(--color-ink); text-decoration: none; font-weight: 500; font-size: var(--text-lg); letter-spacing: -0.02em; white-space: nowrap; }
.brand svg { width: 32px; height: 32px; flex-shrink: 0; }
.brand span { display: block; line-height: 1; text-box: trim-both cap alphabetic; }
.brand:hover { color: var(--color-ink-2); }
.clock { font-size: var(--text-sm); color: var(--color-muted); white-space: nowrap; }
.nav ul { justify-self: end; display: flex; gap: var(--space-lg); margin: 0; padding: 0; list-style: none; }
.nav ul a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-ink); text-decoration: none; white-space: nowrap; }
.nav ul a:hover { text-decoration: underline; text-underline-offset: 0.25em; }


/* the theme switch */
.mode { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 44px; padding: 0; border: 0; background: none; color: var(--color-ink); font-size: var(--text-sm); cursor: pointer; }
.mode .track { position: relative; width: 36px; height: 20px; border: var(--rule-hair) solid var(--color-muted); }
.mode .track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; background: var(--color-accent); transition: transform var(--dur-short) var(--ease-out); }
.mode[aria-pressed="true"] .track::after { transform: translateX(16px); }
.mode:hover .track { border-color: var(--color-ink); }
.mode:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .mode .track::after { transition: none; } }

/* controls */
.btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--space-lg); border: var(--rule-hair) solid var(--color-rule); border-radius: 0; background: none; color: var(--color-ink); font-weight: 500; text-decoration: none; white-space: nowrap; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.btn:hover { border-color: var(--color-muted); background: var(--color-paper-2); }
.btn--primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.btn--primary:hover { background: color-mix(in oklab, var(--color-accent) 88%, var(--color-ink)); border-color: transparent; color: var(--color-accent-ink); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn:focus-visible, .brand:focus-visible, .nav a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }

/* corner ticks */
.ticks { position: relative; }
.ticks::before, .ticks::after { content: ""; position: absolute; width: 12px; height: 12px; border: 0 solid var(--color-muted); pointer-events: none; z-index: var(--z-raised); }
.ticks::before { top: calc(-1 * var(--space-xs)); left: calc(-1 * var(--space-xs)); border-width: 1px 0 0 1px; }
.ticks::after { right: calc(-1 * var(--space-xs)); bottom: calc(-1 * var(--space-xs)); border-width: 0 1px 1px 0; }

/* hero: Stage, the narration on seven columns, the mark measured on five */
.hero { min-height: calc(100dvh - var(--nav-h) - var(--space-3xl)); display: grid; align-items: center; padding-block: var(--space-xl); }
.hero > .container { display: grid; grid-template-columns: fit-content(44rem) minmax(0, 1fr); column-gap: var(--space-4xl); justify-content: start; align-items: center; }
.hero-text { display: grid; gap: var(--space-lg); }
.hero-text h1 { max-width: none; font-size: clamp(2.5rem, 4.6vw + 0.5rem, 4.75rem); line-height: 0.98; letter-spacing: var(--tracking-display); }
.lead { max-width: 47ch; color: var(--color-ink-2); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-md); }
.specimen { margin: 0; justify-self: stretch; width: 100%; padding: var(--space-lg) var(--space-xl);  }
.markbtn { --turn: 0deg; display: block; width: 100%; max-width: 16.5rem; margin-inline: auto; padding: 0; border: 0; background: none; color: var(--color-ink); cursor: pointer; }
.markbtn svg { width: 100%; height: auto; rotate: var(--turn); transition: rotate 700ms var(--ease-out), color var(--dur-long) var(--ease-out); }
html:not(.turnable) .markbtn:hover svg { rotate: 90deg; color: var(--color-accent); }
.markbtn[data-step="1"] { color: var(--color-accent); }
.markbtn[data-step="2"] { color: var(--color-accent-2); }
.markbtn[data-step="3"] { color: var(--color-accent-3); }
.markbtn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: var(--space-sm); }
.readout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); margin: var(--space-xl) 0 0; padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); }
.readout dt { font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); white-space: nowrap; }
.readout dd { margin: var(--space-2xs) 0 0; color: var(--color-ink-2); white-space: nowrap; transition: color var(--dur-long) var(--ease-out); }

/* the path: a chart of real cities and years */
.path { padding-block: var(--section-gap-s) var(--section-gap); border-top: var(--rule-hair) solid var(--color-rule); }
.head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: baseline; margin-bottom: var(--space-2xl); }
.head h2 { grid-column: 1 / span 6; }
.head p { grid-column: 8 / span 5; color: var(--color-ink-2); }
.chart { --tail: 11rem; position: relative; margin: 0; height: 440px; }
.pins { position: absolute; inset: 0 0 var(--space-xl); margin: 0; padding: 0; list-style: none; }
.pins li { position: absolute; width: max-content; left: calc(var(--x) * (100% - var(--tail))); bottom: 0; height: var(--h); display: flex; flex-direction: column; gap: var(--space-2xs); padding-left: var(--space-sm); border-left: var(--rule-hair) solid var(--color-muted-2); }
.pins li::after { content: ""; position: absolute; left: -4px; bottom: -4px; width: 7px; height: 7px; background: var(--color-ink-2); }
.pins .city { font-size: var(--text-title); font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; color: var(--color-ink); }
.pins .measure { font-size: var(--text-sm); line-height: 1.45; color: var(--color-muted); }
.pins .now { border-left-color: var(--color-accent); }
.pins .now::after { background: var(--color-accent); }
.pins .now .city { color: var(--color-accent-text); }
.pins .detail { border-left-style: dashed; }
.pins li { cursor: default; transition: border-color var(--dur-short) var(--ease-out); }
.pins li .city, .pins li .measure { transition: color var(--dur-short) var(--ease-out); }
.pins li::after { transition: background-color var(--dur-short) var(--ease-out); }
.pins li:hover, .pins li:focus-visible { border-left-color: var(--c); }
.pins li:hover::after, .pins li:focus-visible::after { background: var(--c); }
.pins li:hover .city, .pins li:focus-visible .city { color: var(--c); }
.pins li:hover .measure, .pins li:focus-visible .measure { color: var(--color-ink-2); }
.pins li:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.axis { position: absolute; left: 0; right: var(--tail); bottom: 0; display: flex; justify-content: space-between; padding-top: var(--space-xs); border-top: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm); color: var(--color-muted); }

/* the work: six groups, each project a ruled row of text beside a strip of pictures */
.work { padding-block: var(--section-gap) 0; border-top: var(--rule-hair) solid var(--color-rule); }
.work > .container > .head { margin-bottom: var(--space-2xl); }
.work .head h2 { font-size: var(--text-display-s); max-width: 18ch; }
.frame { position: relative; overflow: hidden; background: var(--color-paper-2); }
.frame img { width: 100%; height: 100%; object-fit: cover; outline: var(--rule-hair) solid color-mix(in oklab, var(--color-ink) 8%, transparent); outline-offset: -1px; }
.cats { position: sticky; top: 0; z-index: var(--z-sticky); background: color-mix(in oklab, var(--color-paper) 94%, transparent); backdrop-filter: blur(6px); border-block: var(--rule-hair) solid var(--color-rule); }
.cats ul { display: flex; gap: var(--space-xs) var(--space-xl); margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.cats a { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 52px; color: var(--color-ink-2); text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; transition: color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.cats a:hover { color: var(--c); animation: flash 320ms linear both; }
.cats a.is-current { color: var(--color-ink); border-bottom-color: var(--c); }
.cats a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.group { border-bottom: var(--rule-hair) solid var(--color-rule); scroll-margin-top: 52px; }
.group > summary { list-style: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out); }
.group > summary::-webkit-details-marker { display: none; }
.group > summary > .container { display: grid; grid-template-columns: minmax(0, 1fr) 28px; align-items: center; gap: var(--space-lg); min-height: 96px; }
.group > summary:hover { background: var(--color-paper-2); }
.group > summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.group-title { margin: 0; font-size: var(--text-2xl); letter-spacing: -0.025em; }
/* hover: a closed group's title flickers on in its own accent, like a sign catching */
.group:not([open]) > summary:hover .group-title, .group:not([open]) > summary:focus-visible .group-title { color: var(--c); animation: flash 320ms linear both; }
@keyframes flash { 0% { opacity: 0.3; } 20% { opacity: 1; } 40% { opacity: 0.45; } 60%, 100% { opacity: 1; } }
.group > summary .toggle { width: 22px; height: 22px; }
.group[open] > summary .toggle::after { transform: rotate(0deg); }
.group-title { transition: color var(--dur-short) var(--ease-out); }
.group[open] > summary .group-title { color: var(--c); }
.group[open] > summary .toggle::before, .group[open] > summary .toggle::after { background: var(--c); }
.group[open] > .container { padding-bottom: var(--space-2xl); }
.cases { padding-left: var(--space-xl); border-bottom: var(--rule-hair) solid var(--color-rule); }
.case { border-top: var(--rule-hair) solid var(--color-rule); scroll-margin-top: 64px; }
.case > summary { display: grid; grid-template-columns: minmax(0, 1fr) 28px; align-items: center; gap: var(--space-lg); min-height: 88px; padding-block: var(--space-sm); list-style: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out); }
.case > summary::-webkit-details-marker { display: none; }
.case > summary:hover { background: var(--color-paper-2); }
.case > summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.sum { display: grid; gap: var(--space-3xs); min-width: 0; }
.toggle { position: relative; width: 16px; height: 16px; justify-self: end; }
.toggle::before, .toggle::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -0.75px; background: var(--color-ink); transition: transform var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.toggle::after { transform: rotate(90deg); }
.case[open] .toggle::after { transform: rotate(0deg); }
.case[open] .toggle::before, .case[open] .toggle::after { background: var(--color-accent); }
.case[open] > summary h4 { color: var(--color-accent-text); }
.case-body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: start; padding-block: var(--space-md) var(--space-xl); }
.links.is-list { display: grid; gap: 0; }
.links.is-list a { min-height: 30px; }
.rail .opens { display: block; flex: none; }
.rail .opens:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.case-text { grid-column: 1 / span 4; display: grid; gap: var(--space-sm); padding-right: var(--space-md); }
.case h4 { margin: 0; font-size: var(--text-md); font-weight: 500; font-weight: 500; letter-spacing: -0.02em; line-height: 1.15; color: var(--color-ink); text-wrap: balance; overflow-wrap: break-word; min-width: 0; }
.case .meta { font-size: var(--text-sm); color: var(--color-muted); }
.case .desc { font-size: var(--text-md); line-height: 1.55; color: var(--color-ink-2); max-width: 46ch; }
.case .role { font-size: var(--text-sm); color: var(--color-ink); }
.case .role span { color: var(--color-muted); margin-right: var(--space-2xs); }
.links { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-lg); margin: 0; padding: 0; list-style: none; font-size: var(--text-sm); }
.links a { display: inline-flex; align-items: center; min-height: 32px; color: var(--color-ink); text-underline-offset: 0.2em; text-decoration-color: var(--color-accent); }
.links a:hover { color: var(--color-accent-text); }
.links a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.rail { --rail-h: clamp(240px, 27vw, 400px); grid-column: 5 / -1; display: flex; gap: var(--space-md); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; margin-right: calc(-1 * var(--gutter)); padding-right: var(--gutter); padding-bottom: var(--space-sm); scrollbar-color: var(--color-muted-2) transparent; }
.rail img { flex: none; width: auto; max-width: none; height: var(--rail-h); scroll-snap-align: start; outline: var(--rule-hair) solid color-mix(in oklab, var(--color-ink) 8%, transparent); outline-offset: -1px; }
.rail img.is-logo { padding: var(--space-2xl); background: var(--color-paper-2); box-sizing: border-box; }
.rail:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.plate { grid-column: 5 / -1; display: flex; align-items: flex-end; min-height: 240px; padding: var(--space-xl); background: var(--color-paper-2); }
.plate span { font-size: var(--text-section); font-weight: 500; letter-spacing: -0.03em; line-height: 1.05; color: var(--color-ink); max-width: 22ch; overflow-wrap: break-word; min-width: 0; }
@media (max-width: 60rem) {
  .case-text, .rail, .plate { grid-column: 1 / -1; }
  .case-text { padding-right: 0; margin-bottom: var(--space-lg); }
  .cases { padding-left: var(--space-md); }
  .group > summary > .container { min-height: 72px; gap: var(--space-md); }
  .rail { --rail-h: clamp(200px, 56vw, 320px); margin-left: calc(-1 * var(--gutter)); padding-left: var(--gutter); scroll-padding-inline: var(--gutter); }
  .plate { min-height: 180px; padding: var(--space-lg); }
  .plate span { font-size: var(--text-2xl); }
}
@media (prefers-reduced-motion: reduce) { .jobs li { transition: none; } }
@media (prefers-reduced-motion: reduce) { .cats a, .case > summary, .group > summary, .group-title, .toggle::before, .toggle::after { transition: none; animation: none; } }

/* how it all connects: a constellation of skills; hover draws the group with a quick flicker */
.connects { padding-block: var(--section-gap) var(--section-gap); border-top: var(--rule-hair) solid var(--color-rule); }
.connects .head { margin-bottom: var(--space-xl); }
.field { --dot: 16px; --hc: var(--color-accent); position: relative; aspect-ratio: 1312 / 680; }
.field .links { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.field .links line { stroke: var(--color-ink); stroke-width: 1; opacity: 0.16; transition: opacity var(--dur-short) var(--ease-out); }
.field.is-active .links line { opacity: 0.05; }
.field.is-active .links line.is-on { stroke: var(--hc); stroke-width: 1.5; opacity: 1; }
.sk { position: absolute; width: var(--dot); height: var(--dot); translate: -50% -50%; padding: 0; border: 0; background: none; color: var(--color-ink-2); cursor: pointer; transition: opacity var(--dur-short) var(--ease-out); }
.sk i { position: absolute; inset: 0; border-radius: 50%; background: var(--color-ink-2); box-shadow: 0 0 0 4px var(--color-paper); transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); }
.sk b { position: absolute; font-weight: 400; font-size: var(--text-md); line-height: 1.2; white-space: nowrap; color: var(--color-ink-2); text-shadow: 0 0 4px var(--color-paper), 0 0 8px var(--color-paper), 0 0 12px var(--color-paper); transition: color var(--dur-short) var(--ease-out); }
.side-r b { left: calc(100% + var(--space-sm)); top: 50%; translate: 0 -50%; text-align: left; }
.side-l b { right: calc(100% + var(--space-sm)); top: 50%; translate: 0 -50%; text-align: right; }
.side-t b { bottom: calc(100% + var(--space-xs)); left: 50%; translate: -50% 0; text-align: center; }
.side-b b { top: calc(100% + var(--space-xs)); left: 50%; translate: -50% 0; text-align: center; }
.sk::before { content: ""; position: absolute; inset: -14px; }
.sk:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; border-radius: 50%; }
.field.is-active .sk { opacity: 0.22; }
.field.is-active .sk.is-on { opacity: 1; }
.field.is-active .sk.is-on i { background: var(--hc); }
.field.is-active .sk.is-on b { color: var(--hc); }
.field.is-active .sk.is-here i { transform: scale(1.4); }
.themes { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-xl); margin: var(--space-xl) 0 0; padding: var(--space-md) 0 0; list-style: none; border-top: var(--rule-hair) solid var(--color-rule); }
.themes li { display: inline-flex; align-items: center; gap: var(--space-xs); font-size: var(--text-sm); color: var(--color-muted); transition: color var(--dur-short) var(--ease-out); }
.themes li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.themes li.is-on { color: var(--c); }
.sk-list { display: none; margin: 0; padding: 0; list-style: none; border-top: var(--rule-hair) solid var(--color-ink-2); }
.sk-list li { display: grid; gap: var(--space-3xs); padding-block: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); }
.sk-name::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: var(--space-xs); border-radius: 50%; background: var(--c); }
.sk-name { color: var(--color-ink); }
.sk-cl { font-size: var(--text-sm); color: var(--color-muted); }
/* phones: the constellation turned upright; one theme lights up at a time and shows its names. The list stays for screen readers only. */
.tall { display: none; width: 100%; height: auto; max-width: 30rem; margin-inline: auto; overflow: visible; }
.tall line { stroke: var(--color-ink); stroke-width: 1.5; opacity: 0.16; transition: opacity var(--dur-long) var(--ease-out), stroke var(--dur-long) var(--ease-out); }
.tall circle { transition: opacity var(--dur-long) var(--ease-out); }
.tall text { fill: var(--color-ink); opacity: 0; transition: opacity var(--dur-long) var(--ease-out); }
.tall.is-lit line { opacity: 0.05; }
.tall.is-lit line.is-on { stroke: var(--hc); stroke-width: 2.5; opacity: 1; }
.tall.is-lit circle:not(.is-on) { opacity: 0.25; }
.tall.is-lit text.is-on { opacity: 1; }
@media (max-width: 60rem) {
  .field { display: none; } .tall { display: block; }
  .sk-list { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) { .sk, .sk i, .sk b, .field .links line, .themes li, .tall line, .tall circle, .tall text { transition: none; } }

/* the portrait: five versions stacked; hover steps through them with a short glitch */
.shift { position: relative; aspect-ratio: 4 / 5; margin: 0; cursor: pointer; }
.shift img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; }
.shift img.is-on { opacity: 1; }
.shift.is-glitch img.is-on { animation: glitch 220ms steps(1, end) both; filter: drop-shadow(4px 0 0 var(--color-accent-2)) drop-shadow(-4px 0 0 var(--color-accent-3)); }
.shift.is-glitch img.is-prev { opacity: 1; animation: glitch-out 220ms steps(1, end) both; }
@keyframes glitch {
  0% { clip-path: inset(10% 0 62% 0); translate: -14px 0; }
  15% { clip-path: inset(48% 0 30% 0); translate: 18px 0; }
  30% { clip-path: inset(70% 0 8% 0); translate: -8px 0; }
  45% { clip-path: inset(22% 0 44% 0); translate: 10px 0; }
  60% { clip-path: inset(0 0 55% 0); translate: -4px 0; }
  75% { clip-path: inset(0 0 12% 0); translate: 6px 0; }
  100% { clip-path: inset(0); translate: 0; }
}
@keyframes glitch-out { 0% { translate: 6px 0; } 30% { translate: -6px 0; } 60% { translate: 3px 0; } 100% { opacity: 0; translate: 0; } }
.shift:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 6px; }
@media (prefers-reduced-motion: reduce) { .shift.is-glitch img.is-on, .shift.is-glitch img.is-prev { animation: none; filter: none; } .shift.is-glitch img.is-prev { opacity: 0; } }

/* the headline: three words swap with the portrait's glitch while the head is hovered */
@media (min-width: 60.01rem) { .hero-text h1 { min-width: 9.1em; } }
.hero-text h1 .w { display: inline-block; }
.hero-text h1 .w.is-glitch { animation: hglitch 220ms steps(1, end) both; }
@keyframes hglitch {
  0% { clip-path: inset(0 0 60% 0); translate: -8px 0; text-shadow: 3px 0 var(--color-accent-2), -3px 0 var(--color-accent-3); }
  20% { clip-path: inset(40% 0 20% 0); translate: 10px 0; }
  40% { clip-path: inset(70% 0 0 0); translate: -4px 0; }
  60% { clip-path: inset(10% 0 40% 0); translate: 6px 0; }
  80% { clip-path: inset(0 0 10% 0); translate: -2px 0; text-shadow: 3px 0 var(--color-accent-2), -3px 0 var(--color-accent-3); }
  100% { clip-path: inset(0); translate: 0; text-shadow: none; }
}
@media (prefers-reduced-motion: reduce) { .hero-text h1 .w.is-glitch { animation: none; } }

/* experience: ruled rows beside the head */
.experience { padding-block: var(--section-gap) var(--section-gap-l); border-block: var(--rule-hair) solid var(--color-rule); }
.experience .container { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: start; }
.exp-head { grid-column: 1 / span 3; display: grid; gap: var(--space-md); position: sticky; top: var(--space-xl); }
.exp-head a, .jobs a { color: var(--color-ink); text-underline-offset: 0.2em; }
.exp-head a:hover, .jobs a:hover { color: var(--color-accent-text); }
.exp-head a:focus-visible, .jobs a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.jobs { grid-column: 4 / -1; margin: 0; padding: 0; list-style: none; border-top: var(--rule-hair) solid var(--color-ink-2); }
.jobs li { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); column-gap: var(--space-lg); row-gap: var(--space-2xs); padding-block: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
.jobs .measure { grid-row: span 2; font-size: var(--text-sm); color: var(--color-muted); padding-top: var(--space-2xs); }
.jobs .role { font-size: var(--text-title); font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; color: var(--color-ink); }
.jobs .where { color: var(--color-ink-2); font-size: var(--text-sm); }
.jobs li:first-child .role { color: var(--color-accent-text); }
.jobs li { transition: background-color var(--dur-short) var(--ease-out); }
.jobs li:hover { background: color-mix(in oklab, var(--color-paper-3) 60%, transparent); }
.jobs li:hover .role { color: var(--c); }
@media (max-width: 60rem) {
    .exp-head, .jobs { grid-column: 1 / -1; }
  .exp-head { position: static; margin-bottom: var(--space-xl); }
  .jobs li { grid-template-columns: minmax(0, 1fr); }
  .jobs .measure { grid-row: auto; padding-top: 0; }
}

/* about: the portrait beside a short bio and the work done for himself */
.about { padding-block: var(--section-gap-l) var(--section-gap); }
.about .container { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: start; }
.portrait { grid-column: 1 / span 4; margin: 0; }
.about-body { grid-column: 5 / -1; display: grid; gap: var(--space-xl); }
.bio { display: grid; gap: var(--space-md); max-width: 60ch; }
.bio p { font-size: var(--text-lead); line-height: 1.5; color: var(--color-ink); }
.bio p + p { color: var(--color-ink-2); }

/* contact: the heading opens a small form, drawn in thin lines like the rest of the page */
.contact { padding-block: var(--section-gap) var(--section-gap); border-top: var(--rule-hair) solid var(--color-rule); }
.contact .container { display: grid; gap: var(--space-2xl); justify-items: start; }
.contact-head { display: grid; gap: var(--space-md); }
.tuck { display: inline-flex; align-items: center; gap: var(--space-lg); padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; line-height: inherit; text-align: left; cursor: pointer; transition: color var(--dur-short) var(--ease-out); }
.tuck .toggle { width: 28px; height: 28px; }
.tuck[aria-expanded="true"] .toggle::after { transform: rotate(0deg); }
.tuck:hover, .tuck[aria-expanded="true"] { color: var(--color-accent-text); }
.tuck[aria-expanded="true"] .toggle::before, .tuck[aria-expanded="true"] .toggle::after { background: var(--color-accent); }
.tuck:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 6px; }
.contact-lead { font-size: var(--text-lead); line-height: 1.5; color: var(--color-ink); max-width: 32ch; }
.contact-alt { color: var(--color-muted); }
.contact-alt a { color: var(--color-ink); text-underline-offset: 0.2em; }
.contact-alt a:hover { color: var(--color-accent-text); }
.contact-alt a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.form { display: grid; gap: var(--space-lg); width: min(100%, 30rem); }
.form[hidden] { display: none; }
.form-field { display: grid; gap: var(--space-3xs); }
.form-field label { font-size: var(--text-sm); color: var(--color-muted); }
.form-field input, .form-field textarea { width: 100%; min-height: 40px; padding: var(--space-xs) 0; border: 0; border-bottom: var(--rule-hair) solid var(--color-muted); border-radius: 0; background: transparent; color: var(--color-ink); transition: border-color var(--dur-short) var(--ease-out); }
.form-field textarea { height: 5.5rem; resize: vertical; line-height: 1.5; }
.form-field input:hover, .form-field textarea:hover { border-bottom-color: var(--color-ink-2); }
.form-field input:focus-visible, .form-field textarea:focus-visible { outline: none; border-bottom: 2px solid var(--color-accent); }
.form-field [aria-invalid="true"] { border-bottom-color: var(--color-accent-3); }
.form-check:empty { display: none; }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-lg); }
.form-status { font-size: var(--text-sm); color: var(--color-ink-2); }
.form-status.is-bad { color: var(--color-accent-3); }
.form-done { font-size: var(--text-lead); line-height: 1.5; color: var(--color-ink); max-width: 32ch; }
.form-done:focus { outline: none; }
@media (prefers-reduced-motion: reduce) { .tuck, .form-field input, .form-field textarea { transition: none; } }

/* footer: a statement, then the mark and the legal line */
.foot { padding-block: var(--space-xl); background: var(--color-paper-3); border-top: var(--rule-hair) solid var(--color-rule); }
.foot .container { display: grid; gap: var(--space-2xl); }
.foot-meta { display: flex; align-items: flex-start; gap: var(--space-lg); color: var(--color-muted); }
.legal { display: grid; gap: var(--space-2xs); max-width: 80ch; }
.legal small { font-size: var(--text-xs); line-height: 1.5; color: var(--color-muted); }
.foot-meta svg { width: 28px; height: 28px; color: var(--color-ink); flex-shrink: 0; }
.foot-meta a { margin-left: auto; display: inline-flex; white-space: nowrap; align-items: center; min-height: 44px; color: var(--color-ink); text-underline-offset: 0.2em; }
.foot-meta a:hover { color: var(--color-accent-text); }
.foot-meta a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
@media (max-width: 60rem) {
  .portrait, .about-body { grid-column: 1 / -1; }
  .portrait { max-width: 22rem; margin-bottom: var(--space-xl); }
  }

/* phones: the name and the theme switch on the first row, all five links on a second row that scrolls sideways if it must */
@media (max-width: 40rem) {
  .nav > .container { position: relative; grid-template-columns: minmax(0, 1fr); row-gap: 0; padding-block: var(--space-xs) 0; }
  .brand { min-height: 56px; justify-self: start; }
  .nav nav { grid-column: 1 / -1; margin-inline: calc(-1 * var(--gutter)); border-top: var(--rule-hair) solid var(--color-rule); }
  .nav ul { justify-self: stretch; gap: var(--space-lg); padding-inline: var(--gutter); overflow-x: auto; scrollbar-width: none; }
  .nav ul::-webkit-scrollbar { display: none; }
  .nav ul a { min-height: 48px; font-size: var(--text-sm); }
  .nav ul li:last-child { position: absolute; top: var(--space-xs); right: var(--gutter); height: 56px; display: flex; align-items: center; }
  .markbtn { max-width: 9.5rem; }
  .hero-text h1 { font-size: min(2.5rem, calc((100vw - 2 * var(--gutter)) * 0.105)); } /* every word set fits on two lines */
  .foot-meta { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--space-sm) var(--space-md); }
  .foot-meta .legal { grid-column: 1 / -1; grid-row: 2; }
  .foot-meta a { justify-self: end; font-size: var(--text-sm); }
  .legal small { font-size: 0.6875rem; line-height: 1.45; }
  .specimen { padding: var(--space-md); }
}


@media (max-width: 60rem) {
  .nav .container { grid-template-columns: minmax(0, 1fr) auto; } .clock { display: none; }
  .hero > .container { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); }
  .specimen { padding: var(--space-lg); }
  .head h2, .head p { grid-column: 1 / -1; }
  .head p { margin-top: var(--space-md); }
  .chart { height: auto; }
  .pins { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg) var(--gap-columns); }
  .pins li { position: relative; left: auto; width: auto; height: auto; padding-block: var(--space-xs); }
  .pins li::after, .axis { display: none; }
  .pins .measure { font-size: var(--text-xs); }
}
@media (prefers-reduced-motion: reduce) { .btn, .markbtn svg, .readout dd, .pins li, .pins li .city, .pins li .measure, .pins li::after { transition: none; } .btn:active { transform: none; } }

/* 404: the page nobody built */
.lost-page { min-height: 100vh; display: grid; grid-template-rows: auto 1fr; }
.lost { display: grid; align-items: center; padding-block: var(--section-gap); }
.lost .container { display: grid; justify-items: start; gap: var(--space-lg); }
.lost h1 { font-size: clamp(2.5rem, 6vw + 0.5rem, 5.5rem); letter-spacing: var(--tracking-display); line-height: 0.98; }
.lost-line { font-size: var(--text-lead); line-height: 1.5; color: var(--color-ink-2); max-width: 34ch; }
.lost .btn { margin-top: var(--space-sm); }