/* ==========================================================================
   Tikkun Ascend — V5
   Loaded after style.css and components.css. Standalone: it does not use
   v4.css or any earlier version sheet — only what this page actually needs,
   copied in from v4.css where the pattern still applies.
   --------------------------------------------------------------------------
   V5 is a shorter, quieter pass over the same foundation: about eight content
   movements instead of fourteen, one offer (fourteen days), and one section
   — "show me the after" — built to breathe rather than to argue.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */

.t-big {
  font-family: var(--display);
  font-size: clamp(2.5rem, 6.2vw, 4.6rem);
  line-height: 1.06;
  font-weight: 500;
  letter-spacing: -.014em;
  margin: 0 0 1.25rem;
  text-wrap: balance;
}

/* The line a section rests on. */
.land {
  font-family: var(--display);
  font-size: clamp(1.6rem, 3.2vw, 2.5rem);
  line-height: 1.3;
  font-weight: 500;
  margin: 2.25rem 0 0;
  text-wrap: balance;
}
.is-navy .land, .is-deep .land { color: var(--cream); }
.is-cream .land, .is-warm .land { color: var(--navy); }
.land em { font-style: normal; color: var(--gold); }
.is-cream .land em, .is-warm .land em { color: var(--gold-ink); }

/* --------------------------------------------------------------------------
   Imagine — "show me the after," at scale, with room to breathe
   -------------------------------------------------------------------------- */

.imagine {
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.45rem, 3vw, 2.15rem);
  line-height: 1.4;
  color: var(--navy);
  max-width: 40rem;
}
.imagine li { padding: .42rem 0; }
.is-navy .imagine, .is-deep .imagine { color: var(--cream); }

/* A run of short lines that belong to the line above them. */
.imagine--tight {
  font-size: clamp(1.2rem, 2.3vw, 1.6rem);
  margin-top: .35rem;
  padding-left: 1.5rem;
  color: var(--charcoal);
}
.imagine--tight li { padding: .1rem 0; }
.is-navy .imagine--tight, .is-deep .imagine--tight { color: rgba(239, 233, 222, .78); }

/* --------------------------------------------------------------------------
   What the fourteen days hold — a quiet inventory, not a menu
   -------------------------------------------------------------------------- */

.holds {
  list-style: none;
  padding: 0;
  margin: clamp(2rem, 4vw, 2.75rem) 0;
  display: grid;
  gap: .1rem 2rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  font-size: 1.05rem;
}
.holds li { padding: .5rem 0; }

/* --------------------------------------------------------------------------
   Property — the land does the selling
   -------------------------------------------------------------------------- */

.plates {
  display: grid;
  gap: 1px;
  grid-template-columns: 1fr;
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
  background: rgba(44, 44, 44, .14);
}
@media (min-width: 46rem) { .plates { grid-template-columns: 1fr 1fr; } }
.plates .figure img { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; }
.is-navy .plates, .is-deep .plates { background: rgba(239, 233, 222, .16); }

.plate-wide { margin: clamp(2.5rem, 5vw, 4rem) 0 0; }
.plate-wide img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }

/* --------------------------------------------------------------------------
   Founder — a two-column layout when a portrait is present or placeheld
   -------------------------------------------------------------------------- */

.moishe { display: grid; gap: clamp(2.5rem, 5vw, 4rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 62rem) { .moishe { grid-template-columns: 22rem 1fr; } }

/* --------------------------------------------------------------------------
   Closing
   -------------------------------------------------------------------------- */

.finish { text-align: center; }
.finish .land, .finish .t-big { margin-inline: auto; max-width: 36rem; }

/* --------------------------------------------------------------------------
   Hero media — the still is the guarantee, the video is the upgrade
   -------------------------------------------------------------------------- */

.hero__still,
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 55%;
}

/* The video fades up over the still, so there is never a flash of nothing and
   never a jump: the poster is the frame the loop starts on. */
.hero__video {
  opacity: 0;
  transition: opacity 1.4s ease;
}
.hero__video.is-playing { opacity: 1; }

/* The drift animation (defined once, in style.css) belongs to the still only;
   the video has its own motion. */
.hero__still { animation: heroDrift 26s ease-out forwards; }
.hero__video { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .hero__still { animation: none; }
  .hero__video { display: none; }
}