/* Ahsan Habib, personal profile. Design: docs/DESIGN.md. Tokens: tokens.css. */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--paper); color: var(--ink); scroll-padding-top: var(--anchor-space); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; font: 400 var(--fs-body)/var(--lh-body) var(--font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-kerning: normal; text-rendering: optimizeLegibility; overflow-x: clip; }
::selection { background: var(--champagne); color: var(--ink); }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: var(--hairline); }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: var(--focus-offset); border-radius: 2px; }
h1, h2, h3, p, figure, blockquote, dl, dd, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
h1, h2, h3 { font-weight: 500; line-height: var(--lh-heading); text-wrap: balance; overflow-wrap: break-word; hyphens: manual; }
h1, h2 { letter-spacing: var(--tr-heading); font-stretch: 94%; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.18; letter-spacing: -.02em; }
p, li, dd { text-wrap: pretty; }
img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
strong { font-weight: 600; }
button { font: inherit; color: inherit; }
/* The serif italic voice: one emphasised phrase per heading. */
h1 em, h2 em, h3 em, .hero-question em, .statement em, .strand-since em, .h3-like em {
  font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; font-stretch: normal; font-size: 1.07em; line-height: .9;
}
h1 em, h2 em, .h3-like em { color: var(--teal-accent); }
.night h1 em, .night h2 em, .night .h3-like em { color: var(--gold); }
.container { width: min(var(--content), calc(100% - var(--gutter) * 2)); margin-inline: auto; }
.skip { position: fixed; top: var(--s-4); left: var(--s-4); z-index: var(--skip-layer); padding: var(--s-3) var(--s-5); background: var(--paper); color: var(--ink); border-radius: var(--pill); transform: translateY(-200%); }
.skip:focus { transform: none; }

/* ---------- Type utilities ---------- */
.eyebrow { display: flex; align-items: center; gap: var(--s-3); font-size: var(--fs-micro); font-weight: 600; letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--ink-3); }
.eyebrow--night, .night .eyebrow { color: var(--on-night-3); }
.eyebrow-index { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.35rem; letter-spacing: 0; text-transform: none; color: var(--gold-ink); line-height: 1; }
.night .eyebrow-index { color: var(--gold); }
.eyebrow-index::after { content: ""; display: inline-block; width: 1.75rem; height: 1px; margin-left: var(--s-3); vertical-align: middle; background: currentColor; opacity: .6; }
.h3-like { font-size: var(--fs-h3); letter-spacing: -.02em; }
.section { padding-block: var(--section); }
.section-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-6) clamp(2rem, 6vw, 7rem); align-items: end; margin-bottom: clamp(3rem, 6vw, 5.5rem); }
.thread .section-head { align-items: start; }
.thread .section-head > :first-child { position: sticky; top: calc(var(--header-h) + var(--s-6)); }
.section-head h2 { margin-top: var(--s-5); }
.section-intro { max-width: var(--hero-measure); color: var(--ink-2); font-size: var(--fs-lede); line-height: 1.5; }

/* ---------- Links and buttons ---------- */
.arrow { display: inline-block; transition: transform var(--duration) var(--ease); }
.text-link { display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--tap); font-size: var(--fs-small); font-weight: 600; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 calc(50% + .8em) / 100% 1px no-repeat; }
.text-link--night { color: var(--on-night); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-3); min-height: 3.25rem; padding: .8rem 1.5rem; border-radius: var(--pill); border: 1px solid transparent; font-size: var(--fs-small); font-weight: 600; letter-spacing: .01em; text-decoration: none; white-space: nowrap; }
.button--gold { background: var(--gold); color: var(--night); }
.button--ghost { border-color: rgb(243 239 230 / .32); color: var(--on-night); }
.button--ink { background: var(--teal); color: var(--paper); margin-top: var(--s-7); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); }

/* ---------- Header and menu ---------- */
.site-header { position: fixed; inset: 0 0 auto; z-index: var(--header-layer); padding: .75rem var(--gutter) 0; pointer-events: none; view-transition-name: site-header; }
.header-bar { pointer-events: auto; max-width: calc(var(--content) + 1.5rem); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); padding: .45rem .5rem .45rem .7rem; border-radius: var(--pill); background: rgb(10 40 38 / .84); border: 1px solid rgb(243 239 230 / .1); color: var(--on-night); box-shadow: 0 12px 40px -18px rgb(4 20 19 / .55); transition: background var(--duration) var(--ease), box-shadow var(--duration) var(--ease); }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .header-bar { background: rgb(10 40 38 / .78); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); }
}
.identity { display: inline-flex; align-items: center; gap: var(--s-3); min-height: var(--tap); padding-right: var(--s-2); text-decoration: none; }
.monogram { position: relative; display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--on-night); color: var(--night); font-size: .82rem; font-weight: 650; letter-spacing: -.02em; }
.monogram-dot { position: absolute; right: .05rem; bottom: .2rem; width: .5rem; height: .5rem; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 2px var(--night); }
.identity-name { font-size: var(--fs-small); font-weight: 600; letter-spacing: -.01em; }
.site-nav { display: flex; align-items: center; gap: .15rem; }
.site-nav a { position: relative; display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 .85rem; font-size: var(--fs-small); color: var(--on-night-2); text-decoration: none; border-radius: var(--pill); transition: color var(--duration) var(--ease), background var(--duration) var(--ease); }
.site-nav a:hover { color: var(--on-night); background: rgb(243 239 230 / .07); }
.site-nav a[aria-current="page"] { color: var(--on-night); }
.site-nav a[aria-current="page"]::after { content: ""; position: absolute; left: 50%; bottom: .45rem; width: .3rem; height: .3rem; margin-left: -.15rem; border-radius: 50%; background: var(--gold); }
.site-nav .nav-contact { margin-left: .4rem; background: var(--gold); color: var(--night); font-weight: 600; padding: 0 1.15rem; }
.site-nav .nav-contact:hover { background: var(--champagne); color: var(--night); }
.menu-toggle { display: none; align-items: center; gap: .6rem; min-height: var(--tap); padding: 0 1.1rem; border: 0; border-radius: var(--pill); background: var(--on-night); color: var(--night); font-size: var(--fs-small); font-weight: 600; cursor: pointer; }
.menu-toggle-lines { position: relative; width: 1rem; height: 1px; background: currentColor; }
.menu-toggle-lines::before { content: ""; position: absolute; left: 0; right: .3rem; top: -4px; height: 1px; background: currentColor; }
.menu-toggle-lines::after { content: ""; position: absolute; left: .3rem; right: 0; top: 4px; height: 1px; background: currentColor; }
.menu-sheet { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--night); color: var(--on-night); z-index: var(--menu-layer); overflow-y: auto; }
.menu-sheet::backdrop { background: rgb(10 40 38 / .6); }
.menu-inner { min-height: 100%; display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-7); padding: 1.2rem var(--gutter) max(2rem, env(safe-area-inset-bottom)); background: radial-gradient(40rem 30rem at 90% 0%, rgb(127 181 169 / .16), transparent 60%), radial-gradient(40rem 30rem at 0% 100%, rgb(217 188 138 / .14), transparent 60%); }
.menu-top { display: flex; justify-content: space-between; align-items: center; }
.menu-close { min-height: var(--tap); padding: 0 1.2rem; border-radius: var(--pill); border: 1px solid rgb(243 239 230 / .3); background: transparent; cursor: pointer; font-size: var(--fs-small); font-weight: 600; }
.menu-nav { display: grid; }
.menu-nav a { display: flex; align-items: baseline; gap: var(--s-4); padding-block: .55rem; border-bottom: 1px solid var(--line-night); text-decoration: none; }
.menu-index { font-family: var(--serif); font-style: italic; font-size: 1.1rem; color: var(--gold); min-width: 1.75rem; }
.menu-label { font-size: clamp(2rem, 9vw, 3.25rem); font-weight: 500; letter-spacing: -.04em; line-height: 1.1; }
.menu-nav a[aria-current="page"] .menu-label { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--gold); letter-spacing: -.01em; }
.menu-foot { display: grid; gap: var(--s-2); font-size: var(--fs-small); color: var(--on-night-2); }
.menu-foot a { min-height: var(--tap); display: inline-flex; align-items: center; text-decoration: none; }
.menu-foot a:first-child { font-size: var(--fs-lede); color: var(--on-night); }

/* ---------- Night surfaces ---------- */
.night { position: relative; isolation: isolate; overflow: clip; background: var(--night); color: var(--on-night); }
.night a:focus-visible, .night button:focus-visible, .night input:focus-visible { outline-color: var(--gold); }
.grain { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--grain-url) repeat; background-size: var(--grain-size); opacity: .38; }
.hero-glow { position: absolute; inset: 0; z-index: -3; pointer-events: none; background:
  radial-gradient(56rem 38rem at 82% 14%, rgb(127 181 169 / .2), transparent 62%),
  radial-gradient(48rem 34rem at 4% 96%, rgb(217 188 138 / .16), transparent 62%),
  linear-gradient(180deg, #0A2826 0%, #0B2D2A 60%, #0A2826 100%); }
.braid { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity 1.4s var(--ease); }
.braid.is-ready { opacity: 1; }

/* ---------- Opening ---------- */
.hero { min-height: max(40rem, 100svh); display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-5); padding-top: calc(var(--header-h) + clamp(1.5rem, 5vh, 6rem)); }
.hero .braid { -webkit-mask-image: linear-gradient(100deg, rgb(0 0 0 / .32) 0%, rgb(0 0 0 / .38) 42%, #000 70%); mask-image: linear-gradient(100deg, rgb(0 0 0 / .32) 0%, rgb(0 0 0 / .38) 42%, #000 70%); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .85fr); gap: clamp(2rem, 6vw, 7rem); align-items: center; }
.hero-eyebrow { display: flex; flex-wrap: wrap; align-items: center; font-size: var(--fs-micro); font-weight: 600; letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--on-night-2); }
.hero-eyebrow span + span::before { content: ""; display: inline-block; width: .32rem; height: .32rem; margin: 0 .9rem .15rem; border-radius: 50%; background: var(--gold); vertical-align: middle; }
.hero-name { margin: var(--s-5) 0 0; font-size: var(--fs-name); line-height: var(--lh-name); letter-spacing: var(--tr-name); font-weight: 500; font-stretch: 92%; }
.name-line { display: block; }
.hero-name em { display: inline-block; padding: 0 .08em .08em 0; font-size: 1.04em; color: var(--gold); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero-name em { background: linear-gradient(100deg, #E9DBC4 0%, #D9BC8A 34%, #FFF6E4 50%, #D9BC8A 66%, #C9A36A 100%) 0 0 / 260% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; }
}
.native { margin-top: var(--s-4); font-family: var(--bengali); font-size: 1.1rem; letter-spacing: .02em; color: var(--on-night-3); }
.hero-question { margin-top: clamp(1.25rem, 3vh, 2rem); max-width: 36rem; font-size: var(--fs-lede); line-height: 1.4; color: var(--on-night); }
.hero-question em { color: var(--gold); }
.hero-lede { margin-top: var(--s-4); max-width: var(--hero-measure); color: var(--on-night-2); }
.hero .actions { margin-top: clamp(1.25rem, 3vh, 2rem); }
.hero-portrait { position: relative; justify-self: end; width: min(100%, 26rem); margin: var(--s-5) var(--s-4) 0 0; transform-style: preserve-3d; }
.hero-portrait::before { content: ""; position: absolute; inset: -.9rem; border: 1px solid rgb(217 188 138 / .38); border-radius: 50% 50% calc(var(--radius-lg) + .9rem) calc(var(--radius-lg) + .9rem) / 37% 37% calc(var(--radius-lg) + .9rem) calc(var(--radius-lg) + .9rem); pointer-events: none; }
.arch { position: relative; overflow: hidden; aspect-ratio: 4 / 5.15; border-radius: 50% 50% var(--radius-lg) var(--radius-lg) / 37% 37% var(--radius-lg) var(--radius-lg); background: var(--night-2); box-shadow: 0 50px 90px -40px rgb(0 0 0 / .7); transition: transform 600ms var(--ease); }
.arch img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.arch::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(10 40 38 / .55), transparent 38%), linear-gradient(to bottom, rgb(10 40 38 / .18), transparent 30%); pointer-events: none; }
.arch-light { position: absolute; inset: -20% -60%; z-index: 1; background: linear-gradient(105deg, transparent 40%, rgb(255 246 228 / .22) 50%, transparent 60%); transform: translateX(-100%); pointer-events: none; }
.hero-portrait figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-1) var(--s-4); margin-top: var(--s-5); font-size: var(--fs-small); color: var(--on-night-3); }
.place { display: inline-flex; align-items: center; gap: .45rem; color: var(--on-night-2); white-space: nowrap; }
.clock { font-variant-numeric: tabular-nums; color: var(--gold); }
.live-dot { position: relative; width: .45rem; height: .45rem; border-radius: 50%; background: var(--gold); display: inline-block; flex: none; }
.live-dot--ink { background: var(--teal-accent); }
.hero-foot { display: flex; justify-content: space-between; align-items: end; gap: var(--s-6); padding-block: var(--s-4) var(--s-5); border-top: 1px solid var(--line-night); }
.milestones { display: flex; flex-wrap: wrap; gap: var(--s-4) clamp(1.5rem, 5vw, 4.5rem); }
.milestones li { display: grid; gap: .1rem; }
.m-label { font-size: var(--fs-micro); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--on-night-3); }
.m-year { font-family: var(--serif); font-style: italic; font-size: clamp(1.9rem, 1.4rem + 1.4vw, 2.7rem); line-height: 1; color: var(--gold); }
.scroll-cue { display: inline-flex; align-items: center; gap: var(--s-3); min-height: var(--tap); font-size: var(--fs-micro); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--on-night-2); text-decoration: none; }
.cue-line { position: relative; width: 1px; height: 2.6rem; overflow: hidden; background: rgb(243 239 230 / .2); }
.cue-line::after { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 40%; background: var(--gold); }

/* ---------- The connecting thread ---------- */
.story { color: var(--ink-2); max-width: var(--measure); }
.story p:first-child { font-size: var(--fs-lede); line-height: 1.5; color: var(--ink); }
.story p + p { margin-top: var(--s-4); }
.strands { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: clamp(1rem, 2vw, 1.75rem); }
.strand { --strand: var(--strand-teach); }
.strand--build { --strand: var(--strand-build); }
.strand--question { --strand: var(--strand-question); }
.strand-link { position: relative; display: flex; flex-direction: column; height: 100%; padding: clamp(1.5rem, 2.4vw, 2.25rem); border-radius: var(--radius-lg); background: rgb(255 255 255 / .55); border: 1px solid var(--line-soft); text-decoration: none; transition: transform 500ms var(--ease), box-shadow 500ms var(--ease), background 500ms var(--ease); }
.strand-link::before { content: ""; position: absolute; left: 1.5rem; right: 1.5rem; top: -1px; height: 2px; border-radius: 2px; background: var(--strand); transform: scaleX(.18); transform-origin: left; transition: transform 700ms var(--ease); }
.strand-top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); }
.strand-verb { font-size: var(--fs-micro); font-weight: 650; letter-spacing: var(--tr-label); text-transform: uppercase; }
.strand-since { font-size: var(--fs-small); color: var(--ink-3); }
.strand-since em { font-size: 1.6rem; color: var(--gold-ink); margin-left: .2rem; }
.strand-glyph { width: 100%; height: auto; margin: var(--s-6) 0 var(--s-5); overflow: visible; }
.sg-strand { fill: none; stroke: var(--line); stroke-width: 1.6; stroke-linecap: round; }
.sg-strand.is-active { stroke: var(--strand); stroke-width: 3; }
.strand h3 { font-size: clamp(1.45rem, 1.2rem + .7vw, 1.9rem); }
.strand p { margin-top: var(--s-3); color: var(--ink-2); font-size: 1rem; }
.strand-more { margin-top: auto; padding-top: var(--s-5); display: inline-flex; gap: var(--s-2); font-size: var(--fs-small); font-weight: 600; }

/* ---------- Philosophy ---------- */
.manifesto { padding-block: var(--section); }
.manifesto .braid { opacity: 0; }
.manifesto .braid.is-ready { opacity: .75; }
.manifesto .braid { -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 38%, rgb(0 0 0 / .18) 62%); mask-image: linear-gradient(180deg, #000 0%, #000 38%, rgb(0 0 0 / .18) 62%); }
.statement { margin-top: var(--s-6); font-size: var(--fs-statement); line-height: .98; letter-spacing: -.045em; }
.statement span { display: block; }
.statement em { display: block; font-size: 1.04em; }
.principles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, max(17rem, 30% - 2rem)), 1fr)); gap: var(--s-7) clamp(1.5rem, 3vw, 3.5rem); margin-top: clamp(3.5rem, 7vw, 6.5rem); }
.principles li { padding-top: var(--s-5); border-top: 1px solid var(--line-night); }
.principle-index { display: block; font-family: var(--serif); font-style: italic; font-size: 1.5rem; line-height: 1; color: var(--gold); margin-bottom: var(--s-4); }
.principles h3 { font-size: clamp(1.3rem, 1.1rem + .55vw, 1.65rem); color: var(--on-night); }
.principles p { margin-top: var(--s-3); color: var(--on-night-2); font-size: 1rem; }

/* ---------- Selected work ---------- */
.work-rows { border-bottom: 1px solid var(--line); }
.work-row > a { position: relative; isolation: isolate; display: grid; grid-template-columns: 2.5rem 6.5rem minmax(0, 1.05fr) minmax(0, 1fr) 2.5rem; gap: clamp(1rem, 2.4vw, 2.5rem); align-items: center; padding-block: 1.6rem; border-top: 1px solid var(--line); text-decoration: none; }
.work-row > a::before { content: ""; position: absolute; inset: 0 -1.25rem; z-index: -1; border-radius: var(--radius-lg); background: var(--paper-2); opacity: 0; transform: scaleX(.97); transition: opacity 450ms var(--ease), transform 450ms var(--ease); }
.row-index { font-family: var(--serif); font-style: italic; font-size: 1.4rem; color: var(--gold-ink); }
.row-plate { display: block; aspect-ratio: 1; border-radius: 1.1rem; background: var(--night); overflow: hidden; }
.row-plate .emblem { width: 100%; height: 100%; }
.row-text { display: grid; gap: var(--s-2); }
.row-title { font-size: clamp(1.3rem, 1.05rem + .8vw, 1.95rem); font-weight: 500; letter-spacing: -.025em; line-height: 1.15; text-wrap: balance; }
.row-summary { color: var(--ink-2); font-size: 1rem; }
.row-go { justify-self: end; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px solid var(--line); transition: background var(--duration) var(--ease), color var(--duration) var(--ease), transform 450ms var(--ease), border-color var(--duration); }

/* ---------- Current research question ---------- */
.research-now { background: var(--paper-2); }
.stop-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 5.5rem); align-items: center; }
.stop-copy h2 { margin: var(--s-5) 0 var(--s-5); }
.stop-copy p:last-child { color: var(--ink-2); max-width: var(--measure); }
.stop-figure { display: grid; gap: var(--s-4); }
.stop-plate { padding: clamp(.75rem, 2vw, 1.5rem); border-radius: var(--radius-xl); background: var(--light); border: 1px solid var(--line-soft); box-shadow: 0 30px 60px -40px rgb(15 58 55 / .35); }
.stop-chart { width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.stop-chart[data-live] { cursor: ew-resize; }
.sc-grid { stroke: var(--line-soft); stroke-width: 1; }
.sc-axis { stroke: var(--line); stroke-width: 1; }
.sc-tick, .sc-label { font: 500 12px var(--font); fill: var(--ink-3); }
.sc-label { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.sc-dot { fill: var(--teal-accent); opacity: .5; transition: opacity 250ms var(--ease), fill 250ms var(--ease); }
.sc-dot.is-after { fill: var(--ink-3); opacity: .22; }
.sc-best { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.sc-best--all { stroke: var(--ink-3); stroke-width: 1.5; stroke-dasharray: 3 5; opacity: .6; }
.sc-best--kept { stroke: var(--teal); stroke-width: 3; }
.sc-hatch-line { stroke: rgb(134 101 47 / .22); stroke-width: 2; }
.sc-spent { opacity: 1; }
.sc-marker line { stroke: var(--gold-ink); stroke-width: 2; }
.sc-marker circle { fill: var(--gold); stroke: var(--light); stroke-width: 3; }
.sc-flag { font: 600 12px var(--font); letter-spacing: .12em; text-transform: uppercase; fill: var(--gold-ink); }
.stop-controls { display: grid; gap: var(--s-4); padding-inline: var(--s-2); }
.stop-range { display: grid; gap: var(--s-2); font-size: var(--fs-small); color: var(--ink-3); }
.stop-range[hidden] { display: none; }
.stop-range input { width: 100%; height: var(--tap); margin: 0; background: transparent; accent-color: var(--teal); cursor: pointer; }
.stop-readout { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.stop-readout div { padding-top: var(--s-3); border-top: 1px solid var(--line); }
.stop-readout dt { font-size: var(--fs-micro); font-weight: 600; letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--ink-3); }
.stop-readout dd { font-size: var(--fs-small); color: var(--ink-2); }
.stop-readout dd span { font-family: var(--serif); font-style: italic; font-size: clamp(1.7rem, 1.3rem + 1.2vw, 2.4rem); line-height: 1.1; color: var(--teal); font-variant-numeric: tabular-nums; }
.stop-figure figcaption { font-size: var(--fs-small); color: var(--ink-3); padding-inline: var(--s-2); }

/* ---------- Now ---------- */
.now-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: clamp(1rem, 2.5vw, 2rem); }
.now-card { padding: clamp(1.75rem, 3.5vw, 3rem); border-radius: var(--radius-xl); border: 1px solid var(--line-soft); background: rgb(255 255 255 / .5); }
.now-card--welcome { background: var(--paper-2); }
.now-card h2 { margin: var(--s-4) 0 var(--s-5); }
.now-list li, .welcome-list li { position: relative; padding: var(--s-3) 0 var(--s-3) 1.6rem; border-top: 1px solid var(--line-soft); color: var(--ink-2); }
.now-list li::before, .welcome-list li::before { content: ""; position: absolute; left: .15rem; top: 1.35rem; width: .45rem; height: .45rem; transform: rotate(45deg); background: var(--gold-ink); opacity: .75; }
.now-card .text-link { margin-top: var(--s-4); }

/* ---------- Contact ---------- */
.contact { padding-block: var(--section); }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 7rem); align-items: center; }
.contact h2 { margin-top: var(--s-5); font-size: var(--fs-statement); line-height: .98; letter-spacing: -.045em; }
.contact h2 em { display: block; }
.contact-intro { margin-top: var(--s-6); max-width: var(--hero-measure); color: var(--on-night-2); font-size: 1.1rem; }
.contact-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.contact-card { padding: clamp(1.75rem, 3.5vw, 3rem); border-radius: var(--radius-xl); background: linear-gradient(160deg, rgb(243 239 230 / .07), rgb(243 239 230 / .02)); border: 1px solid var(--line-night); box-shadow: inset 0 1px 0 rgb(255 255 255 / .06); }
.contact-email { display: inline-block; max-width: 100%; font-size: clamp(1.4rem, 1rem + 1.6vw, 2.35rem); font-weight: 500; letter-spacing: -.03em; overflow-wrap: anywhere; text-decoration: none; color: var(--on-night); }
.contact-email span { background: linear-gradient(var(--gold), var(--gold)) 0 100% / 100% 1px no-repeat; padding-bottom: .15em; transition: background-size 600ms var(--ease); }
.phones { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); margin: var(--s-6) 0; }
.phones dt { font-size: var(--fs-micro); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--on-night-3); margin-bottom: var(--s-1); }
.phones a { display: inline-flex; min-height: var(--tap); align-items: center; font-size: 1.1rem; text-decoration: none; color: var(--on-night); font-variant-numeric: tabular-nums; }
.contact-links { display: flex; flex-wrap: wrap; gap: var(--s-2); padding-top: var(--s-5); border-top: 1px solid var(--line-night); }
.contact-links a { display: inline-flex; align-items: center; gap: .4rem; min-height: var(--tap); padding: 0 1rem; border-radius: var(--pill); border: 1px solid var(--line-night); font-size: var(--fs-small); text-decoration: none; color: var(--on-night-2); transition: border-color var(--duration), color var(--duration), background var(--duration); }

/* ---------- Footer ---------- */
.site-footer { padding-block: var(--s-8) var(--s-7); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--s-7); align-items: end; }
.epigraph blockquote p { font-family: var(--serif); font-style: italic; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.5rem); line-height: 1.15; letter-spacing: -.01em; color: var(--ink); max-width: 22ch; }
.epigraph figcaption { margin-top: var(--s-4); font-size: var(--fs-small); color: var(--ink-3); }
.footer-meta { display: grid; justify-items: end; gap: var(--s-2); font-size: var(--fs-small); color: var(--ink-3); text-align: right; }

/* ---------- Inner pages ---------- */
.page-hero { min-height: min(92svh, 54rem); display: flex; align-items: flex-end; padding: calc(var(--header-h) + var(--s-9)) 0 clamp(3rem, 7vw, 5.5rem); }
.page-hero .braid { -webkit-mask-image: linear-gradient(100deg, rgb(0 0 0 / .25) 20%, #000 75%); mask-image: linear-gradient(100deg, rgb(0 0 0 / .25) 20%, #000 75%); }
.page-hero-inner { position: relative; }
.crumb { display: flex; gap: var(--s-3); font-size: var(--fs-small); color: var(--on-night-3); }
.crumb a { color: var(--on-night-2); text-decoration: none; }
.crumb a:hover { color: var(--on-night); }
.page-hero h1 { margin-top: var(--s-5); font-size: var(--fs-page); max-width: 11.5ch; line-height: .96; letter-spacing: -.05em; }
.page-hero h1 em { display: block; }
.page-hero .lede { margin-top: var(--s-6); max-width: 40rem; font-size: var(--fs-lede); line-height: 1.5; color: var(--on-night-2); }
.page-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-7); }
.page-chips a { display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 1rem; border-radius: var(--pill); border: 1px solid var(--line-night); font-size: var(--fs-small); color: var(--on-night-2); text-decoration: none; transition: border-color var(--duration), color var(--duration); }
.page-chips a:hover { border-color: var(--gold); color: var(--on-night); }
.progress-thread { position: fixed; left: 0; top: 0; bottom: 0; width: 3px; z-index: var(--header-layer); pointer-events: none; }
.progress-thread span { display: block; height: 100%; transform-origin: top; transform: scaleY(var(--progress, 0)); background: linear-gradient(var(--gold), var(--teal-accent)); }
.reading-layout { display: grid; grid-template-columns: var(--nav-width) minmax(0, 1fr); gap: clamp(2rem, 5vw, 6rem); padding-block: clamp(3.5rem, 7vw, 6.5rem) var(--section); }
.page-index { align-self: start; position: sticky; top: calc(var(--header-h) + var(--s-6)); }
.page-index ol { margin: var(--s-4) 0 var(--s-5); border-left: 1px solid var(--line); }
.page-index li a { position: relative; display: flex; gap: var(--s-3); padding: .55rem 0 .55rem 1rem; font-size: var(--fs-small); color: var(--ink-2); text-decoration: none; line-height: 1.35; transition: color var(--duration); }
.page-index li a span { font-family: var(--serif); font-style: italic; color: var(--ink-3); }
.page-index li a::before { content: ""; position: absolute; left: -1px; top: .4rem; bottom: .4rem; width: 2px; background: var(--gold-ink); transform: scaleY(0); transition: transform 400ms var(--ease); }
.page-index li a:hover, .page-index li a.is-active { color: var(--ink); }
.page-index li a.is-active::before { transform: scaleY(1); }
.reading-main { min-width: 0; }
.reading-section { scroll-margin-top: var(--anchor-space); }
.reading-section + .reading-section { margin-top: clamp(4.5rem, 8vw, 7.5rem); }
.reading-section > h2 { margin-bottom: clamp(2rem, 4vw, 3rem); font-size: clamp(2.2rem, 1.4rem + 2.6vw, 3.9rem); }
.section-note { max-width: var(--measure); margin-bottom: var(--s-6); color: var(--ink-2); }
.organisation { font-weight: 600; color: var(--ink); }
.record { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: var(--s-6); padding-block: var(--s-6); border-top: 1px solid var(--line); }
.record h3 { margin-bottom: var(--s-2); }
.record .organisation { margin-bottom: var(--s-3); }
.record p { color: var(--ink-2); }
.record .organisation { color: var(--ink); }
.record .text-link { margin-top: var(--s-3); }
.record-period { font-size: var(--fs-small); font-weight: 600; color: var(--gold-ink); letter-spacing: .01em; }
.record--compact { padding-block: var(--s-5); }
.record--compact h3 { font-size: var(--fs-lede); }
.record--compact p { font-size: var(--fs-small); }
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.chips li { padding: .3rem .8rem; border-radius: var(--pill); border: 1px solid var(--line); background: rgb(255 255 255 / .55); font-size: var(--fs-small); color: var(--ink-2); }
.endnote { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--line); font-size: var(--fs-small); color: var(--ink-3); }
.callout { position: relative; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; padding: clamp(1.75rem, 4vw, 3.5rem); border-radius: var(--radius-xl); }
.callout--paper { grid-template-columns: 1fr; background: var(--paper-2); border: 1px solid var(--line-soft); }
.callout h2 { font-size: clamp(2rem, 1.3rem + 2.2vw, 3.3rem); margin-bottom: var(--s-4); }
.callout p { color: var(--on-night-2); max-width: var(--measure); }
.callout--paper p { color: var(--ink-2); }
.callout .button--ink { margin-top: var(--s-5); }
.callout .text-link { margin-top: var(--s-4); }
.callout-art .emblem { width: 100%; max-width: 18rem; margin-inline: auto; }

/* Work */
.project { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(1.75rem, 4vw, 4.5rem); padding-top: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--line); }
.projects .project:first-child { border-top: 0; padding-top: 0; }
.project + .project { margin-top: clamp(3.5rem, 7vw, 6rem); }
.project:nth-child(even) .project-plate { order: 2; }
.project-plate { position: sticky; top: calc(var(--header-h) + var(--s-5)); align-self: start; aspect-ratio: 1; border-radius: var(--radius-xl); display: grid; place-items: center; background: radial-gradient(70% 60% at 50% 40%, #11403C 0%, var(--night) 70%); box-shadow: 0 40px 70px -45px rgb(10 40 38 / .8); }
.project-plate .emblem { width: 76%; height: auto; }
.project-plate figcaption { position: absolute; left: 1.4rem; right: 1.4rem; bottom: 1.1rem; display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); text-align: right; font-size: var(--fs-micro); letter-spacing: .08em; text-transform: uppercase; color: var(--on-night-3); }
.project-plate figcaption span:first-child { white-space: nowrap; font-family: var(--serif); font-style: italic; text-transform: none; letter-spacing: 0; font-size: .95rem; color: var(--gold); }
.kendi-canvas { position: absolute; inset: 12%; width: 76%; height: 76%; cursor: grab; touch-action: pan-y; }
.project-plate.has-canvas .emblem--kendi { opacity: 0; }
.project-body h2 { margin: var(--s-4) 0 var(--s-4); font-size: clamp(1.9rem, 1.3rem + 1.8vw, 3rem); letter-spacing: -.035em; line-height: 1.04; }
.project-summary { font-size: var(--fs-lede); line-height: 1.5; color: var(--ink); }
.project-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, max(13rem, 45% - 1rem)), 1fr)); gap: var(--s-5) var(--s-6); margin: var(--s-6) 0 var(--s-4); }
.project-facts > div { padding-top: var(--s-4); border-top: 1px solid var(--line); }
.project-facts dt { margin-bottom: var(--s-2); font-size: var(--fs-micro); font-weight: 650; letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--gold-ink); }
.project-facts dd { color: var(--ink-2); font-size: 1rem; }

/* Research */
.theme-grid, .ongoing-grid, .edu-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.ongoing-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.theme, .ongoing, .edu { padding: clamp(1.4rem, 2.4vw, 2rem); border-radius: var(--radius-lg); border: 1px solid var(--line-soft); background: rgb(255 255 255 / .55); }
.theme { --strand: var(--strand-teach); }
.theme:nth-child(2) { --strand: var(--strand-build); }
.theme:nth-child(3) { --strand: var(--strand-question); }
.theme-index { font-family: var(--serif); font-style: italic; font-size: 1.5rem; color: var(--gold-ink); }
.theme .strand-glyph { margin: var(--s-4) 0; }
.theme h3, .ongoing h3, .edu h3 { font-size: clamp(1.25rem, 1.1rem + .45vw, 1.55rem); }
.theme p, .ongoing p, .edu p { margin-top: var(--s-3); color: var(--ink-2); font-size: 1rem; }
.edu .organisation { margin-top: var(--s-2); }
.research-now--page { padding: clamp(1.5rem, 3.5vw, 3rem); border-radius: var(--radius-xl); }
.research-now--page .stop-grid { grid-template-columns: 1fr; }
.publication { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--s-6); padding-block: var(--s-6); border-top: 1px solid var(--line); }
.pub-year { font-family: var(--serif); font-style: italic; font-size: var(--fs-numeral); line-height: .9; color: var(--teal-accent); }
.publication h3 { margin: var(--s-3) 0; font-size: clamp(1.25rem, 1.05rem + .6vw, 1.7rem); }
.pub-authors { font-size: var(--fs-small); color: var(--ink-2); }
.pub-venue { margin-top: var(--s-2); font-size: var(--fs-small); color: var(--ink-3); }

/* Teaching */
.approach { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); }
.approach li { padding-top: var(--s-5); border-top: 2px solid var(--gold-ink); }
.approach-index { font-family: var(--serif); font-style: italic; font-size: var(--fs-numeral); line-height: .9; color: var(--gold-ink); opacity: .85; }
.approach h3 { margin: var(--s-4) 0 var(--s-3); font-size: clamp(1.3rem, 1.1rem + .5vw, 1.6rem); }
.approach p { color: var(--ink-2); font-size: 1rem; }
.pull-quote { margin-top: clamp(3rem, 6vw, 5rem); padding-left: clamp(1.25rem, 3vw, 2.5rem); border-left: 2px solid var(--gold); }
.pull-quote p { font-family: var(--serif); font-style: italic; font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3.3rem); line-height: 1.1; letter-spacing: -.015em; color: var(--teal); max-width: 22ch; }

/* Journey */
.timeline { position: relative; --spine: 10rem; }
.timeline::before, .timeline::after { content: ""; position: absolute; left: calc(var(--spine) + 1.5rem); top: .6rem; bottom: 0; width: 1px; background: var(--line); }
.timeline::after { width: 2px; margin-left: -.5px; background: linear-gradient(var(--gold), var(--teal-accent)); transform-origin: top; transform: scaleY(var(--draw, 1)); }
.tl-item { position: relative; display: grid; grid-template-columns: var(--spine) minmax(0, 1fr); gap: 3rem; padding-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.tl-item:last-child { padding-bottom: 0; }
.tl-node { position: absolute; z-index: 1; left: calc(var(--spine) + 1.5rem - 7px); top: .5rem; width: 15px; height: 15px; border-radius: 50%; background: var(--paper); border: 2px solid var(--gold-ink); transition: background 600ms var(--ease), box-shadow 600ms var(--ease); }
.tl-item.is-revealed .tl-node, :root:not([data-js]) .tl-node { background: var(--gold); box-shadow: 0 0 0 5px rgb(217 188 138 / .28); }
.tl-period { padding-top: .2rem; font-size: var(--fs-small); font-weight: 600; color: var(--gold-ink); text-align: right; }
.tl-body { min-width: 0; }
.tl-body h3 { font-size: clamp(1.35rem, 1.1rem + .7vw, 1.8rem); }
.tl-body .organisation { margin: var(--s-2) 0 var(--s-3); }
.tl-body > p { color: var(--ink-2); max-width: var(--measure); }
.bullets { margin-top: var(--s-4); display: grid; gap: var(--s-2); }
.bullets li { position: relative; padding-left: 1.4rem; color: var(--ink-2); font-size: 1rem; }
.bullets li::before { content: ""; position: absolute; left: 0; top: .78em; width: .7rem; height: 1px; background: var(--gold-ink); }
.progression { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); gap: var(--s-4); margin-top: var(--s-5); }
.progression li { padding-top: var(--s-3); border-top: 2px solid var(--gold); font-size: var(--fs-small); color: var(--ink-2); line-height: 1.45; }
.progression li:last-child { border-top-color: var(--teal-accent); }
.progression span { display: block; margin-bottom: var(--s-1); font-family: var(--serif); font-style: italic; font-size: 1.35rem; color: var(--gold-ink); }
.timeline--compact .tl-body h3 { font-size: var(--fs-lede); }
.timeline--compact .tl-body > p { font-size: var(--fs-small); }
.skill-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, max(18rem, 45% - 2rem)), 1fr)); gap: var(--s-6) var(--s-7); }
.skill h3 { font-size: var(--fs-lede); padding-top: var(--s-4); border-top: 1px solid var(--line); }

/* Neutral pages */
.neutral-page { min-height: 100svh; display: flex; align-items: center; padding-block: var(--s-9); }
.neutral-page .braid { -webkit-mask-image: linear-gradient(100deg, rgb(0 0 0 / .28) 25%, #000 70%); mask-image: linear-gradient(100deg, rgb(0 0 0 / .28) 25%, #000 70%); }
.neutral-inner h1 { margin: var(--s-5) 0; font-size: var(--fs-page); max-width: 11ch; line-height: .96; letter-spacing: -.05em; }
.neutral-inner h1 em { display: block; }
.neutral-inner p { max-width: var(--hero-measure); color: var(--on-night-2); }
.neutral-inner .text-link { margin-top: var(--s-5); }

/* ---------- Emblems (constructed art; colours for night plates) ---------- */
.emblem { overflow: visible; }
.em-faint { fill: none; stroke: rgb(243 239 230 / .16); stroke-width: 1.2; }
.em-node, .em-state { fill: #0F3A37; stroke: rgb(243 239 230 / .3); stroke-width: 1.4; }
.em-lit { fill: #173F3B; stroke: var(--gold); stroke-width: 2; }
.em-core { fill: var(--gold); }
.em-trace { fill: none; stroke: var(--gold); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.em-bar rect { fill: rgb(243 239 230 / .78); }
.em-bar circle { fill: var(--gold); }
.em-h-1 rect { fill: #7FB5A9; } .em-h-2 rect { fill: #95C1B6; } .em-h-3 rect { fill: #ABCCC2; } .em-h-4 rect { fill: #C4D3C4; } .em-h-5 rect { fill: #D8D2B8; } .em-h-6 rect { fill: #E2C99F; } .em-h-7 rect { fill: var(--gold); }
.em-bar { transition: translate 700ms var(--ease); }
/* Sorted order (the finished state): each person stands where their height belongs. */
.em-bar-1 { translate: 104px 0; } .em-bar-2 { translate: 0 0; } .em-bar-3 { translate: 104px 0; } .em-bar-4 { translate: -78px 0; } .em-bar-5 { translate: -26px 0; } .em-bar-6 { translate: 0 0; } .em-bar-7 { translate: -104px 0; }
.em-vessel { fill: rgb(217 188 138 / .12); stroke: var(--gold); stroke-width: 1.6; stroke-linejoin: round; }
.em-kendi .em-faint { stroke-dasharray: 2 4; }
.em-cloud { fill: none; stroke: rgb(243 239 230 / .55); stroke-width: 1.6; }
.em-post { stroke: rgb(243 239 230 / .45); stroke-width: 1.6; }
.em-uplink { stroke: rgb(243 239 230 / .28); stroke-width: 1; stroke-dasharray: 2 4; }
.em-node-dot { fill: var(--gold); }
.em-ripple { fill: none; stroke: var(--gold); stroke-width: 1.2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.em-threshold { stroke: #E7A96B; stroke-width: 1.2; stroke-dasharray: 6 5; opacity: .8; }
.em-wave-1 { fill: rgb(127 181 169 / .22); } .em-wave-2 { fill: rgb(127 181 169 / .32); } .em-wave-3 { fill: rgb(127 181 169 / .5); }
.em-emit { stroke: rgb(243 239 230 / .25); stroke-width: 1; stroke-dasharray: 2 3; }
.em-obs { fill: rgb(243 239 230 / .2); }
.em-obs-1, .em-obs-4 { fill: rgb(217 188 138 / .7); } .em-obs-2 { fill: rgb(127 181 169 / .6); } .em-obs-3 { fill: rgb(127 181 169 / .85); }
.em-shadow { fill: rgb(0 0 0 / .35); }
.em-orbit { fill: none; stroke: rgb(217 188 138 / .55); stroke-width: 1.3; stroke-dasharray: 1; }
.em-orbit-2 { stroke: rgb(127 181 169 / .45); }
.em-bead { fill: var(--gold); }
.em-bead-2 { fill: var(--mint); }
.em-sheen { opacity: .0; }

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .progress-thread span { animation: progress linear both; animation-timeline: scroll(root); }
  }
}
@keyframes progress { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* ---------- Hover and interaction (fine pointers) ---------- */
@media (hover: hover) and (pointer: fine) {
  .button, .row-go, .strand-link, .contact-links a { will-change: auto; }
  .button { transition: transform var(--duration) var(--ease), background var(--duration) var(--ease), border-color var(--duration) var(--ease), color var(--duration) var(--ease); }
  .button:hover { transform: translateY(var(--rise)); }
  .button--gold:hover { background: var(--champagne); }
  .button--ghost:hover { border-color: var(--gold); }
  .button--ink:hover { background: var(--night); }
  .button:hover .arrow, .text-link:hover .arrow { transform: translateX(3px); }
  .button:hover .arrow--down, .text-link:hover .arrow--down { transform: translateY(2px); }
  .text-link:hover .arrow--out { transform: translate(2px, -2px); }
  .text-link:hover .arrow--up { transform: translateY(-2px); }
  .text-link { transition: background-size 500ms var(--ease); }
  .text-link:hover { background-size: 0% 1px; background-position: 100% calc(50% + .8em); }
  .strand-link:hover { transform: translateY(-6px); background: var(--light); box-shadow: 0 30px 60px -40px rgb(15 58 55 / .45); }
  .strand-link:hover::before { transform: scaleX(1); }
  .work-row > a:hover::before { opacity: 1; transform: none; }
  .work-row > a:hover .row-go { background: var(--teal); border-color: var(--teal); color: var(--paper); transform: translateX(4px); }
  .contact-email:hover span { background-size: 0% 1px; background-position: 100% 100%; }
  .contact-links a:hover { border-color: var(--gold); color: var(--on-night); background: rgb(243 239 230 / .05); }
  .stop-chart[data-live]:hover .sc-marker circle { r: 9; }
}

/* ---------- Motion (only when motion is welcome) ---------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 420ms; animation-timing-function: var(--ease); }

  /* Opening choreography, CSS only; the page is complete underneath from the first paint. */
  .hero-eyebrow, .name-line, .native, .hero-question, .hero-lede, .hero .actions, .hero-foot,
  .page-hero .crumb, .page-hero h1, .page-hero .lede, .page-chips, .neutral-inner > * {
    animation: rise-in 1200ms var(--ease) both;
  }
  .hero-eyebrow { animation-delay: 120ms; }
  .name-line:nth-child(1) { animation-delay: 220ms; }
  .name-line:nth-child(2) { animation-delay: 360ms; }
  .native { animation-delay: 620ms; }
  .hero-question { animation-delay: 700ms; }
  .hero-lede { animation-delay: 800ms; }
  .hero .actions { animation-delay: 900ms; }
  .hero-foot { animation-delay: 1150ms; }
  .page-hero h1, .neutral-inner > :nth-child(2) { animation-delay: 140ms; }
  .page-hero .lede, .neutral-inner > :nth-child(3) { animation-delay: 300ms; }
  .page-chips, .neutral-inner > :nth-child(4) { animation-delay: 440ms; }
  .hero-name em { animation: shimmer 2600ms var(--ease-in-out) 1100ms both; }
  .arch { animation: unveil 1500ms var(--ease) 260ms both; }
  .hero-portrait::before { animation: frame-in 1800ms var(--ease) 700ms both; }
  .arch-light { animation: sweep 1800ms var(--ease-in-out) 1500ms both; }
  .hero-portrait figcaption { animation: rise-in 1000ms var(--ease) 1000ms both; }
  .live-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: pulse 2.8s var(--ease) infinite; }
  .cue-line::after { animation: cue 2.4s var(--ease-in-out) 1.6s infinite; }
  .menu-sheet:popover-open .menu-inner { animation: fade-in 420ms var(--ease) both; }
  .menu-sheet:popover-open .menu-nav a { animation: rise-in 700ms var(--ease) both; }
  .menu-nav a:nth-child(2) { animation-delay: 50ms; } .menu-nav a:nth-child(3) { animation-delay: 100ms; } .menu-nav a:nth-child(4) { animation-delay: 150ms; } .menu-nav a:nth-child(5) { animation-delay: 200ms; } .menu-nav a:nth-child(6) { animation-delay: 250ms; }

  /* Scroll reveals: script marks only below-the-fold elements; without script everything is simply visible. */
  .pre-reveal { opacity: 0; transform: translateY(26px); filter: blur(5px); }
  .is-revealed { transition: opacity var(--reveal) var(--ease), transform var(--reveal) var(--ease), filter 900ms var(--ease); transition-delay: calc(var(--d, 0) * 110ms); }
  [data-delay="1"] { --d: 1; } [data-delay="2"] { --d: 2; } [data-delay="3"] { --d: 3; }
  .timeline::after { transition: transform 200ms linear; }

  /* Emblems play once when they enter view, and again on hover. Paused until then. */
  [data-js] .emblem .em-trace { animation: draw 1700ms var(--ease-in-out) 250ms both paused; }
  [data-js] .emblem .em-lit { animation: light 500ms var(--ease) both paused; }
  [data-js] .emblem .em-step-0 { animation-delay: 250ms; } [data-js] .emblem .em-step-1 { animation-delay: 600ms; } [data-js] .emblem .em-step-2 { animation-delay: 950ms; } [data-js] .emblem .em-step-3 { animation-delay: 1300ms; } [data-js] .emblem .em-step-4 { animation-delay: 1650ms; }
  [data-js] .emblem .em-bar { animation: sort 1100ms var(--ease-in-out) both paused; }
  [data-js] .emblem .em-bar-2 { animation-delay: 120ms; } [data-js] .emblem .em-bar-3 { animation-delay: 240ms; } [data-js] .emblem .em-bar-4 { animation-delay: 360ms; } [data-js] .emblem .em-bar-5 { animation-delay: 480ms; } [data-js] .emblem .em-bar-6 { animation-delay: 600ms; } [data-js] .emblem .em-bar-7 { animation-delay: 720ms; }
  [data-js] .emblem .em-vessel { stroke-dasharray: 1; animation: draw 2200ms var(--ease-in-out) 200ms both paused; }
  [data-js] .emblem .em-waves { animation: drift 9s linear infinite paused; }
  [data-js] .emblem .em-wave-2 { animation: drift 7s linear infinite reverse paused; }
  [data-js] .emblem .em-ripple { animation: ripple 3.2s var(--ease) infinite paused; }
  [data-js] .emblem .em-sensor-2 .em-ripple { animation-delay: 1s; } [data-js] .emblem .em-sensor-3 .em-ripple { animation-delay: 2s; }
  [data-js] .emblem .em-sheen { animation: sheen 2400ms var(--ease-in-out) 400ms both paused; }
  [data-js] .emblem .em-orbit-1 { animation: orbit-in 1600ms var(--ease) both paused; }
  [data-js] .emblem .em-orbit-2 { animation: orbit-in 1600ms var(--ease) 200ms both paused; }
  [data-js] .emblem.is-in *, [data-js] .emblem.is-in { animation-play-state: running !important; }
  [data-js] .emblem.em-replay * { animation: none !important; }
  .strand-link:hover .sg-strand.is-active { animation: draw 1100ms var(--ease-in-out) both; }
  .strand-link .sg-strand.is-active { stroke-dasharray: 1; }
}

@keyframes rise-in { from { opacity: 0; transform: translateY(28px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes unveil { from { clip-path: inset(100% 0 0 0); transform: scale(1.06); } to { clip-path: inset(0 0 0 0); transform: none; } }
@keyframes frame-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes sweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@keyframes pulse { 0% { transform: scale(1); opacity: .7; } 70%, 100% { transform: scale(3.2); opacity: 0; } }
@keyframes cue { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(260%); } }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes light { from { fill: #0F3A37; stroke: rgb(243 239 230 / .3); } to { fill: #173F3B; stroke: var(--gold); } }
@keyframes sort { 0% { translate: 0 0; } 45% { translate: calc(var(--dx) * .5) -22px; } 100% { translate: var(--dx) 0; } }
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(120px); } }
@keyframes ripple { 0% { opacity: .9; transform: scale(.6); } 80%, 100% { opacity: 0; transform: scale(3); } }
@keyframes sheen { from { opacity: 0; transform: translateX(-40px); } 30% { opacity: 1; } to { opacity: 0; transform: translateX(170px); } }
@keyframes orbit-in { from { opacity: 0; stroke-dashoffset: 1; } to { opacity: 1; stroke-dashoffset: 0; } }
.em-bar-1 { --dx: 104px; } .em-bar-2 { --dx: 0px; } .em-bar-3 { --dx: 104px; } .em-bar-4 { --dx: -78px; } .em-bar-5 { --dx: -26px; } .em-bar-6 { --dx: 0px; } .em-bar-7 { --dx: -104px; }

/* ---------- Responsive ---------- */
@media (max-width: 79.99rem) {
  .work-row > a { grid-template-columns: 2.25rem 5.5rem minmax(0, 1fr) 2.5rem; }
  .row-summary { grid-column: 3; grid-row: 2; margin-top: calc(var(--s-3) * -1); }
  .row-go { grid-column: 4; grid-row: 1 / span 2; }
  .row-plate { grid-row: 1 / span 2; }
}
@media (max-width: 63.99rem) {
  .site-nav { display: none; }
  .menu-toggle { display: inline-flex; }
  .identity-name { display: inline; }
  .hero-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr); gap: var(--s-6); }
  .section-head { grid-template-columns: 1fr; align-items: start; }
  .thread .section-head > :first-child { position: static; }
  .strands { grid-template-columns: 1fr; }
  .milestones { display: grid; grid-template-columns: repeat(4, auto); column-gap: var(--s-6); }
  .strand-link { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); column-gap: var(--s-6); }
  .strand-top, .strand-glyph { grid-column: 1; }
  .strand h3, .strand p, .strand-more { grid-column: 2; }
  .strand h3 { grid-row: 1; }
  .strand p { grid-row: 2 / span 2; }
  .strand-glyph { grid-row: 2; margin: var(--s-4) 0 0; }
  .strand-more { grid-row: 4; }
  .principles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stop-grid { grid-template-columns: 1fr; }
  .reading-layout { grid-template-columns: 1fr; }
  .page-index { display: none; }
  .project { grid-template-columns: 1fr; }
  .project:nth-child(even) .project-plate { order: 0; }
  .project-plate { position: relative; top: auto; max-width: 30rem; width: 100%; }
  .theme-grid, .edu-grid { grid-template-columns: 1fr; }
  .approach { grid-template-columns: 1fr; }
  .contact-grid, .footer-grid { grid-template-columns: 1fr; }
  .footer-meta { justify-items: start; text-align: left; }
}
@supports not selector(:popover-open) {
  @media (max-width: 63.99rem) {
    .site-header { position: absolute; }
    .header-bar { flex-wrap: wrap; border-radius: var(--radius-lg); }
    .site-nav { display: flex; flex-wrap: wrap; }
    .menu-toggle { display: none; }
  }
}
@media (max-width: 44.99rem) {
  :root { --header-h: 4.25rem; }
  body { font-size: 1rem; }
  .site-header { padding-top: .6rem; }
  .identity-name { display: none; }
  .hero { min-height: auto; padding-top: calc(var(--header-h) + var(--s-7)); gap: var(--s-6); }
  .hero .braid { -webkit-mask-image: none; mask-image: none; }
  .manifesto .braid { -webkit-mask-image: none; mask-image: none; }
  .hero-grid { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .hero-copy { display: contents; }
  .hero-eyebrow { order: 1; }
  .hero-name { order: 2; }
  .native { order: 3; }
  .hero-portrait { order: 4; justify-self: auto; align-self: center; width: min(80vw, 21rem); margin: var(--s-7) auto var(--s-4); }
  .hero-question { order: 5; }
  .hero-lede { order: 6; }
  .hero .actions { order: 7; }
  .hero-eyebrow span + span::before { margin-inline: .6rem; }
  .hero .actions .button { flex: 1 1 auto; }
  .hero-foot { flex-direction: column; align-items: stretch; }
  .milestones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
  .scroll-cue { display: none; }
  .strand-link { display: flex; }
  .principles { grid-template-columns: 1fr; gap: var(--s-6); }
  .work-row > a { grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--s-2) var(--s-4); padding-block: 1.3rem; }
  .work-row > a::before { inset: 0 -.75rem; }
  .row-index { display: none; }
  .row-plate { grid-row: 1 / span 2; grid-column: 1; }
  .row-text { grid-column: 2; }
  .row-summary { grid-column: 1 / -1; grid-row: 3; margin-top: var(--s-2); font-size: .95rem; }
  .row-go { display: none; }
  .stop-readout { gap: var(--s-3); }
  .sc-tick, .sc-flag { font-size: 22px; }
  .sc-label { font-size: 17px; }
  .sc-dot { r: 3.6; }
  .sc-best--kept { stroke-width: 4.5; }
  .stop-plate { padding: .6rem .4rem .9rem; border-radius: var(--radius-lg); }
  .stop-readout dt { letter-spacing: .08em; }
  .now-grid { grid-template-columns: 1fr; }
  .phones { grid-template-columns: 1fr; gap: var(--s-2); }
  .page-hero { min-height: auto; padding-top: calc(var(--header-h) + var(--s-8)); }
  .page-hero .braid { -webkit-mask-image: linear-gradient(180deg, #000 0%, rgb(0 0 0 / .3) 60%); mask-image: linear-gradient(180deg, #000 0%, rgb(0 0 0 / .3) 60%); }
  .reading-layout { padding-top: var(--s-8); }
  .record, .publication { grid-template-columns: 1fr; gap: var(--s-2); }
  .pub-year { font-size: 2.6rem; }
  .project-facts { grid-template-columns: 1fr; gap: var(--s-4); }
  .ongoing-grid, .skill-grid { grid-template-columns: 1fr; }
  .callout { grid-template-columns: 1fr; }
  .callout-art .emblem { max-width: 12rem; }
  .timeline { --spine: 0rem; padding-left: 1.75rem; }
  .timeline::before, .timeline::after { left: .45rem; }
  .tl-item { grid-template-columns: 1fr; gap: var(--s-2); }
  .tl-node { left: calc(-1.75rem + .45rem - 7px); top: .3rem; }
  .tl-period { text-align: left; padding-top: 0; }
  .progression { grid-template-columns: 1fr; gap: var(--s-3); }
  .contact-actions .button { flex: 1 1 auto; }
}
@media (max-width: 22.5rem) {
  .hero-eyebrow { font-size: .68rem; letter-spacing: .12em; }
  .milestones { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 45rem) and (max-height: 44rem) {
  .hero { min-height: auto; }
}

/* ---------- Narrow reading columns (container queries; after the component rules so they win) ----------
   Work: the plate sits beside the text only when the reading column is wide enough. */
.projects, .reading-main { container-type: inline-size; }
@container (max-width: 46rem) {
  .project { grid-template-columns: 1fr; }
  .project:nth-child(even) .project-plate { order: 0; }
  .project-plate { position: relative; top: auto; max-width: 30rem; width: 100%; }
  .publication, .record { grid-template-columns: 1fr; gap: var(--s-2); }
  .timeline { --spine: 0rem; padding-left: 1.75rem; }
  .timeline::before, .timeline::after { left: .45rem; }
  .tl-item { grid-template-columns: 1fr; gap: var(--s-2); }
  .tl-node { left: calc(-1.75rem + .45rem - 7px); top: .3rem; }
  .tl-period { text-align: left; padding-top: 0; }
  .callout { grid-template-columns: 1fr; }
  .stop-readout { grid-template-columns: 1fr; }
}

/* ---------- Large and ultra-wide screens ----------
   Beyond 1800px the whole composition scales with the screen, bounded by its height so a 21:9
   display still sees the complete opening. Night bands, the braid and the grain are already
   full-bleed; the reading column widens only a little, so lines stay comfortable. */
@media (min-width: 112.5rem) {
  html { font-size: clamp(100%, min(.86vw, 1.55vh), 137.5%); }
  :root { --content: 90rem; }
  .hero-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, .8fr); }
  .hero-portrait { width: min(100%, 27rem); }
}
@media (min-width: 150rem) {
  :root { --content: 96rem; --gutter: 6rem; }
  .hero-glow { background:
    radial-gradient(70rem 44rem at 80% 12%, rgb(127 181 169 / .2), transparent 62%),
    radial-gradient(64rem 40rem at 6% 96%, rgb(217 188 138 / .16), transparent 62%),
    linear-gradient(180deg, #0A2826 0%, #0B2D2A 60%, #0A2826 100%); }
}
@media (min-width: 112.5rem) and (min-aspect-ratio: 2 / 1) {
  /* 21:9 and wider: a shorter, broader opening. */
  .hero { min-height: 100svh; }
  .hero-name { font-size: clamp(6rem, 17vh, 11rem); }
  .page-hero { min-height: 88svh; }
}

/* ---------- Accessibility preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 0s !important; scroll-behavior: auto !important; }
  .live-dot::after, .cue-line::after, .arch-light { display: none; }
}
@media (prefers-contrast: more) {
  :root { --ink-2: var(--ink); --ink-3: var(--ink); --line: var(--ink); --on-night-2: var(--on-night); --on-night-3: var(--on-night); --line-night: rgb(243 239 230 / .6); }
  a { text-decoration-thickness: var(--focus-width); }
  .grain, .braid { display: none; }
  .header-bar { background: var(--night); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (forced-colors: active) {
  .night, .header-bar, .menu-sheet, .button, .project-plate, .row-plate, .contact-card, .strand-link, .now-card, .stop-plate, .callout { background: Canvas; color: CanvasText; border: 1px solid CanvasText; forced-color-adjust: none; }
  .night *, .header-bar *, .menu-sheet * { color: CanvasText; }
  a, .night a, .contact-email { color: LinkText; }
  .hero-name em { background: none; color: CanvasText; }
  .braid, .grain, .hero-glow, .kendi-canvas, .arch-light, .progress-thread, .hero-portrait::before { display: none; }
  .emblem * { stroke: CanvasText; }
  .monogram { background: CanvasText; color: Canvas; }
  a:focus-visible, button:focus-visible, input:focus-visible { outline-color: Highlight; }
}

/* ---------- Print ---------- */
@media print {
  @page { size: A4; margin: var(--print-gutter); }
  html, body, .night, .research-now, .now-card, .callout { background: white !important; color: black; }
  body { font-size: var(--print-text); }
  * { color: black !important; box-shadow: none !important; text-shadow: none !important; }
  .site-header, .menu-sheet, .skip, .braid, .grain, .hero-glow, .page-index, .actions, .hero-portrait, .hero-foot .scroll-cue, .progress-thread, .page-chips, .stop-figure, .project-plate, .row-plate, .callout-art, .contact-actions, .contact-links, .site-footer .text-link, .strand-glyph { display: none !important; }
  .hero-name em { background: none !important; }
  .container { width: 100%; }
  .hero, .page-hero, .section, .contact, .manifesto { min-height: 0; padding-block: var(--s-5); }
  .hero-grid, .section-head, .strands, .principles, .contact-grid, .reading-layout, .project, .now-grid, .stop-grid, .footer-grid, .theme-grid, .edu-grid, .approach { display: block; }
  .hero-name, .page-hero h1, .neutral-inner h1 { font-size: var(--print-heading); }
  .statement, .contact h2 { font-size: 18pt; }
  h2 { font-size: 16pt; break-after: avoid; }
  h3 { font-size: 12pt; break-after: avoid; }
  p, li { orphans: 3; widows: 3; }
  .pre-reveal { opacity: 1 !important; transform: none !important; filter: none !important; }
  .work-row > a { display: block; }
}