/* ==========================================================================
   vein.pub — scenes
   Six art-directed frames. Reveal primitives, then scene-by-scene.
   ========================================================================== */

/* --- reveal primitives --------------------------------------------------- *
 * Hidden-initial states apply ONLY under `.motion` (added by JS when motion is
 * allowed). No JS, or reduced-motion => no `.motion` => everything is visible
 * and static. JS adds `.is-in` when a block scrolls into view.
 * ------------------------------------------------------------------------- */
.motion [data-reveal] {
  opacity: 0;
  transform: translateY(2.2rem);
  transition:
    opacity var(--dur-3) var(--ease-out-expo),
    transform var(--dur-3) var(--ease-out-expo),
    filter var(--dur-3) var(--ease-out-expo),
    clip-path var(--dur-4) var(--ease-out-expo);
  transition-delay: var(--reveal-delay, 0s);
}
.motion [data-reveal="rise-lg"] { transform: translateY(5rem); }
.motion [data-reveal="fade"]    { transform: none; }
.motion [data-reveal="blur"]    { filter: blur(18px); transform: scale(1.04); }
.motion [data-reveal].is-in {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Mask reveals clip the INNER child, never the observed element itself:
   a clip-path that collapses a box to zero makes IntersectionObserver treat
   it as off-screen, so the reveal would never fire. */
.motion [data-reveal^="mask"] { opacity: 1; transform: none; }
.motion [data-reveal^="mask"] > * {
  transition: clip-path var(--dur-4) var(--ease-out-expo);
  transition-delay: var(--reveal-delay, 0s);
}
.motion [data-reveal="mask"]    > * { clip-path: inset(102% 0 0 0); }
.motion [data-reveal="mask-up"] > * { clip-path: inset(0 0 102% 0); }
.motion [data-reveal="mask-r"]  > * { clip-path: inset(0 102% 0 0); }
.motion [data-reveal^="mask"].is-in > * { clip-path: inset(0 0 0 0); }

/* per-item stagger inside a group */
.motion [data-stagger] > * {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.72em);
  filter: blur(9px);
  transition:
    opacity var(--dur-2) var(--ease-out-expo),
    transform var(--dur-2) var(--ease-out-expo),
    filter var(--dur-2) var(--ease-out-expo);
  transition-delay: calc(var(--i, 0) * 0.045s);
}
.motion [data-stagger].is-in > * { opacity: 1; transform: none; filter: none; }

.scene { position: relative; z-index: var(--z-scene); }

/* ==========================================================================
   1 — ENTER : the name surfaces from black
   ========================================================================== */
.enter {
  position: relative;
  min-height: 100svh;
  padding: var(--gutter);
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  overflow: hidden;
}
.enter__art {
  position: absolute;
  top: -12%; right: 0;
  height: 124%;
  width: min(50%, 760px);
  object-fit: cover;
  object-position: 85% top;
  opacity: 0.85;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%, #000 88%, transparent),
                      linear-gradient(180deg, transparent, #000 12%, #000 80%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 30%, #000 88%, transparent),
              linear-gradient(180deg, transparent, #000 12%, #000 80%, transparent);
  mask-composite: intersect;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  z-index: 0;
  pointer-events: none;
  will-change: transform;
}
.enter > *:not(.enter__art) { position: relative; z-index: 1; }
.enter__stage { will-change: transform, opacity; }
@keyframes batfloat {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-1.5deg); }
  50% { transform: translate3d(0, -9px, 0) rotate(2.5deg); }
}
.enter__kicker {
  align-self: start;
  margin-top: clamp(3.5rem, 9vh, 7rem);
  max-width: 30ch;
}
.enter__stage {
  align-self: center;
  position: relative;
}
.enter__mark {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3rem, 15vw, 16rem);
  line-height: var(--lh-tight);
  letter-spacing: -0.025em;
  color: var(--bone);
  margin-left: -0.04em;
}
.enter__mark .char {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-right: 0.008em;
}
.enter__mark .char > span {
  display: inline-block;
}
.motion .enter__mark .char > span {
  transform: translateY(112%);
  transition: transform var(--dur-4) var(--ease-out-expo);
  transition-delay: calc(var(--i, 0) * 0.11s + 0.15s);
}
.motion .enter.is-in .enter__mark .char > span { transform: translateY(0); }
.enter__mark .enter__pub {
  font-size: 0.72em;
  vertical-align: baseline;
  color: var(--vein-red);
}

.enter__meta {
  align-self: end;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--s-4);
  flex-wrap: wrap;
}
.enter__line {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: 1.14;
  max-width: 20ch;
  color: var(--bone);
}
.enter__idx { text-align: right; }

.scrollcue {
  position: absolute;
  left: 50%;
  bottom: clamp(1rem, 3vh, 2.2rem);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
}
.scrollcue__rail {
  position: relative;
  width: 1px;
  height: 46px;
  background: var(--hairline);
  overflow: hidden;
}
.scrollcue__rail::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 40%;
  background: var(--bone);
}
.motion .scrollcue__rail::after { animation: cuefall 2.4s var(--ease-inout) infinite; }
@keyframes cuefall {
  0% { transform: translateY(-100%); }
  60%, 100% { transform: translateY(250%); }
}

/* ==========================================================================
   2 — CREED : fragmented philosophy, scroll-reactive, deep negative space
   ========================================================================== */
.creed {
  padding: clamp(8rem, 22vh, 18rem) var(--gutter);
  display: flex;
  flex-direction: column;
  gap: clamp(6rem, 17vh, 15rem);
  overflow: hidden; /* clips the auto-parry clip where it bleeds past the left edge */
}
.creed__frag { position: relative; max-width: min(92vw, 46rem); }
/* extra room below the ESP fragment so its right-bleeding clip clears the
   next (Автопари) fragment before that one starts */
.creed__frag--esp { margin-bottom: clamp(6rem, 24vh, 20rem); }
.creed__frag:nth-child(2) { align-self: flex-end; text-align: right; }
/* frag 3 stays on the left but drops down so it sits BELOW the parry clip, not beside it */
.creed__frag:nth-child(3) { align-self: flex-start; margin-left: clamp(0rem, 8vw, 9rem); margin-top: clamp(4rem, 16vh, 12rem); }
.creed__frag:nth-child(4) { align-self: flex-end; text-align: right; margin-right: clamp(0rem, 5vw, 6rem); }

.creed__lead {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: var(--bone);
}
.creed__lead em {
  font-style: italic;
  color: var(--ash);
}
.creed__note {
  margin-top: var(--s-3);
  max-width: 34ch;
  color: var(--ash);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
.creed__frag:nth-child(2) .creed__note,
.creed__frag:nth-child(4) .creed__note { margin-left: auto; }
.creed__tag {
  position: absolute;
  top: 0.35em;
  writing-mode: vertical-rl;
  letter-spacing: 0.28em;
}
.creed__frag:nth-child(odd) .creed__tag { right: calc(-1 * clamp(1.6rem, 4vw, 3.2rem)); }
.creed__frag:nth-child(even) .creed__tag { left: calc(-1 * clamp(1.6rem, 4vw, 3.2rem)); }

/* auto-parry clip — large, bleeds off the left edge behind the "Парирует"
   fragment (its text sits to the right, so they never overlap). Ambient:
   muted + looping, sits below the copy via z-index. */
.creed__bleedvid {
  position: absolute;
  top: 0;                /* top edge lines up with the "Парирует" line */
  right: calc(100% + clamp(1rem, 3vw, 3rem));
  width: min(56vw, 61rem);
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  z-index: -1;
  pointer-events: none;
  background: #000;
}

/* ESP demo clip — mirror of the parry one, bleeds off the RIGHT edge behind
   the "Враги сквозь стены" fragment (its text is left-aligned, so no overlap).
   Top lines up with the "Враги" line. */
.creed__espvid {
  position: absolute;
  top: 0;
  left: calc(100% + clamp(1rem, 3vw, 3rem));
  width: min(56vw, 61rem);
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  z-index: -1;
  pointer-events: none;
  background: #000;
}

/* ==========================================================================
   3 — GALLERY : spatial, drag / wheel / swipe / keys, momentum
   ========================================================================== */
.gallery { padding: clamp(6rem, 14vh, 11rem) 0 clamp(5rem, 11vh, 9rem); }
.gallery__head {
  padding: 0 var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--s-4);
  margin-bottom: clamp(2.5rem, 6vh, 5rem);
}
.gallery__title {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: 1;
  letter-spacing: -0.01em;
}
.gallery__viewport {
  position: relative;
  height: clamp(360px, 62vh, 660px);
}
/* base (no-JS): native horizontal scroll-snap strip */
.gallery__track {
  list-style: none;
  margin: 0;
  height: 100%;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  padding: 0 max(var(--gutter), 12vw);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.gallery__track::-webkit-scrollbar { display: none; }
.slide {
  flex: 0 0 auto;
  width: clamp(210px, 30vw, 430px);
  aspect-ratio: 4 / 5;
  margin: 0;
  scroll-snap-align: center;
}
/* upgraded (JS): absolute spatial layout, driven by transforms */
.js .gallery__viewport {
  touch-action: pan-y;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
}
.js .gallery__viewport.is-drag { cursor: grabbing; }
.js .gallery__track {
  position: absolute;
  inset: 0;
  display: block;
  overflow: visible;
  scroll-snap-type: none;
  padding: 0;
}
.js .slide {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  will-change: transform, opacity;
}

.slide__media {
  position: relative;
  width: 100%; height: 100%;
  overflow: hidden;
  background: var(--ink-raise);
}
.slide__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: filter var(--dur-2) var(--ease-out-expo);
}
.slide__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ink-deep);
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease-out-expo);
}
.js .slide:not(.is-active) .slide__media::after { opacity: 0.42; }
.slide__cap {
  display: flex;
  justify-content: space-between;
  gap: var(--s-2);
  margin-top: var(--s-2);
  transition: opacity var(--dur-2) var(--ease-out-expo);
}
.js .slide__cap { opacity: 0; }
.js .slide.is-active .slide__cap { opacity: 1; }
.slide__cap b { font-weight: 500; color: var(--bone); letter-spacing: 0.02em; }

.gallery__foot {
  padding: clamp(2rem, 5vh, 4rem) var(--gutter) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
}
.gallery__nav { display: flex; align-items: center; gap: var(--s-4); }
.gallery__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0;
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ash);
  transition: color var(--dur-1) var(--ease-out-expo);
}
.gallery__btn:hover:not([disabled]),
.gallery__btn:focus-visible { color: var(--bone); }
.gallery__btn[disabled] { opacity: 0.3; cursor: default; }
.gallery__btn svg { width: 30px; height: 8px; overflow: visible; }
.gallery__btn line { stroke: currentColor; stroke-width: 1; }
.gallery__count {
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  color: var(--bone);
}
.gallery__count b { color: var(--bone); font-weight: 500; }
.gallery__count span { color: var(--ash-dim); }

/* ==========================================================================
   5 — COLLECTION + ACCESS : the object, then subscription, no cards
   ========================================================================== */
.spread {
  padding: clamp(6rem, 15vh, 13rem) var(--gutter);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
}
.spread__media { position: relative; overflow: hidden; }
.spread__media img { width: 100%; height: 100%; object-fit: cover; }
.spread--a .spread__media { grid-column: 1 / 6; aspect-ratio: 4 / 5; }
.spread--a .spread__text { grid-column: 7 / 13; }
.spread--b .spread__media { grid-column: 8 / 13; aspect-ratio: 16 / 11; order: 2; }
.spread--b .spread__text { grid-column: 1 / 7; }

.spread__kick { margin-bottom: var(--s-3); }
.spread__title {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4.4vw, 4.25rem);
  line-height: 1.0;
  letter-spacing: -0.01em;
  margin-bottom: var(--s-3);
  overflow-wrap: break-word;
}
.spread__title em { font-style: italic; color: var(--ash); }
.spread__body { max-width: 42ch; color: var(--ash); }
.spread__body + .spread__body { margin-top: var(--s-2); }

/* access — editorial tier list, no cards */
.access { padding: clamp(6rem, 14vh, 12rem) var(--gutter) clamp(4rem, 9vh, 8rem); }
.access__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(3rem, 6vw, 7rem);
  align-items: start;
}
.access__col--form { display: flex; flex-direction: column; }
.access__head { position: relative; max-width: 40ch; margin-bottom: clamp(3rem, 8vh, 6rem); }
.access__bat {
  position: absolute;
  top: clamp(1.6rem, 7vh, 5rem);
  right: clamp(-3rem, -1vw, 0rem);
  width: clamp(2.6rem, 4.5vw, 4.4rem);
  height: auto;
  transform-origin: 32% 60%;
  z-index: 2;
  pointer-events: none;
}
.motion .access__bat.is-in { animation: batfloat 5.5s ease-in-out 0.4s infinite; }
.access__title {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: 0.94;
  letter-spacing: -0.02em;
}

/* install steps — three plain editorial columns, no cards */
.steps {
  list-style: none;
  margin: clamp(3rem, 8vh, 6rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.6rem, 4vw, 4rem);
  max-width: 64rem;
  border-top: 1px solid var(--hairline);
  padding-top: clamp(2rem, 5vh, 3.4rem);
}
.step { display: flex; flex-direction: column; gap: 0.9rem; }
.step__n { color: var(--vein-text); }
.step p { color: var(--ash); max-width: 26ch; }

.access__cta {
  margin-bottom: clamp(1.6rem, 4vh, 2.6rem);
}
.access__call {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: 0.98;
  letter-spacing: -0.01em;
  max-width: 16ch;
}

/* application form — full intake, hairline-underline fields, no boxed chrome */
.enroll {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  max-width: 52rem;
  margin-top: var(--s-4);
}
.enroll__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4) var(--s-5);
}
.enroll__field-wrap { display: flex; flex-direction: column; gap: 0.5rem; }
.enroll__field-wrap--wide { grid-column: 1 / -1; }
.enroll__field-wrap .u-label { color: var(--ash-dim); }
.enroll__field {
  background: none;
  border: none;
  border-bottom: 1px solid var(--hairline-2);
  color: var(--bone);
  font-family: var(--font-grotesk);
  font-size: var(--fs-body);
  padding: 0.3rem 0 0.6rem;
  transition: border-color var(--dur-1) var(--ease-out-expo);
}
.enroll__field::placeholder { color: var(--ash-dim); }
.enroll__field:focus { outline: none; border-color: var(--bone); }
.enroll__area { resize: vertical; min-height: 2.6em; font-family: var(--font-grotesk); }
.enroll__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-2);
}
.enroll__submit {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--bone);
  white-space: nowrap;
}
.enroll__submit svg { width: 34px; height: 8px; overflow: visible; }
.enroll__submit line { stroke: currentColor; stroke-width: 1; transition: transform var(--dur-1) var(--ease-out-expo); }
.enroll__submit:hover svg, .enroll__submit:focus-visible svg { color: var(--vein); }
.enroll__note { min-height: 1.2em; color: var(--ash); font-size: var(--fs-label); letter-spacing: 0.06em; }
.enroll__note.is-ok { color: var(--vein-text); }

/* --- features : three things vein helps with, editorial rows + icons ----- */
.features { position: relative; padding: clamp(6rem, 15vh, 13rem) var(--gutter); overflow: hidden; }
.features__art {
  position: absolute;
  top: -10%; right: 0;
  height: 120%;
  width: min(46%, 640px);
  object-fit: cover;
  object-position: center;
  opacity: 0.28;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 70%),
                      linear-gradient(180deg, transparent, #000 14%, #000 80%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 70%),
              linear-gradient(180deg, transparent, #000 14%, #000 80%, transparent);
  mask-composite: intersect;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  z-index: 0;
  pointer-events: none;
  will-change: transform;
}
.features__head, .feats { position: relative; z-index: 1; }
.features__head { max-width: 24ch; margin-bottom: clamp(3rem, 8vh, 6rem); }
.features__title {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: 0.94;
  letter-spacing: -0.02em;
}
.features__title em { font-style: italic; color: var(--ash); }

.feats { border-top: 1px solid var(--hairline); }
.feat {
  display: grid;
  grid-template-columns: 2.5rem auto 1.5fr;
  gap: clamp(1.3rem, 3.4vw, 3.4rem);
  align-items: center;
  padding: clamp(2rem, 5.5vh, 3.6rem) 0;
  border-bottom: 1px solid var(--hairline);
  transition: background var(--dur-2) var(--ease-out-expo);
}
.feat:hover { background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--bone) 3.5%, transparent) 45%, transparent); }
.feat__num { color: var(--ash-dim); font-variant-numeric: tabular-nums; }
.feat__head { display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.7rem); }
.feat__icon {
  flex: none;
  width: clamp(2.6rem, 3.4vw, 3.3rem);
  height: clamp(2.6rem, 3.4vw, 3.3rem);
  background: currentColor;
  color: var(--ash);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  transition: color var(--dur-2) var(--ease-out-expo);
}
/* paths are relative to THIS stylesheet (/styles/) */
.feat__icon--combat  { -webkit-mask-image: url(../assets/icons/Fixation.png);    mask-image: url(../assets/icons/Fixation.png); }
.feat__icon--rage    { -webkit-mask-image: url(../assets/icons/Full_Auto.png);   mask-image: url(../assets/icons/Full_Auto.png); }
.feat__icon--visuals { -webkit-mask-image: url(../assets/icons/Djinns_Mark.png); mask-image: url(../assets/icons/Djinns_Mark.png); }
.feat__icon--scripts { -webkit-mask-image: url(../assets/icons/Lil_Helpers.png); mask-image: url(../assets/icons/Lil_Helpers.png); }
.feat__icon--assist  { -webkit-mask-image: url(../assets/icons/Sleep_Dagger.png); mask-image: url(../assets/icons/Sleep_Dagger.png); }
.feat__icon--safety  { -webkit-mask-image: url(../assets/icons/Naptime.png);     mask-image: url(../assets/icons/Naptime.png); }
.feat:hover .feat__icon { color: var(--vein); }
.feat__name {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: 1;
  white-space: nowrap;
}
.feat__lead { color: var(--ash); max-width: 44ch; }
.feat__lead b { color: var(--bone); font-weight: 500; }

/* ==========================================================================
   6 — CLOSE + FOOTER : the finale
   ========================================================================== */
.close {
  position: relative;
  min-height: 108svh;
  display: grid;
  place-items: center;
  padding: var(--gutter);
  overflow: hidden;
  text-align: center;
}
.close__mark {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.8rem, 2.5vw, 2rem);
}
.close__mark span {
  font-family: var(--font-display);
  font-size: var(--fs-mega);
  line-height: 0.8;
  letter-spacing: -0.03em;
  color: var(--bone);
}
.close__mark .close__pub {
  font-size: 0.72em;
  vertical-align: baseline;
  color: var(--vein-red);
}
.close__line {
  position: absolute;
  left: 50%;
  bottom: clamp(4rem, 12vh, 9rem);
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-h3);
  color: var(--ash);
  white-space: nowrap;
}
.close__glow {
  position: absolute;
  left: 50%; top: 50%;
  width: 120vw; height: 120vw;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, color-mix(in oklab, var(--vein) 16%, transparent), transparent 42%);
  opacity: 0.5;
  pointer-events: none;
}

.foot {
  padding: clamp(2.5rem, 6vh, 5rem) var(--gutter) clamp(1.6rem, 4vh, 3rem);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: var(--s-4);
  border-top: 1px solid var(--hairline);
}
.foot__links { display: flex; gap: var(--s-4); flex-wrap: wrap; }
.foot__link { position: relative; }
.foot__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: -3px;
  width: 100%; height: 1px;
  background: var(--bone);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur-1) var(--ease-out-expo);
}
.foot__link:hover::after, .foot__link:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.foot__center { text-align: center; }
.foot__right { text-align: right; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
  .spread--a .spread__media { grid-column: 1 / 6; }
  .spread--a .spread__text { grid-column: 7 / 13; }
  .spread--b .spread__media { grid-column: 6 / 13; }
  .spread--b .spread__text { grid-column: 1 / 6; }
  .feat { grid-template-columns: 1fr; row-gap: 1.1rem; }
  .feat__num { display: none; }
  .feat__name { white-space: normal; }
  .features__art { opacity: 0.2; }

  .access__grid { grid-template-columns: 1fr; }
  .access__cta { margin-top: clamp(3rem, 7vh, 5rem); margin-bottom: 0; }
}

@media (max-width: 720px) {
  .enter { grid-template-rows: auto 1fr auto; }
  .enter__meta { flex-direction: column; align-items: flex-start; gap: var(--s-3); }
  .enter__idx { text-align: left; }
  .creed__frag,
  .creed__frag:nth-child(2),
  .creed__frag:nth-child(3),
  .creed__frag:nth-child(4) {
    align-self: stretch;
    text-align: left;
    margin: 0;
    max-width: 100%;
  }
  .creed__frag:nth-child(2) .creed__note,
  .creed__frag:nth-child(4) .creed__note { margin-left: 0; }
  .creed__tag { display: none; }
  /* no room to bleed on phones — show the clips as normal full-width blocks on top */
  .creed__bleedvid,
  .creed__espvid {
    position: static;
    width: 100%;
    transform: none;
    z-index: auto;
    margin-bottom: var(--s-3);
  }
  .creed__frag--esp { margin-bottom: 0; }

  .spread { grid-template-columns: 1fr; }
  .spread--a .spread__media,
  .spread--b .spread__media { grid-column: 1; aspect-ratio: 4 / 5; order: 0; }
  .spread--a .spread__text,
  .spread--b .spread__text { grid-column: 1; }
  .spread__media { margin-bottom: var(--s-4); }

  .enter__art { width: 74%; opacity: 0.34; }
  .features__art { display: none; }
  .feat__head { align-items: flex-start; }

  .enroll { min-width: 0; max-width: 100%; }
  .enroll__grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; gap: 1.4rem; }

  .foot { grid-template-columns: 1fr; text-align: left; row-gap: var(--s-3); }
  .foot__center, .foot__right { text-align: left; }

  .close__line { font-size: var(--fs-body); white-space: normal; width: 80%; text-align: center; }
}

@media (max-width: 420px) {
  .gallery__viewport { height: clamp(320px, 58vh, 460px); }
}