/* =========================================================================
   Shared by every page: tokens, the dark tone, the name's scramble styles,
   the site bar (docked name + nav) and the small-screen index.
   Page-specific behaviour (the home page's undocked bar, the publications
   page's bar stepping aside) lives in each page's own <style>.
   ========================================================================= */

/* Registered so the bar can animate between tones. */
@property --bg    { syntax: '<color>'; inherits: true; initial-value: #FAFAFA; }
@property --ink   { syntax: '<color>'; inherits: true; initial-value: #1E1E1E; }
@property --muted { syntax: '<color>'; inherits: true; initial-value: rgba(30, 30, 30, .52); }
@property --rule  { syntax: '<color>'; inherits: true; initial-value: rgba(30, 30, 30, .12); }

:root {
  --bg: #FAFAFA;
  --ink: #1E1E1E;
  --accent: #E01D74;
  --muted: rgba(30, 30, 30, .52);
  --rule: rgba(30, 30, 30, .12);

  --gutter: clamp(16px, 4vw, 56px);
  --bar-h: 72px;

  /* Plex Mono is in the serif stack for the scramble's ↑ ↓, which Newsreader lacks. */
  --serif: "Newsreader", "IBM Plex Mono", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "IBM Plex Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --ease-out: cubic-bezier(.2, .7, .1, 1);
}
@media (max-width: 760px) {
  :root { --bar-h: 60px; }
}

/* Dark tone: the same palette, inverted. The accent is lifted slightly so it
   holds the same contrast on dark (4.4:1) as #E01D74 does on light. */
[data-tone="dark"],
[data-bar="dark"] .site-bar {
  --bg: #1E1E1E;
  --ink: #FAFAFA;
  --accent: #EC3A86;
  --muted: rgba(250, 250, 250, .55);
  --rule: rgba(250, 250, 250, .14);
}
[data-tone="dark"] { background: var(--bg); color: var(--ink); }

/* ---------- Name scramble (any .ns element: the hero name, the docked name) ---------- */
.ns { --ns-ink: var(--ink); --ns-accent: var(--accent); }
.ns.is-scrambling .ns-text { color: transparent; animation: none; }
.ns .ns-overlay { position: absolute; inset: 0; pointer-events: none; }
.ns .ns-cell {
  position: absolute;
  white-space: pre;
  text-align: center;
  letter-spacing: 0;
  color: var(--ns-accent);
  transition: color .45s ease, opacity .45s ease;
}
.ns .ns-cell.is-resolved { text-align: left; color: var(--ns-ink); }
.ns .ns-cell.is-mini { font-size: .32em; }
.ns .ns-cell.is-fading { opacity: 0; }

/* ---------- Site bar ---------- */
/* Identical on every page, so the page transition can hold it still. Its
   background is opaque because the transition stacks two copies of it. */
.site-bar {
  position: fixed;
  z-index: 10;
  inset: 0 0 auto 0;
  height: var(--bar-h);
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  color: var(--ink);
  font-size: 16px;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  view-transition-name: site-bar;
  transition: --bg .3s ease, --ink .3s ease, --muted .3s ease, --rule .3s ease;
}
.site-bar::before, .site-bar::after { content: ""; position: absolute; pointer-events: none; }
.site-bar::before { inset: 0; z-index: -1; background: var(--bg); }
.site-bar::after {
  left: var(--gutter); right: var(--gutter); bottom: 0;
  height: 1px;
  background: var(--rule);
  transform-origin: left;
}

/* The docked name: a real 24px element. */
.site-name {
  position: relative;
  top: 1px;
  font: 400 24px/1 var(--serif);
  font-variation-settings: "opsz" 72;
  letter-spacing: -0.015em;
  font-kerning: normal;
  white-space: nowrap;
  text-decoration: none;
  color: var(--ink);
}

/* ---------- Site nav ---------- */
.site-nav ul {
  position: relative;
  display: flex;
  gap: 2.75rem;
  margin: 0; padding: 0;
  list-style: none;
  font: 400 .8125rem/1 var(--mono);
  letter-spacing: .01em;
}
.site-nav a {
  position: relative;
  display: inline-block;
  padding: .5rem 0;
  color: inherit;
  text-decoration: none;
  white-space: pre;
}
@media (max-width: 900px) {
  .site-nav ul { gap: 2rem; }   /* six words still clear the name down to 761px */
}
.site-nav a .sym { color: var(--accent); }

/* Hover: overlap brackets close around the word. */
.site-nav a::before, .site-nav a::after {
  position: absolute;
  top: .5rem;
  color: var(--accent);
  opacity: 0;
  transition: opacity .2s ease, transform .25s var(--ease-out);
}
.site-nav a::before { content: "["; left: -.85em; transform: translateX(-4px); }
.site-nav a::after  { content: "]"; right: -.85em; transform: translateX(4px); }
.site-nav a:hover::before, .site-nav a:hover::after,
.site-nav a:focus-visible::before, .site-nav a:focus-visible::after { opacity: 1; transform: none; }
.site-nav a:focus-visible { outline: none; }

/* Current page or section: the transcript's analyst arrow (placed by site.js). */
.site-mark {
  position: absolute;
  top: .5rem;
  left: 0;
  color: var(--accent);
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease;
}
.site-mark.is-on { opacity: 1; }
.site-mark.is-moving { transition: transform .5s var(--ease-out), opacity .3s ease; }

/* ---------- Small screens: an index button and a full-height sheet ---------- */
.site-menu {
  display: none;
  margin-left: auto;
  padding: .5rem 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: .8125rem/1 var(--mono);
  cursor: pointer;
}
.site-menu .b { color: var(--accent); }
.site-sheet {
  position: fixed;
  z-index: 9;
  inset: 0;
  padding: calc(var(--bar-h) + 2rem) var(--gutter) 2rem;
  background: var(--bg);
  color: var(--ink);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility 0s .25s;
}
.site-sheet.is-open { opacity: 1; visibility: visible; transition: opacity .25s ease; }
.site-sheet ol { list-style: none; margin: 0; padding: 0; }
.site-sheet li { border-bottom: 1px solid var(--rule); }
.site-sheet a {
  display: block;
  padding: .9rem 0;
  color: inherit;
  text-decoration: none;
  font: 400 2.25rem/1.1 var(--serif);
  font-variation-settings: "opsz" 72;
}
.site-sheet a[aria-current] { color: var(--accent); }
@media (max-width: 760px) {
  .site-nav { display: none; }
  .site-menu { display: block; }
  .site-name { font-size: 20px; }
}