/* NIRA · Édition 01 (glimpse)
   One idea throughout: a wall and a floor meeting at a soft horizon, like the sky after sunset,
   pink above and blue below. The live bottle stands on that floor; as it changes colour (blush, powder blue, butter),
   the wall changes with it. The scroll plays the stage like a short film (script.js). */

:root {
  --paper: #F7F2EA;
  --ivory: #F6F1E8;
  --blush: #E8C4BC;
  --blush-2: #D9A79A;
  --berry: #8F4B56;
  --powder: #CFDCE6;
  --powder-2: #A9BFD2;
  --evening: #5E7891;
  --ink: #2E3A4F;
  --ink-2: #46546B;
  --butter: #F1E2B8;

  --serif: 'Instrument Serif', 'Iowan Old Style', 'Times New Roman', serif;
  --mark: Bellefair, 'Times New Roman', serif;
  --sans: Jost, 'Avenir Next', system-ui, sans-serif;
  --caps: 'Tenor Sans', Jost, system-ui, sans-serif;

  --gut: clamp(20px, 4.2vw, 72px);
  --hz: 66%;
  --slow: cubic-bezier(.45, 0, .2, 1);
  --grain: url(img/grain.png);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 1.0625rem/1.6 var(--sans);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
h1, h2, h3, p, ul, ol, dl, dd, figure, fieldset { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { border: 0; min-width: 0; }
img { display: block; max-width: 100%; }
em { font-style: italic; }
a { color: inherit; }
::selection { background: var(--powder-2); color: var(--ink); }

.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 12px; top: -80px; z-index: 50; background: var(--ink); color: var(--ivory); padding: 12px 18px; font: 400 .9375rem var(--sans); text-decoration: none; }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

/* ——— header ——— */
.hdr {
  position: fixed; inset: 0 0 auto 0; z-index: 20; height: 72px;
  display: flex; align-items: center; justify-content: space-between; padding: 0 var(--gut);
  color: var(--ink); pointer-events: none; transition: color .6s ease;
}
.hdr a { pointer-events: auto; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.hdr__mark { font: 400 1.375rem/1 var(--mark); letter-spacing: .34em; margin-right: -.34em; opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility 0s linear .7s; }
.mark-on .hdr__mark { opacity: 1; visibility: visible; transition: opacity .7s ease; }
.hdr__join {
  font: 400 .8125rem/1 var(--caps); letter-spacing: .24em; text-transform: uppercase;
  background: linear-gradient(currentColor, currentColor) left calc(50% + .95em) / 100% 1px no-repeat;
  transition: background-size .5s var(--slow);
}
.hdr__join:hover { background-size: 0 1px; background-position: right calc(50% + .95em); }
.hdr::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .5s ease;
  background: rgba(247, 242, 234, .62); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); }
.hdr { transition: color .6s ease, transform .7s var(--slow); }
.hdr--away { transform: translateY(-100%); }
.hdr--tint::before { opacity: 1; }
.hdr--light { color: var(--ivory); }
.hdr--light::before { background: rgba(38, 48, 67, .55); }
.hdr--light :focus-visible { outline-color: var(--ivory); }

/* ——— the set: wall above, floor below ——— */
.set {
  --w1: #DDB0A6; --w2: #EED2CA; --f1: #D6E1EA; --f2: #B9CBDA; --gx: 50%;
  position: absolute; inset: 0;
  background:
    var(--grain),
    radial-gradient(42% 34% at var(--gx) 52%, rgba(255, 248, 240, .5), rgba(255, 248, 240, 0) 72%),
    linear-gradient(180deg, var(--w1) 0%, var(--w2) var(--hz), var(--f1) calc(var(--hz) + 3%), var(--f2) 100%);
}
/* the chapters: powder blue (the set turned over: blue wall, blush floor), then butter */
.set--1 { --w1: #AFC3D5; --w2: #D7E2EB; --f1: #EAD0C9; --f2: #E0BCB3; --gx: 72%; }
.set--2 { --w1: #E2C686; --w2: #F2E4BD; --f1: #D3DFE8; --f2: #B2C5D6; --gx: 28%; }
.set--blue { --w1: #AFC3D5; --w2: #D7E2EB; --f1: #EAD0C9; --f2: #E0BCB3; }
/* the bridges (script.js): the light a scene change passes through. Blue to cream crossfaded directly goes grey halfway; a bridge
   starts as the set it leaves, and script.js walks its colours the warm way round (in OKLCH, blue, lilac, rose, cream, never below a
   little colour and never through green), keeping a horizon, until it is the set it arrives at. These values are only the fallback.
   Leaving the room, the cream floor holds until the wall is nearly butter; then the powder-blue floor rises from the foot. */
.set--dusk-in { --w1: #DDB6B8; --w2: #F0D8D0; --f1: #E6CCBF; --f2: #DDBFAF; --gx: 70%; }
.set--dusk-out { --w1: #E5CBA2; --w2: #F2E2C7; --f1: #ECDCCB; --f2: #DCC5B1; --gx: 40%; }
.set--dusk { background:
    radial-gradient(42% 34% at var(--gx) 52%, rgba(255, 248, 240, .5), rgba(255, 248, 240, 0) 72%),
    linear-gradient(180deg, var(--w1) 0%, var(--w2) var(--hz), var(--f1) calc(var(--hz) + 3%), var(--f2) 100%); }
.bridge::after { content: ''; position: absolute; inset: 0; background: var(--grain); pointer-events: none; }
.dusk__floor {
  position: absolute; left: 0; right: 0; top: calc(var(--hz) - 8%); bottom: 0; transform: translate3d(0, 101%, 0); will-change: transform;
  background: linear-gradient(180deg, #D3DFE8 0%, #D3DFE8 calc(11% / .42), #B2C5D6 100%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 calc(11% / .42)); mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 calc(11% / .42));
}

/* ——— stage ——— */
.stage { position: relative; background: var(--powder); }
.stage__back, .stage__front { position: absolute; inset: 0; }
.stage__back { z-index: 0; }
.stage__front { z-index: 2; pointer-events: none; }
.stage__set { position: sticky; top: 0; overflow: hidden; height: 100vh; height: 100lvh; }

/* the walls: one set each. The film shows the chapter's wall, and the next one over it as it arrives:
   colour to colour, dusk falls (below); into and out of the pour, a dissolve. script.js slides .wall and slides .wall__in back by
   the same amount, so only transforms change (nothing is repainted). */
.wall { position: absolute; inset: 0; opacity: 0; will-change: transform, opacity; }
.wall[data-beat="0"] { opacity: 1; }
.wall__in { position: absolute; inset: 0; will-change: transform; }
/* the default colour-to-colour move: dusk falls. The new wall comes down from the top of the screen behind a soft edge half a screen
   tall, crosses the horizon as the bottle turns colour, and runs on down the floor (keep FV = .5 in script.js in step: 150 %). */
.wall.is-down {
  bottom: auto; height: 150%;
  -webkit-mask-image: linear-gradient(180deg, #000 66.67%, rgba(0, 0, 0, .957) 70.83%, rgba(0, 0, 0, .844) 75%, rgba(0, 0, 0, .684) 79.17%, rgba(0, 0, 0, .5) 83.33%, rgba(0, 0, 0, .316) 87.5%, rgba(0, 0, 0, .156) 91.67%, rgba(0, 0, 0, .043) 95.83%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(180deg, #000 66.67%, rgba(0, 0, 0, .957) 70.83%, rgba(0, 0, 0, .844) 75%, rgba(0, 0, 0, .684) 79.17%, rgba(0, 0, 0, .5) 83.33%, rgba(0, 0, 0, .316) 87.5%, rgba(0, 0, 0, .156) 91.67%, rgba(0, 0, 0, .043) 95.83%, rgba(0, 0, 0, 0) 100%);
}
.wall.is-down .wall__in { bottom: auto; height: calc(100% / 1.5); }
.bridge { position: absolute; inset: 0; opacity: 0; will-change: opacity; }

.stage__bottle { position: sticky; top: 0; height: 100vh; height: 100svh; }
.bottle { position: absolute; left: 0; right: 0; bottom: 14svh; height: 80svh; max-width: 192svh; margin: 0 auto; }
.bottle img[data-nira-fallback] {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: opacity .6s ease, transform 1.8s var(--slow);
}
/* stills only: the butter chapter's still sits shifted left, so its long shadow fades out before the image's own edge */
.stage[data-ch="2"] .bottle img[data-nira-fallback] {
  -webkit-mask-image: linear-gradient(90deg, #000 64%, rgba(0, 0, 0, 0) 97%); mask-image: linear-gradient(90deg, #000 64%, rgba(0, 0, 0, 0) 97%);
}
.bottle canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }

/* the film's length: the opening, powder blue, the pour (it holds longest: the glide in, the pour, a moment with the full glass), butter */
.ch { height: 100vh; height: 100svh; }
.ch--1 { height: 130vh; height: 130svh; }
.ch--2 { height: 405vh; height: 405svh; }
.ch--3 { height: 175vh; height: 175svh; }

/* ——— the words ———
   Each chapter's words have their own layer, pinned to the screen like the bottle, so they never ride the scroll:
   the film raises each line into place from behind its own edge, and lifts it away again.
   The pour's words sit above the 3D canvas (which draws the marble table); the others stand behind the bottle.
   Without script, each layer keeps to its own stretch of the page, so the words still read in turn. */
.film { position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none; }
.film--0 { top: 0; height: 100vh; height: 100svh; }
.film--1 { top: 100vh; top: 100svh; height: 130vh; height: 130svh; }
.film--2 { top: 230vh; top: 230svh; height: 405vh; height: 405svh; z-index: 3; }
.film--3 { top: 635vh; top: 635svh; height: 175vh; height: 175svh; }
.js .film { top: 0; bottom: 0; height: auto; }
.film__pin { position: sticky; top: 0; height: 100vh; height: 100svh; }

/* a line and the edge it rises from: the box masks, with room for ascenders, descenders and the italic's lean; the edge is soft
   (inside that room), so a glyph passing it feathers out rather than being cut */
.ln { display: block; overflow: hidden; margin: -.3em -.14em -.42em; }
.js .ln {
  overflow: visible;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, #000 .14em, #000 calc(100% - .16em), rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, #000 .14em, #000 calc(100% - .16em), rgba(0, 0, 0, 0) 100%);
}
.ln__in { display: block; padding: .3em .14em .42em; }
.mark .ln { margin-inline: 0; } /* the mark spans the screen: no lean to allow for */
.mark .ln__in { padding-inline: 0; }
.js .ln__in { will-change: transform, opacity; }
.js .film:not(.film--0) .ln__in { opacity: 0; transform: translate3d(0, 105%, 0); } /* until the film takes over */

/* the opening */
.mark {
  position: absolute; left: 0; right: 0; top: 7.5svh; text-align: center;
  font: 400 min(29vw, 62svh)/1 var(--mark); letter-spacing: .06em; padding-left: .06em;
  color: #FCF7F1;
}
.js .mark { animation: markIn 2.6s var(--slow) both; }
.js .ch0__line, .js .ch0__aside { animation: fadeIn 1.6s ease .9s both; }
@keyframes markIn { from { opacity: 0; letter-spacing: .13em; } }
@keyframes fadeIn { from { opacity: 0; } }
.ch0__line {
  position: absolute; left: var(--gut); bottom: 6.5svh; max-width: 16em;
  font: 400 clamp(1.5rem, 2.15vw, 2.25rem)/1.12 var(--serif); letter-spacing: -.005em;
}
.ch0__aside {
  position: absolute; right: var(--gut); bottom: calc(6.5svh + .3em);
  font: 400 .8125rem/1.4 var(--caps); letter-spacing: .26em; text-transform: uppercase;
}

/* the chapters */
.giant {
  position: absolute; top: 12.5svh; left: var(--gut);
  font: 400 min(12.6vw, 26svh)/.86 var(--serif); letter-spacing: -.018em; color: var(--ink);
}
.giant__a, .giant__b { white-space: nowrap; }
.giant__b { font-style: italic; padding-left: .62em; }
/* the pour's small line, under the title's chapter, in the serif */
.ch__line {
  position: absolute; left: var(--gut); bottom: 7svh; max-width: 16em;
  font: 400 clamp(1.5rem, 2.15vw, 2.25rem)/1.12 var(--serif); letter-spacing: -.005em; color: var(--ink);
}
/* the golden hour: four lines, a smaller giant, so they keep beside the bottle */
.giant--sm { font-size: min(6.9vw, 12.6svh); line-height: .9; letter-spacing: -.015em; }
/* butter: the bottle stands left, the words keep the right */
.film--right .giant { left: auto; right: var(--gut); text-align: right; }
.film--right .giant__b { padding-left: 0; }
.film--right .giant__b { margin-right: -.11em; } /* all four lines flush right; the italic's overhang taken back */
/* without script the still stays centred: the butter words keep the left, clear of it */
html:not(.js) .film--right .giant { left: var(--gut); right: auto; text-align: left; }
html:not(.js) .film--right .giant__a { padding-right: 0; }
@media (max-width: 760px) { /* on a phone the still stands a little smaller and lower, as the film frames it, clear of the titles */
  html:not(.js) .bottle img[data-nira-fallback] { transform: translate(0, 8.5%) scale(.84); }
}
@media (min-width: 761px) { /* and every title keeps left of the centred bottle */
  html:not(.js) .giant { font-size: min(8.4vw, 19svh); }
  html:not(.js) .giant--sm { font-size: min(4.7vw, 9svh); }
}

/* the waitlist button (the sections after the film, sections.css) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 60px; padding: 0 2.6em;
  font: 400 .875rem/1 var(--caps); letter-spacing: .26em; text-transform: uppercase; text-decoration: none;
  color: var(--ivory); background: var(--ink); transition: background-color .4s ease, letter-spacing .6s var(--slow);
}
.btn:hover { background: #1F2838; letter-spacing: .3em; }

/* ——— the waitlist: a page that opens over the site ——— */
html.wl-lock { overflow: hidden; }
.wl {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: transparent; color: var(--ink); overflow: hidden;
}
.wl::backdrop { background: transparent; }
.wl__set { position: absolute; inset: 0; z-index: 0; --hz: 58%; }
.wl__set .set { transition: opacity 2.2s var(--slow); }
.wl__set .set--blue { opacity: 0; --hz: 76%; } /* as the set turns over, the horizon settles low, clear of the thank-you (and level with the closing section) */
.wl.is-done .wl__set .set--blue { opacity: 1; }

.wl__bar { position: absolute; inset: 0 0 auto 0; z-index: 2; height: 72px; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--gut); }
.wl__bar::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .5s ease;
  background: rgba(247, 242, 234, .62); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); }
.wl.is-scrolled .wl__bar::before { opacity: 1; }
/* on a short screen, the foot of the page fades softly while there is more of it below */
.wl.is-more .wl__scroll { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 88px), rgba(0, 0, 0, .08) 100%); mask-image: linear-gradient(180deg, #000 calc(100% - 88px), rgba(0, 0, 0, .08) 100%); }
.wl__mark { font: 400 1.375rem/1 var(--mark); letter-spacing: .34em; margin-right: -.34em; }
.wl__close {
  display: inline-flex; align-items: center; gap: .9em; min-height: 44px; padding: 0; margin-right: -.2em;
  font: 400 .8125rem/1 var(--caps); letter-spacing: .24em; text-transform: uppercase; color: inherit;
  background: none; border: 0; border-radius: 0; cursor: pointer;
}
.wl__x { position: relative; width: 20px; height: 20px; flex: none; transition: transform .6s var(--slow); }
.wl__x::before, .wl__x::after { content: ''; position: absolute; left: 50%; top: 50%; width: 22px; height: 1px; margin-left: -11px; background: currentColor; transform: rotate(45deg); }
.wl__x::after { transform: rotate(-45deg); }
.wl__close:hover .wl__x { transform: rotate(90deg); }

.wl__scroll { position: absolute; inset: 0; z-index: 1; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.wl__in { min-height: 100%; display: flex; flex-direction: column; justify-content: center; max-width: 1500px; margin: 0 auto; padding: max(104px, 12.5svh) var(--gut) 4svh; }
.wl__head { margin-bottom: 7svh; }
.join__title { font: 400 clamp(2.8rem, 6.2vw, 7.4rem)/.94 var(--serif); letter-spacing: -.02em; max-width: 11em; }
.join__title:focus { outline: none; }
.join__title em { color: var(--berry); }
.join__lead { margin-top: 3.2svh; max-width: 30rem; font-size: 1.125rem; }
.wl.is-done .wl__head { display: none; }

/* the overlay arrives like a page: the set dissolves in over the site, then, once the site has gone, the words rise into place */
.js .wl { opacity: 1; transition: opacity 1.1s var(--slow); }
.js .wl__in, .js .wl__bar { transition: opacity 1s ease .85s, transform 1.4s var(--slow) .85s; }
.js .wl:not(.is-in) { opacity: 0; }
.js .wl:not(.is-in) .wl__in { opacity: 0; transform: translateY(28px); }
.js .wl:not(.is-in) .wl__bar { opacity: 0; }
.js .wl.is-out { transition: opacity .9s var(--slow) .25s; }
.js .wl.is-out .wl__in, .js .wl.is-out .wl__bar { transition: opacity .38s ease, transform .6s ease; }
html:not(.js) .wl:target { display: block; z-index: 40; }
html:not(.js) .form__go { display: none; }
.form__nojs { font-size: 1rem; line-height: 1.55; max-width: 25rem; }

/* the form, as a sentence */
.form { position: relative; max-width: 66rem; }
.say { font: 400 clamp(1.65rem, 2.6vw, 2.7rem)/1.62 var(--serif); letter-spacing: -.005em; }
.say + .say { margin-top: .2em; }
.say label, .say legend, .say__w { white-space: normal; }
.say legend { display: inline; float: left; margin-right: .28em; }
.say__hint { font: 400 .75rem/1 var(--caps); letter-spacing: .18em; text-transform: uppercase; vertical-align: .35em; margin: 0 .3em 0 .1em; white-space: nowrap; }
.fld { display: inline-block; position: relative; vertical-align: baseline; }
.fld input, .fld select {
  font: italic 400 1em/1.2 var(--serif); color: var(--ink); letter-spacing: 0;
  background: transparent; border: 0; border-radius: 0; border-bottom: 1.5px solid rgba(46, 58, 79, .55);
  padding: .02em .12em .04em; margin: 0 .02em 0 .14em; min-height: 44px; outline-offset: 2px;
  -webkit-appearance: none; appearance: none; transition: border-color .3s ease, background-color .3s ease;
}
.fld--name input { width: 7.4em; }
.fld--email input { width: 10.6em; }
.nw { white-space: nowrap; }
.fld--city select { width: 8.6em; padding-right: 1em; cursor: pointer;
  background: linear-gradient(45deg, transparent 50%, var(--ink) 50%) right .32em top 58% / .28em .28em no-repeat,
              linear-gradient(-45deg, transparent 50%, var(--ink) 50%) right .04em top 58% / .28em .28em no-repeat; }
.fld input::placeholder { color: #5E5266; opacity: 1; }
.fld select:invalid { color: #5E5266; }
.fld option { color: var(--ink); font-style: normal; }
.fld input:hover, .fld select:hover { border-bottom-color: var(--ink); }
.fld input:focus, .fld select:focus { border-bottom-color: var(--ink); background-color: rgba(255, 255, 255, .28); }
.fld [aria-invalid="true"] { border-bottom-color: #8A2F23; border-bottom-style: dashed; }

.say--opt { margin-top: .2em; }
.tg { display: inline-block; position: relative; }
.tg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tg label {
  display: inline-flex; align-items: baseline; min-height: 44px; padding: 0 .16em; cursor: pointer; font-style: italic;
  background: linear-gradient(rgba(169, 191, 210, 0), rgba(169, 191, 210, 0)); transition: background-color .35s ease, box-shadow .35s ease;
  box-shadow: inset 0 -1.5px 0 rgba(46, 58, 79, .4);
}
.tg label::before {
  content: ''; flex: none; width: .34em; height: .34em; margin-right: .28em; transform: translateY(-.03em);
  border: 1.5px solid currentColor; border-radius: 1px; transition: background-color .3s ease;
}
.tg input:checked + label { background-color: rgba(169, 191, 210, .75); box-shadow: inset 0 -1.5px 0 var(--ink); }
.tg input:checked + label::before { background: currentColor; }
.tg input:focus-visible + label { outline: 2px solid var(--ink); outline-offset: 3px; }
.tg label:hover { box-shadow: inset 0 -1.5px 0 var(--ink); }

.form__err { min-height: 1.6em; margin-top: 1.4rem; color: #7E2A1F; font: 500 1rem/1.5 var(--sans); }
.form__end { display: flex; align-items: center; gap: 2rem 3rem; flex-wrap: wrap; margin-top: 1rem; }
.form__go {
  font: 400 .875rem/1 var(--caps); letter-spacing: .26em; text-transform: uppercase;
  color: var(--ivory); background: var(--ink); border: 0; border-radius: 0; cursor: pointer;
  min-height: 60px; padding: 0 2.6em; transition: background-color .4s ease, letter-spacing .6s var(--slow);
}
.form__go:hover { background: #1F2838; letter-spacing: .3em; }
.form__go:focus-visible, .btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.form__go:disabled { opacity: .7; cursor: progress; }
.form__note { max-width: 25rem; font-size: 1rem; line-height: 1.55; }
.form__note a { text-underline-offset: .2em; padding: .7em .25em; margin: -.7em -.25em; }
.form.is-done .form__body, .form.is-done .form__end, .form.is-done .form__err { display: none; }
.form__done:focus { outline: none; }
.form__thanks { font: 400 clamp(2.4rem, 5.6vw, 6.2rem)/1 var(--serif); letter-spacing: -.015em; max-width: 14em; text-wrap: balance; }
.form__thanks em { color: #4A6079; }
.form__next { margin-top: 1.6rem; font-size: 1.125rem; }
.form__back { margin-top: 5svh; }
.wl__back {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer;
  font: italic 400 1.5rem/1 var(--serif); text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px;
}
.js .form__done:not([hidden]) { animation: rise 1.4s var(--slow) both; }
@keyframes rise { from { opacity: 0; transform: translateY(1.2rem); } }

/* ——— footer ——— */
.ftr { background: var(--grain), linear-gradient(180deg, #2B3649 0%, #232C3D 100%); color: var(--ivory); padding: 16svh var(--gut) 6svh; }
.ftr__brand { text-align: center; }
.ftr__mark { font: 400 clamp(3rem, 6.4vw, 6.6rem)/1 var(--mark); letter-spacing: .32em; padding-left: .32em; color: #F3E3DC; }
.ftr__line { margin-top: 1.4rem; font: 400 .8125rem/1.6 var(--caps); letter-spacing: .3em; padding-left: .3em; text-transform: uppercase; color: var(--blush); }
.ftr__row { display: flex; justify-content: space-between; align-items: center; gap: .6rem 4rem; margin-top: 16svh; border-top: 1px solid rgba(246, 241, 232, .18); padding-top: 1.8rem; }
.ftr__made { font-size: 1rem; line-height: 1.55; color: rgba(246, 241, 232, .86); }
.ftr__end { text-align: right; font-size: 1rem; color: rgba(246, 241, 232, .86); }
.ftr__end p + p { margin-top: .2rem; }
.ftr__end a { display: inline-flex; min-height: 44px; align-items: center; text-underline-offset: .22em; text-decoration-thickness: 1px; }
.ftr :focus-visible { outline-color: var(--ivory); }

/* ——— privacy ——— */
.pv-top { position: relative; height: 62svh; min-height: 380px; display: flex; align-items: flex-end; padding: 0 var(--gut) 10svh; overflow: hidden; --hz: 74%; }
.pv-top .set { z-index: 0; }
.pv-title { position: relative; z-index: 1; font: 400 clamp(2.8rem, 7vw, 8rem)/.94 var(--serif); letter-spacing: -.02em; max-width: 10em; }
.pv-title em { color: var(--berry); }
.pv { background: var(--grain), var(--paper); padding: 12svh var(--gut) 18svh; }
.pv__in { max-width: 40rem; margin: 0 auto; }
.pv .pv__lead { font: 400 clamp(1.5rem, 2.2vw, 2rem)/1.3 var(--serif); margin-bottom: 3rem; }
.pv h2 { font: 400 .8125rem/1.5 var(--caps); letter-spacing: .24em; text-transform: uppercase; margin: 2.6rem 0 .7rem; }
.pv p { font-size: 1.0625rem; line-height: 1.65; }
.pv__back { margin-top: 3.4rem; }
.pv__back a { display: inline-flex; align-items: center; min-height: 44px; font: italic 400 1.5rem/1 var(--serif); text-underline-offset: .2em; text-decoration-thickness: 1px; }
.page-privacy .hdr { position: absolute; }
.page-privacy .hdr__mark { opacity: 1; visibility: visible; }

/* ——— reveals ———
   After the film, the sections speak its language: a title's lines rise into place from behind a soft edge, one after another
   (script.js riseTitle sets them as masked lines for the length of the rise), and everything else simply fades in, in turn. */
.rv-on [data-rv] { opacity: 0; transition: opacity 1.1s ease; }
.rv-on [data-rv].is-in { opacity: 1; }
.rv-on .sx__t[data-rv] { transition: none; }
.sx__t .ln__in { transform: translate3d(0, 105%, 0); opacity: 0; transition: transform 1s var(--slow), opacity .7s ease; }
.sx__t.is-up .ln__in { transform: none; opacity: 1; }
/* stacked line boxes: their negative margins would collapse into one, leaving the lines .3em further apart than the plain title;
   this keeps the risen lines exactly where the plain text sets them, so nothing moves when the title is put back */
.sx__t .ln + .ln { margin-top: -.72em; }

/* ——— tablet ——— */
@media (max-width: 900px) {
  .ftr__row { flex-direction: column; align-items: flex-start; }
  .ftr__end { text-align: left; }
}

/* ——— phone ——— */
@media (max-width: 760px) {
  :root { --hz: 63%; }
  body { font-size: 1rem; }
  .hdr { height: 60px; }
  .hdr__mark { font-size: 1.125rem; }

  .bottle { bottom: 17svh; height: 66svh; max-width: 158svh; }
  .mark { top: 15.5svh; font-size: 26.5vw; }
  .ch0__line { bottom: 4.5svh; right: var(--gut); max-width: 13.5em; font-size: 1.5rem; }
  .ch0__aside { display: none; }

  .giant { top: 10.5svh; font-size: min(18vw, 11svh); }
  .giant__b { padding-left: .3em; }
  .ch__line { bottom: 4.5svh; right: var(--gut); max-width: 13.5em; font-size: 1.5rem; }
  .giant--sm { top: 9svh; font-size: min(9.8vw, 5.4svh); }

  .btn { width: 100%; max-width: 22rem; }

  .wl__bar { height: 60px; }
  .wl__mark { font-size: 1.125rem; }
  .wl__set { --hz: 46%; }
  .wl__in { justify-content: flex-start; padding: 84px var(--gut) 6svh; }
  .wl.is-done .wl__in { justify-content: center; }
  .wl__head { margin-bottom: 3.5svh; }
  .join__title { font-size: 2.75rem; line-height: 1.02; }
  .join__title em { display: block; } /* "for Édition 01." on its own line, with room above the accent */
  .join__lead { font-size: 1.0625rem; }
  .say { font-size: 1.6rem; line-height: 1.55; }
  .fld--name input { width: 7.2em; }
  .nw--email { display: block; }
  .fld--email { width: calc(100% - .5em); }
  .fld--email input { width: 100%; margin-left: 0; }
  .form__err { margin-top: .7rem; }
  .form__end { gap: 1.4rem; margin-top: .7rem; }
  .form__go { width: 100%; }

  .ftr { padding-top: 12svh; }
  .ftr__mark { font-size: 3.4rem; }
  .ftr__line { font-size: .75rem; letter-spacing: .22em; padding-left: .22em; }
  .ftr__row { margin-top: 10svh; gap: 1.4rem; }
}

@media (max-width: 760px) and (max-height: 760px) {
  .wl__in { padding-top: 76px; }
  .wl__head { margin-bottom: 3svh; }
  .join__title { font-size: 2.5rem; }
  .join__lead { margin-top: 2.4svh; font-size: 1rem; line-height: 1.5; }
}

@media (max-width: 380px) {
  .say { font-size: 1.45rem; }
  /* below 24px the hints need 4.5:1 on the lightest part of the set */
  .fld input::placeholder { color: #54485C; }
  .fld select:invalid { color: #54485C; }
}

@media (prefers-reduced-motion: reduce) {
  /* no film: the chapters change with short fades */
  .wall, .bridge { transition: opacity .4s ease; }
  .ps__shut { transition: transform .4s ease; }
  .wl__set .set { transition-duration: .4s; }
  .js .ln__in { transition: opacity .2s ease; transform: none !important; }
  .bottle img[data-nira-fallback] { transition: opacity .3s ease; }
  .js .form__done:not([hidden]) { animation: none; }
  .hdr__join, .form__go, .btn, .hdr, .wl__x { transition: none; }
  .js .mark, .js .ch0__line, .js .ch0__aside { animation: none; }
  .js .wl, .js .wl__in, .js .wl__bar, .js .wl.is-out, .js .wl.is-out .wl__in, .js .wl.is-out .wl__bar { transition: none; }
  .js .wl:not(.is-in) .wl__in { transform: none; }
}

/* ——— the pour: a room at dusk ———
   As the blue bottle glides into the pour, the blue wall dissolves into a cream plaster wall in warm light,
   with an arched window onto a deep-blue night: a crescent moon, the sea, a whitewashed village on the hill.
   The 3D canvas stays clear above it and draws the marble table the bottle and the coupe stand on.
   Window geometry: --wx left, --wy top, --ww width, --wh height (desktop: right of the glass; phone: above it, clear of the title). */
.set--pour {
  --wx: 64vw; --wy: 9svh; --ww: min(25vw, 40svh); --wh: 50svh;
  background:
    var(--grain),
    radial-gradient(46% 40% at 50% 62%, rgba(255, 244, 226, .78), rgba(255, 244, 226, 0) 74%),
    radial-gradient(70% 60% at 12% 0%, rgba(214, 186, 160, .32), rgba(214, 186, 160, 0) 70%),
    radial-gradient(60% 70% at 100% 100%, rgba(170, 128, 102, .22), rgba(170, 128, 102, 0) 70%),
    linear-gradient(180deg, #E6D5C4 0%, #EFE2D3 30%, #F3E7D9 56%, #ECDCCB 72%, #DCC5B1 84%, #CFB6A0 100%);
}
/* until the 3D is live (and without it), the pour's still brings its own room: the wall behind it stays powder blue */
html:not(.three-live) .set--pour {
  --w1: #AFC3D5; --w2: #D7E2EB; --f1: #EAD0C9; --f2: #E0BCB3; --gx: 72%;
  background:
    var(--grain),
    radial-gradient(42% 34% at var(--gx) 52%, rgba(255, 248, 240, .5), rgba(255, 248, 240, 0) 72%),
    linear-gradient(180deg, var(--w1) 0%, var(--w2) var(--hz), var(--f1) calc(var(--hz) + 3%), var(--f2) 100%);
}
html:not(.three-live) .set--pour > * { display: none; }
/* soft dappled shade from the upper left: shadows only */
.ps__dapple {
  position: absolute; inset: 0; width: 100%; height: 100%; opacity: .2; mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(64% 78% at 4% 0%, #000 10%, rgba(0, 0, 0, 0) 74%);
  mask-image: radial-gradient(64% 78% at 4% 0%, #000 10%, rgba(0, 0, 0, 0) 74%);
}
/* the opening in the wall: we stand to its left, so its right reveal and the soffit show, lit warm from the room */
.ps__win {
  position: absolute; left: var(--wx); top: var(--wy); width: var(--ww); height: var(--wh);
  border-radius: 999px 999px 0 0; overflow: hidden;
  background:
    radial-gradient(120% 60% at 100% 0%, rgba(150, 112, 88, .34), rgba(150, 112, 88, 0) 60%),
    linear-gradient(90deg, #D7C0AB 0%, #E6D3C0 78%, #EEDFCF 100%);
  box-shadow: 0 0 0 1px rgba(160, 128, 104, .12), -1px 0 0 rgba(255, 249, 240, .6);
}
.ps__view {
  position: absolute; left: -10%; top: 2.4%; width: 100%; height: 100%;
  border-radius: 999px 999px 0 0; overflow: hidden; background: #26306A;
}
.ps__sky { position: absolute; inset: 0; width: 100%; height: 100%; }
/* the night is a little softer at its edges, and the glass catches the room faintly */
.ps__view::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: var(--grain), linear-gradient(115deg, rgba(255, 236, 214, 0) 40%, rgba(255, 236, 214, .07) 52%, rgba(255, 236, 214, 0) 64%);
  box-shadow: inset 0 0 calc(var(--ww) * .05) rgba(14, 18, 48, .45), inset calc(var(--ww) * -.02) 0 calc(var(--ww) * .03) rgba(255, 226, 196, .14);
}
/* until the bottle has arrived the arch is an empty niche, cream on cream: a plaster shutter over the night, which lifts away
   (script.js) so the view is lit from the sill up, and comes back down before the bottle moves on. Only its transform changes. */
.ps__shut {
  position: absolute; left: 0; right: 0; top: 0; height: 135%; z-index: 1; will-change: transform;
  background:
    radial-gradient(120% 50% at 100% 0%, rgba(150, 112, 88, .26), rgba(150, 112, 88, 0) 60%),
    linear-gradient(90deg, #D9C4AF 0%, #E3D0BD 70%, #E9D8C6 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 70%, rgba(0, 0, 0, 0) 100%); mask-image: linear-gradient(180deg, #000 70%, rgba(0, 0, 0, 0) 100%);
}
/* the sill: a deep ledge with its top in the light, and its shadow on the wall below */
.ps__sill {
  position: absolute; left: calc(var(--wx) - var(--ww) * .05); top: calc(var(--wy) + var(--wh) - .2svh);
  width: calc(var(--ww) * 1.1); height: max(10px, 1.5svh); border-radius: 2px;
  background: linear-gradient(180deg, #FAF1E6 0%, #F1E4D5 45%, #DCC7B3 100%);
  box-shadow: 0 1.4svh 2.4svh -1svh rgba(118, 84, 60, .32), 0 .3svh .5svh rgba(118, 84, 60, .14);
}

/* the window sinks a little during the pour close-up (script.js paintWinPush): its own layer, so the painted night is only moved */
.three-live .ps__win, .three-live .ps__sill { will-change: transform; }
/* below the 3D canvas (which ends 14svh above the foot of the screen, 17svh on a phone) the marble table runs on to the foot of the
   page. It lies over every wall, with exactly the opacity the 3D gives its table (script.js), so the join never shows. */
.ps__table {
  --tb: #EFE1D3; --tb2: #E6D3C2; /* the 3D table's near edge (script.js reads it from the canvas) */
  position: absolute; left: 0; right: 0; top: 80svh; bottom: 0; opacity: 0; will-change: opacity;
  background:
    var(--grain),
    radial-gradient(90% 200% at 50% 0%, rgba(246, 228, 211, 0) 55%, rgba(176, 140, 112, .1) 100%),
    linear-gradient(180deg, var(--tb) 0%, var(--tb) 6svh, var(--tb2) 100%);
  /* it fades in under the first half of the canvas's feather: the two cross, so neither ends on a line */
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, #000 3svh); mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, #000 3svh);
}
/* while the table is there, the live bottle's foot feathers over it (script.js .has-foot; on the box, since the module masks the
   canvas itself in the close-up) */
.bottle { --fe: 6svh; }
.bottle.has-foot {
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - var(--fe)), rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(180deg, #000 calc(100% - var(--fe)), rgba(0, 0, 0, 0) 100%);
}

@media (max-width: 760px) {
  .set--pour {
    --wx: 44vw; --wy: 28.5svh; --ww: 48vw; --wh: 31svh;
    background:
      var(--grain),
      radial-gradient(70% 34% at 42% 70%, rgba(255, 244, 226, .78), rgba(255, 244, 226, 0) 74%),
      radial-gradient(90% 46% at 0% 0%, rgba(214, 186, 160, .3), rgba(214, 186, 160, 0) 70%),
      linear-gradient(180deg, #E6D5C4 0%, #EFE2D3 26%, #F3E7D9 54%, #ECDCCB 70%, #DCC5B1 84%, #CFB6A0 100%);
  }
  .ps__dapple { opacity: .16; }
  .bottle { --fe: 3svh; }
  .ps__table { top: 80svh; -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, #000 1.5svh); mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, #000 1.5svh); }
}
html:not(.three-live) .ps__table, html:not(.three-live) .bridge { display: none; }
html:not(.js) .ps__shut { display: none; }

/* once the 3D bottle is live the still never shows again (no second, overlapping bottle) */
.bottle.is-live img[data-nira-fallback] { opacity: 0 !important; visibility: hidden !important; }