@font-face{font-family:Manrope;src:url('../assets/fonts/manrope-latin-variable.woff2') format('woff2');font-weight:400 800;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('../assets/fonts/ibm-plex-mono-latin-400.woff2') format('woff2');font-weight:400;font-display:swap}
:root{--paper:#f8f8f4;--surface:#efefea;--ink:#20251f;--muted:#5f655c;--line:#d8ddd3;--accent:#ae3b24;--on-accent:#fff;--selection:#edc9bb;--backdrop:#101a1599;--gutter:clamp(20px,3.5vw,68px);--sans:Manrope,Arial,sans-serif;--mono:'IBM Plex Mono',Consolas,monospace;--fs-display:clamp(82px,14vw,200px);--fs-h2:clamp(36px,3.3vw,52px);--fs-h3:clamp(24px,1.9vw,30px);--fs-lede:clamp(19px,1.45vw,22px);--fs-body:17px;--fs-small:15px;--fs-meta:13px;color-scheme:light;font-family:var(--sans);background:var(--paper);color:var(--ink)}
:root[data-theme=dark]{--paper:#151a17;--surface:#1f2621;--ink:#f0f1e8;--muted:#aeb6ac;--line:#353f36;--accent:#f0a38d;--on-accent:#1b120f;--selection:#754b3b;--backdrop:#060a08c7;color-scheme:dark}
@media(prefers-color-scheme:dark){:root:not([data-theme]){--paper:#151a17;--surface:#1f2621;--ink:#f0f1e8;--muted:#aeb6ac;--line:#353f36;--accent:#f0a38d;--on-accent:#1b120f;--selection:#754b3b;--backdrop:#060a08c7;color-scheme:dark}}
*{box-sizing:border-box}html{scroll-padding-top:100px}body{margin:0;background:var(--paper)}a{color:inherit;text-decoration:none}a:hover{color:var(--accent)}button,select{font:inherit;color:inherit}button,a,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}:is(button,a,select):focus-visible{outline:2px solid var(--accent);outline-offset:4px}::selection{background:var(--selection);color:var(--ink)}img{max-width:100%}
.skip-link{position:fixed;top:-60px;left:16px;padding:12px 20px;border-radius:999px;background:var(--ink);color:var(--paper);z-index:100}.skip-link:focus{top:12px}

/* One material for everything that floats above the page (nav, menu, back-to-top, project windows, media controls):
   a light translucent fill, a bright top edge, a hairline rim and a soft shadow. Only the small fixed pieces add a
   backdrop blur (--glass-blur); large windows sit on plain backgrounds, where blur would cost GPU time for nothing.
   Everything in the page itself (cards, tiles, buttons) stays flat, without shadows. */
:root{--glass:linear-gradient(155deg,#ffffffd9,#ffffff8c);--glass-edge:#fffffff2;--glass-rim:#1b241e14;--glass-shadow:0 36px 64px -34px #17241c73,0 14px 28px -18px #17241c40;--glass-lift:0 12px 30px -12px #17241c4d,0 2px 6px #17241c14;--glass-blur:blur(18px) saturate(1.6);--screen:#fff}
:root[data-theme=dark]{--glass:linear-gradient(155deg,#2a322dd9,#1f2621bf);--glass-edge:#ffffff2e;--glass-rim:#ffffff14;--glass-shadow:0 36px 64px -30px #000000c7,0 14px 28px -16px #00000080;--glass-lift:0 12px 30px -10px #000000a6,0 2px 6px #00000040;--screen:#0e1210}
@media(prefers-color-scheme:dark){:root:not([data-theme]){--glass:linear-gradient(155deg,#2a322dd9,#1f2621bf);--glass-edge:#ffffff2e;--glass-rim:#ffffff14;--glass-shadow:0 36px 64px -30px #000000c7,0 14px 28px -16px #00000080;--glass-lift:0 12px 30px -10px #000000a6,0 2px 6px #00000040;--screen:#0e1210}}
.glass{background:var(--glass);box-shadow:inset 0 1px 0 var(--glass-edge),inset 0 0 0 1px var(--glass-rim),var(--glass-lift);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}

/* Buttons: every action is a filled pill in a colour that contrasts with the page. */
.btn{--btn-bg:var(--ink);--btn-fg:var(--paper);display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:48px;padding:12px 24px;border:0;border-radius:999px;background:var(--btn-bg);color:var(--btn-fg);font:600 16px/1.2 var(--sans);letter-spacing:-.01em;white-space:nowrap;text-decoration:none;cursor:pointer;transition:background-color .18s ease,color .18s ease,transform .18s ease}
.btn:hover{--btn-bg:var(--accent);--btn-fg:var(--on-accent);color:var(--btn-fg)}
.btn-accent{--btn-bg:var(--accent);--btn-fg:var(--on-accent)}
.btn-accent:hover{--btn-bg:var(--ink);--btn-fg:var(--paper)}
.btn:active{transform:translateY(1px)}
/* Glow buttons (CV, email, back to top): fill with the accent, lift, and glow on hover or keyboard focus. */
.btn-glow{transition:background-color .2s ease,color .2s ease,box-shadow .2s ease,transform .2s ease}
.btn-glow:is(:hover,:focus-visible){--btn-bg:var(--accent);--btn-fg:var(--on-accent);color:var(--btn-fg);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent),0 4px 18px color-mix(in srgb,var(--accent) 38%,transparent);transform:translateY(-2px)}
.back-to-top{--btn-bg:transparent;--btn-fg:var(--ink);position:fixed;right:max(20px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom));z-index:45;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;color:var(--btn-fg);opacity:0;visibility:hidden;translate:0 12px;transition:opacity .25s ease,visibility .25s,translate .25s ease,background-color .2s ease,color .2s ease,box-shadow .2s ease,transform .2s ease}
.back-to-top.is-visible{opacity:1;visibility:visible;translate:0 0}
.back-to-top:is(:hover,:focus-visible){background:var(--accent);color:var(--on-accent)}
.back-to-top svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media(prefers-reduced-motion:reduce){.btn-glow:is(:hover,:focus-visible){transform:none}.back-to-top{translate:0 0}}
/* Icons drawn as SVG (not ↗ / ▶ characters, which phones render as colour emoji). */
.i-arrow{display:inline-block;width:.85em;height:.85em;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.08em}
.i-media{width:13px;height:13px;flex:none;fill:currentColor}
.btn-sm{min-height:40px;padding:8px 17px;gap:8px;font-size:var(--fs-small)}
/* Icon-only circle, the height of .btn-sm (e.g. the GitHub mark beside "Notes +"); needs an aria-label. */
.btn.btn-icon{width:40px;height:40px;min-height:40px;padding:0;border-radius:50%;flex:none}
.btn-icon svg{width:19px;height:19px;fill:currentColor}
.btn[hidden]{display:none}

/* Home: a large centred portrait that fades into the lower part, where the name, tagline and research direction sit. On desktop the hero fills the first screen exactly (the next sheet starts at the fold)
   and the portrait takes whatever height the copy leaves. */
.hero{display:flex;flex-direction:column;align-items:center;text-align:center;overflow:hidden}
.hero-portrait{position:relative;width:100%;height:min(98vw,400px);margin:0}
.hero-portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center bottom;mask-image:linear-gradient(#000 62%,transparent 97%)}
.hero-copy{position:relative;z-index:1;margin-top:-52px;padding:0 var(--gutter) 32px}
.hero h1{font-size:var(--fs-display);font-weight:650;letter-spacing:-.085em;line-height:.86;margin:0 0 16px;padding-right:.06em}
.hero h1 span{color:var(--accent)}
.hero-tagline{margin:0;text-wrap:balance}
.hero-lede{display:block;font-size:var(--fs-h3);font-weight:500;letter-spacing:-.04em;line-height:1.3;color:var(--ink);margin-bottom:6px}
/* Research direction: a spec line. The label sits on a hairline; three equal columns keep the middle item centred. */
.hero-direction{width:min(860px,100%);margin:30px auto 0}
.hero-label{display:flex;align-items:center;gap:16px;font:500 var(--fs-meta)/1.6 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
.hero-label:before,.hero-label:after{content:'';flex:1;height:1px;background:var(--line)}
.hero-direction ol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));list-style:none;margin:0;padding:0;counter-reset:dir;font-size:var(--fs-lede);font-weight:600;letter-spacing:-.025em;line-height:1.35}
.hero-direction li{counter-increment:dir;padding:0 12px}
.hero-direction li:before{content:counter(dir,decimal-leading-zero);display:block;font:400 var(--fs-meta)/1.4 var(--mono);letter-spacing:0;color:var(--muted);margin-bottom:4px}
@media(min-width:1000px){
  .hero{min-height:calc(100svh - 82px + var(--lap))}
  .hero-portrait{flex:1 1 0;min-height:320px;height:auto}
  .hero-copy{margin-top:-150px}
}

/* Core strengths: its own section, four centred cards. */
.strengths-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.strengths-grid article{min-width:0;padding:34px 24px 32px;border-radius:24px;background:var(--well);text-align:center}
.strengths-grid svg{display:block;fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin:0 auto 18px;padding:12px;width:64px;height:64px;border-radius:50%;background:color-mix(in srgb,var(--ink) 7%,transparent)}
.strengths-grid h3{font-size:var(--fs-lede);font-weight:500;line-height:1.3;letter-spacing:-.035em;margin:0 0 8px}
.strengths-grid p{font-size:var(--fs-body);line-height:1.6;color:var(--muted);margin:0}

/* Section breaks: no rules. Sections are rounded sheets that alternate tone and overlap the one above.
   --sheet is the section's own fill; --well is the fill for panels inside it, so panels always contrast. */
:root{--sheet:var(--paper);--well:var(--surface);--lap:36px}
main>section{position:relative;background:var(--sheet)}
main>section~section{margin-top:calc(-1*var(--lap));border-radius:var(--lap) var(--lap) 0 0}
main>section:not(:last-child){padding-bottom:calc(clamp(48px,5vw,80px) + var(--lap))}
main>section.hero{padding-bottom:var(--lap)}
#strengths,#publications,#about{--sheet:var(--surface);--well:var(--paper)}

/* Project notes dialog */
.project-dialog{padding:0;border:1px solid var(--line);border-radius:22px;background:var(--paper);color:var(--ink);width:min(840px,calc(100% - 30px));max-height:88dvh;overflow:auto;overscroll-behavior:contain}
.project-dialog::backdrop{background:var(--backdrop)}
.dialog-bar{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:15px;background:var(--paper);border-bottom:1px solid var(--line);padding:9px 14px 9px 25px;font:var(--fs-meta) var(--mono);color:var(--muted)}
.dialog-close{border:0;background:var(--ink);color:var(--paper);border-radius:50%;width:44px;height:44px;font-size:22px;line-height:1;transition:background-color .18s}
.dialog-close:hover{background:var(--accent);color:var(--on-accent)}
.dialog-content{padding:30px 36px 38px}
.dialog-content h2{font-weight:500;font-size:var(--fs-h2);letter-spacing:-.045em;line-height:1.2;margin:0 0 25px}
.dialog-content h3{font-size:var(--fs-lede);font-weight:600;margin:30px 0 10px}
.dialog-content p{font-size:var(--fs-body);line-height:1.8}
.dialog-content img,.dialog-content video{width:100%;height:auto;display:block;margin:24px 0;background:var(--surface);border-radius:12px}
.dialog-content .note{border-left:2px solid var(--accent);padding-left:16px;color:var(--muted);font-size:var(--fs-small)}
.dialog-content :is(.eyebrow,.dialog-caption),.eyebrow,.dialog-caption{font:var(--fs-meta)/1.7 var(--mono);color:var(--muted);margin:0 0 13px}
.dialog-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}

@media(max-width:1050px){.strengths-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){
  :root{--fs-body:16px}
  .hero-direction{margin-top:22px}
  .hero-label{margin-bottom:10px}
  .hero-direction ol{grid-template-columns:1fr;gap:6px}
  .hero-direction li{padding:0}
  .hero-direction li:before{display:none}
  .btn{padding-inline:22px}
  .dialog-content{padding:24px 22px 30px}
  .dialog-bar{padding-left:20px}
}
@media(max-width:600px){:root{--lap:24px}}
/* Phones: strengths become compact rows, icon beside text, so short lists never break mid-item. */
@media(max-width:600px){.strengths-grid{grid-template-columns:1fr;gap:10px}.strengths-grid article{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:16px;align-items:center;padding:16px 18px;text-align:left;border-radius:20px}.strengths-grid svg{grid-row:1/3;width:54px;height:54px;padding:11px;margin:0}.strengths-grid h3{margin:0 0 2px}.strengths-grid p{font-size:var(--fs-small)}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important}}