/* ==========================================================================
   Maison — Noir (the "Black And White" design). Loaded after invitation.css.

   The Canva design is a website: one narrow column (335 units of a 1366 unit page) of
   typewriter text on warm white, with pinstripes, a brush script and red ink sketches.
   Sizes are in design units: --u is how many CSS pixels one design pixel is worth.
     · phones:   the column fills the screen less a 20px margin each side
     · tablets:  the column stays at 1.15px a unit (385px), centred
     · desktops: the whole 1366 unit page fits the width, as Canva shows it
   The timeline is the one wider piece (580 units), so it has its own unit, --tu, that
   shrinks it to fit a phone. The envelope covers the screen (--es, like a cover image).
   Text never shrinks below a readable minimum; sections grow when they need room.
   ========================================================================== */

.inv--noir {
  --noir-bg: #F1EFE9;
  --noir-ink: #272514;
  --noir-line: #CCC9C2;
  --noir-btn: #231F20;
  --noir-btn-text: #F1EFEB;
  --noir-muted: rgba(39, 37, 20, 0.66);
  --noir-mono: 'Roboto Mono', 'IBM Plex Sans Arabic', ui-monospace, monospace;
  --noir-script: 'Damion', 'Aref Ruqaa', cursive;
  --inv-bg: var(--noir-bg);
  --inv-ink: var(--noir-ink);
  --inv-muted: var(--noir-muted);
  --inv-accent: var(--noir-ink);
  --inv-soft: #E7E4DC;
  --inv-line: var(--noir-line);
  --inv-font-ui: var(--noir-mono);
  --u: max(min(calc((100vw - 40px) / 335), 1.15px), calc(100vw / 1366));
  --tu: min(var(--u), calc((100vw - 12px) / 580));
  --es: max(calc(100vw / 1366), calc(100vh / 768));
  --label: max(calc(10.7 * var(--u)), 11px);
  background: var(--noir-bg);
  color: var(--noir-ink);
  font-family: var(--noir-mono);
  font-size: var(--label);
  line-height: 1.4;
}
@supports (height: 100svh) {
  .inv--noir { --es: max(calc(100vw / 1366), calc(100svh / 768)); }
}
.inv--noir[lang='ar'] {
  --noir-mono: 'IBM Plex Sans Arabic', 'Roboto Mono', sans-serif;
  --noir-script: 'Aref Ruqaa', 'Damion', serif;
  --label: max(calc(12.5 * var(--u)), 13px);
  line-height: 1.7;
}
@media (min-width: 700px) {
  .inv.inv--noir { background: var(--noir-bg); }
}
body.inv-body--noir { background: #F1EFE9; }
.inv--noir :focus-visible { outline: 1.5px solid var(--noir-ink); outline-offset: 3px; }
:where(.inv--noir) :is(p, h1, h2, h3, dl, dd, ol, ul, fieldset) { margin: 0; }
.inv--noir [hidden] { display: none !important; }
.inv--noir .inv-controls { inset-inline-end: max(14px, env(safe-area-inset-right)); }
.inv--noir .inv-pill { background: rgba(241, 239, 233, 0.9); color: var(--noir-ink); border-color: rgba(39, 37, 20, 0.35); font-family: var(--noir-mono); text-transform: uppercase; }
.noir-vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------------------------------ type and layout */
.noir-page { position: relative; }
.noir-col { width: calc(335 * var(--u)); max-width: calc(100vw - 32px); margin-inline: auto; }
.noir-sec { padding-block: calc(40 * var(--u)); }
.noir-label {
  font-size: var(--label);
  font-weight: 400;
  line-height: 1.4;
  text-transform: uppercase;
}
.noir-title {
  font-size: max(calc(33.3 * var(--u)), 26px);
  font-weight: 700;
  line-height: 1.4;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.noir-rule { margin: calc(22 * var(--u)) 0 calc(26 * var(--u)); border: 0; border-block-start: 1px solid var(--noir-line); }
.inv--noir[lang='ar'] :is(.noir-label, .noir-title, .noir-hero__when, .noir-gifts__text, .noir-box, .noir-submit, .noir-chip) { text-transform: none; letter-spacing: 0; }

/* The pinstripes: 1px lines about every 7 units, snapped to whole pixels so they stay crisp. */
.noir-hero, .noir-frame {
  --stripe-gap: calc(6.92 * var(--u));
  --stripes: repeating-linear-gradient(90deg, var(--noir-ink) 0 1px, transparent 1px var(--stripe-gap));
}
@supports (width: round(1.5px, 1px)) {
  .noir-hero { --stripe-gap: round(calc(6.92 * var(--u)), 1px); }
  .noir-frame { --stripe-gap: round(calc(5.2 * var(--u)), 1px); }
}

/* ------------------------------------------------------------------ 1 · envelope
   The 1366 × 768 photo of the envelope covers the screen, in two pieces cut from it: the pocket (with the V
   where the flap lies cut away) and the flap. They are cut in the images
   rather than with clip-path, which Chrome stops applying during the animation. The invitation is already
   behind it. Opening (the shared envelope timing in invitation.js: is-opening on tap, is-open at 1.65 s): the
   button fades, the flap lifts on its fold and swings open towards the guest, the names show through the
   opening, then the pocket slides down off the screen. Nothing moves the camera: it all happens in place. */
.noir-gate {
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow: hidden;
  background: #EAE7E0;
  transition: opacity 0.5s ease, visibility 0s linear 0.5s;
}
.inv-embed .noir-gate,
.inv-skip-envelope .noir-gate { transition: none; }
.inv-embed .noir-gate,
.inv-skip-envelope .noir-gate,
.inv.is-open .noir-gate { opacity: 0; visibility: hidden; pointer-events: none; }
html:not(.js) .noir-gate { display: none; }
/* Once opening, the invitation behind shows through wherever the envelope is not. */
.inv.is-opening .noir-gate { background: transparent; pointer-events: none; }
.noir-gate__open {
  position: absolute;
  inset: 0;
  cursor: pointer;
  outline: none;
  direction: ltr;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}
.noir-gate__open:focus-visible .noir-gate__button { outline: 1.5px solid var(--noir-btn-text); outline-offset: -5px; }
.noir-gate__scene {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(1366 * var(--es));
  height: calc(768 * var(--es));
  transform: translate(-50%, -50%);
  perspective: calc(2800 * var(--es));
  perspective-origin: 50% 0;
}
.noir-gate__pocket,
.noir-gate__flap,
.noir-gate__shade { position: absolute; inset: 0; }
.noir-gate__pocket { z-index: 1; background-size: 100% 100%; background-repeat: no-repeat; filter: drop-shadow(0 calc(-3 * var(--es)) calc(9 * var(--es)) rgba(39, 37, 20, 0.2)); }
/* The flap hinges on the top edge of the screen, so once it passes upright it is out of sight: one face is enough. */
.noir-gate__flap {
  z-index: 2;
  transform-origin: 50% 0;
  background-position: 50% 0;
  background-size: 100% auto;
  background-repeat: no-repeat;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
/* The striped face darkens a little as it tilts away from the light; the shading follows the flap's shape. */
.noir-gate__shade {
  opacity: 0;
  background: linear-gradient(0deg, rgba(39, 37, 20, 0.4), rgba(39, 37, 20, 0.06));
  -webkit-mask-position: 50% 0;
  mask-position: 50% 0;
  -webkit-mask-size: 100% auto;
  mask-size: 100% auto;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.noir-gate__button {
  position: absolute;
  z-index: 3;
  left: 42.97%;
  top: 83.44%;
  width: 14.06%;
  height: 6.56%;
  display: grid;
  place-items: center;
  background: var(--noir-btn);
  color: var(--noir-btn-text);
  font-family: var(--noir-mono);
  font-size: max(calc(8.9 * var(--es)), 11px);
  text-transform: uppercase;
  white-space: nowrap;
  transition: opacity 0.3s ease, background-color 0.2s ease;
}
.inv[lang='ar'] .noir-gate__button { font-size: max(calc(11 * var(--es)), 14px); }
@media (hover: hover) {
  .noir-gate__open:hover .noir-gate__button { background: #000; }
}
.inv.is-opening .noir-gate__button { opacity: 0; }
.inv.is-opening .noir-gate__flap { animation: noir-flap-open 0.95s cubic-bezier(0.4, 0, 0.35, 1) 0.1s both; }
.inv.is-opening .noir-gate__shade { animation: noir-flap-shade 0.95s cubic-bezier(0.4, 0, 0.35, 1) 0.1s both; }
.inv.is-opening .noir-gate__pocket { animation: noir-pocket-down 0.75s cubic-bezier(0.5, 0, 0.75, 0.5) 0.88s both; }
@keyframes noir-flap-open {
  from { transform: rotateX(0deg); }
  to { transform: rotateX(92deg); }
}
@keyframes noir-flap-shade {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes noir-pocket-down {
  from { transform: translateY(0); }
  to { transform: translateY(102%); }
}

/* ------------------------------------------------------------------ 2 · hero
   Everything from the date to the RSVP sketch is the first screen, whatever its size. The hero sizes itself in
   --hu: the usual design unit when the screen is tall enough, otherwise whatever lets the content (about
   --hero-units tall, plus the fixed padding) fit the height of the screen with the browser bars showing. The
   column keeps its full width; only the type, drawings and gaps shrink. The content is centred in the screen. */
.noir-hero {
  --hero-top: 32px;
  --hero-bottom: 16px;
  --hero-units: 615;
  --hu: min(var(--u), calc((100vh - var(--hero-top) - var(--hero-bottom) - 12px) / var(--hero-units)));
  --label: max(calc(10.7 * var(--hu)), 8px);
  display: flex;
  justify-content: center;
  min-height: 100vh;
  background: var(--stripes) center top / var(--stripe-gap) 100% repeat-x, var(--noir-bg);
  font-size: var(--label);
}
@supports (height: 100svh) {
  .noir-hero {
    --hu: min(var(--u), calc((100svh - var(--hero-top) - var(--hero-bottom) - 12px) / var(--hero-units)));
    min-height: 100svh;
  }
}
.inv--noir[lang='ar'] .noir-hero { --hero-units: 655; --label: max(calc(12.5 * var(--hu)), 9px); }
/* The plain card between the two panels of stripes (503 of the 1366 units). Phones have no room for the
   panels, so there the card is the whole width and the stripes are left out. Where the column reaches the
   language button (narrow screens), the content starts below it. */
.noir-hero__card {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(503 * var(--u));
  background: var(--noir-bg);
}
@media (max-width: 699px) {
  .noir-hero { background: var(--noir-bg); }
  .noir-hero__card { width: 100%; }
}
@media (max-width: 619px) {
  .noir-hero { --hero-top: 64px; }
}
/* Phones on their side: the type may go a little smaller so it all still fits. */
@media (max-height: 440px) {
  .noir-hero { --hero-units: 660; --label: max(calc(10.7 * var(--hu)), 7px); }
  .inv--noir[lang='ar'] .noir-hero { --hero-units: 740; --label: max(calc(12.5 * var(--hu)), 8px); }
  .noir-hero .noir-names > span { font-size: max(calc(var(--name-size) * var(--hu)), 14px); }
  .noir-hero .noir-names .noir-names__and { font-size: max(calc(40 * var(--hu)), 11px); }
  .noir-hero .noir-hero__place { font-size: max(calc(33.3 * var(--hu)), 12px); }
  .noir-hero .noir-hero__rsvp { font-size: max(calc(9.3 * var(--hu)), 7px); }
}
.noir-hero__card > .noir-col {
  display: flex;
  flex-direction: column;
  padding-block: var(--hero-top) var(--hero-bottom);
}
.noir-hero__when { display: flex; justify-content: space-between; gap: 12px; text-transform: uppercase; }
.noir-hero__when b { font-weight: 700; }
.noir-hero__note { margin-block-start: calc(6 * var(--hu)); color: var(--noir-muted); }
.noir-hero__join { margin-block-start: calc(26 * var(--hu)); }
.noir-names {
  --name-size: 66.5;
  display: grid;
  justify-items: center;
  margin-block: calc(34 * var(--hu)) calc(42 * var(--hu));
  font-family: var(--noir-script);
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
}
.noir-names > span { display: block; max-width: 100%; transform: rotate(-12deg); overflow-wrap: anywhere; }
.noir-names__one, .noir-names__two { font-size: max(calc(var(--name-size) * var(--hu)), 18px); }
.noir-names__one { font-size: max(calc(min(var(--name-size), 64.9) * var(--hu)), 18px); }
.noir-names__and { margin-block-start: calc(-5 * var(--hu)); font-size: max(calc(49.6 * var(--hu)), 14px); }
.noir-names__two { margin-block-start: calc(-24 * var(--hu)); }
.inv--noir[lang='ar'] .noir-names { line-height: 1.35; }
.inv--noir[lang='ar'] .noir-names > span { transform: rotate(-6deg); }
.inv--noir[lang='ar'] .noir-names__and { margin-block: calc(-26 * var(--hu)) calc(-22 * var(--hu)); font-size: max(calc(40 * var(--hu)), 13px); }
.inv--noir[lang='ar'] .noir-names__two { margin-block-start: 0; }
.noir-hero__sketches {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: calc(316 * var(--u));
  max-width: 100%;
  margin-inline: auto;
  direction: ltr;
}
.noir-hero__sketches img { width: auto; height: calc(var(--h) * var(--hu)); }
.noir-hero__place {
  margin-block-start: calc(16 * var(--hu));
  padding-block: calc(14 * var(--hu)) calc(8 * var(--hu));
  border-block: 1px solid var(--noir-line);
  font-size: max(calc(33.3 * var(--hu)), 14px);
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.noir-hero__rsvp {
  display: grid;
  justify-items: center;
  gap: calc(12 * var(--hu));
  align-self: center;
  margin-block-start: calc(22 * var(--hu));
  padding: 6px 12px;
  font-size: max(calc(9.3 * var(--hu)), 8px);
  text-decoration: none;
  text-transform: uppercase;
}
.noir-hero__rsvp img { width: calc(67 * var(--hu)); height: auto; transition: transform 0.4s ease; }
.noir-hero__rsvp:hover img { transform: translateY(-3px) rotate(-3deg); }
.noir-hero__rsvp:hover span { text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------------------------ 3 · countdown and photos */
.noir-countdown__cells {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(9.5 * var(--u));
  margin-block-start: calc(22 * var(--u));
}
.noir-countdown__cells > div { display: flex; flex-direction: column; align-items: center; border-block-start: 1px solid var(--noir-line); }
.noir-countdown__cells dd {
  order: 1;
  margin: calc(16 * var(--u)) 0 calc(2 * var(--u));
  font-size: max(calc(33.3 * var(--u)), 26px);
  font-weight: 700;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}
.noir-countdown__cells dt { order: 2; font-size: var(--label); text-transform: uppercase; }
.inv--noir[lang='ar'] .noir-countdown__cells dt { text-transform: none; }
.noir-countdown__done { margin-block-start: calc(33 * var(--u)); font-size: max(calc(33.3 * var(--u)), 26px); font-weight: 700; text-transform: uppercase; }

/* The couple's photos drift slowly across the page, endlessly (the set repeats; the track moves by half). */
/* A window three photos wide in the middle of the screen, on every screen size; photos fade in at one edge and
   out at the other. */
.noir-strip {
  width: min(calc(3 * 123.2 * var(--u)), 100%);
  margin: calc(36 * var(--u)) auto 0;
  overflow: hidden;
  direction: ltr;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}
.noir-strip__track { display: flex; width: max-content; animation: noir-drift calc(var(--count, 12) * 4.5s) linear infinite; }
[dir='rtl'] .noir-strip__track { animation-name: noir-drift-back; }
.noir-strip:hover .noir-strip__track,
.noir-strip.is-paused .noir-strip__track,
.noir-strip.is-offscreen .noir-strip__track { animation-play-state: paused; }
@keyframes noir-drift { to { transform: translateX(-50%); } }
@keyframes noir-drift-back { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.noir-strip__set { display: flex; padding: 0; list-style: none; }
.noir-strip__item { flex: none; width: calc(123.2 * var(--u)); padding: calc(5.15 * var(--u)); }
.noir-strip__item img { width: 100%; height: auto; aspect-ratio: 112.9 / 136.2; object-fit: cover; background: #DAD6CE; }
.noir-strip__controls { display: flex; justify-content: flex-end; margin-block-start: calc(10 * var(--u)); }
.noir-strip__pause {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--noir-line);
  color: var(--noir-ink);
}
.noir-strip__pause svg { width: 10px; height: 10px; }
.noir-strip__pause .noir-strip__i-play,
.noir-strip__pause[aria-pressed='true'] .noir-strip__i-pause { display: none; }
.noir-strip__pause[aria-pressed='true'] .noir-strip__i-play { display: inline; }
html:not(.js) .noir-strip__controls { display: none; }

/* ------------------------------------------------------------------ 4 · details */
.noir-details .noir-rule:first-of-type { margin-block-end: calc(16 * var(--u)); }
.noir-event > .noir-rule { margin-block: calc(16 * var(--u)) calc(18 * var(--u)); }
.noir-event > .noir-rule:last-child { margin-block: calc(28 * var(--u)) calc(16 * var(--u)); }
.noir-event:last-child > .noir-rule:last-child { margin-block-end: 0; }
.noir-event__art { width: 100%; height: auto; }
.noir-event__art--house { width: calc(320 * var(--u)); max-width: 100%; margin-inline: auto; }
.noir-event__venue {
  margin-block-start: calc(14 * var(--u));
  font-size: max(calc(33.3 * var(--u)), 26px);
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.noir-event__place { margin-block-start: calc(12 * var(--u)); }
.noir-event__date { margin-block-start: calc(4 * var(--u)); }
.noir-event__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(6 * var(--u)) calc(19 * var(--u));
  margin-block-start: calc(16 * var(--u));
  text-transform: uppercase;
}
.inv--noir[lang='ar'] .noir-event__links { text-transform: none; }
.noir-event__links > *,
.noir-event__links a { display: inline-flex; align-items: center; gap: calc(5 * var(--u)); }
.noir-event__links a { min-height: 32px; text-decoration: none; }
.noir-event__links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.noir-ico { flex: none; width: max(calc(12.7 * var(--u)), 13px); height: max(calc(12.7 * var(--u)), 13px); }
.noir-cal { position: relative; }
.noir-cal__menu {
  position: absolute;
  z-index: 5;
  inset-block-start: calc(100% + 4px);
  inset-inline-start: 0;
  display: grid;
  min-width: 220px;
  padding: 4px;
  border: 1px solid var(--noir-ink);
  background: var(--noir-bg);
  box-shadow: 0 16px 30px -18px rgba(39, 37, 20, 0.45);
}
.noir-cal__menu > :is(a, button) { padding: 11px 12px; font-size: var(--label); text-align: start; text-decoration: none; text-transform: inherit; }
.noir-cal__menu > :is(a, button):hover { background: var(--inv-soft); }
@media (max-width: 420px) {
  .noir-cal__menu { inset-inline-start: auto; inset-inline-end: 0; }
}

/* ------------------------------------------------------------------ 5 · timeline */
.noir-timeline .noir-rule { margin-block-end: calc(12 * var(--u)); }
.noir-tl {
  position: relative;
  width: calc(580 * var(--tu));
  height: calc(var(--frame-h) * var(--tu));
  margin-inline: auto;
}
.noir-tl__arrow {
  position: absolute;
  inset-inline-start: calc(181 * var(--tu));
  top: calc(122.7 * var(--tu));
  width: calc(244 * var(--tu));
  height: calc(var(--arrow-h) * var(--tu));
  overflow: visible;
}
[dir='rtl'] .noir-tl__arrow { transform: scaleX(-1); }
.noir-tl__pen { fill: none; stroke: #fff; stroke-width: 76; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.noir-tl__list { padding: 0; list-style: none; }
.noir-moment {
  position: absolute;
  inset-inline-start: calc((var(--x) - 65) * var(--tu));
  top: calc(var(--y) * var(--tu));
  display: grid;
  justify-items: center;
  width: calc(150 * var(--tu));
  text-align: center;
}
.noir-moment__art { display: flex; align-items: flex-end; justify-content: center; height: calc(80 * var(--tu)); }
.noir-moment__art img { width: auto; height: calc(var(--h) * var(--tu)); }
.noir-moment__label { margin-block-start: calc(8 * var(--tu)); font-size: max(calc(10.7 * var(--tu)), 10px); }
.inv--noir[lang='ar'] .noir-moment__label { font-size: max(calc(12.5 * var(--tu)), 12px); }
.noir-moment__time { font-size: max(calc(9.5 * var(--tu)), 9.5px); color: var(--noir-muted); }
/* While the pen is still above a moment it waits; it fades in, top to bottom, as the arrow reaches it. */
.noir-tl.is-armed .noir-moment { opacity: 0; clip-path: inset(0 0 100% 0); }
.noir-tl.is-armed .noir-moment.is-in {
  opacity: 1;
  clip-path: inset(0 0 -2px 0);
  transition: opacity 0.6s ease, clip-path 0.9s cubic-bezier(0.3, 0.6, 0.3, 1);
}

/* ------------------------------------------------------------------ 6 · dress code */
.noir-dress__art { width: calc(105.7 * var(--u)); height: auto; margin-inline-start: calc(5 * var(--u)); }
.noir-dress__code { margin-block-start: calc(16 * var(--u)); padding-inline-start: calc(5 * var(--u)); }
.noir-dress__label { margin-block-start: calc(16 * var(--u)); }
.noir-dress__buttons { display: flex; flex-wrap: wrap; gap: calc(24 * var(--u)); margin-block-start: calc(16 * var(--u)); padding-inline-start: calc(5 * var(--u)); }
.noir-box {
  display: grid;
  place-items: center;
  min-width: calc(131 * var(--u));
  min-height: max(calc(54 * var(--u)), 44px);
  padding-inline: 12px;
  border: 1px solid rgba(39, 37, 20, 0.42);
  font-size: max(calc(13.3 * var(--u)), 13px);
  text-decoration: none;
  text-transform: uppercase;
  transition: border-color 0.2s, background-color 0.2s;
}
.noir-box:hover { border-color: var(--noir-ink); background: rgba(39, 37, 20, 0.04); }

.noir-gallery {
  width: min(560px, calc(100vw - 24px));
  max-width: none;
  max-height: calc(100vh - 24px);
  padding: 16px;
  border: 1px solid var(--noir-ink);
  background: var(--noir-bg);
  color: var(--noir-ink);
  font-family: var(--noir-mono);
  font-size: var(--label);
}
.noir-gallery::backdrop { background: rgba(39, 37, 20, 0.62); }
.noir-gallery__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-block-end: 12px; }
.noir-gallery__close, .noir-gallery__step { display: grid; place-items: center; width: 44px; height: 44px; }
.noir-gallery__close svg, .noir-gallery__step svg { width: 16px; height: 16px; }
[dir='rtl'] .noir-gallery__step svg { transform: scaleX(-1); }
.noir-gallery__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 0;
  list-style: none;
  overscroll-behavior-x: contain;
}
.noir-gallery__track::-webkit-scrollbar { display: none; }
.noir-gallery__item { flex: 0 0 100%; scroll-snap-align: center; }
.noir-gallery__item img { width: 100%; height: auto; max-height: calc(100vh - 170px); aspect-ratio: 3 / 4; object-fit: contain; background: #E4E1DA; }
.noir-gallery__nav { display: flex; align-items: center; justify-content: space-between; margin-block-start: 8px; }

/* ------------------------------------------------------------------ 7 · gifts */
.noir-gifts__text p {
  font-size: max(calc(18.7 * var(--u)), 16px);
  font-weight: 700;
  line-height: 1.4;
  text-align: justify;
  text-transform: uppercase;
}
.noir-gifts__text p + p { margin-block-start: 0.6em; }
.inv--noir[lang='ar'] .noir-gifts__text p { line-height: 1.8; }

/* ------------------------------------------------------------------ 8 · RSVP */
.noir-rsvp__by { margin-block: calc(-10 * var(--u)) calc(18 * var(--u)); color: var(--noir-muted); }
.noir-frame {
  margin-inline: calc(-6 * var(--u));
  padding: calc(17 * var(--u)) calc(17 * var(--u)) calc(24 * var(--u));
  background: var(--stripes) 0 0 / var(--stripe-gap) 100% repeat-x;
}
.noir-frame__panel { padding: calc(16 * var(--u)) calc(16 * var(--u)) calc(22 * var(--u)); background: var(--noir-bg); }
.noir-field { margin-block-start: calc(22 * var(--u)); padding: 0; border: 0; min-inline-size: 0; }
.noir-frame__panel > div.noir-field:first-of-type { margin-block-start: 0; }
.noir-field > label, .noir-field legend, .noir-field__label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  font-size: var(--label);
  text-transform: uppercase;
}
.inv--noir[lang='ar'] :is(.noir-field > label, .noir-field legend, .noir-field__label, .noir-choice label) { text-transform: none; }
.noir-field input[type='text'], .noir-field input[type='email'] {
  width: 100%;
  margin-block-start: 6px;
  padding: 8px 0;
  border: 0;
  border-block-end: 1px solid var(--noir-ink);
  border-radius: 0;
  background: transparent;
  color: var(--noir-ink);
  font: 400 max(calc(13 * var(--u)), 16px) / 1.4 var(--noir-mono);
}
.noir-field textarea {
  display: block;
  width: 100%;
  min-height: calc(113 * var(--u));
  margin-block-start: calc(16 * var(--u));
  padding: 10px;
  border: 1px solid rgba(39, 37, 20, 0.7);
  border-radius: 0;
  background: transparent;
  color: var(--noir-ink);
  font: 400 max(calc(13 * var(--u)), 16px) / 1.5 var(--noir-mono);
  resize: vertical;
}
.noir-field :is(input, textarea):focus { outline: none; border-color: var(--noir-ink); box-shadow: 0 1px 0 var(--noir-ink); }
.noir-choice legend { margin-block-end: calc(12 * var(--u)); }
.noir-choice label {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(14 * var(--u));
  min-height: 32px;
  font-size: var(--label);
  text-transform: uppercase;
  cursor: pointer;
}
.noir-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.noir-choice__mark {
  position: relative;
  flex: none;
  width: max(calc(15 * var(--u)), 15px);
  height: max(calc(15 * var(--u)), 15px);
  border: 1.4px solid var(--noir-ink);
  border-radius: 50%;
}
.noir-choice__mark::after {
  content: '';
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  background: var(--noir-ink);
  transform: scale(0);
  transition: transform 0.18s ease;
}
.noir-choice input:checked + .noir-choice__mark::after { transform: scale(1); }
.noir-choice input:focus-visible + .noir-choice__mark { outline: 1.5px solid var(--noir-ink); outline-offset: 3px; }
.noir-choice--box .noir-choice__mark { border-width: 1px; border-radius: 0; }
.noir-choice--box .noir-choice__mark::after { inset: 18%; border-radius: 0; }
.noir-party__icon { width: max(calc(19 * var(--u)), 19px); height: auto; }
.noir-stepper {
  display: inline-grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: max(calc(117 * var(--u)), 120px);
  height: max(calc(48 * var(--u)), 44px);
  margin-block-start: calc(14 * var(--u));
  border: 1px solid rgba(39, 37, 20, 0.5);
  direction: ltr;
}
.noir-stepper__btn { height: 100%; font-size: max(calc(13 * var(--u)), 14px); }
.noir-stepper__btn[aria-disabled='true'] { opacity: 0.3; cursor: default; }
.noir-stepper__value { min-width: 2ch; text-align: center; font-size: var(--label); }
.noir-rsvp__attending[hidden] { display: none !important; }
.noir-submit {
  display: grid;
  place-items: center;
  width: calc(230 * var(--u));
  min-width: 200px;
  min-height: max(calc(60 * var(--u)), 48px);
  margin: calc(29 * var(--u)) auto 0;
  padding-inline: 16px;
  border: 0;
  background: var(--noir-btn);
  color: var(--noir-btn-text);
  font-size: var(--label);
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s;
}
.noir-submit:hover { background: #000; }
.noir-submit:focus-visible { outline-offset: 3px; }
.noir-rsvp__thanks, .noir-rsvp__error { margin-block-start: calc(24 * var(--u)); font-size: max(calc(13.3 * var(--u)), 14px); text-transform: uppercase; text-align: center; }
.inv--noir[lang='ar'] .noir-rsvp__thanks { text-transform: none; }

/* ------------------------------------------------------------------ footer */
.noir-footer { display: grid; justify-items: center; gap: 16px; padding: 8px 16px 40px; text-align: center; }
.noir-footer__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.noir-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid rgba(39, 37, 20, 0.42);
  font-size: var(--label);
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.2s;
}
.noir-chip:hover { border-color: var(--noir-ink); }
.noir-chip .noir-ico { width: 14px; height: 14px; }
.noir-footer .inv-calendar__menu,
[dir='rtl'] .noir-footer .inv-calendar__menu {
  inset-block-start: auto;
  inset-block-end: calc(100% + 8px);
  inset-inline-start: 0;
  translate: none;
  max-width: calc(100vw - 32px);
  border-radius: 0;
  border-color: var(--noir-ink);
}
.inv--noir .inv-calendar__menu :is(a, button) { border-radius: 0; font-family: var(--noir-mono); }
.inv--noir .inv-footer__credit { font-family: var(--noir-mono); font-size: 0.72rem; letter-spacing: 0; text-transform: uppercase; color: var(--noir-ink); opacity: 0.8; }

/* ------------------------------------------------------------------ motion */
@media (prefers-reduced-motion: reduce) {
  .noir-gate__button { transition: none; }
  .inv.is-opening .noir-gate__flap,
  .inv.is-opening .noir-gate__shade,
  .inv.is-opening .noir-gate__pocket { animation: none; }
  .inv.is-opening .noir-gate { opacity: 0; background: #EAE7E0; }
  .noir-strip { overflow-x: auto; }
  .noir-strip__track { animation: none; }
  .noir-strip__controls { display: none; }
  .noir-tl.is-armed .noir-moment { opacity: 1; clip-path: none; }
}