/* ==========================================================================
   section-stack — iteration block
   --------------------------------------------------------------------------
   Three sticky-pinned full-bleed panels, each with an autoplaying looping
   background video and a content overlay. As the user scrolls through a
   panel's 100vh range, the top progress bar fills (Milano Red #C42800);
   when that range ends, the next panel sticks to top:0 and visually
   overlays the previous one.

   PLAYGROUND MODE: raw Figma values throughout (no token snapping). Built
   from Figma node 128:2012.
   ========================================================================== */

.stack {
  /* Break out of any parent max-width — works in the playground. */
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: #07090D;
  /* Shared left anchor for the top eyebrow/progress row AND the content
     stack below. The content has width 690 px centred at 25 % + 5 px,
     so its left edge sits this many px from the viewport's left edge.
     Both .stack__top and .stack__content read off this single var, so
     the eyebrow + the hairline + the heading all share one left axis. */
  --stack-left: max(var(--teako-page-inset, 20px), calc(25% + 5px - min(345px, calc(50vw - 40px)))); /* never below the page's text axis (css/layout.css --teako-page-inset), 29 Aug 2026 */
}

/* Each panel pins at viewport top while there's scroll room below it.
   With the 100vh spacers between/after panels, each panel sticks for ~200vh
   of scroll — long enough for the progress bar to fill comfortably before
   the next panel slides up to overlay. Explicit ascending z-index makes
   later panels always cover earlier ones (no DOM-order edge cases). */
.stack__panel {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  background: #07090D;
}
.stack__panel:nth-of-type(1) { z-index: 1; }
.stack__panel:nth-of-type(2) { z-index: 2; }
.stack__panel:nth-of-type(3) { z-index: 3; }

/* Empty scroll-buffer between panels (and after the last) so each panel
   has 200vh of effective stick time instead of 100vh. The sticky panel
   above keeps covering the viewport while this empty 100vh scrolls past. */
.stack__spacer {
  height: 100vh;
  width: 100%;
}

/* Background video — full-bleed, cover-fit. */
.stack__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 0;
}

/* 50% black overlay on top of the video to give the white text contrast. */
.stack__darken {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
  pointer-events: none;
}

/* ---------- Top row: label / coords / progress bar ---------- */

.stack__top {
  position: absolute;
  top: 80px;
  /* Left and right gutters mirror each other (both = --stack-left) so the
     header row + hairline sit symmetrically on the page. Previously the
     right edge was a flat 20px, which on wider viewports left the coords
     jammed against the page edge while the left gutter grew. */
  left: var(--stack-left);
  right: var(--stack-left);
  z-index: 2;
  color: #fff;
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.stack__top-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  font-size: 11px;
  line-height: 16.5px;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.stack__top-label {
  letter-spacing: 1.54px;
}

.stack__top-coords {
  display: flex;
  gap: 12px;
  letter-spacing: 1.1px;
  white-space: nowrap;
}

.stack__progress {
  position: relative;
  height: 2px;
  width: 100%;
  background: #d9d9d9;
  overflow: hidden;
}

.stack__bar {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0%;
  background: #C42800;
  /* No transition — JS updates width every rAF tick in lockstep with the
     scroll position. A CSS transition here just adds 180 ms of lag and
     re-introduces the "tick forward in chunks" feel. */
}

/* ---------- Bottom-left content block ---------- */

/* Anchored to --stack-left so the heading's left edge lines up
   perfectly with the top eyebrow + hairline rule above it. */
.stack__content {
  position: absolute;
  left: var(--stack-left);
  top: 50%;
  transform: translateY(-50%);
  width: min(690px, calc(100vw - 80px));
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: #fff;
}

.stack__eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  line-height: 16.5px;
  letter-spacing: 1.54px;
  text-transform: uppercase;
  color: #fff;
}

.stack__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #C42800;
  flex-shrink: 0;
}

.stack__heading {
  margin: 0;
  font-family: 'Geologica', system-ui, sans-serif;
  font-weight: 300;
  font-size: 48px;
  line-height: 58.8px;
  letter-spacing: -1.12px;
  color: #f0f1f4;
}

.stack__body {
  margin: 0;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 30px;
  color: #b5b8c2;
  max-width: 60ch;
}

.stack__cta {
  align-self: flex-start;
  background: #fff;
  /* D2: one rectangular button system — radius 0 everywhere. */
  border-radius: 0;
  padding: 13.75px 24px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  font-weight: 500;
  line-height: 19.5px;
  letter-spacing: 1.04px;
  color: #181a1f;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  margin-top: 16px;
}
.stack__cta svg {
  width: 20px;
  height: 17px;
  display: block;
}

/* ---------- Mobile (2026-07) ---------- */
/* The header row collided at phone width: the coords are desktop chrome,
   the label gets one clean line, the heading steps down. */
@media (max-width: 760px) {
  .stack__top { top: 84px; }
  /* Phones (client, 29 Aug 2026 correction): the panel index ("01 — Heritage")
     stays top-LEFT; the coordinates + location sit UNDER the hairline,
     right-aligned. (They were hidden on phones before 28 Aug.) */
  .stack__top-coords { display: flex; position: absolute; right: 0; top: calc(100% + 8px); font-size: 9px; letter-spacing: 0.9px; gap: 8px; opacity: 0.8; }
  .stack__top-label { font-size: 10px; letter-spacing: 1.2px; }
  .stack__heading { font-size: 32px; line-height: 1.2; letter-spacing: -0.6px; }
}

@media (max-width: 760px) {
  /* Golden-section layout (client call): the eyebrow rides the upper
     golden line (38.2vh) while the heading, body and CTA anchor toward
     the base of the remaining 61.8 — kicker high, story low. */
  .stack__content {
    top: 38.2vh;
    transform: none;
    /* Story block sits lower on phones (client, 28 Aug 2026): bottom gap
       88 → 48px, and it anchors to the base now the eyebrow is gone. */
    height: calc(61.8vh - 48px);
    width: calc(100vw - 40px);
    gap: 0;
    justify-content: flex-end;
  }
  /* "● Heritage / Geology …" duplicated the top index on phones — removed
     (client, 28 Aug 2026). */
  .stack__eyebrow { display: none; }
  .stack__heading { margin: 0 0 14px; }
  .stack__body { margin: 0 0 22px; }
}


/* Display headings in Geologica (2026-08-02). */
.stack__heading { font-family: 'Geologica', system-ui, sans-serif; }