/* =====================================================================
   Adnan Ben Mansour — "liquid glass" design system.

   This stylesheet is a real, class-based port of the liquidglass/ mockups
   (originally emitted by Claude Design as inline styles + style-hover).
   Frosted glass panels float over an animated <serpentine-bg> field.

   Compiled pages come from src/ via build.py; this file is a versioned,
   cache-busted asset.
   ===================================================================== */

/* ---------- design tokens ---------- */
:root{
  --sans:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --ink:#19293a; --ink-soft:#41566a; --ink-mute:#6c7f92;
  --accent:#466480; --accent-hov:#33506a; --on-accent:#ffffff;

  --page-bg:rgba(255,255,255,0.20);
  --card-bg:rgba(255,255,255,0.54);
  --card-border:rgba(255,255,255,0.72);
  --inner-hi:rgba(255,255,255,0.9);

  --page-shadow:0 34px 80px -34px rgba(34,52,78,0.6),0 6px 22px -12px rgba(34,52,78,0.2);
  --card-shadow:0 16px 34px -20px rgba(34,52,78,0.55),0 4px 12px -6px rgba(34,52,78,0.22);

  --hairline:rgba(110,140,172,0.20);
  --chip-bg:rgba(255,255,255,0.5);
  --chip-border:rgba(110,140,172,0.30);
  --accent-soft:rgba(70,100,128,0.08);

  --c-connect:oklch(0.64 0.15 55);
  --c-pub:oklch(0.55 0.13 252);
  --c-post:oklch(0.58 0.13 150);

  --rim-hi:rgba(255,255,255,0.78);
  --rim-sh:rgba(40,62,92,0.30);
  --rim-grad:conic-gradient(from 315deg at 50% 50%, rgba(255,255,255,0.95) 0%, rgba(214,236,246,0.5) 13%, rgba(196,214,240,0.36) 31%, rgba(70,100,140,0.40) 50%, rgba(150,178,212,0.30) 69%, rgba(244,237,227,0.40) 87%, rgba(255,255,255,0.95) 100%);
  --blur:8px;

  /* derived surfaces used by article/code rendering */
  --rule:var(--chip-border);
  --sheet:var(--chip-bg);
  --tag-bg:var(--chip-bg);
  --tag-border:var(--chip-border);
}
html[data-theme="dark"]{
  --ink:#e8eff5; --ink-soft:#aebecc; --ink-mute:#8093a4;
  --accent:#b3c3d3; --accent-hov:#cdd9e3; --on-accent:#15222e;

  --page-bg:rgba(18,32,46,0.42);
  --card-bg:rgba(56,78,104,0.36);
  --card-border:rgba(184,208,236,0.16);
  --inner-hi:rgba(184,208,236,0.14);

  --page-shadow:0 36px 86px -34px rgba(0,0,0,0.78),0 6px 24px -12px rgba(0,0,0,0.5);
  --card-shadow:0 18px 38px -20px rgba(0,0,0,0.66),0 5px 14px -7px rgba(0,0,0,0.4);

  --hairline:rgba(184,208,236,0.13);
  --chip-bg:rgba(70,94,122,0.36);
  --chip-border:rgba(184,208,236,0.18);
  --accent-soft:rgba(179,195,211,0.12);

  --c-connect:oklch(0.80 0.13 60);
  --c-pub:oklch(0.74 0.13 252);
  --c-post:oklch(0.77 0.14 150);

  --rim-hi:rgba(202,226,252,0.20);
  --rim-sh:rgba(0,0,0,0.44);
  --rim-grad:conic-gradient(from 315deg at 50% 50%, rgba(214,232,252,0.5) 0%, rgba(150,182,216,0.22) 22%, rgba(0,0,0,0.42) 50%, rgba(150,182,216,0.18) 78%, rgba(214,232,252,0.5) 100%);
}

/* ---------- base ---------- */
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  min-height:100vh;
  color:var(--ink);
  font-family:var(--sans);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  /* fallback field, painted over by <serpentine-bg> when JS runs */
  background:
    radial-gradient(120% 90% at 12% -8%, #9fb1cd 0%, transparent 55%),
    radial-gradient(110% 90% at 96% 6%, #8399bb 0%, transparent 52%),
    #8ca1c1;
}
html[data-theme="dark"] body{
  background:
    radial-gradient(120% 90% at 12% -8%, #0a1018 0%, transparent 55%),
    radial-gradient(110% 90% at 96% 6%, #0c141d 0%, transparent 52%),
    #070c13;
}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;}
img{max-width:100%;display:block;}
::selection{background:var(--accent-soft);}

/* ---------- liquid-glass rim ---------- */
.lg-rim{position:relative;}
.lg-rim::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;
  background:var(--rim-grad);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;z-index:3;
}
.lg-rim-lg::before{padding:2px;}

/* ---------- shell ---------- */
#wrap{
  position:relative;z-index:1;width:100%;max-width:1240px;margin:0 auto;
  padding:clamp(16px,3.4vw,44px) clamp(14px,3.4vw,32px) clamp(40px,5vw,60px);
}
.sheet{
  position:relative;
  background:var(--page-bg);
  backdrop-filter:blur(var(--blur)) saturate(140%);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(140%);
  border:0;
  border-radius:clamp(18px,2vw,26px);
  box-shadow:inset 2.5px 2.5px 3px -2px var(--rim-hi),inset -2.5px -2.5px 4px -2px var(--rim-sh),var(--page-shadow);
  padding:clamp(14px,1.6vw,20px) clamp(14px,1.6vw,20px) 16px;
}

/* ---------- topbar ---------- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding:6px 8px 15px;border-bottom:1px solid var(--hairline);margin-bottom:20px;
}
.brand{font-weight:700;font-size:1.25rem;letter-spacing:-0.025em;color:var(--ink);}
.nav{display:flex;align-items:center;gap:4px;flex-wrap:wrap;}
.nav a{
  padding:8px 15px;border-radius:11px;border:1px solid transparent;
  color:var(--ink-mute);font-weight:500;font-size:0.95rem;
  transition:color .15s,background-color .15s,border-color .15s;
}
.nav a:hover{color:var(--ink);background:var(--chip-bg);}
.nav a.is-current{
  color:var(--ink);font-weight:600;background:var(--chip-bg);border-color:var(--chip-border);
  box-shadow:inset 0 2px 5px -2px color-mix(in oklab,var(--ink) 24%,transparent);
}
.theme-toggle{
  margin-left:6px;width:38px;height:38px;border-radius:12px;
  background:var(--chip-bg);border:1px solid var(--chip-border);color:var(--ink-soft);
  display:grid;place-items:center;cursor:pointer;
  transition:color .15s,border-color .15s;
}
.theme-toggle:hover{color:var(--accent);border-color:var(--accent);}
.theme-toggle svg{display:block;}
.theme-toggle .icon-moon{display:none;}
html[data-theme="dark"] .theme-toggle .icon-sun{display:none;}
html[data-theme="dark"] .theme-toggle .icon-moon{display:block;}

/* ---------- layout ---------- */
.grid{
  display:grid;grid-template-columns:minmax(286px,332px) minmax(0,1fr);
  gap:clamp(14px,1.6vw,20px);align-items:start;
}
.col{display:flex;flex-direction:column;gap:clamp(14px,1.6vw,20px);}

/* ---------- card ---------- */
.card{
  background:var(--card-bg);border:0;border-radius:18px;
  box-shadow:inset 2px 2px 2px -2px var(--rim-hi),inset -2px -2px 3px -2px var(--rim-sh),var(--card-shadow);
}
.card--pad{padding:24px 22px;}
.card--clip{overflow:hidden;}
.card--sep{margin-bottom:clamp(14px,1.6vw,20px);}

/* colored section dots */
.dot{width:8px;height:8px;border-radius:2px;flex:0 0 auto;display:inline-block;}
.dot--connect{background:var(--c-connect);}
.dot--pub{background:var(--c-pub);}
.dot--post{background:var(--c-post);}

/* collapsible card header */
.card__bar{display:flex;align-items:center;}
.card__head{
  width:100%;display:flex;align-items:center;gap:10px;
  padding:16px 22px;border:0;background:none;cursor:pointer;text-align:left;
  color:var(--ink);font-size:1rem;font-weight:600;letter-spacing:-0.01em;
}
.card__head:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:12px;}
.card__chev{margin-left:auto;display:grid;place-items:center;color:var(--ink-mute);transition:transform .2s ease;}
.card__chev svg{display:block;}
.card:not(.is-open) .card__chev{transform:rotate(-90deg);}
.card:not(.is-open) .card__body{display:none;}
.card__bar .card__head{flex:1 1 auto;width:auto;min-width:0;padding-right:8px;}
.card__bar .card__head .card__chev{margin-left:6px;}
.card__action{
  flex:0 0 auto;margin-right:16px;display:inline-flex;align-items:center;gap:7px;
  padding:7px 13px;border-radius:11px;background:var(--chip-bg);border:1px solid var(--chip-border);
  color:var(--ink-soft);font-size:0.82rem;font-weight:500;white-space:nowrap;
  transition:color .15s,border-color .15s;
}
.card__action:hover{color:var(--ink);border-color:var(--accent);}
.card__action svg{display:block;}
.card__body{border-top:1px solid var(--hairline);}

/* ---------- home: avatar / identity card ---------- */
.avatar-wrap{display:flex;flex-direction:column;align-items:center;}
.avatar{
  width:118px;height:118px;border-radius:50%;overflow:hidden;border:1px solid var(--card-border);
  box-shadow:0 0 0 6px var(--accent-soft),0 14px 30px -16px rgba(34,52,78,0.5);
}
.avatar img{width:100%;height:100%;object-fit:cover;}
.meta-list{list-style:none;padding:0;margin:18px 0 0;display:flex;flex-direction:column;gap:9px;}
.meta-list li{display:flex;align-items:center;gap:10px;font-size:0.92rem;color:var(--ink-soft);}
.meta-ico{color:var(--accent);display:inline-flex;flex:0 0 auto;}
.meta-ico svg{display:block;}
.meta-note{color:var(--ink-mute);font-weight:400;}
.affil{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-top:18px;}
.affil a{
  display:inline-flex;align-items:center;gap:5px;padding:6px 13px;
  background:var(--chip-bg);border:1px solid var(--chip-border);border-radius:999px;
  color:var(--ink-soft);font-size:0.8rem;font-weight:500;white-space:nowrap;
  transition:color .18s,border-color .18s,background-color .18s,transform .18s;
}
.affil a:hover{color:var(--ink);border-color:var(--accent);background:var(--accent-soft);transform:translateY(-1px);}

/* ---------- home: contact card ---------- */
.card__label{
  display:flex;align-items:center;gap:9px;font-family:var(--mono);
  font-size:0.72rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--ink);
  font-weight:500;margin-bottom:14px;
}
.iconbtns{display:flex;align-items:center;gap:8px;}
.iconbtn{
  flex:1;height:42px;display:grid;place-items:center;border-radius:11px;
  background:var(--chip-bg);border:1px solid var(--chip-border);color:var(--ink-soft);
  transition:color .15s,border-color .15s,background-color .15s;
}
.iconbtn:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-soft);}
.iconbtn svg{display:block;width:18px;height:18px;}
.resume-btn{
  display:flex;align-items:center;justify-content:center;gap:9px;margin-top:14px;padding:11px;
  border-radius:13px;background:var(--accent);color:var(--on-accent);font-weight:600;font-size:0.92rem;
  box-shadow:0 10px 22px -14px var(--accent);transition:background-color .15s;
}
.resume-btn:hover{background:var(--accent-hov);}
.resume-btn svg{display:block;width:16px;height:16px;flex:0 0 auto;}

/* ---------- home: about card ---------- */
.about{padding:28px 28px 26px;}
.about h1{
  font-size:clamp(1.7rem,1.3rem + 1.4vw,2rem);font-weight:600;letter-spacing:-0.025em;
  margin:0 0 12px;color:var(--ink);
}
.about .lede{margin:0;font-size:1.06rem;line-height:1.62;color:var(--ink-soft);max-width:58ch;text-wrap:pretty;}

/* ---------- home hero (single-column layout) ---------- */
.home-hero{
  padding:6px 8px 22px;border-bottom:1px solid var(--hairline);
  margin-bottom:clamp(14px,1.6vw,20px);
}
.hero-id{display:flex;align-items:center;gap:clamp(18px,3vw,30px);}
.hero-id .avatar{flex:0 0 auto;}
.hero-text{min-width:0;}
.hero-name{
  font-size:clamp(1.7rem,1.3rem + 1.4vw,2.1rem);font-weight:600;letter-spacing:-0.025em;
  margin:0 0 8px;color:var(--ink);
}
.hero-text .meta-list{margin:2px 0 0;}
.affil--row{flex-direction:row;flex-wrap:wrap;margin-top:14px;}
/* readable measure for the (now multi-sentence) intro paragraph */
.home-hero .lede{margin:20px 0 0;font-size:1.1rem;line-height:1.6;color:var(--ink-soft);text-wrap:pretty;}
.contact-row{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:18px;}
.contact-row .iconbtns{display:flex;gap:8px;flex-wrap:wrap;}
.contact-row .iconbtn{flex:0 0 auto;width:42px;}
.contact-row .resume-btn{margin-top:0;width:auto;padding:11px 18px;}
@media (max-width:560px){
  .hero-id{flex-direction:column;text-align:center;}
  .hero-text .meta-list li{justify-content:center;}
  .affil--row{justify-content:center;}
  .home-hero .lede{text-align:left;}
  .contact-row{justify-content:center;}
}

/* ---------- publication rows (home + publications) ---------- */
.publist > .pubrow + .pubrow{border-top:1px solid var(--hairline);}
.pubrow{padding:18px 22px;transition:background-color .18s;}
.pubrow:hover{background:var(--accent-soft);}
.pubrow__top{display:flex;gap:16px;align-items:flex-start;}
.publist .pubrow__top{align-items:center;}
.pub-thumb{
  width:84px;height:84px;flex:0 0 auto;border-radius:16px;
  background:var(--chip-bg);border:1px solid var(--chip-border);box-shadow:inset 0 1px 0 var(--inner-hi);
  display:grid;place-items:center;overflow:hidden;color:var(--accent);
}
.pub-thumb svg{width:76px;height:76px;opacity:0.92;}
.pub-main{flex:1 1 auto;min-width:0;}
.pub-title{
  display:block;font-size:1.02rem;font-weight:600;letter-spacing:-0.01em;line-height:1.32;
  color:var(--ink);transition:color .15s;
}
.pub-title:hover{color:var(--accent);}
.pub-authors{margin:6px 0 7px;font-size:0.85rem;color:var(--ink-soft);}
.pub-authors .me{color:var(--ink);font-weight:600;border-bottom:1px solid color-mix(in oklab,var(--accent) 55%,transparent);}
.pub-venue{
  margin:0;font-family:var(--mono);font-size:0.66rem;letter-spacing:0.13em;text-transform:uppercase;
  color:var(--accent);font-weight:500;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.pub-flag{padding:1px 6px;border:1px solid color-mix(in oklab,var(--accent) 45%,transparent);border-radius:4px;}
.pub-desc{margin:0;font-size:0.89rem;line-height:1.55;color:var(--ink-soft);max-width:78ch;text-wrap:pretty;}
.pub-actions{flex:0 0 auto;display:flex;flex-direction:column;gap:8px;align-items:flex-end;}
.pub-open{
  width:38px;height:38px;flex:0 0 auto;border-radius:11px;
  background:var(--chip-bg);border:1px solid var(--chip-border);color:var(--ink-soft);
  display:grid;place-items:center;
  transition:color .15s,border-color .15s,background-color .15s;
}
.pub-open:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-soft);}
.pub-open svg{display:block;}

/* pill buttons for paper links */
.pub-btn,.paper-btn{
  display:inline-flex;align-items:center;gap:6px;padding:5px 14px;border-radius:999px;
  background:var(--accent-soft);border:1px solid color-mix(in oklab,var(--accent) 28%,transparent);
  color:var(--accent);font-size:0.82rem;font-weight:500;white-space:nowrap;
  transition:background-color .15s,color .15s,border-color .15s;
}
.pub-btn:hover,.paper-btn:hover{background:var(--accent);color:var(--on-accent);border-color:var(--accent);}
.pub-btn--ghost{background:var(--chip-bg);border-color:var(--chip-border);color:var(--ink-soft);}
.pub-btn--ghost:hover{background:var(--chip-bg);color:var(--ink);border-color:var(--accent);}
.pub-btn .arrow,.paper-btn .arrow{font-size:0.95em;}

/* ---------- publications page ---------- */
.intro{padding:24px 26px;margin-bottom:clamp(14px,1.6vw,20px);}
.intro h1{
  font-size:clamp(1.6rem,1.25rem + 1.4vw,1.9rem);font-weight:600;letter-spacing:-0.025em;
  margin:0 0 8px;color:var(--ink);
}
.intro p{margin:0;font-size:1rem;color:var(--ink-soft);}
.intro a{color:var(--accent);border-bottom:1px solid color-mix(in oklab,var(--accent) 45%,transparent);}
.pubyear{margin-bottom:clamp(14px,1.6vw,20px);}
.pubyear:last-child{margin-bottom:0;}
.year-label{
  display:flex;align-items:center;gap:10px;font-family:var(--mono);
  font-size:0.78rem;letter-spacing:0.14em;font-weight:500;color:var(--ink);
}
.year-meta{display:flex;align-items:center;gap:10px;color:var(--ink-mute);margin-left:auto;}
.year-count{font-family:var(--mono);font-size:0.66rem;letter-spacing:0.1em;}
.yeargrid{display:flex;flex-direction:column;gap:12px;padding:16px;}
.yeargrid .pubrow{padding:16px 18px;border-radius:14px;display:flex;flex-direction:column;gap:12px;}

/* ---------- posts (blog + recent) ---------- */
.posts{list-style:none;margin:0;padding:8px;display:flex;flex-direction:column;gap:2px;}
.posts li{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;transition:background-color .18s;}
.posts li:hover{background:var(--accent-soft);}
.posts li.is-hidden{display:none;}
.posts .date{font-family:var(--mono);font-size:0.72rem;letter-spacing:0.04em;color:var(--ink-mute);flex:0 0 auto;}
.post-title{font-weight:600;color:var(--ink);transition:color .15s;}
.post-title:hover{color:var(--accent);}
.post-tags{display:inline-flex;gap:6px;flex-wrap:wrap;margin-left:auto;}
.post-tag{
  font-family:var(--mono);font-size:0.66rem;letter-spacing:0.06em;
  padding:2px 8px;border-radius:999px;background:var(--chip-bg);border:1px solid var(--chip-border);
  color:var(--ink-mute);
}
.post-tag.is-active{background:var(--accent);color:var(--on-accent);border-color:var(--accent);}
a.post-tag{cursor:pointer;}

/* filters row */
.filters{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:14px 16px;border-top:1px solid var(--hairline);}
.filters-label{font-family:var(--mono);font-size:0.7rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-mute);}
.filter-btn,.filter-clear,.filter-more{
  font-family:var(--mono);font-size:0.72rem;letter-spacing:0.04em;cursor:pointer;
  padding:5px 11px;border-radius:999px;background:var(--chip-bg);border:1px solid var(--chip-border);
  color:var(--ink-soft);transition:color .15s,border-color .15s,background-color .15s;white-space:nowrap;
}
.filter-btn:hover,.filter-more:hover{color:var(--ink);border-color:var(--accent);}
.filter-btn.is-on{background:var(--accent);color:var(--on-accent);border-color:var(--accent);}
.filter-btn .filter-n{opacity:.55;margin-left:2px;}
.filter-more{border-style:dashed;}
.filter-clear{border-style:dashed;color:var(--ink-mute);}
.post-tag--more{cursor:default;color:var(--ink-mute);letter-spacing:0.1em;}

/* empty states */
.empty{
  padding:44px 26px;border-top:1px solid var(--hairline);
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;
}
.empty-ico{
  width:62px;height:62px;border-radius:18px;display:grid;place-items:center;color:var(--accent);
  background:var(--chip-bg);border:1px solid var(--chip-border);box-shadow:inset 0 1px 0 var(--inner-hi);
}
.empty h3{margin:0 0 4px;font-size:1.02rem;font-weight:600;color:var(--ink);}
.empty p{margin:0;font-size:0.92rem;color:var(--ink-mute);max-width:42ch;}
.empty--inline{
  display:flex;align-items:center;gap:12px;padding:20px 22px;
  border-top:1px solid var(--hairline);color:var(--ink-mute);
}
.empty--inline span:last-child{font-size:0.92rem;}
.badge{
  font-family:var(--mono);font-size:0.68rem;letter-spacing:0.12em;text-transform:uppercase;
  padding:4px 10px;border:1px dashed var(--chip-border);border-radius:8px;color:var(--ink-mute);
}

/* ---------- footer ---------- */
.foot{
  text-align:center;margin-top:24px;padding-top:14px;border-top:1px solid var(--hairline);
  color:var(--ink-mute);font-size:0.85rem;
}
.foot a{color:var(--ink-soft);}
.foot a:hover{color:var(--accent);}

/* =====================================================================
   Detail pages (per-paper / per-post) — markdown article rendering.
   These re-theme the original article styles onto the glass palette.
   ===================================================================== */
.back-link{
  font-family:var(--mono);font-size:0.78rem;color:var(--ink-mute);letter-spacing:0.06em;
  display:inline-block;margin:4px 4px 14px;
}
.back-link:hover{color:var(--accent);}
.back-link::before{content:"← ";}

.article-card{padding:clamp(20px,3vw,34px);}

.paper-header{margin-bottom:1.4rem;}
.paper-header-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:0.5rem;}
.paper-header-top .paper-venue{margin:0;}
.outline-toggle{
  flex:0 0 auto;width:34px;height:34px;border-radius:10px;
  background:var(--chip-bg);border:1px solid var(--chip-border);color:var(--ink-soft);
  display:grid;place-items:center;cursor:pointer;
  transition:color .15s,border-color .15s,background-color .15s;
}
.outline-toggle:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-soft);}
.outline-toggle svg{display:block;}
.outline-toggle .ic-unfold{display:none;}
.outline-toggle.all-collapsed .ic-fold{display:none;}
.outline-toggle.all-collapsed .ic-unfold{display:block;}
.paper-header .paper-venue{
  font-family:var(--mono);font-size:0.78rem;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--accent);margin:0 0 0.5rem;font-weight:600;
}
.paper-header h1{font-size:clamp(1.6rem,1.25rem + 1.4vw,2rem);margin:0 0 0.6rem;letter-spacing:-0.02em;text-wrap:balance;color:var(--ink);}
.paper-header .paper-authors{font-size:0.95rem;color:var(--ink-soft);margin:0 0 0.8rem;}
.paper-header .paper-authors .me{color:var(--ink);font-weight:600;}
.paper-header .paper-actions{display:flex;flex-wrap:wrap;gap:0.5rem;}

.paper-abstract{
  border:1px solid var(--hairline);border-radius:14px;padding:0.85rem 1.1rem;
  background:color-mix(in oklab,var(--accent-soft) 60%,transparent);margin:0.6rem 0 1.6rem;
}
.paper-abstract .abstract-label{
  font-family:var(--mono);font-size:0.72rem;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--ink-mute);font-weight:600;margin:0 0 0.4rem;
}
.paper-abstract p{margin:0;color:var(--ink-soft);font-size:0.95rem;line-height:1.65;}

.article-body{font-size:1rem;line-height:1.7;color:var(--ink-soft);counter-reset:section-counter eqn-counter fig-counter cell-counter;}
.article-body p{color:var(--ink-soft);margin:0 0 1rem;}
.article-body strong{color:var(--ink);font-weight:600;}
.article-body h2{font-size:1.15rem;margin:2.2rem 0 0.7rem;color:var(--ink);display:flex;align-items:center;gap:0.6rem;counter-increment:section-counter;}
.article-body h2::before{
  content:counter(section-counter) ".";flex:0 0 auto;
  font-family:var(--mono);font-weight:500;color:var(--ink-mute);font-size:0.85em;
}
/* collapsible article sections: heading reduces to its title between two rules */
.article-body h2.section-head{cursor:pointer;user-select:none;}
.article-body h2.section-head:hover{color:var(--accent);}
.article-body h2.is-collapsed{color:var(--ink-mute);gap:0.9rem;margin:1.6rem 0;}
.article-body h2.is-collapsed::before{content:"";flex:1 1 auto;height:1px;background:var(--hairline);}
.article-body h2.is-collapsed::after{content:"";flex:1 1 auto;height:1px;background:var(--hairline);}
.article-body h2.is-collapsed + .section-body{display:none;}
.article-body h3{font-size:1.02rem;margin:1.4rem 0 0.4rem;color:var(--ink);}
.article-body ul,.article-body ol{margin:0 0 1rem;padding-left:1.2rem;}
.article-body li{margin:0.15rem 0;}
.article-body blockquote{border-left:2px solid var(--accent);margin:0 0 1rem;padding:0.1rem 0 0.1rem 0.9rem;color:var(--ink-soft);font-style:italic;}
.article-body a{color:var(--accent);border-bottom:1px solid color-mix(in oklab,var(--accent) 40%,transparent);}
.article-body a:hover{color:var(--accent-hov);}
.article-body img{border-radius:10px;margin:1rem 0;}
.article-body table{border-collapse:collapse;width:100%;margin:1rem 0 1.4rem;font-size:0.9rem;}
.article-body th,.article-body td{border:1px solid var(--hairline);padding:0.4rem 0.7rem;text-align:left;}
.article-body th{background:var(--chip-bg);color:var(--ink);font-weight:600;}

/* inline code */
.article-body code,.article-body :not(pre) > code{
  font-family:var(--mono);font-size:0.88em;background:var(--tag-bg);border:1px solid var(--tag-border);
  border-radius:4px;padding:0.05em 0.35em;color:var(--ink);
}

/* notebook-style cell (code & figures) */
.cell{border:1px solid var(--rule);border-radius:12px;background:var(--sheet);margin:1rem 0 1.4rem;overflow:hidden;}
.cell-label{
  font-family:var(--mono);font-size:0.72rem;letter-spacing:0.06em;color:var(--ink-mute);
  padding:0.45rem 0.85rem 0.4rem;border-bottom:1px solid var(--rule);
  background:color-mix(in oklab,var(--accent-soft) 30%,transparent);
  display:flex;justify-content:space-between;align-items:baseline;gap:0.6rem;
}
.cell-label .cell-caption{color:var(--ink-soft);font-family:var(--sans);font-size:0.82rem;letter-spacing:0;}
.cell-label .cell-lang{
  display:inline-block;padding:0.05rem 0.45rem;border:1px solid var(--rule);border-radius:3px;
  color:var(--ink-soft);background:var(--sheet);font-family:var(--mono);font-size:0.68rem;
  letter-spacing:0.06em;text-transform:lowercase;
}
.cell-label.is-toggle{cursor:pointer;user-select:none;}
.cell-label.is-toggle:hover{background:color-mix(in oklab,var(--accent-soft) 55%,transparent);}
.cell-toggle{
  appearance:none;background:transparent;border:0;font:inherit;color:var(--ink-soft);
  font-family:var(--mono);font-size:0.72rem;letter-spacing:0.04em;cursor:pointer;padding:0;
  display:inline-flex;align-items:center;gap:0.35rem;
}
.cell-toggle:hover{color:var(--accent);}
.cell-toggle .chev{display:inline-block;transition:transform .15s ease;font-size:0.85em;}
.cell.is-collapsed .cell-toggle .chev{transform:rotate(-90deg);}
.cell.is-collapsed .cell-label{border-bottom-color:transparent;}
.cell.is-collapsed pre{display:none;}
.cell pre{margin:0;padding:0.85rem 1rem;font-family:var(--mono);font-size:0.85rem;line-height:1.55;color:var(--ink);overflow-x:auto;background:transparent;}
.cell pre code{background:transparent;border:0;padding:0;font-size:inherit;color:inherit;}

/* hand-tinted syntax tokens */
.tok-kw{color:#2f6f9e;font-weight:500;}
.tok-str{color:#3f8a6e;}
.tok-num{color:#8a6aa0;}
.tok-com{color:var(--ink-mute);font-style:italic;}
.tok-fn{color:#466480;}
.tok-cls{color:#7d6db0;}
html[data-theme="dark"] .tok-kw{color:#8fc0e8;}
html[data-theme="dark"] .tok-str{color:#8fd0b0;}
html[data-theme="dark"] .tok-num{color:#c4a9dd;}
html[data-theme="dark"] .tok-com{color:var(--ink-mute);}
html[data-theme="dark"] .tok-fn{color:#aec6df;}
html[data-theme="dark"] .tok-cls{color:#c2b1e6;}

/* figure cell */
.figure{border:1px solid var(--rule);border-radius:12px;overflow:hidden;margin:1rem 0 1.4rem;background:var(--sheet);}
.figure-frame{
  background:
    linear-gradient(135deg, transparent 0 49%, color-mix(in oklab, var(--accent) 12%, transparent) 49% 51%, transparent 51%) 0 0/14px 14px,
    color-mix(in oklab, var(--accent-soft) 35%, transparent);
  padding:1.2rem;display:grid;place-items:center;min-height:220px;color:var(--accent);
}
.figure-frame svg{display:block;max-width:100%;height:auto;}
.figure-frame img{display:block;max-width:100%;height:auto;max-height:520px;border-radius:8px;margin:0;}
.figure-frame p{margin:0;}
.figure-frame:has(img){background:var(--sheet);padding:1rem;min-height:0;}
/* image figures shrink to the image width and centre; caption wraps within it */
.figure:has(img){width:fit-content;max-width:100%;margin-inline:auto;}
.figure:has(img) .figure-caption{width:0;min-width:100%;}
.figure-caption{font-family:var(--sans);font-size:0.85rem;color:var(--ink-soft);padding:0.55rem 0.9rem 0.65rem;border-top:1px solid var(--rule);background:var(--sheet);}
.figure-caption .fig-num{font-family:var(--mono);color:var(--accent);font-weight:600;margin-right:0.4rem;}
.figure-caption .fig-num::before{counter-increment:fig-counter;content:"Fig " counter(fig-counter) ".";}

/* numbered display equation */
.eqn{
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:1rem;margin:1rem 0 1.2rem;
  padding:0.6rem 1rem;border-left:2px solid var(--accent);
  background:color-mix(in oklab,var(--accent-soft) 40%,transparent);border-radius:0 12px 12px 0;
}
.eqn .eqn-body{overflow-x:auto;}
.eqn .eqn-num{font-family:var(--mono);color:var(--ink-mute);font-size:0.9rem;}
.eqn .eqn-num::before{counter-increment:eqn-counter;content:"(" counter(eqn-counter) ")";}

/* ---------- responsive ---------- */
@media (max-width:840px){
  .grid{grid-template-columns:1fr;}
}
@media (max-width:560px){
  .topbar{flex-direction:column;align-items:flex-start;gap:14px;}
  .pubrow__top{flex-wrap:wrap;}
  .pub-actions{flex-direction:row;align-items:center;}
  .post-tags{margin-left:0;}
  .posts li{flex-wrap:wrap;}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;}
}