/* Global layout, hero, section chrome, figures, citations, motion. Tokens only.
   Decoration is limited to hairlines and the one amber bar; no filled boxes. */

/* ---------- layout ---------- */
body { position: relative; }
.grid-2 { display: grid; grid-template-columns: 5fr 7fr; gap: 4rem; align-items: start; }
.grid-2.media-left { grid-template-columns: 7fr 5fr; }
p { margin: 0 0 1rem; }
p.narrow { max-width: 34rem; }

/* ---------- type ---------- */
.eyebrow {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}
.sec-title {
  font-family: var(--font-display);
  font-weight: 300;
  text-transform: uppercase;
  font-size: 2.4rem;
  letter-spacing: 0.08em;
  line-height: 1.2;
  margin: 0.7rem 0 1.4rem;
}
.lead {
  border-left: 1px solid var(--line-strong);
  padding-left: 1.2rem;
  max-width: 34rem;
  margin: 0 0 1.4rem;
}
.muted { color: var(--muted); }
.mono { font-family: var(--font-mono); }

/* ---------- top bar: three groups, like the reference ---------- */
.topbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  padding: 28px var(--x-edge) 0 var(--x-text);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.9rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.topbar a { color: var(--muted); text-decoration: none; }
.topbar a:hover { color: var(--text); }
.topbar-left { display: flex; align-items: flex-start; }
.topbar-nav { display: flex; gap: 2.4rem; padding-top: 0.9rem; position: relative; }
.topbar-nav a { display: inline-flex; align-items: center; gap: 0.6rem; }
.icon { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.topbar-rule { position: absolute; left: 0; top: 0; width: 5rem; height: 1px; background: var(--line-strong); }
.topbar-center { display: flex; flex-direction: column; align-items: center; gap: 0.1rem; font-size: 0.74rem; letter-spacing: 0.26em; color: var(--muted); padding-top: 0.9rem; }
.menu-toggle {
  justify-self: end;
  background: none; border: 0; padding: 0.9rem 0 0; cursor: pointer;
  display: flex; flex-direction: column; gap: 5px;
}
.menu-toggle span { display: block; width: 26px; height: 1px; background: var(--text); }
.menu {
  position: fixed; inset: 0; z-index: 19;
  background: var(--bg);
  /* the list starts below the top bar and scrolls when the screen is short */
  box-sizing: border-box; padding: 130px var(--gutter) 40px; overflow-y: auto;
  display: flex; flex-direction: column; justify-content: flex-start; align-items: center;
  font-family: var(--font-display); font-weight: 300; font-size: 2rem; letter-spacing: 0.16em; text-transform: uppercase;
}
/* centred when the list fits, top-aligned below the bar when it does not */
.menu-list { display: flex; flex-direction: column; align-items: center; gap: 1.4rem; margin: auto 0; }
@media (max-height: 760px) {
  .menu { padding-top: 104px; font-size: 1.25rem; }
  .menu-list { gap: 0.45rem; }
}
.menu[hidden] { display: none; }
.menu a { color: var(--text); text-decoration: none; }
.menu a span { color: var(--accent); font-size: 0.9rem; letter-spacing: 0.24em; margin-right: 1.2rem; font-weight: 400; }

/* ---------- hero: text left third, subject right two thirds, no overlap ---------- */
.hero { position: relative; height: 100vh; overflow: hidden; background: var(--bg); }
.hero-stage {
  position: absolute; top: 8%; bottom: 12%; right: 4%; width: 56%;
  /* the loop's exploded view reaches farther out than the still, so the solid part is wider */
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 70%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 70%, transparent 100%);
}
.hero-video { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; background: var(--bg); }
.hero-left {
  position: absolute; left: 0; top: 0; bottom: 0; width: 34%;
  display: flex; align-items: center;
  padding: 0 var(--gutter) 0 0;
}
.hero-spine { position: absolute; left: var(--x-edge); top: 30%; bottom: 20%; width: 1px; background: var(--line-strong); }
.hero-block { padding-left: var(--x-text); }
.hero-line { width: 5rem; height: 2px; background: var(--accent); box-shadow: 0 0 16px var(--accent); margin-bottom: 1.6rem; }
.hero-title {
  font-family: var(--font-display);
  font-weight: 300;
  text-transform: uppercase;
  font-size: clamp(2.3rem, 2.8vw, 3.5rem);
  line-height: 1.12;
  letter-spacing: 0.1em;
  margin: 0 0 3rem;
}
.hero-title span { display: block; white-space: nowrap; }
.hero-title .big { color: var(--text); }
.hero-title .small { color: var(--muted); font-size: 0.55em; line-height: 1.5; letter-spacing: 0.3em; font-weight: 400; }
.hero-label { font-family: var(--font-display); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--text); margin: 0 0 0.9rem; }
.hero-text { color: var(--muted); font-size: 0.86rem; line-height: 1.6; max-width: 23rem; margin: 0 0 0.9rem; }
.hero-edge { position: absolute; right: var(--x-edge); top: 44%; width: 1px; height: 4rem; background: var(--line-strong); }
.hero-foot {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: end;
  padding: 0 var(--x-edge) 2rem;
  font-family: var(--font-display); font-weight: 500; font-size: 0.88rem; letter-spacing: 0.22em; text-transform: uppercase;
}
.hero-foot-side { color: var(--muted); text-decoration: none; display: flex; align-items: center; gap: 0.8rem; }
.hero-foot-side:last-child { justify-self: end; }
.hero-foot-side:hover { color: var(--text); }
.hero-foot-side .arrow { font-size: 0.7rem; color: var(--text); }
.hero-foot-center { display: flex; flex-direction: column; align-items: center; gap: 0.9rem; }
.hero-foot-label { margin: 0; color: var(--text); font-size: 0.72rem; }
.hero-dots { display: flex; gap: 1.1rem; align-items: center; }
.dot { width: 5px; height: 5px; border-radius: 50%; background: var(--muted); display: block; }
.dot.is-current { width: 11px; height: 11px; background: none; border: 1px solid var(--text); }
.dot:hover { background: var(--text); }

/* ---------- sections: left-anchored like the hero, spine hairline at --x-edge ---------- */
.wrap {
  max-width: calc(var(--max-width) + var(--x-text) + var(--x-edge));
  margin: 0;
  padding: 0 var(--x-edge) 0 var(--x-text);
}
.sec { padding: 7rem 0; }
.sec.alt { background: var(--bg-2); }
.sec-head { position: relative; margin-bottom: 3.5rem; max-width: 44rem; }
.sec-head::before {
  content: ""; position: absolute; top: 0.3rem; bottom: 0;
  left: calc(var(--x-edge) - var(--x-text));
  width: 1px; background: var(--line-strong);
}
.eyebrow .num { color: var(--accent); margin-right: 1rem; }
.lead { border-left: 0; padding-left: 0; max-width: 40rem; font-size: 1.15rem; line-height: 1.6; margin: 0; }
.sub-title {
  font-family: var(--font-display); font-weight: 500; font-size: 0.86rem;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted);
  margin: 2.6rem 0 0.9rem;
}
.sub-title:first-child { margin-top: 0; }
.sub-title .num { color: var(--accent); margin-right: 0.8rem; }
.col-text p { max-width: 34rem; }

/* callout: the one mechanism that matters, between two hairlines, no fill */
.callout { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 1.5rem 0; margin: 2.2rem 0; max-width: 34rem; }
.callout p { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 1.3rem; line-height: 1.45; letter-spacing: 0.02em; color: var(--text); }

/* figures: white paper figures on a plate, dark renders and clips straight on black */
.figure { margin: 0 0 2.6rem; }
.figure:last-child { margin-bottom: 0; }
.plate { background: var(--plate); border: 1px solid var(--line); border-radius: 4px; padding: 10px; }
.plate img { display: block; width: 100%; border-radius: 2px; }
.render, .clip { display: block; width: 100%; border-radius: 2px; background: var(--bg); }
.media-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.caption { color: var(--muted); font-size: 0.9rem; line-height: 1.55; margin: 0.9rem 0 0; max-width: 44rem; }
.caption .fig, .caption b {
  font-family: var(--font-display); font-weight: 500; font-size: 0.76rem;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--text); margin-right: 0.8rem;
}
.caption strong { font-weight: 500; color: var(--text); }
.rule { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

/* citations and the references list */
.cite { font-size: 0.66em; line-height: 0; vertical-align: super; margin-left: 0.12em; }
.cite a { color: var(--muted); text-decoration: none; }
.cite a:hover { color: var(--accent); }
.refs { list-style: none; margin: 0; padding: 0; max-width: 56rem; border-bottom: 1px solid var(--line); }
.refs li { display: grid; grid-template-columns: 3rem 1fr; gap: 0.6rem; padding: 0.6rem 0; border-top: 1px solid var(--line); font-size: 0.9rem; line-height: 1.5; color: var(--muted); }
.refs li:target .ref-text { color: var(--text); }
.ref-num { font-family: var(--font-display); font-weight: 500; letter-spacing: 0.1em; color: var(--accent); padding-top: 0.1rem; }

/* ---------- slides: every section after the hero uses the hero geometry ---------- */
/* the deck runs left to right: main is the track, every section one viewport wide */
html, body { height: 100%; overflow: hidden; }
main {
  display: flex; flex-direction: row; height: 100vh;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none;
}
main::-webkit-scrollbar { display: none; }
main > section { flex: 0 0 100vw; width: 100vw; height: 100vh; scroll-snap-align: start; scroll-snap-stop: always; }
.footer { display: none; }
.slide { position: relative; height: 100vh; overflow: hidden; background: var(--bg); }
.slide.alt { background: var(--bg-2); }
.slide-left { position: absolute; left: 0; top: 0; bottom: 0; width: 36%; display: flex; align-items: center; }
.slide-spine { position: absolute; left: var(--x-edge); top: 30%; bottom: 22%; width: 1px; background: var(--line-strong); }
.slide-block { padding: 0 1.5rem 0 var(--x-text); }
.slide-block .eyebrow { margin-bottom: 1.1rem; }
.slide-title {
  font-family: var(--font-display); font-weight: 300; text-transform: uppercase;
  font-size: clamp(1.6rem, 2vw, 2.5rem); letter-spacing: 0.1em; line-height: 1.15; margin: 0 0 1.5rem;
}
.slide-text { font-size: 0.95rem; line-height: 1.6; max-width: 26rem; margin: 0 0 0.9rem; }
.slide-callout { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 1rem 0; margin: 1.4rem 0 0; max-width: 26rem; }
.slide-callout p { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 1.15rem; line-height: 1.4; color: var(--text); }
/* the media box is the hero stage; one image, clip or row per slide, the caption under it */
/* media and caption centre as a group; the fit script shrinks a group that is taller than the stage */
.slide-stage { position: absolute; top: max(9%, 104px); bottom: 15%; right: 4%; width: 56%; display: flex; flex-direction: column; justify-content: center; }
/* media and caption travel as one group, centred on the text column's centre line */
.slide-media { flex: 0 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; gap: 12px; }
.slide-media > img, .slide-media > video { max-width: 100%; max-height: 62vh; width: auto; height: auto; min-width: 0; flex: 0 1 auto; display: block; border-radius: 2px; object-fit: contain; }
.slide-media > .plate-img { box-sizing: border-box; background: var(--plate); padding: 10px; border: 1px solid var(--line); border-radius: 4px; }
.slide-media > .clip { background: var(--bg); }
/* four items: two rows of two inside the stage */
.slide-media.grid-2x2 { flex-wrap: wrap; align-content: center; }
.slide-media.grid-2x2 > img, .slide-media.grid-2x2 > video { flex: 0 1 calc(50% - 6px); max-height: 30vh; }
.slide-stage .caption { flex: 0 0 auto; margin: 1.1rem 0 0; max-width: 100%; }
.slide-foot { position: absolute; }
/* the references: the list scrolls inside the stage box */
.refs-stage { justify-content: flex-start; top: 18%; }
.refs-scroll { height: 100%; overflow-y: auto; padding-right: 1.5rem; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.refs-scroll .refs { max-width: none; }
.refs-scroll .refs li { font-size: 0.84rem; padding: 0.5rem 0; }
@media (max-width: 900px) { .refs-scroll { height: auto; max-height: none; overflow: visible; padding-right: 0; } }
/* a slide without media: the text column takes the width, the callout is the subject */
.slide.wide .slide-left { width: 64%; }
.slide.wide .slide-text { max-width: 36rem; }
.slide.wide .slide-callout { max-width: 40rem; padding: 1.4rem 0; }
.slide.wide .slide-callout p { font-size: 1.5rem; line-height: 1.4; }

/* ---------- desktop: the text columns stay clear of the bars; centred when the text fits,
   top-aligned and scrollable inside the column when it does not ---------- */
@media (min-width: 901px) {
  .hero-left, .slide-left { top: 96px; bottom: 96px; align-items: stretch; overflow-y: auto; scrollbar-width: none; }
  .hero-left::-webkit-scrollbar, .slide-left::-webkit-scrollbar { display: none; }
  .hero-block, .slide-block { margin: auto 0; }
  .hero-spine, .slide-spine { top: 12%; bottom: 12%; }
}

/* ---------- short desktop viewports (laptops at high scaling): tighter vertical rhythm ---------- */
@media (min-width: 901px) and (max-height: 860px) {
  .hero-left, .slide-left { top: 64px; bottom: 64px; }
  .topbar { padding-top: 14px; }
  .hero-spine, .slide-spine { top: 12%; bottom: 12%; }
  .hero-title { font-size: clamp(1.5rem, 1.9vw, 2.2rem); margin-bottom: 1rem; }
  .hero-line { margin-bottom: 0.8rem; }
  .hero-label { margin-bottom: 0.5rem; }
  .hero-text { font-size: 0.74rem; line-height: 1.45; margin-bottom: 0.6rem; }
  .hero-stage { top: 9%; bottom: 14%; }
  .hero-foot, .slide-foot { padding-bottom: 1rem; }
  .slide-title { font-size: clamp(1.3rem, 1.7vw, 2rem); margin-bottom: 0.9rem; }
  .slide-text { font-size: 0.86rem; line-height: 1.5; margin-bottom: 0.6rem; }
  .slide-callout { padding: 0.7rem 0; margin-top: 0.9rem; }
  .slide-callout p { font-size: 1rem; }
  .slide-stage { top: max(9%, 92px); bottom: 14%; }
  .slide-stage .caption { font-size: 0.8rem; margin-top: 0.7rem; }
  .slide-media > img, .slide-media > video { max-height: 56vh; }
}

/* ---------- footer ---------- */
.footer { padding: 4rem 0 3rem; border-top: 1px solid var(--line); }

/* ---------- motion ---------- */
.fade-up { opacity: 0; transform: translateY(12px); transition: opacity 0.4s ease, transform 0.4s ease; }
.fade-up.is-visible { opacity: 1; transform: none; }
body.is-capture .fade-up { opacity: 1; transform: none; transition: none; }
@media (min-width: 901px) {
  /* captures use a window as tall as the page, so viewport units are replaced by the 1080 px slide */
  html.is-capture, body.is-capture { height: auto; overflow: visible; }
  body.is-capture main { display: block; height: auto; overflow: visible; scroll-snap-type: none; }
  body.is-capture main > section { width: auto; height: auto; }
  body.is-capture .hero, body.is-capture .slide { height: 1080px; min-height: 1080px; max-height: 1080px; }
  body.is-capture .slide-media > img, body.is-capture .slide-media > video { max-height: 670px; }
  body.is-capture .slide-media.grid-2x2 > img, body.is-capture .slide-media.grid-2x2 > video { max-height: 324px; }
}

/* ---------- phones ---------- */
@media (max-width: 900px) {
  .grid-2, .grid-2.media-left { grid-template-columns: 1fr; gap: 2rem; }
  .topbar { position: relative; z-index: 20; grid-template-columns: 1fr auto; padding: 18px var(--gutter) 0 calc(var(--gutter) + 2.2rem); }
  .menu { padding-top: 90px; font-size: 1.5rem; }
  .menu-list { gap: 1rem; }
  .menu-toggle { grid-column: 2; }
  .topbar-center { display: none; }
  .hero { height: auto; min-height: 0; padding-bottom: 6rem; }
  /* the still is 4:3; the stage takes that height so the edge fade meets the render's edges */
  .hero-stage {
    position: relative; width: 100%; height: 75vw; max-height: 56vh; top: auto; bottom: auto; right: auto;
    -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 50%, transparent 96%);
    mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 50%, transparent 96%);
  }
  .hero-left { position: relative; width: 100%; padding-top: 2rem; }
  .hero-spine { top: 0; bottom: 0; }
  .hero-left { padding-left: var(--gutter); }
  .hero-block { padding-left: 2.2rem; }
  .hero-spine { left: calc(var(--gutter) + 0.4rem); }
  .hero-title { font-size: 1.5rem; letter-spacing: 0.1em; }
  .hero .hero-title span { white-space: normal !important; }
  .hero-left { min-width: 0; }
  .hero-block { min-width: 0; max-width: 100%; }
  .hero-text { max-width: 100%; }
  .hero-edge { display: none; }
  .hero-foot { position: relative; grid-template-columns: 1fr; gap: 1.2rem; justify-items: center; padding: 2rem var(--gutter) 2rem; }
  .hero-foot-side:last-child { justify-self: center; }
  html, body { height: auto; overflow: visible; }
  main { display: block; height: auto; overflow: visible; scroll-snap-type: none; }
  main > section { width: auto; height: auto; }
  .footer { display: block; }
  .slide { height: auto; min-height: 0; display: flex; flex-direction: column; padding-bottom: 1rem; }
  /* phones: the text first, then the media, then the bar */
  .slide-stage { position: relative; order: 1; width: 100%; top: auto; bottom: auto; right: auto; padding: 1rem var(--gutter) 0; }
  .slide-media > img, .slide-media > video { max-height: 60vh; }
  .slide-left { position: relative; order: 0; width: 100%; padding: 2.5rem 0 0 var(--gutter); }
  .slide-block { padding: 0 var(--gutter) 0 2.2rem; }
  .slide-spine { left: calc(var(--gutter) + 0.4rem); top: 0; bottom: 0; }
  .slide-foot { position: relative; order: 2; }
  .sec { padding: 5rem 0; }
  .sec-title { font-size: 1.8rem; }
  .wrap { padding: 0 var(--gutter); }
  .sec-head { padding-left: 1.2rem; }
  .sec-head::before { left: 0; }
  .callout p { font-size: 1.12rem; }
  .refs li { grid-template-columns: 2.4rem 1fr; }
}

/* ---------- phones: the title wraps, the block never exceeds the viewport ---------- */
@media (max-width: 900px) {
  .hero .hero-title span { white-space: normal !important; }
  .hero-left { min-width: 0; }
  .hero-block { min-width: 0; max-width: 100%; }
  .hero-text { max-width: 100%; }
}