/* ============================================================================
   SEUIL · index.html — the descent through deepening doors.
   ========================================================================== */

.ink-faint { color: var(--ink-faint); }

/* ═══ 0 · THE DOOR (hero) ═══ */
.door {
  min-height: 100dvh; display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; gap: clamp(1.1rem, 3vh, 2.6rem);
  padding: clamp(4.5rem, 11vh, 8rem) var(--page-x) clamp(3rem, 7vh, 6rem);
}
.door__over { opacity: .8; margin-bottom: clamp(0.2rem, 1.5vh, 1rem); }
.door__name {
  font-size: clamp(2.6rem, 12vw, 6.5rem); letter-spacing: 0.2em; margin: 0;
  line-height: 1; color: var(--brass-hi);
}
/* sized to fit the viewport HEIGHT too, so the lock is never clipped */
.iris--hero { width: min(500px, 82vw, 52vh); margin: 0; }
.door__sub {
  font-family: var(--font-display); font-weight: 400; font-size: var(--step-1);
  letter-spacing: .04em; color: var(--ink); line-height: 1.5; margin-top: 1.6rem;
}
.door__descend { display: inline-flex; flex-direction: column; align-items: center; gap: .6rem; margin-top: 1rem; color: var(--ink-soft); }
.door__descend .label { opacity: .7; }
.door__line { width: 1px; height: 46px; background: linear-gradient(var(--brass), transparent); animation: descend 2.4s var(--ease-vault) infinite; }
@keyframes descend { 0%,100%{ transform: scaleY(.5); opacity:.4; transform-origin: top } 50%{ transform: scaleY(1); opacity:1 } }
@media (prefers-reduced-motion: reduce){ .door__line{ animation: none } }

/* ═══ chapters (shared) ═══ */
.chapter { padding: clamp(6rem, 16vh, 14rem) var(--page-x); position: relative; }
.chapter__no { color: var(--brass); margin-bottom: 1.4rem; }
.chapter__head { font-size: var(--step-4); margin-bottom: 2rem; }
.antechamber__body p, .register__body p, .admittance__sub { font-size: var(--step-1); color: var(--ink); margin-bottom: 1.2rem; }
.antechamber__body p + p { color: var(--ink-soft); }

/* ═══ I · THE ANTECHAMBER ═══ */
.antechamber { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem,5vw,6rem); align-items: center; }
.antechamber__vitrine { display: flex; flex-direction: column; align-items: center; gap: 1.4rem; }
.iris--inline { width: min(340px, 74vw); }
.antechamber__vitrine figcaption { text-align: center; color: var(--ink-faint); }
.antechamber .chapter__no, .antechamber .chapter__head, .antechamber .antechamber__body { grid-column: 1; }
.antechamber__vitrine { grid-column: 2; grid-row: 1 / span 3; }

/* ═══ II · THE VITRINES ═══ */
.vitrines__intro { max-width: 52rem; margin-bottom: clamp(2.5rem, 6vh, 5rem); }
.vitrines__note { color: var(--ink-soft); font-size: var(--step-1); }
.vitrines__rail {
  display: flex; gap: clamp(1.5rem, 4vw, 3.5rem); overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 1rem clamp(1rem,4vw,3rem) 2rem; margin: 0 calc(var(--page-x) * -1);
  padding-left: var(--page-x); padding-right: var(--page-x);
  scrollbar-width: thin; scrollbar-color: var(--brass-lo) transparent;
}
.vitrines__rail::-webkit-scrollbar { height: 4px; }
.vitrines__rail::-webkit-scrollbar-thumb { background: var(--brass-lo); }
.vitrine {
  flex: 0 0 auto; width: min(300px, 72vw); scroll-snap-align: center;
  display: flex; flex-direction: column; gap: 1.1rem; text-align: center;
  transition: transform var(--d-mid) var(--ease-vault);
}
.vitrine:hover { transform: translateY(-6px); }
.vitrine .iris { width: 100%; }
.vitrine__no { color: var(--brass); }
.vitrine__name { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-incised); color: var(--brass-hi); font-size: var(--step-0); }
.vitrine__cat { color: var(--ink-faint); }
.vitrine__open { color: var(--amber); opacity: 0; transition: opacity var(--d-mid); }
.vitrine:hover .vitrine__open, .vitrine:focus-within .vitrine__open { opacity: .85; }

/* ═══ III · THE REGISTER ═══ */
.register__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,5rem); align-items: start; margin-bottom: clamp(3rem,8vh,6rem); }
.ledger { list-style: none; padding: 0; border-top: 1px solid var(--hairline); }
.ledger li { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 1rem; padding: .9rem 0; border-bottom: 1px solid var(--hairline); }
.ledger .tnum { color: var(--ink-soft); font-size: var(--step-0); }
.redact { height: 1em; background: repeating-linear-gradient(90deg,#12100c 0 8px,#1a1712 8px 10px); border-radius: 1px; align-self: center; }
.ledger .label { color: var(--ink-faint); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 10px var(--amber); justify-self: end; }
.ledger__more { grid-template-columns: 1fr !important; display: block !important; color: var(--ink-faint); border-bottom: 0; padding-top: 1.2rem; }
.register__stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 2rem; border-top: 1px solid var(--hairline); padding-top: clamp(2rem,5vh,4rem); }
.register__stats > div { display: flex; flex-direction: column; gap: .4rem; align-items: flex-start; }
.register__stats .incised { font-size: var(--step-4); }

/* ═══ IV · THE GREAT DILATION (the peak) ═══ */
.dilation { height: 300vh; position: relative; }
.dilation__track { position: sticky; top: 0; height: 100dvh; overflow: hidden; display: grid; place-items: center; }
.dilation__stage { position: relative; width: 100%; height: 100%; display: grid; place-items: center; }
.hall {
  position: absolute; inset: 0; z-index: 0; opacity: 0; transition: opacity 1s var(--ease-vault);
  background:
    radial-gradient(50% 55% at 50% 46%, color-mix(in srgb,var(--candle) 36%,transparent) 0%, transparent 62%),
    radial-gradient(120% 120% at 50% 60%, var(--emerald) 0%, var(--shadow-deep) 70%);
}
.dilation.is-open .hall { opacity: 1; }
.iris--great { width: min(150vh, 150vw); max-width: none; }
.iris--great .iris__well { background: transparent; }
.hall__inner { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 1rem; }
.hall__over { color: var(--candle); opacity: .85; }
.hall__line { font-size: var(--step-4); color: var(--amber-hi); }
.dilation__cue { position: absolute; bottom: 8vh; left: 50%; transform: translateX(-50%); color: var(--ink-soft); transition: opacity var(--d-mid); }

/* ═══ V · THE ADMITTANCE CARD ═══ */
.admittance { text-align: center; display: flex; flex-direction: column; align-items: center; }
.admittance__sub { color: var(--ink-soft); font-size: var(--step-1); margin-bottom: clamp(2.5rem,6vh,4rem); }
.card {
  position: relative; width: min(560px, 92vw); text-align: left;
  border: 1px solid var(--brass); background:
    linear-gradient(color-mix(in srgb,var(--brass) 8%,transparent), transparent),
    color-mix(in srgb, var(--shadow-vault) 82%, transparent);
  padding: clamp(2rem,5vw,3.5rem); backdrop-filter: blur(2px);
}
.card__seal { position: absolute; top: -26px; right: 28px; width: 52px; height: 52px; border-radius: 50%;
  background: radial-gradient(50% 50% at 42% 38%, var(--brass-hi), var(--garnet-hi) 55%, #3a0c14 100%);
  box-shadow: 0 4px 18px rgba(0,0,0,.5), inset 0 0 8px rgba(0,0,0,.4); border: 1px solid var(--brass-lo); }
.card__title { font-size: var(--step-1); margin-bottom: 2rem; }
.card__field { position: relative; margin-bottom: 1.8rem; }
.card__field input {
  width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--hairline);
  color: var(--ink); font-family: var(--font-text); font-size: var(--step-1);
  padding: .6em 0; transition: border-color var(--d-fast); }
.card__field input:focus { outline: none; border-color: var(--brass-hi); }
.card__field label {
  position: absolute; left: 0; top: .6em; color: var(--ink-faint); pointer-events: none;
  font-size: var(--step-0); transition: all var(--d-fast) var(--ease-vault); }
.card__field input:focus + label,
.card__field input:not(:placeholder-shown) + label { top: -1.1em; font-size: var(--step--1); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--brass); }
.card .admit { margin-top: 1rem; width: 100%; justify-content: center; }
.card__fineprint { margin-top: 1.4rem; color: var(--ink-faint); }
.card__done { width: min(560px, 92vw); text-align: center; }
.card__done-line { font-size: var(--step-3); margin-bottom: 1.4rem; }
.card__done .measure { margin: 0 auto; color: var(--ink-soft); }

/* ═══ THE THRESHOLD CLOSES (colophon) ═══ */
.colophon { display: grid; grid-template-columns: auto 1fr; gap: clamp(2rem,5vw,5rem); align-items: center;
  padding: clamp(4rem,10vh,8rem) var(--page-x); border-top: 1px solid var(--hairline); margin-top: clamp(3rem,8vh,6rem); }
.iris--seal { width: 128px; }
.colophon__plate p.incised { font-size: var(--step-2); }
.colophon__plate > .label { margin: .4rem 0 1.4rem; }
.colophon__nav { display: flex; gap: 2rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.colophon__nav a { color: var(--ink-soft); position: relative; }
.colophon__nav a:hover { color: var(--brass-hi); }
.colophon__last { color: var(--ink-faint); }

/* ═══ RESPONSIVE — restage, don't shrink ═══ */
@media (max-width: 860px) {
  .antechamber { grid-template-columns: 1fr; }
  .antechamber__vitrine { grid-column: 1; grid-row: auto; }
  .register__grid { grid-template-columns: 1fr; }
  .register__stats { grid-template-columns: repeat(2,1fr); gap: 1.5rem 1rem; }
  .colophon { grid-template-columns: 1fr; justify-items: start; }
  .iris--great { width: min(128vw, 128vh); }
}
@media (max-width: 480px) {
  .door__name { font-size: var(--step-4); }
  .register__stats .incised { font-size: var(--step-3); }
}