/* PrismWAM — component A: floating nav, film hero, overview, film modal.
   Scope: .nav*, .hero*, #overview / .ov-*, .film*. Only colour / opacity / transform / shadow animate on hover. */

/* ═════════ skip link ═════════ */
.nav-skip {
  position: fixed; left: 16px; top: 10px; z-index: 75; padding: 10px 16px; border-radius: var(--r-md);
  background: var(--paper); color: var(--ink); font-size: 14px; font-weight: 600; box-shadow: var(--shadow-2);
  transform: translateY(-220%); transition: transform .3s var(--ease), box-shadow .3s; box-shadow: none;
}
.nav-skip:focus, .nav-skip:focus-visible { transform: none; text-decoration: none; box-shadow: var(--shadow-2); }

/* ═════════ nav ═════════ */
.nav {
  position: fixed; z-index: 60; top: var(--nav-top); left: 0; right: 0;
  width: calc(100% - 32px); max-width: var(--wrap); height: var(--nav-h); margin: 0 auto;
  pointer-events: none;
}
.nav-pill {
  /* hero state (transparent over the film) */
  --tab: rgba(255, 255, 255, .74);
  --tab-hover: #fff;
  --tab-on: #fff;
  --ind: rgba(255, 255, 255, .12);   /* active tab: a quiet tint, nothing else */
  --ghost: rgba(255, 255, 255, .06); /* hover: half of that */
  position: relative; isolation: isolate; pointer-events: auto;
  /* true centre while there is room; if a side ever needs more (e.g. a wider fallback font) the tabs slide over
     rather than paint on top of the actions */
  display: grid; grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr); align-items: center; gap: 12px;
  height: 100%; padding: 0 14px; border-radius: var(--r-xl); /* equal inner padding: logo and Film button sit 14px in */
  color: #fff; border: 1px solid rgba(255, 255, 255, .1);
  text-shadow: 0 1px 10px rgba(0, 0, 0, .35);
  transition: color .4s, border-color .4s, box-shadow .4s, text-shadow .4s;
}
/* frosted glass: the layer fades in, so the blur itself never has to transition. Over the film it is a faint
   night glass; once content scrolls beneath, a light (or night) frosted bar */
.nav-pill::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: rgba(255, 255, 255, .04);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  opacity: 1; transition: opacity .4s, background-color .4s;
}
.nav[data-state="solid"] .nav-pill {
  --tab: var(--ink-2);
  --tab-hover: var(--ink);
  --tab-on: var(--ink);
  --ind: rgba(29, 29, 31, .06);
  --ghost: rgba(29, 29, 31, .035);
  color: var(--ink); border-color: rgba(20, 16, 40, .08); text-shadow: none;
  box-shadow: 0 1px 2px rgba(20, 16, 40, .04), 0 10px 30px rgba(20, 16, 40, .09);
}
/* lighter frosted glass: the blur + saturation carry legibility, the content shows through */
.nav[data-state="solid"] .nav-pill::before { background: rgba(255, 255, 255, .6); }
/* over a dark section (Real world): same frosted pill, night tint */
.nav[data-state="solid"][data-tone="dark"] .nav-pill {
  --tab: var(--night-ink-2);
  --tab-hover: #fff;
  --tab-on: #fff;
  --ind: rgba(255, 255, 255, .12);
  --ghost: rgba(255, 255, 255, .06);
  color: var(--night-ink); border-color: rgba(255, 255, 255, .1);
  box-shadow: 0 8px 26px rgba(0, 0, 0, .2);
}
.nav[data-state="solid"][data-tone="dark"] .nav-pill::before { background: rgba(18, 20, 29, .56); }

@media (prefers-reduced-motion: no-preference) {
  .nav-pill { animation: nav-in .9s var(--ease) .2s backwards; }
}
@keyframes nav-in { from { opacity: 0; transform: translateY(-12px); } }

/* brand */
.nav-brand {
  justify-self: start; display: inline-flex; align-items: center; gap: 10px; height: 40px;
  color: inherit; font-size: 18px; font-weight: 650; letter-spacing: -0.018em; white-space: nowrap;
}
.nav-brand:hover { text-decoration: none; }
.nav-brand-w { font-family: var(--brand); font-weight: 700; letter-spacing: -.01em; }
.nav-logo {
  width: 34px; height: 34px; flex: none;
}

/* tabs + sliding indicator */
.nav-tabs { position: relative; justify-self: center; min-width: 0; }
.nav-list { position: relative; z-index: 1; display: flex; align-items: center; gap: 2px; width: max-content; }
.nav-tab {
  display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: var(--r-sm);
  font-size: 14.5px; font-weight: 550; letter-spacing: -0.004em; white-space: nowrap;
  color: var(--tab); transition: color .3s;
}
.nav-tab:hover { text-decoration: none; }
.nav-tab[aria-current] { color: var(--tab-on); }
.nav-tab:focus-visible { outline-offset: 0; border-radius: var(--r-sm); }
.nav-ind, .nav-ghost {
  position: absolute; left: 0; top: 50%; height: 36px; margin-top: -18px; width: 40px;
  border-radius: var(--r-sm); opacity: 0; pointer-events: none;
}
.nav-ind {
  background: var(--ind);
  transition: transform .3s var(--ease), width .3s var(--ease), opacity .3s, background-color .4s;
}
.nav-ghost { background: var(--ghost); transition: transform .3s var(--ease), width .3s var(--ease), opacity .2s, background-color .4s; }
.nav-ind.is-on, .nav-ghost.is-on { opacity: 1; }
.nav-ind.no-anim, .nav-ghost.no-anim { transition-property: opacity, background-color; }

/* actions */
.nav-acts { justify-self: end; display: flex; align-items: center; gap: 2px; }
.nav-act {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 11px;
  border-radius: var(--r-sm); color: var(--tab); font-size: 14px; font-weight: 550; white-space: nowrap;
  transition: color .3s, background-color .3s, box-shadow .3s, transform .25s var(--ease);
}
.nav-act svg { width: 16px; height: 16px; flex: none; }
.nav-act:hover { text-decoration: none; }
.nav-act:active { transform: scale(.96); }
.nav-film { margin-left: 4px; padding: 0 15px 0 13px; background: #fff; color: var(--ink); text-shadow: none; }
.nav-film svg { width: 13px; height: 13px; }
.nav[data-state="solid"] .nav-film { background: var(--ink); color: #fff; box-shadow: none; }
.nav[data-state="solid"][data-tone="dark"] .nav-film { background: #fff; color: var(--ink); }

@media (hover: hover) and (pointer: fine) {
  .nav-tab:hover { color: var(--tab-hover); }
  .nav-act:not(.nav-film):hover { color: var(--tab-hover); background: var(--ghost); }
  .nav-film:hover { background: #ecebf3; }
  .nav[data-state="solid"] .nav-film:hover { background: #3a3a42; }
  .nav[data-state="solid"][data-tone="dark"] .nav-film:hover { background: #ecebf3; }
}

/* mid widths: drop the Paper / Code links first (both are also in the overview), so the centred tabs keep
   at least 16px from the actions at every width */
@media (max-width: 1239.98px) {
  .nav-paper, .nav-code { display: none; }
}
/* seven tabs: while Paper / Code show, slightly tighter tabs keep the strip centred and 16px clear of them */
@media (min-width: 1240px) {
  .nav-tab { padding: 0 10px; }
}
@media (max-width: 1099.98px) {
  .nav-tab { padding: 0 12px; }
}
/* below ~1060px the logo alone carries the brand (its aria-label names it), as on phones, so the tabs stay centred */
@media (min-width: 900px) and (max-width: 1059.98px) {
  .nav-brand-w { display: none; }
}

@media (min-width: 900px) and (max-width: 999.98px) {
  .nav-tab { padding: 0 10px; font-size: 14px; }
  .nav-act:not(.nav-film) { width: 36px; padding: 0; }
  .nav-act:not(.nav-film) span { display: none; }
}

/* mobile: full-width bar, scrolling tab strip, icon buttons */
@media (max-width: 899.98px) {
  .nav { top: 0; width: 100%; max-width: none; }
  .nav-pill {
    grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; padding: 0 10px 0 14px; /* + the Film button's 4px margin = 14px */
    border-radius: 0; border-width: 0 0 1px; border-color: transparent;
  }
  .nav[data-state="hero"] .nav-pill { border-color: rgba(255, 255, 255, .07); }
  .nav[data-state="solid"] .nav-pill { border-color: var(--line); box-shadow: 0 6px 20px rgba(20, 16, 40, .06); }
  .nav[data-state="solid"][data-tone="dark"] .nav-pill { border-color: rgba(255, 255, 255, .08); box-shadow: none; }
  .nav[data-state="hero"] .nav-pill::before { background: rgba(9, 11, 18, .45); }
  .nav[data-state="solid"] .nav-pill::before { background: rgba(255, 255, 255, .62); }
  .nav[data-state="solid"][data-tone="dark"] .nav-pill::before { background: rgba(16, 18, 27, .58); }
  .nav-brand { font-size: 16.5px; gap: 9px; margin-left: 0; }
  .nav-logo { width: 30px; height: 30px; border-radius: 7px; }
  .nav-tabs {
    --fl: 0px; --fr: 26px;
    justify-self: stretch; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fl), #000 calc(100% - var(--fr)), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 var(--fl), #000 calc(100% - var(--fr)), transparent 100%);
  }
  .nav-tabs::-webkit-scrollbar { display: none; }
  .nav-tabs.is-scrolled { --fl: 30px; }
  .nav-tabs.at-end { --fr: 0px; }
  .nav-list { padding: 0 18px 0 4px; }
  /* 44px touch target; the visible pill (indicator / ghost) stays 34px */
  .nav-tab { height: 44px; padding: 0 11px; font-size: 14px; }
  .nav-tab { position: relative; }
  .nav-tab:focus-visible { outline: none; }
  .nav-tab:focus-visible::after {
    content: ""; position: absolute; inset: 5px 0; border-radius: var(--r-sm); pointer-events: none;
    box-shadow: 0 0 0 2px var(--focus);
  }
  .nav-ind, .nav-ghost { height: 34px; margin-top: -17px; }
  .nav-act { width: 40px; height: 40px; padding: 0; }
  .nav-act span { display: none; }
  .nav-film { position: relative; width: 36px; height: 36px; margin: 0 4px 0 4px; padding: 0; }
  .nav-film::after { content: ""; position: absolute; inset: -4px; }
  .nav-film svg { width: 14px; height: 14px; margin-left: 2px; }
}
/* phones: the glyph alone carries the brand (its aria-label names it), giving the tab strip ~3 tabs of room */
@media (max-width: 519.98px) {
  .nav-pill { padding: 0 8px 0 4px; gap: 4px; } /* logo centred in a 42px slot: 12px in on both sides */
  .nav-brand { width: 42px; justify-content: center; }
  .nav-brand-w { display: none; }
}

/* ═════════ hero: the whole 16:9 film frame, fitted (never cropped) inside the first screen ═════════ */
.hero {
  /* the film's own background, sampled from its frame edges (a hair darker than --night): the letterbox bars in
     this colour plus the soft edge fades below make the frame's border invisible */
  --hero-bg: #070a11;
  --hero-h: max(560px, 100vh);
  /* keep the film clear of the floating nav (top) and of the controls / scroll cue (bottom) */
  --hero-top: calc(var(--nav-h) + var(--nav-top) + 18px);
  --hero-bot: 60px;
  position: relative; isolation: isolate; overflow: hidden;
  height: var(--hero-h); padding: var(--hero-top) 0 var(--hero-bot);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--hero-bg); color: var(--night-ink);
}
@supports (height: 100svh) { .hero { --hero-h: max(560px, 100svh); } }
/* the frame is exactly the film's rectangle: full width, or full height on screens wider than 16:9 */
.hero-frame { position: relative; flex: none; width: min(100%, calc((var(--hero-h) - var(--hero-top) - var(--hero-bot)) * 16 / 9)); aspect-ratio: 16 / 9; }
.hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; object-position: 50% 50%; background: var(--hero-bg);
}
/* single-hue fades melt the frame's edges into the bars: short and eased (no step at the edge), gone by 4% so they
   never touch the film's top caption (from ~8%) or its bottom tagline (from ~95.5%) - the hero shows the whole 16:9 frame */
.hero-frame::after {
  content: ""; position: absolute; inset: -1px; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to bottom, var(--hero-bg) 0, rgba(7, 10, 17, .6) .8%, rgba(7, 10, 17, .25) 2%, rgba(7, 10, 17, .06) 3.2%, rgba(7, 10, 17, 0) 4%),
    linear-gradient(to top, var(--hero-bg) 0, rgba(7, 10, 17, .6) .8%, rgba(7, 10, 17, .25) 2%, rgba(7, 10, 17, .06) 3.2%, rgba(7, 10, 17, 0) 4%);
}
/* wider than 16:9 the film meets bars at its sides too */
@media (min-aspect-ratio: 16/9) {
  .hero-frame::after {
    background:
      linear-gradient(to bottom, var(--hero-bg) 0, rgba(7, 10, 17, .6) .8%, rgba(7, 10, 17, .25) 2%, rgba(7, 10, 17, .06) 3.2%, rgba(7, 10, 17, 0) 4%),
      linear-gradient(to top, var(--hero-bg) 0, rgba(7, 10, 17, .6) .8%, rgba(7, 10, 17, .25) 2%, rgba(7, 10, 17, .06) 3.2%, rgba(7, 10, 17, 0) 4%),
      linear-gradient(to right, var(--hero-bg) 0, rgba(7, 10, 17, 0) 2.2%, rgba(7, 10, 17, 0) 97.8%, var(--hero-bg) 100%);
  }
}

/* sound + play / pause / replay, side by side at the bottom-right, centred in the bottom bar when there is one
   (--lb = bar height: (screen height − film height) / 2) */
.hero-ctrl {
  --lb: calc((var(--hero-h) - min(100vw, var(--hero-h) * 16 / 9) * 9 / 16) / 2);
  position: absolute; z-index: 2; right: clamp(16px, 2.4vw, 36px); bottom: max(12px, calc(var(--lb) / 2 - 22px));
  display: flex; gap: 10px;
}
.hero-ctrl[hidden] { display: none; }
.hero-btn {
  position: relative; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center; color: #fff; cursor: pointer;
  background: rgba(255, 255, 255, .08); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  transition: background-color .25s, transform .3s var(--ease), opacity .3s;
}
.hero-btn[hidden] { display: none; }
.hero-btn:active { transform: scale(.94); }
.hero-btn:focus-visible { outline-offset: 4px; border-radius: 50%; }
.hero-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.hero-ring circle { fill: none; stroke-width: 1.6; }
.hero-ring-bg { stroke: rgba(255, 255, 255, .16); }
.hero-ring-fg { stroke: rgba(255, 255, 255, .9); stroke-linecap: round; stroke-dasharray: 125.66; stroke-dashoffset: 125.66; }
.hero-replay[data-state="ended"] .hero-ring-fg { stroke-dashoffset: 0; opacity: .4; transition: opacity .6s; }
.hero-ic { position: absolute; width: 16px; height: 16px; opacity: 0; transform: scale(.6); transition: opacity .25s, transform .4s var(--ease); }
.hero-sound .hero-ic { width: 18px; height: 18px; }
.hero-replay[data-state="playing"] .hero-ic-pause,
.hero-replay[data-state="paused"] .hero-ic-play,
.hero-replay[data-state="ended"] .hero-ic-replay,
.hero-sound[aria-pressed="false"] .hero-ic-mute,
.hero-sound[aria-pressed="true"] .hero-ic-sound { opacity: 1; transform: none; }
.hero-ic-play { margin-left: 2px; }

.hero-cue {
  position: absolute; z-index: 2; left: 50%; bottom: max(10px, calc((var(--hero-h) - min(100vw, var(--hero-h) * 16 / 9) * 9 / 16) / 4 - 22px));
  width: 44px; height: 44px; margin-left: -22px;
  display: grid; place-items: center; border-radius: 50%; color: rgba(255, 255, 255, .62);
  transition: color .25s;
}
.hero-cue svg { width: 26px; height: 26px; filter: drop-shadow(0 1px 6px rgba(0, 0, 0, .5)); }
.hero-cue:hover { color: #fff; text-decoration: none; }

@media (hover: hover) and (pointer: fine) {
  .hero-btn:hover { background: rgba(255, 255, 255, .16); }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-cue svg { animation: hero-bob 2.6s var(--ease-io) infinite; }
  .hero-cue, .hero-ctrl { animation: hero-rise 1s var(--ease) backwards; }
  .hero-cue, .hero-ctrl { animation-delay: 1.1s; }
}
@keyframes hero-bob { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(4px); } }
@keyframes hero-rise { from { opacity: 0; transform: translateY(14px); } }

/* portrait / near-square screens: the full-width film sits mid-screen; the controls and the scroll cue share the
   bottom edge */
@media (max-aspect-ratio: 6/5) {
  .hero { --hero-h: max(480px, 100vh); gap: clamp(14px, 2.6vh, 26px); padding: 64px 0; }
  @supports (height: 100svh) { .hero { --hero-h: max(480px, 100svh); } }
  .hero-frame { width: 100%; }
  .hero-ctrl { right: 14px; bottom: clamp(10px, 2.4vh, 22px); gap: 8px; }
  .hero-cue { bottom: clamp(10px, 2.4vh, 22px); }
}

/* portrait phones, after the film has played: fold the hero up to the film's height (nav clearance + 16:9 frame), so
   the paper title below slides into view; the scroll cue steps aside and the controls sit on the film */
@media (max-aspect-ratio: 6/5) and (max-width: 899.98px) {
  .hero { transition: height .9s var(--ease-io), padding .9s var(--ease-io); }
  .hero.is-folded { height: calc(64px + 56.25vw); padding: 64px 0 0; gap: 0; }
  .hero.is-folded .hero-cue { opacity: 0; visibility: hidden; transition: opacity .4s, visibility 0s .4s; }
  /* the controls ride the hero's bottom edge up as it folds and settle on the film's bottom-right corner (no row of
     their own); slightly smaller there so they cover as little of the frame as possible */
  .hero-ctrl { transition: transform .9s var(--ease-io), right .9s var(--ease-io), bottom .9s var(--ease-io); transform-origin: 100% 100%; }
  .hero.is-folded .hero-ctrl { bottom: 6px; right: 8px; transform: scale(.78); }
  .hero.no-anim, .hero.no-anim * { transition: none !important; }
  /* immersive first screen: until it folds, the hero runs on behind the browser's floating bottom bar (large viewport),
     while the film, the controls and the scroll cue stay centred / clear in the part that is always visible */
  /* (+80px: newer iOS Safari shows page content even below its floating bar, past the large viewport) */
  @supports (height: 100lvh) {
    .hero:not(.is-folded) { --hero-h: calc(max(480px, 100lvh) + 80px); padding-bottom: calc(64px + 100lvh - 100svh + 80px); }
    .hero:not(.is-folded) .hero-ctrl,
    .hero:not(.is-folded) .hero-cue { bottom: calc(clamp(10px, 2.4vh, 22px) + 100lvh - 100svh + 80px); }
  }
}
/* newer iOS Safari tints its status bar from the page background (theme-color is ignored): while the hero holds the
   top of a phone screen the page background is the hero's dark; the content itself keeps its paper background */
main { background: var(--paper); }
html.hero-tint body { background: #070a11; }

/* ═════════ overview ═════════ */
#overview { background: var(--paper); }
/* row 1: the paper title across the full content width, authors under it */
.ov-head { margin-bottom: clamp(30px, 3.2vw, 44px); }
.ov-title {
  font-size: clamp(30px, 3.4vw, 50px); line-height: 1.08; font-weight: 650; letter-spacing: -0.03em;
  text-wrap: balance;
}
.ov-title { display: flex; align-items: flex-start; gap: .28em; }
.ov-brand { font-family: var(--brand); font-weight: 700; letter-spacing: -.025em; }
.ov-logo { flex: none; width: 1.08em; height: 1.08em; margin-top: 0; border-radius: .2em; }
.ov-authors { margin-top: 16px; max-width: none; font-size: 17px; line-height: 1.6; font-weight: 500; color: var(--ink); text-wrap: balance; }
.ov-au { white-space: nowrap; }
.ov-au sup, .ov-affil sup { font-size: .62em; margin-left: 1px; color: var(--ink-2); font-weight: 500; }
.ov-au a { color: var(--accent-ink); text-decoration: none; }
.ov-au a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ov-affil { display: flex; flex-wrap: wrap; gap: 2px 18px; margin-top: 8px; font-size: 14.5px; color: var(--ink-2); }
.ov-affil span { white-space: nowrap; }
.ov-affil sup { margin-right: 2px; margin-left: 0; }
/* row 2: the text column and a narrower film card, top-aligned */
.ov-grid { display: grid; grid-template-columns: minmax(0, 1fr) 364px; gap: 56px; align-items: stretch; }
.ov-main { min-width: 0; }
.ov-links { display: flex; flex-wrap: wrap; gap: 10px; }
.ov-links .btn-line[aria-disabled="true"] { opacity: .5; }
/* link icons: a line icon at rest (one style for the whole row). On hover the button lifts, takes the
   destination's colour, and the line icon pops into the destination's full mark, which then keeps a small loop
   going (plus a slow sheen) for as long as the pointer stays. */
.ov-links .btn-line { position: relative; overflow: hidden; isolation: isolate;
  transition: color .25s, background-color .3s, border-color .3s, transform .45s var(--ease), box-shadow .45s var(--ease); }
.ov-links .btn-line::after { content: ""; position: absolute; inset: -1px; z-index: -1; pointer-events: none; opacity: 0;
  background: linear-gradient(105deg, transparent 38%, var(--shine) 50%, transparent 62%) 130% 0 / 260% 100% no-repeat; }
.ov-links .ov-ic { position: relative; flex: none; width: 17px; height: 17px; }
.ov-links .ov-ic svg { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .22s, transform .45s var(--ease); }
.ov-links .ov-ic .ic-b { opacity: 0; transform: scale(.4) rotate(-30deg); }
.ov-hf .ov-ic .ic-b { width: 128%; height: 128%; inset: -14%; }
.ov-paper .cut { fill: #fff; } .ov-paper .cut-l { stroke: #fff; }
.ov-hf .ic-l .hand { fill: var(--paper); } /* the hands sit in front of the face outline */
.ov-links .ov-paper, .ov-links .ov-cite { --brand: var(--accent-ink); --tint: var(--accent-soft); --glow: rgba(106, 92, 192, .45); }
.ov-links .ov-arxiv { --brand: #B31B1B; --tint: rgba(179, 27, 27, .06); --glow: rgba(179, 27, 27, .4); }
.ov-links .ov-code { --brand: #1F2328; --tint: rgba(31, 35, 40, .05); --glow: rgba(31, 35, 40, .45); }
.ov-links .ov-hf { --brand: #F5B800; --tint: rgba(255, 210, 30, .2); --glow: rgba(240, 160, 0, .45); }
@media (hover: hover) and (pointer: fine) {
  .ov-links .btn-line:hover, .ov-links .btn-line:focus-visible {
    --shine: color-mix(in srgb, var(--brand) 16%, transparent);
    color: var(--brand); border-color: var(--brand); background: var(--tint);
    transform: translateY(-2px); box-shadow: 0 10px 22px -12px var(--glow);
  }
  .ov-links .ov-hf:hover, .ov-links .ov-hf:focus-visible { color: var(--ink); }
  .ov-links .btn-line:hover .ic-l, .ov-links .btn-line:focus-visible .ic-l { opacity: 0; transform: scale(.4) rotate(30deg); }
  .ov-links .btn-line:hover .ic-b, .ov-links .btn-line:focus-visible .ic-b { opacity: 1; transform: none; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .ov-links .btn-line:hover::after, .ov-links .btn-line:focus-visible::after { opacity: 1; animation: ov-shine 2.4s .3s var(--ease-io) infinite; }
  .ov-links .btn-line:hover .ic-b, .ov-links .btn-line:focus-visible .ic-b { animation: ov-pop .6s var(--ease) both, var(--idle) var(--idle-t, 1.6s) .6s ease-in-out infinite; }
  .ov-links .ov-paper { --idle: ov-float; }
  .ov-links .ov-arxiv { --idle: ov-sway; --idle-t: 1.8s; }
  .ov-links .ov-code { --idle: ov-wave; --idle-t: 2s; }
  .ov-links .ov-hf { --idle: ov-hug; --idle-t: 1.2s; }
  .ov-links .ov-cite { --idle: ov-none; }
  .ov-links .ov-cite:hover .br-l, .ov-links .ov-cite:focus-visible .br-l { animation: ov-br-l 1.4s .6s ease-in-out infinite; }
  .ov-links .ov-cite:hover .br-r, .ov-links .ov-cite:focus-visible .br-r { animation: ov-br-r 1.4s .6s ease-in-out infinite; }
}
@keyframes ov-shine { from { background-position: 130% 0; } to { background-position: -30% 0; } }
@keyframes ov-pop { 0% { opacity: 0; transform: scale(.3) rotate(-35deg); } 55% { opacity: 1; transform: scale(1.24) rotate(8deg); }
  80% { transform: scale(.94) rotate(-3deg); } 100% { opacity: 1; transform: none; } }
@keyframes ov-float { 0%, 100% { transform: none; } 50% { transform: translateY(-2px) rotate(-5deg); } }
@keyframes ov-sway { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-14deg); } 75% { transform: rotate(14deg); } }
@keyframes ov-wave { 0%, 60%, 100% { transform: none; } 15% { transform: rotate(-12deg) translateY(-1px); } 30% { transform: rotate(10deg); } 45% { transform: rotate(-5deg); } }
@keyframes ov-hug { 0%, 100% { transform: none; } 30% { transform: scale(1.16, .9); } 48% { transform: scale(.94, 1.08) translateY(-1.5px); } 65% { transform: none; } }
@keyframes ov-none { to { transform: none; } }
@keyframes ov-br-l { 0%, 100% { transform: none; } 50% { transform: translateX(-1.6px); } }
@keyframes ov-br-r { 0%, 100% { transform: none; } 50% { transform: translateX(1.6px); } }
.ov-watch svg { width: 14px; height: 14px; }
.ov-watch small { margin-left: -1px; }
/* side by side with the film card the Film button would repeat it: it shows only once the card drops below the abstract */
@media (min-width: 1000px) {
  .ov-watch { display: none; }
}
@media (min-width: 1000px) and (max-width: 1199.98px) {
  .ov-grid { grid-template-columns: minmax(0, 1fr) 328px; gap: 44px; }
  #overview .ov-film-title { font-size: 17px; }
  .ov-links { gap: 8px; }
  .ov-links .btn { padding: 0 13px; }
}
/* narrow two-column widths, and tablets where Film joins the row: tighter buttons keep one row */
@media (min-width: 760px) and (max-width: 939.98px), (min-width: 1000px) and (max-width: 1099.98px) {
  .ov-links { gap: 6px; }
  .ov-links .btn { padding: 0 10px; }
}
/* phones: Film and BibTeX full width, the four others as an even 2 x 2 grid (never a lone button on a row) */
@media (max-width: 759.98px) {
  .ov-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 440px; }
  .ov-watch, .ov-cite { grid-column: 1 / -1; }
}

.ov-tl { margin-top: 28px; }
/* key results: the #1 claim leads as a full-width card, the two supporting facts sit side by side below it */
.ov-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ov-stat {
  display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 14px 16px 15px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--mist);
  font-size: 14.5px; line-height: 1.35; color: var(--ink-2); text-wrap: balance; cursor: default;
}
.ov-stat > b { font-size: 27px; line-height: 1.1; font-weight: 650; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.ov-stat-rank { background: var(--accent-soft); border-color: rgba(150, 138, 201, .3); }
.ov-stat-rank > b { font-size: 36px; font-weight: 700; letter-spacing: -0.03em; }
.ov-agent { color: var(--ink-2); white-space: nowrap; }
/* the benchmark names: ink, semibold, a step larger than the rest of the line; other key words: ink, semibold */
.ov-bm { font-size: 1.14em; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); white-space: nowrap; }
.ov-k { font-weight: 600; color: var(--ink); white-space: nowrap; }

/* TL;DR first (one statement, large, in ink), then the full abstract: both always shown */
.ov-label { margin-bottom: 10px; font-size: 15px; line-height: 1.3; font-weight: 650; letter-spacing: -0.004em; color: var(--ink-3); }
.ov-tldr { margin-top: 40px; }
.ov-tldr p {
  font-size: clamp(20px, 1.7vw, 24px); line-height: 1.42; font-weight: 550;
  letter-spacing: -0.016em; color: var(--ink); text-wrap: balance;
}
.ov-abs { margin-top: 34px; padding-top: 30px; border-top: 1px solid var(--line); }
/* one body size and one colour for the abstract's running text (its <em> question is styled in base.css) */
.ov-abs p { font-size: 1em; line-height: 1.7; color: var(--ink-2); text-wrap: pretty; }
.ov-abs p + p { margin-top: 14px; }
/* warm = RGB / semantic, cool = depth / physical, lavender = action: flat text colour only */
.ov-w, .ov-c, .ov-a { font-weight: inherit; }
.ov-w { color: var(--warm-ink); }
.ov-c { color: var(--cool-ink); }
.ov-a { color: var(--accent-ink); }
.ov-abs b.ov-w, .ov-abs b.ov-c, .ov-abs b.ov-a { font-weight: 600; }

/* film card */
.ov-side { min-width: 0; }
.ov-film {
  position: sticky; top: calc(var(--nav-top) + var(--nav-h) + 22px);
  padding: 10px; border-radius: var(--r-xl); color: var(--night-ink);
  background: var(--night-2);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 2px 6px rgba(20, 16, 40, .1), 0 24px 60px rgba(20, 16, 40, .2);
}
/* stat peek: the film card's face swaps to the hovered stat's numbers (desktop) */
.ov-film > .ov-poster, .ov-film > .ov-film-body { transition: opacity .3s var(--ease); }
.ov-film.is-peek > .ov-poster, .ov-film.is-peek > .ov-film-body { opacity: 0; }
.ov-sp {
  position: absolute; inset: 10px; z-index: 3; display: flex; flex-direction: column; gap: 20px; padding: 22px 22px 20px;
  border-radius: var(--r-lg); background: var(--night-2); color: var(--night-ink); overflow: hidden;
  opacity: 0; visibility: hidden; transform: translateY(6px); pointer-events: none;
  transition: opacity .3s var(--ease), transform .4s var(--ease), visibility 0s .3s;
}
.ov-film.is-peek .ov-sp { opacity: 1; visibility: visible; transform: none; transition: opacity .3s var(--ease), transform .4s var(--ease); }
.ov-sp-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ov-sp-h > span:first-child { display: grid; gap: 3px; min-width: 0; }
.ov-sp-h b { font-size: 19px; font-weight: 650; letter-spacing: -.01em; color: #fff; }
.ov-sp-h small { font-size: 13px; line-height: 1.35; color: var(--night-ink-2); }
.ov-sp-rank { flex: none; font-size: 26px; font-weight: 700; color: var(--accent-night); font-variant-numeric: tabular-nums; }
.ov-sp-rank small { font-size: 12px; font-weight: 500; color: var(--night-ink-2); }
.ov-sp-rows { display: grid; gap: 11px; margin: 0; padding: 0; list-style: none; }
.ov-sp-rows li { display: grid; grid-template-columns: 118px minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 14px; }
.ov-sp-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; color: var(--night-ink-2); }
.ov-sp-bar { position: relative; height: 15px; border-radius: 3px; background: rgba(255, 255, 255, .05); }
.ov-sp-bar i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 3px; background: rgba(255, 255, 255, .3); transition: width .7s var(--ease); transition-delay: calc(var(--i) * 45ms + 60ms); }
.ov-sp.is-in .ov-sp-bar i { width: var(--w); }
.ov-sp-rows b { font-weight: 650; color: var(--night-ink); min-width: 46px; text-align: right; }
.ov-sp-rows b small { margin-left: 6px; font-size: 11px; font-weight: 500; color: var(--night-ink-2); }
.ov-sp-rows .is-ours .ov-sp-n, .ov-sp-rows .is-ours b { color: #fff; font-weight: 650; }
.ov-sp-rows .is-ours .ov-sp-bar i { background: var(--accent-light); }
.ov-sp-rows .is-pre .ov-sp-bar i { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .32) 0 3px, rgba(255, 255, 255, .1) 3px 6px); }
.ov-sp-hours em { position: absolute; left: calc(var(--w) + 8px); top: 50%; transform: translateY(-50%); font-style: normal; font-size: 11.5px; color: var(--night-ink-2); white-space: nowrap; opacity: 0; transition: opacity .4s .5s; }
.ov-sp.is-in .ov-sp-hours em { opacity: 1; }
.ov-sp-hours li { grid-template-columns: 124px minmax(0, 1fr) auto; }
.ov-sp-hours .ov-sp-bar { margin-right: 74px; }
.ov-sp-key { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; font-size: 12px; color: var(--night-ink-2); }
.ov-sp-key span { display: inline-flex; align-items: center; gap: 6px; }
.ov-sp-key i { width: 14px; height: 8px; border-radius: 2px; background: rgba(255, 255, 255, .3); }
.ov-sp-key .is-ours i { background: var(--accent-light); }
.ov-sp-key .is-pre i { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .32) 0 3px, rgba(255, 255, 255, .1) 3px 6px); }
.ov-sp-foot { margin: auto 0 0; font-size: 13px; line-height: 1.45; color: var(--night-ink-2); }
.ov-sp-grp { display: grid; gap: 11px; }
.ov-sp-gh { display: flex; justify-content: space-between; margin: 0; font-size: 14px; color: var(--night-ink-2); }
.ov-sp-gh b { color: var(--accent-night); font-weight: 700; }
.ov-stat.is-peek { box-shadow: 0 0 0 1.5px var(--accent-light); }
.ov-stat:focus-visible { outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .ov-sp, .ov-sp-bar i { transition: none !important; } }

.ov-poster {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0;
  border-radius: var(--r-md); overflow: hidden; cursor: pointer; background: #0b0d14; color: #fff; text-align: left;
  isolation: isolate;
}
.ov-poster:focus-visible { outline-offset: 3px; border-radius: var(--r-md); }
.ov-poster img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), filter .5s; }
.ov-poster-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(9, 11, 18, .92) 0, rgba(9, 11, 18, .62) 17%, rgba(9, 11, 18, 0) 44%); pointer-events: none; }
.ov-play {
  position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .34);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .4);
  transition: transform .5s var(--ease), background-color .3s, color .3s, border-color .3s;
}
.ov-play svg { width: 28px; height: 28px; }   /* the path is already drawn optically centred (centroid on the middle); no extra nudge */
.ov-poster-foot {
  position: absolute; left: 16px; right: 16px; bottom: 13px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 9px 12px; pointer-events: none;
}
.ov-peek {
  display: flex; align-items: baseline; gap: 8px; height: 20px; min-width: 0; white-space: nowrap; overflow: hidden;
  font-size: 13.5px; font-weight: 550; color: #fff; opacity: 0; transform: translateY(4px);
  transition: opacity .25s, transform .35s var(--ease);
}
.ov-peek-t { color: var(--accent-night); font-variant-numeric: tabular-nums; }
.ov-peek-l { overflow: hidden; text-overflow: ellipsis; }
.ov-dur { justify-self: end; }
.ov-track { grid-column: 1 / -1; display: flex; gap: 3px; height: 4px; align-items: flex-end; }
.ov-seg {
  height: 3px; min-width: 0; border-radius: 3px; background: rgba(255, 255, 255, .34);
  transform-origin: 50% 100%; transition: background-color .25s, opacity .25s, transform .35s var(--ease);
}
.ov-film.has-hot .ov-peek { opacity: 1; transform: none; }
.ov-film.has-hot .ov-dur { opacity: .7; }
.ov-film.has-hot .ov-seg { opacity: .4; }
.ov-film .ov-seg.is-hot { opacity: 1; background: var(--accent-night); transform: scaleY(1.34); }

.ov-film-body { padding: 18px 12px 8px; }
.ov-film-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.ov-film-title { font-size: 18px; font-weight: 650; letter-spacing: -0.015em; color: #fff; white-space: nowrap; }
.ov-film-hint { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--night-ink-2); white-space: nowrap; }
.ov-film-hint svg { flex: none; width: 15px; height: 15px; }
.ov-chapters { margin: 14px -6px 0; display: grid; gap: 1px; }
.ov-ch {
  width: 100%; display: grid; grid-template-columns: 44px minmax(0, 1fr) 72px; align-items: center; gap: 10px;
  height: 40px; padding: 0 12px; border: 0; border-radius: var(--r-sm); background: transparent; cursor: pointer;
  color: var(--night-ink-2); text-align: left; transition: background-color .2s, color .2s;
}
.ov-ch:focus-visible { outline-offset: -2px; border-radius: var(--r-sm); }
.ov-ch-t { font-size: 13px; color: rgba(255, 255, 255, .46); font-variant-numeric: tabular-nums; transition: color .2s; }
.ov-ch-l { font-size: 14.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-ch-span { position: relative; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.ov-ch-span i { position: absolute; top: 0; bottom: 0; left: var(--a); width: var(--w); min-width: 3px; border-radius: 3px; background: rgba(255, 255, 255, .38); transition: background-color .2s; }
.ov-ch.is-hot { background: rgba(255, 255, 255, .065); color: #fff; }
.ov-ch.is-hot .ov-ch-t { color: var(--accent-night); }
.ov-ch.is-hot .ov-ch-span i { background: var(--accent-night); }

@media (hover: hover) and (pointer: fine) {
  .ov-poster:hover img { transform: scale(1.035); filter: brightness(1.1); }
  .ov-poster:hover .ov-play { transform: scale(1.08); background: #fff; color: var(--ink); border-color: #fff; }
}
.ov-poster:focus-visible .ov-play { background: #fff; color: var(--ink); border-color: #fff; }

@media (max-width: 699.98px) {
  .ov-chapters.is-keyed > li:not(.is-key) { display: none; }
}
/* below 1000px everything stacks: title, text, film card */
@media (max-width: 999.98px) {
  .ov-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .ov-side { width: 100%; max-width: 640px; }
  .ov-film { position: relative; top: auto; }
}
@media (max-width: 640px) {
  /* the folded hero already sits right above: no section gap on top of it (desktop keeps the full gap) */
  #overview { padding-top: 28px; }
  .ov-title { font-size: 25px; line-height: 1.14; }
  .ov-head { margin-bottom: 26px; }
  .ov-authors { margin-top: 12px; font-size: 15.5px; }
  .ov-affil { font-size: 13px; gap: 2px 12px; }
  .ov-links .btn { height: 40px; padding: 0 15px; font-size: 14.5px; }
  .ov-links { gap: 8px; }
  .ov-tl { margin-top: 22px; }
  .ov-stats { gap: 8px; }
  .ov-tldr { margin-top: 32px; }
  .ov-tldr p { font-size: 19px; }
  .ov-abs { margin-top: 28px; padding-top: 26px; }
  .ov-stat { padding: 12px 13px 13px; font-size: 13px; line-height: 1.3; }
  .ov-stat > b { font-size: 23px; }
  .ov-stat-rank > b { font-size: 30px; }
  .ov-film { border-radius: var(--r-lg); padding: 8px; }
  .ov-poster { border-radius: var(--r-sm); }
  .ov-play { width: 62px; height: 62px; margin: -31px 0 0 -31px; }
  .ov-play svg { width: 24px; height: 24px; }
  .ov-film-body { padding: 16px 10px 6px; }
  .ov-ch { grid-template-columns: 42px minmax(0, 1fr) 56px; height: 44px; }
}

/* ═════════ film modal ═════════ */
.film {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px;
  /* an opaque scrim, not a blur: a backdrop blur would be recomputed under every film frame (the fade comes from opacity) */
  background: rgb(5, 6, 11);
  opacity: 0; transition: opacity .35s ease;
  overscroll-behavior: contain;
}
.film[hidden] { display: none; }
.film.is-open { opacity: 1; }
.film-panel {
  width: min(1160px, 100%, calc((100vh - 220px) * 16 / 9)); min-width: min(100%, 520px);
  opacity: 0; transform: translateY(18px) scale(.97);
  transition: transform .6s var(--ease), opacity .4s;
}
@supports (height: 100svh) {
  .film-panel { width: min(1160px, 100%, calc((100svh - 220px) * 16 / 9)); }
}
.film.is-open .film-panel { opacity: 1; transform: none; }
.film-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; color: #fff; }
.film-title { font-size: 17px; font-weight: 650; letter-spacing: -0.012em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.film-dur { margin-left: 8px; font-size: 14px; font-weight: 500; color: var(--night-ink-2); }
.film-close {
  flex: none; width: 42px; height: 42px; padding: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; color: #fff;
  border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .08);
  transition: background-color .2s, transform .4s var(--ease);
}
.film-close svg { width: 18px; height: 18px; }
.film-close:focus-visible { border-radius: 50%; }
.film-player {
  position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-xl); overflow: hidden; background: #000;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .07), 0 30px 90px rgba(0, 0, 0, .55);
}
.film-video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.film-video:focus-visible { outline-offset: -3px; }
.film-seek {
  position: absolute; left: 50%; top: 18px; display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px;
  border-radius: var(--r-sm); background: rgba(10, 10, 20, .82); color: #fff; font-size: 13px; font-weight: 550; white-space: nowrap;
  pointer-events: none;
  opacity: 0; transform: translate(-50%, -6px); transition: opacity .25s, transform .35s var(--ease);
}
.film-seek b { font-weight: 650; color: var(--accent-night); }
.film-seek i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .25); border-top-color: #fff; }
.film.is-seeking .film-seek { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: no-preference) { .film.is-seeking .film-seek i { animation: film-spin .8s linear infinite; } }
.film-fail {
  position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; justify-items: center; gap: 16px;
  padding: 24px; text-align: center; background: rgba(5, 6, 11, .8);
}
.film-fail[hidden] { display: none; }
.film-fail p { max-width: 30em; font-size: 15.5px; line-height: 1.5; color: var(--night-ink); }
.film.has-failed .film-seek { opacity: 0; }
@keyframes film-spin { to { transform: rotate(360deg); } }

.film-chapters { position: relative; margin-top: 12px; display: grid; grid-template-columns: var(--cols, repeat(7, 1fr)); gap: 4px; }
.film-ch {
  position: relative; min-width: 0; display: grid; gap: 1px; padding: 13px 10px 7px; border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--night-ink-2); text-align: left; cursor: pointer;
  transition: background-color .2s, color .2s;
}
.film-ch:focus-visible { outline-offset: -2px; border-radius: var(--r-sm); }
.film-ch-bar { position: absolute; left: 2px; right: 2px; top: 3px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.film-ch-bar i { position: absolute; inset: 0; border-radius: 3px; background: var(--accent-night); transform: scaleX(0); transform-origin: 0 50%; }
.film-ch.is-past .film-ch-bar i { transform: scaleX(1); background: rgba(255, 255, 255, .5); }
.film-ch-t { font-size: 12px; color: rgba(255, 255, 255, .46); font-variant-numeric: tabular-nums; transition: color .2s; }
.film-ch-l { font-size: 13.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.film-ch.is-active { color: #fff; }
.film-ch.is-active .film-ch-t { color: var(--accent-night); }

@media (hover: hover) and (pointer: fine) {
  .film-close:hover { background: rgba(255, 255, 255, .18); transform: rotate(90deg); }
  .film-ch:hover { background: rgba(255, 255, 255, .06); color: #fff; }
}
@media (max-width: 719.98px) {
  .film { padding: 12px; }
  .film-panel { min-width: 0; }
  .film-player { border-radius: var(--r-lg); }
  .film-chapters { display: flex; overflow-x: auto; scrollbar-width: none; margin-left: -12px; margin-right: -12px; padding: 0 12px; scroll-padding: 0 12px; }
  .film-chapters::-webkit-scrollbar { display: none; }
  .film-ch { flex: 0 0 124px; }
}

/* scroll lock while the film is open (scrollbar width compensated so nothing shifts) */
html.film-lock { overflow: hidden; }
html.film-lock body { padding-right: var(--sbw, 0px); }
html.film-lock .nav { right: var(--sbw, 0px); visibility: hidden; transition: visibility 0s .35s; } /* hidden once the scrim covers it, so its glass stops re-rendering */

@media (max-width: 380px) { .ov-film-hint { white-space: normal; } }


/* title breaks after "Representations" where the first line fits; narrower screens wrap naturally */
.ov-title { text-wrap: wrap; }
@media (max-width: 899.98px) { .ov-br { display: none; } .ov-title { text-wrap: balance; } }
.ov-notes { margin-top: 2px; }

/* ═════════ liquid glass ═════════
   Chromium (.lg): refraction, dispersion, tint, Fresnel rim and glare all happen inside the SVG backdrop filter, so the
   pseudo-element paints no colour of its own. Other browsers (.lg-spec only): frosted bar plus a canvas specular rim.
   Over the hero film the bar dissolves completely: just the words over the picture. */
.nav-spec {
  position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background-size: 100% 100%; background-repeat: no-repeat; mix-blend-mode: plus-lighter;
  opacity: 0; transition: opacity .45s;
}
.nav.lg-spec[data-state="solid"] .nav-pill { border-color: transparent; }
.nav.lg-spec[data-state="solid"] .nav-spec { opacity: .9; }
.nav.lg-spec[data-state="solid"]:not([data-tone="dark"]) .nav-spec { opacity: 1; mix-blend-mode: normal; }
.nav.lg-spec[data-state="solid"]:not([data-tone="dark"]) .nav-pill {
  box-shadow: 0 1px 1px rgba(20, 16, 40, .05), 0 8px 26px rgba(20, 16, 40, .11), 0 0 0 .5px rgba(20, 16, 40, .07);
}
.nav.lg .nav-spec { display: none; }
/* the refraction / specular maps are built for the pill's border box, so the layers that use them cover it exactly
   (inside the 1px border they sat 1px right and down, and the left / top rims bent harder than the right / bottom) */
.nav.lg-spec .nav-pill::before, .nav-spec { inset: -1px; }
.nav.lg[data-state="solid"] .nav-pill::before {
  background: rgba(255, 255, 255, var(--lg-mix, 0)); transition: background-color .35s;
  -webkit-backdrop-filter: url(#nav-lg-l); backdrop-filter: url(#nav-lg-l);
}
.nav.lg[data-state="solid"][data-tone="dark"] .nav-pill::before { background: rgba(18, 20, 29, var(--lg-mix, 0)); -webkit-backdrop-filter: url(#nav-lg-d); backdrop-filter: url(#nav-lg-d); }

/* immersive over the hero: no plate, no rim, no blur, only type */
.nav[data-state="hero"] .nav-pill { border-color: transparent; box-shadow: none; }
.nav[data-state="hero"] .nav-pill::before { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.nav[data-state="hero"] .nav-spec { opacity: 0; }

/* phones: no liquid glass. Mobile Safari cannot refract, and the full-width bar has no corners for a rim, so it is a
   plain dense frost with a hairline, the way iOS bars look. (#nav outranks the desktop glass rules above.) */
@media (max-width: 899.98px) {
  #nav .nav-spec { display: none; }
  #nav .nav-pill::before { inset: 0; }
  #nav[data-state="solid"] .nav-pill { border-color: rgba(20, 16, 40, .08); box-shadow: none; }
  #nav[data-state="solid"] .nav-pill::before {
    background: rgba(255, 255, 255, .84);
    -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  }
  #nav[data-state="solid"][data-tone="dark"] .nav-pill { border-color: rgba(255, 255, 255, .08); }
  #nav[data-state="solid"][data-tone="dark"] .nav-pill::before { background: rgba(12, 14, 21, .82); }
  #nav[data-state="hero"] .nav-pill { border-color: transparent; }
}