:root{
  --ink:        #1B1D2A;
  --ink-soft:   #5A5F73;
  --ground:     #E9EBF1;
  --surface:    #F6F7FA;
  --rule:       #C9CDD9;
  --practice:   #0F6E6E;
  --research:   #7A4E6B;

  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --body:    "Source Serif 4", Georgia, serif;
  --mono:    "JetBrains Mono", ui-monospace, monospace;

  --measure: 66ch;
  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --sidebar-w: 4.5rem;
  --sidebar-w-expanded: 16rem;
}

:root[data-theme="dark"]{
  --ink:        #ECEDF3;
  --ink-soft:   #A0A5B8;
  --ground:     #14151C;
  --surface:    #1C1E28;
  --rule:       #33364A;
  --practice:   #4FD6C4;
  --research:   #D896BE;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--body);
  font-size:clamp(1rem, 0.97rem + 0.15vw, 1.09rem);
  line-height:1.62;
  font-optical-sizing:auto;
  transition:background 200ms ease, color 200ms ease;
}

.wrap{ max-width:78rem; margin-inline:auto; padding-inline:var(--gutter); }

a{ color:inherit; text-underline-offset:3px; text-decoration-thickness:1px; }
a:focus-visible, button:focus-visible{
  outline:2px solid var(--ink); outline-offset:3px; border-radius:2px;
}

/* ---------- Site layout: left sidebar + content ---------- */
.layout{ display:grid; grid-template-columns: var(--sidebar-w) 1fr; align-items:start; min-height:100vh; }

.sidebar{
  position:sticky; top:0; height:100vh; overflow-y:auto; overflow-x:hidden;
  padding: clamp(1.5rem,4vh,2rem) 0.9rem;
  border-right:1px solid var(--rule);
  display:flex; flex-direction:column; align-items:center;
  width:var(--sidebar-w);
  transition:width 220ms cubic-bezier(.2,.7,.3,1);
}

/* Desktop: expanding widens the sidebar in place (pushes content, no overlay) —
   driven purely by JS setting --sidebar-w, so no extra rule is needed here. */
.sidebar.expanded{ align-items:stretch; padding: clamp(1.5rem,4vh,2rem) 1.25rem; }

.sidebar-logo{
  display:flex; align-items:center; justify-content:center; flex:none;
  width:2.4rem; height:2.4rem; margin-bottom:0.6rem;
  font-family:var(--display); font-weight:800; font-size:0.92rem; letter-spacing:-0.02em;
  background:var(--ink); color:var(--ground);
  border:0; border-radius:8px; text-decoration:none;
  transition:transform 160ms ease;
}
.sidebar-logo:hover{ transform:scale(1.05); }
.sidebar.expanded .sidebar-logo{ align-self:flex-start; }

/* Dedicated expand/collapse control — always visible, distinct from the logo */
.sidebar-toggle-btn{
  display:flex; align-items:center; justify-content:center; flex:none;
  width:1.85rem; height:1.85rem; margin-bottom:1.4rem;
  background:transparent; color:var(--ink-soft);
  border:1px solid var(--rule); border-radius:6px; cursor:pointer; padding:0;
  transition:color 140ms ease, border-color 140ms ease;
}
.sidebar-toggle-btn:hover{ color:var(--ink); border-color:currentColor; }
.sidebar-toggle-btn svg{ width:13px; height:13px; transition:transform 220ms ease; }
.sidebar.expanded .sidebar-toggle-btn{ align-self:flex-start; }
.sidebar.expanded .sidebar-toggle-btn svg{ transform:rotate(180deg); }

.sidebar-brand{
  font-family:var(--display); font-weight:800; font-size:1.3rem;
  letter-spacing:-0.02em; text-decoration:none; color:var(--ink);
  margin-bottom:0.3rem;
}
.sidebar-role{
  font-family:var(--mono); font-size:0.68rem; color:var(--ink-soft);
  letter-spacing:0.06em; text-transform:uppercase; margin:0 0 2.25rem;
}

/* Text labels only appear once the sidebar is expanded */
.nav-label{ display:none; }
.sidebar.expanded .side-nav a .nav-label{ display:inline; }
.sidebar.expanded .theme-toggle .nav-label{ display:inline; }
.sidebar.expanded .sidebar-brand.nav-label{ display:block; }
.sidebar.expanded .sidebar-role.nav-label{ display:block; }

.side-nav{ list-style:none; margin:0 0 auto; padding:0; display:flex; flex-direction:column; gap:0.15rem; width:100%; }
.side-nav a{
  display:flex; align-items:center; justify-content:center; gap:0;
  font-family:var(--mono); font-size:0.82rem; letter-spacing:0.01em;
  color:var(--ink-soft); text-decoration:none;
  padding:0.6rem; border-radius:6px;
  transition:background 140ms ease, color 140ms ease;
}
.sidebar.expanded .side-nav a{ justify-content:flex-start; gap:0.7rem; padding:0.55rem 0.6rem; }
.side-nav a svg{ flex:none; width:16px; height:16px; }
.side-nav a:hover{ color:var(--ink); background:var(--surface); }
.side-nav a[aria-current="page"]{ color:var(--ink); background:var(--surface); font-weight:600; }
.side-nav .side-sep{ height:1px; background:var(--rule); margin:0.85rem 0.6rem; }

.theme-toggle{
  display:flex; align-items:center; justify-content:center; gap:0; width:2.4rem; height:2.4rem;
  font-family:var(--mono); font-size:0.82rem; letter-spacing:0.01em;
  background:transparent; color:var(--ink-soft); border:1px solid var(--rule); border-radius:6px;
  padding:0; cursor:pointer; margin-top:1.5rem; flex:none;
  transition:color 160ms ease, border-color 160ms ease, width 160ms ease;
}
.sidebar.expanded .theme-toggle{
  justify-content:flex-start; gap:0.6rem; width:100%; height:auto; padding:0.55rem 0.7rem;
}
.theme-toggle svg{ flex:none; width:16px; height:16px; }
.theme-toggle:hover{ color:var(--ink); border-color:currentColor; }

.sidebar-overlay{
  display:none; position:fixed; inset:0; background:rgba(10,11,16,0.45);
  z-index:45; opacity:0; transition:opacity 200ms ease;
}
.sidebar-overlay.show{ display:block; opacity:1; }

body.nav-open{ overflow:hidden; }

.content{ min-width:0; min-height:100vh; display:flex; flex-direction:column; }
.content > main{ flex:1 0 auto; }
.content > .footer{ flex:0 0 auto; }

/* ---------- Hero ---------- */
.hero{ padding-block: clamp(3rem, 9vh, 6rem) clamp(2.5rem, 6vh, 4rem); }

.hero-name{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(2.5rem, 7vw, 5rem);
  line-height:0.95;
  letter-spacing:-0.035em;
  margin:0 0 clamp(1.5rem, 4vh, 2.5rem);
}

.thesis{
  font-size:clamp(1.2rem, 1rem + 1vw, 1.75rem);
  line-height:1.42;
  max-width:38ch;
  margin:0;
}
.thesis .p{ color:var(--practice); font-weight:600; }
.thesis .r{ color:var(--research); font-weight:600; }

/* ---------- Section furniture ---------- */
.section{ padding-block: clamp(3rem, 8vh, 5.5rem); border-top:1px solid var(--rule); }

.eyebrow{
  font-family:var(--mono); font-size:0.72rem; font-weight:500;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-soft);
  margin:0 0 1.75rem;
}

.section-head{
  display:flex; flex-wrap:wrap; align-items:baseline;
  justify-content:space-between; gap:1rem 2rem;
}

h2.title{
  font-family:var(--display); font-weight:600;
  font-size:clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
  letter-spacing:-0.02em; line-height:1.1; margin:0 0 1.5rem;
}

.prose{ max-width:none; }
.prose p{ margin:0 0 1.15em; }
.prose p:last-child{ margin-bottom:0; }

/* ---------- Lens control ---------- */
.lens{
  display:inline-flex; padding:3px; gap:2px;
  background:var(--surface); border:1px solid var(--rule); border-radius:999px;
}
.lens button{
  font-family:var(--mono); font-size:0.72rem; font-weight:500;
  letter-spacing:0.08em; text-transform:uppercase;
  padding:0.5rem 0.95rem; border:0; border-radius:999px;
  background:transparent; color:var(--ink-soft); cursor:pointer;
  transition:background 160ms ease, color 160ms ease;
}
.lens button:hover{ color:var(--ink); }
.lens button[aria-pressed="true"]{ background:var(--ink); color:var(--surface); }

.lens-note{
  font-family:var(--mono); font-size:0.7rem; color:var(--ink-soft);
  margin:0.75rem 0 0; letter-spacing:0.02em;
}

/* ---------- The record ---------- */
.record{ list-style:none; margin:2.5rem 0 0; padding:0; }

.entry{
  display:flex;
  flex-direction:column;
  gap:0.4rem;
  padding:1.6rem 0;
  border-top:1px solid var(--rule);
  transition:opacity 320ms ease, filter 320ms ease;
}
.entry:last-child{ border-bottom:1px solid var(--rule); }

body[data-lens="practice"] .entry[data-track="research"],
body[data-lens="research"] .entry[data-track="practice"]{
  opacity:0.26; filter:saturate(0.2);
}

.entry-meta{
  display:flex; align-items:baseline; gap:0.9rem;
  font-family:var(--mono); font-size:0.74rem; color:var(--ink-soft);
}
.entry-date{ color:var(--ink); }
.entry-kind{ letter-spacing:0.06em; text-transform:uppercase; }
.entry[data-track="practice"] .entry-kind{ color:var(--practice); }
.entry[data-track="research"] .entry-kind{ color:var(--research); }

.entry-body h3{
  font-family:var(--display); font-weight:600; font-size:1.12rem;
  letter-spacing:-0.01em; line-height:1.35; margin:0 0 0.15rem;
}
.entry-org{ font-size:0.95rem; color:var(--ink-soft); margin:0 0 0.6rem; }
.entry-body p.desc{ margin:0; max-width:none; }

.tags{ display:flex; flex-wrap:wrap; gap:0.4rem; margin:0.75rem 0 0; padding:0; list-style:none; }
.tags li{
  font-family:var(--mono); font-size:0.68rem; letter-spacing:0.04em;
  padding:0.2rem 0.55rem; border:1px solid var(--rule); border-radius:2px; color:var(--ink-soft);
}

/* ---------- Publications ---------- */
.pubs{ list-style:none; margin:0; padding:0; counter-reset:pub; }
.pubs > li{
  padding:1.25rem 0; border-top:1px solid var(--rule);
}
.pubs > li:last-child{ border-bottom:1px solid var(--rule); }
.pub-title{ font-weight:600; }
.pub-venue{ font-style:italic; color:var(--ink-soft); }
.pub-links{ display:block; margin-top:0.4rem; font-family:var(--mono); font-size:0.72rem; letter-spacing:0.03em; }
.pub-links a{ color:var(--research); margin-right:1rem; }
.pubs .desc{ margin:0.6rem 0 0; color:var(--ink-soft); }
.pubs .desc a{ color:var(--research); }
.edu-projects{ list-style:none; margin:0.6rem 0 0; padding:0; color:var(--ink-soft); }
.edu-projects li{ margin:0.35rem 0; }
.edu-projects a{ color:var(--research); }
.edu-head{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; }
.edu-title-line{ margin:0; }
.edu-score{
  flex:none; font-family:var(--mono); font-size:0.78rem; font-weight:500;
  color:var(--ink-soft); white-space:nowrap;
}
.coursework{ margin:0.6rem 0 0; font-size:0.92rem; color:var(--ink-soft); }
.coursework-label{
  font-family:var(--mono); font-size:0.7rem; font-weight:500;
  letter-spacing:0.06em; text-transform:uppercase; color:var(--ink);
  margin-right:0.5rem;
}

/* ---------- Two-column blocks ---------- */
.cols{ display:grid; gap:2.5rem clamp(2rem,5vw,4rem); grid-template-columns:repeat(auto-fit,minmax(17rem,1fr)); }
.cols h3{ font-family:var(--display); font-weight:600; font-size:1.05rem; margin:0 0 0.75rem; }
.cols ul{ margin:0; padding:0; list-style:none; }
.cols li{ padding:0.45rem 0; border-bottom:1px solid var(--rule); font-size:0.96rem; }
.cols .yr{ font-family:var(--mono); font-size:0.72rem; color:var(--ink-soft); display:block; }

/* ---------- Skills ---------- */
.skill-rows{ list-style:none; margin:0; padding:0; }
.skill-rows li{
  display:grid; grid-template-columns:9.5rem 1fr; gap:0.25rem 1.5rem;
  padding:0.9rem 0; border-top:1px solid var(--rule);
}
.skill-rows li:last-child{ border-bottom:1px solid var(--rule); }
.skill-label{
  font-family:var(--mono); font-size:0.72rem; font-weight:500;
  letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-soft);
}
.skill-list{ font-size:0.98rem; line-height:1.6; }

@media (max-width:32rem){
  .skill-rows li{ grid-template-columns:1fr; gap:0.4rem; }
}

/* ---------- Footer ---------- */
.footer{ padding-block:clamp(3rem,8vh,5rem) 3rem; border-top:1px solid var(--rule); }
.cta{
  display:inline-block; font-family:var(--display); font-weight:600;
  font-size:clamp(1.4rem,1.1rem+1.4vw,2.1rem); letter-spacing:-0.02em;
  text-decoration:none; border-bottom:2px solid var(--practice); padding-bottom:0.15rem;
}
.cta:hover{ border-color:var(--ink); }
.colophon{ font-family:var(--mono); font-size:0.7rem; color:var(--ink-soft); margin:3rem 0 0; letter-spacing:0.02em; }
.colophon a{ color:var(--ink-soft); }

/* ---------- Motion ---------- */
.reveal{ opacity:0; transform:translateY(14px); }
.reveal.in{ opacity:1; transform:none; transition:opacity 520ms ease, transform 520ms cubic-bezier(.2,.7,.3,1); }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ animation:none !important; transition-duration:1ms !important; }
  .reveal{ opacity:1; transform:none; }
}

/* ---------- Blog listing ---------- */
.posts{ list-style:none; margin:0; padding: clamp(1rem,4vh,2rem) 0 0; }
.post{ padding:1.75rem 0; border-top:1px solid var(--rule); }
.post:last-child{ border-bottom:1px solid var(--rule); }
.post-date{ font-family:var(--mono); font-size:0.74rem; color:var(--ink-soft); display:block; margin-bottom:0.4rem; }
.post-title{ font-family:var(--display); font-weight:600; font-size:1.3rem; margin:0 0 0.4rem; letter-spacing:-0.01em; }
.post-title a{ text-decoration:none; }
.post-title a:hover{ text-decoration:underline; }
.post-desc{ margin:0; max-width:var(--measure); color:var(--ink-soft); }
.empty{ padding: clamp(2rem,6vh,3.5rem) 0; color:var(--ink-soft); max-width:var(--measure); }

/* ---------- Blog post article ---------- */
.article-head{ padding-block: clamp(2.5rem,7vh,4rem) clamp(1.5rem,4vh,2.5rem); }
.article-head .title{ max-width:26ch; margin:0 0 1rem; }
.dek{ font-size:1.15rem; color:var(--ink-soft); max-width:var(--measure); margin:0; }

article.prose{ padding-block: 0 clamp(3rem,8vh,5rem); }
article.prose h1, article.prose h2, article.prose h3{
  font-family:var(--display); font-weight:600; letter-spacing:-0.01em;
}
article.prose h2{ font-size:1.4rem; margin:2.2em 0 0.75em; }
article.prose h3{ font-size:1.15rem; margin:1.8em 0 0.6em; }
article.prose ul, article.prose ol{ margin:0 0 1.15em; padding-left:1.4em; }
article.prose li{ margin:0.3em 0; }
article.prose pre{
  background:var(--surface); border:1px solid var(--rule); border-radius:6px;
  padding:1rem 1.1rem; overflow-x:auto; font-family:var(--mono); font-size:0.82rem; margin:0 0 1.15em;
}
article.prose code{ font-family:var(--mono); font-size:0.9em; background:var(--surface); padding:0.1em 0.35em; border-radius:3px; }
article.prose pre code{ background:none; padding:0; }
article.prose blockquote{
  margin:1.5em 0; padding-left:1.25em; border-left:3px solid var(--practice); color:var(--ink-soft);
}
article.prose a{ color:var(--research); }
article.prose img{ max-width:100%; border-radius:6px; }

/* ---------- Breadcrumbs (mobile only) ---------- */
.breadcrumbs{ display:none; }

@media (max-width:60rem){
  :root{ --sidebar-w: 3.75rem; }

  .breadcrumbs{
    display:flex; align-items:center; flex-wrap:wrap; gap:0.4rem;
    font-family:var(--mono); font-size:0.72rem; letter-spacing:0.02em;
    color:var(--ink-soft);
    padding:0.65rem var(--gutter);
    border-bottom:1px solid var(--rule);
  }
  .breadcrumbs a{ color:var(--ink-soft); text-decoration:none; }
  .breadcrumbs a:hover{ color:var(--ink); text-decoration:underline; }
  .breadcrumbs .sep{ opacity:0.5; }
  .breadcrumbs [aria-current="page"]{ color:var(--ink); }

  /* Mobile: expanding stays an overlay flyout, unlike the in-flow desktop expand */
  .sidebar.expanded{
    position:fixed; top:0; left:0; z-index:50;
    width:min(88vw, var(--sidebar-w-expanded)); height:100dvh;
    padding: clamp(1.5rem,4vh,2rem) 1.5rem;
    background:var(--ground);
    box-shadow:0 0 48px rgba(0,0,0,0.28);
  }
}

@media (max-width:40rem){
  :root{ --gutter: 1.1rem; }

  .hero{ padding-block: clamp(2rem,7vh,3rem) clamp(1.5rem,4vh,2rem); }
  .hero-name{ font-size:clamp(2.1rem, 11vw, 3rem); margin-bottom:1.25rem; }
  .thesis{ font-size:1.05rem; max-width:none; }

  .section{ padding-block: clamp(2rem,6vh,3rem); }
  .section-head{ flex-direction:column; align-items:flex-start; gap:0.75rem; }

  h2.title{ font-size:clamp(1.4rem,1.1rem+2vw,1.9rem); }

  .entry-meta{ flex-wrap:wrap; gap:0.4rem 0.75rem; }
  .tags li{ font-size:0.64rem; padding:0.18rem 0.45rem; }

  .skill-rows li{ grid-template-columns:1fr; gap:0.4rem; }

  .pub-links a{ display:inline-block; margin:0.3rem 0.9rem 0 0; }

  .cta{ font-size:clamp(1.2rem,1rem+1.5vw,1.6rem); }

  .article-head .title{ max-width:none; }
  article.prose pre{ padding:0.85rem; font-size:0.76rem; }
}

/* ---------- Print: the page becomes a clean CV ---------- */
@media print{
  body{ background:#fff; font-size:10.5pt; }
  .lens, .lens-note, .cta, .sidebar{ display:none; }
  .layout{ display:block; }
  .entry{ opacity:1 !important; filter:none !important; break-inside:avoid; }
  .section{ padding-block:1rem; }
  .hero{ padding-block:0 1rem; }
  .hero-name{ font-size:28pt; }
  a{ text-decoration:none; }
}