/* PARTCONCEPTS project page
   Typography/color system follows the "Clarity" academic template
   (Poppins for UI/headings, Charter for body copy, flat neutral palette). */

@import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap");

@font-face {
  font-family: "Charter";
  font-style: normal;
  font-weight: normal;
  src: url("../fonts/Charter/charter_regular.woff2") format("woff2");
}
@font-face {
  font-family: "Charter";
  font-style: italic;
  font-weight: normal;
  src: url("../fonts/Charter/charter_italic.woff2") format("woff2");
}
@font-face {
  font-family: "Charter";
  font-style: normal;
  font-weight: bold;
  src: url("../fonts/Charter/charter_bold.woff2") format("woff2");
}

:root {
  color-scheme: light;
  --hero-bg: #e0e4e6;
  --bg: #ffffff;
  --bg-alt: #f6f6f6;
  --surface: #ffffff;
  --text-primary: #353535;
  --text-secondary: #666667;
  --text-muted: #8a8a8b;
  --border: #dedede;
  --border-strong: #c6c6c6;
  --accent: #000080;
  --btn-bg: #ececec;
  --btn-bg-hover: #e0e0e0;
  --sans: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Charter", Georgia, "Iowan Old Style", serif;
  --mono: "Fira Code", ui-monospace, SFMono-Regular, Consolas, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
html, body { overflow-x: clip; width: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
a:hover { opacity: 0.7; }

.container {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 6vw;
}

.prose {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}

section { padding: 56px 0; }
section.alt { background: var(--bg-alt); }

.insight-rows {
  display: grid;
  gap: 64px;
  max-width: 1040px;
  margin: 0 auto;
}

.insight-row {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(36px, 7vw, 96px);
  align-items: center;
}

.insight-row-text p {
  margin: 0;
  color: var(--text-primary);
  font-family: var(--sans);
  font-size: clamp(1.2rem, 1rem + 0.65vw, 1.65rem);
  font-weight: 500;
  line-height: 1.45;
}

.motivation-issue {
  position: relative;
}

.motivation-issue::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -22px;
  border-radius: 12px;
  background: rgb(255 237 234 / 78%);
  pointer-events: none;
}

.motivation-issue .insight-row {
  position: relative;
  z-index: 1;
}

.motivation-issue .insight-row-text p {
  color: #963b16;
}

.motivation-capability-figure {
  position: relative;
  z-index: 1;
  margin: 32px 0 0;
}

.motivation-capability-intro {
  margin: 0 0 16px;
  color: var(--text-secondary);
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.55;
}

.motivation-capability-figure img {
  display: block;
  width: 60%;
  height: auto;
  margin: 0 auto;
}

.motivation-citation {
  position: relative;
  z-index: 1;
  margin: 18px 0 0;
  font-size: 0.78rem;
  font-style: italic;
  line-height: 1.45;
  color: var(--text-secondary);
}

@media (max-width: 700px) {
  .motivation-capability-figure img { width: 100%; }
}

.motivation-issue:hover {
  animation: motivation-issue-glow 0.9s ease-in-out 2;
}

@keyframes motivation-issue-glow {
  0%, 100% { box-shadow: 0 0 0 rgb(232 133 65 / 0%); }
  50% { box-shadow: 0 0 26px rgb(220 91 73 / 24%); }
}

code {
  padding: 0.08em 0.28em;
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.82em;
  white-space: nowrap;
}

.insight-row-visual {
  margin: 0;
}

.insight-visual-pair,
.insight-visual-grid {
  display: grid;
  gap: 12px;
}

.insight-visual-pair,
.insight-visual-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.insight-row-visual img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--surface);
}

.insight-row-visual figcaption {
  margin-top: 12px;
  color: var(--text-secondary);
  font-family: var(--serif);
  font-size: 0.9rem;
  line-height: 1.45;
  text-align: left;
}

.observations {
  display: grid;
  gap: 24px;
  max-width: 820px;
  counter-reset: observation;
}

.observation p {
  margin: 0;
  color: var(--text-primary);
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1rem + 0.35vw, 1.35rem);
  line-height: 1.6;
}

.observation {
  counter-increment: observation;
}

.observation p::before {
  content: counter(observation) ". ";
  color: var(--accent);
  font-family: var(--sans);
  font-weight: 700;
}

.hover-reference,
.hover-reference-link {
  position: relative;
  color: var(--accent);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 4px;
  cursor: help;
}

.hover-reference:hover,
.hover-reference-link:hover {
  opacity: 1;
}

.hover-reference-link { cursor: pointer; }

.hover-reference::after,
.hover-reference-link::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 14px;
}

.hover-card {
  position: absolute;
  z-index: 10;
  top: calc(100% + 14px);
  left: 0;
  width: min(680px, 80vw);
  padding: 14px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 12px 30px rgb(0 0 0 / 16%);
  color: var(--text-secondary);
  font-family: var(--serif);
  font-size: 0.86rem;
  font-weight: 400;
  line-height: 1.45;
  text-align: left;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.hover-reference:hover .hover-card,
.hover-reference:focus .hover-card,
.hover-reference-link:hover .hover-card,
.hover-reference-link:focus .hover-card {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.hover-card-figures,
.hover-card-attention-grid {
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
}

.hover-card-figures { grid-template-columns: repeat(2, 1fr); }
.hover-card-attention-grid { grid-template-columns: repeat(4, 1fr); }

.hover-card img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 1px solid var(--border);
  border-radius: 0;
}

.hover-card-attention-grid span {
  min-width: 0;
  text-align: center;
}

.hover-card-attention-grid small {
  display: block;
  margin-top: 5px;
  font-size: 0.8rem;
}

.hover-card-caption { display: block; }

.research-question-callout {
  max-width: 820px;
  margin-top: 56px;
  padding: 24px 28px;
  border-left: 4px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

.research-question-callout p {
  margin: 0;
  color: var(--text-secondary);
  font-family: var(--serif);
}

.research-question-callout-text {
  margin-top: 12px !important;
  color: var(--text-primary) !important;
  font-family: var(--sans) !important;
  font-size: clamp(1.35rem, 1.1rem + 0.8vw, 2rem);
  font-weight: 600;
  line-height: 1.35;
}

.partconcept-intro {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
  margin-top: 24px;
}

.partconcept-intro-text p {
  margin: 0;
  color: var(--text-secondary);
  font-family: var(--serif);
  font-size: 1.08rem;
  line-height: 1.65;
}

.partconcept-intro-text ul {
  margin: 0;
  padding-left: 1.35em;
  color: var(--text-secondary);
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.55;
}

.partconcept-intro-text li + li { margin-top: 12px; }

.partconcept-intro-figure img {
  width: 100%;
  height: auto;
}

.evaluation-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  margin-top: 32px;
}

.evaluation-overview {
  color: var(--text-secondary);
  font-family: var(--serif);
  font-size: 1.08rem;
  line-height: 1.55;
}

.evaluation-overview > ul,
.evaluation-summary-list {
  margin: 0;
  padding-left: 1.35em;
}

.evaluation-overview ul ul,
.evaluation-summary-list ul {
  margin-top: 4px;
  padding-left: 1.45em;
  list-style-type: circle;
}

.evaluation-cards + .evaluation-summary {
  margin-top: 56px;
}

.evaluation-summary h3 {
  margin-bottom: 20px;
}

.evaluation-summary-list {
  color: var(--text-secondary);
  font-family: var(--serif);
  font-size: 1.08rem;
  line-height: 1.55;
}

.evaluation-summary-list > li + li { margin-top: 8px; }

.evaluation-summary-figure {
  margin: 28px auto 0;
  width: 60%;
}

.evaluation-summary-figure img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 700px) {
  .evaluation-summary-figure { width: 100%; }
}

.evaluation-card-segmentation { order: 1; }
.evaluation-card:not(.evaluation-card-segmentation) { order: 2; }

.evaluation-card {
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}

.evaluation-card h3 {
  margin-bottom: 8px;
}

.evaluation-card-description {
  min-height: 3.2em;
  margin-bottom: 20px;
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.5;
}

.evaluation-card > img {
  width: 100%;
  height: auto;
  display: block;
}

.evaluation-card-clickable {
  position: relative;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.evaluation-card-clickable::before {
  content: "click to expand";
  position: absolute;
  right: 18px;
  top: -29px;
  color: var(--accent);
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.18s ease;
}

.evaluation-card-clickable:hover {
  box-shadow: 0 10px 32px rgb(109 76 165 / 24%);
  transform: scale(1.025);
}

.evaluation-card-clickable:hover::before { opacity: 1; }

.results-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 5vh 5vw;
  background: rgb(20 18 28 / 64%);
}

.results-modal[hidden] { display: none; }

.results-modal-panel {
  position: relative;
  width: min(1100px, 100%);
  max-height: 90vh;
  overflow: auto;
  padding: 22px;
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 20px 60px rgb(0 0 0 / 24%);
}

.results-modal-panel img { width: 100%; height: auto; }

.results-modal-close {
  position: sticky;
  top: 0;
  z-index: 1;
  float: right;
  width: 34px;
  height: 34px;
  margin: -10px -10px 8px 8px;
  border: 0;
  border-radius: 50%;
  background: var(--btn-bg);
  color: var(--text-primary);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

@media (max-width: 700px) {
  .insight-rows { gap: 48px; }
  .insight-row {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .insight-row-text p { font-size: 1.2rem; }
  .insight-visual-grid { gap: 7px; }
  .partconcept-intro {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .evaluation-cards { grid-template-columns: 1fr; }
  .evaluation-card-segmentation,
  .evaluation-card:not(.evaluation-card-segmentation) { order: initial; }
  .hover-card {
    position: fixed;
    top: auto;
    left: 5vw;
    right: 5vw;
    bottom: 12px;
    width: auto;
  }
}

h1, h2, h3, h4 {
  font-family: var(--sans);
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 0.6em;
  color: var(--text-primary);
}

h2 {
  font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
  text-align: left;
  margin-bottom: 28px;
}

h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-top: 0;
}

.section-intro {
  color: var(--text-secondary);
  font-family: var(--serif);
  max-width: 680px;
  margin: 0 0 32px;
}

p {
  margin: 0 0 1em;
  color: var(--text-secondary);
  font-family: var(--serif);
  font-weight: 400;
}
.prose p:last-child { margin-bottom: 0; }

strong { color: var(--text-primary); font-weight: 700; }

/* Keep hyphenated terms (e.g. "open-vocabulary") from breaking at the hyphen */
.nowrap { white-space: nowrap; }

/* ---------- Hero ---------- */

.hero {
  background: var(--hero-bg);
  padding: 5vh 0 4vh;
}

.hero .container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
}

@media (min-width: 860px) {
  /* Video column is given a balanced share so author names and teaser sit harmoniously. */
  .hero .container { grid-template-columns: 0.92fr 1.38fr; gap: 48px; }

  /* Let the teaser run past the container's right edge (stopping 24px from the
     window edge) so it grows without squeezing the text column. The first term
     is the gap between the container and the viewport edge on wide screens, the
     second is the container's own 6vw side padding. */
  .hero-visual {
    margin-right: calc(195px - max(0px, (100vw - 1180px) / 2) - 6vw);
    max-width: 720px;      /* keeps the bleed from growing without limit */
    margin-left: auto;     /* so the capped video stays right-aligned */
  }
}

.venue-badge {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  color: var(--accent);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 0.4em 0.9em;
  margin-bottom: 14px;
}

.venue-note {
  display: block;
  margin: -6px 0 14px;
  font-size: 0.78rem;
  color: var(--text-secondary);
}

.hero h1 {
  font-size: clamp(1.9rem, 1.5rem + 1.8vw, 2.6rem);
  font-weight: 600;
  letter-spacing: 0;
  margin-bottom: 0.3em;
}

.hero .subtitle {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 1.05rem;
  color: var(--text-secondary);
  margin-bottom: 20px;
}

.hero-blurb {
  font-family: var(--serif);
  color: var(--text-secondary);
  font-size: 1rem;
  max-width: 46em;
  margin-bottom: 24px;
}

.hero-authors {
  margin-bottom: 22px;
}

.hero-authors .authors {
  font-family: var(--sans);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 8px;
  color: var(--text-primary);
}

.hero-authors .author-item {
  display: inline-block;
  white-space: nowrap;
}

.hero-authors .affil {
  font-family: var(--sans);
  font-size: 0.88rem;
  color: var(--text-secondary);
  margin-bottom: 0;
  line-height: 1.5;
}

.hero-authors .affil-item {
  display: inline-block;
  white-space: nowrap;
}

.textsc,
.partconcepts {
  font-variant: small-caps;
  font-variant-caps: small-caps;
  letter-spacing: 0.015em;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0.75em 1.1em;
  border-radius: 10px;
  font-size: 0.78rem;
  font-weight: 700;
  border: none;
  background: var(--btn-bg);
  color: var(--text-primary);
  cursor: pointer;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-family: var(--sans);
  transition: background-color 0.12s ease, opacity 0.12s ease;
}

.btn:hover { background: var(--btn-bg-hover); opacity: 1; text-decoration: none; }

.btn.disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

.btn svg { width: 14px; height: 14px; flex-shrink: 0; }

.coming-soon-note {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 10px;
  font-family: var(--sans);
}

.hero-visual {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
}

.hero-visual img, .hero-visual video {
  width: 100%;
  display: block;
  border-radius: 10px;
  outline: none;
}

/* Logo strip + page URL overlaid on the hero teaser video, bottom-left.
   Earlier (shorter) versions of this video had one corner that stayed empty
   on every slide, so this had no background. The 11-slide version doesn't —
   several slides (esp. the segmentation examples) have dark, busy content
   reaching into every corner — so this now sits on its own semi-opaque pill
   for guaranteed contrast regardless of what's playing underneath. Sizes are
   percentages of the video box so the strip scales with it; colors are fixed
   (not theme variables) since the video's own content doesn't follow the
   page's light/dark theme. */
.hero-logos {
  position: absolute;
  left: 2.5%;
  bottom: 0.8%;
  width: fit-content;   /* was a fixed 56% — sized to fit its own content instead,
                            so it only ever covers as much as it actually needs */
  height: 5%;   /* the 11-slide deck's "Key observations" slide has only ~6.5%
                   of clear margin below its bottom bullet — kept short of
                   that so the two don't overlap */
  display: flex;
  align-items: center;
  gap: 6px;    /* fixed px, not %: a % gap on a wide box compounds into a much
                  bigger footprint than the content needs (this is what made
                  the original pill cover far more of the slide than intended) */
  padding: 0 8px;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 999px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.18);
  box-sizing: border-box;
  pointer-events: none;
}

.hero-logos img {
  height: 100%;
  width: auto;
  display: block;
}

.hero-logos .logo-cvit { height: 88%; }

.hero-url {
  margin-left: 4px;
  padding-left: 8px;
  border-left: 1px solid rgba(0, 0, 0, 0.15);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.68rem;
  color: #666;
  white-space: nowrap;
}

/* Pause/play control overlaid on the hero teaser video */
.video-toggle {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 0.15s ease, background 0.15s ease;
}

.hero-visual:hover .video-toggle,
.video-toggle:focus-visible { opacity: 1; }
.video-toggle:hover { background: rgba(0, 0, 0, 0.75); }
.video-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.video-toggle svg { width: 16px; height: 16px; fill: currentColor; }
.video-toggle .icon-play { display: none; }
.video-toggle.is-paused .icon-play { display: block; }
.video-toggle.is-paused .icon-pause { display: none; }

/* ---------- Figures ---------- */

.figure-card {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
}

.figure-card img { display: block; max-width: 100%; height: auto; margin: 0 auto; }


.figure-caption {
  padding: 12px 2px 0;
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--text-secondary);
  font-family: var(--serif);
}

.figure-caption .fig-num {
  font-weight: 700;
  color: var(--text-primary);
  font-family: var(--sans);
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  display: inline-block;
  margin-right: 4px;
}

figure { margin: 0; }

.figure-block { margin-top: 32px; margin-bottom: 32px; }
.figure-block:first-of-type { margin-top: 0; }

/* ---------- Authors block ---------- */

.authors-block { text-align: center; margin-bottom: 48px; }

.authors {
  font-family: var(--sans);
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--text-primary);
}

.affil {
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.author-mark {
  color: var(--accent);
  font-weight: 700;
}

.author-affil { font-weight: 600; }

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

.method-block { margin-bottom: 48px; }
.method-block:last-child { margin-bottom: 0; }

/* ---------- Training figure (Section 3.2) ---------- */
.method-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
}

@media (min-width: 860px) {
  .method-steps { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 80px); }
}

.method-steps-figure {
  position: relative;
  width: 100%;
  max-width: 315px;
  margin: 0 auto;
}

.method-steps-figure img { display: block; width: 100%; height: auto; }

.steps-mask-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.steps-scrim { fill: rgba(18, 18, 24, 0.64); }

.steps-hole { transition: fill-opacity 0.3s ease; }

.method-steps-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.method-step {
  display: grid;
  grid-template-columns: 26px 1fr;
  column-gap: 14px;
  align-items: start;
  padding: 10px 14px;
  border-radius: 8px;
}

.method-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-top: 1px;
  border-radius: 50%;
  border: 1px solid #6d4ca5;
  background: #6d4ca5;
  color: #fff;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.8rem;
}

.method-step p {
  margin: 0;
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

.method-loss {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: center;
}

.method-loss-list {
  margin: 0;
  padding-left: 1.35em;
  color: var(--text-secondary);
}

.method-loss-list li { padding-left: 0.35em; }
.method-loss-list li + li { margin-top: 28px; }

.method-loss-list p {
  margin: 0;
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.55;
}

.method-loss-equation {
  margin-top: 10px;
  text-align: center;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--text-primary);
}

.method-loss-equation sub { font-size: 0.6em; }

.method-loss-figure img {
  display: block;
  width: 100%;
  height: auto;
}

@media (min-width: 860px) {
  .method-loss { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 6vw, 80px); }
}

/* Stack the figure above the steps on smaller screens. */
@media (max-width: 859px) {
  .method-steps-figure {
    width: auto;
    max-width: min(315px, 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .steps-hole, .method-step, .method-step-num { transition: none; }
}

/* ---------- Results grid ---------- */

.result-group { margin-bottom: 56px; }
.result-group:last-child { margin-bottom: 0; }

.result-group-title {
  font-family: var(--sans);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}

/* ---------- Gallery / carousel ---------- */

/* Two compact cards that pick which results gallery is shown below (the
   .gallery-tab class + data-target is what main.js's tab-switching listens
   for — kept for that hook even though the pill styling it used to carry is
   gone, replaced entirely by .result-card below). Text-only on purpose: an
   earlier version used a photo background per card, but for a plain picker
   between two categories the image was unnecessary weight, not signal. */
.result-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
  margin-bottom: 20px;
}

.result-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  flex: 0 1 320px;   /* sized to fit its own content, not stretched full-width */
  max-width: 340px;
  padding: 20px 22px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  text-align: left;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

@media (max-width: 480px) {
  .result-card { flex-basis: 100%; max-width: none; }
}

.result-card:hover { border-color: var(--border-strong); background: var(--btn-bg); }
.result-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.result-card.active {
  border-color: var(--accent);
  background: var(--bg-alt);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.result-card-title {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.35;
  color: var(--text-primary);
}

.result-card-desc {
  font-family: var(--serif);
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

.result-card-cta {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.74rem;
  color: var(--text-muted);
}

.result-card.active .result-card-cta { color: var(--accent); }

.result-card-cta svg { width: 12px; height: 12px; transition: transform 0.15s ease; }
.result-card:hover .result-card-cta svg { transform: translateX(2px); }

.result-card .cta-selected { display: none; }
.result-card.active .cta-view { display: none; }
.result-card.active .cta-selected { display: inline; }

.gallery-panel { display: none; }
.gallery-panel.active { display: block; }

/* Shown only before either card has been picked; hidden as soon as one has
   (:has() lets this stay pure CSS instead of another main.js hook). */
.gallery-empty-hint {
  display: block;
  padding: 28px 0;
  font-family: var(--serif);
  font-size: 0.92rem;
  color: var(--text-muted);
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: 10px;
}

.gallery:has(.gallery-panel.active) .gallery-empty-hint { display: none; }

/* Plain column labels (not buttons): text over a hairline rule, aligned to
   the image columns via --inset-l / --inset-r / --col-gap. */
.gallery-col-headers {
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), 1fr);
  column-gap: var(--col-gap, 4px);
  padding: 0 var(--inset-r, 0) 0 var(--inset-l, 0);
  margin-bottom: 10px;
}

.gallery-col-headers span {
  text-align: center;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.8rem;
  line-height: 1.3;
  color: var(--text-secondary);
  padding: 0 2px 6px;
  border-bottom: 1px solid var(--border-strong);
  cursor: default;
}

.gallery-col-headers span.ours {
  font-weight: 700;
  color: var(--accent);
  border-bottom-color: var(--accent);
  box-shadow: inset 0 -1px 0 var(--accent); /* 2px rule without shifting the baseline */
}

@media (max-width: 640px) {
  .gallery-col-headers span { font-size: 0.62rem; padding-bottom: 4px; }
}

/* Segmentation gallery: also give the hovered image a subtler cursor than
   the zoom-in cursor used elsewhere, since crosshair better hints at
   "point at a part" than "click to enlarge" (the image is still clickable). */
#results [data-panel="seg"] .gallery-slide img { cursor: crosshair; }

/* Part-name tooltip that follows the cursor while hovering a segmentation
   image (see the "Segmentation gallery" hover handler in main.js). */
.part-tip {
  position: fixed;
  z-index: 2000;
  pointer-events: none;
  background: rgba(17, 17, 17, 0.92);
  color: #fff;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.78rem;
  padding: 4px 10px;
  border-radius: 6px;
  white-space: nowrap;
}

.gallery {
  position: relative;
  /* Break out past the standard 1180px container/6vw padding so the examples
     render much larger — the source images are up to 2800px wide (see gallery
     re-render notes), so there's plenty of resolution for this. --gallery-w is
     the target width (viewport width minus a 20px gutter on each side, capped
     at 1500px on very wide screens); margin-left shifts the element left from
     its default position (flush with the container's padded content edge) to
     where that width, centered on the VIEWPORT, needs to start. Same technique
     as .hero-visual's bleed, but symmetric on both sides instead of one. */
  --gallery-w: min(100vw - 40px, 1500px);
  width: var(--gallery-w);
  margin-left: calc(max(0px, (100vw - var(--gallery-w)) / 2) - max(0px, (100vw - 1180px) / 2) - 6vw);
}

.gallery-viewport {
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
}

.gallery-track {
  display: flex;
  transition: transform 0.35s ease;
}

.gallery-slide {
  flex: 0 0 100%;
  max-width: 100%;
  margin: 0;
}

.gallery-slide img { width: 100%; height: auto; display: block; }

.gallery-slide img.zoomable { cursor: zoom-in; }
.gallery-slide img.zoomable:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }

/* Full-size image overlay for the qualitative results gallery */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.88);
  cursor: zoom-out;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.lightbox[hidden] { display: none; }
.lightbox.open { opacity: 1; }

.lightbox img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.lightbox-close {
  position: fixed;
  top: 12px;
  right: 16px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.lightbox-close:hover { background: rgba(255, 255, 255, 0.3); }

body.lightbox-open { overflow: hidden; }

/* On narrow screens the wide result rows would be no bigger than on the page,
   so show them at a larger fixed width and let the overlay scroll sideways. */
@media (max-width: 640px) {
  .lightbox { justify-content: flex-start; overflow-x: auto; padding: 56px 12px 24px; }
  .lightbox img { max-width: none; max-height: none; width: 220vw; }
}

.gallery-slide figcaption {
  padding: 12px 18px 16px;
  font-size: 0.88rem;
  font-family: var(--serif);
  color: var(--text-secondary);
  border-top: 1px solid var(--border);
}

.gallery-slide figcaption .fig-num {
  font-weight: 700;
  color: var(--text-primary);
  font-family: var(--sans);
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  margin-right: 4px;
}

.gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 1.1rem;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.gallery-arrow:hover { background: var(--btn-bg-hover); }
.gallery-arrow.prev { left: -14px; }
.gallery-arrow.next { right: -14px; }

@media (max-width: 640px) {
  .gallery-arrow.prev { left: 6px; }
  .gallery-arrow.next { right: 6px; }
}

.gallery-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}

.gallery-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--border-strong);
  border: none;
  padding: 0;
  cursor: pointer;
}

.gallery-dot.active { background: var(--accent); width: 18px; border-radius: 4px; }

.gallery-counter {
  text-align: center;
  font-family: var(--sans);
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 10px;
}

/* ---------- BibTeX ---------- */

.bibtex-wrap {
  position: relative;
  background: #14171c;
  border-radius: 10px;
  overflow: hidden;
}

@media (prefers-color-scheme: dark) {
  .bibtex-wrap { background: #0a0b0d; border: 1px solid var(--border); }
}

.bibtex-wrap pre {
  margin: 0;
  padding: 24px 26px;
  overflow-x: auto;
  color: #d8dee9;
  font-family: var(--mono);
  font-size: 0.82rem;
  line-height: 1.7;
}

.copy-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #d8dee9;
  background: rgba(255, 255, 255, 0.08);
  border: none;
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
}

.copy-btn:hover { background: rgba(255, 255, 255, 0.16); }

/* ---------- Footer ---------- */

footer {
  padding: 36px 0 48px;
  font-size: 0.82rem;
  color: var(--text-muted);
  font-family: var(--sans);
}

footer p { font-family: var(--sans); color: var(--text-muted); margin-bottom: 0.4em; }
footer a { color: var(--text-muted); }

/* ---------- Back to top ---------- */

.to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--btn-bg);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 20;
}

.to-top.visible { opacity: 1; pointer-events: auto; }
.to-top svg { width: 18px; height: 18px; }

/* ---------- Misc ---------- */

code.inline {
  font-family: var(--mono);
  font-size: 0.86em;
  background: var(--bg-alt);
  padding: 0.1em 0.4em;
  border-radius: 4px;
}

/* ---------- Key Insight section ---------- */

.insight-box {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: 18px 22px;
  margin: 26px 0;
}

.insight-box p { margin: 0; }
.insight-box p strong { color: var(--text-primary); }

.insight-emoji {
  font-size: 1.3rem;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 1px;
}

.insight-diagram {
  position: relative;
  margin: 34px 0;
  padding: 20px 10px 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.corr-figure-row {
  display: flex;
  gap: 16px;
  justify-content: center;
  align-items: center;   /* centre the shorter panel against the taller one */
  flex-wrap: wrap;
}

.corr-figure-item {
  flex: 1 1 220px;
  max-width: 300px;
}

.corr-figure-item-wide {
  flex: 2 1 320px;
  max-width: 460px;
}

.corr-figure-item img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
  border: 1px solid var(--border);
}

.research-question-box {
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent);
  border-radius: 10px;
  padding: 26px 28px;
  margin: 30px 0 4px;
}

.research-question-kicker {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 10px;
}

.research-question-text {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--text-primary);
  max-width: 46ch;
  margin: 0 auto;
}

@media (max-width: 600px) {
  section { padding: 40px 0; }
}