/* ============================================================
   MOTYW: mono-ink  (Czerń i Biel)
   7 ekranów — tiul, perły, klisza filmowa
   Paleta pobrana pipetą z plansz, wpisana też w THEMES w js/app.js —
   te dwa miejsca muszą się zgadzać.
   ============================================================ */

body[data-theme="mono-ink"] {
  /* --- Paleta --- */
  --rg-ink:      #17171A;      /* nagłówki, imiona */
  --rg-body:     #0B0B0D;      /* tekst opisowy */
  --rg-accent:   #4A4A52;      /* przyciski */
  --rg-line:     #DCDCDE;      /* linie, ramki */
  --rg-pale:     #EDEDEF;
  --rg-cream:    #F4F4F5;      /* papier */
  --rg-card:     #FFFFFF;
  --rg-muted:    #78787F;

  /* --- Fonty (darmowe, z pełnym zestawem polskich znaków) --- */
  --rg-script:   'Poiret One', 'Marcellus', serif;   /* audyt 14.10: Italiana bez polskich liter */
  --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="mono-ink"] #rgScreens { background: var(--rg-cream); }

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

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

/* Perły i koronka delikatnie pulsują — jak światło na macicy perłowej.
   Wybieramy po nazwie pliku, bo warstwy są wstawiane dynamicznie
   i nie mają własnych klas — atrybut src jest jedynym pewnym uchwytem. */
@keyframes mi-polysk {
  0%,100% { scale: 1; opacity: 1; }
  50%      { scale: 1.03; opacity: 0.9; }
}
body[data-theme="mono-ink"] .rg-bg img[src$="perla_1.webp"],
body[data-theme="mono-ink"] .rg-bg img[src$="perla_2.webp"],
body[data-theme="mono-ink"] .rg-bg img[src$="koronka_talerz.webp"] {
  animation: mi-polysk 9s ease-in-out infinite;
  transform-origin: 50% 12%;
}
/* Rozsuwamy fazy, żeby elementy nie ruszały się zgodnym marszem. */
body[data-theme="mono-ink"] .rg-bg img[src$="perla_1.webp"]:nth-of-type(2n) { animation-delay: -3.0s; }

@media (prefers-reduced-motion: reduce) {
body[data-theme="mono-ink"] .rg-bg img[src$="perla_1.webp"],
body[data-theme="mono-ink"] .rg-bg img[src$="perla_2.webp"],
body[data-theme="mono-ink"] .rg-bg img[src$="koronka_talerz.webp"] { animation: none; }
}

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

/* ══════════════════════════════════════════════════════════════
   UKŁAD WG PLIKU ŹRÓDŁOWEGO (2026-08-29)
   „z tekstem full zaproszenie czarno-białe .svg",
   płótno 900 × 1493,3 (siedem ekranów w jednym pliku 900 × 10453,1).

   Co pokazało porównanie z projektem:
     • ekrany 3, 4, 6 i 7 są CIEMNE, a teksty szły w nich niemal
       czarnym #17171A — w pliku są białe, u nas praktycznie niewidoczne,
     • nagłówki i imiona są kaligrafią (NewIconScript, Edwardian Script),
       a renderowały się szeryfowym DM Serif / Italianą,
     • przyciski są szałwiowe (#C3D1A2), nie grafitowe,
     • sekcja lokalizacji miała 227 % wysokości płótna zamiast 100 %,
     • harmonogram prosił o ikonki `icon_*.webp`, których ten motyw nie
       ma (cztery 404 w konsoli) — ma własne, wpisane w rejestr,
     • ekran 2 gubił biały pas u dołu planszy (w pliku to prostokąt,
       nie grafika), na którym stoi licznik.

   Wszystkie liczby poniżej to procenty z pliku źródłowego: pozycje
   z prostokątów tekstowych, stopnie pisma przeliczone jako px/900
   szerokości płótna.
   ══════════════════════════════════════════════════════════════ */

body[data-theme="mono-ink"] {
  --rg-ink:      #232323;   /* nagłówki i pytania formularza */
  --rg-body:     #232323;
  --rg-navy:     #000353;   /* adres, odpowiedzi, dress code */
  --rg-accent:   #C3D1A2;   /* przyciski z planszy (szałwia) */
  --rg-pole:     #E5E5E5;   /* pole wiadomości z planszy */
  /* Edwardian Script → Italianno (cienka, pochyła kaligrafia),
     NewIconScript → Great Vibes (nagłówki), LibraSerif Modern Italic
     → Cormorant Garamond italic. Wszystkie są już wczytywane. */
  --rg-script:   'Italianno', cursive;
  --rg-kaligraf: 'Great Vibes', cursive;
  --rg-display:  'Cormorant Garamond', serif;
  --rg-serif:    'Cormorant Garamond', serif;
}

/* --- Ramka płótna: sekcja = 900 × 1500, `.rg-inner` = to samo pole --- */
body[data-theme="mono-ink"] .rg-screen {
  position: relative;
  padding-top: 0;
  padding-bottom: 0;
  min-height: calc(var(--rg-w, 760px) * 5 / 3);
}
body[data-theme="mono-ink"] .rg-screen > .rg-bg {
  height: calc(var(--rg-w, 760px) * 5 / 3);
}
body[data-theme="mono-ink"] .rg-screen > .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="mono-ink"] .rg-screen > .rg-inner > * {
  position: absolute;
  margin: 0;
}
/* Nagłówki: kaligrafia z projektu, bez wersalików i kursywy z bazy. */
body[data-theme="mono-ink"] .rg-h {
  font-family: var(--rg-kaligraf);
  font-style: normal;
  font-weight: 400;
  text-transform: none;
  letter-spacing: .01em;
  line-height: 1.05;
}
/* Dryf warstw wyłączony — teksty stoją w polach wyznaczonych przez
   grafikę (karta lokalizacji, talerz RSVP, koperta historii), a każda
   warstwa dryfowała osobno. Zostaje „oddech" całej planszy i połysk
   pereł, które tekstu nie niosą. */
body[data-theme="mono-ink"] .rg-bg img[data-drift] { animation: none; }
body[data-theme="mono-ink"] .rg-bg img[src$="perla_1.webp"],
body[data-theme="mono-ink"] .rg-bg img[src$="perla_2.webp"],
body[data-theme="mono-ink"] .rg-bg img[src$="koronka_talerz.webp"] {
  animation: mi-polysk 9s ease-in-out infinite;
}
body[data-theme="mono-ink"] .rg-bg img { transform: none; }
/* ── EKRAN 2 — IMIONA, ZAPROSZENIE, LICZNIK NA BIAŁYM PASIE ──
   Dolne 18,7 % planszy to w projekcie biały prostokąt (nie grafika),
   na którym stoi licznik i data. Rysujemy go tutaj — bez niego licznik
   wisiał na tiulu i ledwo się odcinał. */
body[data-theme="mono-ink"] .rg-date::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--rg-w, 760px) * 5 / 3 * 0.8359);
  bottom: 0;
  background: #FFFFFF;
  z-index: 1;
}
/* Ampersand jest OSOBNYM WIERSZEM (`display: block`), a nie znakiem
   w wierszu imion. Dopóki był inline, o wysokość jego wiersza i tak
   decydował „strut" bloku imion — czyli pełne 81 px — więc drugie imię
   zjeżdżało na zdanie pod spodem. Jako własny blok bierze tylko swoją
   wysokość i cały napis kończy się nad tekstem, z odstępem. */
body[data-theme="mono-ink"] .rg-date .rg-names {
  left: 20%;
  width: 60%;
  top: 23.3%;
  font-family: var(--rg-script);
  font-size: clamp(34px, calc(var(--rg-w, 760px) * 0.1067), 81px);
  line-height: 1;
  color: var(--rg-ink);
}
body[data-theme="mono-ink"] .rg-date .rg-names .amp {
  display: block;
  font-size: .28em;
  line-height: 1;
}
/* Zdanie podjeżdża wyżej: 38,9 % → 37,2 %. Kaligrafia zostawia pod
   drugim imieniem sporo pustego miejsca na zejścia liter (zmierzone
   na zrzucie: 41 px pustki przy 114-pikselowym stopniu pisma), więc
   przy imionach bez ogonków — jak „Marcin" — robiła się dziura na
   3,75 % wysokości płótna. Skracamy ją do ok. 2 %, ale nie bardziej:
   imię z zejściem („Jerzy", „Maciej", „Krzysztof") potrzebuje tego
   zapasu, żeby nie weszło w tekst. */
body[data-theme="mono-ink"] .rg-date .rg-sub {
  left: 33.7%;
  width: 34%;
  top: 36.6%;
  font-family: var(--rg-display);
  font-style: italic;
  font-size: clamp(11px, calc(var(--rg-w, 760px) * 0.0222), 17px);
  line-height: 1.6;
  letter-spacing: 0;
  text-transform: none;
  color: var(--rg-ink);
}
/* Licznik na białym pasie: trzy kolumny w rozstawie z projektu
   (środki 27,1 / 50 / 72,3 % płótna) i dwukropki między nimi. */
body[data-theme="mono-ink"] .rg-date .rg-count {
  left: 21.1%;
  width: 59.4%;
  top: 85.6%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0;
  z-index: 2;
}
body[data-theme="mono-ink"] .rg-date .rg-count > div {
  position: relative;
  flex: 1 1 0;
  text-align: center;
}
body[data-theme="mono-ink"] .rg-date .rg-count > div + div::before {
  content: ":";
  position: absolute;
  left: -.12em;
  top: -.1em;
  font-family: var(--rg-text);
  font-size: clamp(20px, calc(var(--rg-w, 760px) * 0.0611), 46px);
  line-height: 1;
  color: var(--rg-ink);
}
body[data-theme="mono-ink"] .rg-date .rg-count .num {
  font-family: var(--rg-script);
  font-size: clamp(20px, calc(var(--rg-w, 760px) * 0.0378), 29px);
  line-height: 1.1;
  color: var(--rg-ink);
}
body[data-theme="mono-ink"] .rg-date .rg-count .lbl {
  font-family: var(--rg-script);
  font-size: clamp(13px, calc(var(--rg-w, 760px) * 0.0289), 22px);
  letter-spacing: 0;
  text-transform: none;
  color: var(--rg-ink);
}
/* Data z miejscem — kaligrafią, na dole białego pasa. */
body[data-theme="mono-ink"] .rg-date .rg-dateline {
  left: 15.6%;
  width: 68.9%;
  top: 93.8%;
  font-family: var(--rg-script);
  font-size: clamp(18px, calc(var(--rg-w, 760px) * 0.0511), 39px);
  line-height: 1.15;
  color: var(--rg-ink);
  z-index: 2;
}

/* ── EKRAN 3 — HARMONOGRAM (CIEMNY, BIAŁY TEKST) ─────────────
   Ikonki są warstwami planszy po lewej, opisy po prawej (x 54,3 %),
   a między nimi biegnie kropkowana pionowa linia — w pliku zrobiona
   z dwudziestu białych prostokątów, u nas jedną kreską CSS. */
body[data-theme="mono-ink"] .rg-schedule .rg-h {
  left: 15.6%;
  width: 68.9%;
  top: 9.3%;
  font-size: clamp(30px, calc(var(--rg-w, 760px) * 0.1056), 80px);
  color: #FFFFFF;
}
body[data-theme="mono-ink"] .rg-schedule .rg-inner::before {
  content: "";
  position: absolute;
  left: 49.9%;
  top: 23.5%;
  bottom: 7%;
  border-left: 2px dashed rgba(255, 255, 255, .7);
}
/* Punkty harmonogramu dzielą się STAŁYM pasem, zamiast mieć każdy
   stałą wysokość. Projekt ma cztery ikonki, więc sztywny skok 16,05 %
   płótna trafiał w nie idealnie — ale para może wpisać pięć albo sześć
   punktów i wtedy ostatnie zjeżdżały pod planszę. Teraz pas 26,5–90,5 %
   dzieli się po równo: przy czterech punktach skok wychodzi 16 %, czyli
   praktycznie tak jak dotąd, a przy pięciu i więcej wszystko się mieści. */
body[data-theme="mono-ink"] .rg-schedule .rg-timeline {
  left: 54.3%;
  width: 31.7%;
  top: 26.5%;
  height: calc(var(--rg-w, 760px) * 5 / 3 * 0.64);
  display: flex;
  flex-direction: column;
  gap: 0;
  text-align: left;
}
body[data-theme="mono-ink"] .rg-schedule .rg-item {
  display: block;
  flex: 1 1 0;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
}
body[data-theme="mono-ink"] .rg-schedule .rg-item .ico,
body[data-theme="mono-ink"] .rg-schedule .rg-item .pearl { display: none; }
body[data-theme="mono-ink"] .rg-schedule .rg-item .time,
body[data-theme="mono-ink"] .rg-schedule .rg-item .desc {
  font-family: var(--rg-display);
  font-style: italic;
  font-size: clamp(11px, calc(var(--rg-w, 760px) * 0.0222), 17px);
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
  color: #FFFFFF;
  margin: 0;
}
body[data-theme="mono-ink"] .rg-schedule .rg-item .desc { opacity: .82; }

/* ── EKRAN 4 — HISTORIA PARY (CIEMNY) ────────────────────────
   Nagłówek biały u góry, tekst na białej kopercie po prawej
   (x 51,6–84,5 %, y 52,2 %). Serca ze zdjęciem z innych motywów tu
   nie występują — jest klisza i koperta z odciskiem ust. */
body[data-theme="mono-ink"] .rg-story .rg-h {
  left: 16.2%;
  width: 68.9%;
  /* Nagłówek podniesiony z 16,5 % na 14,2 %. Siedział za blisko kliszy,
     która zaczyna się na 25,83 % — zostawały mu pod spodem 2,47 pkt
     proc., a nad nim 3,61. Teraz jest 4,77 pod i 1,31 nad. Wyżej się
     nie da: sznur pereł (perla_1.webp) kończy się na 12,89 %, a napis
     jest biały i wszedłby w niego. */
  top: 14.2%;
  font-size: clamp(30px, calc(var(--rg-w, 760px) * 0.1089), 83px);
  color: #FFFFFF;
}
body[data-theme="mono-ink"] .rg-story .rg-heart,
body[data-theme="mono-ink"] .rg-story .rg-collage,
body[data-theme="mono-ink"] .rg-story .rg-postcard { display: none; }
/* Karta w kopercie NIE leży prosto — na zdjęciu jest przekrzywiona
   o 5,15° w prawo. Zmierzone z pliku koperta.webp: górna krawędź karty
   opada 0,0896 px na piksel szerokości (prosta dopasowana do 125 próbek
   gradientu, największe odchylenie 1,2 px), po korekcie na rozciągnięcie
   warstwy daje to 5,148° na ekranie. Tekst stał poziomo i od razu było
   widać, że nie należy do karty.

   Obrót jest stały, bo w tym motywie dryf warstw jest wyłączony
   (`.rg-bg img[data-drift] { animation: none }`) — koperta stoi
   nieruchomo, więc i tekst ma stać. Użyta jest osobna własność
   `rotate`, a nie `transform`, żeby nie kolidowała z animacją
   wejścia `rg-rise`, która animuje `transform`. */
body[data-theme="mono-ink"] .rg-story .rg-cols {
  left: 53.7%;
  /* Blok jest WYSRODKOWANY w swoim pasie, nie przyklejony gora:
     `top` wskazuje srodek pasa, a `translate` cofa o pol wysokosci.
     Dzieki temu krotsza historia (piec linijek zamiast osmiu) siada
     na srodku kartki, a nie pod jej gorna krawedzia. */
  width: 32.9%;
  top: 54.34%;
  translate: 0 -50%;
  display: block;
  text-align: left;
  rotate: 5.15deg;
  /* Akapity są `display: inline`, więc o wysokość wiersza decyduje
     „strut" KONTENERA, nie ich własna interlinia. Kontener trzymał
     bazowe 25,6 px, a tekst 15 px — na telefonie dawało to 70 %
     nadmiarowego światła i tekst wychodził poza kartę, na odcisk ust.
     Ten sam stopień pisma i interlinia co w akapicie zdejmują to. */
  font-size: clamp(10px, calc(var(--rg-w, 760px) * 0.0222), 17px);
  line-height: 1.32;
}
body[data-theme="mono-ink"] .rg-story .rg-cols .rg-p {
  display: inline;
  font-family: var(--rg-display);
  font-style: italic;
  font-size: clamp(10px, calc(var(--rg-w, 760px) * 0.0222), 17px);
  line-height: 1.32;
  color: var(--rg-ink);
  margin: 0;
}
body[data-theme="mono-ink"] .rg-story .rg-cols .rg-p:first-child::after { content: " "; }
/* Na telefonie stopień pisma opiera się o dolną granicę clamp, więc
   względem karty rośnie i przy długiej historii ostatnie wiersze
   schodziły na kopertę. Obniżamy tam podłogę z 10 na 9 px — tekst
   mieści się w kartce, a przy typowej długości historii i tak
   decyduje wartość wyliczona, nie podłoga. */
@media (max-width: 719px) {
  body[data-theme="mono-ink"] .rg-story .rg-cols,
  body[data-theme="mono-ink"] .rg-story .rg-cols .rg-p {
    font-size: clamp(9px, calc(var(--rg-w, 760px) * 0.0222), 17px);
  }
}

/* ── EKRAN 5 — LOKALIZACJA I DRESS CODE ──────────────────────
   Górna połowa to biała karta z planszy (y 14,7–56,8 %): w niej
   nagłówek, mapa, adres i przycisk. Dolna to jasny tiul z rysunkiem
   pary — tam „Dresscode" i opis. Sekcja miała 227 % wysokości płótna,
   przez co wszystko zjeżdżało pod planszę. */
body[data-theme="mono-ink"] .rg-location > .rg-inner > .rg-card {
  position: absolute;
  inset: 0;
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  margin: 0;
}
body[data-theme="mono-ink"] .rg-location .rg-card > * {
  position: absolute;
  margin: 0;
}
/* Nagłówek i adres są WYŚRODKOWANE w pasach białej karty, a nie
   przyklejone do stałej wysokości. Karta idzie od 14,76 % do 56,67 %
   płótna, mapa od 22,1 % do 51,6 %, przycisk zaczyna się na 54,7 %.
   Zostają więc dwa białe pasy: 14,76–22,1 % nad mapą i 51,6–54,7 %
   pod nią. Napisy dostają całą wysokość pasa i `align-items: center`,
   dzięki czemu siedzą w jego środku niezależnie od stopnia pisma
   i od tego, czy nazwa miejsca zawinie się w dwie linijki. */
body[data-theme="mono-ink"] .rg-location .rg-h {
  left: 15.6%;
  width: 68.9%;
  top: 14.76%;
  height: calc(var(--rg-w, 760px) * 5 / 3 * 0.0734);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(26px, calc(var(--rg-w, 760px) * 0.08), 61px);
  color: var(--rg-ink);
}
body[data-theme="mono-ink"] .rg-location .rg-map {
  left: 28.1%;
  width: 43.8%;
  top: 22.1%;
  height: calc(var(--rg-w, 760px) * 5 / 3 * 0.295);
  border: none;
  border-radius: 0;
}
body[data-theme="mono-ink"] .rg-location .rg-addr {
  left: 19.1%;
  width: 61.7%;
  top: 51.6%;
  height: calc(var(--rg-w, 760px) * 5 / 3 * 0.031);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--rg-display);
  font-style: italic;
  font-size: clamp(10px, calc(var(--rg-w, 760px) * 0.0222), 17px);
  line-height: 1.5;
  color: var(--rg-navy);
}
body[data-theme="mono-ink"] .rg-location .rg-btn {
  left: 33.6%;
  width: 32.8%;
  top: 54.7%;
  height: calc(var(--rg-w, 760px) * 5 / 3 * 0.0435);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 0;
  background: var(--rg-accent);
  color: #FFFFFF;
  font-family: var(--rg-display);
  font-style: italic;
  font-size: clamp(12px, calc(var(--rg-w, 760px) * 0.0293), 22px);
  letter-spacing: .06em;
  text-transform: uppercase;
}
body[data-theme="mono-ink"] .rg-location .rg-btn:hover { background: #B2C48D; }
body[data-theme="mono-ink"] .rg-location .rg-loc-cards { display: none; }

body[data-theme="mono-ink"] .rg-dress {
  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;
  pointer-events: none;
  z-index: 3;
}
body[data-theme="mono-ink"] .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="mono-ink"] .rg-dress .rg-inner > * {
  position: absolute;
  margin: 0;
}
/* `.rg-dress` leży wewnątrz `.rg-location`, więc reguła nagłówka
   lokalizacji (pas + wyśrodkowanie) łapała też ten nagłówek. Zdejmujemy
   ją tutaj jawnie i podajemy pozycję, w której napis stoi naprawdę. */
body[data-theme="mono-ink"] .rg-dress .rg-h {
  left: 15.6%;
  width: 68.9%;
  top: 62.35%;
  height: auto;
  display: block;
  font-size: clamp(26px, calc(var(--rg-w, 760px) * 0.08), 61px);
  color: var(--rg-ink);
}
/* ── Próbki kolorów przy rysunku pary ─────────────────────────
   Projekt sam ich nie ma — niesie tylko rysunek i zdanie — ale w
   pozostałych zaproszeniach kółka są, więc dokładamy je i tutaj:
   po dwa z każdej strony pary, w pionie, wyśrodkowane na jej
   wysokości. Kolory idą z `parts.dressPalette` w rejestrze motywu
   (bez tego renderer wziąłby awaryjną różową paletę motywu 1).
   Jasne kółka dostają delikatną obwódkę, bo tło pod nimi to prawie
   biały tiul. */
/* Rysunek pary stoi W SIATCE (parts.dressFigure), a nie w tle sekcji.
   Wcześniej siatka była pasem 52 % szerokości z kółkami przyklejonymi
   do jego krawędzi, a rysunek leżał osobno w tle — kółka wypadały
   41–45 px od pary (na komputerze 80–87 px), podczas gdy we wspólnym
   układzie odstęp to `--rg-dress-odstep` (12–18 px). Teraz kolumny
   przylegają do rysunku i odstęp jest ten sam co w każdym motywie. */
body[data-theme="mono-ink"] .rg-dress-grid {
  display: grid;
  grid-template-columns: auto auto auto;
  justify-content: center;
  align-items: center;
  column-gap: var(--rg-dress-odstep);
  left: 0;
  width: 100%;
  top: 68.3%;                        /* tu stał rysunek pary w tle */
  margin: 0;
}
body[data-theme="mono-ink"] .rg-dress-grid .rg-dress-fig {
  display: block;
  /* szerokość z planszy: 18,756 % kadru; wysokość z proporcji pliku */
  width: calc(var(--rg-w, 760px) * 0.18756);
  max-width: none;
  height: auto;
  margin: 0;
}
body[data-theme="mono-ink"] .rg-dress-grid .rg-swatches {
  display: flex;
  flex-direction: column;
  gap: calc(var(--rg-w, 760px) * 0.026);
}
body[data-theme="mono-ink"] .rg-dress-grid .rg-sw {
  width: calc(var(--rg-w, 760px) * 0.056);
  height: calc(var(--rg-w, 760px) * 0.056);
  border-radius: 50%;
  box-shadow: none;
  border: 1px solid rgba(35, 35, 35, .22);
}
/* Zdanie pod rysunkiem — jego pozycja jest liczona razem z siatką
   (top 68,3 %), żeby grupa trzymała się nagłówka. */
body[data-theme="mono-ink"] .rg-dress .rg-p {
  left: 16.8%;
  width: 66.4%;
  top: 87.8%;
  margin: 0 !important;
  font-family: var(--rg-display);
  font-style: italic;
  font-size: clamp(10px, calc(var(--rg-w, 760px) * 0.0222), 17px);
  line-height: 1.5;
  color: var(--rg-navy);
}

/* ── EKRAN 6 — RSVP NA KORONKOWYM TALERZU ────────────────────
   Formularz leży na białej karcie trzymanej w dłoniach (y 19–87 %),
   a zdanie pod nim — już na ciemnym tle, więc na biało. */
body[data-theme="mono-ink"] .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="mono-ink"] .rg-rsvp .rg-card > * {
  position: absolute;
  margin: 0;
}
body[data-theme="mono-ink"] .rg-rsvp .rg-h {
  left: 36.1%;
  width: 27.7%;
  top: 25.3%;
  font-size: clamp(28px, calc(var(--rg-w, 760px) * 0.0956), 73px);
  color: var(--rg-ink);
}
body[data-theme="mono-ink"] .rg-rsvp .rg-q {
  left: 29.1%;
  width: 41.7%;
  top: 34.5%;
  font-family: 'Old Standard TT', serif;
  font-style: italic;
  font-size: clamp(12px, calc(var(--rg-w, 760px) * 0.0422), 32px);
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--rg-ink);
}
body[data-theme="mono-ink"] .rg-rsvp .rg-radios {
  left: 29.1%;
  width: 41.7%;
  top: 38.9%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--rg-w, 760px) * 5 / 3 * 0.006);
}
body[data-theme="mono-ink"] .rg-rsvp .rg-radio {
  font-family: 'Old Standard TT', serif;
  font-style: italic;
  font-size: clamp(11px, calc(var(--rg-w, 760px) * 0.0378), 29px);
  color: var(--rg-navy);
}
body[data-theme="mono-ink"] .rg-rsvp .rg-radio .dot { border-color: var(--rg-navy); }
body[data-theme="mono-ink"] .rg-rsvp .rg-sep { display: none; }
body[data-theme="mono-ink"] .rg-rsvp .rg-msg-label {
  left: 25.2%;
  width: 49.5%;
  top: 51.4%;
  font-family: 'Old Standard TT', serif;
  font-style: italic;
  font-size: clamp(12px, calc(var(--rg-w, 760px) * 0.0422), 32px);
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--rg-ink);
}
body[data-theme="mono-ink"] .rg-rsvp .rg-textarea {
  left: 22.5%;
  width: 54.8%;
  top: 54.6%;
  height: calc(var(--rg-w, 760px) * 5 / 3 * 0.0741);
  min-height: 0;
  background: var(--rg-pole);
  border: none;
  border-radius: 0;
  color: var(--rg-ink);
  font-family: var(--rg-display);
  font-style: italic;
  font-size: clamp(11px, calc(var(--rg-w, 760px) * 0.0222), 17px);
}
body[data-theme="mono-ink"] .rg-rsvp .rg-btn {
  left: 33.5%;
  width: 32.8%;
  top: 63.8%;
  height: calc(var(--rg-w, 760px) * 5 / 3 * 0.044);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 0;
  background: var(--rg-accent);
  color: #FFFFFF;
  font-family: var(--rg-display);
  font-style: italic;
  font-size: clamp(12px, calc(var(--rg-w, 760px) * 0.0389), 30px);
  letter-spacing: .06em;
  text-transform: uppercase;
}
body[data-theme="mono-ink"] .rg-rsvp .rg-btn:hover { background: #B2C48D; }
body[data-theme="mono-ink"] .rg-rsvp .rg-note {
  left: 26.6%;
  width: 46.8%;
  top: 84.8%;
  font-family: var(--rg-display);
  font-style: italic;
  font-size: clamp(10px, calc(var(--rg-w, 760px) * 0.0333), 25px);
  line-height: 1.4;
  color: #FFFFFF;
}
/* Nota leży na ciemnym zdjęciu — komunikat sukcesu (akcent) byłby tu
   nieczytelny, więc zostaje biały. */
body[data-theme="mono-ink"] .rg-rsvp .rg-note.rg-note-ok { color: #FFFFFF !important; }

/* ── EKRAN 7 — ZAKOŃCZENIE (CIEMNY) ──────────────────────────
   W projekcie są tu tylko imiona kaligrafią i zdanie od pary — bez
   nagłówka „Kilka słów od pary", więc nagłówek schowany. */
/* Imiona w TRZECH wierszach, tak jak na ekranie 2: imię, „&", imię.
   Ampersand jest osobnym blokiem, bo jako zwykły znak w wierszu brał
   pelna wysokosc wiersza imion i nazwiska rozjezdzaly sie na dwie linie
   („Aleksandra &" / „Marcin"). */
body[data-theme="mono-ink"] .rg-outro .rg-monogram {
  left: 20.11%;
  width: 60%;
  /* Imiona 2,5 pp wyżej niż środek grupy by chciał — żeby między nimi
     a zdaniem był oddech (odstęp rośnie z 1,6 do 4,1 % wysokości
     płótna). Nad imionami zostaje 9,1 %, pod zdaniem 11,6 % pustej
     karty, więc całość dalej siedzi na niej spokojnie. */
  top: 31.4%;
  font-family: var(--rg-script);
  font-size: clamp(34px, calc(var(--rg-w, 760px) * 0.1067), 81px);
  line-height: 1;
  color: #FFFFFF;
}
body[data-theme="mono-ink"] .rg-outro .rg-monogram .on-1,
body[data-theme="mono-ink"] .rg-outro .rg-monogram .on-2 { display: block; }
body[data-theme="mono-ink"] .rg-outro .rg-monogram .amp {
  display: block;
  font-size: .28em;
  line-height: 1;
}
/* Na wąskim ekranie zdanie łamie się na więcej wierszy (kolumna ma
   tam 153 px zamiast 299), więc cała grupa jest wyższa — imiona
   startują odpowiednio wyżej, żeby środek grupy dalej wypadał
   na środku karty. */
@media (max-width: 719px) {
  body[data-theme="mono-ink"] .rg-outro .rg-monogram { top: 29.3%; }
}
body[data-theme="mono-ink"] .rg-outro .rg-h { display: none; }
/* Imiona i zdanie stoją jako JEDNA GRUPA na środku białej karty.
   Karta w pliku 07-outro/tlo.webp zajmuje x 27,33–72,89 % i y
   22,27–73,33 % płótna, czyli jej środek to 50,11 % / 47,80 %.
   Grupa (imiona 33,9–48,48 % + zdanie) ma teraz dokładnie ten środek.
   Zdanie jest wyśrodkowane własnym punktem, żeby dłuższe podziękowanie
   rosło symetrycznie w górę i w dół, a nie tylko w dół. */
body[data-theme="mono-ink"] .rg-outro .rg-cols {
  left: 30.46%;
  width: 39.3%;
  top: 55.9%;
  translate: 0 -50%;
  display: block;
  text-align: center;
}
body[data-theme="mono-ink"] .rg-outro .rg-cols .rg-p {
  display: inline;
  font-family: var(--rg-display);
  font-style: italic;
  font-size: clamp(11px, calc(var(--rg-w, 760px) * 0.0322), 25px);
  line-height: 1.5;
  color: #FFFFFF;
  margin: 0;
}
body[data-theme="mono-ink"] .rg-outro .rg-cols .rg-p:first-child::after { content: " "; }

/* Biała karta ekranu 5 jest w pliku prostokątem (x 22,56–77,45 %,
   y 14,73–56,80 % płótna), nie grafiką — bez niej nagłówek, mapa
   i adres leżały wprost na ciemnym tiulu i ginęły. */
body[data-theme="mono-ink"] .rg-location > .rg-inner::before {
  content: "";
  position: absolute;
  left: 22.56%;
  width: 54.89%;
  top: 14.73%;
  height: calc(var(--rg-w, 760px) * 5 / 3 * 0.4207);
  background: #FFFFFF;
  z-index: -1;
}

/* Zakończenie: w pliku źródłowym imiona i zdanie mają fill #FFFFFF,
   ale leżą na jasnej koronkowej karcie (zmierzona jasność 210/255) —
   biel byłaby na niej praktycznie niewidoczna. Zostaje więc grafit
   z reszty motywu; to jedyne miejsce, w którym świadomie odchodzę
   od koloru z pliku, bo tam ten kolor się nie broni. */
body[data-theme="mono-ink"] .rg-outro .rg-monogram,
body[data-theme="mono-ink"] .rg-outro .rg-cols .rg-p {
  color: var(--rg-ink);
}
/* Data z miejscem jest u nas dłuższa niż w projekcie („13.09.2005"),
   więc łamie się na dwie linie — startuje wyżej i ma niższy sufit
   stopnia pisma, żeby zmieścić się na białym pasie (83,6–100 %). */
body[data-theme="mono-ink"] .rg-date .rg-dateline {
  top: 91.8%;
  font-size: clamp(16px, calc(var(--rg-w, 760px) * 0.0422), 32px);
  line-height: 1.1;
}

/* ── RSVP: pytania w jednej linii i na osi karty ─────────────
   Biała karta w koronkowej ramie zajmuje x 20,9–80,2 % płótna
   (zmierzone na pliku 06-rsvp/koronka_talerz.webp). Pytanie i etykieta
   miały pudełka z projektu (41,7 % i 49,5 %), ale Old Standard TT jest
   szerszy od kroju z pliku i polskie napisy łamały się na dwie linie —
   druga wchodziła na odpowiedzi i na pole wiadomości. Oba bloki
   dostają więc pełną szerokość karty i niższy stopień pisma. */
body[data-theme="mono-ink"] .rg-rsvp .rg-q,
body[data-theme="mono-ink"] .rg-rsvp .rg-msg-label {
  left: 20.9%;
  width: 59.3%;
  font-size: clamp(11px, calc(var(--rg-w, 760px) * 0.037), 28px);
  line-height: 1.25;
}
body[data-theme="mono-ink"] .rg-rsvp .rg-radios {
  left: 20.9%;
  width: 59.3%;
  top: 39.6%;
}

/* ── ODSŁONA: KOPERTA OTWIERA SIĘ NAPRAWDĘ ──────────────────
   Nie podmiana obrazka, tylko ruch: ta sama grafika koperty jest
   w odsłonie dwa razy (drugą kopię wstawia `parts.plateFlap`), a CSS
   tnie ją na dwie części — klapę i resztę koperty. Linia cięcia to
   dokładnie krawędź koronkowej klapy z pliku: dwa boki schodzą z rogów
   do 63 % wysokości, a między nimi jest jeszcze języczek na perłę
   (x 45–55 %, do 84 %), żeby perła otwierała się razem z klapą.

   Klapa obraca się wokół GÓRNEJ krawędzi (`rotateX`) z perspektywą —
   ten sam mechanizm, którym otwierają się skrzydła bramy w motywie 3,
   tylko oś jest pozioma. Ruch trwa 1,05 s, a wygaszanie całej nakładki
   startuje dopiero po nim, więc otwarcie widać w całości. */
body[data-theme="mono-ink"] .plate-key {
  clip-path: polygon(0% 0%, 45% 63%, 45% 84%, 55% 84%, 55% 63%, 100% 0%, 100% 100%, 0% 100%);
}
/* Wnętrze koperty widoczne w wycięciu po otwartej klapie: ta sama
   koronka, przycięta do trójkąta i przyciemniona, żeby czytała się
   jako spód, a nie jako druga klapa. */
body[data-theme="mono-ink"] .plate-wnetrze {
  clip-path: polygon(0% 0%, 100% 0%, 55% 63%, 55% 84%, 45% 84%, 45% 63%);
  background: linear-gradient(180deg, #DEDEDE 0%, #EDEDED 62%, #F4F4F4 100%);
}
body[data-theme="mono-ink"] .plate-klapa {
  clip-path: polygon(0% 0%, 100% 0%, 55% 63%, 55% 84%, 45% 84%, 45% 63%);
  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 moja
   reguła przegrywała i klapa dostawała zwykłe powiększenie zamiast
   obrotu. */
body[data-theme="mono-ink"] .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.
   Wcześniej korpus miał własne wygaszanie i najpierw znikał dół
   koperty, a klapa zostawała jeszcze przez chwilę w powietrzu. */
body[data-theme="mono-ink"] .plate-reveal.opening .plate-layer.plate-key,
body[data-theme="mono-ink"] .plate-reveal.opening .plate-layer.plate-wnetrze {
  transform: none;
  opacity: 1;
}
/* Tło odsłony stoi nieruchomo. W style.css każda warstwa poza kluczową
   dostaje przy wyjściu skalę 1,08 — to był ten najazd, który po
   zniknięciu nakładki „cofał się", bo plansza pod spodem żadnego
   powiększenia nie ma. Skoro odsłona leży teraz 1:1 na ekranie 2,
   każdy ruch tła to widoczny przeskok, więc go wyłączamy. */
body[data-theme="mono-ink"] .plate-reveal.opening .plate-layer:not(.plate-klapa) {
  transform: none;
}
/* ── PRZEJŚCIE Z ODSŁONY W ZAPROSZENIE ────────────────────────
   Wygaszenie było krótkie (1,05 s) i szło krzywą `cubic-bezier(.4,0,.2,1)`,
   która najwięcej zmienia w środku — zmierzone: krycie spadało z 0,86 do
   0,28 w ćwierć sekundy. Stąd wrażenie przeskoku. Teraz fade jest dłuższy
   (1,5 s) i LINIOWY, więc tempo zmiany jest stałe i prawie trzy razy
   niższe. Start 0,8 s — dokładnie gdy klapa kończy obrót, żeby nie było
   martwej chwili między jednym a drugim. Całość mieści się w 2,3 s, bo
   o 2,4 s skrypt chowa nakładkę (`display: none`). */
body[data-theme="mono-ink"] .plate-reveal.opening {
  transition: opacity 1.5s linear .8s;
}
/* Druga połowa problemu to nie tempo, tylko to, że odsłona i strona
   NIE BYŁY TAK SAMO ZABARWIONE. Strona ma na sobie stałą poświatę
   (`body::after`: dwa radialne gradienty, krycie 0,3, tryb `multiply`)
   — szarą u góry po lewej, ciepłą u dołu po prawej. Leży ona na
   z-index 1, a nakładka odsłony na 9000, więc barwiła planszę
   zaproszenia, ale już nie odsłonę. Po zgaśnięciu nakładki cały obraz
   zmieniał przez to ton — zmierzone przy 1730 px: boki 208 vs 240 po
   prawej, i to one odpowiadały za ponad połowę całej zmiany obrazu.
   Odsłona dostaje więc IDENTYCZNĄ poświatę, a rozmyte tło po bokach
   ustępuje bieli strony, żeby pod poświatą było dokładnie to samo. */
@media (min-aspect-ratio: 3 / 5) {
  body[data-theme="mono-ink"] .plate-bleed { display: none; }
}
body[data-theme="mono-ink"] .plate-reveal {
  /* Tło strony pod planszą to `#rgScreens` (#F4F4F5), nie czysta biel —
     nakładka miała #FFFFFF i po zgaśnięciu boki ciemniały o 11 poziomów. */
  background: var(--rg-cream, #F4F4F5);
}
/* Plansza zaproszenia ma powolny „oddech" (skala do 1,018 w 34 s).
   Odsłona go nie miała, więc w chwili zamiany wzór tiulu był przesunięty
   o kilka pikseli względem tego pod spodem — przy tak drobnej fakturze
   to widać. Obie warstwy powstają przy wczytaniu strony, więc ta sama
   animacja o tej samej długości trzyma je w tej samej fazie. */
body[data-theme="mono-ink"] .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 — w chwili zamiany tło potrafiło skoczyć o 2 %. */
  /* Ta sama maska co `.rg-bg` na stronie: plansza wygasza się na
     górze i dole, żeby sekcje przenikały się bez szwu. Odsłona jej
     nie miała, więc górny pasek tiulu był w niej o ponad 40 poziomów
     ciemniejszy niż w zaproszeniu pod spodem — to była najmocniejsza
     pojedyncza różnica między jednym a drugim obrazem. */
  -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="mono-ink"] .plate-canvas { animation: none; }
}
body[data-theme="mono-ink"] .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;
}
body[data-theme="mono-ink"] .plate-reveal.opening .plate-cta { opacity: 0; transition: opacity .3s; }
@media (prefers-reduced-motion: reduce) {
  body[data-theme="mono-ink"] .plate-reveal.opening .plate-klapa,
  body[data-theme="mono-ink"] .plate-reveal.opening .plate-key {
    transition: opacity .3s linear;
    transform: none;
  }
}

/* ── ODSŁONA MA WYMIAR PŁÓTNA, NIE OKNA ──────────────────────
   Bazowo `.plate-stage` skaluje się WYSOKOŚCIĄ okna (3:5), a plansza
   zaproszenia pod spodem — SZEROKOŚCIĄ płótna. Na telefonie obie
   wychodzą prawie tak samo i wygląda to dobrze, ale na szerokim
   ekranie laptopa rozjeżdżają się grubo: tło odsłony kończyło się
   w połowie ekranu, a koperta (dopasowana do planszy) wisiała już
   pod nim. Dla tego motywu plansza odsłony dostaje więc dokładnie
   wymiar płótna i jest przyklejona do góry — czyli leży 1:1 na
   planszy ekranu 2, tak jak po kliknięciu. */
body[data-theme="mono-ink"] .plate-reveal {
  align-items: flex-start;
}
body[data-theme="mono-ink"] .plate-stage {
  width: min(100vw, var(--rg-w, 760px));
  height: calc(min(100vw, var(--rg-w, 760px)) * 5 / 3);
}

/* „Dotknij, aby otworzyć" trzyma się DOŁU PLANSZY, nie dołu okna.
   Napis jest dzieckiem nakładki na całe okno, więc `bottom` liczy się
   od krawędzi ekranu. Na kompie plansza i tak sięga niżej niż okno
   i wychodzi to dobrze, ale na telefonie okno jest wyraźnie wyższe
   od planszy 3:5 — napis lądował ~120 px pod koronką, już na samym
   rozmytym tle. Warunek to nie „telefon", tylko sytuacja, w której
   plansza jest niższa od okna: proporcja okna węższa niż 3:5. */
@media (max-aspect-ratio: 3 / 5) {
  body[data-theme="mono-ink"] .plate-cta {
    bottom: auto;
    top: calc(min(100vw, var(--rg-w, 760px)) * 5 / 3 * 0.83);
  }
  /* Przy okazji: skoro plansza nie sięga dołu okna, jej dolna krawędź
     rysowała ostry szew na rozmytym tle. Wygaszamy ją, żeby koronka
     przechodziła w tło płynnie — dokładnie tak, jak `.rg-bg` na
     stronie wygasza styki sekcji. */
  body[data-theme="mono-ink"] .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%);
  }
}

/* 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="mono-ink"] .rg-date .rg-count { max-width: none; left: 20.3%; }  /* 20,3 + 59,4/2 = 50 — oś płótna */