/* ─────────────────────────────────────────────
   MORS LUXURIAP · system stylesheet
   PER IESUM LUX KREŌ
   ───────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,300;0,400;0,500;0,600;1,400&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,400&family=Inter:wght@300;400;500&display=swap');

/* hidden attribute must always win — components that set their own
   display value were silently overriding the UA stylesheet, leaking
   gated UI (e.g. the sealed Discord card) to non-eligible users. */
[hidden] { display: none !important; }

:root {
  /* SHADOW-WHITE PALETTE — gallery light, soft cool cast.
     "chrome" remains the primary text token but now reads as deep ink. */
  --paper:       #ececf0;            /* page bg light */
  --paper-deep:  #d4d4da;            /* page bg edges */
  --paper-mid:   #e0e0e4;            /* mid stops */

  --chrome:      #1a1a22;            /* primary text — deep ink */
  --chrome-dim:  #6a6a74;            /* secondary text — mid-gray */
  --ash:         #9a9aa4;            /* tertiary — lighter gray */
  --ash-faint:   #c4c4ca;            /* faintest */

  /* legacy aliases — some components still reference these */
  --void:        #1a1a22;
  --void-deep:   #ececf0;            /* "deep" now means the page paper itself */

  --line:        rgba(26, 26, 34, 0.12);
  --line-strong: rgba(26, 26, 34, 0.22);
  --blood:       #b41820;

  --serif:  'Cormorant Garamond', 'Cormorant', serif;
  --sans:   'Inter', -apple-system, sans-serif;

  --track-wide:   0.42em;
  --track-medium: 0.22em;
  --track-tight:  0.04em;

  --ease-slow: cubic-bezier(.16,.84,.3,1);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  background: var(--paper);
  color: var(--chrome);
  font-family: var(--sans);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  cursor: default;
  overflow-x: hidden;
}

body {
  min-height: 100vh;
  position: relative;
  background:
    radial-gradient(ellipse at 50% 30%, #f4f4f7 0%, #e4e4e8 50%, #cfcfd5 100%);
}

/* ─────────────────────────────────────────────
   gate · entry question screen
   ───────────────────────────────────────────── */
.gate {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.4rem;
  padding: 6rem 2rem 4rem;
  text-align: center;
  position: relative;
  z-index: 5;
}

.gate__intro {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  color: var(--chrome-dim);
  letter-spacing: 0.02em;
  max-width: 36ch;
  line-height: 1.6;
}

.gate__question {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
  max-width: 560px;
  width: 100%;
  padding-top: 1rem;
}

.gate__num {
  font-family: var(--serif);
  font-size: 0.78rem;
  letter-spacing: 0.42em;
  color: var(--chrome-dim);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 0.5rem 1.2rem;
  text-transform: none;
  box-shadow: 0 4px 14px rgba(20, 20, 30, 0.05);
}

.gate__q {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.6rem, 3.6vw, 2.5rem);
  line-height: 1.32;
  color: var(--chrome);
  letter-spacing: 0.012em;
  max-width: 26ch;
  margin: 0;
}

.gate__form {
  width: 100%;
  max-width: 380px;
  display: flex;
  justify-content: center;
}

.gate__input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line-strong);
  padding: 0.85rem 0;
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--chrome);
  outline: none;
  text-align: center;
  letter-spacing: 0.12em;
  transition: border-color 0.6s var(--ease-slow);
}

.gate__input:focus {
  border-color: var(--chrome);
}

.gate__input.is-wrong {
  animation: gateShake 0.55s ease-out;
  border-color: var(--blood);
}

@keyframes gateShake {
  0%, 100% { transform: translateX(0); }
  18%  { transform: translateX(-9px); }
  36%  { transform: translateX( 9px); }
  54%  { transform: translateX(-7px); }
  72%  { transform: translateX( 7px); }
}

.gate__hint {
  font-family: var(--sans);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: var(--track-wide);
  color: var(--ash);
  text-transform: uppercase;
  margin-top: 0.6rem;
}

.gate__foot {
  margin-top: auto;
  padding-top: 3rem;
  font-family: var(--serif);
  font-style: italic;
  letter-spacing: 0.32em;
  text-transform: none;
  opacity: 0.45;
}

body.is-passing {
  opacity: 0;
  transition: opacity 1s ease;
}

/* ─────────────────────────────────────────────
   threshold · 6-step initiation after the gate
   ───────────────────────────────────────────── */
.threshold {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6rem 2rem 6rem;
  position: relative;
  z-index: 5;
}

.threshold__step {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% + 12px));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
  text-align: center;
  max-width: 560px;
  width: calc(100% - 4rem);
  opacity: 0;
  pointer-events: none;
  transition: opacity 1s var(--ease-slow), transform 1s var(--ease-slow);
}

.threshold__step.is-active {
  opacity: 1;
  transform: translate(-50%, -50%);
  pointer-events: auto;
}

.threshold__num {
  font-family: var(--serif);
  font-size: 0.78rem;
  letter-spacing: 0.42em;
  color: var(--chrome-dim);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 0.5rem 1.4rem;
  box-shadow: 0 4px 14px rgba(20, 20, 30, 0.05);
}

.threshold__statement {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.6rem, 3.6vw, 2.4rem);
  line-height: 1.32;
  color: var(--chrome);
  letter-spacing: 0.012em;
  max-width: 28ch;
  margin: 0;
}

.threshold__fragment {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1rem, 2vw, 1.18rem);
  line-height: 1.7;
  color: var(--chrome-dim);
  max-width: 44ch;
  margin: 0;
}

.threshold__next {
  margin-top: 1rem;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--chrome);
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 0.85rem 2rem;
  cursor: pointer;
  transition: border-color 0.4s ease, background 0.4s ease, box-shadow 0.4s ease, letter-spacing 0.4s ease;
  box-shadow: 0 4px 18px rgba(20, 20, 30, 0.06);
}
.threshold__next:hover {
  border-color: var(--chrome);
  background: rgba(26, 26, 34, 0.04);
  box-shadow: 0 6px 22px rgba(20, 20, 30, 0.10);
  letter-spacing: 0.5em;
}

.threshold__next--final {
  background: var(--chrome);
  color: var(--paper);
  border-color: var(--chrome);
}
.threshold__next--final:hover {
  background: var(--chrome);
  color: var(--paper);
}

.threshold__progress {
  position: fixed;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.7rem;
  z-index: 6;
}

.threshold__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ash);
  opacity: 0.4;
  transition: opacity 0.6s var(--ease-slow), background 0.6s var(--ease-slow), transform 0.6s var(--ease-slow);
}

.threshold__dot.is-active {
  background: var(--chrome);
  opacity: 1;
  transform: scale(1.3);
}

/* ─────────────────────────────────────────────
   vigil · signup / login toggle
   ───────────────────────────────────────────── */
.vigil-toggle {
  display: inline-flex;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  margin: 0.5rem 0 1rem;
  background: rgba(255, 255, 255, 0.4);
  padding: 0.25rem;
  box-shadow: 0 2px 10px rgba(20, 20, 30, 0.04);
}

.vigil-toggle__btn {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: var(--track-medium);
  text-transform: uppercase;
  padding: 0.65rem 1.6rem;
  background: transparent;
  border: none;
  border-radius: 999px;
  color: var(--chrome-dim);
  cursor: pointer;
  transition: color 0.4s ease, background 0.4s ease;
}

.vigil-toggle__btn:hover {
  color: var(--chrome);
}

.vigil-toggle__btn.is-active {
  color: var(--chrome);
  background: var(--paper);
  box-shadow: 0 2px 8px rgba(20, 20, 30, 0.08);
}

/* ─────────────────────────────────────────────
   THE VIGIL · invite hub (two-tier Discord access)
   ───────────────────────────────────────────── */
.vigil-hub {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 6rem 2rem 4rem;
  position: relative;
  z-index: 5;
}

.vigil-hub__intro {
  margin: 1rem auto 1rem;
  text-align: center;
}

/* account stats — petitions + purchases count from the user's record */
.vigil-stats {
  display: inline-flex;
  align-items: center;
  gap: 1.4rem;
  margin: 0.5rem auto 1.6rem;
  padding: 0.85rem 1.4rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 0 4px 16px rgba(20, 20, 30, 0.05);
}

.vigil-stats__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
}

.vigil-stats__num {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--chrome);
  line-height: 1;
}

.vigil-stats__lab {
  font-family: var(--sans);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--chrome-dim);
}

.vigil-stats__sep {
  width: 1px;
  height: 1.6rem;
  background: var(--line-strong);
}

.vigil-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.6rem;
  width: 100%;
  max-width: 920px;
  margin: 1rem auto 0;
}

@media (max-width: 720px) {
  .vigil-cards { grid-template-columns: 1fr; gap: 1.2rem; }
}

.vigil-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: 2rem 1.8rem 1.6rem;
  border: 1px solid var(--line-strong);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,0.65), rgba(220,220,226,0.42));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 12px 40px rgba(20, 20, 30, 0.06),
              0 2px 6px rgba(20, 20, 30, 0.04);
  transition: transform 0.6s var(--ease-slow), box-shadow 0.6s var(--ease-slow);
}

.vigil-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 50px rgba(20, 20, 30, 0.08),
              0 3px 10px rgba(20, 20, 30, 0.05);
}

.vigil-card__head {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.9rem;
}

.vigil-card__num {
  font-family: var(--serif);
  font-size: 0.78rem;
  letter-spacing: 0.42em;
  color: var(--chrome-dim);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 0.4rem 0.95rem;
}

.vigil-card__tier {
  font-family: var(--sans);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--chrome-dim);
}

.vigil-card__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  letter-spacing: 0.18em;
  color: var(--chrome);
  margin: 0;
  line-height: 1.2;
  text-transform: uppercase;
}

.vigil-card--sealed .vigil-card__title {
  color: var(--chrome-dim);
}

.vigil-card--sealed.is-unlocked .vigil-card__title {
  color: var(--chrome);
}

.vigil-card__body {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--chrome-dim);
  margin: 0;
  flex: 1;
}

.vigil-card__invite {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem 0 0.4rem;
  min-height: 4rem;
  gap: 0.7rem;
}

.vigil-card__invite--locked {
  border: 1px dashed var(--line-strong);
  border-radius: 14px;
  padding: 1.2rem 1rem;
  flex-direction: row;
  gap: 0.6rem;
  background: rgba(220, 220, 226, 0.18);
}

.vigil-card__locked-icon {
  font-size: 1.1rem;
  color: var(--chrome-dim);
}

.vigil-card__locked-text {
  font-family: var(--sans);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: var(--track-medium);
  text-transform: uppercase;
  color: var(--chrome-dim);
}

.vigil-card__link {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 0.4rem 0.4rem 0.4rem 1.2rem;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 2px 10px rgba(20, 20, 30, 0.04) inset;
}

.vigil-card__url {
  flex: 1;
  font-family: 'Courier New', monospace;
  font-size: 0.85rem;
  color: var(--chrome);
  background: none;
  align-self: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  user-select: all;
}

.vigil-card__copy {
  font-family: var(--sans);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: var(--track-medium);
  text-transform: uppercase;
  padding: 0.55rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  color: var(--chrome);
  cursor: pointer;
  transition: border-color 0.4s ease, background 0.4s ease;
  white-space: nowrap;
}
.vigil-card__copy:hover {
  border-color: var(--chrome);
  background: rgba(26, 26, 34, 0.04);
}

.vigil-card__foot {
  text-align: center;
  font-style: italic;
  text-transform: none;
  font-family: var(--serif);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--chrome-dim);
  margin: 0;
}

/* ─────────────────────────────────────────────
   (legacy) chat application styles — preserved for any
   future direct-chat fallback. unused on the invite hub.
   ───────────────────────────────────────────── */
body.vigil-app {
  overflow: hidden;
}

.vigil-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.4rem;
  border-bottom: 1px solid var(--line-strong);
  background: rgba(248, 248, 251, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.vigil-bar__left,
.vigil-bar__right {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

.mark--small .mark__word {
  font-size: 1.1rem;
  letter-spacing: 0.16em;
}
.mark--small .mark__word::after { display: none; }

.vigil-bar__title {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: var(--track-medium);
  color: var(--chrome-dim);
  text-transform: uppercase;
}

.vigil-bar__user {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--chrome-dim);
}

#vigil-logout {
  background: none;
  border: none;
  cursor: pointer;
}

.vigil-app__grid {
  position: fixed;
  top: 56px;
  bottom: 0;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: 240px 1fr;
}

/* ── channels sidebar ── */
.vigil-channels {
  border-right: 1px solid var(--line-strong);
  background: rgba(248, 248, 251, 0.6);
  display: flex;
  flex-direction: column;
  padding: 1.4rem 0;
  overflow-y: auto;
}

.vigil-channels__lab {
  font-family: var(--sans);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--chrome-dim);
  padding: 0 1.4rem 0.8rem;
}

.vigil-channels ul {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
}

.vigil-channels li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1.4rem;
  font-family: var(--serif);
  font-size: 1.02rem;
  color: var(--chrome-dim);
  cursor: pointer;
  transition: background 0.4s ease, color 0.4s ease;
}

.vigil-channels li:hover {
  background: rgba(26, 26, 34, 0.04);
  color: var(--chrome);
}

.vigil-channels li.is-active {
  background: rgba(26, 26, 34, 0.08);
  color: var(--chrome);
}

.vigil-channels__hash {
  color: var(--ash);
  font-weight: 400;
}

.vigil-channels__name {
  font-style: italic;
}

.vigil-channels__count {
  font-family: var(--sans);
  font-size: 0.65rem;
  font-weight: 400;
  letter-spacing: var(--track-medium);
  color: var(--ash);
}

.vigil-channels__foot {
  border-top: 1px solid var(--line);
  padding: 1.2rem 1.4rem 0;
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.vigil-rumor {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--blood);
}

/* ── chat stream ── */
.vigil-stream {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--paper);
  position: relative;
}

.vigil-stream__head {
  border-bottom: 1px solid var(--line);
  padding: 1.2rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.vigil-stream__title {
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--chrome-dim);
  letter-spacing: 0.04em;
}
.vigil-stream__title strong {
  color: var(--chrome);
  font-weight: 500;
  font-style: italic;
}

.vigil-stream__topic {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.92rem;
  color: var(--ash);
  letter-spacing: 0.02em;
}

.vigil-stream__body {
  flex: 1;
  overflow-y: auto;
  padding: 1.6rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

.vmsg {
  display: grid;
  grid-template-columns: 110px 130px 1fr;
  align-items: baseline;
  gap: 1rem;
  font-family: var(--serif);
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--chrome);
}

.vmsg__time {
  font-family: var(--sans);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: var(--track-medium);
  color: var(--ash);
  text-transform: uppercase;
  white-space: nowrap;
}

.vmsg__user {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: var(--track-medium);
  color: var(--chrome);
  text-transform: uppercase;
  white-space: nowrap;
}

.vmsg__text {
  font-family: var(--serif);
  color: var(--chrome);
}
.vmsg__text strong { font-weight: 500; }
.vmsg__text em { font-style: italic; color: var(--chrome); }

.vmsg--mors .vmsg__user {
  color: var(--blood);
  letter-spacing: 0.32em;
}
.vmsg--mors .vmsg__text {
  font-style: italic;
  color: var(--chrome);
}

.vmsg--system .vmsg__user {
  color: var(--ash);
  font-style: italic;
}
.vmsg--system .vmsg__text {
  font-style: italic;
  color: var(--chrome-dim);
  grid-column: 2 / -1;
}
.vmsg--system .vmsg__time { display: none; }

.vmsg--mine .vmsg__user {
  color: var(--blood);
}

/* ── compose ── */
.vigil-stream__foot {
  border-top: 1px solid var(--line-strong);
  padding: 1.2rem 2rem;
  background: rgba(248, 248, 251, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.vigil-compose {
  display: flex;
  gap: 1rem;
  align-items: stretch;
}

.vigil-compose__input {
  flex: 1;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 0.85rem 1.4rem;
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--chrome);
  outline: none;
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
  box-shadow: 0 1px 3px rgba(20, 20, 30, 0.04) inset;
}
.vigil-compose__input:focus {
  border-color: var(--chrome);
  box-shadow: 0 1px 3px rgba(20, 20, 30, 0.06) inset, 0 2px 12px rgba(20, 20, 30, 0.06);
}

.vigil-compose__send {
  padding: 0 1.6rem;
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: var(--track-wide);
  color: var(--chrome);
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.4s ease, background 0.4s ease, box-shadow 0.4s ease;
}
.vigil-compose__send:hover {
  border-color: var(--chrome);
  background: rgba(26, 26, 34, 0.04);
  box-shadow: 0 4px 14px rgba(20, 20, 30, 0.08);
}

.vigil-compose__note {
  display: block;
  margin-top: 0.7rem;
  text-transform: none;
  font-size: 0.65rem;
  font-style: italic;
  font-family: var(--serif);
  color: var(--ash);
  letter-spacing: 0;
  font-weight: 400;
  line-height: 1.5;
}

@media (max-width: 720px) {
  .vigil-app__grid { grid-template-columns: 1fr; }
  .vigil-channels {
    display: none;     /* hide channels list on mobile, can be reopened with a button later */
  }
  .vmsg {
    grid-template-columns: 1fr;
    gap: 0.2rem;
  }
  .vmsg__time, .vmsg__user { font-size: 0.6rem; }
  .vigil-stream__head, .vigil-stream__body, .vigil-stream__foot {
    padding-left: 1.2rem;
    padding-right: 1.2rem;
  }
}

/* ─────────────────────────────────────────────
   ambient drift layer — aurora orbs + dust + shards
   injected by ambient.js
   ───────────────────────────────────────────── */
.ambient {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.ambient__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.32;
  mix-blend-mode: multiply;
  will-change: transform;
}

.ambient__orb--1 {
  width: 52vw; height: 52vw;
  background: radial-gradient(circle, #b8b8c8 0%, transparent 60%);
  top: -12%; left: -6%;
  animation: drift1 42s ease-in-out infinite alternate;
}
.ambient__orb--2 {
  width: 46vw; height: 46vw;
  background: radial-gradient(circle, #aab8c8 0%, transparent 60%);
  bottom: -14%; right: -10%;
  animation: drift2 50s ease-in-out infinite alternate;
}
.ambient__orb--3 {
  width: 30vw; height: 30vw;
  background: radial-gradient(circle, #c8b8c8 0%, transparent 60%);
  top: 38%; left: 58%;
  animation: drift3 36s ease-in-out infinite alternate;
}
.ambient__orb--4 {
  width: 28vw; height: 28vw;
  background: radial-gradient(circle, #b8c4c0 0%, transparent 60%);
  bottom: 22%; left: 4%;
  animation: drift4 46s ease-in-out infinite alternate;
}

@keyframes drift1 {
  from { transform: translate(0,0) scale(1); }
  to   { transform: translate(15vw, 12vh) scale(1.15); }
}
@keyframes drift2 {
  from { transform: translate(0,0) scale(1); }
  to   { transform: translate(-12vw, -10vh) scale(1.1); }
}
@keyframes drift3 {
  from { transform: translate(0,0) scale(1); }
  to   { transform: translate(-18vw, 15vh) scale(0.85); }
}
@keyframes drift4 {
  from { transform: translate(0,0) scale(1); }
  to   { transform: translate(20vw, -12vh) scale(1.2); }
}

.ambient__dust,
.ambient__shards {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.ambient__shards {
  z-index: 2;
  opacity: 0.85;
}

/* keep all main content above the drift */
main, .frame {
  position: relative;
  z-index: 5;
}
.frame { z-index: 50; }

/* ── grain overlay (dark grain on light paper) ── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: 0.05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: multiply;
}

/* ── vignette (soft darkening at edges, gallery feel) ── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 99;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.18) 100%);
}

/* ─────────────────────────────────────────────
   page transition
   ───────────────────────────────────────────── */
main {
  opacity: 0;
  animation: rise 1.6s var(--ease-slow) 0.2s forwards;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─────────────────────────────────────────────
   wordmark · three tiers
   ───────────────────────────────────────────── */
.mark {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: 0.16em;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  user-select: none;
}

.mark__word {
  font-size: clamp(2.6rem, 6.4vw, 4.8rem);
  line-height: 1;
  position: relative;
  display: inline-block;
  font-weight: 400;
}

.mark__word::after {
  content: '';
  position: absolute;
  left: -10%;
  right: -10%;
  top: 52%;
  height: 1px;
  background: var(--chrome);
  opacity: 0.6;
}

.mark__sub {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: var(--track-wide);
  margin-top: 0.55rem;
  align-self: flex-end;
  margin-right: -0.2em;
  color: var(--chrome-dim);
}

.mark__above {
  font-family: var(--sans);
  font-size: 0.65rem;
  font-weight: 400;
  letter-spacing: var(--track-wide);
  margin-bottom: 0.45rem;
  align-self: center;
  color: var(--chrome-dim);
  text-transform: uppercase;
}

.mark__cross {
  position: absolute;
  left: -38%;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--sans);
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: var(--track-medium);
  color: var(--chrome-dim);
  white-space: nowrap;
}

.mark__cross::after {
  content: '';
  display: inline-block;
  width: 1.2em;
  height: 1px;
  background: var(--chrome-dim);
  vertical-align: middle;
  margin-left: 0.5em;
}

/* ─────────────────────────────────────────────
   atomic typography
   ───────────────────────────────────────────── */
.eyebrow {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: var(--track-wide);
  color: var(--chrome-dim);
  text-transform: uppercase;
}

.fragment {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 1.55;
  color: var(--chrome-dim);
  letter-spacing: 0.015em;
}

.statement {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.9vw, 2.2rem);
  line-height: 1.42;
  letter-spacing: 0.005em;
  color: var(--chrome);
  max-width: 38ch;
}

.utility {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: var(--track-medium);
  color: var(--chrome-dim);
  text-transform: uppercase;
}

.numeral {
  font-family: var(--serif);
  letter-spacing: 0.3em;
  font-weight: 400;
}

/* ─────────────────────────────────────────────
   chrome canvas stage
   dark local atmosphere so the chrome reflections have contrast to pop
   ───────────────────────────────────────────── */
.stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 720px;
  margin: 0 auto;
  isolation: isolate;
  user-select: none;
  -webkit-user-select: none;
}

/* very subtle spotlight glow behind the floating chrome — barely there,
   just enough to draw the eye to center stage without painting a backdrop. */
.stage::before {
  content: '';
  position: absolute;
  inset: 5%;
  background:
    radial-gradient(ellipse at 50% 45%,
      rgba(255,255,255,0.55) 0%,
      rgba(255,255,255,0.18) 40%,
      rgba(255,255,255,0.0)  80%);
  pointer-events: none;
  z-index: 0;
  filter: blur(30px);
}

.stage canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  cursor: grab;
  position: relative;
  z-index: 1;
}

.stage canvas:active {
  cursor: grabbing;
}

/* ─────────────────────────────────────────────
   floating mystery question marks · drift around the chrome
   ───────────────────────────────────────────── */
.question {
  position: absolute;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  color: var(--chrome);
  pointer-events: none;
  z-index: 4;
  user-select: none;
  line-height: 1;
  text-shadow: 0 4px 18px rgba(20, 20, 30, 0.18);
  will-change: transform, opacity;
}

.question--1 {
  top: 12%;
  left: 6%;
  font-size: clamp(3.5rem, 7vw, 6rem);
  opacity: 0.0;
  animation: drift1q 14s ease-in-out infinite;
}

.question--2 {
  top: 58%;
  right: 8%;
  font-size: clamp(2.4rem, 5vw, 4.4rem);
  opacity: 0.0;
  animation: drift2q 19s ease-in-out infinite;
  animation-delay: -6s;
}

@keyframes drift1q {
  0%   { transform: translate(0,    0)    rotate(-12deg) scale(0.92); opacity: 0;    }
  15%  {                                                               opacity: 0.45; }
  35%  { transform: translate(28px, -14px) rotate(-7deg)  scale(1.04); opacity: 0.50; }
  60%  { transform: translate(-18px, 32px) rotate(-16deg) scale(0.96); opacity: 0.30; }
  85%  { transform: translate(14px, -6px)  rotate(-10deg) scale(1.0);  opacity: 0.42; }
  100% { transform: translate(0,    0)     rotate(-12deg) scale(0.92); opacity: 0;    }
}

@keyframes drift2q {
  0%   { transform: translate(0,    0)    rotate(8deg)   scale(0.95); opacity: 0;    }
  20%  {                                                               opacity: 0.40; }
  40%  { transform: translate(-30px, 18px) rotate(13deg) scale(1.06); opacity: 0.45; }
  70%  { transform: translate(20px, -22px) rotate(4deg)  scale(0.92); opacity: 0.30; }
  100% { transform: translate(0,    0)     rotate(8deg)  scale(0.95); opacity: 0;    }
}

/* ─────────────────────────────────────────────
   "your edition would be" — drives buying urgency
   ───────────────────────────────────────────── */
.next-edition {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.8rem;
  padding: 1rem 1.8rem;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(220,220,226,0.32));
  box-shadow: 0 6px 24px rgba(20, 20, 30, 0.05);
}

.next-edition__lab {
  font-family: var(--sans);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: var(--track-wide);
  color: var(--chrome-dim);
  text-transform: uppercase;
}

.next-edition__num {
  font-family: var(--serif);
  font-size: 1.9rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  color: var(--chrome);
  font-variant-numeric: tabular-nums;
}

.next-edition__num strong {
  font-weight: 500;
  color: var(--blood);
  letter-spacing: 0.22em;
}

.next-edition__num span {
  opacity: 0.45;
  margin-left: 0.2em;
}

/* ─────────────────────────────────────────────
   tap-to-break interaction · shake + counter
   ───────────────────────────────────────────── */
.stage.is-shaking { animation: stageShake 0.42s ease-out; }

@keyframes stageShake {
  0%   { transform: translate(0, 0); }
  18%  { transform: translate(-6px, 3px) rotate(-0.4deg); }
  36%  { transform: translate( 6px,-2px) rotate(0.5deg); }
  54%  { transform: translate(-4px,-3px) rotate(-0.3deg); }
  72%  { transform: translate( 3px, 4px) rotate(0.2deg); }
  100% { transform: translate(0, 0); }
}

.stage.is-broken .question { opacity: 0 !important; transition: opacity 0.4s; }

/* once the shatter animation completes (~2.2s), fade the stage's
   spotlight backdrop, contact shadow, and the WebGL canvas. eliminates
   the visible square outline and any leftover frozen shard frame. the
   prize-reveal overlay has its own halo and stays untouched. */
.stage.is-broken::before,
.stage.is-broken::after,
.stage.is-broken canvas {
  opacity: 0 !important;
  transition: opacity 0.7s ease 2.2s;
}

/* ─────────────────────────────────────────────
   per-tap fractures on the chrome egg
   each crack is a group: a white "broken-open" halo path
   beneath, and a jagged dark line on top. they reveal
   together via stroke-dashoffset.
   ───────────────────────────────────────────── */
.cracks {
  position: absolute;
  inset: 12% 22% 8% 22%;
  z-index: 3;
  pointer-events: none;
  width: auto;
  height: auto;
}

/* HALO — wider light stroke, suggests the chrome split open
   and the broken interior catches light. Drawn first (below). */
.crack__halo {
  fill: none;
  stroke: rgba(255, 255, 255, 0.95);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: blur(0.45px);
  opacity: 0;
  transition: opacity 0.55s var(--ease-slow);
}

/* LINE — thin dark seam, the actual crack. drawn on top of halo.
   stroke-dashoffset animates the line "drawing in" along the path. */
.crack__line {
  fill: none;
  stroke: #0e0e16;
  stroke-width: 0.42;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.75s var(--ease-slow);
}

/* HAIRLINE branches — small secondary fractures at junctions */
.crack__hair {
  fill: none;
  stroke: rgba(20, 20, 30, 0.6);
  stroke-width: 0.22;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.6s var(--ease-slow) 0.2s;
}

/* reveal: when .is-visible is on the group, both layers animate */
.crack.is-visible .crack__halo { opacity: 0.78; }
.crack.is-visible .crack__line { stroke-dashoffset: 0; }
.crack.is-visible .crack__hair { stroke-dashoffset: 0; }

/* on shatter, fade all fractures out cleanly */
.stage.is-broken .cracks {
  opacity: 0;
  transition: opacity 0.4s ease;
}

/* once the top has blown off, a faint gold halo bleeds from the
   open top — supplements the 3D gold orb so the "something is inside"
   moment reads even at a glance. */
.stage.is-cracked-open::before {
  background:
    radial-gradient(ellipse at 50% 36%,
      rgba(255, 215, 130, 0.55) 0%,
      rgba(248, 248, 251, 0.55) 30%,
      rgba(220, 220, 224, 0.0)  85%);
  transition: background 0.8s var(--ease-slow);
}

.tap-counter {
  margin: 0.6rem auto 0;
  height: 1.4rem;
  text-align: center;
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: var(--track-wide);
  color: var(--blood);
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.6s var(--ease-slow);
  pointer-events: none;
}
.tap-counter.is-visible { opacity: 1; }
.tap-counter::before { content: '— '; opacity: 0.6; }
.tap-counter::after  { content: ' taps remain'; opacity: 0.6; }

/* ─────────────────────────────────────────────
   prize reveal · flash drive + copy after break
   lives INSIDE .stage — replaces the chrome egg in place,
   does not push other content down. compact for mobile.
   ───────────────────────────────────────────── */
.prize-reveal {
  position: absolute;
  inset: 0;
  z-index: 5;
  text-align: center;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  padding: 1.5rem;
  pointer-events: auto;
  /* soft halo backdrop so text stays legible while shards fall through */
  background: radial-gradient(ellipse at center,
                rgba(248, 248, 251, 0.85) 0%,
                rgba(248, 248, 251, 0.55) 45%,
                rgba(248, 248, 251, 0.0)  85%);
}

.prize-reveal.is-visible { display: flex; }

.prize-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.32rem;
  max-width: 36ch;
}

.prize-block__lab {
  font-family: var(--sans);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: var(--track-wide);
  color: var(--chrome-dim);
  text-transform: uppercase;
}

.prize-block__amt {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  font-weight: 400;
  letter-spacing: 0.16em;
  color: var(--chrome);
  line-height: 1.1;
  margin: 0.1rem 0;
}
.prize-block__amt strong {
  color: var(--blood);
  font-weight: 500;
  letter-spacing: 0.18em;
}

.prize-block__det {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.85rem;
  color: var(--chrome-dim);
  line-height: 1.5;
}
.prize-block__det strong {
  color: var(--chrome);
  font-style: normal;
  font-weight: 500;
}

@media (max-width: 640px) {
  .prize-reveal { gap: 0.5rem; padding: 1rem; }
  .prize-block__lab { font-size: 0.55rem; }
  .prize-block__det { font-size: 0.78rem; }
}

[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 1.1s var(--ease-slow), transform 1.1s var(--ease-slow);
}
[data-reveal].is-in {
  opacity: 1;
  transform: translateY(0);
}

.flash-drive {
  width: clamp(48px, 8vw, 64px);
  height: auto;
  filter: drop-shadow(0 12px 24px rgba(168, 124, 28, 0.45))
          drop-shadow(0 3px 6px  rgba(80, 60, 12, 0.25));
  animation: floatGold 4.2s ease-in-out infinite;
}

@keyframes floatGold {
  0%, 100% { transform: translateY(0)   rotate(-3deg); }
  50%      { transform: translateY(-12px) rotate(2deg); }
}

.prize-amount {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 400;
  letter-spacing: 0.16em;
  color: var(--chrome);
  line-height: 1.2;
}

.prize-amount strong {
  color: var(--blood);
  font-weight: 500;
  letter-spacing: 0.18em;
}

.prize-rules {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: var(--track-wide);
  color: var(--chrome-dim);
  text-transform: uppercase;
  padding: 0.7rem 1.4rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  display: inline-block;
  background: rgba(255, 255, 255, 0.4);
}

.prize-rules strong { color: var(--blood); font-weight: 500; }

/* ─────────────────────────────────────────────
   THE VIGIL · community section
   ───────────────────────────────────────────── */
.vigil {
  max-width: 700px;
  margin: 1rem auto 6rem;
  padding: 4rem 2rem 3rem;
  text-align: center;
  position: relative;
  z-index: 5;
  border-top: 1px solid var(--line);
}

.vigil__intro {
  margin: 1rem auto 2rem;
}

.vigil__body {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  max-width: 44ch;
  margin: 0 auto 2.5rem;
}

.vigil__body .fragment {
  font-size: 1.05rem;
  line-height: 1.7;
}

.vigil__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
}

/* ─────────────────────────────────────────────
   THE REACH · creator incentive program
   ───────────────────────────────────────────── */
.reach {
  max-width: 700px;
  margin: 0 auto 6rem;
  padding: 4rem 2rem 3rem;
  text-align: center;
  position: relative;
  z-index: 5;
  border-top: 1px solid var(--line);
}

.reach__intro {
  margin: 1rem auto 1.6rem;
}

.reach__body {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  max-width: 44ch;
  margin: 0 auto;
}

.reach__body .fragment {
  font-size: 1.05rem;
  line-height: 1.7;
}

.reach__rule {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 1.4rem 1.6rem;
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(220,220,226,0.3));
  margin: 0.4rem 0;
  box-shadow: 0 8px 28px rgba(20, 20, 30, 0.05);
}

.reach__rule-line {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--chrome);
  line-height: 1.5;
}
.reach__rule-line strong {
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--blood);
}

.reach__rule-line--cap {
  font-size: 0.85rem;
  font-style: italic;
  color: var(--chrome-dim);
  letter-spacing: 0.02em;
}
.reach__rule-line--cap strong { color: var(--chrome); }

.prize-divider {
  width: 30%;
  max-width: 200px;
  height: 1px;
  background: var(--line-strong);
  margin: 0.4rem auto;
  position: relative;
}
.prize-divider::after {
  content: '·';
  position: absolute;
  top: -0.6rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--paper);
  padding: 0 0.45rem;
  color: var(--chrome-dim);
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1;
}

/* ─────────────────────────────────────────────
   examples row · 4 small static reference images
   below the pending/accepted counter
   ───────────────────────────────────────────── */
.examples {
  width: 100%;
  max-width: 640px;
  margin: 1.5rem auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
}

.examples__lab {
  font-family: var(--sans);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: var(--track-wide);
  color: var(--chrome-dim);
  text-transform: uppercase;
}

.examples__row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.4rem;
  width: 100%;
  align-items: end;
}

.example {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  cursor: default;
}

.example__img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 6px 8px rgba(20, 20, 30, 0.16))
          drop-shadow(0 2px 4px rgba(20, 20, 30, 0.08));
  transition: transform 0.6s var(--ease-slow), filter 0.6s var(--ease-slow);
  animation: floatLite 9s ease-in-out infinite;
  -webkit-user-drag: none;
}

.example:nth-child(1) .example__img { animation-delay:  0s;   }
.example:nth-child(2) .example__img { animation-delay: -2.2s; }
.example:nth-child(3) .example__img { animation-delay: -4.5s; }
.example:nth-child(4) .example__img { animation-delay: -6.7s; }

@keyframes floatLite {
  0%, 100% { transform: translateY(0px); }
  50%      { transform: translateY(-5px); }
}

.example:hover .example__img {
  transform: translateY(-6px) scale(1.06);
  filter: drop-shadow(0 14px 18px rgba(20, 20, 30, 0.22))
          drop-shadow(0 4px 6px  rgba(20, 20, 30, 0.10));
}

.example__label {
  font-family: var(--serif);
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0.36em;
  color: var(--chrome-dim);
}

@media (max-width: 640px) {
  .examples__row { gap: 0.8rem; }
  .example__label { font-size: 0.8rem; }
}

/* floating shadow under the chrome — bigger, breathes with levitation */
.stage::after {
  content: '';
  position: absolute;
  bottom: 4%;
  left: 50%;
  width: 58%;
  height: 32px;
  transform: translateX(-50%);
  background:
    radial-gradient(ellipse at center,
      rgba(30,30,40,0.50) 0%,
      rgba(30,30,40,0.22) 35%,
      rgba(30,30,40,0.06) 65%,
      rgba(30,30,40,0.0)  90%);
  pointer-events: none;
  filter: blur(14px);
  z-index: 2;
  animation: shadowBreathe 7s ease-in-out infinite;
  transform-origin: center;
}

@keyframes shadowBreathe {
  0%, 100% {
    transform: translateX(-50%) scaleX(1)    scaleY(1);
    opacity: 1;
  }
  50% {
    transform: translateX(-50%) scaleX(1.25) scaleY(0.6);
    opacity: 0.45;
  }
}

/* ─────────────────────────────────────────────
   chrome hurt gallery — four unique examples,
   auto-cycling crossfade with parallax tilt
   ───────────────────────────────────────────── */
.stage--gallery {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

.gallery {
  position: absolute;
  inset: 0;
  z-index: 1;
  transform-style: preserve-3d;
  will-change: transform;
  cursor: grab;
}

.stage--gallery:active .gallery,
.gallery:active {
  cursor: grabbing;
}

.gallery__slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 1.4s var(--ease-slow), transform 1.4s var(--ease-slow);
  transform: scale(0.985);
}

.gallery__slide.is-active {
  opacity: 1;
  transform: scale(1);
}

/* offset levitation phase per slide — each chrome floats at a different
   point in the cycle, so cycling between them keeps the motion varied. */
.gallery__slide:nth-child(1) img { animation-delay:  0s;   }
.gallery__slide:nth-child(2) img { animation-delay: -1.7s; }
.gallery__slide:nth-child(3) img { animation-delay: -3.5s; }
.gallery__slide:nth-child(4) img { animation-delay: -5.2s; }

.gallery__slide img {
  width: 110%;
  height: 110%;
  position: absolute;
  top: -5%;
  left: -5%;
  object-fit: contain;
  display: block;
  pointer-events: none;
  -webkit-user-drag: none;
  animation: levitate 7s ease-in-out infinite;
  transform-origin: 50% 60%;
  will-change: transform, filter;
  /* gentle pop without modifying the source image */
  filter: brightness(1.04) contrast(1.06) saturate(1.02);
}

/* shine sweep — a moving bright streak masked to the chrome silhouette,
   so it only brightens the chrome surface, not the empty page bg around it.
   the mask uses each slide's own image as an alpha mask. */
.gallery__slide::after {
  content: '';
  position: absolute;
  inset: -5%;
  background:
    linear-gradient(
      105deg,
      transparent 38%,
      rgba(255, 255, 255, 0.38) 49%,
      rgba(255, 255, 255, 0.55) 50%,
      rgba(255, 255, 255, 0.38) 51%,
      transparent 62%
    );
  background-size: 250% 100%;
  background-position: -125% 0;
  animation: shineSweep 9s ease-in-out infinite;
  pointer-events: none;
  mix-blend-mode: screen;
  -webkit-mask-size: 110% 110%;
  mask-size: 110% 110%;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1.4s var(--ease-slow);
}

.gallery__slide.is-active::after {
  opacity: 1;
}

.gallery__slide:nth-child(1)::after {
  -webkit-mask-image: url('chrome-hurt-1.png');
  mask-image: url('chrome-hurt-1.png');
}
.gallery__slide:nth-child(2)::after {
  -webkit-mask-image: url('chrome-hurt-2.png');
  mask-image: url('chrome-hurt-2.png');
}
.gallery__slide:nth-child(3)::after {
  -webkit-mask-image: url('chrome-hurt-3.png');
  mask-image: url('chrome-hurt-3.png');
}
.gallery__slide:nth-child(4)::after {
  -webkit-mask-image: url('chrome-hurt-4.png');
  mask-image: url('chrome-hurt-4.png');
}

@keyframes shineSweep {
  0%   { background-position: -125% 0; }
  60%  { background-position:  125% 0; }
  100% { background-position:  125% 0; }
}

@keyframes levitate {
  0% {
    transform: translateY(0)    rotate(-0.4deg) scale(1);
    filter:
      drop-shadow(0 18px 22px rgba(20, 20, 30, 0.18))
      drop-shadow(0 4px 8px  rgba(20, 20, 30, 0.10));
  }
  25% {
    transform: translateY(-9px) rotate(0.3deg)  scale(1.006);
  }
  50% {
    transform: translateY(-15px) rotate(0.4deg) scale(1.012);
    filter:
      drop-shadow(0 32px 30px rgba(20, 20, 30, 0.10))
      drop-shadow(0 6px 10px  rgba(20, 20, 30, 0.06));
  }
  75% {
    transform: translateY(-9px) rotate(-0.3deg) scale(1.006);
  }
  100% {
    transform: translateY(0)    rotate(-0.4deg) scale(1);
    filter:
      drop-shadow(0 18px 22px rgba(20, 20, 30, 0.18))
      drop-shadow(0 4px 8px  rgba(20, 20, 30, 0.10));
  }
}

/* counter — I / IV  · roman numerals */
.gallery__counter {
  position: absolute;
  bottom: -2.4rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-family: var(--serif);
  font-size: 0.85rem;
  letter-spacing: 0.32em;
  color: var(--chrome-dim);
}

.gallery__counter strong {
  font-weight: 500;
  color: var(--chrome);
  letter-spacing: 0.32em;
  min-width: 2.4em;
  text-align: center;
  display: inline-block;
}

.gallery__dots {
  display: flex;
  gap: 0.5rem;
}

.gallery__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ash);
  opacity: 0.5;
  transition: opacity 0.6s var(--ease-slow), background 0.6s var(--ease-slow);
  cursor: pointer;
  border: none;
  padding: 0;
}

.gallery__dot.is-active {
  background: var(--chrome);
  opacity: 1;
}

@media (max-width: 640px) {
  .gallery__counter { font-size: 0.7rem; bottom: -2rem; }
}

/* ─────────────────────────────────────────────
   layout primitives
   ───────────────────────────────────────────── */
.frame {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  padding: 2rem 2.5rem;
}

.frame > * {
  pointer-events: auto;
}

.frame__tl { align-self: start; justify-self: start; }
.frame__tr { align-self: start; justify-self: end; text-align: right; }
.frame__bl { align-self: end;   justify-self: start; }
.frame__br { align-self: end;   justify-self: end;   text-align: right; }

.center-stack {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  padding: 6rem 2rem;
  text-align: center;
}

.column {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
}

/* ─────────────────────────────────────────────
   buttons / links — anti-cta
   ───────────────────────────────────────────── */
.summon {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: var(--track-wide);
  color: var(--chrome);
  text-transform: uppercase;
  text-decoration: none;
  padding: 1rem 0;
  border: none;
  background: none;
  position: relative;
  cursor: pointer;
  transition: opacity 0.6s var(--ease-slow), letter-spacing 0.6s var(--ease-slow);
}

.summon::before,
.summon::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 1.3em;
  height: 1px;
  background: var(--chrome);
  opacity: 0.5;
  transition: width 0.6s var(--ease-slow), opacity 0.6s var(--ease-slow);
}

.summon::before { right: calc(100% + 0.9em); }
.summon::after  { left:  calc(100% + 0.9em); }

.summon:hover {
  letter-spacing: 0.55em;
}

.summon:hover::before,
.summon:hover::after {
  width: 2.4em;
  opacity: 0.9;
}

.subtle-link {
  color: var(--chrome-dim);
  text-decoration: none;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: var(--track-medium);
  text-transform: uppercase;
  transition: color 0.4s ease;
}

.subtle-link:hover { color: var(--chrome); }

/* ─────────────────────────────────────────────
   form
   ───────────────────────────────────────────── */
.petition {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.field__label {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: var(--track-wide);
  color: var(--chrome-dim);
  text-transform: uppercase;
}

.field__input,
.field__area {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line-strong);
  padding: 0.5rem 0;
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--chrome);
  outline: none;
  transition: border-color 0.6s var(--ease-slow);
}

.field__input:focus,
.field__area:focus {
  border-color: var(--chrome);
}

.field__area {
  resize: none;
  min-height: 4rem;
  font-family: var(--serif);
  line-height: 1.6;
}

::placeholder { color: var(--ash); font-style: italic; }

/* file input — custom styled for screenshot upload on reach.html */
.field__file {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--line-strong);
}

.field__file-trigger {
  font-family: var(--sans);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: var(--track-medium);
  color: var(--chrome);
  text-transform: uppercase;
  padding: 0.55rem 1.2rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.4);
  transition: border-color 0.4s ease, background 0.4s ease, box-shadow 0.4s ease;
}
.field__file-trigger:hover {
  border-color: var(--chrome);
  background: rgba(26, 26, 34, 0.04);
  box-shadow: 0 4px 12px rgba(20, 20, 30, 0.06);
}

.field__file-name {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--chrome-dim);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.field__help {
  font-family: var(--sans);
  font-size: 0.66rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--chrome-dim);
  margin-top: 0.5rem;
  line-height: 1.6;
  text-transform: none;
}
.field__help em {
  font-style: italic;
  color: var(--chrome);
}

/* ─────────────────────────────────────────────
   reference hash
   ───────────────────────────────────────────── */
.hash {
  font-family: 'Cormorant Garamond', monospace;
  font-size: 1.2rem;
  letter-spacing: 0.4em;
  color: var(--chrome);
  padding: 1.2rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: inline-block;
  min-width: 22ch;
  text-align: center;
}

/* ─────────────────────────────────────────────
   covenant accents (approved + acquire only)
   ───────────────────────────────────────────── */
.covenant-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(180, 160, 100, 0.06) 0%, transparent 55%);
  z-index: -1;
}

/* ─────────────────────────────────────────────
   responsive
   ───────────────────────────────────────────── */
@media (max-width: 640px) {
  .frame { padding: 1.2rem; grid-gap: 0.5rem; font-size: 0.9rem; }
  .frame__tr, .frame__br { text-align: right; }
  .center-stack { gap: 1.4rem; padding: 4rem 1.2rem; }
  .mark__word { font-size: 2.6rem; }
  .mark__cross { display: none; }
}

/* ─────────────────────────────────────────────
   coordinate traces (landing only) — four points.
   their meaning is not for the source.
   ───────────────────────────────────────────── */
.trace {
  font-family: var(--sans);
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: var(--track-medium);
  color: var(--chrome-dim);
  text-transform: uppercase;
  white-space: nowrap;
}

.trace strong {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  color: var(--chrome);
  margin-right: 0.2em;
}

.trace span { color: var(--ash); }

.trace-stack {
  display: flex;
  flex-direction: column;
  gap: 0.42rem;
  align-items: flex-end;
}

@media (max-width: 640px) {
  .trace-stack { gap: 0.32rem; }
  .trace { font-size: 0.55rem; }
  .trace strong { font-size: 0.68rem; }
}

/* ─────────────────────────────────────────────
   social-proof counter
   "13,400 pending · 35 accepted"
   ───────────────────────────────────────────── */
.proof {
  display: inline-flex;
  align-items: baseline;
  gap: 1.6rem;
  padding: 1rem 0;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--chrome-dim);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.proof__num {
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--chrome);
}

.proof__sep {
  width: 1px;
  height: 1.4rem;
  background: var(--line-strong);
  align-self: center;
}

.proof__pair {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
}

.proof__pair--right { align-items: flex-end; }

@media (max-width: 480px) {
  .proof { gap: 0.9rem; }
  .proof__num { font-size: 1.05rem; }
}

/* ─────────────────────────────────────────────
   "who is mors" panel — application
   ───────────────────────────────────────────── */
.dossier {
  width: 100%;
  max-width: 520px;
  margin: 0 auto 1rem;
  padding: 1.8rem 1.8rem;
  border: 1px solid var(--line-strong);
  border-radius: 22px;
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,0.65), rgba(220,220,226,0.42));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  text-align: left;
  box-shadow: 0 12px 40px rgba(20, 20, 30, 0.06),
              0 2px 6px rgba(20, 20, 30, 0.04);
}

.dossier::before {
  content: '— DOSSIER ·  I';
  position: absolute;
  top: -0.55rem;
  left: 1.2rem;
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: var(--track-wide);
  color: var(--chrome-dim);
  text-transform: uppercase;
  background: var(--paper);
  padding: 0 0.6rem;
}

.dossier__title {
  font-family: var(--serif);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--chrome);
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 1.1rem;
}

.dossier__body {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.08rem;
  line-height: 1.7;
  color: var(--chrome-dim);
}

.dossier__body p + p { margin-top: 0.7rem; }
.dossier__body strong { color: var(--chrome); font-style: normal; font-weight: 500; }

/* ─────────────────────────────────────────────
   24-hour expiry countdown
   ───────────────────────────────────────────── */
.timer {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 1rem 1.6rem;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  position: relative;
  box-shadow: 0 6px 22px rgba(20, 20, 30, 0.05);
}

.timer__label {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: var(--track-wide);
  color: var(--chrome-dim);
  text-transform: uppercase;
}

.timer__value {
  font-family: var(--serif);
  font-size: 1.7rem;
  font-weight: 400;
  letter-spacing: 0.28em;
  color: var(--chrome);
  font-variant-numeric: tabular-nums;
}

.timer--urgent {
  border-color: var(--blood);
}
.timer--urgent .timer__value { color: var(--blood); }
.timer--urgent .timer__label { color: var(--blood); }

/* ─────────────────────────────────────────────
   expired state
   ───────────────────────────────────────────── */
.expired-curtain {
  display: none;
  flex-direction: column;
  gap: 1.4rem;
  align-items: center;
  text-align: center;
  padding: 3rem 2rem;
  border: 1px solid var(--line-strong);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(248,240,240,0.7), rgba(232,224,224,0.6));
  box-shadow: 0 12px 40px rgba(20, 20, 30, 0.06);
}

body.is-expired .expired-curtain { display: flex; }
body.is-expired .acq-meta__before { display: none; }
body.is-expired .stage { opacity: 0.18; filter: grayscale(0.6); transition: opacity 1s, filter 1s; }

.expired-curtain__title {
  font-family: var(--serif);
  font-size: 2rem;
  letter-spacing: 0.2em;
  font-weight: 300;
  text-transform: uppercase;
  color: var(--blood);
}

.expired-curtain__body {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--chrome-dim);
  max-width: 36ch;
}

/* ─────────────────────────────────────────────
   prior-decline warning
   ───────────────────────────────────────────── */
.prior {
  display: none;
  padding: 1rem 1.4rem;
  border: 1px solid var(--blood);
  border-radius: 14px;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: var(--track-medium);
  text-transform: uppercase;
  color: var(--blood);
  text-align: center;
  margin-bottom: 1.2rem;
  max-width: 520px;
  box-shadow: 0 4px 18px rgba(180, 24, 32, 0.08);
}

body.has-prior .prior { display: block; }

/* ─────────────────────────────────────────────
   forthcoming section — future collections
   ───────────────────────────────────────────── */
.forthcoming {
  max-width: 760px;
  margin: 1rem auto 6rem;
  padding: 4rem 2rem 0;
  text-align: center;
  position: relative;
  z-index: 5;
}

.forthcoming__intro {
  margin: 1rem auto 2.5rem;
}

.forthcoming__list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line-strong);
  margin-top: 2rem;
}

.forthcoming__row {
  display: grid;
  grid-template-columns: 2fr 1.2fr 1fr;
  align-items: center;
  padding: 1.5rem 0.4rem;
  border-bottom: 1px solid var(--line);
  gap: 1rem;
  transition: background 0.5s var(--ease-slow);
}

.forthcoming__row:hover {
  background: rgba(240,240,243,0.02);
}

.forthcoming__title {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  text-align: left;
  color: var(--chrome);
}

.forthcoming__edition {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--chrome-dim);
  letter-spacing: 0.04em;
  text-align: center;
}

.forthcoming__edition strong {
  font-style: normal;
  font-weight: 500;
  color: var(--chrome);
  letter-spacing: 0.18em;
  margin-right: 0.4em;
}

.forthcoming__status {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--chrome-dim);
  text-align: right;
}

.forthcoming__status::before {
  content: '○ ';
  color: var(--blood);
  margin-right: 0.4em;
  animation: pulse 2.4s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1; }
}

.forthcoming__coda {
  margin-top: 3rem;
  opacity: 0.7;
}

@media (max-width: 640px) {
  .forthcoming { padding: 3rem 1.2rem 0; }
  .forthcoming__row { grid-template-columns: 1fr; gap: 0.4rem; padding: 1.2rem 0.4rem; text-align: left; }
  .forthcoming__title { font-size: 0.95rem; letter-spacing: 0.24em; }
  .forthcoming__edition, .forthcoming__status { text-align: left; }
}

/* ─────────────────────────────────────────────
   vigil — happy hunting · continue
   appears once the open-chamber invite is copied
   ───────────────────────────────────────────── */
.vigil-continue {
  display: flex;
  justify-content: center;
  margin: 2.5rem auto 0;
  animation: vigil-continue-fade 0.8s ease-out forwards;
}

@keyframes vigil-continue-fade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.vigil-continue__btn {
  /* uses .summon — same primary-button language as everything else */
}

/* ─────────────────────────────────────────────
   confirmation modal
   ───────────────────────────────────────────── */
.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  transition: opacity 0.32s ease;
}

.modal.is-open {
  opacity: 1;
}

.modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(20, 20, 28, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
}

.modal__panel {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: 22px;
  padding: 2.6rem 2rem 2rem;
  max-width: 30rem;
  width: 100%;
  text-align: center;
  box-shadow: 0 30px 80px rgba(20, 20, 30, 0.28),
              0 8px 24px rgba(20, 20, 30, 0.08);
  transform: translateY(10px) scale(0.985);
  opacity: 0;
  transition: opacity 0.32s ease 0.05s, transform 0.32s ease 0.05s;
}

.modal.is-open .modal__panel {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.modal__q {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.35rem;
  font-weight: 400;
  color: var(--chrome);
  margin: 0 0 0.85rem;
  line-height: 1.45;
}

.modal__sub {
  font-family: var(--sans);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: var(--track-medium);
  text-transform: uppercase;
  color: var(--chrome-dim);
  margin: 0 0 2rem;
}

.modal__actions {
  display: flex;
  gap: 0.9rem;
  justify-content: center;
  flex-wrap: wrap;
}

.modal__btn {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: var(--track-medium);
  text-transform: uppercase;
  padding: 0.85rem 1.7rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  border: 1px solid var(--chrome);
  background: transparent;
  color: var(--chrome);
}

.modal__btn--no:hover {
  background: rgba(20, 20, 30, 0.06);
}

.modal__btn--yes {
  background: var(--chrome);
  color: var(--paper);
}

.modal__btn--yes:hover {
  background: #000;
}

@media (max-width: 480px) {
  .modal__panel { padding: 2rem 1.4rem 1.6rem; border-radius: 18px; }
  .modal__q { font-size: 1.18rem; }
  .modal__btn { padding: 0.78rem 1.4rem; font-size: 0.66rem; }
}

/* ─────────────────────────────────────────────
   passage — the anonymous mask, breaks apart on OK
   ───────────────────────────────────────────── */
.passage-body {
  background: var(--paper);
  min-height: 100vh;
  overflow: hidden;
}

.passage {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 1.5rem;
  text-align: center;
  position: relative;
  z-index: 4;
}

.passage__mask {
  width: 200px;
  margin: 0 auto 2.6rem;
  filter: drop-shadow(0 14px 28px rgba(20, 20, 30, 0.18))
          drop-shadow(0 2px 6px rgba(20, 20, 30, 0.10));
}

.passage__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.passage__svg .frag {
  transform-origin: center center;
  transform-box: fill-box;
}

.passage__msg {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--chrome);
  max-width: 32ch;
  margin: 0 auto 2.4rem;
  letter-spacing: 0.005em;
  line-height: 1.5;
}

.passage__ok {
  /* uses .summon — primary button language */
  min-width: 8rem;
}

/* ── the break ──
   each fragment + the message + the button fall with their own
   x-shift, rotation, and start delay so the disintegration feels
   physical instead of synchronized. */
.passage.is-breaking .frag {
  animation: passage-fall 1.5s cubic-bezier(0.42, 0, 0.65, 1) forwards;
}

.passage.is-breaking [data-frag="1"] { --fx:  -55px; --fr: -22deg; animation-delay: 0.04s; }
.passage.is-breaking [data-frag="2"] { --fx:   30px; --fr:  14deg; animation-delay: 0s;    }
.passage.is-breaking [data-frag="3"] { --fx:  -18px; --fr:  -7deg; animation-delay: 0.12s; }

.passage.is-breaking .passage__msg {
  animation: passage-fall 1.5s cubic-bezier(0.42, 0, 0.65, 1) forwards;
  animation-delay: 0.18s;
  --fx: 24px; --fr: 8deg;
}

.passage.is-breaking .passage__ok {
  animation: passage-fall 1.5s cubic-bezier(0.42, 0, 0.65, 1) forwards;
  animation-delay: 0.28s;
  --fx: -24px; --fr: -10deg;
}

@keyframes passage-fall {
  0%   { transform: translate(0, 0) rotate(0); opacity: 1; }
  12%  { opacity: 1; }
  100% { transform: translate(var(--fx, 0), 120vh) rotate(var(--fr, 0)); opacity: 0; }
}

/* ── final state ── */
.passage-final {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  opacity: 0;
  transition: opacity 1.4s ease 0.2s;
  z-index: 6;
}

.passage-final.is-visible {
  opacity: 1;
}

.passage-final__msg {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.7rem;
  font-weight: 400;
  color: var(--chrome);
  letter-spacing: 0.01em;
  max-width: 30ch;
  line-height: 1.5;
  margin: 0;
}

@media (max-width: 480px) {
  .passage__mask { width: 160px; margin-bottom: 2rem; }
  .passage__msg { font-size: 1.18rem; }
  .passage-final__msg { font-size: 1.4rem; }
}