:root {
  --white: #ffffff;
  --black: #000000;
  --grey: #f5f5f7;
  --ink: #1d1d1f;
  --ink-muted: #6e6e73;
  --ink-on-dark: #f5f5f7;
  --ink-muted-on-dark: #86868b;
  --accent: #f28e2b;
  /* Night-sky palette sampled from the film poster and logo */
  --night: #28214a;
  --dusk: #332f58;
  --navy: #212a70;
  --violet: #4f3f55;
  --cream: #f7efd9;
  --lavender: #cfc9dc;
  --btf-red: #f04e27;
  --btf-yellow: #ffc91b;
  /* The reader's Apple system font (San Francisco) where it exists; Helvetica elsewhere. No font files are shipped. */
  --sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --col: 980px;
  --col-text: 692px;
  --gutter: 22px;
  --bar-h: 52px;
  --pad-section: 80px;
}

/* Section themes set the colours their children read; no section paints a background, so the page's
   one background (body, below) runs through every section without a seam */
.theme-night, .theme-dusk, .theme-sky { color: var(--cream); --muted: var(--lavender); --ph: rgba(247, 239, 217, 0.06); --ph-line: rgba(247, 239, 217, 0.14); --rule: rgba(247, 239, 217, 0.18); }
.theme-sky { --ph: rgba(10, 8, 30, 0.55); }

html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--night); color: var(--cream); color-scheme: dark; font-family: var(--sans); font-size: 17px; line-height: 1.47; letter-spacing: -0.022em; -webkit-font-smoothing: antialiased; }
/* The page's one background: the night base drifting through dusk, with soft glows of the poster's
   palette (orange, pink, navy, violet) spread down the page, alternating sides, like drops of paint;
   sized in px so they stay round on a page this tall, placed in % of its height. html keeps the
   night colour so the body paints its own box rather than the canvas. */
html { background: var(--night); }
body {
  background-color: var(--night);
  background-repeat: no-repeat;
  background-image:
    radial-gradient(900px 600px at 85% 4%, rgba(210, 163, 185, 0.14), rgba(210, 163, 185, 0) 70%),
    radial-gradient(1200px 640px at 50% 7.5%, rgba(238, 135, 33, 0.42), rgba(210, 163, 185, 0.16) 45%, rgba(210, 163, 185, 0) 72%),
    radial-gradient(900px 760px at 8% 13%, rgba(210, 163, 185, 0.20), rgba(210, 163, 185, 0) 70%),
    radial-gradient(1000px 820px at 92% 19%, rgba(238, 135, 33, 0.24), rgba(238, 135, 33, 0) 70%),
    radial-gradient(900px 700px at 60% 24%, rgba(210, 163, 185, 0.16), rgba(210, 163, 185, 0) 70%),
    radial-gradient(1100px 900px at 18% 29%, rgba(33, 42, 112, 0.85), rgba(33, 42, 112, 0) 70%),
    radial-gradient(900px 700px at 70% 34%, rgba(210, 163, 185, 0.15), rgba(210, 163, 185, 0) 70%),
    radial-gradient(1000px 820px at 85% 39%, rgba(79, 63, 85, 0.80), rgba(79, 63, 85, 0) 70%),
    radial-gradient(900px 760px at 30% 44%, rgba(79, 63, 85, 0.60), rgba(79, 63, 85, 0) 70%),
    radial-gradient(900px 700px at 12% 50%, rgba(238, 135, 33, 0.18), rgba(238, 135, 33, 0) 70%),
    radial-gradient(900px 700px at 65% 55%, rgba(238, 135, 33, 0.16), rgba(238, 135, 33, 0) 70%),
    radial-gradient(1000px 820px at 88% 61%, rgba(210, 163, 185, 0.18), rgba(210, 163, 185, 0) 70%),
    radial-gradient(900px 700px at 45% 67%, rgba(238, 135, 33, 0.18), rgba(238, 135, 33, 0) 70%),
    radial-gradient(1100px 900px at 25% 73%, rgba(33, 42, 112, 0.80), rgba(33, 42, 112, 0) 70%),
    radial-gradient(900px 760px at 82% 79%, rgba(79, 63, 85, 0.60), rgba(79, 63, 85, 0) 70%),
    radial-gradient(1100px 760px at 75% 86%, rgba(238, 135, 33, 0.26), rgba(238, 135, 33, 0) 70%),
    radial-gradient(900px 700px at 15% 92%, rgba(238, 135, 33, 0.20), rgba(238, 135, 33, 0) 70%),
    radial-gradient(1000px 640px at 40% 98%, rgba(210, 163, 185, 0.20), rgba(210, 163, 185, 0) 72%),
    linear-gradient(180deg, var(--night) 0%, var(--dusk) 22%, var(--night) 45%, var(--dusk) 68%, var(--night) 100%);
}
[id] { scroll-margin-top: var(--bar-h); }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 4px; }
/* Continuous corners: site.js clips every rounded element to Apple's continuous
   curve and marks it data-corners; its border is then a stroked copy of that curve
   coloured by --edge, and keyboard focus thickens that stroke instead of an
   outline the clip would cut. Without JS the border-radius above stands. */
.corner-edge { position: absolute; pointer-events: none; overflow: visible; }
.corner-edge path { fill: none; stroke: var(--edge, transparent); }
[data-corners]:focus-visible { outline: none; }
html[data-focus-ring] :focus-visible:not([data-corners]) { outline: none; }
.focus-ring { position: absolute; z-index: 60; pointer-events: none; overflow: visible; }
.focus-ring path { fill: none; stroke: var(--btf-yellow); stroke-width: 2px; }
[data-corners]:focus-visible > .corner-edge path { stroke: var(--btf-yellow); stroke-width: 4px; }
.wrap { width: min(var(--col), 100% - 2 * var(--gutter)); margin-inline: auto; }
.wrap--text { width: min(var(--col-text), 100% - 2 * var(--gutter)); margin-inline: auto; }
.skip { position: absolute; left: 12px; top: -48px; z-index: 30; padding: 8px 14px; border-radius: 999px; background: var(--cream); color: var(--night); }
.skip:focus { top: 8px; }

/* Sticky bar */
.bar { position: sticky; top: 0; z-index: 20; height: var(--bar-h); background: rgba(33, 42, 112, 0.95); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); color: var(--ink-on-dark); border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.bar__inner { width: min(1280px, 100% - 2 * var(--gutter)); height: 100%; margin-inline: auto; display: flex; align-items: center; gap: 24px; }
.bar__brand { margin-right: auto; font-size: 21px; font-weight: 600; letter-spacing: 0.011em; color: inherit; text-decoration: none; white-space: nowrap; }
.bar__links { display: flex; gap: 20px; }
.bar__links a { font-size: 12px; letter-spacing: -0.01em; color: rgba(245, 245, 247, 0.8); text-decoration: none; }
.bar__links a:hover { color: var(--white); }
/* the Sections button and its list, below 1068 px, where the ten links no longer fit the bar */
.bar__menu { display: none; font: inherit; font-size: 12px; padding: 4px 12px; border-radius: 999px; --edge: rgba(255, 255, 255, 0.35); border: 1px solid var(--edge); background: transparent; color: var(--cream); cursor: pointer; }

/* Shared type */
section { padding-block: var(--pad-section); }
/* a linked section lands below the sticky top bar, not under it */
section[id] { scroll-margin-top: var(--bar-h); }
.eyebrow { width: fit-content; margin: 0 0 8px; font-size: 24px; line-height: 1.1667; font-weight: 600; letter-spacing: 0.009em; color: var(--btf-yellow); }
.headline { margin: 0 0 64px; font-size: 56px; line-height: 1.0714; font-weight: 600; letter-spacing: -0.005em; }
.headline--small { font-size: 48px; line-height: 1.0833; letter-spacing: -0.003em; margin-bottom: 40px; }
.intro { margin: 0; font-size: 21px; line-height: 1.381; letter-spacing: 0.011em; }
.step__text { margin: 0; }
#abstract .intro { text-align: justify; hyphens: auto; }
.intro strong, .step__text strong { font-weight: 600; color: #ffffff; }
.caption { margin: 16px 0 0; font-size: 21px; line-height: 1.381; letter-spacing: 0.011em; color: var(--muted); }
.text-slot { color: var(--muted); font-style: italic; }

/* Media placeholders */
.ph { position: relative; display: grid; place-items: center; background: var(--ph); --edge: var(--ph-line); border: 1px solid var(--edge); color: var(--muted); border-radius: 18px; font-size: 14px; line-height: 1.43; letter-spacing: -0.016em; text-align: center; padding: 16px; box-sizing: border-box; }
.ph strong { display: block; font-weight: 600; color: inherit; }
.ph--16x9 { aspect-ratio: 16 / 9; }
.ph--4x3 { aspect-ratio: 4 / 3; }
.ph--4x5 { aspect-ratio: 4 / 5; border-radius: 28px; }
.ph--1x1 { aspect-ratio: 1 / 1; border-radius: 28px; }
.ph--2x1 { aspect-ratio: 2 / 1; }
.ph--table { aspect-ratio: 3 / 1; }
.ph__ctrl { position: absolute; right: 16px; bottom: 16px; width: 36px; height: 36px; border-radius: 999px; --edge: var(--muted); border: 1px solid var(--edge); opacity: 0.6; }
.stack > * + * { margin-top: 20px; }
figure { margin: 0; }

/* Hero: the glowing sky theme with the title treatment */
.hero { padding-top: 120px; padding-bottom: 96px; text-align: center; overflow-x: clip; }
.hero__title { margin: 0; font-weight: 600; }
.hero__name { position: relative; display: block; font-size: 80px; line-height: 1.05; letter-spacing: -0.015em; font-weight: 700; }
.hero__name-text { position: relative; z-index: 1; color: var(--btf-yellow); }
.t-mid { white-space: nowrap; }
/* Time echoes: fading copies of "Back" drift left and of "Future" drift right, behind the title */
.title-echo { position: absolute; inset: 0; z-index: 0; opacity: var(--echo-alpha); pointer-events: none; user-select: none; }
.title-echo--far { --echo-step: 3; --echo-alpha: 0.1; }
.title-echo--mid { --echo-step: 2; --echo-alpha: 0.2; }
.title-echo--near { --echo-step: 1; --echo-alpha: 0.35; }
.title-echo .t-mid { color: transparent; }
.title-echo .t-back, .title-echo .t-future { display: inline-block; }
/* Each copy is clipped to the part that sticks out past its word, so the trail never shows through the title */
.title-echo .t-back { color: #f04e27; transform: translateX(calc(var(--echo-step) * -0.45em)); clip-path: inset(0 calc(100% - var(--echo-step) * 0.45em) 0 0); }
.title-echo .t-future { color: #ffc91b; transform: translateX(calc(var(--echo-step) * 0.45em)); clip-path: inset(0 0 0 calc(100% - var(--echo-step) * 0.45em)); }
/* Logo gradient on the title, the section labels and the big numbers */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero__name-text, .eyebrow, .stat__value {
    background-image: linear-gradient(to right, var(--btf-red) 0%, var(--btf-red) 17%, var(--btf-yellow) 66%, var(--btf-yellow) 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
  }
}
.hero__subtitle { display: block; max-width: 30em; margin: 20px auto 0; text-wrap: balance; font-size: 28px; line-height: 1.1429; letter-spacing: 0.007em; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hero__method { margin: 28px 0 0; font-size: 21px; line-height: 1.381; letter-spacing: 0.011em; color: var(--muted); }
.hero__authors { margin: 6px 0 0; color: var(--muted); }
.hero__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }
.hero__note { margin: 14px 0 0; font-size: 14px; line-height: 1.43; letter-spacing: -0.016em; color: var(--muted); }
.pill { font-size: 14px; padding: 8px 18px; border-radius: 999px; --edge: rgba(247, 239, 217, 0.3); border: 1px solid var(--edge); color: var(--muted); cursor: not-allowed; }
.pill--link { color: var(--cream); cursor: pointer; text-decoration: none; }
.pill--link:hover { background: rgba(247, 239, 217, 0.1); }
.supp-video { display: block; width: 100%; height: auto; border-radius: 18px; background: #ffffff; }
.hero__media { margin-top: 64px; }
/* Hero video: wider than the page column so its three views read, chapter cards under it */
.hero-video { --hero-video-w: min(1440px, 100vw - 2 * var(--gutter)); width: var(--hero-video-w); margin-inline: calc((100% - var(--hero-video-w)) / 2); text-align: left; }
.hero-video__player { display: block; width: 100%; height: auto; border-radius: 18px; background: var(--night); }
.hero-video__bar { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-top: 14px; }
.hero-video__caption { margin: 0; max-width: var(--col-text); font-size: 14px; line-height: 1.43; letter-spacing: -0.016em; color: var(--muted); }
.hero-video__caption strong { color: var(--cream); }
.hero-video__toggle, .clip__toggle { flex: none; font: inherit; font-size: 14px; padding: 6px 14px; border-radius: 999px; --edge: var(--rule); border: 1px solid var(--edge); background: transparent; color: var(--cream); cursor: pointer; }
.chapters { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 20px; }
.chapter { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; font: inherit; text-align: left; color: var(--cream); background: rgba(247, 239, 217, 0.06); --edge: var(--ph-line); border: 1px solid var(--edge); border-radius: 14px; cursor: pointer; transition: border-color 0.2s, background-color 0.2s; }
.chapter:hover { background: rgba(247, 239, 217, 0.1); }
.chapter:focus-visible, .hero-video__toggle:focus-visible, .clip__toggle:focus-visible { outline: 2px solid var(--btf-yellow); outline-offset: 2px; }
.chapter[aria-current="true"] { --edge: var(--accent); background: rgba(242, 142, 43, 0.12); }
.chapter__time { font-size: 14px; font-variant-numeric: tabular-nums; color: var(--accent); }
.chapter__name { font-size: 17px; font-weight: 600; line-height: 1.235; }
.chapter__desc { font-size: 14px; line-height: 1.43; letter-spacing: -0.016em; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .chapter { transition: none; } }

/* Carousel: one slide at a time, arrows and the slide's name above it */
/* a carousel is a nested section; the page-section padding must not apply to it */
.carousel { padding-block: 0; }
.carousel__bar { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.carousel__arrow { width: 40px; height: 40px; border-radius: 999px; --edge: var(--rule); border: 1px solid var(--edge); background: rgba(247, 239, 217, 0.08); color: var(--cream); font: inherit; font-size: 22px; line-height: 1; cursor: pointer; }
.carousel__arrow:hover { background: rgba(247, 239, 217, 0.16); }
.carousel__status { margin: 0; font-size: 17px; font-weight: 600; color: var(--cream); font-variant-numeric: tabular-nums; }
[data-carousel-slide][hidden] { display: none; }
.chart__message--error { position: static; }

/* Interactive charts (assets/js/charts.js): controls in one row above the plot */
.chart { margin: 0; }
.chart__controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 28px; margin-bottom: 24px; }
/* segmented controls: each group's name above its own track, the chosen option filled */
.segmented { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
/* the first group (the world) takes its own row; the others share the next */
.chart__controls > .segmented:first-child { flex-basis: 100%; }
.segmented__label { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.segmented__track { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 12px; --edge: var(--rule); border: 1px solid var(--edge); background: rgba(247, 239, 217, 0.06); }
.segmented__option { font: inherit; font-size: 14px; padding: 6px 14px; border-radius: 9px; border: 0; background: transparent; color: var(--cream); cursor: pointer; white-space: nowrap; transition: background-color 0.2s, color 0.2s; }
.segmented__option:hover { background: rgba(247, 239, 217, 0.1); }
.segmented__option[aria-pressed="true"] { background: var(--cream); color: var(--night); font-weight: 600; }
.chart__frame { position: relative; height: clamp(300px, 42vw, 440px); }
.chart__message { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: var(--muted); text-align: center; }
/* display: grid above would override the hidden attribute and leave an empty layer over the canvas, blocking hover */
.chart__message[hidden] { display: none; }
/* the tooltip (HTML, so its corners are continuous): beside the pointer, never under it */
.chart-tip { position: absolute; z-index: 2; min-width: 220px; max-width: 340px; padding: 12px 14px; border-radius: 14px; --edge: var(--rule); border: 1px solid var(--edge); background: rgba(24, 19, 48, 0.94); color: var(--cream); font-size: 13px; line-height: 1.35; pointer-events: none; }
.chart-tip[hidden] { display: none; }
.chart-tip__title { margin: 0 0 8px; font-weight: 600; color: var(--muted); }
.chart-tip__row { display: grid; grid-template-columns: 10px 1fr auto; column-gap: 8px; align-items: baseline; margin-top: 6px; }
.chart-tip__swatch { width: 10px; height: 10px; border-radius: 3px; background: var(--swatch); }
.chart-tip__name { font-weight: 500; }
.chart-tip__value { font-weight: 700; font-variant-numeric: tabular-nums; }
.chart-tip__detail { grid-column: 2 / 4; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
/* the legend: one toggle per method */
.chart__legend { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.legend-item { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: 14px; padding: 5px 12px; border-radius: 999px; --edge: transparent; border: 1px solid var(--edge); background: transparent; color: var(--cream); cursor: pointer; }
.legend-item:hover { background: rgba(247, 239, 217, 0.08); }
.legend-item[aria-pressed="false"] { color: var(--muted); text-decoration: line-through; }
.legend-item__swatch { width: 12px; height: 12px; border-radius: 3px; background: var(--swatch); }
.legend-item[aria-pressed="false"] .legend-item__swatch { opacity: 0.35; }
.chart__table { margin-top: 16px; font-size: 14px; color: var(--muted); }
.chart__table summary { cursor: pointer; }
.chart__table table { margin-top: 12px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.chart__table caption { text-align: left; margin-bottom: 8px; }
.chart__table th, .chart__table td { padding: 6px 12px; text-align: right; border-bottom: 1px solid var(--rule); }
.chart__table th[scope="row"], .chart__table th:first-child { text-align: left; }
@media (prefers-reduced-motion: reduce) { .segmented__option { transition: none; } }

/* Highlights strip */
.strip { display: grid; grid-auto-flow: column; grid-auto-columns: min(372px, 78%); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding-inline: max(var(--gutter), (100% - var(--col)) / 2); scroll-padding-inline: max(var(--gutter), (100% - var(--col)) / 2); scrollbar-width: none; }
.strip::-webkit-scrollbar { display: none; }
.tile { scroll-snap-align: start; }
.tile figcaption { margin-top: 12px; color: var(--muted); }
.strip-nav { display: flex; justify-content: flex-end; gap: 12px; margin-top: 28px; }
.strip-nav button { width: 36px; height: 36px; border-radius: 999px; border: 0; background: rgba(247, 239, 217, 0.12); color: var(--cream); font: inherit; font-size: 17px; line-height: 1; cursor: pointer; }
.strip-nav button:disabled { opacity: 0.35; cursor: default; }
/* Highlight clips: one wide tile per scene, the next one peeking in */
.highlights__intro { max-width: var(--col-text); margin-bottom: 48px; }
.strip--clips { grid-auto-columns: min(1100px, 100vw - 2 * var(--gutter) - 48px); }
.clip__group { margin: 0 0 14px; font-size: 28px; line-height: 1.143; font-weight: 600; letter-spacing: 0.007em; color: var(--accent); }
.clip__episode { color: var(--cream); }
.clip__video { display: block; width: 100%; height: auto; border-radius: 18px; background: var(--night); }
.clip__bar { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
/* the four results, each under its own column of the tile video */
.clip__results { display: grid; grid-template-columns: repeat(4, 1fr); margin: 10px 0 0; padding: 0; list-style: none; }
.clip__result { display: flex; flex-direction: column; gap: 2px; padding-inline: 10px; }
.clip__method { font-size: 14px; font-weight: 600; line-height: 1.29; color: var(--cream); }
.clip__setting { margin: 0; font-size: 14px; line-height: 1.43; letter-spacing: -0.016em; color: var(--muted); }
.clip__verdict { font-size: 14px; color: var(--muted); }
.clip__verdict--success { color: var(--btf-yellow); font-weight: 600; }
.clip__message { margin: 0; color: var(--muted); }

/* Paper figures on their light canvas, placed as they are: the image with the page's rounded corners */
.fig-card { overflow: hidden; border-radius: 18px; background: #ffffff; }
.fig-card img { display: block; width: 100%; height: auto; }
.fig-card--square { border-radius: 28px; }
.fig-card--panels { display: none; }
.fig-card--panels img + img { margin-top: 12px; }
.method__overview { margin: 0 0 56px; }
/* the pinned figure beside the steps: the pipeline cropped to the part the active step describes (each step names its focus in data-focus) */
.pipeline-focus { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: var(--focus, 0%) 50%; transition: object-position 0.6s ease; }
@media (prefers-reduced-motion: reduce) { .pipeline-focus { transition: none; } }
.trio__use { display: block; margin-top: 4px; font-weight: 400; font-size: 14px; line-height: 1.43; color: var(--muted); }
.method__interactive { margin: 0; }
.method__interactive .chart-tip { min-width: 0; max-width: 300px; padding: 8px 10px; font-size: 12px; }
.method__interactive .chart-tip__detail { grid-column: auto; font-variant-numeric: tabular-nums; }

/* Figure grids */
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.pair-figure { margin: 0; }
.pair__video { display: block; width: 100%; height: auto; border-radius: 18px; background: var(--night); }
.pair__bar { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-top: 12px; }
.pair__caption { margin: 0; font-size: 14px; line-height: 1.43; letter-spacing: -0.016em; color: var(--muted); }
.pair__caption strong { color: var(--cream); }
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.trio figcaption { margin-top: 12px; font-weight: 600; }

/* Method: pinned pipeline beside the steps */
.method { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.method__fig { position: sticky; top: calc(var(--bar-h) + 40px); }
.steps { list-style: none; margin: 0; padding: 0; }
.step { min-height: 420px; padding: 8px 0 48px 20px; border-left: 2px solid var(--rule); transition: border-color 0.3s; }
.step.is-active { border-image: linear-gradient(180deg, var(--btf-yellow), var(--btf-red)) 1; }
.step__letter { display: block; font-weight: 600; color: var(--muted); }
.step.is-active .step__letter { color: var(--cream); }
.step__title { margin: 4px 0 12px; font-size: 28px; line-height: 1.1429; font-weight: 600; letter-spacing: 0.007em; }
.step .ph { margin-top: 20px; }
@media (prefers-reduced-motion: reduce) { .step { transition: none; } }

/* Retrieval numbers */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 64px; text-align: center; }
.stat__value { display: block; width: fit-content; margin-inline: auto; color: var(--btf-yellow); font-size: 56px; line-height: 1.0714; font-weight: 600; letter-spacing: -0.005em; }
.stat__label { display: block; margin-top: 8px; font-size: 14px; color: var(--muted); }

/* Table I (assets/js/table.js): two panels, each a table that scrolls sideways on narrow screens */
.results-figure { margin: 40px 0 0; }
.results { display: grid; gap: 40px; }
.results__panel { min-width: 0; }
.results__title { margin: 0 0 12px; font-size: 17px; font-weight: 600; line-height: 1.235; }
.results__scroll { overflow-x: auto; border-radius: 14px; --edge: var(--ph-line); border: 1px solid var(--edge); background: rgba(247, 239, 217, 0.04); scrollbar-width: thin; }
.results__table { width: 100%; min-width: 860px; border-collapse: separate; border-spacing: 0; font-size: 14px; line-height: 1.43; letter-spacing: -0.016em; font-variant-numeric: tabular-nums; }
.results__table th, .results__table td { padding: 7px 10px; text-align: right; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.results__table thead th { font-weight: 600; color: var(--muted); text-align: center; vertical-align: bottom; }
.results__table thead tr:first-child th { color: var(--cream); }
.results__table thead th[colspan] { border-left: 1px solid var(--rule); }
.results__table tbody tr:last-child td, .results__table tbody tr:last-child th { border-bottom: 0; }
.results__table .results__label { text-align: left; font-weight: 400; color: var(--cream); }
.results__table td:nth-child(3), .results__table th:nth-child(3) { padding-right: 18px; }
.results__table td:nth-child(4) { border-left: 1px solid var(--rule); }
.results__table td:nth-child(10) { border-left: 1px solid var(--rule); }
/* the paper's shaded rows (the proposed method) and bold cells (the best success rate) */
.results__row--ours td, .results__row--ours th { background: rgba(255, 201, 27, 0.07); }
.results__best { font-weight: 700; color: var(--white); }
.results__caption strong { color: var(--cream); }
.results__note { display: block; margin-top: 8px; }
.results-figure .chart__message--error { color: var(--muted); }

/* BibTeX */
.bib { position: relative; }
.bib pre { margin: 0; padding: 24px; padding-right: 96px; border-radius: 18px; background: rgba(0, 0, 0, 0.25); --edge: var(--ph-line); border: 1px solid var(--edge); color: var(--cream); white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--mono); font-size: 14px; line-height: 1.5; letter-spacing: 0; }
.bib button { position: absolute; top: 16px; right: 16px; font: inherit; font-size: 14px; padding: 6px 14px; border-radius: 999px; --edge: var(--rule); border: 1px solid var(--edge); background: transparent; color: var(--cream); cursor: pointer; }

.foot { padding-block: 40px; text-align: center; font-size: 12px; color: var(--muted); }

@media (max-width: 1068px) {
  .bar__menu { display: inline-block; }
  .bar__links { display: none; position: absolute; top: calc(var(--bar-h) - 4px); right: var(--gutter); flex-direction: column; gap: 0; min-width: 200px; padding: 8px; border-radius: 14px; --edge: rgba(255, 255, 255, 0.18); border: 1px solid var(--edge); background: var(--navy); }
  .bar__links[data-open] { display: flex; }
  .bar__links a { padding: 10px 12px; font-size: 14px; }
  :root { --col: 692px; --pad-section: 64px; }
  .hero__name { font-size: 64px; line-height: 1.0625; letter-spacing: -0.009em; }
  .hero__subtitle { font-size: 24px; line-height: 1.1667; letter-spacing: 0.009em; }
  .eyebrow { font-size: 21px; line-height: 1.1905; letter-spacing: 0.011em; }
  .headline { font-size: 48px; line-height: 1.0833; letter-spacing: -0.003em; }
  .headline--small { font-size: 40px; line-height: 1.1; letter-spacing: 0; }
  .method { grid-template-columns: 1fr; gap: 40px; }
  .method__fig { position: static; }
  .step { min-height: 0; }
}

@media (max-width: 734px) {
  :root { --gutter: 16px; --pad-section: 48px; }
  .bar__brand { font-size: 19px; }
  .hero { padding-top: 80px; }
  .hero__name { font-size: 48px; line-height: 1.0833; letter-spacing: -0.003em; }
  .hero__subtitle { font-size: 21px; line-height: 1.1905; letter-spacing: 0.011em; }
  .hero__method { font-size: 19px; }
  .eyebrow { font-size: 19px; line-height: 1.2105; letter-spacing: 0.012em; }
  .headline { font-size: 32px; line-height: 1.125; letter-spacing: 0.004em; margin-bottom: 40px; }
  .headline--small { font-size: 32px; line-height: 1.125; letter-spacing: 0.004em; }
  .intro { font-size: 19px; line-height: 1.421; letter-spacing: 0.012em; }
  .caption { font-size: 19px; line-height: 1.421; letter-spacing: 0.012em; }
  .step__title { font-size: 21px; line-height: 1.1905; letter-spacing: 0.011em; }
  .pair, .trio, .stats { grid-template-columns: 1fr; }
  .stat__value { font-size: 40px; }
  .chapters { grid-template-columns: repeat(2, 1fr); }
  .clip__result { padding-inline: 4px; }
  .clip__group { font-size: 21px; line-height: 1.19; }
  .clip__method, .clip__verdict { font-size: 12px; }
  .fig-card--wide { display: none; }
  .fig-card--panels { display: block; }
  /* the phone cut's frame, one view over two stats rows (its render sidecar's frame_px) */
  .hero-video__player { aspect-ratio: 1280 / 1296; }
}