/* --------------------------------------------------------------------------
   Palette — "technical plate".

   The ground is warm paper; the ink is warm near-black.  The single accent is
   the vermilion of the camera frusta in the paper's own figures (sampled from
   our_figs/), so the colour that means "ours" on this page is the colour that
   means "ours" inside every reconstruction shown on it.  Everything else stays
   neutral so the figures keep the only saturation on the page.

   Light values live on bare :root.  Dark is redefined twice — once for the OS
   setting, once for the explicit toggle — and never inside a component rule.
   -------------------------------------------------------------------------- */

:root {
  color-scheme: light;

  --surface-0:      #faf9f6;   /* paper                              */
  --surface-1:      #f2f1ec;   /* cards, table stripes               */
  --surface-2:      #e8e6df;   /* wells, chart tracks                */
  --border:         #dedbd2;
  --border-strong:  #c6c2b6;

  --text-primary:   #16150f;
  --text-secondary: #4f4d44;
  --text-muted:     #7a776c;

  --accent:         #b8371f;   /* frustum vermilion                  */
  --accent-ink:     #9e2f1c;   /* the same hue, stepped for links    */
  --accent-soft:    #f6e9e4;

  --series-ours:    #b8371f;
  --series-other:   #8a8a83;   /* recessive: every non-ours method   */

  --figure-bg:      #ffffff;   /* the reconstruction PNGs are white-backed */

  --radius:         4px;
  --radius-sm:      3px;
  --maxw:           1080px;

  --font-display: "Newsreader", "Iowan Old Style", Charter, Georgia, serif;
  --font-sans:    "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
                  Roboto, Helvetica, Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo,
                  Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --surface-0:      #141412;
    --surface-1:      #1c1c1a;
    --surface-2:      #262623;
    --border:         #33322d;
    --border-strong:  #4a4941;
    --text-primary:   #f3f1ea;
    --text-secondary: #c0bdb1;
    --text-muted:     #8b887d;
    --accent:         #dd6d56;
    --accent-ink:     #e89179;
    --accent-soft:    #2a1c17;
    --series-ours:    #dd6d56;
    --series-other:   #6b6b63;
  }

  /* dark ink on a dark page would disappear, so the figure keeps a plate */
  :root:not([data-theme="light"]) .fig--plain {
    background: #f4f3ee;
    border-radius: var(--radius);
    padding: 14px;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --surface-0:      #141412;
  --surface-1:      #1c1c1a;
  --surface-2:      #262623;
  --border:         #33322d;
  --border-strong:  #4a4941;
  --text-primary:   #f3f1ea;
  --text-secondary: #c0bdb1;
  --text-muted:     #8b887d;
  --accent:         #dd6d56;
  --accent-ink:     #e89179;
  --accent-soft:    #2a1c17;
  --series-ours:    #dd6d56;
  --series-other:   #6b6b63;
}

/* --------------------------------------------------------------- reset -- */

*, *::before, *::after { box-sizing: border-box; }

/* The browser's own [hidden] rule lives in the UA stylesheet, and *any*
   author `display` declaration outranks it whatever the specificity.  Without
   this, `.lightbox { display: grid }` kept the lightbox on screen from page
   load and made its close button a no-op, since closing only sets the
   attribute back.  Anything toggled with .hidden needs this line. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--surface-0);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--accent-ink); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent); }

h1, h2, h3 { line-height: 1.25; letter-spacing: -0.015em; margin: 0; }

/* -------------------------------------------------------------- layout -- */

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.wrap--narrow { max-width: 760px; }

section { padding: 56px 0; border-top: 1px solid var(--border); }
section:first-of-type { border-top: 0; }

.section-head { margin-bottom: 28px; }
.section-head h2 {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.section-head p {
  margin: 8px 0 0;
  color: var(--text-secondary);
  font-size: 15px;
  max-width: 68ch;
}

/* -------------------------------------------------------------- header -- */

.masthead {
  padding: 60px 0 44px;
  text-align: center;
}

.venue {
  font-family: var(--font-mono);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 16px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-0);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.venue .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
}

.masthead h1 {
  margin: 22px auto 0;
  max-width: 20ch;
  font-family: var(--font-display);
  font-size: clamp(31px, 4.7vw, 49px);
  font-weight: 500;
  letter-spacing: -0.02em;
}

.method-name {
  margin: 16px 0 0;
  font-size: 16px;
  color: var(--text-secondary);
}
.method-name strong { color: var(--text-primary); font-weight: 600; }

.authors {
  margin: 26px 0 0;
  font-size: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 20px;
}
.authors a { color: var(--text-primary); text-decoration: none; }
.authors a:hover { color: var(--accent); text-decoration: underline; }

.affil { margin: 10px 0 0; color: var(--text-secondary); font-size: 15px; }

/* --------------------------------------------------------------- links -- */

.links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 30px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  background: var(--text-primary);
  color: var(--surface-0);
  font-size: 14.5px;
  font-weight: 500;
  text-decoration: none;
  transition: transform .12s ease, opacity .12s ease;
}
.btn:hover { transform: translateY(-1px); opacity: .88; color: var(--surface-0); }
.btn svg { width: 16px; height: 16px; fill: currentColor; }

.btn--ghost {
  background: var(--surface-0);
  color: var(--text-primary);
  border-color: var(--border-strong);
}
.btn--ghost:hover { color: var(--text-primary); border-color: var(--text-muted); }

/* A placeholder link: visibly inert until a real URL is dropped in. */
.btn[href="#"], .btn[data-placeholder] {
  opacity: .55;
  cursor: not-allowed;
}
.btn[data-placeholder]::after {
  content: "soon";
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 4px;
  background: color-mix(in srgb, currentColor 18%, transparent);
}

/* -------------------------------------------------------------- teaser -- */

.teaser { padding-top: 8px; }

.teaser-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
}

figure { margin: 0; }

.fig {
  background: var(--figure-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.fig img { width: 100%; height: auto; }

/* The two teaser scenes have different aspect ratios (1.93 and 2.66), so a
   plain grid leaves them ragged.  Give both figures one height and let each
   image sit inside it. */
/* The architecture figure is a transparent PNG of dark line art, so it wants
   the page ground, not a white card.  In dark mode that art would vanish, so
   there it keeps a light plate -- the artwork itself cannot be recoloured. */
.fig--plain {
  background: transparent;
  border: 0;
  border-radius: 0;
}

:root[data-theme="dark"] .fig--plain {
  background: #f4f3ee;
  border-radius: var(--radius);
  padding: 14px;
}

.fig--level { display: flex; flex-direction: column; }
.fig--level img { height: 300px; object-fit: contain; }
.fig--level figcaption { margin-top: auto; }
@media (max-width: 700px) { .fig--level img { height: 220px; } }
.fig figcaption {
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text-secondary);
  font-size: 13px;
}
.fig figcaption b { color: var(--text-primary); font-weight: 600; }


.caption {
  margin: 16px auto 0;
  max-width: 76ch;
  color: var(--text-secondary);
  font-size: 14px;
  text-align: center;
}

/* ------------------------------------------------------------ abstract -- */

.abstract p {
  font-family: var(--font-display);
  font-size: 18.5px;
  line-height: 1.7;
  color: var(--text-primary);
  margin: 0;
}

/* ---------------------------------------------------------- highlights -- */

.highlights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}

.stat {
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-1);
}
.stat .num {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  line-height: 1.1;
}
.stat .num small { font-size: 16px; font-weight: 500; letter-spacing: 0; }
.stat .num--word { font-size: 27px; letter-spacing: -0.015em; }
.stat .lbl {
  margin-top: 6px;
  font-size: 13.5px;
  color: var(--text-secondary);
}

/* -------------------------------------------------------------- method -- */

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 24px;
  counter-reset: step;
}
.step {
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-1);
}
.step::before {
  counter-increment: step;
  content: counter(step);
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  color: var(--accent-ink);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  margin-bottom: 10px;
}
.step h3 { font-size: 15px; font-weight: 600; }
.step p { margin: 6px 0 0; font-size: 14px; color: var(--text-secondary); }

.eq b { color: var(--text-primary); font-weight: 600; }

/* --------------------------------------------------------------- chart -- */


/* --------------------------------------------------------------- table -- */

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: transparent;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
th.scene, td.scene { font-family: var(--font-sans); }

thead th {
  position: sticky;
  top: 0;
  background: var(--surface-0);
  padding: 9px 12px;
  text-align: right;
  font-weight: 600;
  font-size: 12.5px;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
}
thead tr:first-child th { border-bottom: 1px solid var(--border); }
thead th.grp {
  text-align: center;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: 11px;
}
thead th.grp.ours { color: var(--accent-ink); }

th.scene, td.scene { text-align: left; }

tbody td {
  padding: 8px 12px;
  text-align: right;
  border-bottom: 1px solid var(--border);
  color: var(--text-secondary);
}
tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--text-primary) 4%, transparent);
}
tbody tr:last-child td { border-bottom: 0; }
tbody td.scene { color: var(--text-primary); font-weight: 500; }

td.win { color: var(--text-primary); font-weight: 600; }
td.win::after {
  content: "\25B8";           /* small right-pointing triangle */
  margin-left: 4px;
  color: var(--accent);
  font-size: 10px;
  vertical-align: 1px;
}

.col-ours { background: color-mix(in srgb, var(--accent) 6%, transparent) !important; }
tbody tr:nth-child(even) td.col-ours { background: color-mix(in srgb, var(--accent) 9%, transparent) !important; }

.sep-l { border-left: 1px solid var(--border-strong); }
/* the || in the paper's column spec: learned methods from classical ones */
.sep-ll { border-left: 3px double var(--border-strong); }

tfoot td {
  padding: 9px 12px;
  text-align: right;
  font-weight: 600;
  color: var(--text-primary);
  border-top: 1px solid var(--border-strong);
  background: color-mix(in srgb, var(--text-primary) 6%, transparent);
}
tfoot td.scene { text-align: left; }

.tbl-note {
  margin: 10px 0 0;
  font-size: 12.5px;
  color: var(--text-muted);
}

/* --------------------------------------------------------------- tabs -- */

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
  padding: 4px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  width: fit-content;
  max-width: 100%;
}
.tab {
  padding: 6px 14px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
}
.tab:hover { color: var(--text-primary); }
.tab[aria-selected="true"] {
  background: var(--surface-0);
  color: var(--text-primary);
  box-shadow: 0 1px 3px rgba(0,0,0,.1);
}

/* ------------------------------------------------------------- gallery -- */

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
}

.tile {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--figure-bg);
  cursor: zoom-in;
  transition: border-color .15s ease, transform .15s ease;
  padding: 0;
  font: inherit;
  text-align: left;
  display: block;
  width: 100%;
}
.tile:hover { border-color: var(--accent); transform: translateY(-2px); }
.tile:focus-visible,
.tab:focus-visible,
.btn:focus-visible,
.copy-btn:focus-visible,
.theme-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.tile img {
  width: 100%;
  height: 150px;
  object-fit: contain;
  background: var(--figure-bg);
}

/* ------------------------------------------------------------- lightbox */
/* The frame here is deliberately fixed-light in both themes: it sits on a dark
   scrim and holds a white-background figure, so a dark frame would put a bright
   rectangle inside a dark rectangle.  These are the only literals in the file. */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 32px;
  background: rgba(8,8,8,.86);
  backdrop-filter: blur(3px);
}
.lightbox figure {
  max-width: min(1100px, 100%);
  max-height: 100%;
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
}
.lightbox img { max-height: 78vh; width: auto; margin: 0 auto; }
.lightbox .close {
  position: absolute;
  top: 18px; right: 22px;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.3);
  background: rgba(255,255,255,.1);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.lightbox .close:hover { background: rgba(255,255,255,.2); }

/* ---------------------------------------------------------- interactive */

.recon-grid {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.recon { margin: 0; }

.recon__stage {
  position: relative;
  aspect-ratio: 560 / 380;
  background: var(--figure-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.recon__poster {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.recon__stage.is-live .recon__poster { display: none; }

.recon__canvas { position: absolute; inset: 0; }

/* The two teaser scenes are cards too, but they sit inside .fig--level and
   already have that figure's frame, so the stage adds none of its own. */
.recon__stage--teaser {
  aspect-ratio: auto;
  height: 300px;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.recon__stage--teaser .recon__poster { height: 100%; }
@media (max-width: 700px) { .recon__stage--teaser { height: 220px; } }

.recon__go {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  padding: 9px 18px;
  font: 500 13.5px/1 var(--font-sans);
  color: var(--surface-0);
  background: var(--accent);
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.recon__go:hover { background: var(--accent-ink); }
.recon__go:disabled { opacity: 0.7; cursor: default; }

.recon__controls {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}

.recon__controls button {
  padding: 6px 11px;
  font: 500 12.5px/1 var(--font-sans);
  color: var(--text-primary);
  background: var(--surface-0);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.recon__controls button:hover { border-color: var(--accent); color: var(--accent); }

.recon__error {
  position: absolute;
  inset: auto 10px 10px;
  margin: 0;
  padding: 9px 11px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-secondary);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.recon figcaption {
  margin-top: 9px;
  font-size: 13.5px;
  line-height: 1.5;
}

.recon figcaption b { color: var(--text-primary); }

@media (prefers-reduced-motion: reduce) {
  /* the loop is decorative; the still says the same thing */
  .recon__poster { content: normal; }
}

/* -------------------------------------------------------------- bibtex -- */

.code-block { position: relative; }
.code-block pre {
  margin: 0;
  padding: 18px 20px;
  overflow-x: auto;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-secondary);
}
.copy-btn {
  position: absolute;
  top: 10px; right: 10px;
  padding: 5px 11px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-0);
  color: var(--text-secondary);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}
.copy-btn:hover { color: var(--text-primary); border-color: var(--text-muted); }

/* -------------------------------------------------------------- footer -- */

footer {
  padding: 40px 0 60px;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 13.5px;
}
footer p { margin: 0 0 10px; max-width: 76ch; }

/* --------------------------------------------------------- theme toggle */

.theme-toggle {
  position: fixed;
  top: 16px; right: 16px;
  z-index: 40;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--surface-0);
  color: var(--text-secondary);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.theme-toggle:hover { color: var(--text-primary); }
.theme-toggle svg { width: 17px; height: 17px; fill: currentColor; }

/* ------------------------------------------------------------- responsive */

@media (max-width: 640px) {
  section { padding: 40px 0; }
  .masthead { padding: 40px 0 32px; }
  .gallery { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .tile img { height: 118px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

@media print {
  .theme-toggle, .copy-btn, .tabs { display: none; }
  section { break-inside: avoid; }
}