/* Fonts (Bodoni Moda + Newsreader) load via preconnect + <link> in each page's
   <head> — an @import here would serialize behind the stylesheet download. */

/* ─────────────────────────────────────────────────────────────
   styles.css — the broadsheet design system for section pages.
   Morning edition (light) by default; the evening edition (dark)
   via html[data-theme="dark"]. Zero radii, hairline rules,
   Bodoni Moda display over Newsreader text, Prussian ink.
   ───────────────────────────────────────────────────────────── */

:root {
  --paper: #faf9f4;
  --ink: #10171e;
  --prussian: #003153;
  --royal: #00539b;
  --navy: #012169;
  --gray: #5b6672;
  --rule: rgba(16, 23, 30, .16);
  --rule-strong: rgba(16, 23, 30, .55);
  --band: rgba(1, 33, 105, .15);
  --accent: var(--prussian);
  --accent-soft: rgba(0, 49, 83, .09);
  --mono: "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  /* legacy hooks — inline HTML styles, ui.js overlays, daily.css */
  --bg: var(--paper);
  --panel: #ffffff;
  --panel-2: #f1efe8;
  --panel-3: #e9e6dc;
  --line: rgba(16, 23, 30, .16);
  --text: #10171e;
  --muted: #5b6672;
  --good: var(--prussian);
  --bad: var(--gray);
  color-scheme: light;
}

html[data-theme="dark"] {
  --paper: #0d141d;
  --ink: #e7e4da;
  --prussian: #8db6dd;
  --royal: #a8c8e8;
  --navy: #6ea6de;
  --gray: #939eab;
  --rule: rgba(231, 228, 218, .16);
  --rule-strong: rgba(231, 228, 218, .55);
  --band: rgba(110, 166, 222, .2);
  --accent-soft: rgba(141, 182, 221, .14);
  --panel: #101a26;
  --panel-2: #0d141d;
  --panel-3: #16202c;
  --line: rgba(231, 228, 218, .16);
  --text: #e7e4da;
  --muted: #939eab;
  color-scheme: dark;
}

/* section accents are consolidated: every desk of the paper prints
   in the same Prussian ink. Kept as no-ops for the section hooks. */
body[data-section="music"],
body[data-section="literature"],
body[data-section="research"] { --accent: var(--prussian); }

@view-transition { navigation: auto; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Newsreader", Georgia, serif;
  font-size: 17px;
  line-height: 1.55;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  transition: background-color .35s ease, color .35s ease;
}

::selection { background: var(--prussian); color: var(--paper); }
:focus-visible { outline: 2px solid var(--royal); outline-offset: 3px; }

a { color: var(--accent); text-decoration: none; transition: color .25s ease; }
a:hover {
  color: var(--royal);
  text-decoration: underline;
  text-decoration-color: var(--rule-strong);
  text-underline-offset: 3px;
}

/* ---------- header: the section front ---------- */
.site-header {
  position: relative;             /* own stacking context: dropdowns above content */
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  align-items: baseline;
  justify-content: space-between;
  width: min(100%, 1080px);
  margin: 0 auto;
  padding: 1.05rem 1.5rem .75rem;
  background: var(--paper);
  border-bottom: 1px solid var(--rule-strong);
  transition: background-color .35s ease;
}
.brand a {
  font-family: "Bodoni Moda", "Bodoni 72", Didot, serif;
  font-optical-sizing: auto;
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
}
.brand a:hover { color: var(--ink); text-decoration: none; }
.brand a span { color: var(--prussian); }
.nav-burger {
  display: none;
  font-family: "Newsreader", Georgia, serif;
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .2em;
  background: none;
  border: 1px solid var(--rule-strong);
  color: var(--ink);
  padding: .45em .9em;
  cursor: pointer;
  transition: color .25s ease, border-color .25s ease;
}
.nav-burger:hover { color: var(--royal); border-color: var(--royal); }

.primary-nav { display: flex; flex-wrap: wrap; gap: .2rem 1.6rem; align-items: baseline; }
.primary-nav a {
  white-space: nowrap;
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--ink);
  text-decoration: none;
  transition: color .25s ease;
}
.primary-nav a:hover { color: var(--royal); text-decoration: none; }
.primary-nav a.active { color: var(--prussian); }
.primary-nav a.active::after { content: " ●"; font-size: .5em; vertical-align: .25em; }

/* ---------- nav dropdowns ---------- */
.nav-drop { position: relative; }
.nav-drop-btn {
  font-family: "Newsreader", Georgia, serif;
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--ink);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: color .25s ease;
}
.nav-drop-btn::after { content: " ▾"; font-size: .85em; color: var(--gray); }
.nav-drop:hover .nav-drop-btn,
.nav-drop.open .nav-drop-btn { color: var(--royal); }
.nav-drop-btn.active { color: var(--prussian); }
.nav-drop-menu {
  display: none;
  position: absolute;
  top: calc(100% + .55rem);
  right: 0;                 /* nav sits at the header's right edge — open inward */
  left: auto;
  z-index: 40;
  min-width: 13rem;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  box-shadow: 0 0 0 4px var(--paper);   /* the paper mat */
  padding: .35rem 0;
}
.nav-drop-menu::before {
  /* invisible bridge over the .55rem gap to the button, so crossing it
     doesn't drop .nav-drop:hover and close the menu mid-travel */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -.55rem;
  height: .55rem;
}
.nav-drop:hover .nav-drop-menu,
.nav-drop:focus-within .nav-drop-menu,
.nav-drop.open .nav-drop-menu { display: block; }
.nav-drop-menu a {
  display: block;
  padding: .5rem 1.1rem;
  text-align: center;
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--ink);
  text-decoration: none;
  transition: color .25s ease, background-color .25s ease;
}
.nav-drop-menu a:hover, .nav-drop-menu a.active { background: var(--band); color: var(--royal); text-decoration: none; }
.nav-drop-menu a.active { color: var(--prussian); }
.nav-drop-menu .menu-note {
  padding: .3rem 1.1rem .35rem;
  text-align: center;
  color: var(--gray);
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
@media (max-width: 760px) {
  .nav-drop { width: 100%; }
  .nav-drop-btn { width: 100%; padding: .2rem 0; text-align: center; }
  .nav-drop-menu {
    position: static;
    display: none;
    box-shadow: none;
    border: 0;
    min-width: 0;
    padding: .3rem 0 0;
    animation: none;               /* display-toggled: never animate */
  }
  .nav-drop:hover .nav-drop-menu { display: none; }   /* hover is meaningless on touch */
  .nav-drop.open .nav-drop-menu { display: block !important; }
  .nav-drop-menu::before { content: none; }           /* static menu needs no hover bridge */
  .nav-drop-menu a { color: var(--gray); }
}

/* game-day marker on the nav */
.primary-nav a.game-day::after {
  content: " ●";
  color: var(--royal);
  font-size: .6em;
  vertical-align: .25em;
}

/* ---------- layout ---------- */
.page-shell {
  width: min(100%, 1080px);
  margin: 0 auto;
  padding: 0 1.5rem 3rem;
}

/* the section slug: eyebrow over a Bodoni headline, closed by an Oxford rule */
.page-hero {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem 2rem;
  flex-wrap: wrap;
  padding: 2rem 0 1.4rem;
  margin-bottom: calc(6px + 1.6rem);
  border-bottom: 3px solid var(--ink);
}
.page-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  border-bottom: 1px solid var(--ink);
}

.card {
  margin-bottom: 1.5rem;
  padding: 1.3rem 1.4rem 1.4rem;
  border: 1px solid var(--rule);
  background: var(--panel);
  transition: background-color .35s ease;
}

.eyebrow {
  margin: 0 0 .55rem;
  color: var(--prussian);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
}

h1, h2, h3 { margin: 0; line-height: 1.2; }
h1 {
  font-family: "Bodoni Moda", "Bodoni 72", Didot, serif;
  font-optical-sizing: auto;
  font-size: clamp(2.1rem, 4.6vw, 3.1rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: .01em;
  text-wrap: balance;
}
h2 {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 0 1rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink);
}
h2::after { content: ""; flex: 1; border-top: 1px solid var(--rule); }
h3 {
  font-family: "Bodoni Moda", "Bodoni 72", Didot, serif;
  font-optical-sizing: auto;
  font-size: 1.08rem;
  font-weight: 600;
}
.muted { color: var(--gray); }
.small-copy { font-size: .82rem; }
.tagline { margin: .8rem 0 0; color: var(--gray); font-size: 1.02rem; max-width: 46rem; }
.section-title-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .75rem 1rem;
  margin-bottom: .8rem;
  flex-wrap: wrap;
}
.section-title-row h2 { flex: 1; margin-bottom: 0; }
.two-col {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}
.col-stack > .card:last-child { margin-bottom: 0; }

/* ---------- buttons / chips ---------- */
.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; }
.btn {
  display: inline-block;
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .2em;
  text-decoration: none;
  color: var(--ink);
  background: none;
  padding: .65em 1.4em;
  border: 1px solid var(--rule-strong);
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.btn:hover { border-color: var(--prussian); color: var(--prussian); text-decoration: none; }
.btn.primary { background: var(--prussian); border-color: var(--prussian); color: var(--paper); }
.btn.primary:hover { background: var(--navy); border-color: var(--navy); color: var(--paper); }
.chip {
  display: inline-block;
  margin: .12rem .18rem .12rem 0;
  padding: .22em .65em;
  border: 1px solid var(--rule);
  color: var(--gray);
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .08em;
  transition: border-color .25s ease, color .25s ease;
}
.chip:hover { border-color: var(--rule-strong); color: var(--ink); }
.chip.dim { color: var(--gray); border-color: var(--rule); }
.tag {
  display: inline-block;
  padding: .1em .55em;
  border: 1px solid currentColor;
  color: var(--prussian);
  font-family: var(--mono);
  font-size: .64rem;
  font-weight: 400;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.tag.neutral { color: var(--gray); }

/* ---------- stat strip ---------- */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .75rem;
  margin-bottom: 1rem;
}
.stat-box {
  padding: .65rem .8rem .7rem;
  border: 1px solid var(--rule);
  border-top: 3px solid var(--ink);
  background: var(--panel);
}
.stat-box .stat-value {
  display: block;
  font-family: var(--mono);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}
.stat-box .stat-label {
  display: block;
  margin-top: .2rem;
  color: var(--gray);
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* ---------- coursework ---------- */
.semester-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(205px, 1fr));
  gap: 1.4rem 1.6rem;
}
.semester h3 {
  display: flex;
  align-items: baseline;
  gap: .45rem;
  margin-bottom: .55rem;
  padding-bottom: .4rem;
  border-bottom: 1px solid var(--rule-strong);
  font-family: "Newsreader", Georgia, serif;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink);
}
.semester ul { margin: 0; padding: 0; list-style: none; }
.semester li { padding: .28rem 0 0; font-size: .88rem; line-height: 1.35; color: var(--ink); }
.semester li .code {
  display: block;
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .08em;
  color: var(--gray);
  margin-top: .1rem;
}

/* ---------- timeline rows ---------- */
.entry { padding: .9rem 0 1rem; border-bottom: 1px solid var(--rule); }
.entry:first-of-type { padding-top: .1rem; }
.entry:last-of-type { border-bottom: 0; padding-bottom: .1rem; }
.entry-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .75rem;
  flex-wrap: wrap;
}
.entry-head .when {
  color: var(--gray);
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.entry .org { margin: .1rem 0 0; color: var(--gray); font-style: italic; font-size: .95rem; }
.entry .org.plain { color: var(--gray); font-style: italic; }
.entry p { margin: .4rem 0 0; color: var(--gray); font-size: .92rem; max-width: 60rem; }
.entry ul { margin: .45rem 0 0; padding: 0; list-style: none; color: var(--gray); font-size: .92rem; }
.entry ul li { margin: .3rem 0 0; padding-left: 1.05rem; position: relative; }
.entry ul li::before { content: "–"; position: absolute; left: 0; color: var(--prussian); }
.entry .chips { margin-top: .45rem; }

/* ---------- detail items (key/value ledger lines) ---------- */
.details-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.6rem; }
.detail-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .6rem;
  padding: .4rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: .88rem;
}
.detail-item span { color: var(--gray); }
.detail-item strong { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- explore / preview cards ---------- */
.explore-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
@media (min-width: 1060px) { .explore-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 560px) { .explore-grid { grid-template-columns: 1fr; } }
.explore-card {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  padding: 1rem 1.1rem 1.1rem;
  border: 1px solid var(--rule);
  background: var(--panel);
  color: var(--ink);
  text-decoration: none;
}
.explore-card:hover { border-color: var(--prussian); color: var(--ink); text-decoration: none; }
.explore-card h3 { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.explore-card h3 .arrow { color: var(--prussian); font-weight: 400; font-family: "Newsreader", Georgia, serif; }
.explore-card p { margin: 0; color: var(--gray); font-size: .88rem; }
.explore-card .preview { margin-top: auto; padding-top: .6rem; border-top: 1px solid var(--rule); }

/* form strip (last-ten ledger squares) — meaning is carried by fill
   and glyph, never by hue alone: win = solid Prussian, loss = hollow ×,
   draw = navy en dash */
.form-strip { display: inline-flex; gap: .22rem; vertical-align: middle; }
.form-strip i {
  display: inline-grid;
  place-items: center;
  width: .9rem;
  height: .9rem;
  font-style: normal;
  font-size: 0;
  line-height: 1;
  background: transparent;
  border: 1px solid var(--rule);
}
.form-strip i::before { font-family: var(--mono); font-size: .58rem; }
.form-strip i.w { background: var(--prussian); border-color: var(--prussian); }
.form-strip i.l { background: transparent; border-color: var(--gray); }
.form-strip i.l::before { content: "×"; color: var(--gray); }
.form-strip i.d { background: transparent; border-color: var(--navy); }
.form-strip i.d::before { content: "–"; color: var(--navy); }

/* won/lost accents inside team lines & recent results (text carries meaning) */
.delta-up { color: var(--prussian); }
.delta-down { color: var(--gray); }

/* ---------- team cards ---------- */
.tier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  margin-bottom: 1.6rem;
}
.team-card {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: .95rem 1.05rem 1rem;
  border: 1px solid var(--rule);
  border-top: 3px solid var(--team, var(--ink));
  background: var(--panel);
}
.team-card:hover { border-color: var(--rule-strong); border-top-color: var(--team, var(--ink)); }
.team-head { display: flex; align-items: center; gap: .65rem; }
.team-head img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  flex: 0 0 auto;
  padding: 3px;
  border: 1px solid var(--rule);
  background: #ffffff;
}
.team-id { min-width: 0; }
.team-id h3 { font-size: 1.02rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.team-record {
  margin-left: auto;
  font-family: var(--mono);
  font-size: .95rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.team-lines { display: grid; gap: .3rem; border-top: 1px solid var(--rule); padding-top: .6rem; margin-top: auto; }
.team-line { display: flex; gap: .5rem; align-items: baseline; font-size: .85rem; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.team-line > span:first-child {
  flex: 0 0 2.6rem;
  color: var(--gray);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.tier-head { display: flex; align-items: baseline; gap: .6rem; margin: 1.9rem 0 .9rem; }
.tier-head h2 { flex: 1; margin-bottom: 0; }

/* ---------- controls ---------- */
.select-label {
  display: flex;
  align-items: center;
  gap: .5rem;
  color: var(--gray);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.select-label select {
  min-width: 9rem;
  padding: .4rem .55rem;
  border: 1px solid var(--rule-strong);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: .88rem;
  letter-spacing: 0;
  text-transform: none;
  transition: border-color .25s ease;
}
.select-label select:focus { border-color: var(--royal); outline: none; }

/* progress bar — a filling hairline */
.progress {
  height: .3rem;
  background: var(--accent-soft);
  border: 1px solid var(--rule);
  overflow: hidden;
}
.progress > span { display: block; height: 100%; background: var(--prussian); }

/* book spines */
.spine-row { display: flex; gap: .25rem; align-items: flex-end; }
.spine-row i {
  width: 1.05rem;
  height: 1.7rem;
  background: var(--panel-2);
  border: 1px solid var(--rule);
  font-style: normal;
}
.spine-row i.now { background: var(--accent-soft); border-color: var(--prussian); }

/* ---------- score lines (sports) ---------- */
.score-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .6rem; }
.score-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .6rem;
  padding: .55rem .75rem;
  border: 1px solid var(--rule);
  background: var(--panel);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.score-match { font-size: .9rem; color: var(--gray); }
.score-match strong { color: var(--ink); font-weight: 700; }
.score-status {
  font-family: var(--mono);
  font-size: .62rem;
  font-weight: 400;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gray);
  white-space: nowrap;
}
.score-status.win { color: var(--prussian); }
.score-status.loss { color: var(--gray); }

/* ---------- tables: the agate ledger ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--rule); }
table { width: 100%; border-collapse: collapse; background: var(--panel); font-size: .84rem; }
th, td {
  padding: .42rem .6rem;
  border-bottom: 1px solid var(--rule);
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
th:first-child, td:first-child { text-align: left; }
thead th {
  background: var(--panel);
  color: var(--gray);
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--rule-strong);
}
tbody tr:nth-child(odd) { background: var(--panel); }
tbody tr:nth-child(even) { background: var(--panel); }
tbody tr:hover { background: var(--accent-soft); }
tbody tr:last-child td { border-bottom: 0; }

/* ---------- placeholder / coming soon ---------- */
.placeholder-panel {
  display: grid;
  gap: .4rem;
  justify-items: start;
  padding: 1.1rem 1.2rem;
  border: 1px dashed var(--rule-strong);
  background: transparent;
  margin-bottom: 1.5rem;
}
.placeholder-panel p { margin: 0; color: var(--gray); font-style: italic; font-size: .92rem; max-width: 52rem; }

/* ---------- footer: the colophon ---------- */
.site-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  margin-top: 3rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--rule-strong);
  color: var(--gray);
  font-size: .85rem;
}
.site-footer a { color: var(--gray); text-decoration-color: var(--rule-strong); text-underline-offset: 3px; }
.site-footer a:hover { color: var(--royal); }

/* ---------- micro-interactions ---------- */
@media (prefers-reduced-motion: no-preference) {
  .card, .explore-card, .team-card, .page-hero { transition: border-color .25s ease, background-color .35s ease; }
  .form-strip i { transition: transform .12s ease; }
  .form-strip i:hover { transform: scale(1.25); }
}

/* ---------- section anchors ---------- */
.hash-link {
  margin-left: .4rem;
  color: var(--gray);
  opacity: 0;
  font-weight: 400;
  text-decoration: none;
  transition: opacity .2s ease;
}
h2:hover .hash-link, .hash-link:focus { opacity: 1; }
.hash-link:hover { color: var(--royal); text-decoration: none; }

/* ---------- table search ---------- */
.table-search {
  width: min(100%, 20rem);
  padding: .45rem .65rem;
  border: 1px solid var(--rule-strong);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: .88rem;
  outline: none;
  transition: border-color .25s ease;
}
.table-search:focus { border-color: var(--royal); }

/* ---------- team card extras ---------- */
.rank-bar {
  position: relative;
  display: block;
  flex: 1 1 4rem;
  max-width: 5.5rem;
  height: 1px;
  margin-left: auto;
  background: var(--rule-strong);
  align-self: center;
}
.rank-bar i {
  position: absolute;
  top: 50%;
  width: 3px;
  height: .55rem;
  background: var(--prussian);
  transform: translate(-50%, -50%);
}
.recent-results summary {
  cursor: pointer;
  color: var(--gray);
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  list-style: none;
  transition: color .25s ease;
}
.recent-results summary:hover { color: var(--royal); }
.recent-results summary::-webkit-details-marker { display: none; }
.recent-results summary::after { content: " ▾"; }
.recent-results[open] summary::after { content: " ▴"; }
.recent-results ul { margin: .4rem 0 0; padding: 0; list-style: none; }
.recent-results li {
  display: flex;
  justify-content: space-between;
  gap: .6rem;
  padding: .18rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: .8rem;
  color: var(--gray);
  font-variant-numeric: tabular-nums;
}
.recent-results li:last-child { border-bottom: 0; }
.recent-results li strong { font-weight: 600; }

/* ---------- book spines (real shelf) ---------- */
.shelf { display: flex; gap: .3rem; align-items: flex-end; flex-wrap: wrap; min-height: 3.4rem; }
.shelf .spine {
  position: relative;
  display: inline-block;
  width: 1.15rem;
  border: 1px solid var(--rule-strong);
  background: var(--panel-2);
  cursor: default;
}
.shelf .spine.now { border-color: var(--prussian); background: var(--accent-soft); }
.shelf-base { height: 3px; margin-top: .2rem; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--ink); }

/* ---------- instrument timeline ---------- */
.timeline-svg { width: 100%; height: auto; display: block; }
.timeline-svg .band { fill: var(--accent-soft); stroke: var(--prussian); stroke-width: 1; }
.timeline-svg .band.alt { fill: rgba(91, 102, 114, .14); stroke: var(--gray); }
.timeline-svg text { fill: var(--gray); font-family: var(--mono); font-size: 10px; letter-spacing: .06em; }
.timeline-svg .band-label { fill: var(--ink); font-size: 11px; font-weight: 600; }
.timeline-svg line { stroke: var(--rule); stroke-width: 1; }

/* ---------- turing canvas ---------- */
.turing-wrap { position: relative; }
.turing-wrap canvas {
  display: block;
  width: 100%;
  height: 150px;
  border: 1px solid var(--rule);
  background: var(--panel-2);
}

/* ---------- footer extras ---------- */
.footer-tools { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; }
.theme-toggle {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .08em;
  color: var(--gray);
  background: none;
  border: none;
  border-bottom: 1px solid var(--rule);
  padding: .25rem 0 1px;
  cursor: pointer;
  transition: color .25s ease, border-color .25s ease;
}
.theme-toggle:hover { color: var(--royal); border-color: var(--royal); }
.monogram {
  font-family: "Bodoni Moda", "Bodoni 72", Didot, serif;
  font-weight: 700;
  color: var(--prussian);
  letter-spacing: .05em;
}

/* ---------- music: practice cards ---------- */
.practice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .75rem; }
.practice-card {
  display: flex; flex-direction: column; gap: .15rem;
  padding: .7rem .85rem .75rem;
  border: 1px solid var(--rule);
  border-top: 3px solid var(--ink);
  background: var(--panel);
}
.practice-card .pc-composer {
  font-family: "Bodoni Moda", "Bodoni 72", Didot, serif;
  font-optical-sizing: auto;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
}
.practice-card .pc-work { font-size: .88rem; color: var(--ink); }
.practice-card .pc-detail { font-size: .78rem; font-style: italic; color: var(--gray); }

/* ---------- music: aligned repertoire tables ---------- */
.rep-group { margin-top: 1.2rem; }
.rep-group:first-child { margin-top: .1rem; }
.rep-group > .eyebrow { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .55rem; }
.rep-group > .eyebrow .count { color: var(--gray); font-family: var(--mono); font-weight: 400; letter-spacing: .08em; }
.rep-table { width: 100%; border-collapse: collapse; }
.rep-table th {
  padding: 0 .7rem .3rem 0;
  font-size: .62rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gray); text-align: left;
  border-bottom: 3px double var(--ink);
}
.rep-table td {
  padding: .34rem .7rem .34rem 0; vertical-align: baseline;
  border-bottom: 0; text-align: left; white-space: normal; /* undo the agate-ledger defaults */
}
.rep-table th:last-child, .rep-table td:last-child { padding-right: 0; }
.rep-table tbody + tbody tr:first-child td { border-top: 1px solid var(--rule); }
.rep-table .rep-comp {
  font-variant: small-caps; letter-spacing: .06em;
  font-weight: 600; color: var(--prussian); white-space: nowrap;
}
.rep-table .rep-work { width: 100%; font-size: .88rem; color: var(--ink); line-height: 1.35; }
.rep-table .rep-detail { font-style: italic; color: var(--gray); font-size: .8rem; }
.rep-table td.rep-num, .rep-table th.rep-num {
  text-align: right; font-family: var(--mono); font-size: .72rem;
  font-variant-numeric: tabular-nums; color: var(--gray); white-space: nowrap;
}
@media (max-width: 560px) {
  .rep-table th, .rep-table td { padding-right: .45rem; }
  .rep-table .rep-comp { white-space: normal; }
}

/* ---------- music: the repertoire diagonal ---------- */
.music-diag { display: block; width: 100%; height: auto; }
.music-diag text { font-family: var(--mono); font-size: 10px; fill: var(--gray); letter-spacing: .05em; }
.music-diag-note {
  margin: .5rem 0 0; font-family: var(--mono); font-size: .68rem;
  color: var(--gray); letter-spacing: .04em; font-variant-numeric: tabular-nums;
}

/* ---------- music: wishlist ---------- */
.wish-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .6rem; }
.wish-card {
  display: flex; flex-direction: column; gap: .12rem;
  padding: .55rem .7rem .6rem;
  border: 1px solid var(--rule);
  background: var(--panel);
}
.wish-card .wc-top { display: flex; justify-content: space-between; align-items: baseline; gap: .4rem; }
.wish-card .wc-composer { font-size: .88rem; font-weight: 700; color: var(--ink); }
.wish-card .wc-work { font-size: .82rem; color: var(--gray); }

/* ---------- literature: now reading ---------- */
.now-reading { display: flex; gap: 1.4rem; align-items: stretch; flex-wrap: wrap; }
.nr-cover {
  position: relative; flex: 0 0 124px; width: 124px; min-height: 178px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: .3rem;
  padding: .8rem .7rem;
  border: 1px solid var(--rule-strong);
  border-left: 4px solid var(--ink);
  background: var(--prussian);
  box-shadow: 0 0 0 4px var(--paper);   /* the paper mat */
}
.nr-cover::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 6px; width: 1px;
  background: var(--paper); opacity: .35;
}
.nr-cover .nr-c-title {
  font-family: "Bodoni Moda", "Bodoni 72", Didot, serif;
  font-optical-sizing: auto;
  font-size: .92rem; font-weight: 600; line-height: 1.18; color: var(--paper);
}
.nr-cover .nr-c-author {
  font-size: .6rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--paper); opacity: .8;
}
.nr-body { flex: 1 1 17rem; min-width: 0; display: flex; flex-direction: column; gap: .35rem; }
.nr-body h3 { font-size: 1.25rem; }
.nr-meta { margin: 0; color: var(--gray); font-style: italic; font-size: .92rem; }
.nr-note { margin: 0; color: var(--gray); font-size: .92rem; max-width: 42rem; }
.nr-progress { margin-top: auto; padding-top: .6rem; border-top: 1px solid var(--rule); display: flex; align-items: center; gap: .85rem; }
.nr-ring { flex: 0 0 auto; transform: rotate(-90deg); }
.nr-ring .track { fill: none; stroke: var(--rule); }
.nr-ring .bar { fill: none; stroke: var(--prussian); transition: stroke-dashoffset .8s ease; }
.nr-ring-pct { font-family: var(--mono); font-size: .78rem; font-weight: 600; fill: var(--ink); }
.nr-prog-text { display: flex; flex-direction: column; gap: .1rem; }
.nr-prog-text b { font-family: var(--mono); font-size: .84rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.nr-prog-text span { font-size: .78rem; font-style: italic; color: var(--gray); }

/* graceful empty shelf */
.shelf.is-empty {
  align-items: center; justify-content: center;
  border: 1px dashed var(--rule-strong);
  color: var(--gray); font-style: italic; font-size: .88rem; min-height: 4rem; padding: .6rem;
}

/* ---------- print ---------- */
@media print {
  :root {
    --paper: #fff; --ink: #000; --prussian: #000; --royal: #000; --navy: #000; --gray: #444;
    --rule: #bbb; --rule-strong: #888; --band: #eee;
    --bg: #fff; --panel: #fff; --panel-2: #fff; --panel-3: #f0f0f0;
    --line: #bbb; --text: #000; --muted: #444; --accent: #000; --accent-soft: #eee;
  }
  .site-header, .site-footer, .explore-grid, [aria-label="Explore the site"], .nav-burger, .theme-toggle { display: none !important; }
  body { font-size: 12px; }
  .page-shell { padding: 0; width: 100%; }
  .card, .page-hero { border-color: #ccc; break-inside: avoid; }
  a { color: #000; text-decoration: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 760px) {
  .site-header { align-items: center; }
  .nav-burger { display: inline-block; }
  .primary-nav {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    text-align: center;
    padding-top: .3rem;
    animation: none;               /* display-toggled: never animate */
  }
  .primary-nav.open { display: flex; }
  .primary-nav > a { padding: .8rem 0; border-top: 1px solid var(--rule); }
  .primary-nav > a:first-child { border-top: none; }
  .nav-drop { padding: .8rem 0; border-top: 1px solid var(--rule); }
  .two-col { grid-template-columns: 1fr; }
  .page-hero { flex-direction: column; align-items: flex-start; }
  .details-grid { grid-template-columns: 1fr; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}