/* ============================================================================
   site.css — shared design system for index, research, and portfolio pages.
   v2 full reset: editorial "field journal" — warm paper, forest-green accent.
   Type: Fraunces (serif DISPLAY) · clean sans (BODY) · Space Mono (labels).
   Note: display is now the serif and body is the sans — inverted from v1.
   ============================================================================ */

:root {
	--paper:   #F2EEE6;   /* warm paper                      */
	--raised:  #EAE5DA;   /* slightly recessed panels        */
	--ink:     #1A1714;   /* near-black warm text            */
	--muted:   #6A6358;   /* secondary text (AA on paper)    */
	--hair:    #D4CDBF;   /* hairline rules                  */
	--accent:  #3D5A40;   /* deep forest green               */
	--accent-2:#B4502E;   /* terracotta — rare secondary tick */
	--accent-ink: #F2EEE6;
	--maxw: 80rem;
	/* Fraunces: optical serif display. opsz/soft/wonk give it character. */
	--f-display: "Fraunces", Georgia, "Times New Roman", serif;
	--f-text:    "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
	--f-mono:    "Space Mono", ui-monospace, monospace;
	--ease: cubic-bezier(.16,.84,.34,1);
	--ease-out: cubic-bezier(.22,1,.36,1);
}
@media (prefers-color-scheme: dark) {
	:root {
		--paper:  #100E0C;
		--raised: #1A1714;
		--ink:    #EDE7DA;
		--muted:  #9A9284;
		--hair:   #2C2822;
		--accent: #6FA873;   /* lighter green for AA on dark */
		--accent-2:#D6794F;
		--accent-ink: #100E0C;
	}
}

/* ============================================================ RESET ============================================================ */
*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body {
	margin: 0; background: var(--paper); color: var(--ink);
	font-family: var(--f-text); font-size: clamp(1rem,.97rem + .2vw,1.1rem);
	line-height: 1.62; -webkit-font-smoothing: antialiased; overflow-x: hidden;
	font-feature-settings: "ss01";
}
img,video { display:block; max-width:100%; height:auto; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.shell { width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline: clamp(1.25rem,5vw,4rem); }

.label { font: 400 .72rem/1 var(--f-mono); letter-spacing:.22em; text-transform:uppercase; color:var(--muted); }
.idx   { font: 700 .72rem/1 var(--f-mono); color: var(--accent); letter-spacing:.1em; }

/* signature motif: registration crosshair */
.tick { display:inline-block; width:.7em; height:.7em; position:relative; flex:none; }
.tick::before,.tick::after { content:""; position:absolute; background:var(--accent); }
.tick::before { left:50%; top:0; width:1.5px; height:100%; transform:translateX(-50%); }
.tick::after  { top:50%; left:0; height:1.5px; width:100%; transform:translateY(-50%); }

.skip { position:absolute; left:-999px; top:0; z-index:200; background:var(--ink); color:var(--paper); padding:.6rem 1rem; font:700 .8rem var(--f-mono); }
.skip:focus { left:0; }

/* ============================================================ HEADER ============================================================ */
.head { position:fixed; top:0; left:0; right:0; z-index:80; mix-blend-mode: difference; }
.head .shell { display:flex; align-items:center; justify-content:space-between; padding-block:1.4rem; }
.head, .head a { color:#fff; }
.mark { font:700 .95rem/1 var(--f-mono); letter-spacing:.04em; display:flex; align-items:center; gap:.5rem; }
.mark .glyph { color: var(--accent); mix-blend-mode: normal; }
.head nav ul { display:flex; gap:clamp(1rem,3vw,2.4rem); list-style:none; margin:0; padding:0; flex-wrap:wrap; }
.head nav a { font:400 .78rem/1 var(--f-mono); letter-spacing:.12em; text-transform:uppercase; }
.head nav a:hover { text-decoration:line-through; text-decoration-color:var(--accent); }
/* small separator between in-page anchors and the "leaves the page" links */
.head nav .nav-sep { width:1px; height:.9em; background:currentColor; opacity:.35; align-self:center; }
.head nav a.nav-out span { color:var(--accent); mix-blend-mode:normal; font-size:.85em; }
@media (max-width:680px){ .head nav .nav-sep { display:none; } }
@media (max-width:560px){ .head nav { display:none; } }   /* keep tiny screens clean; brand still links home */

/* ============================================================ CUSTOM CURSOR ============================================================
   GAP-FIX RELATED: starts hidden (opacity 0) until first mousemove so it doesn't
   render as a stray "+" floating in the middle of the hero on load. */
.cursor { position:fixed; top:0; left:0; z-index:300; pointer-events:none; mix-blend-mode:difference; will-change:transform; opacity:0; transition:opacity .2s linear; }
.cursor.live { opacity:1; }
.cursor::before,.cursor::after { content:""; position:absolute; background:#fff; }
.cursor::before { width:22px; height:1.5px; left:-11px; top:-.75px; }
.cursor::after  { height:22px; width:1.5px; top:-11px; left:-.75px; }
.cursor.snap::before,.cursor.snap::after { background:var(--accent); }
.cursor.snap::before { width:30px; left:-15px; }
.cursor.snap::after  { height:30px; top:-15px; }
@media (hover:none),(pointer:coarse){ .cursor{ display:none !important; } }

/* ============================================================ HERO ============================================================
   GAP FIX: hero is a column with space-between. The meta row sits near the top,
   the headline + subhead anchor toward the bottom. The viewport fills with
   intentional rhythm instead of a dead upper half. */
/* v2 HERO: asymmetric split — declarative serif headline LEFT, portrait RIGHT.
   No slogan, no clip-reveal theatrics. LimaCharlie-style calm + a photo. */
.hero { position:relative; padding-top: clamp(7rem,16vh,10rem); padding-bottom: clamp(3rem,8vh,5rem); }
.hero .meta { display:flex; justify-content:space-between; align-items:baseline; border-bottom:1px solid var(--hair); padding-bottom:1rem; margin-bottom: clamp(2.5rem,7vh,5rem); gap:1rem; flex-wrap:wrap; }
.hero-inner { display:grid; grid-template-columns:1fr; gap: clamp(2rem,5vw,3.5rem); align-items:end; }
@media (min-width:880px){ .hero-inner{ grid-template-columns: 1.55fr 1fr; } }
.hero h1 {
	font-family:var(--f-display); font-weight:400;
	font-size: clamp(2.5rem, 1rem + 6.5vw, 5.6rem); line-height:1.0;
	letter-spacing:-.025em; margin:0; max-width: 16ch;
}
.hero h1 em { font-family:var(--f-display); font-style:italic; font-weight:400; }
/* the second line is the quiet, smaller "subtitle" inside the headline area */
.hero-sub { font-family:var(--f-text); font-size: clamp(1.05rem,1rem + .45vw,1.3rem); color:var(--muted); max-width:46ch; margin: clamp(1.4rem,3.5vh,2.2rem) 0 0; line-height:1.5; }
.hero-sub strong { color:var(--ink); font-weight:600; }
/* portrait — duotone-ish, framed, slightly larger than column on wide screens */
.hero-portrait { position:relative; }
.hero-portrait img { width:100%; aspect-ratio: 4/5; object-fit:cover; border:1px solid var(--ink); filter:grayscale(1) contrast(1.04); }
.hero-portrait figcaption { font:400 .68rem/1.4 var(--f-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-top:.7rem; display:flex; justify-content:space-between; gap:1rem; }
@media (max-width:879px){ .hero-portrait{ max-width:320px; } }
.scrollcue { position:absolute; right:clamp(1.25rem,5vw,4rem); bottom:clamp(2rem,5vh,4rem); font:400 .66rem/1 var(--f-mono); letter-spacing:.22em; text-transform:uppercase; color:var(--muted); writing-mode:vertical-rl; }
@media (max-width:879px){ .scrollcue{ display:none; } }

/* ============================================================ MARQUEE ============================================================ */
.marquee { border-block:1px solid var(--hair); padding-block:1.4rem; overflow:hidden; }
.mrow { display:flex; gap:0; white-space:nowrap; will-change:transform; }
.mrow + .mrow { margin-top:.4rem; }
.mrow span { font-family:var(--f-display); font-weight:400; font-size: clamp(1.6rem,1rem + 3vw,3rem); letter-spacing:-.01em; padding-inline:1.4rem; display:inline-flex; align-items:center; gap:1.4rem; color:var(--ink); }
/* alternate roman/italic for Fraunces rhythm */
.mrow span:nth-child(even) { font-style:italic; color:var(--muted); }
.mrow span::after { content:""; width:.42rem; height:.42rem; background:var(--accent); border-radius:50%; }
.mrow.alt span { color:var(--muted); }
.mrow.alt span:nth-child(even) { font-style:italic; color:var(--ink); }

/* ============================================================ SECTION SCAFFOLD ============================================================ */
section { position:relative; }
.sec-pad { padding-block: clamp(5rem,12vh,9rem); }
.sec-head { display:flex; align-items:baseline; gap:1rem; margin-bottom: clamp(2.5rem,6vh,4rem); }
.sec-head h2 { font-family:var(--f-display); font-weight:500; font-size: clamp(1.6rem,1.2rem + 2vw,3rem); letter-spacing:-.02em; margin:0; }
.sec-head h2 em { font-family:var(--f-display); font-style:italic; font-weight:400; }

/* ============================================================ ABOUT — bio + experience timeline ============================================================ */
.about-grid { display:grid; grid-template-columns:1fr; gap: clamp(2.5rem,6vw,4.5rem); }
@media (min-width:880px){ .about-grid{ grid-template-columns: 0.95fr 1.05fr; align-items:start; } }
.about-intro .portrait { width: clamp(120px,28vw,200px); height:auto; aspect-ratio:1; object-fit:cover; border:1px solid var(--ink); filter:grayscale(1) contrast(1.02); transition:filter .4s var(--ease); margin-bottom:1.6rem; }
.about-intro .portrait:hover { filter:none; }
@media (prefers-reduced-motion:reduce){ .about-intro .portrait{ transition:none; } }
.about-intro .lede { font-family:var(--f-display); font-weight:400; font-size: clamp(1.3rem,1.1rem + .9vw,1.9rem); line-height:1.32; letter-spacing:-.015em; margin:0 0 1.1rem; max-width:24ch; }
.about-intro .lede-2 { font-family:var(--f-text); color:var(--muted); margin:0 0 1.6rem; max-width:46ch; }

.timeline { list-style:none; margin:0; padding:0; border-left:1px solid var(--hair); }
.t-item { position:relative; padding: 0 0 2.2rem 1.8rem; }
.t-item:last-child { padding-bottom:0; }
.t-item::before { content:""; position:absolute; left:-4.5px; top:.5rem; width:8px; height:8px; background:var(--paper); border:1.5px solid var(--muted); border-radius:50%; }
.t-item:first-child::before { background:var(--accent); border-color:var(--accent); }
.t-tag { font:700 .68rem/1 var(--f-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
.t-item h3 { font-family:var(--f-display); font-weight:500; font-size: clamp(1.2rem,1rem + 1vw,1.6rem); letter-spacing:-.01em; margin:.6rem 0 .15rem; }
.t-org { font:400 .82rem/1.4 var(--f-mono); color:var(--ink); margin:0 0 .6rem; }
.t-desc { font-family:var(--f-text); color:var(--muted); margin:0; max-width:54ch; }

/* ============================================================ WORK ============================================================ */
.worklist { border-top:1px solid var(--hair); }
.work {
	display:grid; grid-template-columns: 3rem minmax(0,1fr) clamp(180px,22vw,280px);
	grid-template-rows: auto 1fr; gap: clamp(.5rem,2vw,2rem) clamp(1.5rem,3vw,3rem);
	align-items:start; padding-block: clamp(1.6rem,3.5vh,2.6rem);
	border-bottom:1px solid var(--hair); position:relative; transition: padding-left .4s var(--ease);
}
.work .w-idx { grid-column:1; grid-row:1; }
.work:hover { padding-left: clamp(.5rem,2vw,1.5rem); }
@media (prefers-reduced-motion:reduce){ .work:hover{ padding-left:0; } }
.work .w-idx { font:700 .8rem/1.4 var(--f-mono); color:var(--muted); }
.work:hover .w-idx { color:var(--accent); }
.work .w-title { font-family:var(--f-display); font-weight:500; font-size: clamp(1.5rem,1rem + 3vw,3.4rem); letter-spacing:-.02em; line-height:1.02; }
.work .w-title em { font-family:var(--f-display); font-style:italic; font-weight:400; color:var(--muted); font-size:.5em; display:block; margin-top:.5rem; letter-spacing:0; line-height:1.25; }
/* Skills sit in the right column, aligned to the top of the description. */
.work .w-meta { grid-column:3; grid-row:1; align-self:start; text-align:left; min-width:0; margin-top:.4rem; }
.work .w-stack { font:400 .72rem/1.6 var(--f-mono); color:var(--muted); letter-spacing:.04em; }
.work .w-status { display:inline-flex; align-items:center; gap:.4rem; font:700 .66rem/1.3 var(--f-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin-bottom:.6rem; }
.work .w-status.wip { color:var(--muted); }
.work .w-status.wip .dot { background:var(--muted); }
.work .w-status .dot { width:.45rem; height:.45rem; border-radius:50%; background:var(--accent); display:inline-block; flex:none; }
/* In-flow project thumbnail: lives in the right column, always visible,
   never overlaps the description (text is capped at 62ch on the left). */
.work .w-media {
	grid-column:3; grid-row:2; align-self:start; justify-self:stretch;
	width:100%; aspect-ratio:16/10; margin-top:.4rem;
	border:1px solid var(--hair); overflow:hidden; background:var(--bg);
}
.work .w-media img { width:100%; height:100%; object-fit:cover; display:block; }
/* Logo variant: show the whole mark on a clean padded tile (no crop). */
.work .w-media.is-logo { aspect-ratio:16/10; display:flex; align-items:center; justify-content:center; padding:1.1rem 1.4rem; }
.work .w-media.is-logo img { width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain; }
/* two logos sharing one tile (e.g. Hugging Face + Coursera) */
.work .w-media.is-logo-row { gap:1.2rem; }
.work .w-media.is-logo-row img { max-height:64%; }
.work .w-detail { grid-column:2; grid-row:1 / span 2; }
.work .w-desc { font-family:var(--f-text); color:var(--muted); max-width:62ch; margin:.9rem 0 0; font-size:1.02rem; }
.work .w-desc strong { color:var(--ink); font-weight:500; }
/* metric row for projects with real numbers (GuardAI) */
.work .w-metrics { display:flex; flex-wrap:wrap; gap:1.4rem; margin:1.1rem 0 0; }
.work .w-metrics .metric { font:400 .74rem/1.2 var(--f-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--muted); display:flex; flex-direction:column; gap:.25rem; }
.work .w-metrics .metric b { font:700 1.5rem/1 var(--f-display); letter-spacing:-.01em; color:var(--accent); text-transform:none; }
.work .w-links { display:flex; gap:1.2rem; margin-top:1.1rem; flex-wrap:wrap; }
.work .w-links a { font:700 .72rem/1 var(--f-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--ink); border-bottom:1.5px solid var(--accent); padding-bottom:.25rem; }
.work .w-links a:hover { color:var(--accent); }
.work .w-locked { font:400 .72rem/1 var(--f-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.work .w-note { font-family:var(--f-text); font-style:italic; color:var(--muted); font-size:.92rem; margin:.6rem 0 0; }
.subhead { font:700 .72rem/1 var(--f-mono); letter-spacing:.22em; text-transform:uppercase; color:var(--muted); padding:2.4rem 0 .6rem; display:flex; align-items:center; gap:.8rem; }

@media (max-width:680px){
	.work { grid-template-columns: 2rem 1fr; grid-template-rows:none; }
	/* single right column: description, then skills, then image, in source order */
	.work .w-detail { grid-column:2; grid-row:auto; }
	.work .w-meta { grid-column:2; grid-row:auto; text-align:left; margin-top:.9rem; }
	.work .w-stack { margin-left:0; max-width:none; }
	.work .w-media { grid-column:2; grid-row:auto; justify-self:start; width:100%; max-width:320px; margin-top:1rem; }
}

/* ============================================================ MANIFESTO ============================================================ */

/* ============================================================ EXPLORE SPLIT ============================================================ */
.split { display:grid; grid-template-columns:1fr; border-top:1px solid var(--hair); }
@media (min-width:760px){ .split{ grid-template-columns:1fr 1fr; } .split a:first-child{ border-right:1px solid var(--hair); } }
.split a { display:block; padding: clamp(2rem,5vh,3.5rem) clamp(1.5rem,4vw,3rem); position:relative; overflow:hidden; transition: background .4s var(--ease); }
.split a:hover { background:var(--raised); }
.split .s-idx { font:700 .72rem/1 var(--f-mono); color:var(--accent); }
.split h3 { font-family:var(--f-display); font-weight:500; font-size: clamp(1.8rem,1.2rem + 2.5vw,3.4rem); letter-spacing:-.02em; margin:1.5rem 0 .8rem; }
.split h3 em { font-family:var(--f-display); font-style:italic; font-weight:400; color:var(--muted); }
.split p { font-family:var(--f-text); color:var(--muted); max-width:42ch; margin:0; }
.split .go { font:700 .72rem/1 var(--f-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--ink); margin-top:1.4rem; display:inline-flex; gap:.6rem; align-items:center; }
.split a:hover .go { color:var(--accent); }
.split a:hover .go .arr { transform:translateX(.4rem); }
.split .go .arr { transition:transform .35s var(--ease); }

/* ============================================================ CONTACT / FOOTER ============================================================ */
.contact { border-top:1px solid var(--hair); }
.contact h2 { font-family:var(--f-display); font-weight:500; font-size: clamp(2.2rem,1rem + 7vw,6rem); line-height:.98; letter-spacing:-.03em; margin:0 0 2rem; }
.contact h2 em { font-family:var(--f-display); font-style:italic; font-weight:400; color:var(--accent); }
.contact h2 a { border-bottom:3px solid var(--accent); }
.contact h2 a:hover em { opacity:.7; }
.contact .c-row { display:flex; gap:clamp(1.5rem,5vw,4rem); flex-wrap:wrap; border-top:1px solid var(--hair); padding-top:1.5rem; }
.contact .c-row a { font:700 .78rem/1 var(--f-mono); letter-spacing:.14em; text-transform:uppercase; display:inline-flex; align-items:center; gap:.6rem; }
.contact .c-row a:hover { color:var(--accent); }

.foot { padding-block:2.5rem; border-top:1px solid var(--hair); }
.foot .shell { display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; }
.foot, .foot * { font:400 .72rem/1.4 var(--f-mono); letter-spacing:.08em; color:var(--muted); }

/* ============================================================ OFFLINE — life outside the editor ============================================================ */
.off-intro { font-family:var(--f-display); font-weight:400; font-size: clamp(1.3rem,1.1rem + .9vw,1.9rem); line-height:1.34; max-width:34ch; margin:0 0 clamp(2rem,5vh,3rem); }
.off-grid { display:grid; gap:1px; background:var(--hair); border:1px solid var(--hair);
	grid-template-columns: repeat(2, 1fr); grid-auto-rows: minmax(180px, 1fr); }
@media (min-width:760px){ .off-grid{ grid-template-columns: repeat(4, 1fr); grid-auto-rows: 260px; } }
.off-card { position:relative; margin:0; overflow:hidden; background:var(--raised); display:flex; align-items:flex-end; }
/* one feature tile spans 2 cols/rows on wide screens */
.off-lg { grid-column: span 2; }
@media (min-width:760px){ .off-lg{ grid-row: span 2; } }
.off-card .off-media { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(.5) contrast(1.02); transition: filter .5s var(--ease), transform .6s var(--ease); }
.off-card:hover .off-media { filter:none; transform:scale(1.04); }
@media (prefers-reduced-motion:reduce){ .off-card .off-media{ transition:none; } .off-card:hover .off-media{ transform:none; } }
/* graceful fallback when the media file isn't there yet */
.off-card .off-media.missing { display:none; }
.off-card.off-text { background:var(--ink); }
.off-card.off-text .off-name, .off-card.off-text .off-tag { color:var(--paper); }
.off-card figcaption { position:relative; z-index:2; padding:1.1rem; width:100%;
	background:linear-gradient(0deg, color-mix(in srgb, var(--ink) 78%, transparent), transparent); }
.off-card:not(.off-text):not(:has(.off-media.missing)) .off-name,
.off-card:not(.off-text):not(:has(.off-media.missing)) .off-tag { color:#fff; }
.off-card .off-tag { display:block; font:700 .62rem/1 var(--f-mono); letter-spacing:.18em; text-transform:uppercase; color:var(--accent); margin-bottom:.4rem; }
.off-card .off-name { font-family:var(--f-display); font-weight:500; font-size: clamp(1rem,.9rem + .6vw,1.35rem); letter-spacing:-.01em; }
/* when an image is missing, label sits on the raised panel and reads dark */
.off-card:has(.off-media.missing) figcaption { background:none; align-self:flex-end; }

/* ============================================================ REVEAL ============================================================ */
.rv { opacity:0; transform:translateY(26px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.rv.in { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .rv{ opacity:1; transform:none; transition:none; } }

/* ============================================================ INNER-PAGE HELPERS (research / portfolio) ============================================================
   A shared page-top band + prose styling so the inner pages match the system. */
.page-top { padding: 8rem 0 0; }
.page-top .shell { display:flex; align-items:baseline; gap:1rem; }
.page-top h1 { font-family:var(--f-display); font-weight:500; font-size: clamp(2.4rem,1.2rem + 5vw,5rem); letter-spacing:-.03em; margin:0; }
.page-top h1 em { font-family:var(--f-display); font-style:italic; font-weight:400; color:var(--accent); }
.page-lede { font-family:var(--f-text); color:var(--muted); font-size: clamp(1.05rem,1rem + .5vw,1.35rem); max-width:54ch; margin: 1.2rem 0 0; }

.prose h2 { font-family:var(--f-display); font-weight:500; font-size:clamp(1.4rem,1.1rem + 1.4vw,2.2rem); letter-spacing:-.02em; margin:0 0 .6rem; }
.prose h3 { font-family:var(--f-display); font-weight:500; font-size:clamp(1.2rem,1rem + 1vw,1.7rem); letter-spacing:-.01em; margin:0 0 .4rem; }
.prose p { font-family:var(--f-text); color:var(--muted); max-width:64ch; }
.prose a { color:var(--accent); }
.prose a:hover { text-decoration:underline; }

/* ============================================================ RESEARCH PAGE — kill the legacy skel seam ============================================================
   The 2014 template wraps research content in `.wrapper.style2 { #f6f6f6 }`,
   which is the gray band that broke the vibe. Neutralize it so the warm paper
   shows through, and restyle the paper blocks into the new system. The pandemic
   game and stress-test sim keep their own retro look on purpose. */
/* the legacy skel-layers JS injects a mobile nav toggle + title bar; our .head
   replaces it, so suppress the leftover artifact on every page. */
#titleBar, .toggle[href="#navPanel"], #navPanel { display:none !important; }

#research-papers.wrapper, #research-papers.wrapper.style2 { background:transparent; padding-top: clamp(2rem,5vh,3.5rem); }
#research-papers .research-content { max-width: 64rem; margin-inline:auto; }

/* paper blocks */
.research-paper-block { border-top:1px solid var(--hair); padding-top: clamp(2rem,5vh,3.5rem); }
.research-paper-block:first-child { border-top:0; padding-top:0; }
.paper-header h3, .research-paper-block > h3 {
	font-family:var(--f-display); font-weight:500; letter-spacing:-.02em; color:var(--ink);
	font-size: clamp(1.4rem,1.1rem + 1.4vw,2.2rem); line-height:1.12; margin:0 0 .6rem;
}
.paper-meta { font:400 .8rem/1.6 var(--f-mono); letter-spacing:.04em; color:var(--muted); }
.paper-meta em { font-style:italic; }
.paper-meta a { color:var(--accent); }
.paper-intro-section > p, .research-paper-block > p { font-family:var(--f-text); color:var(--muted); max-width:64ch; }
.publication-thumb { border:1px solid var(--ink); filter:grayscale(1) contrast(1.03); border-radius:0; }
.paper-divider { border:0; border-top:1px solid var(--hair); margin: clamp(2.5rem,6vh,4rem) 0; }
/* the request-manuscript / read links inside game intro keep readable on paper */
.research-paper-block .game-intro-meta a { color:var(--accent); }