@charset "utf-8";
/* ============================================================================
   "Contact" — design system for km.isg.rhul.ac.uk
   Palette sampled from the Founder's Building photograph; accent is the gold of
   an ISO/IEC 7816 smart-card contact plate. See design-system/design-plan.md.
   ========================================================================== */

/* ---------- tokens ------------------------------------------------------- */
:root {
  --paper:      #f6f7fa;
  --paper-2:    #e9edf3;
  --paper-3:    #dfe4ee;
  --ink:        #0b1220;
  --ink-2:      #1b2740;
  --ink-3:      #2c3b5b;
  --muted:      #5a6678a;
  --rule:       #d3dae6;
  --rule-soft:  #e4e9f1;
  --gold:       #c9992f;
  --gold-deep:  #8a6a12;
  --gold-soft:  #f2e6c6;
  --brick:      #6e5150;

  --bg:         var(--paper);
  --bg-alt:     var(--paper-2);
  --surface:    #ffffff;
  --text:       var(--ink);
  --text-2:     var(--muted);
  --text-soft:  #3d4a63;
  --line:       var(--rule);
  --line-soft:  var(--rule-soft);
  --link:       var(--gold-deep);
  --accent:     var(--gold);
  --accent-ink: var(--gold-deep);
  --shadow:     0 1px 2px rgba(11,18,32,.05), 0 8px 24px -12px rgba(11,18,32,.14);

  --hero-bg:    #e8ecf3;
  --hero-fg:    #0b1220;
  --hero-fg-2:  #4a5670;
  --hero-accent:#8a6a12;
  --hero-rule:  rgba(138,106,18,.3);
  --spec-cell:  #b98c22;
  --spec-label: #7d89a1;

  --serif: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;
  /* the hero name only — a Garamond, where the system serif is a news face */
  --display: "EB Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:  "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --t-xs:   .75rem;
  --t-sm:   .8125rem;
  --t-sm2:  .9375rem;
  --t-base: 1.0625rem;
  --t-md:   1.1875rem;
  --t-lg:   1.4375rem;
  --t-xl:   1.875rem;
  --t-2xl:  2.5rem;
  --t-3xl:  3.25rem;

  --head-h: 4.25rem;
  --subnav-h: 0rem;
  --wrap: 78rem;
  --gut:  clamp(1.125rem, 4vw, 3rem);
  --band: clamp(2.75rem, 5vw, 4.5rem);
  --r:    3px;
}

[data-theme="dark"] {
  --hero-bg:    #0b1220;
  --hero-fg:    #ffffff;
  --hero-fg-2:  #c3cde0;
  --hero-accent:#e2b857;
  --hero-rule:  rgba(226,184,87,.24);
  --spec-cell:  #c9992f;
  --spec-label: #5c6c8c;
  --bg:        #070b14;
  --bg-alt:    #0c1220;
  --surface:   #101a2c;
  --text:      #e4e9f2;
  --text-2:    #94a3be;
  --text-soft: #b8c4d8;
  --line:      #1f2c47;
  --line-soft: #172137;
  --link:      #e2b857;
  --accent:    #e2b857;
  --accent-ink:#e2b857;
  --gold-soft: #2a2416;
  --shadow:    0 1px 2px rgba(0,0,0,.4), 0 10px 30px -14px rgba(0,0,0,.7);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --hero-bg:    #0b1220;
    --hero-fg:    #ffffff;
    --hero-fg-2:  #c3cde0;
    --hero-accent:#e2b857;
    --hero-rule:  rgba(226,184,87,.24);
    --spec-cell:  #c9992f;
    --spec-label: #5c6c8c;
    --bg:        #070b14;
    --bg-alt:    #0c1220;
    --surface:   #101a2c;
    --text:      #e4e9f2;
    --text-2:    #94a3be;
    --text-soft: #b8c4d8;
    --line:      #1f2c47;
    --line-soft: #172137;
    --link:      #e2b857;
    --accent:    #e2b857;
    --accent-ink:#e2b857;
    --gold-soft: #2a2416;
    --shadow:    0 1px 2px rgba(0,0,0,.4), 0 10px 30px -14px rgba(0,0,0,.7);
  }
}

/* ---------- reset -------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--head-h) + var(--subnav-h) + 1.25rem); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 var(--t-base)/1.62 var(--sans);
  font-feature-settings: "kern" 1, "liga" 1, "cv05" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

img, svg, video { display: block; max-width: 100%; }
figure { margin: 0; }
img { height: auto; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }
::selection { background: var(--gold-soft); color: var(--ink); }
[data-theme="dark"] ::selection { background: #3a3116; color: #f3e6c4; }

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- type --------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  font-variation-settings: "opsz" 36;
  line-height: 1.12;
  letter-spacing: -.012em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: var(--t-3xl); }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-lg); font-variation-settings: "opsz" 20; letter-spacing: -.005em; }
h4 { font-size: var(--t-md); font-variation-settings: "opsz" 18; letter-spacing: 0; }
p  { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 600; }

.measure   { max-width: 38em; }
.measure-w { max-width: 46em; }
.lead {
  font-size: var(--t-md);
  line-height: 1.6;
  color: var(--text-soft);
}
.serif-lead {
  font-family: var(--serif);
  font-variation-settings: "opsz" 20;
  font-size: clamp(1.25rem, 2.4vw, 1.625rem);
  line-height: 1.45;
  font-weight: 350;
  color: var(--text);
  letter-spacing: -.005em;
}
.mono {
  font-family: var(--mono);
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
.dim  { color: var(--text-2); }
.gold { color: var(--accent-ink); }

/* ---------- layout ------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.band { padding-block: var(--band); }
.band--tight { padding-block: clamp(2rem, 3.5vw, 3rem); }
.band--alt   { background: var(--bg-alt); }
.band--ink   { background: var(--ink); color: #e4e9f2; }
.band--ink h1, .band--ink h2, .band--ink h3 { color: #f2f5fa; }
.band--ink .dim { color: #94a3be; }
.band--ink a  { color: #e2b857; }
.band--rule  { border-top: 1px solid var(--line); }

.stack > * + * { margin-top: var(--s, 1.25rem); }
.flow > * + *  { margin-top: 1em; }

/* section heading with the contact-plate marker hung in the left margin */
/* a word longer than its column breaks rather than widening the page; German
   compounds hyphenate properly, which is normal in German setting */
h1, h2, h3, h4, p, li, dt, dd, figcaption, blockquote { overflow-wrap: break-word; }
:lang(de) h1, :lang(de) h2, :lang(de) h3, :lang(de) .lead { hyphens: auto; }

.sec-head { margin-bottom: clamp(1.5rem, 2.8vw, 2.25rem); }
.sec-head h2 { margin-bottom: .35em; }
.sec-head .lead { max-width: 44em; }

/* the title and its lead set side by side, so the section headers on a page do
   not all resolve to the same stacked shape */
.sec-head--split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: .25rem clamp(2rem, 5vw, 4.5rem); align-items: start;
}
.sec-head--split .sec-mark { grid-column: 1 / -1; }
.sec-head--split h2 { margin-bottom: 0; }
.sec-head--split .lead { margin: 0; padding-top: .35rem; }
@media (max-width: 800px) {
  .sec-head--split { grid-template-columns: minmax(0, 1fr); gap: .6rem; align-items: start; }
}

/* one shared affordance for "there is more of this elsewhere" */
.more {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: var(--t-sm2); font-weight: 550; text-decoration: none;
  padding-bottom: 2px; border-bottom: 1px solid color-mix(in srgb, var(--accent) 50%, transparent);
}
.more::after {
  content: ""; width: 8px; height: 8px; flex: none;
  border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor;
  rotate: var(--chev, 45deg); translate: 0 -1px; transition: translate .18s ease;
}
.more:hover { border-bottom-color: var(--accent); }
.more:hover::after { translate: 3px -1px; }
@media (prefers-reduced-motion: reduce) { .more::after { transition: none; } }
.sec-mark {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin: 0 0 .9rem;
  color: var(--accent-ink);
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: .06em;
}
.sec-mark::before {
  content: "";
  width: 1.75rem; height: 2px; flex: none;
  background: var(--accent);
}
.sec-mark::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line), transparent);
}
.mark {
  display: grid; place-items: center; flex: none;
  width: 2.125rem; height: 2.125rem;
  border: 1px solid var(--accent);
  border-radius: 2px;
  font-family: var(--serif);
  font-variation-settings: "opsz" 16;
  font-size: .9375rem; font-weight: 500; letter-spacing: .03em;
  color: var(--accent-ink);
  line-height: 1;
}

/* ---------- skip link ---------------------------------------------------- */
.skip {
  position: absolute; inset-inline-start: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: #fff; padding: .75rem 1.25rem; border-radius: var(--r);
}
.skip:focus { inset-inline-start: 1rem; top: 1rem; }

/* ---------- masthead ----------------------------------------------------- */
.masthead {
  position: sticky; top: 0; z-index: 90;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
.masthead__in {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 4.25rem;
}
/* the name is the one thing in the masthead that must never truncate, so the
   brand does not shrink; the nav tightens and then collapses instead. */
.brand {
  display: flex; align-items: center; gap: .7rem;
  text-decoration: none; color: var(--text); flex: none; min-width: 0;
}
.brand__txt { min-width: 0; }
.brand__txt span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.brand b {
  font-family: var(--display); font-weight: 600; font-size: 1.125rem;
  font-variation-settings: "opsz" 16; letter-spacing: -.01em; line-height: 1.1;
}
.brand__txt span { display: block; font-size: var(--t-xs); color: var(--text-2); font-weight: 400; letter-spacing: .01em; }
.brand:hover .mark { background: var(--accent); color: #16110a; }

.nav { margin-inline-start: auto; display: flex; align-items: center; gap: .1rem; }
.nav a {
  display: block; padding: .45rem .5rem; border-radius: var(--r);
  color: var(--text-2); text-decoration: none;
  font-size: var(--t-sm2); font-weight: 450; white-space: nowrap;
}
.nav a:hover { color: var(--text); background: var(--bg-alt); }
.nav a[aria-current="page"] {
  color: var(--text); font-weight: 550;
  box-shadow: inset 0 -2px 0 var(--accent);
  border-radius: 0;
}
.nav-tools { display: flex; align-items: center; gap: .35rem; margin-inline-start: auto; flex: none; }

.iconbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  height: 2.25rem; min-width: 2.25rem; padding: 0 .55rem;
  background: none; border: 1px solid var(--line); border-radius: var(--r);
  color: var(--text-2); cursor: pointer; font: inherit; font-size: var(--t-sm);
}
.iconbtn:hover { color: var(--text); border-color: var(--text-2); }
.iconbtn svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.iconbtn kbd {
  font-family: var(--mono); font-size: 11px; color: var(--text-2);
  border: 1px solid var(--line); border-radius: 2px; padding: 0 .25rem; line-height: 1.35;
}
#navToggle { display: none; }

/* Translated navigation runs longer than the English, so the masthead sheds
   width in order: descriptor line, then nav padding, then the nav itself. */
@media (max-width: 1440px) { .brand__txt span { display: none; } }
@media (max-width: 1320px) {
  .masthead__in { gap: 1rem; }
  .nav a { padding-inline: .38rem; font-size: var(--t-sm); }
  .iconbtn kbd { display: none; }
}
@media (max-width: 620px) {
  .masthead__in { gap: .75rem; }
  .brand { flex: 1 1 auto; }
  .iconbtn { padding: 0 .4rem; }
}
/* On a phone the four tool buttons and the wordmark are competing for one row,
   so the locale code drops to its globe and the monogram steps down a size. */
@media (max-width: 480px) {
  .nav-tools { gap: .2rem; }
  .langsel .iconbtn span { display: none; }
  .langsel .iconbtn { gap: 0; }
  .brand { gap: .55rem; }
  .brand .mark { width: 1.875rem; height: 1.875rem; font-size: .8125rem; }
  .brand b { font-size: .9375rem; }
}
/* Noto Naskh, Noto Serif SC and the Greek fallback set the Latin wordmark wider
   than Newsreader does, so it steps down once more on the narrowest phones. */
@media (max-width: 380px) { .brand b { font-size: .875rem; } }

.nav-drawer { display: none; }
@media (max-width: 1200px) {
  .nav { display: none; }
  #navToggle { display: inline-flex; }
  .nav-drawer.is-open { display: block; border-top: 1px solid var(--line-soft); }
  .nav-drawer ul { list-style: none; margin: 0; padding: .75rem 0 1.25rem; }
  .nav-drawer a {
    display: block; padding: .7rem .25rem; color: var(--text); text-decoration: none;
    border-bottom: 1px solid var(--line-soft); font-size: var(--t-md);
  }
  .nav-drawer a[aria-current="page"] { color: var(--accent-ink); }
}

/* ---------- in-page section bar ------------------------------------------ */
.has-subnav { --subnav-h: 3.1rem; }
.subnav {
  position: sticky; top: var(--head-h); z-index: 80;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-block: 1px solid var(--line-soft);
}
.subnav ul {
  display: flex; gap: clamp(1.25rem, 3vw, 2.75rem);
  list-style: none; margin: 0; padding: 0;
  overflow-x: auto; scrollbar-width: none;
}
.subnav ul::-webkit-scrollbar { display: none; }
.subnav a {
  display: block; padding: .8rem 0; white-space: nowrap;
  font-size: var(--t-sm2); color: var(--text-2); text-decoration: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.subnav a:hover { color: var(--text); }
.subnav a[aria-current="true"] { color: var(--accent-ink); border-bottom-color: var(--accent); }
.progress { height: 2px; width: 0; background: var(--accent); transition: width .08s linear; }
@media (prefers-reduced-motion: reduce) { .progress { transition: none; } }
@media (max-width: 640px) {
  .subnav ul { gap: 1.25rem; }
  .subnav a { font-size: var(--t-sm); padding: .7rem 0; }
}

/* ---------- language suggestion ------------------------------------------ */
/* A quiet strip above the masthead, written in the language being offered.
   It scrolls away with the page and never returns once answered. */
.sugg { background: var(--bg-alt); border-bottom: 1px solid var(--line); }
.sugg__in {
  width: 100%; max-width: var(--wrap); margin-inline: auto; padding: .6rem var(--gut);
  display: flex; align-items: center; gap: .75rem;
}
.sugg__globe { width: 17px; height: 17px; flex: none; color: var(--accent-ink); fill: none; stroke: currentColor; stroke-width: 1.5; }
.sugg p { margin: 0; font-size: var(--t-sm2); color: var(--text); min-width: 0; }
.sugg__go {
  flex: none; font-size: var(--t-sm); font-weight: 550; text-decoration: none;
  color: var(--accent-ink); border: 1px solid var(--accent);
  border-radius: var(--r); padding: .3rem .7rem; margin-inline-start: auto;
}
.sugg__go:hover { background: var(--accent); color: #16110a; }
.sugg__x {
  flex: none; display: grid; place-items: center; width: 1.75rem; height: 1.75rem;
  background: none; border: 0; border-radius: var(--r); cursor: pointer; color: var(--text-2);
}
.sugg__x:hover { color: var(--text); background: var(--bg); }
.sugg__x svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
@media (max-width: 560px) {
  .sugg__in { gap: .5rem; padding-inline: var(--gut); }
  .sugg p { font-size: var(--t-sm); }
  .sugg__go { padding: .28rem .55rem; }
}

/* ---------- hero --------------------------------------------------------- */
/* Full-bleed photograph at its own proportions, name set on the frame over a
   bottom scrim so the face stays clear. Everything below follows the theme. */
.hero { background: var(--hero-bg); color: var(--hero-fg-2); }
.hero__banner { position: relative; border-bottom: 2px solid var(--accent); }
.hero__banner img { width: 100%; height: auto; display: block; }
/* The banner is the full width of the master photograph, 3.9:1 rather than the
   3.1:1 crop used before: about a fifth shorter at any viewport width, and the
   subject is proportionally smaller in the frame. It is never cropped by CSS.
   In the 3.1:1 crop the head ran from 8% to 72% of the height, so any cap deep
   enough to be worth having cut the chin, and the name then sat on the face. */
.hero__overlay {
  position: absolute; inset: auto 0 0 0;
  padding-block: clamp(3rem, 8vw, 6rem) clamp(1.35rem, 2.6vw, 2.1rem);
  background: linear-gradient(0deg,
    rgba(8,12,20,.8) 0%, rgba(8,12,20,.7) 24%, rgba(8,12,20,.48) 46%,
    rgba(8,12,20,.25) 66%, rgba(8,12,20,.08) 84%, rgba(8,12,20,0) 100%);
}
/* The name and the group set on one line, the gold rule between them doing the
   work of a separator. Baselines align, so the mono sits on the name's baseline
   rather than floating against a display face two or three times its size. It
   wraps to its own line when the name alone fills the column. */
.hero__name {
  display: flex; flex-wrap: wrap; align-items: baseline;
  column-gap: clamp(.9rem, 1.8vw, 1.5rem); row-gap: .45rem;
}
.hero__kicker {
  font-family: var(--mono); font-size: var(--t-xs); color: #e2b857;
  letter-spacing: .06em; margin: 0;
  display: flex; align-items: center; gap: .9rem;
}
.hero__kicker::before { content: ""; width: 1.75rem; height: 2px; background: #e2b857; flex: none; }
.hero h1 {
  font-family: var(--display);
  font-size: clamp(1.75rem, 4.4vw, 3.75rem);
  font-variation-settings: normal;
  /* a Garamond is cut with its own fit; the tight news-face tracking crowds it */
  font-weight: 500; line-height: 1.02; letter-spacing: -.008em;
  color: #fff; margin: 0; text-shadow: 0 1px 24px rgba(8,12,20,.45);
}
/* the Latin spelling under a name set in another script: every publication in
   the record is filed under it, so it stays legible and close by */
.hero__latin {
  font-family: var(--sans); font-size: clamp(.8125rem, 1.1vw, 1rem);
  font-weight: 400; letter-spacing: .06em;
  color: rgba(255,255,255,.72); margin: .55rem 0 0;
  text-shadow: 0 1px 18px rgba(8,12,20,.5);
}
/* Naskh and Song faces set a name much wider than a Garamond does */
:lang(ar) .hero h1 { font-size: clamp(1.375rem, 3.4vw, 2.75rem); line-height: 1.35; letter-spacing: 0; }
:lang(zh) .hero h1 { font-size: clamp(1.375rem, 3.5vw, 3rem); letter-spacing: .01em; }
.hero__masthead {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.25rem, 3vw, 3rem); align-items: center;
  padding-block: clamp(1.75rem, 3.5vw, 2.75rem);
}
.hero__role {
  font-size: clamp(1rem, 1.35vw, 1.125rem);
  color: var(--hero-fg-2); line-height: 1.6; margin: 0; max-width: 46em;
}
.hero__role b { color: var(--hero-fg); font-weight: 550; }
.hero__acts { display: flex; flex-wrap: wrap; gap: .75rem; }
@media (max-width: 860px) {
  .hero__masthead { grid-template-columns: minmax(0, 1fr); align-items: start; }
}
/* The three records that hold the full publication list, in their own band on
   the home page just before Recent publications. */
.profiles--flush { margin-bottom: 0; }

/* ---------- news ticker --------------------------------------------------- */
.ticker { position: relative; }
.ticker__rail { overflow-x: auto; scrollbar-width: none; scroll-behavior: auto; }
.ticker__rail::-webkit-scrollbar { display: none; }
.ticker__rail:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ticker__track { display: flex; gap: 1rem; padding: .5rem var(--gut) 1.25rem; width: max-content; }
.tick {
  flex: none; width: min(20.5rem, 76vw);
  display: flex; flex-direction: column; gap: .5rem;
  padding: 1.4rem 1.45rem 1.5rem; text-decoration: none; color: var(--text);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  border-top: 2px solid var(--line); box-shadow: 0 1px 2px rgba(11,18,32,.04);
  transition: border-top-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.tick:hover, .tick:focus-visible {
  border-top-color: var(--accent);
  box-shadow: 0 16px 32px -24px rgba(11,18,32,.6);
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) { .tick { transition: none; } .tick:hover { transform: none; } }
.tick__when { font-family: var(--mono); font-size: var(--t-xs); color: var(--accent-ink); }
.tick__t {
  font-family: var(--serif); font-variation-settings: "opsz" 20;
  font-size: 1.1875rem; font-weight: 500; line-height: 1.25; letter-spacing: -.008em;
}
.tick:hover .tick__t { color: var(--accent-ink); }
.tick__x { font-size: var(--t-sm2); line-height: 1.55; }
.ticker__btn {
  position: absolute; top: 50%; translate: 0 -50%; z-index: 4;
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); color: var(--text-2);
  opacity: 0; transition: opacity .15s;
}
.ticker:hover .ticker__btn, .ticker__btn:focus-visible { opacity: 1; }
.ticker__btn:hover { color: var(--accent-ink); border-color: var(--accent); }
.ticker__btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ticker__btn--prev { inset-inline-start: .75rem; }
.ticker__btn--next { inset-inline-end: .75rem; }
.ticker::before, .ticker::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: clamp(1.5rem, 5vw, 4rem);
  z-index: 3; pointer-events: none;
}
/* linear-gradient() takes physical directions only, so these flip under [dir="rtl"] */
.ticker::before { inset-inline-start: 0; background: linear-gradient(to right, var(--bg), transparent); }
.ticker::after { inset-inline-end: 0; background: linear-gradient(to left, var(--bg), transparent); }

/* ---------- buttons ------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .7rem 1.15rem; border-radius: var(--r);
  font-size: var(--t-sm2); font-weight: 550; text-decoration: none;
  border: 1px solid transparent; cursor: pointer; font-family: inherit;
}
.btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.btn--gold  { background: var(--gold); color: #16110a; border-color: var(--gold); }
.btn--gold:hover { background: #dcaa3c; border-color: #dcaa3c; }
.btn--ghost { color: var(--hero-fg); border-color: color-mix(in srgb, var(--hero-fg) 32%, transparent); }
.btn--ghost:hover { border-color: var(--hero-fg); background: color-mix(in srgb, var(--hero-fg) 8%, transparent); }
.btn--line  { color: var(--text); border-color: var(--line); }
.btn--line:hover { border-color: var(--text-2); background: var(--bg-alt); }

/* ---------- career spectrum (the signature element) ---------------------- */
.spectrum-block { border-top: 1px solid var(--hero-rule); padding-top: clamp(1.75rem, 3vw, 2.5rem); }
.spectrum-head {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: 1rem 2rem; margin-bottom: 1.75rem;
}
.spectrum-head h2 {
  font-size: clamp(1.25rem, 2.3vw, 1.625rem); color: var(--hero-fg); margin: 0;
  font-variation-settings: "opsz" 28;
}
.spectrum-head p { margin: .45rem 0 0; color: var(--hero-fg-2); font-size: var(--t-sm2); max-width: 44ch; }
.spectrum-legend { display: flex; align-items: center; gap: .55rem; color: var(--hero-fg-2); font-size: var(--t-xs); font-family: var(--mono); }
.spectrum-legend i { width: 9px; height: 9px; background: var(--spec-cell); display: block; border-radius: 1px; }

.spectrum {
  display: flex; align-items: flex-end; gap: clamp(2px, .55vw, 7px);
  overflow-x: auto; padding-bottom: .5rem;
  scrollbar-width: thin;
}
.spec-col {
  flex: 1 1 0; min-width: 9px;
  display: flex; flex-direction: column-reverse; justify-content: flex-start;
  gap: 2px; text-decoration: none; position: relative;
  padding-bottom: 1.9rem; border-radius: 2px;
}
.spec-col i {
  display: block; height: clamp(5px, .85vw, 8px);
  background: var(--spec-cell); opacity: .82; border-radius: 1px;
  transform-origin: bottom;
}
.spec-col::after {
  content: attr(data-short);
  position: absolute; inset-inline: 0; bottom: .45rem;
  text-align: center; font-family: var(--mono); font-size: 10px;
  color: var(--spec-label); letter-spacing: -.02em;
}
.spec-col--tick::after { color: var(--hero-fg-2); }
.spec-col:hover i, .spec-col:focus-visible i { opacity: 1; background: var(--hero-accent); }
.spec-col:hover::after { color: var(--hero-accent); }
.spec-col--empty i { display: none; }

/* On the publications page it is a reference strip rather than the opening
   statement, so the cells and labels are set at roughly half scale. */
.spectrum-block--compact { border-top: 0; padding-top: 0; }
.spectrum-block--compact .spectrum-head { margin-bottom: 1rem; }
.spectrum-block--compact .spectrum-head h2 {
  font-family: var(--sans); font-weight: 600; letter-spacing: -.005em;
  font-size: var(--t-md); font-variation-settings: normal;
}
.spectrum-block--compact .spectrum { padding-bottom: 0; }
.spectrum-block--compact .spec-col { padding-bottom: 1.35rem; gap: 1.5px; }
.spectrum-block--compact .spec-col i { height: 3px; }
.spectrum-block--compact .spec-col::after { bottom: .3rem; font-size: 9.5px; }

@media (prefers-reduced-motion: no-preference) {
  .js-spectrum .spec-col i { animation: grow .5s cubic-bezier(.2,.8,.3,1) backwards; }
  @keyframes grow { from { transform: scaleY(0); opacity: 0; } }
}
/* ---------- editorial research layout ------------------------------------ */
.theme-list { border-top: 1px solid var(--line); }
.theme {
  display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: 1rem 3rem; padding: clamp(1.75rem, 3.5vw, 2.5rem) 0;
  border-bottom: 1px solid var(--line);
}
.theme__head h3 { position: relative; padding-top: .9rem; }
.theme__head h3::before {
  content: ""; position: absolute; inset: 0 auto auto 0;
  width: 1.75rem; height: 2px; background: var(--accent);
}
.theme h3 { margin: 0; font-size: var(--t-lg); }
.theme__body p { max-width: 52em; }
.tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1rem; list-style: none; padding: 0; }
.tags li {
  font-family: var(--mono); font-size: 11px; letter-spacing: -.01em;
  padding: .2rem .5rem; border: 1px solid var(--line); border-radius: 2px; color: var(--text-2);
}
@media (max-width: 800px) { .theme { grid-template-columns: minmax(0, 1fr); gap: .6rem; } }

/* topic grid — deliberately flat, no shadow kit */
.topics { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1px; }
.topic {
  position: relative; background: var(--bg); padding: 1.6rem 1.5rem;
  box-shadow: 0 0 0 1px var(--line); transition: background .18s ease;
}
.topic::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 2px;
  background: var(--accent); transform: scaleY(0); transform-origin: center;
  transition: transform .22s ease;
}
.topic:hover { background: var(--surface); }
.topic:hover::before { transform: scaleY(1); }
.topic h4 { transition: color .18s ease; }
.topic:hover h4 { color: var(--accent-ink); }
/* two-line minimum so every body copy block starts on the same line */
.topics--even .topic h4 { min-height: 2.6em; }
.topic--link { text-decoration: none; color: inherit; display: block; }
.topic--link p { color: var(--text); }
.topic--link::after {
  content: ""; position: absolute; inset-inline-end: 1.25rem; bottom: 1.3rem;
  width: 9px; height: 9px;
  border-top: 1.5px solid var(--accent-ink); border-right: 1.5px solid var(--accent-ink);
  rotate: var(--chev, 45deg); opacity: 0; transition: opacity .2s ease, translate .2s ease;
  translate: -4px 0;
}
.topic--link:hover::after { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) { .topic--link::after { transition: none; } }
@media (prefers-reduced-motion: reduce) { .topic, .topic::before { transition: none; } }
.topic h4 {
  margin: 0 0 .45rem; font-size: 1.0625rem; font-family: var(--sans);
  font-weight: 600; letter-spacing: 0; line-height: 1.3;
}
.topic p { margin: 0; font-size: var(--t-sm2); line-height: 1.55; }

/* the home page shows only a handful, so they get a year rail and larger type */
.feature-pubs { border-top: 1px solid var(--line); }
.fpub {
  display: grid; grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: 0 clamp(1.25rem, 2.5vw, 2.25rem);
  padding: clamp(1.25rem, 2.4vw, 1.75rem) 0;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.fpub__year {
  font-family: var(--mono); font-size: var(--t-sm); color: var(--accent-ink);
  font-variant-numeric: tabular-nums; padding-top: .3rem;
  border-inline-end: 1px solid var(--line); margin-inline-end: -1px;
}
.fpub__t {
  font-family: var(--sans); font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  font-weight: 600; line-height: 1.35; letter-spacing: -.008em; margin: 0 0 .45rem;
}
.fpub__t a { color: var(--text); text-decoration: none; }
.fpub:hover .fpub__t a { color: var(--accent-ink); }
.fpub__au { font-size: var(--t-sm2); color: var(--text-soft); margin: 0 0 .3rem; line-height: 1.5; }
.fpub__au b { color: var(--text); font-weight: 600; }
.fpub__v { font-size: var(--t-sm2); color: var(--text-2); margin: 0; font-style: italic; }
/* Six entries stacked ran the length of a screen on their own; in two columns
   at a tighter rhythm the section is about a third of the height. */
.feature-pubs--compact { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(23rem, 100%), 1fr)); column-gap: clamp(2rem, 4vw, 3.5rem); }
.feature-pubs--compact .fpub { grid-template-columns: 3.5rem minmax(0, 1fr); padding: .95rem 0; gap: 0 1.1rem; }
.feature-pubs--compact .fpub__year { font-size: var(--t-xs); padding-top: .35rem; }
.feature-pubs--compact .fpub__t { font-size: 1rem; margin-bottom: .3rem; }
.feature-pubs--compact .fpub__au,
.feature-pubs--compact .fpub__v { font-size: var(--t-sm); }
.feature-pubs--compact .fpub__au { margin-bottom: .2rem; }

@media (max-width: 620px) {
  .fpub { grid-template-columns: minmax(0, 1fr); gap: .35rem; }
  .fpub__year { border-inline-end: 0; padding-top: 0; }
  .feature-pubs--compact .fpub { grid-template-columns: minmax(0, 1fr); gap: .3rem; }
}

/* ---------- publication entries ------------------------------------------ */
.pub {
  display: grid; grid-template-columns: 3.25rem minmax(0, 1fr);
  gap: 0 1.25rem; padding: 1.15rem 0; border-bottom: 1px solid var(--line-soft);
}
.pub { transition: background .15s ease; margin-inline: -1rem; padding-inline: 1rem; }
.pub:hover { background: var(--bg-alt); }
.pub__n {
  font-family: var(--mono); font-size: var(--t-xs); color: var(--text-2);
  padding-top: .3rem; font-variant-numeric: tabular-nums;
}
.pub:hover .pub__n { color: var(--accent-ink); }
.pub__t { margin: 0 0 .3rem; font-family: var(--sans); font-size: 1.0625rem; font-weight: 600; line-height: 1.4; letter-spacing: 0; }
.pub__t a { color: var(--text); text-decoration: none; }
.pub__t a:hover { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.pub__au { font-size: var(--t-sm2); color: var(--text-2); margin: 0 0 .3rem; line-height: 1.5; }
.pub__au b { color: var(--text); font-weight: 600; }
.pub__v { font-size: var(--t-sm2); color: var(--text-2); margin: 0; }
.pub__v em { font-style: italic; }
.pub__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .55rem; }
.pub__meta a, .pub__bib {
  font-family: var(--mono); font-size: 11px; letter-spacing: -.01em;
  padding: .18rem .45rem; border: 1px solid var(--line); border-radius: 2px;
  color: var(--text-2); text-decoration: none; background: none; cursor: pointer;
}
.pub__meta a:hover, .pub__bib:hover { color: var(--accent-ink); border-color: var(--accent); }
.pub__type {
  font-family: var(--mono); font-size: 11px; color: var(--accent-ink);
  border: 1px solid var(--gold-soft); background: var(--gold-soft);
  border-radius: 2px; padding: .18rem .45rem;
}
[data-theme="dark"] .pub__type { border-color: #35301c; }
.yearhead {
  display: flex; align-items: baseline; gap: 1rem;
  font-family: var(--mono); font-size: var(--t-sm); color: var(--text-2);
  padding: 2rem 0 .65rem; border-bottom: 1px solid var(--line);
  position: sticky; top: calc(var(--head-h) + var(--subnav-h)); background: var(--bg); z-index: 5;
}
.yearhead b { font-size: var(--t-md); color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.yearhead span { margin-inline-start: auto; }
@media (max-width: 640px) { .pub { grid-template-columns: minmax(0, 1fr); } .pub__n { padding: 0 0 .25rem; } }

/* ---------- publication explorer controls -------------------------------- */
.explorer { display: grid; grid-template-columns: minmax(0,1fr) 11rem; gap: 0 2.5rem; align-items: start; }
@media (max-width: 950px) { .explorer { grid-template-columns: minmax(0, 1fr); } .yearrail { display: none; } }

.controls { position: sticky; top: calc(var(--head-h) + var(--subnav-h)); z-index: 8; background: var(--bg); padding-block: 1rem; border-bottom: 1px solid var(--line); }
.search {
  display: flex; align-items: center; gap: .65rem;
  border: 1px solid var(--line); border-radius: var(--r); padding: .65rem .85rem; background: var(--surface);
}
.search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--gold-soft); }
.search svg { width: 18px; height: 18px; stroke: var(--text-2); fill: none; stroke-width: 1.7; flex: none; }
.search input { flex: 1; border: 0; background: none; font: inherit; color: var(--text); min-width: 0; }
.search input:focus { outline: none; }
.search input::placeholder { color: var(--text-2); }
.search button { border: 0; background: none; color: var(--text-2); cursor: pointer; font: inherit; padding: 0 .2rem; }

.filters { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .85rem; }
.filters button {
  font-family: var(--mono); font-size: var(--t-xs); letter-spacing: -.01em;
  padding: .32rem .6rem; border: 1px solid var(--line); border-radius: 2px;
  background: none; color: var(--text-2); cursor: pointer;
}
.filters button:hover { color: var(--text); border-color: var(--text-2); }
.filters button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #f2f5fa; }
[data-theme="dark"] .filters button[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: #16110a; }
.count { margin-top: .8rem; font-size: var(--t-sm); color: var(--text-2); font-family: var(--mono); }

.yearrail { position: sticky; top: calc(var(--head-h) + var(--subnav-h) + 1.25rem); font-family: var(--mono); font-size: var(--t-xs); }
.yearrail ol { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 1rem; }
.yearrail a { display: block; padding: .2rem 0; color: var(--text-2); text-decoration: none; font-variant-numeric: tabular-nums; }
.yearrail a:hover { color: var(--accent-ink); }
.yearrail a b { color: var(--text-2); font-weight: 400; opacity: .55; margin-inline-start: .35rem; }

.empty { padding: 3.5rem 0; color: var(--text-2); border-bottom: 1px solid var(--line-soft); }
.empty b { display: block; color: var(--text); font-size: var(--t-md); margin-bottom: .35rem; font-family: var(--serif); font-weight: 500; }

/* ---------- external profiles -------------------------------------------- */
.profiles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem; margin-bottom: 2.5rem;
}
.profile {
  position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: 0 1px 2px rgba(11,18,32,.04);
  padding: 1.35rem 1.4rem 1.2rem; text-decoration: none; color: var(--text);
  display: flex; flex-direction: column; gap: .35rem;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.profile::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 2px;
  background: var(--accent); transform: scaleY(0); transform-origin: top;
  transition: transform .22s ease;
}
.profile:hover, .profile:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  box-shadow: 0 14px 30px -22px rgba(11,18,32,.55);
  transform: translateY(-2px);
}
.profile:hover::before, .profile:focus-visible::before { transform: scaleY(1); }
.profile b { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.005em; }
.profile:hover b { color: var(--accent-ink); }
.profile span { font-size: var(--t-sm2); line-height: 1.5; }
.profile .mono {
  color: var(--text-2); margin-top: auto; padding-top: .9rem;
  display: flex; align-items: center; gap: .4rem;
}
.profile .mono::after {
  content: ""; width: 9px; height: 9px; flex: none;
  border-top: 1.4px solid currentColor; border-right: 1.4px solid currentColor;
  rotate: var(--chev, 45deg); translate: 0 -1px;
}
@media (prefers-reduced-motion: reduce) { .profile { transition: none; } .profile:hover { transform: none; } }

/* ---------- books -------------------------------------------------------- */
/* Every card is the same height with its metadata and link pinned to the foot,
   so the four titles wrapping to different depths never breaks the baseline. */
.books { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: clamp(1.25rem, 2.5vw, 2rem); }
.book { display: flex; flex-direction: column; }
.book__cover {
  background: linear-gradient(170deg, var(--surface), var(--bg-alt) 70%);
  border: 1px solid var(--line); border-radius: var(--r);
  height: clamp(11rem, 18vw, 14rem);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 1.5rem 1.25rem 0; margin-bottom: 1.1rem; overflow: hidden;
}
.book__cover img {
  max-height: 100%; width: auto;
  box-shadow: 0 2px 5px rgba(11,18,32,.2), 0 16px 30px -16px rgba(11,18,32,.5);
  transition: transform .25s ease;
}
.book:hover .book__cover img { transform: translateY(-5px); }
.book__body { display: flex; flex-direction: column; flex: 1; }
.book__year {
  font-family: var(--mono); font-size: var(--t-xs); color: var(--accent-ink);
  margin: 0 0 .4rem; letter-spacing: .02em;
}
.book h3 { font-size: var(--t-md); margin: 0 0 .35rem; line-height: 1.2; }
.book__who { font-size: var(--t-sm2); color: var(--text-soft); margin: 0 0 .6rem; }
.book__blurb { font-size: var(--t-sm2); margin: 0 0 .75rem; line-height: 1.55; }
.book__isbn { margin: auto 0 .7rem; color: var(--text-2); font-size: var(--t-xs); }
.book__link {
  align-self: flex-start; display: inline-flex; align-items: center; gap: .45rem;
  font-size: var(--t-sm2); font-weight: 550; text-decoration: none;
  padding-bottom: 2px; border-bottom: 1px solid color-mix(in srgb, var(--accent) 50%, transparent);
}
.book__link::after {
  content: ""; width: 8px; height: 8px; flex: none;
  border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor;
  rotate: var(--chev, 45deg); translate: 0 -1px;
}
.book__link:hover { border-bottom-color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .book__cover img { transition: none; } }

/* ---------- people -------------------------------------------------------- */
/* Rows rather than boxes: a small unframed portrait under a gold rule, matching
   the treatment used for the portrait on the About page. */
.people { border-top: 1px solid var(--line); }
.person {
  display: grid; grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 2.25rem; align-items: start;
  padding: clamp(1.5rem, 3vw, 2.25rem) 0; border-bottom: 1px solid var(--line);
}
.person__ph { width: 7.5rem; }
.person__ph img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block;
  border-bottom: 2px solid var(--accent);
}
.person h3 { font-size: var(--t-lg); margin: 0 0 .15rem; }
.person .role { font-size: var(--t-sm); color: var(--accent-ink); font-family: var(--mono); margin: 0 0 .7rem; }
.person p { font-size: var(--t-base); margin: 0; max-width: 50em; }
@media (max-width: 620px) {
  .person { grid-template-columns: 5.5rem minmax(0, 1fr); gap: 1.25rem; }
  .person__ph { width: 5.5rem; }
}

/* Four dated lines do not need the depth the news timeline is built for. */
.entries--tight .entry { grid-template-columns: minmax(0, 6rem) minmax(0, 1fr); padding: .85rem 0; gap: .2rem 2rem; }
.entries--tight .entry h3 { font-size: var(--t-md); margin-bottom: .15rem; }
.entries--tight .entry p { margin: 0; font-size: var(--t-sm2); color: var(--text-soft); }
@media (max-width: 760px) { .entries--tight .entry { grid-template-columns: minmax(0, 1fr); } }

.roster { border-top: 1px solid var(--line); }
/* Fifteen names read as a wall in one column. Column-major fill, so the list
   still runs top to bottom in date order down each column, while the rows are
   real grid rows and line up across both. The row count comes from the markup,
   since it depends on how many names there are. */
.roster--cols {
  display: grid; grid-auto-flow: column;
  grid-template-rows: repeat(var(--roster-rows, 8), auto);
  column-gap: clamp(1.25rem, 2.5vw, 2.25rem);
}
/* No wrapping: the date stays on the first line and a long name gives way. */
.roster.roster--cols li { flex-wrap: nowrap; gap: .3rem .6rem; }
.roster.roster--cols b { min-width: 0; }
.roster.roster--cols .mono { white-space: nowrap; font-size: var(--t-xs); }
@media (max-width: 620px) {
  .roster--cols { grid-auto-flow: row; grid-template-rows: none; }
  .roster.roster--cols li { flex-wrap: wrap; }
}
.roster li {
  display: flex; flex-wrap: wrap; gap: .3rem 1rem; align-items: baseline;
  padding: .8rem 0; border-bottom: 1px solid var(--line-soft);
}
.roster { list-style: none; padding: 0; margin: 0; }
.roster b { font-weight: 600; }
.roster .mono { margin-inline-start: auto; color: var(--text-2); }

/* ---------- timeline / news ---------------------------------------------- */
.entries { border-top: 1px solid var(--line); }
.entry {
  display: grid; grid-template-columns: minmax(0, 10rem) minmax(0, 1fr);
  gap: .5rem 3rem; padding: clamp(1.5rem, 3vw, 2.25rem) 0; border-bottom: 1px solid var(--line);
}
.entry__when { font-family: var(--mono); font-size: var(--t-sm); color: var(--text-2); padding-top: .2rem; }
.entry h3 { margin: 0 0 .5rem; font-size: var(--t-lg); }
.entry__body p { max-width: 54em; }
@media (max-width: 760px) { .entry { grid-template-columns: minmax(0, 1fr); gap: .35rem; } }

/* ---------- facts / definition rows -------------------------------------- */
.facts { margin: 0; border-top: 1px solid var(--line); }
.facts > div {
  display: grid; grid-template-columns: minmax(0, 8rem) minmax(0, 1fr);
  gap: .35rem 1.75rem; padding: .9rem 0; border-bottom: 1px solid var(--line-soft);
}
.mail { overflow-wrap: normal; word-break: normal; hyphens: none; }
.facts dt { color: var(--text-2); font-size: var(--t-sm2); }
.facts dd { margin: 0; }
@media (max-width: 640px) { .facts > div { grid-template-columns: minmax(0, 1fr); } }

/* ---------- return to the top -------------------------------------------- */
/* Fixed, so it travels with the reader, and only once the first screen is
   behind them. `inset-inline-end` keeps it on the correct side under RTL. */
.totop {
  position: fixed; z-index: 100;
  inset-inline-end: clamp(1rem, 2.5vw, 2rem);
  bottom: clamp(1rem, 2.5vw, 2rem);
  width: 2.75rem; height: 2.75rem; padding: 0;
  display: grid; place-items: center;
  background: var(--accent); color: #1a1405;
  border: 1px solid color-mix(in srgb, var(--accent) 65%, #000);
  border-radius: 50%; cursor: pointer;
  box-shadow: 0 6px 18px -6px rgba(11,18,32,.5);
  opacity: 0; visibility: hidden; translate: 0 .5rem;
  transition: opacity .25s ease, visibility .25s ease, translate .25s ease,
              background .18s ease, color .18s ease;
}
.totop svg {
  width: 19px; height: 19px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.totop.is-on { opacity: .94; visibility: visible; translate: 0 0; }
.totop:hover { opacity: 1; background: var(--gold-deep); color: #fff; }
.totop:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; opacity: 1; visibility: visible; translate: 0 0; }
@media (prefers-reduced-motion: reduce) { .totop { transition: none; } }

/* ---------- pull quote --------------------------------------------------- */
.pull {
  border-inline-start: 2px solid var(--accent); padding-block: .35rem; padding-inline-start: 1.75rem;
  margin: 2.5rem 0; max-width: 34em;
}
.pull p {
  font-family: var(--serif); font-variation-settings: "opsz" 24;
  font-size: clamp(1.25rem, 2.6vw, 1.625rem); line-height: 1.4; font-weight: 350;
  letter-spacing: -.008em; margin: 0;
}

/* ---------- split (text + figure) ---------------------------------------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.split--narrow { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.split--top { align-items: start; }
@media (max-width: 860px) { .split, .split--narrow { grid-template-columns: minmax(0, 1fr); } }
.figure img { width: 100%; border: 1px solid var(--line); }

/* portrait column: narrow, unframed, with a rule instead of a box */
.split-portrait {
  display: grid; grid-template-columns: minmax(0, 15.5rem) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem); align-items: start;
}
.split-portrait > div { max-width: 40em; }
.portrait { max-width: 15.5rem; }
.portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 12%; }
.portrait figcaption {
  margin-top: .85rem; padding-top: .8rem;
  border-top: 2px solid var(--accent);
  font-size: var(--t-sm); color: var(--text-2); line-height: 1.5;
}
@media (max-width: 760px) {
  .split-portrait { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .portrait { max-width: 11rem; }
}
.figure figcaption { font-size: var(--t-sm); color: var(--text-2); margin-top: .7rem; }

/* ---------- callout ------------------------------------------------------ */
.callout {
  border: 1px solid var(--line); border-inline-start: 2px solid var(--accent);
  border-radius: 0 var(--r) var(--r) 0;
  padding: clamp(1.35rem, 3vw, 2rem); background: var(--surface);
  box-shadow: 0 12px 28px -24px rgba(11,18,32,.5);
}
.callout h3 { font-size: var(--t-md); margin-bottom: .45rem; }
.callout p:last-child { margin-bottom: 0; }

/* ---------- link list ---------------------------------------------------- */
.linklist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.linklist li { border-bottom: 1px solid var(--line-soft); }
.linklist a {
  display: flex; align-items: baseline; gap: 1rem; padding: .95rem .25rem;
  color: var(--text); text-decoration: none;
}
.linklist a:hover { background: var(--bg-alt); color: var(--accent-ink); }
.linklist .mono { margin-inline-start: auto; color: var(--text-2); flex: none; }

/* ---------- page header -------------------------------------------------- */
.pagehead { border-bottom: 1px solid var(--line); background: var(--bg-alt); }
.pagehead__in { padding-block: clamp(2.75rem, 6vw, 4.5rem); }
.crumb { font-family: var(--mono); font-size: var(--t-xs); color: var(--text-2); margin-bottom: 1rem; }
.crumb a { color: var(--text-2); text-decoration: none; }
.crumb a:hover { color: var(--accent-ink); }
.pagehead h1 { font-size: clamp(2.25rem, 5.5vw, 3.5rem); font-variation-settings: "opsz" 72; margin-bottom: .35em; }
.pagehead .lead { max-width: 44em; }

/* Photographic variant: the title sits on the frame over a scrim rising from
   the foot of the image, matching the treatment used on the home page. */
.pagehead--img { position: relative; border-bottom: 0; background: #0b1220; isolation: isolate; }
.pagehead--img .pagehead__band { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.pagehead--img .pagehead__band img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%;
}
.pagehead--img::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(0deg,
    rgba(8,12,20,.93) 0%, rgba(8,12,20,.86) 26%, rgba(8,12,20,.68) 48%,
    rgba(8,12,20,.4) 70%, rgba(8,12,20,.15) 88%, rgba(8,12,20,0) 100%);
}
.pagehead--img .pagehead__in {
  min-height: clamp(15rem, 27vw, 23rem);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-block: clamp(3.5rem, 9vw, 6.5rem) clamp(1.75rem, 3.5vw, 2.75rem);
}
.pagehead--img h1 { color: #fff; text-shadow: 0 1px 24px rgba(8,12,20,.4); }
.pagehead--img .lead { color: #ccd6e6; }
.pagehead--img .crumb, .pagehead--img .crumb a { color: #9fb0cb; }
.pagehead--img .crumb a:hover { color: #e2b857; }

/* ---------- footer ------------------------------------------------------- */
.foot { background: var(--ink); color: #a9b6cd; margin-top: auto; }
[data-theme="dark"] .foot { background: #060a11; border-top: 1px solid #141e31; }

/* a closing invitation, rather than ending on a link list */
.foot__cta {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.5rem, 3vw, 3rem); align-items: center;
  padding-block: clamp(2.5rem, 5vw, 3.75rem);
  border-bottom: 1px solid #16203a;
}
.foot__cta-lead {
  font-family: var(--serif); font-variation-settings: "opsz" 28;
  font-size: clamp(1.375rem, 2.4vw, 1.875rem); line-height: 1.25; font-weight: 400;
  letter-spacing: -.012em; color: #f2f5fa; margin: 0 0 .7rem; max-width: 28ch;
}
.foot__cta-sub { font-size: var(--t-sm2); color: #96a4bd; margin: 0; max-width: 46em; line-height: 1.6; }
.foot__cta-acts { display: flex; flex-wrap: wrap; gap: .75rem; }
.foot__cta .btn--ghost { color: #e8edf6; border-color: rgba(255,255,255,.3); }
.foot__cta .btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,.08); }
@media (max-width: 800px) { .foot__cta { grid-template-columns: minmax(0, 1fr); } }

.foot__grid {
  display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3rem); padding-block: clamp(2.5rem, 5vw, 3.5rem);
}
@media (max-width: 900px) { .foot__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 560px) { .foot__grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; } }
.foot h2 {
  font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .06em;
  color: #6f7f9c; margin: 0 0 1rem; font-weight: 400;
}
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: .55rem; }
.foot a { color: #c6d1e2; text-decoration: none; font-size: var(--t-sm2); }
.foot a:hover { color: #e2b857; text-decoration: underline; text-underline-offset: 3px; }
.foot__brand { display: flex; align-items: center; gap: .7rem; margin-bottom: 1rem; color: #f2f5fa; }
.foot__brand .mark { border-color: #e2b857; color: #e2b857; }
.foot__brand b { font-family: var(--display); font-weight: 600; font-size: 1.1875rem; font-variation-settings: normal; }
.foot address { font-style: normal; font-size: var(--t-sm2); line-height: 1.7; }

/* the map sits in a frame with its own ground, so a blocked embed degrades to
   a quiet panel rather than a black void */
/* Full-width map band. The grid ground means a blocked or slow embed shows a
   quiet panel rather than a black void. */
.foot__map {
  height: clamp(11rem, 18vw, 16rem); overflow: hidden;
  border-bottom: 1px solid #16203a;
  background: #111b2e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M0 20h40M20 0v40' stroke='%231b2740' stroke-width='1'/%3E%3C/svg%3E");
}
.foot__map iframe { width: 100%; height: 100%; border: 0; display: block; }

.foot__base {
  border-top: 1px solid #16203a; padding-block: 1.5rem;
  display: flex; flex-wrap: wrap; gap: .75rem 2rem; align-items: center;
  font-size: var(--t-sm); color: #6f7f9c;
}
.foot__base p { margin: 0; }

/* ---------- command palette ---------------------------------------------- */
.palette { border: 0; padding: 0; background: none; max-width: 40rem; width: calc(100% - 2rem); margin-top: 9vh; }
.palette::backdrop { background: rgba(7,11,20,.55); backdrop-filter: blur(3px); }
.palette__box { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 24px 60px -18px rgba(7,11,20,.5); overflow: hidden; }
.palette__in { display: flex; align-items: center; gap: .7rem; padding: .95rem 1.1rem; border-bottom: 1px solid var(--line); }
.palette__in svg { width: 18px; height: 18px; stroke: var(--text-2); fill: none; stroke-width: 1.7; flex: none; }
.palette__in input { flex: 1; border: 0; background: none; font: inherit; font-size: var(--t-md); color: var(--text); min-width: 0; }
.palette__in input:focus { outline: none; }
.palette__list { list-style: none; margin: 0; padding: .4rem; max-height: 55vh; overflow-y: auto; }
.palette__list li a {
  display: flex; align-items: baseline; gap: .75rem; padding: .55rem .7rem;
  border-radius: var(--r); color: var(--text); text-decoration: none; font-size: var(--t-sm2);
}
.palette__list li a small { color: var(--text-2); font-size: var(--t-xs); margin-inline-start: auto; font-family: var(--mono); flex: none; }
.palette__list li a strong { font-weight: 450; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette__list li[aria-selected="true"] a, .palette__list li a:hover { background: var(--bg-alt); color: var(--accent-ink); }
.palette__foot { padding: .6rem 1.1rem; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 11px; color: var(--text-2); display: flex; gap: 1.1rem; }

/* ---------- language switcher -------------------------------------------- */
.langsel { position: relative; }
.langsel .iconbtn { gap: .35rem; }
.langsel .iconbtn span { font-family: var(--mono); font-size: 11px; letter-spacing: .02em; }
.langsel__menu {
  position: absolute; inset-inline-end: 0; top: calc(100% + .4rem); z-index: 95;
  min-width: 16.5rem; margin: 0; padding: .3rem; list-style: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: 0 18px 40px -20px rgba(11,18,32,.5);
}
.langsel__menu[hidden] { display: none; }
.langsel__menu a {
  display: flex; align-items: baseline; gap: .6rem;
  padding: .5rem .65rem; border-radius: var(--r);
  color: var(--text); text-decoration: none; font-size: var(--t-sm2);
  white-space: nowrap;
}
.langsel__menu a > span { flex: none; }
.langsel__menu a:hover { background: var(--bg-alt); color: var(--accent-ink); }
.langsel__menu a[aria-current="true"] { color: var(--accent-ink); font-weight: 600; }
/* the English name, so the list reads as alphabetical whatever script you use */
.langsel__menu a em {
  font-style: normal; margin-inline-start: auto; flex: none;
  color: var(--text-2); font-size: var(--t-sm); white-space: nowrap;
}
/* a dot marks a locale still awaiting translation */
.langsel__menu a i {
  font-style: normal; color: var(--accent); font-size: 17px; line-height: 1;
  margin-inline-start: .4rem;
}
.langsel__menu a:has(em) i { margin-inline-start: .4rem; }

/* ---------- right-to-left ------------------------------------------------- */
[dir="rtl"] { --chev: 225deg; }
[dir="rtl"] .sec-mark::after { background: linear-gradient(to left, var(--line), transparent); }
[dir="rtl"] .nav a[aria-current="page"],
[dir="rtl"] .subnav a[aria-current="true"] { box-shadow: none; }
[dir="rtl"] .hero__kicker::before,
[dir="rtl"] .theme__head h3::before { inset-inline-start: 0; }
[dir="rtl"] .book__link::after,
[dir="rtl"] .more::after,
[dir="rtl"] .profile .mono::after { rotate: 225deg; }
[dir="rtl"] .more:hover::after { translate: -3px -1px; }
[dir="rtl"] .topic--link:hover::after { translate: 0 0; }
[dir="rtl"] .spectrum { direction: ltr; }          /* the years read 1998 -> 2026 either way */
[dir="rtl"] .mono, [dir="rtl"] .pub__meta, [dir="rtl"] .book__isbn { direction: ltr; text-align: start; }
[dir="rtl"] .ticker::before { background: linear-gradient(to left, var(--bg), transparent); }
[dir="rtl"] .ticker::after { background: linear-gradient(to right, var(--bg), transparent); }
[dir="rtl"] .ticker__btn svg { scale: -1 1; }

/* ---------- toast -------------------------------------------------------- */
.toast {
  position: fixed; left: 50%; bottom: 2rem; translate: -50% 0; z-index: 120;
  background: var(--ink); color: #f2f5fa; padding: .6rem 1rem; border-radius: var(--r);
  font-size: var(--t-sm); box-shadow: var(--shadow); opacity: 0; pointer-events: none;
  transition: opacity .18s, translate .18s;
}
.toast.is-on { opacity: 1; translate: -50% -.35rem; }
[data-theme="dark"] .toast { background: #e4e9f2; color: #0b1220; }

/* ---------- utilities ---------------------------------------------------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.page { display: flex; flex-direction: column; min-height: 100vh; }
.themed-hide { display: none; }

/* ---------- print -------------------------------------------------------- */
@media print {
  .masthead, .foot__map, .controls, .yearrail, .palette, .nav-tools, .hero__acts, .spectrum-block { display: none !important; }
  body { background: #fff; color: #000; font-size: 10.5pt; }
  .hero { background: #fff; }
  .hero__img, .hero::after { display: none; }
  .hero h1, .hero__role { color: #000; }
  .band { padding-block: 1.25rem; }
  .pub { break-inside: avoid; page-break-inside: avoid; }
  a { color: #000; text-decoration: none; }
  .pub__meta a::after { content: " (" attr(href) ")"; font-size: 8pt; color: #555; }
}