/* ======================================================
   Sayonara_Alice.exe — v71_archive_page.css
   Blocco 03 — The Complete Visual Archive (visual-archive.html)
   ------------------------------------------------------
   Depends on v71.css for: --v71-gallery-max/gutter/rail-safe,
   --v71-radius, --v71-gap, .v71-archive-trigger base,
   .v71-sr-only, .v71-reveal system, .v71-bloom/.v71-scan/
   .v71-drift variants, .v71-transition, .v71-lightbox.
   Loaded after v71.css. Nothing here redefines those rules —
   only extends them for this page's own layout.
====================================================== */

.v71-archivepage {
  position: relative;
  display: block;
  padding: clamp(6.5rem, 12vw, 8.5rem) 0 4rem;
  overflow-x: hidden;
}

.v71-archivepage::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 40% at 15% 0%, rgba(0, 220, 255, .06), transparent 60%),
    radial-gradient(ellipse 55% 45% at 90% 35%, rgba(70, 130, 255, .05), transparent 65%),
    radial-gradient(ellipse 55% 40% at 20% 85%, rgba(0, 220, 255, .045), transparent 65%),
    linear-gradient(180deg, #02050a 0%, #05070c 100%);
}

.v71-archivepage::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 3%;
  bottom: 3%;
  width: 1px;
  z-index: 0;
  pointer-events: none;
  transform: translateX(-50%);
  background: linear-gradient(
    to bottom, transparent,
    rgba(0, 220, 255, .1) 10%, rgba(0, 220, 255, .1) 90%,
    transparent
  );
}

@media (max-width: 640px) {
  .v71-archivepage::after { display: none; }
}

.v71-archivepage > * {
  position: relative;
  z-index: 1;
}

/* ------------------------------------------------------
   Shared safe-area container, same logic as the Home Gallery
------------------------------------------------------ */

.v71-archivepage-intro,
.v71-archivepage-act,
.v71-archivepage-transition,
.v71-archivepage-footer {
  width: 100%;
  max-width: var(--v71-gallery-max);
  margin-inline: auto;
  box-sizing: border-box;
  padding-inline: var(--v71-gallery-gutter);
  padding-right: calc(var(--v71-gallery-gutter) + var(--v71-rail-safe));
}

/* ------------------------------------------------------
   Intro
------------------------------------------------------ */

.v71-archivepage-intro {
  text-align: center;
  padding-top: 0;
  padding-bottom: 1rem;
}

.v71-archivepage-kicker {
  margin: 0 0 .8rem;
  color: rgba(158, 244, 255, .78);
  font: 800 .78rem/1.4 "Courier New", Consolas, monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.v71-archivepage-intro h1 {
  margin: 0 0 .9rem;
  color: #eaffff;
  font-size: clamp(1.9rem, 5vw, 3rem);
  line-height: 1.15;
}

.v71-archivepage-subtitle {
  margin: 0 auto 1rem;
  max-width: 620px;
  color: rgba(220, 250, 255, .72);
  font-size: 1rem;
  line-height: 1.65;
}

.v71-archivepage-count {
  margin: 0 0 1.6rem;
  color: rgba(158, 244, 255, .6);
  font: 700 .74rem/1.4 "Courier New", Consolas, monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.v71-archivepage-jump {
  display: flex;
  justify-content: center;
  gap: .6rem;
  flex-wrap: wrap;
}

.v71-archivepage-jump a {
  padding: .5rem 1.1rem;
  border-radius: 999px;
  border: 1px solid rgba(0, 220, 255, .26);
  color: #eaffff;
  text-decoration: none;
  font: 700 .74rem/1 "Courier New", Consolas, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: linear-gradient(135deg, rgba(0, 32, 44, .45), rgba(0, 0, 0, .28));
  transition: border-color .18s ease, box-shadow .18s ease;
}

.v71-archivepage-jump a:hover,
.v71-archivepage-jump a:focus-visible {
  border-color: rgba(120, 235, 255, .8);
  box-shadow: 0 0 0 3px rgba(0, 220, 255, .2);
}

.v71-archivepage-jump a:focus-visible {
  outline: none;
}

/* ------------------------------------------------------
   Transition connectors — same visual language as the Home
   Gallery's, scoped to this page for independent tuning.
------------------------------------------------------ */

.v71-archivepage-transition {
  margin-top: clamp(2.4rem, 5vw, 3.6rem);
  margin-bottom: 0;
}

/* ------------------------------------------------------
   Acts
------------------------------------------------------ */

.v71-archivepage-act {
  margin-top: clamp(2.4rem, 5vw, 3.6rem);
  scroll-margin-top: clamp(110px, 12vw, 150px);
}

/* ------------------------------------------------------
   Constellation grids — repeatable featured/standard pattern,
   never randomized, never row-spanning (avoids fragile grid
   height reconciliation): a featured card only spans an extra
   COLUMN, so it reads as wider/more important without forcing
   any cross-row height math.
------------------------------------------------------ */

.v71-fullarchive-grid {
  display: grid;
  gap: var(--v71-gap);
  grid-auto-flow: row dense;
}

.v71-fullarchive-grid--core {
  grid-template-columns: repeat(4, 1fr);
}

.v71-fullarchive-grid--fragments {
  grid-template-columns: repeat(5, 1fr);
}

.v71-fullarchive-grid--echo {
  grid-template-columns: repeat(4, 1fr);
  max-width: 900px;
  margin-inline: auto;
}

.v71-fullarchive-card.is-featured {
  grid-column: span 2;
}

@media (max-width: 980px) {
  .v71-fullarchive-grid--core { grid-template-columns: repeat(3, 1fr); }
  .v71-fullarchive-grid--fragments { grid-template-columns: repeat(3, 1fr); }
  .v71-fullarchive-grid--echo { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
  .v71-fullarchive-grid--core { grid-template-columns: repeat(2, 1fr); }
  .v71-fullarchive-grid--fragments { grid-template-columns: repeat(2, 1fr); }
  .v71-fullarchive-grid--echo { grid-template-columns: repeat(2, 1fr); }
  /* Mobile: order simplifies, no featured spanning. */
  .v71-fullarchive-card.is-featured { grid-column: span 1; }
}

@media (max-width: 359px) {
  .v71-fullarchive-grid--core,
  .v71-fullarchive-grid--fragments,
  .v71-fullarchive-grid--echo {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------
   Card micro-copy: index always visible (discreet), state
   label appears on hover/focus for fine-pointer devices only
   — never depended on for touch, per spec F2.
------------------------------------------------------ */

.v71-fullarchive-card {
  position: relative;
}

.v71-fullarchive-index {
  position: absolute;
  left: .5rem;
  bottom: .5rem;
  padding: .18rem .5rem;
  border-radius: 999px;
  background: rgba(2, 10, 14, .58);
  color: rgba(234, 255, 255, .65);
  font: 700 .6rem/1 "Courier New", Consolas, monospace;
  letter-spacing: .06em;
  pointer-events: none;
  z-index: 1;
}

.v71-fullarchive-state {
  position: absolute;
  right: .5rem;
  bottom: .5rem;
  padding: .18rem .55rem;
  border-radius: 999px;
  background: rgba(2, 10, 14, .68);
  border: 1px solid rgba(0, 220, 255, .3);
  color: rgba(158, 244, 255, .85);
  font: 700 .56rem/1 "Courier New", Consolas, monospace;
  letter-spacing: .07em;
  text-transform: uppercase;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .2s ease, transform .2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .v71-fullarchive-card:hover .v71-fullarchive-state,
  .v71-fullarchive-card:focus-visible .v71-fullarchive-state {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .v71-fullarchive-state {
    transition: none !important;
  }
}

/* ------------------------------------------------------
   Footer / back to site
------------------------------------------------------ */

.v71-archivepage-footer {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  text-align: center;
}

.v71-archivepage-back {
  display: inline-flex;
  align-items: center;
  padding: .65rem 1.3rem;
  border-radius: 999px;
  border: 1px solid rgba(0, 220, 255, .28);
  color: #eaffff;
  text-decoration: none;
  font: 700 .78rem/1 "Courier New", Consolas, monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: linear-gradient(135deg, rgba(0, 32, 44, .5), rgba(0, 0, 0, .3));
  transition: border-color .18s ease, box-shadow .18s ease;
}

.v71-archivepage-back:hover,
.v71-archivepage-back:focus-visible {
  border-color: rgba(120, 235, 255, .8);
  box-shadow: 0 0 0 3px rgba(0, 220, 255, .2);
}

.v71-archivepage-back:focus-visible {
  outline: none;
}

/* ======================================================
   Blocco 03a — Immersive Cinematic Polish
====================================================== */

/* ------------------------------------------------------
   A. Memory Descent intro composition
   A quiet diagonal signal spine with three small nodes,
   a one-shot entrance (via the existing .v71-reveal system
   — no new animation engine), and a narrative threshold line
   instead of a plain header.
------------------------------------------------------ */

.v71-archivepage-intro {
  position: relative;
}

.v71-memory-descent-spine {
  position: absolute;
  inset: -1.5rem -1rem auto -1rem;
  height: 220px;
  z-index: -1;
  pointer-events: none;
  opacity: .55;
}

.v71-memory-descent-spine svg {
  width: 100%;
  height: 100%;
}

.v71-memory-descent-spine .v71-descent-spine-line {
  fill: none;
  stroke: rgba(0, 220, 255, .28);
  stroke-width: 1;
  stroke-dasharray: 4 6;
}

.v71-memory-descent-spine circle {
  fill: rgba(0, 220, 255, .5);
}

.v71-memorydescent-entry {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 .9rem;
  padding: .3rem .8rem;
  border-radius: 999px;
  border: 1px solid rgba(0, 220, 255, .22);
  color: rgba(158, 244, 255, .78);
  font: 700 .64rem/1 "Courier New", Consolas, monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.v71-memorydescent-entry::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(0, 220, 255, .85);
  box-shadow: 0 0 8px rgba(0, 220, 255, .6);
}

.v71-memorydescent-note {
  margin: .3rem auto 1.4rem;
  max-width: 460px;
  color: rgba(220, 250, 255, .5);
  font: 400 .85rem/1.6 "Courier New", Consolas, monospace;
  font-style: italic;
}

@media (prefers-reduced-motion: reduce) {
  .v71-memory-descent-spine { opacity: .3; }
}

@media (max-width: 640px) {
  .v71-memory-descent-spine { display: none; }
}

/* ------------------------------------------------------
   B. Archive Descent indicator
   Desktop: a quiet fixed rail on the LEFT edge of the viewport
   — deliberately on the opposite side from the custom scrollbar,
   so there is never any question of overlap. Three nodes with a
   thin static connector; the active node glows and its label
   appears. A small numeric fraction gives a sober sense of
   progress without a continuously animated fill bar.
   Tablet/mobile: becomes a slim sticky horizontal strip below
   the navbar — no fixed vertical rail, no content coverage.
------------------------------------------------------ */

.v71-descent-rail {
  position: fixed;
  left: 1.1rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.v71-descent-node {
  position: relative;
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .55rem 0;
  text-decoration: none;
}

.v71-descent-node:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 100%;
  width: 1px;
  height: .95rem;
  background: rgba(0, 220, 255, .16);
}

.v71-descent-dot {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid rgba(0, 220, 255, .4);
  background: transparent;
  transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.v71-descent-node.is-active .v71-descent-dot {
  background: rgba(0, 220, 255, .9);
  border-color: rgba(120, 235, 255, 1);
  box-shadow: 0 0 10px rgba(0, 220, 255, .6);
}

.v71-descent-label {
  font: 700 .62rem/1 "Courier New", Consolas, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(158, 244, 255, .5);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .25s ease, transform .25s ease, color .25s ease;
  white-space: nowrap;
}

.v71-descent-node.is-active .v71-descent-label {
  opacity: 1;
  transform: none;
  color: #eaffff;
}

@media (hover: hover) and (pointer: fine) {
  .v71-descent-node:hover .v71-descent-label,
  .v71-descent-node:focus-visible .v71-descent-label {
    opacity: 1;
    transform: none;
  }
}

.v71-descent-node:focus-visible {
  outline: none;
}

.v71-descent-node:focus-visible .v71-descent-dot {
  box-shadow: 0 0 0 3px rgba(0, 220, 255, .28);
}

.v71-descent-progress-label {
  margin-top: .5rem;
  padding-left: 1px;
  font: 700 .58rem/1 "Courier New", Consolas, monospace;
  letter-spacing: .06em;
  color: rgba(158, 244, 255, .45);
}

@media (max-width: 980px) {
  .v71-descent-rail {
    position: sticky;
    left: auto;
    top: 58px;
    transform: none;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 100%;
    padding: .5rem 1rem;
    background: rgba(2, 8, 12, .58);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-bottom: 1px solid rgba(0, 220, 255, .1);
  }

  .v71-descent-node {
    padding: .3rem .5rem;
  }

  .v71-descent-node:not(:last-child)::after {
    left: 100%;
    top: 50%;
    width: 1.1rem;
    height: 1px;
    transform: translateY(-50%);
  }

  .v71-descent-label {
    display: none;
  }

  .v71-descent-progress-label {
    margin-top: 0;
    margin-left: .6rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .v71-descent-dot,
  .v71-descent-label {
    transition: none !important;
  }
}

/* ------------------------------------------------------
   C. Transition connectors — a one-shot stabilizing node
   added to the existing line + text, still built on the same
   .v71-reveal-pending mechanism (opacity/transform only,
   never a full clip).
------------------------------------------------------ */

.v71-archivepage-transition {
  position: relative;
}

.v71-archivepage-transition::after {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  margin: .7rem auto 0;
  border-radius: 50%;
  background: rgba(0, 220, 255, .7);
  box-shadow: 0 0 10px rgba(0, 220, 255, .5);
}

/* ------------------------------------------------------
   D. Per-family environment tone
   Subtle background washes behind each act — Core stays
   cyan/cosmic, Fragments shifts slightly more indigo/technical,
   Echo turns soft azure/white. All contained within each
   section, never full-bleed over the whole page, never reducing
   text contrast.
------------------------------------------------------ */

.v71-archivepage-act {
  position: relative;
}

.v71-archivepage-act::before {
  content: "";
  position: absolute;
  inset: -2rem -1rem auto -1rem;
  height: 260px;
  z-index: -1;
  pointer-events: none;
}

#archive-core::before {
  background: radial-gradient(ellipse 60% 100% at 30% 0%, rgba(0, 220, 255, .07), transparent 70%);
}

#archive-fragments::before {
  background: radial-gradient(ellipse 60% 100% at 70% 0%, rgba(80, 130, 255, .065), transparent 70%);
}

#archive-echo::before {
  background: radial-gradient(ellipse 60% 100% at 30% 0%, rgba(205, 235, 255, .05), transparent 70%);
}

/* ======================================================
   Blocco 03b — Legendary Memory Descent
   Structural, visual and scenographic escalation on top of
   the already-approved b03a technical base. Nothing here
   touches card markup, lightbox logic, or any frozen system —
   it is entirely new CSS plus a handful of new decorative/
   scenographic HTML blocks (thresholds, transitions, closing),
   all built on the existing .v71-reveal infrastructure.
====================================================== */

/* ------------------------------------------------------
   0. Theatrical intro
   Taller, closer to a real threshold than a header. The
   existing signal spine, entry label and note are kept; only
   the framing changes.
------------------------------------------------------ */

.v71-archivepage-intro--threshold {
  min-height: min(72vh, 620px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.v71-archivepage-intro--threshold h1 {
  font-size: clamp(2.4rem, 6.5vw, 4rem);
  letter-spacing: -.01em;
}

/* ------------------------------------------------------
   1. Chapter thresholds — one per act, each reusing one of
   that family's own already-approved images as a large
   ambient backdrop (no new asset). This is the single biggest
   visible change versus b03a: each chapter now opens on a
   full scenographic panel before any grid appears.
------------------------------------------------------ */

.v71-chapter-threshold {
  position: relative;
  min-height: min(70vh, 560px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 26px;
  overflow: hidden;
  margin-bottom: clamp(2rem, 5vw, 3rem);
  border: 1px solid rgba(0, 220, 255, .16);
}

.v71-chapter-threshold-bg {
  position: absolute;
  inset: -6%;
  background-size: cover;
  background-position: center 25%;
  filter: blur(3px) saturate(1.15) brightness(.42);
  transform: scale(1.08);
}

.v71-chapter-threshold-veil {
  position: absolute;
  inset: 0;
}

.v71-chapter-threshold--core .v71-chapter-threshold-veil {
  background:
    radial-gradient(ellipse 70% 55% at 50% 38%, rgba(0, 60, 80, .18), transparent 65%),
    linear-gradient(180deg, rgba(2, 8, 12, .5) 0%, rgba(2, 8, 12, .68) 55%, rgba(2, 8, 12, .93) 100%);
}

.v71-chapter-threshold--fragments .v71-chapter-threshold-veil {
  background:
    radial-gradient(ellipse 70% 55% at 50% 38%, rgba(20, 40, 90, .18), transparent 65%),
    linear-gradient(180deg, rgba(2, 8, 14, .52) 0%, rgba(2, 8, 14, .7) 55%, rgba(2, 8, 14, .93) 100%);
}

.v71-chapter-threshold--echo .v71-chapter-threshold-veil {
  background:
    radial-gradient(ellipse 70% 55% at 50% 38%, rgba(70, 100, 110, .16), transparent 65%),
    linear-gradient(180deg, rgba(4, 10, 14, .5) 0%, rgba(4, 10, 14, .68) 55%, rgba(4, 10, 14, .94) 100%);
}

.v71-chapter-threshold-inner {
  position: relative;
  z-index: 1;
  padding: 2rem 1.5rem;
  max-width: 680px;
}

.v71-chapter-number {
  margin: 0 0 1rem;
  color: rgba(158, 244, 255, .85);
  font: 800 .82rem/1 "Courier New", Consolas, monospace;
  letter-spacing: .38em;
  text-transform: uppercase;
}

.v71-chapter-title {
  margin: 0 0 1.1rem;
  color: #fdffff;
  font-size: clamp(2.4rem, 6.5vw, 4.4rem);
  line-height: 1.08;
  text-shadow: 0 2px 40px rgba(0, 220, 255, .18);
}

.v71-chapter-threshold-line {
  margin: 0 auto;
  max-width: 460px;
  color: rgba(230, 250, 255, .78);
  font: 400 1.05rem/1.6 "Courier New", Consolas, monospace;
  font-style: italic;
}

.v71-chapter-threshold--core .v71-chapter-number,
.v71-chapter-threshold--core .v71-chapter-title { text-shadow: 0 2px 44px rgba(0, 220, 255, .22); }
.v71-chapter-threshold--fragments .v71-chapter-title { text-shadow: 0 2px 44px rgba(90, 140, 255, .22); }
.v71-chapter-threshold--echo .v71-chapter-title { text-shadow: 0 2px 44px rgba(205, 235, 255, .2); }

.v71-act-text--chapter {
  max-width: 620px;
  margin: 0 auto clamp(1.6rem, 4vw, 2.4rem);
  text-align: center;
  color: rgba(220, 250, 255, .6);
}

@media (max-width: 640px) {
  .v71-chapter-threshold {
    min-height: 420px;
    border-radius: 18px;
  }
  .v71-chapter-threshold-inner {
    padding: 1.4rem 1.1rem;
  }
}

/* ------------------------------------------------------
   2. Chapter transitions — a fuller scene, not just a line.
------------------------------------------------------ */

.v71-chapter-transition {
  width: 100%;
  max-width: var(--v71-gallery-max);
  margin: clamp(2.4rem, 5vw, 3.8rem) auto 0;
  padding-inline: var(--v71-gallery-gutter);
  padding-right: calc(var(--v71-gallery-gutter) + var(--v71-rail-safe));
  box-sizing: border-box;
  position: relative;
  text-align: center;
}

.v71-chapter-transition::before {
  content: "";
  display: block;
  width: min(280px, 60%);
  height: 1px;
  margin: 0 auto 1rem;
  background: linear-gradient(to right, transparent, rgba(0, 220, 255, .55), transparent);
}

.v71-chapter-transition .v71-archivepage-transition {
  margin: 0;
}

.v71-chapter-transition::after {
  content: "";
  display: block;
  width: 7px;
  height: 7px;
  margin: .85rem auto 0;
  border-radius: 50%;
  background: rgba(0, 220, 255, .8);
  box-shadow: 0 0 14px rgba(0, 220, 255, .6);
}

/* ------------------------------------------------------
   3. Chapter I — Sayonara Core: monumental / editorial
   Fewer, larger columns than b03a; featured cards get a
   stronger "reliquary" treatment via the existing .is-featured
   seal in v71.css, amplified here with more breathing room.
------------------------------------------------------ */

.v71-fullarchive-grid--core {
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--v71-gap) * 1.4);
  max-width: 1040px;
  margin-inline: auto;
}

.v71-fullarchive-grid--core .v71-fullarchive-card.is-featured {
  box-shadow: 0 0 0 1px rgba(0, 220, 255, .12), 0 30px 60px rgba(0, 10, 20, .4);
}

@media (max-width: 980px) {
  .v71-fullarchive-grid--core { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .v71-fullarchive-grid--core { grid-template-columns: repeat(2, 1fr); gap: var(--v71-gap); }
}

@media (max-width: 359px) {
  .v71-fullarchive-grid--core { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------
   4. Chapter II — Recovered Fragments: fluid / reconstructing
   A faint decorative connector layer behind the grid (a few
   static SVG lines + nodes — no animation loop, no new DOM per
   card) plus a gentle staggered rhythm via nth-child offsets,
   always positive (never overlaps the row above).
------------------------------------------------------ */

.v71-archivepage-act#archive-fragments {
  position: relative;
}

.v71-fragments-connectors {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: min(1100px, 100%);
  height: 70%;
  z-index: -1;
  opacity: .3;
  pointer-events: none;
}

.v71-fragments-connectors svg {
  width: 100%;
  height: 100%;
}

.v71-connector-line {
  fill: none;
  stroke: rgba(90, 140, 255, .5);
  stroke-width: 1;
  stroke-dasharray: 3 7;
}

.v71-connector-node {
  fill: rgba(90, 140, 255, .6);
}

.v71-fullarchive-grid--fragments .v71-fullarchive-card:nth-child(5n+2) {
  margin-top: 1.4rem;
}

.v71-fullarchive-grid--fragments .v71-fullarchive-card:nth-child(7n+4) {
  margin-top: 2.2rem;
}

@media (max-width: 640px) {
  .v71-fragments-connectors { display: none; }
  .v71-fullarchive-grid--fragments .v71-fullarchive-card:nth-child(5n+2),
  .v71-fullarchive-grid--fragments .v71-fullarchive-card:nth-child(7n+4) {
    margin-top: 0;
  }
}

/* ------------------------------------------------------
   5. Chapter III — Echo within glitch of time: a narrative
   sequence rather than a grid. On desktop the five fragments
   alternate left/right along a quiet central line, reading as
   a slow cinematic sequence; on mobile it simplifies to a
   single centered column, per spec.
------------------------------------------------------ */

.v71-fullarchive-grid--echo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2.6rem, 7vw, 4.5rem);
  max-width: 640px;
  margin-inline: auto;
  position: relative;
}

.v71-fullarchive-grid--echo::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 2%;
  bottom: 2%;
  width: 1px;
  transform: translateX(-50%);
  background: linear-gradient(
    to bottom, transparent,
    rgba(205, 235, 255, .16) 12%, rgba(205, 235, 255, .16) 88%,
    transparent
  );
  z-index: -1;
}

.v71-fullarchive-grid--echo .v71-fullarchive-card {
  width: min(72%, 400px);
}

.v71-fullarchive-grid--echo .v71-fullarchive-card:nth-child(odd) {
  align-self: flex-start;
}

.v71-fullarchive-grid--echo .v71-fullarchive-card:nth-child(even) {
  align-self: flex-end;
}

@media (max-width: 640px) {
  .v71-fullarchive-grid--echo::before { display: none; }
  .v71-fullarchive-grid--echo .v71-fullarchive-card,
  .v71-fullarchive-grid--echo .v71-fullarchive-card:nth-child(odd),
  .v71-fullarchive-grid--echo .v71-fullarchive-card:nth-child(even) {
    width: 100%;
    align-self: center;
  }
}

/* ------------------------------------------------------
   6. Closing scene — a memorable ending, not an abrupt stop.
------------------------------------------------------ */

.v71-archivepage-closing {
  position: relative;
  width: 100%;
  max-width: var(--v71-gallery-max);
  margin: clamp(3.5rem, 8vw, 5.5rem) auto 0;
  padding: clamp(3rem, 8vw, 4.5rem) var(--v71-gallery-gutter);
  padding-right: calc(var(--v71-gallery-gutter) + var(--v71-rail-safe));
  box-sizing: border-box;
  text-align: center;
  border-top: 1px solid rgba(0, 220, 255, .12);
  border-bottom: 1px solid rgba(0, 220, 255, .12);
}

.v71-archivepage-closing-veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse 60% 80% at 50% 50%, rgba(0, 220, 255, .045), transparent 70%);
}

.v71-archivepage-closing-inner {
  max-width: 520px;
  margin-inline: auto;
}

.v71-archivepage-closing-kicker {
  margin: 0 0 1rem;
  color: rgba(158, 244, 255, .6);
  font: 700 .7rem/1.4 "Courier New", Consolas, monospace;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.v71-archivepage-closing-title {
  margin: 0 0 .9rem;
  color: #eaffff;
  font-size: clamp(1.6rem, 4vw, 2.3rem);
}

.v71-archivepage-closing-text {
  margin: 0;
  color: rgba(220, 250, 255, .58);
  font: 400 1rem/1.65 "Courier New", Consolas, monospace;
  font-style: italic;
}