:root {
  --night: #111725;
  --night-soft: #1b2334;
  --paper: #f5f1e8;
  --paper-deep: #e9e2d5;
  --ink: #111725;
  --muted: #565d67;
  --line: #c9c3b7;
  --aqua: #58d5c9;
  --aqua-dark: #167b78;
  --coral: #ff695c;
  --gold: #f6c85f;
  --white: #fffdf8;
  --shell: min(1180px, calc(100vw - 48px));
  --display: "Arial Narrow", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif;
  --body: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--paper); }
body { margin: 0; overflow-x: hidden; color: var(--ink); background: var(--paper); font-family: var(--body); line-height: 1.6; text-rendering: optimizeLegibility; }
a { color: inherit; }
.shell { width: var(--shell); margin-inline: auto; }

.skip-link { position: fixed; top: 10px; left: 10px; z-index: 100; padding: 10px 14px; color: var(--night); background: var(--aqua); transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }

.site-header { position: relative; z-index: 10; color: var(--white); background: var(--night); border-bottom: 1px solid #343c4d; }
.nav-shell { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.wordmark { display: inline-flex; align-items: center; gap: 10px; color: var(--white); font-family: var(--display); font-size: 21px; font-weight: 780; letter-spacing: -.04em; text-decoration: none; }
.wordmark-glyph { display: grid; width: 35px; height: 35px; place-items: center; color: var(--night); background: var(--aqua); font-family: var(--mono); font-size: 11px; font-weight: 800; letter-spacing: -.1em; }
.main-nav { display: flex; align-items: center; gap: 27px; font-size: 13px; font-weight: 700; }
.main-nav a { text-decoration: none; }
.main-nav a:hover { color: var(--aqua); }
.nav-writing { padding: 10px 14px; color: var(--night) !important; background: var(--aqua); }

.hero { position: relative; overflow: hidden; color: var(--white); background: var(--night); }
.hero::before { content: ""; position: absolute; inset: 0; opacity: .16; background-image: linear-gradient(#596071 1px, transparent 1px), linear-gradient(90deg, #596071 1px, transparent 1px); background-size: 40px 40px; mask-image: radial-gradient(circle at 77% 42%, black, transparent 48%); }
.hero-grid { position: relative; min-height: 720px; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(360px, .88fr); align-items: center; gap: clamp(52px, 9vw, 120px); padding-block: 85px 100px; }
.hero-grid > * { min-width: 0; }
.eyebrow { margin: 0 0 23px; color: var(--aqua-dark); font-family: var(--mono); font-size: 10px; font-weight: 800; letter-spacing: .13em; line-height: 1.3; text-transform: uppercase; }
.hero .eyebrow { color: var(--aqua); }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--display); line-height: .99; letter-spacing: -.045em; }
h1 { max-width: 760px; margin-bottom: 30px; font-size: clamp(58px, 7vw, 98px); font-weight: 790; }
h1 em { color: var(--aqua); font-family: Georgia, "Times New Roman", serif; font-weight: 400; }
h2 { margin-bottom: 22px; font-size: clamp(43px, 5.2vw, 70px); font-weight: 780; }
h3 { font-size: 33px; font-weight: 760; }
.hero-lede { max-width: 680px; margin-bottom: 35px; color: #b9bfca; font-size: clamp(18px, 1.7vw, 22px); }
.identity-row { display: flex; flex-wrap: wrap; gap: 8px; }
.identity-row span { padding: 7px 10px; border: 1px solid #455064; color: #b9bfca; font-family: var(--mono); font-size: 9px; letter-spacing: .09em; text-transform: uppercase; }

.stack-diagram { padding: 24px; border: 1px solid #3d4658; background: rgba(20,27,42,.94); box-shadow: 15px 15px 0 rgba(88,213,201,.82); }
.stack-topline { display: flex; justify-content: space-between; padding-bottom: 17px; border-bottom: 1px solid #394356; color: #8d94a2; font-family: var(--mono); font-size: 8px; letter-spacing: .1em; }
.stack-layers { display: flex; flex-direction: column; gap: 7px; padding-block: 24px; }
.layer { display: grid; grid-template-columns: 35px 1fr auto; align-items: center; gap: 14px; padding: 13px 15px; border: 1px solid #3b4658; background: #182032; }
.layer span, .layer small { color: #8f97a6; font-family: var(--mono); font-size: 9px; }
.layer strong { font-size: 12px; }
.layer-hw { border-left: 4px solid var(--aqua); }
.layer-tee { border-left: 4px solid var(--gold); }
.layer-os { border-left: 4px solid var(--coral); }
.layer-app { border-left: 4px solid #8591a7; }
.stack-diagram > p { margin: 0; color: #9ca4b2; font-size: 12px; }

.research-section, .talks-section, .code-section, .writing-section, .about-section { padding-block: clamp(85px, 10vw, 135px); }
.section-heading { max-width: 850px; margin-bottom: 65px; }
.research-section { background: var(--paper); }
.research-list { border-top: 1px solid var(--line); }
.research-list article { display: grid; grid-template-columns: minmax(180px, .55fr) minmax(0, 1.45fr); gap: 7vw; padding: 42px 0; border-bottom: 1px solid var(--line); }
.research-meta { display: flex; flex-direction: column; gap: 12px; color: var(--muted); font-family: var(--mono); font-size: 9px; letter-spacing: .09em; text-transform: uppercase; }
.research-meta span:first-child { width: fit-content; padding-bottom: 5px; color: var(--coral); border-bottom: 2px solid var(--coral); }
.research-list h3 { margin-bottom: 18px; font-size: clamp(35px, 4vw, 54px); }
.research-list article > div:last-child > p { max-width: 760px; margin-bottom: 12px; font-size: 18px; }
.research-list .claim-note { color: var(--muted); font-size: 14px; }
.research-link { display: inline-block; margin-top: 12px; color: var(--aqua-dark); font-size: 13px; font-weight: 750; text-underline-offset: 5px; }
code { padding: 2px 5px; background: var(--paper-deep); font-family: var(--mono); font-size: .87em; }

.talks-section { color: var(--white); background: var(--coral); }
.talks-section .eyebrow { color: #3d1d1a; }
.talks-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 10vw; }
.talk-card { align-self: end; padding: 38px; color: var(--night); background: var(--white); box-shadow: 13px 13px 0 var(--night); }
.talk-card > p { margin-bottom: 60px; font-family: var(--mono); font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.talk-card h3 { margin-bottom: 35px; font-size: clamp(30px, 3.5vw, 46px); }
.talk-card a { font-size: 13px; font-weight: 750; text-underline-offset: 5px; }

.code-section { background: var(--white); }
.code-heading { margin-bottom: 55px; }
.code-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.code-card { min-height: 440px; display: flex; flex-direction: column; padding: 33px; border: 1px solid var(--line); background: var(--paper); text-decoration: none; transition: transform .16s ease, box-shadow .16s ease; }
.code-card:hover { transform: translateY(-5px); box-shadow: 0 8px 0 var(--aqua); }
.code-card-dark { color: var(--white); background: var(--night); border-color: var(--night); }
.code-card-writing { background: var(--paper-deep); }
.code-index { color: var(--aqua-dark); font-family: var(--mono); font-size: 9px; font-weight: 800; letter-spacing: .1em; }
.code-card h3 { margin: 80px 0 22px; font-size: 33px; }
.code-card p { color: var(--muted); font-size: 14px; }
.code-card-dark p { color: #aeb5c2; }
.code-card strong { margin-top: auto; font-size: 12px; text-decoration: underline; text-underline-offset: 5px; }
.project-index { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 22px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.project-index a { min-height: 125px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; padding: 20px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); text-decoration: none; }
.project-index a:hover { color: var(--aqua-dark); background: var(--paper); }
.project-index span { color: var(--muted); font-family: var(--mono); font-size: 8px; letter-spacing: .09em; text-transform: uppercase; }
.project-index strong { font-size: 13px; }

.writing-section { color: var(--white); background: var(--night); }
.writing-section .eyebrow { color: var(--aqua); }
.writing-intro { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr); align-items: end; gap: 9vw; margin-bottom: 60px; }
.writing-heading > p:not(.eyebrow) { max-width: 470px; color: #aeb5c2; }
.writing-heading h2 { max-width: 780px; margin-bottom: 0; }
.writing-summary { padding-bottom: 10px; }
.writing-summary p { max-width: 470px; margin-bottom: 0; color: #aeb5c2; }
.all-writing-link { display: inline-block; margin-top: 24px; color: var(--aqua); font-size: 13px; font-weight: 750; text-underline-offset: 5px; }
.writing-list { border-top: 1px solid #3d4658; }
.writing-item { display: grid; grid-template-columns: minmax(150px, .5fr) minmax(0, 1.4fr) auto; align-items: center; gap: 5vw; padding: 34px 0; border-bottom: 1px solid #3d4658; text-decoration: none; }
.writing-item:hover h3, .writing-item:hover > strong { color: var(--aqua); }
.writing-item-meta { display: flex; flex-direction: column; gap: 9px; color: #8f97a6; font-family: var(--mono); font-size: 8px; letter-spacing: .09em; text-transform: uppercase; }
.writing-item-meta span:first-child { color: var(--coral); }
.writing-item h3 { margin-bottom: 9px; font-size: clamp(26px, 3vw, 40px); transition: color .16s ease; }
.writing-item p { max-width: 680px; margin-bottom: 0; color: #aeb5c2; font-size: 14px; }
.writing-item > strong { color: var(--white); font-size: 12px; white-space: nowrap; transition: color .16s ease; }

.about-section { background: var(--paper-deep); }
.about-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 10vw; }
.about-copy { max-width: 700px; font-size: 21px; }
.about-copy p + p { color: var(--muted); font-size: 16px; }
.elsewhere { display: flex; flex-wrap: wrap; gap: 25px; margin-top: 38px; }
.elsewhere a { font-size: 13px; font-weight: 750; text-underline-offset: 5px; }

.site-footer { padding-block: 50px; color: #aeb5c2; background: var(--night); }
.footer-grid { display: grid; grid-template-columns: 1fr auto auto; align-items: end; gap: 55px; }
.footer-wordmark { color: var(--white); }
.footer-grid p { margin: 8px 0 0; font-size: 11px; }

.plain-page { min-height: 100vh; color: var(--white); background: var(--night); }
.plain-shell { width: min(760px, calc(100vw - 40px)); margin-inline: auto; padding-block: 80px; }
.plain-shell h1 { max-width: 750px; margin: 60px 0 35px; font-size: clamp(48px, 8vw, 78px); }
.plain-shell h2 { margin-top: 45px; font-size: 28px; }
.plain-shell p { color: #b9bfca; }
.plain-back { color: var(--aqua); font-size: 13px; font-weight: 750; text-underline-offset: 5px; }
.plain-updated { margin-top: 55px; font-family: var(--mono); font-size: 10px; text-transform: uppercase; }

/* Personal web résumé */
.resume-page { color: var(--ink); background: var(--paper); }
.resume-shell { width: min(1040px, calc(100% - 40px)); margin-inline: auto; }
.resume-header { color: var(--white); background: var(--night); }
.resume-nav { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.resume-back { color: var(--aqua); font-size: 12px; font-weight: 750; text-underline-offset: 5px; }
.resume-intro { padding-block: clamp(80px, 11vw, 130px); border-bottom: 1px solid var(--line); }
.resume-intro h1 { max-width: 900px; }
.resume-intro > p:not(.eyebrow) { max-width: 790px; color: var(--muted); font-size: 20px; }
.resume-print-contact { display: none; }
.resume-profiles { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 35px; }
.resume-profiles a { font-size: 13px; font-weight: 750; text-underline-offset: 5px; }
.resume-section { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 7vw; padding-block: 70px; border-bottom: 1px solid var(--line); }
.resume-section-label { align-self: start; position: sticky; top: 28px; }
.resume-section-label span { color: var(--coral); font-family: var(--mono); font-size: 10px; }
.resume-section-label h2 { margin-top: 15px; font-size: 36px; }
.resume-entries article { padding: 0 0 32px; }
.resume-entries article + article { padding-top: 32px; border-top: 1px solid var(--line); }
.resume-entry-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 25px; }
.resume-entry-heading h3, .resume-entries > article > h3 { margin-bottom: 14px; font-size: 27px; }
.resume-entry-heading span { color: var(--muted); font-family: var(--mono); font-size: 10px; white-space: nowrap; }
.resume-entries p { max-width: 710px; margin-bottom: 0; color: var(--muted); }
.resume-bullets { max-width: 740px; margin: 0; padding-left: 20px; color: var(--muted); }
.resume-bullets li + li { margin-top: 9px; }
.resume-artifact-link { display: inline-block; margin-top: 13px; color: var(--aqua-dark); font-size: 12px; font-weight: 750; text-underline-offset: 5px; }
.resume-projects { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.resume-projects a { min-height: 285px; display: flex; flex-direction: column; padding: 26px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); text-decoration: none; }
.resume-projects a:hover { background: var(--white); }
.resume-projects span { color: var(--coral); font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.resume-projects h3 { margin: 48px 0 16px; font-size: 27px; }
.resume-projects p { margin-bottom: 20px; color: var(--muted); font-size: 14px; }
.resume-projects strong { margin-top: auto; color: var(--aqua-dark); font-size: 12px; text-decoration: underline; text-underline-offset: 5px; }
.resume-capabilities { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.resume-capabilities article { min-height: 220px; padding: 26px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.resume-capabilities h3 { margin-bottom: 40px; font-size: 24px; }
.resume-capabilities p { margin: 0; color: var(--muted); font-size: 14px; }
.resume-footer { padding-block: 42px; color: #aeb5c2; background: var(--night); }
.resume-footer > div { display: flex; justify-content: space-between; gap: 30px; }
.resume-footer p { margin: 0; }
.resume-footer a { color: var(--aqua); }

:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }

@media (max-width: 900px) {
  :root { --shell: min(100% - 34px, 720px); }
  .main-nav a:not(.nav-writing) { display: none; }
  .hero-grid, .talks-grid, .writing-intro, .about-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-grid { min-height: auto; padding-block: 75px 95px; }
  .stack-diagram { max-width: 560px; }
  .code-grid { grid-template-columns: 1fr; }
  .project-index { grid-template-columns: 1fr 1fr; }
  .code-card { min-height: 340px; }
  .code-card h3 { margin-top: 55px; }
  .writing-item { grid-template-columns: 120px minmax(0, 1fr) auto; }
  .resume-section { grid-template-columns: 1fr; gap: 35px; }
  .resume-section-label { position: static; }
  .resume-projects { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
  :root { --shell: calc(100% - 28px); }
  .nav-shell { min-height: 70px; }
  .wordmark { font-size: 19px; }
  .wordmark-glyph { width: 31px; height: 31px; }
  .nav-writing { padding: 8px 10px; font-size: 11px; }
  h1 { font-size: clamp(52px, 15vw, 71px); }
  h2 { font-size: clamp(39px, 12vw, 55px); }
  .stack-diagram { padding: 15px; box-shadow: 9px 9px 0 rgba(88,213,201,.82); }
  .stack-topline { flex-direction: column; gap: 5px; }
  .layer { grid-template-columns: 28px 1fr; }
  .layer small { display: none; }
  .research-list article { grid-template-columns: 1fr; gap: 28px; }
  .talk-card { padding: 28px; box-shadow: 9px 9px 0 var(--night); }
  .talk-card > p { margin-bottom: 40px; }
  .code-card { min-height: 380px; padding: 28px; }
  .project-index { grid-template-columns: 1fr; }
  .project-index a { min-height: 105px; }
  .writing-item { grid-template-columns: 1fr; gap: 17px; padding: 30px 0; }
  .writing-item > strong { margin-top: 2px; }
  .footer-grid { grid-template-columns: 1fr; gap: 22px; }
  .resume-shell { width: calc(100% - 28px); }
  .resume-back { font-size: 11px; }
  .resume-intro > p:not(.eyebrow) { font-size: 18px; }
  .resume-entry-heading { display: block; }
  .resume-entry-heading span { display: block; margin: -5px 0 15px; }
  .resume-capabilities { grid-template-columns: 1fr; }
  .resume-projects { grid-template-columns: 1fr; }
  .resume-footer > div { flex-direction: column; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

@media print {
  @page { size: letter; margin: .55in; }
  html { background: #fff; }
  body.resume-page { color: #111; background: #fff; font-size: 10pt; }
  .resume-header, .resume-footer, .skip-link, .resume-profiles { display: none !important; }
  .resume-shell { width: 100%; }
  .resume-intro { padding: 0 0 20px; }
  .resume-intro h1 { margin-bottom: 12px; font-size: 30pt; }
  .resume-intro > p:not(.eyebrow) { margin: 0; color: #333; font-size: 10pt; }
  .resume-intro .resume-print-contact { display: block; margin-top: 8px; font-family: var(--mono); font-size: 8pt; }
  .resume-section { grid-template-columns: 115px 1fr; gap: 25px; padding-block: 20px; break-inside: auto; }
  .resume-section-label { position: static; }
  .resume-section-label h2 { font-size: 17pt; }
  .resume-entries article { padding-bottom: 13px; break-inside: avoid; }
  .resume-entries article + article { padding-top: 13px; }
  .resume-entry-heading h3, .resume-entries > article > h3 { margin-bottom: 5px; font-size: 13pt; }
  .resume-entries p { color: #333; font-size: 9pt; line-height: 1.4; }
  .resume-bullets { color: #333; font-size: 9pt; line-height: 1.35; }
  .resume-bullets li + li { margin-top: 3px; }
  .resume-artifact-link { margin-top: 4px; color: #111; font-size: 8pt; }
  .resume-projects { grid-template-columns: 1fr 1fr; }
  .resume-projects a { min-height: 0; padding: 11px; break-inside: avoid; }
  .resume-projects h3 { margin: 10px 0 5px; font-size: 11pt; }
  .resume-projects p { margin-bottom: 6px; color: #333; font-size: 8pt; line-height: 1.3; }
  .resume-projects span, .resume-projects strong { font-size: 7pt; }
  .resume-projects-section { break-before: page; }
  .resume-capabilities article { min-height: 0; padding: 12px; break-inside: avoid; }
  .resume-capabilities h3 { margin-bottom: 8px; font-size: 11pt; }
  .resume-capabilities p { color: #333; font-size: 8pt; line-height: 1.35; }
  a { text-decoration: none; }
}