/* Our website (step 9, D75, story v2 D76): ivory paper, the invitations' Greek serif for titles, olive for actions,
   gold accents; a drawn phone holding the live invitation; pinned chapters whose stage is scrubbed by site.js; one
   phone that travels through chapters 3–7. Phone first; no inline styles (CSP); text ≥ 4.5:1 on its background.
   Without JS, with reduced motion or the panel's «Όλη η κίνηση» off, every chapter is a plain block showing its
   still frame. */
:root {
  --bg: #f6f1e7; --paper: #fbf8f1; --tint: #efe7d6; --ink: #2e2a24; --muted: #5f574b; --accent: #566039; --accent-ink: #46502c;
  --gold: #b08d45; --gold-ink: #7f6128; --line: rgba(46, 42, 36, 0.14); --seal: #4b5232; --seal-hi: #6a7448; --seal-ink: #e8d49a;
  --serif: "GFS Didot", "EB Garamond", Georgia, serif; --text: "EB Garamond", Georgia, serif; --ui: Commissioner, system-ui, sans-serif;
  --gutter: 20px; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-back: cubic-bezier(0.34, 1.45, 0.64, 1);
  --phone-h: min(62svh, 620px); --phone-scale: 0.7; --live: 0;
  /* F119-05 (1.8): the buttons, the focus ring and the links' underline in the logo's coral (tools/brand.py CORAL); filled = coral
     with the logo's navy ink (5.7 : 1: white on coral is 3.2) and a deep coral edge; outlined, focus and the links' underline = a deep
     coral (≥ 5.2 : 1 on bg, paper, tint).
     To put the olive back, this one line becomes:
     --cta: var(--accent); --cta-hover: var(--accent-ink); --cta-ink: #fff; --cta-deep: var(--accent); --cta-wash: rgba(86, 96, 57, 0.08); --cta-line: currentColor; (and the primary's border = var(--cta)) */
  --cta: #f4623f; --cta-hover: #f77a5c; --cta-ink: #0c1729; --cta-deep: #a83a1c; --cta-wash: rgba(244, 98, 63, 0.12); --cta-line: #a83a1c;
}
* { box-sizing: border-box; }
html, body { overflow-x: clip; } /* the wishes' notes and the flying phone may stick out of a stage sideways; the page never scrolls sideways (F90-02; clip, not hidden: sticky keeps working) */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 1.125rem/1.6 var(--text); }
a { color: var(--accent); text-decoration-color: var(--cta-line); }
.skip { position: absolute; left: -999px; top: 8px; padding: 8px 14px; background: var(--paper); border-radius: 8px; font: 500 0.9rem var(--ui); z-index: 10; }
.skip:focus { left: 8px; }
main:focus { outline: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* the loader veil: our mark on ivory, gone within 1.2 s (site.js); nothing without JS */
.veil { display: none; }
html.js[data-motion="all"] .veil, html.js[data-motion="noscroll"] .veil { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; background: var(--bg); pointer-events: none; }
.veil .seal { width: 56px; height: 56px; animation: veil-pulse 1.2s ease-in-out infinite; }
@keyframes veil-pulse { 50% { transform: scale(0.92); opacity: 0.8; } }

/* the seal: our app icon (step 6) */
.seal { display: inline-grid; flex: none; width: 40px; height: 40px; }
.seal--tiny { width: 18px; height: 18px; }
.seal__logo { display: block; width: 100%; height: 100%; }

/* header: small, over the hero, ivory glass once the page scrolls; no buttons (F76-02: the only ones are at the end) */
.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 10px 20px; padding: 10px var(--gutter); background: rgba(246, 241, 231, 0.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid transparent; }
.top__brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.top__name { font: 400 1.25rem/1.1 var(--serif); }
.top__logo { display: block; width: auto; height: 30px; }
.top__tools { display: flex; align-items: center; gap: 8px; }
.iconbtn { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--paper); color: var(--ink); cursor: pointer; padding: 0; }
.iconbtn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.iconbtn:hover { border-color: var(--gold); }

/* the accessibility panel */
.panel { width: min(92vw, 420px); padding: 22px 22px 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--paper); color: var(--ink); font-family: var(--ui); }
.panel::backdrop { background: rgba(46, 42, 36, 0.35); }
.panel__title { margin: 0 0 4px; font: 400 1.5rem/1.2 var(--serif); }
.panel__lead { margin: 0 0 16px; color: var(--muted); font-size: 0.95rem; }
.panel__state { margin: 10px 0 0; font-size: 0.85rem; color: var(--muted); }
.switch { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 0.98rem; }
.switch small { display: block; color: var(--muted); font-size: 0.85rem; }
.switch input { width: 44px; height: 26px; flex: none; accent-color: var(--accent); }
.panel__close { margin-top: 12px; }

/* buttons (only in the closing section and the panel) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 10px 22px; border-radius: 999px;
  border: 1px solid var(--cta-deep); color: var(--cta-deep); background: transparent; font: 500 0.98rem/1.2 var(--ui); text-decoration: none; cursor: pointer;
  transition: background-color 0.2s, color 0.2s, translate 0.2s var(--ease-out);
}
.btn:hover { background: var(--cta-wash); }
.btn--primary { background: var(--cta); border-color: var(--cta-deep); color: var(--cta-ink); } /* (the edge ≥ 3 : 1 on the page: the coral alone is 2.8) */
.btn--primary:hover { background: var(--cta-hover); }
.btn:disabled { opacity: 0.55; cursor: default; } /* (the request form while it sends) */
.btn:focus-visible, .faq__item summary:focus-visible, .iconbtn:focus-visible, .top__brand:focus-visible, .input:focus-visible, .to-top:focus-visible { outline: 2px solid var(--cta-deep); outline-offset: 3px; }

/* ---------- chapters: a tall section, a sticky stage (the pin) ---------- */
.chapter { position: relative; } /* no scroll-snap: on touch screens a proximity snap drags short scrolls back (F75-01) */
.stage { position: relative; min-height: 100svh; overflow: clip; display: grid; }
html.js[data-motion="all"] .chapter, html.js[data-motion="noscroll"] .chapter { height: calc(var(--len) * 100vh); }
html.js[data-motion="all"] .stage, html.js[data-motion="noscroll"] .stage { position: sticky; top: 0; height: 100svh; min-height: 0; z-index: 1; }
@media (min-width: 760px) { html.js[data-motion="all"] .trav .stage, html.js[data-motion="noscroll"] .trav .stage { overflow: visible clip; } }
.kicker { margin: 0; font: 600 0.78rem/1.4 var(--ui); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-ink); }
.chapter__words { grid-area: words; max-width: 540px; align-self: center; }
.chapter__phone { grid-area: phone; position: relative; display: grid; justify-items: center; gap: 10px; }
.chapter__title { margin: 10px 0 14px; font: 400 clamp(1.9rem, 5.2vw, 3.1rem)/1.1 var(--serif); }
.chapter__title .w, .chapter__title .sp, .hero__title .w, .hero__title .sp { display: inline-block; }
.chapter__title .sp, .hero__title .sp { width: 0.28em; }
html.js[data-motion="all"] .chapter__title .w, html.js[data-motion="noscroll"] .chapter__title .w { opacity: 0; }
.chapter__foot { margin: 18px 0 0; color: var(--muted); font: 400 0.95rem/1.5 var(--ui); }
.themes__line { margin: 0; color: var(--muted); }
.glow { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(60% 50% at 70% 55%, rgba(176, 141, 69, 0.22), rgba(176, 141, 69, 0) 70%); }
@media (max-width: 759px) { .glow { background: radial-gradient(70% 40% at 50% 70%, rgba(176, 141, 69, 0.22), rgba(176, 141, 69, 0) 70%); } }
/* words above, the phone below; side by side from 760px */
.hero .stage, .samples .stage, .trav .stage { grid-template-rows: auto 1fr; grid-template-areas: "words" "phone"; align-items: center; justify-items: center; padding: 64px var(--gutter) 24px; gap: 8px; }
@media (min-width: 760px) {
  .hero .stage, .samples .stage, .trav .stage { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 1fr; grid-template-areas: "words phone"; max-width: 1180px; margin: 0 auto; width: 100%; padding: 80px var(--gutter) 40px; gap: 40px; }
  .trav--flip .stage { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "phone words"; } /* the phone crosses to the left (F77-03) */
  .trav--flip .chapter__words { justify-self: end; }
}

/* ---------- chapter 1: the hero (F83–F85): one panorama of the room that the camera pans across; the phone is its own
   layer over the empty table (it alone shakes and lifts); the HTML lock screen sits on the photographed screen (a
   homography); the travelling phone is born on it and rises to the centre, then flies into the themes ---------- */
.chapter--hero { --len: 6; }
.hero .stage { padding: 0; grid-template-rows: 1fr; grid-template-areas: "all"; }
html:not(.js) .hero .stage, html[data-motion="off"] .hero .stage { padding: 64px var(--gutter) 24px; grid-template-rows: auto auto auto; grid-template-areas: "pic" "words" "phone"; gap: 18px; }
@media (min-width: 760px) {
  .hero .stage { max-width: none; }
  html:not(.js) .hero .stage, html[data-motion="off"] .hero .stage { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; grid-template-areas: "pic pic" "words phone"; align-content: center; padding: 80px var(--gutter) 40px; }
}
.pan { grid-area: all; position: relative; overflow: clip; width: 100%; height: 100%; justify-self: stretch; } /* the stage centres its items: stretch, or the pan is 0 wide */
.room { position: absolute; left: 0; top: 0; height: 100%; will-change: transform; }
.room__bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.room__phone { position: absolute; will-change: transform, opacity; transform: translate3d(calc(var(--buzz, 0) * 1px), calc(var(--lift, 0) * -28px), 0) scale(calc(1 + var(--lift, 0) * 0.05)); opacity: calc(1 - var(--gone, 0)); filter: drop-shadow(0 calc(var(--lift, 0) * 24px) calc(var(--lift, 0) * 18px) rgba(20, 12, 6, calc(var(--lift, 0) * 0.45))); }
.screen { position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: hidden; border-radius: 28px; background: radial-gradient(120% 80% at 50% 0%, rgba(60, 50, 70, 0.92), rgba(24, 20, 34, 0.96) 60%, rgba(10, 8, 16, 0.98)); color: #f3efe6; display: grid; justify-items: center; align-content: start; padding-top: 128px; gap: 4px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); will-change: transform, opacity; opacity: calc(1 - var(--gone, 0)); } /* px: a % padding would resolve against the room's width */
.screen::before { content: ""; position: absolute; inset: 0; background: radial-gradient(100% 70% at 50% 30%, rgba(255, 236, 200, 0.35), rgba(255, 236, 200, 0) 70%); opacity: var(--glow, 0); }
.screen .lock__time { font: 300 92px/1 var(--ui); letter-spacing: -0.02em; }
.screen .lock__date { font: 400 22px/1.3 var(--ui); opacity: 0.85; }
.screen .notif { position: absolute; left: 6%; right: 6%; top: 34%; z-index: 2; padding: 18px 20px; border-radius: 26px; font-size: 20px; line-height: 1.35; opacity: var(--notif, 0); transform: translate3d(0, calc((1 - var(--notif, 0)) * -160%), 0); }
.screen .notif__app { font-size: 15px; }
.screen .notif__app .seal--tiny { width: 26px; height: 26px; font-size: 0.7rem; }
.screen .notif__from { font-size: 21px; }
.hero__words { grid-area: all; position: relative; z-index: 2; align-self: center; justify-self: start; max-width: 560px; margin: 0 var(--gutter) 0 max(var(--gutter), calc((100% - 1180px) / 2 + var(--gutter))); } /* lined up with the 1180px column by a margin, never by a padding inside the max-width (one word per line on wide screens, F89-01) */
@media (max-width: 759px) { .hero__words { align-self: start; margin-top: 84px; } }
html.js[data-motion="all"] .hero__title .w, html.js[data-motion="all"] .hero__lead, html.js[data-motion="all"] .hero__actions, html.js[data-motion="all"] .hero__cue,
html.js[data-motion="noscroll"] .hero__title .w, html.js[data-motion="noscroll"] .hero__lead, html.js[data-motion="noscroll"] .hero__actions, html.js[data-motion="noscroll"] .hero__cue { opacity: 0; }
.hero__title { margin: 10px 0 14px; font: 400 clamp(2.3rem, 7vw, 4rem)/1.06 var(--serif); }
.hero__lead { margin: 0; max-width: 40ch; color: var(--muted); font-size: 1.2rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; }
.hero__actions .btn:not(.btn--primary) { background: rgba(251, 248, 241, 0.88); } /* (over the room's photo: the deep coral words on paper, whatever the pan shows) */
.hero__actions .btn:not(.btn--primary):hover { background: #f6e0d3; }
.hero__cue { margin: 26px 0 0; display: inline-flex; align-items: center; gap: 8px; font: 500 0.8rem/1 var(--ui); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.hero__cue svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; animation: cue 1.6s var(--ease-out) infinite; }
@keyframes cue { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }
/* where the travelling phone comes to rest after rising off the table: the centre of the viewport */
.hero__phone { grid-area: all; display: grid; place-items: center; pointer-events: none; width: 100%; justify-self: stretch; }
.slot--hero .phone--still { display: none; }
html:not(.js) .pan, html[data-motion="off"] .pan { grid-area: pic; height: min(46svh, 420px); border-radius: 18px; }
html:not(.js) .room, html[data-motion="off"] .room { position: static; width: 100%; }
html:not(.js) .room__bg, html[data-motion="off"] .room__bg { object-fit: cover; object-position: 38% 50%; }
html:not(.js) .room__phone, html[data-motion="off"] .room__phone, html:not(.js) .screen, html[data-motion="off"] .screen { display: none; }
html:not(.js) .hero__words, html[data-motion="off"] .hero__words { grid-area: words; margin: 0; padding: 0; }
html:not(.js) .hero__phone, html[data-motion="off"] .hero__phone { grid-area: phone; pointer-events: auto; }
html:not(.js) .slot--hero .phone--still, html[data-motion="off"] .slot--hero .phone--still { display: block; }
html:not(.js) .slot--hero .notif, html[data-motion="off"] .slot--hero .notif { opacity: 1; transform: none; }

.phone {
  position: relative; z-index: 1; width: calc(var(--phone-h) * 0.462); height: var(--phone-h); overflow: hidden; border-radius: calc(var(--phone-h) * 0.07);
  border: 9px solid #1f1c18; background: var(--bg); box-shadow: 0 30px 60px -30px rgba(46, 42, 36, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.phone::before { content: ""; position: absolute; z-index: 9; top: 8px; left: 50%; width: 34%; height: 20px; translate: -50% 0; border-radius: 12px; background: #1f1c18; }
.phone::after { content: ""; position: absolute; z-index: 9; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 38%); }
.phone__poster { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.45s ease-out; }
.phone.is-live .phone__poster { opacity: 0; }
.phone__screen { display: block; width: 390px; height: 844px; border: 0; background: var(--bg); transform: scale(var(--phone-scale)); transform-origin: 0 0; }
.phone__screen--alt { position: absolute; left: 0; top: 0; }
.phone__screen--alt[data-frame="party"] { z-index: 3; clip-path: inset(0 calc(100% - var(--rA, 0%)) 0 0); } /* A: a wipe behind the light sweep */
.phone__screen--alt[data-frame="baptism"] { z-index: 4; opacity: var(--rB, 0); } /* B: under the colour wash */
.sweep { position: absolute; z-index: 5; top: -10%; bottom: -10%; left: 0; width: 34%; pointer-events: none; background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 250, 235, 0.85) 50%, rgba(255, 255, 255, 0) 100%); transform: translate3d(calc(-120% + var(--sweep, 0) * 420%), 0, 0) skewX(-12deg); opacity: calc(var(--sweep, 0) * (1 - var(--sweep, 0)) * 4); }
.wash { position: absolute; z-index: 6; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 50% 30%, #f3ead6, #b89a64 70%, #6b5a3a); opacity: var(--wash, 0); }
.traveller .phone { transform: rotate(calc(var(--wobble, 0) * 1deg)); }
.lock { position: absolute; z-index: 7; inset: 0; display: grid; justify-items: center; align-content: start; padding-top: 15%; gap: 4px; color: #f3efe6; background: radial-gradient(120% 80% at 50% 0%, #2a3148, #141827 60%, #0b0d15); opacity: var(--lock, 1); pointer-events: none; }
.lock__time { font: 300 clamp(2rem, calc(var(--phone-h) * 0.11), 4rem)/1 var(--ui); letter-spacing: -0.02em; }
.lock__date { font: 400 0.8rem/1.3 var(--ui); opacity: 0.8; }
.lock::before, .lock::after { content: ""; position: absolute; left: 50%; top: 34%; width: 60%; aspect-ratio: 1; border-radius: 50%; border: 2px solid rgba(232, 212, 154, 0.9); translate: -50% -50%; transform: scale(var(--ring, 0)); opacity: calc(1 - var(--ring, 0)); }
.lock::after { width: 90%; transform: scale(calc(var(--ring, 0) * 0.9)); opacity: calc((1 - var(--ring, 0)) * 0.6); }
.notif { position: absolute; z-index: 8; left: 6%; right: 6%; top: 34%; display: grid; gap: 2px; padding: 10px 12px; border-radius: 16px; background: rgba(251, 248, 241, 0.96); color: var(--ink); box-shadow: 0 16px 36px -18px rgba(0, 0, 0, 0.6); font: 400 0.78rem/1.35 var(--ui); opacity: calc(var(--notif, 0) * var(--lock, 1)); transform: translate3d(0, calc((1 - var(--notif, 0)) * -140%), 0); pointer-events: none; }
.notif__app { display: inline-flex; align-items: center; gap: 6px; font-size: 0.68rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.notif__from { font-weight: 600; }
.notif__text u { text-decoration: none; color: var(--accent); }
html.js[data-motion="all"] .traveller.is-front, html.js[data-motion="noscroll"] .traveller.is-front { z-index: 2; } /* above the hero's picture; written at the mode rule's specificity */
html:not(.js) .traveller .lock, html[data-motion="off"] .traveller .lock, html:not(.js) .traveller .notif, html[data-motion="off"] .traveller .notif { display: none; }
.traveller .morph__tag { position: absolute; z-index: 7; left: 50%; top: 0; margin: 0; padding: 8px 18px; border-radius: 999px; background: var(--ink); color: var(--paper); font: 500 0.95rem/1.2 var(--ui); white-space: nowrap; transform: translate3d(-50%, -150%, 0) scale(0.9); opacity: 0; transition: transform 0.5s var(--ease-back), opacity 0.3s; }
.traveller .morph__tag.is-on { opacity: 1; transform: translate3d(-50%, -150%, 0); }
@media (max-width: 759px) { .traveller .morph__tag { font-size: 0.82rem; padding: 6px 14px; } }
.phone__note { margin: 0; max-width: 30ch; text-align: center; font: 400 0.82rem/1.4 var(--ui); color: var(--muted); }

/* ---------- chapter 2: the samples: seven real openings, one after the other, in a fan of phones ---------- */
.chapter--samples { --len: 9; }
.samples__now { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 8px; min-height: 1.6em; font: 400 1.05rem/1.3 var(--ui); color: var(--muted); }
.samples__theme { font: 400 1.5rem/1.2 var(--serif); color: var(--ink); }
.samples__fx::before { content: "· "; }
.samples__dots { display: flex; gap: 6px; margin: 0 0 12px; padding: 0; list-style: none; }
.samples__dots li { width: 8px; height: 8px; border-radius: 50%; background: var(--line); transition: background-color 0.3s, transform 0.3s; }
.samples__dots li.is-on { background: var(--gold); transform: scale(1.3); }
html:not(.js) .samples__dots, html[data-motion="off"] .samples__dots, html:not(.js) .samples__now, html[data-motion="off"] .samples__now { display: none; }
.fan { position: relative; width: calc(var(--phone-h) * 0.462); height: var(--phone-h); }
.fan__card {
  position: absolute; inset: 0; display: block; overflow: hidden; cursor: default; border-radius: calc(var(--phone-h) * 0.07); border: 9px solid #1f1c18; background: #efe9dc;
  box-shadow: 0 30px 60px -30px rgba(46, 42, 36, 0.55); transform-origin: 50% 85%; will-change: transform, opacity;
  transition: transform 0.5s var(--ease-out), opacity 0.35s ease-out;
}
.fan__card::before { content: ""; position: absolute; z-index: 4; top: 8px; left: 50%; width: 34%; height: 20px; translate: -50% 0; border-radius: 12px; background: #1f1c18; }
.fan__card img { display: block; width: 100%; height: 100%; object-fit: cover; }
.phone__film { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; display: block; opacity: 0; }
.fan__card.is-front .phone__film { opacity: 1; }
html:not(.js) .phone__film, html[data-motion="off"] .phone__film { display: none; } /* the still: the first frame (the poster) */
.fan.is-handed .fan__card.is-front { opacity: 0 !important; transition: none; } /* the travelling phone is there now (F78-01) */
html:not(.js) .fan, html[data-motion="off"] .fan { width: 100%; height: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
html:not(.js) .fan__card, html[data-motion="off"] .fan__card { position: static; border-width: 4px; border-radius: 14px; }
html:not(.js) .fan__card::before, html[data-motion="off"] .fan__card::before { display: none; }

/* ---------- chapters 3–7: the travelling phone and its slots ---------- */
.trav { --len: 2.5; }
.chapter--answers, .chapter--photos, .chapter--all { --len: 3; }
.trav .stage { --phone-h: min(56svh, 600px); }
@media (max-width: 759px) { .trav .stage { --phone-h: min(46svh, 520px); gap: 4px; } .trav .chapter__words { align-self: end; } }
.slot { position: relative; width: calc(var(--phone-h) * 0.462); height: var(--phone-h); }
.slot__after { display: none; }
html:not(.js) .slot__after, html[data-motion="off"] .slot__after { display: block; width: calc(var(--phone-h) * 0.462); height: var(--phone-h); object-fit: cover; margin-top: 12px; border-radius: calc(var(--phone-h) * 0.07); border: 9px solid #1f1c18; }
.slot__still { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: calc(var(--phone-h) * 0.07); border: 9px solid #1f1c18; background: var(--bg); box-shadow: 0 30px 60px -30px rgba(46, 42, 36, 0.55); }
html.js[data-motion="all"] .slot__still, html.js[data-motion="noscroll"] .slot__still { visibility: hidden; }
.traveller { display: none; }
html.js[data-motion="all"] .traveller, html.js[data-motion="noscroll"] .traveller { display: block; position: fixed; z-index: 0; left: 0; top: 0; width: 0; height: 0; transform-origin: 50% 50%; will-change: transform; }
.traveller:not(.is-on) { opacity: 0; pointer-events: none; } /* written with :not(): the waiting state must not outrank the on state */
.traveller .phone { width: 100%; height: 100%; }
.cards { display: grid; gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; max-width: 420px; }
.card { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); will-change: transform, opacity; }
.card__icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: var(--tint); color: var(--accent-ink); }
.card__icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.card__title { display: block; font: 500 0.98rem/1.3 var(--ui); }
.card__text { display: block; color: var(--muted); font: 400 0.9rem/1.4 var(--ui); }
.card__num { font: 400 1.6rem/1 var(--serif); color: var(--accent-ink); font-variant-numeric: tabular-nums; }
html.js[data-motion="all"] .card:not(.is-in), html.js[data-motion="noscroll"] .card:not(.is-in) { opacity: 0; transform: translate3d(0, 24px, 0); }
.card.is-in { opacity: 1; transform: none; transition: transform 0.6s var(--ease-back), opacity 0.4s ease-out; }
@media (max-width: 759px) { .cards { display: none; } html:not(.js) .cards, html[data-motion="off"] .cards { display: grid; } }
/* chapter 4: the counters, the send chips, the hosts' page beside the phone */
.counters { display: flex; gap: 22px; margin: 18px 0 0; }
.counter { display: grid; gap: 2px; margin: 0; }
.counter b { font: 400 2.4rem/1 var(--serif); color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.counter span { font: 500 0.78rem/1.3 var(--ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 0; padding: 0; list-style: none; }
.chips li { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); font: 500 0.82rem/1.3 var(--ui); }
html.js[data-motion="all"] .chips:not(.chips--still) li, html.js[data-motion="noscroll"] .chips:not(.chips--still) li { opacity: 0; }
.chips--still { margin: 14px 0 16px; }
@media (max-width: 759px) { .chips:not(.chips--still) { display: none; } html:not(.js) .chips, html[data-motion="off"] .chips { display: flex; } }
.phone--hosts { position: absolute; z-index: 2; right: -46%; bottom: -4%; width: 66%; height: 66%; border-width: 6px; opacity: 0; transform: translate3d(40px, 30px, 0) rotate(8deg); transition: transform 0.7s var(--ease-out), opacity 0.4s; }
.phone--hosts.is-in { opacity: 1; transform: rotate(4deg); }
@media (max-width: 759px) { .phone--hosts { right: -8%; width: 52%; height: 52%; } }
@media (min-width: 760px) { .chapter--answers .chapter__phone { margin-left: 36px; } }
html:not(.js) .phone--hosts, html[data-motion="off"] .phone--hosts { position: static; width: calc(var(--phone-h) * 0.36); height: calc(var(--phone-h) * 0.78); opacity: 1; transform: none; margin-top: 12px; }
/* chapter 5: the wishes around the phone, the book beside it */
.wishes { position: absolute; inset: -6vh -9vw; z-index: 3; pointer-events: none; }
@media (min-width: 760px) and (max-width: 1100px) { .wishes { inset: -6vh -2vw; } } /* a narrower spread on tablets: the notes stayed inside the screen (F90-02) */
@media (max-width: 759px) { .wishes { inset: 0 -34vw; } .wish { width: 100px; padding: 8px 10px; font-size: 0.7rem; } } /* the notes at the phone's edges, not over its screen */
.wish { position: absolute; width: 150px; margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--paper); border: 1px solid var(--line); box-shadow: 0 14px 28px -18px rgba(46, 42, 36, 0.5); font: 400 0.82rem/1.35 var(--text); color: var(--ink); transform: translate3d(0, 0, 0) scale(0); will-change: transform, opacity; }
.wish b { display: block; font: 500 0.75rem/1.3 var(--ui); color: var(--gold-ink); margin-top: 4px; }
.wish.is-in { transform: translate3d(0, 0, 0) rotate(var(--r, 0deg)) scale(1); transition: transform 0.55s cubic-bezier(0.34, 1.5, 0.64, 1); }
html:not(.js) .wishes, html[data-motion="off"] .wishes { position: static; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 14px; pointer-events: auto; }
html:not(.js) .wish, html[data-motion="off"] .wish { position: static; width: auto; transform: none; }
.book { position: absolute; z-index: 4; left: -92%; bottom: 0; width: 80%; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 8px; background: var(--paper); box-shadow: 0 24px 40px -22px rgba(46, 42, 36, 0.65); opacity: 0; transform: translate3d(30px, 30px, 0) rotate(5deg); transition: transform 0.7s var(--ease-out), opacity 0.4s; }
.book.is-in { opacity: 1; transform: rotate(3deg); }
.book__page { display: block; width: 100%; height: auto; will-change: transform; }
@media (max-width: 759px) { .book { left: -4%; width: 60%; bottom: -6%; } }
html:not(.js) .book, html[data-motion="off"] .book { position: static; width: min(100%, 420px); aspect-ratio: auto; opacity: 1; transform: none; margin-top: 12px; }
/* chapter 6: the photos tile out of the phone, the QR card */
.tiles { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.tile { position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 10px; object-fit: cover; box-shadow: 0 10px 20px -12px rgba(46, 42, 36, 0.6); transform: scale(0); will-change: transform; }
.tile.is-in { transform: translate3d(var(--x), var(--y), 0) rotate(var(--r, 0deg)) scale(1); transition: transform 0.5s var(--ease-back); }
html:not(.js) .tiles, html[data-motion="off"] .tiles { display: none; }
.qr { position: absolute; right: -24%; bottom: -3%; z-index: 4; width: 40%; height: auto; border-radius: 10px; box-shadow: 0 16px 30px -16px rgba(46, 42, 36, 0.6); transform: translate3d(40px, 0, 0) rotate(8deg); opacity: 0; transition: transform 0.6s var(--ease-out), opacity 0.4s; }
.qr.is-in { transform: none; opacity: 1; }
@media (min-width: 760px) { .qr { width: 62%; right: -66%; } }
html:not(.js) .qr, html[data-motion="off"] .qr { position: static; transform: none; opacity: 1; margin-top: 12px; }
/* chapter 7: everything, as bullets that pop one by one */
.chapter__words--wide { max-width: 680px; }
.bullets { display: grid; gap: 4px 22px; margin: 6px 0 0; }
@media (min-width: 560px) { .bullets { grid-template-columns: 1fr 1fr; } }
.bullets__col { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; align-content: start; }
.bullet { display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: start; font: 400 0.92rem/1.35 var(--ui); color: var(--ink); will-change: transform, opacity; }
.bullet__icon { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: var(--tint); color: var(--accent-ink); margin-top: 1px; }
.bullet__icon svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
html.js[data-motion="all"] .bullet:not(.is-in), html.js[data-motion="noscroll"] .bullet:not(.is-in) { opacity: 0; transform: translate3d(-14px, 0, 0); }
.bullet.is-in { opacity: 1; transform: none; transition: transform 0.5s var(--ease-back), opacity 0.3s ease-out; }
@media (max-width: 759px) { .chapter--all .stage { grid-template-rows: 1fr; grid-template-areas: "words"; align-items: start; } .chapter--all .chapter__phone { display: none; } .chapter--all .bullet { font-size: 0.8rem; line-height: 1.25; } .chapter--all .bullets__col { gap: 3px; } .chapter--all .chapter__title { margin-bottom: 8px; } }
html:not(.js) .chapter--all .chapter__phone, html[data-motion="off"] .chapter--all .chapter__phone { display: grid; }

/* the transformations (F80 §3): the programme's two word groups share one place; the labels follow the phase */
.chapter--plan { --len: 6; } .chapter--wishes { --len: 4; }
.chapter--plan .chapter__words { display: grid; }
.morph__words { grid-area: 1 / 1; }
.morph__words--2 { opacity: 0; }
html:not(.js) .morph__words--2, html[data-motion="off"] .morph__words--2 { opacity: 1; margin-top: 28px; }
html:not(.js) .chapter--plan .chapter__words, html[data-motion="off"] .chapter--plan .chapter__words { display: block; }
.morph__labels { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; font: 500 0.95rem/1.3 var(--ui); }
.morph__labels li { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); background: var(--paper); transition: color 0.3s, border-color 0.3s, background-color 0.3s; }
.morph__labels li.is-on { color: #fff; background: var(--accent); border-color: var(--accent); }
html:not(.js) .morph__labels li, html[data-motion="off"] .morph__labels li { color: #fff; background: var(--accent); border-color: var(--accent); }

/* ---------- the ending (F80 §7): the three designs overlap, then the brand and the last button ---------- */
.ending { position: relative; max-width: 1120px; margin: 0 auto; padding: 90px var(--gutter) 70px; display: grid; gap: 28px; justify-items: center; text-align: center; }
.covers { position: relative; width: min(100%, 560px); height: min(52svh, 420px); }
.covers { perspective: 1200px; }
.cover { position: absolute; left: 50%; top: 0; width: 34%; height: auto; margin-left: -17%; border-radius: 14px; border: 6px solid #1f1c18; box-shadow: 0 30px 50px -26px rgba(46, 42, 36, 0.7); transform-origin: 50% 100%; will-change: transform, opacity; }
html.js[data-motion="all"] .cover, html.js[data-motion="noscroll"] .cover { opacity: 0; }
html:not(.js) .cover, html[data-motion="off"] .cover { opacity: 1; transform-origin: 50% 50%; }
html:not(.js) .cover--wedding, html[data-motion="off"] .cover--wedding { transform: translate3d(-96%, 10%, 0) rotate(-9deg); }
html:not(.js) .cover--baptism, html[data-motion="off"] .cover--baptism { transform: none; z-index: 2; }
html:not(.js) .cover--party, html[data-motion="off"] .cover--party { transform: translate3d(96%, 10%, 0) rotate(9deg); }
.ending__words { display: grid; justify-items: center; }
html.js[data-motion="all"] .ending .closing__text, html.js[data-motion="all"] .ending .closing__brand, html.js[data-motion="all"] .ending .closing__actions,
html.js[data-motion="noscroll"] .ending .closing__text, html.js[data-motion="noscroll"] .ending .closing__brand, html.js[data-motion="noscroll"] .ending .closing__actions { opacity: 0; }
.chapter--how { --len: 4; }
.steps--story { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 18px 0 0; max-width: 520px; }
.steps--story .step { display: grid; gap: 4px; justify-items: start; text-align: left; padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); will-change: transform, opacity; }
.steps--story .step__title { margin: 0; font: 400 1.15rem/1.25 var(--serif); }
.steps--story .step p { margin: 0; max-width: none; font-size: 0.92rem; }
html.js[data-motion="all"] .steps--story .step:not(.is-in), html.js[data-motion="noscroll"] .steps--story .step:not(.is-in) { opacity: 0; transform: translate3d(0, 24px, 0); }
.steps--story .step.is-in { opacity: 1; transform: none; transition: transform 0.6s var(--ease-back), opacity 0.4s ease-out; }
/* narrow screens keep the phone (F88-02): kicker, title and lead across, then the phone at the left with the steps
   beside it, shown one at a time (one cell) so the end of the invitation and the third step arrive together */
@media (max-width: 759px) {
  .chapter--how .stage { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto auto 1fr; grid-template-areas: "kicker kicker" "title title" "lead lead" "phone steps"; align-items: start; align-content: start; justify-items: stretch; gap: 4px 14px; }
  .chapter--how .chapter__words { display: contents; }
  .chapter--how .kicker { grid-area: kicker; }
  .chapter--how .chapter__title { grid-area: title; }
  .chapter--how .themes__line { grid-area: lead; }
  .chapter--how .chapter__phone { grid-area: phone; justify-items: start; align-self: center; margin-top: 12px; }
  .chapter--how .steps--story { grid-area: steps; align-self: center; margin: 12px 0 0; gap: 10px; max-width: none; }
  .steps--story .step { padding: 10px 12px; } .steps--story .step p { font-size: 0.82rem; } .steps--story .step__title { font-size: 1rem; }
  html.js[data-motion="all"] .chapter--how .steps--story .step, html.js[data-motion="noscroll"] .chapter--how .steps--story .step { grid-area: 1 / 1; }
  html.js[data-motion="all"] .chapter--how .steps--story .step:not(.is-now), html.js[data-motion="noscroll"] .chapter--how .steps--story .step:not(.is-now) { opacity: 0; transform: translate3d(0, 24px, 0); pointer-events: none; }
}


/* ---------- the closing/* ---------- the closing: the swatches, how it works, the only buttons, the contacts ---------- */
.closing { max-width: 1120px; margin: 0 auto; padding: 80px var(--gutter) 64px; text-align: center; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; }
.closing__text { margin: 6px 0 0; max-width: 56ch; color: var(--muted); }
.closing__brand { display: grid; justify-items: center; gap: 6px; margin: 36px 0 0; }
.closing__logo { display: block; width: min(300px, 70vw); height: auto; }
.closing__brand span:last-child { color: var(--muted); font: 400 1.05rem/1.4 var(--text); }
.lead-block { display: grid; justify-items: center; padding-top: 0; }
.lead-block .contact__links { margin-top: 22px; }
.closing > * { max-width: 100%; }
.closing .chapter__title { max-width: min(22ch, 100%); }
.swatches { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 14px; width: min(100%, 760px); }
.swatch { display: grid; justify-items: center; gap: 4px; width: 72px; font: 500 0.72rem/1.2 var(--ui); color: var(--muted); }
.swatch__art { width: 44px; height: 44px; display: block; transition: transform 0.25s var(--ease-out); }
.swatch:hover .swatch__art { transform: scale(1.12); }
.steps { list-style: none; margin: 44px auto 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 18px; width: min(100%, 980px); }
.step { display: grid; justify-items: center; gap: 6px; text-align: center; }
.step__num { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--gold); color: var(--gold-ink); font: 400 1.3rem/1 var(--serif); }
.step__title { margin: 6px 0 0; font: 400 1.3rem/1.25 var(--serif); }
.step p { margin: 0; max-width: 32ch; color: var(--muted); }
.closing__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 40px 0 0; }
.closing__lead { margin: 28px 0 10px; color: var(--muted); }
.lead { width: min(100%, 640px); margin: 0; padding: 26px 22px 22px; border: 1px solid var(--line); border-radius: 22px; background: var(--paper); text-align: left; }
.lead__title { margin: 0 0 6px; font: 400 1.9rem/1.2 var(--serif); text-align: center; }
.lead__lead { margin: 0 0 18px; color: var(--muted); text-align: center; font-size: 1rem; }
.lead__grid { display: grid; gap: 12px; }
[hidden] { display: none !important; } /* the author rules above would beat the UA's hidden (the request form after a send, review 89-01) */
@media (min-width: 560px) { .lead__grid { grid-template-columns: 1fr 1fr; } .field--wide { grid-column: 1 / -1; } }
.field { display: grid; gap: 4px; font: 500 0.85rem/1.3 var(--ui); color: var(--muted); }
.input { width: 100%; min-height: 44px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); font: 400 1rem/1.4 var(--ui); }
textarea.input { resize: vertical; min-height: 84px; }
.lead__hp { position: absolute; left: -9999px; top: 0; }
.lead__error { margin: 10px 0 0; min-height: 1.2em; color: #8a2f2f; font: 500 0.9rem/1.4 var(--ui); text-align: center; }
.lead .closing__actions { margin-top: 10px; }
.lead__done { margin: 16px 0 0; text-align: center; font: 400 1.25rem/1.3 var(--serif); color: var(--accent-ink); }
.lead__note { margin: 12px 0 0; text-align: center; font: 400 0.8rem/1.4 var(--ui); color: var(--muted); }
.contact__links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
html.js[data-motion="all"] [data-pop=list] > *, html.js[data-motion="noscroll"] [data-pop=list] > * { opacity: 0; }

/* the questions */
.block { max-width: 1120px; margin: 0 auto; padding: 56px var(--gutter); }
.block--tint { max-width: none; background: var(--tint); }
.block--tint > * { max-width: 1080px; margin-left: auto; margin-right: auto; }
.block__title { margin: 0 0 22px; text-align: center; font: 400 clamp(1.8rem, 5vw, 2.5rem)/1.15 var(--serif); }
.faq { display: grid; gap: 10px; max-width: 760px; }
.faq__item { border: 1px solid var(--line); border-radius: 14px; background: var(--paper); }
.faq__item summary { cursor: pointer; padding: 14px 18px; font: 500 1rem/1.4 var(--ui); list-style-position: inside; }
.faq__item p { margin: 0; padding: 0 18px 16px; color: var(--muted); }

/* footer */
.bottom { padding: 28px var(--gutter) 40px; border-top: 1px solid var(--line); text-align: center; font: 400 0.9rem/1.5 var(--ui); color: var(--muted); }
.bottom p { margin: 0; }
.bottom__brand b { font: 400 1.15rem/1.2 var(--serif); color: var(--ink); }
.bottom__small { margin-top: 6px !important; font-size: 0.8rem; }
.bottom a { color: var(--muted); }
.to-top { display: inline-flex; align-items: center; gap: 12px; margin-top: 26px; padding: 8px 20px 8px 8px; border: 1px solid var(--gold); border-radius: 999px; background: linear-gradient(180deg, var(--paper), var(--tint)); color: var(--ink); text-decoration: none; font: 500 0.8rem/1 var(--ui); letter-spacing: 0.14em; text-transform: uppercase; box-shadow: 0 10px 24px -16px rgba(46, 42, 36, 0.5); transition: transform 0.3s var(--ease-out), box-shadow 0.3s; }
.to-top__ring { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--seal-hi), var(--seal)); color: var(--seal-ink); box-shadow: inset 0 0 0 2px rgba(232, 212, 154, 0.35); }
.to-top svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.3s var(--ease-out); }
.to-top:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -16px rgba(46, 42, 36, 0.55); }
.to-top:hover svg { transform: translateY(-2px); }
/* the curtain of a far jump (F88-01): above the header, never in the way */
.curtain { position: fixed; inset: 0; z-index: 30; background: var(--bg); opacity: 0; pointer-events: none; }

/* ---------- the still page (round 124): «Χωρίς κίνηση» in the panel, reduced motion, or no script. Each chapter is one
   screen: its words, and its pictures in a row beside them (from 1100 px) or under them; nothing pinned, nothing over the
   words. The samples: the words above, the seven openings in a row (each its opening's own frame, SAMPLES `still`). ---------- */
:is(html:not(.js), html[data-motion="off"]) .trav .stage { --phone-h: min(44svh, 300px); }
:is(html:not(.js), html[data-motion="off"]) .trav .chapter__phone { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px; max-width: 680px; }
:is(html:not(.js), html[data-motion="off"]) .slot__after, :is(html:not(.js), html[data-motion="off"]) .phone--hosts, :is(html:not(.js), html[data-motion="off"]) .qr, :is(html:not(.js), html[data-motion="off"]) .book { margin: 0; }
:is(html:not(.js), html[data-motion="off"]) .phone--hosts { position: relative; inset: auto; width: calc(var(--phone-h) * 0.462); height: var(--phone-h); border-width: 9px; } /* its picture's anchor (it covered the row); no offsets */
:is(html:not(.js), html[data-motion="off"]) .qr { width: calc(var(--phone-h) * 0.571); }
:is(html:not(.js), html[data-motion="off"]) .book { order: 1; width: calc(var(--phone-h) * 0.538); }
:is(html:not(.js), html[data-motion="off"]) .wishes { order: 2; flex-basis: 100%; margin: 4px 0 0; }
:is(html:not(.js), html[data-motion="off"]) .fan__card img { height: auto; aspect-ratio: 300 / 649; }
@media (min-width: 760px) {
  :is(html:not(.js), html[data-motion="off"]) .trav .stage { --phone-h: min(62svh, 460px); grid-template-columns: minmax(0, 1fr); grid-template-areas: "words" "phone"; padding: 72px var(--gutter); gap: 36px; }
  :is(html:not(.js), html[data-motion="off"]) .trav--flip .chapter__words { justify-self: center; }
  :is(html:not(.js), html[data-motion="off"]) .chapter--answers .chapter__phone { margin-left: 0; }
  :is(html:not(.js), html[data-motion="off"]) .wishes { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 640px; }
  :is(html:not(.js), html[data-motion="off"]) .samples .stage { grid-template-columns: minmax(0, 1fr); grid-template-areas: "words" "phone"; text-align: center; gap: 36px; padding: 80px var(--gutter); }
  :is(html:not(.js), html[data-motion="off"]) .samples .chapter__phone { width: 100%; }
  :is(html:not(.js), html[data-motion="off"]) .fan { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; max-width: 640px; margin: 0 auto; }
}
@media (min-width: 1100px) {
  :is(html:not(.js), html[data-motion="off"]) .trav .stage { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "words phone"; gap: 48px; }
  :is(html:not(.js), html[data-motion="off"]) .trav--flip .stage { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "phone words"; }
  :is(html:not(.js), html[data-motion="off"]) .trav--flip .chapter__words { justify-self: start; }
  :is(html:not(.js), html[data-motion="off"]) .fan { grid-template-columns: repeat(7, minmax(0, 1fr)); max-width: 1080px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .phone__poster, .swatch__art { transition: none; }
  .hero__cue svg, .veil .seal { animation: none; }
}