/* «فرح» launch page. Two halls, one wall. */

:root {
  /* Bride's hall: oxblood velvet */
  --w-ground: #14070c;
  --w-surface: #260a13;
  --w-ink: #f3e7d7;
  --w-soft: #cdb3a2;
  /* Groom's hall: deep emerald */
  --m-ground: #07110d;
  --m-surface: #0a1d16;
  --m-ink: #eef0e6;
  --m-soft: #a9bbaf;
  /* The one accent: champagne gold */
  --lamp: #e3c68e;
  --lamp-deep: #b08a50;
  --lamp-ink: #1a1208;
  --gold: linear-gradient(135deg, #8e6b37 0%, #e8cf98 38%, #f7e6bc 52%, #b8904f 72%, #7e5d2e 100%);
  /* The invitation paper (an object, not a ground) */
  --paper: #f4ecdd;
  --paper-ink: #2a0d16;
  --paper-soft: #7a5e52;
  --paper-gold: #84622c; /* printed gold that still reads on the card's ivory */

  --display: "Aref Ruqaa", "Readex Pro", serif;
  --text: "Readex Pro", system-ui, sans-serif;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;
  --section: clamp(72px, 12vh, 160px);
  --outer: clamp(20px, 6vw, 104px);
  --inner: clamp(22px, 4.2vw, 76px);
  --radius: 10px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --shadow: 0 12px 28px -10px rgb(3 2 2 / 0.7), 0 2px 5px rgb(3 2 2 / 0.4);
  --hairline: rgb(227 198 142 / 0.28);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--w-ground); color: var(--w-ink); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--text);
  font-size: 1.0625rem;
  line-height: 1.75;
  letter-spacing: 0.005em;
  overflow-x: hidden;
}
::selection { background: var(--lamp); color: var(--lamp-ink); }
input { caret-color: var(--lamp); }
:focus-visible { outline: 2px solid var(--lamp); outline-offset: 3px; border-radius: 4px; }
html { scrollbar-color: color-mix(in srgb, var(--lamp) 55%, transparent) var(--m-ground); }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

/* ---------- grounds ---------- */
.grounds { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.ground { position: absolute; inset-block: 0; }
.ground--w { inset-inline: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cpath d='M22 0L44 22L22 44L0 22Z M22 11L33 22L22 33L11 22Z' fill='none' stroke='%23e3c68e' stroke-opacity='.07' stroke-width='.8'/%3E%3C/svg%3E"), radial-gradient(90% 75% at 62% 8%, #3c1322 0%, #220b14 38%, var(--w-ground) 72%); }
.ground--m { left: 0; width: 50%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cpath d='M22 0L44 22L22 44L0 22Z M22 11L33 22L22 33L11 22Z' fill='none' stroke='%23e3c68e' stroke-opacity='.07' stroke-width='.8'/%3E%3C/svg%3E"), radial-gradient(90% 75% at 62% 8%, #143826 0%, #0b1d16 38%, var(--m-ground) 72%); transform-origin: 0 50%; }
.hushveil { position: absolute; inset: 0; background: #040203; opacity: 0; }
.grounds::after {
  content: ""; position: absolute; inset: 0; opacity: 0.08; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
main { position: relative; z-index: 1; }
.veil { position: fixed; inset: 0 0 auto; height: 112px; z-index: 25; pointer-events: none; opacity: 0; }
.veil__w, .veil__m { position: absolute; inset-block: 0; }
.veil__w { inset-inline: 0; background: linear-gradient(to bottom, #1c0a11 58%, rgb(28 10 17 / 0)); }
.veil__m { left: 0; width: 50%; background: linear-gradient(to bottom, #0b1914 58%, rgb(11 25 20 / 0)); transform-origin: 0 50%; }

/* ---------- the wall ---------- */
.wall { position: fixed; inset-block: 0; left: 50%; width: 0; z-index: 30; pointer-events: none; }
.wall__mark {
  position: absolute; top: 6px; left: 0; transform: translateX(-50%);
  font-family: var(--display); font-weight: 700; font-size: 1.7rem; line-height: 1.4; color: var(--lamp);
}
.wall__plates { position: absolute; top: 56px; left: 0; }
.plate {
  position: absolute; top: 0; display: flex; align-items: baseline; gap: 6px; white-space: nowrap;
  pointer-events: auto; font-size: 0.8125rem; letter-spacing: 0.02em;
}
.plate--w { left: 14px; color: var(--w-soft); }
.plate--m { right: 14px; color: var(--m-soft); }
.plate__input {
  font-family: var(--display); font-weight: 700; font-size: 1.25rem; line-height: 1.3;
  color: var(--w-ink); background: transparent; border: 0; padding: 0 2px;
  border-bottom: 1px dashed color-mix(in srgb, var(--lamp) 70%, transparent);
  width: 5.5em; field-sizing: content; min-width: 2.5em; max-width: 9em;
  transition: border-color 150ms var(--ease-out);
}
.plate--m .plate__input { color: var(--m-ink); }
.plate__input:hover { border-bottom-color: var(--lamp); }
.plate__input:focus-visible { outline-offset: 4px; }
.wall__line {
  position: absolute; top: 98px; bottom: 56px; left: -0.5px; width: 1px;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--lamp) 60%, transparent), color-mix(in srgb, var(--lamp) 18%, transparent));
  transform-origin: 50% 0;
}
.wall__lamp {
  position: absolute; top: 0; left: -4.5px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 0 4px rgb(227 198 142 / 0.16), 0 6px 18px rgb(176 138 80 / 0.55);
}
.wall__note {
  position: absolute; bottom: 14px; left: 0; transform: translateX(-50%); white-space: nowrap;
  font-size: 0.75rem; letter-spacing: 0.03em; color: var(--lamp);
  background: rgb(5 3 4 / 0.72); padding: 4px 14px; border-radius: var(--radius); border: 1px solid var(--hairline);
}

/* ---------- shared type ---------- */
.h2 {
  font-family: var(--display); font-weight: 700; font-size: clamp(1.9rem, 3.3vw, 3.3rem);
  line-height: 1.25; letter-spacing: 0; text-wrap: balance;
}
.lede { margin-top: var(--s4); max-width: 34ch; font-size: 1.0625rem; text-wrap: pretty; }
.col--w { color: var(--w-ink); }
.col--m { color: var(--m-ink); }
.col--w .lede, .col--w .count { color: var(--w-soft); }
.col--m .lede, .col--m .count { color: var(--m-soft); }

.split { display: grid; grid-template-columns: 1fr 1fr; }
.col--w { padding-inline: var(--outer) var(--inner); }
.col--m { padding-inline: var(--inner) var(--outer); }
.act:not(.act--hero):not(.act--zaffa):not(.hush) { padding-block: var(--section); }

/* ---------- buttons ---------- */
.cta, .ghost {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px;
  padding: 0 26px; border-radius: var(--radius); font: 600 1rem/1 var(--text); white-space: nowrap;
  text-decoration: none; cursor: pointer;
  transition: transform 140ms var(--ease-out), background-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.cta {
  background: var(--gold); color: var(--lamp-ink); border: 0;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.5), inset 0 -1px 0 rgb(60 40 10 / 0.35), var(--shadow);
}
.ghost { background: transparent; color: var(--lamp); border: 1px solid rgb(227 198 142 / 0.5); }
@media (hover: hover) and (pointer: fine) {
  .cta:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.6), inset 0 -1px 0 rgb(60 40 10 / 0.35), 0 16px 32px -10px rgb(3 2 2 / 0.75), 0 0 0 1px rgb(247 230 188 / 0.35); }
  .ghost:hover { background: rgb(227 198 142 / 0.08); border-color: rgb(227 198 142 / 0.8); }
}
.cta:active, .ghost:active { transform: scale(0.97); }

/* ---------- 1. hero ---------- */
.hero { position: relative; height: 100vh; height: 100svh; overflow: hidden; }
.half { position: absolute; inset-block: 0; width: 50%; overflow: hidden; }
.half--w { right: 0; background: var(--w-surface); }
.half--m { left: 0; background: var(--m-surface); }
.film { position: absolute; inset: 0; background: #0b0606; }
.film__poster, .film__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.film__poster { object-fit: cover; }
/* Match the canvas framing so the hand-off from poster to sequence does not jump. */
.half--w .film__poster { object-position: 50% 51%; transform: scale(1.08); transform-origin: 50% 57%; }
.half--m .film__poster { object-position: 50% 34%; }
.film__canvas { opacity: 0; transition: opacity 400ms var(--ease-out); }
.film.has-film .film__canvas { opacity: 1; }
/* Density only where the copy sits: a band across the top of each hall. */
.half__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, rgb(10 4 6 / 0.88) 0%, rgb(10 4 6 / 0.62) 24%, rgb(10 4 6 / 0) 46%),
    radial-gradient(130% 95% at 50% 60%, transparent 55%, rgb(4 2 2 / 0.55) 100%);
}
/* Out-of-focus lights between the viewer and the door: the nearest plane. */
.half__bokeh {
  position: absolute; inset: -10% -10% auto; height: 70%; pointer-events: none; filter: blur(10px); opacity: 0.55;
  background:
    radial-gradient(closest-side, rgb(255 226 170 / 0.45), transparent) 8% 70% / 90px 90px no-repeat,
    radial-gradient(closest-side, rgb(255 226 170 / 0.35), transparent) 88% 40% / 120px 120px no-repeat,
    radial-gradient(closest-side, rgb(255 226 170 / 0.3), transparent) 60% 92% / 70px 70px no-repeat;
}

.hero__title {
  position: absolute; z-index: 3; top: clamp(96px, 13vh, 150px); inset-inline: 0;
  display: grid; grid-template-columns: 1fr 1fr;
  font-family: var(--display); font-weight: 700; font-size: clamp(2.3rem, 4.5vw, 4.6rem); line-height: 1.15;
  text-shadow: 0 2px 18px rgb(3 2 2 / 0.55);
}
.hero__w { color: var(--w-ink); text-align: left; padding-left: var(--inner); }
.hero__m { color: var(--m-ink); text-align: right; padding-right: var(--inner); }
.hero__sub {
  position: absolute; z-index: 3; top: clamp(196px, 25.5vh, 262px); right: var(--outer);
  width: min(30ch, calc(50% - var(--outer) - var(--inner)));
  color: var(--w-ink); font-size: 1.0625rem; line-height: 1.7; text-wrap: pretty;
  text-shadow: 0 1px 12px rgb(3 2 2 / 0.8);
}
.hero__cta { position: absolute; z-index: 3; top: clamp(200px, 26vh, 268px); left: var(--outer); }

/* ---------- 2. lists ---------- */
.count { margin-top: var(--s2); font-size: 0.9375rem; }
.count__n { font-family: var(--display); font-weight: 700; font-size: 2.1rem; color: var(--lamp); margin-inline-end: 6px; font-variant-numeric: tabular-nums; }
.tags { display: flex; flex-wrap: wrap; gap: 14px 12px; margin-top: var(--s6); max-width: 30rem; }
.tags li {
  position: relative; padding: 7px 16px 7px 14px; padding-inline-start: 26px; border-radius: 8px;
  background: var(--paper); color: var(--paper-ink); font-size: 0.9375rem; font-weight: 500; line-height: 1.5;
  box-shadow: inset 0 0 0 1px rgb(176 138 80 / 0.55), inset 0 1px 0 rgb(255 255 255 / 0.7), var(--shadow);
}
.tags li::before {
  content: ""; position: absolute; inset-inline-start: 10px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px;
  border-radius: 50%; background: var(--gold); box-shadow: inset 0 0 0 1px rgb(60 40 10 / 0.4);
}

/* ---------- lit panels ---------- */
.checks, .exhibits {
  position: relative; padding: var(--s3) var(--s6); border-radius: 14px;
  background: linear-gradient(180deg, rgb(255 236 200 / 0.07), rgb(255 236 200 / 0.015) 70%);
  border: 1px solid var(--hairline);
  box-shadow: inset 0 1px 0 rgb(255 240 210 / 0.12), 0 30px 60px -30px rgb(2 1 1 / 0.8);
}

/* ---------- sample numbers ---------- */
.sample {
  display: inline-block; margin-inline-start: 6px; padding: 1px 8px; border-radius: 999px; vertical-align: middle;
  font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.02em; color: var(--lamp);
  border: 1px solid rgb(227 198 142 / 0.4); background: rgb(227 198 142 / 0.06);
}
.budget { margin-top: var(--s5); max-width: 30rem; }
.budget__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); font-size: 0.9375rem; }
.budget__row b { font-family: var(--display); font-size: 1.5rem; color: var(--lamp); font-weight: 700; }
.budget__bar { height: 6px; margin-top: var(--s2); border-radius: 999px; background: rgb(255 240 210 / 0.08); overflow: hidden; }
.budget__bar i { display: block; height: 100%; background: var(--gold); transform-origin: 100% 50%; transform: scaleX(var(--v)); }
.budget__meta { margin-top: var(--s2); font-size: 0.8125rem; opacity: 0.8; font-variant-numeric: tabular-nums; }
.stat { margin-top: var(--s3); font-size: 0.9375rem; opacity: 0.85; }
.stat b { font-family: var(--display); font-size: 1.7rem; color: var(--lamp); margin-inline-end: 4px; }
.exhibit__meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 2px; font-size: 0.875rem; }
.exhibit__meta b { color: var(--lamp); font-weight: 600; }
.exhibit__meta span { opacity: 0.75; }

/* ---------- 3. plan ---------- */
.checks { margin-top: var(--s6); max-width: 30rem; }
.checks li:last-child { border-bottom: 0; }
.checks li {
  display: flex; align-items: center; gap: var(--s3); padding: 12px 0;
  border-bottom: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}
.checks li::before {
  content: ""; flex: none; width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, currentColor 55%, transparent);
}
.checks li.done::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3L15 6.5' fill='none' stroke='%231e1206' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat, var(--gold);
  border-color: #c9a464;
}
.checks li.done span { opacity: 0.6; text-decoration: line-through; text-decoration-thickness: 1px; }
.checks time { margin-inline-start: auto; font-size: 0.875rem; opacity: 0.75; font-variant-numeric: tabular-nums; }

/* ---------- 4. labels ---------- */
.exhibits { margin-top: var(--s7); max-width: 30rem; }
.exhibit:first-child { border-top: 0; }
.exhibit {
  display: grid; grid-template-columns: 104px 1fr; align-items: start; column-gap: var(--s5); row-gap: 2px; padding: var(--s5) 0;
  border-top: 1px solid color-mix(in srgb, currentColor 16%, transparent);
}
.exhibit > .exhibit__img { grid-row: 1 / span 3; grid-column: 1; }
.exhibit > :not(.exhibit__img) { grid-column: 2; }
.exhibit__img {
  width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 8px;
  box-shadow: inset 0 0 0 1px var(--hairline), 0 12px 24px -12px rgb(2 1 1 / 0.8);
}
.exhibit h3 { font-family: var(--display); font-size: 1.6rem; line-height: 1.3; }
.col--w .exhibit p { color: var(--w-soft); }
.col--m .exhibit p { color: var(--m-soft); }
.exhibit p { font-size: 0.96875rem; line-height: 1.7; }

/* ---------- 5. routes ---------- */
.routes__copy .h2 { font-size: clamp(1.7rem, 2.8vw, 2.8rem); }
.routes__copy .col--w { text-align: left; }
.routes__copy .col--m { text-align: right; }
.routes__art { margin: var(--s6) auto 0; width: min(1120px, 100%); padding-inline: var(--s4); }
.routes__svg { display: block; width: 100%; height: auto; overflow: visible; }
.route { fill: none; stroke: var(--lamp); stroke-width: 2.5; stroke-linecap: round; }
.route--j { stroke-width: 3.5; }
.routes__dish {
  display: block; width: min(300px, 46vw); height: auto; aspect-ratio: 1; object-fit: cover; margin: -6px auto 0; border-radius: 50%;
  box-shadow: 0 0 0 1px rgb(227 198 142 / 0.6), 0 0 0 10px rgb(227 198 142 / 0.06), 0 40px 80px -30px rgb(2 1 1 / 0.9);
}
.routes__note {
  margin: var(--s6) auto 0; max-width: 46ch; padding-inline: var(--s4); text-align: center;
  font-size: 0.875rem; color: var(--lamp);
}

/* ---------- 6. hush ---------- */
.hush { height: 55vh; }

/* ---------- 7. zaffa ---------- */
.zaffa { position: relative; height: 100vh; height: 100svh; overflow: hidden; color: var(--w-ink); }
.zaffa::before {
  content: ""; position: absolute; inset: 0; opacity: var(--bloom, 0);
  background: radial-gradient(40% 55% at 26% 52%, rgb(246 207 142 / 0.42), rgb(176 112 60 / 0.14) 45%, transparent 72%);
}
.procession { position: absolute; inset: 0; pointer-events: none; }
.procession i {
  position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #ffe6b5;
  box-shadow: 0 0 0 6px rgb(255 230 181 / 0.1), 0 0 22px 6px rgb(233 176 106 / 0.35);
}
.zaffa__photo {
  position: absolute; inset-block: 0; right: 0; width: 58%; height: 100%; object-fit: cover; object-position: 70% 40%;
  -webkit-mask-image: linear-gradient(to left, #000 55%, transparent 100%); mask-image: linear-gradient(to left, #000 55%, transparent 100%);
}
.zaffa__names {
  position: absolute; left: 7vw; width: min(40vw, 520px); top: 50%; transform: translateY(-50%);
  text-shadow: 0 2px 22px rgb(4 2 2 / 0.8);
  display: flex; justify-content: center; align-items: baseline; gap: 0.35em;
  font-family: var(--display); font-weight: 700; font-size: clamp(2.6rem, 5vw, 5rem); line-height: 1.2; white-space: nowrap;
}
.zaffa__name { display: inline-block; }
.zaffa__amp { color: var(--lamp); font-size: 0.5em; }
.zaffa__first, .zaffa__last {
  position: absolute; font-family: var(--display); font-weight: 700; line-height: 1.2;
}
.zaffa__first { left: 8vw; top: 18vh; font-size: clamp(2rem, 3.6vw, 3.6rem); color: var(--m-ink); }
.zaffa__last { left: 7vw; bottom: 14vh; font-size: clamp(2.2rem, 4.4vw, 4.4rem); color: var(--w-ink); }

/* ---------- 8. close ---------- */
.close {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center;
  gap: var(--s8); padding-inline: var(--outer); min-height: 100vh; color: var(--w-ink);
}
/* The printed card is a photo of gold foil on cotton paper; the words sit inside its arch,
   sized to the card (cqw) so the downloaded PNG can copy the page's layout exactly. */
.card {
  position: relative; justify-self: center; width: min(440px, 100%); aspect-ratio: 1744 / 2336;
  container-type: inline-size; text-align: center; letter-spacing: 0; border-radius: 3px;
  background: #ddd4c4; color: var(--paper-ink);
  box-shadow: 0 40px 80px -24px rgb(2 1 1 / 0.85), 0 10px 20px rgb(2 1 1 / 0.4);
  rotate: -2deg;
}
.card__paper { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; }
.card p { position: absolute; inset-inline: 15%; top: var(--y); translate: 0 -50%; margin: 0; line-height: 1.3; white-space: nowrap; }
.card__basmala { --y: 30%; font-family: var(--display); font-size: 4.8cqw; color: var(--paper-gold); }
.card__line { --y: 38.5%; font-size: 3.6cqw; color: var(--paper-soft); }
.card__names {
  --y: 51%; display: flex; justify-content: center; gap: 0.3em;
  font-family: var(--display); font-weight: 700; font-size: calc(12.5cqw * var(--fit, 1));
}
.card__amp { color: var(--paper-gold); }
.card__date { --y: 63.5%; font-size: 3.9cqw; font-weight: 500; }
.card__city { --y: 69.5%; font-size: 3.4cqw; color: var(--paper-soft); }
.card__close { --y: 84%; font-family: var(--display); font-size: 4.4cqw; color: var(--paper-gold); }
.close__title { font-size: clamp(2.2rem, 3.8vw, 3.8rem); }
.close__copy .lede { color: var(--w-soft); }
.fields { display: grid; grid-template-columns: repeat(3, minmax(0, max-content)); gap: var(--s3) var(--s4); margin-top: var(--s6); }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 0.8125rem; color: var(--w-soft); }
.field input {
  width: 10em; font: 500 1rem var(--text); color: var(--w-ink); background: rgb(255 255 255 / 0.04);
  border: 1px solid var(--hairline); border-radius: var(--radius); padding: 10px 14px; color-scheme: dark;
  transition: border-color 150ms var(--ease-out);
}
.field input:hover { border-color: rgb(227 198 142 / 0.55); }
.close__actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); }
.fine { margin-top: var(--s6); font-size: 0.8125rem; color: var(--w-soft); }

/* ---------- phones: two halls still side by side, recomposed ---------- */
@media (max-width: 700px) {
  body { font-size: 0.9375rem; }
  :root { --outer: 14px; --inner: 16px; --section: 72px; }
  .wall__mark { font-size: 1.35rem; }
  .wall__plates { top: 46px; }
  .plate { font-size: 0.6875rem; gap: 4px; }
  .plate--w { left: 8px; }
  .plate--m { right: 8px; }
  .plate__input { font-size: 1rem; }
  .wall__line { top: 84px; }
  .wall__note { font-size: 0.6875rem; }
  .veil { height: 96px; }
  .hero__title { top: 104px; font-size: 1.55rem; line-height: 1.3; }
  .hero__w { padding-left: 12px; }
  .hero__m { padding-right: 12px; }
  .hero__sub { top: 196px; right: 14px; width: calc(50% - 30px); font-size: 0.8125rem; line-height: 1.65; }
  .hero__cta { top: 204px; left: 14px; min-height: 44px; padding: 0 16px; font-size: 0.875rem; }
  .h2 { font-size: 1.35rem; line-height: 1.35; }
  .lede { font-size: 0.875rem; }
  .count__n { font-size: 1.6rem; }
  .tags { gap: 10px 6px; }
  .tags li { font-size: 0.75rem; padding: 5px 10px; padding-inline-start: 20px; }
  .tags li::before { inset-inline-start: 8px; width: 6px; height: 6px; margin-top: -3px; }
  .checks li { font-size: 0.8125rem; gap: 8px; flex-wrap: wrap; }
  .checks time { font-size: 0.6875rem; }
  .exhibit { grid-template-columns: 1fr; padding: var(--s4) 0; }
  .checks, .exhibits { padding: var(--s1) var(--s3); border-radius: 10px; }
  .exhibit > .exhibit__img { grid-row: auto; aspect-ratio: 4 / 3; margin-bottom: var(--s2); }
  .exhibit > :not(.exhibit__img) { grid-column: 1; }
  .exhibit h3 { font-size: 1.25rem; }
  .exhibit p { font-size: 0.8125rem; }
  .exhibit__meta { font-size: 0.75rem; }
  .budget__row { flex-direction: column; gap: 0; font-size: 0.75rem; }
  .budget__row b { font-size: 1.15rem; }
  .stat { font-size: 0.75rem; }
  .stat b { font-size: 1.3rem; }
  .sample { font-size: 0.625rem; padding: 0 6px; }
  .routes__copy .h2 { font-size: 1.2rem; }
  .zaffa__photo { width: 100%; opacity: 0.6; -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent 92%); mask-image: linear-gradient(to bottom, #000 40%, transparent 92%); }
  .zaffa__names { left: 6vw; width: 88vw; font-size: 2.3rem; }
  .zaffa__first { left: 6vw; top: 14vh; font-size: 1.7rem; }
  .zaffa__last { left: 6vw; bottom: 9vh; font-size: 1.9rem; }
  .close { grid-template-columns: 1fr; gap: var(--s7); padding-block: var(--s9); }
  .card { width: min(360px, 88vw); }
  .fields { grid-template-columns: 1fr 1fr; }
  .field input { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .cta, .ghost, .plate__input { transition: none; }
}

/* Reduced motion: the resolved composition, swapped by opacity only. */
.is-static .zaffa { --bloom: 1; }
.is-static .ground--m, .is-static .wall { transition: opacity 300ms var(--ease-out); }
.is-static .veil { opacity: 1; }
.is-static .veil__m { transition: opacity 300ms var(--ease-out); }
.is-static.merged .ground--m, .is-static.merged .wall, .is-static.merged .veil__m { opacity: 0; }