/* ==========================================================================
   مجتبى و نورالحياة — wedding invitation
   1. Tokens   2. Base   3. Shared pieces (pill, strip, write/reveal)
   4. Envelope   5. Intro (sleeve + strip)   6. Main page   7. Music button
   8. Motion prefs
   ========================================================================== */

/* 1. Tokens --------------------------------------------------------------- */
:root {
  --red: #a01222;
  --red-deep: #6d0b15;
  --wine: #35050a;
  --sleeve-inside: #3f070d;
  --cream: #f3ecdc;
  --paper-ink: #3b2620;
  --text: #f6ebe3;
  --text-soft: rgba(246, 235, 227, 0.72);
  --gold: #c9a45c;

  --font-body: "Amiri", "Times New Roman", serif;
  --font-display: "Gulzar", "Amiri", serif;
  --font-hand: "Aref Ruqaa", "Amiri", serif;

  --ease-paper: cubic-bezier(0.5, 0.02, 0.18, 1);
}

/* 2. Base ----------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  background: #000;
}

body {
  margin: 0;
  background: #000;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

/* While the envelope is up, anything outside it (overscroll, safe areas)
   is paper too, not black */
html.has-envelope,
html.has-envelope body {
  background: #f3f2ef;
}

/* "hidden" always wins, even over display:flex / grid */
[hidden] {
  display: none !important;
}

body.is-locked {
  overflow: hidden;
  height: 100vh;
  height: 100dvh;
}

p,
h1,
h2 {
  margin: 0;
  font-weight: 400;
}

img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

:focus-visible {
  outline: 2px solid var(--cream);
  outline-offset: 4px;
}

/* 3. Shared pieces -------------------------------------------------------- */

/* Pill button (enter, location, RSVP) */
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.3em 1.7em 0.5em;
  border: 1px solid rgba(246, 235, 227, 0.9);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font: 700 17px/1.5 var(--font-body);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.pill:hover,
.pill:focus-visible {
  background: var(--text);
  color: var(--red-deep);
}

.pill svg {
  width: 1.05em;
  height: 1.05em;
  flex: none;
  margin-top: 0.2em;
}

.pill--wide {
  min-width: 190px;
}

.pill[aria-disabled="true"] {
  cursor: default;
}

/* Photo-booth strip (used in the intro and in the hero; sized in em) */
.strip__frame {
  aspect-ratio: 5 / 4;
  overflow: hidden;
  background: #1a1a1a;
}

.strip__frame + .strip__frame {
  margin-top: 0.42em;
}

.strip__frame img {
  filter: grayscale(1) contrast(1.08) brightness(1.03);
}

.strip__caption {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 0.35em;
  color: #2a2222;
  font-size: 0.92em;
  line-height: 1.55;
}

/* Dates read day / month / year from the left, like 9/10/2026. Arabic digits
   would otherwise be reordered by the browser, so the order is pinned. */
.strip__date,
.card__date {
  direction: ltr;
  unicode-bidi: bidi-override;
}

.strip__date {
  font-size: 0.9em;
  opacity: 0.8;
}

/* "Being written" wipe, right to left. Arabic letters join, so lines are
   never typed character by character. */
.write {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  opacity: 0; /* hidden by opacity only: a clipped element never counts as "in view" */
}

.write.is-shown {
  animation: write 1.15s var(--ease-paper) forwards;
}

.write--slow.is-shown {
  animation-duration: 2.1s;
}

@keyframes write {
  from {
    opacity: 1;
    clip-path: inset(-40% -6% -40% 106%);
  }
  to {
    opacity: 1;
    clip-path: inset(-40% -6% -40% -6%);
  }
}

.reveal--fade {
  opacity: 0;
  transition: opacity 1.2s ease;
}

.reveal--fade.is-shown {
  opacity: 1;
}

/* 4. Envelope (scene 0) ---------------------------------------------------
   The whole screen is the back of an envelope: two side flaps, a bottom flap
   and a top flap over them, held by a wax seal. Each piece is a full-screen
   layer cut to shape, so the paper texture lines up across all of them. */
.envelope {
  --paper: #f3f2ef;
  --seal: min(40vw, 22vh, 172px);
  position: fixed;
  inset: 0;
  z-index: 20;
  overflow: hidden;
  perspective: 1500px;
  perspective-origin: 50% 30%;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Red lining, seen for a moment when the top flap lifts */
.envelope__lining {
  position: absolute;
  inset: 0;
  background: radial-gradient(90% 60% at 50% 26%, #93111f 0%, #5f0a13 58%, #35050a 100%);
  transition: opacity 1s ease 1.25s;
}

.envelope__piece {
  position: absolute;
  inset: 0;
  will-change: transform;
  transition: transform 1.15s var(--ease-paper) 1.2s;
}

.envelope__piece > i {
  position: absolute;
  inset: 0;
  background-color: var(--paper);
  background-image:
    var(--shade, none),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='460' height='460'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.42' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3  0 0 0 0 .28  0 0 0 0 .26  16 0 0 0 -11.6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .34  0 0 0 0 .31  0 0 0 0 .27  0 0 0 .6 -.22'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

.envelope__piece--left > i {
  --shade: linear-gradient(90deg, rgba(90, 80, 60, 0) 30%, rgba(90, 80, 60, 0.07) 100%);
  clip-path: polygon(0 0, 50% 49%, 0 100%);
}

.envelope__piece--right > i {
  --shade: linear-gradient(270deg, rgba(90, 80, 60, 0) 30%, rgba(90, 80, 60, 0.07) 100%);
  clip-path: polygon(100% 0, 50% 49%, 100% 100%);
}

.envelope__piece--bottom {
  filter: drop-shadow(0 -2px 5px rgba(70, 60, 45, 0.2));
}

.envelope__piece--bottom > i {
  --shade: linear-gradient(0deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 45%);
  clip-path: polygon(0 100%, 0 66%, 50% 49%, 100% 66%, 100% 100%);
}

.envelope__piece--top {
  transform-origin: 50% 0;
  backface-visibility: hidden;
  filter: drop-shadow(0 3px 7px rgba(70, 60, 45, 0.3));
  transition: transform 1.2s cubic-bezier(0.6, 0.04, 0.3, 1) 0.4s;
}

.envelope__piece--top > i {
  --shade: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 55%);
  clip-path: polygon(0 0, 100% 0, 100% 33%, 50% 49.6%, 0 33%);
}

/* Wax seal with the couple's initials */
.seal {
  position: absolute;
  top: 49%;
  left: 50%;
  width: var(--seal);
  height: var(--seal);
  margin: calc(var(--seal) / -2) 0 0 calc(var(--seal) / -2);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  filter: drop-shadow(0 5px 7px rgba(70, 50, 15, 0.38));
  transition: transform 0.6s cubic-bezier(0.3, 0.7, 0.3, 1), opacity 0.45s ease 0.12s;
  -webkit-tap-highlight-color: transparent;
}

.seal__body {
  position: absolute;
  inset: 0;
  animation: seal-breathe 3.2s ease-in-out infinite;
}

@keyframes seal-breathe {
  50% {
    transform: scale(1.035);
  }
}

.seal__wax {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.seal__monogram {
  position: absolute;
  top: 23%;
  left: 35%;
  width: 32%;
  height: 52%;
}

.seal__monogram i {
  position: absolute;
  inset: 0;
  -webkit-mask: url("../assets/initials/monogram-round.svg") center / contain no-repeat;
  mask: url("../assets/initials/monogram-round.svg") center / contain no-repeat;
}

/* raised lettering: shadow below-right, highlight above-left, body on top */
.seal__monogram i:nth-child(1) {
  background: #7b5d25;
  opacity: 0.75;
  transform: translate(1.3px, 1.5px);
}

.seal__monogram i:nth-child(2) {
  background: #fff6da;
  transform: translate(-1px, -1px);
}

.seal__monogram i:nth-child(3) {
  background: linear-gradient(150deg, #ead6a8 0%, #cfb27c 100%);
}

.envelope__hint {
  position: absolute;
  top: calc(49% + var(--seal) / 2 + 18px);
  left: 0;
  right: 0;
  text-align: center;
  font-size: 21px;
  color: var(--red-deep);
  opacity: 0;
  transition: opacity 0.8s ease;
}

.envelope.is-ready .envelope__hint {
  opacity: 1;
}

/* Opening: seal lifts away, top flap swings up, the other flaps part */
.envelope[data-state="open"] {
  cursor: default;
  pointer-events: none;
}

.envelope[data-state="open"] .seal {
  transform: scale(1.2);
  opacity: 0;
}

.envelope[data-state="open"] .envelope__hint {
  opacity: 0;
  transition-duration: 0.35s;
}

.envelope[data-state="open"] .envelope__piece--top {
  transform: rotateX(172deg);
}

.envelope[data-state="open"] .envelope__piece--left {
  transform: translateX(-103%);
}

.envelope[data-state="open"] .envelope__piece--right {
  transform: translateX(103%);
}

.envelope[data-state="open"] .envelope__piece--bottom {
  transform: translateY(103%);
}

.envelope[data-state="open"] .envelope__lining {
  opacity: 0;
}

/* 5. Intro ---------------------------------------------------------------- */
.intro {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  background: #000;
  transition: opacity 1.1s ease, visibility 0s linear 1.1s;
}

.intro[data-state="left"] {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* 1u = one design pixel of a 340 x 700 canvas, scaled to fit any screen */
.stage {
  --u: min(0.294vw, 0.143vh, 1.35px);
  position: relative;
  width: calc(340 * var(--u));
  height: calc(700 * var(--u));
}

@supports (height: 1dvh) {
  .stage {
    --u: min(0.294vw, 0.143dvh, 1.35px);
  }
}

.sleeve-wrap {
  position: absolute;
  top: calc(24 * var(--u));
  left: calc(80 * var(--u));
  width: calc(180 * var(--u));
  height: calc(270 * var(--u));
  opacity: 0;
  /* Shown 1.32x larger while closed so it fills a phone screen; it settles back
     to its real size when tapped, which leaves room for the strip below it. */
  transform-origin: 50% 0;
  transform: translateY(calc(30 * var(--u))) scale(1.27);
  transition: opacity 1.6s ease, transform 1.8s var(--ease-paper);
}

.intro.is-ready .sleeve-wrap {
  opacity: 1;
  transform: translateY(calc(30 * var(--u))) scale(1.32);
}

.intro.is-ready:not([data-state="closed"]) .sleeve-wrap {
  transform: none;
}

.sleeve-back {
  position: absolute;
  inset: calc(2 * var(--u));
  background: var(--sleeve-inside);
  box-shadow: inset 0 0 calc(18 * var(--u)) rgba(0, 0, 0, 0.7);
}

/* The strip lives in a clip box that starts at the sleeve's top edge, so the
   part that would poke out above the sleeve is simply never seen. */
.strip-clip {
  position: absolute;
  top: calc(3 * var(--u));
  left: calc(25 * var(--u));
  width: calc(130 * var(--u));
  height: calc(640 * var(--u));
  overflow: hidden;
  pointer-events: none;
}

.strip {
  position: absolute;
  top: 0;
  left: calc(3 * var(--u));
  width: calc(124 * var(--u));
  height: calc(332 * var(--u));
  padding: calc(6 * var(--u)) calc(6 * var(--u)) 0;
  background: #f8f5ee;
  font-size: calc(12 * var(--u));
  box-shadow: 0 calc(3 * var(--u)) calc(10 * var(--u)) rgba(0, 0, 0, 0.5);
  transform: translateY(calc(-69 * var(--u)));
  transition: transform 2.9s var(--ease-paper);
}

.intro[data-state="open"] .strip,
.intro[data-state="left"] .strip {
  transform: translateY(calc(245 * var(--u)));
}

/* The little picture that sits in the window until the strip is pulled */
.window-clip {
  position: absolute;
  inset: calc(3 * var(--u));
  overflow: hidden;
  pointer-events: none;
}

.window-photo {
  position: absolute;
  top: calc(172 * var(--u));
  left: calc(53 * var(--u));
  width: calc(68 * var(--u));
  height: calc(68 * var(--u));
  transition: transform 2.9s var(--ease-paper), opacity 0.5s ease 0.75s;
}

.window-photo img {
  filter: grayscale(1) contrast(1.05);
}

.intro[data-state="open"] .window-photo,
.intro[data-state="left"] .window-photo {
  transform: translateY(calc(314 * var(--u)));
  opacity: 0;
}

.sleeve {
  position: absolute;
  inset: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--cream);
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.intro:not([data-state="closed"]) .sleeve {
  cursor: default;
}

.sleeve__paper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Each monogram file already holds both initials, so only one is used per place */
.monogram {
  background: var(--cream);
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}

.monogram--tall {
  -webkit-mask-image: url("../assets/initials/monogram-tall.svg");
  mask-image: url("../assets/initials/monogram-tall.svg");
}

.monogram--round {
  -webkit-mask-image: url("../assets/initials/monogram-round.svg");
  mask-image: url("../assets/initials/monogram-round.svg");
}

.sleeve__art {
  position: absolute;
  top: calc(9 * var(--u));
  left: calc(52 * var(--u));
  width: calc(72 * var(--u));
  height: calc(140 * var(--u));
}

.sleeve__label {
  position: absolute;
  top: calc(151 * var(--u));
  left: 0;
  right: 0;
  text-align: center;
  font-size: calc(11.5 * var(--u));
  line-height: 1.6;
  color: rgba(243, 236, 220, 0.88);
}

.intro-text {
  position: absolute;
  top: calc(428 * var(--u));
  left: 0;
  right: 0;
  text-align: center;
  transition: opacity 0.7s ease;
}

.intro:not([data-state="closed"]) .intro-text {
  opacity: 0;
}

.intro-line {
  font-size: calc(19 * var(--u));
  line-height: 1.7;
}

.intro-names {
  margin-top: calc(2 * var(--u));
  font-family: var(--font-display);
  font-size: calc(36 * var(--u));
  line-height: 2;
}

.intro-hint {
  margin-top: calc(34 * var(--u));
  font-size: calc(13 * var(--u));
  color: var(--text-soft);
  opacity: 0;
  transition: opacity 1s ease;
}

.intro.has-hint .intro-hint {
  opacity: 1;
  animation: breathe 2.6s ease-in-out 1s infinite;
}

@keyframes breathe {
  50% {
    opacity: 0.35;
  }
}

.intro-enter {
  position: absolute;
  top: calc(626 * var(--u));
  left: 50%;
  transform: translateX(-50%);
  font-size: calc(16.5 * var(--u));
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1s ease, background-color 0.25s ease, color 0.25s ease;
}

.intro[data-state="open"] .intro-enter {
  opacity: 1;
  pointer-events: auto;
  transition-delay: 2.5s, 0s, 0s;
}

/* 6. Main page ------------------------------------------------------------ */
.main {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden; /* older Safari */
  overflow-x: clip;
  isolation: isolate; /* keeps the z-index:-1 layers above the black body */
  opacity: 0;
  transition: opacity 1.4s ease 0.2s;
}

.main.is-visible {
  opacity: 1;
}

/* Fixed layers so the glow and grain do not stretch with the page length */
.main::before,
.main::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.main::before {
  background:
    radial-gradient(120% 70% at 50% 18%, #8f101d 0%, #720c16 36%, #4c0810 72%, var(--wine) 100%);
}

.main::after {
  opacity: 0.16;
  mix-blend-mode: multiply;
  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%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.column {
  width: min(100%, 460px);
  margin-inline: auto;
  padding: 34px 24px calc(96px + env(safe-area-inset-bottom));
  text-align: center;
}

/* Hero: strip + invitation card + calla lilies */
.hero {
  position: relative;
  height: 28em;
  margin-bottom: 30px;
  font-size: clamp(9px, 2.67vw, 12.2px);
  direction: ltr;
}

.hero-strip {
  position: absolute;
  top: 1.6em;
  left: 1.2em;
  width: 10.6em;
  padding: 0.5em 0.5em 0.2em;
  background: #f8f5ee;
  transform: rotate(-4deg);
  box-shadow: 0 1em 1.8em rgba(0, 0, 0, 0.45);
  direction: rtl;
}

.card {
  position: absolute;
  top: 0.6em;
  right: 0.4em;
  width: 17.6em;
  height: 24.4em;
  padding: 7.4em 1.4em 0;
  background:
    linear-gradient(160deg, #faf5e9 0%, #efe6d2 100%);
  color: var(--paper-ink);
  transform: rotate(8deg);
  box-shadow: 0 1.2em 2.2em rgba(0, 0, 0, 0.5);
  direction: rtl;
}

.card::after {
  content: "";
  position: absolute;
  inset: 0.7em;
  border: 1px solid rgba(109, 11, 21, 0.28);
  pointer-events: none;
}

.card__stamp {
  position: absolute;
  top: 1.5em;
  left: 1.6em;
  width: 3.9em;
  height: 4.7em;
  background: var(--red);
  outline: 0.3em dotted #f5efe1;
  outline-offset: -0.17em;
  transform: rotate(-3deg);
}

.card__stamp-art {
  position: absolute;
  inset: 0.6em 0.75em;
}

/* printed in the card's bottom-right corner, in the same ink as the names */
.card__spray {
  position: absolute;
  right: 1em;
  bottom: 1em;
  width: 8.8em;
  background: var(--red-deep);
  opacity: 0.8;
}

.card__postmark {
  position: absolute;
  top: 2.3em;
  left: 4.6em;
  width: 6.4em;
  color: rgba(59, 38, 32, 0.4);
  transform: rotate(-7deg);
}

.card__kicker {
  font-size: 1.25em;
  line-height: 1.5;
  color: rgba(59, 38, 32, 0.75);
}

.card__names {
  font-family: var(--font-display);
  font-size: 2.05em;
  line-height: 2.1;
  color: var(--red-deep);
  white-space: nowrap;
}

.card__rule {
  display: block;
  width: 3.4em;
  height: 1px;
  margin: 0.5em auto 0.7em;
  background: var(--gold);
}

.card__date {
  font-size: 1.4em;
  line-height: 1.5;
}

.card__place {
  font-size: 1.1em;
  line-height: 1.7;
  color: rgba(59, 38, 32, 0.75);
}

.lily {
  position: absolute;
  top: 14.2em;
  left: 8.6em;
  width: 8.4em;
  overflow: visible;
  transform: rotate(52deg);
  filter: drop-shadow(0.5em 0.9em 0.7em rgba(0, 0, 0, 0.4));
}

/* The couple's own line-art flowers (assets/flowers). Each is a mask, so the
   same drawing can be printed in gold on the page or in ink on paper. */
.flower {
  display: block;
  background: var(--gold);
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}

.flower--garland {
  aspect-ratio: 552 / 150;
  -webkit-mask-image: url("../assets/flowers/garland.svg");
  mask-image: url("../assets/flowers/garland.svg");
}

.flower--spray {
  aspect-ratio: 330 / 308;
  -webkit-mask-image: url("../assets/flowers/spray.svg");
  mask-image: url("../assets/flowers/spray.svg");
}

.flower--roses {
  aspect-ratio: 290 / 242;
  -webkit-mask-image: url("../assets/flowers/roses.svg");
  mask-image: url("../assets/flowers/roses.svg");
}

.divider {
  width: 236px;
  margin: 40px auto 0;
}

/* Text blocks */
.block {
  margin-top: 44px;
}

.block > * + * {
  margin-top: 6px;
}

.line {
  font-size: 19px;
  line-height: 1.85;
}

.line--small {
  font-size: 16.5px;
  color: var(--text-soft);
}

.line--quiet {
  margin-top: 22px !important;
}

.display {
  font-family: var(--font-display);
  font-size: 42px;
  line-height: 2;
}

.block--verse {
  margin-top: 8px;
}

.basmala {
  font-size: 19px;
  color: var(--gold);
}

.verse {
  margin-top: 10px !important;
  font-size: 19px;
  line-height: 2.25;
  text-wrap: balance;
}

.verse-ref {
  font-size: 14.5px;
  color: var(--text-soft);
}

.block--place .pill {
  margin-top: 16px;
}

/* The invitation line and the venue sit inside the couple's floral frame,
   printed faintly so the words stay the loudest thing in it. The block takes
   the frame's own square shape, so its border never cuts through a line. */
.block--place {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 108%;
  margin: 34px -4% 0;
  aspect-ratio: 587 / 584;
}

.line--invite {
  margin-bottom: 18px;
}

.block--place::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--gold);
  opacity: 0.17;
  -webkit-mask: url("../assets/flowers/frame.svg") center / contain no-repeat;
  mask: url("../assets/flowers/frame.svg") center / contain no-repeat;
  pointer-events: none;
}

/* Countdown */
.block--countdown {
  margin-top: 52px;
}

.countdown {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 8px;
  margin-top: 8px !important;
  direction: rtl;
}

.cd {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 56px;
}

.cd__num {
  font-size: 42px;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}

.cd__label {
  font-size: 14px;
  line-height: 1.4;
  color: var(--text-soft);
}

.cd__sep {
  font-size: 30px;
  line-height: 1.6;
  opacity: 0.55;
}

.display--done {
  color: var(--gold);
}

/* "Our story" torn note */
.note {
  position: relative;
  width: min(94%, 318px);
  margin: 64px auto 0;
  transform: rotate(-1.6deg);
  filter: drop-shadow(0 16px 22px rgba(0, 0, 0, 0.5));
}

.note__paper {
  padding: 46px 24px 40px;
  background: linear-gradient(174deg, #f9f3e4 0%, #ebe0c8 100%);
  color: var(--paper-ink);
}

.note__pin {
  position: absolute;
  top: 4px;
  left: 50%;
  z-index: 2;
  width: 18px;
  height: 18px;
  margin-left: -9px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff4c9 0%, #d8ae4b 42%, #7c5b17 100%);
  box-shadow: 2px 6px 5px rgba(0, 0, 0, 0.38);
}

.note__title {
  font-family: var(--font-display);
  font-size: 34px;
  line-height: 1.9;
  color: var(--red-deep);
}

/* a small doodle under the last line, like the end of a handwritten letter */
.note__roses {
  width: 104px;
  margin: 18px auto 0;
  background: #6b3a2e;
  opacity: 0.75;
}

.note__body {
  margin-top: 6px;
  font-family: var(--font-hand);
  font-size: 17.5px;
  line-height: 2.05;
  text-align: justify;
  text-align-last: center;
}

/* RSVP + closing */
.block--rsvp {
  margin-top: 64px;
}

/* RSVP form: underlined name field, yes/no switch, guest counter */
.rsvp {
  display: grid;
  gap: 24px;
  width: min(100%, 300px);
  margin: 26px auto 0 !important;
}

.rsvp__label {
  display: block;
  margin-bottom: 4px;
  font-size: 15.5px;
  color: var(--text-soft);
}

.rsvp__input {
  width: 100%;
  padding: 4px 4px 8px;
  border: 0;
  border-bottom: 1px solid rgba(246, 235, 227, 0.55);
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font: 400 20px/1.6 var(--font-body); /* 16px+ so iPhones do not zoom in */
  text-align: center;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.rsvp__input::placeholder {
  color: rgba(246, 235, 227, 0.38);
}

.rsvp__input:focus {
  outline: none;
  border-bottom-color: var(--text);
  box-shadow: 0 1px 0 0 var(--text);
}

.rsvp__input[aria-invalid="true"] {
  border-bottom-color: #f6c9a4;
  box-shadow: 0 1px 0 0 #f6c9a4;
}

.rsvp__choice {
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  border: 1px solid rgba(246, 235, 227, 0.9);
  border-radius: 999px;
}

.choice {
  position: relative;
  cursor: pointer;
}

.choice input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.choice span {
  display: block;
  padding: 0.3em 0 0.5em;
  font: 700 17px/1.5 var(--font-body);
  transition: background-color 0.25s ease, color 0.25s ease;
}

.choice input:checked + span {
  background: var(--text);
  color: var(--red-deep);
}

.choice input:focus-visible + span {
  outline: 2px solid var(--cream);
  outline-offset: -5px;
}

.stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  direction: ltr; /* minus on the left, plus on the right, as on every phone */
}

.stepper__btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0 0 4px;
  border: 1px solid rgba(246, 235, 227, 0.9);
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  font: 400 26px/1 var(--font-body);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.stepper__btn:hover:not(:disabled) {
  background: var(--text);
  color: var(--red-deep);
}

.stepper__btn:disabled {
  opacity: 0.3;
  cursor: default;
}

.stepper__value {
  min-width: 58px;
  font-size: 42px;
  line-height: 1.25;
}

.rsvp__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.rsvp__error {
  min-height: 1.8em; /* reserved, so the button does not jump when a message appears */
  margin: -10px 0 -8px;
  font-size: 16px;
  line-height: 1.8;
  color: #f6c9a4;
}

.rsvp .pill[disabled] {
  opacity: 0.6;
  cursor: progress;
}

.rsvp-done {
  margin-top: 18px !important;
}

.rsvp-done:focus {
  outline: none;
}

.rsvp-done__calendar {
  display: flex;
  width: fit-content;
  margin: 18px auto 0;
}

.rsvp-done__title {
  font-size: 38px;
  color: var(--gold);
}

.textlink {
  margin-top: 14px;
  padding: 6px 10px;
  border: 0;
  background: none;
  color: var(--text-soft);
  font: 400 15.5px/1.6 var(--font-body);
  text-decoration: underline;
  text-underline-offset: 6px;
  cursor: pointer;
}

.textlink:hover {
  color: var(--text);
}

.block--closing {
  margin-top: 60px;
}

.display--signature {
  margin-top: 14px !important;
  font-size: 40px;
}

/* 7. Music button --------------------------------------------------------- */
.music {
  position: fixed;
  left: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 30; /* above the envelope and the intro: music starts with the first tap */
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(246, 235, 227, 0.7);
  border-radius: 50%;
  background: rgba(40, 4, 8, 0.55);
  color: var(--text);
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.music[hidden] {
  display: none;
}

.music svg {
  width: 22px;
  height: 22px;
}

.music[data-on="true"] .music__slash {
  display: none;
}

.music[data-on="false"] .music__note {
  opacity: 0.55;
}

/* 8. Motion preferences --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}

/* 9. English edition (/en/) ------------------------------------------------
   The same page, written left to right. Latin type sits smaller and tighter
   than Arabic, so the three fonts are swapped for Latin ones with the same
   roles (book serif, calligraphy, handwriting) and the tall Arabic
   line-heights are brought in. Nothing here touches the Arabic page. */
:root[lang="en"] {
  --font-body: "Cormorant Garamond", "Times New Roman", serif;
  --font-display: "Pinyon Script", "Cormorant Garamond", cursive;
  --font-hand: "Caveat", "Cormorant Garamond", cursive;
}

:root[lang="en"] body {
  font-size: 19px;
  font-weight: 500;
  line-height: 1.6;
}

/* Lines are written from the left */
:root[lang="en"] .write.is-shown {
  animation-name: write-ltr;
}

@keyframes write-ltr {
  from {
    opacity: 1;
    clip-path: inset(-40% 112% -40% -12%);
  }
  to {
    opacity: 1;
    clip-path: inset(-40% -12% -40% -12%);
  }
}

:root[lang="en"] .hero-strip,
:root[lang="en"] .card,
:root[lang="en"] .countdown {
  direction: ltr;
}

/* Intro */
:root[lang="en"] .sleeve__label {
  font-size: calc(12.5 * var(--u));
  letter-spacing: 0.05em;
}

:root[lang="en"] .intro-line {
  font-size: calc(20 * var(--u));
  line-height: 1.6;
}

/* the full names in one line, as in Arabic: the script is wide, so it is set smaller */
:root[lang="en"] .intro-names {
  margin-top: calc(10 * var(--u));
  font-size: calc(31 * var(--u));
  line-height: 1.5;
}

:root[lang="en"] .intro-hint {
  margin-top: calc(50 * var(--u)); /* keeps the hint where the Arabic page has it */
  font-size: calc(14 * var(--u));
}

/* Buttons: Latin letters sit in the middle of the line, Arabic ones hang lower */
:root[lang="en"] .pill {
  padding: 0.42em 1.7em;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 0.02em;
}

:root[lang="en"] .intro-enter {
  font-size: calc(17 * var(--u));
}

:root[lang="en"] .pill svg {
  margin-top: 0;
}

:root[lang="en"] .choice span {
  padding: 0.42em 0;
  font-weight: 600;
  font-size: 17.5px;
}

/* Hero card: the names stack on two lines, the way English invitations set them */
:root[lang="en"] .card {
  padding-top: 6.7em; /* two lines of names: start higher so the date stays clear of the lilies */
}

:root[lang="en"] .card__kicker {
  font-size: 1.3em;
  font-style: italic;
  line-height: 1.4;
}

:root[lang="en"] .card__names {
  margin: 0.1em 0 0.15em;
  font-size: 2.25em;
  line-height: 1.1;
  white-space: normal;
}

:root[lang="en"] .card__rule {
  margin: 0.4em auto 0.5em;
}

:root[lang="en"] .card__date {
  font-size: 1.35em;
}

:root[lang="en"] .card__place {
  font-size: 1.15em;
}

/* English lines on the card are wider: the lilies lie a little lower to stay off them */
:root[lang="en"] .lily {
  top: 15em;
  left: 8.5em;
  transform: rotate(57deg);
}

:root[lang="en"] .strip__caption {
  line-height: 1.35;
  padding-top: 0.5em;
}

/* Page text */
:root[lang="en"] .line {
  font-size: 21px;
  line-height: 1.55;
  text-wrap: balance; /* no single word left alone on a second line */
}

:root[lang="en"] .line--small {
  font-size: 18px;
}

:root[lang="en"] .display {
  font-size: 50px;
  line-height: 1.4;
}

:root[lang="en"] .basmala {
  font-size: 18.5px;
  line-height: 1.55;
  text-wrap: balance;
}

:root[lang="en"] .verse {
  margin-top: 14px !important;
  font-size: 20.5px;
  font-style: italic;
  line-height: 1.65;
}

:root[lang="en"] .verse-ref {
  margin-top: 10px;
  font-size: 15.5px;
  letter-spacing: 0.04em;
}

:root[lang="en"] .cd__num,
:root[lang="en"] .stepper__value {
  font-variant-numeric: lining-nums tabular-nums;
}

:root[lang="en"] .stepper__btn {
  padding-bottom: 5px;
  font-size: 32px; /* the Latin plus and minus are drawn smaller */
}

:root[lang="en"] .cd__label {
  font-size: 15px;
}

:root[lang="en"] .note__title {
  font-size: 42px;
  line-height: 1.35;
}

:root[lang="en"] .note__body {
  margin-top: 10px;
  font-size: 21px;
  line-height: 1.5;
  text-align: center;
}

:root[lang="en"] .rsvp__label {
  font-size: 17px;
}

:root[lang="en"] .rsvp__error {
  line-height: 1.4;
}

:root[lang="en"] .rsvp-done__title {
  font-size: 46px;
}

:root[lang="en"] .textlink {
  font-size: 17px;
}

:root[lang="en"] .display--signature {
  font-size: 33px; /* one line on the narrowest phones */
  white-space: nowrap;
}