/* ==========================================================================
   Home
   ========================================================================== */

/* ======================================================================
   HERO
   The section background is Assets/img/hero/hero-field.jpg — the portrait's
   own backdrop, with the subject inpainted out and smoothed. The figure is
   the same photograph with a long alpha feather. Photograph and page are
   therefore the same colour data; the seam cannot be seen because there
   isn't one.
   ====================================================================== */
.hero {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  display: grid;
  overflow: clip;
  color: var(--on-dark);
  background: var(--field);
}

/* -- 1. the field ------------------------------------------------------- */
.hero__field {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("../../img/hero/hero-field.jpg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* -- 2. ghost wordmark, behind him -------------------------------------- */
.hero__ghost {
  --par-ghost: 0%;
  position: absolute;
  z-index: 1;
  inset-inline: 0;
  inset-block-start: clamp(64px, 13vh, 150px);
  display: flex;
  justify-content: center;
  pointer-events: none;
  overflow: hidden;
  transform: translate3d(0, var(--par-ghost), 0);
  will-change: transform;
}
.hero__ghost span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(7rem, 21vw, 20rem);
  letter-spacing: -0.05em;
  line-height: 0.78;
  white-space: nowrap;
  color: #fff;
  opacity: 0.075;
  mix-blend-mode: soft-light;
}

/* -- 3. stage light: an ambient bloom that follows the cursor ----------- */
.hero__aura {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    46% 42% at var(--aura-x, 68%) var(--aura-y, 40%),
    rgba(120, 216, 255, 0.30),
    rgba(1, 145, 189, 0.14) 42%,
    transparent 72%
  );
  transition: background-position var(--d-3) var(--ease-quiet);
}

/* -- 4. surveyor's marks: quiet evidence of a grid ---------------------- */
.hero__marks {
  position: absolute;
  z-index: 2;
  inset: clamp(56px, 9vh, 104px) var(--gutter) clamp(56px, 8vh, 96px);
  pointer-events: none;
  opacity: 0.34;
}
.hero__marks i {
  position: absolute;
  width: 11px; height: 11px;
  opacity: 0;
  animation: mark-in 900ms var(--ease-out) forwards;
  animation-delay: calc(600ms + var(--i) * 90ms);
}
.hero__marks i::before,
.hero__marks i::after {
  content: "";
  position: absolute;
  background: rgba(247, 245, 241, 0.85);
}
.hero__marks i::before { inset-block: 0; inset-inline-start: 5px; width: 1px; }
.hero__marks i::after  { inset-inline: 0; inset-block-start: 5px; height: 1px; }
.hero__marks i:nth-child(1) { top: 0; left: 0; }
.hero__marks i:nth-child(2) { top: 0; right: 0; }
.hero__marks i:nth-child(3) { bottom: 0; left: 0; }
.hero__marks i:nth-child(4) { bottom: 0; right: 0; }
.hero__marks i:nth-child(5) { top: 0; left: 50%; }
@keyframes mark-in { to { opacity: 1; } }

/* -- 5. the figure ------------------------------------------------------ */
.hero__figure {
  position: absolute;
  z-index: 3;
  inset-block-end: 0;
  inset-inline-end: 0;
  width: min(128%, 640px);
  aspect-ratio: 0.7256;
  pointer-events: none;
  --fig-x: 9%;
  --fig-y: 7%;
  transform: translate3d(var(--fig-x), calc(var(--fig-y) + var(--par, 0%)), 0);
  perspective: 1600px;
  will-change: transform;
}
.hero__figure picture { display: contents; }
.hero__figure img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom right;
  transform:
    rotateX(calc(var(--tilt-x, 0) * 1deg))
    rotateY(calc(var(--tilt-y, 0) * 1deg))
    translate3d(calc(var(--tilt-y, 0) * -0.55%), calc(var(--tilt-x, 0) * 0.55%), 0)
    scale(var(--fig-scale, 1));
  transform-origin: 62% 78%;
  will-change: transform;
}

/* -- 6. reading scrim, under the copy only ------------------------------
   The brief forbids lightening the whole hero to fix contrast, because that
   breaks the colour match. So the scrim is local: it deepens the left third
   and has fully decayed before the figure's feather begins.               */
.hero__scrim {
  position: absolute;
  z-index: 4;
  inset: 0;
  pointer-events: none;
  /* Below the split-screen breakpoint the copy sits under him, so the scrim
     runs bottom-up instead of left-right. It is above the figure, so page and
     photograph darken together and the blend survives. */
  background: linear-gradient(
    to top,
    rgba(1, 26, 41, 0.90) 0%,
    rgba(1, 26, 41, 0.78) 32%,
    rgba(1, 26, 41, 0.42) 58%,
    transparent 80%
  );
}

/* -- 7. vignette, above the figure so both darken as one ---------------- */
.hero__vignette {
  position: absolute;
  z-index: 5;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(1, 41, 63, 0.34) 0%, transparent 22%),
    linear-gradient(to top, rgba(1, 26, 41, 0.72) 0%, rgba(1, 26, 41, 0.18) 18%, transparent 40%),
    radial-gradient(130% 100% at 50% 42%, transparent 44%, rgba(1, 26, 41, 0.42) 100%);
}

/* -- 8. copy ------------------------------------------------------------ */
.hero__inner {
  position: relative;
  z-index: 6;
  display: grid;
  align-content: end;
  padding-block: clamp(104px, 15vh, 150px) clamp(76px, 9.5vh, 104px);
}
.hero__copy { display: grid; gap: clamp(20px, 2.4vw, 30px); max-width: 640px; }

.hero__eyebrow { color: rgba(247, 245, 241, 0.86); }

.hero__title {
  font-size: var(--t-hero);
  font-weight: 600;
  letter-spacing: -0.052em;
  line-height: 0.9;
  margin-inline-start: -0.055em;
}
.hero__title .row { display: block; overflow: hidden; padding-block: 0.02em; }
.hero__title .row > span {
  display: block;
  transform: translateY(112%);
  animation: rise var(--d-5) var(--ease-quiet) forwards;
  animation-delay: calc(var(--i) * 90ms + 120ms);
}
.hero__title .row:last-child > span { color: rgba(247, 245, 241, 0.88); }
@keyframes rise { to { transform: none; } }

.hero__lead { color: rgba(247, 245, 241, 0.92); max-width: 46ch; }
.hero__lead b { color: var(--on-dark); font-weight: 600; }

.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--s-3); }

.hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 3vw, 44px);
  padding-top: clamp(8px, 1.6vw, 20px);
  margin-top: var(--s-2);
  border-top: 1px solid rgba(247, 245, 241, 0.18);
}
@media (max-width: 699px) {
  .hero__stats { display: none; }
}

/* Phone art direction — see the note in site.css. */
@media (max-width: 699px) {
  .voice__media img { aspect-ratio: 4 / 3; object-position: 50% 12%; }
  .voice__media::after { inset-block-end: -12px; inset-inline-start: -12px; }
  .breed__media img { aspect-ratio: 4 / 3; object-position: 50% 16%; }

  /* The strip scrolls sideways, so its height is paid once rather than per
     card — but smaller cards still let more of the set show at a glance. */
  .media__rail { grid-auto-columns: min(58vw, 260px); gap: var(--s-3); }
  .media__item img { aspect-ratio: 4 / 5; object-position: 50% 20%; }

  .releases { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
  .release { padding: var(--s-3); gap: var(--s-3); border-radius: var(--r-md); }
  .release__title { font-size: 1rem; }
  .release__credit { font-size: var(--t-micro); }
  .release__links { display: none; }
}
.hero__stats div { display: grid; gap: 2px; }
.hero__stats strong {
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 1.1vw + 0.8rem, 1.4rem);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.hero__stats span {
  font-size: var(--t-micro);
  letter-spacing: 0.06em;
  color: rgba(247, 245, 241, 0.84);
}

/* -- 9. now-playing card ------------------------------------------------ */
.hero__now {
  position: absolute;
  z-index: 7;
  inset-block-end: clamp(84px, 12vh, 128px);
  inset-inline-end: var(--gutter);
  display: none;
  align-items: center;
  gap: var(--s-4);
  width: min(320px, 76vw);
  padding: 12px 18px 12px 12px;
  border-radius: var(--r-xl);
  background: rgba(1, 26, 41, 0.5);
  backdrop-filter: saturate(160%) blur(20px);
  -webkit-backdrop-filter: saturate(160%) blur(20px);
  box-shadow: inset 0 0 0 1px rgba(247, 245, 241, 0.22), var(--shadow-3);
  color: var(--on-dark);
  text-align: start;
  transition: transform var(--d-3) var(--ease-spring), background-color var(--d-2) var(--ease-out);
}
.hero__now:hover { transform: translateY(-3px); background: rgba(1, 26, 41, 0.62); }
.hero__now:active { transform: scale(0.985); }
.hero__now img { width: 52px; height: 52px; border-radius: var(--r-md); object-fit: cover; flex: none; }
.hero__now-meta { display: grid; gap: 2px; min-width: 0; }
.hero__now-meta small {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
}
.hero__now-meta strong { font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.012em; }
.hero__now-play {
  margin-inline-start: auto;
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  flex: none;
  border-radius: var(--r-pill);
  background: var(--paper);
  color: var(--ink);
}
.hero__now-play svg { width: 14px; height: 14px; }

/* -- 10. baseline ------------------------------------------------------- */
.hero__base {
  position: absolute;
  z-index: 7;
  inset-block-end: clamp(20px, 3.4vh, 34px);
  inset-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  color: rgba(247, 245, 241, 0.78);
}
.hero__scroll { display: inline-flex; align-items: center; gap: 10px; text-transform: uppercase; }
.hero__scroll i {
  position: relative;
  display: block;
  width: 34px; height: 1px;
  background: rgba(247, 245, 241, 0.28);
  overflow: hidden;
}
.hero__scroll i::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 40%;
  background: var(--gold);
  animation: sweep 2.4s var(--ease-quiet) infinite;
}
@keyframes sweep {
  0%   { transform: translateX(-100%); }
  60%  { transform: translateX(250%); }
  100% { transform: translateX(250%); }
}

/* -- hero: tablet ------------------------------------------------------- */
@media (min-width: 700px) {
  .hero__figure { width: min(86%, 780px); --fig-x: 7%; --fig-y: 8%; }
}

/* -- hero: desktop ------------------------------------------------------ */
@media (min-width: 1024px) {
  .hero { min-height: min(1000px, 100svh); }

  /* Desktop art direction: a chest-up crop, sized by the hero's own height and
     anchored flush to its base, so the frame always cuts him at chest level
     regardless of viewport. The 64vw cap stops him crowding the headline on
     short, wide windows. */
  .hero__figure {
    height: min(100%, 64vw);
    width: auto;
    aspect-ratio: 1.2571;
    inset-inline-end: 0;
    --fig-x: 10%;
    --fig-y: 0%;
  }
  .hero__figure img { object-position: bottom center; transform-origin: 58% 44%; }
  .hero__aura { --aura-x: 72%; --aura-y: 34%; }

  /* The split: copy left, figure right, and the scrim turns to match. */
  .hero__scrim {
    background: linear-gradient(
      99deg,
      rgba(1, 26, 41, 0.80) 0%,
      rgba(1, 26, 41, 0.70) 26%,
      rgba(1, 26, 41, 0.46) 46%,
      rgba(1, 26, 41, 0.16) 60%,
      transparent 72%
    );
  }

  .hero__inner {
    align-content: center;
    padding-block: clamp(140px, 20vh, 220px) clamp(120px, 16vh, 180px);
  }
  .hero__copy { max-width: 460px; }
  .hero__now { display: flex; }
  /* With the close crop dominating the right, the ghost wordmark reads as
     texture above the headline rather than as a legible word. */
  .hero__ghost {
    inset-block-start: clamp(30px, 5vh, 74px);
    justify-content: flex-end;
    padding-inline-end: 0;
  }
  .hero__ghost span { font-size: clamp(6rem, 14vw, 16rem); opacity: 0.055; }

  .hero__now { inset-block-end: clamp(64px, 8.5vh, 96px); }
}

@media (min-width: 1280px) {
  .hero__copy { max-width: 540px; }
}

@media (min-width: 1440px) {
  .hero__copy { max-width: 620px; }
}

/* -- hero: short viewports --------------------------------------------- */
@media (max-height: 700px) and (min-width: 1024px) {
  .hero__stats { display: none; }
}

/* ======================================================================
   MUSIC — featured release + catalogue
   ====================================================================== */
.music { background: var(--ink); color: var(--on-dark); }

.feature {
  display: grid;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  padding-bottom: clamp(56px, 7vw, 104px);
  margin-bottom: clamp(56px, 7vw, 104px);
  border-bottom: 1px solid var(--hairline-dark);
}
.feature__art {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-3);
  transform: perspective(1400px) rotateY(0deg);
  transition: transform var(--d-4) var(--ease-quiet);
}
.feature__art img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.feature__art::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px rgba(247, 245, 241, 0.14);
  border-radius: inherit;
  pointer-events: none;
}
.feature__body { display: grid; gap: var(--s-6); align-content: start; }
.feature__title {
  font-size: clamp(2.75rem, 6.4vw, 5.25rem);
  letter-spacing: -0.045em;
  line-height: 0.94;
}
.feature__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-6);
  font-size: var(--t-small);
  color: var(--on-dark-3);
}
.feature__meta span { display: inline-flex; align-items: center; gap: 8px; }
.feature__meta span::before {
  content: "";
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--gold);
}

/* waveform — decorative, driven by CSS custom props */
.wave { display: flex; align-items: flex-end; gap: 3px; height: 46px; }
.wave i {
  flex: 1;
  min-width: 2px;
  height: calc(var(--h) * 1%);
  background: rgba(247, 245, 241, 0.26);
  border-radius: 2px;
  transform-origin: bottom;
  transition: background-color var(--d-2) var(--ease-out), transform var(--d-2) var(--ease-spring);
}
.wave.is-playing i {
  background: var(--gold);
  animation: pulse 1.1s var(--ease-quiet) infinite alternate;
  animation-delay: calc(var(--i) * 42ms);
}
@keyframes pulse { to { transform: scaleY(0.45); } }

.releases {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
}

@media (min-width: 900px) {
  .feature { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); }
}

/* ======================================================================
   THE VOICE — about teaser
   ====================================================================== */
.voice { background: var(--paper); color: var(--on-paper); }
.voice__grid { display: grid; gap: clamp(36px, 5vw, 80px); align-items: center; }
.voice__media { position: relative; }
.voice__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 22%;
  border-radius: var(--r-lg);
}
.voice__media::after {
  content: "";
  position: absolute;
  inset-block-end: -18px;
  inset-inline-start: -18px;
  width: clamp(70px, 9vw, 118px);
  aspect-ratio: 1;
  background: var(--gold);
  border-radius: var(--r-md);
  z-index: -1;
}
.voice__body { display: grid; gap: var(--s-6); align-content: start; }
.voice__body h2 { font-size: var(--t-h2); }

.quote {
  display: grid;
  gap: var(--s-4);
  padding-inline-start: clamp(18px, 2.4vw, 28px);
  border-inline-start: 2px solid var(--gold);
}
.quote p {
  font-family: var(--font-editorial);
  font-size: clamp(1.375rem, 2.5vw, 2.125rem);
  font-style: italic;
  font-weight: 300;
  line-height: 1.22;
  letter-spacing: -0.018em;
  text-wrap: balance;
}
.quote cite {
  font-style: normal;
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-paper-2);
}

.milestones {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  padding-top: var(--s-6);
  border-top: 1px solid var(--hairline-light);
}
.milestones div { display: grid; gap: 4px; }
.milestones dt {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 2.125rem);
  font-weight: 600;
  letter-spacing: -0.035em;
}
.milestones dd { margin: 0; font-size: var(--t-small); color: var(--on-paper-2); }

@media (min-width: 900px) {
  .voice__grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
}

/* ======================================================================
   JESUS BREED
   ====================================================================== */
.breed {
  position: relative;
  isolation: isolate;
  background: var(--field-deeper);
  color: var(--on-dark);
  overflow: clip;
}
.breed::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(70% 55% at 84% 8%, rgba(1, 145, 189, 0.5), transparent 62%),
    radial-gradient(60% 50% at 6% 96%, rgba(1, 26, 41, 0.62), transparent 60%);
}
.breed__grid { display: grid; gap: clamp(36px, 5vw, 80px); align-items: center; }
.breed__body { display: grid; gap: var(--s-6); align-content: start; }
.breed__body h2 { font-size: var(--t-h2); }
.breed__list { display: grid; gap: var(--s-4); }
.breed__list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-4);
  align-items: baseline;
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--hairline-dark);
  font-size: var(--t-small);
  color: var(--on-dark-2);
}
.breed__list b {
  font-family: var(--font-display);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.breed__media { position: relative; }
.breed__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 26%;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-3);
}
.breed__tag {
  position: absolute;
  inset-block-end: clamp(-14px, -1vw, -10px);
  inset-inline-end: clamp(-10px, -1vw, -14px);
  padding: 14px 20px;
  border-radius: var(--r-md);
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow-2);
}
.breed__tag strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.25rem;
  letter-spacing: -0.03em;
}
.breed__tag span { font-size: var(--t-micro); color: var(--on-paper-2); }

@media (min-width: 900px) {
  .breed__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
  .breed__media { order: 2; }
}

/* ======================================================================
   REVEALING JESUS
   ====================================================================== */
.gathering { background: var(--field-night); color: var(--on-dark); }
.gathering__card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  padding: clamp(28px, 4.4vw, 72px);
  border-radius: var(--r-xl);
  background: linear-gradient(148deg, rgba(1, 83, 127, 0.55), rgba(1, 26, 41, 0.2));
  box-shadow: inset 0 0 0 1px var(--hairline-dark);
}
.gathering__card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset-block-start: -30%;
  inset-inline-end: -8%;
  width: 46%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.30), transparent 66%);
}
.gathering__title {
  font-family: var(--font-editorial);
  font-weight: 300;
  font-size: clamp(2.5rem, 6.6vw, 5.5rem);
  line-height: 0.96;
  letter-spacing: -0.03em;
}
.gathering__title em { font-style: italic; color: var(--gold); }
.gathering__facts {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  padding-block: var(--s-6);
  border-block: 1px solid var(--hairline-dark);
}
.gathering__facts div { display: grid; gap: 4px; }
.gathering__facts dt {
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark-2);
}
.gathering__facts dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: 600;
  letter-spacing: -0.03em;
}
.gathering__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }

@media (min-width: 900px) {
  .gathering__card { grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); align-items: center; }
  .gathering__lede { grid-column: 1; }
  .gathering__side  { grid-column: 2; display: grid; gap: var(--s-8); }
}

/* ======================================================================
   MEDIA
   ====================================================================== */
.media { background: var(--paper); color: var(--on-paper); }
.media__rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(74vw, 340px);
  gap: var(--s-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--s-4);
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  scrollbar-width: none;
}
.media__rail::-webkit-scrollbar { display: none; }
.media__item {
  position: relative;
  scroll-snap-align: start;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--paper-3);
  transition: transform var(--d-3) var(--ease-spring);
}
.media__item:hover { transform: translateY(-5px); }
.media__item img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transition: transform var(--d-5) var(--ease-quiet);
}
.media__item:hover img { transform: scale(1.045); }
.media__item figcaption {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-8) var(--s-5) var(--s-5);
  background: linear-gradient(to top, rgba(1, 26, 41, 0.82), transparent);
  color: var(--on-dark);
  font-size: var(--t-small);
  font-weight: 500;
}
.media__item figcaption span {
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ======================================================================
   NEWSLETTER
   ====================================================================== */
.signup { background: var(--ink); color: var(--on-dark); }
.signup__grid { display: grid; gap: clamp(32px, 5vw, 72px); align-items: center; }
.signup__grid h2 { font-size: var(--t-h2); max-width: 14ch; }
.signup__form { display: grid; gap: var(--s-4); }
.signup__row { display: grid; gap: var(--s-3); }
.signup__note { font-size: var(--t-micro); color: var(--on-dark-3); }
.signup__done {
  display: none;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-5);
  border-radius: var(--r-md);
  background: rgba(212, 175, 55, 0.12);
  box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.4);
  font-size: var(--t-small);
}
.signup__form.is-done .signup__row,
.signup__form.is-done .signup__note { display: none; }
.signup__form.is-done .signup__done { display: flex; }

@media (min-width: 800px) {
  .signup__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .signup__row { grid-template-columns: 1fr auto; align-items: end; }
}

/* ---- late corrections ------------------------------------------------- */
.feature__art:hover { transform: perspective(1400px) rotateY(-3deg) translateY(-4px); }
.gathering__side { display: grid; gap: var(--s-8); align-content: start; }
.gathering__lede { display: grid; gap: var(--s-6); }