.threshold {
  position: fixed; inset: 0; z-index: 70;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-6);
  padding: calc(env(safe-area-inset-top, 0px) + var(--space-7)) var(--space-4) calc(env(safe-area-inset-bottom, 0px) + var(--space-7));
  background: var(--surface-sunken); color: var(--ink); text-align: center;
  opacity: 1; transition: opacity var(--duration-narrative) var(--easing-page);
}
.threshold.is-leaving { opacity: 0; pointer-events: none; }
.threshold__record { color: var(--faint); letter-spacing: 0.3em; }
.threshold__rule { width: 1px; height: 72px; background: var(--rule-strong); }
.threshold__note { color: var(--faint); }
.threshold__skip {
  position: absolute; right: var(--space-4); bottom: calc(env(safe-area-inset-bottom, 0px) + var(--space-5));
}
@media (min-width: 768px) { .threshold__skip { right: var(--space-9); bottom: var(--space-7); } }


.opening { position: relative; }
.opening__track { position: relative; height: auto; }
.opening[data-state="playing"] .opening__track { height: 320svh; }
@media (min-width: 768px) { .opening[data-state="playing"] .opening__track { height: 400svh; } }

.opening__stage {
  --p: 1; --sepia: 0; --hero: 1;
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; gap: var(--space-5);
  padding-top: calc(env(safe-area-inset-top, 0px) + 64px + var(--space-4));
  padding-bottom: var(--space-7);
}
@media (min-width: 768px) { .opening__stage { padding-top: calc(env(safe-area-inset-top, 0px) + 88px + var(--space-5)); } }
.opening[data-state="playing"] .opening__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }

.opening[data-state="launch"] .opening__film,
.opening[data-state="launch"] .opening__beats,
.opening[data-state="launch"] .opening__skip { display: none; }
.opening[data-state="launch"] .opening__stage { min-height: min(100svh, 960px); justify-content: center; gap: var(--space-8); padding-bottom: var(--space-8); }
.opening[data-state="launch"] .opening__hero { gap: var(--space-5); }
.opening[data-state="launch"] .opening__statement { font-size: clamp(22px, 2.6vw, 32px); }

.opening__film {
  position: relative; flex: 1 1 auto; min-height: 260px;
  background: var(--plate); border: 1px solid var(--rule);
  overflow: hidden;
}
.opening[data-state="still"] .opening__film { flex: 0 0 auto; height: clamp(260px, 52svh, 620px); }
.opening__media { position: absolute; inset: 0; filter: sepia(var(--sepia)); }
.opening__canvas, .opening__still, .opening__still img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.opening__placeholder { position: absolute; inset: 0; }
.opening__placeholder .pending__title { font-size: 12px; }
.opening__beat-label { font-family: var(--font-display); font-style: italic; font-size: 28px; line-height: 1.2; color: var(--ink-soft); text-transform: none; letter-spacing: 0; }
@media (min-width: 768px) { .opening__beat-label { font-size: 36px; } }

.opening__corner { position: absolute; width: 18px; height: 18px; border-color: var(--rule-strong); border-style: solid; border-width: 0; }
.opening__corner--tl { top: 14px; left: 14px; border-top-width: 1px; border-left-width: 1px; }
.opening__corner--tr { top: 14px; right: 14px; border-top-width: 1px; border-right-width: 1px; }
.opening__corner--bl { bottom: 14px; left: 14px; border-bottom-width: 1px; border-left-width: 1px; }
.opening__corner--br { bottom: 14px; right: 14px; border-bottom-width: 1px; border-right-width: 1px; }

.opening__annotations { position: absolute; inset: 0; pointer-events: none; }
.opening__annotation {
  position: absolute; max-width: 44%; display: flex; flex-direction: column; gap: 2px;
  opacity: 0; transform: translateY(8px);
  transition: opacity var(--duration-reveal) var(--easing-archive), transform var(--duration-reveal) var(--easing-archive);
}
.opening__annotation.is-visible { opacity: 1; transform: none; }
.opening__annotation:nth-child(1) { top: 40px; left: 40px; }
.opening__annotation:nth-child(2) { top: 40px; right: 40px; text-align: right; }
.opening__annotation:nth-child(3) { bottom: 40px; left: 40px; }
.opening__annotation:nth-child(4) { bottom: 40px; right: 40px; text-align: right; }
.opening__annotation-component { font-family: var(--font-record); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brass); }
@media (max-width: 767.98px) {
  .opening__annotation:nth-child(1), .opening__annotation:nth-child(2) { top: 28px; }
  .opening__annotation:nth-child(3), .opening__annotation:nth-child(4) { bottom: 28px; }
  .opening__annotation:nth-child(odd) { left: 24px; }
  .opening__annotation:nth-child(even) { right: 24px; }
}
.opening[data-state="still"] .opening__annotations { display: none; }

.opening__beats { display: none; gap: var(--space-5); font-family: var(--font-record); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); overflow: hidden; }
.opening[data-state="playing"] .opening__beats { display: flex; opacity: calc(1 - var(--hero)); }
.opening__beat { display: flex; align-items: center; gap: var(--space-2); white-space: nowrap; transition: color var(--duration-ui) var(--easing-archive); }
.opening__beat::before { content: ""; width: 16px; height: 1px; background: var(--rule-strong); transition: background-color var(--duration-ui) var(--easing-archive), width var(--duration-ui) var(--easing-archive); }
.opening__beat.is-current { color: var(--ink); }
.opening__beat.is-current::before { background: var(--brass); width: 28px; }
@media (max-width: 767.98px) { .opening__beat:not(.is-current) { display: none; } }

.opening__hero {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-4); text-align: center;
  opacity: var(--hero);
  transform: translateY(calc((1 - var(--hero)) * 16px));
}
.opening[data-state="playing"] .opening__hero { position: absolute; inset-inline: 0; bottom: var(--space-7); pointer-events: none; }
.opening[data-state="playing"] .opening__stage.is-named .opening__hero { pointer-events: auto; }
.opening__title { font-family: var(--font-display); font-weight: 500; font-size: 30px; line-height: 1.1; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink); }
@media (min-width: 768px) { .opening__title { font-size: 48px; letter-spacing: 0.3em; } }
@media (min-width: 1200px) { .opening__title { font-size: 64px; } }
.opening__statement { max-width: 32ch; color: var(--ink-soft); }
.opening__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-4) var(--space-6); margin-top: var(--space-2); }
@media (max-width: 767.98px) { .opening__actions { flex-direction: column; gap: var(--space-2); } .opening__actions .btn--primary { width: 100%; max-width: 360px; } }
.opening__continue { align-self: center; }
.opening__continue { display: inline-flex; flex-direction: column; align-items: center; gap: var(--space-2); min-height: 44px; font-family: var(--font-record); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--faint) !important; }
.opening__continue::after { content: ""; width: 1px; height: 32px; background: var(--brass); }
.opening__continue:hover { color: var(--ink) !important; }

.opening[data-state="playing"] .opening__film { margin-bottom: calc(var(--hero) * 260px); transition: none; }
@media (min-width: 768px) { .opening[data-state="playing"] .opening__film { margin-bottom: calc(var(--hero) * 300px); } }

.opening__skip { display: none; }
.opening[data-state="playing"] .opening__skip {
  display: inline-flex; position: absolute; z-index: 2;
  right: var(--grid-margin-mobile); bottom: calc(var(--space-7) - 14px);
  opacity: calc(1 - var(--hero));
}
.opening[data-state="playing"] .opening__stage.is-named .opening__skip { pointer-events: none; }
@media (min-width: 768px) { .opening[data-state="playing"] .opening__skip { right: var(--grid-margin-tablet); } }
@media (min-width: 1200px) { .opening[data-state="playing"] .opening__skip { right: var(--grid-margin-desktop); } }

.hg .eyebrow { color: var(--brass); }

.manifesto { display: flex; flex-direction: column; align-items: center; gap: var(--space-6); text-align: center; }
@media (max-width: 767.98px) { .manifesto { align-items: flex-start; text-align: left; } }
.manifesto__line { max-width: 18ch; color: var(--ink); }
.manifesto__lead { max-width: 52ch; color: var(--muted); }
.manifesto__losses {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding-block: var(--space-6); margin-block: var(--space-2);
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  width: 100%; max-width: 640px; color: var(--ink-soft);
}
.manifesto__conclusion { max-width: 52ch; color: var(--muted); }
.manifesto__purpose { position: relative; max-width: 22ch; padding-top: var(--space-6); color: var(--ink); }
.manifesto__purpose::before {
  content: ""; position: absolute; top: 0; left: 50%; width: 48px; height: 1px; background: var(--brass); transform: translateX(-50%);
}
@media (max-width: 767.98px) { .manifesto__purpose::before { left: 0; transform: none; } }

.lost__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-7); }
.lost__head { display: flex; flex-direction: column; gap: var(--space-5); }
.lost__head h2 { color: var(--ink); max-width: 16ch; }
.lost__lead { color: var(--muted); max-width: 52ch; }
.lost__ledger { border-top: 1px solid var(--rule-strong); }
.lost__row {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-1);
  padding-block: var(--space-5); border-bottom: 1px solid var(--rule);
}
.lost__category { color: var(--ink); }
.lost__text { color: var(--muted); max-width: var(--measure-prose); }
.lost__close { color: var(--ink-soft); max-width: 34ch; }
@media (min-width: 768px) {
  .lost__row { grid-template-columns: 220px minmax(0, 1fr); gap: var(--space-5); align-items: baseline; }
}
@media (min-width: 1200px) {
  .lost__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gutter); row-gap: var(--space-8); }
  .lost__head { grid-column: 1 / span 5; grid-row: 1 / span 2; align-self: start; position: sticky; top: calc(88px + var(--space-7)); }
  .lost__ledger, .lost__close { grid-column: 7 / span 6; }
}

.method { --edge: var(--grid-margin-mobile); }
@media (min-width: 768px) { .method { --edge: var(--grid-margin-tablet); } }
@media (min-width: 1200px) { .method { --edge: max(var(--grid-margin-desktop), calc((100% - var(--content-max)) / 2)); } }
.method__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-6); }
.method__intro { display: flex; flex-direction: column; gap: var(--space-5); max-width: 720px; min-width: 0; }
.method__intro h2 { color: var(--ink); }
.method__lead { color: var(--muted); max-width: 56ch; }
.method__controls { display: flex; align-items: center; gap: var(--space-3); }
.method__nav {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0;
  background: transparent; border: 1px solid var(--rule-strong); border-radius: var(--radius-none); color: var(--ink); cursor: pointer;
  transition: border-color var(--duration-ui) var(--easing-archive), color var(--duration-ui) var(--easing-archive);
}
.method__nav:hover:not([disabled]) { border-color: var(--brass); color: var(--brass); }
.method__nav[disabled] { opacity: 0.45; cursor: not-allowed; }
.method__count { min-width: 12ch; text-align: center; color: var(--faint); }

.method__viewport {
  margin-top: var(--space-7);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--edge);
  scrollbar-width: thin; scrollbar-color: var(--rule-strong) transparent;
}
.method__viewport:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.method__track { display: flex; gap: var(--grid-gutter); width: max-content; padding: var(--space-4) var(--edge) var(--space-6); }
@media (max-width: 767.98px) { .method__track { gap: var(--space-4); } }
.method__stage {
  position: relative; flex: 0 0 280px; scroll-snap-align: start;
  display: flex; flex-direction: column; gap: var(--space-3);
  padding-top: var(--space-5); border-top: 1px solid var(--rule-strong);
}
@media (min-width: 768px) { .method__stage { flex-basis: calc((100vw - 2 * var(--grid-margin-tablet) - 7 * var(--grid-gutter)) / 8 * 4 + 3 * var(--grid-gutter)); } }
@media (min-width: 1200px) { .method__stage { flex-basis: calc((min(100vw, 1440px) - 2 * var(--grid-margin-desktop) - 11 * var(--grid-gutter)) / 12 * 3 + 2 * var(--grid-gutter)); } }
.method__numeral { color: var(--brass); }
.method__title { color: var(--ink); }
.method__text { color: var(--muted); }

.method__close { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); margin-top: var(--space-8); }
.method__philosophy { color: var(--ink-soft); }

.reveal-pending { opacity: 0; transform: translateY(24px); }
.reveal-in { opacity: 1; transform: none; transition: opacity var(--duration-reveal) var(--easing-archive), transform var(--duration-reveal) var(--easing-archive); }
.method__actions { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); }