/* ==========================================================================
   Brown Visual Computing — shared project-page stylesheet
   Hosted at https://visual.cs.brown.edu/projects/shared/project.css
   Every project page <link>s this one file; edit here, all pages update.

   Design tokens follow visual.cs.brown.edu (Minion 3 headings,
   Freight Sans body, Brown red #C00404). A different host skin
   (e.g. jamestompkin.com) overrides the :root custom properties.

   Fonts come from the lab Adobe Fonts kit — pages must also load
   https://use.typekit.net/diw5pgv.css (see template.html).
   ========================================================================== */

/* ---- Tokens ---- */
:root {
  --font-body: "freight-sans-pro", Arial, sans-serif;
  --font-head: "minion-3", Georgia, serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, "Courier New", monospace;
  --accent: #C00404;
  --accent-hover: #900020;
  --ink: #212529;
  --ink-muted: #6c6c6c;
  --bg: #ffffff;
  --bg-soft: #f5f5f5;
  --border: #e2e2e2;
  --measure: 820px;      /* content column */
  /* Logo pill: transparent in light mode; dark mode seats logos on a
     soft light pill so dark-on-transparent artwork stays legible. */
  --logo-pill: transparent;
  --logo-pill-pad: 0px;
}

/* Dark theme: manual (either attribute — works next to Bootstrap and
   non-Bootstrap hosts) or OS preference when no manual choice is set. */
:root[data-theme="dark"],
:root[data-bs-theme="dark"] {
  --accent: #ff6b6b;
  --accent-hover: #ff9a9a;
  --ink: #e8e8e8;
  --ink-muted: #a0a0a0;
  --bg: #1c1c1c;
  --bg-soft: #262626;
  --border: #383838;
  --logo-pill: #f0f0f0;
  --logo-pill-pad: 6px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]):not([data-bs-theme]),
  :root[data-theme="auto"] {
    --accent: #ff6b6b;
    --accent-hover: #ff9a9a;
    --ink: #e8e8e8;
    --ink-muted: #a0a0a0;
    --bg: #1c1c1c;
    --bg-soft: #262626;
    --border: #383838;
    --logo-pill: #f0f0f0;
    --logo-pill-pad: 6px;
  }
}

/* ---- Base ---- */
* { box-sizing: border-box; }

/* Overscroll (rubber-band) handling. Firefox translates the WHOLE
   page — fixed and sticky elements included — during the bounce, so no
   DOM shield can cover the exposed gutter; it paints the gutter with
   the html element's background instead. So: (1) suppress the root
   bounce where the browser allows it, (2) paint the document canvas
   bar-colour (matches bar.css --bar-bg) so any gutter that still
   appears reads as bar, not as a hole. The body paints its own
   background over the content area as usual. */
html {
  background-color: #212529;
  overscroll-behavior-y: none;
}

/* Section-nav jumps: land headings below the sticky bar, smoothly. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
h2[id], [id] { scroll-margin-top: 4rem; }

/* The body carries NO layout padding (same structure as the homepage):
   full-width elements like the bar span naturally, and the content
   column (main.project) carries its own padding. This avoids the
   negative-margin full-bleed hack — a body-padding/bar-margin pair
   that had to stay numerically synchronised forever. */
body {
  margin: 0;
  padding: 0;
  color: var(--ink);
  background: var(--bg);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

main.project {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 1.25rem 4em;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: normal;
  color: var(--ink);
}

p { margin: 0 0 1em; }
li { margin: 3px 0; hyphens: auto; }
img { max-width: 100%; height: auto; }
video { max-width: 100%; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }

pre {
  font-family: var(--font-mono);
  font-size: 0.82em;
  line-height: 1.5;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1em 1.1em;
  overflow-x: auto;
}
:not(pre) > code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.08em 0.4em;
}

/* ---- Brand bar (host adjustments only) ----
   The bar itself is the shared component: markup _includes/bar.html,
   styling css/bar.css, behaviour js/nav.js — injected and loaded by
   project.js. The body is unpadded (see above), so the bar spans the
   viewport with no full-bleed tricks; only the gap below it is ours. */
.bvc-bar { margin-bottom: 2.5rem; }
/* Overscroll shield: on project pages the bar sits at the very top of
   the viewport, and rubber-band scrolling (macOS) bounces it down,
   revealing whatever is painted behind (e.g. sterkfontein's rock
   frame). Extend the bar upward with a same-colour block so the bounce
   shows bar, not backdrop. (Not in bar.css: on the homepage the bar
   sits below the masthead, where this would paint over it.) */
.bvc-bar::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 100vh;   /* a full viewport: no bounce amplitude can outrun it */
  background: var(--bar-bg);
}

/* ---- Header block ---- */
h1.project-title {
  text-align: center;
  font-size: 2.55em;
  line-height: 1.14;
  letter-spacing: 0.01em;
  margin: 0 0 0.1em;
}
.project-title .subtitle {
  display: block;
  font-size: 0.42em;
  font-style: italic;
  color: var(--ink-muted);
  letter-spacing: 0.015em;
  margin-top: 0.6em;
}
.venue {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.82em;
  color: var(--ink-muted);
  margin: 0.4em 0 1.6em;
}
.venue strong { color: var(--accent); font-weight: 600; } /* Oral / Highlight */

.authors {
  text-align: center;
  font-size: 1.15em;
  line-height: 1.9;
  max-width: 720px;
  margin: 0.4em auto 0.5em;
}
.authors .author { white-space: nowrap; margin: 0 0.15em; }
.authors sup { color: var(--ink-muted); font-size: 0.68em; padding-left: 1px; }

/* Affiliation logos under the author list. */
.affil-logos { text-align: center; margin: 1.2em 0 0.5em; }
.affil-logos .logo-item { display: inline-block; margin: 0.4em 24px; }
.affil-logos .logo-item sup {
  color: var(--ink-muted);
  font-size: 0.9em;
  vertical-align: top;
  margin-right: 5px;
}
.affil-logos img, .logos img { height: 50px; width: auto; vertical-align: middle; }

/* ---- Resource row (Paper / arXiv / Code / Video / Data) ---- */
.resource-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6em;
  margin: 1.6em 0;
}
.resource-row a {
  display: inline-block;
  padding: 0.4em 1.1em;
  border: 1px solid var(--accent);
  border-radius: 6px;
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}
.resource-row a:hover {
  background: var(--accent);
  color: var(--bg);
}

/* ---- Sections ---- */
section > h2, main.project > h2 {
  text-align: center;
  font-size: 1.75em;
  margin: 2.4em 0 0.9em;
  padding-bottom: 0.3em;
  border-bottom: 1px solid var(--border);
}
h3 { font-size: 1.15em; margin-bottom: 0.5em; }

/* ---- Teaser plate ---- */
.teaser {
  margin: 1.5em auto 0.5em;
  border-radius: 6px;
  border: 1px solid var(--border);
  overflow: hidden;
}
.teaser img, .teaser video { display: block; width: 100%; }
figcaption {
  font-size: 0.88em;
  color: var(--ink-muted);
  text-align: center;
  margin-top: 0.5em;
}
figure { margin: 1.5em 0; }

/* ---- Responsive embeds (YouTube / OneDrive / Google Slides) ---- */
.embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 1.2em 0;
}
.embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 6px;
}

/* Slides embed: an Office Online viewer for a .pptx, built by
   project.js from a data-pptx attribute. Slightly taller than 16:9 to
   leave room for the viewer's bottom toolbar over a 16:9 deck. */
.slides-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  margin: 1.2em 0;
}
.slides-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 1px solid var(--border);
  border-radius: 6px;
}

/* ---- Media rows and carousel ----
   .media-row: side-by-side comparison media that wraps on narrow screens.
   .snap-row: horizontally scrolling scroll-snap carousel (replaces the
   old Bootstrap carousel — no JS). */
.media-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 1.2em 0;
}
.media-row > * { flex: 1 1 280px; min-width: 0; }

.snap-row {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  margin: 1.2em 0;
  padding-bottom: 0.5em;    /* room for the scrollbar */
}
.snap-row > * {
  flex: 0 0 min(100%, 480px);
  scroll-snap-align: center;
}
.snap-row img, .snap-row video { display: block; width: 100%; border-radius: 6px; }

/* ---- Video grid (used by project.js videoGrid helper) ---- */
.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin: 1.2em 0;
}
.video-grid figure { margin: 0; }
.video-grid video { width: 100%; display: block; border-radius: 4px; }
.video-grid-controls {
  text-align: center;
  margin: 0.4em 0 1em;
}
.video-grid-controls button {
  font: inherit;
  font-size: 0.85em;
  color: var(--accent);
  background: none;
  border: 1px solid var(--accent);
  border-radius: 5px;
  padding: 0.15em 0.7em;
  margin: 0 0.2em;
  cursor: pointer;
}
.video-grid-controls button:hover { background: var(--accent); color: var(--bg); }

/* ---- Citation ---- */
pre.citation { margin: 1em auto; position: relative; }
/* Copy button, auto-attached by project.js to every pre.citation. */
pre.citation .copy-btn {
  position: absolute;
  top: 0.6em;
  right: 0.6em;
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--accent);
  background: var(--bg-soft);
  border: 1px solid var(--accent);
  border-radius: 5px;
  padding: 0.1em 0.7em;
  cursor: pointer;
}
pre.citation .copy-btn:hover { background: var(--accent); color: var(--bg); }
pre.citation .copy-btn.copied { background: var(--accent); color: var(--bg); }

/* ---- Panels (download how-tos, notes, errata) ---- */
.panel {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.1em 1.5em 1.3em;
  margin: 1.8em auto 0;
}
.panel h3 { margin-top: 0.2em; }

.download-btn {
  display: inline-block;
  padding: 0.75em 2em;
  font-size: 1.15em;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--bg) !important;
  background: var(--accent);
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.15s ease, transform 0.15s ease;
}
.download-btn:hover { background: var(--accent-hover); transform: translateY(-1px); }

/* ---- Footer logo strip (institutions + funders) ---- */
.logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1.5em 3em;
  margin: 3em 0 1em;
  padding-top: 1.5em;
  border-top: 1px solid var(--border);
}
/* Logo dark-mode strategies, per logo:
   (default)     soft light pill under the logo in dark mode — safe for
                 any artwork, driven by the --logo-pill tokens.
   .dark-invert  monochrome logo: CSS-invert it in dark mode, no pill.
   .light-only / .dark-only
                 a real pair of variants; the right one shows for the
                 active theme (requires the pre-paint script, which the
                 template always includes). */
.logos img, .affil-logos img {
  background: var(--logo-pill);
  border-radius: 6px;
  padding: var(--logo-pill-pad);
}
img.dark-invert, img.light-only, img.dark-only, img.logo-plain { background: none; padding: 0; border-radius: 0; }
:root[data-theme="dark"] img.dark-invert,
:root[data-bs-theme="dark"] img.dark-invert { filter: invert(1) hue-rotate(180deg); }
:root[data-theme="dark"] img.light-only,
:root[data-bs-theme="dark"] img.light-only { display: none; }
:root:not([data-theme="dark"]):not([data-bs-theme="dark"]) img.dark-only { display: none; }

/* ---- Utility ---- */
.center { margin-left: auto; margin-right: auto; }
.centerContent { text-align: center; }
.muted { color: var(--ink-muted); }

/* ---- Small screens ---- */
@media (max-width: 600px) {
  body { font-size: 16px; }
  h1.project-title { font-size: 1.9em; }
  .authors { font-size: 1em; }
  .affil-logos img, .logos img { height: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---- Print ---- */
@media print {
  .bvc-bar { display: none; }
  body { background: #fff; color: #000; }
}