/* ═══════════════════════════════════════════════════════════
   Hiba & Yousef — embossed ivory paper
   Layered over styles.css: remaps the palette from emerald + gold to
   tone-on-tone cream with warm taupe ink, and adds blind-embossed
   ornaments (paper-coloured motifs lifted by a highlight + shadow).
   ═══════════════════════════════════════════════════════════ */

/* the invitation card — tall (assets/card.webp, 941×1672) on portrait
   screens, wide (assets/card-wide.webp, 1672×941) on landscape ones. It fills
   the opening screen edge to edge; --card-w is the size it would be if shown
   whole within 100vw × 94dvh, which sets the border thickness and --cw, the
   unit the opening text is sized in so it always fits the plain panel. */
:root {
  --card-w: min(100vw, calc(94dvh * 0.5628));
  --card-h: calc(var(--card-w) * 1.7768);
  --card-img: url("assets/card.webp");
  /* border slices (image px: top right bottom left) and their on-screen size */
  --slice: 178 173 183 170;
  --px: calc(var(--card-w) / 941);
  --bw: calc(178 * var(--px)) calc(173 * var(--px)) calc(183 * var(--px)) calc(170 * var(--px));
  --cw: var(--card-w);
  --linen-size: calc(var(--card-w) * 0.544);

  /* palette sampled from the card's linen */
  --paper: #e5ded5;
  --paper-deep: #dcd4c9;
  --ivory: #f4efe8;

  --ink: #4e453b;
  --ink-soft: #776b5c;

  /* "gold" roles become a muted taupe accent */
  --gold: #9a8a74;
  --gold-bright: #a99a83;
  --gold-pale: #d9d0c2;
  --gold-whisper: rgba(118, 98, 74, 0.22);

  /* "emerald" roles become deep warm ink */
  --emerald: #4e453b;
  --emerald-soft: #675b4c;
  --emerald-deep: #3d352d;

  --star-lattice: none;
  --star-lattice-light: none;

  --calligraphy: "Aref Ruqaa", "Amiri", serif;

  /* the card's own linen weave, tiled (seamless mirror tile cut from its
     plain centre) at the same scale the card is shown */
  --linen: linear-gradient(rgba(229, 222, 213, 0.42), rgba(229, 222, 213, 0.42)),
           url("assets/linen.jpg") 0 0 / var(--linen-size) repeat, #e5ded5;
  --paper-bg: var(--linen);

  /* the blind-emboss lift: light from the upper left */
  --emboss: drop-shadow(-0.6px -0.6px 0.3px rgba(255, 255, 255, 0.95))
            drop-shadow(0.9px 1.1px 0.8px rgba(96, 78, 56, 0.38));
}

body { background: var(--paper-bg); }

.emb { filter: var(--emboss); }

/* Arabic calligraphy, in solid taupe ink */
.dua-emboss {
  font-family: var(--calligraphy);
  color: #7d6d58;
  line-height: 1.6;
}

/* ═══════════ VEIL — the card, opening as a gatefold ═══════════ */

.veil-panel,
.veil-panel--left,
.veil-panel--right {
  background: none;
  box-shadow: none;
  overflow: hidden;
}

/* each door holds a full-viewport copy of the scene, aligned to the
   viewport, so the left door shows the card's left half and the right door
   its right half — the card splits exactly down its centre */
.vcard {
  position: absolute;
  top: 0;
  width: 100vw;
  height: 100%;
  background: var(--linen);
}
.veil-panel--left  .vcard { left: 0; }
.veil-panel--right .vcard { right: 0; }

/* the card fills the screen edge to edge: sliced 9-ways along its inner rope
   frame, so the corners keep their true shape, the border runs stretch to
   the screen's length, and the plain linen centre fills the middle */
.vcard::after {
  content: "";
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  border: 0 solid transparent;
  border-width: var(--bw);
  border-image: var(--card-img) var(--slice) fill / var(--bw) stretch;
}

/* a barely-there fold down the middle of the card */
.veil-panel--left::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 1px;
  background: linear-gradient(transparent, rgba(110, 92, 70, 0.1) 12%, rgba(110, 92, 70, 0.1) 88%, transparent);
}

/* text lives inside the card's plain centre panel (x 18–82%, y 11–89%),
   sized in card widths so it fits the same way on every screen */
.veil-content {
  width: calc(var(--cw) * 0.56);
  max-width: none;
  padding: 0;
}

.veil-bismillah { color: var(--gold); font-size: calc(var(--cw) * 0.041); margin-bottom: calc(var(--cw) * 0.035); }
.veil-welcome   { font-size: calc(var(--cw) * 0.07); line-height: 1.3; margin-bottom: calc(var(--cw) * 0.028); animation-delay: 0.75s; }
.veil-script    { color: #8f7f69; font-size: calc(var(--cw) * 0.066); }
.veil-script--of { margin-top: calc(var(--cw) * 0.02); }
.veil-label     { color: var(--ink); font-size: calc(var(--cw) * 0.036); margin-top: calc(var(--cw) * 0.02); }
.veil-names     { margin-top: calc(var(--cw) * 0.02); }
.veil-name      { color: var(--ink); font-weight: 300; font-size: calc(var(--cw) * 0.078); letter-spacing: 0.06em; }
.veil-amp       { color: #8f7f69; font-size: calc(var(--cw) * 0.07); }


.veil-button {
  margin-top: calc(var(--cw) * 0.05);
  font-size: calc(var(--cw) * 0.028);
  padding: calc(var(--cw) * 0.032) calc(var(--cw) * 0.045);
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  white-space: nowrap;
  color: var(--ink);
  border-color: var(--gold);
  background: rgba(244, 239, 232, 0.6);
}
.veil-button:hover, .veil-button:focus-visible { color: var(--ivory); border-color: var(--ink); }
.veil-button::before { background: linear-gradient(120deg, var(--emerald-soft), var(--ink)); }

/* landscape screens: the wide card (plain panel x 9.5–90.4%, y 15.3–84.2%).
   The panel is short and wide, so the text unit follows the card's height. */
@media (min-aspect-ratio: 5/4) {
  :root {
    --card-h: min(94dvh, calc(100vw * 0.5628));
    --card-w: calc(var(--card-h) * 1.7768);
    --card-img: url("assets/card-wide.webp");
    --slice: 144 161 149 159;
    --px: calc(var(--card-w) / 1672);
    --bw: calc(144 * var(--px)) calc(161 * var(--px)) calc(149 * var(--px)) calc(159 * var(--px));
    --cw: calc(var(--card-h) * 0.56);
    --linen-size: calc(var(--card-w) * 0.306);
  }
  .veil-content { width: calc(var(--card-w) * 0.7); }
}

/* ═══════════ PAGE ═══════════ */

.invitation { background: var(--paper-bg); }

.topnav.scrolled { background: rgba(236, 230, 220, 0.9); }

/* embossed garlands in the hero corners (replace the old line florals) */
/* the card's own floral border, cut from its top band and mirror-tiled so it
   runs seamlessly across any width (assets/band.jpg) */
:root { --band-h: clamp(58px, 17vw, 104px); }
.band {
  height: var(--band-h);
  background: url("assets/band.jpg") center 0 / auto 100% repeat-x;
  /* soften the strip's edges into the page linen */
  -webkit-mask-image: linear-gradient(transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(transparent, #000 10%, #000 90%, transparent);
  pointer-events: none;
}
.band--top {
  position: absolute;
  top: 54px;
  left: 0;
  right: 0;
}
.hero { padding-top: calc(54px + var(--band-h) + 1.4rem); }

.floral { color: var(--gold-bright); }

.footer-arabic.dua-emboss {
  font-family: var(--calligraphy);
  font-size: clamp(1.35rem, 5.6vw, 2.2rem);
  color: #c4b8a8;
}

.band--bottom {
  width: 100vw;
  margin: 2.6rem 0 0 calc(50% - 50vw);
  transform: scaleY(-1);
}
.footer { padding-bottom: 0.7rem; overflow: hidden; }

/* buttons and inputs: ink on paper */
.rsvp-button::before,
.cal-btn::before,
.map-choice::before { background: linear-gradient(120deg, var(--emerald-soft), var(--ink)); }
.cal-btn:hover, .cal-btn:focus-visible,
.map-choice:hover, .map-choice:focus-visible,
.rsvp-button:hover, .rsvp-button:focus-visible { color: var(--ivory); }

.field input,
.field select,
.field textarea { background-color: rgba(247, 243, 236, 0.75); }
.field input:focus,
.field select:focus,
.field textarea:focus { background-color: #faf7f1; }

.map-modal-backdrop { background: rgba(62, 53, 44, 0.42); }
.map-modal-card {
  background: var(--paper-bg);
  box-shadow: 0 30px 70px -25px rgba(62, 53, 44, 0.45);
}

/* dropdown chevron in taupe (base uses the old gold) */
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%239a8a74' stroke-width='1.5'/%3E%3C/svg%3E");
}

.detail-note {
  margin-top: 0.7rem;
  font-family: "Pinyon Script", cursive;
  font-size: clamp(1.35rem, 2.8vw, 1.6rem);
  color: #8f7f69;
}

/* the hour, under the date */
.hero-time {
  margin-top: 0.75rem;
  font-size: clamp(1.05rem, 2.5vw, 1.4rem);
  font-weight: 500;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  color: var(--ink);
}
@media (max-width: 480px) {
  .hero-time { letter-spacing: 0.18em; text-indent: 0.18em; }
}