/* ============================================================
   MOTYW: navy-velvet  (Granatowy Aksamit)
   7-ekranowe zaproszenie — aksamitne kurtyny, koronka,
   tłoczony papier, granatowa ceramika, sztych i cherubiny.
   Grafiki: assets/themes/navy-velvet/
   Struktura sekcji jest WSPÓLNA z pozostałymi motywami
   7-ekranowymi (klasy .rg-*); tu tylko wygląd i elementy własne.
   ============================================================ */

body[data-theme="navy-velvet"] {
  /* --- Paleta (z projektu) --- */
  --rg-ink:      #1A235C;   /* nagłówki, imiona */
  --rg-body:     #232845;   /* tekst opisowy */
  --rg-accent:   #2B3A7A;   /* przyciski, akcenty */
  --rg-line:     #3A4A8C;   /* linia harmonogramu */
  --rg-card:     #FFFFFF;
  --rg-pale:     #EEF1F8;   /* bardzo jasny błękit papieru */
  --rg-muted:    #7C839F;
  --rg-deep:     #0E1436;   /* granat aksamitu */

  /* --- Fonty --- */
  --rg-script:   'Pinyon Script', cursive;        /* zamiennik Anastasia Script */
  --rg-display:  'Old Standard TT', serif;        /* nagłówki */
  --rg-mono-sig: 'Italianno', cursive;            /* monogram (zamiennik Water Brush) */
  --rg-ui:       'Montserrat', sans-serif;        /* odliczanie, przyciski */
  --rg-text:     'Old Standard TT', serif;        /* teksty opisowe */

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

/* ============================================================
   TŁA I MASKI
   Ekrany 2 i 4 są ciemne (aksamit / ceramika), 3 i 5–7 jasne.
   Maski krawędzi muszą to uwzględniać, bo inaczej granat
   rozpływa się w biel w połowie sekcji.
   ============================================================ */

body[data-theme="navy-velvet"] #rgScreens { background: #FFFFFF; }

/* Ciemne sekcje bez wygaszania do bieli — wtapiają się we własny granat */
body[data-theme="navy-velvet"] .rg-date,
body[data-theme="navy-velvet"] .rg-story { background: var(--rg-deep); }

body[data-theme="navy-velvet"] .rg-date .rg-bg,
body[data-theme="navy-velvet"] .rg-story .rg-bg {
  -webkit-mask-image: none;
          mask-image: none;
}

/* Jasne sekcje — miękkie przenikanie jak w pozostałych motywach */
body[data-theme="navy-velvet"] .rg-schedule .rg-bg,
body[data-theme="navy-velvet"] .rg-location .rg-bg {
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
}

/* Styk sekcji ciemna → jasna: delikatny gradient zamiast twardej krawędzi */
body[data-theme="navy-velvet"] .rg-date::after,
body[data-theme="navy-velvet"] .rg-story::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: clamp(40px, 8vw, 90px);
  background: linear-gradient(180deg, transparent, var(--rg-deep));
  z-index: 1;
  pointer-events: none;
}

/* ============================================================
   TYPOGRAFIA
   ============================================================ */

body[data-theme="navy-velvet"] .rg-h {
  font-family: var(--rg-display);
  font-style: italic;
  font-weight: 700;
  text-transform: none;                 /* w projekcie nagłówki nie są wersalikami */
  letter-spacing: 0.005em;
  font-size: clamp(30px, 7vw, 44px);
  color: var(--rg-ink);
}

body[data-theme="navy-velvet"] .rg-p {
  font-family: var(--rg-text);
  font-weight: 400;
  font-size: clamp(13px, 3.2vw, 15px);
  line-height: 1.85;
  color: var(--rg-body);
}

body[data-theme="navy-velvet"] .rg-names {
  font-family: var(--rg-script);
  color: var(--rg-ink);
  font-size: clamp(38px, 9.5vw, 66px);
  line-height: 1.02;
}
body[data-theme="navy-velvet"] .rg-names .amp {
  font-family: var(--rg-display);
  font-style: italic;
  font-size: .34em;
  margin: .04em 0;
}

body[data-theme="navy-velvet"] .rg-sub {
  font-family: var(--rg-display);
  font-style: italic;
  color: var(--rg-ink);
  font-size: clamp(12px, 3vw, 15px);
  line-height: 1.7;
}

body[data-theme="navy-velvet"] .rg-btn {
  background: var(--rg-accent);
  box-shadow: 0 6px 18px -6px rgba(26,35,92,.55);
  letter-spacing: 0.08em;
}
body[data-theme="navy-velvet"] .rg-btn:hover { background: #22306A; }

body[data-theme="navy-velvet"] .rg-card {
  background: rgba(255,255,255,.92);
  box-shadow: 0 18px 50px -22px rgba(14,20,54,.35);
  border-radius: 6px;                   /* projekt jest kanciasty, nie zaokrąglony */
}

/* ============================================================
   EKRAN 2 — MEDALION Z IMIONAMI
   Koronkowa ramka jest tłem kolumny treści; teksty leżą w jej
   owalnym środku (≈ 62% szerokości ramki), stąd węższy .rg-inner.
   ============================================================ */

/* Medalion jest wtopiony w grafikę tła (02-date/tlo.webp) — nie ma osobnego
   pliku. Treść trzeba wpasować w jego owal, którego pozycję zmierzyłem
   na płótnie 900×1500: L 25.9%  T 30.2%  W 48.4%.
   Liczymy w jednostkach płótna (--rg-w), a nie w procentach sekcji —
   sekcja jest szersza niż płótno na dużych ekranach. */
body[data-theme="navy-velvet"] .rg-date {
  justify-content: flex-start;
  padding: 0;
}

body[data-theme="navy-velvet"] .rg-date .rg-inner {
  width: calc(var(--rg-w) * 0.484);
  margin-top: calc(var(--rg-w) * 5 / 3 * 0.302);
  z-index: 2;
}

body[data-theme="navy-velvet"] .rg-date .rg-names,
body[data-theme="navy-velvet"] .rg-date .rg-sub,
body[data-theme="navy-velvet"] .rg-date .rg-count .num,
body[data-theme="navy-velvet"] .rg-date .rg-count .lbl { color: var(--rg-ink); }

/* Wszystko w owalu skalujemy płótnem — inaczej na szerokim ekranie
   tekst rośnie z viewportu i wychodzi poza koronkę. */
body[data-theme="navy-velvet"] .rg-date .rg-names {
  font-size: calc(var(--rg-w) * 0.105);
  line-height: 1.0;
}
body[data-theme="navy-velvet"] .rg-date .rg-names .amp { font-size: .36em; }

body[data-theme="navy-velvet"] .rg-date .rg-sub {
  font-size: calc(var(--rg-w) * 0.0235);
  line-height: 1.5;
  margin-top: calc(var(--rg-w) * 0.028);
  max-width: none;
}

body[data-theme="navy-velvet"] .rg-date .rg-count {
  gap: calc(var(--rg-w) * 0.012);
  max-width: none;
  margin-top: calc(var(--rg-w) * 0.045);
}
body[data-theme="navy-velvet"] .rg-date .rg-count .num {
  font-size: calc(var(--rg-w) * 0.036);
  font-weight: 300;
}
body[data-theme="navy-velvet"] .rg-date .rg-count .lbl {
  font-size: calc(var(--rg-w) * 0.0155);
  letter-spacing: .01em;
  margin-top: calc(var(--rg-w) * 0.008);
}

/* Sekcje, w których pozycjonuję elementy procentami z projektu, muszą mieć
   kolumnę treści równą PŁÓTNU — inaczej % liczą się od węższego .rg-inner
   (domyślnie min(84%, 520px)) i wszystko ląduje w innym miejscu. */
body[data-theme="navy-velvet"] .rg-schedule .rg-inner,
body[data-theme="navy-velvet"] .rg-story .rg-inner,
body[data-theme="navy-velvet"] .rg-location .rg-inner {
  width: var(--rg-w);
  max-width: 100%;
  position: relative;
}

/* ============================================================
   EKRAN 3 — HARMONOGRAM
   Duże ilustracje sztychowe po lewej, opis po prawej.
   ============================================================ */

/* Odstęp górny wyliczony wstecz z osi czasu. Napisu „Harmonogram" nie ma
   w mapie jako warstwy — grafik zamienił go na krzywe — ale mam twardy
   punkt zaczepienia: pierwsza ikona (samochód) zaczyna się na y 20,21 %.
   Przy poprzednim clamp(52px, 11vw, 96px) oś startowała na 15,6 %, czyli
   4,6 punktu za wysoko, i cały blok razem z nagłówkiem siedział zbyt
   blisko zasłon. 11,2 % dowozi pierwszą ikonę dokładnie na 20,21 %,
   a nagłówek schodzi o te same 4,6 punktu niżej. */
body[data-theme="navy-velvet"] .rg-schedule {
  padding: calc(var(--rg-w) * 5 / 3 * 0.112) 0 clamp(90px, 19vw, 170px);
}

/* Pionowa oś czasu.

   BYŁO: linia rysowana na sekcji ze SZTYWNĄ wysokością wziętą z projektu
   (17,3%–71,2% planszy). U grafika plansza miała cztery punkty programu
   i wtedy się zgadzało. Ale para wpisuje własny harmonogram — przy pięciu
   punktach lista rośnie, a linia zostaje w tym samym miejscu i URYWA SIĘ
   w połowie. Przy trzech punktach wystawałaby pod ostatni wpis.

   JEST: linia wisi na kontenerze osi (.rg-timeline), który obejmuje
   wszystkie punkty. Rozciąga się od pierwszego do ostatniego niezależnie
   od tego, ile ich jest. Grubość i kolor bez zmian. */
body[data-theme="navy-velvet"] .rg-item .pearl { display: none; }

body[data-theme="navy-velvet"] .rg-timeline {
  position: relative;
}
body[data-theme="navy-velvet"] .rg-timeline::before {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: max(2px, calc(var(--rg-w) * 0.003));
  translate: -50% 0;
  background: var(--rg-line);
  opacity: .55;
  z-index: 1;
  pointer-events: none;
}

/* Tytuł „Harmonogram" — WYŚRODKOWANY, choć w projekcie stoi przy lewej.
   Powód: sekcje zachodzą na siebie o 7vw, żeby nie było widać szwu między
   planszami. Nagłówek na 14% wysokości wpada więc pod aksamitne zasłony
   z ekranu startowego — a granatowy tekst na granatowej kotarze znika.
   W środku zasłony się rozchodzą i tło jest jasne (zmierzone: 242 wobec
   198 przy lewej krawędzi), więc tam napis jest czytelny zawsze. */
body[data-theme="navy-velvet"] .rg-schedule .rg-h {
  align-self: center;
  text-align: center;
  width: 100%;
  font-size: calc(var(--rg-w) * 0.082);
  margin: 0 0 calc(var(--rg-w) * 0.06);
}
/* Same wiersze zostają przy lewej — to dwukolumnowa oś czasu (godzina,
   opis) i wyśrodkowanie rozbiłoby jej rytm. Zmieniamy TYLKO nagłówek. */
body[data-theme="navy-velvet"] .rg-schedule .rg-inner { text-align: left; }
body[data-theme="navy-velvet"] .rg-schedule .rg-h { text-align: center; }

body[data-theme="navy-velvet"] .rg-timeline { width: 100%; }
body[data-theme="navy-velvet"] .rg-item {
  /* Wiersz obejmuje X 13–86% płótna; w jego obrębie ikona zajmuje 46.5%,
     a tekst startuje na 56.8% — to odpowiada X 13–47% i 54.5% z projektu. */
  margin-left: 13%;
  width: 73%;
  grid-template-columns: 46.5% 1fr;
  gap: 10.3%;
  align-items: center;
  text-align: left;
  margin-bottom: calc(var(--rg-w) * 5 / 3 * 0.055);
  position: relative;
  z-index: 2;
}
body[data-theme="navy-velvet"] .rg-item .ico {
  width: 100%;
  height: auto;
  max-height: none;
  filter: none;
}
body[data-theme="navy-velvet"] .rg-item .txt { text-align: left; }
body[data-theme="navy-velvet"] .rg-item .time {
  font-family: var(--rg-ui);
  font-weight: 500;
  letter-spacing: .1em;
  color: var(--rg-ink);
  font-size: clamp(11px, 2.7vw, 13px);
}
body[data-theme="navy-velvet"] .rg-item .desc {
  font-family: var(--rg-text);
  color: var(--rg-body);
  font-size: clamp(11px, 2.7vw, 13px);
}

/* ============================================================
   EKRAN 4 — KOLAŻ ZDJĘĆ POD CERAMICZNĄ MOZAIKĄ
   Mozaika ma przezroczyste okna; zdjęcia leżą POD nią, dlatego
   cały blok jest w treści, a nie w warstwach tła (te są zawsze
   pod .rg-inner). Proporcja zablokowana na płótnie 900×1500.
   ============================================================ */

body[data-theme="navy-velvet"] .rg-story { padding: 0; }
body[data-theme="navy-velvet"] .rg-story .rg-h { color: #FFFFFF; }
body[data-theme="navy-velvet"] .rg-story .rg-p { color: #E7EAF4; }

body[data-theme="navy-velvet"] .rg-heart { display: none; }

.rg-collage { display: none; }
body[data-layout="collage"] .rg-collage {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 900 / 1500;
  margin: 0;
  overflow: hidden;
}
.rg-collage img { position: absolute; display: block; }
/* Kolejność warstw kolażu. BYŁO: mozaika (2) nad zdjęciami (1), w założeniu
   że to ramka z przezroczystymi okienkami. ZMIERZONE: mozaika jest kryjąca
   w 66% i ma tylko JEDNO prawdziwe okienko — zasłaniała 45–71% powierzchni
   każdego zdjęcia i para widziała płytki zamiast siebie.
   JEST: mozaika na spód, zdjęcia na wierzch, ozdoby najwyżej. */
.rg-collage .mosaic { z-index: 1; pointer-events: none; }
.rg-collage .ph     { z-index: 2; object-fit: cover; filter: grayscale(1) contrast(1.04); }
.rg-collage .dec    { z-index: 3; pointer-events: none; }

/* Ruch: zdjęcia oddychają, ozdoby dryfują */
.rg-collage .ph      { animation: nv-breathe 22s ease-in-out infinite; }
.rg-collage .ph:nth-of-type(2) { animation-delay: -7s; }
.rg-collage .ph:nth-of-type(3) { animation-delay: -14s; }
.rg-collage .dec.d0  { animation: nv-sway 11s ease-in-out infinite; }
.rg-collage .dec.d1  { animation: nv-float 13s ease-in-out infinite; }

/* Opowieść pary: w projekcie tekst leży NA kolażu, w prawej kolumnie —
   jeden blok u góry (X 55.3%, Y 24.7%), drugi u dołu (X 56.5%, Y 78.2%).
   Kolaż jest zablokowany na proporcji płótna, więc to jego układ
   współrzędnych — pozycjonujemy w nim absolutnie. */
body[data-layout="collage"] .rg-collage { overflow: visible; }

/* Zdjęcia kolażu są w projekcie celowo „wypuszczone" poza kadr — zmierzone
   krawędzie: x od −1,9% do 100,3%, y od 7,7% aż do 118,3%. Na planszy grafika
   nadmiar był po prostu poza obszarem roboczym; w przeglądarce wylewał się
   poza zaproszenie. Przycinamy kolaż do planszy — kompozycja zostaje ta sama,
   znika tylko to, co i tak miało być niewidoczne. */
body[data-theme="navy-velvet"] .rg-collage {
  overflow: hidden;
}

body[data-theme="navy-velvet"] .rg-story .rg-cols {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: block;
  padding: 0;
  pointer-events: none;
}
body[data-theme="navy-velvet"] .rg-story .rg-cols .rg-p {
  /* Pas x 62–100%, y 0–48% to JEDYNY obszar planszy wolny od zdjęć (zmierzone
     na siatce zajętości). Tekst stał wcześniej od 55,5%, czyli wchodził na
     zdjęcie sięgające do 62,8%, a drugi akapit leżał w całości na fotografii.
     Teraz obydwa mieszczą się na kaflach. */
  position: absolute;
  left: 64%;
  width: 33%;
  text-align: left;
  color: #EDF0F8;
  font-size: calc(var(--rg-w) * 0.0245);
  line-height: 1.7;
  text-shadow: 0 1px 3px rgba(14,20,54,.6);
}
/* Oba akapity muszą zmieścić się w pasie y 0–48% — niżej zaczyna się
   trzecie zdjęcie (górna krawędź 48,2%). Nagłówek „Historia pary" siedzi
   na 5,5%, więc tekst startuje od 14%. Przy czterech wierszach na akapit
   drugi kończy się około 47%, czyli tuż nad zdjęciem. */
body[data-theme="navy-velvet"] .rg-story .rg-cols .rg-p:first-child  { top: 14%; }
body[data-theme="navy-velvet"] .rg-story .rg-cols .rg-p:last-child   { top: 30%; }

/* Tytuł „Historia pary" — u góry, nad kolażem (X 28.7–71.3%, Y 1.6–21.4%) */
body[data-theme="navy-velvet"] .rg-story .rg-h {
  position: absolute;
  left: 50%;
  translate: -50% 0;
  top: calc(var(--rg-w) * 5 / 3 * 0.035);   /* było 5,5 % — podniesione o 2 pkt */
  z-index: 4;
  margin: 0;
  font-size: calc(var(--rg-w) * 0.085);
  text-shadow: 0 2px 8px rgba(14,20,54,.55);
}

/* ============================================================
   EKRAN 5 — LOKALIZACJA I DRESS CODE
   ============================================================ */

body[data-theme="navy-velvet"] .rg-location { padding: 0 0 clamp(40px, 9vw, 76px); }

/* Biały kwadrat pod mapą — w projekcie X 22.5–77.4%, Y 12.7–54.6% płótna.
   Karta w przepływie dostaje dokładnie te wymiary. */
body[data-theme="navy-velvet"] .rg-location .rg-card {
  width: calc(var(--rg-w) * 0.549);
  /* W projekcie karta stoi od 22,5% do 77,4% szerokości płótna — czyli
     dokładnie na środku, z równymi marginesami po obu stronach (22,5% i
     22,6%). Sama szerokość tego nie zapewnia: blok bez marginesów
     automatycznych ustawia się tam, gdzie każe mu kontekst, i karta
     lądowała przy krawędzi. Wyśrodkowanie wpisane wprost jest odporne
     na to, jak zachowa się rodzic. */
  margin-left: auto;
  margin-right: auto;
  margin-top: calc(var(--rg-w) * 5 / 3 * 0.127);
  padding: calc(var(--rg-w) * 0.03);
  background: #FFFFFF;
  box-shadow: 0 14px 40px -20px rgba(14,20,54,.28);
}
body[data-theme="navy-velvet"] .rg-location .rg-h { font-size: calc(var(--rg-w) * 0.055); }
body[data-theme="navy-velvet"] .rg-map { aspect-ratio: 1 / 1; }
body[data-theme="navy-velvet"] .rg-map { border-radius: 4px; border: 1px solid rgba(26,35,92,.18); }
body[data-theme="navy-velvet"] .rg-addr {
  font-family: var(--rg-display);
  font-style: italic;
  color: var(--rg-ink);
}
body[data-theme="navy-velvet"] .rg-dress { background: transparent; }

/* PALETA — kalibracja wg planszy 5. Wartości z pliku grafika:
     sylwetki   x 41,74–57,24 %   y 70,84–87,73 %  (szer. 15,50 %)
     kropki     x 31,09 % i 66,40 %   y 76,10 % i 83,13 %   śr. 9,84 %

   Czyli kropki mają stać PRZY sylwetkach, po dwie z każdej strony,
   wyśrodkowane na ich wysokości. Odstęp od sylwetki do kropki: 5,73 %.

   Układ bazowy ma `grid-template-columns: auto 1fr auto` — środkowa
   kolumna rozpycha się na całą dostępną szerokość i wypycha kropki
   na skrajne krawędzie zaproszenia. Tu zastępuję ją stałymi odstępami. */
body[data-theme="navy-velvet"] .rg-dress-grid {
  grid-template-columns: auto auto auto;
  justify-content: center;
  align-items: center;
  /* Z planszy tego motywu wychodziło 5,73 % szerokości płótna (43 px),
     ale odstęp kółek od sylwetek ma być JEDNAKOWY we wszystkich
     motywach — stąd wspólny token z css/style.css. */
  column-gap: var(--rg-dress-odstep);
}
body[data-theme="navy-velvet"] .rg-swatches {
  gap: calc(var(--rg-w) * 5 / 3 * 0.0113);
}
body[data-theme="navy-velvet"] .rg-swatches.right { align-items: flex-start; }
body[data-theme="navy-velvet"] .rg-sw {
  width: calc(var(--rg-w) * 0.0984);
  height: calc(var(--rg-w) * 0.0984);
}
body[data-theme="navy-velvet"] .rg-dress-fig {
  /* 15,50 % planszy. Bazowe max-width 190px dawało tu o 61 % za dużo */
  width: calc(var(--rg-w) * 0.1550);
  max-width: none;
  filter: none;
  animation: nv-float 15s ease-in-out infinite;
}

/* ============================================================
   EKRAN 6 — RSVP
   Ornament (klamra) płynie POD formularzem — nie jest warstwą
   tła, bo sekcja rośnie wraz z treścią formularza.
   ============================================================ */

/* Sekcja ma wysokość narzuconą proporcją płótna (min-height = szerokość × 5/3),
   a bazowa .rg-screen układa treść od góry (flex-start). Formularz jest krótszy
   niż plansza, więc kończył się w połowie i zostawiał martwy pas nad dolnymi
   ornamentami.

   Zamiast dokładać sztywny odstęp centruję blok z przesunięciem w dół —
   większy odstęp górny niż dolny spycha środek treści poniżej połowy planszy.
   Ta wersja sama się dostosowuje: gdy para wpisze długą wiadomość i treść
   przerośnie planszę, sekcja urośnie, a ornament zjedzie razem z nią.
   Sztywne „przesuń o X pikseli" pękłoby przy dłuższym tekście. */
body[data-theme="navy-velvet"] .rg-rsvp {
  background: var(--rg-pale);
  justify-content: center;
  padding: clamp(80px, 17vw, 150px) 0 clamp(40px, 8vw, 72px);
}
body[data-theme="navy-velvet"] .rg-rsvp .rg-card { background: transparent; box-shadow: none; }
body[data-theme="navy-velvet"] .rg-radio .dot { border-color: var(--rg-accent); }
body[data-theme="navy-velvet"] .rg-textarea {
  border: 1px solid rgba(26,35,92,.22);
  border-radius: 3px;
  font-family: var(--rg-text);
}
/* Ornament dolny (klamra) — w mapie zajmuje x 6,38–92,63 %, y 75,30–92,82 %.
   Był zwykłym elementem w przepływie, na końcu sekcji: lądował pod notką
   formularza, czyli tym niżej, im dłuższa treść. Przy standardowym RSVP
   schodził poza dolną krawędź i widać było tylko urwane rogi — stąd
   wrażenie, że ramka kartki jest niepełna.

   Kotwiczę go w procentach sekcji, nie w pikselach: gdy formularz urośnie,
   sekcja urośnie razem z nim, a ornament zostanie na swoim miejscu
   względem planszy. */
/* BIAŁA KARTKA — w pliku grafika jest to <rect class="st0" fill="#FFFFFF">,
   czyli kształt wektorowy, a nie osadzony obrazek. Mój ekstraktor czyta
   tylko <image>, więc nigdy jej nie zobaczył — dokładnie ta sama pułapka,
   co przy kropkach palety na ekranie 5. Stąd wrażenie, że ekran RSVP jest
   „niepełny": formularz leżał wprost na tłoczonym tle.
   Mapa: x 10,84–89,66 %   y 9,51–89,16 %. */
body[data-theme="navy-velvet"] .rg-rsvp::before {
  content: "";
  position: absolute;
  left: calc(50% - var(--rg-w) * 0.3916);
  top: calc(var(--rg-w) * 5 / 3 * 0.0951);
  width: calc(var(--rg-w) * 0.7882);
  height: calc(var(--rg-w) * 5 / 3 * 0.7965);
  background: #FFFFFF;
  box-shadow: 0 18px 50px -26px rgba(14, 20, 54, 0.30);
  z-index: 0;
  pointer-events: none;
}
body[data-theme="navy-velvet"] .rg-rsvp .rg-inner { position: relative; z-index: 2; }

/* Ornament dolny wraca do układu w przepływie — tak stał, zanim zacząłem
   go „poprawiać", i tak było dobrze. Zakotwiczenie go w procentach sekcji
   wyrzuciło go poza kolumnę, bo sekcja jest szeroka na całą stronę. */
body[data-theme="navy-velvet"] .rg-swans {
  position: relative;
  z-index: 1;
  width: min(96%, 700px);
  animation: nv-sway 16s ease-in-out infinite;
}

/* ============================================================
   EKRAN 7 — ZAKOŃCZENIE
   Tłoczona karta na tle malowanego pejzażu.
   ============================================================ */

/* KALIBRACJA WG ZBIORCZEGO SVG — wszystkie liczby poniżej są zmierzone,
   nie dobrane na oko. Mapa ekranu 7 (w % planszy 900×1500):

     karta „papier"   x 14,9–84,5 %    y 18,7–78,1 %
     napis odręczny   x 34,5–65,3 %    y 41,1–45,3 %   (wys. pisma 4,25 %)
     akapit                            y od 48,5 %     (wys. pisma 1,61 %)
     winieta          x 41,1–54,5 %    y 59,3–70,9 %

   Poprzednie wartości karty (9,55 / 16,06 / 80,37) nie pochodziły z tego
   pliku — była o 11 punktów za szeroka i o 2,6 punktu za wysoko.

   Wysokość planszy to szerokość × 5/3, więc „X % wysokości planszy”
   zapisujemy jako calc(var(--rg-w) * 5 / 3 * 0.0X). */

body[data-theme="navy-velvet"] .rg-outro { padding: 0; justify-content: flex-start; }

/* ⚠ PUŁAPKA, KTÓRA POPSUŁA TU WSZYSTKIE SZEROKOŚCI
   `#rgScreens` nie ma limitu szerokości, a `.rg-screen` ma `width: 100%`.
   Sekcja jest więc szeroka na CAŁĄ STRONĘ, nie na kolumnę zaproszenia —
   wrażenie kolumny robią dopiero warstwy tła i `.rg-inner`, ograniczone
   do `--rg-w`. Procent poziomy liczony od sekcji daje zatem wartość
   od szerokości okna: karta z „69,51 %" wychodziła na monitorze 1300 px
   szeroka na 900 px zamiast 530 px.

   Zasada: PIONOWO można w procentach (wysokość sekcji = wysokość planszy,
   bo narzuca ją min-height), ale POZIOMO zawsze przez --rg-w, z lewą
   krawędzią liczoną od środka: 50 % − --rg-w × (0,5 − lewa_z_mapy). */
body[data-theme="navy-velvet"] .rg-outro-card {
  position: absolute;
  left: calc(50% - var(--rg-w) * 0.3554);   /* mapa: lewa 14,46 % */
  top: calc(var(--rg-w) * 5 / 3 * 0.182);
  width: calc(var(--rg-w) * 0.6993);        /* mapa: szerokość 69,93 % */
  z-index: 1;
  pointer-events: none;
  animation: nv-breathe 20s ease-in-out infinite;
}

/* Blok treści kotwiczymy do planszy zamiast puszczać go flexem — inaczej
   jego pozycja zależy od długości tekstu pary, a projekt wskazuje
   konkretne miejsca. Szerokość 46 % mieści się w karcie (69,5 %). */
body[data-theme="navy-velvet"] .rg-outro .rg-inner {
  position: absolute;
  left: 50%;
  translate: -50% 0;
  /* 24 % — tuż pod górną krawędzią karty (18,2 %) plus zapas na tłoczoną
     ramkę. To ŚWIADOME odejście od mapy: grafik stawia nagłówek na 40,6 %,
     ale u nas jest jeszcze monogram, którego on nie ma, więc blok schodził
     za nisko i akapit wchodził na winietę z tańczącą parą. */
  top: calc(var(--rg-w) * 5 / 3 * 0.24);
  /* 38,8 % — dokładnie kolumna tekstu z projektu: akapit zaczyna się na
     x 30,64 % i jest wyśrodkowany, czyli sięga do 69,36 %. Przy 46 %
     wiersze wychodziły na tłoczoną ramkę karty. */
  width: calc(var(--rg-w) * 0.388);
  text-align: center;
  z-index: 2;
}

/* UWAGA — historia tej reguły, żeby nikt jej nie „naprawił" ponownie.
   Tekst zakończenia był nieczytelny, więc rozjaśniłem go do bieli.
   To było leczenie objawu: prawdziwą przyczyną był brak znacznika
   <img class="rg-outro-card"> w zaproszenie.html, przez co tłoczona
   karta z projektu nigdy się nie renderowała i pismo lądowało wprost
   na malowanym pejzażu. Po przywróceniu karty tło pod tekstem ma
   jasność 190–236, więc biel daje 1,2–1,9:1, a granat 7,7–12,2:1.
   Kolor wraca więc do granatu z palety motywu. */
body[data-theme="navy-velvet"] .rg-monogram {
  font-family: var(--rg-mono-sig);
  color: var(--rg-ink);
  /* blok startuje na 33 %, monogram kończy się na 37,1 %,
     a ten odstęp dowozi nagłówek na 40,6 % z mapy */
  font-size: calc(var(--rg-w) * 5 / 3 * 0.036);
  line-height: 1.15;
  margin: 0 0 calc(var(--rg-w) * 5 / 3 * 0.026);   /* było 0,035 — miejsce na winietę pod najdłuższym tekstem */
}

/* Nagłówek: w projekcie odręczny napis zajmuje x 34,1–65,1 % (czyli 31 %
   szerokości) na wysokości 40,6–44,9 %. Przy 3,0 % nasz krój rozlewał się
   na 47 % planszy i wychodził na tłoczoną ramkę. 2,5 % daje ok. 39 % —
   mieści się w kolumnie tekstu, blisko zamysłu grafika. */
body[data-theme="navy-velvet"] .rg-outro .rg-h {
  font-size: calc(var(--rg-w) * 5 / 3 * 0.024);
  line-height: 1.15;
  margin: 0 0 calc(var(--rg-w) * 5 / 3 * 0.032);   /* było 0,046 */
  text-align: center;
}

/* Akapit — wysokość pisma wprost z pliku grafika: 1,61 % planszy */
body[data-theme="navy-velvet"] .rg-outro .rg-p {
  font-size: calc(var(--rg-w) * 5 / 3 * 0.0161);
  line-height: 1.7;
  text-align: center;
}
/* Winieta: w projekcie x 41,1–54,5 % planszy, czyli 13,37 % szerokości.
   Podaję to w procentach planszy, nie w vw — vw liczy się od okna, a przy
   szerokim ekranie kolumna zatrzymuje się na 760 px i proporcja się rozjeżdża. */
body[data-theme="navy-velvet"] .rg-outro-fig {
  position: absolute;
  /* v349: winieta wyżej i odrobinę mniejsza (środek bez zmian) — przy 0,5885
     najeżdżała na dolną tłoczoną ramkę karty. Tekst nad nią podniesiony,
     więc nawet 220 znaków kończy się nad winietą. */
  left: calc(50% - var(--rg-w) * 0.0864);
  top: calc(var(--rg-w) * 5 / 3 * 0.56);
  width: calc(var(--rg-w) * 0.122);
  z-index: 2;
  pointer-events: none;
  animation: nv-float 17s ease-in-out infinite;
}

/* ============================================================
   RUCH
   Zasada jak w pozostałych motywach: animacje bezczynne używają
   WYŁĄCZNIE translate / rotate / scale (właściwości indywidualne),
   żeby nie kolidowały z `transform` używanym przez parallax i reveal.
   ============================================================ */

/* ── Ruch dodatkowy ───────────────────────────────────────────────
   Zasada bez zmian: animacje bezczynne używają wyłącznie
   translate / rotate / scale, nigdy `transform`. */

/* Oś czasu rysuje się z góry na dół przy wejściu sekcji w kadr.
   Selektor przeniesiony z .rg-schedule::before na .rg-timeline::before
   razem z samą linią — poprzedni wskazywał na element, który już nie
   istnieje, więc animacja rysowania nie miała czego dotyczyć. */
body[data-theme="navy-velvet"] .rg-timeline::before {
  transform-origin: 50% 0;
  scale: 1 0;
  transition: scale 1.6s cubic-bezier(.22,1,.36,1) .2s;
}
body[data-theme="navy-velvet"] .rg-schedule.seen .rg-timeline::before { scale: 1 1; }

/* Ikony harmonogramu — każda oddycha z innym przesunięciem fazy */
body[data-theme="navy-velvet"] .rg-item .ico { animation: nv-float 14s ease-in-out infinite; }
body[data-theme="navy-velvet"] .rg-item:nth-child(2) .ico { animation-delay: -3.5s; }
body[data-theme="navy-velvet"] .rg-item:nth-child(3) .ico { animation-delay: -7s;   }
body[data-theme="navy-velvet"] .rg-item:nth-child(4) .ico { animation-delay: -10.5s; }

/* Ceramiczne płytki u dołu ekranu 3 — leciutkie, rozsunięte w czasie */
body[data-theme="navy-velvet"] .rg-schedule .rg-bg img:nth-child(n+3) {
  animation: nv-tile 9s ease-in-out infinite;
}
body[data-theme="navy-velvet"] .rg-schedule .rg-bg img:nth-child(4) { animation-delay: -1.8s; }
body[data-theme="navy-velvet"] .rg-schedule .rg-bg img:nth-child(5) { animation-delay: -3.6s; }
body[data-theme="navy-velvet"] .rg-schedule .rg-bg img:nth-child(6) { animation-delay: -5.4s; }
body[data-theme="navy-velvet"] .rg-schedule .rg-bg img:nth-child(7) { animation-delay: -7.2s; }

/* Cherubiny na RSVP — dryfują ku sobie i z powrotem */
body[data-theme="navy-velvet"] .rg-rsvp .rg-bg img:nth-child(2) { animation: nv-cherub-r 15s ease-in-out infinite; }
body[data-theme="navy-velvet"] .rg-rsvp .rg-bg img:nth-child(3) { animation: nv-cherub-l 15s ease-in-out infinite; }

@keyframes nv-tile {
  0%, 100% { translate: 0 0;     }
  50%      { translate: 0 -0.8%; }
}
@keyframes nv-cherub-r {
  0%, 100% { translate: 0 0;         rotate: 0deg;    }
  50%      { translate: -1.6% 1.2%;  rotate: -1.4deg; }
}
@keyframes nv-cherub-l {
  0%, 100% { translate: 0 0;         rotate: 0deg;   }
  50%      { translate: 1.6% 1.2%;   rotate: 1.4deg; }
}

@keyframes nv-breathe {
  0%, 100% { scale: 1;      }
  50%      { scale: 1.022;  }
}
@keyframes nv-sway {
  0%, 100% { translate: 0 0;        rotate: 0deg;    }
  50%      { translate: -1.1% -0.9%; rotate: -0.55deg; }
}
@keyframes nv-float {
  0%, 100% { translate: 0 0;      }
  50%      { translate: 0 -2.2%;  }
}

/* Puste pola nie zostawiają odstępu (setText ustawia [hidden]) */
body[data-theme="navy-velvet"] [hidden] { display: none !important; }
body[data-theme="navy-velvet"] .rg-names:empty,
body[data-theme="navy-velvet"] .rg-sub:empty,
body[data-theme="navy-velvet"] .rg-addr:empty,
body[data-theme="navy-velvet"] .rg-p:empty,
body[data-theme="navy-velvet"] .rg-monogram:empty { display: none; }

/* Handoff z zasłon — ekran 2 musi mieć tę samą geometrię co płótno zasłon */
body[data-theme="navy-velvet"] .rg-date {
  --rg-w: min(100vw, 760px);                              /* fallback */
  --rg-w: max(min(100vw, 760px), calc(100svh * 3 / 5));
}
body[data-theme="navy-velvet"] .rg-date .rg-bg {
  -webkit-mask-image: none;
          mask-image: none;
}

/* Zredukowany ruch */
@media (prefers-reduced-motion: reduce) {
  body[data-theme="navy-velvet"] .rg-medallion-img,
  body[data-theme="navy-velvet"] .rg-outro-card,
  body[data-theme="navy-velvet"] .rg-outro-fig,
  body[data-theme="navy-velvet"] .rg-dress-fig,
  body[data-theme="navy-velvet"] .rg-swans,
  body[data-theme="navy-velvet"] .rg-item .ico,
  body[data-theme="navy-velvet"] .rg-schedule .rg-bg img,
  body[data-theme="navy-velvet"] .rg-rsvp .rg-bg img,
  .rg-collage img {
    animation: none !important;
    translate: none !important;
    rotate: none !important;
    scale: none !important;
  }
  /* (reset skali usunięty — kolidowałby z animacją rysowania linii powyżej) */
}

/* ============================================================
   MINIATURA W GALERII
   Kafelek renderuje się jako czysty <img class="thumb-plate">,
   więc nie trzeba tu nadpisywać filtrów ani gradientów.
   ============================================================ */

.template-card[data-theme="navy-velvet"]:hover {
  border-color: rgba(43,58,122,.55);
  box-shadow: 0 32px 64px -26px rgba(14,20,54,.4);
}

/* ============================================
   ZASŁONY — ekran 1
   ============================================ */

/* Zasada w kolorze tkaniny (zmierzone z grafiki: krawędzie #010014,
   średnia #030630). Domyślna jest różowa i prześwitywała po bokach. */
body[data-theme="navy-velvet"] .curtain-backdrop,
.curtain-reveal[data-curtain="bleed"] .curtain-backdrop {
  background:
    radial-gradient(ellipse at 50% 35%, #0A1140 0%, #04072A 55%, #010014 100%);
}

/* CTA — na granacie różowy tekst był nieczytelny */
body[data-theme="navy-velvet"] .curtain-cta {
  font-family: 'Italianno', 'Pinyon Script', cursive;
  color: #E9DCC3;
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.55),
    0 0 22px rgba(233, 220, 195, 0.35);
}