/* ── LaTeX (Computer Modern) glyphs for the research symbols: KaTeX's fonts, the same ones Publications uses ── */
@font-face { font-family: 'TeX Math'; src: url(https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/fonts/KaTeX_Math-Italic.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'TeX Main'; src: url(https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/fonts/KaTeX_Main-Regular.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'TeX Cal';  src: url(https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/fonts/KaTeX_Caligraphic-Regular.woff2) format('woff2'); font-display: swap; }

/* ── Tokens ─────────────────────────────────────────────── */
:root {
  --bg:      #F5F1EA;
  --panel:   #FFFCF7;
  --sunk:    #EDE7DC;
  --ink:     #1E1A16;
  --ink-2:   #4F473E;
  --ink-3:   #736A5E;
  --line:    #E5DED2;
  --line-2:  #D5CBBB;
  --accent:  #B04A2E;
  --accent-ink: #8F3A22;
  --accent-soft: rgba(176, 74, 46, .09);
  --shadow:  rgba(60, 40, 20, .22);
  --hi:      rgba(255, 255, 255, .8);   /* a 1px highlight along the top inside edge of raised cards */

  /* the one dark, "terminal" surface: news log, install lines, BibTeX */
  --term:        #231E1A;
  --term-ink:    #EFE7DA;
  --term-dim:    #9C9183;
  --term-accent: #EE9A76;
  --term-line:   rgba(255, 255, 255, .08);

  --arxiv: #B23A41;     /* chip colours: a crimson for arXiv (cooler than the terracotta accent), a clear blue for journals, */
  --journal: #3C6EA8;
  --aps: #2E7A4F;     /* and a green for the Physical Review journals (PRD, PRL, PRX) */
  --poster: #AD7A22;  /* an ochre for posters, on the timeline of talks */
  --repo: #6A4FA3;    /* the chips of every tool on the Code page: a violet for its repository, an amber for its guide, a slate for its issues */
  --guide: #A5670A;
  --issues: #4F6272;

  --f-serif: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  --f-sans:  'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono:  'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --f-math:  'TeX Math', 'Cambria Math', 'Times New Roman', serif;

  --gap:    16px;
  --sb-w:   268px;
  --rail-w: 66px;
  --top-h:  60px;
  --foot-h: 56px;   /* the sidebar's foot (clock, theme, collapse): the player docks just above it */
  --radius: 16px;
  --ease:   cubic-bezier(.32, .72, 0, 1);

  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg:      #151210;
  --panel:   #1D1916;
  --sunk:    #110E0C;
  --ink:     #EFE8DD;
  --ink-2:   #C0B5A6;
  --ink-3:   #928878;
  --line:    #2B2521;
  --line-2:  #3D3530;
  --accent:  #E38D6B;
  --accent-ink: #F0A788;
  --accent-soft: rgba(227, 141, 107, .12);
  --shadow:  rgba(0, 0, 0, .6);
  --hi:      rgba(255, 255, 255, .045);

  --term:        #0E0C0A;
  --term-line:   rgba(255, 255, 255, .06);

  --poster: #D6A24E;

  color-scheme: dark;
}

/* ── Base ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scrollbar-gutter: stable; }   /* the room for the scrollbar is always kept, so a page doesn't shift sideways when it grows long enough to need one */
body {
  margin: 0; min-height: 100vh;
  background: var(--bg); color: var(--ink);
  font: 400 16px/1.65 var(--f-sans);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, p, ol, ul, dl, dd, figure, blockquote, address { margin: 0; padding: 0; }
ol, ul { list-style: none; }
img { display: block; max-width: 100%; }
button, input { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }   /* no underlines anywhere: where a link sits in running text, its colour says it is one */
p a { color: var(--accent); }
p a:hover { color: var(--accent-ink); }
sub { font-size: .55em; vertical-align: -.3em; line-height: 0; font-style: normal; }
[hidden] { display: none !important; }
::selection { background: color-mix(in srgb, var(--accent) 22%, transparent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
h1:focus { outline: none; }

.ic {
  width: 19px; height: 19px; flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}

.skip {
  position: fixed; left: 12px; top: -60px; z-index: 200;
  padding: 8px 14px; border-radius: 8px; background: var(--ink); color: var(--bg); text-decoration: none;
}
.skip:focus { top: 12px; }

/* theme switch: js/site.js crossfades the whole page through a view transition */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .4s; }

/* ── Buttons & small parts ──────────────────────────────── */
.icon-btn {
  width: 36px; height: 36px; flex-shrink: 0; display: grid; place-items: center;
  background: none; border: 1px solid transparent; border-radius: 10px;
  color: var(--ink-3); cursor: pointer;
  transition: color .2s, background-color .2s, border-color .2s;
}
.icon-btn:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 5%, transparent); }
.icon-btn .ic { width: 18px; height: 18px; }
.theme-btn .i-sun { display: none; }
:root[data-theme="dark"] .theme-btn .i-sun { display: block; }
:root[data-theme="dark"] .theme-btn .i-moon { display: none; }

.btn {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px;
  border-radius: 12px; border: 1px solid transparent; cursor: pointer;
  font: 500 14.5px/1 var(--f-sans); text-decoration: none; white-space: nowrap;
  transition: background-color .25s, border-color .25s, color .25s, transform .25s var(--ease);
}
.btn .ic { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.btn:hover .ic { transform: translateX(2px); }
.btn--solid { background: var(--ink); color: var(--bg); }
.btn--solid:hover { background: var(--accent); }
.btn--ghost { background: var(--panel); border-color: var(--line-2); color: var(--ink); }
.btn--ghost:hover { border-color: var(--ink-3); }

.mlink {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px;
  background: none; border: 1px solid var(--line-2); border-radius: 8px; cursor: pointer;
  font: 12.5px/1.5 var(--f-mono); color: var(--ink-2); text-decoration: none; white-space: nowrap;
  transition: color .2s, border-color .2s, background-color .2s;
}
.mlink:hover, .mlink[aria-expanded="true"] { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, transparent); background: var(--accent-soft); }

.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tags li {
  padding: 2px 10px; border-radius: 99px; border: 1px solid var(--line-2);
  font: 12.5px/1.6 var(--f-mono); color: var(--ink-2);
}

.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font: 12.5px/1.6 var(--f-mono); color: var(--ink-3); }
.status { display: inline-flex; align-items: center; gap: 7px; color: var(--accent); }
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px var(--accent-soft); }

.label {
  display: flex; align-items: center; gap: 14px; margin: 64px 0 20px;
  font: 500 12px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
}
.label::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.label .count { order: 2; letter-spacing: 0; text-transform: none; }

.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px 26px;
}
.card h3 { font: 500 21px/1.3 var(--f-serif); margin: 8px 0 8px; }
.card > p:not(.meta) { color: var(--ink-2); max-width: 62ch; }
.card .tags, .card .row-links { margin-top: 16px; }
.card-label { font: 500 12px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 22px; }

.grid-2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@container page (min-width: 640px) { .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.grid-2 .wide { grid-column: 1 / -1; }
.row-links { display: flex; flex-wrap: wrap; gap: 8px; }

/* the terminal accent: a dark strip for anything you would paste into a shell */
.term {
  position: relative; display: flex; align-items: center; gap: 10px;
  background: var(--term); color: var(--term-ink); border-radius: 10px; padding: 9px 9px 9px 14px;
  font: 13px/1.6 var(--f-mono);
}
.term code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; font: inherit; scrollbar-width: none; }
.term code::-webkit-scrollbar { display: none; }
.term code[data-prompt]::before { content: attr(data-prompt); color: var(--term-accent); margin-right: .7em; user-select: none; }
.term--block { display: block; margin-top: 14px; padding: 16px 18px; }
.term--block pre { margin: 0; padding-right: 64px; overflow-x: auto; font: 12.5px/1.75 var(--f-mono); }
.term--block code { white-space: pre; }
.term--block .copy { position: absolute; top: 10px; right: 10px; }
.copy {
  flex-shrink: 0; padding: 2px 9px; border-radius: 6px; cursor: pointer;
  background: none; border: 1px solid color-mix(in srgb, var(--term-ink) 20%, transparent);
  font: 12px/1.6 var(--f-mono); color: var(--term-dim);
  transition: color .2s, border-color .2s;
}
.copy:hover { color: var(--term-ink); border-color: color-mix(in srgb, var(--term-ink) 45%, transparent); }

/* ── Sidebar ────────────────────────────────────────────── */
.sidebar {
  position: fixed; z-index: 60; top: var(--gap); bottom: var(--gap); left: var(--gap);
  width: var(--sb-w); display: flex; flex-direction: column; overflow: hidden;
  background: var(--panel); border: 1px solid var(--line); border-radius: 20px;
  box-shadow: 0 24px 60px -40px var(--shadow), 0 2px 6px -4px var(--shadow);
  transition: width .42s var(--ease), transform .42s var(--ease);
}

.sb-head { padding: 18px 12px 12px; }   /* top: the name sits as far from the top edge as the clock line from the bottom */
.sb-id { display: flex; align-items: center; padding: 4px 0 4px 10px; text-decoration: none; min-width: 0; }   /* 12 + 10: in line with the icons below */
.sb-id-text { display: flex; flex-direction: column; min-width: 0; white-space: nowrap; }
.sb-name { font: 500 19px/1.2 var(--f-serif); letter-spacing: -.01em; }
.sb-role { font-size: 13px; color: var(--ink-3); }

.sb-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 4px 10px 12px; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.sb-group {
  height: 40px; padding: 18px 12px 0; overflow: hidden; white-space: nowrap;
  font: 500 10.5px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
  transition: height .42s var(--ease), padding .42s var(--ease), margin .42s var(--ease), background-color .42s, color .15s;
}
.sb-link {
  position: relative; display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 12px; margin-top: 2px;
  border-radius: 10px; color: var(--ink-2); text-decoration: none; white-space: nowrap;
  font-size: 14.5px; font-weight: 500;
  transition: background-color .2s, color .2s;
}
.sb-link .ic { color: var(--ink-3); transition: color .2s; }
.sb-link:hover { background: color-mix(in srgb, var(--ink) 4.5%, transparent); color: var(--ink); }
.sb-link:hover .ic { color: var(--ink); }
.sb-link[aria-current="page"] { background: var(--accent-soft); color: var(--ink); }
.sb-link[aria-current="page"] .ic { color: var(--accent); }
.sb-link[aria-current="page"]::before {
  content: ""; position: absolute; left: -10px; top: 11px; bottom: 11px; width: 3px; border-radius: 0 3px 3px 0;
  background: var(--accent);
}
.sb-link kbd {
  margin-left: auto; padding: 0 6px; border: 1px solid var(--line-2); border-radius: 6px;
  font: 11px/18px var(--f-mono); color: var(--ink-3); opacity: 0; transition: opacity .2s;
}
.sb-link:hover kbd { opacity: 1; }
.sb-label { overflow: hidden; text-overflow: ellipsis; }

.sb-foot { display: flex; align-items: center; gap: 4px; min-height: var(--foot-h); padding: 10px 12px; }   /* its height even where its buttons are hidden (the drawer), so the time stays put */
.sb-clock { flex: 1; min-width: 0; margin-left: 10px; display: flex; align-items: center; gap: 8px; white-space: nowrap; overflow: hidden; font: 12px/1.4 var(--f-mono); color: var(--ink-3); }   /* margin: in line with the icons above */
.sb-clock time { color: var(--ink-2); }

/* fade in late when expanding, out early when collapsing */
.sb-id-text, .sb-label, .sb-link kbd, .sb-clock { transition: opacity .22s ease .16s; }

.rail-tip {
  position: fixed; z-index: 300; transform: translateY(-50%); pointer-events: none;
  padding: 5px 10px; border-radius: 8px; background: var(--ink); color: var(--bg);
  font: 500 12.5px/1.4 var(--f-sans); white-space: nowrap;
  opacity: 0; transition: opacity .15s;
}
.rail-tip.show { opacity: 1; }

@media (min-width: 1024px) {
  .rail .sidebar { width: var(--rail-w); }
  .rail .sb-id-text, .rail .sb-label, .rail .sb-link kbd, .rail .sb-clock { opacity: 0; pointer-events: none; transition: opacity .1s ease; }
  .rail .sb-head { display: none; }
  .rail .sb-group { height: 1px; padding: 0; margin: 14px 8px; color: transparent; background: var(--line); }
  .rail .sb-nav > :first-child { margin-top: 10px; }   /* the room the hidden name leaves */
  .rail .sb-link[aria-current="page"]::before { opacity: 0; }
  .rail .sb-foot { flex-direction: column; gap: 2px; }
  .rail .sb-clock { display: none; }
  .rail .collapse-btn .ic { transform: scaleX(-1); }
}

/* ── Top bar & drawer (tablet, phone) ───────────────────── */
.topbar { display: none; }
.scrim { display: none; }

@media (max-width: 1023px) {
  .topbar {
    position: sticky; top: 0; z-index: 50; height: var(--top-h);
    display: flex; align-items: center; gap: 8px; padding: 0 12px;
    background: color-mix(in srgb, var(--bg) 86%, transparent);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
  }
  .topbar .icon-btn { color: var(--ink-2); }
  .top-id { margin-right: auto; text-decoration: none; font: 500 18px/1 var(--f-serif); }

  .sidebar {
    width: min(var(--sb-w), calc(100vw - 56px));   /* as on a wide screen (its place too, --gap from the edges), but on a narrow phone it leaves a strip of the page to tap */
    transform: translateX(calc(-100% - 24px));
  }
  .drawer-open .sidebar { transform: none; }
  .scrim {
    display: block; position: fixed; inset: 0; z-index: 55;
    background: rgba(20, 14, 10, .32); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
    opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), visibility .4s;
  }
  .drawer-open .scrim { opacity: 1; visibility: visible; }
  .drawer-open body { overflow: hidden; }
  .sb-foot .theme-btn, .sb-foot .collapse-btn, .sb-link kbd { display: none; }
}

/* ── Main column ────────────────────────────────────────── */
.main {
  margin-left: calc(var(--sb-w) + var(--gap) * 2);
  padding: 0 clamp(24px, 4vw, 64px);
  transition: margin-left .42s var(--ease);
}
@media (min-width: 1024px) { .rail .main { margin-left: calc(var(--rail-w) + var(--gap) * 2); } }
@media (max-width: 1023px) { .main { margin-left: 0; padding: 0 clamp(20px, 5vw, 40px); } }

.page {
  container: page / inline-size;
  max-width: 1080px; margin: 0 auto; padding: clamp(36px, 6vw, 80px) 0 0;
  scroll-margin-top: var(--top-h);
}
.page.enter { animation: enter .55s var(--ease) both; }
@keyframes enter { from { opacity: 0; transform: translateY(10px); } }

.page-head { max-width: 760px; }
.path { font: 13px/1 var(--f-mono); color: var(--accent); margin-bottom: 18px; }
.path::before { content: "~/"; color: var(--ink-3); }
/* deeper in a page, each step back is a link, and a long path stays on its one line */
.path { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding-bottom: 4px; margin-bottom: 14px; }   /* the padding keeps the tails of its letters; the head stands where it did */
.path i { font-style: normal; color: var(--ink-3); }
.path a { color: var(--ink-3); text-decoration: none; transition: color .2s; }
.path a:hover { color: var(--accent); }
.page-head h1 { font: 400 clamp(38px, 4.75vw, 59px)/1.04 var(--f-serif); letter-spacing: -.025em; }
.lead { margin-top: 20px; font: 400 19px/1.5 var(--f-serif); color: var(--ink-2); max-width: 38em; }
.lead a { text-decoration: none; transition: color .2s; }
.lead a:hover { color: var(--accent-ink); }
.page-head .actions, .talks-seg { margin-top: 28px; }
/* a head whose last part (the CV's download, the Talks switch) goes beside the lead on a wide page, below it otherwise */
.page-head--aside { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 56px; }
.page-head--aside > :last-child { justify-self: start; }
@container page (min-width: 760px) {
  .page-head--aside { grid-template-columns: minmax(0, 1fr) auto; }
  .page-head--aside > :not(.lead, :last-child) { grid-column: 1 / -1; }
  .page-head--aside > :last-child { align-self: center; justify-self: end; margin-top: 20px; }   /* the lead's own top margin */
}
.actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ── Overview ───────────────────────────────────────────── */
/* the portrait is first in the text: on a narrow page it goes last, under the buttons; on a wide one it floats at the
   top right, level with the name, and the text flows around it, then takes the whole width once it has passed */
.hero { position: relative; isolation: isolate; }
.hero-text { display: flex; flex-direction: column; }
.hero-text > .portrait { order: 1; margin-top: 48px; }
@container page (min-width: 620px) {
  .hero-text { display: flow-root; }
  .hero-text > .portrait { float: right; width: clamp(200px, 34cqi, 300px); margin: 36px 16px 28px clamp(28px, 4cqi, 52px); }
}
/* graph paper, fading out from behind the portrait */
.hero::before {
  content: ""; position: absolute; z-index: -1; inset: -80px -48px -40px -48px;
  background-image: radial-gradient(circle, color-mix(in srgb, var(--ink) 16%, transparent) 1px, transparent 1.4px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 78% 45%, #000 10%, transparent 72%);
          mask-image: radial-gradient(ellipse 60% 70% at 78% 45%, #000 10%, transparent 72%);
}
@container page (min-width: 620px) {   /* centred on the portrait, at the top right, whatever the length of the text */
  .hero::before {
    -webkit-mask-image: radial-gradient(ellipse 420px 460px at calc(100% - 48px - clamp(100px, 17cqi, 150px)) 290px, #000 10%, transparent 72%);
            mask-image: radial-gradient(ellipse 420px 460px at calc(100% - 48px - clamp(100px, 17cqi, 150px)) 290px, #000 10%, transparent 72%);
  }
}
.hero-title { margin: 0; font: 400 clamp(40px, 5.4vw, 68px)/1.03 var(--f-serif); letter-spacing: -.028em; }
.hero-title em { font-style: italic; color: var(--accent); }
.hero-role {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px 30px; margin: 0 0 26px;
  overflow: hidden; /* clips the separator of an item that wraps to a line start */
  font: 400 19px/1.4 var(--f-serif); color: var(--ink-2);
}
.hero-role span { position: relative; }
.hero-role span + span::before {
  content: ""; position: absolute; left: -17.5px; top: 50%; width: 5px; height: 5px;
  background: var(--accent); transform: translateY(-50%) rotate(45deg);
}
.hero-role em { font-style: italic; color: var(--ink); }
.hero-lead { font-size: 15px; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
.hero-lead + .hero-lead { margin-top: .9em; }
.hero .actions { margin-top: 34px; }

.portrait { position: relative; z-index: 0; width: min(64%, 240px); }
.portrait-frame {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden;
  border-radius: 22px; border: 1px solid color-mix(in srgb, var(--ink) 34%, transparent); background: var(--sunk);
  box-shadow: 0 40px 70px -45px var(--shadow);
}
/* a second frame, drawn in a hairline behind the photo and set off from it down and to the right */
.portrait::before {
  content: ""; position: absolute; z-index: -1; top: 16px; left: 16px; width: 100%; aspect-ratio: 4 / 5;
  border: 1px solid var(--line-2); border-radius: 22px;
}
.portrait-frame img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }

/* ── Overview: research interests on a short history of the universe ──
   The drawing (svg) is made by js/site.js; the tabs and the scale are text laid over it. */
.sym { font: 400 42px/1 var(--f-math); color: var(--accent); }   /* a formula in LaTeX's own font: italic letters, */
.sym .up { font-family: 'TeX Main'; }                            /* upright capital Greek, brackets and labels, */
.sym .cal { font-family: 'TeX Cal'; }                            /* and calligraphic capitals */
.cosmos { --tab-top: 42px; }
.cosmos-plot { position: relative; height: 390px; }
.cosmos-plot > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

.cosmos-tab {
  position: absolute; top: var(--tab-top); left: calc(var(--u, 0) * 100%);
  display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 2px 4px;
  border: 0; background: none; color: inherit; font: inherit; text-align: center; cursor: pointer;
}
.cosmos-tab.flush-start { align-items: flex-start; padding-left: 0; text-align: left; }
.cosmos-tab.flush-end { align-items: flex-end; padding-right: 0; text-align: right; }
.cosmos-tab .sym { display: block; height: 40px; font-size: 34px; line-height: 40px; color: var(--ink-3); transition: color .35s, transform .45s var(--ease); }
.cosmos-name { font: 400 16.5px/1.2 var(--f-serif); color: var(--ink-3); white-space: nowrap; transition: color .35s; }
.cosmos-tab:hover .sym, .cosmos-tab:hover .cosmos-name { color: var(--ink-2); }
.cosmos-tab.on .sym { color: var(--accent); transform: translateY(-3px); }
.cosmos-tab.on .cosmos-name { color: var(--ink); }

.cosmos-tick {
  position: absolute; bottom: 0; height: 36px; left: calc(var(--u, 0) * 100%);
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  font: 11.5px/1.3 var(--f-mono); white-space: nowrap;
}
.cosmos-tick.flush-start { align-items: flex-start; }
.cosmos-tick.flush-end { align-items: flex-end; }
.cosmos-tick b { font-weight: 500; color: var(--ink-2); }
.cosmos-tick i { font-style: normal; color: var(--ink-3); }
.cosmos-tick .tex { font: 400 1.2em/1 var(--f-math); }
.cosmos-tick .tex.up { font-family: 'TeX Main'; font-size: .95em; }
.cosmos-tick sup { font-size: .75em; line-height: 0; }

/* the drawing: the universe as a horn that flares during inflation and widens towards today */
.cs-heat-0 { stop-color: var(--accent); stop-opacity: .5; }
.cs-heat-1 { stop-color: var(--accent); stop-opacity: .3; }
.cs-heat-2 { stop-color: var(--accent); stop-opacity: .13; }
.cs-heat-3 { stop-color: var(--accent); stop-opacity: .06; }
.cs-heat-4 { stop-color: var(--accent); stop-opacity: 0; }
.cs-hot { stop-color: var(--accent); stop-opacity: .75; }
.cs-cold { stop-color: var(--ink-3); stop-opacity: .55; }
.cs-band-0 { stop-color: var(--accent); stop-opacity: 0; }
.cs-band-1 { stop-color: var(--accent); stop-opacity: .2; }
.cs-edge { fill: none; stroke: url(#cs-edge); stroke-width: 1.1; }
.cs-axis { stroke: url(#cs-edge); stroke-width: 1; opacity: .45; }
.cs-guide { stroke: var(--line-2); stroke-dasharray: 1 3; }
/* the beginning: a small four-pointed star on a glow that fades out */
.cs-glow-0 { stop-color: var(--accent); stop-opacity: .35; }
.cs-glow-1 { stop-color: var(--accent); stop-opacity: 0; }
.cs-bang-glow { fill: url(#cs-glow); }
.cs-bang-star { fill: var(--accent); }
.cs-plasma { fill: var(--accent); }
.cs-phi { opacity: .6; transition: opacity .6s; }
.cs-phi.on { opacity: 1; }
.cs-phi line, .cs-phi path { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cs-phi .cs-fd-scalar { stroke-dasharray: 3 3; }
.cs-phi .cs-fd-boson { stroke-width: 1.4; }
.cs-fd-vertex { fill: var(--accent); }
.cs-cmb .cs-cmb-rim { fill: none; stroke: var(--accent); stroke-opacity: .45; transition: stroke-opacity .5s; }
.cs-rim-back { stroke-dasharray: 2 3; }
.cs-cmb-map { opacity: .45; transition: opacity .5s; }
.cs-cmb-hot { fill: var(--accent); }
.cs-cmb-cold { fill: var(--ink-3); fill-opacity: .55; }
.cs-cmb.on .cs-cmb-rim { stroke-opacity: 1; }
.cs-cmb.on .cs-cmb-map { opacity: .9; }
.cs-lss { fill: var(--ink-2); transition: fill .6s; }
.cs-lss line { stroke: var(--ink-3); stroke-opacity: .12; stroke-width: .7; transition: stroke .6s, stroke-opacity .6s; }
.cs-lss.on { fill: var(--accent); }
.cs-today ellipse { fill: var(--ink); fill-opacity: .035; stroke: var(--ink-3); stroke-opacity: .55; transition: stroke .6s, stroke-opacity .6s; }
.cs-lss.on .cs-today ellipse { stroke: var(--accent); stroke-opacity: .8; }
.cs-lss.on line { stroke: var(--accent); stroke-opacity: .2; }
.cs-hl { opacity: 0; transition: opacity .6s; }
.cs-hl.on { opacity: 1; }
.cs-nu { opacity: .55; transition: opacity .6s; }
.cs-nu.on { opacity: 1; }
.cs-nu path { fill: none; stroke: var(--accent); stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
.cs-nu circle { fill: var(--accent); }
.cs-nu-free { stroke-dasharray: 2 5; }
.cs-nu .cs-nu-boson { stroke-width: .9; stroke-opacity: .85; }
.cs-nu .cs-nu-stub { stroke: url(#cs-nu-fade); }
.cs-nu .cs-nu-walk { stroke: url(#cs-nu-in); stroke-width: 1; }   /* emerging from the plasma */
.cs-nu .cs-nu-surface { stroke: var(--accent); stroke-opacity: .7; }
.cs-nu .cs-rim-back { stroke-dasharray: 2 3; }
.cs-nu-0 { stop-color: var(--accent); stop-opacity: 1; }
.cs-nu-1 { stop-color: var(--accent); stop-opacity: 0; }
/* inflation's seeds, carried over to the structure they grow into today */
.cs-arc path { fill: none; stroke: var(--ink-3); stroke-opacity: .6; stroke-linecap: round; transition: stroke .4s, stroke-opacity .4s; }
.cs-arc-line { stroke-dasharray: 2 5; }
.cs-arc.on path { stroke: var(--accent); stroke-opacity: 1; }
/* each topic's pin on the line, with a thread up to its name */
.cs-pin { cursor: pointer; }
.cs-leader { stroke: var(--ink-3); stroke-opacity: .45; stroke-dasharray: 1 3; transition: stroke .35s, stroke-opacity .35s; }
.cs-dot { fill: var(--bg); stroke: var(--ink-3); stroke-width: 1.5; transition: fill .35s, stroke .35s; }
.cs-halo { fill: var(--accent); opacity: 0; transform-box: fill-box; transform-origin: center; transition: opacity .35s; }
.cs-pin:hover .cs-dot { stroke: var(--accent); }
.cs-pin.on .cs-leader { stroke: var(--accent); stroke-opacity: .9; stroke-dasharray: none; }
.cs-pin.on .cs-dot { fill: var(--accent); stroke: var(--accent); }
.cs-pin.on .cs-halo { opacity: .2; animation: cs-ping .9s var(--ease); }
@keyframes cs-ping { from { opacity: .55; transform: scale(.3); } }

/* the first time it is seen, the history unrolls from left to right and the names follow */
.cosmos.pre .cs-all { clip-path: inset(-40px 100% -40px 0); }
.cosmos.pre .cosmos-tab, .cosmos.pre .cosmos-tick { opacity: 0; }
.cosmos.play .cs-all { animation: cs-sweep 2.4s cubic-bezier(.5, .05, .25, 1) both; }
.cosmos.play .cosmos-tab, .cosmos.play .cosmos-tick { animation: cs-in .7s var(--ease) both; animation-delay: calc(.3s + var(--u) * 1.9s); }
@keyframes cs-sweep { from { clip-path: inset(-40px 100% -40px 0); } to { clip-path: inset(-40px -40px -40px 0); } }
@keyframes cs-in { from { opacity: 0; transform: translateY(8px); } }

.portrait figcaption, .cosmos-fig figcaption { display: flex; gap: 10px; align-items: baseline; margin-top: 16px; font: italic 15px/1.4 var(--f-serif); color: var(--ink-3); }
.portrait figcaption { margin-top: 30px; }   /* below the offset frame */
.portrait figcaption span, .cosmos-fig figcaption span { font: 12px/1 var(--f-mono); font-style: normal; color: var(--accent); white-space: nowrap; }
.cosmos-fig figcaption { margin-top: 22px; }
/* below the figure: the list is open */
.cosmos-coda { margin-top: 28px; font-size: 15px; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }

/* above the drawing, the topic chosen on it: its name at the top left and the arrows at the top right,
   with the text flowing around both and then taking the whole width */
.cosmos-read { --nav-w: 76px; position: relative; margin-bottom: 18px; }
.cosmos-nav { position: absolute; z-index: 1; top: 0; right: 0; display: flex; align-items: center; gap: 8px; }
.cosmos-step {
  display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--line-2); border-radius: 50%;
  background: none; color: var(--ink-2); cursor: pointer; transition: color .2s, border-color .2s;
}
.cosmos-step:hover { color: var(--accent); border-color: var(--accent); }
.cosmos-step .ic { width: 15px; height: 15px; }
.cosmos-step[data-step="-1"] .ic { transform: scaleX(-1); }
.cosmos-panels { display: grid; }
.cosmos-panel {
  grid-area: 1 / 1;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .3s, transform .4s var(--ease), visibility 0s .3s;
}
.cosmos-panel.on { opacity: 1; visibility: visible; transform: none; transition: opacity .45s .1s, transform .6s .1s var(--ease), visibility 0s; }
.cosmos-panel::before { content: ""; float: right; width: var(--nav-w); height: 34px; margin: 0 0 10px 32px; }   /* the arrows' place */
.cosmos-panel h3 { float: left; margin: 12px 36px 4px 0; font: 400 29px/1.15 var(--f-serif); letter-spacing: -.012em; }   /* centred on the two lines of text beside it */
.cosmos-text { padding-top: 5px; font-size: 15px; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }

@container page (max-width: 899px) {
  .cosmos-name { white-space: normal; max-width: 7.5em; }
}
@container page (max-width: 719px) {
  .cosmos-panel h3 { float: none; margin: 0 0 12px; text-wrap: balance; }   /* on a narrow page the name stands beside the arrows, the text below */
  .cosmos-panel::before { margin-bottom: 0; }
  .cosmos-text { padding-top: 0; }
}
@container page (max-width: 559px) {
  .cosmos { --tab-top: 34px; }
  .cosmos-plot { height: 270px; }
  .cosmos-name { display: none; }
  .cosmos-tab .sym { height: 32px; font-size: 26px; line-height: 32px; }
  .cosmos-tick { height: 32px; font-size: 10px; }
  .cosmos-panel h3 { font-size: 25px; }
}

.term-card { background: var(--term); color: var(--term-ink); border-radius: var(--radius); overflow: hidden; font: 13.5px/1.8 var(--f-mono); box-shadow: 0 30px 60px -40px rgba(30, 18, 8, .55); }
.term-bar { display: flex; justify-content: space-between; gap: 12px; padding: 10px 18px; border-bottom: 1px solid var(--term-line); font-size: 12px; color: var(--term-dim); }
.term-body { padding: 16px 20px 18px; }
.term-body .ps { color: var(--term-accent); margin-right: .6em; user-select: none; }
.term-body .out { color: var(--term-ink); padding-left: 1.3em; margin-bottom: 10px; }
.term-body a { color: var(--term-accent); }
.term-body a:hover { color: var(--term-ink); }
.log { margin: 2px 0 10px; padding-left: 1.3em; }
.log li { display: grid; grid-template-columns: 5.6rem 6.8rem minmax(0, 1fr); gap: 0 14px; }
.log time { color: var(--term-dim); }
.log .k { color: var(--term-accent); }
@container page (max-width: 600px) {
  .log li { grid-template-columns: auto minmax(0, 1fr); padding: 4px 0; }
  .log .t { grid-column: 1 / -1; }
}
.caret { display: inline-block; width: .6em; height: 1.1em; vertical-align: -.2em; background: var(--term-accent); animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ── Research ───────────────────────────────────────────── */
.questions { counter-reset: q; display: grid; gap: 0; }
.questions li {
  counter-increment: q; display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 12px;
  padding: 18px 0; border-top: 1px solid var(--line);
  font: 400 20px/1.45 var(--f-serif);
}
.questions li:last-child { border-bottom: 1px solid var(--line); }
.questions li::before { content: counter(q, decimal-leading-zero); font: 12.5px/2.3 var(--f-mono); color: var(--accent); }

/* ── Publications ───────────────────────────────────────── */
.metrics { margin-top: 44px; }
.metrics-title { font: 500 12px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.seg { display: inline-flex; padding: 3px; border: 1px solid var(--line-2); border-radius: 10px; }
.seg button {
  height: 28px; padding: 0 12px; border: 0; border-radius: 7px; background: none; cursor: pointer;
  font: 500 13px/1 var(--f-sans); color: var(--ink-2); transition: background-color .2s, color .2s;
}
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }

.metrics-body { display: grid; gap: 24px; margin-top: 20px; }
@container page (min-width: 860px) {
  .metrics-body { grid-template-columns: minmax(0, 1fr) 260px; gap: 32px; }
  .cites-chart { padding-left: 32px; border-left: 1px solid var(--line); }
}
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; margin: 0; align-content: start; }
@container page (min-width: 560px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat dt, .cites-chart figcaption { font: 500 12.5px/1 var(--f-mono); color: var(--ink-3); }
.stat-n { margin: 10px 0 0; font: 400 44px/1 var(--f-serif); letter-spacing: -.02em; color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }
.stat-sub { margin: 8px 0 0; min-height: 2.8em; font-size: 13px; line-height: 1.4; color: var(--ink-3); }

.cites-chart { margin: 0; max-width: 440px; }
/* fixed height, so the page below doesn't move while the bars animate between views */
.bars { --bar-max: 88px; display: flex; height: calc(var(--bar-max) + 44px); margin-top: 10px; }
.bars li { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; min-width: 0; }
.bar-n { font: 12px/1 var(--f-mono); color: var(--ink-2); margin-bottom: 6px; }
.bar {
  width: min(40px, 70%); height: max(2px, calc(var(--v) * var(--bar-max))); border-radius: 4px 4px 0 0;
  background: var(--accent); transition: height .5s var(--ease), background-color .2s;
}
/* the current year is still running: hatched, so it doesn't read as a drop */
.bars .partial .bar { background: repeating-linear-gradient(135deg, var(--accent) 0 3px, color-mix(in srgb, var(--accent) 55%, transparent) 3px 6px); }
.bar-y { align-self: stretch; padding-top: 6px; border-top: 1px solid var(--line-2); text-align: center; font: 12px/1 var(--f-mono); color: var(--ink-3); }
.bar-y sup, .chart-note sup { font-size: .8em; line-height: 0; color: var(--accent); }
.chart-note { margin-top: 10px; font: 11.5px/1.4 var(--f-mono); color: var(--ink-3); text-align: right; }
.metrics-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.metrics-src { flex: 1 1 280px; font-size: 13px; color: var(--ink-3); }
.metrics-src a { text-decoration: none; }

.toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 44px; }
.search {
  display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 8px 0 12px; flex: 1 1 240px;
  border: 1px solid var(--line-2); border-radius: 12px; background: var(--panel); color: var(--ink-3);
  transition: border-color .2s, box-shadow .2s;
}
.search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.search .ic { width: 16px; height: 16px; }
.search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: 13.5px var(--f-mono); color: var(--ink); }
.search input::placeholder { color: var(--ink-3); }
.search input::-webkit-search-cancel-button { display: none; }
.search kbd { padding: 0 6px; border: 1px solid var(--line-2); border-radius: 6px; font: 11px/18px var(--f-mono); }
/* sort and filter menus beside the search: native selects dressed like the search box, each with a small key */
.pub-dash { display: flex; flex-wrap: wrap; gap: 8px; }
.pick {
  position: relative; display: flex; align-items: center; height: 38px;
  border: 1px solid var(--line-2); border-radius: 12px; background: var(--panel); color: var(--ink-3);
  transition: border-color .2s, box-shadow .2s;
}
.pick:hover { border-color: var(--ink-3); }
.pick:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.pick-k { padding-left: 12px; font: 11.5px/1 var(--f-mono); color: var(--ink-3); }
.pick select {
  height: 100%; min-width: 0; padding: 0 30px 0 7px; border: 0; outline: 0; background: none; cursor: pointer;
  -webkit-appearance: none; appearance: none; font: 13.5px var(--f-mono); color: var(--ink);
}
.pick .ic { position: absolute; right: 10px; width: 14px; height: 14px; pointer-events: none; }
/* phones: two menus side by side, the topic (the longest names) on its own row */
@container page (max-width: 620px) {
  .pub-dash { flex: 1 1 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pick:last-child { grid-column: 1 / -1; }
  .pick-k { padding-left: 10px; }
  .pick select { flex: 1; width: 100%; padding: 0 24px 0 6px; }
  .pick .ic { right: 8px; }
}
.empty { margin-top: 32px; padding: 28px; border: 1px dashed var(--line-2); border-radius: var(--radius); text-align: center; color: var(--ink-3); }

/* a year's heading is a button that folds its papers away and opens them again */
.pub-year .label::after { content: none; }
/* the space under the heading belongs to the list, so it folds away with it: left on the heading,
   it would merge with the next year's top margin once the list is hidden, and the page would jump */
.pub-year .label { margin-bottom: 0; }
.pub-year .pubs { margin-top: 20px; }
.year-toggle {
  flex: 1; display: flex; align-items: center; gap: 14px; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; text-align: left; transition: color .2s;
}
.year-toggle::after { content: ""; order: 1; flex: 1; height: 1px; background: var(--line); }
.year-toggle:hover { color: var(--accent); }
.year-chev { order: 3; width: 14px; height: 14px; margin-left: -6px; transition: transform .35s var(--ease); }
.pub-year.shut .year-chev { transform: rotate(-90deg); }
.pubs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
/* paper cards and the Code page's tool cards are styled on their own, not with .card, whose text rules are meant for the prose cards */
.pub, .tool {
  position: relative; padding: 13px 18px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: inset 0 1px 0 var(--hi), 0 8px 18px -14px var(--shadow);
  transition: border-color .25s, box-shadow .35s var(--ease), transform .35s var(--ease);
}
/* cards that open: a slight lift on hover, and an accent edge once open */
.pub:has(.pub-toggle), .tool:has(.pub-toggle) { cursor: pointer; }
.pub:has(.pub-toggle):hover, .tool:has(.pub-toggle):hover { border-color: var(--line-2); box-shadow: inset 0 1px 0 var(--hi), 0 14px 30px -22px var(--shadow); transform: translateY(-2px); }
.pub.open, .tool.open { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); box-shadow: inset 0 1px 0 var(--hi), 0 18px 40px -26px var(--shadow); }
.pub-toggle {
  display: block; width: 100%; margin: 0; padding: 0 32px 0 0; border: 0; background: none; cursor: pointer;
  font: inherit; letter-spacing: inherit; color: inherit; text-align: left;
}
.pub-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
.pub-chev { position: absolute; top: 13px; right: 16px; width: 16px; height: 16px; color: var(--ink-3); transition: transform .4s var(--ease), color .2s; }
.pub:hover .pub-chev, .tool:hover .pub-chev { color: var(--ink); }
.pub.open .pub-chev, .tool.open .pub-chev { transform: rotate(180deg); color: var(--accent); }
.pub-more { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); cursor: auto; }
.pub-more-label { font: 500 12.5px/1 var(--f-mono); color: var(--ink-3); }
.pub-abs { margin-top: 8px; font: 400 15.5px/1.45 var(--f-serif); color: var(--ink-2); text-wrap: pretty; }
/* expanded card: the abstract on the left, a quiet details list on the right */
.pub-cols { display: grid; gap: 18px; }
@container page (min-width: 760px) {
  .pub-cols { grid-template-columns: minmax(0, 1fr) 232px; gap: 18px; }   /* 18px, like the card's own side padding */
  .pub-meta { padding-left: 18px; border-left: 1px solid var(--line); }
}
.pub-meta { display: grid; gap: 9px; margin: 0; align-content: start; }
.pub-meta > div { display: grid; grid-template-columns: 5.6rem minmax(0, 1fr); gap: 10px; align-items: baseline; }
@container page (min-width: 760px) { .pub-meta > div { grid-template-columns: 1fr; gap: 1px; } }
.pub-meta dt { font: 11.5px/1.5 var(--f-mono); color: var(--ink-3); }
.pub-meta dd { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); overflow-wrap: anywhere; }
.pub-meta a { color: var(--ink-2); text-decoration: none; transition: color .2s; }
.pub-meta a:hover { color: var(--accent); }
/* "Copy entry": a button that looks like the links beside it */
.pub-copy { padding: 0; border: 0; background: none; cursor: pointer; font: inherit; color: var(--ink-2); transition: color .2s; }
.pub-copy:hover, .pub-copy:focus-visible { color: var(--accent); }
.pub-flag { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 6px; font: 11.5px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.pub-flag::before { content: "★"; letter-spacing: 0; }
/* categories and authors leave the same visible white space (≈10.8px, glyph to glyph) above and below the title */
.pub-cats { margin-bottom: 4.7px; padding-right: 32px; font: 400 11.5px/1.5 var(--f-mono); color: var(--ink-3); }
.pub-cats b { font-weight: 600; }
.pub-title { font: 500 18.5px/1.3 var(--f-serif); letter-spacing: -.005em; }
.pub-authors { margin-top: 2.3px; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.pub-authors b { font-weight: 600; color: var(--ink); }
.pub-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-top: 10px; }
.pub-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.pub-chip {
  display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: 5px;
  border: 1px solid transparent; background: var(--chip); color: #fff;
  font: 400 11.5px/1 var(--f-mono); text-decoration: none; white-space: nowrap;
  transition: background-color .25s, border-color .3s ease;
}
.pub-chip--arxiv { --chip: var(--arxiv); }
.pub-chip--journal { --chip: var(--journal); font-family: var(--f-sans); font-size: 12px; letter-spacing: .03em; }
.pub-chip--aps { --chip: var(--aps); }
.pub-chip--repo { --chip: var(--repo); }
.pub-chip--guide { --chip: var(--guide); }
.pub-chip--issues { --chip: var(--issues); }
.pub-chip b { font-weight: 600; }
.pub-chip:hover, .pub-chip:focus-visible { background: color-mix(in srgb, var(--chip) 85%, #000); border-color: rgba(255, 255, 255, .7); }
.pub-cites { margin-left: auto; font: 11.5px/1.5 var(--f-mono); color: var(--ink-3); white-space: nowrap; }
.pub-abstract { margin-top: 10px; font-size: 15px; color: var(--ink-2); max-width: 62ch; }
.pub-collab { color: var(--ink-3); }
/* KaTeX math in titles and abstracts: slightly smaller than its default so it sits with the serif */
.pub .katex { font-size: 1.08em; }
.pub-abs .katex { font-size: 1.05em; }

/* ── Talks: globe ───────────────────────────────────────── */
.map { position: relative; }   /* the tooltip is placed against it */
.map-view {
  --land: color-mix(in srgb, var(--ink) 13%, var(--panel));
  position: relative; overflow: hidden; aspect-ratio: 3 / 2;
  background: color-mix(in srgb, var(--sunk) 60%, var(--panel)); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: inset 0 1px 0 var(--hi), 0 8px 18px -14px var(--shadow);
  user-select: none; -webkit-user-select: none;
}
:root[data-theme="dark"] .map-view { --land: color-mix(in srgb, var(--ink) 17%, var(--panel)); }
@container page (max-width: 460px) { .map-view { aspect-ratio: 1; } }
.map-svg { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: pan-y; }
.map-svg.moved { touch-action: none; }   /* away from the opening view, one finger turns the globe instead of scrolling */
.map-view.dragging .map-svg { cursor: grabbing; }
.map-sphere { fill: var(--panel); stroke: var(--line-2); stroke-width: 1px; }
.map-grid { fill: none; stroke: color-mix(in srgb, var(--ink) 8%, transparent); stroke-width: .6px; }
/* sea names lie over the land when the globe turns them onto it, with a halo of paper as on a printed atlas */
.map-sea {
  font-family: var(--f-serif); font-style: italic; letter-spacing: .04em; text-anchor: middle; pointer-events: none;
  fill: var(--ink-3); stroke: var(--panel); stroke-width: 3px; stroke-linejoin: round; paint-order: stroke;
}
.map-sea--ocean { letter-spacing: .16em; }
.map-land { fill: var(--land); }
/* the fill sits on the group, so a country's dot follows its colours; borders are one shared line set on top */
.map-c { fill: var(--land); fill-rule: evenodd; transition: fill .2s; }
.map-c.on { fill: color-mix(in srgb, var(--accent) 30%, var(--panel)); stroke: var(--accent); stroke-width: 1.3px; stroke-linejoin: round; }
.map-borders { fill: none; stroke: var(--panel); stroke-width: .8px; stroke-linejoin: round; }
.map-dot { fill: color-mix(in srgb, var(--ink) 38%, var(--panel)); stroke: var(--panel); stroke-width: 1px; transition: fill .2s; }
.map-c.on .map-dot { fill: var(--accent); }
.map-hit { fill: transparent; stroke: none; }
/* pins: where talks were given. A round head on a needle, its point on the place; more talks, more pins fanned out */
.map-pin { cursor: default; }
.map-pin.many { cursor: zoom-in; }
.pin-shadow { fill: var(--shadow); }
.pin-body { filter: drop-shadow(0 1.5px 1.5px var(--shadow)); transition: transform .25s var(--ease); }
.map-pin.on .pin-body, .map-pin.lit .pin-body { transform: scale(1.14); }   /* from the needle's point, the pin's origin */
.pin-needle { fill: none; stroke: color-mix(in srgb, var(--ink) 55%, var(--panel)); stroke-width: 1.5px; stroke-linecap: round; }
.pin-head { fill: url(#pin-shine); stroke: var(--panel); stroke-width: 1.2px; }
/* the place of the talk being read or pointed at in the timeline, named beside its pin */
.pin-label {
  font: italic 500 15px/1 var(--f-serif); fill: var(--ink); pointer-events: none;
  stroke: var(--panel); stroke-width: 3.5px; stroke-linejoin: round; paint-order: stroke;
  opacity: 0; transition: opacity .2s;
}
.map-pin.lit .pin-label { opacity: 1; }
.map-pin.on .pin-label { opacity: 0; }   /* the card names it already */
#pin-shine stop:nth-child(1) { stop-color: color-mix(in srgb, var(--accent) 40%, #fff); }
#pin-shine stop:nth-child(2) { stop-color: var(--accent); }
#pin-shine stop:nth-child(3) { stop-color: color-mix(in srgb, var(--accent) 72%, #000); }
/* a place where meetings were only attended: an empty head, as on the timeline */
.map-pin.attended .pin-head { fill: var(--panel); stroke: var(--accent); stroke-width: 1.6px; }
.map-pin.attended .pin-n { fill: var(--accent); stroke: var(--panel); }
.map-pin:not([data-stack="3"]) .pin--3, .map-pin[data-stack="1"] .pin--2 { display: none; }
.pin-n {
  font: 600 9.5px/1 var(--f-mono); fill: #fff; text-anchor: middle;
  stroke: color-mix(in srgb, var(--accent) 60%, #000); stroke-width: 2px; stroke-linejoin: round; paint-order: stroke;
}

.map-tip {
  position: absolute; z-index: 5; left: 0; top: 0; pointer-events: none;
  padding: 5px 10px; border-radius: 8px; background: var(--ink); color: var(--bg);
  font: 500 12.5px/1.4 var(--f-sans); white-space: nowrap;
  transform: translate(-50%, calc(-100% - 14px)); opacity: 0; transition: opacity .15s;
}
.map-tip.below { transform: translate(-50%, 22px); }
/* over a pin: the place, then one line per talk */
.map-tip.card { width: max-content; max-width: min(400px, calc(100% - 24px)); padding: 9px 13px 10px; white-space: normal; font-weight: 400; }
.map-tip.card b { display: block; font: 500 15px/1.3 var(--f-serif); }
.map-tip.card.show { pointer-events: auto; }   /* the card can be reached, and its talks clicked */
.map-tip.card b + .tip-talk { margin-top: 3px; }
.tip-talk + b { margin-top: 9px; }
/* each talk leads to its place in the timeline below */
.tip-talk {
  display: block; width: calc(100% + 12px); margin: 0 -6px; padding: 2px 6px; border: 0; border-radius: 6px;
  background: none; color: inherit; font: 400 12.5px/1.45 var(--f-sans); text-align: left; cursor: pointer;
  transition: background-color .15s;
}
.tip-talk:hover, .tip-talk:focus-visible { background: color-mix(in srgb, var(--bg) 13%, transparent); outline: none; }
.tip-talk::after { content: " ↓"; opacity: 0; transition: opacity .15s; }
.tip-talk:hover::after, .tip-talk:focus-visible::after { opacity: .7; }
.map-tip.card time { margin-right: 8px; font: 11px/1 var(--f-mono); opacity: .6; }
.map-tip.card i { font-style: normal; opacity: .7; white-space: nowrap; }
/* with a view of the city on top, running to the card's edges; several places in one pin share the strip */
.map-tip.has-photo { width: min(340px, calc(100% - 24px)); box-shadow: 0 18px 40px -18px var(--shadow); }
.tip-photos { display: flex; gap: 2px; height: 172px; margin: -9px -13px 11px; border-radius: 8px 8px 0 0; overflow: hidden; }
.tip-photos img { flex: 1; min-width: 0; height: 100%; object-fit: cover; }
.map-tip.show { opacity: 1; }

.map-zoom {
  position: absolute; z-index: 1; right: 12px; bottom: 12px; display: flex; flex-direction: column; gap: 2px; padding: 3px;
  background: var(--panel); border: 1px solid var(--line-2); border-radius: 11px; box-shadow: 0 8px 18px -12px var(--shadow);
}
.map-btn {
  width: 30px; height: 30px; display: grid; place-items: center; padding: 0;
  background: none; border: 0; border-radius: 8px; color: var(--ink-2); cursor: pointer;
  transition: color .2s, background-color .2s;
}
.map-btn:hover:not(:disabled) { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }
.map-btn:disabled { color: var(--line-2); cursor: default; }
.map-btn .ic { width: 16px; height: 16px; }
.map-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 20px; margin-top: 10px; font: 11.5px/1.5 var(--f-mono); color: var(--ink-3); }
.map-key { padding: 0 5px; border: 1px solid var(--line-2); border-radius: 5px; font: inherit; }

/* ── Talks: timeline ────────────────────────────────────── */
/* the globe above, the timeline below it; on a wide page the globe takes three quarters of the width, centred */
.talks-wrap { display: grid; gap: 64px; margin-top: 44px; }
@container page (min-width: 640px) { .talks-wrap .map { width: 75%; justify-self: center; } }

/* one block per year, on a line through time: the year in the margin (wide) or above its talks (narrow),
   each talk a pin stuck in the line. --spine is where the line runs, --body where the text starts */
.tln { container: tl / inline-size; }
.tly { --spine: 5px; --body: 32px; --yr: 32px; position: relative; padding: 0 0 36px var(--body); }
.tly::before { content: ""; position: absolute; left: var(--spine); top: 0; bottom: 0; width: 1px; background: var(--line-2); }
/* the first and last years shown (the switch above can hide whole years) */
.tly:nth-child(1 of .tly:not([hidden]))::before { top: calc(var(--yr) / 2); }
.tly:nth-last-child(1 of .tly:not([hidden])) { padding-bottom: 0; }
.tly:nth-last-child(1 of .tly:not([hidden]))::before { bottom: -48px; background: linear-gradient(var(--line-2) calc(100% - 96px), transparent); }   /* fades out into the past */
.tly::after {   /* the year's mark on the line */
  content: ""; position: absolute; left: calc(var(--spine) - 4px); top: calc(var(--yr) / 2 - 4.5px);
  width: 9px; height: 9px; border-radius: 50%; background: var(--bg); border: 1.5px solid var(--ink-3);
}
.tly-year { font: 400 var(--yr)/1 var(--f-serif); letter-spacing: -.02em; font-variant-numeric: lining-nums; }
/* the year, with what was given that year, is a button that folds its talks away and opens them again */
.tly-toggle {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; letter-spacing: inherit; color: inherit; text-align: inherit;
}
.tly-n { transition: color .2s; }
.tly-toggle:hover .tly-n { color: var(--accent); }
.tly-count { display: inline-flex; flex-wrap: wrap; align-items: center; font: 11.5px/1.5 var(--f-mono); letter-spacing: 0; color: var(--ink-3); }
.tly-count span + span::before { content: "\00a0·\00a0"; }
.tly-chev { width: 14px; height: 14px; margin-left: 4px; color: var(--ink-3); transition: transform .35s var(--ease), color .2s; }
.tly-toggle:hover .tly-chev { color: var(--accent); }
.tly.shut .tly-chev { transform: rotate(-90deg); }
.tly.shut::after { background: var(--ink-3); }   /* a filled mark on the line: talks folded inside */

.talks { display: grid; gap: 34px; margin-top: 24px; }   /* the space under the year is the list's, so it folds away with it */
.talk { --pin: var(--accent); position: relative; border-radius: 10px; transition: background-color 1.2s ease-out, box-shadow 1.2s ease-out; }
.talk[data-kind="parallel"] { --pin: color-mix(in srgb, var(--accent) 35%, var(--ink-3)); }
.talk[data-kind="poster"] { --pin: var(--poster); }
/* the pin, drawn like those on the globe: a needle whose point is on the line, and a round head.
   Plenary talks in the accent, parallel talks in a quieter brown, posters in ochre, meetings attended with a hollow head */
.talk::before, .talk::after {
  content: ""; position: absolute; left: calc(var(--spine) - var(--body)); top: 12px;
  transform: rotate(10deg); transition: transform .3s var(--ease);
}
.talk::before { width: 1.5px; height: 12px; margin: -12px 0 0 -.75px; transform-origin: 50% 100%; background: color-mix(in srgb, var(--ink) 55%, var(--bg)); }
.talk::after {
  width: 15px; height: 15px; margin: -26.5px 0 0 -7.5px; transform-origin: 50% 26.5px; border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, color-mix(in srgb, var(--pin) 40%, #fff), var(--pin) 55%, color-mix(in srgb, var(--pin) 72%, #000));
  box-shadow: 0 0 0 1.2px var(--bg), 1px 2px 3px -1px var(--shadow);
}
.talk[data-kind="attended"]::after { background: var(--bg); box-shadow: inset 0 0 0 1.6px var(--pin), 0 0 0 1.2px var(--bg), 1px 2px 3px -1px var(--shadow); }
/* a meeting held online: a chip on the date line, where a city would otherwise be named */
.talk-when > .talk-chip::before { content: none; }
.talk-chip { padding: 0 8px; border: 1px solid var(--line-2); border-radius: 99px; font-weight: 500; letter-spacing: .02em; text-transform: none; color: var(--ink-2); }
/* the talk being read or pointed at: its pin rises a little, and its place is named on the globe */
.talk.lit::before, .talk.lit::after { transform: rotate(10deg) scale(1.16); }
/* a talk reached from the globe lights up for a moment, then fades */
.talk.flash { background-color: var(--accent-soft); box-shadow: 0 0 0 12px var(--accent-soft); transition: none; }

.talk-when { display: flex; flex-wrap: wrap; align-items: center; gap: 0 9px; font: 500 11.5px/1.6 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.talk-when time { color: var(--ink-2); transition: color .25s; }
.talk-when > * + *::before { content: "·"; display: inline-block; margin-right: 9px; color: var(--ink-3); }
.talk[data-kind="plenary"] .talk-kind, .talk.lit .talk-when time { color: var(--accent); }
.talk.soon .talk-when::after { content: "Upcoming"; padding: 0 8px; border-radius: 99px; background: var(--accent-soft); color: var(--accent); letter-spacing: .06em; }
.talk-title { margin-top: 5px; max-width: 32em; font: 500 20.5px/1.3 var(--f-serif); letter-spacing: -.005em; text-wrap: pretty; }
.talk-event { margin-top: 5px; max-width: 38em; font: italic 400 16.5px/1.45 var(--f-serif); color: var(--ink-3); text-wrap: pretty; }
.talk-event cite { color: var(--ink-2); }
.talk-event abbr { font-style: normal; font-weight: 500; color: var(--ink-2); text-decoration: none; }   /* a conference's acronym stands upright */
/* the city, after the conference: upright, and a button that shows it on the globe */
.talk-place { padding: 0; border: 0; background: none; cursor: pointer; font: inherit; font-style: normal; color: var(--ink-2); transition: color .2s; }
.talk-place:hover, .talk-place:focus-visible { color: var(--accent); }
/* the conference's page, the slides or poster, the paper */
.talk-links { display: flex; flex-wrap: wrap; gap: 2px 16px; margin-top: 6px; font: 12px/1.6 var(--f-mono); color: var(--ink-3); }
.talk-links a { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-2); text-decoration: none; transition: color .2s; }
.talk-links .ic { width: 13px; height: 13px; stroke-width: 1.7; color: var(--ink-3); transition: color .2s; }   /* added by js/site.js */
.talk-links a:hover .ic, .talk-links a:focus-visible .ic { color: inherit; }
.talk-links a:hover, .talk-links a:focus-visible { color: var(--accent); }
.talk-links a[href="#"] { opacity: .5; pointer-events: none; }   /* a placeholder, still to be filled in */
/* on a wide timeline the links stand in a column of their own on the right, level with the title */
@container tl (min-width: 760px) {
  .talk { display: grid; grid-template-columns: minmax(0, 1fr) max-content; column-gap: 48px; align-items: start; }
  .talk > p { grid-column: 1; max-width: none; }   /* the links column bounds the text now */
  .talk > .talk-links { grid-column: 2; grid-row: 1 / span 3; flex-direction: column; align-items: flex-end; gap: 3px; margin: 0; padding-top: 25px; }
}

@container tl (min-width: 520px) {
  .tly { --spine: 108px; --body: 132px; --yr: 36px; display: grid; grid-template-columns: 84px minmax(0, 1fr); column-gap: 48px; padding: 0 0 40px; }
  .tly-year { position: sticky; top: 32px; align-self: start; margin: 0; }
  .tly-toggle { flex-direction: column; align-items: flex-end; gap: 10px; margin-left: auto; text-align: right; }
  .tly-count { flex-direction: column; align-items: flex-end; }
  .tly-count span + span::before { content: none; }
  .tly-chev { margin: -4px -1px 0 0; }
  .tly { transition: padding-bottom .36s var(--ease); }   /* in step with the fold (js/site.js), not in one jump */
  .tly.shut:not(:nth-last-child(1 of .tly:not([hidden]))) { padding-bottom: 28px; }
  .talks { margin-top: 0; padding-top: 46px; }   /* the first pin below the year's mark */
}
@media (max-width: 1023px) { .tly-year { top: calc(var(--top-h) + 20px); } }

/* ── Rows (notebooks) ───────────────────────────────────── */
.rows { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.row { display: grid; grid-template-columns: var(--date-w, 4.2rem) minmax(0, 1fr) auto; gap: 4px 18px; align-items: baseline; padding: 18px 22px; }
.row + .row { border-top: 1px solid var(--line); }
.rows > .row:first-child { border-top-left-radius: inherit; border-top-right-radius: inherit; }
.rows > .row:last-child { border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; }
.row-date { font: 12.5px/1.6 var(--f-mono); color: var(--ink-3); }
.row-title { font: 500 19px/1.35 var(--f-serif); }
.row-sub { font-size: 14.5px; color: var(--ink-2); }
.row-end { display: flex; align-items: center; gap: 8px; }
.kind {
  padding: 2px 10px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 5%, transparent);
  font: 12px/1.6 var(--f-mono); color: var(--ink-2); white-space: nowrap;
}
.kind--accent { background: var(--accent-soft); color: var(--accent); }
@container page (max-width: 600px) {
  .row { grid-template-columns: auto minmax(0, 1fr); padding: 16px 18px; }
  .row-main { grid-column: 1 / -1; grid-row: 2; }
  .row-end { justify-self: end; }
}

/* ── Code ───────────────────────────────────────────────── */
/* the GitHub profile, beside the lead: just the logo and the user name */
.gh-link { display: inline-flex; align-items: center; gap: 10px; font: 500 14.5px/1.3 var(--f-mono); color: var(--ink); white-space: nowrap; transition: color .2s; }
.gh-link .logo { width: 26px; height: 26px; color: inherit; }
.gh-link:hover { color: var(--accent); }
/* level with the lead's first line: its top margin, plus half of what that line (19px x 1.5, as the hero role on the overview) is taller than the 26px logo */
@container page (min-width: 760px) {
  #code .page-head--aside > .actions { align-self: start; margin-top: calc(20px + (19px * 1.5 - 26px) / 2); }
}
.gh-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
/* a box for each tool: a paper card (see .pub, .tool; it borrows .pub-toggle, .pub-chev and .pub-more), with a logo */
.tools { display: grid; gap: 10px; }
.tool-head { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 2px 14px; }
.tool-logo { display: block; align-self: start; margin-top: 3px; width: 44px; height: 44px; border-radius: 10px; }
.tool-name { margin: 0; font: 500 18.5px/1.3 var(--f-serif); letter-spacing: -.005em; }
.tool-tag { margin-top: 2.3px; color: var(--ink-2); font-size: 13.5px; line-height: 1.55; }
.tool .pub-chips { margin-top: 10px; }
.tool-state { grid-column: 1 / -1; justify-content: flex-end; margin-top: 8px; gap: 2px 14px; }   /* bottom right of the box, at any width */
@container page (min-width: 760px) {
  .tool-head { grid-template-columns: auto minmax(0, 1fr) auto; }
  .tool-state { grid-column: auto; align-self: end; flex-direction: column; align-items: flex-end; gap: 0; margin: 0; }
}

/* what opens */
.tool-more { display: grid; gap: 28px; padding-bottom: 6px; }
.tool-body { display: grid; gap: 24px; }
.tool-intro { color: var(--ink-2); font-size: 15.5px; line-height: 1.55; }
.tool-sub { margin: 0 0 10px; font: 500 12px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.tool-sub--wide { margin: 0 0 -14px; }
.tool-feats { display: grid; gap: 6px 36px; }
/* filled column by column; a new tool with more or fewer points only needs the number of rows changed */
@container page (min-width: 560px) { .tool-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); grid-auto-flow: column; } }
.tool-feats li { margin-left: 1.1em; list-style: disc; color: var(--ink-2); font-size: 14.5px; line-height: 1.45; }
.tool-feats li::marker { color: var(--ink-3); }
.tool-facts { display: grid; gap: 18px 28px; margin: 0; padding-top: 22px; border-top: 1px solid var(--line); }
@container page (min-width: 560px) { .tool-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container page (min-width: 900px) { .tool-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tool-facts dt { margin-bottom: 7px; font: 500 12.5px/1 var(--f-mono); color: var(--ink-3); }
.tool-facts dd { margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.45; }
.tool-facts dd a { color: var(--accent); }
.tool-facts dd a:hover { color: var(--accent-ink); }
.tool-console { background: var(--term); color: var(--term-ink); border-radius: 12px; overflow: hidden; }
.tool-console .term { background: none; border-radius: 0; padding: 11px 12px 11px 18px; border-bottom: 1px solid var(--term-line); }
.tool-console pre { margin: 0; padding: 14px 18px 16px; overflow-x: auto; font: 12.5px/1.75 var(--f-mono); }
.tool-console code { font: inherit; }
.tool-console .ps { color: var(--term-accent); margin-right: .3em; user-select: none; }
.tool-console .ok { color: #8FCBA3; }
.tool-console .no { color: #E6BE6E; }

.shots { margin: 0; }
/* the pictures slide inside a fixed frame, tall or wide, so nothing around them moves. The frame clips, so its padding (--px, --pt, --pb)
   must be wider than the shadows, which then fade out before reaching its edge. Its width and negative margins add that padding back,
   so a picture is exactly --w of the box wide: 80%, or all of it on a phone. The left margin centres the frame by hand, because
   margin: auto does nothing to something wider than its container */
.shots { --w: 80%; --px: 28px; --pt: 20px; --pb: 34px; --shadow-y: 6px; --shadow-blur: 8px; }
@container page (max-width: 559px) { .shots { --w: 100%; --px: 16px; --pt: 12px; --pb: 22px; --shadow-y: 3px; --shadow-blur: 4px; } }
.shots-track { width: calc(var(--w) + 2 * var(--px)); margin: calc(-1 * var(--pt)) 0 calc(10px - var(--pb)) calc((100% - var(--w) - 2 * var(--px)) / 2); display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
.shots-track::-webkit-scrollbar { display: none; }
.shots-track:focus-visible { outline: 2px solid var(--accent); outline-offset: -6px; border-radius: 12px; }
.shot { flex: 0 0 100%; min-width: 0; padding: var(--pt) var(--px) var(--pb); overflow: hidden; scroll-snap-align: center; scroll-snap-stop: always; }   /* hidden: a picture's shadow stays out of its neighbour's frame */
.shot img { display: block; width: 100%; height: auto; aspect-ratio: 1.64; object-fit: contain; filter: drop-shadow(0 0 1px color-mix(in srgb, var(--ink) 35%, transparent)) drop-shadow(0 var(--shadow-y) var(--shadow-blur) var(--shadow)); }
@container page (max-width: 559px) { .shot img { aspect-ratio: 1.25; } }   /* a little taller on a phone, where the tall windows would be tiny */
.shots-bar { display: flex; align-items: center; justify-content: center; gap: 12px; }
.shots-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 4px; }
.shots-tabs button {
  padding: 4px 10px; border: 0; border-radius: 7px; background: none; cursor: pointer;
  font: 12.5px/1.5 var(--f-mono); color: var(--ink-3); transition: color .2s, background-color .2s;
}
.shots-tabs button:hover { color: var(--ink); }
.shots-tabs button[aria-current="true"] { background: var(--accent-soft); color: var(--accent-ink); }
.shots-arrow {
  flex-shrink: 0; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--line-2); border-radius: 50%;
  background: none; color: var(--ink-2); cursor: pointer; transition: color .2s, border-color .2s, opacity .2s;
}
.shots-arrow .ic { width: 15px; height: 15px; transform: rotate(-90deg); }
.shots-arrow[data-step="-1"] .ic { transform: rotate(90deg); }
.shots-arrow:hover:not(:disabled) { color: var(--accent); border-color: var(--accent); }
.shots-arrow:disabled { opacity: .35; cursor: default; }
.shots-tabs button:focus-visible, .shots-arrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* all the captions share one cell, as tall as the longest, so changing picture doesn't move what's below */
.shots-caps { display: grid; margin-top: 8px; font-size: 13.5px; line-height: 1.45; color: var(--ink-3); text-align: center; }
.shots-caps span { grid-area: 1 / 1; visibility: hidden; }
.shots-caps span.on { visibility: visible; }

/* how a tool is built: its modules in the order the data goes through them, and the links between them on hover */
.flow { margin: 0; }
.flow-read { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 24px; margin-bottom: 14px; font-size: 13.5px; line-height: 1.5; color: var(--ink-3); }
/* below the drawing, what the module under the pointer does. All the texts are stacked in one cell, hidden but the current
   one, so the cell is always as tall as the longest and nothing around it moves */
.flow-now { display: grid; margin-top: 16px; font-size: 13.5px; line-height: 1.5; color: var(--ink-3); }
.flow-info { grid-area: 1 / 1; visibility: hidden; }
.flow-info.on { visibility: visible; }
.flow-info b { font: 500 13px/1 var(--f-mono); color: var(--ink); margin-right: .5em; }
.flow-info .t { color: var(--ink-2); }
.flow-info .l { display: block; font: 12px/1.6 var(--f-mono); overflow-wrap: anywhere; }
.flow-key { display: inline-flex; align-items: center; gap: 7px; font: 12px/1.5 var(--f-mono); }
.flow-key i { width: 20px; height: 0; border-top: 1.5px solid var(--accent); }
.flow-key i.by { margin-left: 8px; border-top: 1.5px dashed var(--ink-3); }
.flow-plot { position: relative; }
.flow-edges { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
@container page (max-width: 759px) { .flow-edges, .flow-key { display: none; } }   /* stacked, the links would only tangle: the highlights and the text say it */
.flow-edges path { fill: none; stroke: var(--accent); stroke-width: 1.4; }
.flow-edges path.by { stroke: var(--ink-3); stroke-dasharray: 4 3; }
.flow-cols { display: grid; gap: 22px 26px; }
@container page (min-width: 760px) { .flow-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fl-head { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font: 500 11.5px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.fl-head::after { content: ""; flex: 1; height: 1px; background: var(--line-2); }
@container page (min-width: 760px) {   /* a hairline with an arrowhead, from each stage to the next */
  .fl-col { position: relative; }
  .fl-col:not(.fl-col--end) .fl-head { margin-right: -18px; }
  .fl-col:not(.fl-col--end) .fl-head::before { content: ""; order: 2; width: 6px; height: 6px; margin-left: -15px; border: solid var(--ink-3); border-width: 1px 1px 0 0; transform: rotate(45deg); }
}
.flow ul { display: flex; flex-wrap: wrap; gap: 6px; }
@container page (min-width: 760px) { .fl-col ul { flex-direction: column; } .fl-col .fl-n, .fl-col .fl-in { display: block; } }
.fl-n, .fl-in {
  position: relative; display: inline-block; padding: 5px 10px; border: 1px solid var(--line-2); border-radius: 7px;
  font: 12.5px/1.4 var(--f-mono); white-space: nowrap;
}
.fl-n { background: var(--panel); color: var(--ink); text-decoration: none; transition: background-color .15s, border-color .15s, color .15s, opacity .15s; }
.fl-in { border-color: transparent; padding-left: 0; padding-right: 0; color: var(--ink-3); }
.fl-lib { margin-top: 0; border-style: dashed; color: var(--ink-2); font-style: italic; }
/* the others fade by colour, not opacity: their solid background keeps the links from running through their names */
.flow.on .fl-n { border-color: var(--line); color: color-mix(in srgb, var(--ink-3) 65%, var(--panel)); }
.flow.on .fl-n.is-on { background: var(--accent); border-color: var(--accent); color: var(--panel); }
.flow.on .fl-n.is-use { background: color-mix(in srgb, var(--accent) 12%, var(--panel)); border-color: var(--accent); color: var(--accent-ink); }
.flow.on .fl-n.is-by { border-color: var(--ink-3); border-style: dashed; color: var(--ink); }
.fl-n:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.flow-band { margin-top: 26px; }
.fl-uses { display: grid; gap: 16px 26px; }
@container page (min-width: 760px) { .fl-uses { grid-template-columns: minmax(0, 1fr) auto auto; } }
.fl-use-t { margin-bottom: 8px; font-size: 13px; color: var(--ink-2); }
.fl-use-t span { color: var(--ink-3); }

/* ── CV ─────────────────────────────────────────────────── */
/* the download sits beside the lead (see .page-head--aside), with the date of the last update under it */
.page-head--aside .actions { flex-direction: column; align-items: flex-start; gap: 10px; }
@container page (min-width: 760px) { .page-head--aside .actions { align-items: center; } }
.cv-stamp { font: 12.5px/1.5 var(--f-mono); color: var(--ink-3); }
.cv-print-head { display: none; }

/* Fig. 3: where and when. Every mark is placed by its years, --a to --b (or to --now), on the span --t0 … --t1;
   js/site.js sets --now and --t1 from today's date and adds the years along the bottom */
.career { --t0: 2015.5; --now: 2026.84; --t1: 2027.2; margin-top: 56px; }
.career-plot { position: relative; }
.career-plot li, .career-axis span {
  position: absolute; left: calc((var(--a) - var(--t0)) / (var(--t1) - var(--t0)) * 100%);
}
.career-places { position: relative; height: 26px; }
.career-places li { bottom: 0; font: italic 400 18px/1 var(--f-serif); color: var(--ink-2); white-space: nowrap; }
.career-places .now { left: auto; right: calc((var(--t1) - var(--now)) / (var(--t1) - var(--t0)) * 100%); }
.career-places .now { color: var(--accent); }

.career-track { --padova: color-mix(in srgb, var(--ink-3) 45%, var(--bg)); --ferrara: var(--ink-3); --valencia: var(--accent);
  position: relative; height: 4px; margin-top: 30px; }
.career-track li {
  top: 0; height: 100%; border-radius: 2px; background: var(--c);
  width: calc((var(--b, var(--now)) - var(--a)) / (var(--t1) - var(--t0)) * 100% - 3px);   /* a hairline gap between stages */
}
.career-track [data-place="padova"]   { --c: var(--padova); }
.career-track [data-place="ferrara"]  { --c: var(--ferrara); }
.career-track [data-place="valencia"] { --c: var(--valencia); }
.career-track span {
  position: absolute; left: 0; bottom: calc(100% + 9px);
  font: 500 10.5px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap;
}
.career-track .now { width: calc((var(--now) - var(--a)) / (var(--t1) - var(--t0)) * 100%); }
.career-track .now span { left: auto; right: 0; color: var(--accent); }
.career-track .now::after {   /* today */
  content: ""; position: absolute; right: -4px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft);
}
.career-track .visit { top: -3px; height: 10px; width: calc((var(--b) - var(--a)) / (var(--t1) - var(--t0)) * 100%); box-shadow: 0 0 0 2px var(--bg); }

.career-axis { position: relative; height: 28px; margin-top: 12px; }
.career-axis span { top: 0; width: 1px; height: 5px; background: var(--line-2); }
.career-axis b { position: absolute; top: 10px; left: 0; transform: translateX(-50%); font: 400 11px/1 var(--f-mono); color: var(--ink-3); }
.career figcaption { display: flex; gap: 10px; align-items: baseline; margin-top: 14px; font: italic 15px/1.4 var(--f-serif); color: var(--ink-3); }
.career figcaption span { font: 12px/1 var(--f-mono); font-style: normal; color: var(--accent); white-space: nowrap; }
@container page (max-width: 639px) { .career-axis .odd b { display: none; } }
@container page (max-width: 519px) { .career-track .short span { display: none; } }

/* the entries: dates in the margin, then what (serif), where (italic) and a note */
.cv { --when: 9.5rem; display: grid; gap: 26px; }
.cv-item { display: grid; gap: 2px 28px; }
@container page (min-width: 640px) { .cv-item { grid-template-columns: var(--when) minmax(0, 1fr); } }
.cv-when { padding-top: 4px; font: 12.5px/1.6 var(--f-mono); color: var(--ink-3); white-space: nowrap; }
.cv-what { font: 500 19.5px/1.3 var(--f-serif); letter-spacing: -.005em; text-wrap: pretty; }
.cv-what a { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; transition: color .2s; }
.cv-what a .ic { width: 14px; height: 14px; color: var(--ink-3); transition: color .2s, transform .3s var(--ease); }
.cv-what a:hover, .cv-what a:hover .ic { color: var(--accent); }
.cv-what a:hover .ic { transform: translate(1px, -1px); }
.cv-aka { font-weight: 400; font-style: italic; color: var(--ink-3); }
.cv-grade { font-weight: 400; }
.cv-where { margin-top: 3px; font: italic 400 16.5px/1.45 var(--f-serif); color: var(--ink-2); text-wrap: pretty; }
.cv-where abbr { font-style: normal; text-decoration: none; }
.cv-where + .cv-where { margin-top: 0; }
.cv-note { margin-top: 4px; max-width: 64ch; font-size: 14.5px; line-height: 1.6; color: var(--ink-3); text-wrap: pretty; }
.cv-note i { font: italic 400 15.5px/1 var(--f-serif); color: var(--ink-2); }
.cv-note a { color: inherit; text-decoration: none; }   /* a thesis title, linked to its record */
.cv-note a .ic { width: 12px; height: 12px; margin-left: 5px; vertical-align: -1px; color: var(--ink-3); transition: color .2s, transform .3s var(--ease); }
.cv-note a i { transition: color .2s; }
.cv-note a:hover i, .cv-note a:hover .ic { color: var(--accent); }
.cv-note a:hover .ic { transform: translate(1px, -1px); }
.cv-note + .cv-note { margin-top: 1px; }   /* a second line of notes: the thesis, then who supervised it */
/* Education: each entry with its university's seal on the right, drawn in --ink-2 (light) or --ink-3 (dark) */
.cv-inst { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 0 clamp(16px, 4cqi, 48px); }
.cv-seal { display: block; margin-top: 4px; width: clamp(56px, 8.5cqi, 84px); border-radius: 50%; opacity: .85; transition: opacity .25s; }
.cv-seal:hover { opacity: 1; }
.cv-seal--wide { width: clamp(92px, 16cqi, 150px); border-radius: 0; }   /* a wordmark, not a round seal */
.cv-seal--infn { width: clamp(68px, 10cqi, 104px); border-radius: 0; }
.cv-seal img { width: 100%; height: auto; }
.cv-seal .on-dark, :root[data-theme="dark"] .cv-seal .on-light { display: none; }
:root[data-theme="dark"] .cv-seal .on-dark { display: block; }
/* each language with its flag, then a six-step CEFR scale, A1 to C2, filled up to its level */
.cv-langs { display: flex; flex-wrap: wrap; gap: 18px 56px; }
.cv-lang { display: flex; align-items: flex-start; gap: 14px; }
.flag { flex: none; width: 27px; height: 18px; margin-top: 3px; border-radius: 3px; box-shadow: 0 0 0 1px var(--line-2); }
.cv-lang p { white-space: nowrap; }
.cv-lang b { font: 500 19.5px/1.3 var(--f-serif); }
.cv-lang i { margin-left: 4px; font: italic 400 16.5px/1.3 var(--f-serif); color: var(--ink-2); }
.cv-lang abbr { margin-left: 6px; font: 12px/1 var(--f-mono); color: var(--accent); text-decoration: none; }
.cefr { display: flex; gap: 3px; margin-top: 9px; }
.cefr span { width: 16px; height: 3px; border-radius: 2px; background: var(--line-2); }
.cefr[data-level="1"] span:nth-child(-n+1), .cefr[data-level="2"] span:nth-child(-n+2), .cefr[data-level="3"] span:nth-child(-n+3),
.cefr[data-level="4"] span:nth-child(-n+4), .cefr[data-level="5"] span:nth-child(-n+5), .cefr[data-level="6"] span { background: var(--accent); }
@container page (min-width: 640px) { .cv-langs { padding-left: calc(9.5rem + 28px); } }

/* ── Beyond ─────────────────────────────────────────────── */
.quote { font: italic 400 clamp(28px, 3.4vw, 40px)/1.2 var(--f-serif); letter-spacing: -.015em; max-width: 20em; margin-top: 18px; }
.quote::before { content: "“"; color: var(--accent); }
.quote::after { content: "”"; color: var(--accent); }
.interest h3 { display: flex; align-items: baseline; gap: 12px; margin-top: 0; font-style: italic; }
.rn { font: 13px/1 var(--f-mono); font-style: normal; color: var(--accent); }

/* ── Contact ────────────────────────────────────────────── */
.mail-note { margin-top: 12px; font: italic 17px/1.5 var(--f-serif); color: var(--ink-3); }

.mail-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.mail-ic { width: 22px; height: 22px; margin-right: 6px; color: var(--ink-2); stroke-width: 1.5; }
.mail-line .copy-ic { width: 30px; height: 30px; }
.mail-line .copy-ic .ic { width: 17px; height: 17px; }
.mail {
  font: 400 clamp(22px, 2.3vw, 26px)/1.3 var(--f-serif); letter-spacing: -.005em; overflow-wrap: anywhere;
  color: var(--accent); text-decoration: none; transition: color .2s;
}
.mail:hover { color: var(--accent-ink); }
address { font-style: normal; color: var(--ink-2); line-height: 1.7; }
address strong { font: 500 19px/1.4 var(--f-serif); color: var(--ink); }

/* the address, and the institutes' logos beside it */
.office { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); align-items: center; gap: 28px; }   /* the columns of .refs, so the logos start where the second reference does */
/* two columns, IFIC over CSIC and UV over Severo Ochoa; widths set so the four carry about the same area */
.office-logos { display: grid; grid-template-rows: auto auto; grid-auto-flow: column; grid-template-columns: repeat(2, minmax(0, max-content)); align-items: center; gap: 22px 32px; }
.office-logo { display: block; max-width: 100%; transition: opacity .2s; }
.office-logo--ific { width: 240px; }
.office-logo--csic { width: 218px; }
.office-logo--uv   { width: 195px; }
.office-logo--so   { width: 171px; }
.office-logo:hover { opacity: .8; }
.office-logo img { width: 100%; height: auto; }
.office-logo .on-dark, :root[data-theme="dark"] .office-logo .on-light { display: none; }
:root[data-theme="dark"] .office-logo .on-dark { display: block; opacity: .88; }

.profiles { display: grid; gap: 22px 28px; }
@container page (min-width: 520px) { .profiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* wide: quarters with the same 28px gutter, so the third column starts where the second reference and the logos do
   and the second sits halfway between; three profiles to a row, the last spilling into the empty fourth quarter */
@container page (min-width: 860px) {
  .profiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .profiles li:nth-child(3n+1) { grid-column: 1; }
  .profiles li:nth-child(3n+2) { grid-column: 2; }
  .profiles li:nth-child(3n)   { grid-column: 3 / span 2; }
}
/* only the name is a link; the handle below is plain text, to select or copy */
.profiles li { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 14px; align-items: center; }
.p-name { justify-self: start; display: inline-flex; align-items: center; gap: 5px; font: 500 18px/1.25 var(--f-serif); text-decoration: none; transition: color .2s; }
.p-name .ic { width: 13px; height: 13px; color: var(--ink-3); transition: color .2s, transform .3s var(--ease); }
.p-name:hover, .p-name:hover .ic { color: var(--accent); }
.p-name:hover .ic { transform: translate(1px, -1px); }
.profiles .handle { grid-column: 2; display: flex; align-items: center; gap: 4px; margin-top: 2px; font: 12.5px/1.4 var(--f-mono); color: var(--ink-3); }
.profiles .handle span { overflow-wrap: anywhere; }
.copy-ic {
  display: grid; place-items: center; width: 24px; height: 24px; flex-shrink: 0;
  background: none; border: 0; border-radius: 6px; color: var(--ink-3); cursor: pointer;
  opacity: .55; transition: opacity .35s, color .35s, background-color .2s;
}
/* the two icons share one cell and crossfade, the outgoing one shrinking away */
.copy-ic .ic { grid-area: 1 / 1; width: 14px; height: 14px; transition: opacity .3s, transform .4s var(--ease); }
.copy-ic .ic + .ic, .copy-ic.copied .ic:first-child { opacity: 0; transform: scale(.5); }
.copy-ic.copied .ic + .ic { opacity: 1; transform: none; }
.mail-line:hover .copy-ic, .profiles li:hover .copy-ic, .copy-ic:focus-visible, .copy-ic.copied { opacity: 1; }
.copy-ic:hover { color: var(--accent); background: var(--accent-soft); }
.copy-ic.copied { color: var(--accent); }

.refs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 28px; }   /* as many columns as there are people, up to what fits */
.ref-name { font: 500 19px/1.4 var(--f-serif); }
.ref-mail { display: inline-block; margin-top: 2px; color: var(--accent); text-decoration: none; overflow-wrap: anywhere; transition: color .2s; }
.ref-mail:hover { color: var(--accent-ink); }
.ref-addr { margin-top: 10px; }

.logo { width: 22px; height: 22px; flex-shrink: 0; fill: currentColor; color: var(--ink); --inspire-dot: #12AFD3; --arxiv-grey: #7C7469; }
.logo--orcid { color: #A6CE39; }
.logo--linkedin { color: #0A66C2; }
:root[data-theme="dark"] .logo--arxiv { --arxiv-grey: #AFA497; }
:root[data-theme="dark"] .logo--linkedin { color: #4A93DB; }
:root[data-theme="dark"] .logo--inspire { --inspire-dot: #24D6FF; }

/* ── Beyond physics: music ──────────────────────────────── */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* a pick: the small accent diamond of the Overview, after the title (and on the button that shows only picks) */
.rec-pick { display: inline-block; width: 6px; height: 6px; margin-left: .6em; vertical-align: .22em; background: var(--accent); transform: rotate(45deg); }

/* transcriptions: the first page as a small sheet of paper, the rest typeset beside it */
.score { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 0 24px; padding: 22px 0; border-top: 1px solid var(--line); }
.score:first-child { border-top: 0; padding-top: 2px; }
.score:last-child { border-bottom: 1px solid var(--line); }
@container page (min-width: 640px) { .score { grid-template-columns: 92px minmax(0, 1fr); gap: 0 30px; } }
.score-thumb {
  display: block; align-self: start; overflow: hidden; border-radius: 3px; background: #fff;
  box-shadow: 0 0 0 1px var(--line-2), 0 12px 24px -18px var(--shadow);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.score-thumb img { width: 100%; height: auto; }
.score:hover .score-thumb { transform: translateY(-2px) rotate(-1deg); box-shadow: 0 0 0 1px var(--ink-3), 0 18px 30px -18px var(--shadow); }
.score-title { font: 500 21px/1.3 var(--f-serif); letter-spacing: -.005em; text-wrap: pretty; }
.score-title a { text-decoration: none; transition: color .2s; }
.score-title a:hover { color: var(--accent); }
.score-by { margin-top: 2px; font: 400 16.5px/1.45 var(--f-serif); color: var(--ink-2); }
.page-head .lead:empty { display: none; }
.score-by cite, .sv-by cite, .rec-by cite { font-style: italic; }
/* the separators sit in the gaps, so one that falls at the start of a line is clipped away (as on the Overview) */
.score-meta { display: flex; flex-wrap: wrap; gap: 0 1.3em; overflow: hidden; margin-top: 8px; font: 12.5px/1.6 var(--f-mono); color: var(--ink-3); }
.score-meta span { position: relative; white-space: nowrap; }
.score-meta span + span::before { content: "·"; position: absolute; left: -.95em; }
.score-note { margin-top: 8px; max-width: 62ch; font-size: 15px; color: var(--ink-2); text-wrap: pretty; }
.score-links { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 12px; font: 12.5px/1.6 var(--f-mono); }
.score-links a, .score-links button {
  display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; color: var(--ink-2); text-decoration: none; transition: color .2s;
}
.score-links .ic { width: 13px; height: 13px; stroke-width: 1.7; color: var(--ink-3); transition: color .2s; }
.score-links a:hover, .score-links button:hover, .score-links [aria-pressed="true"] { color: var(--accent); }
.score-links a:hover .ic, .score-links button:hover .ic, .score-links [aria-pressed="true"] .ic { color: inherit; }
.score-links .score-open { color: var(--accent); }
.score-links .score-open .ic { color: inherit; }


/* the overview: each section's heading ends in a link to its library */
.label .label-more {
  order: 2; display: inline-flex; align-items: center; gap: 6px;
  font: 12.5px/1 var(--f-mono); letter-spacing: 0; text-transform: none; color: var(--accent); text-decoration: none;
  transition: color .2s;
}
.label-more .ic { width: 14px; height: 14px; transition: transform .3s var(--ease); }
.label-more:hover { color: var(--accent-ink); }
.label-more:hover .ic { transform: translateX(3px); }
/* the shelf of posters */
.posters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 20px; }
@container page (min-width: 760px) { .posters { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 26px clamp(16px, 2.2cqi, 26px); } }
@container page (max-width: 639px) {
  .posters {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 34%; gap: 14px;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin: 0 -20px; padding: 4px 20px 16px; scroll-padding: 0 20px;
  }
  .posters::-webkit-scrollbar { display: none; }
  .poster { scroll-snap-align: start; }
}
.poster a { display: block; text-decoration: none; }
.poster .rec-cover { display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; border-radius: 3px; box-shadow: 0 16px 28px -22px var(--shadow); transition: transform .4s var(--ease); }
.poster a:hover .rec-cover { transform: translateY(-2px); }
.poster .sheet-title { font-size: 15.5px; margin-top: 10px; }
.poster .sheet-by { font-size: 12.5px; }
.poster a:hover .sheet-title, .poster.on .sheet-title { color: var(--accent); }
/* the newest transcriptions, a shelf of sheets */
.sheets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
@container page (min-width: 640px) { .sheets { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px clamp(20px, 3cqi, 36px); } }
/* phones: the shelf is one row, swiped sideways */
@container page (max-width: 639px) {
  .sheets {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 38%; gap: 16px;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin: 0 -20px; padding: 4px 20px 16px; scroll-padding: 0 20px;
  }
  .sheets::-webkit-scrollbar { display: none; }
  .sheets .sheet { scroll-snap-align: start; }
}
.sheets .sheet { display: block; padding: 0; border: 0; }
.sheet a { display: block; text-decoration: none; }
.sheet .score-thumb { max-width: 180px; }
.sheet-title { display: block; margin-top: 14px; font: 500 17px/1.3 var(--f-serif); text-wrap: pretty; transition: color .2s; }
.sheet-by { display: block; margin-top: 2px; font-size: 13.5px; color: var(--ink-3); }
.sheet a:hover .sheet-title { color: var(--accent); }
.sheet.on .sheet-title { color: var(--accent); }
/* a few picks, in two columns on a wide page */
.picks-intro { margin-bottom: 14px; font: 400 17px/1.5 var(--f-serif); color: var(--ink-2); }
.recs--compact .rec { grid-template-columns: 44px minmax(0, 1fr) 36px; grid-template-areas: "cover text play"; gap: 0 14px; padding: 10px 0; border-top: 0; border-bottom: 1px solid var(--line); }
.recs--compact .rec:first-child { border-top: 1px solid var(--line); }
.recs--compact .rec-cover { width: 44px; height: 44px; margin: 0; }
.recs--compact .rec-sleeve { margin: 0; }
.recs--compact .rec-meta, .recs--compact .rec-note { display: none; }
.recs--compact .rec-title { font-size: 16.5px; }
.recs--compact .rec-by { font-size: 14.5px; }
.recs--compact .rec-title, .recs--compact .rec-by { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recs--compact .rec-play { width: 34px; height: 34px; }
@container page (min-width: 760px) {
  .recs--compact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 44px; }
  .recs--compact .rec:nth-child(2) { border-top: 1px solid var(--line); }
}

/* the libraries: the search and menus stay at hand (on a screen tall enough), the index of the groups under them */
.lib-bar { margin-top: 36px; padding: 10px 0; background: var(--bg); }
.lib-bar .toolbar { margin: 0; }
@media (min-width: 900px) and (min-height: 700px) {
  .lib-bar { position: sticky; top: 0; z-index: 6; box-shadow: 0 1px 0 var(--line); }
  .lib-bar::before { content: ""; position: absolute; inset: 0 -24px; z-index: -1; background: color-mix(in srgb, var(--bg) 92%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  .lib-bar { background: none; }
}
.lib-dash .pick:last-child { grid-column: auto; }
.lib-dash select { max-width: 10em; text-overflow: ellipsis; }   /* a long genre doesn't push the toolbar onto two rows */
.lib-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 0 4px; }
.lib-meta .lib-count { margin: 0; }
.lib-look button { height: 26px; width: 32px; padding: 0; display: grid; place-items: center; }
.lib-look .ic { width: 15px; height: 15px; }
.lib-index { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 10px; }
/* phones: the index is one row, swiped sideways */
@container page (max-width: 620px) {
  .lib-index { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -20px; padding-right: 20px; }
  .lib-index::-webkit-scrollbar { display: none; }
  .lib-index button { flex-shrink: 0; }
}
.lib-index button {
  min-width: 26px; height: 26px; padding: 0 6px; border: 0; border-radius: 6px; background: none; cursor: pointer;
  font: 12px/1 var(--f-mono); color: var(--ink-2); transition: color .2s, background-color .2s;
}
.lib-index button:hover:not(:disabled) { color: var(--accent); background: var(--accent-soft); }
.lib-index button:disabled { color: var(--line-2); cursor: default; }
.lib-count { margin: 18px 0 4px; font: 12.5px/1.6 var(--f-mono); color: var(--ink-3); }
/* a group: its name in the margin on a wide page (as the dates of the CV), above it on a narrow one */
.lib-group { scroll-margin-top: 140px; }
.lib-gh { margin: 30px 0 10px; font: 500 12px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.lib--years .rec-meta time { display: none; }   /* the year is in the margin */
.lib--letters .lib-gh { font: 400 22px/1 var(--f-serif); letter-spacing: 0; color: var(--ink-2); }
@container page (min-width: 760px) {
  .lib-group { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); align-items: start; }
  .lib-gh { position: sticky; top: var(--lib-top, 16px); margin: 0; padding: 30px 0 0; }
  .lib-group .recs, .lib-group .scores { padding-top: 12px; }
  .lib-group + .lib-group > ol > li:first-child { border-top: 0; }
}
.lib-group .score:first-child { border-top: 1px solid var(--line); padding-top: 22px; }
.lib-group + .lib-group .score:first-child { border-top: 0; }
@media (min-width: 900px) and (min-height: 700px) { .lib { --lib-top: 150px; } }

/* once a jump has been asked for, every group has its real height, so that it lands where it should */
.lib-settled .lib-group { content-visibility: visible; }

/* the years: a histogram on a line to scale, in the manner of the CV's. Every year has its place, including the empty ones;
   only those with something in them are buttons. On a phone, a long span is swiped sideways. */
.years { margin: 34px 0 -8px; }
.years[hidden] { display: none; }
.years-scroll { overflow-x: auto; scrollbar-width: none; margin-inline: -14px; padding-inline: 14px; }
.years-scroll::-webkit-scrollbar { display: none; }
.years-in { min-width: calc(var(--n) * 12px); }
.years-plot { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); align-items: end; height: calc(var(--top) * var(--unit) + 20px); border-bottom: 1px solid var(--line-2); }
.y { position: relative; display: block; min-width: 0; height: 100%; padding: 0; border: 0; background: none; }
button.y { cursor: pointer; border-radius: 3px 3px 0 0; transition: background-color .2s; }
button.y:hover:not(:disabled), button.y:focus-visible { background: var(--accent-soft); }
button.y:disabled { cursor: default; }
button.y:focus-visible { outline-offset: -2px; }
.y-all, .y-now { position: absolute; left: 50%; bottom: 0; width: clamp(3px, 68%, 26px); transform: translateX(-50%); border-radius: 2px 2px 0 0; }
.y-all { height: calc(var(--all) * var(--unit)); background: color-mix(in srgb, var(--ink-3) 18%, transparent); }
.y-now { height: calc(var(--now, 0) * var(--unit)); background: var(--ink-3); transition: height .35s var(--ease), background-color .2s; }
button.y:hover .y-now, button.y:focus-visible .y-now, button.y[aria-current] .y-now { background: var(--accent); }
.y b { display: none; position: absolute; left: 0; right: 0; bottom: calc(var(--all) * var(--unit) + 4px); font: 400 11px/1 var(--f-mono); color: var(--ink-3); text-align: center; }
.counted .y b { display: block; }
.years-axis { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); height: 26px; }
.years-axis span { position: relative; }
.years-axis .tick::before { content: ""; position: absolute; left: 50%; top: 0; width: 1px; height: 5px; background: var(--line-2); }
.years-axis b { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); font: 400 11px/1 var(--f-mono); color: var(--ink-3); }
@container page (max-width: 519px) { .years-axis .odd b { display: none; } }
.years figcaption { min-height: 1.4em; margin-top: 6px; font: italic 15px/1.4 var(--f-serif); color: var(--ink-3); }

/* in order of years, a wall of covers is one wall rather than a row for each year: the year goes back on each cover */
.lib--covers.lib--years .lib-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 26px 20px; margin-top: 14px; }
.lib--covers.lib--years .lib-group, .lib--covers.lib--years .lib-group > ol { display: contents; }
.lib--covers.lib--years .lib-gh { display: none; }
.lib--covers.lib--years .rec-meta time { display: inline; }
.lib--covers.lib--years .lib-groups:has(.rec--film) { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }
.rec.here .rec-title, .rec.here .rec-title a { color: var(--accent); }
.lib--covers .rec:last-child { border: 0; }
.lib--covers .rec--film .rec-title, .lib--covers .rec--film .rec-by { overflow: visible; white-space: normal; text-overflow: clip; }
@container page (max-width: 560px) { .lib--covers.lib--years .lib-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; } }

/* the records as a wall of covers: the cover large, its play button on it, the name below */
.lib--covers .recs { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 26px 20px; padding-bottom: 8px; }
.lib--covers .rec { display: block; padding: 0; border: 0; }
.lib--covers .rec-art { position: relative; display: block; }
.lib--covers .rec-cover { width: 100%; height: auto; aspect-ratio: 1; border-radius: 6px; box-shadow: 0 16px 28px -22px var(--shadow); transition: transform .4s var(--ease); }
.lib--covers .rec:hover .rec-cover { transform: translateY(-2px); }
.lib--covers .rec-play { position: absolute; right: 8px; bottom: 8px; border-color: transparent; background: color-mix(in srgb, var(--panel) 92%, transparent); color: var(--ink); box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .5); }
@media (hover: hover) {
  .lib--covers .rec-play { opacity: 0; transform: translateY(4px); transition: opacity .25s, transform .3s var(--ease), background-color .2s, color .2s; }
  .lib--covers .rec:hover .rec-play, .lib--covers .rec.on .rec-play, .lib--covers .rec-play:focus-visible { opacity: 1; transform: none; }
}
.lib--covers .rec-text { margin-top: 10px; }
.lib--covers .rec-title { font-size: 15.5px; }
.lib--covers .rec-by { font-size: 13.5px; }
.lib--covers .rec-title, .lib--covers .rec-by { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib--covers .rec-note { display: none; }
.lib--covers .rec-meta { display: block; margin-top: 2px; font-size: 11.5px; }
.lib--covers .rec-meta span { display: none; }
@container page (max-width: 560px) { .lib--covers .recs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; } }
/* in a list, the cover and its button are cells of the row */
.rec-art { display: contents; }
/* long lists: groups off screen are laid out only when they come near. That clips what is drawn outside a group,
   so it has a little room on each side (on a row, it cut the outline of a sheet or a cover, and an album's record) */
.lib-group { content-visibility: auto; contain-intrinsic-size: auto 600px; margin-inline: -6px; padding-inline: 6px; }

/* listening: one line per record, cover, what, when, and a play button */
.pick-toggle { gap: 0; padding: 0 13px 0 6px; cursor: pointer; font: 13.5px var(--f-mono); color: var(--ink-2); }
.pick-toggle .rec-pick { margin: 0 9px 0 6px; vertical-align: 0; background: var(--ink-3); transition: background-color .2s; }
.pick-toggle[aria-pressed="true"] { border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: var(--accent-soft); color: var(--ink); }
.pick-toggle[aria-pressed="true"] .rec-pick { background: var(--accent); }
@container page (max-width: 620px) { .pick-toggle { justify-content: center; } }

.rec {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto 38px; grid-template-areas: "cover text meta play";
  align-items: center; gap: 0 18px; padding: 12px 0; border-top: 1px solid var(--line); cursor: pointer;
}
.rec:last-child { border-bottom: 1px solid var(--line); }
.rec-cover {
  grid-area: cover; width: 56px; height: 56px; border-radius: 5px; object-fit: cover; background: var(--sunk);
  outline: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); outline-offset: -1px;
}
.rec-text { grid-area: text; min-width: 0; }
.rec-title { font: 500 18px/1.3 var(--f-serif); letter-spacing: -.005em; transition: color .2s; }
.rec-by { font: 400 15.5px/1.4 var(--f-serif); color: var(--ink-2); }
.rec-note { margin-top: 3px; max-width: 64ch; font-size: 14px; line-height: 1.5; color: var(--ink-3); text-wrap: pretty; }
.rec-meta { grid-area: meta; display: flex; flex-direction: column; align-items: flex-end; font: 12px/1.55 var(--f-mono); color: var(--ink-3); white-space: nowrap; }
.rec-meta time { color: var(--ink-2); }
.rec-play {
  grid-area: play; position: relative; width: 38px; height: 38px; display: grid; place-items: center; padding: 0;
  border: 1px solid var(--line-2); border-radius: 50%; background: none; color: var(--ink-2); cursor: pointer;
  transition: color .2s, background-color .2s, border-color .2s;
}
.rec-play .ic, .dock-pp .ic, .trk-n .ic, .av-play .ic { fill: currentColor; stroke-width: 1; }
.rec-play .ic { grid-area: 1 / 1; width: 15px; height: 15px; }
.rec-play .i-play { transform: translateX(1px); }
.rec-play .i-pause, .rec-play .eq { display: none; }
.rec:hover .rec-play, .rec-play:focus-visible { border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: var(--accent-soft); color: var(--accent); }
.rec:hover .rec-title { color: var(--accent-ink); }
/* the one playing: its title in the accent, and on its button a small level meter, or pause under the pointer */
.rec.on .rec-title { color: var(--accent); }
.rec.on .rec-play { border-color: var(--accent); background: var(--accent); color: var(--bg); }
.rec.on.playing .rec-play .i-play { display: none; }
.rec.on.playing .rec-play .eq { display: flex; }
.rec.on.playing:hover .rec-play .eq { display: none; }
.rec.on.playing:hover .rec-play .i-pause { display: block; }
.eq { grid-area: 1 / 1; align-items: flex-end; gap: 2px; height: 13px; }
.eq i { width: 2.5px; height: 100%; border-radius: 1px; background: currentColor; transform-origin: bottom; animation: eq .9s ease-in-out infinite alternate; }
.eq i:nth-child(2) { animation-duration: .7s; animation-delay: -.3s; }
.eq i:nth-child(3) { animation-duration: 1.1s; animation-delay: -.6s; }
@keyframes eq { from { transform: scaleY(.25); } to { transform: scaleY(1); } }

@container page (max-width: 560px) {
  .rec { grid-template-columns: 48px minmax(0, 1fr) 38px; grid-template-areas: "cover text play" "cover meta play"; gap: 0 14px; }
  .rec-cover { width: 48px; height: 48px; align-self: start; margin-top: 2px; }
  .rec-meta { flex-direction: row; gap: .7em; align-items: baseline; margin-top: 2px; }
}

/* one transcription, on a page of its own (#beyond/t/<id>) */
.sv-about { margin-top: 20px; max-width: 760px; }
.sv-note { margin-top: 14px; max-width: 62ch; color: var(--ink-2); text-wrap: pretty; }
.sv-about .sv-get { margin-top: 16px; }
/* the viewer: a toolbar that stays at hand, and the pages on a sunken ground; a page zoomed past the column scrolls sideways */
.sv-paper { position: relative; margin-top: 30px; min-height: 360px; background: var(--sunk); border: 1px solid var(--line); border-radius: var(--radius); }
.sv-paper:fullscreen { overflow-y: auto; border: 0; border-radius: 0; }
.pv-bar {
  position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 6px 8px;
  background: color-mix(in srgb, var(--panel) 92%, transparent); border-bottom: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
@media (max-width: 1023px) { .pv-bar { top: var(--top-h); border-radius: 0; } }
.sv-paper:fullscreen .pv-bar { top: 0; border-radius: 0; }
.pv-bar[hidden] { display: none; }
.pv-group { display: flex; align-items: center; gap: 2px; }
.pv-bar .icon-btn:disabled { opacity: .35; cursor: default; background: none; }
.pv-prev .ic { transform: rotate(90deg); }
.pv-next .ic { transform: rotate(-90deg); }
.pv-at input {
  width: 3.2em; height: 30px; padding: 0 4px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--bg);
  font: 13px/1 var(--f-mono); color: var(--ink); text-align: center; font-variant-numeric: tabular-nums;
}
.pv-of { padding: 0 4px 0 6px; font: 13px/1 var(--f-mono); color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pv-pct { min-width: 3.6em; height: 30px; padding: 0 4px; border: 0; border-radius: 8px; background: none; cursor: pointer; font: 13px/1 var(--f-mono); color: var(--ink-2); font-variant-numeric: tabular-nums; transition: color .2s, background-color .2s; }
.pv-pct:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 5%, transparent); }
.pv-gap { flex: 1; }
.pv-spread[aria-pressed="true"], .pv-full[aria-pressed="true"] { color: var(--accent); }
.pv-bar.single .pv-pages { display: none; }
/* phones: one row, without the fit buttons (the percentage goes back to the width of the page) */
@container page (max-width: 620px) {
  .pv-fit, .pv-gap { display: none; }
  .pv-bar { flex-wrap: nowrap; justify-content: space-between; gap: 4px; padding: 4px; }
  .pv-bar .icon-btn { width: 32px; height: 32px; }
  .pv-at input { width: 2.6em; }
  .pv-pct { min-width: 3.2em; }
}
.sv-status { padding: 40px 12px; text-align: center; font: 13px/1.6 var(--f-mono); color: var(--ink-3); }
.sv-status:empty { display: none; }
.sv-status a { color: var(--accent); }
.sv-pdf {
  display: grid; grid-template-columns: max-content; justify-content: safe center; gap: 18px;
  padding: clamp(8px, 2.2vw, 26px); overflow-x: auto;
}
.sv-pdf.two { grid-template-columns: max-content max-content; }
.pv-page { background: #fff; border-radius: 3px; box-shadow: 0 0 0 1px var(--line-2), 0 20px 40px -30px var(--shadow); overflow: hidden; }
.pv-page canvas { display: block; width: 100%; height: 100%; }

/* a movie: in the lists its poster, upright, or with none its title on a blank one; its page is laid out as an album's */
.rec--film { grid-template-columns: 44px minmax(0, 1fr) auto 38px; }
.rec--film .rec-cover { width: 44px; height: 66px; border-radius: 3px; }
.lib--covers .rec--film .rec-cover { width: 100%; height: auto; aspect-ratio: 2 / 3; border-radius: 4px; }
.lib--covers .recs:has(.rec--film) { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }
.poster-blank { display: grid; place-items: center; padding: 8%; text-align: center; font: 400 15px/1.25 var(--f-serif); color: var(--ink-2); overflow: hidden; }
.rec--film .poster-blank > span { display: none; }
.lib--covers .rec--film .poster-blank > span { display: block; }
.fv .av-art { width: min(58%, 240px); }
.fv .av-art .rec-cover { display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; border-radius: 4px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 10%, transparent), 0 26px 50px -30px var(--shadow); }
@container page (min-width: 760px) {
  .fv .av-body { grid-template-columns: minmax(0, 280px) minmax(0, 1fr); }
  .fv .av-art { width: 100%; }
}
.fv-original { margin-bottom: 10px; font: 400 19px/1.35 var(--f-serif); color: var(--ink-2); }
.av-do:has(.av-play[hidden]):has(.fv-imdb[hidden]):has(.fv-rt[hidden]) { display: none; }
.av-play[hidden], .fv-imdb[hidden], .fv-rt[hidden] { display: none; }
/* its plot and its scores (IMDb, Tomatometer, Metascore, from OMDb): as the numbers of the Publications page, a thin bar under each */
.fv-plot { margin-top: 18px; max-width: 60ch; font: 400 17px/1.6 var(--f-serif); color: var(--ink-2); text-wrap: pretty; }
.fv-scores { display: grid; grid-template-columns: repeat(3, minmax(0, 170px)); gap: 20px clamp(16px, 4cqi, 28px); margin: 26px 0 0; }
.fv-scores[hidden], .fv-score[hidden], .fv-plot[hidden], .fv-asof[hidden] { display: none; }
.fv-score dt { display: flex; align-items: center; gap: 7px; height: 18px; font: 500 12.5px/1 var(--f-mono); color: var(--ink-3); }
.fv-logo { width: 18px; height: 18px; flex-shrink: 0; }
.fv-logo--imdb { width: 34px; height: 17px; }
.fv-score-n { margin: 10px 0 0; font: 400 36px/1 var(--f-serif); letter-spacing: -.02em; color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }
.fv-score-n small { margin-left: 2px; font-size: 15px; letter-spacing: 0; color: var(--ink-3); }
.fv-score-n::after {
  content: ""; display: block; height: 3px; margin-top: 12px; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent) calc(var(--v, 0) * 100%), var(--line) 0);
}
.fv-score-sub { margin: 8px 0 0; font-size: 13px; line-height: 1.4; color: var(--ink-3); }
.fv-asof { margin-top: 14px; font: 12px/1.4 var(--f-mono); color: var(--ink-3); }
@container page (max-width: 560px) {
  .rec--film { grid-template-columns: 44px minmax(0, 1fr) 38px; }
  .rec--film .rec-cover { width: 44px; height: 66px; margin-top: 0; }
}

/* an album: its record a little out of the sleeve (the cover is its label), further out while it plays */
.disc {
  position: absolute; inset: 2%; border-radius: 50%; pointer-events: none;
  background: repeating-radial-gradient(circle, #1c1917 0 1px, #262220 1px 2px);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 14%, transparent), 0 8px 18px -10px var(--shadow);
  transform: translateX(var(--out, 0)); transition: transform .6s var(--ease);
}
.disc::before {   /* the light on the grooves, which stays where it is while the record turns */
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 20deg, transparent 0 6%, rgba(255, 255, 255, .13) 11%, transparent 17% 52%, rgba(255, 255, 255, .08) 61%, transparent 67%);
}
.disc::after {   /* the label, and the hole */
  content: ""; position: absolute; inset: 32%; border-radius: 50%;
  background: radial-gradient(circle, #1c1917 0 7%, transparent 8%), var(--label, none) center / cover, var(--accent);
}
@keyframes spin { to { transform: rotate(1turn); } }

.rec-sleeve { grid-area: cover; position: relative; display: block; align-self: center; }
.rec-sleeve .rec-cover { position: relative; z-index: 1; display: block; }
.rec--album .disc { --out: 9px; }
.rec--album:hover .disc { --out: 12px; }
.rec--album.on .disc { --out: 14px; }
.rec--album .rec-title a, .rec--film .rec-title a { color: inherit; text-decoration: none; }
.lib--covers .rec--album .disc { --out: 5%; }
.lib--covers .rec--album:hover .disc, .lib--covers .rec--album.on .disc { --out: 8%; }
.lib--covers .rec--album:hover .rec-sleeve .rec-cover { transform: translateY(-2px); }
.lib--covers .rec--album .rec-sleeve { transition: transform .4s var(--ease); }
@container page (max-width: 560px) { .rec-sleeve { align-self: start; margin-top: 2px; } .rec-sleeve .rec-cover { margin: 0; } }

/* one album, on a page of its own (#beyond/a/<id>): the sleeve, and beside it what is on the record */
.av-body { display: grid; gap: 34px; margin-top: 40px; }
.av-art { position: relative; width: min(72%, 290px); }
/* a wide page: the sleeve stays in view beside a long track list */
@container page (min-width: 760px) {
  .av-body { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 0 clamp(40px, 5cqi, 72px); align-items: start; }
  .av-art { position: sticky; top: 40px; width: 76%; }
  @media (max-width: 1023px) { .av-art { top: calc(var(--top-h) + 24px); } }
}
.av-cover {
  position: relative; z-index: 1; display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: 4px; background: var(--sunk);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 10%, transparent), 0 26px 50px -30px var(--shadow);
}
.av-art .disc { --out: 18%; }
.av.on .av-art .disc { --out: 27%; }
.av.playing .av-art .disc::after { animation: spin 1.8s linear infinite; }   /* 33⅓ turns a minute */
.av-note { margin-top: 14px; max-width: 60ch; color: var(--ink-2); text-wrap: pretty; }
.av-do { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 24px; }
.av-play .ic { width: 14px; height: 14px; }
.btn.av-play:hover .ic { transform: none; }
.av-play .i-pause, .av.playing .av-play .i-play { display: none; }
.av.playing .av-play .i-pause { display: block; }
.av-yt { display: inline-flex; align-items: center; gap: 6px; font: 12.5px/1 var(--f-mono); color: var(--ink-3); text-decoration: none; transition: color .2s; }
.av-yt .ic { width: 13px; height: 13px; transition: transform .3s var(--ease); }
.av-yt:hover { color: var(--accent); }
.av-yt:hover .ic { transform: translate(1px, -1px); }   /* as the links of the CV */

/* its tracks: numbered as on the sleeve; under the pointer the number turns into play, and the one playing is lit */
.tracks { margin-top: 36px; border-top: 1px solid var(--line); }
.trk button {
  width: 100%; display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; align-items: center; gap: 0 12px;
  padding: 11px 2px; border: 0; border-bottom: 1px solid var(--line); background: none; cursor: pointer;
  font: inherit; color: inherit; text-align: left;
}
.trk-n { display: grid; justify-items: start; align-items: center; font: 12.5px/1 var(--f-mono); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.trk-n > * { grid-area: 1 / 1; }
.trk-n .ic { width: 12px; height: 12px; }
.trk-n .ic, .trk-n .eq { display: none; }
.trk-n .eq { height: 11px; color: var(--accent); }
.trk-title { font: 400 17.5px/1.35 var(--f-serif); text-wrap: pretty; transition: color .2s; }
.trk-len { font: 12.5px/1 var(--f-mono); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.trk button:hover .trk-title { color: var(--accent-ink); }
.trk button:hover .trk-n > span, .trk.on .trk-n > span { display: none; }
.trk button:hover .trk-n .i-play, .trk.on:not(.playing) .trk-n .i-play { display: block; color: var(--accent); }
.trk.on .trk-title { color: var(--accent); }
.trk.on.playing .trk-n .eq { display: flex; }
.trk.on.playing button:hover .trk-n .eq, .trk.on.playing button:hover .trk-n .i-play { display: none; }
.trk.on.playing button:hover .trk-n .i-pause { display: block; color: var(--accent); }
.trk-disc { padding: 24px 2px 10px; border-bottom: 1px solid var(--line); font: 500 12px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.trk-disc:first-child { padding-top: 14px; }

/* ── Now playing: docked in the sidebar (desktop), beside the rail when it is collapsed, a bar at the foot below ── */
.sb-dock { flex-shrink: 0; height: 0; }
@media (min-width: 1024px) { :root.has-dock:not(.rail) .sb-dock { height: var(--dock-h, 0px); } }

.dock {
  position: fixed; z-index: 61; left: calc(var(--gap) + 1px); bottom: calc(var(--gap) + 1px + var(--foot-h)); width: calc(var(--sb-w) - 2px);
  display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-areas: "video info" "seek seek" "ctrl ctrl";
  align-items: center; gap: 8px 12px; padding: 12px 12px 4px;
  background: var(--panel); border-top: 1px solid var(--line);
  animation: dock-in .45s var(--ease) both;
}
@keyframes dock-in { from { opacity: 0; transform: translateY(8px); } }
.dock.big { grid-template-areas: "video video" "info info" "seek seek" "ctrl ctrl"; }
.dock-main { display: contents; }
.dock-video { grid-area: video; position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 6px; background: #000; }
.dock-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.dock-info { grid-area: info; min-width: 0; }
.dock-title, .dock-by { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dock-title { font: 500 15px/1.3 var(--f-serif); }
.dock-by { font-size: 12.5px; line-height: 1.45; color: var(--ink-3); }
.dock-seek { grid-area: seek; display: flex; align-items: center; gap: 10px; }
.dock-time { font: 11px/1 var(--f-mono); color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dock-ctrl { grid-area: ctrl; display: flex; align-items: center; margin: 0 -6px; }
.dock-ctrl .icon-btn { width: 34px; height: 34px; }
.dock-ctrl .icon-btn .ic { width: 17px; height: 17px; }
.dock-ctrl .dock-pp { color: var(--ink); }
.dock-ctrl .dock-pp .ic { width: 19px; height: 19px; }
.dock-pp .i-pause, .dock.playing .dock-pp .i-play { display: none; }
.dock.playing .dock-pp .i-pause { display: block; }
.dock-ctrl .icon-btn:disabled { opacity: .35; cursor: default; background: none; }
.dock-size[aria-pressed="true"] { color: var(--accent); }
.dock-gap { flex: 1; }
.dock-msg { grid-column: 1 / -1; padding: 8px 10px; border-radius: 8px; background: var(--accent-soft); font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }
.dock-msg a { color: var(--accent); }
.dock-msg code { font: 11.5px var(--f-mono); }

/* the seek bar: a hairline that fills in the accent, its knob shown under the pointer */
.dock-seek input {
  flex: 1; min-width: 0; height: 14px; margin: 0; background: none; cursor: pointer; -webkit-appearance: none; appearance: none;
  --p: 0%;
}
.dock-seek input:disabled { cursor: default; }
.dock-seek input::-webkit-slider-runnable-track { height: 3px; border-radius: 2px; background: linear-gradient(to right, var(--accent) var(--p), var(--line-2) var(--p)); }
.dock-seek input::-moz-range-track { height: 3px; border-radius: 2px; background: var(--line-2); }
.dock-seek input::-moz-range-progress { height: 3px; border-radius: 2px; background: var(--accent); }
.dock-seek input::-webkit-slider-thumb { -webkit-appearance: none; width: 11px; height: 11px; margin-top: -4px; border: 0; border-radius: 50%; background: var(--accent); opacity: 0; transition: opacity .2s; }
.dock-seek input::-moz-range-thumb { width: 11px; height: 11px; border: 0; border-radius: 50%; background: var(--accent); opacity: 0; transition: opacity .2s; }
.dock-seek input:hover::-webkit-slider-thumb, .dock-seek input:focus-visible::-webkit-slider-thumb { opacity: 1; }
.dock-seek input:hover::-moz-range-thumb, .dock-seek input:focus-visible::-moz-range-thumb { opacity: 1; }

@media (min-width: 1024px) {
  .rail .dock {
    left: calc(var(--rail-w) + var(--gap) * 2); bottom: var(--gap); width: 300px; padding: 12px 12px 4px;
    border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 24px 60px -36px var(--shadow), 0 2px 6px -4px var(--shadow);
  }
  .rail.has-dock .main { padding-bottom: calc(var(--dock-h, 0px) + 16px); }
}
@media (max-width: 1023px) {
  .dock {
    z-index: 54; left: 10px; right: 10px; bottom: 10px; width: auto; max-width: 620px; margin: 0 auto;
    grid-template-columns: 64px minmax(0, 1fr) auto; grid-template-areas: "video info ctrl" "seek seek seek";
    gap: 6px 12px; padding: 8px 10px 2px 8px;
    border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 20px 50px -30px var(--shadow), 0 2px 6px -4px var(--shadow);
  }
  .dock.big { grid-template-areas: "video video video" "info info ctrl" "seek seek seek"; }
  .dock-ctrl { margin: 0 -4px 0 0; }
  .dock-gap, .dock-prev, .dock-yt { display: none; }
  .has-dock .main { padding-bottom: calc(var(--dock-h, 0px) + 16px); }
}
@media (max-width: 1023px) and (min-width: 560px) {
  .dock-prev, .dock-yt { display: grid; }
  .dock.big { max-width: 460px; margin-right: 10px; }   /* a large video, but in a corner, not across the page */
}

/* ── Footer ─────────────────────────────────────── */

.site-foot {
  max-width: 1080px; margin: 96px auto 0; padding: 22px 0 32px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px;
  font: 12px/1.5 var(--f-mono); color: var(--ink-3);
}

/* the footer stays at the bottom of the window however short the page: the page takes up whatever height is spare.
   Only on screen, so that printing the CV isn't touched. The top bar, on a tablet or phone, takes its height out of the window's */
@media screen {
  .main { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
  .main > .page { flex: 1 0 auto; width: 100%; }
  .main > .site-foot { width: 100%; }
}
@media screen and (max-width: 1023px) {
  .main { min-height: calc(100vh - var(--top-h)); min-height: calc(100dvh - var(--top-h)); }
}

/* ── Print & motion ─────────────────────────────────────── */
@media print {
  .sidebar, .topbar, .scrim, .dock, .copy, .toolbar, .pub-chev, .map-zoom, .map-hint { display: none !important; }
  .main { margin: 0 !important; padding: 0; }
  .page[hidden] { display: block !important; }
  body { background: #fff; }
}
/* printed from the CV page, only the CV: an A4 document in the light palette, whatever the theme on screen */
@media print {
  @page { size: A4; margin: 15mm 16mm; }
  :root[data-page="cv"] {
    --bg: #fff; --panel: #fff; --ink: #1E1A16; --ink-2: #4F473E; --ink-3: #736A5E; --line: #E5DED2; --line-2: #D5CBBB;
    --accent: #B04A2E; --accent-soft: rgba(176, 74, 46, .09); color-scheme: light;
  }
  :root[data-page="cv"] .page:not(#cv), :root[data-page="cv"] .site-foot { display: none !important; }
  #cv { display: flex; flex-direction: column; zoom: .8; padding: 0; animation: none; }
  .skip, #cv .page-head > :not(.actions), #cv .btn { display: none; }
  #cv .cv-print-head { order: -1; display: block; font: 400 15px/1.5 var(--f-serif); color: var(--ink-2); }   /* the name and address, then the date */
  #cv .page-head { display: block; }
  #cv .page-head .actions { margin-top: 2px; justify-self: start; align-items: flex-start; }
  #cv .cv-stamp { margin: 0; font-size: 12px; }
  #cv .cv-print-name { font: 400 40px/1.1 var(--f-serif); letter-spacing: -.02em; color: var(--ink); margin-bottom: 8px; }
  #cv .cv-print-mail { font: 13px/1.6 var(--f-mono); color: var(--accent); }
  #cv .career { margin-top: 26px; break-inside: avoid; }
  #cv .label { margin: 30px 0 14px; break-after: avoid; }
  #cv .cv { gap: 14px; }
  #cv .cv-item { break-inside: avoid; }
  #cv .cv-what a .ic, #cv .cv-note a .ic { display: none; }
  #cv .cv-seal { display: none; }
  #cv .cv-inst { display: block; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}