/* ==========================================================================
   JtT project page — built on LaTeX.css (https://latex.vercel.app/).
   LaTeX.css supplies the Latin Modern typography, the abstract, author,
   sidenote, figure and table conventions. This file sets the palette, widens
   the measure, and styles the few components the page adds: link buttons,
   the side navigation, the two interactive panels and the video players.
   ========================================================================== */

:root {
  --accent:       #002147;   /* Oxford Blue, from the VGG logo */
  --accent-soft:  #eef1f6;
  --ink:          #1a1a1a;
  --muted:        #666;
  --faint:        #999;
  --rule:         #000;
  --link-visited: var(--accent);        /* LaTeX.css link color */
  --body-bg-color: #fff;
  --measure:      104ch;
  --nav-w:        240px;
}

html { font-size: 17px; }

body {
  max-width: var(--measure);
  padding: 2.5rem 1.25rem 4rem;
  color: var(--ink);
  /* LaTeX.css numbers tables and figures with counters that it never
     resets, so each one lives in the scope of the element that first
     increments it. Tables sit inside scroll wrappers here, which would
     give every table its own counter; instantiate them on body instead,
     keeping the three LaTeX.css resets. */
  counter-reset: theorem definition sidenote-counter caption figcaption;
}

/* The measure is centered in the viewport. From the LaTeX.css sidenote
   breakpoint upward the sidenotes hang to the right of it, at most 18vw
   out and never past the viewport edge; wide figures use the same room.
   With the contents panel open on a wide screen the measure is centered
   in the space to its right. */
@media (min-width: 1051px) {
  :root { --sn-offset: min(18vw, calc((100vw - var(--measure)) / 2 - 1rem)); }
  .sidenote {
    width: calc(var(--sn-offset) - 1.25rem);
    margin-right: calc(-1 * var(--sn-offset));
  }
}
@media (min-width: 1400px) {
  body.nav-open {
    margin-left: max(calc(var(--nav-w) + 2.5rem), calc((100vw - var(--measure)) / 2));
    margin-right: 0;
  }
}

a { text-decoration-thickness: 0.06em; text-underline-offset: 0.12em; }

/* Sidenotes read better ragged-right at their narrow width. */
body.text-justify .sidenote, body.text-justify .sidenote.left { text-align: left; }
figcaption, caption { text-align: left; }

/* Headings: Latin Modern bold, as LaTeX.css sets them. Nothing inside the
   measure clears the floated sidenotes, so a long note never opens a gap;
   only elements that reach into the sidenote column do (see .wide). */
h3 { font-size: 1.15rem; }
[id] { scroll-margin-top: 1.5rem; }

/* --------------------------------------------------------------------------
   Title block
   -------------------------------------------------------------------------- */

header h1 { text-align: center; }

.author { font-variant-caps: normal; font-size: 1.12rem; margin: 1rem 0 0.6rem; }
.author a { text-decoration: none; }
.author a:hover { text-decoration: underline; }
.author sup { font-size: 0.7em; margin-left: 0.1em; }

.affil-vgg {
  display: flex; justify-content: center; align-items: center; gap: 1rem;
  margin-top: 0.6rem;
}
.affil-vgg img { width: 40px; height: 40px; margin: 0; }
.affil-vgg a {
  color: var(--accent);
  text-decoration: underline dotted; text-underline-offset: 8px;
}
.affil-vgg a:hover { text-decoration-style: solid; }

.contrib { text-align: center; margin-top: 0.8rem; font-size: 0.95rem; color: var(--muted); }
.contrib a { text-decoration: none; }
.contrib code { font-size: 0.9em; }

.links {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.55rem;
  margin-top: 1.2rem;
}
/* Link buttons: the pill shape, soft shadow and lift of the LeVJEPA page,
   with the icon-and-label content of the VFMF page. Only the Paper button
   carries color; the rest are outlined, and unreleased ones are muted. */
.btn {
  display: inline-flex; align-items: center; gap: 0.5em;
  padding: 0.5em 1.15em; border-radius: 999px;
  font-size: 0.92rem; line-height: 1.2; text-decoration: none; white-space: nowrap;
  color: #374151; background: #fff; border: 1px solid #d1d5db;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
  transition: transform .15s ease, background-color .15s ease, border-color .15s ease,
              color .15s ease, box-shadow .15s ease;
}
.btn:visited { color: #374151; }
.btn:hover {
  transform: translateY(-1px); color: var(--accent); border-color: var(--accent);
  box-shadow: 0 6px 16px rgba(0,33,71,.12);
}
.btn svg { width: 1.1em; height: 1.1em; flex: none; }
.btn-primary {
  background: var(--accent); border-color: #001530; color: #fff;
  box-shadow: 0 8px 20px rgba(0,33,71,.18);
}
.btn-primary:visited { color: #fff; }
.btn-primary:hover { background: #001530; color: #fff; border-color: #001530; }
.btn-soon {
  background: #f4f6f8; border-color: #e4e8ec; color: #a8b0b8;
  box-shadow: none; pointer-events: none;
}
.btn-soon::after {
  content: "soon"; font-size: 0.68em; letter-spacing: 0.12em; text-transform: uppercase;
  color: #bcc4cc; margin-left: 0.15em;
}

/* --------------------------------------------------------------------------
   Abstract: LaTeX.css centers it; set it as a narrowed, justified block the
   way the article class does.
   -------------------------------------------------------------------------- */

.abstract { margin: 2rem 2.5rem 2.5rem; }
.abstract > h2 { font-size: 1.05rem; margin-bottom: 0.3rem; }
.abstract p { text-align: justify; font-size: 0.96rem; line-height: 1.6; }
@media (max-width: 640px) { .abstract { margin: 1.5rem 0 2rem; } }

/* --------------------------------------------------------------------------
   Figures and tables
   -------------------------------------------------------------------------- */

figure { margin: 1.6rem 0; }
figure img { margin: 0 auto; }
figcaption { line-height: 1.5; }

/* Content figures sit inside the measure at a fraction of its width, with
   the caption set to the same width as the image, in the manner of the
   LeVJEPA page, where figures never exceed about 88% of the page. */
figure.fig { --fig-w: 90%; }
figure.fig img { max-width: var(--fig-w); }
figure.fig figcaption { width: var(--fig-w); margin: 0 auto; }
figure.fig .player-card { width: var(--fig-w); margin: 0 auto; }
figure.teaser { --fig-w: 78%; margin-top: 2rem; }
@media (max-width: 640px) { figure.fig { --fig-w: 100%; } }

/* A table that spans the measure and the sidenote column. `table.wide`
   is needed to outrank the LaTeX.css `table:not(.borders-custom)` rule. */
.wide, table.wide { width: 100%; max-width: none; clear: both; }
@media (min-width: 1051px) { .wide, table.wide { width: calc(100% + var(--sn-offset)); } }

/* Tables keep their natural LaTeX.css width and sit centered in the measure. */
table { font-size: 0.93rem; font-variant-numeric: tabular-nums; margin-left: auto; margin-right: auto; }
caption { padding-bottom: 0.5rem; line-height: 1.5; }
th, td { padding: 0.4rem 0.5rem; }
table.compact { font-size: 0.84rem; }
table.compact th, table.compact td { padding: 0.3rem 0.45rem; line-height: 1.15; }
table.compact caption { font-size: 0.86rem; }
/* Superscript marks must not open up the rows that carry them. */
td sup, th sup { line-height: 0; font-size: 0.75em; vertical-align: 0.35em; }
.scroll-wrapper { margin: 1rem 0; }
th { font-weight: bold; }
tr.ours td { font-weight: bold; }
tr.ours td:first-child { color: var(--accent); }
.best { color: var(--accent); font-weight: bold; }

/* --------------------------------------------------------------------------
   Interactive panels, framed like an \fbox
   -------------------------------------------------------------------------- */

figure.demo {
  border: var(--border-width-thin) solid var(--rule);
  padding: 1rem 1.2rem 0.9rem;
  max-width: 780px; margin-left: auto; margin-right: auto;
}
figure.demo figcaption { padding-top: 0.8rem; }
.demo-kicker {
  display: block; margin-bottom: 0.7rem;
  font-variant-caps: small-caps; letter-spacing: 0.06em; font-weight: bold;
}
#dynFig, #partFig { display: block; width: 100%; height: auto; }

.controls { display: flex; align-items: center; gap: 0.5rem 0.6rem; margin-top: 0.9rem; flex-wrap: wrap; }
/* Tabs and controls: the same pill as the masthead buttons, one size down.
   The active tab is filled Oxford Blue like the Paper button. */
.cbtn {
  display: inline-flex; align-items: center; gap: 0.4em;
  font: inherit; font-size: 0.84rem; line-height: 1.2; white-space: nowrap;
  padding: 0.38em 0.95em; border-radius: 999px; cursor: pointer;
  color: #374151; background: #fff; border: 1px solid #d1d5db;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
  transition: transform .15s ease, background-color .15s ease, border-color .15s ease,
              color .15s ease, box-shadow .15s ease;
}
.cbtn:hover {
  transform: translateY(-1px); color: var(--accent); border-color: var(--accent);
  box-shadow: 0 4px 12px rgba(0,33,71,.12);
}
.cbtn.is-active {
  background: var(--accent); border-color: #001530; color: #fff;
  box-shadow: 0 4px 12px rgba(0,33,71,.18);
}
.cbtn.is-active:hover { background: #001530; color: #fff; }
.stage { font-size: 0.86rem; color: var(--muted); }
.stage b { color: var(--accent); }

.dyn-legend {
  display: flex; flex-wrap: wrap; gap: 0.3rem 1.1rem; margin-top: 0.6rem;
  font-size: 0.84rem; color: var(--muted);
}
.dyn-legend .sw {
  display: inline-block; width: 18px; height: 0; border-top: 2.5px solid currentColor;
  vertical-align: middle; margin-right: 0.4em;
}
.dyn-legend .sw.dot { border-top-style: dotted; }

.drop-controls { display: flex; align-items: flex-end; gap: 1.7rem; margin-top: 1rem; flex-wrap: wrap; }
.slider-wrap { flex: 1 1 240px; display: flex; flex-direction: column; gap: 0.4rem; }
.slider-ticks { display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--faint); }
.slider-ticks span { cursor: pointer; }
.slider-ticks span:hover { color: var(--ink); }
.slider-ticks span.on { color: var(--accent); font-weight: bold; }
.drop-readout { display: flex; align-items: baseline; gap: 0.6rem; }
.drop-readout .acc { font-size: 2.3rem; font-weight: bold; line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; }
.drop-readout .acc-label { font-size: 0.8rem; line-height: 1.5; color: var(--muted); }

input[type=range] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 2px; cursor: pointer;
  background: linear-gradient(90deg, var(--accent) var(--p, 100%), #ccc var(--p, 100%));
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%;
  background: #fff; border: 1.5px solid var(--accent);
}
input[type=range]::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 1.5px solid var(--accent);
}

/* --------------------------------------------------------------------------
   Video players with scene tabs
   -------------------------------------------------------------------------- */

.player-card { border: var(--border-width-thin) solid var(--rule); }
.player-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.5rem 1rem; padding: 0.65rem 0.8rem; border-bottom: 1px solid var(--rule);
  background: #fafbfc;
}
.player-head .tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.player-head .fig { font-variant-caps: small-caps; letter-spacing: 0.06em; color: var(--muted); }
.player-tools { display: flex; align-items: center; gap: 0.5rem; font-size: 0.86rem; color: var(--muted); }
.player-tools select {
  font-size: 0.84rem; line-height: 1.2; padding: 0.38em 0.9em; border-radius: 999px;
  border: 1px solid #d1d5db; background: #fff; color: #374151; cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.player-tools select:hover { border-color: var(--accent); color: var(--accent); }
.player { background: #000; display: flex; justify-content: center; align-items: center; }
.player video { display: block; width: 100%; height: auto; max-height: 76vh; object-fit: contain; }
.player.tall video { width: auto; max-width: 100%; }

/* --------------------------------------------------------------------------
   Citation and footer
   -------------------------------------------------------------------------- */

pre.bibtex { font-size: 0.8rem; line-height: 1.6; }

footer { margin-top: 3rem; padding-top: 1.2rem; border-top: 1px solid var(--footnotes-border-color); clear: both; }
footer h3 { margin-top: 0; }
footer p { font-size: 0.9rem; line-height: 1.6; }

/* --------------------------------------------------------------------------
   Side navigation: a fixed contents panel, open by default where the
   viewport has room for it beside the measure, a drawer elsewhere.
   -------------------------------------------------------------------------- */

.nav-toggle {
  position: fixed; top: 1rem; left: 1rem; z-index: 50;
  padding: 0.5rem; border: 0; border-radius: 12px; cursor: pointer; line-height: 0;
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
  transition: transform .2s ease;
}
.nav-toggle:hover { transform: scale(1.05); }
.nav-toggle svg { width: 22px; height: 22px; color: #1f2937; }
.nav-toggle .ic-close { display: none; }
body.nav-open .nav-toggle .ic-open  { display: none; }
body.nav-open .nav-toggle .ic-close { display: block; }

.sidenav {
  position: fixed; top: 0; left: 0; z-index: 40;
  height: 100%; width: var(--nav-w); padding: 1rem 0.9rem 2rem; overflow-y: auto;
  background: rgba(255,255,255,0.82);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-right: 1px solid #e5e7eb;
  box-shadow: 0 20px 25px -5px rgba(0,0,0,.06), 0 8px 10px -6px rgba(0,0,0,.06);
  transform: translateX(-100%);
  transition: transform .3s ease-in-out;
}
body.nav-open .sidenav { transform: translateX(0); }
.sidenav .toc-title {
  margin: 3.6rem 0 0.7rem 0.6rem;
  font-variant-caps: small-caps; letter-spacing: 0.08em; font-weight: bold; color: #374151;
}
.sidenav ul { list-style: none; margin: 0; padding: 0; }
.sidenav li + li { margin-top: 0.25rem; }
.sidenav a {
  display: flex; align-items: center; gap: 0.65rem;
  padding: 0.4rem 0.6rem; border-radius: 8px;
  color: #6b7280; text-decoration: none;
  font-size: 0.88rem; line-height: 1.3; text-align: left; hyphens: none;
  transition: background-color .2s ease, color .2s ease;
}
.sidenav a:hover { color: #1f2937; background: #f3f4f6; }
.sidenav a .n {
  flex: 0 0 1.35rem; width: 1.35rem; height: 1.35rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem; font-variant-numeric: tabular-nums;
  background: #e5e7eb; color: #4b5563;
  transition: background-color .2s ease, color .2s ease;
}
.sidenav a.active { color: var(--accent); background: var(--accent-soft); font-weight: bold; }
.sidenav a.active .n { background: var(--accent); color: #fff; }

/* --------------------------------------------------------------------------
   Narrow screens
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
  html { font-size: 16px; }
  figure.demo { overflow-x: auto; }
  #dynFig  { min-width: 470px; }
  #partFig { min-width: 470px; }
  .player video, .player.tall video { max-height: 70vh; }
}