/* ============================================================
   Antonio Marrone — dark and light themes
   Charcoal surfaces, rounded cards with coloured accent bars,
   gold centred headings, pill buttons, organic background shapes.
   Hand-written; no framework; zero external requests.
   ============================================================ */

/* ---------- fonts (self-hosted, latin subset) ---------- */
@font-face{font-family:"Space Grotesk";src:url("../fonts/space-grotesk-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url("../fonts/space-grotesk-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url("../fonts/space-grotesk-latin-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Manrope";src:url("../fonts/manrope-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Manrope";src:url("../fonts/manrope-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Manrope";src:url("../fonts/manrope-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Manrope";src:url("../fonts/manrope-latin-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
/* kept for pull-quotes only */
@font-face{font-family:"Source Serif 4";src:url("../fonts/source-serif-4-latin-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url("../fonts/source-serif-4-latin-600-italic.woff2") format("woff2");font-weight:600;font-style:italic;font-display:swap}

/* ---------- tokens ----------
   Two themes. Everything that must change between them is a variable here;
   nothing below this block hard-codes a background or a text colour.
   Two deliberate exceptions, marked where they occur: the scrims laid over
   photographs (hero, band, photo captions, lightbox) stay dark in both
   themes, because they exist to keep white text legible on top of an image
   and the image does not get lighter when the page does.

   The theme is chosen in this order: an explicit choice saved by the reader,
   otherwise the operating system's preference, otherwise dark.            */
:root{
  --display:"Space Grotesk",ui-sans-serif,system-ui,"Segoe UI",sans-serif;
  --body:"Manrope",ui-sans-serif,system-ui,"Segoe UI",Roboto,sans-serif;
  --quote:"Source Serif 4",Georgia,serif;

  --measure:36rem;
  --wide:76rem;
  --gutter:clamp(1.15rem,4.5vw,3rem);
  --sec-y:clamp(3.75rem,9vw,7rem);
  --r:18px;
  --r-sm:12px;

  /* Scrims over photographs — identical in both themes, by design. */
  --scrim-strong:rgba(20,23,28,.85);
  --scrim-mid:rgba(20,23,28,.25);
  --scrim-soft:rgba(20,23,28,.05);
  --on-photo:#fff;
  --on-photo-soft:#e2e6ec;
  --on-photo-mute:#c3cad4;
  --photo-shadow:0 1px 12px rgba(10,12,16,.8);
}

/* ---------- dark (default) ---------- */
:root,
:root[data-theme="dark"]{
  color-scheme: dark;

  --bg:#22262d;
  --bg-deep:#1b1e24;
  --surface:#2b3038;
  --surface-2:#333944;
  --surface-3:#3c434f;
  --line:rgba(255,255,255,.085);
  --line-strong:rgba(255,255,255,.16);
  --tint:rgba(255,255,255,.03);
  --tint-2:rgba(255,255,255,.06);

  --text:#e9ecf1;
  --text-soft:#b6bdc9;
  /* Lifted from #868f9e: on a card (--surface) the old value measured 4.07:1,
     below the 4.5 needed for body text. See tools/tests/test_theme.js. */
  --text-mute:#9aa3b1;
  --on-accent:#1b1e24;

  --gold:#d9b061;
  --gold-dim:#b8934c;
  --cyan:#4fc3d9;
  --violet:#a98cf0;
  --lime:#9fd356;
  --coral:#e8836b;

  --header-bg:rgba(27,30,36,.86);
  --ink-a:#262b33;
  --ink-b:#1b1e24;
  --head-a:#282d35;
  --head-b:#1b1e24;
  --shadow:0 18px 48px -24px rgba(0,0,0,.75);
  --shadow-strong:0 26px 60px -28px rgba(0,0,0,.9);
}

/* ---------- light ----------
   Not the dark palette inverted: on a white page the saturated accents of the
   dark theme fail contrast against their own backgrounds, so gold, cyan,
   violet and lime are darkened until each clears 4.5:1 on --bg. The hues are
   the same, which is what makes the two themes feel like one site.        */
:root[data-theme="light"]{
  color-scheme: light;

  --bg:#f6f7f9;
  --bg-deep:#ecEEf2;
  --surface:#ffffff;
  --surface-2:#f0f2f6;
  --surface-3:#e4e8ee;
  --line:rgba(16,20,28,.10);
  --line-strong:rgba(16,20,28,.20);
  --tint:rgba(16,20,28,.028);
  --tint-2:rgba(16,20,28,.055);

  --text:#171b22;
  --text-soft:#3d4552;
  --text-mute:#626b7a;
  --on-accent:#ffffff;

  --gold:#8a6410;
  --gold-dim:#6f5008;
  --cyan:#0d6d84;
  --violet:#5b3fb0;
  --lime:#4a6b18;
  --coral:#b4472c;

  --header-bg:rgba(246,247,249,.88);
  --ink-a:#e7eaf0;
  --ink-b:#dfe3ea;
  --head-a:#eef0f4;
  --head-b:#e3e7ee;
  --shadow:0 18px 44px -26px rgba(16,20,28,.30);
  --shadow-strong:0 26px 56px -30px rgba(16,20,28,.38);
}

/* Readers who have expressed no preference follow their operating system.
   The attribute selector above always wins, so an explicit choice sticks. */
@media (prefers-color-scheme: light){
  :root:not([data-theme]){
    color-scheme: light;

    --bg:#f6f7f9;
    --bg-deep:#ecEEf2;
    --surface:#ffffff;
    --surface-2:#f0f2f6;
    --surface-3:#e4e8ee;
    --line:rgba(16,20,28,.10);
    --line-strong:rgba(16,20,28,.20);
    --tint:rgba(16,20,28,.028);
    --tint-2:rgba(16,20,28,.055);

    --text:#171b22;
    --text-soft:#3d4552;
    --text-mute:#626b7a;
    --on-accent:#ffffff;

    --gold:#8a6410;
    --gold-dim:#6f5008;
    --cyan:#0d6d84;
    --violet:#5b3fb0;
    --lime:#4a6b18;
    --coral:#b4472c;

    --header-bg:rgba(246,247,249,.88);
    --ink-a:#e7eaf0;
    --ink-b:#dfe3ea;
    --head-a:#eef0f4;
    --head-b:#e3e7ee;
    --shadow:0 18px 44px -26px rgba(16,20,28,.30);
    --shadow-strong:0 26px 56px -30px rgba(16,20,28,.38);
  }
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--body);font-weight:400;
  font-size:clamp(1rem,.955rem + .2vw,1.075rem);
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold);text-decoration:none;transition:color .18s ease}
a:hover{color:var(--text)}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:4px}
::selection{background:rgba(217,176,97,.3)}

/* ---------- typography ---------- */
h1,h2,h3,h4{font-family:var(--display);font-weight:600;line-height:1.15;margin:0 0 .55em;
  text-wrap:balance}
h1{font-size:clamp(2.2rem,1.35rem + 3.8vw,4.15rem);font-weight:700;letter-spacing:-.02em}
h2{font-size:clamp(1.6rem,1.15rem + 2vw,2.6rem);letter-spacing:.005em}
h3{font-size:clamp(1.18rem,1.05rem + .6vw,1.5rem);letter-spacing:-.005em}
h4{font-size:1.02rem;font-weight:600;letter-spacing:.01em}
p{margin:0 0 1.15em;text-wrap:pretty}
strong,b{font-weight:700;color:var(--text)}
hr{border:0;border-top:1px solid var(--line);margin:2.75rem 0}
ul,ol{margin:0 0 1.15em;padding-left:1.25em}
li{margin-bottom:.4em}
sup,sub{line-height:0}
code,kbd,samp{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:.87em;
  background:var(--tint-2);padding:.12em .38em;border-radius:5px;color:var(--cyan)}
blockquote{margin:1.7rem 0;padding:.2rem 0 .2rem 1.4rem;border-left:2px solid var(--gold);
  color:var(--text-soft);font-family:var(--quote);font-style:italic;font-size:1.08em}

.eyebrow{font-family:var(--display);font-size:.72rem;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold);margin:0 0 1rem}
.lede{font-size:1.1em;line-height:1.65;color:var(--text-soft)}
.muted{color:var(--text-mute)}
.small{font-size:.87rem}
.c-cyan{color:var(--cyan)}.c-violet{color:var(--violet)}.c-lime{color:var(--lime)}
.c-gold{color:var(--gold)}.c-coral{color:var(--coral)}

.skip{position:absolute;left:-9999px;top:0;background:var(--gold);color:var(--on-accent);
  padding:.7rem 1.15rem;border-radius:0 0 var(--r-sm) 0;z-index:400;font-weight:600}
.skip:focus{left:0;top:0}

/* ---------- layout ---------- */
.wrap{width:min(100% - 2*var(--gutter),var(--wide));margin-inline:auto;position:relative;z-index:2}
.prose{width:min(100%,var(--measure) + 9rem)}
.prose p,.prose ul,.prose ol{max-width:var(--measure)}
.section{padding-block:var(--sec-y);position:relative}
.section--paper{background:var(--bg)}
.section--white{background:var(--bg-deep)}
.section--ink{background:linear-gradient(160deg,var(--ink-a) 0%,var(--ink-b) 100%)}
.section--edge{border-top:1px solid var(--line)}

/* centred section header, as in the reference */
.section-head{text-align:center;max-width:46rem;margin:0 auto clamp(2.25rem,5vw,3.75rem)}
.section-head h2{color:var(--gold);text-transform:uppercase;letter-spacing:.055em;
  font-weight:700;margin-bottom:.5em}
.section-head .lede{margin:0 auto}
.section-head--left{text-align:left;margin-inline:0}

/* ---------- header / nav ---------- */
.site-header{position:sticky;top:0;z-index:300;background:var(--header-bg);
  backdrop-filter:saturate(1.5) blur(14px);border-bottom:1px solid var(--line)}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;
  gap:1.25rem;min-height:4.4rem}
.brand{font-family:var(--display);font-weight:700;font-size:1rem;letter-spacing:.02em;
  color:var(--text);white-space:nowrap;line-height:1.25}
.brand:hover{color:var(--gold)}
.brand span{display:block;font-family:var(--body);font-size:.665rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--text-mute);margin-top:.15rem}

.nav{display:flex;align-items:center;gap:clamp(.6rem,1.6vw,1.5rem)}
.nav a{font-family:var(--display);color:var(--text-soft);font-size:.845rem;font-weight:500;
  letter-spacing:.11em;text-transform:uppercase;padding:.4rem 0;position:relative;white-space:nowrap}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:-.05rem;height:2px;
  background:var(--gold);border-radius:2px;transform:scaleX(0);transform-origin:left;
  transition:transform .22s ease}
.nav a:hover{color:var(--text)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav a[aria-current="page"]{color:var(--gold)}

.nav-toggle{display:none;background:var(--tint-2);border:1px solid var(--line-strong);
  border-radius:999px;padding:.5rem .7rem;cursor:pointer;color:var(--text);line-height:0}
.nav-toggle svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7}

/* ---------- theme toggle ----------
   Sits between the brand and the menu button, so it stays reachable on a
   phone, where the navigation collapses but this does not. It shows the
   theme you would GET by pressing it, not the one you are in: the sun means
   "go light". The button is rendered even without JavaScript but hidden,
   because without the script it would do nothing.                          */
.theme-toggle{display:none;margin-left:auto;background:var(--tint-2);
  border:1px solid var(--line-strong);border-radius:999px;
  width:2.3rem;height:2.3rem;flex:0 0 auto;padding:0;cursor:pointer;
  color:var(--text-soft);line-height:0;
  align-items:center;justify-content:center;
  transition:color .18s ease,border-color .18s ease,background .18s ease}
.js .theme-toggle{display:inline-flex}
.theme-toggle:hover{color:var(--gold);border-color:var(--gold-dim);background:var(--surface-2)}
.theme-toggle svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.75}
/* One icon at a time: the sun while dark, the moon while light. */
.theme-toggle__moon{display:none}
:root[data-theme="light"] .theme-toggle__sun{display:none}
:root[data-theme="light"] .theme-toggle__moon{display:block}
@media (prefers-color-scheme: light){
  :root:not([data-theme]) .theme-toggle__sun{display:none}
  :root:not([data-theme]) .theme-toggle__moon{display:block}
}

@media (max-width:940px){
  .nav-toggle{display:inline-flex}
  .nav{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;
    gap:0;background:var(--bg-deep);border-bottom:1px solid var(--line);
    padding:.35rem var(--gutter) 1rem;display:none}
  .nav[data-open="true"]{display:flex}
  .nav a{padding:.85rem 0;border-bottom:1px solid var(--line);font-size:.95rem}
  .nav a:last-child{border-bottom:0}
  .nav a::after{display:none}
}

/* ---------- buttons (pills) ---------- */
.btn{display:inline-flex;align-items:center;gap:.55rem;padding:.72rem 1.5rem;
  font-family:var(--display);font-size:.83rem;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;border-radius:999px;border:1.5px solid var(--gold);
  color:var(--gold);background:transparent;cursor:pointer;
  transition:background .2s ease,color .2s ease,box-shadow .2s ease,transform .2s ease}
.btn:hover{background:var(--gold);color:var(--on-accent);
  box-shadow:0 0 28px -6px rgba(217,176,97,.55);transform:translateY(-1px)}
.btn--solid{background:var(--gold);color:var(--on-accent)}
.btn--solid:hover{box-shadow:0 0 32px -4px rgba(217,176,97,.7)}
.btn--ghost{border-color:var(--line-strong);color:var(--text-soft)}
.btn--ghost:hover{background:var(--surface-3);border-color:var(--line-strong);color:var(--text);
  box-shadow:none}
.btn--cyan{border-color:var(--cyan);color:var(--cyan)}
.btn--cyan:hover{background:var(--cyan);color:var(--on-accent);box-shadow:0 0 28px -6px rgba(79,195,217,.55)}
.btn--sm{padding:.5rem 1.05rem;font-size:.73rem}
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem}
.btn-row--center{justify-content:center}

/* ---------- hero ---------- */
.hero{position:relative;display:flex;align-items:center;min-height:clamp(30rem,88vh,50rem);
  background:var(--bg-deep);overflow:hidden;text-align:center}
.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 45%;opacity:.86;filter:grayscale(.12) contrast(1.04) brightness(.94)}
/* Legibility scrim: light in the corners so the photograph reads, denser behind
   the text block. Tuned to keep contrast on the name above 7:1. */
.hero::after{content:"";position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(78% 62% at 50% 52%,rgba(20,23,28,.74) 0%,rgba(20,23,28,.40) 55%,rgba(20,23,28,0) 100%),
    linear-gradient(to bottom,rgba(20,23,28,.55) 0%,rgba(20,23,28,.12) 26%,rgba(20,23,28,.22) 72%,rgba(34,38,45,.92) 100%)}
.hero .wrap{z-index:3}
.hero__inner{padding-block:clamp(4rem,10vw,7rem)}
.hero h1{margin-bottom:.15em;color:var(--on-photo);
  text-shadow:0 2px 18px rgba(10,12,16,.75),0 1px 3px rgba(10,12,16,.6)}
.hero__role{font-family:var(--display);font-size:clamp(1rem,.85rem + .75vw,1.45rem);
  font-weight:500;color:var(--on-photo-soft);margin:0 0 1.4rem;letter-spacing:.01em;
  text-shadow:var(--photo-shadow)}
.hero__kicker{font-family:var(--display);font-size:clamp(.8rem,.72rem + .35vw,.98rem);
  font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);
  margin:0 0 1.6rem;text-shadow:0 1px 12px rgba(10,12,16,.85)}
.hero__aff{color:var(--on-photo-mute);font-size:.9rem;letter-spacing:.03em;margin:0 auto 2.1rem;
  max-width:34rem;text-shadow:0 1px 10px rgba(10,12,16,.85)}

/* interior page header */
.page-head{position:relative;background:linear-gradient(165deg,var(--head-a) 0%,var(--head-b) 100%);
  border-bottom:1px solid var(--line);padding-block:clamp(3.5rem,8vw,6rem);text-align:center;
  overflow:hidden}
.page-head h1{font-size:clamp(1.95rem,1.35rem + 2.6vw,3.25rem);margin-bottom:.3em}
.page-head .lede{max-width:44rem;margin:0 auto}

/* ---------- cards ---------- */
.cards{display:grid;gap:clamp(1.15rem,2.4vw,1.9rem);
  grid-template-columns:repeat(auto-fit,minmax(17.5rem,1fr))}
.cards--2{grid-template-columns:repeat(auto-fit,minmax(21rem,1fr))}

.card{position:relative;display:flex;flex-direction:column;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);padding:clamp(1.5rem,2.8vw,2.1rem);
  overflow:hidden;box-shadow:var(--shadow);
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--gold);opacity:.9}
.card--cyan::before{background:var(--cyan)}
.card--violet::before{background:var(--violet)}
.card--lime::before{background:var(--lime)}
.card--coral::before{background:var(--coral)}
a.card:hover{transform:translateY(-5px);border-color:var(--line-strong);
  box-shadow:var(--shadow-strong)}

.card__media{margin:-.35rem 0 1.35rem;border-radius:var(--r-sm);overflow:hidden;
  background:var(--surface-2)}
.card__media img{width:100%;aspect-ratio:16/10;object-fit:cover;
  transition:transform .5s ease}
a.card:hover .card__media img{transform:scale(1.04)}
.card__tag{display:inline-block;font-family:var(--display);font-size:.66rem;font-weight:600;
  letter-spacing:.17em;text-transform:uppercase;color:var(--text-mute);
  background:var(--tint-2);border:1px solid var(--line);border-radius:999px;
  padding:.3rem .75rem;margin-bottom:1rem}
.card h3{color:var(--gold);margin-bottom:.55rem}
.card--cyan h3{color:var(--cyan)}
.card--violet h3{color:var(--violet)}
.card--lime h3{color:var(--lime)}
.card--coral h3{color:var(--coral)}
.card p{color:var(--text-soft);font-size:.955rem;margin-bottom:1.2rem}
.card__list{list-style:none;padding:0;margin:0 0 1.4rem;font-size:.9rem}
.card__list li{display:flex;gap:.65rem;align-items:flex-start;margin-bottom:.55rem;
  color:var(--text-soft)}
.card__list li::before{content:"→";color:var(--gold);flex:none;font-size:.9em;line-height:1.6}
.card--cyan .card__list li::before{color:var(--cyan)}
.card--violet .card__list li::before{color:var(--violet)}
.card--lime .card__list li::before{color:var(--lime)}
.card__go{margin-top:auto;font-family:var(--display);font-size:.78rem;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--gold)}
a.card:hover .card__go{color:var(--text)}
.card__links{margin-top:auto;display:flex;flex-wrap:wrap;gap:.6rem}

/* ---------- feature (text + image) ---------- */
.feature{display:grid;gap:clamp(1.9rem,4.5vw,3.75rem);align-items:center;
  grid-template-columns:1fr}
@media (min-width:880px){
  .feature{grid-template-columns:1.05fr .95fr}
  .feature--flip .feature__media{order:-1}
}
.feature__media img{border-radius:var(--r);box-shadow:var(--shadow);width:100%}
.feature__body > :last-child{margin-bottom:0}

/* ---------- stat / parameter tiles ---------- */
.params{display:grid;gap:clamp(.85rem,1.8vw,1.25rem);
  grid-template-columns:repeat(auto-fit,minmax(13.5rem,1fr))}
.param{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:1.35rem 1.4rem;position:relative;overflow:hidden}
.param::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--cyan)}
.param--gold::before{background:var(--gold)}
.param--violet::before{background:var(--violet)}
.param--lime::before{background:var(--lime)}
.param__name{font-family:var(--display);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-mute);margin-bottom:.65rem}
.param__val{font-family:var(--display);font-size:1.5rem;font-weight:700;color:var(--text);
  line-height:1.15;margin-bottom:.35rem;font-variant-numeric:tabular-nums}
.param__val .unit{font-size:.6em;font-weight:500;color:var(--text-mute);margin-left:.25em}
.param__note{font-size:.83rem;color:var(--text-mute);line-height:1.5}

/* ---------- quotes ---------- */
.quote{max-width:46rem;margin:0 auto;text-align:center}
.quote p{font-family:var(--quote);font-style:italic;
  font-size:clamp(1.35rem,1.05rem + 1.6vw,2.15rem);line-height:1.4;font-weight:400;
  color:var(--text);margin:0 0 1.4rem}
.quote p em{font-style:italic;color:var(--gold)}
.quote cite{font-family:var(--display);font-style:normal;font-size:.72rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--text-mute)}
.quote + .quote{margin-top:clamp(3rem,7vw,5rem);padding-top:clamp(3rem,7vw,5rem);
  border-top:1px solid var(--line)}
/* Line art above a quotation. The drawing is white strokes on transparency,
   which reads on the ink section of the dark theme and disappears on the same
   section in the light one (--ink-a there is #e7eaf0). Inverting turns the
   strokes black and leaves the transparency alone, so one file serves both
   themes; no colour is introduced, so there is nothing to add to the contrast
   test. Width is capped well below the intrinsic 1600px: it is an ornament,
   and at full size it competes with the words. */
.quote__art{display:block;width:min(100%,34rem);height:auto;margin:0 auto 1.6rem;
  opacity:.85}
:root[data-theme="light"] .quote__art{filter:invert(1);opacity:.7}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]) .quote__art{filter:invert(1);opacity:.7}
}
@media (prefers-reduced-motion:no-preference){
  .quote__art{transition:opacity .4s ease}
}

/* ---------- photographs ----------
   A masonry column layout, because the pictures are a mix of landscape and
   portrait: forcing them all into a 4:3 grid cell crops the subject out.
   CSS columns keep every image at its own aspect ratio, uncropped. */
.photos{columns:3;column-gap:clamp(.7rem,1.6vw,1.15rem)}
@media (max-width:900px){.photos{columns:2}}
@media (max-width:560px){.photos{columns:1}}
.photos figure{margin:0 0 clamp(.7rem,1.6vw,1.15rem);break-inside:avoid;
  page-break-inside:avoid;border-radius:var(--r-sm);overflow:hidden;
  background:var(--surface);position:relative}
.photos img{width:100%;height:auto;display:block;
  transition:transform .6s cubic-bezier(.22,1,.36,1),filter .4s ease}
.photos figure:hover img{transform:scale(1.03)}
.photos figcaption{position:absolute;left:0;right:0;bottom:0;margin:0;padding:2.5rem .9rem .8rem;
  font-size:.82rem;color:var(--on-photo-soft);
  background:linear-gradient(to top,rgba(16,18,23,.82),transparent);
  opacity:0;transition:opacity .3s ease}
.photos figure:hover figcaption,.photos figure:focus-within figcaption{opacity:1}

/* The zoom trigger is inserted by site.js, so the markup in the content files
   stays plain <figure><img>. Reset the button to nothing: it must be a button
   for the keyboard and for screen readers, but must look like the image. */
.photos__zoom{display:block;width:100%;padding:0;margin:0;border:0;background:none;
  cursor:zoom-in;color:inherit;font:inherit}
.photos__zoom:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ---------- lightbox ---------- */
.lightbox{width:100%;max-width:100%;height:100%;max-height:100%;
  margin:0;padding:0;border:0;background:transparent;overflow:hidden;color:var(--text)}
.lightbox::backdrop{background:rgba(12,14,18,.93)}
.lightbox__frame{margin:0;height:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1rem;
  padding:clamp(1rem,3vw,2.5rem) clamp(3rem,7vw,5.5rem)}
.lightbox__img{max-width:100%;max-height:82vh;width:auto;height:auto;display:block;
  border-radius:var(--r-sm);box-shadow:var(--shadow);background:var(--surface)}
.lightbox__cap{margin:0;display:flex;align-items:baseline;gap:.9rem;flex-wrap:wrap;
  justify-content:center;font-size:.9rem;color:var(--text-soft);text-align:center}
.lightbox__count{font-family:var(--display);font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-mute)}

.lightbox__btn{position:absolute;border:1px solid var(--line-strong);
  background:rgba(28,31,38,.72);color:var(--text);border-radius:999px;
  cursor:pointer;display:grid;place-items:center;line-height:1;
  transition:background .2s ease,border-color .2s ease,transform .2s ease}
.lightbox__btn:hover{background:var(--surface-2);border-color:var(--gold-dim)}
.lightbox__btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.lightbox__btn svg{width:60%;height:60%;fill:none;stroke:currentColor;stroke-width:2}
.lightbox__close{top:clamp(.75rem,2vw,1.4rem);right:clamp(.75rem,2vw,1.4rem);
  width:2.75rem;height:2.75rem}
.lightbox__nav{top:50%;transform:translateY(-50%);width:3rem;height:3rem}
.lightbox__nav:hover{transform:translateY(-50%) scale(1.07)}
.lightbox__prev{left:clamp(.5rem,2vw,1.4rem)}
.lightbox__next{right:clamp(.5rem,2vw,1.4rem)}
.lightbox[data-single="true"] .lightbox__nav{display:none}

@media (max-width:560px){
  .lightbox__frame{padding:1rem .6rem 4.5rem}
  .lightbox__img{max-height:72vh}
  .lightbox__nav{top:auto;bottom:1rem;transform:none}
  .lightbox__nav:hover{transform:scale(1.07)}
}
@media (prefers-reduced-motion:reduce){
  .lightbox__btn{transition:none}
}

/* legacy grid, still used where a uniform crop is genuinely wanted */
.gallery{display:grid;gap:clamp(.7rem,1.5vw,1.1rem);
  grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}
.gallery figure{margin:0;border-radius:var(--r-sm);overflow:hidden;background:var(--surface)}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover}

/* ---------- figures ---------- */
figure{margin:2.2rem 0}
figure img{border-radius:var(--r-sm)}
figcaption{font-size:.85rem;line-height:1.55;color:var(--text-mute);margin-top:.85rem;
  max-width:var(--measure)}

/* ---------- tables ---------- */
.table-scroll{overflow-x:auto;margin:1.9rem 0;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--surface)}
.datatable{width:100%;border-collapse:collapse;font-size:.93rem}
.datatable caption{caption-side:bottom;font-size:.83rem;color:var(--text-mute);
  text-align:left;padding:.9rem 1rem 0;line-height:1.5}
.datatable th,.datatable td{padding:.75rem 1rem;text-align:left;
  border-bottom:1px solid var(--line)}
.datatable tbody tr:last-child td{border-bottom:0}
.datatable thead th{font-family:var(--display);font-size:.68rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--gold);font-weight:600;
  border-bottom:1px solid var(--line-strong);background:var(--tint)}
.datatable tbody tr:hover{background:var(--tint)}
.datatable td.num{font-variant-numeric:tabular-nums;white-space:nowrap;
  font-family:var(--display)}

/* ---------- publication list ---------- */
.publist{list-style:none;padding:0;margin:0;display:grid;gap:.85rem}
.publist li{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:1.15rem 1.35rem;transition:border-color .2s ease,transform .2s ease}
.publist li:hover{border-color:var(--line-strong);transform:translateX(3px)}
.pub__title{font-family:var(--display);font-weight:600;color:var(--text);display:block;
  margin-bottom:.4rem;line-height:1.35;font-size:1.02rem}
a.pub__title:hover{color:var(--gold)}
.pub__authors{font-size:.89rem;color:var(--text-mute);margin-bottom:.3rem}
.pub__authors .me{font-weight:700;color:var(--text-soft)}
.pub__ref{font-size:.85rem;color:var(--text-mute);display:flex;flex-wrap:wrap;gap:.4rem .9rem;
  align-items:center}
.pub__ref .journal{color:var(--text-soft)}
.pub__ref a{color:var(--cyan)}
.pub__ref a:hover{color:var(--text)}
.pub__year{font-family:var(--display);font-variant-numeric:tabular-nums;
  font-size:.75rem;letter-spacing:.07em;text-transform:uppercase;color:var(--gold);
  background:rgba(217,176,97,.1);border:1px solid rgba(217,176,97,.24);
  border-radius:999px;padding:.14rem .6rem;flex:none}

/* ---------- accordion ---------- */
.acc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
  margin-bottom:.75rem;overflow:hidden}
.acc > summary{cursor:pointer;list-style:none;padding:1.05rem 3rem 1.05rem 1.35rem;
  font-family:var(--display);font-weight:600;font-size:1rem;color:var(--text);
  position:relative;transition:color .18s ease}
.acc > summary::-webkit-details-marker{display:none}
.acc > summary::after{content:"";position:absolute;right:1.35rem;top:50%;width:.6rem;height:.6rem;
  border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);
  transform:translateY(-70%) rotate(45deg);transition:transform .25s ease}
.acc[open] > summary::after{transform:translateY(-25%) rotate(-135deg)}
.acc > summary:hover{color:var(--gold)}
.acc__body{padding:0 1.35rem 1.35rem;color:var(--text-soft)}
.acc__body > :last-child{margin-bottom:0}

/* ---------- letter / archival block ---------- */
.letter{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--gold);
  border-radius:var(--r-sm);padding:clamp(1.5rem,3.5vw,2.4rem);margin:2.2rem 0;
  font-family:var(--quote);font-style:italic;color:var(--text-soft);font-size:1.04rem}
.letter p:last-child{margin-bottom:0}
.letter .sig{font-family:var(--body);font-style:normal;font-weight:600;color:var(--text)}

/* ---------- verse ---------- */
.verse{white-space:pre-line;font-family:var(--quote);font-style:italic;
  font-size:clamp(1.05rem,1rem + .35vw,1.28rem);
  line-height:1.9;color:var(--text-soft);border-left:2px solid var(--gold);
  padding-left:1.6rem;margin:1.6rem 0}

/* ---------- full-bleed photographic band ---------- */
.band{position:relative;width:100%;overflow:hidden;background:var(--bg-deep);
  height:clamp(18rem,58vh,34rem);display:flex;align-items:flex-end}
.band--tall{height:clamp(24rem,78vh,44rem)}
.band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 50%}
.band::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,var(--scrim-strong) 0%,var(--scrim-mid) 38%,var(--scrim-soft) 100%)}
.band__caption{position:relative;z-index:2;width:100%;
  padding:clamp(1.5rem,4vw,3rem) 0}
.band__caption .wrap > *{margin:0}
.band__caption .eyebrow{color:var(--gold);margin-bottom:.4rem}
.band__caption p{color:var(--on-photo-soft);font-size:clamp(1rem,.95rem + .4vw,1.3rem);
  max-width:38rem;text-shadow:var(--photo-shadow)}

/* portrait split: a tall photograph beside a block of text */
.split{display:grid;gap:0;grid-template-columns:1fr;align-items:stretch}
@media (min-width:900px){
  .split{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .split--flip .split__media{order:-1}
}
.split__media{position:relative;min-height:clamp(20rem,52vh,38rem);background:var(--bg-deep)}
.split__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.split__body{display:flex;flex-direction:column;justify-content:center;
  padding:clamp(2.25rem,5vw,4.5rem) clamp(1.25rem,4vw,3.5rem);background:var(--surface)}
.split__body > :last-child{margin-bottom:0}
.split__body .verse{border-left:0;padding-left:0;margin:0}

/* compact identity strip */
.idcard{display:grid;gap:0;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
  border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;
  background:var(--surface);margin:2rem 0}
.idcard div{padding:1.1rem 1.3rem;border-right:1px solid var(--line)}
.idcard div:last-child{border-right:0}
@media (max-width:700px){.idcard div{border-right:0;border-bottom:1px solid var(--line)}
  .idcard div:last-child{border-bottom:0}}
.idcard dt{font-family:var(--display);font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);margin-bottom:.4rem}
.idcard dd{margin:0;font-size:.98rem;color:var(--text);line-height:1.45}

/* ---------- contact tiles ---------- */
.metastrip{display:grid;gap:clamp(1rem,2.2vw,1.5rem);
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.metastrip__item{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:1.5rem 1.6rem}
.metastrip__item h3{font-family:var(--display);font-size:.68rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:.8rem}
.metastrip__item p{margin:0;line-height:1.7;color:var(--text-soft);font-size:.95rem}
.metastrip__item a{color:var(--text-soft);border-bottom:1px solid var(--line-strong)}
.metastrip__item a:hover{color:var(--gold);border-color:var(--gold)}

/* ---------- arXiv digest: horizontal list, grouped by theme ---------- */
.dg-theme{display:flex;align-items:baseline;gap:.85rem;font-size:1.02rem;color:var(--gold);
  text-transform:uppercase;letter-spacing:.09em;margin:2.75rem 0 1.1rem;
  padding-bottom:.6rem;border-bottom:1px solid var(--line)}
.dg-theme:first-child{margin-top:0}
.dg-theme .count{margin-left:auto;font-family:var(--body);font-size:.78rem;
  letter-spacing:0;text-transform:none;color:var(--text-mute);
  background:var(--tint-2);border-radius:999px;padding:.1rem .6rem}

.dg-list{display:flex;flex-direction:column;gap:0}
.dg{padding:1.5rem 0;border-bottom:1px solid var(--line)}
.dg:last-child{border-bottom:0}
.dg__head{display:flex;align-items:flex-start;gap:.85rem;margin-bottom:.5rem}
.dg__chip{flex:none;font-family:var(--display);font-size:.72rem;font-weight:700;
  line-height:1;padding:.34rem .6rem;border-radius:999px;background:rgba(79,195,217,.14);
  color:var(--cyan);border:1px solid rgba(79,195,217,.32);margin-top:.2rem}
.dg__chip--bonus{background:rgba(232,131,107,.14);color:var(--coral);
  border-color:rgba(232,131,107,.32)}
.dg__title{margin:0;font-size:clamp(1.02rem,.98rem + .3vw,1.2rem);line-height:1.35;
  font-weight:600}
.dg__title a{color:var(--text)}
.dg__title a:hover{color:var(--gold)}
.dg__authors{margin:0 0 .55rem;font-size:.88rem;color:var(--text-mute)}
.dg__why{margin:0 0 .7rem;font-size:.95rem;color:var(--text-soft);
  border-left:2px solid var(--gold);padding-left:.9rem}
.dg--bonus .dg__why{border-left-color:var(--coral)}
.dg__foot{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.6rem}
.dg__foot code{font-size:.72rem;background:var(--tint-2);color:var(--text-mute)}
.dg__abs{background:none;border:0;margin:0}
.dg__abs > summary{padding:.35rem 1.6rem .35rem 0;font-family:var(--body);
  font-size:.85rem;font-weight:500;color:var(--text-mute)}
.dg__abs > summary::after{right:.4rem;width:.45rem;height:.45rem;border-width:1.5px}
.dg__abs > summary:hover{color:var(--gold)}
.dg__abs .acc__body{padding:.2rem 0 .4rem;font-size:.9rem}

/* ---------- archive index ---------- */
.archive{list-style:none;padding:0;margin:0;display:grid;gap:.6rem}
.archive li{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;align-items:baseline;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:.85rem 1.2rem;transition:border-color .2s ease}
.archive li:hover{border-color:var(--line-strong)}
.archive time{font-family:var(--display);font-variant-numeric:tabular-nums;font-size:.86rem;
  color:var(--gold);min-width:6.5rem}
.archive .count{font-size:.82rem;color:var(--text-mute);margin-left:auto}

/* ---------- news figures ----------
   Generated inline by tools/news/figures.py. Layout only: every colour inside
   the SVG is set with style="fill:var(--token)" on the shape itself, so the
   figures follow the theme toggle and no new colour enters the palette. */
/* overflow stays hidden (the SVG default): the map's viewBox deliberately
   crops Antarctica, and overflow:visible painted it back over the legend. */
.news-fig{display:block;width:100%;height:auto;max-width:100%;
  margin:1.5rem 0}
.news-fig--banner{margin:0 0 .5rem;opacity:.9}
.news-figcap{margin:-.6rem 0 1.9rem;font-size:.82rem;color:var(--text-mute);
  text-align:center}

/* Pan/zoom wrapper that svgzoom.js builds around svg[data-zoomable].
   The svg keeps its .news-fig margins; the wrapper only hosts the buttons. */
.svgzoom{position:relative}
.svgzoom--zoomed .news-fig{cursor:grab}
.svgzoom--zoomed .news-fig:active{cursor:grabbing}
.svgzoom__bar{position:absolute;top:1.9rem;right:.4rem;display:flex;
  flex-direction:column;gap:.25rem}
.svgzoom__btn{width:1.9rem;height:1.9rem;border-radius:var(--r-sm);
  border:1px solid var(--line-strong);background:var(--surface);
  color:var(--text);font-size:1rem;line-height:1;cursor:pointer;
  opacity:.55;transition:opacity .15s}
.svgzoom__btn:hover,.svgzoom__btn:focus-visible,
.svgzoom--zoomed .svgzoom__btn{opacity:1}
.svgzoom__btn:disabled{opacity:.25;cursor:default}
/* Venue names on the conference map: ~50 of them collide at rest, so they
   fade in only when the map is zoomed. Without JS there is no .svgzoom
   wrapper and the labels simply stay visible. */
.map-name{transition:opacity .2s}
.svgzoom:not(.svgzoom--zoomed) .map-name{opacity:0}

/* Experiment photographs, beside the news item they illustrate.
   NOT .photos: that one hides its figcaption until hover, and the caption here
   carries the credit a CC licence requires — an attribution that appears only
   on hover is no attribution at all, and does not exist on a touch screen.
   Layout only; every colour is a token. */
/* Flex, not grid: with the heading, body and sources as grid rows the picture
   spanned all three and stretched the gaps between them. Wrapping the text in
   .dg__body makes the item two boxes side by side, and the text keeps its own
   natural spacing whatever the height of the photo. */
.dg__body{min-width:0}
@media (min-width:760px){
  .dg--haspic{display:flex;align-items:flex-start;
    gap:clamp(1rem,2vw,1.6rem);flex-direction:row-reverse}
  .dg--haspic .dg__body{flex:1 1 auto}
  .dg--haspic .dg__photo{flex:0 0 clamp(11rem,22vw,17rem);margin-top:.35rem}
}
.dg__photo{margin:0 0 .9rem;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-sm);overflow:hidden}
.dg__photo img{width:100%;height:auto;display:block}
/* A drawn sketch, unlike a photograph, needs breathing room around it and no
   dark edge: it is line art on the page's own background, not a picture. */
.dg__photo--sketch{background:var(--tint);border-style:dashed}
.dg__photo--sketch .news-fig{margin:.35rem 0 0;width:100%;height:auto}
.dg__photo figcaption{margin:0;padding:.6rem .8rem .7rem;font-size:.74rem;
  line-height:1.45;color:var(--text-mute)}
.dg__photo figcaption a{color:var(--text-soft);border-bottom:1px solid var(--line-strong)}
.dg__photo figcaption a:hover{color:var(--gold);border-color:var(--gold)}

/* ---------- notice ---------- */
.notice{background:rgba(79,195,217,.08);border:1px solid rgba(79,195,217,.28);
  border-radius:var(--r-sm);padding:1.15rem 1.4rem;margin:1.75rem 0;font-size:.95rem;
  color:var(--text-soft)}
.notice > :last-child{margin-bottom:0}
.notice strong{color:var(--cyan)}
.notice--gold{background:rgba(217,176,97,.09);border-color:rgba(217,176,97,.3)}
.notice--gold strong{color:var(--gold)}

/* ---------- footer ---------- */
.site-footer{background:var(--bg-deep);border-top:1px solid var(--line);
  padding-block:clamp(2.75rem,5.5vw,4rem);font-size:.92rem;color:var(--text-mute)}
.site-footer__inner{display:grid;gap:2rem;
  grid-template-columns:repeat(auto-fit,minmax(14.5rem,1fr))}
.site-footer h4{font-family:var(--display);color:var(--gold);font-size:.68rem;
  letter-spacing:.2em;text-transform:uppercase;margin-bottom:.9rem;font-weight:600}
.site-footer p{margin:0 0 .4rem;line-height:1.7}
.site-footer a{color:var(--text-soft)}
.site-footer a:hover{color:var(--gold)}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{margin-bottom:.45rem}
.site-footer__base{margin-top:2.5rem;padding-top:1.6rem;border-top:1px solid var(--line);
  font-size:.82rem;color:var(--text-mute)}

/* ---------- literature search ---------- */
.lit{max-width:52rem;margin-inline:auto}
.lit__label{display:block;font-family:var(--display);font-size:.7rem;font-weight:600;
  letter-spacing:.17em;text-transform:uppercase;color:var(--gold);margin:0 0 .6rem}
.lit__free{width:100%;font-family:var(--display);font-size:clamp(1rem,.9rem + .5vw,1.25rem);
  padding:.95rem 1.2rem;color:var(--text);background:var(--surface);
  border:1px solid var(--line-strong);border-radius:999px;
  transition:border-color .2s ease,box-shadow .2s ease}
.lit__free::placeholder{color:var(--text-mute)}
.lit__free:focus{outline:none;border-color:var(--gold);
  box-shadow:0 0 0 4px rgba(217,176,97,.14)}
.lit input[type=text],.lit select{width:100%;font-family:var(--body);font-size:.95rem;
  padding:.6rem .85rem;color:var(--text);background:var(--bg);
  border:1px solid var(--line-strong);border-radius:var(--r-sm)}
.lit input[type=text]:focus,.lit select:focus{outline:none;border-color:var(--cyan)}
.lit__hint{font-size:.86rem;color:var(--text-mute);margin:.85rem 0 0;line-height:1.6}
.lit__hint code{font-size:.85em}
.lit__note{display:block;font-size:.78rem;color:var(--text-mute);margin-top:.35rem}
.lit__grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))}
.lit__acc{margin-top:1.25rem}
.lit__chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.1rem;min-height:1.9rem}
.chip{display:inline-flex;align-items:center;gap:.5rem;font-size:.83rem;
  background:var(--surface);border:1px solid var(--line-strong);border-radius:999px;
  padding:.32rem .85rem;color:var(--text-soft)}
.chip__k{font-family:var(--display);font-size:.66rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--gold)}
.lit__sources{border:0;padding:0;margin:1.5rem 0 0;display:flex;flex-wrap:wrap;
  gap:.5rem 1.4rem;align-items:center}
.lit__sources legend{float:left;width:100%;margin-bottom:.6rem}
.lit__check{display:inline-flex;align-items:center;gap:.5rem;font-size:.93rem;
  color:var(--text-soft);cursor:pointer}
.lit__check input{accent-color:var(--gold);width:1rem;height:1rem}
.lit__status:focus{outline:none}
/* the sticky header must not cover the results when we scroll to them */
#lit-pane{scroll-margin-top:5rem}
.lit__status{font-size:.92rem;color:var(--text-soft);margin:0 0 1.5rem;
  display:flex;align-items:center;gap:.6rem;min-height:1.5rem}
.lit__results{display:grid;gap:2.25rem}
.lit-group{display:flex;align-items:baseline;gap:.85rem;font-size:1.02rem;color:var(--gold);
  text-transform:uppercase;letter-spacing:.1em;margin:0 0 .35rem;padding-bottom:.6rem;
  border-bottom:1px solid var(--line)}
.lit-group .count{margin-left:auto;font-family:var(--body);font-size:.78rem;
  letter-spacing:0;text-transform:none;color:var(--text-mute);
  background:var(--tint-2);border-radius:999px;padding:.1rem .6rem}
.lit-group__note{font-size:.84rem;color:var(--text-mute);margin:0 0 1.1rem}

/* match buckets, strongest first — colour-coded down the left edge */
.lit-bucket{border-left:2px solid transparent;padding-left:1.1rem}
.lit-bucket--exact{border-left-color:var(--gold)}
.lit-bucket--authors{border-left-color:var(--cyan)}
.lit-bucket--authors .lit-group{color:var(--cyan)}
.lit-bucket--some{border-left-color:var(--violet)}
.lit-bucket--some .lit-group{color:var(--violet)}
.lit-bucket--topic{border-left-color:var(--line-strong)}
.lit-bucket--topic .lit-group{color:var(--text-soft)}
@media (max-width:600px){.lit-bucket{padding-left:.75rem}}

/* which database(s) returned a given record */
.src-row{display:inline-flex;gap:.35rem;flex-wrap:wrap;margin-left:auto}
.src{font-family:var(--display);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.1rem .5rem;border-radius:999px;border:1px solid var(--line-strong);
  color:var(--text-mute)}
.src--inspire{color:var(--cyan);border-color:rgba(79,195,217,.35)}
.src--crossref{color:var(--lime);border-color:rgba(159,211,86,.35)}
.src--openalex{color:var(--violet);border-color:rgba(169,140,240,.35)}
.src--s2{color:var(--gold);border-color:rgba(212,175,102,.35)}
.spin{width:.95rem;height:.95rem;border:2px solid var(--line-strong);
  border-top-color:var(--gold);border-radius:50%;display:inline-block;
  animation:spin .7s linear infinite;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- back to top ---------- */
.to-top{position:fixed;right:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);z-index:250;
  width:3rem;height:3rem;border-radius:999px;display:grid;place-items:center;
  background:var(--surface-2);border:1px solid var(--line-strong);color:var(--text-soft);
  cursor:pointer;opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .28s ease,transform .28s ease,visibility .28s,background .2s ease,color .2s ease;
  box-shadow:var(--shadow)}
.to-top[data-show="true"]{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--gold);color:var(--on-accent);border-color:var(--gold)}
.to-top svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}

/* ---------- scroll reveal ---------- */
.reveal{opacity:0;transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .spin{animation:none}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ---------- KaTeX on dark ---------- */
.katex{font-size:1.04em;color:var(--text)}
.katex-display{margin:1.7rem 0;overflow-x:auto;overflow-y:hidden;padding-block:.35rem}

/* ---------- 404 ---------- */
.center-pane{min-height:62vh;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;padding-block:4.5rem}

/* ---------- print ---------- */
@media print{
  .site-header,.site-footer,.nav-toggle,.hero__img,.to-top{display:none}
  body{background:#fff;color:#000;font-size:11pt}
  .card,.param,.publist li,.metastrip__item{border:1px solid #bbb;background:#fff;box-shadow:none}
  a{color:#000;text-decoration:underline}
  .reveal{opacity:1;transform:none}
}

/* outbound links: a discreet mark, only in running prose — in dense lists
   (publications, digest) the arrow on every line would be noise */
.prose a[target="_blank"]::after{content:"\2197";font-size:.75em;margin-left:.15em;
  vertical-align:.35em;opacity:.55}
.prose a[target="_blank"]:hover::after{opacity:1}