/* Editorial portfolio: burgundy canvas, warm text, and champagne accents.
   Shared tokens also keep the project diagrams legible in either theme. */
:root {
  color-scheme:dark;
  --bg:#1A0F11; --bg-2:#26181A; --panel:#26181A; --panel-2:#362528;
  --ink:#F2ECE9; --ink-soft:#BCB0AD; --ink-dim:#BCB0AD;
  --line:#362528; --line-soft:#362528;
  --gold:#DFBA97; --blue:#DFBA97; --ok:#DFBA97; --warn:#DEACA4;
  --header:rgba(26,15,17,.97);
  --sans:'DM Sans','Segoe UI',Arial,sans-serif;
  --serif:'Instrument Serif',Georgia,serif;
  --mono:'DM Mono',Consolas,monospace;
}
:root[data-theme="light"] {
  color-scheme:light;
  --bg:#F2ECE9; --bg-2:#E8DDD7; --panel:#F8F3F0; --panel-2:#DFD0C8;
  --ink:#26181A; --ink-soft:#635453; --ink-dim:#6B5A57;
  --line:#CDBBB5; --line-soft:#D9C9C2;
  --gold:#79502F; --blue:#79502F; --ok:#79502F; --warn:#8A443B;
  --header:rgba(242,236,233,.97);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:7rem; }
body { margin:0; background:var(--bg); color:var(--ink); font:400 1rem/1.75 var(--sans); -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4,p,figure { margin:0; }
h1,h2 { font-family:var(--serif); font-weight:400; }
img { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; text-underline-offset:5px; }
a:hover { color:var(--gold); }
button { font:inherit; cursor:pointer; }
::selection { background:var(--gold); color:var(--bg); }
:focus-visible { outline:2px solid var(--gold); outline-offset:5px; }
.wrap { width:min(1240px,calc(100% - 112px)); margin-inline:auto; }
.skip-link { position:fixed; top:-80px; left:16px; z-index:20; padding:12px; background:var(--gold); color:var(--bg); }
.skip-link:focus { top:10px; }

/* The header shares the page's alignment and quiet horizontal rules. */
.site-header { position:sticky; top:0; z-index:5; background:var(--header); }
.nav { display:flex; align-items:center; justify-content:space-between; gap:28px; min-height:94px; border-bottom:1px solid var(--line); }
.wordmark { display:flex; flex-direction:column; font:400 29px/.79 var(--serif); letter-spacing:-1px; padding:12px 0; min-width:42px; }
nav { display:flex; align-items:center; gap:28px; }
nav a,.resume-link { font-size:.875rem; }
.nav-actions { display:flex; align-items:center; gap:26px; }
#themeToggle { display:flex; align-items:center; gap:8px; padding:12px 0; border:0; background:none; color:var(--ink-soft); font-size:.75rem; white-space:nowrap; }
#themeIcon { font-size:20px; line-height:1; color:var(--gold); }
.resume-link { white-space:nowrap; }
.resume-link span { color:var(--gold); margin-left:12px; }
.eyebrow { font:400 .75rem/1.65 var(--mono); letter-spacing:.06em; color:var(--gold); text-transform:uppercase; }

/* A personal introduction, with a full-sized portrait and one primary link. */
.hero { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:9%; align-items:center; padding-block:80px 68px; }
.hero h1 { font-size:clamp(3.7rem,6.4vw,5.8rem); line-height:1.02; letter-spacing:-.045em; margin-top:24px; }
.hero h1>span { display:block; color:var(--gold); font-size:.48em; line-height:1.25; font-style:italic; letter-spacing:-.02em; margin-top:12px; }
.school { color:var(--ink-soft); font-size:.9375rem; margin-top:26px; }
.intro { max-width:570px; margin-top:20px; color:var(--ink-soft); line-height:1.85; }
.availability-code { margin-top:28px; }
.availability-code code { font:400 .875rem/1.8 var(--mono); }
.code-keyword { color:var(--blue); }
.code-value { color:var(--gold); }
.availability-code p { margin-top:5px; color:var(--ink-dim); font:.75rem/1.7 var(--mono); }
.hero-links { display:flex; align-items:center; flex-wrap:wrap; gap:28px; margin-top:30px; font-size:.875rem; }
.primary-link,.underlined-link { color:var(--gold); display:inline-block; padding-bottom:8px; border-bottom:1px solid currentColor; font-size:.875rem; }
.primary-link span { margin-left:24px; color:var(--gold); }
.underlined-link { margin-top:24px; }
.profile-portrait { width:100%; max-width:390px; justify-self:end; }
.profile-portrait img { width:100%; height:auto; aspect-ratio:1; object-fit:cover; }
.profile-portrait figcaption { color:var(--ink-dim); font:.75rem/1.7 var(--mono); margin-top:14px; }

/* All three appointments have the same weight. */
.current-roles { padding-bottom:58px; }
.current-heading { display:flex; justify-content:space-between; align-items:baseline; gap:20px; margin-bottom:20px; }
.current-heading h2 { font-size:2rem; line-height:1.2; }
.current-heading code { font:.75rem/1.6 var(--mono); color:var(--ink-dim); }
.current-heading code span { color:var(--ok); }
.current-role-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:36px; }
.current-role { border-top:1px solid var(--line); padding-top:20px; }
.current-status { font:.75rem/1.6 var(--mono); color:var(--blue); margin-bottom:12px; }
.current-status::before { content:''; display:inline-block; width:5px; height:5px; margin-right:9px; vertical-align:middle; background:currentColor; }
.current-role h3 { font:500 1.0625rem/1.5 var(--sans); letter-spacing:-.02em; }
.current-role>p:last-child { font-size:.875rem; line-height:1.65; color:var(--ink-soft); margin-top:7px; max-width:330px; }

/* The research spread uses the supplied burgundy surfaces and champagne accents.
   Both have their own complete palettes, independent of the page theme. */
.featured-showcase {
  --bg:#26181A; --ink:#F2ECE9; --ink-soft:#BCB0AD; --ink-dim:#BCB0AD;
  --gold:#DFBA97; --line:#362528;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);
  gap:48px; align-items:center; padding:40px;
  color:var(--ink); background:var(--bg);
}
.featured-copy h2 { font-size:clamp(2.35rem,3.4vw,3.2rem); line-height:1.08; letter-spacing:-.02em; margin-top:20px; }
.featured-copy>p:not(.eyebrow) { color:var(--ink-soft); font-size:1rem; line-height:1.8; margin-top:22px; max-width:470px; }
.presentation-credits { display:grid; gap:14px; list-style:none; padding:0; margin:24px 0 0; }
.presentation-credits li { font-size:.875rem; line-height:1.6; color:var(--ink-soft); }
.presentation-credits span { display:block; color:var(--gold); font:.75rem/1.6 var(--mono); margin-bottom:3px; }
.featured-copy .underlined-link { color:var(--gold); }
.featured-copy .underlined-link:hover { color:var(--gold); }
.featured-visual {
  --bg:#1A0F11; --bg-2:#26181A; --panel:#26181A; --panel-2:#362528;
  --ink:#F2ECE9; --ink-soft:#BCB0AD; --ink-dim:#BCB0AD;
  --line:#362528; --line-soft:#362528;
  --gold:#DFBA97; --blue:#DFBA97; --ok:#DFBA97; --warn:#DEACA4;
  background:var(--bg); color:var(--ink); padding:22px 20px 24px;
}
.hero-artifact svg { display:block; width:100%; height:auto; }
.feature-results { display:grid; grid-template-columns:.75fr .85fr 1.2fr; gap:16px; border-top:1px solid var(--line); margin-top:16px; padding-top:20px; }
.feature-results>div>strong { display:block; font:400 clamp(2.2rem,3.6vw,3.4rem)/1 var(--serif); letter-spacing:-.04em; white-space:nowrap; }
.feature-results strong span { font-size:.5em; }
.feature-results>div>span { display:block; font-size:.75rem; color:var(--ink-soft); margin-top:10px; line-height:1.5; }

/* Recommendations sit directly beside the research in the reading order. */
.recommendations { padding-block:30px 64px; }
.recommendations>h2 { font:.75rem/1.6 var(--mono); letter-spacing:.02em; color:var(--ink-dim); margin-bottom:22px; }
.recommendation-grid { display:grid; grid-template-columns:1fr 1fr; gap:64px; }
.recommendation-grid blockquote { display:flex; flex-direction:column; margin:0; padding-top:20px; border-top:1px solid var(--line); }
.recommendation-grid blockquote>p { font:400 1.875rem/1.35 var(--serif); margin-bottom:24px; }
.recommendation-grid cite { display:block; margin-top:auto; font-style:normal; }
.recommendation-grid cite a { font-size:.875rem; color:var(--gold); }
.recommendation-grid cite span,.report-quote cite span { display:block; font-size:.8125rem; color:var(--ink-soft); margin-top:3px; }
.recommendation-grid cite small,.report-quote cite small { display:block; font:.75rem/1.7 var(--mono); color:var(--ink-dim); margin-top:7px; }

/* One spacing rhythm and heading hierarchy throughout the archive. */
.section { padding-block:64px; border-top:1px solid var(--line); }
.section h2 { font-size:3.25rem; line-height:1.1; letter-spacing:-.03em; }
.experience-section { display:grid; grid-template-columns:1fr 2.6fr; gap:64px; }
.section-side h2 { margin-top:14px; }
.section-side>p:not(.eyebrow) { font-size:.875rem; color:var(--ink-dim); margin-top:20px; }
.experience-item { display:grid; grid-template-columns:132px minmax(0,1fr); gap:26px; padding-block:24px; border-bottom:1px solid var(--line-soft); }
.experience-item:first-child { padding-top:0; }
.experience-item:last-child { padding-bottom:0; border:0; }
.experience-date { font:.75rem/1.8 var(--mono); color:var(--ink-dim); padding-top:3px; }
.experience-item h3 { font:500 1rem/1.5 var(--sans); }
.experience-item p { font-size:.875rem; color:var(--ink-soft); margin-top:5px; }
.experience-item .experience-note { color:var(--ink-dim); font-size:.8125rem; }
.experience-note a { text-decoration:underline; }
.current-label { display:inline-block; color:var(--blue); font:.75rem/1.6 var(--mono); margin-left:10px; }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:40px; margin-bottom:36px; }
.section-heading h2 { margin-top:14px; }
.section-heading>p { color:var(--ink-dim); font-size:.875rem; }
.research-summary { display:grid; grid-template-columns:1.25fr 1fr; gap:48px; padding:32px; margin-bottom:40px; background:var(--bg-2); }
.research-summary h3 { font:400 1.875rem/1.2 var(--serif); margin:14px 0; }
.research-summary p { font-size:.875rem; color:var(--ink-soft); }
.research-summary .underlined-link { margin-top:20px; }
.research-evidence { display:flex; flex-direction:column; justify-content:center; padding-left:32px; border-left:1px solid var(--line); }
.research-evidence>.eyebrow { color:var(--ink-dim); }
.timing-comparison { display:grid; grid-template-columns:1fr 20px 1fr; align-items:center; gap:16px; margin-block:22px; }
.timing-comparison>div>span,.timing-comparison small { display:block; font:.75rem/1.7 var(--mono); color:var(--ink-dim); }
.timing-comparison strong { display:block; font:400 2rem/1.2 var(--serif); color:var(--warn); padding-block:6px; white-space:nowrap; }
.timing-comparison>div:last-child strong { color:var(--ok); }
.project-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:44px 40px; }
.project-card { display:flex; flex-direction:column; min-width:0; padding-bottom:26px; border-bottom:1px solid var(--line); }
.project-visual { display:block; background:var(--bg-2); border:1px solid var(--line-soft); padding:17px 18px 7px; transition:border-color .18s; }
.project-visual:hover { border-color:var(--gold); }
.project-visual svg { display:block; width:100%; height:auto; }
.artifact-kicker { display:flex; justify-content:space-between; gap:12px; color:var(--ink-dim); font:.75rem/1.6 var(--mono); padding-bottom:8px; }
.artifact-kicker>span:last-child { color:var(--gold); }
.project-meta { display:flex; justify-content:space-between; gap:14px; color:var(--ink-dim); font:.75rem/1.6 var(--mono); margin-top:22px; }
.project-card h3 { font:500 1.375rem/1.35 var(--sans); letter-spacing:-.025em; margin-top:12px; }
.project-card>p { color:var(--ink-soft); margin-top:14px; font-size:1rem; line-height:1.8; }
.project-tags { display:flex; flex-wrap:wrap; gap:6px 16px; color:var(--ink-dim); font:.75rem/1.7 var(--mono); margin-block:18px 24px; }
.project-actions { display:flex; flex-wrap:wrap; gap:24px; margin-top:auto; font-size:.875rem; }
.project-actions a { border-bottom:1px solid var(--line); padding-bottom:5px; }
.project-actions a:first-child { color:var(--gold); }

/* Interests are a concise index, with each discipline given the same space. */
.interest-columns { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:38px 44px; }
.interest-columns article { display:flex; flex-direction:column; min-width:0; border-top:1px solid var(--line); padding-top:24px; }
.interest-columns h3 { font:500 1.125rem/1.4 var(--sans); letter-spacing:-.015em; margin-bottom:16px; }
.interest-columns ul { list-style:none; padding:0; margin:0; color:var(--ink-soft); font-size:.9375rem; line-height:1.9; }
.interest-columns .tools-used { color:var(--ink-dim); font:.75rem/1.9 var(--mono); margin:18px 0 24px; }
.interest-columns a { color:var(--gold); font-size:.875rem; margin-top:auto; }
.contact-section { border-top:1px solid var(--line); background:var(--bg-2); }
.contact-inner { display:flex; justify-content:space-between; align-items:end; gap:44px; padding-block:62px; }
.contact-inner h2 { font-size:2.875rem; line-height:1.12; letter-spacing:-.02em; margin-top:18px; }
.contact-inner p:not(.eyebrow) { color:var(--ink-soft); font-size:.9375rem; margin-top:22px; }
.email-link { color:var(--gold); border-bottom:1px solid currentColor; padding-bottom:8px; font-size:.9375rem; overflow-wrap:anywhere; }
.email-link span { margin-left:20px; }
footer { display:flex; justify-content:space-between; gap:28px; padding-block:24px; border-top:1px solid var(--line); font:.75rem/1.8 var(--mono); }
.footer-name { font-family:var(--sans); color:var(--ink-dim); margin-left:20px; }

/* Project reports retain the same typography, original media and native dialog. */
dialog { width:min(940px,calc(100% - 32px)); max-height:90dvh; padding:0; border:1px solid var(--line); color:var(--ink); background:var(--bg); overscroll-behavior:contain; }
dialog::backdrop { background:#1A0F11d9; }
.dialog-toolbar { position:sticky; top:0; z-index:1; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:16px 28px; background:var(--bg); border-bottom:1px solid var(--line); font:.75rem/1.6 var(--mono); }
.dialog-toolbar button { color:var(--ink); background:none; border:1px solid var(--line); padding:8px 14px; font-size:.875rem; }
.dialog-toolbar button span { margin-left:14px; }
#reportContent { padding:40px 50px 48px; }
#reportTitle { font:400 2.875rem/1.1 var(--serif); letter-spacing:-.02em; }
.report-meta { display:flex; flex-wrap:wrap; gap:8px; margin-block:24px; }
.tag { padding:5px 10px; border:1px solid var(--line); font:.75rem/1.7 var(--mono); }
.report-stats { display:flex; flex-wrap:wrap; gap:28px 44px; padding-block:22px; border-bottom:1px solid var(--line); }
.stat-value { color:var(--gold); font:400 2.625rem/1.1 var(--serif); }
.stat-label { color:var(--ink-dim); font:.75rem/1.7 var(--mono); margin-top:8px; }
.report-art { padding:18px; border:1px solid var(--line-soft); background:var(--bg-2); margin-block:32px; }
.report-art svg { display:block; width:100%; height:auto; }
.report-section { margin-top:32px; }
.report-section h3 { font:500 1.125rem/1.5 var(--sans); margin-bottom:12px; }
.report-section p { color:var(--ink-soft); font-size:1rem; line-height:1.9; }
.report-screenshot { margin-top:36px; }
.report-photo { width:100%; height:auto; border:1px solid var(--line); }
.report-screenshot figcaption { color:var(--ink-dim); font:.75rem/1.7 var(--mono); margin-top:12px; }
.report-recommendations { margin-top:36px; }
.report-recommendations>h3 { font:400 2rem/1.2 var(--serif); }
.report-quote { margin:24px 0 0; border-top:1px solid var(--line); padding-top:24px; }
.report-quote p { color:var(--ink-soft); font-size:1rem; line-height:1.85; }
.report-quote p+p { margin-top:16px; }
.report-quote cite { display:block; font-style:normal; font-size:.875rem; margin-top:20px; }
.report-quote cite a { color:var(--gold); text-decoration:underline; }
.report-links { margin-top:32px; }
.body-dialog-open { overflow:hidden; }

@media(max-width:1100px) {
  .wrap { width:calc(100% - 64px); }
  .nav,nav,.nav-actions { gap:20px; }
  .hero { gap:6%; padding-block:60px; }
  .hero h1 { font-size:clamp(3.5rem,6.6vw,4.8rem); }
  .current-role-grid { gap:24px; }
  .featured-showcase { padding:30px; gap:30px; }
  .featured-visual { padding:16px; }
  .experience-section { grid-template-columns:1fr 2.6fr; gap:36px; }
  .experience-item { grid-template-columns:112px minmax(0,1fr); gap:20px; }
  .research-summary { gap:28px; padding:28px; }
  .research-evidence { padding-left:24px; }
  .timing-comparison { gap:10px; }
  .timing-comparison strong { font-size:1.75rem; }
  .interest-columns { column-gap:28px; }
  .contact-inner { flex-direction:column; align-items:start; gap:30px; }
}
@media(max-width:820px) {
  html { scroll-padding-top:9rem; }
  .nav { flex-wrap:wrap; gap:0; padding-top:12px; }
  .nav-actions { margin-left:auto; }
  nav { order:2; width:100%; justify-content:space-between; padding-block:18px; gap:14px; }
  .hero { grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); align-items:start; gap:30px; padding-block:44px; }
  .hero h1 { font-size:3.6rem; }
  .hero h1>span { font-size:.52em; }
  .profile-portrait { margin-top:38px; }
  .current-role-grid { grid-template-columns:1fr; gap:20px; }
  .current-role { display:grid; grid-template-columns:70px minmax(0,1fr); gap:0 20px; }
  .current-status { grid-row:1/3; margin:3px 0 0; }
  .current-role h3,.current-role>p:last-child { grid-column:2; max-width:none; }
  .featured-showcase { grid-template-columns:1fr; gap:30px; padding:32px; }
  .featured-copy h2 { font-size:2.8rem; }
  .featured-copy>p:not(.eyebrow) { max-width:none; }
  .featured-visual { width:100%; }
  .feature-results>div>strong { font-size:3.25rem; }
  .recommendation-grid { gap:32px; }
  .recommendation-grid blockquote>p { font-size:1.75rem; }
  .experience-section { grid-template-columns:1fr; gap:32px; }
  .section-side>p br { display:none; }
  .research-summary { grid-template-columns:1fr; }
  .research-evidence { padding:24px 0 0; border-left:0; border-top:1px solid var(--line); }
  .timing-comparison { max-width:420px; }
  .timing-comparison strong { font-size:2rem; }
  .project-grid { gap:36px 26px; }
  .project-visual { padding:12px 8px 4px; }
  .project-card h3 { font-size:1.25rem; }
  .interest-columns { grid-template-columns:1fr 1fr; }
}
@media(max-width:600px) {
  .wrap { width:calc(100% - 40px); }
  .nav-actions { gap:18px; }
  nav a { font-size:.8125rem; }
  .hero { grid-template-columns:1fr; gap:32px; }
  .hero h1 { font-size:clamp(3.3rem,11.5vw,4.3rem); margin-top:20px; }
  .hero h1>span { font-size:.54em; }
  .school { font-size:.875rem; }
  .hero-links { gap:24px; }
  .availability-code code { font-size:.8125rem; }
  .profile-portrait { width:min(100%,380px); justify-self:start; margin-top:0; }
  .current-roles { padding-bottom:40px; }
  .current-heading { flex-wrap:wrap; gap:8px; }
  .current-heading h2 { font-size:1.875rem; }
  .current-role { grid-template-columns:56px minmax(0,1fr); gap:0 14px; }
  .current-role h3 { font-size:1rem; }
  .featured-showcase { padding:24px 20px; gap:26px; }
  .featured-copy h2 { font-size:2.5rem; }
  .featured-copy h2 br { display:none; }
  .featured-visual { padding:12px; }
  .feature-results { gap:10px; margin-top:12px; padding-top:16px; }
  .feature-results>div>strong { font-size:2.5rem; }
  .recommendations { padding-block:26px 44px; }
  .recommendation-grid { grid-template-columns:1fr; gap:28px; }
  .section { padding-block:44px; }
  .section h2 { font-size:2.75rem; }
  .section-heading { flex-direction:column; align-items:start; gap:18px; margin-bottom:28px; }
  .section-heading>p br { display:none; }
  .experience-item { grid-template-columns:1fr; gap:7px; padding-block:22px; }
  .current-label { margin-left:8px; }
  .research-summary { padding:24px 20px; margin-bottom:30px; }
  .research-summary h3 { font-size:1.75rem; }
  .project-grid { grid-template-columns:1fr; gap:36px; }
  .project-visual { padding:14px 10px 6px; }
  .project-card h3 { font-size:1.375rem; }
  .interest-columns { grid-template-columns:1fr; gap:30px; }
  .interest-columns article { padding-top:20px; }
  .contact-inner { padding-block:42px; }
  .contact-inner h2 { font-size:2.5rem; }
  .email-link { font-size:.875rem; }
  .email-link span { margin-left:10px; }
  footer { gap:20px; }
  .footer-name { display:block; margin:8px 0 0; max-width:220px; }
  #reportContent { padding:28px 22px 36px; }
  #reportTitle { font-size:2.25rem; }
  .dialog-toolbar { padding:12px 18px; }
  .dialog-toolbar>span { max-width:130px; }
  .report-art { margin-inline:-10px; padding:6px; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { transition:none!important; animation:none!important; }
}