/* ============================================================
   /arc/ — the visual synopsis.
   Full-bleed image + tight text, one beat per viewport, scroll-snap pager.
   Contrast: text sits over the bottom ~40% where the scrim is ≥0.96 opaque
   near-black, so cream (#f1eee1) clears the 8:1 floor over any image.
   ============================================================ */

/* immersive overlay — covers the site chrome (timeline scrubber, footer) */
.arc {
  position: fixed;
  inset: 0;
  z-index: 9000;
  height: 100vh;
  height: 100svh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  background: #050509;
  outline: none;
}
.arc::-webkit-scrollbar { display: none; }
/* stop the page behind the overlay from scrolling too */
body:has(.arc) { overflow: hidden; }

/* top progress bar */
.arc-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 30;
  background: rgba(255, 255, 255, 0.08);
}
.arc-progress__bar {
  display: block;
  height: 100%;
  width: 0;
  background: var(--page-accent, #8dff5a);
  transition: width 0.35s ease, background 0.5s ease;
}

/* one beat = one screen */
.arc-page {
  position: relative;
  height: 100vh;
  height: 100svh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  background: #050509;
}

.arc-page__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* darkness ramps up toward the bottom where the text lives.
   The bottom ~48% holds ≥0.96 opacity so even over a pure-white image the local
   background luminance stays ≤~0.042 → cream text (#f1eee1, L≈0.85) clears 8:1
   (computed worst case ≈9.9:1). Above the text it fades to reveal the image. */
.arc-page__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to top,
    rgba(5, 5, 9, 0.99) 0%,
    rgba(5, 5, 9, 0.97) 40%,
    rgba(5, 5, 9, 0.96) 48%,
    rgba(5, 5, 9, 0.58) 62%,
    rgba(5, 5, 9, 0.14) 82%,
    rgba(5, 5, 9, 0.42) 100%
  );
}

.arc-page__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  padding: 0 clamp(1.4rem, 6vw, 5rem) clamp(2.2rem, 10vh, 6rem);
  /* hard safety net: text can never exceed the viewport */
  max-height: 100%;
  overflow: hidden;
}

.arc-page__meta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem 1.1rem;
  margin-bottom: 0.9rem;
  font: 600 0.78rem/1.2 ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.arc-page__act { color: var(--accent, #8dff5a); }
.arc-page__date { color: #c9c6b6; }
.arc-page__thread {
  margin-left: auto;
  color: var(--accent, #f1eee1);
  border: 1px solid currentColor;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  font-size: 0.7rem;
}

.arc-page__hook {
  margin: 0 0 0.7rem;
  color: #f6f3e7;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: clamp(1.9rem, 5.4vw, 3.5rem);
  line-height: 1.04;
  letter-spacing: -0.01em;
  text-wrap: balance;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.7);
}

.arc-page__caption {
  margin: 0 0 1.3rem;
  color: #f1eee1; /* on ≥0.96 dark scrim → ~14:1 */
  font-size: clamp(1.02rem, 2.3vw, 1.4rem);
  line-height: 1.5;
  max-width: 60ch;
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.75);
}

.arc-page__read {
  display: inline-block;
  color: var(--accent, #8dff5a);
  font: 600 0.92rem/1 ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: 0.04em;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}
.arc-page__read:hover,
.arc:focus-visible .arc-page__read:focus { border-bottom-color: currentColor; }

.arc-page__counter {
  position: absolute;
  z-index: 2;
  top: clamp(1rem, 4vh, 2.2rem);
  right: clamp(1.2rem, 5vw, 3rem);
  font: 700 1.1rem/1 ui-monospace, "SF Mono", Menlo, monospace;
  color: #f1eee1;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.9);
}
.arc-page__counter span { color: rgba(241, 238, 225, 0.55); font-weight: 500; font-size: 0.85em; }

/* closing card — no image */
.arc-page--end {
  align-items: center;
  justify-content: center;
  text-align: center;
  background:
    radial-gradient(120% 90% at 50% 40%, #12141c 0%, #070709 60%, #050507 100%);
}
.arc-page--end .arc-page__inner { text-align: center; }
.arc-end-nav {
  display: flex;
  gap: 1.4rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}
.arc-end-nav a {
  color: #8dff5a;
  font: 600 0.95rem/1 ui-monospace, "SF Mono", Menlo, monospace;
  text-decoration: none;
  border-bottom: 1px solid rgba(141, 255, 90, 0.35);
  padding-bottom: 2px;
}
.arc-end-nav a:hover { border-bottom-color: #8dff5a; }

/* ── backstory on-ramp (/start/<slug>/) extras ── */
.arc-skip {
  position: fixed;
  top: clamp(0.9rem, 3.6vh, 1.9rem);
  left: clamp(1.2rem, 5vw, 3rem);
  z-index: 31;
  color: #f1eee1;
  font: 600 0.8rem/1 ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: 0.04em;
  text-decoration: none;
  opacity: 0.72;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.95);
}
.arc-skip:hover { opacity: 1; }

/* "Enter this node" — cream on a near-black button (≈14:1) with an accent border;
   the accent itself is decorative, so mid-tone thread colors never gate text contrast. */
.arc-page__enter {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.3rem;
  padding: 0.72rem 1.45rem;
  border-radius: 6px;
  background: rgba(8, 8, 12, 0.86);
  border: 1.5px solid var(--accent, #8dff5a);
  color: #f4f1e6;
  font: 700 0.98rem/1 ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: 0.02em;
  text-decoration: none;
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.5);
  transition: transform 0.15s ease, background 0.15s ease;
}
.arc-page__enter:hover { background: rgba(20, 20, 28, 0.94); transform: translateY(-1px); }

@media (prefers-reduced-motion: reduce) {
  .arc { scroll-behavior: auto; }
  .arc-progress__bar { transition: none; }
  .arc-page__enter:hover { transform: none; }
}