/* Pretty Little Life · the website (round 124: « il faut que le design system soit revu, comme ça tout est pareil »,
   « je n'aime pas du tout les conteneurs circulaires »). One character everywhere: her paper things. Cream paper, the
   game's pink ink in fine lines, square corners; prints for the films and pictures, menu cards for the lists, a ticket
   for the facts, an invitation at the end. Two type families (Bodoni Moda for titles, Nunito for the rest) and her
   script for her name only. No pills, no bubbles. */

@font-face { font-family: 'Bodoni Moda'; font-style: italic; font-weight: 400 900; font-display: swap; src: url(../fonts/bodoni-moda-latin-wght-italic.woff2) format('woff2'); }
@font-face { font-family: 'Bodoni Moda'; font-style: normal; font-weight: 400 900; font-display: swap; src: url(../fonts/bodoni-moda-latin-wght-normal.woff2) format('woff2'); }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 200 1000; font-display: swap; src: url(../fonts/nunito-latin-wght-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 200 1000; font-display: swap; src: url(../fonts/nunito-latin-ext-wght-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Pinyon Script'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/pinyon-script-latin-400-normal.woff2) format('woff2'); }

/* ---------------------------------------------------------------- the system */
:root {
  /* paper and ink */
  --ground: #FBF4EE; --ground-blush: #F8EAE6; --paper: #FFFDF9; --paper-blush: #FCF1EF;
  --ink: #A85A6C; --ink-deep: #6F3A4A; --text: #4E3E44; --muted: #856C72;
  --rule: rgba(168, 90, 108, .42); --rule-soft: rgba(168, 90, 108, .2);
  --night: #2B2238;
  /* paper on a table: a thin edge and a soft fall of light */
  --lift: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 16px 34px -20px rgba(90, 40, 55, .5), 0 3px 8px -4px rgba(90, 40, 55, .18);
  --corner: 2px;
  /* type */
  --serif: 'Bodoni Moda', 'Didot', Georgia, serif; --sans: 'Nunito', ui-rounded, system-ui, -apple-system, 'Segoe UI', sans-serif; --script: 'Pinyon Script', 'Snell Roundhand', cursive;
  --t-display: clamp(36px, 4.8vw, 60px); --t-title: clamp(24px, 2.6vw, 32px); --t-body: 17px; --t-small: 15px; --t-label: 11.5px;
  /* rhythm */
  --gap: clamp(20px, 2.6vw, 34px); --section: clamp(84px, 10vw, 136px);
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--text); font: 400 var(--t-body)/1.65 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--ink); }
h1, h2, h3 { margin: 0; font-weight: 500; text-wrap: balance; }
p { margin: 0; }
[hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }

/* labels: small capitals in her ink, as printed on a card */
.label { display: inline-block; font: 800 var(--t-label)/1.2 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--ink); }
/* a title: its label above with a fine line either side, the title in Bodoni italic */
.head { display: grid; justify-items: center; text-align: center; gap: 14px; margin-bottom: clamp(34px, 4.5vw, 56px); }
.head .label { display: flex; align-items: center; gap: 14px; }
.head .label::before, .head .label::after { content: ''; width: 34px; height: 1px; background: var(--rule); }
.head h2, .title { font: italic 500 var(--t-display)/1.04 var(--serif); color: var(--ink-deep); }
.lead { font-size: clamp(16px, 1.5vw, 18px); color: var(--muted); max-width: 60ch; }
.head .lead { margin: 0 auto; }
.left { justify-items: start; text-align: left; }
.left .label::before { display: none; }
/* her mark between things: a little drawn heart */
.mark { width: 16px; height: 16px; color: var(--ink); opacity: .8; }
/* a line of facts, printed: PC & Mac, single-player, 9 languages, set apart by space alone (round 124: no dots
   between them) */
.printed { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 34px; font: 800 var(--t-label)/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }

/* buttons: printed on card, square corners */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 24px; border-radius: var(--corner); background: var(--ink); color: var(--paper); font: 800 13px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; border: 0; cursor: pointer; box-shadow: 0 10px 22px -12px rgba(110, 40, 60, .7); transition: background .2s, transform .2s; }
.btn:hover { background: var(--ink-deep); transform: translateY(-1px); }
.btn svg { width: 15px; height: 15px; }
.btn-line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.btn-line:hover { background: var(--paper); color: var(--ink-deep); }
.btn-small { padding: 11px 16px; font-size: 11.5px; }
.is-soon { cursor: default; } .is-soon:hover { transform: none; background: var(--ink); }
.btn-line.is-soon:hover { background: transparent; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* a print: a film or a picture on paper, its white border and a fine ink line round it */
.print { margin: 0; padding: clamp(6px, .9vw, 10px); background: var(--paper); border-radius: var(--corner); box-shadow: var(--lift), 0 0 0 1px var(--rule-soft); position: relative; }
.print > video, .print > img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--paper-blush); border-radius: 1px; }
.print figcaption { padding: 10px 4px 2px; font: italic 500 16px/1.35 var(--serif); color: var(--ink-deep); }
/* a card: paper with a fine double rule inside, like the invitation */
.card { background: var(--paper); border-radius: var(--corner); box-shadow: var(--lift), inset 0 0 0 7px var(--paper), inset 0 0 0 8px var(--rule-soft); }

/* a menu card beside a film (jobs, businesses, her shop, her getaways, build): one line each, the one playing in ink */
.film-menu { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(260px, 1fr); gap: var(--gap); align-items: stretch; }
.film-menu .print { align-self: center; }
.film-menu .print video { transition: opacity .45s ease; }
.menu { padding: 26px 26px 22px; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 14px; min-height: 0; }
.film-menu > .menu { contain: size; }
.menu-title { font: italic 600 20px/1.2 var(--serif); color: var(--ink-deep); text-align: center; padding-bottom: 12px; border-bottom: 1px solid var(--rule-soft); }
.menu ol { list-style: none; margin: 0; padding: 0 4px 0 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--rule-soft) transparent; display: grid; align-content: start; }
.menu li { border-bottom: 1px dotted var(--rule); }
.menu li:last-child { border-bottom: 0; }
.menu button, .menu .row { width: 100%; display: grid; grid-template-columns: 28px 1fr 16px; align-items: baseline; gap: 10px; padding: 11px 2px; border: 0; background: none; text-align: left; cursor: pointer; color: var(--text); font: 700 15.5px/1.3 var(--sans); }
.menu .row { cursor: default; }
.menu .n { font: italic 500 15px/1 var(--serif); color: var(--muted); }
.menu .heart { width: 13px; height: 13px; color: var(--ink); opacity: 0; transition: opacity .25s; align-self: center; }
.menu .more { grid-column: 2 / 4; font: 400 14px/1.45 var(--sans); color: var(--muted); max-height: 0; overflow: hidden; transition: max-height .35s ease, margin .35s; }
.menu li.is-now button { color: var(--ink-deep); }
.menu li.is-now .n { color: var(--ink); }
.menu li.is-now .heart { opacity: 1; }
.menu li.is-now .more { max-height: 6em; margin-top: 4px; }
.menu button:hover { color: var(--ink); }
.menu button:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; }
.film-stack { position: relative; aspect-ratio: 16 / 9; }
.film-stack video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.film-stack video.is-on { opacity: 1; }

/* ---------------------------------------------------------------- the header */
.site-head { position: fixed; inset: 0 0 auto; z-index: 50; padding-top: env(safe-area-inset-top, 0px); transform: translateY(-110%); transition: transform .45s cubic-bezier(.2, .8, .2, 1), background .3s; }
body.past-intro .site-head, html:not(.js) .site-head { transform: none; }
.site-head.is-scrolled { background: rgba(251, 244, 238, .92); backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--rule-soft); }
.head-row { display: flex; align-items: center; gap: 22px; height: 64px; }
.brand { text-decoration: none; color: var(--ink); font: 400 28px/1 var(--script); white-space: nowrap; }
.site-nav { display: flex; gap: 24px; margin-left: auto; align-items: center; }
.site-nav a { text-decoration: none; color: var(--text); font: 800 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.site-nav a:hover { color: var(--ink); }
.site-nav .lang { color: var(--ink); padding-left: 18px; border-left: 1px solid var(--rule-soft); }
.nav-toggle { display: none; margin-left: auto; width: 44px; height: 44px; border: 0; border-radius: var(--corner); background: var(--paper); color: var(--ink); box-shadow: 0 0 0 1px var(--rule-soft); }
.nav-toggle svg { width: 22px; height: 22px; margin: auto; }

/* ---------------------------------------------------------------- the film, folding into a print as you scroll */
.intro { position: relative; height: 200vh; background: var(--night); }
.intro-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; place-items: center; background: linear-gradient(var(--ground), var(--ground)) center / 100% calc(var(--e, 0) * 100%) no-repeat, var(--night); }
.intro-frame { --w: min(1080px, calc(100vw - 40px), calc((100svh - 150px) * 16 / 9)); position: relative; overflow: hidden; width: calc(100vw - (100vw - var(--w)) * var(--e, 0)); height: calc(100svh - (100svh - var(--w) * 9 / 16) * var(--e, 0)); border-radius: var(--corner); box-shadow: 0 0 0 calc(10px * var(--e, 0)) var(--paper), 0 0 0 calc(11px * var(--e, 0)) var(--rule-soft), 0 30px 70px rgba(60, 25, 40, calc(.3 * var(--e, 0))); transform: translateY(calc(var(--e, 0) * 26px)); will-change: width, height; }
.intro-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.intro-cue { position: absolute; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%); display: grid; justify-items: center; gap: 10px; color: #fff; font: 800 var(--t-label)/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; opacity: calc(1 - var(--e, 0) * 4); }
.intro-cue i { width: 1px; height: 38px; background: rgba(255, 255, 255, .8); position: relative; overflow: hidden; }
.intro-cue i::after { content: ''; position: absolute; left: 0; top: -14px; width: 1px; height: 14px; background: #fff; animation: cue 1.8s ease-in-out infinite; }
@keyframes cue { 0% { transform: translateY(0); } 100% { transform: translateY(52px); } }
/* (round 124: the film is the trailer: its sound on a click, and a pause) */
.film-ctl { position: absolute; right: 14px; bottom: 14px; z-index: 2; display: flex; gap: 8px; }
.film-sound, .film-pause { display: inline-flex; align-items: center; gap: 8px; padding: 10px 13px; border: 0; border-radius: var(--corner); background: rgba(255, 253, 249, .92); color: var(--ink); font: 800 10.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; cursor: pointer; box-shadow: 0 6px 16px -8px rgba(60, 25, 40, .5); }
.film-sound svg, .film-pause svg { width: 14px; height: 14px; }
.film-sound[aria-pressed=true] { background: var(--ink); color: var(--paper); }
.intro-after { position: relative; background: var(--ground); padding-block: clamp(44px, 6vw, 76px) clamp(54px, 7vw, 92px); }
.intro-copy { display: grid; justify-items: center; text-align: center; gap: 18px; }
.intro-lead { max-width: 58ch; font-size: clamp(16px, 1.5vw, 18px); color: var(--muted); }
.film-note { font: italic 500 15px/1.4 var(--serif); color: var(--muted); }

/* ---------------------------------------------------------------- Rue des Lilas, flown through with the scroll */
.inside { position: relative; height: 340vh; background: var(--ground); }
.inside-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.inside-canvas, .inside-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.inside-canvas { opacity: 0; transition: opacity .6s; }
.inside.has-frames .inside-canvas { opacity: 1; }
.inside.has-frames .inside-still { opacity: 0; transition: opacity .6s; }
.inside-veil { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(251, 244, 238, .9) 0%, rgba(251, 244, 238, .5) 26%, rgba(251, 244, 238, 0) 46%), linear-gradient(rgba(251, 244, 238, .75), rgba(251, 244, 238, 0) 13%); pointer-events: none; }
.inside-copy { position: absolute; left: max(24px, 6vw); top: 50%; transform: translateY(-50%); max-width: min(420px, 82vw); display: grid; gap: 14px; }
.inside-copy h2 { font: italic 500 clamp(44px, 6.4vw, 80px)/1 var(--serif); color: var(--ink-deep); }
.inside-copy p { color: var(--text); }

/* ---------------------------------------------------------------- her day, dawn to night: prints along a line */
.day { position: relative; height: 420vh; --sky1: #FFE7D6; --sky2: #FBF4EE; }
.day-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; grid-template-rows: auto 1fr; grid-template-columns: minmax(0, 1fr); background: linear-gradient(var(--sky1), var(--sky2)); transition: background .4s; }
.day-head { padding: calc(88px + env(safe-area-inset-top, 0px)) max(24px, 6vw) 0; position: relative; z-index: 2; margin: 0; }
.day-head .lead { margin: 0; }
.day.is-night .day-head h2, .day.is-night .day-head .lead { color: #F7E6EC; }
.day.is-night .day-head .label { color: #F6C3D0; }
.day.is-night .day-head .label::before, .day.is-night .day-head .label::after { background: rgba(246, 195, 208, .5); }
.day-track { position: relative; z-index: 2; display: flex; gap: 28px; align-items: center; margin: 0; padding: 0 max(24px, 6vw); list-style: none; transform: translateX(calc(var(--dx, 0) * -1px)); will-change: transform; }
.moment { flex: 0 0 min(360px, 76vw); padding: 10px 10px 18px; background: var(--paper); border-radius: var(--corner); box-shadow: var(--lift), 0 0 0 1px var(--rule-soft); }
.moment:nth-child(odd) { transform: rotate(-.8deg); } .moment:nth-child(even) { transform: rotate(.7deg) translateY(10px); }
.moment figure { margin: 0; aspect-ratio: 16 / 10; overflow: hidden; background: var(--paper-blush); }
.moment figure img { width: 100%; height: 100%; object-fit: cover; }
.moment-body { padding: 14px 8px 0; display: grid; gap: 5px; }
.moment time { font: 800 var(--t-label)/1 var(--sans); letter-spacing: .2em; color: var(--ink); }
.moment h3 { font: italic 600 21px/1.2 var(--serif); color: var(--ink-deep); }
.moment p { font-size: 14.5px; color: var(--muted); }
.day-sky { position: absolute; inset: 0; pointer-events: none; }
.day-sun { position: absolute; width: 140px; height: 140px; border-radius: 50%; left: calc(8% + var(--sun, 0) * 78%); top: calc(62% - var(--sunY, 0) * 44%); background: radial-gradient(circle, rgba(255, 236, 190, .95), rgba(255, 214, 170, .4) 45%, rgba(255, 214, 170, 0) 70%); }
.day.is-night .day-sun { background: radial-gradient(circle, rgba(250, 246, 255, .95), rgba(220, 210, 255, .3) 40%, rgba(220, 210, 255, 0) 70%); }

/* ---------------------------------------------------------------- the sections */
.section { padding-block: var(--section); position: relative; }
.band { background: var(--ground-blush); }
.rule-top { border-top: 1px solid var(--rule-soft); }

/* make her the way you want: the creator, and the girls she could be pinned beside it */
.make-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: clamp(28px, 5vw, 70px); align-items: center; }
.make-copy { display: grid; gap: 18px; }
.make-media { position: relative; padding-bottom: 16%; }
.make-media .print-small { position: absolute; width: 46%; right: -3%; bottom: 0; transform: rotate(2deg); }

/* everything she could ever want: a print and its page, one after another */
.feature { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 70px); align-items: center; padding-block: clamp(36px, 4.5vw, 56px); border-top: 1px solid var(--rule-soft); }
.feature:first-of-type { border-top: 0; padding-top: 0; }
.feature:nth-of-type(even) .feature-media { order: 2; }
.feature:nth-of-type(odd) .print { transform: rotate(-.6deg); } .feature:nth-of-type(even) .print { transform: rotate(.6deg); }
.feature-copy { display: grid; gap: 14px; }
.feature-copy h3 { font: italic 500 var(--t-title)/1.12 var(--serif); color: var(--ink-deep); font-size: clamp(28px, 3.2vw, 40px); }
.feature-copy p { color: var(--text); }

/* every chapter of her life: prints in a row, in order */
.chapter-row { list-style: none; margin: 0; padding: 8px max(20px, calc((100vw - 1140px) / 2)) 30px; display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--rule-soft) transparent; }
.chapter { flex: 0 0 min(320px, 76vw); scroll-snap-align: center; padding: 10px 10px 18px; background: var(--paper); border-radius: var(--corner); box-shadow: var(--lift), 0 0 0 1px var(--rule-soft); }
.chapter:nth-child(odd) { transform: rotate(-.7deg); } .chapter:nth-child(even) { transform: rotate(.6deg) translateY(8px); }
.chapter figure { margin: 0; aspect-ratio: 16 / 10; overflow: hidden; background: var(--paper-blush); } .chapter img { width: 100%; height: 100%; object-fit: cover; }
.chapter-body { padding: 14px 8px 0; display: grid; gap: 5px; }
.chapter-n { font: 800 var(--t-label)/1 var(--sans); letter-spacing: .2em; color: var(--ink); }
.chapter-body h3 { font: italic 600 21px/1.2 var(--serif); color: var(--ink-deep); }
.chapter-body p { font-size: 14.5px; color: var(--muted); }

/* pack your suitcase: the boarding pass, the plane, then her getaways */
.pass { display: grid; grid-template-columns: minmax(0, 1fr) 190px; max-width: 900px; margin: 0 auto clamp(44px, 6vw, 70px); border-radius: var(--corner); background: var(--paper); box-shadow: var(--lift), 0 0 0 1px var(--rule-soft); overflow: hidden; position: relative; transform: rotate(-.8deg); }
.pass-main { padding: 26px 30px 24px; display: grid; gap: 18px; min-width: 0; }
.pass-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 12px; border-bottom: 1px dashed var(--rule); }
.pass-air { font: italic 700 22px/1 var(--serif); color: var(--ink-deep); } .pass-air span { color: var(--ink); }
.pass-route { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; }
.pass-route div { display: grid; gap: 4px; } .pass-route div:last-child { text-align: right; }
.pass-route small { font: 800 var(--t-label)/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.pass-route b { font: 800 clamp(38px, 6vw, 58px)/1 var(--sans); letter-spacing: .04em; color: var(--ink-deep); }
.pass-route span { font-weight: 700; color: var(--text); }
.pass-plane { font-style: normal; font-size: 24px; color: var(--ink); }
.pass-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px 18px; margin: 0; }
.pass-grid dt { font: 800 var(--t-label)/1.2 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.pass-grid dd { margin: 3px 0 0; font-weight: 800; color: var(--ink-deep); }
.pass-langs { font-size: 13px; color: var(--muted); }
.pass-stub { position: relative; display: grid; align-content: center; justify-items: center; gap: 8px; padding: 22px 16px; background: var(--paper-blush); border-left: 1px dashed var(--rule); color: var(--ink-deep); font-weight: 800; text-align: center; }
.pass-stub b { font: italic 700 18px/1 var(--serif); }
.pass-stub::before, .pass-stub::after { content: ''; position: absolute; left: -12px; width: 22px; height: 22px; border-radius: 50%; background: var(--ground); box-shadow: inset 0 0 0 1px var(--rule-soft); }
.pass-stub::before { top: -11px; } .pass-stub::after { bottom: -11px; }
.pass-code { width: 120px; height: 46px; margin-top: 6px; background: repeating-linear-gradient(90deg, var(--ink-deep) 0 2px, transparent 2px 4px, var(--ink-deep) 4px 7px, transparent 7px 9px, var(--ink-deep) 9px 10px, transparent 10px 13px); opacity: .85; }
.trip-plane { max-width: 980px; margin: 0 auto clamp(44px, 6vw, 70px); transform: rotate(.5deg); }

/* questions */
.faq { display: grid; max-width: 820px; margin: 0 auto; padding: 14px 34px; }
.faq details { border-bottom: 1px dotted var(--rule); padding: 18px 2px; }
.faq details:last-child { border-bottom: 0; }
.faq summary { cursor: pointer; font: italic 600 19px/1.35 var(--serif); color: var(--ink-deep); list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font: 400 22px/1 var(--sans); color: var(--ink); }
.faq details[open] summary::after { content: '\2212'; }
.faq p { margin-top: 10px; color: var(--muted); }

/* the invitation, and the waitlist on it */
.invite { position: relative; max-width: 660px; margin: 0 auto; padding: clamp(30px, 5vw, 52px) clamp(22px, 5vw, 58px) clamp(30px, 5vw, 46px); display: grid; justify-items: center; gap: 14px; text-align: center; background: var(--paper); border-radius: var(--corner); box-shadow: var(--lift), inset 0 0 0 10px var(--paper), inset 0 0 0 11px var(--rule), inset 0 0 0 15px var(--paper), inset 0 0 0 16px var(--rule-soft); }
.invite-brand { width: min(230px, 56vw); margin-top: -4px; }
.invite h2 { font: 400 clamp(46px, 7vw, 74px)/1 var(--script); color: var(--ink); }
.invite-text { font: italic 500 clamp(17px, 2vw, 20px)/1.5 var(--serif); color: var(--text); max-width: 34ch; }
.invite-rsvp { margin-top: 6px; font: italic 600 22px/1 var(--serif); color: var(--ink-deep); }
.invite hr { width: 60%; border: 0; border-top: 1px dotted var(--rule); margin: 6px 0; }
.wait { display: grid; gap: 10px; width: min(440px, 100%); }
.wait-row { display: grid; grid-template-columns: 1fr auto; gap: 0; box-shadow: inset 0 0 0 1px var(--ink); border-radius: var(--corner); background: var(--paper); }
.wait input[type=email] { min-width: 0; border: 0; background: transparent; padding: 14px 14px; font: 600 15px/1.2 var(--sans); color: var(--text); outline: none; }
.wait input::placeholder { color: #B79CA2; }
.wait .btn { box-shadow: none; border-radius: 0 var(--corner) var(--corner) 0; }
.wait-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.wait-note, .wait-msg { font-size: 13px; color: var(--muted); }
.wait-msg.is-ok { color: var(--ink-deep); font: italic 600 17px/1.4 var(--serif); }
.wait-count { font: italic 500 17px/1.4 var(--serif); color: var(--ink-deep); }
.wait-count b { font: 800 18px/1 var(--sans); color: var(--ink); }
.invite .socials { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }

/* the trailer, in a window */
.trailer-box { border: 0; padding: 10px; background: var(--paper); width: min(1200px, 94vw); border-radius: var(--corner); }
.trailer-box::backdrop { background: rgba(43, 34, 56, .82); backdrop-filter: blur(6px); }
.trailer-box video { width: 100%; aspect-ratio: 16 / 9; background: #000; }
.trailer-close { position: fixed; top: 18px; right: 18px; width: 44px; height: 44px; border: 0; border-radius: var(--corner); background: var(--paper); color: var(--ink); cursor: pointer; display: grid; place-items: center; }
.trailer-close svg { width: 20px; height: 20px; }

.site-foot { padding: 30px 0 calc(30px + env(safe-area-inset-bottom, 0px)); background: var(--night); color: #E9DDE3; font-size: 13.5px; }
.foot-row { display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: center; justify-content: space-between; }
.foot-links { display: flex; gap: 20px; }
.foot-links a { color: #F6C3D0; text-decoration: none; font: 800 11.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; }

/* things coming into view */
.js .reveal { opacity: 0; translate: 0 24px; transition: opacity .8s ease, translate .8s cubic-bezier(.2, .8, .2, 1); }
.js .reveal.is-in { opacity: 1; translate: 0 0; }

@media (max-width: 960px) {
  .make-grid, .film-menu { grid-template-columns: minmax(0, 1fr); }
  .film-menu > .menu { contain: none; }
  .menu ol { max-height: 300px; }
  .pass { grid-template-columns: 1fr; transform: none; }
  .pass-stub { border-left: 0; border-top: 1px dashed var(--rule); grid-auto-flow: column; justify-content: space-between; }
  .pass-stub::before, .pass-stub::after { display: none; }
}
@media (max-width: 860px) {
  .site-nav { position: fixed; top: 64px; left: 12px; right: 12px; flex-direction: column; align-items: stretch; gap: 0; padding: 8px 14px; border-radius: var(--corner); background: var(--paper); box-shadow: var(--lift), 0 0 0 1px var(--rule-soft); display: none; }
  .site-nav.is-open { display: flex; }
  .site-nav a { padding: 14px 4px; border-bottom: 1px dotted var(--rule); }
  .site-nav a:last-child { border-bottom: 0; }
  .site-nav .lang { border-left: 0; padding-left: 4px; }
  .nav-toggle { display: grid; }
  .head-cta { display: none; }
  .feature { grid-template-columns: minmax(0, 1fr); }
  .feature:nth-of-type(even) .feature-media { order: 0; }
  .inside-veil { background: linear-gradient(rgba(251, 244, 238, .94), rgba(251, 244, 238, .4) 42%, rgba(251, 244, 238, 0) 60%); }
  .inside-copy { top: calc(84px + env(safe-area-inset-top, 0px)); transform: none; }
}
@media (max-width: 560px) {
  .pass-route b { font-size: 34px; }
  .menu { padding: 20px 18px 16px; }
  .faq { padding: 6px 20px; }
  .wait-row { grid-template-columns: 1fr; }
  .wait .btn { border-radius: 0 0 var(--corner) var(--corner); }
}

/* less motion: no folding, no flying, no track: everything still and in its place */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .intro { height: auto; } .intro-stage { position: relative; height: 70vh; }
  .inside { height: auto; } .inside-stage { position: relative; height: 80vh; }
  .day { height: auto; } .day-stage { position: relative; height: auto; padding-bottom: 60px; } .day-track { flex-wrap: wrap; transform: none; justify-content: center; padding-top: 30px; }
  .reveal { translate: none !important; transition: none; }
  .intro-cue i::after { animation: none; }
}

/* ---- privacy and legal notice (round 126): a quiet page of plain text ---- */
.legal { min-height: 70vh; }
.legal-wrap { max-width: 720px; display: grid; gap: 14px; }
.legal-back { justify-self: start; font: 700 var(--t-label)/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; }
.legal-back::before { content: '‹ '; }
.legal .title { margin: 10px 0 0; text-wrap: balance; }
.legal-date { margin: 0; color: var(--muted); font-size: .9em; }
.legal-lead { margin: 4px 0 10px; font-size: clamp(17px, 1.6vw, 20px); color: var(--ink-deep); }
.legal h2 { margin: 18px 0 0; font: 800 var(--t-label)/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--ink); }
.legal p { margin: 0; max-width: 65ch; }
.legal-who { margin-top: 12px !important; color: var(--muted); }
.wait-note a { color: inherit; }