/* generated by tools/personal/fonts.py: faces and metric-matched fallbacks */
@font-face{font-family:Newsreader;src:url(/assets/personal/fonts/newsreader.woff2?v=v-a65cb3602f38) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Newsreader;src:url(/assets/personal/fonts/newsreader-italic.woff2?v=v-a65cb3602f38) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:Space;src:url(/assets/fonts/space-grotesk-500.woff2?v=v-a65cb3602f38) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Hanken;src:url(/assets/fonts/hanken-grotesk-400.woff2?v=v-a65cb3602f38) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Plex;src:url(/assets/fonts/ibm-plex-mono-400.woff2?v=v-a65cb3602f38) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader Fallback";src:local("Georgia");size-adjust:92.67%;ascent-override:79.31%;descent-override:28.60%;line-gap-override:0.00%}
@font-face{font-family:"Hanken Fallback";src:local("Arial");size-adjust:98.58%;ascent-override:101.44%;descent-override:30.74%;line-gap-override:0.00%}
@font-face{font-family:"Space Fallback";src:local("Arial");size-adjust:106.34%;ascent-override:92.54%;descent-override:27.46%;line-gap-override:0.00%}
@font-face{font-family:"Plex Fallback";src:local("Menlo");size-adjust:99.66%;ascent-override:102.85%;descent-override:27.59%;line-gap-override:0.00%}

/* RAMIN RAJAII Professional Website — the personal room. Built into assets/personal/personal.css by tools/personal/build.py
(fonts.css is prepended). Tokens equal assets/experience/identity.css :root (gate P5). No inline styles anywhere (§8.5). */

:root{
  --bg:#07080d;--panel:#101019;--panel2:#191427;--text:#f6f2fa;--muted:#b4acbd;--subtle:#a29aad;--line:#30273c;--line-light:#54425f;
  --indigo:#6549ff;--violet:#a844ff;--magenta:#ff3b9c;--ember:#ff8b47;--copper:#ff8b47;--cream:#ffdbc8;--lavender:#d5a1ff;--ice:#93d9ff;--green:#80e4c2;
  --brand-spectrum:linear-gradient(105deg,#a07bff 0%,#d54bff 34%,#ff4baf 64%,#ff994e 100%);
  --s-med:var(--ice);--s-law:var(--lavender);--s-ai:var(--magenta);--s-teach:var(--ember);--s-core:var(--cream);
  --t-ease:cubic-bezier(.22,1,.36,1);--t-ease-long:cubic-bezier(.65,0,.35,1);--t-spring:cubic-bezier(.34,1.56,.64,1);
  --t-feedback:200ms;--t-state:700ms;--t-state-long:900ms;--t-state-xl:1100ms;
  --glass:rgba(16,16,25,.97);--glass-strong:#101019;
  --glass-line:color-mix(in srgb,var(--lavender) 22%,transparent);--glass-filter:saturate(1.3) blur(18px);
  --serif:Newsreader,"Newsreader Fallback",Georgia,serif;--sans:Hanken,"Hanken Fallback",Arial,system-ui,sans-serif;
  --ui:Space,"Space Fallback",Arial,system-ui,sans-serif;--mono:Plex,"Plex Fallback",Menlo,"Courier New",monospace;
  --gutter:clamp(16px,4vw,64px);--max:1240px;--measure:68ch;--hdr:64px;
  --fs-name:clamp(60px,11vw,168px);--fs-title:clamp(56px,7.8vw,116px);--fs-h2:clamp(36px,4.4vw,62px);--fs-h3:clamp(22px,2vw,28px);
  --fs-body:18px;--lh-body:1.65;--fs-num:clamp(52px,6.2vw,96px);
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--sp-7:48px;--sp-8:64px;--sp-9:96px;--sp-10:128px;--sp-11:192px;
  --section:var(--sp-10);--strand:var(--s-core);--on:var(--s-core);
}
@media (max-width:640px){:root{--fs-body:17px;--lh-body:1.6;--section:80px}}

/* ---- base ---- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:calc(var(--hdr) + 36px);background:var(--bg);color:var(--text);color-scheme:dark;font-synthesis:none;-webkit-text-size-adjust:100%;scrollbar-gutter:stable;hanging-punctuation:first last}
body{margin:0;font:400 var(--fs-body)/var(--lh-body) var(--sans);font-feature-settings:"kern","liga";text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;min-height:100svh;overflow-x:clip}
h1,h2,h3,h4{margin:0;font-weight:400;text-wrap:balance}
p{margin:0;text-wrap:pretty}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
a:where(:not([class])){text-decoration:underline;text-decoration-color:var(--line-light);text-underline-offset:.18em;transition:text-decoration-color var(--t-feedback) var(--t-ease)}
a:where(:not([class])):hover{text-decoration-color:var(--strand)}
.nav a,.menu a,.spine a,.crumbs a,.selected a,.related a,.ftr .links a,.lane .more,.pub .t a,.latest a,.counts a,.profiles a,.cv-index a,.cv-pubs a,.work .h4 a,.tl-table td a{text-decoration:none}
img,svg,canvas,video,picture{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--strand);outline-offset:3px;border-radius:3px}
::selection{background:color-mix(in srgb,var(--strand) 35%,transparent)}
strong,b{font-weight:inherit}
em,i{font-style:italic}
cite,i.case{font-family:var(--serif);font-style:italic;font-optical-sizing:auto}   /* the shipped Newsreader italic (journals, case names); no synthesized faces anywhere */
.nw{white-space:nowrap}
.arr{width:.75em;height:.9em;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}   /* no shipped face has a down arrow */
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:16px;top:-60px;z-index:50;padding:10px 14px;border-radius:10px;background:var(--text);color:var(--bg);font:500 14px/1 var(--ui);transition:top var(--t-feedback) var(--t-ease)}
.skip:focus{top:16px}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gutter)}
.measure{max-width:var(--measure)}
.hair{border:0;border-top:1px solid var(--line);margin:0}
.tab{font-variant-numeric:tabular-nums lining-nums}
section.sec{padding-block:var(--section)}
section.sec+section.sec{padding-top:0}
/* the CV's long record defers its rendering for the first paint only: personal.js renders each section in idle time after the LCP,
   and at once before any in-page jump or on a deep link, so every jump lands on real heights */
@media screen{main>section.sec.cv:not(.rendered){content-visibility:auto;contain-intrinsic-size:auto 900px}}   /* without a script, nojs.css (in <noscript>) renders it all */

/* ---- type ---- */
.eyebrow{font:500 12px/1.4 var(--ui);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.eyebrow b{color:var(--strand);font-weight:500}
.display,.title,.h2,.h3,.num{font-family:var(--serif);font-optical-sizing:auto;letter-spacing:-.018em}
.display{font-size:var(--fs-name);line-height:.92;letter-spacing:-.024em}
.title{font-size:var(--fs-title);line-height:1.04;letter-spacing:-.022em}
.h2{font-size:var(--fs-h2);line-height:1.04}
.h3{font-size:var(--fs-h3);line-height:1.2;letter-spacing:-.01em}
.num{font-size:var(--fs-num);line-height:1;font-variant-numeric:lining-nums proportional-nums;letter-spacing:-.02em}
.lede{font-size:clamp(18px,1.3vw,21px);line-height:1.55;max-width:48ch}
.mono{font:400 13px/1.6 var(--mono);color:var(--muted);font-variant-numeric:tabular-nums lining-nums}
.ui{font:500 14px/1.4 var(--ui);letter-spacing:.01em}
.muted{color:var(--muted)}.subtle{color:var(--subtle)}
.postnom{font-family:var(--serif);font-size:.82em;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.quote{font-family:var(--serif);font-style:italic;font-size:clamp(24px,2.3vw,32px);line-height:1.32;letter-spacing:-.008em;max-width:30ch}
.prose{max-width:var(--measure)}
.prose p+p{margin-top:1.2em}
.prose .lede+p{margin-top:1.6em}
.sechead{display:grid;gap:var(--sp-3);margin-bottom:var(--sp-7)}
.sechead .h2{max-width:22ch}
.sechead .eyebrow::before{content:"";display:inline-block;width:28px;height:1px;background:var(--strand);vertical-align:middle;margin-right:12px}
.strand-med{--strand:var(--s-med)}.strand-law{--strand:var(--s-law)}.strand-ai{--strand:var(--s-ai)}.strand-teach{--strand:var(--s-teach)}.strand-core{--strand:var(--s-core)}
.dot{display:inline-block;width:.55em;height:.55em;border-radius:50%;background:var(--strand);box-shadow:0 0 10px 2px color-mix(in srgb,var(--strand) 55%,transparent);vertical-align:0;margin-right:.5em}

/* ---- header ---- */
.hdr{position:fixed;inset:12px 12px auto;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:16px;height:var(--hdr);max-height:64px;padding:0 18px;border:1px solid var(--glass-line);border-radius:16px;background:var(--panel);backdrop-filter:var(--glass-filter);-webkit-backdrop-filter:var(--glass-filter);transition:height var(--t-state) var(--t-ease),inset var(--t-state) var(--t-ease),border-radius var(--t-state) var(--t-ease)}
html[data-compact] .hdr{height:48px;inset:8px 8px auto;border-radius:12px}
.hdr .mark{display:grid;place-items:center;width:40px;height:40px;position:relative;font-family:var(--serif);font-size:24px;line-height:1;color:var(--text);view-transition-name:mark}
.hdr .mark::after{content:"";position:absolute;left:8px;right:8px;bottom:4px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--s-med),var(--s-law),var(--s-ai),var(--s-teach))}
.nav{position:relative;display:flex;gap:4px;margin:0 auto}
.nav a{position:relative;display:inline-flex;align-items:center;height:36px;padding:0 10px;border-radius:8px;font:500 13px/1 var(--ui);color:var(--muted);transition:color var(--t-feedback) var(--t-ease)}
.nav a:hover,.nav a[aria-current=page]{color:var(--text)}
.nav-ind{position:absolute;bottom:2px;height:2px;border-radius:2px;background:var(--on);box-shadow:0 0 10px var(--on);transition:left var(--t-state) var(--t-ease),width var(--t-state) var(--t-ease);view-transition-name:nav-indicator}
.hdr .sub{font:500 12px/1 var(--ui);letter-spacing:.04em;color:var(--muted);white-space:nowrap;padding:8px 0}
.hdr .sub:hover{color:var(--text)}
.menu-btn{display:none;font:500 13px/1 var(--ui);height:36px;padding:0 12px;border:1px solid var(--line);border-radius:8px}
@media (max-width:1099px){.nav,.nav-ind{display:none}.menu-btn{display:inline-flex;align-items:center;gap:8px}.hdr .sub{display:none}}
.menu{position:fixed;inset:0;z-index:40;background:var(--bg);padding:0;border:0;margin:0;width:100%;height:100%;max-width:none;max-height:none;color:var(--text)}
.menu:not([open]){display:none}
.menu::backdrop{background:var(--bg)}
.menu .inner{position:relative;z-index:1;display:grid;align-content:center;gap:6px;min-height:100svh;padding:96px var(--gutter) 48px}
.menu a{font-family:var(--serif);font-size:clamp(40px,9vw,64px);line-height:1.05;letter-spacing:-.02em;padding:4px 0;color:var(--muted)}
.menu a[aria-current=page],.menu a:hover{color:var(--text)}
.menu .strands{position:absolute;inset:0;pointer-events:none;opacity:.5}
.menu .close{position:fixed;top:20px;right:20px;z-index:2;width:44px;height:44px;border:1px solid var(--line-light);border-radius:12px;font:500 13px/1 var(--ui)}
.menu .sub{margin-top:24px;font:500 13px/1 var(--ui);color:var(--muted)}

/* ---- spine ---- */
.spine{position:fixed;left:max(14px,calc((100vw - var(--max)) / 2 - 42px));top:0;bottom:0;width:2px;z-index:20;pointer-events:none;view-transition-name:spine}
.spine::before{content:"";position:absolute;inset:0;background:linear-gradient(var(--s-core),color-mix(in srgb,var(--s-core) 35%,transparent) 55%,color-mix(in srgb,var(--s-core) 10%,transparent));opacity:.75}
.spine ol{position:absolute;inset:0}
.spine a{position:absolute;left:-11px;width:24px;height:24px;margin-top:-6px;display:grid;place-items:center;border-radius:50%;pointer-events:auto}
.spine a::after{content:"";width:12px;height:12px;border-radius:50%;background:var(--bg);border:1px solid var(--line-light);transition:background var(--t-state) var(--t-ease),box-shadow var(--t-state) var(--t-ease),border-color var(--t-state) var(--t-ease)}
.spine a[aria-current=true]::after{background:var(--strand,var(--s-core));border-color:var(--strand,var(--s-core));box-shadow:0 0 14px 3px color-mix(in srgb,var(--strand,var(--s-core)) 60%,transparent)}
.spine a span{position:absolute;left:26px;top:2px;white-space:nowrap;font:500 11px/1.6 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);opacity:0;transition:opacity var(--t-feedback) var(--t-ease)}
.spine a:hover span,.spine a:focus-visible span{opacity:1}
@media (max-width:1099px){.spine{left:0;width:2px}.spine::before{background:var(--line)}.spine::after{content:"";position:absolute;left:0;top:0;width:2px;height:calc(var(--progress,0) * 100%);background:var(--s-core)}.spine ol{display:none}}

/* ---- footer ---- */
.ftr{border-top:1px solid var(--line);padding-block:var(--sp-8) var(--sp-7);color:var(--muted);font-size:14px}
.ftr .top{display:grid;grid-template-columns:1fr auto;gap:var(--sp-6);align-items:start}
.ftr .name{font-family:var(--serif);font-size:28px;line-height:1;color:var(--text);letter-spacing:-.01em}
.ftr .links{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:14px}
.ftr .links a,.ftr .links button{font:500 13px/1 var(--ui);color:var(--muted);display:inline-flex;align-items:center;gap:6px;min-height:24px}
.ftr .links a:hover,.ftr .links button:hover{color:var(--text)}
.kbd{margin-left:.5em;font:400 12px/1 var(--mono);color:var(--subtle)}
@media (pointer:coarse){.kbd{display:none}}
.ftr .bottom{display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:var(--sp-7);font:400 12.5px/1.6 var(--mono);color:var(--subtle)}
@media (max-width:640px){.ftr .top{grid-template-columns:1fr}}

/* ---- controls ---- */
.btn{display:inline-flex;align-items:center;gap:.5em;min-height:44px;padding:0 20px;border-radius:999px;border:1px solid var(--line-light);font:500 14px/1 var(--ui);color:var(--text);background:transparent;transition:border-color var(--t-feedback) var(--t-ease),background var(--t-feedback) var(--t-ease),transform var(--t-feedback) var(--t-ease)}
.btn:hover{border-color:var(--strand);background:color-mix(in srgb,var(--strand) 10%,transparent)}
.btn:active{transform:translateY(1px)}
.btn.solid{background:var(--text);color:var(--bg);border-color:var(--text)}
.btn.solid:hover{background:var(--cream);border-color:var(--cream)}
.btn.sm{min-height:36px;padding:0 14px;font-size:13px}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{display:inline-flex;align-items:center;gap:.55em;min-height:36px;padding:0 14px 0 12px;border-radius:999px;border:1px solid var(--line);font:500 13px/1 var(--ui);color:var(--muted);background:color-mix(in srgb,var(--panel) 70%,transparent);transition:color var(--t-feedback) var(--t-ease),border-color var(--t-feedback) var(--t-ease),opacity var(--t-state) var(--t-ease)}
.chip{--c:var(--strand)}.chip i{width:8px;height:8px;border-radius:50%;background:var(--c);box-shadow:0 0 10px 2px color-mix(in srgb,var(--c) 60%,transparent);transition:background var(--t-feedback) var(--t-ease)}
.chip:hover,.chip:focus-visible,.chip[aria-pressed=true],.chip.lit{color:var(--text);border-color:color-mix(in srgb,var(--c) 60%,var(--line))}
.chips[data-lit] .chip:not(.lit) i{opacity:.35;box-shadow:none}
.toggle{display:inline-flex;align-items:center;gap:8px;min-height:24px;font:500 13px/1 var(--ui);color:var(--muted)}
.toggle i{width:28px;height:16px;border-radius:8px;border:1px solid var(--line-light);position:relative;transition:background var(--t-feedback) var(--t-ease)}
.toggle i::after{content:"";position:absolute;top:2px;left:2px;width:10px;height:10px;border-radius:50%;background:var(--muted);transition:transform var(--t-feedback) var(--t-spring),background var(--t-feedback)}
.toggle[aria-pressed=true] i{background:color-mix(in srgb,var(--s-core) 30%,transparent)}
.toggle[aria-pressed=true] i::after{transform:translateX(12px);background:var(--s-core)}
.copy{display:inline-flex;align-items:center;gap:8px}
.copy .status{font:400 12px/1.4 var(--mono);color:var(--s-teach);min-width:7ch}

/* ---- receipts ---- */
.rm{display:inline-grid;place-items:center;width:24px;height:24px;margin:0 0 0 .2em;vertical-align:-.3em;border-radius:6px;color:var(--rc,var(--green));transition:background var(--t-feedback) var(--t-ease)}
.rm::before{content:"";position:absolute}
.rm svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;border:1px solid currentColor;border-radius:4px;padding:1px;box-sizing:content-box}
.rm:hover,.rm[aria-expanded=true]{background:color-mix(in srgb,currentColor 14%,transparent)}
.rm.rec{--rc:var(--lavender)}.rm.inst{--rc:var(--ice)}
.receipt{position:fixed;inset:auto;margin:0;padding:16px 18px 14px;width:min(360px,calc(100vw - 32px));border:1px solid var(--glass-line);border-radius:14px;background:var(--panel);color:var(--text);box-shadow:0 24px 60px -24px #000;display:none;gap:8px;z-index:35}
.receipt:popover-open{display:grid}
.receipt:not(:popover-open){display:none!important}   /* a closed card never renders, whatever else shares its class names */
.receipt>span{display:block}   /* spans, so a receipt may sit inside a paragraph */
.receipt .t{display:flex;align-items:center;gap:8px;font:500 11.5px/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--rc,var(--green))}
.receipt .t svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.receipt .claim{font-family:var(--serif);font-size:19px;line-height:1.25;letter-spacing:-.01em}
.receipt .m{font:400 12.5px/1.6 var(--mono);color:var(--muted)}
.receipt .l{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:8px;border-top:1px solid var(--line);font:500 13px/1.4 var(--ui);color:var(--rc,var(--green))}
.receipt .l small{font:400 11px/1 var(--mono);color:var(--subtle);letter-spacing:.06em}
.receipt.rec{--rc:var(--lavender)}.receipt.inst{--rc:var(--ice)}
.receipt::backdrop{background:transparent}
@media (max-width:640px){.receipt{left:16px!important;right:16px;width:auto}}

/* ---- palette ---- */
.palette{position:fixed;inset:0;margin:0;padding:0;border:0;width:100%;height:100%;max-width:none;max-height:none;background:color-mix(in srgb,var(--bg) 60%,transparent);color:var(--text)}
.palette:not([open]){display:none}
.palette::backdrop{background:transparent}
.palette .box{width:min(640px,calc(100vw - 32px));margin:12vh auto 0;border:1px solid var(--glass-line);border-radius:16px;background:var(--glass-strong);backdrop-filter:var(--glass-filter);-webkit-backdrop-filter:var(--glass-filter);box-shadow:0 30px 80px -30px #000;overflow:hidden}
.palette input{width:100%;padding:18px 20px;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--text);font:400 17px/1.4 var(--sans);outline:0}
.palette ul{max-height:50vh;overflow:auto;padding:8px}
.palette li{padding:10px 12px;border-radius:10px;display:grid;grid-template-columns:1fr auto;gap:12px;align-items:baseline;cursor:pointer}
.palette li[aria-selected=true]{background:color-mix(in srgb,var(--panel2) 80%,transparent)}
.palette li .k{font:500 11px/1 var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.palette li .d{font-size:13px;color:var(--muted);grid-column:1/-1}
.palette .hint{display:flex;gap:16px;padding:10px 16px;border-top:1px solid var(--line);font:400 12px/1 var(--mono);color:var(--subtle)}
.palette .empty{padding:20px 16px;color:var(--muted);font-size:14px}

/* ---- hero ---- */
.hero{position:relative;min-height:100svh;overflow:clip;isolation:isolate}
.hero{--fsb:clamp(56px,11.7vw,168px);--ph:min(100svh,920px);--pw:calc(var(--ph) * .5416);--pr:max(0px,calc((100vw - var(--max)) / 2 - 24px));--pad:max(var(--gutter),calc((100vw - var(--max)) / 2 + var(--gutter)))}
.hero .scene{position:absolute;inset:0;z-index:3;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,#000 92%,transparent);mask-image:linear-gradient(180deg,#000 92%,transparent)}
.scene canvas,.scene .still,.scene picture.still img{position:absolute;inset:0;width:100%;height:100%}
.hero .scene,.halo.scene{mix-blend-mode:screen}   /* light only adds: it never darkens the photograph (the scene is its own stacking context, so the blend sits on it) */
.scene picture.still img{object-fit:cover}
.scene .fallback{display:none}
.portrait{position:absolute;z-index:2;bottom:0;right:var(--pr);height:var(--ph);aspect-ratio:2964/5504;margin:0}   /* the photograph's own frame (2026-10-25: cropped between "Reza" and "Raj") */
.portrait img{width:100%;height:100%;object-fit:cover}
/* the photo card (Ramin, 2026-10-24): the portrait sits in the site's glass (the header's fill, hairline and radius); the
   photograph's own edges are its sides, so the coat runs cleanly to them, and the card and the photo dissolve together at
   the foot on one curve, portrait.py's dissolve(): (1 − t)^1.6 from 74.56% of the photo's height, below the stitching */
.hero .portrait{-webkit-mask-image:linear-gradient(180deg,#000 74.56%,rgba(0,0,0,0.845) 77.10%,rgba(0,0,0,0.700) 79.65%,rgba(0,0,0,0.565) 82.19%,rgba(0,0,0,0.442) 84.74%,rgba(0,0,0,0.330) 87.28%,rgba(0,0,0,0.231) 89.82%,rgba(0,0,0,0.146) 92.37%,rgba(0,0,0,0.076) 94.91%,rgba(0,0,0,0.025) 97.46%,transparent 100%);mask-image:linear-gradient(180deg,#000 74.56%,rgba(0,0,0,0.845) 77.10%,rgba(0,0,0,0.700) 79.65%,rgba(0,0,0,0.565) 82.19%,rgba(0,0,0,0.442) 84.74%,rgba(0,0,0,0.330) 87.28%,rgba(0,0,0,0.231) 89.82%,rgba(0,0,0,0.146) 92.37%,rgba(0,0,0,0.076) 94.91%,rgba(0,0,0,0.025) 97.46%,transparent 100%)}
.hero .portrait::after{content:"";position:absolute;inset:var(--glass-top,0px) 0 0;z-index:-2;background:var(--panel);border-radius:16px;box-shadow:inset 0 0 0 1px var(--glass-line)}   /* the glass, behind the shadow and the photo */
/* the rim: a separate layer, masked to the inside edge of the coat and the hair (never the face), at 8% */
.portrait .rim{display:none;position:absolute;inset:1px;pointer-events:none;mix-blend-mode:screen;opacity:.08;background:linear-gradient(180deg,var(--s-med),var(--s-law) 35%,var(--s-ai) 65%,var(--s-teach));-webkit-mask:url(/assets/personal/portrait-rim.png?v=v-a65cb3602f38) 0 0/100% 100% no-repeat;mask:url(/assets/personal/portrait-rim.png?v=v-a65cb3602f38) 0 0/100% 100% no-repeat}
html[data-loaded] .portrait .rim{display:block}   /* after load: its mask is never fetched ahead of the portrait */
.hero .copy{position:relative;z-index:4;display:grid;gap:0;align-content:center;min-height:100svh;padding-top:calc(var(--hdr) + 40px);padding-bottom:64px;max-width:none;margin:0;padding-inline:max(var(--gutter),calc((100vw - var(--max)) / 2 + var(--gutter)));width:min(100%,calc(max(var(--gutter),calc((100vw - var(--max)) / 2 + var(--gutter))) + 640px))}
.hero .display .ln{position:relative;display:block;white-space:nowrap;color:var(--text);container-type:inline-size}
/* rhythm on the spacing scale: eyebrow 24 · name 32 · role 16 · thesis 24 · chips 8 · receipt line 16 · actions */
.hero .copy>.eyebrow{margin-bottom:var(--sp-5)}
.hero .copy>.display{margin-bottom:var(--sp-6)}
.hero .after{display:grid}
.hero .role{font:500 15px/1.5 var(--ui);color:var(--muted);max-width:44ch;margin-bottom:var(--sp-4)}
.hero .thesis{max-width:44ch;font-size:clamp(17px,1.25vw,20px);margin-bottom:var(--sp-5)}
.hero .receiptline{font:400 12.5px/1.5 var(--mono);color:var(--muted);min-height:1.5em;margin:var(--sp-2) 0 var(--sp-4)}
@media (min-width:1100px){.hero .receiptline{min-height:3em}}   /* two lines reserved: hovering a chip never moves the buttons */
.hero .actions{display:flex;gap:12px;flex-wrap:wrap}
.hero .copy{width:100%;align-content:start;padding-top:calc(var(--hdr) + 60px);z-index:auto}
.hero .display{font-size:var(--fsb);position:relative;z-index:1}
.hero .eyebrow,.hero .after{position:relative;z-index:4}
/* "Rajaii" ends where "Reza" ends (5.095em: the width of "Ramin Reza"); the whole name is always visible (Ramin, 2026-10-24) */
.hero .display .ln:nth-child(2){text-align:right;margin-right:calc(100% - 5.095em)}
.hero .after{max-width:min(54%,560px)}
/* wide screens: the whole name beside him, never under him (Ramin, 2026-10-24): line 1 ends at least 24 px before the
   portrait's box, the copy is centred below the header, and the role, thesis, chips and buttons follow the name */
@media (min-width:1100px){
  .hero{--pr:calc(max(calc(var(--pw) * .25),calc((100vw - var(--max)) / 2 - 144px)) - 8px);--fsb:clamp(56px,min(10vw,14.5svh,calc((100vw - var(--pr) - 8px - var(--pw) - var(--pad) - 24px) / 5.1)),168px)}   /* a quarter of his width in from the edge, so the braid is on screen; the card 8 px further right than the name's size assumes, so the name's ink (not only its advance) keeps 24 px from it (the photo card, 2026-10-24) */
  .hero .portrait{bottom:auto;top:calc(100svh - var(--ph))}   /* anchored to the screen, not the hero */
  .hero .portrait{right:calc(var(--pr) - (100vw - 100%) + var(--ph) * (2979 / 5500 - 2964 / 5504))}   /* the new photograph (2026-10-25) is a little narrower than the 2979 × 5500 one the layout's --pw still budgets, so the card keeps its left edge and his head stays where it was; placed from the window's right edge, the same 100vw the name's size comes from: a classic scrollbar narrows the hero (100%) but not 100vw, and placing the card from the hero's edge moved it a scrollbar's width toward the name (Ramin, 2026-10-25) */
  .hero .portrait{--glass-top:max(0px,calc(40px - (100svh - var(--ph))))}   /* the card's top edge never rises above 40 px: it starts behind the floating header, not in the strip above it */
  .hero .copy{align-content:center;padding-top:calc(12px + var(--hdr) + 32px);padding-bottom:56px}   /* 32 px under the floating header's real bottom */
  .hero .role{max-width:none}.hero .role .r{white-space:nowrap}   /* the role line breaks only at a "·" */
  .hero .portrait::before{content:"";position:absolute;inset:0;z-index:-1;background:#000;opacity:.5;filter:blur(14px);transform:translateX(-10px);-webkit-mask:url(/assets/personal/portrait-shadow.png?v=v-a65cb3602f38) 0 0/100% 100% no-repeat;mask:url(/assets/personal/portrait-shadow.png?v=v-a65cb3602f38) 0 0/100% 100% no-repeat}
  .hero .after{margin-top:0;max-width:min(560px,calc(100vw - var(--pr) - 8px - var(--pw) - var(--pad) - 48px))}
}
@media (max-width:699px){
  .hero{display:grid;min-height:auto}
  .hero .copy{width:100%;min-height:auto;padding:0 var(--gutter) 56px;align-content:start;order:2;z-index:4}
  .hero .display{z-index:auto}
  .hero{--mph:58svh}
  .portrait,.hero .portrait{position:relative;right:auto;height:var(--mph);margin:calc(var(--hdr) + 20px) auto 24px;order:1}
  .hero .display{font-size:clamp(48px,15vw,64px)}
  .hero .display .ln:nth-child(2){margin-right:0;text-align:left}
  .hero .after{max-width:none}
  .hero .scene{inset:0 0 auto;height:calc(var(--mph) + var(--hdr) + 34px);-webkit-mask-image:linear-gradient(180deg,#000 88%,transparent);mask-image:linear-gradient(180deg,#000 88%,transparent)}
  /* phones: the name rises into the dissolved foot of the coat, above it */
  .hero .portrait{margin-bottom:0}
  .hero .copy{margin-top:calc(-0.14 * var(--mph));z-index:4}
  .hero .display{font-size:clamp(52px,17vw,72px);margin-bottom:var(--sp-4)}
  .hero .copy>.eyebrow{order:1;margin-bottom:var(--sp-5)}   /* the post-nominals follow the name here, clear of the coat */
  .hero .after{order:2}
}

/* tablets: name and copy left, the portrait right in its own column, the braid around it */
@media (min-width:700px) and (max-width:1099px){
  .hero{display:grid;grid-template-columns:minmax(0,54fr) minmax(0,46fr);--fsb:clamp(52px,8.6vw,92px)}
  .hero .portrait{position:relative;right:auto;bottom:auto;grid-column:2;grid-row:1;align-self:end;justify-self:end;height:min(calc(100svh - var(--hdr) - 40px),calc((46vw - var(--gutter)) * 1.8466));margin:0 var(--gutter) 0 0}   /* he fits his own column */
  .hero .copy{grid-column:1;grid-row:1;align-self:center;align-content:center;min-height:100svh;width:100%;padding:calc(var(--hdr) + 48px) 20px 64px max(var(--gutter),40px)}   /* and the copy ends before it */
  .hero .display .ln:nth-child(2){margin-right:0;text-align:left}
  .hero .after{max-width:none}
}
/* ---- home sections ---- */
.through{padding-block:var(--section)}
.through p{font-family:var(--serif);font-size:clamp(24px,2.6vw,36px);line-height:1.3;letter-spacing:-.012em;max-width:34ch}
.fields{position:relative}
.fields .pin{position:relative;isolation:isolate}
.fields .scene{position:absolute;inset:0;z-index:0;-webkit-mask-image:linear-gradient(180deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(180deg,transparent,#000 10%,#000 90%,transparent)}
.fields .lanes{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-6)}
/* a lane is a hairline column the strand descends into; the strands end on a line above it, so no light sits behind the text */
.lane{display:grid;gap:12px;align-content:start;padding-top:16px;border-top:1px solid color-mix(in srgb,var(--strand) 65%,var(--line));transition:opacity var(--t-state-long) var(--t-ease),transform var(--t-state-long) var(--t-ease)}
.lane .h3{display:flex;align-items:flex-start;gap:10px}
@media (min-width:1024px){.lane .h3{min-height:2.4em}}
.lane .h3 .dot{flex:none;margin-top:.42em}
.lane ul{display:grid;gap:8px;font-size:16px;line-height:1.5;color:var(--muted)}
.lane li{display:flex;gap:8px;align-items:flex-start}
.lane li::before{content:"";flex:0 0 5px;width:5px;height:5px;border-radius:50%;margin-top:.55em;background:var(--strand)}
.lane .more{display:inline-flex;align-items:center;min-height:24px;font:500 12.5px/1 var(--ui);color:var(--strand)}
.lane-tabs{display:none}
.lane-tabs button{display:inline-flex;align-items:center;gap:.5em;min-height:36px;padding:0 12px;border-radius:999px;border:1px solid var(--line);font:500 13px/1 var(--ui);color:var(--muted);background:var(--bg)}
.lane-tabs button i{width:8px;height:8px;border-radius:50%;background:var(--strand)}
.lane-tabs button[aria-pressed=true]{color:var(--text);border-color:var(--strand)}
@media (min-width:1024px){
  .fields .pin{position:sticky;top:0;height:100svh;overflow:clip}
  .fields .lanes{align-content:end;min-height:100svh;padding-top:calc(var(--hdr) + 32px);padding-bottom:var(--sp-8)}
  .fields .track{height:260svh}
  /* the lanes' hairlines and names are there from the start; each lane's facts arrive with its strand */
  html.js:is([data-tier=full],[data-tier=reduced]) .fields:not([data-stage="1"]):not([data-stage="2"]) .lane :is(ul,.more){opacity:0;transform:translateY(12px)}
  .lane :is(ul,.more){transition:opacity var(--t-state-long) var(--t-ease),transform var(--t-state-long) var(--t-ease)}
}
/* keyboard focus inside a lane shows it at once (WCAG 2.4.7); personal.js brings the scroll state along */
html.js:is([data-tier=full],[data-tier=reduced]) .fields .lanes .lane[data-strand]:focus-within :is(ul,.more){opacity:1;transform:none;transition:none}
html:is([data-tier=full],[data-tier=reduced]) .fields .lanes .lane[data-strand]:focus-within{opacity:1;transform:none;transition:none;pointer-events:auto}
@media (max-width:1023px){
  /* static tier and no script: the still as a band, then the four lanes */
  .fields .scene{position:relative;inset:auto;height:44svh}
  .fields .scene picture.still img{object-position:top}
  .fields .lanes{grid-template-columns:1fr;gap:var(--sp-7);padding-block:var(--sp-6) var(--sp-7)}
  .fields .track{display:none}
  /* light running: pinned; the strands split into four lanes and one lane's facts show at a time, by scroll or by tab */
  html:is([data-tier=full],[data-tier=reduced]) .fields .pin{position:sticky;top:0;height:100svh;overflow:clip}
  html:is([data-tier=full],[data-tier=reduced]) .fields .scene{position:absolute;inset:0;height:auto}
  html:is([data-tier=full],[data-tier=reduced]) .fields .track{display:block;height:320svh}
  html:is([data-tier=full],[data-tier=reduced]) .fields .lanes{position:absolute;inset:auto 0 0;grid-template-areas:"tabs" "lane";gap:var(--sp-4);padding-block:0 calc(var(--sp-6) + env(safe-area-inset-bottom))}
  html:is([data-tier=full],[data-tier=reduced]) .lane-tabs{grid-area:tabs;display:flex;flex-wrap:wrap;gap:8px}
  html:is([data-tier=full],[data-tier=reduced]) .fields .lane{grid-area:lane;opacity:0;transform:translateY(10px);pointer-events:none}
  html:is([data-tier=full],[data-tier=reduced]) :is(.fields[data-lane=med] .lane[data-strand=med],.fields[data-lane=law] .lane[data-strand=law],.fields[data-lane=ai] .lane[data-strand=ai],.fields[data-lane=teach] .lane[data-strand=teach]){opacity:1;transform:none;pointer-events:auto}
}
.selected ol{display:grid;border-top:1px solid var(--line)}
/* each row: its strand as a hairline, the title, a sentence with its link, and one figure with its receipt */
.selected li{position:relative;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:12px 48px;padding:32px 0 32px 28px;border-bottom:1px solid var(--line)}
.selected li::before{content:"";position:absolute;left:0;top:32px;bottom:32px;width:2px;border-radius:2px;background:var(--strand);box-shadow:0 0 12px 1px color-mix(in srgb,var(--strand) 45%,transparent)}
.selected .h3{font-size:clamp(26px,2.6vw,38px)}
.selected .body{display:grid;gap:12px;align-content:start}
.selected .d{font-size:17px;line-height:1.6;max-width:62ch}
.selected .go{font:500 14px/1 var(--ui);color:var(--strand);white-space:nowrap}
.selected .go:hover{text-decoration:underline;text-underline-offset:.2em}
.selected .fig{font:400 13px/1.6 var(--mono);color:var(--muted)}
@media (max-width:900px){.selected li{grid-template-columns:1fr}}
.latest ol{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.latest li{display:grid;grid-template-rows:auto auto auto 1fr;align-content:start;gap:10px;padding-top:16px;border-top:1px solid var(--line)}
.latest time,.latest .k{display:block;line-height:16px}
.latest time{font:400 12.5px/1 var(--mono);color:var(--muted)}
.latest .k{font:500 11px/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--strand)}
.latest .h3{font-size:20px}
@media (max-width:900px){.latest ol{grid-template-columns:1fr}}

/* ---- page opening (non-home) ---- */
.opening{padding-top:calc(var(--hdr) + 72px);padding-bottom:var(--sp-8);display:grid;gap:var(--sp-5)}
.opening .title{view-transition-name:page-title}
.opening .lede{color:var(--muted)}

/* ---- about ---- */
.about-open{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,38%);gap:var(--sp-6) var(--sp-8);align-items:start}
@media (min-width:700px) and (max-width:1099px){.about-open .tight{height:auto;aspect-ratio:4/5}.about-open .tight .halo{inset:-8% -5%}}   /* tablets: the frame is the photograph's own shape, so the halo sits on him */
/* the narrative runs on under the lede, beside the portrait, so no void opens below the opening */
.about-open .intro{grid-column:1;grid-row:1;display:grid;gap:var(--sp-5)}
.about-open .tight{grid-column:2;grid-row:1/span 2}
.about-open .narrative{grid-column:1;grid-row:2}
.about-open .first,.about-open .narrative p{max-width:64ch}   /* the reading measure (§5.4): 62–72 characters a line */
@media (min-width:1600px){   /* wide screens: the portrait and the anastomosis stage take the room to the right of the text column */
  .about-open,.anast-grid{max-width:none;margin-left:calc((100vw - var(--max)) / 2);margin-right:48px}
  .about-open{grid-template-columns:minmax(0,1fr) minmax(280px,46%)}
  .about-open .tight{height:min(700px,68vh)}
}
.about-open .tight{position:relative;isolation:isolate;height:min(560px,62vh);justify-self:end;width:100%;margin:0}
.about-open .tight picture{position:relative;z-index:1;display:block;height:100%}
.about-open .tight .halo{z-index:2}
.about-open .tight img{width:100%;height:100%;object-fit:contain;object-position:bottom}
.about-open .halo{position:absolute;inset:-8% -12%;z-index:2;pointer-events:none;-webkit-mask-image:radial-gradient(closest-side,#000 70%,transparent);mask-image:radial-gradient(closest-side,#000 70%,transparent)}
@media (max-width:699px){.about-open{grid-template-columns:1fr;gap:var(--sp-5);padding-bottom:var(--sp-6)}.about-open .intro{display:contents}.about-open .title{order:1}.about-open :is(.tight,.narrative){grid-column:auto;grid-row:auto}.about-open .tight{order:2;justify-self:center;width:min(46vw,180px);height:auto;aspect-ratio:4/5}.about-open .lede{order:3}.about-open .first{order:4}.about-open .narrative{order:5}}
.path{position:relative;padding-left:40px}
.path::before{content:"";position:absolute;left:8px;top:14px;bottom:14px;width:2px;background:linear-gradient(var(--s-med),var(--s-law) 50%,var(--s-core));opacity:.8}
.path ol{display:grid;gap:var(--sp-7)}
.path ol>li{position:relative;display:grid;gap:6px;padding-top:2px}
.path ol>li::before{content:"";position:absolute;left:-38px;top:14px;width:12px;height:12px;border-radius:50%;background:var(--bg);border:2px solid var(--strand);box-shadow:0 0 12px 2px color-mix(in srgb,var(--strand) 45%,transparent)}
.path .deg{font-family:var(--serif);font-size:clamp(24px,2.4vw,32px);line-height:1.1;letter-spacing:-.012em}
.path .school{font-size:16px}
.path .honors{display:grid;gap:4px;color:var(--muted);font-size:14.5px;margin-top:4px}
.path .honors li{display:block}
.path .when{font:400 12.5px/1 var(--mono);color:var(--muted)}
.bios{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-6)}
.bio{display:grid;align-content:start;gap:14px;padding:22px;border:1px solid var(--line);border-radius:16px;background:color-mix(in srgb,var(--panel) 60%,transparent)}
.bio .top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.bio p{font-size:15.5px;line-height:1.6;color:var(--muted)}
@media (max-width:900px){.bios{grid-template-columns:1fr}}
.lists{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-7)}
.lists ul{display:grid;gap:8px;font-size:15px;color:var(--muted)}
.lists .h3{margin-bottom:14px}
@media (max-width:900px){.lists{grid-template-columns:1fr}}
.download{display:grid;grid-template-columns:auto 1fr;gap:var(--sp-5);align-items:center;padding:20px;border:1px solid var(--line);border-radius:16px}
.download p{font-size:14.5px;color:var(--muted)}
@media (max-width:640px){.download{grid-template-columns:1fr}}

/* ---- publications ---- */
.counts{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 0;font-size:14.5px;color:var(--muted);max-width:none}
.counts li{white-space:nowrap}
.counts li+li::before{content:"·";margin:0 .6em;color:var(--subtle)}
.counts .br{flex-basis:100%;height:0;overflow:hidden}
.counts .br+li::before{content:none}   /* two deliberate lines, broken after the third count: no line starts or ends on a dot */
@media (max-width:1023px){.counts{display:grid!important;grid-template-columns:repeat(2,minmax(0,max-content));gap:2px 20px}.counts li{white-space:normal}.counts li+li::before{content:none}.counts .br{display:none}}
.counts .num{font-size:21px;color:var(--text);margin-right:.25em}
.counts .rm{vertical-align:-.25em}
.opening:has(.counts){padding-top:calc(var(--hdr) + 32px);padding-bottom:var(--sp-4);gap:var(--sp-4)}
.opening:has(.counts) .lede+.counts{margin-top:calc(-1 * var(--sp-3))}   /* the lede and the counts read as one two-line block */
.opening:has(.counts) .title{font-size:clamp(56px,17.4vw,68px)}
@media (min-width:641px){.opening:has(.counts) .title{font-size:clamp(68px,11.5vw,96px)}.opening:has(.counts) .lede{font-size:16.5px}}   /* the largest paint on the page, phones included (LCP); capped so the list starts higher */
.opening:has(.counts) .lede{max-width:none}
.opening .lede .orcid{display:inline-flex;min-height:24px;align-items:center;margin-left:.4em;font:400 13px/1.6 var(--mono);white-space:nowrap;text-decoration:underline;text-decoration-color:var(--line-light);text-underline-offset:.2em}
.opening .lede .orcid:hover{color:var(--text)}
.opening:has(.counts)+.explorer{padding-top:var(--sp-4)}
.explorer{display:grid;gap:var(--sp-4)}
.explorer .chips{gap:4px 12px}
.explorer .chip{gap:.45em}
.explorer .chip{min-height:32px;padding:0 2px;border:0;border-radius:0;background:none;border-bottom:1px solid transparent}
.explorer .chip[aria-pressed=true]{border-bottom-color:var(--strand)}
.filters{position:relative}
.filters summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:.5em;min-height:40px;padding:0 16px;border:1px solid var(--line);border-radius:999px;font:500 13px/1 var(--ui);color:var(--muted)}
.filters summary::-webkit-details-marker{display:none}
.filters[open] summary{color:var(--text);border-color:var(--strand)}
.filters .fbar{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.explorer .bar{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start}
.explorer .bar .status{line-height:40px}
.explorer input[type=search]{min-width:min(100%,280px);flex:1;padding:10px 14px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--text);font:400 15px/1.4 var(--sans)}
.explorer select{-webkit-appearance:none;appearance:none;min-height:38px;padding:9px 34px 9px 14px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font:500 13px/1 var(--ui);background:linear-gradient(45deg,transparent 50%,currentColor 50%) right 17px center/5px 5px no-repeat,linear-gradient(135deg,currentColor 50%,transparent 50%) right 12px center/5px 5px no-repeat,transparent}
.explorer .status{font:400 12.5px/1.6 var(--mono);color:var(--muted)}
/* tablets: one line per title, the full title in the card (two lines would drop the first view below the old page's count: ruling 7) */
@media (min-width:641px) and (max-width:1023px){
  .pubs .pub>.card>summary>.t{white-space:nowrap;text-wrap:nowrap;overflow:hidden;text-overflow:ellipsis}   /* outranks the later text-wrap: pretty, which would set the wrap mode back */
  .pub .tfull{display:block;font-family:var(--serif);font-size:17px;line-height:1.35;color:var(--text)}
  .pubs .pub>.card[open]>summary>.t{white-space:normal;text-wrap:pretty;overflow:visible;text-overflow:clip}   /* open: the heading shows the whole title, once */
  .pub>.card[open] .tfull{display:none}
}
/* phones: one scrolling row of topics (the page itself never scrolls sideways) */
@media (max-width:640px){
  .explorer .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter);-webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--gutter),#000 calc(100% - 72px),transparent);mask-image:linear-gradient(90deg,transparent,#000 var(--gutter),#000 calc(100% - 72px),transparent)}
  .explorer .chips::-webkit-scrollbar{display:none}
  .explorer .chip{flex:none}
  .explorer .bar{display:grid;grid-template-columns:1fr auto;gap:8px}
  .explorer .bar input[type=search]{min-width:0}
  /* the count stays a live region; on a phone it is announced rather than shown */
  .explorer .bar>.status{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .filters .fbar{display:grid;grid-template-columns:1fr 1fr}
  .filters[open]{grid-column:1/-1}
  .filters summary{min-height:44px}
  .explorer .bar .status{align-self:center;text-align:right}
  .explorer .bar [data-clear]{justify-self:start}
  .opening:has(.counts) .lede{font-size:16px}
  .counts{display:flex;flex-wrap:wrap;gap:2px 14px;font-size:13.5px}
  .counts li:not(:last-child)::after{content:none}
  .counts .num{font-size:19px}
  .counts li{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:.3em;align-items:baseline}   /* the label hangs beside its numeral when it wraps */
  .counts .num{margin-right:0}
  .opening:has(.counts){padding-bottom:var(--sp-4)}
  .opening:has(.counts)+.explorer{padding-top:var(--sp-4)}
  .explorer .bar select{min-height:38px}
  .opening{padding-top:calc(var(--hdr) + 40px)}
}
.pubs{display:grid;border-top:1px solid var(--line)}
.pub{border-bottom:1px solid var(--line);transition:opacity var(--t-state) var(--t-ease)}
.pub[hidden]{display:none}
/* the dense list: one row per paper (title, journal, year, his position); the full card opens in place */
.pub>.card>summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:24px;row-gap:2px;padding:8px 0;align-items:baseline}
.pub>.card>summary::-webkit-details-marker{display:none}
.pub>.card>summary::after{content:"";grid-column:2;grid-row:1;width:9px;height:9px;margin-right:4px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:translateY(-3px) rotate(45deg);transition:transform var(--t-feedback) var(--t-ease)}
.pub>.card[open]>summary::after{transform:translateY(2px) rotate(-135deg)}
.pub>.card>summary:hover .t,.pub>.card>summary:hover .short{text-decoration:underline;text-decoration-color:var(--strand);text-underline-offset:.16em}
.pub>.card>summary>.t,.pub>.card>summary>.short{grid-column:1;font-family:var(--serif);font-size:clamp(17px,1.3vw,19px);line-height:1.3;letter-spacing:-.008em;text-wrap:pretty;color:var(--text)}
.pub .short,.pub .tfull{display:none}
.pub .row-m{grid-column:1;font:400 13px/1.5 var(--ui);color:var(--muted)}
.pub .row-m cite{font-family:var(--serif);font-size:14px;color:var(--muted)}
.pub .badge{color:var(--strand);font-weight:500}
.pub .full{display:grid;gap:8px;padding:2px 0 18px 16px;margin-bottom:4px;border-left:1px solid color-mix(in srgb,var(--strand) 55%,var(--line))}
.pub .au{font-size:15px;color:var(--muted);line-height:1.55}
.pub .au b,.unrev li b,.authors b{color:var(--text);text-decoration:underline;text-decoration-color:var(--strand);text-decoration-thickness:1px;text-underline-offset:.24em}   /* his name: colour and a hairline, never a synthesized weight */
.pub .j{font-size:15px;color:var(--muted)}
.pub .j cite{color:var(--text)}
.pub .ids{display:flex;flex-wrap:wrap;gap:0 18px;font:400 12.5px/1.6 var(--mono);color:var(--muted)}
.pub .ids a{display:inline-flex;align-items:center;min-height:24px}
.pub .ids a:hover{color:var(--text)}
.pub .st,.pubhead .st{font:500 11.5px/1 var(--ui);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.pub .act{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.pub .act:has(details[open]){display:grid;justify-items:start}   /* Cite opens full width; Details keeps its own size */
.pub .act:has(details[open])>details{justify-self:stretch}
@media (max-width:640px){
  .pub>.card>summary>.t{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:16.5px}
  .pub .tfull{display:block}
  .pub .tfull{font-family:var(--serif);font-size:16px;line-height:1.35;color:var(--text)}
  .pub>.card>summary{padding:11px 0}
  .pub>.card[open]>summary>.t{display:block;-webkit-line-clamp:none;overflow:visible}   /* open: the heading shows the whole title, once */
  .pub>.card[open] .tfull{display:none}
}
.cite{grid-column:1/-1}
.cite summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:.5em;min-height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--line-light);font:500 13px/1 var(--ui);color:var(--text)}
.cite summary::-webkit-details-marker{display:none}
.cite[open] summary{border-color:var(--strand)}
.cite .fmts{display:flex;gap:6px;flex-wrap:wrap;margin:14px 0 10px}
.cite .fmts button{font:500 12px/1 var(--ui);padding:7px 10px;border-radius:8px;border:1px solid var(--line);color:var(--muted)}
.cite .fmts button[aria-pressed=true]{color:var(--text);border-color:var(--strand)}
.cite pre{margin:0;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:color-mix(in srgb,var(--panel) 70%,transparent);font:400 13px/1.6 var(--mono);color:var(--muted);white-space:pre-wrap;overflow-wrap:anywhere}
.cite pre[hidden]{display:none}
.cite .row{display:flex;gap:12px;align-items:center;margin-top:10px}
.unrev{display:grid;gap:18px}
.unrev li{display:grid;gap:4px;font-size:15.5px;line-height:1.55;color:var(--muted);padding-top:16px;border-top:1px solid var(--line)}
.unrev .role{font:500 11.5px/1 var(--ui);letter-spacing:.1em;text-transform:uppercase;color:var(--strand)}
/* detail */
.pubhead{display:grid;gap:var(--sp-6);padding-bottom:var(--sp-6)}
.pubhead .main{display:grid;gap:var(--sp-4);align-content:start}
@media (min-width:700px){.pubhead{grid-template-columns:minmax(0,1fr) clamp(260px,30vw,320px);column-gap:clamp(32px,5vw,64px);align-items:start}.pubhead .paper{margin-top:76px}.pubhead .title{font-size:clamp(30px,3.4vw,46px)}}
.paper{display:grid;gap:var(--sp-5);align-content:start}
@media (max-width:699px){.pubhead .paper{display:none}}   /* phones: the same record is in Identifiers, below the findings */
.paper .k{display:flex;align-items:center;gap:8px;font:500 11.5px/1.3 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.paper .card{display:grid;gap:12px;padding:16px 18px;border:1px solid var(--line);border-left:2px solid var(--green);border-radius:4px 14px 14px 4px;background:var(--panel)}
.paper .card .k{color:var(--green)}
.paper .card .k svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.paper dl{display:grid;gap:6px;margin:0;font:400 12.5px/1.5 var(--mono)}
.paper dl div{display:grid;grid-template-columns:7ch 1fr;gap:8px}
.paper dt{color:var(--subtle)}.paper dd{margin:0;color:var(--text);overflow-wrap:anywhere}
.paper dd a{display:inline-flex;min-height:24px;align-items:center}
.paper .order ol{display:flex;gap:10px;margin-top:10px}
.paper .order li{width:12px;height:12px;border-radius:50%;border:1px solid var(--line-light)}
.paper .order li.me{background:var(--strand);border-color:var(--strand);box-shadow:0 0 12px 2px color-mix(in srgb,var(--strand) 55%,transparent)}
.split{margin:0}
.split .k{display:block;line-height:1.5}
.split svg{display:block;width:100%;height:8px;margin:10px 0}
.split rect.s1{fill:var(--s-med)}.split rect.s2{fill:color-mix(in srgb,var(--s-med) 55%,var(--bg))}.split rect.s3{fill:var(--cream)}
.split ul{display:flex;flex-wrap:wrap;gap:4px 14px;font:400 12.5px/1.5 var(--mono);color:var(--muted)}
.split li{display:inline-flex;align-items:center;gap:6px}
.split li i{width:8px;height:8px;border-radius:2px;background:var(--s-med)}.split li.s2 i{background:color-mix(in srgb,var(--s-med) 55%,var(--bg))}.split li.s3 i{background:var(--cream)}
.findings+.note{margin-top:var(--sp-4)}
.pubhead+.sec{padding-top:var(--sp-7)}
.pubhead .title{font-size:clamp(32px,3.4vw,52px);line-height:1.08}
.pubhead~.sec .h2{font-size:clamp(28px,2.6vw,40px)}
.pubhead~.sec .sechead{margin-bottom:var(--sp-5)}
.pubhead .j{font-size:17px;color:var(--muted)}
.pubhead .j cite{color:var(--text)}
.authors{font-size:16px;line-height:1.6;color:var(--muted)}
.pubhead .pos{font:500 13px/1.4 var(--ui);letter-spacing:.02em;color:var(--strand)}
.findings{display:grid;gap:14px;max-width:var(--measure)}
.findings li{display:grid;grid-template-columns:28px 1fr;gap:10px;font-size:17px;line-height:1.55}
.findings li::before{content:counter(f);counter-increment:f;font:400 13px/1.9 var(--mono);color:var(--strand)}
.findings{counter-reset:f}
.idbtns{display:flex;flex-wrap:wrap;gap:10px}
.related{display:grid;gap:0;border-top:1px solid var(--line)}
.related li{border-bottom:1px solid var(--line)}
.related a{display:grid;gap:4px;padding:18px 0}
.related .h3{font-size:20px}
.related .m{font:400 12.5px/1.5 var(--mono);color:var(--muted)}
.crumbs{display:flex;align-items:center;gap:0 8px;font:400 12.5px/1 var(--mono);color:var(--muted);flex-wrap:wrap}
.crumbs a{display:inline-flex;align-items:center;min-height:24px}
.crumbs a:hover{color:var(--text)}

/* ---- cv ---- */
.cv-open{padding-bottom:var(--sp-6)}
.cv-open .lede{max-width:none}
.cv-actions{display:flex;flex-wrap:wrap;gap:12px}
.cv-index{display:flex;flex-wrap:wrap;gap:4px 20px;padding-top:var(--sp-4);border-top:1px solid var(--line);font:500 13px/1 var(--ui);color:var(--muted)}
.cv-index a{display:inline-flex;align-items:center;min-height:32px}
.cv-index a:hover{color:var(--text)}
.print-head,.print-name{display:none}
section.tl-sec{padding-top:var(--sp-5)}
.tl{position:relative;margin:0}
.tl-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;margin-bottom:var(--sp-4)}
.tl-lanes{display:flex;flex-wrap:wrap;gap:8px}
.tl-lanes .chip[aria-pressed=false]{color:var(--subtle);border-style:dashed}
.tl-lanes .chip[aria-pressed=false] i{opacity:.3;box-shadow:none}
.tl-zoom{display:flex;gap:6px}
.tl-zoom .btn{min-width:44px;justify-content:center;font-size:15px}
.tl-zoom [data-zoom-reset]{font-size:13px}
.tl-status{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* the drawing is wider than the page: it scrolls on its own, inside the layout's width, and never the page */
.tl-port{position:relative;max-width:calc(var(--max) - 2 * var(--gutter));margin:0 auto;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;touch-action:pan-x pan-y;cursor:grab;border-block:1px solid var(--line);scrollbar-width:thin;scrollbar-color:var(--line-light) transparent;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
@media (max-width:1240px){.tl-port{margin-inline:var(--gutter)}}
.tl-port.dragging{cursor:grabbing;user-select:none}
.tl-port:focus-visible{outline-offset:-2px}
.tl-svg{display:block;max-width:none;font-variant-numeric:tabular-nums lining-nums}
.tl-svg .tick{stroke:var(--line);stroke-width:1}
.tl-svg .tick.major{stroke:var(--line-light)}
.tl-svg .yr{font:400 11.5px/1 var(--mono);fill:var(--muted)}
.tl-svg .yr.now{fill:var(--cream)}
.tl-svg .yr.cut{opacity:0}
.tl-svg .cand-t{font:400 11px/1 var(--mono);fill:var(--strand);text-anchor:end}
.tl-svg .today{stroke:var(--cream);stroke-width:1;stroke-dasharray:3 4;opacity:.7}
.tl-svg .lane{--strand:var(--s-core);transition:opacity var(--t-state) var(--t-ease)}
.tl-svg .lane.s-med{--strand:var(--s-med)}.tl-svg .lane.s-law{--strand:var(--s-law)}.tl-svg .lane.s-ai{--strand:var(--s-ai)}.tl-svg .lane.s-teach{--strand:var(--s-teach)}
.tl-svg .lane[data-off]{opacity:.1;pointer-events:none}
.tl-svg .lane-t{font:500 10px/1 var(--ui);letter-spacing:.1em;text-transform:uppercase;fill:var(--strand)}
.tl-svg .base{stroke:var(--strand);stroke-width:1;opacity:.28}
.tl-svg .gather{fill:none;stroke:var(--strand);stroke-width:1.5;opacity:.55}
.tl-svg .thread{fill:none;stroke:var(--cream);stroke-width:2;opacity:.75}
.tl-svg .seg{fill:var(--strand);opacity:.85}
.tl-svg .neutral .seg{fill:var(--subtle)}
.tl-svg .cap{fill:var(--bg);stroke:var(--strand);stroke-width:1.5}   /* an ongoing role: full strength, an open end */
.tl-svg .cand{stroke:var(--strand);stroke-width:3;stroke-dasharray:6 5;stroke-linecap:round}   /* in progress, not held */
.tl-svg .hit{fill:transparent}
.tl-svg .deg{fill:var(--bg);stroke:var(--strand);stroke-width:2}
.tl-svg .paper{fill:var(--strand)}
.tl-svg .talk{fill:var(--bg);stroke:var(--strand);stroke-width:1.6}
.tl-svg a.ev{outline:none}
.tl-svg a.ev :is(rect:not(.hit),circle,line){transition:filter var(--t-feedback) var(--t-ease)}
.tl-svg a.ev:is(:hover,:focus-visible) :is(rect:not(.hit),circle){filter:drop-shadow(0 0 6px var(--strand));stroke:var(--text);stroke-width:2}
.tl-svg a.ev:focus-visible :is(rect:not(.hit),circle){stroke-width:3}
.tl-svg a.ev:is(:hover,:focus-visible) .cand{filter:drop-shadow(0 0 6px var(--strand))}
.tl-card{position:absolute;z-index:5;width:min(300px,calc(100% - 16px));display:grid;gap:4px;padding:12px 14px;border:1px solid var(--glass-line);border-left:2px solid var(--strand);border-radius:4px 12px 12px 4px;background:var(--panel);box-shadow:0 18px 40px -18px #000;pointer-events:none}
.tl-card[data-lane=med]{--strand:var(--s-med)}.tl-card[data-lane=law]{--strand:var(--s-law)}.tl-card[data-lane=ai]{--strand:var(--s-ai)}.tl-card[data-lane=teach]{--strand:var(--s-teach)}
.tl-card[hidden]{display:none}
.tl-card .t{font-family:var(--serif);font-size:17px;line-height:1.25}
.tl-card .o{font-size:13.5px;line-height:1.45;color:var(--muted)}
.tl-card .w{font:400 12px/1.5 var(--mono);color:var(--muted)}
.tl-card .go{font:400 11px/1.5 var(--mono);color:var(--subtle)}
@media (pointer:coarse){.tl-card .go{display:none}}
.tl-key{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:var(--sp-3);font-size:12px}
.tl-key ul{display:flex;flex-wrap:wrap;gap:6px 18px}   /* a real list, so the five keys are read as five */
.tl-key li{display:inline-flex;align-items:center;gap:6px}
.tl-key i{display:inline-block;width:12px;height:8px;border-radius:4px;background:var(--s-core)}
.tl-key i.k-degree{width:9px;height:9px;border-radius:1px;transform:rotate(45deg);background:none;border:1.5px solid var(--s-core)}
.tl-key i.k-paper{width:9px;height:9px;border-radius:50%}
.tl-key i.k-talk{width:9px;height:9px;border-radius:50%;background:none;border:1.5px solid var(--s-core)}
.tl-key i.k-cand{width:16px;height:0;border-radius:0;background:none;border-top:2.5px dashed var(--s-core)}
.tl-key p{color:var(--subtle)}
.tl-table{margin-top:var(--sp-5)}
.tl-table summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:.5em;min-height:40px;padding:0 16px;border:1px solid var(--line);border-radius:999px;font:500 13px/1 var(--ui);color:var(--muted)}
.tl-table summary::-webkit-details-marker{display:none}
.tl-table[open] summary{color:var(--text);border-color:var(--line-light)}
.tl-table table{width:100%;margin-top:var(--sp-4);border-collapse:collapse;font-size:14.5px}
.tl-table th{font:500 11px/1.4 var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-align:left;padding:8px 12px 8px 0;border-bottom:1px solid var(--line-light)}
.tl-table td{padding:9px 12px 9px 0;border-bottom:1px solid var(--line);vertical-align:top;color:var(--muted)}
.tl-table td a{color:var(--text)}
.tl-table td.mono{white-space:nowrap;font-size:12.5px}
.tl-table tr[hidden]{display:none}
@media (max-width:640px){.tl-table th:nth-child(4),.tl-table td:nth-child(4){display:none}.tl-table td.mono{white-space:normal}}
.cv .cv-h{font-size:clamp(32px,3.4vw,48px);padding-bottom:var(--sp-4);margin-bottom:var(--sp-6);border-bottom:1px solid var(--line)}
.entries{display:grid;gap:var(--sp-6)}
.entry{display:grid;grid-template-columns:minmax(0,15ch) minmax(0,1fr);gap:6px 32px}
.entry .when{font:400 12.5px/1.9 var(--mono);color:var(--muted)}
.entry .what{display:grid;gap:4px;max-width:var(--measure)}
.h4{font-family:var(--serif);font-optical-sizing:auto;font-size:clamp(20px,1.7vw,23px);line-height:1.25;letter-spacing:-.008em}
.entry .org{font-size:15.5px;line-height:1.5;color:var(--muted)}
.entry .b{display:grid;gap:5px;margin-top:6px;font-size:15.5px;line-height:1.55;color:var(--muted)}
.entry .b li{position:relative;padding-left:16px}
.entry .b li::before{content:"";position:absolute;left:0;top:.68em;width:5px;height:5px;border-radius:50%;background:var(--strand)}
.entry .site{font:500 11px/1 var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--strand);margin-right:4px}
@media (max-width:640px){.entry{grid-template-columns:1fr;gap:4px}}
.group+.group{margin-top:var(--sp-8)}
.group-h{display:flex;align-items:center;gap:10px;margin-bottom:var(--sp-5)}
.group .entry{--strand:inherit}
.cv-note{margin-top:var(--sp-5);font-size:15px;color:var(--muted)}
.cv-sum{font-size:16px;color:var(--muted);max-width:none;margin-bottom:var(--sp-5)}
.cv-pubs{display:grid;gap:0;border-top:1px solid var(--line);margin-bottom:var(--sp-5)}
.cv-pubs li{padding:12px 0;border-bottom:1px solid var(--line);font-size:15px;line-height:1.55;color:var(--muted);max-width:var(--measure)}
.cv-pubs li a{color:var(--text)}
.cv-pubs li a:hover{text-decoration:underline;text-decoration-color:var(--s-med);text-underline-offset:.16em}
.purl{display:none}   /* print only: the citation's page, after the PMID */
.cv-pubs .au b{color:var(--text);text-decoration:underline;text-decoration-color:var(--s-med);text-decoration-thickness:1px;text-underline-offset:.24em}
.go{font:500 14px/1 var(--ui);color:var(--strand)}
.go:hover{text-decoration:underline;text-underline-offset:.2em}
.cv-list{columns:2 360px;column-gap:var(--sp-7)}
.cv-list li{break-inside:avoid;position:relative;padding:0 0 10px 16px;font-size:15.5px;line-height:1.5;color:var(--muted)}
.cv-list li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--strand)}
.lists.four{grid-template-columns:repeat(4,1fr)}
.lists.two{grid-template-columns:repeat(2,1fr)}
.lists.three{grid-template-columns:repeat(3,1fr)}
@media (max-width:1100px){.lists.four{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.lists.four,.lists.two,.lists.three{grid-template-columns:1fr}}
.lists ul.inline{display:flex;flex-wrap:wrap;gap:6px 18px}

/* ---- research ---- */
.anast{padding-top:calc(var(--hdr) + 72px)}
.anast-grid{display:grid;gap:var(--sp-6)}
.anast-copy{display:grid;gap:var(--sp-5);align-content:start}
.anast-copy .lede{color:var(--muted);max-width:44ch}
.anast-stage{position:relative;margin:0;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:var(--sp-3)}
.anast-stage .scene{position:relative;isolation:isolate;mix-blend-mode:screen;-webkit-mask-image:radial-gradient(closest-side,#000 58%,transparent);mask-image:radial-gradient(closest-side,#000 58%,transparent)}
.anast-stage figcaption{font-size:12px;max-width:60ch;color:var(--subtle)}
.anast-flow{padding-top:var(--sp-8)}
@media (min-width:1024px){
  .anast-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:var(--sp-7);align-items:start}
  .anast-copy{grid-column:1;grid-row:1}
  .anast-flow{grid-column:1;grid-row:2}
  .anast-stage{grid-column:2;grid-row:1/span 2;position:sticky;top:calc(var(--hdr) + 28px);height:calc(100svh - var(--hdr) - 56px);align-self:start}
  .anast{padding-bottom:var(--section)}
}
@media (max-width:1023px){
  .anast-stage{height:clamp(260px,46svh,440px)}
  .anast-stage .scene{margin-inline:calc(-1 * var(--gutter))}
}
.program .h2{font-size:clamp(32px,3.4vw,48px)}
.program .unit{margin-top:var(--sp-3);font-size:15px;color:var(--muted);max-width:var(--measure)}
.work{display:grid;margin-top:var(--sp-6);border-top:1px solid var(--line)}
.work .item{display:grid;gap:4px;padding:18px 0 18px 20px;border-bottom:1px solid var(--line);position:relative}
.work .item::before{content:"";position:absolute;left:0;top:26px;width:6px;height:6px;border-radius:50%;background:var(--strand);box-shadow:0 0 10px 1px color-mix(in srgb,var(--strand) 50%,transparent)}
.work .h4 a{color:var(--text);display:inline-block;padding-block:3px;margin-block:-3px}   /* a 24 px target or more (§8.8); the line box unchanged */
.work .h4 a:hover{text-decoration:underline;text-decoration-color:var(--strand);text-underline-offset:.16em}
.work .m{font-size:14px;color:var(--muted)}
.work .m cite{font-size:15px}
.work .d{font-size:15.5px;line-height:1.55;color:var(--muted);max-width:var(--measure)}
.flow{margin:0;display:grid;gap:var(--sp-5)}
.flow{--p:1}
.flow-band{height:clamp(120px,14vw,190px);-webkit-clip-path:inset(0 calc((1 - var(--p)) * 100%) 0 0);clip-path:inset(0 calc((1 - var(--p)) * 100%) 0 0)}
.flow-svg{width:100%;height:100%}
.flow-svg-v{display:none}
.flow-svg .band{opacity:.82}
.flow-svg .gate{stroke:var(--bg);stroke-width:2;vector-effect:non-scaling-stroke}
.stages{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--sp-4)}
.stage{display:grid;gap:6px;align-content:start;padding-top:12px;border-top:1px solid var(--line-light);transition:opacity var(--t-state) var(--t-ease)}
.stage .num{font-size:clamp(30px,3.4vw,52px)}
.stage .lab{font:500 11.5px/1.3 var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--strand)}
.stage .mean{font-size:14px;line-height:1.5;color:var(--muted)}
.flow .then{font-family:var(--serif);font-size:clamp(20px,1.8vw,26px);line-height:1.35}
.flow .then .num{font-size:inherit}
.oasis .note{margin-top:var(--sp-4)}
@media (max-width:900px){
  .flow{grid-template-columns:44px minmax(0,1fr);column-gap:16px}
  .flow-band{grid-column:1;grid-row:1;height:auto;-webkit-clip-path:inset(0 0 calc((1 - var(--p)) * 100%) 0);clip-path:inset(0 0 calc((1 - var(--p)) * 100%) 0)}
  .flow-band .flow-svg{display:none}
  .flow-band .flow-svg-v{display:block;width:100%;height:100%}
  .stages{grid-column:2;grid-row:1}
  .flow .then{grid-column:1/-1}
  .stages{grid-template-columns:1fr;gap:0}
  .stage{grid-template-columns:minmax(0,9ch) minmax(0,1fr);column-gap:16px;padding:14px 0;border-top:1px solid var(--line)}
  .stage .num{grid-row:1/span 3;font-size:30px;align-self:start}
}
.ptl{display:grid;position:relative;padding-left:28px}
.ptl::before{content:"";position:absolute;left:5px;top:10px;bottom:10px;width:1px;background:linear-gradient(var(--s-med),color-mix(in srgb,var(--s-med) 25%,transparent))}
.ptl li{position:relative;display:grid;grid-template-columns:minmax(0,16ch) minmax(0,1fr);gap:2px 28px;padding:14px 0;border-bottom:1px solid var(--line)}
.ptl li::before{content:"";position:absolute;left:-27px;top:21px;width:11px;height:11px;border-radius:50%;background:var(--bg);border:1.5px solid var(--strand)}
.ptl time{grid-row:1/span 3;font:400 12.5px/1.8 var(--mono);color:var(--muted)}
.ptl .k{font:500 11px/1.4 var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--strand)}
.ptl .t{font-family:var(--serif);font-size:19px;line-height:1.3}
.ptl .w{font-size:14.5px;color:var(--muted)}
.ptl li.lead{padding:22px 0 26px}
.ptl li.lead::before{background:var(--strand);box-shadow:0 0 14px 3px color-mix(in srgb,var(--strand) 55%,transparent);top:29px}
.ptl li.lead .t{font-size:clamp(24px,2.4vw,34px);line-height:1.15}
.ptl li.lead time{color:var(--text)}
@media (max-width:640px){.ptl li{grid-template-columns:1fr}.ptl time{grid-row:auto}}
ul.ticks{display:grid;gap:10px;font-size:16px;color:var(--muted)}
ul.ticks li{position:relative;padding-left:18px}
ul.ticks li::before{content:"";position:absolute;left:0;top:.65em;width:6px;height:6px;border-radius:50%;background:var(--strand)}
.more-l{margin-top:var(--sp-6)}

/* ---- rajaii labs ---- */
.labs-open{position:relative;isolation:isolate;padding-top:calc(var(--hdr) + 72px);padding-bottom:var(--sp-8);overflow:clip}
/* the founder note opens the page, in his voice; the window follows it directly */
.labs-copy .note-lede{max-width:44ch;color:var(--text);font-family:var(--serif);font-size:clamp(20px,1.9vw,26px);line-height:1.42;letter-spacing:-.006em}
.company .sline{max-width:52ch;font-family:var(--serif);font-size:clamp(19px,1.6vw,22px);line-height:1.4}
.labs-open .scene{position:absolute;inset:0;z-index:2;pointer-events:none;mix-blend-mode:screen}   /* above the window: the strand's light runs into the banner's own thread (light only adds) */
.labs-copy{position:relative;z-index:3;display:grid;gap:var(--sp-5)}
.labs-copy .lede{color:var(--muted)}
.window{position:relative;z-index:1;display:grid;gap:var(--sp-3);margin-top:var(--sp-8);color:var(--text)}
.window .frame{position:relative;display:block;border:1px solid color-mix(in srgb,var(--magenta) 30%,var(--line));border-radius:18px;overflow:hidden;background:#000;box-shadow:0 30px 80px -40px #000;transition:border-color var(--t-state) var(--t-ease),box-shadow var(--t-state) var(--t-ease)}
.window .frame img{width:100%;height:auto;aspect-ratio:2048/592}
.labs-open[data-joined] .window .frame,.window:hover .frame,.window:focus-visible .frame{border-color:color-mix(in srgb,var(--magenta) 70%,var(--line));box-shadow:0 0 0 1px color-mix(in srgb,var(--magenta) 30%,transparent),0 0 60px -10px color-mix(in srgb,var(--magenta) 45%,transparent),0 30px 80px -40px #000}
.window:focus-visible{outline:none}
.window:focus-visible .frame{outline:2px solid var(--magenta);outline-offset:4px}
.window .nodes{position:absolute;inset:0;pointer-events:none}
.window .nodes i{position:absolute;bottom:7%;transform:translateX(-50%);font:500 11px/1 var(--ui);font-style:normal;letter-spacing:.1em;padding:4px 7px;border-radius:999px;background:var(--bg);color:var(--text);border:1px solid var(--line-light)}
.window .nodes .n1{left:18.5%}.window .nodes .n2{left:40.6%}.window .nodes .n3{left:57.8%}.window .nodes .n4{left:77.9%}
.window .wcap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;font-size:14.5px;color:var(--muted)}
.window .wcap>span:first-child{text-wrap:balance}
.window .go{color:var(--magenta);white-space:nowrap}
.window:hover .go{text-decoration:underline;text-underline-offset:.2em}
@media (max-width:640px){.window .nodes i{font-size:10px;padding:3px 5px;bottom:5%}.window{margin-top:var(--sp-7)}}
@media (max-width:1099px){.window .frame{margin-left:44px}.window .wcap{margin-left:44px}}
@media (max-width:640px){.window .frame,.window .wcap{margin-inline:14px}}   /* phones: the window is inset by the same room on both sides, the strand turning in on the left */
.quote-l{font-family:var(--serif);font-size:clamp(22px,2.2vw,30px);line-height:1.4;letter-spacing:-.008em;max-width:40ch}
.note .sig{margin-top:var(--sp-5);font:500 13px/1.4 var(--ui);color:var(--muted)}
.record .sechead .lede{color:var(--muted);font-size:15px;font-family:var(--mono)}
.figs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line)}
.figs li{display:grid;gap:8px;align-content:start;padding:24px 24px 28px 0;border-bottom:1px solid var(--line)}
.figs .num{font-size:clamp(32px,3.4vw,52px);font-variant-numeric:tabular-nums lining-nums}
.figs .lab{font-size:15px;line-height:1.5;color:var(--muted)}
.figs .ledger .num{font-size:clamp(26px,2.5vw,38px);white-space:nowrap;line-height:1.3}
@media (max-width:1023px){.figs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.figs{grid-template-columns:1fr}.figs li{padding:18px 0}}
.company .line{margin-top:var(--sp-5);font-size:14px;max-width:none}
.company .backed{margin-top:var(--sp-3);font-size:17px}
.company .links{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--sp-5)}
.vlist{display:grid;margin-top:var(--sp-6);border-top:1px solid var(--line)}
.vlist>li{position:relative;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:8px 48px;padding:28px 0 28px 24px;border-bottom:1px solid var(--line)}
.vlist>li::before{content:"";position:absolute;left:0;top:28px;bottom:28px;width:2px;border-radius:2px;background:var(--strand)}
.vlist .h3{grid-row:1/span 3}
.vlist .d{font-size:16.5px;line-height:1.6}
.vlist .b{display:grid;gap:5px;font-size:15px;color:var(--muted);line-height:1.55}
.vlist .b li{position:relative;padding-left:16px}
.vlist .b li::before{content:"";position:absolute;left:0;top:.66em;width:5px;height:5px;border-radius:50%;background:var(--strand)}
@media (max-width:900px){.vlist>li{grid-template-columns:1fr}.vlist .h3{grid-row:auto}}

/* ---- writing ---- */
.split2{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:var(--sp-4) var(--sp-8);align-items:start}
.split2 p+p{margin-top:var(--sp-3)}
.split2>div{max-width:var(--measure)}
@media (max-width:900px){.split2{grid-template-columns:1fr}}
.opening+.series{padding-top:var(--sp-4)}
.paper-index{display:grid;margin-top:var(--sp-3);border-top:1px solid var(--line)}
.paper-index li{display:grid;grid-template-columns:3.2em minmax(0,1fr) auto;gap:4px 20px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--line)}
.paper-index .no{font-family:var(--serif);font-size:26px;line-height:1;color:var(--strand)}
.paper-index .pi-t{display:grid;gap:3px}
.paper-index .pi-t>a{font-family:var(--serif);font-size:clamp(19px,1.6vw,23px);line-height:1.25;color:var(--text);text-decoration:none}
.paper-index .pi-t>a:hover{text-decoration:underline;text-decoration-color:var(--strand);text-underline-offset:.16em}
.paper-index .pi-s{font-size:14.5px;line-height:1.45;color:var(--muted)}
.paper-index .pi-m{font:400 12.5px/1.6 var(--mono);color:var(--muted);white-space:nowrap}
.paper-index .pi-m a{color:var(--strand)}
@media (max-width:640px){.paper-index li{grid-template-columns:2.2em minmax(0,1fr)}.paper-index .pi-m{grid-column:2}}
.series-h{margin-bottom:var(--sp-5)}
.series-body{display:grid;grid-template-columns:28px minmax(0,1fr);gap:0 var(--sp-6)}
.series{--p:0}
.rthread{position:relative;width:2px;justify-self:center;background:var(--line)}
.rthread .fill{position:absolute;inset:0;transform-origin:top;transform:scaleY(var(--p));background:linear-gradient(var(--magenta),color-mix(in srgb,var(--magenta) 60%,var(--cream)));box-shadow:0 0 12px 1px color-mix(in srgb,var(--magenta) 55%,transparent)}
html:not(.js) .series .rthread .fill{transform:none}
.papers{display:grid;gap:var(--sp-7)}
.paper-obj{perspective:1400px}
.obj{position:relative;display:grid;gap:14px;padding:clamp(28px,4vw,56px);padding-right:clamp(28px,12vw,200px);border:1px solid var(--line);border-radius:22px;background:linear-gradient(160deg,var(--panel2),var(--panel) 46%,var(--bg));transform-style:preserve-3d;transition:transform var(--t-state) var(--t-ease),box-shadow var(--t-state) var(--t-ease),border-color var(--t-state) var(--t-ease);box-shadow:0 1px 0 color-mix(in srgb,var(--text) 6%,transparent) inset,0 30px 60px -40px #000}
.obj::after{content:"";position:absolute;inset:auto 22px -12px 22px;height:24px;border-radius:50%;background:#000;filter:blur(18px);opacity:.55;transform:translateZ(-60px);z-index:-1}
.obj .no{position:absolute;top:clamp(10px,1.6vw,24px);right:clamp(20px,3vw,48px);font-family:var(--serif);font-size:clamp(88px,12vw,190px);line-height:1;letter-spacing:-.02em;color:transparent;-webkit-text-stroke:1px color-mix(in srgb,var(--magenta) 70%,transparent);transform:translateZ(40px);transition:transform var(--t-state) var(--t-ease),-webkit-text-stroke-color var(--t-state)}
.obj .meta{font:400 12.5px/1.4 var(--mono);color:var(--muted)}
.obj .st{font:500 11px/1 var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--magenta)}
.obj .pt{font-family:var(--serif);font-size:clamp(28px,3vw,44px);line-height:1.1;letter-spacing:-.016em;max-width:24ch;transition:transform var(--t-state) var(--t-ease)}
.obj .sub{font-family:var(--serif);font-style:italic;font-size:clamp(17px,1.4vw,20px);line-height:1.4;color:var(--muted);max-width:52ch}
.obj .sum{font-size:16px;line-height:1.6;color:var(--muted);max-width:62ch}
.obj .act{margin-top:6px}
@media (hover:hover){.paper-obj:hover .obj{transform:rotateX(2.5deg) rotateY(-4deg) translateZ(10px);border-color:color-mix(in srgb,var(--magenta) 45%,var(--line));box-shadow:0 1px 0 color-mix(in srgb,var(--text) 8%,transparent) inset,0 40px 80px -36px #000}.paper-obj:hover .obj .no{transform:translateZ(90px) translateX(-8px);-webkit-text-stroke-color:var(--magenta)}}
.paper-obj:focus-within .obj{transform:rotateX(2.5deg) rotateY(-4deg) translateZ(10px);border-color:color-mix(in srgb,var(--magenta) 45%,var(--line))}
.paper-obj:focus-within .obj .no{transform:translateZ(90px) translateX(-8px);-webkit-text-stroke-color:var(--magenta)}
@media (hover:hover){.paper-obj:hover .obj .pt{transform:translateZ(28px)}}
.paper-obj:focus-within .obj .pt{transform:translateZ(28px)}
.paper-obj.at .obj{border-color:color-mix(in srgb,var(--magenta) 32%,var(--line))}
@media (max-width:640px){.series-body{grid-template-columns:2px minmax(0,1fr);gap:0 16px}.obj{padding:24px 20px 26px;padding-right:20px;padding-top:64px}.obj .no{font-size:72px;top:8px;right:16px}}

/* ---- teaching ---- */
.bignums{display:flex;flex-wrap:wrap;gap:var(--sp-5) 0;margin-top:var(--sp-4);border-top:1px solid var(--line)}
@media (min-width:1024px){.bignums{display:grid;grid-template-columns:repeat(4,auto);justify-content:space-between}.bignums li{margin-right:0;padding-right:0}.bignums li:not(:last-child)::after{right:calc(-1 * var(--sp-6))}}
.bignums li{display:grid;gap:6px;padding:var(--sp-5) var(--sp-7) 0 0;margin-right:var(--sp-7);position:relative}
.bignums li:not(:last-child)::after{content:"";position:absolute;right:0;top:var(--sp-5);bottom:4px;width:1px;background:var(--line)}
.bignums .num{font-family:var(--serif);font-size:clamp(52px,5.4vw,84px);line-height:1;letter-spacing:-.02em;white-space:nowrap}
.bignums .pre{font-family:var(--ui);font-size:.28em;letter-spacing:.14em;vertical-align:.95em;color:var(--strand)}
.bignums .lab{font:500 12px/1.4 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
@media (max-width:1023px){.bignums{display:grid;grid-template-columns:1fr 1fr;gap:0}.bignums li{padding:var(--sp-4) 0;margin:0;border-bottom:1px solid var(--line)}.bignums li::after{display:none}}
@media (max-width:640px){.bignums .num{font-size:44px}}
.teach-open .lede{max-width:60ch;color:var(--text);font-family:var(--serif);font-size:clamp(20px,1.9vw,26px);line-height:1.42;letter-spacing:-.006em}   /* how I teach, as the page's opening */
.admitted{margin-top:var(--sp-4);font-family:var(--serif);font-style:italic;font-size:19px;color:var(--muted)}
.roles{margin:0}
.roles-axis{display:flex;margin-left:calc(40% + 24px);font:400 11px/1 var(--mono);color:var(--subtle);padding-bottom:8px;border-bottom:1px solid var(--line)}
.roles-axis span{flex:1 1 0;min-width:0;overflow:hidden}   /* one year each, its label at the year's start */
.roles-axis .now{display:flex;justify-content:flex-end;overflow:visible;color:var(--cream);white-space:nowrap}   /* the axis ends at today */
@media (max-width:640px){.roles-axis span:nth-child(even):not(.now),.roles-axis span:nth-last-child(2){color:transparent}}
.roles-axis .g0{flex-grow:0}.roles-axis .g1{flex-grow:0.05}.roles-axis .g2{flex-grow:0.1}.roles-axis .g3{flex-grow:0.15}.roles-axis .g4{flex-grow:0.2}.roles-axis .g5{flex-grow:0.25}.roles-axis .g6{flex-grow:0.3}.roles-axis .g7{flex-grow:0.35}.roles-axis .g8{flex-grow:0.4}.roles-axis .g9{flex-grow:0.45}.roles-axis .g10{flex-grow:0.5}.roles-axis .g11{flex-grow:0.55}.roles-axis .g12{flex-grow:0.6}.roles-axis .g13{flex-grow:0.65}.roles-axis .g14{flex-grow:0.7}.roles-axis .g15{flex-grow:0.75}.roles-axis .g16{flex-grow:0.8}.roles-axis .g17{flex-grow:0.85}.roles-axis .g18{flex-grow:0.9}.roles-axis .g19{flex-grow:0.95}.roles-axis .g20{flex-grow:1}

.roles ol{display:grid}
.roles .role{display:grid;grid-template-columns:minmax(0,40%) minmax(0,1fr);grid-template-areas:"t bar" "o bar";column-gap:24px;padding:12px 0;border-bottom:1px solid var(--line);align-items:center}
.roles .role .t{grid-area:t;font-family:var(--serif);font-size:19px;line-height:1.25}
.roles .role .o{grid-area:o;font-size:14px;color:var(--muted)}
.roles .role .o .mono{font-size:12px}
.roles .role .rbar{grid-area:bar;width:100%;height:12px}
.roles .role .rbar .bar{fill:var(--strand)}
@media (max-width:640px){.roles-axis{margin-left:0}.roles .role{grid-template-columns:1fr;grid-template-areas:"t" "o" "bar";row-gap:6px}}
.cmap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-6) var(--sp-7);align-items:start}
.exams{position:relative;display:grid;gap:var(--sp-6);padding-left:30px}   /* both exams on one ember strand: the exam names are its stations, the sections its stops */
.exams::before{content:"";position:absolute;left:8px;top:.9em;bottom:.6em;width:2px;border-radius:2px;background:color-mix(in srgb,var(--ember) 26%,var(--line))}
.exam{position:relative}
.exam::before{content:"";position:absolute;left:-22px;top:.9em;bottom:.55em;width:2px;border-radius:2px;background:var(--ember);box-shadow:0 0 12px 1px color-mix(in srgb,var(--ember) 55%,transparent);opacity:0;transition:opacity var(--t-state) var(--t-ease)}
.exam .h3{position:relative;margin:0 0 12px}
.exam .h3::before{content:"";position:absolute;left:-30px;top:.32em;width:18px;height:18px;border-radius:50%;box-sizing:border-box;background:var(--bg);border:2px solid color-mix(in srgb,var(--ember) 55%,var(--line));transition:background var(--t-state) var(--t-ease),border-color var(--t-state) var(--t-ease),box-shadow var(--t-state) var(--t-ease)}
.exam-b{font:inherit;color:inherit;letter-spacing:inherit;background:none;border:0;padding:0;text-align:left;cursor:pointer}
.exam-b::after{content:"";position:absolute;inset:-8px -12px -8px -38px;border-radius:12px}   /* the whole station, its name and its stops, is the target */
.exam-b:focus-visible{outline:none}
.exam:has(.exam-b:focus-visible){outline:2px solid var(--ember);outline-offset:8px;border-radius:12px}
.exam:hover .h3::before{border-color:var(--ember)}
.secs{position:relative;display:grid;gap:9px}
.secs li{position:relative;font-family:var(--serif);font-size:18px;line-height:1.3;color:var(--muted);transition:color var(--t-state) var(--t-ease)}
.secs li::before{content:"";position:absolute;left:-27px;top:.42em;width:12px;height:12px;border-radius:50%;box-sizing:border-box;background:var(--bg);border:1.5px solid color-mix(in srgb,var(--ember) 50%,var(--line));transition:background var(--t-state) var(--t-ease),border-color var(--t-state) var(--t-ease),box-shadow var(--t-state) var(--t-ease)}
.exam[data-on]::before{opacity:1}
.exam[data-on] .h3::before{background:var(--ember);border-color:var(--ember);box-shadow:0 0 14px 3px color-mix(in srgb,var(--ember) 55%,transparent)}
.exam[data-on] .secs li{color:var(--text)}
.exam[data-on] .secs li::before{background:var(--ember);border-color:var(--ember);box-shadow:0 0 10px 2px color-mix(in srgb,var(--ember) 55%,transparent)}
.exam[data-on] .secs li:nth-child(2),.exam[data-on] .secs li:nth-child(2)::before{transition-delay:60ms}.exam[data-on] .secs li:nth-child(3),.exam[data-on] .secs li:nth-child(3)::before{transition-delay:120ms}
.exam[data-on] .secs li:nth-child(4),.exam[data-on] .secs li:nth-child(4)::before{transition-delay:180ms}.exam[data-on] .secs li:nth-child(5),.exam[data-on] .secs li:nth-child(5)::before{transition-delay:240ms}
.exam[data-on] .secs li:nth-child(6),.exam[data-on] .secs li:nth-child(6)::before{transition-delay:300ms}.exam[data-on] .secs li:nth-child(7),.exam[data-on] .secs li:nth-child(7)::before{transition-delay:360ms}   /* the sections light in turn, down the strand */
.cpanel{position:sticky;top:calc(var(--hdr) + 32px);padding:22px 24px;border:1px solid var(--line);border-left:2px solid var(--ember);border-radius:4px 16px 16px 4px;background:var(--panel)}
.cpanel .k{font:500 11.5px/1.4 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--ember)}
.taught{display:grid;gap:14px;margin-top:14px}
.taught li{display:grid;gap:4px;padding-top:14px;border-top:1px solid var(--line)}
.taught li:first-child{padding-top:0;border-top:0}
.taught .who{font-family:var(--serif);font-size:19px;line-height:1.3}
.taught .when{font-size:12px;color:var(--muted)}
.taught .d{font-size:15px;line-height:1.55;color:var(--muted)}
.cp[hidden]{display:none}
html:not(.js) .cp+.cp{margin-top:var(--sp-5);padding-top:var(--sp-5);border-top:1px solid var(--line)}
@media (max-width:900px){.cmap{grid-template-columns:1fr}.cpanel{position:static}}

/* ---- contact ---- */
.contact-end{padding-top:calc(var(--hdr) + 72px);padding-bottom:var(--sp-6)}
.contact-end+section.sec{padding-top:var(--sp-7)}   /* the profiles follow the address closely: no empty band */   /* phones and tablets: the spine is the 2-px rail at the left edge */
.mailbox{position:relative;margin-top:var(--sp-7);padding-left:var(--mpad);--mpad:clamp(20px,3vw,36px);
  /* how far left the thread starts: on the spine itself (the same formula the spine uses), across the gutter */
  --reach:calc(var(--mpad) + max(0px, (100vw - var(--max)) / 2) + var(--gutter) - max(14px, (100vw - var(--max)) / 2 - 42px));--fs-mail:clamp(22px,7.4vw,96px);--pre:calc(12px * 1.4 + var(--sp-4))}
@media (max-width:1099px){.mailbox{--reach:calc(var(--mpad) + var(--gutter))}}   /* phones and tablets: the spine is the 2-px rail at the left edge */
@media (max-width:640px){.mailbox{--mpad:0px;--fs-mail:calc((100vw - 2 * var(--gutter)) / 9.6)}}   /* phones: the address spans the measure, one line; the thread comes down the rail and turns into its underline */
.mail{font-family:var(--serif);font-size:var(--fs-mail);line-height:1.04;letter-spacing:-.022em;overflow-wrap:anywhere;view-transition-name:page-title}
.mail .pre{display:block;margin-bottom:var(--sp-4);font:500 12px/1.4 var(--ui);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.mail a{position:relative;display:inline-block;padding-bottom:.1em;text-decoration:none;white-space:nowrap}
/* the thread comes down the gutter at the strands' weight, turns, and becomes the address's underline; drawn once on load */
.mail a::before,.mail a::after{content:"";position:absolute;left:calc(-1 * var(--reach));right:0;bottom:0;top:calc(-1 * (var(--sp-9) + var(--pre)));border:solid var(--s-core);border-width:0 0 2px 2px;border-bottom-left-radius:clamp(14px,2.2vw,28px);pointer-events:none;-webkit-mask-image:linear-gradient(transparent,#000 calc(var(--sp-9) * .8));mask-image:linear-gradient(transparent,#000 calc(var(--sp-9) * .8));filter:drop-shadow(0 0 3px color-mix(in srgb,var(--s-core) 75%,transparent)) drop-shadow(0 0 12px color-mix(in srgb,var(--s-core) 40%,transparent))}
.mail a:hover::before{border-bottom-width:3px}
html.js:not([data-motion=off]) .mail a::before{animation:thread-draw 1400ms var(--t-ease-long) 120ms both}
@keyframes thread-draw{0%{-webkit-clip-path:inset(0 calc(100% - 36px) 100% 0);clip-path:inset(0 calc(100% - 36px) 100% 0)}45%{-webkit-clip-path:inset(0 calc(100% - 36px) 0 0);clip-path:inset(0 calc(100% - 36px) 0 0)}100%{-webkit-clip-path:inset(0);clip-path:inset(0)}}
.copy-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:var(--sp-6)}
.copy-row .status{font:400 13px/1.4 var(--mono);color:var(--ember);min-width:9ch}
/* confirmed in the ember strand: an ember light runs the same thread into the address and stays lit */
.mail a::after{border-color:var(--ember);opacity:0;filter:drop-shadow(0 0 4px color-mix(in srgb,var(--ember) 85%,transparent)) drop-shadow(0 0 16px color-mix(in srgb,var(--ember) 50%,transparent))}
.mailbox[data-copied] .mail a::after{opacity:1;animation:thread-draw 950ms var(--t-ease-long) both}
.profiles{display:grid;margin-top:var(--sp-5);border-top:1px solid var(--line)}
.profiles a{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 24px;padding:18px 0;border-bottom:1px solid var(--line)}
.profiles .t{font-family:var(--serif);font-size:clamp(22px,2vw,28px);line-height:1.2}
.profiles .u{font-size:13px}
.profiles a:hover .t{text-decoration:underline;text-decoration-color:var(--s-core);text-underline-offset:.16em}
.profiles a::after{content:"↗";font:500 14px/1 var(--ui);color:var(--muted);margin-left:auto}
.profiles a[href="/"]::after{content:"→"}

/* ---- scenes, tiers, motion ---- */
canvas.engine{pointer-events:none}
.still{opacity:1;transition:opacity var(--t-state-long) var(--t-ease)}
@property --ig{syntax:"<percentage>";inherits:false;initial-value:120%}
.hero canvas.still{-webkit-mask-image:linear-gradient(90deg,#000 calc(var(--ig) - 20%),transparent var(--ig));mask-image:linear-gradient(90deg,#000 calc(var(--ig) - 20%),transparent var(--ig))}
html.js:not([data-motion=off]) .hero canvas.still{animation:ignite 760ms var(--t-ease-long) both}   /* the braid lights from the left */
@keyframes ignite{from{--ig:0%}to{--ig:120%}}
html[data-tier=static] canvas.engine{display:none}
html:is([data-tier=full],[data-tier=reduced]) [data-scene][data-ready] .still{opacity:0}
html:is([data-tier=full],[data-tier=reduced]) [data-scene] canvas.engine{opacity:0;transition:opacity var(--t-state-long) var(--t-ease)}
html:is([data-tier=full],[data-tier=reduced]) [data-scene][data-ready] canvas.engine{opacity:1}
/* the load moment: CSS only, ≤ 1.6 s, after first paint */
.hero .display .sweep{position:absolute;top:-.8em;bottom:-.8em;left:0;width:42cqw;overflow:hidden;pointer-events:none;opacity:0;transform:translateX(-42cqw);-webkit-mask-image:linear-gradient(90deg,transparent,#000 38%,#000 62%,transparent);mask-image:linear-gradient(90deg,transparent,#000 38%,#000 62%,transparent)}
.hero .display .sweep-in{position:absolute;top:.8em;left:0;width:100cqw;text-align:inherit;transform:translateX(42cqw)}
/* the glyphs in light, glow included, painted once; the moving window shows them, the line's own text stays put beneath */
.hero .display .sweep-in::before{content:attr(data-text);content:attr(data-text) / "";color:#fffaf6;text-shadow:0 0 7px rgba(255,242,234,1),0 0 20px rgba(255,219,200,.9),0 0 34px rgba(255,139,71,.5)}
html.js:not([data-motion=off]) .hero .display .sweep{will-change:transform,opacity;animation:sweep-win 1150ms cubic-bezier(.45,.05,.55,.95) both}
html.js:not([data-motion=off]) .hero .display .sweep-in{will-change:transform;animation:sweep-txt 1150ms cubic-bezier(.45,.05,.55,.95) both}
html.js:not([data-motion=off]) .hero .display .ln:nth-child(2) :is(.sweep,.sweep-in){animation-delay:380ms}
@keyframes sweep-win{0%{opacity:1;transform:translateX(-42cqw)}90%{opacity:1}100%{opacity:0;transform:translateX(100cqw)}}
@keyframes sweep-txt{from{transform:translateX(42cqw)}to{transform:translateX(-100cqw)}}
html.js:not([data-motion=off]) .opening .title{animation:draw-in var(--t-state-long) var(--t-ease) both}
@keyframes draw-in{from{transform:translateY(12px)}to{transform:none}}   /* never from transparent: the title is the page's LCP and paints at once */
html.js:not([data-motion=off]) .spine::before{animation:spine-in 1100ms var(--t-ease-long) both}
@keyframes spine-in{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition-duration:0s!important;scroll-behavior:auto!important}.hero .display .sweep{display:none}}
html[data-motion=off] *,html[data-motion=off] *::before,html[data-motion=off] *::after{animation:none!important;transition-duration:0s!important}
html[data-motion=off] .hero .display .sweep{display:none}
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:260ms}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* ---- preferences ---- */
@media (forced-colors:active) and (max-width:900px){.hero .scene .fallback{inset:0;width:100%;height:100%}}
@media (prefers-contrast:more){:root{--muted:#d6cfdf;--subtle:#c2bacb;--line:#5a4d6a;--line-light:#7e6c90}}
@media (prefers-contrast:more),(prefers-reduced-transparency:reduce){.hdr,.receipt,.bio,.menu,.palette .box,.chip,.lane-tabs button{background:var(--panel);-webkit-backdrop-filter:none;backdrop-filter:none}.palette{background:var(--bg)}}
@media (forced-colors:active){.hdr,.receipt,.bio,.chip,.btn,.lane-tabs button{border:1px solid CanvasText;background:Canvas}.spine::before,.nav-ind,.dot,.chip i{background:CanvasText;forced-color-adjust:none}.hero .display .sweep{display:none}.scene canvas,.scene .still,.portrait .rim{display:none!important}.scene .fallback{display:block;position:absolute;inset:0;width:100%;height:100%;color:CanvasText;forced-color-adjust:auto}.hero .scene .fallback{inset:auto var(--pr) 0 auto;width:var(--pw);height:var(--ph)}.hero .scene{z-index:1}.scene .fallback path{stroke:CanvasText}}

/* ---- print: the CV (and its PDF) ---- */
@media print{
  .tl-sec,.cv-index,.cv-actions,.tl-table,.tl-card{display:none!important}
  .print-head{display:block;font:400 9pt/1.4 var(--sans);color:#000;margin:4pt 0 0}
  .cv-open{display:flex!important;flex-direction:column}
  .cv-open .print-name{display:block!important;order:-2;font-family:var(--serif);font-size:24pt;line-height:1.1;color:#000}
  .cv-open .title{order:-1;font-size:13pt!important;font-family:var(--ui);letter-spacing:.12em;text-transform:uppercase}
  .cv-open .lede{display:none}
  .entry .site,.cv-list .subtle,.entry .b,.subtle{color:#000!important}
  .cv-h+*>:first-child,.entries>li:first-child,.cv-list>li:nth-child(-n+3),.group-h+.entries>li:first-child{break-before:avoid}
  body:has(.cv-open){font-size:10pt;line-height:1.38}
  .cv-open{padding:0 0 6pt;gap:2pt}
  .cv-open .title{font-size:24pt;line-height:1.1}
  .cv-open .lede{font-size:10.5pt;color:#000}
  .cv .cv-h{font-size:14pt;margin:12pt 0 6pt;padding-bottom:3pt;border-bottom:1px solid #999;break-after:avoid}
  .group-h,.entry .h4,.lists .h3{break-after:avoid}
  .group-h{font-size:11.5pt;margin-bottom:5pt}
  .entry,.cv-pubs li,.cv-list li,.lists>div{break-inside:avoid}
  .entries{gap:7pt}
  .entry{grid-template-columns:1.35in minmax(0,1fr);gap:1pt 12pt}
  .entry .when{font-size:8.5pt;line-height:1.5}
  .h4{font-size:11pt;line-height:1.3}
  .entry .org,.entry .b,.cv-list li,.cv-pubs .m,.cv-sum,.cv-note,.lists ul{font-size:9.5pt;color:#222}
  .entry .b{gap:1pt;margin-top:2pt}
  .cv-pubs li{padding:3pt 0;font-size:9.5pt;line-height:1.45;color:#000}   /* 3pt: the Sources list stays on the last page of the CV's content, never alone on a page of its own */
  .cv-pubs li a{color:#000}
  .cv-pubs li a::after{content:none!important}
  .purl{display:inline;font:400 8.5px/1.4 var(--mono);color:#333;word-break:normal;overflow-wrap:anywhere}
  .cv-pubs li{max-width:none}
  .purl::before{content:"("}.purl::after{content:")"}
  .group-h .dot{display:none!important}
  .cv-sum{break-after:avoid}.cv-pubs>li:first-child{break-before:avoid}
  .entry:has(.b>li:nth-child(4)){break-inside:auto}   /* a long entry may continue on the next page; its title, place and first lines stay together */
  .entry .h4:not(:last-child),.entry .org:not(:last-child){break-after:avoid}.entry .b>li{break-inside:avoid}.entry .b{orphans:2;widows:2}   /* only before what follows: on an entry's last line the avoid would pass to the entry's end, and a list of such entries (the presentations) could break nowhere but before its section */
  .cv-pubs .au b{text-decoration-color:#000}   /* his name: underlined in black (the body face ships one weight, and faux bold is out) */
  section.sec{padding-block:4pt}
  .group+.group{margin-top:9pt}
  .dot,.entry .b li::before,.cv-list li::before{background:#000!important;box-shadow:none!important}
  .lists.four{grid-template-columns:repeat(2,minmax(0,1fr));gap:8pt 18pt}
  .cv-list{columns:2;column-gap:18pt}
  body:has(.cv-open) .ftr{display:none}
  .lists ul.inline{display:block;columns:2}.lists ul.inline li{display:block}.lists ul.inline li+li::before{content:none}
  .go{color:#000}
}

.fn,.fnotes{display:none}

/* ---- print ---- */
@media print{
  :root{--text:#000;--muted:#333;--subtle:#555;--line:#bbb;--line-light:#999;color-scheme:light}   /* light: the page margins print white too */
  :root{--s-med:#000;--s-law:#000;--s-ai:#000;--s-teach:#000;--s-core:#000;--ice:#000;--lavender:#000;--magenta:#000;--ember:#000;--green:#000;--cream:#000}   /* strand colours print black: every text run ≥ 7:1 on the paper (P13) */
  html,body{background:#fff;color:#000}
  .hdr,.spine,.menu,.palette,.scene,.skip,.rm,.btn,.chip,.copy,.explorer .bar,.cite summary,.cite .fmts,.toggle,.portrait,.ftr .links,.nav,.halo,.pubhead .paper{display:none!important}
  .cite pre[hidden]{display:block}
  /* receipt sources as footnotes (§8.10): a number at the mark, the sources listed at the end */
  .receipt,.rm{display:none!important}
  .fn{display:inline!important;font:400 7pt/1 var(--mono);vertical-align:super;margin-left:1pt;color:#000}
  .fnotes{display:block!important;margin-top:10pt;padding-top:5pt;border-top:1px solid #999;break-before:auto}
  .fnotes h2{font:500 10pt/1.3 var(--ui);letter-spacing:.08em;text-transform:uppercase;margin-bottom:4pt;break-after:avoid}
  .fnotes ol{list-style:decimal;padding-left:16pt;font:400 7.5pt/1.35 var(--mono);color:#000}
  .fnotes li{break-inside:avoid;overflow-wrap:anywhere}
  a[href^="/"]::after{content:" (raminrajaii.com" attr(href) ")";font:400 9px/1.4 var(--mono);color:#333;overflow-wrap:anywhere;word-break:break-all}
  .nav a::after,.menu a::after,.spine a::after,.crumbs a::after,.hdr a::after,.mark::after{content:none!important}
  a[href^="http"]::after{content:" (" attr(href) ")";font:400 10px/1.4 var(--mono);color:#555;overflow-wrap:anywhere;word-break:break-all}   /* a long URL wraps; nothing runs off the page */
  .receipt .l a{overflow-wrap:anywhere}
  .pub,.unrev li,.path li,.findings li{break-inside:avoid}
  .hero .display .ln{color:#000}.hero .display .sweep{display:none}
  section.sec{padding-block:24px}
  body{font-size:11pt;line-height:1.45}
  .title,.display{font-size:28pt}
}