/* ==========================================================================
   Mahir Shahriar Tamim - portfolio stylesheet (shared by every page)
   Palette and type follow the maroon / Newsreader + Inter look of
   shahriyar-zaman.github.io: white ground, near-black text, crimson accent.
   ========================================================================== */

:root{
  --serif:"Newsreader","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --bg:#fff;
  --surface:#fff;
  --text:#0a0a0b;
  --muted:#1c1d21;
  --nav:#0e1013;
  --rail-link:#16181c;
  --on-accent:#fff;
  --subtle:rgba(27,27,31,.05);
  --frame:#f4f4f4;
  --accent:#7a1f2b;
  --accent-rgb:122,31,43;
  --accent-hover:#5c1620;
  --tint:rgba(122,31,43,.06);
  --divider:rgba(27,27,31,.1);
  --divider-strong:rgba(27,27,31,.22);
  --shadow:rgba(27,27,31,.12);
  --career:#2c4a9a; --career-bg:rgba(44,74,154,.09);
  --academic:#1f6b3a; --academic-bg:rgba(31,107,58,.1);
  color-scheme:light;
}

/* Dark theme: follows the OS until the visitor picks one with the toggle,
   which the head script records as data-theme on <html>. */
:root[data-theme="dark"]{
  --bg:#1c1c1d;
  --surface:#232326;
  --text:#e8e8e8;
  --muted:#d2d3d6;
  --nav:#e8e8e8;
  --rail-link:#d6d7d9;
  --accent:#2698ba;
  --accent-rgb:38,152,186;
  --accent-hover:#4fb6d6;
  --on-accent:#06161b;
  --tint:rgba(38,152,186,.14);
  --divider:rgba(255,255,255,.14);
  --divider-strong:rgba(255,255,255,.32);
  --shadow:rgba(0,0,0,.6);
  --subtle:rgba(255,255,255,.08);
  --frame:#2a2a2d;
  --career:#c4b5fd; --career-bg:rgba(196,181,253,.13);
  --academic:#9fdcb3; --academic-bg:rgba(159,220,179,.13);
  color-scheme:dark;
}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#1c1c1d;
    --surface:#232326;
    --text:#e8e8e8;
    --muted:#d2d3d6;
    --nav:#e8e8e8;
    --rail-link:#d6d7d9;
    --accent:#2698ba;
    --accent-rgb:38,152,186;
    --accent-hover:#4fb6d6;
    --on-accent:#06161b;
    --tint:rgba(38,152,186,.14);
    --divider:rgba(255,255,255,.14);
    --divider-strong:rgba(255,255,255,.32);
    --shadow:rgba(0,0,0,.6);
    --subtle:rgba(255,255,255,.08);
    --frame:#2a2a2d;
    --career:#c4b5fd; --career-bg:rgba(196,181,253,.13);
    --academic:#9fdcb3; --academic-bg:rgba(159,220,179,.13);
    color-scheme:dark;
  }
}

*,*::before,*::after{box-sizing:border-box}
html{font-size:14.5px; scroll-behavior:smooth; scroll-padding-top:18px; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--text); transition:background-color .2s, color .2s;
  font-family:var(--sans); font-size:1rem; line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-family:var(--serif); font-weight:500; letter-spacing:-.012em; line-height:1.15; margin:0 0 .5rem}
h2{font-size:1.65rem; margin:2.75rem 0 1rem}
h3{font-size:1.25rem}
p{margin:0 0 1rem}
a{color:var(--accent); text-decoration:none; text-underline-offset:.18em; text-decoration-thickness:1px; transition:color .15s}
a:hover{text-decoration:underline}
b,strong{font-weight:600}
img{max-width:100%; height:auto}
::selection{background:rgba(var(--accent-rgb),.18)}
ul{margin:0 0 1rem; padding-left:1.3rem}
li{margin-bottom:.3rem}
.note{color:var(--muted); font-size:.92rem}

.container{max-width:1120px; margin:0 auto; padding-inline:22px}
.icon{width:1em; height:1em; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; vertical-align:-.125em; flex-shrink:0}

/* ---------- masthead + navigation ---------- */
.masthead{position:relative; z-index:50; background:var(--bg); border-bottom:1px solid var(--divider)}
.masthead__inner{display:flex; flex-direction:column; align-items:stretch; gap:.9rem; padding-top:2.2rem; padding-bottom:.85rem}
.masthead__brand{display:flex; flex-direction:column; gap:.3rem; min-width:0}
.masthead__name{font-family:var(--serif); font-size:2.2rem; font-weight:500; letter-spacing:-.015em; line-height:1.1; margin:0}
.masthead__name a{color:var(--text)}
.masthead__name a:hover{color:var(--accent); text-decoration:none}
.masthead__tagline{margin:0; font-size:.9rem; color:var(--muted)}
.masthead__nav{display:flex; align-items:center; gap:.5rem}
.nav__links{display:flex; flex-wrap:wrap; align-items:center; gap:.2rem 1.45rem; list-style:none; margin:0; padding:0; flex:1}
.nav__links li{margin:0}
.nav__links a{display:block; padding:.25rem 0; font-size:1rem; font-weight:500; color:var(--nav); white-space:nowrap}
.nav__links a:hover{color:var(--accent); text-decoration:none}
.nav__links a.active{color:var(--text); font-weight:700}
.theme-toggle{display:inline-flex; width:40px; height:40px; border:0; border-radius:999px;
  background:transparent; color:var(--muted); cursor:pointer; font-size:1.15rem;
  align-items:center; justify-content:center; margin-left:.1rem; transition:color .15s, background .15s}
.theme-toggle .i-moon{color:#3d4fa8; fill:rgba(61,79,168,.18)}
.theme-toggle .i-sun{color:#ffc83d; fill:rgba(255,200,61,.3)}
.theme-toggle:hover{background:rgba(61,79,168,.1)}
:root[data-theme="dark"] .theme-toggle:hover{background:rgba(255,200,61,.14)}
.theme-toggle .i-sun{display:none}
:root[data-theme="dark"] .theme-toggle .i-sun{display:block}
:root[data-theme="dark"] .theme-toggle .i-moon{display:none}
.nav-toggle{display:none; width:44px; height:44px; border:0; border-radius:999px;
  background:transparent; color:var(--muted); cursor:pointer; font-size:1.2rem;
  align-items:center; justify-content:center}
.nav-toggle:hover{color:var(--accent); background:rgba(var(--accent-rgb),.08)}
@media(max-width:760px){
  .masthead__inner{flex-direction:row; align-items:flex-start; justify-content:space-between; gap:1rem; padding-top:1.4rem; padding-bottom:1rem}
  .masthead__brand{flex:1 1 auto}
  .masthead__name{font-size:1.75rem}
  .masthead__nav{flex:none}
  .nav-toggle{display:inline-flex}
  .nav__links{display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column;
    align-items:stretch; gap:0; padding:.5rem 22px 1rem; background:var(--bg);
    border-bottom:1px solid var(--divider); box-shadow:0 20px 40px -24px var(--shadow)}
  .nav__links.is-open{display:flex}
  .nav__links a{padding:.8rem .25rem; border-bottom:1px solid var(--divider)}
}

/* ---------- page frame ---------- */
main{padding-top:2.5rem}
.page-header{margin-bottom:2rem; padding-bottom:1.25rem; border-bottom:1px solid var(--divider)}
.page-title{font-size:clamp(2rem,4vw,2.75rem); margin-bottom:.35rem}
.page-desc{font-size:1.05rem; color:var(--muted); margin:0; max-width:46rem}
.site-footer{margin-top:4rem; padding:1.6rem 0 2.5rem; border-top:1px solid var(--divider);
  font-size:.85rem; color:var(--muted)}
.site-footer .container{display:flex; flex-wrap:wrap; justify-content:space-between; gap:.4rem 1.5rem}
.site-footer a{color:var(--muted); text-decoration:underline; text-decoration-color:var(--divider-strong)}
.site-footer a:hover{color:var(--accent)}

/* ---------- buttons, pills, tags ---------- */
.link-pills{display:flex; flex-wrap:wrap; gap:.45rem; justify-content:center}
.link-pill{display:inline-flex; align-items:center; gap:.45rem; padding:.45rem .85rem;
  border-radius:999px; border:1px solid var(--divider-strong); font-size:.8rem; font-weight:500;
  line-height:1; color:var(--text); transition:all .15s}
.link-pill .icon{font-size:.95em; color:var(--accent)}
.link-pill:hover{border-color:var(--accent); color:var(--accent); text-decoration:none}
.link-pill--primary{background:var(--accent); border-color:var(--accent); color:var(--on-accent)}
.link-pill--primary .icon{color:inherit}
.link-pill--primary:hover{background:var(--accent-hover); border-color:var(--accent-hover); color:var(--on-accent)}
.pill-btn{display:inline-block; font-size:.68rem; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; border-radius:999px; border:1px solid var(--divider-strong);
  color:var(--text); padding:.3rem .75rem; margin:0 .35rem .35rem 0; line-height:1.4; transition:all .15s}
.pill-btn:hover{color:var(--accent); border-color:var(--accent); background:rgba(var(--accent-rgb),.05); text-decoration:none}
.topic{display:inline-block; font-size:.66rem; font-weight:600; letter-spacing:.03em;
  padding:.18rem .5rem; border-radius:4px; background:var(--chip,#7a1f2b); color:#fff;
  white-space:nowrap; line-height:1.4; margin:0 .3rem .35rem 0}
.callout{display:flex; gap:.9rem; align-items:flex-start; padding:.85rem 1.15rem; border-radius:14px;
  background:rgba(var(--accent-rgb),.06); border:1px solid rgba(var(--accent-rgb),.18);
  margin:1.2rem 0 0; font-size:.96rem}
.callout .icon{color:var(--accent); margin-top:.3rem; font-size:1.1rem}
.callout p{margin:0}

/* ---------- home: intro ---------- */
.intro{display:grid; grid-template-columns:minmax(0,1fr) 240px; gap:3.25rem; align-items:start; padding:.25rem 0 .5rem}
.intro__text{font-size:1rem; line-height:1.5}
.intro__text p{margin:0 0 .45rem}
.intro__lede{font-family:var(--serif); font-size:1.42rem; line-height:1.4; letter-spacing:-.01em; margin-bottom:1.25rem!important}
.directions{list-style:none; counter-reset:dir; margin:0 0 .45rem; padding:0; display:grid; gap:.15rem}
.directions li{position:relative; padding-left:2.6rem; counter-increment:dir; margin:0}
.directions li::before{content:"0" counter(dir); position:absolute; left:0; top:.1em;
  font-family:var(--serif); font-style:italic; font-size:1.1rem; color:var(--accent)}
.directions b{font-weight:600}
.intro__aside{display:flex; flex-direction:column; align-items:center; text-align:center; gap:1.1rem; padding-top:.5rem}
.portrait{display:block; width:180px; height:180px; border-radius:50%; object-fit:cover; object-position:50% 22%;
  box-shadow:0 0 0 4px var(--bg),0 0 0 5px rgba(var(--accent-rgb),.35),0 26px 40px -28px var(--shadow)}
.status{display:inline-flex; align-items:center; gap:.5rem; font-size:.78rem; font-weight:500; color:var(--accent);
  border:1px solid rgba(var(--accent-rgb),.35); background:var(--tint); border-radius:999px; padding:.4rem .9rem}
.status::before{content:""; width:.55rem; height:.55rem; border-radius:50%; background:var(--accent)}
.intro__facts{list-style:none; margin:0; padding:0; display:grid; gap:.35rem; font-size:.85rem; color:var(--muted)}
.intro__facts li{display:flex; align-items:center; justify-content:center; gap:.45rem; margin:0}
.intro__facts .icon{color:var(--accent); font-size:.9em}
.intro__facts a{color:var(--muted)}
.intro__facts a:hover{color:var(--accent)}
/* profile links under the portrait: CV on top, a 2x2 grid, email last */
.intro__aside .link-pills{display:grid; grid-template-columns:1fr 1fr; gap:.5rem; width:100%; max-width:250px}
.intro__aside .link-pill{justify-content:center; gap:.4rem; padding:.6rem .5rem; border-radius:10px;
  background:var(--surface); font-size:.8rem; white-space:nowrap}
.intro__aside .link-pill:hover{background:var(--tint); transform:translateY(-1px); box-shadow:0 6px 14px -10px var(--shadow)}
.intro__aside .link-pill--primary{grid-column:1 / -1; padding:.7rem .5rem; font-size:.86rem; font-weight:600; background:var(--accent)}
.intro__aside .link-pill--primary:hover{background:var(--accent-hover)}
.intro__aside .link-pill:last-child{grid-column:1 / -1}
.intro__aside .link-pill:focus-visible{border-radius:10px}
@media(max-width:820px){
  .intro{grid-template-columns:1fr; gap:1.5rem}
  .intro__aside{order:-1}
}

/* ---------- section heads with "see all" links ---------- */
.section__head{display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin:2.75rem 0 1rem;
  padding-bottom:.6rem; border-bottom:1px solid var(--divider)}
.section__head h2{margin:0}
.section__link{font-size:.88rem; font-weight:500; white-space:nowrap}
.sec-title{margin:2.75rem 0 1rem; padding-bottom:.6rem; border-bottom:1px solid var(--divider)}
main > section:first-of-type > .sec-title:first-child,
main > section:first-of-type > .xp-group:first-child{margin-top:0}

/* ---------- news ---------- */
.news-scroll{max-height:280px; overflow-y:auto; padding-right:.8rem}
.news-scroll::-webkit-scrollbar{width:8px}
.news-scroll::-webkit-scrollbar-track{background:var(--subtle); border-radius:5px}
.news-scroll::-webkit-scrollbar-thumb{background:rgba(var(--accent-rgb),.35); border-radius:5px}
.news-list{margin:0; padding-left:1.25rem; font-size:.96rem}
.news-list li{margin:0 0 .3rem; padding-left:.1rem}
.news-list li::marker{color:var(--text)}
.news-list b{font-weight:600}
.news-list li[hidden]{display:none}
.ntag{display:inline-block; font-size:.66rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  padding:.1rem .45rem; border-radius:5px; vertical-align:1px; margin-right:.15rem; line-height:1.5}
.ntag{color:#fff}
.ntag--research{background:#7a1f2b}
.ntag--career{background:#172a6b}
.ntag--academic{background:#1d5e3c}
.news-filter{display:flex; flex-wrap:wrap; gap:.3rem}
.news-filter button{font:inherit; font-size:.78rem; font-weight:500; padding:.25rem .7rem; border-radius:999px;
  border:1px solid var(--divider-strong); background:transparent; color:var(--muted); cursor:pointer; transition:all .15s}
.news-filter button:hover{color:var(--accent); border-color:var(--accent)}
.news-filter button[aria-pressed="true"]{background:var(--accent); border-color:var(--accent); color:var(--on-accent)}
@media(max-width:640px){.section__head:has(.news-filter){flex-direction:column; align-items:flex-start; gap:.6rem}}

/* ---------- home: short research experience list ---------- */
.xp-list{margin:0; padding-left:1.25rem}
.xp-list > li{margin:0 0 .9rem; padding-left:.1rem}
.xp-list > li::marker{color:var(--text)}
.xp-list__head{display:flex; justify-content:space-between; align-items:baseline; gap:.2rem 1rem; flex-wrap:wrap}
.xp-list__when{font-size:.8rem; color:var(--muted); white-space:nowrap; font-variant-numeric:tabular-nums}
.xp-list__who{font-size:.93rem; font-style:italic; color:var(--muted)}
.xp-list p{margin:.15rem 0 0; font-size:.96rem}

/* ---------- publication stats: one tile per category ---------- */
.stats{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.4rem; margin:0 0 1.4rem; padding:.2rem 0 1.3rem;
  border-bottom:1px solid var(--divider)}
.stats__tile{padding-left:.9rem; border-left:2px solid rgba(var(--accent-rgb),.55)}
.stats__tile b{display:block; font-family:var(--serif); font-size:2.3rem; font-weight:500; line-height:1; color:var(--accent)}
.stats__tile span{display:block; font-weight:600; font-size:.92rem; margin:.4rem 0 .2rem}
.stats__tile small{display:block; font-size:.8rem; color:var(--muted); line-height:1.45}
@media(max-width:640px){.stats{grid-template-columns:1fr}}

/* ---------- publications ---------- */
/* reference list: title, authors, summary, venue */
.pubs{margin:0 0 1rem; padding-left:1.25rem}
.pubs > li{margin:0 0 1.1rem; padding-left:.1rem}
.pubs > li::marker{color:var(--text)}
.pubs__title{color:var(--text); font-weight:600; text-decoration:underline; text-decoration-color:rgba(var(--accent-rgb),.55); text-underline-offset:3px}
.pubs__title:hover{color:var(--accent); text-decoration-color:var(--accent)}
.pubs__authors{font-size:.95rem}
.pubs__authors .me{font-weight:600; text-decoration:underline; text-underline-offset:3px}
.pubs__summary{font-size:.92rem; font-style:italic; color:var(--muted)}
.pubs__venue{font-size:.95rem}
.pubs__where{color:var(--accent); font-weight:600}
.pubs__venue .topic{margin:0; vertical-align:1px}
.pubs__title--plain{text-decoration:none}
.pubs__note{font-size:.88rem; font-style:italic; color:var(--muted)}

/* ---------- experience / education blocks (shared .exp markup) ---------- */
.exp{position:relative; margin:0 0 0 .3rem; padding:0 0 1.3rem 1.6rem; border-left:1px solid var(--divider-strong)}
.exp:last-of-type{padding-bottom:.4rem}
.exp::before{content:""; position:absolute; left:-5px; top:.5rem; width:9px; height:9px; border-radius:50%; background:var(--accent)}
.exp .head{display:flex; justify-content:space-between; align-items:baseline; gap:.2rem 1.2rem; flex-wrap:wrap}
.exp .role{font-family:var(--serif); font-size:1.2rem; font-weight:600; letter-spacing:-.01em; line-height:1.3}
.exp .when{font-size:.74rem; color:var(--muted); white-space:nowrap; font-weight:500; letter-spacing:.07em; text-transform:uppercase}
.exp .org{margin:.1rem 0 .35rem; font-family:var(--serif); font-style:italic; font-size:1.02rem}
.exp .org a,.exp .role a{font-weight:inherit}
.exp .chips{display:flex; flex-wrap:wrap; gap:.35rem; margin:.15rem 0 .45rem}
.exp .chips .topic{margin:0}
.exp ul{margin:.2rem 0 0; padding-left:1.1rem; list-style-type:circle}
.exp li{font-size:.95rem; margin-bottom:.25rem}
.exp li::marker{color:var(--accent)}
.exp > p{margin:.2rem 0 0; font-size:.95rem}
.xp-group{font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin:1.8rem 0 .6rem}

.skills{display:grid; grid-template-columns:12rem 1fr; gap:.7rem 1.4rem; margin:0}
.skills dt{font-weight:600; font-size:.92rem; color:var(--accent)}
.skills dd{margin:0; font-size:.96rem}
@media(max-width:640px){.skills{grid-template-columns:1fr; gap:.1rem}.skills dd{margin-bottom:.7rem}}
.skill-line{font-size:.97rem; margin:0 0 .65rem}

.awards{width:100%; border-collapse:collapse; font-size:.96rem; margin-bottom:1rem}
.awards td{padding:.5rem 0; vertical-align:top; border-bottom:1px solid var(--divider)}
.awards td.rank{white-space:nowrap; font-weight:600; width:8.5rem; padding-right:1rem}
.awards td.yr{text-align:right; white-space:nowrap; color:var(--muted); font-size:.85rem; width:3.5rem}

.tags-row{display:flex; flex-wrap:wrap; gap:.4rem}
.tag{display:inline-block; font-size:.68rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  border-radius:999px; border:1px solid var(--divider-strong); color:var(--text); padding:.3rem .75rem; line-height:1.4}
a.tag:hover{color:var(--accent); border-color:var(--accent); text-decoration:none; background:rgba(var(--accent-rgb),.05)}

/* ---------- education: grade boxes ---------- */
.grades{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:.7rem; margin:.6rem 0 .5rem}
.grades div{border:1px solid rgba(var(--accent-rgb),.45); border-radius:10px; padding:.65rem .9rem; background:var(--subtle)}
.grades span{display:block; font-size:.68rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--muted)}
.grades b{display:block; font-family:var(--serif); font-size:1.4rem; font-weight:500; margin-top:.15rem}
.grades small{font-size:.8rem; color:var(--muted)}

/* ---------- plain bullet lists (awards, references, skills) ---------- */
.plain-list{margin:0 0 1rem; padding-left:1.25rem}
.plain-list > li{margin:0 0 .45rem; padding-left:.1rem}
.plain-list > li::marker{color:var(--text)}
.plain-list .yr{color:var(--muted); font-size:.88rem}
.plain-list .sub{display:block; font-size:.93rem; color:var(--muted)}

/* ---------- blog ---------- */
.post-list{list-style:none; margin:0 0 1rem; padding:0}
.post-row{display:grid; grid-template-columns:300px minmax(0,1fr); gap:1.8rem; align-items:center;
  padding:1.6rem 0; border-bottom:1px solid var(--divider); margin:0}
.post-row:first-child{padding-top:.4rem}
.post-row:last-child{border-bottom:0}
.post-row__img{display:block; border-radius:12px; overflow:hidden; border:1px solid var(--divider); background:#fff}
.post-row__img img{display:block; width:100%; aspect-ratio:16/10; object-fit:cover; object-position:top; transition:transform .35s ease}
.post-row:hover .post-row__img img{transform:scale(1.035)}
.post-row__meta{font-size:.74rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin-bottom:.35rem}
.post-row__title{font-size:1.5rem; font-weight:600; line-height:1.22; margin:0 0 .45rem}
.post-row__link{color:var(--text)}
.post-row__link:hover{color:var(--accent); text-decoration:none}
.post-row p{font-size:.98rem; color:var(--muted); margin:0 0 .7rem}
.post-row__tags,.post__tags{display:flex; flex-wrap:wrap; gap:.35rem}
.post-row__tags .topic,.post__tags .topic{margin:0}
@media(max-width:700px){.post-row{grid-template-columns:1fr; gap:.9rem}.post-row__title{font-size:1.3rem}}
@media(max-width:560px){.post__body{font-size:1.05rem}.post__body pre{font-size:.8rem; padding:.75rem .8rem}.post__body h3{font-size:1.25rem}}
.post{max-width:720px; margin:0 auto}
.post__head{margin:0 0 2rem; padding-bottom:1.4rem; border-bottom:1px solid var(--divider)}
.post__back{display:inline-block; font-size:.88rem; font-weight:500; margin-bottom:1.1rem}
.post__title{font-size:clamp(1.9rem,4vw,2.6rem); line-height:1.15; margin:0 0 .6rem}
.post__meta{font-size:.78rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin:0 0 .7rem}
.post__body{font-family:var(--serif); font-size:1.13rem; line-height:1.65}
.post__body p{margin:0 0 1rem}
.post__body h3{font-size:1.4rem; font-weight:600; margin:2rem 0 .6rem}
.post__body figure{margin:1.6rem 0}
.post__body img{display:block; width:100%; height:auto; border-radius:10px; border:1px solid var(--divider); background:#fff}
.post__body blockquote{margin:1.4rem 0; padding:.2rem 0 .2rem 1.1rem; border-left:3px solid var(--accent); font-style:italic; color:var(--muted)}
.post__body pre{font-family:ui-monospace,"Cascadia Code",Consolas,monospace; font-size:.86rem; line-height:1.55; background:var(--subtle);
  border:1px solid var(--divider); border-radius:8px; padding:.9rem 1rem; overflow-x:auto; margin:0 0 1.1rem}
.post__body code{font-family:ui-monospace,"Cascadia Code",Consolas,monospace; font-size:.88em; background:var(--subtle); padding:.05rem .3rem; border-radius:4px}
.post__body pre code{background:none; padding:0}
.post__body ul,.post__body ol{margin:0 0 1rem}

/* KV-cache demo (blog/kv-cache-eviction.html) */
.kv-demo{margin:1.8rem 0; padding:1.1rem 1.1rem 1rem; border:1px solid var(--divider-strong); border-radius:14px; background:var(--surface); font-family:var(--sans,inherit)}
.kv-demo__stage{position:relative}
.kv-demo__grid{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:.6rem}
.kv-block{position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:3px; padding:6px; border:1.5px solid var(--divider-strong);
  border-radius:9px; transition:border-color .4s, background .4s}
.kv-slot{aspect-ratio:1; border-radius:3px; background:var(--subtle)}
.kv-block__freed{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:.78rem; font-weight:600;
  color:var(--academic); opacity:0; transition:opacity .4s; pointer-events:none}
.kv-block.is-freed{border-style:dashed; border-color:var(--academic); background:var(--academic-bg)}
.kv-block.is-freed .kv-slot{opacity:0; transition:opacity .4s}
.kv-block.is-freed .kv-block__freed{opacity:1}
.kv-demo__tokens{position:absolute; inset:0; pointer-events:none}
.kv-token{position:absolute; left:0; top:0; border-radius:3px; background:var(--accent); opacity:0; transform-origin:center;
  transition:opacity .25s, transform .9s cubic-bezier(.65,0,.35,1)}
.kv-token.is-on{opacity:1}
.kv-token.is-gone{opacity:0; transition:opacity .5s}
.kv-demo__bar{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.6rem 1rem; margin-top:.9rem}
.kv-demo__step{font-size:.92rem; font-weight:600; margin:0}
.kv-demo__stats{font-size:.82rem; color:var(--muted); margin:.15rem 0 0; font-variant-numeric:tabular-nums}
.kv-demo__replay{font:inherit; font-size:.82rem; font-weight:500; padding:.35rem .9rem; border-radius:999px; cursor:pointer;
  border:1px solid var(--divider-strong); background:transparent; color:var(--text)}
.kv-demo__replay:hover{border-color:var(--accent); color:var(--accent)}
.kv-demo figcaption{font-size:.85rem; color:var(--muted); margin-top:.7rem; font-style:italic}
@media(max-width:560px){.kv-demo__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.kv-token{transition:none}}

/* ---------- beyond research: card layout ---------- */
.epigraph{margin:0 0 1.6rem; padding:1.3rem 1.6rem; border-left:4px solid var(--accent); background:var(--tint); border-radius:0 14px 14px 0}
.epigraph blockquote{margin:0; font-family:var(--serif); font-style:italic; font-size:1.4rem; line-height:1.4}
.epigraph figcaption{margin-top:.55rem; font-size:.88rem; color:var(--muted)}
.bento{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem}
.card{border:1px solid var(--divider-strong); border-radius:16px; padding:1.15rem 1.25rem; background:var(--surface); margin:0;
  transition:transform .2s, box-shadow .2s, border-color .2s}
.card:hover{transform:translateY(-2px); box-shadow:0 16px 30px -22px var(--shadow); border-color:rgba(var(--accent-rgb),.45)}
.card--wide{grid-column:span 2}
.card--full{grid-column:1 / -1}
.card__label{display:flex; align-items:center; gap:.45rem; font-size:.72rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin-bottom:.7rem}
.card__label .icon{font-size:1rem}
.card__title{font-size:1.3rem; font-weight:600; margin:0 0 .35rem}
.card__title a{color:var(--text)}
.card p{margin:0 0 .5rem; font-size:.95rem}
.card__lede{margin-bottom:.9rem!important}
.card__link{display:inline-block; margin-top:.4rem; font-size:.88rem; font-weight:600}
.card--shop{background:linear-gradient(135deg,var(--tint),transparent 70%), var(--surface)}
.shop{display:grid; grid-template-columns:170px minmax(0,1fr); gap:1.3rem; align-items:center}
.shop__stat b{display:block; font-family:var(--serif); font-size:2.8rem; font-weight:500; line-height:1; color:var(--accent)}
.shop__stat span{display:block; font-size:.82rem; color:var(--muted); margin-top:.4rem}
/* book covers: one palette shared with the topic chips */
.shelf{list-style:none; margin:0 0 .4rem; padding:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:.7rem}
.cover{position:relative; min-height:12.5rem; border-radius:4px 10px 10px 4px; padding:.8rem .7rem .7rem 1rem; margin:0;
  display:flex; flex-direction:column; justify-content:space-between; color:#fff; overflow:hidden;
  box-shadow:inset 6px 0 0 rgba(0,0,0,.22), 0 10px 18px -14px rgba(0,0,0,.6); transition:transform .2s}
.cover::after{content:""; position:absolute; inset:0; background:linear-gradient(115deg,rgba(255,255,255,.14),transparent 45%); pointer-events:none}
.cover:hover{transform:translateY(-4px) rotate(-1deg)}
.cover b{font-family:var(--serif); font-size:1.02rem; font-weight:600; line-height:1.2}
.cover span{font-size:.72rem; opacity:.85}
.cover q{display:block; margin:.6rem 0; font-family:var(--serif); font-style:italic; font-size:.84rem; line-height:1.4; opacity:.92}
.cover--purple{background:#6b1f7a} .cover--magenta{background:#7d1650} .cover--green{background:#1d5e3c} .cover--navy{background:#172a6b}
.cover--indigo{background:#2f3a8f} .cover--maroon{background:#7a1f2b} .cover--teal{background:#0f5c6b} .cover--brown{background:#7a4a12}
.watch__row{display:flex; align-items:baseline; gap:1rem; padding:.45rem 0; border-top:1px solid var(--divider)}
.watch__row:first-of-type{border-top:0}
.watch__kind{flex:none; width:5.5rem; font-size:.78rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.watch__pills{display:flex; flex-wrap:wrap; gap:.4rem}
.pill{font-family:var(--serif); font-size:.98rem; padding:.2rem .75rem; border-radius:999px; color:#fff}
.pill--indigo{background:#2f3a8f} .pill--green{background:#1d5e3c} .pill--maroon{background:#7a1f2b}
.life__icon{display:inline-flex; align-items:center; justify-content:center; width:2.6rem; height:2.6rem; border-radius:12px; margin-bottom:.7rem; font-size:1.25rem; color:#fff}
.life__icon--teal{background:#0f5c6b} .life__icon--brown{background:#7a4a12} .life__icon--maroon{background:#7a1f2b}
:root[data-theme="dark"] .cover,:root[data-theme="dark"] .pill,:root[data-theme="dark"] .life__icon{filter:brightness(1.12) saturate(.95); color:#f1f1f2}
@media(max-width:860px){.bento{grid-template-columns:1fr 1fr}.card--wide{grid-column:1 / -1}.shelf{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:600px){.bento{grid-template-columns:1fr}.shop{grid-template-columns:1fr; gap:.6rem}
  .shelf{grid-template-columns:repeat(2,minmax(0,1fr))}.watch__row{flex-direction:column; gap:.4rem}.epigraph blockquote{font-size:1.15rem}}

/* ---------- "On this page" beside blog posts (built by site.js) ---------- */
.toc{display:none; position:fixed; top:150px; left:calc(50% + 388px); width:228px; max-height:calc(100vh - 190px); overflow-y:auto;
  padding:.85rem .9rem .85rem 1rem; border:1px solid var(--divider); border-radius:12px; background:var(--surface); z-index:30;
  box-shadow:0 12px 30px -24px var(--shadow); scrollbar-width:thin}
.toc__title{font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:0 0 .45rem}
.toc ol{list-style:none; margin:0; padding:0}
.toc li{margin:0}
.toc a{position:relative; display:block; padding:.24rem 0 .24rem .85rem; font-size:.82rem; line-height:1.35; color:var(--muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-decoration:none}
.toc a.toc__sub{padding-left:1.7rem; font-size:.78rem}
.toc a:hover{color:var(--text); text-decoration:none}
.toc a.is-active{color:var(--accent); font-weight:600}
.toc a.is-active::before{content:""; position:absolute; left:.1rem; top:50%; width:.36rem; height:.36rem; margin-top:-.18rem; border-radius:50%; background:var(--accent)}
.toc a.toc__sub.is-active::before{left:.95rem}
@media(min-width:1310px){.toc{display:block}}
/* the series hub's contents: a sidebar on wide screens, a card under the title otherwise */
.series-index{display:block; position:static; width:auto; max-height:none; margin:0 0 1.8rem; padding:1rem 1.1rem}
.series-index > ol > li{margin:0 0 .35rem}
.series-index .series-index__part,.series-index__planned{display:flex; align-items:baseline; gap:.5rem; white-space:normal; padding:.25rem 0; font-size:.84rem; line-height:1.35; font-weight:600; color:var(--text); text-decoration:none}
.series-index .series-index__part::before{display:none}
.series-index__planned{color:var(--muted); font-weight:500}
.series-index__n{flex:none; display:inline-flex; align-items:center; justify-content:center; width:1.35rem; height:1.35rem; border-radius:50%;
  font-size:.7rem; font-weight:700; background:var(--accent); color:var(--on-accent)}
.series-index__planned .series-index__n{background:transparent; border:1.5px dashed var(--divider-strong); color:var(--muted)}
.series-index ol ol{margin:.1rem 0 .3rem}
.series-index ol ol a.toc__sub{padding-left:1.85rem; white-space:normal}
.series-index a:hover{color:var(--accent)}
@media(min-width:1310px){.series-index{position:fixed; top:185px; width:250px; max-height:calc(100vh - 215px); margin:0}}
@media print{.toc{display:none!important}}

/* ---------- blog series: featured card, hub roadmap, part navigation ---------- */
.wm-thumb{display:block; width:100%; height:auto}
.featured{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); border:1px solid var(--divider-strong); border-radius:18px;
  overflow:hidden; background:var(--surface); margin:0 0 2.6rem; transition:box-shadow .2s, border-color .2s}
.featured:hover{border-color:rgba(var(--accent-rgb),.45); box-shadow:0 22px 40px -30px var(--shadow)}
.featured__thumb{display:block; background:#ffffff; border-right:1px solid var(--divider)}
.featured__thumb .wm-thumb{height:100%; object-fit:cover}
.featured__text{padding:1.4rem 1.5rem 1.3rem; display:flex; flex-direction:column}
.featured__label{font-size:.72rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--accent); margin-bottom:.5rem}
.featured__title{font-size:1.75rem; font-weight:600; line-height:1.15; margin:0 0 .5rem}
.featured__title a{color:var(--text)}
.featured__title a:hover{color:var(--accent); text-decoration:none}
.featured__text > p{font-size:.95rem; color:var(--muted); margin:0 0 .9rem}
.featured__parts{list-style:none; margin:0 0 1.1rem; padding:0; display:grid; gap:.35rem}
.featured__parts li{margin:0}
.featured__parts a{display:flex; align-items:baseline; gap:.6rem; color:var(--text); font-size:.93rem; line-height:1.35}
.featured__parts a:hover{color:var(--accent); text-decoration:none}
.featured__parts span{flex:none; font-size:.7rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); width:3.2rem}
.featured__actions{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:auto}
.featured__cta,.featured__repo{display:inline-flex; align-items:center; font-size:.85rem; font-weight:600; padding:.5rem 1rem; border-radius:999px}
.featured__cta{background:var(--accent); color:var(--on-accent)}
.featured__cta:hover{background:var(--accent-hover); color:var(--on-accent); text-decoration:none}
.featured__repo{border:1px solid var(--divider-strong); color:var(--text)}
.featured__repo:hover{border-color:var(--accent); color:var(--accent); text-decoration:none}
.post-list__heading{margin-top:0}
@media(max-width:760px){.featured{grid-template-columns:1fr}}

.series-kicker{font-size:.74rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--accent); margin:0 0 .5rem}
.series-hero{margin:0 0 2rem; border-radius:16px; overflow:hidden; border:1px solid var(--divider)}
.roadmap__heading{font-size:1.6rem; margin:2.8rem 0 1.2rem; padding-bottom:.5rem; border-bottom:1px solid var(--divider)}
.roadmap{list-style:none; margin:0; padding:0 0 0 2.9rem; position:relative}
.roadmap::before{content:""; position:absolute; left:1.05rem; top:.6rem; bottom:.6rem; width:2px; background:var(--divider-strong)}
.roadmap__item{position:relative; margin:0 0 .9rem}
.roadmap__node{position:absolute; left:-2.9rem; top:.85rem; width:2.2rem; height:2.2rem; border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-weight:700; font-size:.92rem; background:var(--accent); color:var(--on-accent); box-shadow:0 0 0 4px var(--bg)}
.roadmap__item--planned .roadmap__node{background:var(--bg); color:var(--muted); border:2px dashed var(--divider-strong)}
.roadmap__card{display:block; padding:1rem 1.2rem; border:1px solid var(--divider-strong); border-radius:14px; background:var(--surface); color:var(--text);
  transition:transform .2s, box-shadow .2s, border-color .2s}
a.roadmap__card:hover{transform:translateY(-2px); border-color:rgba(var(--accent-rgb),.5); box-shadow:0 16px 30px -24px var(--shadow); text-decoration:none}
.roadmap__item--planned .roadmap__card{border-style:dashed; background:transparent}
.roadmap__status{display:block; font-size:.72rem; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--accent); margin-bottom:.3rem}
.roadmap__item--planned .roadmap__status{color:var(--muted)}
.roadmap__title{font-size:1.22rem; font-weight:600; line-height:1.25; margin:0 0 .3rem}
.roadmap__item--planned .roadmap__title{color:var(--muted)}
.roadmap__summary{font-size:.93rem; color:var(--muted); margin:0}
.roadmap__modules{list-style:none; margin:.7rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.35rem}
.roadmap__modules li{margin:0; font-size:.74rem; padding:.2rem .6rem; border-radius:999px; background:var(--subtle); color:var(--text)}

.series-steps{display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1rem; margin:0 0 1.2rem}
.series-steps__hub{font-size:.85rem; font-weight:600; white-space:nowrap}
.series-steps ol{list-style:none; display:flex; align-items:center; gap:.35rem; margin:0; padding:0}
.series-steps li{margin:0}
.series-steps ol a,.series-steps ol span{display:inline-flex; align-items:center; justify-content:center; width:1.75rem; height:1.75rem; border-radius:50%;
  font-size:.78rem; font-weight:600; border:1.5px solid rgba(var(--accent-rgb),.55); color:var(--accent)}
.series-steps ol a:hover{background:var(--tint); text-decoration:none}
.series-steps ol a.is-current{background:var(--accent); border-color:var(--accent); color:var(--on-accent)}
.series-steps .is-planned{border:1.5px dashed var(--divider-strong); color:var(--muted)}
.series-kicker a{color:inherit}
.series-code{display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.9rem}
.series-code__link{display:inline-flex; align-items:center; font-size:.82rem; font-weight:600; padding:.4rem .9rem; border-radius:999px;
  border:1px solid var(--divider-strong); color:var(--text)}
.series-code__link:first-child{background:var(--accent); border-color:var(--accent); color:var(--on-accent)}
.series-code__link:hover{border-color:var(--accent); color:var(--accent); text-decoration:none}
.series-code__link:first-child:hover{background:var(--accent-hover); color:var(--on-accent)}
.series-nav{display:grid; grid-template-columns:1fr 1fr; gap:.8rem; margin:2.4rem 0 0; padding-top:1.4rem; border-top:1px solid var(--divider)}
.series-nav__link{display:block; padding:.85rem 1rem; border:1px solid var(--divider-strong); border-radius:12px; color:var(--text);
  font-family:var(--serif); font-size:1.02rem; font-weight:600; line-height:1.3}
.series-nav__link small{display:block; font-family:var(--sans); font-size:.72rem; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--accent); margin-bottom:.25rem}
a.series-nav__link:hover{border-color:var(--accent); background:var(--tint); text-decoration:none}
.series-nav__link--next{text-align:right; grid-column:2}
.series-nav__link.is-planned{border-style:dashed; color:var(--muted)}
.series-nav__link.is-planned small{color:var(--muted)}
@media(max-width:560px){.series-nav{grid-template-columns:1fr}.series-nav__link--next{grid-column:auto; text-align:left}}

/* ---------- Learning World Models series: module text ---------- */
.post--series .post__body h2{font-family:var(--sans); font-size:1.75rem; font-weight:700; line-height:1.2; margin:3.2rem 0 .4rem}
.post--series .post__body .wm-module-tag{font-family:var(--sans); font-size:.74rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin:4rem 0 0; scroll-margin-top:1.5rem}
.post--series .post__body .wm-module-tag + h2{margin-top:.3rem}
.wm-toc{font-family:var(--sans); font-size:.95rem; border:1px solid var(--divider); border-radius:12px; padding:1rem 1.2rem; margin:1.6rem 0 2rem; background:var(--surface)}
.wm-toc p{margin:0 0 .5rem; font-weight:600}
.wm-toc ol{margin:0; padding-left:1.3rem}
.wm-toc li{margin:.2rem 0}
.wm-credit{font-family:var(--sans); font-size:.9rem; line-height:1.55; border-left:3px solid var(--accent); background:var(--tint); padding:.8rem 1rem; border-radius:0 8px 8px 0; margin:0 0 1.6rem}
.wm-credit p{margin:0 0 .4rem}
.wm-credit p:last-child{margin:0}
.post--series .post__body table{width:100%; border-collapse:collapse; font-family:var(--sans); font-size:.9rem; line-height:1.45; margin:0 0 1.2rem}
.post--series .post__body th,.post--series .post__body td{text-align:left; padding:.45rem .6rem; border-bottom:1px solid var(--divider); vertical-align:top}
.post--series .post__body th{font-weight:600; border-bottom-color:var(--divider-strong)}
.wm-table-wrap{overflow-x:auto; margin:0 0 1.2rem}
.wm-table-wrap table{margin:0}
.wm-pager{display:flex; justify-content:space-between; gap:1rem; font-family:var(--sans); font-size:.88rem; margin:2rem 0 0; padding-top:1rem; border-top:1px solid var(--divider)}
.wm-note{font-family:var(--sans); font-size:.85rem; color:var(--muted); font-style:italic}

/* ---------- shared demo frame (same look as .kv-demo) ---------- */
.wm-demo{margin:1.8rem 0; padding:1.1rem 1.1rem 1rem; border:1px solid var(--divider-strong); border-radius:14px; background:var(--surface); font-family:var(--sans)}
.wm-demo canvas{display:block; width:100%; height:auto; border-radius:8px; image-rendering:pixelated; touch-action:manipulation}
.wm-demo__bar{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.6rem 1rem; margin-top:.9rem}
.wm-demo__controls{display:flex; flex-wrap:wrap; align-items:center; gap:.45rem}
.post--series .post__body .wm-demo__step{font-size:.92rem; font-weight:600; margin:0}
.post--series .post__body .wm-demo__stats{font-size:.82rem; color:var(--muted); margin:.15rem 0 0; font-variant-numeric:tabular-nums}
.post--series .post__body .wm-pong__label{margin:0 0 .35rem}
.wm-demo-weight canvas{max-width:340px; margin:0 auto}
.wm-btn{font:inherit; font-size:.82rem; font-weight:500; padding:.35rem .9rem; border-radius:999px; cursor:pointer; color:var(--text); background:transparent; border:1px solid var(--divider-strong)}
.wm-btn:hover{border-color:var(--accent); color:var(--accent)}
.wm-btn[aria-pressed="true"]{background:var(--accent); border-color:var(--accent); color:var(--on-accent)}
.wm-slider{display:flex; align-items:center; gap:.6rem; font-size:.85rem; margin:.7rem 0 0; flex-wrap:wrap}
.wm-slider input{flex:1 1 180px; accent-color:var(--accent)}
.wm-slider output{font-variant-numeric:tabular-nums; min-width:3.5rem; font-weight:600}
.wm-demo figcaption{font-size:.85rem; color:var(--muted); margin-top:.7rem; font-style:italic}

/* wm-vmc diagram */
.wm-vmc{margin:1.6rem 0}
.wm-vmc svg{display:block; width:100%; height:auto; font-family:var(--sans)}
.wm-vmc__net{fill:var(--tint); stroke:var(--accent); stroke-width:1.6}
.wm-vmc__io{fill:var(--surface); stroke:var(--divider-strong); stroke-width:1.4}
.wm-vmc__io--dash{stroke-dasharray:5 4}
.wm-vmc__T{fill:var(--accent); font-size:22px; font-weight:700; text-anchor:middle}
.wm-vmc__t{fill:var(--text); font-size:14px; font-weight:600; text-anchor:middle}
.wm-vmc__s{fill:var(--muted); font-size:11.5px; text-anchor:middle}
.wm-vmc__a{fill:none; stroke:var(--muted); stroke-width:1.6}
.wm-vmc__a--act{stroke:var(--accent); stroke-dasharray:5 4}
.wm-vmc__head{fill:var(--muted)}
.wm-vmc__l{fill:var(--muted); font-size:12px; text-anchor:middle}
.wm-vmc__l--act{fill:var(--accent)}
.wm-vmc__l--start{text-anchor:start}
.wm-vmc__l--end{text-anchor:end}

/* wm-demo-pong */
.wm-pong__screens{display:grid; grid-template-columns:1fr 1fr; gap:.8rem}
.wm-pong__label{font-size:.78rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; margin:0 0 .35rem; color:var(--muted)}
.wm-pong__label--dream{color:var(--accent)}

/* wm-demo-ablation (static bars) */
.wm-bars{display:grid; grid-template-columns:auto 1fr auto; gap:.45rem .7rem; align-items:center; font-size:.85rem}
.wm-bars__track{height:14px; background:var(--subtle); border-radius:999px; overflow:hidden}
.wm-bars__fill{height:100%; background:var(--accent); border-radius:999px}
.wm-bars__val{font-variant-numeric:tabular-nums; font-weight:600}

@media (max-width:560px){ .wm-pong__screens{grid-template-columns:1fr} }

/* ---------- contact ---------- */
.contact-top{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:2.4rem; align-items:start}
.contact-lede{font-family:var(--serif); font-size:1.35rem; line-height:1.45; margin:0 0 1.2rem}
.contact-lede b{font-weight:600}
.contact-mail{display:inline-flex; align-items:center; gap:.6rem; font-family:var(--serif); font-size:1.3rem; font-weight:500;
  color:var(--text); padding:.7rem 1.1rem; border:1px solid rgba(var(--accent-rgb),.45); border-radius:12px;
  background:var(--tint); transition:border-color .15s, transform .15s}
.contact-mail .icon{color:var(--accent)}
.contact-mail:hover{border-color:var(--accent); transform:translateY(-1px); text-decoration:none}
.contact-where{display:flex; align-items:center; gap:.45rem; font-size:.9rem; color:var(--muted); margin:1rem 0 0}
.contact-where .icon{color:var(--accent)}
.contact-tiles{list-style:none; margin:0; padding:0; display:grid; gap:.55rem}
.contact-tiles li{margin:0}
.ctile{display:flex; align-items:center; gap:.85rem; padding:.7rem .95rem; border:1px solid var(--divider-strong);
  border-radius:12px; color:var(--text); transition:border-color .15s, background .15s, transform .15s}
.ctile .icon{font-size:1.15rem; color:var(--accent); flex:none}
.ctile b{display:block; font-weight:600; font-size:.95rem; line-height:1.3}
.ctile small{display:block; font-size:.8rem; color:var(--muted); line-height:1.3}
.ctile:hover{border-color:var(--accent); background:var(--tint); transform:translateY(-1px); text-decoration:none}
.refs{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem}
.ref{margin:0; padding:1.05rem 1.2rem; border:1px solid var(--divider-strong); border-radius:12px; display:flex; flex-direction:column}
.ref__name{font-family:var(--serif); font-size:1.2rem; font-weight:600; color:var(--text); line-height:1.25}
.ref__name:hover{color:var(--accent); text-decoration:none}
.ref__title{font-size:.92rem; font-weight:500; margin-top:.25rem}
.ref__org{font-size:.92rem; color:var(--muted)}
.ref__note{font-size:.84rem; color:var(--muted); font-style:italic; margin:.5rem 0 .75rem}
.ref__mail{margin-top:auto; display:inline-flex; align-items:center; gap:.4rem; font-size:.88rem; font-weight:500; align-self:flex-start}
@media(max-width:760px){.contact-top{grid-template-columns:1fr; gap:1.8rem}.refs{grid-template-columns:1fr}}
@media(max-width:420px){.contact-mail{font-size:1.05rem; padding:.6rem .85rem}}

/* ---------- CV viewer ---------- */
.cv-actions{display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:.4rem}

/* ---------- "Page Contents" floating card ---------- */
#rail{position:fixed; top:50%; right:18px; transform:translateY(-50%); z-index:40; background:var(--surface);
  border:1px solid var(--divider); border-radius:14px; padding:15px 20px 15px 17px; min-width:200px;
  box-shadow:0 10px 30px -14px var(--shadow); max-height:82vh; overflow-y:auto}
#rail .rail-title{font-family:var(--serif); font-weight:600; font-size:1.05rem; margin-bottom:10px}
#rail a{display:flex; align-items:center; gap:9px; padding:3.5px 0; font-family:var(--serif);
  font-size:.98rem; color:var(--rail-link); text-decoration:none; line-height:1.35}
#rail a .ico{font-size:15px; flex:0 0 auto; line-height:1; display:inline-flex; color:var(--accent)}
#rail a:hover{color:var(--accent)}
#rail a.on{color:var(--accent); font-weight:600}
/* The card lives in the gutter beside the centred container. When that gutter
   gets tight (including when the browser is zoomed, which shrinks the CSS
   viewport) it drops its labels and becomes a slim icon strip instead of
   vanishing; only phone-width screens hide it, where even the strip would
   cover text. */
@media(max-width:1640px){
  #rail{min-width:0; padding:7px 5px; right:7px; border-radius:11px}
  #rail .rail-title{display:none}
  #rail a{justify-content:center; gap:0; width:34px; height:32px; border-radius:6px; padding:0}
  #rail a .label{display:none}
  #rail a .ico{font-size:16px}
  #rail a:hover{background:rgba(var(--accent-rgb),.08)}
  #rail a.on{background:rgba(var(--accent-rgb),.12)}
}
/* only needed when the centred container leaves less than ~54px of gutter */
@media(min-width:901px) and (max-width:1290px){body.has-rail .container{padding-right:76px}}
@media(max-width:900px){#rail{display:none}}
@media(max-width:640px){html{font-size:16px}.container{padding-inline:18px}}

/* ---------- accessibility and interaction ---------- */
.skip-link{position:absolute; left:12px; top:-60px; z-index:100; background:var(--accent); color:var(--on-accent);
  padding:.6rem 1rem; border-radius:8px; font-weight:600; font-size:.9rem}
.skip-link:focus{top:12px; text-decoration:none}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px}
.link-pill:focus-visible,.pill-btn:focus-visible,.tag:focus-visible,.nav-toggle:focus-visible{border-radius:999px}
.news-scroll:focus-visible{outline-offset:6px; border-radius:8px}
#main:focus{outline:0}

/* Inline links sit in near-black text, so colour alone does not mark them:
   give them a soft underline that firms up on hover. Pills, tags and the
   nav carry a class and keep their own treatment. */
main a:not([class]){text-decoration:underline; text-decoration-color:rgba(var(--accent-rgb),.3); text-underline-offset:.22em}
main a:not([class]):hover{text-decoration-color:var(--accent)}
/* Dark mode: links are teal text with no underline until hover, and the
   filled CV button becomes a quiet outlined one. */
:root[data-theme="dark"] main a:not([class]){color:var(--accent); text-decoration:none}
:root[data-theme="dark"] main a:not([class]):hover{color:var(--accent-hover); text-decoration:underline; text-decoration-color:currentColor}
:root[data-theme="dark"] .link-pill--primary{background:rgba(var(--accent-rgb),.14); border-color:rgba(var(--accent-rgb),.5); color:var(--text)}
:root[data-theme="dark"] .link-pill--primary .icon{color:var(--accent)}
:root[data-theme="dark"] .link-pill--primary:hover{background:rgba(var(--accent-rgb),.22); border-color:var(--accent); color:var(--text)}
:root[data-theme="dark"] .news-filter button[aria-pressed="true"]{background:rgba(var(--accent-rgb),.16); border-color:rgba(var(--accent-rgb),.6); color:var(--text)}
:root[data-theme="dark"] .topic{background:var(--chip-dark,#86343f); color:#f1f1f2}
:root[data-theme="dark"] .ntag--research{background:#86343f; color:#f1f1f2}
:root[data-theme="dark"] .ntag--career{background:#33468f; color:#f1f1f2}
:root[data-theme="dark"] .ntag--academic{background:#226845; color:#f1f1f2}
:root[data-theme="dark"] .pubs__title,:root[data-theme="dark"] .pubs__authors .me{text-decoration-color:rgba(var(--accent-rgb),.45)}
.intro__facts a:not([class]){text-decoration:none}

h1,h2,h3{text-wrap:balance}
p,li,dd{text-wrap:pretty}
.exp .when,.awards td.yr{font-variant-numeric:tabular-nums}
button,.nav-toggle{cursor:pointer}

/* larger hit areas where the pointer is a finger */
@media(pointer:coarse){
  .link-pill{padding:.75rem 1.05rem}
  .pill-btn,.tag{padding:.6rem .95rem}
  .section__link{padding:.5rem 0}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important; animation-duration:.01ms!important}
}

@media print{
  #rail,.masthead__nav,.skip-link,.cv-actions{display:none!important}
  .news-scroll{max-height:none; overflow:visible}
  a{color:inherit}
}