/* ==========================================================================
   Spotlight — main stylesheet
   Structure:
     1. Design tokens (:root)   ← change colors/spacing/fonts here
     2. Base & layout
     3. Components (nav, hero, buttons, cards, charts, gallery, lightbox…)
     4. Sections & utilities
     5. Responsive
     6. Reduced motion
   ========================================================================== */

/* 1. ─── Design tokens ──────────────────────────────────────────────────── */
:root{
  /* Warm neutrals / backgrounds */
  --bg:        #F6F3EC;   /* page cream */
  --bg-alt:    #FBFAF6;   /* lighter alternating band */
  --surface:   #FFFFFF;   /* card surface */
  --ink:       #221F1B;   /* warm near-black text */
  --ink-soft:  #5C564E;   /* secondary text */
  --line:      #E4DDD0;   /* hairline borders */

  /* Accents (lead -> support) */
  --gold:      #D89B2C;   /* PRIMARY accent */
  --gold-deep: #A9761A;   /* accessible text/hover on light bg */
  --sage:      #8FA9A6;
  --coral:     #CE8A80;
  --taupe:     #C9B8AC;

  /* Dark "spotlight" band */
  --dark:      #211C16;
  --dark-soft: #2E2820;
  --on-dark:   #F2ECE0;
  --on-dark-soft: #B9AE9C;

  /* Effects */
  --radius:    18px;
  --radius-sm: 12px;
  --shadow:    0 8px 30px rgba(40,33,20,.08);
  --shadow-lg: 0 20px 60px rgba(40,33,20,.12);
  --maxw:      1180px;

  /* Type */
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;
}

/* 2. ─── Base & layout ──────────────────────────────────────────────────── */
*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; scroll-padding-top: 80px; }
body{
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4{ font-family: var(--font-display); line-height: 1.15; margin: 0 0 .5em; }
a{ color: var(--gold-deep); text-decoration: none; }
a:hover{ text-decoration: underline; }
img{ max-width: 100%; display: block; }
sup{ font-size: .62em; }

.wrap{ width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 1.5rem; }
.icon{ width: 1.1em; height: 1.1em; vertical-align: -.18em; }
.muted{ color: var(--ink-soft); font-size: .92rem; }

/* 3. ─── Navigation ─────────────────────────────────────────────────────── */
.nav{
  position: sticky; top: 0; z-index: 50;
  background: rgba(246,243,236,.82);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s, box-shadow .25s, background .25s;
}
.nav.is-stuck{ border-color: var(--line); box-shadow: 0 4px 20px rgba(40,33,20,.05); }
.nav__inner{
  max-width: var(--maxw); margin: 0 auto; padding: .7rem 1.5rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.nav__brand{
  font-family: var(--font-display); font-weight: 700; font-size: 1.15rem;
  color: var(--ink); display: flex; align-items: center; gap: .5rem;
}
.nav__brand:hover{ text-decoration: none; }
.nav__torch{ font-size: 1.15rem; line-height: 1; filter: drop-shadow(0 0 6px rgba(216,155,44,.55)); }
.nav__links{ display: flex; align-items: center; gap: 1.4rem; }
.nav__links a{ color: var(--ink-soft); font-weight: 500; font-size: .95rem; }
.nav__links a:hover{ color: var(--ink); text-decoration: none; }
.nav__cta{ margin-left: .4rem; }
.nav__toggle{ display: none; background: none; border: 0; cursor: pointer; padding: .4rem; }
.nav__toggle span{ display: block; width: 22px; height: 2px; background: var(--ink); margin: 4px 0; transition: .25s; }

/* 4. ─── Buttons ────────────────────────────────────────────────────────── */
.btn{
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .7rem 1.2rem; border-radius: 999px;
  font-family: var(--font-body); font-weight: 600; font-size: .95rem;
  cursor: pointer; border: 1.5px solid transparent; transition: transform .15s, box-shadow .2s, background .2s, color .2s;
}
.btn:hover{ text-decoration: none; transform: translateY(-2px); }
.btn--primary{ background: var(--gold); color: #2a1d05; box-shadow: 0 6px 18px rgba(216,155,44,.35); }
.btn--primary:hover{ background: #e4a838; }
.btn--outline{ border-color: var(--ink); color: var(--ink); }
.btn--outline:hover{ background: var(--ink); color: var(--bg); }
.btn--ghost{ color: var(--ink-soft); border-color: var(--line); }
.btn.is-disabled{ cursor: default; opacity: .7; }
.btn.is-disabled:hover{ transform: none; }

/* ─── Hero ───────────────────────────────────────────────────────────────── */
.hero{ padding: 4.5rem 0 3rem; text-align: center;
  background: radial-gradient(120% 90% at 50% -10%, #FBF6EA 0%, var(--bg) 55%); }
.hero__inner{ display: flex; flex-direction: column; align-items: center; }
.hero__eyebrow{
  font-family: var(--font-mono); font-size: .8rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold-deep);
  background: rgba(216,155,44,.12); padding: .35rem .8rem; border-radius: 999px; margin: 0 0 1.4rem;
  animation: eyebrowGlow 2.8s ease-in-out infinite;
}
@keyframes eyebrowGlow{
  0%, 100%{ box-shadow: 0 0 0 0 rgba(216,155,44,0); background: rgba(216,155,44,.12); }
  50%{ box-shadow: 0 0 18px 2px rgba(216,155,44,.45); background: rgba(216,155,44,.22); }
}
.hero__title{ margin: 0 0 1rem; }
.hero__name{ display: block; font-size: clamp(3rem, 8vw, 5rem); font-weight: 700; letter-spacing: -.02em; }
.hero__sub{ display: block; font-size: clamp(1.1rem, 2.6vw, 1.7rem); font-weight: 500; color: var(--ink-soft); margin-top: .3rem; }
.hero__lede{ max-width: 660px; color: var(--ink-soft); font-size: 1.1rem; margin: .5rem auto 1.6rem; }
.authors{ font-size: 1.05rem; max-width: 760px; margin: 0 auto .4rem; }
.authors a{ color: var(--ink); font-weight: 600; }
.authors__sep{ color: var(--taupe); margin: 0 .15rem; }
.affils{ color: var(--ink-soft); font-size: .9rem; margin: 0 0 1.8rem; display: flex; gap: 1.2rem; flex-wrap: wrap; justify-content: center; }
.hero__cta{ display: flex; gap: .8rem; flex-wrap: wrap; justify-content: center; margin-bottom: 2.6rem; }
.hero__video{ margin: 0; width: 100%; max-width: 920px; border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid var(--line); background: #000; }
.hero__video video{ width: 100%; display: block; aspect-ratio: 16/9; object-fit: cover; }

/* ─── Sections ─────────────────────────────────────────────────────────── */
.section{ padding: 6rem 0; }
.section--alt{ background: var(--bg-alt); }
.section--dark{ background: var(--dark); color: var(--on-dark);
  background-image: radial-gradient(80% 60% at 80% 0%, rgba(216,155,44,.12), transparent 60%); }
.section--dark .section__title{ color: var(--on-dark); }
.section__head{ max-width: 720px; margin: 0 auto 3rem; text-align: center; }
.section__title{ font-size: clamp(1.7rem, 4vw, 2.4rem); font-weight: 700; letter-spacing: -.01em; }
.subhead{ font-size: 1.3rem; margin: 3.5rem 0 1.2rem; }
.eyebrow{ font-family: var(--font-mono); font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-deep); margin: 0 0 .6rem; }
.eyebrow--gold{ color: var(--gold); }
.prose{ color: var(--ink-soft); font-size: 1.08rem; }
.prose--center{ text-align: center; }
.prose--invert{ color: var(--on-dark-soft); }

/* ─── Grids ────────────────────────────────────────────────────────────── */
.grid{ display: grid; gap: 1.5rem; }
.grid--abstract{ grid-template-columns: 1.2fr .9fr; gap: 3rem; align-items: start; }
.grid--3{ grid-template-columns: repeat(3, 1fr); }
.grid--analysis{ grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center; }

/* ─── Stat tiles ───────────────────────────────────────────────────────── */
.stats{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.stat{ background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 1.3rem; box-shadow: var(--shadow); }
.stat__num{ display: block; font-family: var(--font-display); font-weight: 700; font-size: 2.3rem; color: var(--gold-deep); line-height: 1; }
.stat__label{ display: block; font-weight: 600; margin-top: .4rem; }
.stat__sub{ display: block; color: var(--ink-soft); font-size: .85rem; }

/* ─── Cards ────────────────────────────────────────────────────────────── */
.card{ background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.5rem; box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s; }
.card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.card__title{ font-size: 1.15rem; margin-bottom: .4rem; }
.card__desc{ color: var(--ink-soft); margin: 0; font-size: .98rem; }

/* ─── Taxonomy ─────────────────────────────────────────────────────────── */
.tax{ display: flex; flex-direction: column; gap: 2.2rem; }
.tax__group-name{ font-size: 1rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--ink-soft); border-left: 4px solid var(--taupe); padding-left: .7rem; margin-bottom: 1.1rem; }
.tax__group[data-accent="sage"] .tax__group-name{ border-color: var(--sage); }
.tax__group[data-accent="gold"] .tax__group-name{ border-color: var(--gold); }
.tax__group[data-accent="coral"] .tax__group-name{ border-color: var(--coral); }
.tax__cards{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.tax__card{ position: relative; }
.tax__num{ display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--bg); border: 1px solid var(--line); font-family: var(--font-mono); font-size: .85rem;
  color: var(--ink-soft); margin-bottom: .7rem; }
.tax__group[data-accent="sage"] .tax__num{ background: rgba(143,169,166,.16); color: #5d7976; }
.tax__group[data-accent="gold"] .tax__num{ background: rgba(216,155,44,.16); color: var(--gold-deep); }
.tax__group[data-accent="coral"] .tax__num{ background: rgba(206,138,128,.16); color: #a85b51; }
.tax__eg{ margin: .9rem 0 0; font-size: .9rem; color: var(--ink-soft); font-style: italic;
  border-top: 1px dashed var(--line); padding-top: .7rem; }

/* ─── Steps (metric) ───────────────────────────────────────────────────── */
.steps{ list-style: none; margin: 0 0 2rem; padding: 0; display: grid; grid-template-columns: repeat(3,1fr); gap: 1.2rem; counter-reset: s; }
.step{ position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.4rem; box-shadow: var(--shadow); }
.step:not(:last-child)::after{ content: "→"; position: absolute; right: -1.05rem; top: 50%; transform: translateY(-50%);
  color: var(--taupe); font-size: 1.3rem; z-index: 2; }
.step__n{ display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--gold); color: #2a1d05; font-family: var(--font-display); font-weight: 700; margin-bottom: .6rem; }
.step h4{ margin: 0 0 .3rem; }
.step p{ margin: 0; color: var(--ink-soft); font-size: .95rem; }

/* ─── Figures ──────────────────────────────────────────────────────────── */
.figure{ margin: 2.5rem 0 0; }
.figure img{ border-radius: var(--radius); width: 100%; }
.figure--bordered img{ border: 1px solid var(--line); box-shadow: var(--shadow); background: #fff; padding: .4rem; }
.figure figcaption{ color: var(--ink-soft); font-size: .9rem; margin-top: .9rem; text-align: center; }
.section--dark .figure figcaption{ color: var(--on-dark-soft); }

/* ─── Chart cards & toggle ─────────────────────────────────────────────── */
.chart-card{ background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.5rem; box-shadow: var(--shadow); margin-top: 1.5rem; }
.chart-card--dark{ background: var(--dark-soft); border-color: rgba(255,255,255,.08); box-shadow: none; }
.chart-card__head{ display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.chart-card__title{ margin: 0; font-size: 1.15rem; }
.chart-card--dark .chart-card__title{ color: var(--on-dark); }
.chart-card--dark .muted{ color: var(--on-dark-soft); }
.chart-card__formula{ font-family: var(--font-mono); color: var(--gold); margin: 0; }
.chart-box{ position: relative; height: 320px; }
.chart-box--tall{ height: 380px; }

/* Two key-result charts side by side */
.results-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.results-grid .chart-card{ margin-top: 0; }

.toggle{ display: inline-flex; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.chart-card--dark .toggle{ background: rgba(0,0,0,.25); border-color: rgba(255,255,255,.1); }
.toggle__btn{ border: 0; background: none; cursor: pointer; padding: .45rem .9rem; border-radius: 999px;
  font-family: var(--font-body); font-weight: 600; font-size: .85rem; color: var(--ink-soft); transition: .2s; }
.chart-card--dark .toggle__btn{ color: var(--on-dark-soft); }
.toggle__btn.is-active{ background: var(--gold); color: #2a1d05; }

/* ─── Diagnosis list ───────────────────────────────────────────────────── */
.diagnosis{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.diagnosis li{ background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--coral);
  border-radius: var(--radius-sm); padding: 1.2rem 1.4rem; box-shadow: var(--shadow); }
.diagnosis h4{ margin: 0 0 .3rem; }
.diagnosis p{ margin: 0; color: var(--ink-soft); font-size: .96rem; }

/* ─── Gallery ──────────────────────────────────────────────────────────── */
.gallery{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.gcard{ text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; cursor: pointer; padding: 0; box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s; font: inherit; color: inherit; }
.gcard:hover{ transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.gcard__thumb{ display: block; position: relative; aspect-ratio: 16/9; background-size: cover; background-position: center; background-color: #000; }
.gcard__play{ position: absolute; inset: 0; display: grid; place-items: center; color: #fff; opacity: .9; }
.gcard__play .icon{ width: 3rem; height: 3rem; filter: drop-shadow(0 2px 6px rgba(0,0,0,.5)); }
.gcard__badge{ position: absolute; top: .6rem; left: .6rem; background: rgba(0,0,0,.6); color: #fff;
  font-size: .72rem; padding: .25rem .6rem; border-radius: 999px; }
.gcard__body{ display: block; padding: 1rem 1.1rem 1.2rem; }
.gcard__prompt{ display: block; font-weight: 600; font-size: .96rem; }
.gcard__meta{ display: block; color: var(--gold-deep); font-size: .82rem; margin-top: .4rem; font-family: var(--font-mono); }
.placeholder{ text-align: center; padding: 3rem; border: 2px dashed var(--line); border-radius: var(--radius); color: var(--ink-soft); }

/* ─── Lightbox ─────────────────────────────────────────────────────────── */
.lightbox{ position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 1.5rem; }
.lightbox[hidden]{ display: none; }
.lightbox__backdrop{ position: absolute; inset: 0; background: rgba(20,16,10,.7); backdrop-filter: blur(3px); }
.lightbox__panel{ position: relative; z-index: 1; background: var(--surface); border-radius: var(--radius);
  max-width: 900px; width: 100%; max-height: 90vh; overflow: auto; box-shadow: var(--shadow-lg); }
.lightbox__close{ position: absolute; top: .6rem; right: .8rem; z-index: 3; background: rgba(0,0,0,.5); color: #fff;
  border: 0; width: 36px; height: 36px; border-radius: 50%; font-size: 1.4rem; cursor: pointer; line-height: 1; }
.lightbox__media video, .lightbox__media img{ width: 100%; display: block; aspect-ratio: 16/9; object-fit: cover; background: #000; }
.lightbox__media .placeholder{ border: 0; border-radius: 0; aspect-ratio: 16/9; display: grid; place-items: center; background: #15110b; color: var(--on-dark-soft); }
.lightbox__info{ padding: 1.4rem 1.6rem 1.8rem; }
.lightbox__model{ font-family: var(--font-mono); font-size: .8rem; color: var(--gold-deep); margin: 0 0 .3rem; text-transform: uppercase; letter-spacing: .08em; }
.lightbox__prompt{ font-weight: 600; font-size: 1.1rem; margin: 0 0 1.2rem; }

/* timeline: colored chips positioned by time */
.timeline{ position: relative; height: 38px; background: var(--bg); border: 1px solid var(--line);
  border-radius: 8px; margin-bottom: 1.2rem; overflow: hidden; }
.timeline__seg{ position: absolute; top: 4px; bottom: 4px; border-radius: 5px; opacity: .85; }
.errlist{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .7rem; }
.errlist li{ display: grid; grid-template-columns: auto 1fr; gap: .8rem; align-items: start;
  padding: .7rem .9rem; background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.err__time{ font-family: var(--font-mono); font-size: .8rem; color: var(--ink-soft); white-space: nowrap; }
.err__cat{ display: inline-block; font-size: .72rem; font-weight: 600; padding: .12rem .5rem; border-radius: 999px; margin-bottom: .25rem; }
.err__diff{ display: inline-block; font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  padding: .12rem .45rem; border-radius: 999px; margin-left: .35rem; border: 1px solid var(--line); color: var(--ink-soft); }
.err__diff--easy{ border-color: rgba(143,169,166,.5); color: #5d7976; }
.err__diff--medium{ border-color: rgba(216,155,44,.5); color: var(--gold-deep); }
.err__diff--hard{ border-color: rgba(206,138,128,.6); color: #a85b51; }
.err__text{ margin: .15rem 0 0; font-size: .95rem; }

/* category color groups (physics=sage, semantics=gold, anatomy=coral) */
.cat-sage{ background: rgba(143,169,166,.22); color: #4f6c69; }
.cat-gold{ background: rgba(216,155,44,.22); color: var(--gold-deep); }
.cat-coral{ background: rgba(206,138,128,.22); color: #9c5249; }
.seg-sage{ background: var(--sage); } .seg-gold{ background: var(--gold); } .seg-coral{ background: var(--coral); }

/* ─── BibTeX ───────────────────────────────────────────────────────────── */
.bibtex{ position: relative; max-width: 820px; margin: 0 auto; }
.bibtex pre{ background: var(--dark); color: var(--on-dark); border-radius: var(--radius);
  padding: 1.6rem; overflow-x: auto; font-family: var(--font-mono); font-size: .85rem; line-height: 1.6; margin: 0; }
.bibtex__copy{ position: absolute; top: .8rem; right: .8rem; display: inline-flex; align-items: center; gap: .4rem;
  background: rgba(255,255,255,.1); color: var(--on-dark); border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px; padding: .4rem .8rem; font-size: .8rem; cursor: pointer; }
.bibtex__copy:hover{ background: rgba(255,255,255,.18); }
.links{ display: flex; gap: .8rem; justify-content: center; margin-top: 1.8rem; flex-wrap: wrap; }

/* ─── Footer ───────────────────────────────────────────────────────────── */
.footer{ background: var(--dark); color: var(--on-dark-soft); padding: 2.5rem 0; }
.footer__inner{ text-align: center; }
.footer__brand{ font-family: var(--font-display); font-weight: 700; color: var(--on-dark); font-size: 1.1rem; margin: 0 0 .3rem; }
.footer__brand span{ color: var(--on-dark-soft); font-weight: 500; }
.footer__affil{ margin: 0 0 .6rem; font-size: .9rem; }
.footer__links{ margin: 0; display: flex; gap: 1.2rem; justify-content: center; }
.footer__links a{ color: var(--gold); }

/* ─── Reveal utility (animated in via reveal.js) ───────────────────────── */
.reveal{ opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-in{ opacity: 1; transform: none; }

/* 5. ─── Responsive ────────────────────────────────────────────────────── */
@media (max-width: 900px){
  .grid--abstract, .grid--3, .grid--analysis, .tax__cards, .steps, .gallery, .results-grid{ grid-template-columns: 1fr; }
  .step:not(:last-child)::after{ content: "↓"; right: 50%; top: auto; bottom: -1.3rem; transform: translateX(50%); }
  .tax__cards{ grid-template-columns: 1fr 1fr; }
  .gallery{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px){
  .section{ padding: 3.5rem 0; }
  .nav__toggle{ display: block; }
  .nav__links{
    position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch;
    background: var(--bg); border-bottom: 1px solid var(--line); padding: 1rem 1.5rem; gap: 1rem;
    transform: translateY(-12px); opacity: 0; pointer-events: none; transition: .25s;
  }
  .nav__links.is-open{ transform: none; opacity: 1; pointer-events: auto; }
  .nav__cta{ margin: 0; text-align: center; justify-content: center; }
  .stats, .tax__cards, .gallery{ grid-template-columns: 1fr; }
  .chart-box{ height: 280px; }
}

/* 6. ─── Reduced motion ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .reveal{ opacity: 1; transform: none; transition: none; }
  .btn:hover, .card:hover, .gcard:hover{ transform: none; }
  .hero__eyebrow{ animation: none; }
}