/* ============================================================
   Aaron Z Wang — portfolio
   Two themes. Variable NAMES stay constant across both so that
   every page's markup works unchanged; only the VALUES swap.
     --ink      page ground        --bone   headings
     --ink-2    raised surface     --mist   body text
     --ink-3    deeper surface     --mist-dim  quiet text
     --amber    primary accent     --ice    secondary accent
   Dark  = unlit real-time scene + Golf-orange (from Verlet Voyage)
   Light = paper + International Klein Blue
   ============================================================ */

:root,
[data-theme="light"]{
  --ink:        #FAFAF8;
  --ink-2:      #F1F1EE;
  --ink-3:      #E7E7E3;
  --bone:       #0E1116;
  --mist:       #3B424B;
  --mist-dim:   #656C75;
  --amber:      #002FA7;   /* International Klein Blue */
  --ice:        #C2410C;   /* warm counterpoint */
  --line:       rgba(14,17,22,.16);
  --line-soft:  rgba(14,17,22,.07);
  --hero-veil-1: rgba(250,250,248,.35);
  --hero-veil-2: rgba(250,250,248,.05);
  --hero-veil-3: rgba(250,250,248,.96);
  --hero-glow:  rgba(0,47,167,.09);
  --shadow:     0 1px 2px rgba(14,17,22,.05);
  color-scheme: light;
}

[data-theme="dark"]{
  --ink:        #0B1013;
  --ink-2:      #111A1E;
  --ink-3:      #17232A;
  --bone:       #F2F5F3;
  --mist:       #BCCAC8;
  --mist-dim:   #7B8C8F;
  --amber:      #E8823C;
  --ice:        #7FB3C8;
  --line:       rgba(188,202,200,.14);
  --line-soft:  rgba(188,202,200,.07);
  --hero-veil-1: rgba(11,16,19,.55);
  --hero-veil-2: rgba(11,16,19,.10);
  --hero-veil-3: rgba(11,16,19,.95);
  --hero-glow:  rgba(232,130,60,.10);
  --shadow:     none;
  color-scheme: dark;
}

:root{
  /* Headings & UI: Libre Franklin — a Franklin Gothic revival. Editorial and
     plain-spoken; deliberately not a decorative display face.
     Text: EB Garamond — set large, for long-form reading.
     Mono: reserved for technical appendices and code. */
  --display: "Libre Franklin", "Helvetica Neue", Arial, sans-serif;
  --body:    "EB Garamond", Georgia, serif;
  --ui:      "Libre Franklin", "Helvetica Neue", Arial, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, monospace;
  --gutter: clamp(20px, 5vw, 72px);
  --maxw: 1320px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0; background:var(--ink); color:var(--mist);
  font-family:var(--body); font-size:clamp(18px,1.18vw,20px); line-height:1.62;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  transition:background .3s ease, color .3s ease;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
::selection{ background:var(--amber); color:var(--ink); }

/* ---------- type ---------- */
.display{ font-family:var(--display); font-weight:700; color:var(--bone); line-height:.98; letter-spacing:-.035em; }
.eyebrow{ font-family:var(--ui); font-weight:500; font-size:.86rem; letter-spacing:.005em; color:var(--mist-dim); margin:0 0 1.2em; }
.eyebrow .dot{ display:none; }
h1,h2,h3,h4{ font-family:var(--display); color:var(--bone); font-weight:600; letter-spacing:-.025em; }
h2{ font-size:clamp(1.9rem,3.6vw,3rem); line-height:1.02; margin:0 0 .6em; }
h3{ font-size:clamp(1.15rem,1.7vw,1.5rem); line-height:1.15; margin:0 0 .5em; }
h4{ font-size:1rem; margin:0 0 .4em; }
p{ margin:0 0 1.1em; } p:last-child{ margin-bottom:0; }
strong{ color:var(--bone); font-weight:600; }
.lede{ font-size:clamp(1.15rem,1.6vw,1.42rem); line-height:1.5; color:var(--bone); }

.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter); }
.section{ padding-block:clamp(72px,10vw,150px); }

/* ---------- nav ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:80;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:20px var(--gutter);
  transition:padding .3s ease, background .3s ease;
  background:linear-gradient(180deg, var(--hero-veil-3), transparent);
  transition:background .3s ease;
}
.nav.solid{ background:var(--ink); border-bottom:1px solid var(--line-soft); padding-block:12px; }
.nav__mark{ font-family:var(--display); font-weight:700; color:var(--bone); text-decoration:none;
  font-size:1.02rem; letter-spacing:-.03em; display:inline-block; white-space:nowrap; }
.mark__accent{ color:var(--amber); }


/* scroll progress, hairline, under the bar */
.nav__progress{ position:absolute; left:0; bottom:0; height:1.5px; width:0;
  background:var(--amber); transition:width .12s linear; z-index:2; }
.nav__links{ display:flex; align-items:center; gap:clamp(12px,1.8vw,26px); }
.nav a.nav__link{ font-family:var(--ui); font-weight:500; font-size:.92rem; letter-spacing:.005em; text-transform:none; color:var(--mist); text-decoration:none; padding:6px 0; position:relative; }
.nav a.nav__link::after{ content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--amber); transition:right .3s ease; }
.nav a.nav__link:hover::after, .nav a.nav__link[aria-current="page"]::after{ right:0; }
.nav a.nav__link{ transition:color .22s ease, transform .22s cubic-bezier(.2,.7,.3,1); }
.nav a.nav__link:hover{ color:var(--bone); transform:translateY(-1px); }
.nav a.nav__link[aria-current="page"]{ color:var(--bone); }

/* theme toggle */
.theme-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; flex:0 0 34px; cursor:pointer;
  background:transparent; border:1px solid var(--line); border-radius:50%;
  color:var(--bone); transition:.22s ease; padding:0;
}
.theme-btn:hover{ border-color:var(--amber); color:var(--amber); }
.theme-btn svg{ width:15px; height:15px; }
.theme-btn .i-sun{ display:none; }
[data-theme="dark"] .theme-btn .i-sun{ display:block; }
[data-theme="dark"] .theme-btn .i-moon{ display:none; }

.nav__toggle{ display:none; }
@media (max-width:900px){
  .nav__toggle{ display:block; background:none; border:0; color:var(--bone); font-family:var(--ui); font-weight:500; font-size:.92rem; letter-spacing:.005em; padding:8px 4px; text-transform:none; cursor:pointer; }
  .nav__links{ position:fixed; inset:0; background:var(--ink); flex-direction:column; align-items:flex-start; justify-content:center; gap:6px; padding:var(--gutter); transform:translateY(-100%); visibility:hidden; transition:transform .38s cubic-bezier(.7,0,.2,1), visibility 0s linear .38s; z-index:90; }
  .nav__links.open{ transform:translateY(0); visibility:visible; transition:transform .38s cubic-bezier(.7,0,.2,1), visibility 0s; }
  .nav a.nav__link{ font-size:1.5rem; font-family:var(--display); letter-spacing:-.02em; text-transform:none; }
  .nav__close{ position:absolute; top:18px; right:var(--gutter); background:none; border:1px solid var(--line); color:var(--bone); font-family:var(--mono); font-size:.8rem; padding:8px 12px; cursor:pointer; }
  .nav__right{ display:flex; align-items:center; gap:10px; }
  /* the bar's own controls stay above the open menu, so it can be closed where it was opened */
  .nav__mark, .nav__toggle, .theme-btn{ position:relative; z-index:95; }
}
.nav__right{ display:flex; align-items:center; gap:12px; }

/* ---------- hero ---------- */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; }
.hero__orgs{ margin-top:clamp(28px,4vw,44px); padding-top:18px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:8px 28px; font-family:var(--ui); font-size:.8rem; letter-spacing:.01em; color:var(--mist-dim); }
.hero__orgs b{ color:var(--bone); font-weight:500; }
#field{ position:absolute; inset:0; width:100%; height:100%; }
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, var(--hero-veil-1) 0%, var(--hero-veil-2) 40%, var(--hero-veil-3) 100%);
}
.hero__inner{ position:relative; z-index:2; width:100%; padding-bottom:clamp(48px,8vh,110px); }
.hero__name{ font-size:clamp(3.2rem,12vw,10.5rem); margin:0; }
.hero__name em{ font-style:normal; color:var(--amber); }
.hero__thesis{ max-width:46ch; margin-top:clamp(20px,3vw,34px); font-size:clamp(1.05rem,1.5vw,1.35rem); line-height:1.5; color:var(--bone); }
.hero__meta{ display:flex; flex-wrap:wrap; gap:8px 26px; margin-top:26px; font-family:var(--ui); font-size:.86rem; letter-spacing:.005em; text-transform:none; color:var(--mist-dim); }
.hero__meta a{ color:inherit; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.3em; text-decoration-color:var(--line); transition:color .2s ease, text-decoration-color .2s ease; }
.hero__meta a:hover{ color:var(--amber); text-decoration-color:var(--amber); }
.hero__hint{ position:absolute; right:var(--gutter); top:clamp(96px,14vh,140px); z-index:2; font-family:var(--ui); font-size:.8rem; letter-spacing:.005em; text-transform:none; color:var(--mist-dim); text-align:right; max-width:30ch; line-height:1.6; }
@media (max-width:900px){ .hero__hint{ display:none; } }

/* ---------- facts ---------- */
.facts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); border-top:1px solid var(--line); }
.fact{ padding:26px 20px 30px 0; border-right:1px solid var(--line-soft); }
.fact:last-child{ border-right:0; }
.fact dt{ font-family:var(--ui); font-size:.8rem; letter-spacing:.005em; text-transform:none; color:var(--mist-dim); margin-bottom:10px; }
.fact dd{ margin:0; font-family:var(--display); font-size:1.05rem; color:var(--bone); line-height:1.25; }
@media (max-width:640px){ .fact{ border-right:0; border-bottom:1px solid var(--line-soft); } }

.cols{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(28px,6vw,90px); }
@media (max-width:880px){ .cols{ grid-template-columns:1fr; } }

/* ---------- lens filter ---------- */
.lenses{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:clamp(22px,3vw,36px); }
.lens{
  font-family:var(--ui); font-weight:500; font-size:.92rem; letter-spacing:.005em;
  color:var(--mist-dim); background:transparent; border:0;
  padding:6px 0; margin-right:12px; cursor:pointer; transition:color .2s ease;
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.35em; text-decoration-color:transparent;
}
.lens:hover{ color:var(--bone); }
.lens[aria-pressed="true"]{ color:var(--bone); text-decoration-color:var(--amber); }
.lens__frame{
  max-width:60ch; margin:0 0 clamp(26px,3.5vw,44px);
  font-size:clamp(1rem,1.35vw,1.2rem); line-height:1.5; color:var(--bone);
  min-height:3em;
}
.lens__count{ font-family:var(--ui); font-size:.8rem; letter-spacing:.005em; text-transform:none; color:var(--mist-dim); margin-left:auto; align-self:center; }

/* ---------- work index ---------- */
.index{ border-top:1px solid var(--line); }
.row{
  display:grid; grid-template-columns:7rem minmax(0,1.5fr) minmax(0,1.3fr) 8.5rem;
  gap:clamp(12px,2.5vw,36px); align-items:baseline;
  padding:clamp(22px,2.6vw,34px) 0; border-bottom:1px solid var(--line);
  text-decoration:none; color:inherit; position:relative; transition:color .25s ease;
}
.row:hover, .row:focus-visible{ color:var(--bone); outline:none; }
.row::before{ content:""; position:absolute; left:calc(var(--gutter) * -1); right:calc(var(--gutter) * -1); top:0; bottom:0; background:var(--ink-2); opacity:0; transition:opacity .25s ease; z-index:-1; }
.row:hover::before, .row:focus-visible::before{ opacity:1; }
.row[hidden]{ display:none; }
.row__year{ font-family:var(--ui); font-size:.8rem; letter-spacing:.01em; color:var(--mist-dim); }
.row__title{ font-family:var(--display); font-size:clamp(1.3rem,2.6vw,2.2rem); color:var(--bone); line-height:1.02; letter-spacing:-.02em; }
.row__title .soon{ font-family:var(--mono); font-size:.55em; letter-spacing:.01em; color:var(--amber); vertical-align:middle; margin-left:.6em; }
.row__note{ font-size:.95rem; color:var(--mist); }
.row__tag{ font-family:var(--ui); font-size:.8rem; letter-spacing:.005em; text-transform:none; color:var(--mist-dim); text-align:right; }
@media (max-width:880px){
  .row{ grid-template-columns:4rem 1fr; row-gap:8px; }
  .row__note, .row__tag{ grid-column:2; }
  .row__tag{ text-align:left; }
}

/* ---------- project page ---------- */
.phero{ padding-top:clamp(120px,16vh,190px); }
.phero__title{ font-size:clamp(2.6rem,8vw,6.4rem); margin:0 0 .25em; }
.phero__sub{ max-width:52ch; font-size:clamp(1.05rem,1.5vw,1.3rem); line-height:1.48; color:var(--bone); }
.phero__plate{ margin:clamp(34px,5vw,64px) 0 0; border:1px solid var(--line); overflow:hidden; background:var(--ink-2); }
.phero__plate img{ width:100%; }

/* what I did: three hard lines under the claim */
.did{ list-style:none; margin:0 0 1.4em; padding:0; max-width:60ch; }
.did li{ position:relative; padding:5px 0 5px 20px; font-family:var(--ui); font-size:.84rem; line-height:1.45; color:var(--bone); border-top:1px solid var(--line-soft); }
.did li:last-child{ border-bottom:1px solid var(--line-soft); }
.did li::before{ content:""; position:absolute; left:0; top:1em; width:10px; height:1px; background:var(--amber); }

/* TL;DR strip */
.tldr{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-top:clamp(34px,5vw,60px); padding-block:clamp(24px,3vw,36px); }
.tldr__claim{ font-family:var(--display); font-size:clamp(1.2rem,2.2vw,1.8rem); color:var(--bone); line-height:1.2; letter-spacing:-.02em; max-width:34ch; margin:0 0 1.2em; }
.credits{ display:grid; grid-template-columns:repeat(auto-fit,minmax(155px,1fr)); gap:22px 30px; }
.credits div h4{ font-family:var(--ui); font-size:.8rem; letter-spacing:.005em; text-transform:none; color:var(--mist-dim); font-weight:400; margin-bottom:9px; }
.credits div p{ margin:0; color:var(--bone); font-size:.95rem; line-height:1.5; }

.layout{ display:grid; grid-template-columns:180px minmax(0,1fr); gap:clamp(24px,5vw,80px); align-items:start; }
@media (max-width:980px){ .layout{ grid-template-columns:1fr; } .rail{ display:none; } }
.rail{ position:sticky; top:110px; }
.rail ol{ list-style:none; margin:0; padding:0; }
.rail a{ display:block; padding:7px 0 7px 16px; text-decoration:none; font-family:var(--ui); font-size:.8rem; letter-spacing:.005em; text-transform:none; color:var(--mist-dim); border-left:1px solid var(--line); transition:.22s ease; }
.rail a:hover{ color:var(--mist); }
.rail a.active{ color:var(--bone); border-left-color:var(--amber); }

.block{ padding-block:clamp(44px,6vw,86px); border-top:1px solid var(--line); }
.block:first-child{ border-top:0; padding-top:0; }
.block__num{ font-family:var(--ui); font-weight:500; font-size:.86rem; letter-spacing:.005em; color:var(--mist-dim); display:block; margin-bottom:14px; }
.prose{ max-width:68ch; }
.prose h3{ margin-top:2.2em; } .prose h3:first-child{ margin-top:0; }
.prose ul{ padding-left:1.1em; margin:0 0 1.2em; }
.prose li{ margin-bottom:.5em; }
.prose li::marker{ color:var(--amber); }

/* collapsible deep dive */
details.deep{ border:1px solid var(--line); margin:2em 0 0; background:var(--ink-2); }
details.deep > summary{
  cursor:pointer; list-style:none; padding:16px 20px;
  font-family:var(--ui); font-size:.8rem; letter-spacing:.005em; text-transform:none;
  color:var(--bone); display:flex; justify-content:space-between; align-items:center; gap:12px;
}
details.deep > summary::-webkit-details-marker{ display:none; }
details.deep > summary::after{ content:"+"; color:var(--amber); font-size:1.1rem; line-height:1; }
details.deep[open] > summary::after{ content:"–"; }
details.deep > summary:hover{ color:var(--amber); }
details.deep .deep__body{ padding:4px 20px 26px; }

.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); margin:2em 0; }
.card{ background:var(--ink); padding:26px 24px; }
.card h4{ color:var(--bone); margin-bottom:.6em; }
.card p{ font-size:.94rem; margin:0; }

.figure{ margin:2.4em 0; }
.figure img{ width:100%; border:1px solid var(--line); }
.figure figcaption{ font-family:var(--ui); font-size:.8rem; letter-spacing:.01em; color:var(--mist-dim); margin-top:12px; line-height:1.7; }

/* media placeholder — marks a slot Aaron still needs to fill */
.slot{
  border:1px dashed var(--line); background:var(--ink-2);
  padding:clamp(28px,5vw,54px) 24px; text-align:center; margin:2.2em 0;
  font-family:var(--ui); font-size:.8rem; letter-spacing:.005em; text-transform:none;
  color:var(--mist-dim); line-height:1.9;
}
.slot b{ display:block; color:var(--amber); font-weight:400; margin-bottom:6px; }

.embed{ position:relative; padding-bottom:56.25%; height:0; margin:2.2em 0; border:1px solid var(--line); background:var(--ink-2); }
.embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.embed__alt{ font-family:var(--ui); font-size:.86rem; letter-spacing:.005em; text-transform:none; margin:-1.6em 0 2.2em; }
.embed__alt a{ color:var(--mist-dim); text-decoration:none; border-bottom:1px solid transparent; }
.embed__alt a:hover{ color:var(--amber); border-bottom-color:var(--amber); }

.gallery{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; margin-top:2em; }
.gallery img{ width:100%; height:100%; object-fit:cover; aspect-ratio:3/4; border:1px solid var(--line); }

.btnrow{ display:flex; flex-wrap:wrap; gap:12px; margin-top:1.8em; }
.btn{ display:inline-flex; align-items:center; gap:.7em; font-family:var(--ui); font-weight:500; font-size:.86rem; letter-spacing:.005em; text-transform:none; color:var(--bone); text-decoration:none; border:1px solid var(--line); padding:13px 20px; transition:.22s ease; background:transparent; cursor:pointer; }
.btn:hover{ border-color:var(--amber); color:var(--amber); }
.btn--solid{ background:var(--amber); border-color:var(--amber); color:var(--ink); }
.btn--solid:hover{ background:transparent; color:var(--amber); }

.pagenav{ display:flex; justify-content:space-between; gap:20px; padding-block:clamp(40px,6vw,70px); border-top:1px solid var(--line); }
.pagenav a{ text-decoration:none; }
.pagenav .k{ font-family:var(--ui); font-size:.8rem; letter-spacing:.005em; text-transform:none; color:var(--mist-dim); display:block; margin-bottom:8px; }
.pagenav .v{ font-family:var(--display); font-size:clamp(1.1rem,2vw,1.6rem); color:var(--bone); }

/* ---------- CV ---------- */
.entry{ display:grid; grid-template-columns:11rem minmax(0,1fr); gap:clamp(16px,3vw,44px); padding-block:clamp(26px,3.4vw,42px); border-top:1px solid var(--line); }
.entry__when{ font-family:var(--ui); font-size:.8rem; letter-spacing:.01em; color:var(--mist-dim); line-height:1.9; }
.entry__when b{ display:block; color:var(--ice); font-weight:400; }
.entry__role{ font-family:var(--display); font-size:clamp(1.15rem,2vw,1.6rem); color:var(--bone); margin:0 0 .15em; line-height:1.15; }
.entry__org{ font-family:var(--ui); font-weight:500; font-size:.9rem; letter-spacing:.005em; color:var(--amber); margin:0 0 1em; }
.entry ul{ padding-left:1.05em; margin:0; }
.entry li{ margin-bottom:.5em; font-size:.96rem; }
.entry li::marker{ color:var(--mist-dim); }
@media (max-width:720px){ .entry{ grid-template-columns:1fr; } }

.big-link{ font-family:var(--display); font-size:clamp(1.5rem,4vw,2.8rem); color:var(--bone); text-decoration:none;
  line-height:1.15; letter-spacing:-.03em; display:inline-block; transition:color .25s ease;
  word-break:break-word; max-width:20ch; }
.big-link--mail{ font-size:clamp(1.1rem,2.4vw,1.9rem); letter-spacing:-.02em; margin-top:.6em;
  border-bottom:1px solid var(--line); padding-bottom:.12em; }
.big-link--mail:hover{ border-bottom-color:var(--amber); }
.big-link:hover{ color:var(--amber); }

.foot{ border-top:1px solid var(--line); padding-block:44px 54px; }
.foot__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:28px; }
.foot h4{ font-family:var(--ui); font-size:.8rem; letter-spacing:.005em; text-transform:none; color:var(--mist-dim); font-weight:400; margin-bottom:12px; }
.foot a{ color:var(--mist); text-decoration:none; display:block; margin-bottom:6px; font-size:.95rem; }
.foot a:hover{ color:var(--amber); }
.foot__base{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; margin-top:44px; font-family:var(--ui); font-size:.8rem; letter-spacing:.005em; text-transform:none; color:var(--mist-dim); }

.rv{ opacity:0; transition:opacity .6s ease; }
.rv.in{ opacity:1; transform:none; }

/* cross-page fade: the nav stays put, the page beneath it changes */
@view-transition{ navigation:auto; }
.nav{ view-transition-name:sitenav; }
::view-transition-old(root){ animation:vt-out .16s ease forwards; }
::view-transition-new(root){ animation:vt-in .3s ease; }
@keyframes vt-out{ to{ opacity:0; } }
@keyframes vt-in{ from{ opacity:0; } }
@media (prefers-reduced-motion: reduce){
  @view-transition{ navigation:none; }
}
@media (prefers-reduced-motion: reduce){ .rv{ opacity:1; transform:none; transition:none; } }
:focus-visible{ outline:2px solid var(--amber); outline-offset:3px; }


/* monospace is now reserved for genuinely technical content */
details.deep code, .prose code, pre{ font-family:var(--mono); font-size:.88em; }


/* keyword chips in the index — quiet enough to skim past, present enough to filter by eye */
.row__tag{ display:flex; flex-direction:column; align-items:flex-end; gap:7px; }
.row__chips{ display:block; text-align:right; line-height:1.45; }
.row__chips i{ display:inline; white-space:normal !important; }
.row__chips i:not(:last-child)::after{ content:', '; }
.row__chips i{
  font-style:normal; font-family:var(--ui); font-size:.8rem; letter-spacing:.005em;
  text-transform:none; color:var(--mist-dim);
  white-space:nowrap; transition:color .25s ease;
}
.row:hover .row__chips i{ color:var(--mist); }
@media (max-width:880px){
  .row__tag{ align-items:flex-start; }
  .row__chips{ text-align:left; }
}

/* lift: characters rise under the cursor, smoothly */
.lift__w{ display:inline-block; white-space:nowrap; }
.lift__c{ display:inline-block; will-change:transform; }
.lift__sr{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; -webkit-user-select:none; user-select:none; }
[data-lift]{ cursor:default; }


/* index rows: on hover the row slides right and a still of the project
   is revealed in the space it leaves. Rows without a still get a short rule. */
.row{ transition:color .25s ease, padding-left .6s cubic-bezier(.65,0,.2,1); }
.row:hover, .row:focus-visible{ padding-left:16px; }
.row::after{
  content:""; position:absolute; left:0; top:50%; width:0; height:1px;
  background:var(--amber); transform:translateY(-50%);
  transition:width .35s cubic-bezier(.2,.7,.3,1);
}
.row:hover::after, .row:focus-visible::after{ width:10px; }
.row__title{ transition:color .25s ease; }
.row:hover .row__title{ color:var(--amber); }
.row.has-peek::after{ display:none; }
.row{ --peekw:150px; --peekgap:22px; }
/* the cells slide as a unit, so nothing reflows; the tag column fades and
   the slack it leaves is what the still moves into */
.row.has-peek > span{ transition:transform .6s cubic-bezier(.65,0,.2,1), opacity .35s ease; }
.row.has-peek:hover, .row.has-peek:focus-visible{ padding-left:0; }
.row.has-peek:hover > span, .row.has-peek:focus-visible > span{ transform:translateX(calc(var(--peekw) + var(--peekgap))); }
.row.has-peek:hover > .row__tag, .row.has-peek:focus-visible > .row__tag{ opacity:0; }
.row__peek{
  position:absolute; left:0; top:50%; width:var(--peekw); height:calc(100% - 16px); max-height:138px;
  object-fit:cover; border:1px solid var(--line); pointer-events:none;
  transform:translate(-14px,-50%) scale(1.06); opacity:0;
  clip-path:inset(0 100% 0 0);
  filter:saturate(.85);
  transition:clip-path .6s cubic-bezier(.65,0,.2,1), transform .6s cubic-bezier(.65,0,.2,1), opacity .3s ease;
}
.row.has-peek:hover .row__peek, .row.has-peek:focus-visible .row__peek{
  clip-path:inset(0 0 0 0); transform:translate(0,-50%) scale(1); opacity:1;
}
@media (max-width:880px){ .row:hover, .row.has-peek:hover{ padding-left:0; } .row::after, .row__peek{ display:none; } .row.has-peek:hover > span{ transform:none; opacity:1; } }
@media (prefers-reduced-motion: reduce){ .row, .row__peek{ transition:none; } }


/* ---------- view switch + timeline ---------- */
.viewswitch{ display:flex; gap:14px; margin-left:12px; }
.viewbtn{
  font-family:var(--ui); font-weight:500; font-size:.92rem; letter-spacing:.005em;
  background:transparent; border:0; color:var(--mist-dim); padding:6px 0; cursor:pointer; transition:color .2s ease;
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.35em; text-decoration-color:transparent;
}
.viewbtn:hover{ color:var(--bone); }
.viewbtn[aria-pressed="true"]{ color:var(--bone); text-decoration-color:var(--amber); }

.timeline[hidden]{ display:none; }
.tl__legend{ display:flex; flex-wrap:wrap; gap:16px; margin:0 0 26px; }
.tl__legend i{
  font-style:normal; font-family:var(--ui); font-size:.8rem; letter-spacing:.04em; color:var(--mist-dim);
  display:inline-flex; align-items:center; gap:7px;
}
.tl__legend i::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--k); }
.tl__legend i[data-kind], .tl__row[data-kind]{ --k:var(--mist-dim); }
.tl__legend i[data-kind="art"], .tl__row[data-kind="art"]{ --k:var(--amber); }
.tl__legend i[data-kind="research"], .tl__row[data-kind="research"]{ --k:var(--ice); }
.tl__legend i[data-kind="industry"], .tl__row[data-kind="industry"]{ --k:#7C8B6B; }
.tl__legend i[data-kind="games"], .tl__row[data-kind="games"]{ --k:#A0709B; }
.tl__legend i[data-kind="study"], .tl__row[data-kind="study"]{ --k:var(--mist-dim); }

.tl{ position:relative; border-top:1px solid var(--line); }
.tl::before{ content:""; position:absolute; left:calc(9rem + 4px); top:0; bottom:0; width:1px; background:var(--line); }
.tl__row{
  display:grid; grid-template-columns:9rem 18px minmax(0,1fr); gap:0 18px; align-items:start;
  padding:18px 0; text-decoration:none; color:inherit; position:relative; transition:.25s ease;
}
a.tl__row:hover{ color:var(--bone); }
a.tl__row:hover .tl__body b{ color:var(--amber); }
.tl__when{ font-family:var(--ui); font-size:.8rem; letter-spacing:.03em; color:var(--mist-dim); padding-top:.25em; text-align:right; }
.tl__dot{ width:9px; height:9px; border-radius:50%; background:var(--k); margin:.45em 0 0 0; z-index:1; box-shadow:0 0 0 4px var(--ink); }
.tl__body b{ display:block; font-family:var(--display); font-weight:600; font-size:1.05rem;
  letter-spacing:-.02em; color:var(--bone); margin-bottom:.2em; transition:color .25s ease; }
.tl__body span{ display:block; font-size:.95rem; color:var(--mist); }
@media (max-width:720px){
  .tl::before{ left:4px; }
  .tl__row{ grid-template-columns:18px minmax(0,1fr); }
  .tl__when{ grid-column:2; text-align:left; padding:0 0 4px; }
  .tl__dot{ grid-row:1; grid-column:1; }
  .tl__body{ grid-column:2; }
}

/* practice shelf cards: a considered hover */
.shelfcard{ position:relative; transition:background .3s ease, transform .35s cubic-bezier(.2,.7,.3,1); }
.shelfcard::before{
  content:none; position:absolute; left:0; right:0; top:0; height:2px; background:var(--amber);
  transform:scaleX(0); transform-origin:left; transition:transform .45s cubic-bezier(.65,0,.2,1);
}
.shelfcard:hover::before{ transform:scaleX(1); }
.shelfcard:hover{ background:var(--ink-2); }
.shelfcard__img{ overflow:hidden; }
.shelfcard__img img{ transition:transform .7s cubic-bezier(.2,.7,.3,1), filter .5s ease; filter:saturate(.82); }
.shelfcard:hover .shelfcard__img img{ transform:scale(1.04); filter:saturate(1.05); }
.shelfcard__claim{ transition:color .3s ease; }
.shelfcard .btn{ transition:border-color .3s ease, color .3s ease, background .3s ease; }


/* ============================================================
   2026-10 additions: filter motion, hover previews, industry
   plates, pipeline list, archive demo
   ============================================================ */

/* rows re-enter when a filter changes, in order */
@keyframes rowin{ from{ opacity:0; } }
.row.pop{ animation:rowin .5s cubic-bezier(.2,.7,.3,1) both; }
@media (prefers-reduced-motion: reduce){ .row.pop{ animation:none; } }

/* industry plates: paid work, shown apart from research and art */
.plates{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:clamp(26px,3.5vw,44px); }
.plate{
  display:flex; flex-direction:column; gap:14px; background:var(--ink); padding:clamp(26px,3vw,40px);
  text-decoration:none; color:inherit; position:relative; overflow:hidden;
  transition:background .3s ease;
}
.plate::before{ content:none; }
.plate:hover, .plate:focus-visible{ background:var(--ink-2); outline:none; }
.plate:hover::before, .plate:focus-visible::before{ transform:scaleX(1); }
.plate__img{ position:relative; z-index:1; margin:calc(clamp(26px,3vw,40px) * -1) calc(clamp(26px,3vw,40px) * -1) 8px; aspect-ratio:16/9; overflow:hidden; display:block; border-bottom:1px solid var(--line); background:var(--ink-3); }
.plate__img img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .9s cubic-bezier(.2,.7,.2,1); }
.plate__img:hover img{ transform:scale(1.04); }
.plate__img span{ position:absolute; right:12px; bottom:10px; font-family:var(--ui); font-size:.8rem; letter-spacing:.005em; text-transform:none; color:#fff; background:rgba(0,0,0,.55); padding:3px 7px; }
.plate__img--type{ background-color:var(--ink-2); padding:clamp(16px,2vw,24px); display:flex; flex-direction:column; justify-content:flex-end; }
.plate__img--type i{ position:absolute; top:clamp(14px,1.8vw,20px); left:clamp(16px,2vw,24px); font-style:normal; font-family:var(--ui); font-size:.8rem; letter-spacing:.005em; text-transform:none; color:var(--mist-dim); }
.plate__img--type b{ font-family:var(--display); font-weight:700; font-size:clamp(1.2rem,1.8vw,1.6rem); line-height:1.02; letter-spacing:-.025em; color:var(--bone); max-width:12ch; }
.plate__when{ font-family:var(--ui); font-size:.8rem; letter-spacing:.01em; color:var(--mist-dim); }
.plate__title{ font-family:var(--display); font-size:clamp(1.6rem,3vw,2.4rem); color:var(--bone); line-height:1; letter-spacing:-.025em; margin:0; }
.plate__title a{ color:inherit; text-decoration:none; transition:color .25s ease; }
.plate__title a::after{ content:""; position:absolute; inset:0; }   /* the whole plate opens the case */
.plate:hover .plate__title a{ color:var(--amber); }
.plate__links{ position:relative; z-index:1; display:flex; gap:18px; margin:0; font-family:var(--ui); font-size:.86rem; letter-spacing:.005em; text-transform:none; }
.plate__links a{ color:var(--mist-dim); text-decoration:none; border-bottom:1px solid transparent; transition:color .2s ease, border-color .2s ease; }
.plate__links a:hover{ color:var(--amber); border-bottom-color:var(--amber); }
.plate__role{ font-family:var(--ui); font-size:.8rem; color:var(--bone); margin:0; }
.plate__note{ font-size:1rem; color:var(--mist); margin:0; max-width:46ch; }
.plate__facts{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:auto 0 0; padding-top:18px; border-top:1px solid var(--line-soft); }
.plate__facts div{ min-width:0; }
.plate__facts dt{ font-family:var(--ui); font-size:.8rem; letter-spacing:.005em; text-transform:none; color:var(--mist-dim); margin-bottom:6px; }
.plate__facts dd{ margin:0; font-family:var(--display); font-size:.92rem; color:var(--bone); line-height:1.25; }

/* ---------- selected work: the three to read first ---------- */
.sel{ border-top:1px solid var(--line); margin-top:clamp(26px,3.5vw,44px); }
.selc{
  display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(22px,3.5vw,56px);
  padding:clamp(28px,3.6vw,52px) 0; border-bottom:1px solid var(--line);
  text-decoration:none; color:inherit; position:relative;
}
.selc::before{ content:""; position:absolute; left:0; top:-1px; height:1px; width:100%; background:var(--amber); transform:scaleX(0); transform-origin:left; transition:transform .6s cubic-bezier(.65,0,.2,1); }
.selc:hover::before, .selc:focus-visible::before{ transform:scaleX(1); }
.selc:focus-visible{ outline:none; }
.selc__img{ aspect-ratio:4/3; overflow:hidden; border:1px solid var(--line); background:var(--ink-2); position:relative; align-self:start; }
.selc__img img{ width:100%; height:100%; object-fit:cover; display:block; filter:saturate(.85); transition:transform .9s cubic-bezier(.2,.7,.2,1), filter .5s ease; }
.selc:hover .selc__img img{ transform:scale(1.03); filter:saturate(1); }
.selc__img--type{ display:flex; flex-direction:column; justify-content:flex-end; padding:clamp(18px,2.2vw,28px); }
.selc__img--type::before{ content:none; }
.selc__img--type i{ position:absolute; top:clamp(16px,2vw,24px); left:clamp(18px,2.2vw,28px); font-style:normal; font-family:var(--ui); font-size:.8rem; letter-spacing:.005em; text-transform:none; color:var(--mist-dim); }
.selc__img--type b{ position:relative; font-family:var(--display); font-weight:700; font-size:clamp(1.3rem,2.2vw,1.9rem); line-height:1.02; letter-spacing:-.03em; color:var(--bone); max-width:16ch; }
.selc__body{ min-width:0; display:flex; flex-direction:column; }
.selc__n{ font-family:var(--ui); font-size:.8rem; letter-spacing:.005em; text-transform:none; color:var(--mist-dim); }
.selc__title{ font-family:var(--display); font-size:clamp(1.7rem,3.2vw,2.7rem); line-height:1; letter-spacing:-.03em; color:var(--bone); margin:10px 0 18px; transition:color .25s ease; }
.selc:hover .selc__title{ color:var(--amber); }
.selc__rows{ margin:0; border-top:1px solid var(--line-soft); }
.selc__rows div{ display:grid; grid-template-columns:6.5rem minmax(0,1fr); gap:16px; padding:11px 0; border-bottom:1px solid var(--line-soft); }
.selc__rows dt{ font-family:var(--ui); font-size:.8rem; letter-spacing:.005em; text-transform:none; color:var(--mist-dim); padding-top:.45em; }
.selc__rows dd{ margin:0; font-size:1rem; line-height:1.5; color:var(--mist); }
.selc__rows div:first-child dd{ font-family:var(--display); font-size:1.08rem; color:var(--bone); line-height:1.35; }
@media (max-width:880px){
  .selc{ grid-template-columns:1fr; gap:18px; }
  .selc__img{ aspect-ratio:16/10; }
  .selc__rows div{ grid-template-columns:1fr; gap:4px; padding:10px 0; }
}

/* ---------- picks: the three selected works, compact, on the home page ---------- */
.picks{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2.4vw,34px); margin-top:clamp(22px,3vw,36px); }
.pick{ display:block; text-decoration:none; color:inherit; }
.pick__img{ aspect-ratio:4/3; overflow:hidden; border:1px solid var(--line); background:var(--ink-2); position:relative; }
.pick__img img{ width:100%; height:100%; object-fit:cover; display:block; filter:saturate(.85); transition:transform .9s cubic-bezier(.2,.7,.2,1), filter .5s ease; }
.pick:hover .pick__img img{ transform:scale(1.04); filter:saturate(1); }
.pick__img--type{ display:flex; flex-direction:column; justify-content:flex-end; padding:clamp(14px,1.8vw,22px); }
.pick__img--type::before{ content:none; }
.pick__img--type i{ position:absolute; top:clamp(12px,1.6vw,18px); left:clamp(14px,1.8vw,22px); font-style:normal; font-family:var(--ui); font-size:.8rem; letter-spacing:.005em; text-transform:none; color:var(--mist-dim); }
.pick__img--type b{ position:relative; font-family:var(--display); font-weight:700; font-size:clamp(1rem,1.5vw,1.3rem); line-height:1.05; letter-spacing:-.025em; color:var(--bone); max-width:16ch; }
.pick__title{ display:block; font-family:var(--display); font-weight:600; font-size:clamp(1.15rem,1.7vw,1.5rem); letter-spacing:-.02em; color:var(--bone); margin:14px 0 6px; transition:color .25s ease; }
.pick:hover .pick__title{ color:var(--amber); }
.pick__note{ display:block; font-size:.95rem; line-height:1.5; color:var(--mist); }
@media (max-width:880px){ .picks{ grid-template-columns:1fr; gap:26px; } }

/* a pipeline is a sequence, so it gets a line */
.pipe{ list-style:none; margin:2em 0; padding:0 0 0 2px; border-left:1px solid var(--line); }
.pipe li{ position:relative; padding:0 0 1.5em 28px; }
.pipe li:last-child{ padding-bottom:0; }
.pipe li::before{ content:""; position:absolute; left:-6px; top:.5em; width:9px; height:9px; border-radius:50%; background:var(--ink); border:1.5px solid var(--amber); }
.pipe h4{ font-family:var(--display); font-size:1.05rem; color:var(--bone); margin:0 0 .25em; }
.pipe p{ font-size:.97rem; margin:0; color:var(--mist); }
.pipe li.mine h4::after{ content:"my part"; font-family:var(--ui); font-size:.8rem; letter-spacing:.005em; text-transform:none; color:var(--amber); margin-left:.8em; vertical-align:middle; }

/* ---------- archive demo: ask, retrieve, answer or decline ----------
   No box. Questions read like an index on the left; the answer sets
   large on the right; the documents it drew on rise off a shelf below. */
.ask{ margin:2.6em 0 0; border-top:1px solid var(--line); padding-top:clamp(26px,3.2vw,44px); }
.ask__grid{ display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.5fr); gap:clamp(28px,5vw,80px); align-items:start; }
@media (max-width:820px){ .ask__grid{ grid-template-columns:1fr; gap:34px; } }
.ask__label{ font-family:var(--ui); font-size:.8rem; letter-spacing:.005em; text-transform:none; color:var(--mist-dim); margin:0 0 14px; display:flex; justify-content:space-between; gap:12px; }
.ask__label em{ font-style:normal; color:var(--amber); letter-spacing:.08em; text-transform:none; }
.ask__qs{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.ask__q{
  display:block; width:100%; text-align:left; background:none; border:0; border-bottom:1px solid var(--line);
  padding:15px 0; font-family:var(--body); font-size:clamp(1.05rem,1.35vw,1.2rem); line-height:1.35;
  color:var(--mist); cursor:pointer; position:relative;
  transition:color .25s ease, padding-left .35s cubic-bezier(.2,.7,.3,1);
}
.ask__q::before{ content:""; position:absolute; left:0; top:1.45em; width:0; height:1px; background:var(--amber); transition:width .35s cubic-bezier(.2,.7,.3,1); }
.ask__q:hover, .ask__q:focus-visible{ color:var(--bone); padding-left:14px; outline:none; }
.ask__q:hover::before, .ask__q:focus-visible::before{ width:8px; }
.ask__q[aria-pressed="true"]{ color:var(--bone); padding-left:18px; }
.ask__q[aria-pressed="true"]::before{ width:11px; }
.ask__q small{ display:block; font-family:var(--ui); font-size:.8rem; letter-spacing:.005em; text-transform:none; color:var(--mist-dim); margin-top:5px; }
.ask__q[aria-pressed="true"] small{ color:var(--amber); }
.ask__agent{ font-family:var(--body); font-size:clamp(1.25rem,1.9vw,1.62rem); line-height:1.42; color:var(--bone); min-height:5.7em; margin:0; letter-spacing:-.005em; }
.ask__agent.idle{ color:var(--mist-dim); }
.ask__agent.declined{ color:var(--mist); font-style:italic; }
.ask__agent .cur{ display:inline-block; width:.5ch; height:.95em; background:var(--amber); vertical-align:-.12em; margin-left:3px; }
@keyframes blink{ 50%{ opacity:0; } }
.ask__cite{ margin:18px 0 0; font-family:var(--ui); font-size:.8rem; letter-spacing:.04em; color:var(--mist-dim); line-height:1.9; opacity:0; transition:opacity .4s ease; min-height:1.9em; }
.ask__cite.on{ opacity:1; }
.ask__cite a{ color:var(--amber); text-decoration:none; border-bottom:1px solid transparent; transition:border-color .2s ease; }
.ask__cite a:hover{ border-bottom-color:var(--amber); }
.ask__shelf{ margin-top:clamp(26px,3vw,40px); padding-top:18px; border-top:1px solid var(--line); }
.ask__docs{ list-style:none; margin:0; padding:10px 0 0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
@media (max-width:560px){ .ask__docs{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.doc{
  position:relative; background:var(--ink-2); border:1px solid var(--line-soft);
  padding:14px 12px 15px; aspect-ratio:4/5; display:flex; flex-direction:column; opacity:.42;
  transition:opacity .4s ease, transform .5s cubic-bezier(.2,.7,.3,1), border-color .4s ease, background .4s ease;
}
.doc.hit{ opacity:1; border-color:var(--line); background:var(--ink); transform:translateY(-8px); }
.doc__bar{ position:absolute; left:-1px; right:-1px; top:-1px; height:2px; background:var(--line-soft); overflow:hidden; }
.doc__bar i{ display:block; height:100%; width:0; background:var(--amber); transition:width .8s cubic-bezier(.2,.7,.3,1); }
.doc__n{ font-family:var(--ui); font-size:.8rem; letter-spacing:.01em; color:var(--mist-dim); margin:0 0 auto; }
.doc.hit .doc__n{ color:var(--amber); }
.doc__t{ font-family:var(--display); font-weight:600; font-size:.84rem; line-height:1.25; letter-spacing:-.01em; color:var(--bone); margin:12px 0 6px; }
.doc__m{ font-family:var(--ui); font-size:.8rem; line-height:1.55; color:var(--mist-dim); margin:0; }
.ask.searching .doc{ animation:scan 1s ease-in-out infinite; }
@keyframes scan{ 50%{ opacity:.8; } }
.doc.flash .doc__t{ animation:docflash 1.2s ease; }
@keyframes docflash{ 0%,30%{ color:var(--amber); } }
.ask__foot{ margin:22px 0 0; font-family:var(--ui); font-size:.8rem; line-height:1.75; color:var(--mist-dim); max-width:72ch; }


/* the hero is a little shorter on phones so the work is one swipe away */
@media (max-width:700px){ .hero{ min-height:62svh; } }


/* ---------- gallery view of the index ---------- */
.gallery{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,2vw,28px) clamp(12px,1.6vw,22px); padding-top:4px; }
.gallery[hidden]{ display:none; }
@media (max-width:980px){ .gallery{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .gallery{ grid-template-columns:1fr; } }
.gcard{ display:block; text-decoration:none; color:inherit; }
.gcard[hidden]{ display:none; }
.gcard__img, .gcard__plate{ aspect-ratio:4/3; overflow:hidden; border:1px solid var(--line); background:var(--ink-2); position:relative; }
.gcard__img img{ width:100%; height:100%; object-fit:cover; display:block; filter:saturate(.85); transition:transform .9s cubic-bezier(.2,.7,.2,1), filter .5s ease; }
.gcard:hover .gcard__img img, .gcard:focus-visible .gcard__img img{ transform:scale(1.04); filter:saturate(1); }
.gcard__plate{ display:flex; flex-direction:column; justify-content:flex-end; padding:clamp(16px,2vw,24px); transition:background .3s ease; }
.gcard__plate::before{ content:none; }
.gcard__plate span{ position:relative; font-family:var(--display); font-weight:700; font-size:clamp(1.5rem,2.6vw,2.3rem); line-height:.98; letter-spacing:-.03em; color:var(--bone); max-width:9ch; }
.gcard__plate i{ position:absolute; top:clamp(14px,1.8vw,20px); left:clamp(16px,2vw,24px); font-style:normal; font-family:var(--ui); font-size:.8rem; letter-spacing:.005em; text-transform:none; color:var(--mist-dim); }
.gcard:hover .gcard__plate{ background:var(--ink-3); }
.gcard__body{ padding:14px 2px 0; }
.gcard__year{ font-family:var(--ui); font-size:.8rem; letter-spacing:.01em; color:var(--mist-dim); }
.gcard__title{ display:block; font-family:var(--display); font-weight:600; font-size:clamp(1.1rem,1.5vw,1.3rem); letter-spacing:-.02em; color:var(--bone); margin:4px 0 6px; transition:color .25s ease; }
.gcard:hover .gcard__title{ color:var(--amber); }
.gcard__note{ display:block; font-size:.95rem; line-height:1.45; color:var(--mist); }
.gcard__tag{ display:block; margin-top:8px; font-family:var(--ui); font-size:.8rem; letter-spacing:.005em; text-transform:none; color:var(--mist-dim); }
.gcard.pop{ animation:rowin .5s cubic-bezier(.2,.7,.3,1) both; }


/* ---------- more work: folded under the index ---------- */
.more{ margin-top:clamp(28px,4vw,48px); border-top:1px solid var(--line); }
.more > summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:18px 0; }
.more > summary::-webkit-details-marker{ display:none; }
.more > summary > span:first-child{ font-family:var(--display); font-weight:600; font-size:clamp(1.1rem,1.6vw,1.35rem); color:var(--bone); letter-spacing:-.02em; }
.more > summary > span:first-child::after{ content:"+"; color:var(--amber); margin-left:.6em; font-weight:400; }
.more[open] > summary > span:first-child::after{ content:"\2013"; }
.more__n{ font-family:var(--ui); font-size:.8rem; letter-spacing:.005em; text-transform:none; color:var(--mist-dim); }
.more > summary:hover > span:first-child{ color:var(--amber); }
.index--more{ border-top:1px solid var(--line-soft); }
.index--more .row{ padding-block:clamp(16px,2vw,24px); }
.index--more .row__title{ font-size:clamp(1.1rem,1.9vw,1.5rem); }

/* ---------- research areas, as a short definition list ---------- */
.areas{ margin:1.6em 0 1.4em; border-top:1px solid var(--line-soft); }
.areas > div{ display:grid; grid-template-columns:11rem minmax(0,1fr); gap:18px; padding:14px 0; border-bottom:1px solid var(--line-soft); }
.areas dt{ font-family:var(--ui); font-size:.8rem; letter-spacing:.005em; text-transform:none; color:var(--bone); padding-top:.4em; }
.areas dd{ margin:0; font-size:1rem; line-height:1.55; color:var(--mist); }
@media (max-width:640px){ .areas > div{ grid-template-columns:1fr; gap:6px; } }

/* ---------- research areas as three draggable circles ---------- */
.venn{ margin-top:clamp(40px,6vw,80px); --vA:#002FA7; --vB:#D96A1F; --vC:#2F7D62; }
[data-theme="dark"] .venn{ --vA:#7C9CFF; --vB:#E8823C; --vC:#5CC8A4; }
.venn__stage{ position:relative; height:clamp(440px,48vw,600px); border-top:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden; user-select:none; -webkit-user-select:none; touch-action:pan-y; }
.venn__svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.venn__set{ transition:opacity .35s ease; }
.venn__set[data-k="A"]{ --vc:var(--vA); }
.venn__set[data-k="B"]{ --vc:var(--vB); }
.venn__set[data-k="C"]{ --vc:var(--vC); }
.venn__fill{ fill:var(--vc); fill-opacity:.10; mix-blend-mode:multiply; cursor:grab; touch-action:none; transition:fill-opacity .25s ease; }
.venn__fill:hover{ fill-opacity:.14; }
.dragging .venn__fill{ cursor:grabbing; }
[data-theme="dark"] .venn__fill{ mix-blend-mode:screen; fill-opacity:.13; }
[data-theme="dark"] .venn__fill:hover{ fill-opacity:.18; }
.venn__ring{ fill:none; stroke:var(--vc); stroke-opacity:.75; stroke-width:1; pointer-events:none; }
.venn__label{ font-family:var(--ui); font-size:13px; font-weight:600; letter-spacing:.005em; fill:var(--vc); pointer-events:none; }
.venn[data-hl] .venn__set{ opacity:.22; }
.venn[data-hl*="A"] .venn__set[data-k="A"], .venn[data-hl*="B"] .venn__set[data-k="B"], .venn[data-hl*="C"] .venn__set[data-k="C"]{ opacity:1; }
.venn__nodes{ position:absolute; inset:0; pointer-events:none; }
.venn__node{ position:absolute; left:0; top:0; display:flex; flex-direction:column; align-items:center; gap:7px; text-decoration:none; color:var(--bone); pointer-events:auto; will-change:transform,opacity; outline:none; }
.venn__dot{ width:46px; height:46px; border-radius:50%; overflow:hidden; border:1px solid var(--line); background:var(--ink-2); transition:transform .35s cubic-bezier(.2,.7,.2,1), border-color .25s ease, opacity .35s ease; }
.venn__dot img{ width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; }
.venn__dot--type{ display:flex; align-items:center; justify-content:center; font-family:var(--display); font-weight:700; font-size:14px; letter-spacing:-.02em; color:var(--bone); }
.venn__name{ font-family:var(--ui); font-size:11px; line-height:1.25; text-align:center; max-width:13ch; color:var(--bone); text-shadow:0 0 8px var(--ink), 0 0 3px var(--ink); transition:color .25s ease; }
.venn__node:hover .venn__dot, .venn__node:focus-visible .venn__dot{ transform:scale(1.16); border-color:var(--amber); }
.venn__node:hover .venn__name, .venn__node:focus-visible .venn__name{ color:var(--amber); }
.venn__node.is-hl .venn__dot{ border-color:var(--amber); }
.venn__node.is-hl .venn__name{ color:var(--amber); }
.venn__tip{ position:absolute; width:250px; padding:12px 14px; background:var(--ink); border:1px solid var(--line); pointer-events:none; opacity:0; transform:translateY(4px); transition:opacity .2s ease, transform .2s ease; z-index:3; }
.venn__tip.on{ opacity:1; transform:none; }
.venn__tip b{ display:block; font-family:var(--display); font-weight:600; font-size:1.02rem; letter-spacing:-.01em; color:var(--bone); }
.venn__tipyear{ display:block; font-family:var(--ui); font-size:.8rem; letter-spacing:.01em; color:var(--mist-dim); margin:3px 0 6px; }
.venn__tip p{ margin:0; font-size:.9rem; line-height:1.45; color:var(--mist); }
.venn__tip a{ display:inline-block; margin-top:8px; font-family:var(--ui); font-size:.8rem; letter-spacing:.01em; color:var(--amber); pointer-events:auto; }
.venn__foot{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; margin-top:12px; font-family:var(--ui); font-size:.8rem; letter-spacing:.04em; color:var(--mist-dim); }
.venn__reset{ font:inherit; background:none; border:0; padding:0; color:var(--mist-dim); cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.venn__reset:hover{ color:var(--amber); }
.venn__btns{ display:flex; gap:18px; flex-shrink:0; }
.venn__learn{ font:inherit; background:none; border:0; padding:0; color:var(--mist-dim); cursor:pointer; transition:color .2s, border-color .2s, background .2s; }
.venn__learn:hover{ color:var(--amber); border-color:var(--amber); }
.venn__learn[aria-pressed="true"]{ color:var(--ink); background:var(--amber); border-color:var(--amber); }
.venn__node{ transition:filter .35s; will-change:transform, opacity; }
.venn--learn .venn__node:not(.is-learn){ filter:grayscale(1); }
.venn--learn .venn__node:not(.is-learn) .venn__dot, .venn--learn .venn__node:not(.is-learn) .venn__name{ opacity:.28; }
.venn__name{ transition:opacity .35s ease, color .25s ease; }
.venn--learn .venn__node.is-learn .venn__dot{ border-color:var(--amber); box-shadow:0 0 0 3px color-mix(in srgb, var(--amber) 22%, transparent); }
.venn--narrow .venn__stage{ height:clamp(400px,118vw,520px); }
.venn--narrow .venn__dot{ width:34px; height:34px; }
.venn--narrow .venn__name{ display:none; }
.venn--narrow .venn__label{ font-size:11px; letter-spacing:.005em; }
@media (max-width:700px){ .venn__foot{ flex-direction:column; align-items:flex-start; gap:10px; } }
@media (prefers-reduced-motion: reduce){ .venn__dot, .venn__tip{ transition:none; } }

/* ---------- gallery: one large picture and a row of small ones ----------
   Without strip.js the pictures stay a row that scrolls sideways (.strip__track).
   With it, strip.js puts the current picture large above the row (.strip__stage). */
.strip{ margin:1.8em 0 0; min-width:0; }
.strip__track{ contain:inline-size; display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
.strip__track::-webkit-scrollbar{ display:none; }
.strip__track > *{ flex:none; scroll-snap-align:start; margin:0; }
.strip__track img{ display:block; height:clamp(220px,40vh,440px); width:auto; max-width:none; border:1px solid var(--line); }
.strip__track figure{ width:min-content; }
.strip__track figcaption{ font-family:var(--ui); font-size:.8rem; line-height:1.6; color:var(--mist-dim); margin-top:9px; }

.strip__stage{ margin:0; }
/* the frame keeps the shape most of the pictures share; a picture of another shape hangs from its top left,
   in line with the caption and the row of small pictures */
.strip__frame{ display:flex; align-items:flex-start; justify-content:flex-start; width:100%; aspect-ratio:var(--ar, 1.7778); max-height:74vh; cursor:zoom-in; touch-action:pan-y; -webkit-user-select:none; user-select:none; }
.strip__frame img{ display:block; max-width:100%; max-height:100%; width:auto; height:auto; flex:none; border:1px solid var(--line); transition:opacity .14s ease; }
.strip__frame img.is-out{ opacity:0; }
.strip__line{ display:flex; justify-content:space-between; align-items:baseline; gap:20px; font-family:var(--ui); font-size:.8rem; line-height:1.6; color:var(--mist-dim); margin-top:10px; min-height:1.6em; }
.strip__n{ flex:none; margin-left:auto; font-variant-numeric:tabular-nums; }
.strip__thumbs{ contain:inline-size; display:flex; gap:8px; margin-top:16px; overflow-x:auto; scrollbar-width:none; }
.strip__thumbs::-webkit-scrollbar{ display:none; }
.strip__thumb{ flex:none; margin:0; padding:0 0 6px; border:0; border-bottom:2px solid transparent; background:none; cursor:pointer; opacity:.45; transition:opacity .2s ease; }
.strip__thumb img{ display:block; height:56px; width:auto; border:1px solid var(--line); }
.strip__thumb:hover{ opacity:.8; }
.strip__thumb[aria-current="true"]{ opacity:1; border-bottom-color:var(--amber); }
.strip__thumb:focus-visible{ outline:2px solid var(--amber); outline-offset:2px; }
@media (max-width:640px){ .strip__thumbs{ gap:6px; margin-top:12px; } .strip__thumb img{ height:40px; } }
@media (prefers-reduced-motion: reduce){ .strip__frame img, .strip__thumb{ transition:none; } }

/* the large view */
.strip-view__bar button{ font-family:var(--body); font-size:1.05rem; color:var(--bone); background:none; border:0; padding:0; cursor:pointer; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.22em; text-decoration-color:color-mix(in srgb, var(--bone) 35%, transparent); }
.strip-view__bar button:hover{ color:var(--amber); text-decoration-color:var(--amber); }
.strip-view{ width:100vw; height:100vh; height:100dvh; max-width:none; max-height:none; margin:0; padding:clamp(16px,3vw,36px); border:0; background:var(--ink); color:var(--bone); box-sizing:border-box; }
.strip-view[open]{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; }
.strip-view::backdrop{ background:var(--ink); }
.strip-view__fig{ margin:0; display:flex; flex-direction:column; align-items:center; min-height:0; flex:1 1 auto; justify-content:center; }
.strip-view__fig img{ max-width:min(100%, 1600px); max-height:calc(100dvh - 150px); width:auto; height:auto; object-fit:contain; border:1px solid var(--line); }
.strip-view__fig figcaption{ font-family:var(--ui); font-size:.8rem; line-height:1.6; color:var(--mist-dim); margin-top:10px; max-width:76ch; text-align:center; }
.strip-view__bar{ display:flex; align-items:baseline; gap:18px; font-family:var(--ui); font-size:.8rem; color:var(--mist-dim); }
.strip-view__n{ min-width:3.6em; text-align:center; font-variant-numeric:tabular-nums; }
.strip-view__close{ margin-left:18px; }
html.strip-viewing{ overflow:hidden; }

/* ---------- languages: a small control that opens a menu ---------- */
.nav__lang{ position:relative; display:inline-flex; align-items:center; }
.lang__btn{ display:inline-flex; align-items:center; gap:5px; background:none; border:0; padding:6px 4px; cursor:pointer;
  font-family:var(--ui); font-size:.8rem; font-weight:500; letter-spacing:.02em; color:var(--mist); transition:color .22s ease; }
.lang__btn svg{ width:9px; height:6px; transition:transform .22s ease; }
.lang__btn:hover, .lang__btn[aria-expanded="true"]{ color:var(--bone); }
.lang__btn[aria-expanded="true"] svg{ transform:rotate(180deg); }
.lang__menu{ position:absolute; top:calc(100% + 8px); right:0; min-width:9.5em; display:none; flex-direction:column; padding:6px 0;
  background:var(--ink); border:1px solid var(--line); box-shadow:0 8px 24px rgba(0,0,0,.08); z-index:96; }
.nav__lang.open .lang__menu{ display:flex; }
.lang__menu a{ font-family:var(--ui); font-size:.84rem; color:var(--mist); text-decoration:none; padding:7px 14px; white-space:nowrap; transition:color .18s ease, background .18s ease; }
.lang__menu a:hover{ color:var(--bone); background:var(--mist-wash, rgba(127,127,127,.08)); }
.lang__menu a[aria-current="true"]{ color:var(--bone); }
.lang__menu a[aria-current="true"]::after{ content:"\00a0\00a0·"; color:var(--amber); }
@media (max-width:900px){ .lang__btn{ padding:8px 4px; } .lang__menu{ right:-4px; } }
/* the note on a translated page: sits in the space under the bar, above the page's own heading */
.mt-note{ position:absolute; top:calc(58px + env(safe-area-inset-top, 0px)); left:0; right:0; z-index:5; margin:0; padding:10px var(--gutter);
  font-family:var(--ui); font-size:.78rem; line-height:1.4; color:var(--mist-dim); pointer-events:none; }
.mt-note a{ color:var(--amber); pointer-events:auto; }
@media (max-width:900px){ .mt-note{ top:52px; font-size:.74rem; } }
/* Chinese pages: the same two families, with a CJK face behind each */
html[lang="zh-Hans"]{
  --display: "Libre Franklin", "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  --ui:      "Libre Franklin", "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  --body:    "EB Garamond", "Noto Serif SC", "Songti SC", "SimSun", Georgia, serif;
}
html[lang="zh-Hans"] body{ line-height:1.75; }
html[lang="zh-Hans"] h1, html[lang="zh-Hans"] h2, html[lang="zh-Hans"] h3, html[lang="zh-Hans"] .display{ letter-spacing:0; }