:root{
  color-scheme:light;
  --paper:#F2F0E8;
  --paper-2:#ECEAE0;
  --card:#FAF8F2;
  --ink:#16140F;
  --ink-soft:#3A372F;
  --muted:#6E6A5F;
  --faint:#928D80;
  --line:rgba(22,20,15,.14);
  --line-strong:rgba(22,20,15,.26);
  --accent:#16140F;
  --accent-ink:#F2F0E8;
  --font-display:'Newsreader', Georgia, serif;
  --font-sans:'Space Grotesk', system-ui, sans-serif;
  --font-mono:'JetBrains Mono', ui-monospace, monospace;
  --maxw:1240px;
}
html{scroll-behavior:smooth;scroll-padding-top:88px;}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
[data-theme="ink"]{
  color-scheme:dark;
  --paper:#100F0C;
  --paper-2:#16140F;
  --card:#1A1813;
  --ink:#F1EFE7;
  --ink-soft:#D5D1C5;
  --muted:#9C978A;
  --faint:#8A8477;
  --line:rgba(241,239,231,.16);
  --line-strong:rgba(241,239,231,.30);
  --accent:#F1EFE7;
  --accent-ink:#100F0C;
}

*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  transition:background .5s ease, color .5s ease;
}
::selection{background:var(--ink);color:var(--paper);}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 40px;}

/* ---- mono label ---- */
.mono{font-family:var(--font-mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:500;}

/* ---- top nav ---- */
header.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  backdrop-filter:saturate(1.2) blur(12px);
  background:color-mix(in srgb, var(--paper) 78%, transparent);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease, background .3s ease;
}
header.nav.scrolled{border-bottom:1px solid var(--line);}
.nav-inner{display:flex;align-items:center;justify-content:center;gap:20px;height:68px;position:relative;}
.navlinks{display:flex;align-items:center;gap:34px;}
.navlinks a{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);transition:color .2s ease;position:relative;}
.navlinks a:hover{color:var(--ink);}
.navlinks a.active{color:var(--ink);}
.navlinks a.active::after{width:100%;}
.navlinks a::after{content:"";position:absolute;left:0;bottom:-5px;height:1px;width:0;background:var(--ink);transition:width .25s ease;}
.navlinks a:hover::after{width:100%;}
@media(max-width:760px){.navlinks{gap:18px;}}
@media(max-width:600px){
  .navlinks{gap:18px;width:100%;justify-content:flex-start;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:8px;}
  .navlinks::-webkit-scrollbar{display:none;}
  .navlinks a{white-space:nowrap;}
}

/* ---- scroll-to-top ---- */
.to-top{
  position:fixed;right:24px;bottom:24px;z-index:60;
  width:46px;height:46px;border-radius:50%;border:1px solid var(--line-strong);
  background:var(--paper);color:var(--ink);display:grid;place-items:center;cursor:pointer;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .3s ease,transform .3s ease,visibility .3s ease,background .25s ease,color .25s ease;
  box-shadow:0 6px 24px rgba(22,20,15,.14);
}
.to-top.show{opacity:1;visibility:visible;transform:none;}
.to-top:hover{background:var(--ink);color:var(--paper);}
.to-top svg{width:18px;height:18px;}
@media(max-width:520px){.to-top{right:16px;bottom:16px;width:42px;height:42px;}}

/* ---- hero ---- */
.hero{padding:160px 0 70px;}
.hero-grid{display:grid;grid-template-columns:0.92fr 1.18fr;gap:56px;align-items:stretch;}
.kicker-row{display:flex;align-items:center;gap:16px;margin-bottom:30px;}
.kicker-row .ln{height:1px;flex:1;max-width:90px;background:var(--line-strong);}
h1.name{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(44px, 8.5vw, 116px);
  line-height:.93;
  letter-spacing:-.02em;
  margin:0 0 26px;
}
h1.name .last{color:var(--faint);}
.role-line{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-bottom:30px;}
.role-line .chip{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft);}
.role-line .sep{width:5px;height:5px;border-radius:50%;background:var(--faint);}
.statement{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:300;
  font-size:clamp(22px,2.5vw,30px);
  line-height:1.32;
  color:var(--ink);
  max-width:30ch;
  margin:0 0 26px;
}
.lead{color:var(--muted);max-width:46ch;font-size:16.5px;margin:0 0 34px;}
.lead b{color:var(--ink);font-weight:600;}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px;}
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-mono);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:500;
  padding:13px 20px;border-radius:0;border:1.5px solid var(--ink);
  background:var(--accent);color:var(--accent-ink);
  transition:transform .2s ease, box-shadow .2s ease;
}
.btn:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--ink);}
.btn.ghost{background:transparent;color:var(--ink);}
.btn.ghost:hover{box-shadow:4px 4px 0 var(--ink);}
.btn svg{width:15px;height:15px;}
.socials{display:flex;align-items:center;gap:10px;}
.soc{
  width:42px;height:42px;border:1px solid var(--line-strong);border-radius:50%;
  display:grid;place-items:center;color:var(--ink);transition:all .2s ease;
}
.soc:hover{background:var(--ink);color:var(--paper);transform:translateY(-3px);}
.soc svg{width:17px;height:17px;}

.portrait{position:relative;display:flex;order:1;}
.hero-text{order:2;}
.portrait .frame{position:relative;width:100%;display:flex;border:none;padding:0;background:transparent;}
.portrait.img-loaded .frame{background:radial-gradient(56% 60% at 50% 46%, color-mix(in srgb, var(--ink) 16%, transparent), transparent 74%);}
.portrait img{width:100%;height:100%;aspect-ratio:4/5;object-fit:contain;object-position:50% 50%;filter:contrast(1.05) saturate(1.06);}
/* Fade-in only when JS is running to remove it again; without JS the portrait is never hidden. */
html.js .portrait img{opacity:0;transition:opacity .6s ease;}
html.js .portrait.img-loaded img{opacity:1;}
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:36px;align-items:start;}
  .portrait{max-width:360px;order:2;}
  .hero-text{order:1;}
}
@media(max-width:680px){
  body{font-size:16px;}
  .wrap{padding:0 22px;}
  .hero{padding:118px 0 48px;}
  section{padding:64px 0;}
  .sec-head{margin-bottom:34px;}
  .portrait{max-width:340px;margin-inline:auto;}
  .honors-head{flex-wrap:wrap;gap:8px;}
}
@media(max-width:520px){
  h1.name{margin-bottom:20px;}
  .role-line{gap:10px;}
}
@media(max-width:420px){
  .wrap{padding:0 18px;}
  .cta-row{gap:10px;}
  .btn{padding:12px 16px;font-size:11.5px;}
  .socials{gap:8px;}
  .soc{width:38px;height:38px;}
  .role .org{font-size:11.5px;}
}

/* ---- section scaffold ---- */
section{padding:96px 0;border-top:1px solid var(--line);}
.sec-head{display:grid;grid-template-columns:140px 1fr;gap:40px;margin-bottom:56px;}
.sec-num{font-family:var(--font-mono);font-size:13px;letter-spacing:.1em;color:var(--faint);padding-top:10px;}
.sec-title{font-family:var(--font-display);font-weight:400;font-size:clamp(34px,4.6vw,58px);line-height:1.02;letter-spacing:-.015em;margin:0;}
.sec-title em{font-style:italic;color:var(--faint);}
.sec-intro{font-size:18px;color:var(--muted);max-width:54ch;margin:18px 0 0;}
@media(max-width:740px){.sec-head{grid-template-columns:1fr;gap:14px;}.sec-num{padding-top:0;}}

/* ---- about ---- */
.about-grid{display:grid;grid-template-columns:140px 1fr;gap:40px;}
.about-body{max-width:62ch;}
.about-body p{font-size:18px;color:var(--ink-soft);margin:0 0 22px;}
.pullquote{font-family:var(--font-display);font-style:italic;font-weight:300;font-size:clamp(26px,3.4vw,40px);line-height:1.22;color:var(--ink);margin:8px 0 34px;letter-spacing:-.01em;}
.facts{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:14px;}
.fact{background:var(--paper);padding:22px 20px;}
.fact .n{font-family:var(--font-display);font-size:38px;line-height:1;margin-bottom:8px;}
.fact .l{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);}
@media(max-width:740px){.about-grid{grid-template-columns:1fr;}.facts{grid-template-columns:1fr;}}
/* Empty layout spacers must not occupy a row once the grids collapse to one column. */
@media(max-width:740px){.sec-num:empty{display:none;}}

/* ---- work / ventures ---- */
.work-list{display:flex;flex-direction:column;}
.role{
  display:grid;grid-template-columns:140px 1fr auto;gap:40px;align-items:start;
  padding:30px 16px;margin:0 -16px;border-top:1px solid var(--line);
  transition:background .25s ease, padding .25s ease;cursor:default;position:relative;
}
.role:last-child{border-bottom:1px solid var(--line);}
.role:hover{background:var(--card);}
.role .when{font-family:var(--font-mono);font-size:13px;line-height:1.5;letter-spacing:.02em;color:var(--ink-soft);padding-top:7px;}
.role .when .yrs{display:block;margin-top:3px;color:var(--muted);font-size:11.5px;}
.role .main h3{font-family:var(--font-display);font-weight:500;font-size:26px;line-height:1.1;margin:0 0 6px;letter-spacing:-.01em;}
.role .org{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:12px;display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;}
.role .org .badge{border:1px solid var(--line-strong);padding:2px 8px;font-size:10.5px;letter-spacing:.08em;}
.role .desc{color:var(--ink-soft);font-size:16px;max-width:60ch;margin:0;}
.role .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
.role .tags span{font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;color:var(--muted);border:1px solid var(--line);padding:4px 10px;border-radius:40px;}
.role .stamp{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink);background:var(--accent);padding:5px 11px;white-space:nowrap;align-self:start;margin-top:6px;}
.role .stamp.muted{background:transparent;color:var(--faint);border:1px solid var(--line-strong);}
@media(max-width:740px){.role{grid-template-columns:1fr;gap:10px;}.role .stamp{justify-self:start;}}

/* ---- stack ---- */
.stack-grid{display:grid;grid-template-columns:140px 1fr;gap:40px;}
.cap-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
.cap{background:var(--paper);padding:26px 24px;transition:background .2s ease;}
.cap:hover{background:var(--card);}
.cap .ci{font-family:var(--font-mono);font-size:11px;color:var(--faint);letter-spacing:.1em;margin-bottom:14px;}
.cap h3{font-family:var(--font-display);font-weight:500;font-size:21px;margin:0 0 8px;letter-spacing:-.01em;}
.cap p{margin:0;font-size:14.5px;color:var(--muted);line-height:1.5;}
@media(max-width:740px){.stack-grid{grid-template-columns:1fr;}.cap-grid{grid-template-columns:1fr;}}

/* ---- writing ---- */
.writing-grid{display:grid;grid-template-columns:140px 1fr;gap:40px;}
.posts{display:flex;flex-direction:column;}
.post{display:grid;grid-template-columns:auto 1fr auto;gap:26px;align-items:center;padding:24px 16px;margin:0 -16px;border-top:1px solid var(--line);transition:background .2s ease;}
.post:last-child{border-bottom:1px solid var(--line);}
.post:hover{background:var(--card);}
.post .idx{font-family:var(--font-mono);font-size:12px;color:var(--faint);}
.post h3{font-family:var(--font-display);font-weight:500;font-size:24px;margin:0 0 4px;letter-spacing:-.01em;}
.post .pm{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);}
.post .arr{color:var(--faint);transition:transform .2s ease,color .2s ease;}
.post:hover .arr{transform:translate(4px,-4px);color:var(--ink);}
.post .arr svg{width:20px;height:20px;}
@media(max-width:740px){.writing-grid{grid-template-columns:1fr;}.post{grid-template-columns:auto 1fr;}.post .arr{display:none;}}

/* ---- education timeline ---- */
.edu-group-label{display:flex;align-items:center;gap:18px;margin:0 0 4px;padding-top:8px;}
.edu-group-label:not(:first-child){margin-top:18px;}
.edu-group-label .gl{font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:500;white-space:nowrap;}
.edu-group-label .gn{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;color:var(--faint);}
.edu-group-label .ln{height:1px;flex:1;background:var(--line);}
.edu-track{display:flex;flex-direction:column;border-top:1px solid var(--line);}
.edu-step{display:grid;grid-template-columns:230px 1fr;gap:40px;padding:32px 0;border-bottom:1px solid var(--line);align-items:start;}
.edu-step .el{display:flex;flex-direction:column;gap:9px;}
.edu-step .step-num{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);}
.edu-step .yr{font-family:var(--font-mono);font-size:13px;letter-spacing:.04em;color:var(--muted);}
.edu-step .t{font-family:var(--font-display);font-size:29px;font-weight:500;line-height:1.08;letter-spacing:-.01em;margin:0 0 8px;}
.edu-step .meta{font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 12px;display:flex;flex-wrap:wrap;gap:6px 12px;}
.edu-step .s{font-size:15px;color:var(--muted);line-height:1.55;}
@media(max-width:740px){.edu-step{grid-template-columns:1fr;gap:14px;}}

/* ---- honors (highlighted) ---- */
.honors{margin-top:72px;}
.honors-head{display:flex;align-items:baseline;gap:20px;margin-bottom:30px;}
.honors-head h3{font-family:var(--font-display);font-size:clamp(30px,4vw,46px);font-weight:400;margin:0;letter-spacing:-.015em;}
.honors-head h3 em{font-style:italic;color:var(--faint);}
.honors-head .hk{font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;color:var(--faint);text-transform:uppercase;}
.honors-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;}
.honor-card{background:var(--ink);color:var(--paper);padding:38px 34px;display:flex;flex-direction:column;gap:16px;position:relative;overflow:hidden;transition:transform .25s ease;}
.honor-card:hover{transform:translateY(-4px);}
.honor-card .star{font-size:22px;line-height:1;opacity:.55;}
.honor-card .ht{font-family:var(--font-display);font-size:clamp(26px,2.6vw,34px);font-weight:400;line-height:1.04;letter-spacing:-.01em;}
.honor-card .hs{font-family:var(--font-mono);font-size:12px;letter-spacing:.05em;opacity:.62;text-transform:uppercase;}
.honor-card .hy{position:absolute;top:18px;right:30px;font-family:var(--font-display);font-size:64px;opacity:.12;line-height:1;}
@media(max-width:740px){.honors-grid{grid-template-columns:1fr;}}

/* ---- contact ---- */
.contact{background:var(--paper-2);}
.contact-grid{display:grid;grid-template-columns:140px 1fr;gap:40px;}
.contact-big{font-family:var(--font-display);font-weight:400;font-size:clamp(40px,7vw,92px);line-height:.98;letter-spacing:-.02em;margin:0 0 14px;}
.contact-big em{font-style:italic;color:var(--faint);}
.contact-sub{font-size:18px;color:var(--muted);max-width:46ch;margin:0 0 38px;}
.contact-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center;}
.email-link{font-family:var(--font-mono);font-size:clamp(15px,2.2vw,22px);letter-spacing:.02em;border-bottom:1px solid var(--line-strong);padding-bottom:4px;transition:border-color .2s ease;}
.email-link:hover{border-color:var(--ink);}
@media(max-width:740px){.contact-grid{grid-template-columns:1fr;}}

/* ---- footer ---- */
footer{border-top:1px solid var(--line);padding:40px 0;}
.foot-inner{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;}
.foot-inner .l,.foot-inner .r{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);}
.foot-inner .r{display:flex;gap:22px;}
.foot-inner .r a:hover{color:var(--ink);}

/* ---- reveal ---- */
/* Base state: always visible. Content never disappears, even before JS runs or if JS fails. */
.reveal{opacity:1;transform:none;}
@media(prefers-reduced-motion:no-preference){
  /* Below-the-fold: hidden until scrolled into view (JS adds .in) */
  html.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);}
  html.js .reveal.in{opacity:1;transform:none;}
  /* Hero is above the fold: show instantly on load — no entrance fade, so a refresh never shows an empty page */
  html.js .hero .reveal{opacity:1;transform:none;transition:none;animation:none;}
}

/* ---- hidden utility ----
   .btn sets display:inline-flex, which outranks the UA [hidden] rule, so the
   CV buttons would still show while hidden. */
[hidden]{display:none!important;}

/* ---- focus ----
   Not a fix for a removed indicator (nothing here sets outline:none) - this just
   replaces the UA default ring with one that matches the palette. */
a:focus-visible,button:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:2px;}
.soc:focus-visible,.to-top:focus-visible{outline-offset:4px;}