:root {
  --paper: #f4f3ef;
  --white: #fff;
  --ink: #11110f;
  --ink-soft: #3f3f3a;
  --muted: #696962;
  --muted-dark: #55554e;
  --muted-light: #bcbcb5;
  --muted-light-strong: #b8b8b1;
  --quiet: #8f8f89;
  --quiet-dark: #777772;
  --quiet-light: #a8a8a1;
  --quiet-surface: #9b9b95;
  --blue-light: #eef1ff;
  --line: rgba(17, 17, 15, 0.16);
  --line-dark: rgba(255,255,255,.25);
  --blue: #2f5bff;
  --lime: #d9ff57;
  --error: #ffb4aa;
  --radius: 18px;
  --shell: min(1440px, calc(100vw - 64px));
  --header-height: 88px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-base: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;
  --section-airy: clamp(112px,10vw,144px);
  --section-standard: clamp(88px,8vw,120px);
  --section-compact: clamp(64px,6vw,96px);
  --z-header: 40;
  --z-progress: 50;
  --z-menu: 60;
  --z-menu-control: 70;
  --z-skip: 80;
  --font-sans: "Hanken Grotesk", "Segoe UI", Arial, sans-serif;
  --font-accent: "Source Serif 4", Georgia, "Times New Roman", serif;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --leading-body: 1.5;
  --leading-title: 1.06;
  --leading-display: .97;
  --tracking-title: -.025em;
  --tracking-display: -.035em;
  --text-label: .75rem;
  --text-meta: .875rem;
  --text-body: 1rem;
  --text-lead: 1.125rem;
  --text-control: 1.25rem;
  --text-wordmark: 1.5rem;
  --text-icon: 1.625rem;
  --text-card-title: 1.75rem;
  --text-copy-icon: 1.0625rem;
  --ease-responsive: cubic-bezier(.2,.7,.2,1);
  --ease-smooth: cubic-bezier(.22,1,.36,1);
  --ease-expo: cubic-bezier(.16,1,.3,1);
  --motion-instant: 120ms;
  --motion-state: 240ms;
  --motion-layout: 400ms;
  --motion-entrance: 650ms;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: clip; background: var(--paper); color: var(--ink); font-family: var(--font-sans); font-size: var(--text-body); font-weight: var(--weight-regular); line-height: var(--leading-body); font-kerning: normal; font-optical-sizing: auto; font-synthesis: none; -webkit-font-smoothing: antialiased; }
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, textarea { font: inherit; }
button { color: inherit; }
button,summary,a { touch-action: manipulation; }
::selection { background: var(--blue); color: var(--white); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
.section-dark :focus-visible { outline-color: var(--lime); }
.skip-link { position: fixed; left: var(--space-base); top: var(--space-base); z-index: var(--z-skip); background: var(--ink); color: var(--white); padding: var(--space-md) var(--space-lg); border-radius: 999px; transform: translateY(-80px); transition: transform var(--motion-state) var(--ease-expo); }
.skip-link:focus { transform: translateY(0); }
.page-shell { width: min(1440px, calc(100% - max(64px, calc(var(--safe-left) + var(--safe-right) + 32px)))); margin-left: auto; margin-right: auto; margin-inline: auto; }
.section-space { padding-top: var(--section-standard); padding-bottom: var(--section-standard); }
.scroll-progress { position: fixed; z-index: var(--z-progress); top: 0; left: 0; width: 100%; height: 2px; transform: scaleX(0); transform-origin: left; background: var(--blue); pointer-events: none; will-change: transform; }
.site-header { position: fixed; z-index: var(--z-header); top: 0; left: 0; width: 100%; height: calc(var(--header-height) + var(--safe-top)); display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; padding: var(--safe-top) max(var(--space-xl),var(--safe-right)) 0 max(var(--space-xl),var(--safe-left)); background: var(--paper); border-bottom: 1px solid transparent; transition: transform .35s ease, border-color .35s ease; }
.site-header.scrolled { border-bottom-color: var(--line); }
.site-header.hidden { transform: translateY(-100%); }
body.menu-open .site-header { z-index: var(--z-menu-control); }
.noscript-nav { display: none; }
.wordmark { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-self: start; font-size: var(--text-wordmark); font-weight: var(--weight-bold); letter-spacing: var(--tracking-display); }
.wordmark span { display: inline-block; color: var(--blue); transform-origin: 50% 70%; transition: transform var(--motion-state) var(--ease-expo); }
.wordmark:hover span,.wordmark:focus-visible span { transform: translateY(-2px) rotate(12deg) scale(1.2); }
.wordmark-light span { color: var(--lime); }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
.desktop-nav { display: flex; gap: 0; font-size: var(--text-meta); }
.desktop-nav a + a { margin-left: var(--space-xl); }
.desktop-nav a { position: relative; min-height: 44px; display: inline-flex; align-items: center; }
.desktop-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 7px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease-expo); }
.desktop-nav a:hover::after, .desktop-nav a:focus-visible::after { transform: scaleX(1); }
.header-cta { justify-self: end; }

.button { --mx: 0px; --my: 0px; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xl); padding: 0 var(--space-lg); border: 1px solid transparent; border-radius: 999px; font-size: var(--text-meta); font-weight: var(--weight-semibold); cursor: pointer; transform: translate(var(--mx),var(--my)); transition: transform .25s var(--ease-responsive), background .25s ease, color .25s ease; }
.button:hover,.button:focus-visible { transform: translate(var(--mx),calc(var(--my) - 2px)); }
.button:active { transform: translate(var(--mx),var(--my)) scale(.98); }
.button > span:last-child { transition: transform .3s var(--ease-responsive); }
.button:hover > span:last-child,.button:focus-visible > span:last-child { transform: translate(4px,-4px); }
.button-dark { background: var(--ink); color: var(--white); }
.button-dark:hover,.button-dark:focus-visible { background: var(--blue); }
.button-outline { border-color: var(--ink); margin-top: var(--space-2xl); }
.button-outline:hover,.button-outline:focus-visible { background: var(--ink); color: var(--white); }
.button-light { background: var(--white); color: var(--ink); border: 0; }
.button-light:hover,.button-light:focus-visible { background: var(--lime); }
.button:disabled { cursor: wait; opacity: .72; transform: none; }
.menu-button { display: none; justify-self: end; width: 48px; height: 48px; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: transparent; cursor: pointer; position: relative; z-index: var(--z-menu-control); }
.menu-button span { position: absolute; left: 14px; top: 23px; width: 18px; height: 1px; background: currentColor; transition: transform var(--motion-state) var(--ease-expo); }
.menu-button span:first-child { transform: translateY(-4px); }.menu-button span:last-child { transform: translateY(4px); }
.menu-button[aria-expanded="true"] span:first-child { transform: rotate(45deg); }.menu-button[aria-expanded="true"] span:last-child { transform: rotate(-45deg); }
.mobile-menu { display: none; position: fixed; z-index: var(--z-menu); inset: 0; padding: 120px var(--space-lg) var(--space-xl); background: var(--paper); opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s ease; }
.mobile-menu.open { opacity: 1; visibility: visible; }
.mobile-menu nav { display: grid; }
.mobile-menu nav a { display: flex; justify-content: space-between; align-items: center; min-height: 64px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: clamp(2.375rem,12vw,4rem); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-display); line-height: 1; opacity: 0; transform: translateY(16px); transition: opacity var(--motion-state) ease, transform var(--motion-layout) var(--ease-expo); }
.mobile-menu.open nav a { opacity: 1; transform: translateY(0); }
.mobile-menu.open nav a:nth-child(1) { transition-delay: 40ms; }.mobile-menu.open nav a:nth-child(2) { transition-delay: 80ms; }.mobile-menu.open nav a:nth-child(3) { transition-delay: 120ms; }
.mobile-menu-footer { position: absolute; bottom: 28px; font-size: var(--text-meta); opacity: 0; transform: translateY(8px); transition: opacity var(--motion-state) ease, transform var(--motion-layout) var(--ease-expo); }
.mobile-menu.open .mobile-menu-footer { opacity: 1; transform: translateY(0); transition-delay: 160ms; }
.mobile-menu-footer p { margin: 5px 0 0; color: var(--muted); }
.mobile-menu-footer a { min-height: 44px; display: inline-flex; align-items: center; }

.hero { width: 100%; max-width: none; min-height: 100vh; min-height: 100svh; margin: 0; padding-block: calc(var(--header-height) + var(--safe-top) + 72px) var(--space-xl); padding-inline-start: max(32px,var(--safe-left),calc((100vw - 1440px) / 2)); padding-inline-end: max(32px,var(--safe-right),calc((100vw - 1440px) / 2)); display: flex; flex-direction: column; background: var(--paper); color: var(--ink); border-bottom: 1px solid var(--line); }
.eyebrow, .section-label { margin: 0; font-size: var(--text-label); font-weight: var(--weight-semibold); letter-spacing: .1em; text-transform: uppercase; }
.connect-heading .section-label,.archive-heading .section-label,.contact-inner > .section-label { font-size: var(--text-meta); font-weight: var(--weight-medium); letter-spacing: 0; text-transform: none; }
.hero .eyebrow { color: var(--blue); }
.hero-title { margin: 28px 0 0; max-width: 1300px; font-size: clamp(3.25rem,7vw,6rem); font-weight: var(--weight-bold); letter-spacing: var(--tracking-display); line-height: .95; overflow-wrap: break-word; text-wrap: balance; clip-path: none; }
.hero-title span { display: block; color: var(--blue); }
.hero-bottom { display: flex; justify-content: space-between; align-items: end; gap: var(--space-2xl); margin-top: var(--space-2xl); }
.hero-intro { max-width: 62ch; margin: 0; color: var(--muted); font-size: clamp(var(--text-lead),1.6vw,var(--text-wordmark)); line-height: 1.5; text-wrap: pretty; }
.text-link { min-height: 44px; display: inline-flex; align-items: center; gap: 32px; padding-bottom: 6px; border-bottom: 1px solid currentColor; font-weight: var(--weight-semibold); }
.text-link span { transition: transform .25s var(--ease-responsive); }.text-link:hover span,.text-link:focus-visible span { transform: translateY(4px); }
.hero-visual { min-height: 300px; display: grid; grid-template-columns: minmax(0,1.5fr) minmax(280px,1fr); align-items: stretch; gap: var(--space-base); margin-top: auto; padding-top: var(--space-2xl); }
.hero-visual > *,.timeline-row > *,.credential-card,.skill-column,.blog-card,.connect-link,.archive-card,.contact-grid > div,.footer-inner > * { min-width: 0; }
.portrait-wrap { height: clamp(300px,26vw,410px); overflow: hidden; border-radius: var(--radius); background: #d9dad7; }
.portrait-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; }
.hero-statement { min-height: 300px; display: flex; flex-direction: column; justify-content: space-between; padding: var(--space-xl); border-radius: var(--radius); background: var(--ink); color: var(--white); }.hero-statement p { margin: 0; font-size: var(--text-meta); }.hero-statement strong { font-size: clamp(1.5625rem,2.7vw,2.625rem); font-weight: var(--weight-semibold); line-height: var(--leading-title); letter-spacing: var(--tracking-title); text-wrap: balance; }
.current-label { display: inline-flex; align-items: center; gap: var(--space-sm); }
.current-label > span { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 0 color-mix(in srgb,var(--lime) 34%,transparent); transition: box-shadow var(--motion-state) ease; }
.hero-statement:hover .current-label > span { box-shadow: 0 0 0 6px color-mix(in srgb,var(--lime) 12%,transparent); }
.hero-role { display: grid; gap: var(--space-md); }
.local-time { display: inline-flex; align-items: center; gap: 5px; color: var(--quiet-light); font-size: var(--text-label); letter-spacing: .04em; text-transform: uppercase; }
.local-time time { color: var(--white); font-variant-numeric: tabular-nums; }
.section-heading h2, .writing h2, .contact h2 { max-width: 15ch; margin: 0; font-size: clamp(3rem,5vw,4.5rem); letter-spacing: var(--tracking-display); line-height: var(--leading-display); font-weight: var(--weight-semibold); text-wrap: balance; }
.experience .section-heading h2, .writing h2 { font-size: clamp(3.25rem,5.5vw,5rem); }
.contact h2 em { font-family: var(--font-accent); font-weight: var(--weight-regular); }
.section-heading { display: grid; grid-template-columns: repeat(12,1fr); align-items: start; gap: var(--space-xl); margin-bottom: var(--space-4xl); }
.section-heading > .section-label { grid-column: 1 / span 3; }
.section-heading h2 { grid-column: 6 / -1; max-width: 900px; }
.experience,.writing { padding-top: var(--section-airy); padding-bottom: var(--section-airy); }
.skills,.about { padding-top: var(--section-standard); padding-bottom: var(--section-standard); }
.connect,.archive { padding-top: var(--section-compact); padding-bottom: var(--section-compact); }

.section-dark { background: var(--ink); color: var(--white); }
.section-dark .section-label { color: var(--quiet-light); }
.about-grid { display: grid; grid-template-columns: 5fr 6fr; justify-content: space-between; gap: var(--space-4xl); padding-top: var(--space-4xl); border-top: 1px solid var(--line-dark); }
.about-lead { margin: 0; font-size: clamp(1.75rem,3vw,2.75rem); font-weight: var(--weight-medium); line-height: 1.18; letter-spacing: var(--tracking-title); text-wrap: pretty; }
.about-copy { max-width: 620px; }.about-copy p { margin: 0 0 24px; color: var(--muted-light); font-size: var(--text-lead); text-wrap: pretty; }

.timeline { border-top: 1px solid var(--line); }
.timeline-row { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: 240px 1fr; gap: var(--space-2xl); padding: 40px var(--space-3xl) 40px 0; border-bottom: 1px solid var(--line); transition: border-color .35s ease; }
.timeline-row::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(47,91,255,.13), rgba(47,91,255,.035) 62%, transparent); transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.timeline-row::after { content: "↗"; position: absolute; right: 22px; top: 50%; color: var(--blue); font-size: var(--text-icon); opacity: 0; transform: translate(-14px,-38%); transition: opacity .3s ease, transform .4s var(--ease-responsive); }
.timeline-row:hover,.timeline-row:focus-within { border-color: rgba(47,91,255,.55); }
.timeline-row:hover::before,.timeline-row:focus-within::before { transform: scaleX(1); }
.timeline-row:hover::after,.timeline-row:focus-within::after { opacity: 1; transform: translate(0,-50%); }
.timeline-row > p { margin: 4px 0; color: var(--muted); font-size: var(--text-meta); transition: color .35s ease, transform .4s var(--ease-responsive); }
.timeline-row > div { transition: transform .4s var(--ease-responsive); }
.timeline-row:hover > p,.timeline-row:focus-within > p { color: var(--blue); transform: translateX(16px); }
.timeline-row:hover > div,.timeline-row:focus-within > div { transform: translateX(10px); }
.timeline-row h3 { margin: 0 0 5px; font-size: clamp(1.75rem,3vw,2.875rem); font-weight: var(--weight-semibold); line-height: 1.04; letter-spacing: -.03em; text-wrap: balance; transition: letter-spacing .4s ease; }
.timeline-row:hover h3,.timeline-row:focus-within h3 { letter-spacing: -.015em; }
.timeline-row div > a,.timeline-row div > span { color: var(--blue); }
.timeline-row div > a { position: relative; min-height: 44px; display: inline-flex; align-items: center; }
.timeline-row div > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 7px; height: 1px; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease-expo); }
.timeline-row:hover div > a::after,.timeline-row:focus-within div > a::after { transform: scaleX(1); }
.timeline-row div > p { max-width: 65ch; margin: 14px 0 0; color: var(--muted); transition: color .35s ease; text-wrap: pretty; }
.timeline-row:hover div > p,.timeline-row:focus-within div > p { color: var(--ink-soft); }
.timeline-row:first-child { margin: var(--space-base) 0; padding: var(--space-2xl) var(--space-3xl) var(--space-2xl) var(--space-xl); border: 0; background: var(--ink); color: var(--white); }
.timeline-row:first-child::before { background: var(--blue); }
.timeline-row:first-child::after { color: var(--lime); }
.timeline-row:first-child > p { color: var(--quiet-light); }
.timeline-row:first-child h3 { font-size: clamp(2.125rem,4vw,3.625rem); line-height: 1.02; }
.timeline-row:first-child div > a { color: var(--lime); }
.timeline-row:first-child div > a::after { background: var(--lime); }
.timeline-row:first-child div > p { color: var(--muted-light); }
.timeline-row:first-child:hover > p,.timeline-row:first-child:focus-within > p { color: var(--white); }
.timeline-row:first-child:hover div > p,.timeline-row:first-child:focus-within div > p { color: var(--white); }
.credentials-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-lg); margin-top: var(--space-3xl); }
.credential-card { min-height: 320px; display: flex; flex-direction: column; align-items: flex-start; padding: var(--space-xl); border-radius: var(--radius); background-color: var(--white); transition: background-color 260ms var(--ease-smooth); }
.credential-card.reveal.in-view:hover,.credential-card.reveal.in-view:focus-within { background-color: #f5f6ff; background-color: color-mix(in srgb, var(--blue) 6%, var(--white)); }
.credential-card > p { margin: 0 0 auto; color: var(--muted); font-size: var(--text-label); text-transform: uppercase; letter-spacing: .1em; }
.credential-card h3 { margin: 40px 0 12px; font-size: var(--text-card-title); font-weight: var(--weight-semibold); line-height: 1.08; letter-spacing: var(--tracking-title); text-wrap: balance; }
.credential-card > span { color: var(--muted); }
.credential-card a { min-height: 44px; display: inline-flex; align-items: center; margin-top: 28px; border-bottom: 1px solid currentColor; color: var(--blue); }
.credential-icon { width: 76px; height: 76px; display: grid; place-items: center; margin-bottom: 28px; border-radius: 50%; background: var(--paper); }

.section-light { background: var(--white); color: var(--ink); border-block: 1px solid var(--line); }
.section-light .section-label { color: var(--blue); }
.skill-columns { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-2xl); padding-top: var(--space-2xl); border-top: 1px solid var(--line); }
.skill-column { padding-right: var(--space-lg); border-right: 1px solid var(--line); }
.skill-column:last-child { border: 0; }
.skill-column h3 { margin: 0 0 var(--space-base); color: var(--blue); font-size: var(--text-label); font-weight: var(--weight-semibold); line-height: 1.2; letter-spacing: .1em; text-transform: uppercase; }
.skill-column p { max-width: 24ch; margin: 0; color: var(--ink); font-size: clamp(1.5rem,2.25vw,2.125rem); font-weight: var(--weight-medium); line-height: 1.28; letter-spacing: -.018em; text-wrap: pretty; }
.skill-notes { margin-top: var(--space-3xl); padding-top: var(--space-xl); border-top: 1px solid var(--line); }
.skill-notes > p { max-width: 68ch; margin: 0; color: var(--muted); font-size: var(--text-lead); line-height: 1.55; text-wrap: pretty; }

.blog-grid { display: grid; grid-template-columns: repeat(12,1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.blog-card { position: relative; isolation: isolate; min-height: 380px; display: grid; grid-template-columns: 1fr; align-content: space-between; gap: var(--space-lg); padding: var(--space-xl); overflow: hidden; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: color .5s var(--ease-smooth); }
.blog-card:first-child { grid-column: span 7; grid-row: span 2; min-height: 560px; background: var(--ink); color: var(--white); }
.blog-card:nth-child(n+2) { grid-column: span 5; min-height: 280px; }
.blog-card:first-child::before { background: var(--blue); }
.blog-card:first-child > p { color: var(--muted-light-strong); }
.blog-card:first-child h3 { max-width: 17ch; font-size: clamp(2.75rem,5vw,4rem); }
.blog-card:first-child > div { color: var(--muted-light-strong); }
.blog-card:first-child > div strong { color: var(--lime); }
.blog-card:nth-child(n+2) h3 { margin: var(--space-lg) 0; font-size: clamp(1.5625rem,2.5vw,2.375rem); }
.blog-card::before { content: ""; position: absolute; z-index: -1; inset: 0; background: var(--ink); transform: scaleY(0); transform-origin: bottom; transition: transform .58s var(--ease-smooth); }
.blog-card:hover,.blog-card:focus-visible { color: var(--white); }
.blog-card:hover::before,.blog-card:focus-visible::before { transform: scaleY(1); }
.blog-card:focus-visible { outline: 2px solid var(--blue); outline-offset: -3px; }
.blog-card > p { margin: 0; color: var(--muted); font-size: var(--text-label); text-transform: uppercase; letter-spacing: .1em; transition: color .48s var(--ease-smooth), transform .48s var(--ease-smooth); }.blog-card:hover > p,.blog-card:focus-visible > p { color: var(--muted-light-strong); transform: translateY(-2px); }
.blog-card h3 { max-width: 22ch; margin: var(--space-2xl) 0; font-size: clamp(1.75rem,3.2vw,3rem); font-weight: var(--weight-semibold); line-height: 1.04; letter-spacing: -.03em; text-wrap: balance; transition: transform .56s var(--ease-smooth); }.blog-card:hover h3,.blog-card:focus-visible h3 { transform: translateY(-5px); }
.blog-card > div { display: flex; justify-content: space-between; align-items: end; gap: 40px; color: var(--muted); transition: color .48s var(--ease-smooth), transform .56s var(--ease-smooth); }.blog-card > div span { max-width: 45ch; text-wrap: pretty; }.blog-card > div strong { color: var(--ink); font-size: var(--text-wordmark); font-weight: var(--weight-regular); transition: color .48s var(--ease-smooth), transform .56s var(--ease-smooth); }.blog-card:hover > div,.blog-card:focus-visible > div { color: var(--muted-light-strong); transform: translateY(-2px); }.blog-card:hover > div strong,.blog-card:focus-visible > div strong { color: var(--lime); transform: translate(4px,-4px); }
.section-button { margin-top: 48px; }
.connect-heading { display: grid; grid-template-columns: repeat(12,1fr); gap: var(--space-xl); align-items: start; margin-bottom: var(--space-3xl); }.connect-heading > .section-label { grid-column: 1 / span 2; }.connect-heading h2 { grid-column: 3 / span 6; max-width: 13ch; margin: 0; font-size: clamp(3rem,5vw,4.5rem); font-weight: var(--weight-semibold); line-height: var(--leading-display); letter-spacing: var(--tracking-display); text-wrap: balance; }.connect-heading > p:last-child { grid-column: 10 / -1; max-width: 38ch; margin: var(--space-sm) 0 0; color: var(--quiet-surface); font-size: var(--text-lead); line-height: 1.55; text-wrap: pretty; }
.connect-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid rgba(255,255,255,.2); }
.connect-link { position: relative; display: grid; grid-template-columns: 1fr auto; gap: var(--space-lg); align-items: center; min-height: 96px; padding: var(--space-base) var(--space-lg) var(--space-base) 0; border-bottom: 1px solid rgba(255,255,255,.2); overflow: hidden; }
.connect-link:nth-child(odd) { border-right: 1px solid rgba(255,255,255,.2); padding-right: var(--space-xl); }.connect-link:nth-child(even) { padding-left: var(--space-xl); }
.connect-link::before { content: ""; position: absolute; inset: 0; background: var(--lime); transform: translateY(102%); transition: transform .4s var(--ease-responsive); }.connect-link:hover::before,.connect-link:focus-visible::before { transform: translateY(0); }
.connect-link > * { position: relative; z-index: 1; }.connect-link div { display: grid; gap: 3px; }.connect-link strong { font-size: clamp(1.375rem,2vw,1.875rem); font-weight: var(--weight-semibold); line-height: 1.15; letter-spacing: -.015em; }.connect-link small { color: var(--quiet); font-size: var(--text-meta); line-height: 1.4; transition: color .3s ease; }.connect-link i { font-size: var(--text-control); font-style: normal; transition: transform .35s ease; }.connect-link:hover,.connect-link:focus-visible { color: var(--ink); }.connect-link:hover small,.connect-link:focus-visible small { color: var(--muted-dark); }.connect-link:hover i,.connect-link:focus-visible i { transform: translate(5px,-5px); }
.connect-more { border-bottom: 1px solid rgba(255,255,255,.2); }
.connect-more summary { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); cursor: pointer; list-style: none; color: var(--white); font-weight: var(--weight-semibold); }
.connect-more summary::-webkit-details-marker { display: none; }
.connect-more summary small { color: var(--quiet); font-size: var(--text-meta); font-weight: var(--weight-regular); }
.connect-more summary::after { content: "+"; margin-left: auto; color: var(--lime); font-size: var(--text-control); font-weight: var(--weight-regular); transition: transform var(--motion-state) var(--ease-expo); }
.connect-more[open] summary::after { transform: rotate(45deg); }
.connect-more .connect-grid { border-top-color: rgba(255,255,255,.12); }
.connect-more .connect-link:last-child:nth-child(odd) { grid-column: 1 / -1; border-right: 0; }
.archive { border-top: 1px solid var(--line); }
.archive-heading { display: grid; grid-template-columns: repeat(12,1fr); gap: var(--space-xl); align-items: end; margin-bottom: var(--space-3xl); }.archive-heading > div { grid-column: 1 / span 7; }.archive-heading h2 { max-width: 14ch; margin: var(--space-lg) 0 0; font-size: clamp(2.625rem,5vw,4.5rem); font-weight: var(--weight-semibold); line-height: var(--leading-display); letter-spacing: var(--tracking-display); text-wrap: balance; }.archive-heading > p { grid-column: 9 / -1; max-width: 45ch; margin: 0; color: var(--muted); font-size: var(--text-lead); line-height: 1.55; text-wrap: pretty; }
.archive-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-base); }
.archive-media { height: clamp(280px,28vw,430px); display: grid; place-items: center; overflow: hidden; contain: paint; border-radius: var(--radius); }.archive-media img { width: 78%; max-height: 76%; object-fit: contain; box-shadow: 0 6px 8px rgba(17,17,15,.16); transition: transform .65s var(--ease-responsive); }.archive-card:hover .archive-media img,.archive-card:focus-visible .archive-media img { transform: scale(1.045) rotate(.5deg); }.archive-purple { background: #d9d0ff; }.archive-blue { background: #b9dcff; }.archive-mint { background: #c6f5dd; }
.archive-card > div:last-child { display: grid; grid-template-columns: 1fr auto; padding: 16px 2px 0; }.archive-card h3 { margin: 0; font-size: var(--text-control); font-weight: var(--weight-semibold); line-height: 1.15; letter-spacing: -.01em; }.archive-card p { margin: 2px 0 0; color: var(--muted); font-size: var(--text-meta); }.archive-card > div:last-child span { grid-column: 2; grid-row: 1 / 3; font-size: var(--text-control); transition: transform .3s ease; }.archive-card:hover > div:last-child span,.archive-card:focus-visible > div:last-child span { transform: translate(4px,-4px); }
.contact { padding: var(--section-airy) 0 var(--space-3xl); }.contact h2 { margin-top: var(--space-xl); max-width: 1200px; }.contact h2 em { color: var(--lime); }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); margin-top: var(--space-4xl); }.contact-grid > div { padding: var(--space-lg) 0; border-top: 1px solid var(--line-dark); }.contact-grid p { margin: 0 0 var(--space-sm); color: var(--quiet); font-size: var(--text-label); text-transform: uppercase; letter-spacing: .1em; }.contact-grid a { min-height: 44px; display: inline-flex; align-items: center; font-size: clamp(1.25rem,2.3vw,2.125rem); font-weight: var(--weight-medium); line-height: 1.15; letter-spacing: -.02em; }
.contact-value { display: flex; align-items: center; gap: var(--space-lg); flex-wrap: wrap; }
.copy-action { min-width: 126px; min-height: 44px; display: inline-flex; align-items: center; justify-content: space-between; gap: var(--space-sm); padding: 0 var(--space-base); border: 1px solid rgba(255,255,255,.28); border-radius: 999px; background: transparent; color: var(--quiet-light); font: inherit; font-size: var(--text-meta); cursor: pointer; transition: color var(--motion-state) ease, border-color var(--motion-state) ease, background var(--motion-state) ease, transform var(--motion-state) var(--ease-responsive); }
.copy-action:hover,.copy-action:focus-visible { border-color: var(--lime); color: var(--white); transform: translateY(-2px); }
.copy-action:active { transform: scale(.98); }
.copy-action[aria-busy="true"] { cursor: progress; opacity: .72; }
.copy-action :is([data-copy-icon],[data-enquiry-copy-icon]) { color: var(--lime); font-size: var(--text-copy-icon); line-height: 1; transition: transform var(--motion-state) var(--ease-expo); }
.copy-action.is-copied { border-color: var(--lime); background: var(--lime); color: var(--ink); }
.copy-action.is-copied :is([data-copy-icon],[data-enquiry-copy-icon]) { color: var(--ink); transform: scale(1.12) rotate(-8deg); }
.contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); margin-top: var(--space-3xl); padding-top: var(--space-2xl); border-top: 1px solid var(--line-dark); }.contact-form label { display: grid; gap: var(--space-sm); }.contact-form label span { color: var(--quiet-light); font-size: var(--text-label); text-transform: uppercase; letter-spacing: .1em; transition: color .25s ease, transform .25s ease; }.contact-form label:focus-within > span { color: var(--lime); transform: translateY(-2px); }.contact-form input, .contact-form textarea { width: 100%; padding: var(--space-sm) 0 var(--space-base); border: 0; border-bottom: 1px solid rgba(255,255,255,.45); border-radius: 0; outline: 2px solid transparent; outline-offset: 5px; resize: vertical; background: transparent; color: var(--white); font-size: var(--text-control); transition: border-color .25s ease, outline-color .25s ease; }.contact-form input:focus, .contact-form textarea:focus { border-color: var(--lime); outline-color: var(--lime); }.contact-form input::placeholder, .contact-form textarea::placeholder { color: var(--quiet); opacity: 1; }.form-message { grid-column: 1 / -1; margin-top: var(--space-lg); }.form-note { grid-column: 1 / -1; margin: var(--space-sm) 0 0; color: var(--quiet-light); font-size: var(--text-meta); }.contact-form .button { justify-self: start; margin-top: var(--space-xs); }
.contact-form input[aria-invalid="true"],.contact-form textarea[aria-invalid="true"] { border-bottom-color: var(--error); outline-color: var(--error); }
.field-hint,.field-error { min-height: 1.3em; font-size: var(--text-meta); text-transform: none; letter-spacing: 0; }
.field-hint { color: var(--quiet-light); }
.field-error { color: var(--error); }
.field-error:empty,.form-status:empty { display: none; }
.form-status { grid-column: 1 / -1; margin: 0; color: var(--white); font-size: var(--text-meta); }
.form-recovery { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); margin-top: var(--space-sm); padding: var(--space-base) 0; border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); }
.form-recovery p { max-width: 62ch; margin: 0; color: var(--quiet-light); font-size: var(--text-meta); text-wrap: pretty; }
.form-copy { flex: 0 0 auto; min-width: 184px; }
.contact-form input:-webkit-autofill,.contact-form textarea:-webkit-autofill { -webkit-text-fill-color: var(--white); caret-color: var(--white); box-shadow: 0 0 0 1000px var(--ink) inset; }
.site-footer { padding-bottom: var(--safe-bottom); border-top: 1px solid rgba(255,255,255,.18); }.footer-inner { min-height: 176px; display: grid; grid-template-columns: .5fr 2fr 1fr; gap: var(--space-2xl); align-items: center; }.wordmark-light { color: var(--white); }.footer-top { min-height: 44px; display: inline-flex; align-items: center; justify-self: start; color: var(--quiet-light); }.footer-top:hover,.footer-top:focus-visible { color: var(--lime); }.footer-inner > p { justify-self: end; margin: 0; color: var(--quiet); font-size: var(--text-label); text-align: right; }
.footer-inner .wordmark { min-width: 44px; }

@keyframes header-enter { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes hero-label-enter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes hero-title-enter { from { opacity: 0; clip-path: inset(0 0 100% 0); transform: translateY(20px); } to { opacity: 1; clip-path: inset(0); transform: translateY(0); } }
@keyframes hero-accent-enter { from { opacity: 0; transform: translateY(.28em); } to { opacity: 1; transform: translateY(0); } }
@keyframes hero-copy-enter { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes hero-panel-enter { from { opacity: 0; clip-path: inset(18% 0 0 0); transform: translateY(28px); } to { opacity: 1; clip-path: inset(0); transform: translateY(0); } }

.reveal { opacity: 1; transform: none; }
.motion-ready .reveal { opacity: 0; transform: none; transition: opacity 480ms var(--ease-smooth) var(--delay,0ms); }
.motion-ready .reveal.in-view { opacity: 1; }
.motion-ready :is(.skill-column,.blog-card,.connect-link,.archive-card).reveal { transform: translateY(20px); transition: opacity 520ms var(--ease-smooth) var(--delay,0ms), transform 620ms var(--ease-expo) var(--delay,0ms); }
.motion-ready :is(.skill-column,.blog-card,.connect-link,.archive-card).reveal.in-view { transform: translateY(0); }
.motion-ready .timeline-row.reveal { transform: translateY(16px); transition: opacity 420ms var(--ease-smooth) var(--delay,0ms), transform 560ms var(--ease-expo) var(--delay,0ms); }
.motion-ready .timeline-row.reveal.in-view { transform: translateY(0); }

.desktop-nav a:active,.text-link:active,.timeline-row a:active,.blog-card:active,.connect-link:active,.archive-card:active,.connect-more summary:active,.footer-top:active { opacity: .72; }

.motion-ready.hero-ready .site-header { animation: header-enter var(--motion-layout) var(--ease-expo) backwards; }
.motion-ready.hero-ready .hero .eyebrow { animation: hero-label-enter 420ms var(--ease-expo) 20ms both; }
.motion-ready.hero-ready .hero-title { animation: hero-title-enter var(--motion-entrance) var(--ease-expo) 60ms both; }
.motion-ready.hero-ready .hero-title span { animation: hero-accent-enter 520ms var(--ease-expo) 140ms both; }
.motion-ready.hero-ready .hero-bottom { animation: hero-copy-enter 500ms var(--ease-expo) 180ms both; }
.motion-ready.hero-ready .hero-visual { opacity: 1; transform: none; transition: none; }
.motion-ready.hero-ready .hero-visual > * { animation: hero-panel-enter 500ms var(--ease-expo) both; }
.motion-ready.hero-ready .hero-visual > :nth-child(1) { animation-delay: 220ms; }.motion-ready.hero-ready .hero-visual > :nth-child(2) { animation-delay: 260ms; }

@media (max-width: 900px) {
  :root { --shell: calc(100vw - 32px); --header-height: 72px; --section-airy: 112px; --section-standard: 96px; --section-compact: 72px; }
  .page-shell { width: calc(100% - max(32px, calc(var(--safe-left) + var(--safe-right) + 16px))); }
  .site-header { grid-template-columns: 1fr auto; height: calc(var(--header-height) + var(--safe-top)); padding: var(--safe-top) max(var(--space-base),var(--safe-right)) 0 max(var(--space-base),var(--safe-left)); }.desktop-nav,.header-cta { display: none; }.menu-button,.mobile-menu { display: block; }
  .mobile-menu { padding: calc(120px + var(--safe-top)) max(var(--space-lg),var(--safe-right)) max(var(--space-xl),var(--safe-bottom)) max(var(--space-lg),var(--safe-left)); }
  .noscript-nav { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg); margin-top: calc(var(--header-height) + var(--safe-top)); padding: var(--space-base) max(var(--space-base),var(--safe-right)) var(--space-base) max(var(--space-base),var(--safe-left)); border-bottom: 1px solid var(--line); background: var(--paper); }
  .noscript-nav a { min-height: 44px; display: inline-flex; align-items: center; font-weight: var(--weight-semibold); }
  .hero { width: 100%; max-width: none; margin: 0; padding: calc(var(--header-height) + var(--safe-top) + 56px) max(var(--space-base),var(--safe-right)) var(--space-lg) max(var(--space-base),var(--safe-left)); }.hero-title { font-size: clamp(3.0625rem,14vw,5.25rem); line-height: .96; }.hero-bottom { align-items: start; flex-direction: column; }.hero-visual { grid-template-columns: minmax(0,1.25fr) minmax(240px,.75fr); margin-top: var(--space-2xl); padding-top: 0; }.portrait-wrap { height: min(48vw,380px); }.hero-statement { min-height: 192px; padding: var(--space-lg); }
  .section-heading h2,.writing h2,.contact h2 { font-size: clamp(2.75rem,10vw,4.5rem); }.experience .section-heading h2,.writing h2 { font-size: clamp(3rem,11vw,4.75rem); }
  .section-heading { grid-template-columns: 1fr; gap: var(--space-lg); margin-bottom: var(--space-3xl); }.section-heading > .section-label,.section-heading h2 { grid-column: auto; }
  .about-grid { grid-template-columns: 1fr; gap: var(--space-2xl); padding-top: var(--space-3xl); }.timeline-row { grid-template-columns: 144px 1fr; padding-right: var(--space-2xl); }.timeline-row:first-child { padding: var(--space-2xl); }.credentials-grid { grid-template-columns: 1fr; }.credential-card { min-height: 288px; }
  .skill-columns { grid-template-columns: 1fr; }.skill-column { padding: 0 0 var(--space-xl); border-right: 0; border-bottom: 1px solid var(--line); }.skill-column:last-child { padding-bottom: 0; border-bottom: 0; }.skill-column p { max-width: 38ch; }.skill-notes { margin-top: var(--space-3xl); }
  .blog-grid { grid-template-columns: 1fr 1fr; }.blog-card:first-child { grid-column: 1 / -1; grid-row: auto; min-height: 480px; }.blog-card:nth-child(n+2) { grid-column: span 1; min-height: 300px; }
  .connect-heading { grid-template-columns: 1fr; gap: var(--space-lg); margin-bottom: var(--space-2xl); }.connect-heading > .section-label,.connect-heading h2,.connect-heading > p:last-child { grid-column: auto; }.archive-heading { grid-template-columns: 1fr; gap: var(--space-xl); }.archive-heading > div,.archive-heading > p { grid-column: auto; }.archive-grid { grid-template-columns: 1fr 1fr; }.contact-grid { grid-template-columns: 1fr; }.footer-inner { grid-template-columns: 1fr 2fr; }.footer-inner > p { grid-column: 1 / -1; justify-self: start; text-align: left; padding-bottom: var(--space-xl); }
}

@media (pointer: coarse) {
  .timeline-row::before,.timeline-row::after { display: none; }
  .timeline-row:hover > p,.timeline-row:hover > div { transform: none; }
  .credential-card.reveal.in-view:hover { background-color: var(--white); }
}

@media (max-width: 900px) and (max-height: 600px) {
  .mobile-menu { padding-top: calc(var(--header-height) + var(--safe-top) + var(--space-sm)); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .mobile-menu nav a { min-height: 52px; padding: 6px 0; font-size: clamp(1.75rem,8vh,2.375rem); }
  .mobile-menu-footer { position: static; margin-top: var(--space-base); padding-bottom: max(var(--space-sm),var(--safe-bottom)); }
}

@media (max-width: 720px) {
  .blog-grid,.connect-grid,.archive-grid { grid-template-columns: 1fr; }
  .blog-card,.blog-card:first-child,.blog-card:nth-child(n+2) { grid-column: 1 / -1; grid-row: auto; }
  .blog-card:first-child { min-height: 440px; }
  .blog-card:nth-child(n+2) { min-height: 280px; }
  .connect-link,.connect-link:nth-child(odd),.connect-link:nth-child(even) { border-right: 0; padding-left: 0; padding-right: var(--space-sm); }
}

@media (max-width: 600px) {
  :root { --text-label: .875rem; --section-airy: 80px; --section-standard: 72px; --section-compact: 56px; }
  .hero { min-height: auto; padding-bottom: var(--space-base); }.hero-title { font-size: clamp(3rem,12vw,4rem); }.hero-intro { font-size: var(--text-lead); }.hero-visual { grid-template-columns: 1fr; }.portrait-wrap { height: min(64vw,320px); }.portrait-wrap img { object-position: center 32%; }.hero-statement { min-height: 160px; }
  .section-heading h2,.writing h2,.contact h2,.connect-heading h2,.archive-heading h2 { font-size: clamp(2.5rem,10.5vw,3.25rem); }.experience .section-heading h2,.writing h2 { font-size: clamp(2.75rem,11vw,3.5rem); }.section-heading { margin-bottom: var(--space-2xl); }
  .timeline-row { grid-template-columns: 1fr; gap: var(--space-md); padding: var(--space-xl) 0; }.timeline-row:first-child { margin: var(--space-md) 0; padding: var(--space-xl) var(--space-2xl) var(--space-xl) var(--space-lg); }.timeline-row > p { margin: 0; }.credential-card { min-height: 264px; }
  .blog-card,.blog-card:first-child,.blog-card:nth-child(n+2) { min-height: 280px; }.blog-card:first-child { min-height: 400px; }.blog-card:first-child h3 { font-size: clamp(2.25rem,10vw,3.25rem); }
  .archive-media { height: min(72vw,320px); }.contact { padding-top: var(--section-airy); }.contact-grid a { font-size: var(--text-control); overflow-wrap: anywhere; }.contact-form { grid-template-columns: 1fr; }.form-message,.form-note { grid-column: auto; }.form-recovery { flex-direction: column; align-items: flex-start; }.footer-inner { grid-template-columns: 1fr; padding-top: var(--space-2xl); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
  .hero-title { clip-path: none; }
  .scroll-progress { display: none; }
}

@media (forced-colors: active) {
  .site-header,.mobile-menu,.section-dark,.section-light,.hero,.hero-statement,.blog-card:first-child { forced-color-adjust: auto; }
  .scroll-progress,.connect-link::before,.blog-card::before,.timeline-row::before,.current-label > span { display: none; }
  .button,.menu-button,.copy-action { border: 1px solid ButtonText; }
  .contact-form input,.contact-form textarea { border-bottom: 1px solid FieldText; }
  :focus-visible { outline: 2px solid Highlight; }
}