/* NIRA · Édition 01 (glimpse): the sections after the film.
   The page goes on as one evening: each section's ground starts where the one above ends, so the colour runs on
   without a seam, from the film's powder floor through blush and butter to dusk, and on into the night of the close.
   Uses the tokens, .btn and [data-rv] from style.css. */

/* ——— shared ——— */
.sx { position: relative; overflow: hidden; padding: clamp(112px, 18svh, 220px) var(--gut) clamp(96px, 15svh, 190px); }
.sx__in { position: relative; z-index: 1; width: 100%; max-width: 1500px; margin: 0 auto; }
.sx__k { font: 400 .8125rem/1.5 var(--caps); letter-spacing: .3em; text-transform: uppercase; }
.sx__t { font: 400 clamp(2.9rem, 6.6vw, 7.8rem)/.95 var(--serif); letter-spacing: -.02em; text-wrap: balance; }
.sx__t em { color: var(--berry); }
.sx__k + .sx__t { margin-top: clamp(18px, 3.2svh, 34px); }
/* a stanza: one line to a row, in the serif */
.sx__stz { font: 400 clamp(1.5rem, 2.15vw, 2.25rem)/1.3 var(--serif); letter-spacing: -.004em; }
.sx__stz > span { display: block; text-wrap: pretty; }
.sx__stz + .sx__stz { margin-top: .9em; }
/* a quiet line of prose */
.sx__p { max-width: 34rem; font-size: 1.125rem; line-height: 1.6; }

/* ——— 1 · a little less noise: powder blue, with the blush light low on the right ——— */
.noise {
  min-height: 100vh; min-height: 100svh; display: grid;
  background:
    var(--grain),
    radial-gradient(55% 34% at 82% 68%, rgba(232, 196, 188, .62), rgba(232, 196, 188, 0) 72%), /* gone well above the foot: no edge */
    linear-gradient(180deg, #B4C7D8 0%, #C9D7E3 45%, #DCE5EC 100%);
}
.noise__in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr auto; column-gap: clamp(16px, 2vw, 32px); }
.noise__t { grid-column: 1 / span 8; max-width: 9em; }
.noise__body { grid-column: 7 / span 6; align-self: center; margin: clamp(48px, 9svh, 120px) 0; }
.noise__end {
  grid-column: 1 / -1; justify-self: end; text-align: right; max-width: 11.5em;
  font: italic 400 clamp(2rem, 4vw, 4.7rem)/1 var(--serif); letter-spacing: -.018em; color: var(--ink); text-wrap: balance;
}

/* ——— 2 · Édition 01, the first pour: a blush wall over a powder floor ——— */
.first {
  --hz: 72%;
  background:
    var(--grain),
    radial-gradient(46% 36% at 30% 60%, rgba(255, 248, 240, .46), rgba(255, 248, 240, 0) 72%),
    linear-gradient(180deg, #DCE5EC 0%, #E6D3CF 11%, #E3BEB4 30%, #EAC9C0 50%, #EED3CB var(--hz), #D6E1EA calc(var(--hz) + 3%), #B9CBDA 100%);
}
.first__in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); align-items: end; }
.first__head { grid-column: 1 / span 7; align-self: start; }
.first__t { font-size: clamp(3.4rem, 9.6vw, 11.5rem); line-height: .9; letter-spacing: -.026em; }
.first__body { grid-column: 8 / span 5; padding-top: clamp(80px, 16svh, 220px); }
.first__lead { font: 400 clamp(1.5rem, 2.15vw, 2.25rem)/1.25 var(--serif); }
.first__what { margin: 2rem 0 .35em; font: 400 clamp(1.5rem, 2.15vw, 2.25rem)/1.3 var(--serif); letter-spacing: -.004em; color: var(--ink-2); }
.first__soon { margin-top: clamp(40px, 7svh, 80px); font: italic 400 clamp(2rem, 3.4vw, 3.6rem)/1.02 var(--serif); letter-spacing: -.015em; color: var(--berry); text-wrap: balance; }

/* ——— 3 · why the waitlist: the set turned over (blue wall, blush floor), centred ——— */
.why {
  --fl: min(16svh, 150px); --hz: calc(100% - var(--fl));
  min-height: 100vh; min-height: 100svh; display: grid; align-items: center; text-align: center;
  padding-bottom: calc(var(--fl) + clamp(64px, 10svh, 120px));
  background:
    var(--grain),
    radial-gradient(42% 30% at 50% 46%, rgba(255, 248, 240, .42), rgba(255, 248, 240, 0) 72%),
    linear-gradient(180deg, #B9CBDA 0%, #C7D5E1 30%, #D7E2EB var(--hz), #EAD0C9 calc(var(--hz) + 2.4svh), #E0BCB3 100%);
}
.why__t { max-width: 10.5em; margin-inline: auto; }
.why__for { margin: clamp(40px, 7svh, 72px) auto 0; font: 400 clamp(1.5rem, 2.15vw, 2.25rem)/1.3 var(--serif); letter-spacing: -.004em; color: var(--ink-2); }
.why__list { display: table; margin: 1.1rem auto 0; text-align: left; font: 400 clamp(1.5rem, 2.15vw, 2.25rem)/1.4 var(--serif); } /* centred as a block, the dashes in one column */
.why__list li + li { margin-top: .08em; }
.why__d { color: var(--berry); margin-right: .2em; }
.why__end { margin: clamp(36px, 6svh, 64px) auto 0; font: italic 400 clamp(1.6rem, 2.4vw, 2.5rem)/1.2 var(--serif); color: var(--ink); }
.why__go { margin-top: clamp(28px, 4.6svh, 48px); }

/* ——— 4 · where will you pour: golden hour, on butter and paper ——— */
.where {
  background:
    var(--grain),
    radial-gradient(60% 40% at 78% 34%, rgba(255, 246, 222, .55), rgba(255, 246, 222, 0) 72%),
    linear-gradient(180deg, #E0BCB3 0%, #EAD0C0 9%, #F1E1C4 24%, #F3E7CF 52%, #F4ECDC 100%);
}
.where__t { max-width: 9em; }
.where__t em { color: inherit; }
/* a short menu of evenings: each place on its own hairline, its name stepping a little further in down the page, its line in the
   serif, all four lines starting on one measure */
.where__list { margin-top: clamp(48px, 9svh, 112px); border-bottom: 1px solid rgba(46, 58, 79, .2); }
.where__i {
  --k: 0; display: grid; grid-template-columns: 46% minmax(0, 1fr); align-items: baseline; column-gap: clamp(20px, 3vw, 48px);
  padding: clamp(22px, 3.6svh, 40px) 0 clamp(24px, 3.8svh, 42px); border-top: 1px solid rgba(46, 58, 79, .2);
}
.where__i:nth-child(2) { --k: 1; }
.where__i:nth-child(3) { --k: 2; }
.where__i:nth-child(4) { --k: 3; }
.where__n { padding-left: calc(var(--k) * clamp(12px, 4vw, 60px)); font: italic 400 clamp(2.4rem, 4.5vw, 5.4rem)/1 var(--serif); letter-spacing: -.016em; }
.where__l { max-width: 21em; font: 400 clamp(1.35rem, 1.9vw, 2rem)/1.3 var(--serif); letter-spacing: -.004em; text-wrap: pretty; color: var(--ink); }

/* ——— 5 · NIRA, soon: dusk. Powder sky over a blush horizon, then the evening deepening below it ——— */
.sx.soon { padding: 0; } /* the sky and the floor carry their own padding */
.soon__sky {
  padding: clamp(112px, 18svh, 220px) var(--gut) clamp(96px, 16svh, 200px);
  background:
    var(--grain),
    radial-gradient(70% 34% at 50% 104%, rgba(236, 196, 186, .9), rgba(236, 196, 186, 0) 74%),
    linear-gradient(180deg, #F4ECDC 0%, #DFE5E9 12%, #CCD9E4 36%, #B9CBDB 70%, #C3C9D6 90%, #DCC4C1 100%);
}
.soon__in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); }
.soon__head { grid-column: 1 / span 7; }
.soon__t { max-width: 9.5em; }
.soon__body { grid-column: 8 / span 5; align-self: end; padding-top: clamp(48px, 8svh, 96px); }
.soon__t em { color: inherit; }
.soon__lead { font: 400 clamp(1.5rem, 2.15vw, 2.25rem)/1.25 var(--serif); }
.soon__body .sx__stz { margin-top: 1.1em; }
.soon__body .soon__then { margin-top: .9em; font-style: italic; } /* the stanza's last line: where it goes from here */
.soon__floor {
  position: relative; display: flex; align-items: flex-end; justify-content: center; min-height: clamp(220px, 36svh, 400px);
  padding: 0 var(--gut) clamp(44px, 7svh, 80px); color: var(--ivory); text-align: center;
  background: linear-gradient(180deg, #D6B8B6 0%, #A8A2B6 16%, #7686A0 36%, #52627B 58%, #42516A 80%, #3B4A62 100%);
}
.soon__where { position: relative; font: 400 .875rem/1.9 var(--caps); letter-spacing: .34em; padding-left: .34em; text-transform: uppercase; }
.soon__nw { white-space: nowrap; }

/* ——— 6 · one last thing: night, and the mark ——— */
.last {
  min-height: 100vh; min-height: 100svh; display: grid; align-items: center; text-align: center; color: var(--ivory);
  padding-bottom: clamp(88px, 13svh, 160px);
  background:
    radial-gradient(50% 26% at 50% 30%, rgba(214, 184, 182, .09), rgba(214, 184, 182, 0) 72%), /* faded out before the top edge */
    linear-gradient(180deg, #3B4A62 0%, #36445C 28%, #313E55 60%, #2E3A4F 100%);
}
/* on the evening's dark grounds the grain is kept at half strength, so it reads as paper, not as noise */
.soon__floor::before, .last::before, .ftr::before { content: ''; position: absolute; inset: 0; background: var(--grain); opacity: .5; pointer-events: none; }
.last .sx__t em { color: var(--blush); }
.last__t { max-width: 10em; margin-inline: auto; }
.last__stz { margin-top: clamp(36px, 6svh, 64px); color: rgba(246, 241, 232, .9); }
.last__sign { margin-top: clamp(80px, 14svh, 170px); }
.last__mark { font: 400 clamp(3rem, 6.4vw, 6.6rem)/1 var(--mark); letter-spacing: .32em; padding-left: .32em; color: #F3E3DC; }
.last__line { margin-top: 1.2rem; font: italic 400 clamp(1.4rem, 1.9vw, 1.9rem)/1.3 var(--serif); color: rgba(246, 241, 232, .86); }
.last__go { margin-top: clamp(36px, 6svh, 60px); }
.btn--light { color: var(--ink); background: var(--ivory); }
.btn--light:hover { background: #FFFFFF; }
.last :focus-visible { outline-color: var(--ivory); }

/* the footer: the row only, on the same night */
.ftr { position: relative; padding-top: 0; background: #2E3A4F; }
.ftr__row { position: relative; margin-top: 0; }

/* ——— tablet ——— */
@media (max-width: 1100px) {
  .noise__t { grid-column: 1 / -1; }
  .noise__body { grid-column: 5 / -1; }
  .first__head, .first__body { grid-column: 1 / -1; }
  .first__body { max-width: 34rem; justify-self: end; padding-top: clamp(56px, 9svh, 96px); }
  .soon__head, .soon__body { grid-column: 1 / -1; }
  .soon__body { max-width: 30rem; justify-self: end; }
}


/* ——— phone ——— */
@media (max-width: 760px) {
  .sx { padding: 15svh var(--gut) 12svh; }
  .sx__k { font-size: .75rem; letter-spacing: .24em; }
  .sx__t { font-size: 3rem; line-height: 1; }
  .sx__stz { font-size: 1.5rem; line-height: 1.32; }
  .sx__p { font-size: 1.0625rem; }

  .noise__in { display: block; }
  .noise__body { margin: 9svh 0 10svh; }
  .noise__end { text-align: left; font-size: 2rem; line-height: 1.05; }

  .first__t { font-size: 4rem; }
  .first__body { justify-self: stretch; padding-top: 8svh; }
  .first__what { margin-top: 1.8rem; font-size: 1.5rem; }
  .first__soon { font-size: 2.1rem; }

  .why__for { font-size: 1.45rem; }
  .why__list { font-size: 1.45rem; }
  .why__end { font-size: 1.6rem; }

  .where__list { margin-top: 6svh; }
  .where__i { grid-template-columns: 1fr; row-gap: .4rem; padding: 1.3rem 0 1.5rem; }
  .where__n, .where__l { padding-left: calc(var(--k) * 12px); }
  .where__n { font-size: 2.4rem; }
  .where__l { font-size: 1.375rem; }
  .why { --fl: 13svh; padding-bottom: calc(var(--fl) + 8svh); }

  .soon__sky { padding: 15svh var(--gut) 12svh; }
  .soon__body { justify-self: stretch; padding-top: 6svh; }
  .soon__floor { min-height: 30svh; padding-bottom: 6svh; }
  .soon__where { position: relative; font-size: .75rem; letter-spacing: .2em; padding-left: .2em; }

  .last__mark { font-size: 3.4rem; }
  .last__sign { margin-top: 10svh; }
}