/* ============================================================
   MOTYW: olive-green  (Zielona Oliwka)
   6 ekranów — hortensje, eukaliptus, sztukateria
   Paleta pobrana pipetą z plansz, wpisana też w THEMES w js/app.js —
   te dwa miejsca muszą się zgadzać.
   ============================================================ */

body[data-theme="olive-green"] {
  /* --- Paleta --- */
  --rg-ink:      #33422C;      /* nagłówki, imiona */
  --rg-body:     #24301E;      /* tekst opisowy */
  --rg-accent:   #657C4E;      /* przyciski */
  --rg-line:     #DCE6CE;      /* linie, ramki */
  --rg-pale:     #F0F5E8;
  --rg-cream:    #F8FAF3;      /* papier */
  --rg-card:     #FFFFFF;
  --rg-muted:    #7D8B73;

  /* --- 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="olive-green"] #rgScreens { background: var(--rg-cream); }

/* Plansze są pionowe 3:5 i mają wypełnić kadr bez zniekształceń. */
body[data-theme="olive-green"] .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 olive-green-oddech {
  0%, 100% { scale: 1; }
  50%      { scale: 1.018; }
}
body[data-theme="olive-green"] .rg-screen .rg-bg {
  animation: olive-green-oddech 34s ease-in-out infinite;
}

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

/* ══════════════════════════════════════════════════════════════
   RUCH GRAFIK (13.10, przebudowa)
   Wcześniej ruszały się tu całe plansze z tekstem (koperta z imionami,
   koperta z „Dojazd", owal RSVP) — dryf o 2 % i paralaksa przesuwały je
   pod literami o kilkanaście pikseli, więc część ruchu trzeba było
   wyłączyć i motyw wyglądał na nieruchomy. Teraz:
     • warstwy, NA KTÓRYCH STOI TEKST, nie jadą paralaksą ani dryfem
       (tekst zawsze trzyma się grafiki),
     • ruszają się elementy żywe: hortensje w kopercie (kołysanie wokół
       DOLNEJ krawędzi koperty — imiona na kieszeni przesuwają się
       o ≤2 px, a czubki kwiatów o ~8 px), bukiet pod owalem RSVP
       (wycięty z planszy do osobnej warstwy bukiet.webp, kołysze się
       wokół miejsca wiązania), kwiaty i zdjęcie przy kopercie
       lokalizacji, zdjęcie pary w wianku, a tła oddychają.
   Używamy wyłącznie translate/rotate/scale — `transform` należy do
   paralaksy i animacji wejścia.
   ══════════════════════════════════════════════════════════════ */
@keyframes og-koperta {
  0%, 100% { rotate: -0.6deg; scale: 1; }
  50%      { rotate: 0.6deg;  scale: 1.006; }
}
@keyframes og-bukiet {
  0%, 100% { rotate: -1.2deg; }
  50%      { rotate: 1.2deg; }
}
@keyframes og-kolysanie {
  0%,100% { rotate: -0.8deg; translate: 0 0; }
  50%     { rotate: 0.8deg;  translate: 0 -0.9%; }
}
@keyframes og-unos {
  0%, 100% { translate: 0 0;     scale: 1; }
  50%      { translate: 0 -0.8%; scale: 1.012; }
}
/* Warstwy z tekstem: bez paralaksy (`transform` ustawia baza z JS-owego
   --rg-par, więc `!important`). */
body[data-theme="olive-green"] .rg-bg img[src$="02-date/koperta_otwarta.webp"],
body[data-theme="olive-green"] .rg-bg img[src$="03-schedule/papier_czysty.webp"],
body[data-theme="olive-green"] .rg-bg img[src$="04-story/zdjecie_pary.webp"],
body[data-theme="olive-green"] .rg-bg img[data-warstwa$="04-story/zdjecie_pary.webp"],
body[data-theme="olive-green"] .rg-bg img[src$="05-location/koperta.webp"],
body[data-theme="olive-green"] .rg-bg img[src$="05-location/kwiaty.webp"],
body[data-theme="olive-green"] .rg-bg img[src$="05-location/zdjecie_lokalizacji.webp"],
body[data-theme="olive-green"] .rg-bg img[data-warstwa$="05-location/zdjecie_lokalizacji.webp"],
body[data-theme="olive-green"] .rg-bg img[src$="06-rsvp/papier_baza.webp"],
body[data-theme="olive-green"] .rg-bg img[src$="06-rsvp/bukiet.webp"] {
  transform: none !important;
}
body[data-theme="olive-green"] .rg-bg img[src$="03-schedule/papier_czysty.webp"],
body[data-theme="olive-green"] .rg-bg img[src$="05-location/koperta.webp"],
body[data-theme="olive-green"] .rg-bg img[src$="06-rsvp/papier_baza.webp"] {
  animation: none;
}
body[data-theme="olive-green"] .rg-bg img[src$="02-date/koperta_otwarta.webp"] {
  transform-origin: 50% 100%;
  animation: og-koperta 9s ease-in-out infinite;
}
/* Miejsce wiązania bukietu w pliku 561×930: (280, 700). */
body[data-theme="olive-green"] .rg-bg img[src$="06-rsvp/bukiet.webp"] {
  transform-origin: 49.9% 75.3%;
  animation: og-bukiet 7.5s ease-in-out infinite;
}
body[data-theme="olive-green"] .rg-bg img[src$="05-location/kwiaty.webp"] {
  transform-origin: 50% 12%;
  animation: og-kolysanie 11s ease-in-out infinite;
}
body[data-theme="olive-green"] .rg-bg img[src$="05-location/zdjecie_lokalizacji.webp"],
body[data-theme="olive-green"] .rg-bg img[data-warstwa$="05-location/zdjecie_lokalizacji.webp"] {
  animation: og-unos 10s ease-in-out infinite -2.5s;
}
body[data-theme="olive-green"] .rg-bg img[src$="04-story/zdjecie_pary.webp"],
body[data-theme="olive-green"] .rg-bg img[data-warstwa$="04-story/zdjecie_pary.webp"] {
  animation: og-unos 12s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  body[data-theme="olive-green"] .rg-bg img { animation: none !important; }
}

/* ══════════════════════════════════════════════════════════════
   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="olive-green"] .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.5207);
}
body[data-theme="olive-green"] .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.1113);
}
body[data-theme="olive-green"] .rg-outro .rg-inner {
  width: min(56vw, calc(var(--rg-w, 760px) * 0.56));
  margin: 0 auto;
  text-align: center;
}
body[data-theme="olive-green"] .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.6200);
}
body[data-theme="olive-green"] .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.0637);
}
body[data-theme="olive-green"] .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.6400);
}

/* 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="olive-green"] .rg-names {
  font-size: clamp(34px, 9.4vw, 88px);
  line-height: 1.06;
  overflow-wrap: anywhere;
}
body[data-theme="olive-green"] .rg-sub {
  margin-top: clamp(14px, 3.2vw, 26px);
  line-height: 1.9;
}
body[data-theme="olive-green"] .rg-h {
  font-size: clamp(24px, 5.6vw, 52px);
}

/* ══════════════════════════════════════════════════════════════
   ODSŁONA — KOPERTA, KTÓRA SIĘ OTWIERA (2026-08-29)
   Ta sama logika co w motywie „Czerń i biel": bez żadnej nowej
   grafiki, wyłącznie z dwóch zdjęć, które motyw już ma —
   01-start/koperta.webp (zamknięta) i 02-date/koperta_otwarta.webp.

   Zasada: plansza odsłony ma DOKŁADNIE wymiar płótna i leży 1:1 na
   ekranie 2, koperta zamknięta jest nałożona rogami na otwartą,
   a klapa obraca się w 3D wokół górnej krawędzi. Po obrocie nakładka
   gaśnie liniowo — pod spodem stoi już ten sam kadr, tylko z otwartą
   kopertą.
   ══════════════════════════════════════════════════════════════ */

/* Plansza odsłony = płótno, przyklejona do góry.
   Bazowo `.plate-stage` skaluje się WYSOKOŚCIĄ okna (3:5), a plansza
   zaproszenia — SZEROKOŚCIĄ płótna. Na telefonie wychodzi prawie to
   samo, ale na szerokim ekranie tło odsłony kończyło się w połowie
   ekranu, a koperta wisiała pod nim. */
body[data-theme="olive-green"] .plate-reveal {
  align-items: flex-start;
  /* Tło strony pod planszą to `#rgScreens`, nie czysta biel — inaczej
     boki ciemniałyby w chwili zamiany. */
  background: var(--rg-cream, #F8FAF3);
}
body[data-theme="olive-green"] .plate-stage {
  width: min(100vw, var(--rg-w, 760px));
  height: calc(min(100vw, var(--rg-w, 760px)) * 5 / 3);
}

/* Odsłona dostaje to samo, co plansza zaproszenia pod nią: powolny
   oddech, maskę wygaszającą górę i dół oraz stałą poświatę strony
   (`body::after` siedzi na z-index 1, a nakładka na 9000, więc barwiła
   zaproszenie, ale już nie odsłonę). Bez tego cały obraz zmieniał ton
   w chwili zamiany. */
body[data-theme="olive-green"] .plate-canvas {
  /* Oddech NIE jest tu animacją: skalę kopiuje z planszy pętla
     `plateMatch` w zaproszenie.html, bo animacje obu warstw ruszają
     w innym momencie (`#rgScreens` startuje ukryty) i fazy się
     rozjeżdżały. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
}
@media (prefers-reduced-motion: reduce) {
  body[data-theme="olive-green"] .plate-canvas { animation: none; }
}
@media (min-aspect-ratio: 3 / 5) {
  body[data-theme="olive-green"] .plate-bleed { display: none; }
}
body[data-theme="olive-green"] .plate-reveal::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  opacity: .3;
  background: radial-gradient(circle at 20% 30%, var(--theme-accent, #B07A70) 0, transparent 50%),
              radial-gradient(circle at 80% 80%, var(--theme-muted, #B07A70) 0, transparent 50%);
  mix-blend-mode: multiply;
}

/* „Dotknij, aby otworzyć" trzyma się dołu PLANSZY, nie dołu okna —
   inaczej na telefonie ląduje ~120 px pod kopertą, już na tle. */
@media (max-aspect-ratio: 3 / 5) {
  body[data-theme="olive-green"] .plate-canvas {
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 9%, #000 86%, transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0%, #000 9%, #000 86%, transparent 100%);
  }
}

/* ── KLAPA I WNĘTRZE ──────────────────────────────────────────
   Obrys wzięty z pliku 01-start/koperta.webp (655 × 532):
     • lewa krawędź klapy: prosta o nachyleniu 1,206, y(0) = 12,0 %,
     • prawa: nachylenie −1,089, y(100 %) = 14,4 %,
     • wierzchołek klapy wypada na (48,5 %, 70,3 %),
     • pieczęć woskowa zajmuje x 40,0–61,2 %, y 49,4–77,3 %,
       środek (50,6 %, 63,4 %) — jedzie razem z klapą, bo fizycznie
       jest do niej przyklejona, więc obrys klapy to trójkąt PLUS
       ośmiokąt pieczęci.
   Wnętrze to gradient w kolorze papieru koperty (spód klapy ma
   w pliku otwartym #D9DBA1, front #ECECC7). */
body[data-theme="olive-green"] .plate-key {
  clip-path: polygon(0% 12%, 40.7% 61%, 40% 63.4%, 43.1% 73.3%, 50.6% 77.4%,
                     58.1% 73.3%, 61.2% 63.4%, 59.7% 58.2%, 100% 14.4%,
                     100% 100%, 0% 100%);
}
body[data-theme="olive-green"] .plate-wnetrze {
  clip-path: polygon(0% 0%, 100% 0%, 100% 14.4%, 59.7% 58.2%, 61.2% 63.4%,
                     58.1% 73.3%, 50.6% 77.4%, 43.1% 73.3%, 40% 63.4%,
                     40.7% 61%, 0% 12%);
  background: linear-gradient(180deg, #D6D89E 0%, #E2E3B4 58%, #EAEBC4 100%);
}
body[data-theme="olive-green"] .plate-klapa {
  clip-path: polygon(0% 0%, 100% 0%, 100% 14.4%, 59.7% 58.2%, 61.2% 63.4%,
                     58.1% 73.3%, 50.6% 77.4%, 43.1% 73.3%, 40% 63.4%,
                     40.7% 61%, 0% 12%);
  transform-origin: 50% 0%;
  transform: perspective(1500px) rotateX(0deg);
  z-index: 3;
  backface-visibility: visible;
}
/* Uwaga na specyficzność: w style.css stoi reguła wyjścia
   `.plate-reveal.opening .plate-layer:not(.plate-key)` (skala 1,08),
   a `:not()` liczy się jak klasa — bez `.plate-layer` w selektorze
   klapa dostaje zwykłe powiększenie zamiast obrotu. */
body[data-theme="olive-green"] .plate-reveal.opening .plate-layer.plate-klapa {
  transform: perspective(1500px) rotateX(-172deg);
  transition: transform 1.05s cubic-bezier(.34, .01, .2, 1);
}
/* Korpus i klapa znikają RAZEM — gasi je wygaszanie całej nakładki. */
body[data-theme="olive-green"] .plate-reveal.opening .plate-layer.plate-key,
body[data-theme="olive-green"] .plate-reveal.opening .plate-layer.plate-wnetrze {
  transform: none;
  opacity: 1;
}
/* Tło odsłony stoi nieruchomo: skala 1,08 z podstawy to był najazd,
   który po zniknięciu nakładki wyglądał jak cofnięcie. */
body[data-theme="olive-green"] .plate-reveal.opening .plate-layer:not(.plate-klapa) {
  transform: none;
}
/* Wygaszenie LINIOWE i dłuższe — krzywa `ease-in-out` najwięcej
   zmienia w środku i stąd brało się wrażenie przeskoku. Start 0,8 s,
   dokładnie gdy klapa kończy obrót; koniec w 2,3 s, przed 2,4 s,
   o której skrypt chowa nakładkę. */
body[data-theme="olive-green"] .plate-reveal.opening {
  /* Zmiana obrazu jest tu większa niż w „Czerni i bieli" (z koperty
     wychodzą hortensje), więc wygaszenie dostaje maksimum tego, co
     mieści się przed 2,4 s — momentem, w którym skrypt chowa nakładkę. */
  transition: opacity 1.6s linear .75s;
}
body[data-theme="olive-green"] .plate-reveal.opening .plate-cta { opacity: 0; transition: opacity .3s; }
@media (prefers-reduced-motion: reduce) {
  body[data-theme="olive-green"] .plate-reveal.opening .plate-klapa,
  body[data-theme="olive-green"] .plate-reveal.opening .plate-key {
    transition: opacity .3s linear;
    transform: none;
  }
}

/* ══════════════════════════════════════════════════════════════
   EKRAN 1 I 2 WG PLIKU ŹRÓDŁOWEGO (2026-08-29)
   „z tekstem full zaproszenie biało zielone.svg", płótno 900 × 1500
   (sześć ekranów w jednym pliku 900 × 8975,5; górne krawędzie plansz
   to y = 1,8 / 1487,6 / 2972,9 / 4433,3 / 5918,6 / 7463,9).

   Ekran 1 (okładka) niesie w projekcie dwa napisy:
     • kaligrafią „You received a messege from / Robert & Patrycja"
       — y 22,92 %, 48 px,
     • „Dotknij aby otworzyć!" krojem The Seasons — y 78,29 %, 48 px.
   U nas odsłona miała tylko ten drugi, i to przyklejony do dołu okna.

   Ekran 2 ma cztery bloki (wszystko Now-Light 20 px poza imionami):
     • imiona kaligrafią 48 px — linia bazowa 55,49 %,
     • zdanie zapraszające — 59,73 %,
     • licznik w trzech kolumnach (x 27,4 / 48,1 / 68,7 %) z dwukropkami
       55 px między nimi — 82,79 %,
     • data z miejscem — 88,02 %.
   Pozycje poniżej to te liczby przeliczone z linii bazowej na górną
   krawędź bloku (odjęte ~0,8 wysokości pisma).
   ══════════════════════════════════════════════════════════════ */

/* --- Ramka płótna dla ekranu 2 --- */
body[data-theme="olive-green"] .rg-date {
  position: relative;
  padding-top: 0;
  padding-bottom: 0;
  min-height: calc(var(--rg-w, 760px) * 5 / 3);
}
body[data-theme="olive-green"] .rg-date > .rg-bg {
  height: calc(var(--rg-w, 760px) * 5 / 3);
}
body[data-theme="olive-green"] .rg-date > .rg-inner {
  position: absolute;
  left: 50%;
  translate: -50% 0;
  top: 0;
  width: var(--rg-w, 760px);
  max-width: 100vw;
  height: calc(var(--rg-w, 760px) * 5 / 3);
  margin: 0;
  padding: 0;
  text-align: center;
  z-index: 3;
}
body[data-theme="olive-green"] .rg-date > .rg-inner > * {
  position: absolute;
  margin: 0;
}

/* Imiona — jedna linia kaligrafii, tak jak w projekcie. */
body[data-theme="olive-green"] .rg-date .rg-names {
  left: 15%;
  width: 70%;
  top: 52.9%;
  font-family: var(--rg-script);
  font-size: clamp(26px, calc(var(--rg-w, 760px) * 0.0533), 48px);
  line-height: 1.15;
  color: var(--rg-ink);
}
/* W projekcie imiona stoją w JEDNEJ linii („Robert & Patrycja"),
   a podstawa robi z „&" osobny wiersz — cofamy to. */
body[data-theme="olive-green"] .rg-date .rg-names .amp {
  display: inline;
  font-size: .85em;
  line-height: inherit;
  margin: 0;
}
body[data-theme="olive-green"] .rg-date .rg-sub {
  left: 20%;
  width: 60%;
  top: 58.6%;
  margin: 0;
  font-family: var(--rg-text);
  font-size: clamp(11px, calc(var(--rg-w, 760px) * 0.0222), 20px);
  line-height: 1.6;
  letter-spacing: .01em;
  text-transform: none;
  color: var(--rg-ink);
}
/* Licznik: trzy kolumny rozstawione jak w projekcie, dwukropki jako
   ::before drugiej i trzeciej kolumny. */
body[data-theme="olive-green"] .rg-date .rg-count {
  left: 22%;
  width: 56%;
  top: 81.7%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0;
}
body[data-theme="olive-green"] .rg-date .rg-count > div {
  position: relative;
  flex: 1 1 0;
  text-align: center;
}
body[data-theme="olive-green"] .rg-date .rg-count > div + div::before {
  content: ":";
  position: absolute;
  left: -.1em;
  top: -.15em;
  font-family: var(--rg-text);
  font-size: clamp(24px, calc(var(--rg-w, 760px) * 0.0611), 55px);
  line-height: 1;
  color: var(--rg-ink);
}
body[data-theme="olive-green"] .rg-date .rg-count .num,
body[data-theme="olive-green"] .rg-date .rg-count .lbl {
  font-family: var(--rg-text);
  font-size: clamp(11px, calc(var(--rg-w, 760px) * 0.0222), 20px);
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  color: var(--rg-ink);
}
body[data-theme="olive-green"] .rg-date .rg-dateline {
  left: 20%;
  width: 60%;
  top: 86.9%;
  font-family: var(--rg-text);
  font-size: clamp(11px, calc(var(--rg-w, 760px) * 0.0222), 20px);
  line-height: 1.6;
  color: var(--rg-ink);
}

/* --- Ekran 1: napis kaligrafią nad kopertą i wezwanie pod nią --- */
body[data-theme="olive-green"] .plate-canvas::before {
  content: "You received a message";
  position: absolute;
  left: 12%;
  right: 12%;
  top: 21.4%;
  z-index: 5;
  font-family: var(--rg-script);
  font-size: clamp(22px, calc(var(--rg-w, 760px) * 0.0533), 48px);
  line-height: 1.2;
  text-align: center;
  color: var(--rg-ink);
  pointer-events: none;
}
body[data-theme="olive-green"] .plate-cta {
  /* Napis jest dzieckiem nakladki na cale okno, wiec procent liczylby
     sie od ekranu — podajemy pozycje w jednostkach PLOTNA, zeby stal
     tam, gdzie w projekcie (78,29 % wysokosci planszy). */
  bottom: auto;
  top: calc(min(100vw, var(--rg-w, 760px)) * 5 / 3 * 0.772);
  white-space: nowrap;
  font-family: var(--rg-display);
  font-size: clamp(12px, calc(var(--rg-w, 760px) * 0.0289), 26px);
  letter-spacing: .12em;
  color: var(--rg-ink);
}

/* ══════════════════════════════════════════════════════════════
   EKRANY 3–6 WG PLIKU ŹRÓDŁOWEGO (2026-08-29)
   Co pokazało porównanie całej mapy z projektem:
     • paleta była zielona, a w pliku teksty są CIEMNOBRĄZOWE
       (#382C1F), przyciski oliwkowe #556452, pole wiadomości #F2F0E4,
       odpowiedzi RSVP #324229,
     • kroje: The Seasons (nagłówki) i NewIconScript (kaligrafia) —
       renderowały się Cormorantem i Pinyon Script,
     • ekran 2 gubił BIAŁY PAS u dołu planszy (w pliku to prostokąt
       0–100 % szerokości, y 76,75–99,17 %), na którym stoi licznik
       i data,
     • dress code miał w pliku CZTERY PRÓBKI KOLORÓW
       (#556452, #A99E90, #3A3A3D, #C3C3C3) — u nas nie było ich wcale,
       bo motyw nie miał `parts.dressPalette` i renderer sięgał po
       awaryjną różową paletę motywu 1,
     • wszystkie sekcje szły wyśrodkowaną kolumną, a projekt ma bloki
       w konkretnych miejscach planszy.
   Liczby poniżej to pozycje z pliku przeliczone z linii bazowej na
   górną krawędź bloku (odjęte 0,8 wysokości pisma), stopnie pisma
   jako px/900 szerokości płótna.
   ══════════════════════════════════════════════════════════════ */

body[data-theme="olive-green"] {
  --rg-ink:    #382C1F;   /* nagłówki i teksty */
  --rg-body:   #382C1F;
  --rg-accent: #556452;   /* przyciski z planszy */
  --rg-pole:   #F2F0E4;   /* pole wiadomości */
  --rg-odp:    #324229;   /* odpowiedzi RSVP */
  /* The Seasons → Bodoni Moda (ten sam zamiennik co w motywach 4 i 5),
     NewIconScript → Great Vibes (jak w „Czerni i bieli"). */
  --rg-display: 'Bodoni Moda', serif;
  --rg-serif:   'Bodoni Moda', serif;
  --rg-script:  'Great Vibes', cursive;
}

/* --- Ramka płótna dla pozostałych ekranów --- */
body[data-theme="olive-green"] .rg-schedule,
body[data-theme="olive-green"] .rg-story,
body[data-theme="olive-green"] .rg-location,
body[data-theme="olive-green"] .rg-rsvp {
  position: relative;
  padding-top: 0;
  padding-bottom: 0;
  min-height: calc(var(--rg-w, 760px) * 5 / 3);
}
/* Lokalizacja jest wyższa od płótna o zjazd dress code'u plus jego
   własną wysokość poniżej 94 % — inaczej opis dress code'u wychodziłby
   poza sekcję i wpadał pod ekran RSVP. */
body[data-theme="olive-green"] .rg-location {
  min-height: calc(var(--rg-w, 760px) * 5 / 3 * 1.18);
}
body[data-theme="olive-green"] .rg-schedule > .rg-bg,
body[data-theme="olive-green"] .rg-story > .rg-bg,
body[data-theme="olive-green"] .rg-location > .rg-bg,
body[data-theme="olive-green"] .rg-rsvp > .rg-bg {
  height: calc(var(--rg-w, 760px) * 5 / 3);
}
body[data-theme="olive-green"] .rg-schedule > .rg-inner,
body[data-theme="olive-green"] .rg-story > .rg-inner,
body[data-theme="olive-green"] .rg-location > .rg-inner,
body[data-theme="olive-green"] .rg-rsvp > .rg-inner {
  position: absolute;
  left: 50%;
  translate: -50% 0;
  top: 0;
  width: var(--rg-w, 760px);
  max-width: 100vw;
  height: calc(var(--rg-w, 760px) * 5 / 3);
  margin: 0;
  padding: 0;
  text-align: center;
  z-index: 3;
}
body[data-theme="olive-green"] .rg-schedule > .rg-inner > *,
body[data-theme="olive-green"] .rg-story > .rg-inner > *,
body[data-theme="olive-green"] .rg-location > .rg-inner > * {
  position: absolute;
  margin: 0;
}
/* Wspólny krój nagłówków — w pliku wszystkie są The Seasons 100 px
   (RSVP i „Kilka słów" 59 px). */
body[data-theme="olive-green"] .rg-h {
  font-family: var(--rg-display);
  font-style: normal;
  font-weight: 400;
  text-transform: none;
  letter-spacing: .01em;
  line-height: 1.05;
  color: var(--rg-ink);
}

/* ── EKRAN 2 — BIAŁY PAS Z LICZNIKIEM ────────────────────────
   W pliku to prostokąt, nie grafika: bez niego licznik i data stały
   wprost na tapecie i ginęły. */
body[data-theme="olive-green"] .rg-date::after {
  content: "";
  position: absolute;
  left: 50%;
  translate: -50% 0;
  width: var(--rg-w, 760px);
  max-width: 100vw;
  top: calc(var(--rg-w, 760px) * 5 / 3 * 0.7675);
  height: calc(var(--rg-w, 760px) * 5 / 3 * 0.2242);
  background: #FFFFFF;
  z-index: 1;
  pointer-events: none;
}

/* ── EKRAN 3 — HARMONOGRAM (13.10, przebudowa) ───────────────
   Dotąd plansza miała WRYSOWANE cztery kreski, a wiersze próbowały
   na nich usiąść. To działało tylko przy czterech punktach, z których
   każdy mieści się w jednej linijce: przy trzech zostawała pusta kreska,
   przy pięciu i sześciu wiersze schodziły z kresek, a dłuższa nazwa
   łamała się i spychała tekst — na telefonie pierwszy punkt wychodził
   nawet nad planszę.

   Teraz plansza jest CZYSTA (03-schedule/papier_czysty.webp — kreski
   wyretuszowane z pliku), a kreski rysuje CSS między punktami. Lista
   stoi środkiem w polu tabliczki nad wstążką, więc przy 1–6 punktach
   i dowolnej długości opisów jest zawsze wyśrodkowana w pionie
   i w poziomie, a kreski zawsze są między wierszami.

   Pole tabliczki z pliku (810×1193, warstwa l 9,367 t 17,88 w 85,144
   h 75,472): wnętrze ramki od ~26 % do ~59,5 % kadru (niżej zaczyna się
   wstążka), oś tabliczki na 49,6 % szerokości. Pole listy: 27,2–60,8 %
   (środek 44 % — łuk tabliczki u góry jest węższy, więc optyczny środek
   leży trochę niżej od geometrycznego). Gdy lista się nie mieści (wąski
   telefon i 6 punktów), skrypt zmniejsza --rg-k — patrz --rg-fit. Kreska jak w pliku:
   kreskowana, #A9AD7E, ~0,28 % szerokości płótna grubości. */
body[data-theme="olive-green"] .rg-schedule .rg-h {
  left: 10%;
  width: 80%;
  top: 7.75%;
  font-size: clamp(30px, calc(var(--rg-w, 760px) * 0.1111), 100px);
}
body[data-theme="olive-green"] .rg-schedule .rg-timeline {
  --og-f: clamp(10.5px, calc(var(--rg-w, 760px) * 0.0222), 20px);
  --og-odstep: calc(var(--rg-w, 760px) * 5 / 3 * 0.0125);
  --rg-fit: 1;
  left: 24.6%;
  width: 50%;
  top: 27.2%;
  height: 33.6%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: 0;
  text-align: center;
}
/* Pięć i sześć punktów: ciaśniej i odrobinę mniejszym stopniem, żeby
   lista nie wyszła z pola tabliczki. */
body[data-theme="olive-green"] .rg-schedule .rg-timeline:has(.rg-item:nth-child(5)) {
  --og-f: clamp(10px, calc(var(--rg-w, 760px) * 0.0205), 18.5px);
  --og-odstep: calc(var(--rg-w, 760px) * 5 / 3 * 0.0088);
}
body[data-theme="olive-green"] .rg-schedule .rg-timeline:has(.rg-item:nth-child(6)) {
  --og-f: clamp(9.5px, calc(var(--rg-w, 760px) * 0.019), 17px);
  --og-odstep: calc(var(--rg-w, 760px) * 5 / 3 * 0.0066);
}
body[data-theme="olive-green"] .rg-schedule .rg-item {
  position: relative;
  flex: 0 0 auto;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: calc(var(--og-odstep) * var(--rg-k, 1)) 0;
  display: block;
  box-sizing: border-box;
}
body[data-theme="olive-green"] .rg-schedule .rg-item + .rg-item::before {
  content: "";
  position: absolute;
  left: 9%;
  right: 9%;
  top: 0;
  height: max(1px, calc(var(--rg-w, 760px) * 0.0028));
  background: repeating-linear-gradient(90deg,
    #A9AD7E 0 calc(var(--rg-w, 760px) * 0.0095),
    transparent calc(var(--rg-w, 760px) * 0.0095) calc(var(--rg-w, 760px) * 0.013));
  pointer-events: none;
}
body[data-theme="olive-green"] .rg-schedule .rg-item .ico,
body[data-theme="olive-green"] .rg-schedule .rg-item .pearl { display: none; }
body[data-theme="olive-green"] .rg-schedule .rg-item .txt {
  display: block;
  text-align: center;
}
body[data-theme="olive-green"] .rg-schedule .rg-item .time,
body[data-theme="olive-green"] .rg-schedule .rg-item .desc {
  display: block;
  font-family: var(--rg-text);
  font-style: normal;
  letter-spacing: 0;
  text-transform: none;
  color: var(--rg-ink);
  margin: 0;
  text-wrap: balance;
}
body[data-theme="olive-green"] .rg-schedule .rg-item .time {
  font-size: calc(var(--og-f) * var(--rg-k, 1));
  font-weight: 500;
  line-height: 1.3;
}
body[data-theme="olive-green"] .rg-schedule .rg-item .godz { white-space: nowrap; }
body[data-theme="olive-green"] .rg-schedule .rg-item .desc {
  font-size: calc(var(--og-f) * 0.9 * var(--rg-k, 1));
  font-weight: 300;
  line-height: 1.35;
  margin-top: .15em;
  opacity: .9;
}
body[data-theme="olive-green"] .rg-schedule .rg-item .desc:empty { display: none; }

/* ── EKRAN 4 — HISTORIA PARY ─────────────────────────────────
   Nagłówek na 9,31 %, zdjęcie pary jest warstwą planszy, tekst pod
   nim na 73,52 % (linia bazowa). */
/* Projekt stawia ten nagłówek na 3,98 % płótna, ale on nie ma paska
   nawigacji strony — u nas „Amoré / PL / EDYTUJ" wchodziłoby wprost
   na napis. Schodzimy do 7,75 %, czyli na wysokość nagłówka
   harmonogramu, żeby wszystkie ekrany zaczynały się tak samo. */
body[data-theme="olive-green"] .rg-story .rg-h {
  left: 10%;
  width: 80%;
  top: 7.75%;
  font-size: clamp(30px, calc(var(--rg-w, 760px) * 0.1111), 100px);
}
body[data-theme="olive-green"] .rg-story .rg-heart,
body[data-theme="olive-green"] .rg-story .rg-collage,
body[data-theme="olive-green"] .rg-story .rg-postcard { display: none; }
body[data-theme="olive-green"] .rg-story .rg-cols {
  left: 25%;
  width: 50%;
  top: 72.45%;
  display: block;
  text-align: center;
}
body[data-theme="olive-green"] .rg-story .rg-cols .rg-p {
  display: inline;
  font-family: var(--rg-text);
  font-style: normal;
  font-size: clamp(11px, calc(var(--rg-w, 760px) * 0.0222), 20px);
  line-height: 1.5;
  color: var(--rg-ink);
  margin: 0;
}
body[data-theme="olive-green"] .rg-story .rg-cols .rg-p:first-child::after { content: " "; }

/* ── EKRAN 5 — LOKALIZACJA I DRESS CODE ──────────────────────
   Projekt nie ma tu mapy, tylko ZDJĘCIE MIEJSCA (warstwa planszy,
   slot na zdjęcie pary), pod nim oliwkowy przycisk „Dojazd"
   (y 51,23 %, x 39,94 %, szer. 20,33 %) i opis na 58,13 %.
   Dolna połowa to dress code: nagłówek na 78,60 %, cztery próbki
   kolorów na 82,63 % (11,02 × 3,46 % płótna, odstęp 4,73 %)
   i opis na 90,44 %. */
/* Karta lokalizacji jest u nas białym kaflem z cieniem — w projekcie
   nie ma jej wcale, treść leży wprost na planszy. */
body[data-theme="olive-green"] .rg-location > .rg-inner > .rg-card {
  position: absolute;
  inset: 0;
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  margin: 0;
  min-height: 0;
}
body[data-theme="olive-green"] .rg-location .rg-card > * {
  position: absolute;
  margin: 0;
}
body[data-theme="olive-green"] .rg-location .rg-h {
  left: 10%;
  width: 80%;
  top: 7.75%;
  font-size: clamp(30px, calc(var(--rg-w, 760px) * 0.1111), 100px);
}
/* ── MAPA DOJAZDU ────────────────────────────────────────────
   Dostawa z 29.08 („mapka zaproszenie biało-zielone (3).png") dorysowała
   na kadrze 900×1500 ramkę mapy: x 105–809, y 394–1105, obwódka 6 px
   w kolorze #A9B074. Wcześniej ten motyw jako jedyny nie miał mapy wcale.

   Szerokość i kolor bierzemy z pliku 1:1. Wysokości nie da się wziąć
   wprost: w dostawie mapa siada DOKŁADNIE na kopercie (koperta to
   y 398–929 kadru) i jest od niej większa, a koperta ze zdjęciem
   i kwiatami w tym motywie zostaje. Mapa idzie więc POD adres,
   a blok dress code'u zjeżdża o tyle, ile mapa zajmuje — ten ekran
   nie ma warstwy tła (`05-location` to tylko koperta, kwiaty i zdjęcie),
   więc wydłużenie sekcji niczego nie rozciąga. Kotwica `.rg-bg` i tak
   jest przypięta do wysokości płótna regułą wyżej. */
body[data-theme="olive-green"] {
  --og-mapa-l: 11.667%;                 /* 105 / 900 */
  --og-mapa-w: 78.222%;                 /* 704 / 900 */
  --og-mapa-t: 66.5%;                   /* tuż pod dolna krawędzią koperty */
  --og-mapa-ramka: max(2px, calc(var(--rg-w, 760px) * 0.0067));   /* 6 px na 900 */
  /* Mapa ma proporcję 2:1, czyli 23,47 % wysokości płótna. Dress code
     schodzi o tyle, żeby między nią a nagłówkiem zostało ok. 4 %. */
  --og-dress-zjazd: 21%;
}
body[data-theme="olive-green"] .rg-location .rg-map {
  display: block;
  left: var(--og-mapa-l);
  width: var(--og-mapa-w);
  top: var(--og-mapa-t);
  height: auto;
  aspect-ratio: 2 / 1;
  border: var(--og-mapa-ramka) solid #A9B074;
  border-radius: 0;
  margin: 0;
  background: #F3F3F7;                  /* kolor podkładu mapy z pliku */
}
body[data-theme="olive-green"] .rg-location .rg-loc-cards { display: none; }
body[data-theme="olive-green"] .rg-location .rg-btn {
  left: 39.94%;
  width: 20.33%;
  top: 51.23%;
  height: calc(var(--rg-w, 760px) * 5 / 3 * 0.035);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 0;
  background: var(--rg-accent);
  color: #FFFFFF;
  font-family: var(--rg-text);
  font-size: clamp(11px, calc(var(--rg-w, 760px) * 0.0287), 26px);
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
body[data-theme="olive-green"] .rg-location .rg-btn:hover { background: #46543F; }
body[data-theme="olive-green"] .rg-location .rg-addr {
  left: 22%;
  width: 56%;
  top: 57.33%;
  font-family: var(--rg-text);
  font-style: normal;
  font-size: clamp(10px, calc(var(--rg-w, 760px) * 0.0167), 15px);
  line-height: 1.6;
  color: var(--rg-ink);
}

/* Dress code leży na tej samej planszy co lokalizacja. */
body[data-theme="olive-green"] .rg-dress {
  position: absolute;
  left: 50%;
  translate: -50% 0;
  /* Zjazd robi miejsce na mapę dojazdu (patrz --og-mapa-*). Przesuwamy
     CAŁY blok, więc wewnętrzne procenty z planszy zostają nietknięte. */
  top: calc(var(--rg-w, 760px) * 5 / 3 * 0.21);
  width: var(--rg-w, 760px);
  max-width: 100vw;
  height: calc(var(--rg-w, 760px) * 5 / 3);
  margin: 0;
  padding: 0;
  background: none;
  pointer-events: none;
  z-index: 3;
}
body[data-theme="olive-green"] .rg-dress .rg-inner {
  position: absolute;
  inset: 0;
  translate: none;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  text-align: center;
}
body[data-theme="olive-green"] .rg-dress .rg-inner > * {
  position: absolute;
  margin: 0;
}
body[data-theme="olive-green"] .rg-dress .rg-h {
  left: 10%;
  width: 80%;
  top: 73.27%;
  font-size: clamp(30px, calc(var(--rg-w, 760px) * 0.1111), 100px);
}
/* Cztery próbki w jednym rzędzie — w pliku to PROSTOKĄTY, nie kółka,
   więc i u nas są prostokątne. Kolory idą z `parts.dressPalette`. */
body[data-theme="olive-green"] .rg-dress-grid {
  display: flex;
  justify-content: space-between;
  align-items: center;
  left: 20.51%;
  width: 58%;
  top: 82.63%;
  height: calc(var(--rg-w, 760px) * 5 / 3 * 0.0346);
  margin: 0;
  gap: calc(var(--rg-w, 760px) * 0.0473);
}
body[data-theme="olive-green"] .rg-dress-grid .rg-dress-fig { display: none; }
body[data-theme="olive-green"] .rg-dress-grid .rg-swatches {
  flex-direction: row;
  align-items: center;
  gap: calc(var(--rg-w, 760px) * 0.0473);
}
body[data-theme="olive-green"] .rg-dress-grid .rg-sw {
  width: calc(var(--rg-w, 760px) * 0.1102);
  height: calc(var(--rg-w, 760px) * 5 / 3 * 0.0346);
  border-radius: 0;
  box-shadow: none;
}
body[data-theme="olive-green"] .rg-dress .rg-p {
  left: 22%;
  width: 56%;
  top: 89.64%;
  margin: 0 !important;
  font-family: var(--rg-text);
  font-style: normal;
  font-size: clamp(10px, calc(var(--rg-w, 760px) * 0.0167), 15px);
  line-height: 1.6;
  color: var(--rg-ink);
}

/* ── EKRAN 6 — RSVP I ZAKOŃCZENIE NA JEDNEJ PLANSZY ──────────
   „RSVP" 59 px na 15,37 %, pytanie 23 px na 19,22 %, odpowiedzi
   od 22,44 %, kreska na 28,78 % (x 32,1–68,4 %), etykieta pola na
   32,04 %, pole #F2F0E4 na 32,75 % (x 33,24 %, szer. 33,51 %,
   wys. 5,30 %), przycisk oliwkowy na 41,13 %. Niżej zakończenie:
   „Kilka słów" na 80,50 %, kaligraficzne „Let's celebrate together"
   na 89,76 % i zdanie od pary na 93,10 %. */
body[data-theme="olive-green"] .rg-rsvp > .rg-inner > .rg-card {
  position: absolute;
  inset: 0;
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  margin: 0;
  min-height: 0;
}
body[data-theme="olive-green"] .rg-rsvp .rg-card > * {
  position: absolute;
  margin: 0;
}
body[data-theme="olive-green"] .rg-rsvp .rg-h {
  left: 20%;
  width: 60%;
  top: 12.22%;
  font-size: clamp(20px, calc(var(--rg-w, 760px) * 0.0656), 59px);
}
body[data-theme="olive-green"] .rg-rsvp .rg-q {
  left: 20%;
  width: 60%;
  top: 17.99%;
  font-family: var(--rg-text);
  font-style: normal;
  font-size: clamp(10px, calc(var(--rg-w, 760px) * 0.0256), 23px);
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--rg-ink);
}
body[data-theme="olive-green"] .rg-rsvp .rg-radios {
  left: 20%;
  width: 60%;
  top: 21.34%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--rg-w, 760px) * 5 / 3 * 0.008);
}
body[data-theme="olive-green"] .rg-rsvp .rg-radio {
  font-family: var(--rg-text);
  font-style: normal;
  font-size: clamp(10px, calc(var(--rg-w, 760px) * 0.0229), 21px);
  color: var(--rg-odp);
}
body[data-theme="olive-green"] .rg-rsvp .rg-radio .dot { border-color: var(--rg-odp); }
/* Kreska pod odpowiedziami — w pliku linia 0,75 px od x 32,1 do 68,4 %. */
body[data-theme="olive-green"] .rg-rsvp .rg-sep {
  display: block;
  left: 32.13%;
  width: 36.29%;
  top: 28.78%;
  height: 0;
  border: 0;
  border-top: 1px solid rgba(56, 44, 31, .45);
  background: none;
}
body[data-theme="olive-green"] .rg-rsvp .rg-msg-label {
  left: 20%;
  width: 60%;
  top: 30.81%;
  font-family: var(--rg-text);
  font-style: normal;
  font-size: clamp(10px, calc(var(--rg-w, 760px) * 0.0256), 23px);
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--rg-ink);
}
body[data-theme="olive-green"] .rg-rsvp .rg-textarea {
  left: 33.24%;
  width: 33.51%;
  top: 32.75%;
  height: calc(var(--rg-w, 760px) * 5 / 3 * 0.053);
  min-height: 0;
  background: var(--rg-pole);
  border: none;
  border-radius: 0;
  color: var(--rg-ink);
  font-family: var(--rg-text);
  font-size: clamp(10px, calc(var(--rg-w, 760px) * 0.0178), 16px);
}
body[data-theme="olive-green"] .rg-rsvp .rg-btn {
  left: 38.42%;
  width: 23.16%;
  top: 41.13%;
  height: calc(var(--rg-w, 760px) * 5 / 3 * 0.0399);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 0;
  background: var(--rg-accent);
  color: #FFFFFF;
  font-family: var(--rg-text);
  font-size: clamp(11px, calc(var(--rg-w, 760px) * 0.0326), 29px);
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
body[data-theme="olive-green"] .rg-rsvp .rg-btn:hover { background: #46543F; }
/* Prośba o potwierdzenie zostaje W SEKCJI RSVP, na jasnozielonym —
   tylko schodzi pod bukiet. Zmierzone na planszy: łodygi bukietu
   kończą się na 68,5 % płótna, a jasnozielone pole trwa do 73,8 %
   (niżej zaczyna się liściaste tło zakończenia). Napis siada w tym
   pustym pasie, na 69,5 %. Wcześniej leżał na owalnej planszy tuż
   pod przyciskiem, a przez chwilę — błędnie — pod szwem, czyli już
   na tle „Kilku słów od pary". */
body[data-theme="olive-green"] .rg-rsvp .rg-note {
  left: 17%;
  width: 66%;
  top: 69.5%;
  font-family: var(--rg-text);
  font-size: clamp(9px, calc(var(--rg-w, 760px) * 0.0156), 14px);
  line-height: 1.5;
  color: var(--rg-ink);
  opacity: .7;
}
/* Na wąskim ekranie stopień pisma opiera się o dolną granicę clamp,
   więc napis łamie się na dwa wiersze i nie mieści się w szczelinie
   między grafiką a nagłówkiem. Szerszy blok trzyma go w jednej linii. */
@media (max-width: 719px) {
  body[data-theme="olive-green"] .rg-rsvp .rg-note {
    left: 5%;
    width: 90%;
  }
}

/* Zakończenie na tej samej planszy. */
body[data-theme="olive-green"] .rg-outro-inline {
  position: absolute;
  left: 50%;
  translate: -50% 0;
  top: 0;
  width: var(--rg-w, 760px);
  max-width: 100vw;
  height: calc(var(--rg-w, 760px) * 5 / 3);
  margin: 0;
  padding: 0;
  background: none;
  z-index: 3;
}
body[data-theme="olive-green"] .rg-outro-inline .rg-inner {
  position: absolute;
  inset: 0;
  translate: none;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  text-align: center;
}
body[data-theme="olive-green"] .rg-outro-inline .rg-inner > * {
  position: absolute;
  margin: 0;
}
/* Projekt nie ma tu monogramu — jest kaligraficzne zdanie, które
   dokładamy jako element ozdobny nad tekstem od pary. */
body[data-theme="olive-green"] .rg-outro-inline .rg-monogram { display: none; }
body[data-theme="olive-green"] .rg-outro-inline .rg-h {
  left: 15%;
  width: 70%;
  top: 77.35%;
  font-size: clamp(20px, calc(var(--rg-w, 760px) * 0.0656), 59px);
}
body[data-theme="olive-green"] .rg-outro-inline .rg-cols {
  left: 18%;
  width: 64%;
  top: 91.87%;
  display: block;
  text-align: center;
}
body[data-theme="olive-green"] .rg-outro-inline .rg-cols::before {
  content: "Let’s celebrate together";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--rg-w, 760px) * 5 / 3 * -0.0504);
  font-family: var(--rg-script);
  font-size: clamp(18px, calc(var(--rg-w, 760px) * 0.0611), 55px);
  line-height: 1.1;
  color: var(--rg-ink);
}
body[data-theme="olive-green"] .rg-outro-inline .rg-cols .rg-p {
  display: inline;
  font-family: var(--rg-text);
  font-style: normal;
  font-size: clamp(10px, calc(var(--rg-w, 760px) * 0.0256), 23px);
  line-height: 1.5;
  color: var(--rg-ink);
  margin: 0;
}
body[data-theme="olive-green"] .rg-outro-inline .rg-cols .rg-p:first-child::after { content: " "; }

/* ══════════════════════════════════════════════════════════════
   13.10 — POPRAWKI WG PLANSZY ZBIORCZEJ (ekrany 4–6)
   ══════════════════════════════════════════════════════════════ */

/* ── EKRAN 4: HISTORIA ────────────────────────────────────────
   Na telefonie linijki opisu stały co ~34 px: kontener ma czcionkę
   16 px z interlinią 1,6, a akapity są `inline`, więc wysokość linii
   brała się z kontenera, nie z 11-pikselowego tekstu — opis wychodził
   poza ekran. Kontener dostaje stopień i interlinię opisu. Blok stoi
   tuż pod wiankiem, jak na planszy (pierwsza linia 73,5 %). */
body[data-theme="olive-green"] .rg-story .rg-cols {
  left: 18%;
  width: 64%;
  top: 72.6%;   /* v349: wianek ze zdjęciem większy — kończy się na 71,2 % */
  font-size: clamp(11px, calc(var(--rg-w, 760px) * 0.0222), 20px);
  line-height: 1.55;
}
body[data-theme="olive-green"] .rg-story .rg-cols .rg-p { line-height: inherit; }

/* ── EKRAN 5: LOKALIZACJA ─────────────────────────────────────
   Warstwy (znaczek, kwiaty, koperta) zjechały w js/app.js o 6,73 pkt,
   żeby nagłówek nie wchodził na znaczek — przycisk i adres jadą o tyle
   samo. Tło ekranu jest na planszy białe (u nas prześwitywała poświata
   strony). Mapa: ramka #A9B074 z dostawy, ale węższa (64 % płótna,
   2:1), żeby ekran nie rósł ponad potrzebę; dress code siada 3,7 pkt
   pod nią. */
body[data-theme="olive-green"] .rg-location {
  background: #FFFFFF;
  min-height: calc(var(--rg-w, 760px) * 5 / 3 * 1.19);
}
body[data-theme="olive-green"] .rg-location .rg-btn  { top: 57.96%; }
body[data-theme="olive-green"] .rg-location .rg-addr { top: 64.06%; }
body[data-theme="olive-green"] .rg-location .rg-map {
  left: 18%;
  width: 64%;
  top: 72.6%;
  aspect-ratio: 2 / 1;
  box-shadow: 0 6px 18px rgba(56, 44, 31, .12);
}
body[data-theme="olive-green"] .rg-dress {
  top: calc(var(--rg-w, 760px) * 5 / 3 * 0.222);
}
/* Na telefonie opis dress code'u ma 3 linijki (podłoga 10 px) —
   sekcja musi je zmieścić, inaczej ostatnia wchodzi pod RSVP. */
@media (max-width: 600px) {
  body[data-theme="olive-green"] .rg-location { min-height: calc(var(--rg-w, 760px) * 5 / 3 * 1.23); }
}

/* ── EKRAN 6: RSVP ────────────────────────────────────────────
   „WYŚLIJ RSVP" grubym Poppinsem 25 px wypełniało przycisk od krawędzi
   do krawędzi (na planszy napis ma wokół wyraźny margines). */
body[data-theme="olive-green"] .rg-rsvp .rg-btn {
  left: 37%;
  width: 26%;
  font-size: clamp(10px, calc(var(--rg-w, 760px) * 0.0245), 22px);
  font-weight: 500;
  letter-spacing: .08em;
}

/* ── ZAKOŃCZENIE ──────────────────────────────────────────────
   Słowa od pary były przypięte górą na 91,9 % — trzy linijki kończyły
   się na 98,8 %, a na telefonie wychodziły poza ekran. Teraz stoją
   środkiem na środku pasa pod kaligrafią (87,5–98,5 %, środek 93 %),
   więc przy jednym zdaniu i przy kilku są zawsze pośrodku. Nagłówek
   i kaligrafia podjeżdżają, żeby pas był wyższy. Kaligrafia po polsku,
   gdy zaproszenie jest po polsku (na planszy to angielski wypełniacz,
   tak jak „SEND RSVP" i „MESSAGE FOR COUPLE"). */
body[data-theme="olive-green"] .rg-outro-inline .rg-h { top: 75.9%; }
body[data-theme="olive-green"] .rg-outro-inline .rg-cols {
  left: 16%;
  width: 68%;
  top: 93%;
  translate: 0 -50%;
  font-size: clamp(10px, calc(var(--rg-w, 760px) * 0.0222), 20px);
  line-height: 1.5;
}
body[data-theme="olive-green"] .rg-outro-inline .rg-cols .rg-p {
  font-size: inherit;
  line-height: inherit;
}
/* Kaligrafia nie należy już do bloku opisu (ten ma zmienną wysokość),
   tylko stoi na stałej wysokości kadru — jako ::after nagłówka. */
body[data-theme="olive-green"] .rg-outro-inline .rg-cols::before { content: none; }
body[data-theme="olive-green"] .rg-outro-inline .rg-h::after {
  content: "Let’s celebrate together";
  display: block;
  margin-top: calc(var(--rg-w, 760px) * 5 / 3 * 0.022);
  font-family: var(--rg-script);
  font-size: clamp(18px, calc(var(--rg-w, 760px) * 0.0611), 55px);
  line-height: 1.1;
  color: var(--rg-ink);
}
html[lang="pl"] body[data-theme="olive-green"] .rg-outro-inline .rg-h::after {
  content: "Świętujmy razem";
}
/* Telefon: stopień opisu stoi na podłodze 10 px, więc dłuższe słowa
   od pary łamały się na 5–6 linijek i wychodziły poza pas — tu, na tle
   z liśćmi, nic nie ogranicza szerokości, więc blok jest szerszy. */
@media (max-width: 480px) {
  body[data-theme="olive-green"] .rg-outro-inline .rg-cols { left: 7%; width: 86%; }
}
@media (max-width: 359px) {
  body[data-theme="olive-green"] .rg-outro-inline .rg-h    { top: 74.6%; }
  body[data-theme="olive-green"] .rg-outro-inline .rg-cols { top: 92.4%; }
}

/* ── KRÓJ OPISÓW ──────────────────────────────────────────────
   Na planszy wszystkie opisy są krojem Now-Light (cienki, prosty,
   bez kursywy) — u nas zdanie zapraszające szło kursywą, a reszta
   zwykłą grubością Poppinsa. Poppins 300 to najbliższy odpowiednik. */
body[data-theme="olive-green"] .rg-date .rg-sub {
  font-style: normal;
  font-weight: 300;
  font-size: clamp(10px, calc(var(--rg-w, 760px) * 0.0222), 20px);
  line-height: 1.5;
}
body[data-theme="olive-green"] .rg-date .rg-dateline,
body[data-theme="olive-green"] .rg-date .rg-count .lbl,
body[data-theme="olive-green"] .rg-story .rg-cols .rg-p,
body[data-theme="olive-green"] .rg-location .rg-addr,
body[data-theme="olive-green"] .rg-dress .rg-p,
body[data-theme="olive-green"] .rg-outro-inline .rg-cols .rg-p {
  font-weight: 300;
}
/* Telefon: zdanie zapraszające łamało się na 3 linijki i wychodziło
   pod dolną krawędź koperty, a licznik (dwie linijki: liczba i podpis)
   nachodził na datę. Zdanie dostaje całą szerokość kieszeni koperty
   (x 19,6–80,4 % płótna), data schodzi pod licznik. */
@media (max-width: 480px) {
  body[data-theme="olive-green"] .rg-date .rg-sub { left: 18%; width: 64%; }
  body[data-theme="olive-green"] .rg-date .rg-dateline { top: 88.6%; }
}
@media (max-width: 359px) {
  body[data-theme="olive-green"] .rg-date .rg-names { top: 52.2%; }
  body[data-theme="olive-green"] .rg-date .rg-sub   { top: 57.7%; left: 16%; width: 68%; font-size: 9.5px; }
}
/* Telefon: historia przy podłodze 11 px i 64 % szerokości miała ~11
   linijek i wychodziła pod ekran lokalizacji. Pod wiankiem nic nie
   ogranicza szerokości — blok jest szerszy i startuje tuż pod wiankiem. */
@media (max-width: 480px) {
  body[data-theme="olive-green"] .rg-story .rg-cols {
    left: 8%;
    width: 84%;
    top: 72.4%;
    font-size: clamp(10px, calc(var(--rg-w, 760px) * 0.0285), 11.5px);
  }
}
/* Prośba o potwierdzenie przy 320 px łamała się na dwie linijki i druga
   wchodziła na liściaste tło zakończenia — tu mieści się w jednej. */
@media (max-width: 359px) {
  body[data-theme="olive-green"] .rg-rsvp .rg-note {
    left: 3%;
    width: 94%;
    font-size: 8px;
    white-space: nowrap;
  }
}
/* Wąski telefon: adres łamał się i druga linijka schodziła pod kopertę,
   a napis „Wiadomość dla pary" (podłoga 10 px) dotykał pola wiadomości. */
@media (max-width: 400px) {
  body[data-theme="olive-green"] .rg-location .rg-addr { left: 17%; width: 66%; font-size: 9.5px; }
  body[data-theme="olive-green"] .rg-rsvp .rg-textarea { top: 33.4%; height: calc(var(--rg-w, 760px) * 5 / 3 * 0.048); }
}

/* 13.10 — Licznik na środku także na szerokim ekranie. Baza (motyw 1)
   ma .rg-count { max-width: 400px }, więc przy płótnie szerszym niż
   ~700 px licznik ucinał się do 400 px przy lewej krawędzi swojego pola
   i środkowa liczba stała na ~48 % zamiast w osi. */
body[data-theme="olive-green"] .rg-date .rg-count { max-width: none; }