/* ============================================================
   MOTYW: gold-leaf  (Złoty Liść)
   6 ekranów — złoty atłas, koronka, olejny pejzaż
   Paleta pobrana pipetą z plansz, wpisana też w THEMES w js/app.js —
   te dwa miejsca muszą się zgadzać.
   ============================================================ */

body[data-theme="gold-leaf"] {
  /* --- Paleta --- */
  --rg-ink:      #4A3B22;      /* nagłówki, imiona */
  --rg-body:     #33280F;      /* tekst opisowy */
  --rg-accent:   #8D713F;      /* przyciski */
  --rg-line:     #E4D5B4;      /* linie, ramki */
  --rg-pale:     #F5EEDF;
  --rg-cream:    #FBF6EA;      /* papier */
  --rg-card:     #FFFFFF;
  --rg-muted:    #8B7A5C;

  /* --- Fonty (darmowe, z pełnym zestawem polskich znaków) --- */
  --rg-script:   'Pinyon Script', cursive;
  --rg-display:  'Cormorant Garamond', serif;
  --rg-ui:       'Poppins', sans-serif;
  --rg-text:     'Poppins', sans-serif;
  --rg-serif:    'Cormorant Garamond', serif;

  background: #FFFFFF;
  color: var(--rg-body);
  font-family: var(--rg-text);
}

body[data-theme="gold-leaf"] #rgScreens { background: var(--rg-cream); }

/* Plansze są pionowe 3:5 i mają wypełnić kadr bez zniekształceń. */
body[data-theme="gold-leaf"] .rg-screen .rg-bg {
  object-fit: cover;
  object-position: center;
}

/* Delikatny oddech tła — ruch jest w skali czasu kilkudziesięciu sekund,
   więc czyta się jak żywy papier, a nie jak animacja.
   Używamy WYŁĄCZNIE właściwości indywidualnych (translate/rotate/scale);
   `transform` jest zarezerwowany dla animacji odsłaniających. */
@keyframes gold-leaf-oddech {
  0%, 100% { scale: 1; }
  50%      { scale: 1.018; }
}
body[data-theme="gold-leaf"] .rg-screen .rg-bg {
  animation: gold-leaf-oddech 34s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  body[data-theme="gold-leaf"] .rg-screen .rg-bg { animation: none; }
}

/* Złoto lekko rozjaśnia się i przygasa — jak refleks na atłasie.
   Wybieramy po nazwie pliku, bo warstwy są wstawiane dynamicznie
   i nie mają własnych klas — atrybut src jest jedynym pewnym uchwytem. */
@keyframes gl-blysk {
  0%,100% { opacity: 1; scale: 1; }
  50%      { opacity: 0.86; scale: 1.015; }
}
/* (13.10) Błysk talerza wyłączony — pod talerzem leżą teraz zdjęcia
   w okienkach polaroidów, a przygasanie i skala talerza odsłaniały ich
   brzegi. Ruch motywu: patrz „RUCH" na końcu pliku. */

/* ══════════════════════════════════════════════════════════════
   UKŁAD TEKSTU — logika przeniesiona 1:1 z motywów 1–4
   ══════════════════════════════════════════════════════════════
   Poprzednia wersja pozycjonowała bloki wg pomiarów z projektu:
   `text-align: left` i `margin-left` równy lewej krawędzi napisu
   w pliku grafika. W przeglądarce imiona wychodziły poza kadr, bo
   platforma buduje sekcje jako WYŚRODKOWANĄ kolumnę, a nie jako
   swobodnie pozycjonowane pola. Dwa układy nakładały się na siebie.

   Zostaje to, co się sprawdziło w Ogrodzie Różanym i Amalfi:
     • jedna wyśrodkowana kolumna o szerokości ~60% planszy,
     • stopień pisma w clamp() — rośnie z oknem, ale ma sufit,
     • jedyna rzecz wzięta z pomiaru to ODSTĘP OD GÓRY, bo on
       decyduje, czy tekst trafi w puste pole planszy.
   ══════════════════════════════════════════════════════════════ */
body[data-theme="gold-leaf"] .rg-date .rg-inner {
  width: min(60vw, calc(var(--rg-w, 760px) * 0.60));
  margin: 0 auto;
  text-align: center;
  padding-top: calc(min(100vw, var(--rg-w, 760px)) * 5 / 3 * 0.3075);
}
body[data-theme="gold-leaf"] .rg-rsvp .rg-inner {
  width: min(52vw, calc(var(--rg-w, 760px) * 0.52));
  margin: 0 auto;
  text-align: center;
  padding-top: calc(min(100vw, var(--rg-w, 760px)) * 5 / 3 * 0.0747);
}
body[data-theme="gold-leaf"] .rg-outro .rg-inner {
  width: min(56vw, calc(var(--rg-w, 760px) * 0.56));
  margin: 0 auto;
  text-align: center;
  padding-top: calc(min(100vw, var(--rg-w, 760px)) * 5 / 3 * 0.2853);
}
body[data-theme="gold-leaf"] .rg-location .rg-inner {
  width: min(60vw, calc(var(--rg-w, 760px) * 0.60));
  margin: 0 auto;
  text-align: center;
  padding-top: calc(min(100vw, var(--rg-w, 760px)) * 5 / 3 * 0.0809);
}
body[data-theme="gold-leaf"] .rg-schedule .rg-inner {
  width: min(62vw, calc(var(--rg-w, 760px) * 0.62));
  margin: 0 auto;
  text-align: center;
  padding-top: calc(min(100vw, var(--rg-w, 760px)) * 5 / 3 * 0.0200);
}
body[data-theme="gold-leaf"] .rg-story .rg-inner {
  width: min(64vw, calc(var(--rg-w, 760px) * 0.64));
  margin: 0 auto;
  text-align: center;
  padding-top: calc(min(100vw, var(--rg-w, 760px)) * 5 / 3 * 0.0200);
}

/* Imiona: sufit dobrany tak, by najdłuższa polska para zmieściła się
   w kolumnie. Bez tego „Aleksandra & Krzysztof" wychodziło poza planszę. */
body[data-theme="gold-leaf"] .rg-names {
  font-size: clamp(34px, 9.4vw, 88px);
  line-height: 1.06;
  overflow-wrap: anywhere;
}
body[data-theme="gold-leaf"] .rg-sub {
  margin-top: clamp(14px, 3.2vw, 26px);
  line-height: 1.9;
}
body[data-theme="gold-leaf"] .rg-h {
  font-size: clamp(24px, 5.6vw, 52px);
}

/* ── DRESS CODE: para w siatce, kółka we wspólnym odstępie ────
   Sylwetki były warstwą tła (procent płótna), a kółka stały na
   brzegach siatki `auto 1fr auto` z arkusza motywu 1 — 31–42 px od
   pary na telefonie, 78–100 px na komputerze, wyżej niż para, a opis
   wchodził jej na nogi. Teraz para jest w środkowej kolumnie
   (parts.dressFigure), kolumny przylegają do niej, a odstęp to
   wspólny `--rg-dress-odstep` — ten sam co w każdym motywie. */
body[data-theme="gold-leaf"] .rg-dress-grid {
  grid-template-columns: auto auto auto;
  justify-content: center;
  align-items: center;
  column-gap: var(--rg-dress-odstep);
}
body[data-theme="gold-leaf"] .rg-dress-fig {
  /* szerokość z planszy: 18,322 % kadru; wysokość z proporcji pliku
     (w tle rysunek był ściśnięty, bo tło rośnie z wysokością sekcji) */
  width: calc(var(--rg-w, 760px) * 0.18322);
  max-width: none;
  height: auto;
}

/* ══════════════════════════════════════════════════════════════
   13.10 — PRZEBUDOWA WG PLIKU GŁÓWNEGO „z tekstem full zaproszenie
   złote.svg" (900 × 8990,8; ekrany od y = 2 / 1503 / 3003 / 4495 /
   5999 / 7496). Wcześniej motyw szedł ogólnym układem kolumnowym:
   nagłówki pogrubioną kursywą wersalikami (w pliku są kaligrafią
   WT Hilton Script), opisy Poppinsem (w pliku Old Standard TT
   kursywą), harmonogram jako lista obok grafiki ścieżki, historia
   z pustymi ramkami na zdjęcia i dwiema kolumnami na kluczu, RSVP
   jako biała karta NA karcie z koperty, zakończenie z monogramem,
   którego w pliku nie ma. Teraz każdy ekran to płótno 900×1500,
   a bloki stoją w miejscach z pliku (procent płótna).
   ══════════════════════════════════════════════════════════════ */
/* --gl-1p liczone na sekcji, nie na <body>: --rg-w definiuje #rgScreens,
   więc na <body> wychodziłaby wartość awaryjna 760 px. */
body[data-theme="gold-leaf"] .rg-screen { --gl-1p: calc(var(--rg-w, 760px) * 5 / 3 / 100); }
body[data-theme="gold-leaf"] {
  --gl-ink: #382C1F;
  --gl-zloto: #E2C487;
  --rg-script: 'Pinyon Script', cursive;               /* WT Hilton Script */
  --gl-tekst: 'Old Standard TT', 'Cormorant Garamond', serif;
}
body[data-theme="gold-leaf"] .rg-date,
body[data-theme="gold-leaf"] .rg-schedule,
body[data-theme="gold-leaf"] .rg-story,
body[data-theme="gold-leaf"] .rg-location,
body[data-theme="gold-leaf"] .rg-rsvp,
body[data-theme="gold-leaf"] .rg-outro {
  position: relative;
  padding: 0;
  min-height: calc(var(--gl-1p) * 100);
}
body[data-theme="gold-leaf"] .rg-screen > .rg-bg { height: calc(var(--gl-1p) * 100); }
body[data-theme="gold-leaf"] .rg-screen > .rg-inner {
  position: absolute;
  left: 50%;
  translate: -50% 0;
  top: 0;
  width: var(--rg-w, 760px);
  max-width: 100vw;
  height: calc(var(--gl-1p) * 100);
  margin: 0;
  padding: 0;
  text-align: center;
  z-index: 3;
}
body[data-theme="gold-leaf"] .rg-h {
  font-family: var(--rg-script);
  font-style: normal;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.05;
  color: var(--gl-ink);
}

/* Zakładka między ekranami. Bazowo sekcje zachodzą na siebie o 7vw,
   a tło wygasa na 9 % góry i dołu — przy 1440 px to 100 px, czyli 8 %
   płótna: licznik, który w pliku stoi w jasnym pasie na samej górze
   planszy, lądował na wygaszonym atłasie poprzedniego ekranu. Tu plansze
   dochodzą do siebie krawędziami (pas licznika, koronka, pejzaż), więc
   zakładka jest wąska i liczona od płótna, a wygaszenie krótkie. */
body[data-theme="gold-leaf"] #rgScreens .rg-screen + .rg-screen {
  margin-top: calc(var(--rg-w, 760px) * -0.04);
}
body[data-theme="gold-leaf"] .rg-screen > .rg-bg {
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 2.4%, #000 97.6%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 2.4%, #000 97.6%, transparent 100%);
}
body[data-theme="gold-leaf"] .rg-date > .rg-bg {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 97.6%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 97.6%, transparent 100%);
}

/* ── EKRAN 1: IMIONA W KORONCE ─────────────────────────────────
   W pliku: „Robert / and / Patrycja" kaligrafią 120 px na 31–46 %,
   pod nimi akapit Old Standard kursywą 20 px na 54–61 %. Wnętrze
   koronki to x 28–72 %, y 24–78 %. Blok stoi w nim jako kolumna
   wyśrodkowana w pionie — dłuższe imiona czy zdanie nie wypchną
   niczego na koronkę. */
body[data-theme="gold-leaf"] .rg-date > .rg-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding: calc(var(--gl-1p) * 23) calc(var(--rg-w, 760px) * 0.27) calc(var(--gl-1p) * 26);
}
body[data-theme="gold-leaf"] .rg-date .rg-names {
  margin: 0;
  font-family: var(--rg-script);
  font-size: clamp(38px, calc(var(--rg-w, 760px) * 0.128), 112px);
  line-height: 0.95;
  color: var(--gl-ink);
}
body[data-theme="gold-leaf"] .rg-date .rg-names > span { display: block; }
body[data-theme="gold-leaf"] .rg-date .rg-names .amp {
  font-size: .5em;
  line-height: 1;
  margin: 0;
}
body[data-theme="gold-leaf"] .rg-date .rg-sub,
body[data-theme="gold-leaf"] .rg-date .rg-dateline {
  margin: calc(var(--gl-1p) * 3.2) 0 0;
  font-family: var(--gl-tekst);
  font-style: italic;
  font-size: clamp(11px, calc(var(--rg-w, 760px) * 0.0222), 20px);
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  color: var(--gl-ink);
}
body[data-theme="gold-leaf"] .rg-date .rg-dateline { margin-top: calc(var(--gl-1p) * 1.2); }

/* ── EKRAN 2: LICZNIK W PASIE I HARMONOGRAM JAKO ŚCIEŻKA ──────
   Licznik stoi w jasnym pasie u góry planszy (0–13,5 %): liczby
   i podpisy kaligrafią 34 px w kolumnach x 25 / 50 / 75 %, między
   nimi dwukropki. Nagłówek kaligrafią 120 px, linia bazowa 24,4 %.
   Ścieżkę, kropki, ikony i opisy rysuje skrypt (parts.sciezka). */
body[data-theme="gold-leaf"] .rg-schedule .rg-count {
  position: absolute;
  left: 14%;
  width: 72%;
  /* Baza (motyw 1) ma .rg-count { max-width: 400px } — na płótnie
     szerszym niż 555 px licznik ucinał się do 400 px przy lewej
     krawędzi, czyli stał na 14–67 % zamiast 14–86 % (środek 41 %
     zamiast 50 %). */
  max-width: none;
  top: calc(var(--gl-1p) * 3.4);
  margin: 0;
  display: flex;
  justify-content: space-between;
  gap: 0;
}
body[data-theme="gold-leaf"] .rg-schedule .rg-count > div {
  position: relative;
  flex: 1 1 0;
  text-align: center;
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
}
body[data-theme="gold-leaf"] .rg-schedule .rg-count > div + div::before {
  content: ":";
  position: absolute;
  left: 0;
  top: 18%;
  font-family: var(--gl-tekst);
  font-size: clamp(18px, calc(var(--rg-w, 760px) * 0.045), 40px);
  line-height: 1;
  color: var(--gl-ink);
}
body[data-theme="gold-leaf"] .rg-schedule .rg-count .num,
body[data-theme="gold-leaf"] .rg-schedule .rg-count .lbl {
  font-family: var(--rg-script);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(17px, calc(var(--rg-w, 760px) * 0.0378), 34px);
  line-height: 1.1;
  letter-spacing: 0;
  text-transform: none;
  color: var(--gl-ink);
}
body[data-theme="gold-leaf"] .rg-schedule > .rg-inner > .rg-h {
  position: absolute;
  left: 0;
  width: 100%;
  top: calc(var(--gl-1p) * 16.2);
  margin: 0;
  font-size: clamp(38px, calc(var(--rg-w, 760px) * 0.128), 112px);
}
body[data-theme="gold-leaf"] .rg-timeline[data-layout="sciezka"] {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  max-width: none;
}
body[data-theme="gold-leaf"] .rg-timeline[data-layout="sciezka"]::before,
body[data-theme="gold-leaf"] .rg-timeline[data-layout="sciezka"]::after { display: none; }
body[data-theme="gold-leaf"] .sc-trasa {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
body[data-theme="gold-leaf"] .sc-trasa path {
  fill: none;
  stroke: #1F1A15;
  stroke-width: 4.5;
  stroke-dasharray: 17 11;
  stroke-linecap: round;
}
body[data-theme="gold-leaf"] .sc-trasa circle { fill: #2B231B; }
body[data-theme="gold-leaf"] .sc-ikona {
  position: absolute;
  object-fit: contain;
  object-position: right center;
  pointer-events: none;
}
body[data-theme="gold-leaf"] .rg-timeline[data-layout="sciezka"] .rg-item {
  position: absolute;
  right: 4%;
  translate: 0 -50%;
  margin: 0;
  padding: 0;
  display: block;
  height: auto;
  min-height: 0;
  text-align: left;
  background: none;
  border: 0;
  box-shadow: none;
}
body[data-theme="gold-leaf"] .rg-timeline[data-layout="sciezka"] .rg-item::before,
body[data-theme="gold-leaf"] .rg-timeline[data-layout="sciezka"] .rg-item::after { display: none; }
body[data-theme="gold-leaf"] .rg-timeline[data-layout="sciezka"] .txt { display: block; text-align: left; }
body[data-theme="gold-leaf"] .rg-timeline[data-layout="sciezka"] .time,
body[data-theme="gold-leaf"] .rg-timeline[data-layout="sciezka"] .desc {
  display: block;
  margin: 0;
  font-family: var(--gl-tekst);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--gl-ink);
}
body[data-theme="gold-leaf"] .rg-timeline[data-layout="sciezka"] .time {
  font-size: clamp(11px, calc(var(--rg-w, 760px) * 0.0267), 24px);
  line-height: 1.3;
}
body[data-theme="gold-leaf"] .rg-timeline[data-layout="sciezka"] .godz { white-space: nowrap; }
body[data-theme="gold-leaf"] .rg-timeline[data-layout="sciezka"] .desc {
  font-size: clamp(10px, calc(var(--rg-w, 760px) * 0.0222), 20px);
  line-height: 1.35;
  margin-top: .15em;
  opacity: .85;
}
body[data-theme="gold-leaf"] .rg-timeline[data-layout="sciezka"] .desc:empty { display: none; }

/* ── EKRAN 3: HISTORIA NA TALERZU ──────────────────────────────
   Nagłówek BIAŁĄ kaligrafią (linia bazowa 12,7 %). Opis leży na lnianej
   serwecie po LEWEJ stronie talerza — w pliku dwa bloki na x 22 %,
   y 39 % i 57 % — a klucz zaczyna się na x 50 %, więc kolumna kończy
   się przed nim (17–49 %) i stoi środkiem w polu serwety (30–73 %).
   Ramki „Zdjęcie pary młodej" z ogólnego układu są zbędne: zdjęcia
   siedzą w polaroidach (warstwy `foto` pod talerzem). Kolumna ma
   najwyżej 38 % płótna — dłuższą historię skrypt pomniejsza (--rg-fit),
   żeby nie weszła na złotą ramę talerza. */
body[data-theme="gold-leaf"] .rg-story > .rg-inner > .rg-h {
  position: absolute;
  left: 0;
  width: 100%;
  top: calc(var(--gl-1p) * 5.6);
  margin: 0;
  font-size: clamp(38px, calc(var(--rg-w, 760px) * 0.128), 112px);
  color: #FFFFFF;
  text-shadow: 0 2px 14px rgba(40, 30, 20, .25);
}
body[data-theme="gold-leaf"] .rg-story .rg-collage,
body[data-theme="gold-leaf"] .rg-story .rg-postcard,
body[data-theme="gold-leaf"] .rg-story .rg-heart { display: none !important; }
body[data-theme="gold-leaf"] .rg-story .rg-cols {
  position: absolute;
  --rg-fit: 1;
  left: 20.5%;
  width: 29%;
  top: calc(var(--gl-1p) * 51.5);
  max-height: calc(var(--gl-1p) * 38);
  translate: 0 -50%;
  margin: 0;
  display: block;
  columns: auto;
  text-align: left;
  font-family: var(--gl-tekst);
  font-style: italic;
  font-size: calc(clamp(10.5px, calc(var(--rg-w, 760px) * 0.0244), 22px) * var(--rg-k, 1));
  line-height: 1.45;
  color: var(--gl-ink);
}
body[data-theme="gold-leaf"] .rg-story .rg-cols .rg-p {
  display: inline;
  margin: 0;
  font: inherit;
  color: inherit;
}
body[data-theme="gold-leaf"] .rg-story .rg-cols .rg-p:first-child::after { content: " "; }
body[data-theme="gold-leaf"] .rg-bg img[data-foto] { object-fit: cover; }

/* ── EKRAN 4: LOKALIZACJA W BIAŁEJ KARCIE I DRESS CODE ─────────
   Karta (prostokąt, nie zaokrąglony kafel): x 18–82 %, y 7,5–61 %.
   Nagłówek kaligrafią 108 px, mapa x 27,5–72 %, y 17,6–48,4 %, adres
   na 49 %, złoty przycisk „Dojazd" x 33,7–66,3 %, y 52,8–58,3 %
   (pinezka to warstwa planszy na 59,9 % / 53,9 %). Dress code:
   nagłówek na 67 %, para 75,5–92,7 %, cztery PASKI kolorów u stóp
   pary (y 92,2 %), opis na 94,5 %. Odstęp pasek–para to wspólny
   --rg-dress-odstep, taki sam jak kropki–para w innych motywach. */
body[data-theme="gold-leaf"] .rg-location { min-height: calc(var(--gl-1p) * 102); }
body[data-theme="gold-leaf"] .rg-location > .rg-inner::before {
  content: "";
  position: absolute;
  left: 18%;
  width: 64%;
  top: calc(var(--gl-1p) * 7.5);
  height: calc(var(--gl-1p) * 53.5);
  background: #FFFFFF;
}
body[data-theme="gold-leaf"] .rg-location > .rg-inner > .rg-card {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  max-width: none;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
body[data-theme="gold-leaf"] .rg-location .rg-card > * { position: absolute; margin: 0; }
/* Nagłówek środkiem w pasie karty nad mapą (7,5–17,6 %). Przy 7,6 %
   zawijas „L" dotykał górnej krawędzi karty (0,1 pkt nad, 2,4 pkt pod),
   bo kaligrafia rysuje się od samej góry swojego pudełka. Zmierzone
   na tuszu liter: przy 8,75 % odstęp nad i pod napisem jest równy. */
body[data-theme="gold-leaf"] .rg-location .rg-card .rg-h {
  left: 18%;
  width: 64%;
  top: calc(var(--gl-1p) * 8.75);
  font-size: clamp(34px, calc(var(--rg-w, 760px) * 0.112), 100px);
}
body[data-theme="gold-leaf"] .rg-location .rg-loc-cards { display: none; }
body[data-theme="gold-leaf"] .rg-location .rg-map {
  display: block;
  left: 27.5%;
  width: 45%;
  top: calc(var(--gl-1p) * 17.6);
  height: calc(var(--gl-1p) * 30.8);
  border: 0;
  border-radius: 0;
  background: #F3F3F7;
}
body[data-theme="gold-leaf"] .rg-location .rg-addr {
  left: 21%;
  width: 58%;
  top: calc(var(--gl-1p) * 48.9);
  font-family: var(--gl-tekst);
  font-style: italic;
  font-size: clamp(10px, calc(var(--rg-w, 760px) * 0.0222), 20px);
  line-height: 1.35;
  color: var(--gl-ink);
}
body[data-theme="gold-leaf"] .rg-location .rg-btn {
  left: 33.7%;
  width: 32.6%;
  top: calc(var(--gl-1p) * 52.8);
  height: calc(var(--gl-1p) * 5.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0 0 0;
  border-radius: 0;
  background: var(--gl-zloto);
  box-shadow: none;
  color: #FFFFFF;
  font-family: var(--gl-tekst);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(13px, calc(var(--rg-w, 760px) * 0.04), 36px);
  letter-spacing: .04em;
  text-transform: uppercase;
  justify-content: flex-start;
  padding-left: 4.2%;
}
body[data-theme="gold-leaf"] .rg-location .rg-btn .rg-pin { display: none; }
/* Pinezka przy „Dojazd" — na planszy biały kontur pinezki. Warstwa
   04-location/koperta.webp, którą rejestr brał za pinezkę, to w
   rzeczywistości miniatura koperty z ekranu RSVP (57×99 px), więc
   z rejestru wypadła, a pinezka jest rysowana tutaj. */
body[data-theme="gold-leaf"] .rg-location .rg-btn::after {
  content: "";
  position: absolute;
  right: 10%;
  top: 50%;
  translate: 0 -50%;
  height: 62%;
  aspect-ratio: 20 / 28;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 28'%3E%3Cpath d='M10 1.2C5.1 1.2 1.4 5 1.4 9.7c0 6.4 8.6 16.6 8.6 16.6s8.6-10.2 8.6-16.6C18.6 5 14.9 1.2 10 1.2z' fill='none' stroke='white' stroke-width='1.6'/%3E%3Ccircle cx='10' cy='9.8' r='3.3' fill='none' stroke='white' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
}
body[data-theme="gold-leaf"] .rg-location .rg-btn:hover { background: #D6B572; }
body[data-theme="gold-leaf"] .rg-dress {
  position: absolute;
  left: 50%;
  translate: -50% 0;
  top: 0;
  width: var(--rg-w, 760px);
  max-width: 100vw;
  height: calc(var(--gl-1p) * 100);
  margin: 0;
  padding: 0;
  background: none;
  z-index: 3;
  pointer-events: none;
}
body[data-theme="gold-leaf"] .rg-dress .rg-inner {
  position: absolute;
  inset: 0;
  translate: none;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}
body[data-theme="gold-leaf"] .rg-dress .rg-inner > * { position: absolute; margin: 0 !important; }
body[data-theme="gold-leaf"] .rg-dress .rg-h {
  left: 0;
  width: 100%;
  top: calc(var(--gl-1p) * 66.8);
  font-size: clamp(34px, calc(var(--rg-w, 760px) * 0.112), 100px);
}
body[data-theme="gold-leaf"] .rg-dress-grid {
  left: 0;
  width: 100%;
  top: calc(var(--gl-1p) * 75.3);
  height: calc(var(--gl-1p) * 17.6);
  display: grid;
  grid-template-columns: auto auto auto;
  justify-content: center;
  align-items: end;
  column-gap: var(--rg-dress-odstep);
}
body[data-theme="gold-leaf"] .rg-dress-fig {
  height: calc(var(--gl-1p) * 17.4);
  width: auto;
  max-width: none;
}
body[data-theme="gold-leaf"] .rg-dress-grid .rg-swatches {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: calc(var(--rg-w, 760px) * 0.028);
  margin: 0 0 calc(var(--gl-1p) * 0.6);
}
body[data-theme="gold-leaf"] .rg-dress-grid .rg-sw {
  width: calc(var(--rg-w, 760px) * 0.128);
  height: max(4px, calc(var(--gl-1p) * 0.8));
  border-radius: 0;
  box-shadow: none;
  border: 0;
}
body[data-theme="gold-leaf"] .rg-dress .rg-p {
  left: 9%;
  width: 82%;
  top: calc(var(--gl-1p) * 94.2);
  font-family: var(--gl-tekst);
  font-style: italic;
  font-size: clamp(10px, calc(var(--rg-w, 760px) * 0.0222), 20px);
  line-height: 1.35;
  color: var(--gl-ink);
}

/* ── EKRAN 5: RSVP NA KARCIE Z KOPERTY ─────────────────────────
   Karta i koperta są w grafice (05-rsvp/koperta.webp) — u nas stała
   na nich DRUGA, zaokrąglona biała karta. Teraz pola leżą wprost na
   karcie z pliku: „Rsvp" kaligrafią na 6,6 %, pytanie wersalikami
   Old Standard na 18,6 %, odpowiedzi od 23,7 %, kreska na 31,3 %
   (x 31–67 %), „wiadomość" na 35,5 %, pole #EFEDE4 x 18,5–74,5 %,
   y 40–49 %, złoty przycisk x 33,7–66,3 %, y 51,3–56,8 %. */
body[data-theme="gold-leaf"] .rg-rsvp > .rg-inner > .rg-card {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  max-width: none;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
body[data-theme="gold-leaf"] .rg-rsvp .rg-card > * { position: absolute; margin: 0; }
body[data-theme="gold-leaf"] .rg-rsvp .rg-h {
  left: 14%;
  width: 67%;
  top: calc(var(--gl-1p) * 6.4);
  font-size: clamp(34px, calc(var(--rg-w, 760px) * 0.112), 100px);
  text-transform: lowercase;
}
body[data-theme="gold-leaf"] .rg-rsvp .rg-h::first-letter { text-transform: uppercase; }
body[data-theme="gold-leaf"] .rg-rsvp .rg-q,
body[data-theme="gold-leaf"] .rg-rsvp .rg-msg-label {
  left: 14%;
  width: 67%;
  font-family: var(--gl-tekst);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(12px, calc(var(--rg-w, 760px) * 0.036), 32px);
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--gl-ink);
}
body[data-theme="gold-leaf"] .rg-rsvp .rg-q { top: calc(var(--gl-1p) * 18.4); }
body[data-theme="gold-leaf"] .rg-rsvp .rg-msg-label { top: calc(var(--gl-1p) * 35.2); }
body[data-theme="gold-leaf"] .rg-rsvp .rg-radios {
  left: 14%;
  width: 67%;
  top: calc(var(--gl-1p) * 23.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--gl-1p) * 0.8);
}
body[data-theme="gold-leaf"] .rg-rsvp .rg-radio {
  font-family: var(--gl-tekst);
  font-style: italic;
  font-size: clamp(11px, calc(var(--rg-w, 760px) * 0.0289), 26px);
  color: #440728;
}
body[data-theme="gold-leaf"] .rg-rsvp .rg-radio .dot { border-color: #C9A867; }
body[data-theme="gold-leaf"] .rg-rsvp .rg-sep {
  display: block;
  left: 31%;
  width: 36%;
  top: calc(var(--gl-1p) * 31.3);
  height: 0;
  border: 0;
  border-top: 1px solid rgba(56, 44, 31, .45);
  background: none;
}
body[data-theme="gold-leaf"] .rg-rsvp .rg-textarea {
  left: 18.5%;
  width: 56%;
  top: calc(var(--gl-1p) * 40);
  height: calc(var(--gl-1p) * 9);
  min-height: 0;
  background: #EFEDE4;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-family: var(--gl-tekst);
  font-style: italic;
  font-size: clamp(11px, calc(var(--rg-w, 760px) * 0.0222), 20px);
  color: var(--gl-ink);
}
body[data-theme="gold-leaf"] .rg-rsvp .rg-btn {
  left: 33.7%;
  width: 32.6%;
  top: calc(var(--gl-1p) * 51.3);
  height: calc(var(--gl-1p) * 5.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 0;
  background: var(--gl-zloto);
  box-shadow: none;
  color: #FFFFFF;
  font-family: var(--gl-tekst);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(12px, calc(var(--rg-w, 760px) * 0.034), 30px);
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
body[data-theme="gold-leaf"] .rg-rsvp .rg-btn:hover { background: #D6B572; }
body[data-theme="gold-leaf"] .rg-rsvp .rg-note {
  left: 18%;
  width: 64%;
  top: calc(var(--gl-1p) * 57.6);
  font-family: var(--gl-tekst);
  font-style: italic;
  font-size: clamp(9px, calc(var(--rg-w, 760px) * 0.0167), 15px);
  line-height: 1.35;
  color: var(--gl-ink);
  opacity: .8;
}

/* ── EKRAN 6: ZAKOŃCZENIE NA TŁOCZONEJ KARCIE ──────────────────
   W pliku: nagłówek kaligrafią na karcie (x 20–80 %, y 21–71 %),
   pod nim krótki akapit, na dole karty złota para w tańcu. Monogramu
   w pliku nie ma. Słowa od pary stoją środkiem w pasie między
   nagłówkiem a parą (37,5–52,5 %), więc każda ich długość wychodzi
   na środku. */
body[data-theme="gold-leaf"] .rg-outro .rg-monogram { display: none; }
body[data-theme="gold-leaf"] .rg-outro > .rg-inner > * { position: absolute; margin: 0; }
body[data-theme="gold-leaf"] .rg-outro .rg-h {
  left: 22%;
  width: 56%;
  top: calc(var(--gl-1p) * 25.2);
  font-size: clamp(30px, calc(var(--rg-w, 760px) * 0.09), 80px);
  line-height: 1;
}
body[data-theme="gold-leaf"] .rg-outro .rg-cols {
  left: 24%;
  width: 52%;
  top: calc(var(--gl-1p) * 45);
  translate: 0 -50%;
  display: block;
  columns: auto;
  text-align: center;
  font-family: var(--gl-tekst);
  font-style: italic;
  font-size: clamp(10.5px, calc(var(--rg-w, 760px) * 0.0222), 20px);
  line-height: 1.45;
  color: var(--gl-ink);
}
body[data-theme="gold-leaf"] .rg-outro .rg-cols .rg-p {
  display: inline;
  margin: 0;
  font: inherit;
  color: inherit;
}
body[data-theme="gold-leaf"] .rg-outro .rg-cols .rg-p:first-child::after { content: " "; }

/* ── RUCH ─────────────────────────────────────────────────────
   Warstwy, na których stoi tekst lub zdjęcia (karty, talerz, koperta),
   nie jadą paralaksą ani dryfem. Żyją: ikonki harmonogramu (lekkie
   kołysanie, każda w innej fazie), para w tańcu na karcie zakończenia,
   pinezka przy „Dojazd", a tła oddychają. */
body[data-theme="gold-leaf"] .rg-bg img[src$="talerz_okna.webp"],
body[data-theme="gold-leaf"] .rg-bg img[data-foto],
body[data-theme="gold-leaf"] .rg-bg img[src$="04-location/papier_tlo.webp"],
body[data-theme="gold-leaf"] .rg-bg img[src$="05-rsvp/koperta.webp"],
body[data-theme="gold-leaf"] .rg-bg img[src$="06-outro/papier_tlo.webp"] {
  animation: none;
}
body[data-theme="gold-leaf"] .rg-bg img[src$="talerz_okna.webp"],
body[data-theme="gold-leaf"] .rg-bg img[src$="04-location/papier_tlo.webp"],
body[data-theme="gold-leaf"] .rg-bg img[src$="04-location/koperta.webp"],
body[data-theme="gold-leaf"] .rg-bg img[src$="05-rsvp/koperta.webp"],
body[data-theme="gold-leaf"] .rg-bg img[src$="06-outro/papier_tlo.webp"],
body[data-theme="gold-leaf"] .rg-bg img[src$="06-outro/illustracja.webp"] {
  transform: none !important;
}
@keyframes gl-ikona {
  0%, 100% { rotate: -1.6deg; translate: 0 0; }
  50%      { rotate: 1.6deg;  translate: 0 -2.5%; }
}
@keyframes gl-taniec {
  0%, 100% { rotate: -2deg; }
  50%      { rotate: 2deg; }
}
@keyframes gl-pinezka {
  0%, 100% { translate: 0 -50%; }
  50%      { translate: 0 -64%; }
}
body[data-theme="gold-leaf"] .sc-ikona {
  transform-origin: 50% 90%;
  animation: gl-ikona 6.5s ease-in-out infinite;
}
body[data-theme="gold-leaf"] .sc-ikona:nth-of-type(2n)  { animation-delay: -2.2s; animation-duration: 7.4s; }
body[data-theme="gold-leaf"] .sc-ikona:nth-of-type(3n)  { animation-delay: -4.1s; }
body[data-theme="gold-leaf"] .rg-bg img[src$="06-outro/illustracja.webp"] {
  transform-origin: 50% 96%;
  animation: gl-taniec 5.5s ease-in-out infinite;
}
body[data-theme="gold-leaf"] .rg-location .rg-btn::after {
  animation: gl-pinezka 2.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  body[data-theme="gold-leaf"] .sc-ikona,
  body[data-theme="gold-leaf"] .rg-bg img { animation: none !important; }
}

/* Telefon: adres łamał się na dwie linijki i druga wchodziła na „Dojazd". */
@media (max-width: 480px) {
  body[data-theme="gold-leaf"] .rg-location .rg-map  { height: calc(var(--gl-1p) * 28.8); }
  body[data-theme="gold-leaf"] .rg-location .rg-addr { top: calc(var(--gl-1p) * 46.9); left: 19.5%; width: 61%; }
}

/* ── ODSŁONA ──────────────────────────────────────────────────
   Plansza odsłony to ten sam kadr co ekran 1 (atłas i koronka), tylko
   bez napisów — po kliknięciu gaśnie, a pod nią stoją już imiona. Bazowo
   `.plate-stage` skaluje się WYSOKOŚCIĄ okna i stoi na środku, a płótno
   zaproszenia — SZEROKOŚCIĄ i od góry, więc koronka w odsłonie była
   przesunięta względem koronki pod spodem i przy wygaszaniu widać było
   dwie ramki. Plansza dostaje dokładnie wymiar i miejsce płótna (jak
   w Zielonej Oliwce). */
body[data-theme="gold-leaf"] .plate-reveal { align-items: flex-start; }
body[data-theme="gold-leaf"] .plate-stage {
  width: min(100vw, var(--rg-w, 760px));
  height: calc(min(100vw, var(--rg-w, 760px)) * 5 / 3);
}

/* 13.10 — Adres środkiem w pasie między mapą a „Dojazd".
   Był przypięty GÓRĄ tuż pod mapą (0,5 pkt nad, 2,4–4,2 pkt pod), więc
   jedna linijka wisiała przy mapie. Teraz środek bloku stoi na środku
   pasa (translate −50 % z własnej wysokości) — jedna czy dwie linijki,
   odstęp nad i pod jest ten sam. Pas: mapa kończy się na 48,4 %
   (telefon 46,4 %), przycisk zaczyna na 52,8 %. */
body[data-theme="gold-leaf"] .rg-location .rg-addr {
  top: calc(var(--gl-1p) * 50.6);
  translate: 0 -50%;
  line-height: 1.25;
}
@media (max-width: 480px) {
  body[data-theme="gold-leaf"] .rg-location .rg-addr { top: calc(var(--gl-1p) * 49.6); }
}

/* 13.10 — „Dress code" środkiem w pasie nad parą. Pas: od końca beżowej
   koronki w tle (65,47 % — zmierzone w 04-location/tlo.webp) do czubka
   głowy pary (75,0 %). Napis stał na 66,8 %: 1,2 pkt nad nim, 3,1 pod.
   Kaligrafia ma tusz od 66,7 do 71,9 % przy tej pozycji, więc
   przesunięcie o 0,95 pkt wyrównuje odstępy. */
body[data-theme="gold-leaf"] .rg-dress .rg-h { top: calc(var(--gl-1p) * 67.75); }

/* 13.10 — Zdanie pod „Wyślij RSVP" w dwóch linijkach, w obrysie karty.
   Pod przyciskiem z karty widać tylko trójkąt między skrzydłami koperty
   (zmierzone w 05-rsvp/koperta.webp: na 58 % płótna biały pas ma
   x 27,5–73 %, na 60 % — 30,6–69,6 %, na 62 % — 33,9–66,4 %). Zdanie
   szło jedną linijką przez 26,5–73,5 % (na telefonie 24,9–75,3 %),
   czyli po skrzydłach koperty. Pole jest teraz węższe od całego zdania,
   wyśrodkowane, z text-wrap: balance — zawsze dwie równe linijki,
   obie w trójkącie. Te same reguły dostają komunikaty po wysłaniu. */
body[data-theme="gold-leaf"] .rg-rsvp .rg-note {
  /* Podłoga 15,5em: przy 320 px i 8,5 px 38 % płótna łamało zdanie
     na trzy linijki — trzecia schodziła w zwężający się trójkąt. */
  --gl-notka: max(38%, 15.5em);
  left: calc(50% - var(--gl-notka) / 2);
  width: var(--gl-notka);
  top: calc(var(--gl-1p) * 57.3);
  line-height: 1.3;
  white-space: normal;
  text-wrap: balance;
}
@media (max-width: 359px) {
  body[data-theme="gold-leaf"] .rg-rsvp .rg-note { font-size: 8px; line-height: 1.22; top: calc(var(--gl-1p) * 57.1); }
}

/* 13.10 — „Kilka słów od pary" w czystym polu karty.
   Karta 06-outro/papier_tlo.webp ma tłoczony ornament wzdłuż brzegów,
   a u góry i na dole dodatkowo zawijasy na środku. Czyste pole
   (zmierzone na mapie faktury pliku): na 30 % płótna x 34–66 %,
   na 32–36 % ok. 30–69 %, na 40–50 % 25–74 %. Nagłówek szedł
   stopniem 0,09 płótna przez 28–72 % i od 24,5 % — po ornamencie.
   Teraz: mniejszy stopień, pole 36 % szerokości, więc łamie się zawsze
   na „Kilka słów / od pary" (bez sufitu w px: stopień rośnie razem
   z płótnem, więc podział linii jest ten sam na każdym ekranie),
   i stoi niżej — w szerokiej części czystego pola. Opis od pary
   środkiem między nagłówkiem a parą w tańcu (53,5 %). */
body[data-theme="gold-leaf"] .rg-outro .rg-h {
  left: 32%;
  width: 36%;
  top: calc(var(--gl-1p) * 30.6);
  font-size: calc(var(--rg-w, 760px) * 0.0803);
  line-height: 0.98;
}
body[data-theme="gold-leaf"] .rg-outro .rg-cols { top: calc(var(--gl-1p) * 47.4); }
/* Słowa od pary mają między nagłówkiem (do ~40,7 %) a parą w tańcu
   (od 53,5 %) stałe pole — przy 320 px opis szedł w 5 linijkach
   i dotykał obu. Pole ma max-height, a dłuższy tekst skrypt
   pomniejsza (--rg-fit, jak historia na talerzu). Środek pola 47,1 %. */
body[data-theme="gold-leaf"] .rg-outro .rg-cols {
  --rg-fit: 1;
  top: calc(var(--gl-1p) * 47.1);
  max-height: calc(var(--gl-1p) * 10.6);
  font-size: calc(clamp(10.5px, calc(var(--rg-w, 760px) * 0.0222), 20px) * var(--rg-k, 1));
  line-height: 1.38;
}