:root { color-scheme: light dark; --page: light-dark(#f5f2ea, #11100e); --surface: light-dark(#fbf9f4, #181614); --chip: light-dark(#ede8dd, #24211e); --ink: light-dark(#161514, #f4f0e8); --text: light-dark(#3a3833, #cbc5ba); --muted: light-dark(#68645c, #9a948a); --line: light-dark(#e2dbce, #2c2926); --line-strong: light-dark(#cdc3b2, #423d37); --accent: light-dark(#b44832, #ef8160); --accent-ink: light-dark(#97381f, #ff9f82); --accent-invert: light-dark(#ef8160, #b44832); --on-accent: light-dark(#fffaf4, #1b0e09); --accent-soft: light-dark(rgba(180, 72, 50, .1), rgba(239, 129, 96, .14)); --grid: light-dark(rgba(22, 21, 20, .06), rgba(244, 240, 232, .045)); --glow: light-dark(rgba(180, 72, 50, .18), rgba(239, 129, 96, .13)); --shade: light-dark(rgba(64, 44, 24, .16), rgba(0, 0, 0, .6)); --map-road: light-dark(rgba(70, 60, 48, .36), rgba(236, 230, 220, .24)); --map-major: light-dark(rgba(70, 60, 48, .54), rgba(236, 230, 220, .4)); --map-rail: light-dark(rgba(70, 60, 48, .3), rgba(236, 230, 220, .18)); --map-water: light-dark(rgba(84, 128, 156, .3), rgba(92, 150, 196, .24)); --map-park: light-dark(rgba(118, 140, 84, .14), rgba(132, 168, 104, .09)); --max: 72rem; --gutter: 16px; --header: 56px; --top: calc(var(--header) + env(safe-area-inset-top, 0px)); --section: 80px; --radius: 18px; --touch: 44px; --ease: cubic-bezier(.22, 1, .36, 1); --sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --serif: "Libre Caslon Text", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; --mono: ui-monospace, "SF Mono", SFMono-Regular, "Cascadia Code", Menlo, Consolas, "Liberation Mono", monospace; }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
@font-face { font-family: "Libre Caslon Text"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/libre-caslon-text.woff2") format("woff2"); }
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--page); color: var(--text); font-family: var(--sans); font-size: 100%; line-height: 1.6; scroll-behavior: smooth; scrollbar-gutter: stable; scroll-padding-block: calc(var(--top) + 16px) calc(96px + env(safe-area-inset-bottom, 0px)); scrollbar-color: var(--line-strong) var(--page); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { min-block-size: 100svh; margin: 0; background: var(--page); color: var(--text); overflow-x: clip; }
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
a, button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
strong { font-weight: 650; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--accent-soft); color: var(--ink); }
html:has(.sheet:popover-open) { overflow: hidden; }
mark { padding: .05em .25em; border-radius: 5px; background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
abbr[title] { text-decoration: underline dotted; text-decoration-color: var(--line-strong); text-decoration-thickness: 1px; text-underline-offset: 3px; cursor: help; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
.icon { display: block; flex: none; inline-size: 1.125em; block-size: 1.125em; }
.sr-only { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: fixed; inset-block-start: calc(8px + env(safe-area-inset-top, 0px)); inset-inline-start: 8px; z-index: 100; padding: 12px 18px; border-radius: 999px; background: var(--ink); color: var(--page); font-weight: 600; translate: 0 -200%; transition: translate .25s var(--ease); }
.skip-link:focus-visible { translate: none; }
.hero-eyebrow, .section-index, .status-code { font: 500 .75rem/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.role-spec dt, .track-scale, .role-domain, .sheet-kicker, .sheet-stats dt, .sheet-label, .cred h3 { color: var(--muted); font: 500 .6875rem/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); transition: border-color .3s var(--ease), box-shadow .3s var(--ease); }
.wrap { inline-size: 100%; max-inline-size: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: max(var(--gutter), env(safe-area-inset-left, 0px)) max(var(--gutter), env(safe-area-inset-right, 0px)); }
.topbar { position: sticky; inset-block-start: 0; z-index: 40; padding-block-start: env(safe-area-inset-top, 0px); }
.topbar::before { content: ""; position: absolute; inset: 0; z-index: -1; border-block-end: 1px solid var(--line); background: color-mix(in srgb, var(--page) 78%, transparent); -webkit-backdrop-filter: saturate(1.8) blur(18px); backdrop-filter: saturate(1.8) blur(18px); }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-block-size: var(--header); }
.brand { display: inline-flex; align-items: center; gap: 10px; min-block-size: var(--touch); color: var(--ink); font-weight: 600; letter-spacing: -.01em; }
.brand-mark { display: grid; place-items: center; inline-size: 32px; block-size: 32px; border-radius: 9px; background: var(--ink); color: var(--page); font: 400 .8125rem/1 var(--serif); letter-spacing: .02em; }
.brand-name { font-size: .9375rem; white-space: nowrap; }
.dock { position: fixed; inset-inline: 0; inset-block-end: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 50; display: flex; align-items: center; gap: 2px; inline-size: fit-content; max-inline-size: calc(100% - 16px); margin-inline: auto; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--surface) 80%, transparent); box-shadow: 0 18px 40px -16px var(--shade), 0 2px 8px -2px var(--shade); -webkit-backdrop-filter: saturate(1.8) blur(18px); backdrop-filter: saturate(1.8) blur(18px); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
.dock::-webkit-scrollbar { display: none; }
.dock a { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-block-size: var(--touch); padding-inline: clamp(10px, 3.2vw, 14px); border-radius: 999px; color: var(--muted); font-size: .8125rem; font-weight: 600; letter-spacing: -.005em; white-space: nowrap; transition: color .2s var(--ease), background-color .2s var(--ease); }
.dock a[aria-current="true"], :root:not(.js) body:has(#experience:target) .dock a[href="#experience"], :root:not(.js) body:has(#skills:target) .dock a[href="#skills"], :root:not(.js) body:has(#background:target) .dock a[href="#background"] { background: var(--ink); color: var(--page); }
.dock .dock-mail { inline-size: var(--touch); margin-inline-start: 4px; padding: 0; background: var(--accent); color: var(--on-accent); }
.dock-mail span { display: none; }
.theme-toggle { display: grid; place-items: center; inline-size: var(--touch); block-size: var(--touch); margin-inline-end: -10px; border-radius: 999px; color: var(--ink); transition: background-color .2s var(--ease); }
.theme-toggle .icon { transition: rotate .6s var(--ease); }
:root[data-theme="dark"] .theme-toggle .icon { rotate: 180deg; }
.progress { position: absolute; inset: auto 0 -1px; block-size: 2px; background: var(--accent); transform-origin: 0 50%; scale: 0 1; }
.hero { position: relative; isolation: isolate; padding-block: 36px 64px; overflow-x: clip; }
.hero::before { content: ""; position: absolute; inset: calc(-1 * var(--top)) 0 0; z-index: -1; background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-position: 50% 0; background-size: 40px 40px; -webkit-mask-image: radial-gradient(120% 70% at 50% 0%, #000 20%, transparent 72%); mask-image: radial-gradient(120% 70% at 50% 0%, #000 20%, transparent 72%); pointer-events: none; }
.hero::after { content: ""; position: absolute; inset-block-start: calc(-1 * var(--top) - 22vmax); inset-inline-end: -26vmax; z-index: -1; inline-size: 64vmax; block-size: 64vmax; border-radius: 50%; background: radial-gradient(closest-side, var(--glow), transparent); pointer-events: none; }
.hero-inner { display: grid; gap: 20px; }
.hero-inner > * { min-inline-size: 0; animation: enter 1s var(--ease) both; animation-delay: calc(var(--i, 0) * 80ms); }
.hero-eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; color: var(--muted); }
.hero-eyebrow .icon { color: var(--accent); }
.hero-place, .hero-clock { display: inline-flex; align-items: center; gap: 8px; }
.hero-clock { color: var(--ink); font-variant-numeric: tabular-nums; }
.hero-title { --i: 1; margin-block: 2px; color: var(--ink); font: 400 clamp(3.5rem, 18.5vw, 6.5rem)/.9 var(--serif); letter-spacing: -.04em; }
.hero-title span { display: block; }
.hero-role { --i: 2; color: var(--ink); font-size: 1.125rem; font-weight: 600; line-height: 1.35; letter-spacing: -.015em; text-wrap: balance; }
.hero-lead { --i: 3; display: grid; gap: 12px; max-inline-size: 36rem; font-size: 1.0625rem; line-height: 1.65; text-wrap: pretty; }
.hero-invite { color: var(--ink); font-weight: 600; }
.hero-actions { --i: 4; display: grid; gap: 10px; margin-block-start: 6px; }
.hero-facts { --i: 5; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin-block-start: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--line); overflow: hidden; }
.hero-facts > div { display: grid; align-content: start; gap: 10px; padding: 18px 16px 20px; background: var(--surface); }
.hero-facts dd { order: -1; color: var(--ink); font: 400 2.5rem/1 var(--serif); letter-spacing: -.03em; }
.hero-facts dt { color: var(--muted); font-size: .8125rem; line-height: 1.45; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-block-size: 52px; padding-inline: 22px; border: 1px solid transparent; border-radius: 999px; font-size: 1rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; white-space: nowrap; transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease), translate .2s var(--ease); }
.button:active { translate: 0 1px; }
.button small { padding: 3px 6px; border: 1px solid currentColor; border-radius: 6px; font: 600 .625rem/1 var(--mono); letter-spacing: .08em; opacity: .6; }
.button-primary { background: var(--accent); color: var(--on-accent); box-shadow: 0 14px 28px -16px var(--accent), inset 0 1px 0 rgba(255, 255, 255, .16); }
.button-secondary { border-color: var(--line-strong); background: var(--surface); color: var(--ink); }
.button-ghost { border-color: color-mix(in srgb, var(--page) 26%, transparent); color: var(--page); }
.button[data-copied] .icon-copy, .button:not([data-copied]) .icon-check { display: none; }
.section { padding-block-start: var(--section); }
.section-heading { display: grid; gap: 12px; margin-block-end: 28px; }
.section-index { display: flex; align-items: center; gap: 12px; color: var(--accent-ink); }
.section-index::after { content: ""; flex: 1; block-size: 1px; background: var(--line); }
.section-heading h2 { color: var(--ink); font: 400 clamp(2.5rem, 11vw, 4.5rem)/.95 var(--serif); letter-spacing: -.035em; }
.section-meta { color: var(--muted); font: 500 .8125rem/1.5 var(--mono); }
.roles { display: grid; gap: 16px; }
.role { display: grid; overflow: clip; }
.role-map { --pin-x: 64%; --pin-y: 44%; --fade: radial-gradient(var(--pin-x) calc(100% - var(--pin-y)) at var(--pin-x) var(--pin-y), #000 22%, rgba(0, 0, 0, .5) 58%, transparent); grid-area: 1 / 1; justify-self: end; position: relative; inline-size: 80%; overflow: hidden; pointer-events: none; -webkit-mask-image: var(--fade); mask-image: var(--fade); }
.role-map svg { position: absolute; inset-block-start: var(--pin-y); inset-inline-start: var(--pin-x); display: block; inline-size: 175%; aspect-ratio: 1; translate: -50% -50%; transform: perspective(560px) rotateX(50deg) rotateZ(-10deg); }
.role-pin { position: absolute; inset-block-start: var(--pin-y); inset-inline-start: var(--pin-x); inline-size: 11px; block-size: 11px; border: 2px solid var(--surface); border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px var(--accent-soft), 0 8px 20px -4px var(--accent); translate: -50% -50%; }
.is-live .role-pin::before { content: ""; position: absolute; inset: -2px; border-radius: 50%; background: var(--accent); animation: ping 2.6s var(--ease) infinite; }
.role-meta { grid-area: 1 / 1; position: relative; z-index: 1; display: grid; align-content: start; gap: 18px; padding: 18px 18px 20px; }
.role-spec { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 16px 12px; }
.role-spec > div { display: grid; align-content: start; gap: 6px; min-inline-size: 0; }
.role-spec dd { color: var(--ink); font: 500 .8125rem/1.35 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.spec-place { grid-column: 1 / -1; }
.spec-place dd { display: grid; gap: 2px; font-family: var(--sans); font-weight: 600; letter-spacing: -.005em; }
.spec-place small { color: var(--muted); font: 500 .75rem/1.4 var(--mono); letter-spacing: 0; }
.role-live { display: inline-flex; align-items: center; gap: 8px; color: var(--accent-ink); }
.role-live::before { content: ""; inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--accent); animation: pulse 2.4s ease-out infinite; }
.role-track { display: grid; gap: 8px; }
.track-bar { position: relative; block-size: 6px; border-radius: 999px; background: var(--chip); }
.track-bar i { position: absolute; inset-block: 0; inset-inline-start: var(--x); inline-size: var(--w); border-radius: 999px; background: var(--line-strong); box-shadow: 0 0 0 1.5px var(--surface); }
.track-bar .is-self { z-index: 1; background: var(--accent); box-shadow: 0 0 0 1.5px var(--surface), 0 0 14px var(--glow); }
.chip-track { inline-size: 72px; block-size: 3px; }
.chip-track i, .chip-track .is-self { box-shadow: 0 0 0 1px var(--page); }
.track-scale { display: flex; justify-content: space-between; }
.role-body { grid-area: 2 / 1; position: relative; z-index: 1; display: grid; align-content: start; gap: 18px; padding: 20px 18px 22px; border-block-start: 1px dashed var(--line-strong); }
.role-head { display: grid; gap: 10px; }
.role-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.role-head h3 { color: var(--ink); font-size: 1.25rem; font-weight: 650; line-height: 1.25; letter-spacing: -.02em; text-wrap: balance; }
.role-company { color: var(--text); font-size: .9375rem; font-weight: 550; }
.role-company a { display: inline-flex; align-items: center; gap: 4px; margin-block: -8px; padding-block: 8px; color: var(--accent-ink); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent); text-decoration-thickness: 1px; text-underline-offset: 4px; transition: text-decoration-color .2s var(--ease); }
.role-domain { padding: 4px 9px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); }
.role-headline { color: var(--ink); font-size: 1rem; font-weight: 500; line-height: 1.5; letter-spacing: -.01em; text-wrap: pretty; }
.role-points { display: grid; gap: 12px; max-inline-size: 46rem; }
.role-points li { position: relative; padding-inline-start: 22px; font-size: .9375rem; line-height: 1.65; text-wrap: pretty; overflow-wrap: break-word; }
.role-points li::before { content: ""; position: absolute; inset-inline-start: 2px; inset-block-start: .82em; inline-size: 10px; block-size: 1.5px; border-radius: 1px; background: var(--accent); }
.role-points strong { color: var(--ink); }
.role-stack { display: flex; flex-wrap: wrap; gap: 6px; padding-block-start: 18px; border-block-start: 1px solid var(--line); }
.tag { padding: 5px 9px; border: 1px solid var(--line); border-radius: 7px; background: var(--page); color: var(--text); font: 500 .75rem/1.3 var(--mono); transition: border-color .2s var(--ease), color .2s var(--ease); }
.skills { columns: 19rem; column-gap: 16px; }
.skill { display: grid; gap: 16px; margin-block-end: 16px; padding: 20px 18px; break-inside: avoid; }
.skill-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.skill-head h3 { color: var(--ink); font-size: 1.0625rem; font-weight: 650; letter-spacing: -.015em; }
.skill-head span { color: var(--muted); font: 500 .75rem/1 var(--mono); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips li { display: flex; }
.chip { display: inline-grid; align-content: center; gap: 6px; padding: 7px 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--page); color: var(--text); font-size: .8125rem; font-weight: 500; line-height: 1.35; text-align: start; }
button.chip { padding-block-end: 8px; color: var(--ink); transition: border-color .2s var(--ease), background-color .2s var(--ease), translate .2s var(--ease); }
button.chip:active { translate: 0 1px; }
.chip-meta { display: flex; align-items: center; gap: 8px; color: var(--muted); font: 500 .6875rem/1 var(--mono); }
.chip.is-current { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.chip.is-current .chip-meta { color: var(--accent-ink); }
.skills-legend { display: flex; align-items: center; gap: 12px; margin-block: -10px 24px; color: var(--muted); font-size: .8125rem; line-height: 1.5; text-wrap: pretty; }
.legend-track { flex: none; }
.legend-track::before, .legend-track::after { content: ""; position: absolute; inset-block: 0; border-radius: inherit; background: var(--accent); }
.legend-track::before { inset-inline: 0 76%; }
.legend-track::after { inset-inline: 58% 0; }
.sheet { --sheet-hidden: 0 100%; --sheet-scale: 1; --sheet-opacity: 1; position: fixed; inset: auto 0 0; inline-size: 100%; max-inline-size: none; block-size: auto; max-block-size: min(88svh, 780px); margin: 0; padding: 0 20px calc(28px + env(safe-area-inset-bottom, 0px)); border: 1px solid var(--line); border-block-end: 0; border-radius: 28px 28px 0 0; background: var(--surface); color: var(--text); box-shadow: 0 -24px 64px -24px var(--shade); overflow: auto; overscroll-behavior: contain; translate: var(--sheet-hidden); scale: var(--sheet-scale); opacity: var(--sheet-opacity); transition: translate .5s var(--ease), scale .4s var(--ease), opacity .3s var(--ease), display .5s allow-discrete, overlay .5s allow-discrete; }
.sheet:popover-open { translate: none; scale: 1; opacity: 1; }
.sheet::backdrop { background: rgba(8, 7, 6, 0); -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); transition: background-color .5s var(--ease), backdrop-filter .5s var(--ease), display .5s allow-discrete, overlay .5s allow-discrete; }
.sheet:popover-open::backdrop { background: rgba(8, 7, 6, .46); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.sheet-grip { position: sticky; inset-block-start: 0; z-index: 2; display: grid; place-items: center; block-size: 26px; margin-inline: -20px; background: var(--surface); cursor: grab; touch-action: none; }
.sheet-grip::before { content: ""; inline-size: 40px; block-size: 5px; border-radius: 999px; background: var(--line-strong); }
.sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-block: 6px 20px; touch-action: none; }
.sheet-kicker { color: var(--accent-ink); }
.sheet-head h3 { margin-block-start: 8px; color: var(--ink); font: 400 clamp(2rem, 9vw, 2.75rem)/1 var(--serif); letter-spacing: -.03em; overflow-wrap: anywhere; }
.sheet-blurb { margin-block-end: 18px; color: var(--ink); font-size: 1rem; line-height: 1.6; text-wrap: pretty; }
.sheet-close { display: grid; place-items: center; flex: none; inline-size: var(--touch); block-size: var(--touch); margin-inline-end: -6px; border-radius: 999px; background: var(--chip); color: var(--ink); transition: background-color .2s var(--ease); }
.sheet-stats { display: grid; grid-template-columns: repeat(3, auto); gap: 1px; border: 1px solid var(--line); border-radius: 14px; background: var(--line); overflow: hidden; }
.sheet-stats > div { display: grid; align-content: start; gap: 6px; padding: 12px 14px 14px; background: var(--page); }
.sheet-stats dd { color: var(--ink); font: 400 1.125rem/1 var(--serif); letter-spacing: -.02em; white-space: nowrap; }
.sheet-track { display: grid; gap: 8px; margin-block-start: 18px; }
.sheet-label { margin-block: 26px 10px; }
.sheet-uses { display: grid; gap: 10px; }
.sheet-uses > li { display: grid; gap: 12px; padding: 14px 16px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--page); }
.sheet-role { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 12px; }
.sheet-role > :not(.icon) { grid-column: 1; }
.sheet-role strong { color: var(--ink); font-size: 1rem; letter-spacing: -.01em; }
.sheet-role-title { color: var(--text); font-size: .875rem; }
.sheet-role-meta { color: var(--muted); font: 500 .75rem/1.5 var(--mono); }
.sheet-role .icon { grid-column: 2; grid-row: 1 / span 3; color: var(--accent-ink); transition: translate .2s var(--ease); }
.sheet-quotes { display: grid; gap: 10px; padding-block-start: 12px; border-block-start: 1px solid var(--line); }
.sheet-quotes li { padding-inline-start: 12px; border-inline-start: 2px solid var(--line-strong); font-size: .875rem; line-height: 1.6; text-wrap: pretty; }
.sheet-note { padding-block-start: 12px; border-block-start: 1px solid var(--line); color: var(--muted); font-size: .8125rem; }
.creds { display: grid; }
.cred { display: grid; align-content: start; gap: 18px; padding: 20px 18px; }
.cred + .cred { border-block-start: 1px solid var(--line); }
.cred-list { display: grid; gap: 16px; }
.cred-list li { display: grid; gap: 3px; }
.cred-list li + li { padding-block-start: 16px; border-block-start: 1px solid var(--line); }
.cred-list strong { color: var(--ink); font-size: 1.0625rem; line-height: 1.35; letter-spacing: -.01em; }
.cred-list span { font-size: .9375rem; }
.cred-list small { color: var(--muted); font: 500 .75rem/1.5 var(--mono); }
.contact { padding-block-end: 24px; }
.contact-panel { display: grid; gap: 20px; padding: 32px 20px 8px; border-radius: calc(var(--radius) + 6px); background: radial-gradient(80% 70% at 100% 0%, color-mix(in srgb, var(--accent-invert) 30%, transparent), transparent 70%), var(--ink); color: color-mix(in srgb, var(--page) 74%, var(--ink)); }
.contact-panel .section-index { color: var(--accent-invert); }
.contact-panel .section-index::after { background: color-mix(in srgb, var(--page) 18%, transparent); }
.contact-panel :focus-visible { outline-color: var(--accent-invert); }
.contact-panel h2 { color: var(--page); font: 400 clamp(2.5rem, 11vw, 4.5rem)/.95 var(--serif); letter-spacing: -.035em; }
.contact-lead { max-inline-size: 30rem; text-wrap: pretty; }
.contact-mail { justify-self: start; max-inline-size: 100%; color: var(--page); font: 400 clamp(1.5rem, 7.4vw, 3.5rem)/1.15 var(--serif); letter-spacing: -.02em; overflow-wrap: anywhere; text-decoration: underline; text-decoration-color: var(--accent-invert); text-decoration-thickness: 2px; text-underline-offset: .18em; transition: text-decoration-color .2s var(--ease); }
.contact-actions { display: grid; gap: 10px; }
.contact-links { display: grid; margin-block-start: 4px; }
.contact-links a { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 16px; min-block-size: 68px; padding-block: 12px; border-block-start: 1px solid color-mix(in srgb, var(--page) 16%, transparent); }
.contact-links strong { color: var(--page); font-size: 1.0625rem; }
.contact-links span { grid-row: 2; color: color-mix(in srgb, var(--page) 60%, var(--ink)); font: 500 .8125rem/1.4 var(--mono); }
.contact-links .icon { grid-row: 1 / span 2; grid-column: 2; color: var(--page); transition: translate .25s var(--ease); }
.footer { padding-block: 24px calc(108px + env(safe-area-inset-bottom, 0px)); color: var(--muted); font-size: .8125rem; }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 20px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.footer-links a { display: inline-flex; align-items: center; gap: 6px; min-block-size: var(--touch); color: var(--text); font-weight: 600; transition: color .2s var(--ease); }
.footer-credit a { text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.status { display: grid; align-content: center; justify-items: start; gap: 16px; min-block-size: 100svh; padding-block: 48px; }
.status-code { color: var(--accent-ink); }
.status h1 { color: var(--ink); font: 400 clamp(2.75rem, 12vw, 5rem)/.95 var(--serif); letter-spacing: -.035em; }
.status-ref { color: var(--muted); font: 500 .8125rem/1.5 var(--mono); }
@starting-style {
    .sheet:popover-open { translate: var(--sheet-hidden); scale: var(--sheet-scale); opacity: var(--sheet-opacity); }
    .sheet:popover-open::backdrop { background: rgba(8, 7, 6, 0); -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); }
}
@keyframes enter { from { opacity: 0; translate: 0 18px; filter: blur(6px); } }
@keyframes rise { from { opacity: 0; translate: 0 32px; } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes grow { to { scale: 1 1; } }
@keyframes ping { from { opacity: .55; scale: 1; } to { opacity: 0; scale: 3.4; } }
@keyframes map-camera { from { transform: perspective(560px) rotateX(64deg) rotateZ(-34deg) scale(.86); } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 8px transparent; } }
@supports (animation-timeline: scroll()) {
    .topbar::before { animation: fade-in linear both; animation-timeline: scroll(root); animation-range: 0px 64px; }
    .progress { animation: grow linear both; animation-timeline: scroll(root); }
    .reveal { animation: rise var(--ease) both; animation-timeline: view(); animation-range: entry 0% entry 240px; }
    .role { view-timeline: --role block; }
    .role-map svg { animation: map-camera var(--ease) both; animation-timeline: --role; animation-range: entry 0% cover 45%; }
}
@supports (timeline-scope: none) {
    body { timeline-scope: --hero-title; }
    .hero-title { view-timeline: --hero-title block; view-timeline-inset: var(--top) 0px; }
    .brand-name { animation: fade-in linear both; animation-timeline: --hero-title; animation-range: exit 25% exit 85%; }
}
@media (min-width: 640px) {
    :root { --gutter: 24px; --section: 104px; }
    .hero { padding-block: 56px 88px; }
    .hero-actions { grid-auto-flow: column; justify-content: start; }
    .hero-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .role-meta { padding: 24px 28px; }
    .role-spec { grid-template-columns: repeat(4, max-content); justify-content: start; column-gap: 36px; }
    .role-map { --pin-x: 84%; --pin-y: 50%; inline-size: 60%; }
    .role-spec dd { font-size: .875rem; }
    .spec-place { grid-column: auto; }
    .role-body { padding: 24px 28px 28px; }
    .role-headline { font-size: 1.0625rem; }
    .role-points li { font-size: 1rem; }
    .skill, .cred { padding: 24px; }
    .sheet-stats dd { font-size: 1.375rem; }
    .contact-actions { display: flex; flex-wrap: wrap; }
    .contact-panel { padding: 48px 40px 12px; }
}
@media (min-width: 768px) {
    :root { --header: 64px; }
    html { scroll-padding-block-end: 0px; }
    .topbar-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
    .dock { position: static; inline-size: auto; max-inline-size: none; margin: 0; background: color-mix(in srgb, var(--surface) 72%, transparent); box-shadow: 0 1px 2px var(--shade); -webkit-backdrop-filter: none; backdrop-filter: none; }
    .dock a { padding-inline: 14px; }
    .dock .dock-mail { inline-size: auto; padding-inline: 14px 16px; }
    .dock-mail span { display: inline; }
    .theme-toggle { justify-self: end; }
    .hero-title { font-size: clamp(4.5rem, 11.2vw, 9.5rem); }
    .hero-title span { display: inline; }
    .section-heading { grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 32px; margin-block-end: 44px; }
    .section-index { grid-column: 1 / -1; }
    .section-meta { padding-block-end: 8px; }
    .skills-legend { margin-block: -24px 32px; }
    .sheet { --sheet-hidden: 0 16px; --sheet-scale: .96; --sheet-opacity: 0; inset: 0; inline-size: min(600px, calc(100% - 48px)); max-block-size: min(84vh, 780px); margin: auto; padding: 28px 28px 28px; border-block-end: 1px solid var(--line); border-radius: 28px; box-shadow: 0 48px 120px -32px var(--shade); }
    .sheet-grip { display: none; }
    .sheet-head { padding-block-start: 0; touch-action: auto; }
    .footer { padding-block-end: calc(32px + env(safe-area-inset-bottom, 0px)); }
}
@media (min-width: 1024px) {
    :root { --gutter: 32px; --section: 136px; }
    .hero { padding-block: 72px 120px; }
    .hero-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); grid-template-areas: "eyebrow eyebrow" "title title" "role facts" "lead facts" "actions facts"; column-gap: 80px; row-gap: 24px; }
    .hero-eyebrow { grid-area: eyebrow; }
    .hero-title { grid-area: title; margin-block-end: 24px; }
    .hero-role { grid-area: role; font-size: 1.375rem; }
    .hero-lead { grid-area: lead; font-size: 1.125rem; }
    .hero-actions { grid-area: actions; margin-block-start: 12px; }
    .hero-facts { grid-area: facts; grid-template-columns: repeat(2, minmax(0, 1fr)); align-self: end; margin: 0; }
    .hero-facts > div { padding: 24px 22px 26px; }
    .hero-facts dd { font-size: 3.25rem; }
    .role { grid-template-columns: 17rem minmax(0, 1fr); }
    .role-meta { position: sticky; inset-block-start: calc(var(--top) + 24px); align-self: start; padding: 32px 28px; }
    .role-spec { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 22px; }
    .spec-span, .spec-place { grid-column: 1 / -1; }
    .role-body { grid-area: 1 / 2; padding: 32px 40px 36px; border-block-start: 0; border-inline-start: 1px dashed var(--line-strong); }
    .role-head h3 { font-size: 1.5rem; }
    .role-map { --pin-x: 70%; --pin-y: 24%; grid-area: 1 / 2; align-self: start; inline-size: 520px; block-size: 380px; }
    .role-map svg { inline-size: 130%; }
    .role-points { max-inline-size: 36rem; }
    .skill, .cred { padding: 28px; }
    .creds { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .cred + .cred { border-block-start: 0; border-inline-start: 1px solid var(--line); }
    .contact-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); grid-template-areas: "eyebrow eyebrow" "title links" "lead links" "mail links" "actions links"; column-gap: 72px; row-gap: 24px; padding: 64px 56px; }
    .contact-panel .section-index { grid-area: eyebrow; }
    .contact-panel h2 { grid-area: title; }
    .contact-lead { grid-area: lead; }
    .contact-mail { grid-area: mail; }
    .contact-actions { grid-area: actions; }
    .contact-links { grid-area: links; align-self: end; margin: 0; }
}
@media (hover: hover) {
    .dock a:not([aria-current="true"], .dock-mail):hover { background: var(--chip); color: var(--ink); }
    .dock .dock-mail:hover { background: var(--accent-ink); }
    .theme-toggle:hover { background: var(--chip); }
    .sheet-close:hover { background: var(--line); }
    button.chip:hover, .tag:hover { border-color: var(--accent); background: var(--surface); color: var(--ink); }
    .sheet-role:hover .icon { translate: 3px 0; }
    .button-primary:hover { background: var(--accent-ink); box-shadow: 0 18px 32px -16px var(--accent); }
    .button-secondary:hover { border-color: var(--ink); }
    .button-ghost:hover { border-color: color-mix(in srgb, var(--page) 46%, transparent); background: color-mix(in srgb, var(--page) 8%, transparent); }
    .card:hover { border-color: var(--line-strong); box-shadow: 0 28px 56px -36px var(--shade); }
    .role-company a:hover { text-decoration-color: currentColor; }
    .contact-mail:hover { text-decoration-color: var(--page); }
    .contact-links a:hover .icon { translate: 3px -3px; }
    .footer-links a:hover, .footer-credit a:hover { color: var(--accent-ink); }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .hero-inner > *, .reveal, .role-live::before, .is-live .role-pin::before, .role-map svg { animation: none; }
    .skip-link, .dock a, .theme-toggle, .theme-toggle .icon, .button, .card, .role-company a, .contact-mail, .contact-links .icon, .footer-links a, button.chip, .tag, .sheet, .sheet::backdrop, .sheet-close, .sheet-role .icon { transition: none; }
}
@media print {
    :root, :root[data-theme] { color-scheme: light; }
    .topbar, .skip-link, .hero::before, .hero::after, .role-map, .skills-legend, .sheet, .contact-actions, .footer-links { display: none; }
    .hero-inner > *, .reveal { animation: none; }
    .card { break-inside: avoid; }
    .role-meta { position: static; }
    .contact-panel { background: none; color: var(--text); }
    .contact-panel h2, .contact-mail, .contact-links strong, .contact-links .icon { color: var(--ink); }
    .contact-links span { color: var(--muted); }
    .footer { padding-block-end: 24px; }
}