:root { --ink:#17211f; --muted:#687570; --paper:#f5f7f3; --surface:#fff; --line:#dbe2dc; --accent:#d46a42; --green:#2e5f57; --dark:#203b36; --shadow:0 18px 50px rgba(28,52,45,.11); }
[data-theme="dark"] { --ink:#edf4ef; --muted:#a2b1aa; --paper:#17231f; --surface:#20302b; --line:#3a4a43; --green:#9dcabe; --dark:#10201c; --shadow:0 18px 50px rgba(0,0,0,.22); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--paper); font-family:Manrope,system-ui,sans-serif; line-height:1.65; } a { color:inherit; } .container { width:min(1120px,calc(100% - 48px)); margin:auto; }
.site-header { position:sticky; top:0; z-index:10; background:color-mix(in srgb,var(--paper) 88%,transparent); backdrop-filter:blur(14px); border-bottom:1px solid color-mix(in srgb,var(--line) 75%,transparent); } .nav-wrap { min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:24px; } .wordmark { text-decoration:none; font-weight:800; letter-spacing:-.04em; } .wordmark span { display:inline-grid; place-items:center; width:30px; height:30px; margin-right:8px; color:#fff; background:var(--accent); border-radius:50%; font-size:.68rem; letter-spacing:0; } .site-nav { display:flex; align-items:center; gap:24px; font-size:.82rem; font-weight:700; } .site-nav a { text-decoration:none; } .site-nav a:hover,.text-link:hover,.link-row a:hover { color:var(--accent); } .nav-button,.button { padding:10px 16px; border-radius:5px; } .nav-button { color:#fff; background:var(--green); } .theme-toggle,.menu-toggle { border:0; background:none; color:var(--ink); cursor:pointer; font-size:1.1rem; } .menu-toggle { display:none; font:inherit; font-weight:700; }
.hero { min-height:calc(100vh - 76px); display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:60px; padding-top:52px; padding-bottom:70px; } .eyebrow { margin:0 0 18px; color:var(--accent); font:500 .72rem/1.3 'DM Mono',monospace; letter-spacing:.12em; text-transform:uppercase; } h1,h2,h3,p { margin-top:0; } h1 { max-width:700px; margin-bottom:24px; font-size:clamp(3.1rem,7vw,6.6rem); line-height:.98; letter-spacing:-.075em; } h1 em { color:var(--green); font-style:normal; } h2 { max-width:650px; margin-bottom:20px; font-size:clamp(2rem,4vw,3.3rem); line-height:1.08; letter-spacing:-.06em; } h3 { margin-bottom:10px; font-size:1.35rem; letter-spacing:-.04em; } .hero-intro { max-width:590px; color:var(--muted); font-size:1.05rem; } .hero-actions { display:flex; align-items:center; gap:26px; margin-top:32px; } .button { display:inline-flex; gap:18px; align-items:center; text-decoration:none; font-weight:800; font-size:.85rem; } .button-primary { color:#fff; background:var(--accent); box-shadow:0 10px 25px rgba(212,106,66,.22); } .button-primary:hover { transform:translateY(-2px); } .text-link { text-decoration:none; font-weight:800; font-size:.85rem; } .text-link span,.button span { margin-left:6px; } .hero-art { position:relative; width:min(100%,470px); aspect-ratio:1; justify-self:end; display:grid; place-items:center; background:var(--green); border-radius:47% 53% 61% 39% / 47% 40% 60% 53%; overflow:hidden; box-shadow:var(--shadow); } .hero-art svg { width:95%; height:95%; fill:none; stroke:rgba(255,255,255,.24); stroke-width:1.3; } .hero-art svg .ring { stroke:rgba(255,255,255,.6); stroke-dasharray:3 7; } .hero-art svg circle:first-of-type { fill:var(--accent); stroke:none; } .art-label,.art-note { position:absolute; color:#fff; font:500 .68rem/1.5 'DM Mono',monospace; letter-spacing:.08em; } .art-label { top:18%; left:17%; } .art-note { bottom:18%; right:15%; text-align:right; color:rgba(255,255,255,.72); }
.section { padding:120px 0; } .split-section { display:grid; grid-template-columns:.8fr 1.2fr; gap:100px; } .section-heading h2 { max-width:430px; } .section-content { max-width:650px; color:var(--muted); font-size:1.02rem; } .section-content p { margin-bottom:20px; } .section-content a { color:var(--green); font-weight:700; } .link-row { display:flex; flex-wrap:wrap; gap:20px; margin-top:34px; font-size:.82rem; } .link-row a { text-decoration:none; border-bottom:1px solid var(--line); padding-bottom:4px; } .section-tinted { background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .section-heading.full { margin-bottom:42px; } .research-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } .research-card { min-height:275px; padding:28px; border:1px solid var(--line); background:var(--paper); transition:transform .2s,box-shadow .2s; } .research-card:hover { transform:translateY(-5px); box-shadow:var(--shadow); } .card-number { display:block; margin-bottom:50px; color:var(--accent); font:500 .72rem 'DM Mono',monospace; } .research-card p { color:var(--muted); font-size:.9rem; } .card-tag { display:inline-block; color:var(--green); font:500 .68rem 'DM Mono',monospace; text-transform:uppercase; }
.publication-list { border-top:1px solid var(--line); } .publication { display:grid; grid-template-columns:70px 1fr 30px; gap:20px; align-items:start; padding:24px 0; border-bottom:1px solid var(--line); text-decoration:none; } .publication:hover strong,.publication:hover .arrow { color:var(--accent); } .pub-year { color:var(--accent); font:500 .75rem 'DM Mono',monospace; padding-top:4px; } .publication strong { display:block; font-size:1rem; line-height:1.5; } .publication small { display:block; margin-top:6px; color:var(--muted); font-size:.78rem; } .arrow { color:var(--muted); text-align:right; } .see-more { display:block; margin-top:28px; }
.section-dark { color:#fff; background:var(--dark); } .section-dark .eyebrow { color:#e99b7d; } .teaching-layout { display:grid; grid-template-columns:1fr 1fr; gap:100px; align-items:end; } .teaching-layout p:not(.eyebrow) { color:rgba(255,255,255,.7); max-width:490px; } .button-light { color:var(--dark); background:#fff; margin-top:16px; } .site-footer { padding:25px 0; color:var(--muted); font:500 .68rem 'DM Mono',monospace; } .footer-wrap { display:flex; justify-content:space-between; gap:18px; } .footer-wrap a { text-decoration:none; color:var(--green); }
.page-shell { padding-top:100px; padding-bottom:120px; min-height:calc(100vh - 140px); } .page-title { max-width:800px; margin-bottom:24px; font-size:clamp(3rem,7vw,6rem); line-height:.98; letter-spacing:-.075em; } .lede { max-width:660px; color:var(--muted); font-size:1.18rem; } .lede.narrow { max-width:560px; margin-bottom:60px; } .about-grid { display:grid; grid-template-columns:1fr .7fr; gap:100px; max-width:940px; margin:70px 0 100px; } .about-grid p:not(.lede),.teaching-reflection p { color:var(--muted); } .fact-card { align-self:start; display:grid; gap:10px; padding:28px; background:var(--surface); border:1px solid var(--line); border-top:3px solid var(--accent); } .fact-card .eyebrow { margin-bottom:12px; } .fact-card strong { font-size:1.05rem; line-height:1.4; } .fact-card span,.fact-card a { color:var(--muted); font-size:.8rem; } .fact-card a { margin-top:8px; color:var(--green); text-decoration:none; font-weight:700; } .timeline { display:grid; grid-template-columns:repeat(3,1fr); gap:25px; padding-top:30px; border-top:1px solid var(--line); } .timeline div { padding-right:24px; border-right:1px solid var(--line); } .timeline div:last-child { border-right:0; } .timeline span,.course-meta { color:var(--accent); font:500 .7rem 'DM Mono',monospace; } .timeline h2 { margin:12px 0 8px; font-size:1.35rem; } .timeline p { color:var(--muted); font-size:.85rem; } .page-note { margin-top:30px; color:var(--muted); font-size:.85rem; } .page-note a,.materials a { color:var(--green); font-weight:700; }
.publication-page-list { max-width:900px; } .course-card { max-width:900px; padding:38px; background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--accent); } .course-card h2 { margin-bottom:8px; font-size:2.2rem; } .course-card p:not(.eyebrow):not(.course-meta) { max-width:650px; color:var(--muted); } .materials { margin-top:35px; padding-top:24px; border-top:1px solid var(--line); } .materials h3 { margin-bottom:8px; font-size:1rem; } .materials a { text-decoration:none; font-size:.85rem; } .teaching-reflection { max-width:700px; margin-top:100px; padding-top:35px; border-top:1px solid var(--line); } .teaching-reflection h2 { font-size:2.4rem; }
.blog-heading { display:flex; justify-content:space-between; align-items:end; gap:40px; margin-bottom:70px; } .upload-button { display:inline-flex; padding:12px 18px; color:#fff; background:var(--green); border-radius:5px; cursor:pointer; font-size:.8rem; font-weight:800; white-space:nowrap; } .upload-button input { display:none; } .blog-layout { display:grid; grid-template-columns:280px 1fr; gap:80px; align-items:start; } .post-list { display:grid; gap:8px; } .post-link { display:grid; gap:5px; width:100%; padding:14px 0; color:var(--ink); text-align:left; background:none; border:0; border-bottom:1px solid var(--line); cursor:pointer; } .post-link span { color:var(--accent); font:500 .68rem 'DM Mono',monospace; } .post-link strong { font:700 .84rem/1.4 Manrope,sans-serif; } .post-link:hover,.post-link.active { color:var(--accent); } .drop-zone { margin-top:30px; padding:22px 15px; color:var(--muted); border:1px dashed var(--line); text-align:center; font-size:.75rem; } .drop-zone.is-dragging { color:var(--accent); border-color:var(--accent); background:var(--surface); } .markdown-body { min-width:0; max-width:760px; } .markdown-body > h1 { max-width:760px; margin-bottom:28px; font-size:clamp(2.3rem,5vw,4.5rem); } .markdown-body h2 { margin-top:45px; font-size:1.8rem; } .markdown-body h3 { margin-top:30px; } .markdown-body p,.markdown-body li { color:var(--muted); font-size:1rem; } .markdown-body a { color:var(--green); font-weight:700; } .markdown-body blockquote { margin:28px 0; padding:8px 20px; border-left:3px solid var(--accent); color:var(--muted); } .markdown-body pre { overflow:auto; padding:18px; color:#fff; background:#182521; border-radius:5px; } .markdown-body code { font-family:'DM Mono',monospace; font-size:.85em; } .muted { color:var(--muted); font-size:.85rem; }
@media (max-width:760px) { .container { width:min(100% - 32px,560px); } .nav-wrap { min-height:64px; } .menu-toggle { display:block; } .site-nav { display:none; position:absolute; top:64px; left:0; right:0; padding:20px 16px; background:var(--paper); border-bottom:1px solid var(--line); flex-direction:column; align-items:stretch; } .site-nav.is-open { display:flex; } .site-nav a,.theme-toggle { padding:8px 0; } .hero { min-height:auto; grid-template-columns:1fr; gap:42px; padding-top:78px; } .hero-art { width:85%; justify-self:center; } .section,.page-shell { padding:80px 0; } .split-section,.teaching-layout,.about-grid,.blog-layout { grid-template-columns:1fr; gap:35px; } .research-grid,.timeline { grid-template-columns:1fr; } .research-card { min-height:auto; } .card-number { margin-bottom:30px; } .publication { grid-template-columns:48px 1fr 20px; gap:10px; } .blog-heading { display:block; margin-bottom:50px; } .upload-button { margin-top:20px; } .timeline div { padding:0 0 20px; border-right:0; border-bottom:1px solid var(--line); } .timeline div:last-child { border-bottom:0; } .course-card { padding:25px; } .footer-wrap { flex-direction:column; gap:8px; } }

/* Minimal presentation: white canvas, black type, quiet borders. */
:root { --ink:#111; --muted:#666; --paper:#fff; --surface:#fff; --line:#e5e5e5; --accent:#111; --green:#111; --dark:#111; --shadow:none; }
[data-theme="dark"] { --ink:#111; --muted:#666; --paper:#fff; --surface:#fff; --line:#e5e5e5; --accent:#111; --green:#111; --dark:#111; --shadow:none; }
.material-list { display:grid; gap:10px; }
.material-list a { color:var(--green); font-size:.85rem; font-weight:700; text-decoration:none; }
body { font-family:Arial,Helvetica,sans-serif; font-size:15px; }
.site-header { background:#fff; backdrop-filter:none; }
.wordmark span { color:#fff; background:#111; border-radius:2px; }
.site-nav { font-weight:400; }
.nav-button,.button-primary,.upload-button { color:#fff; background:#111; border-radius:2px; box-shadow:none; }
.hero { min-height:auto; grid-template-columns:1fr; padding-top:130px; padding-bottom:130px; }
.hero-copy { max-width:720px; }
.hero-copy h1 { max-width:720px; margin-bottom:20px; font-size:clamp(2.5rem,6vw,5.2rem); font-weight:500; letter-spacing:-.06em; }
.hero-copy h1 em { color:inherit; }
.hero-intro { max-width:620px; }
.hero-art { display:none; }
.section { padding:90px 0; }
.section-heading h2,.page-title { font-weight:500; }
.research-card,.fact-card,.course-card { border-radius:0; background:#fff; }
.research-card:hover { transform:none; box-shadow:none; }
.card-number { margin-bottom:36px; color:#666; }
.section-dark { color:#fff; background:#111; }
.section-dark .eyebrow { color:#fff; }
.button-light { border-radius:2px; }
.markdown-body > h1 { font-weight:500; }
.drop-zone { border-radius:0; }

/* Content-first page refinements. */
.home-name { margin:0 0 18px; font-size:2rem; font-weight:600; letter-spacing:-.04em; }
.blog-shell { max-width:1040px; }
.blog-layout { grid-template-columns:210px minmax(0,720px); justify-content:center; gap:64px; }
.markdown-body { margin:0 auto; }
.markdown-body > h1 { font-size:1.3rem; line-height:1.4; letter-spacing:0; }
.markdown-body h2 { font-size:1.25rem; line-height:1.4; letter-spacing:-.02em; }
.markdown-body h3 { font-size:1rem; }
.cv-page { max-width:860px; }
.about-intro { margin:0 0 48px; color:var(--muted); }
.cv-section { margin:0 0 56px; }
.cv-section > h2 { margin:0 0 22px; padding-bottom:10px; font-size:1.15rem; font-weight:600; letter-spacing:0; border-bottom:1px solid var(--line); }
.cv-entry { padding:0 0 25px; margin:0 0 25px; border-bottom:1px solid var(--line); }
.cv-heading { display:flex; justify-content:space-between; gap:20px; align-items:baseline; }
.cv-heading h3 { margin:0; font-size:1rem; font-weight:600; letter-spacing:0; }
.cv-heading time { white-space:nowrap; color:var(--muted); font-size:.8rem; }
.cv-entry p,.cv-entry li { color:var(--muted); font-size:.92rem; }
.cv-entry p { margin:8px 0 0; }
.cv-entry .cv-place { color:var(--ink); font-weight:600; }
.cv-place span { color:var(--muted); font-weight:400; }
.cv-entry a { color:var(--ink); }
.cv-entry ul { margin:10px 0 0; padding-left:19px; }
.course-card h2 { font-size:1.25rem; font-weight:600; letter-spacing:0; }
.research-card h3 { font-size:1rem; letter-spacing:0; }
@media (max-width:760px) { .blog-layout { grid-template-columns:1fr; gap:36px; } .cv-heading { display:block; } .cv-heading time { display:block; margin-top:4px; } }

.publications-page { max-width:920px; }
.publication-group { margin:0 0 44px; }
.publication-group h2,.feedback-section h2 { margin:0 0 14px; padding-bottom:9px; border-bottom:1px solid var(--line); font-size:1rem; font-weight:600; letter-spacing:0; }
.teaching-page { max-width:920px; }
.feedback-section { margin-top:48px; }
.score-list { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.score-list div { display:grid; gap:8px; padding:18px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.score-list span { color:var(--muted); font-size:.8rem; }
.score-list strong { font-size:1rem; font-weight:600; }
@media (max-width:760px) { .score-list { grid-template-columns:1fr; } }

/* Compact layout and safe embedded media. */
.page-shell { padding-top:64px; padding-bottom:80px; }
.home-main { min-height:calc(100vh - 145px); display:grid; align-items:center; }
.home-grid { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:56px; align-items:center; padding:56px 0; }
.home-role { margin:16px 0 0; color:var(--muted); font-size:.9rem; }
.home-photo { margin:0; }
.home-photo img { display:block; width:100%; max-height:460px; object-fit:cover; filter:grayscale(100%); }
.home-photo figcaption { margin-top:8px; color:var(--muted); font-size:.72rem; }
.blog-layout { grid-template-columns:minmax(0,760px); justify-content:center; gap:32px; }
.blog-layout aside { width:100%; }
.post-list { grid-template-columns:repeat(3,1fr); gap:16px; }
.post-link { min-height:76px; padding:10px 0; }
.markdown-body { width:100%; max-width:760px; overflow:hidden; }
.markdown-body img,.markdown-body svg,.markdown-body canvas { display:block; max-width:100% !important; width:auto !important; height:auto !important; margin:24px auto; }
.markdown-body figure { max-width:100%; margin:24px auto; overflow:hidden; }
.markdown-body iframe,.markdown-body video,.markdown-body embed,.markdown-body object { display:block; width:100% !important; max-width:100% !important; aspect-ratio:16 / 9; height:auto !important; max-height:460px; margin:24px auto; border:0; }
.markdown-body .video-container { position:relative !important; width:100% !important; max-width:100% !important; height:0 !important; padding-bottom:56.25% !important; overflow:hidden; background:#000; }
.markdown-body .video-container iframe { position:absolute !important; inset:0; width:100% !important; height:100% !important; margin:0; }
@media (max-width:760px) { .home-grid { grid-template-columns:1fr; gap:28px; padding:32px 0; } .home-photo { order:-1; } .post-list { grid-template-columns:1fr; gap:6px; } .post-link { min-height:auto; } }

/* Compact About page. */
.cv-page { max-width:780px; }
.cv-page.page-shell { padding-top:48px; padding-bottom:56px; }
.about-intro { margin:0 0 12px; font-size:.95rem; }
.about-contact { display:flex; flex-wrap:wrap; gap:8px 18px; margin:0 0 24px; font-size:.82rem; }
.about-contact a { color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line); }
.about-photo { margin:0 0 32px; }
.about-photo img { display:block; width:100%; max-height:330px; object-fit:cover; filter:grayscale(20%); }
.about-photo figcaption { margin-top:6px; color:var(--muted); font-size:.72rem; }
.cv-section { margin:0 0 36px; }
.cv-section > h2 { margin:0 0 14px; padding-bottom:7px; font-size:1rem; }
.cv-entry { padding:0 0 16px; margin:0 0 16px; }
.cv-entry p,.cv-entry li { font-size:.86rem; line-height:1.55; }
.cv-entry p { margin-top:5px; }
.cv-entry ul { margin-top:7px; }
@media (max-width:760px) { .about-contact { gap:8px 14px; } .about-photo img { max-height:240px; } }

/* Dense CV layout. */
.cv-page.container { width:min(calc(100% - 48px),780px); max-width:none; }
.about-top { display:grid; grid-template-columns:minmax(0,1fr) 270px; gap:28px; align-items:start; margin-bottom:30px; }
.about-top .about-photo { width:270px; margin:0; }
.about-top .about-photo img { width:100% !important; max-width:100% !important; height:170px !important; max-height:none; object-fit:cover; filter:grayscale(100%) !important; }
.about-top .about-photo figcaption { margin-top:5px; font-size:.7rem; }
.about-contact { display:flex; gap:8px 16px; }
.about-contact a { display:inline-block; }
.cv-entry { display:grid; grid-template-columns:130px minmax(0,1fr); gap:16px; padding:0 0 14px; margin:0 0 14px; }
.cv-entry > time { color:var(--muted); font-size:.78rem; line-height:1.45; }
.cv-entry > div { min-width:0; }
.cv-entry h3 { margin:0; font-size:.92rem; line-height:1.45; }
.cv-entry .cv-place { margin-top:2px; font-size:.86rem; }
.cv-entry p,.cv-entry li { font-size:.84rem; }
@media (max-width:760px) { .cv-page.container { width:min(calc(100% - 32px),780px); } .about-top { grid-template-columns:1fr; gap:18px; } .about-top .about-photo { width:100%; max-width:420px; } .about-top .about-photo img { height:190px !important; } .cv-entry { grid-template-columns:1fr; gap:3px; } }