/* =====================================================================================
   /odpowiedzialnosc/ — „Nasza odpowiedzialność” (kampania psich bud). Kierunek: filmowy.
   Pełnoszerokie, ciepłe fotografie przechodzące miękko w ecru; tekst w „świetle” kadru; burgund + subtelne złoto.
   Izolowany arkusz, klasy z prefiksem od-. Bez zmian w logice (licznik: licznik.js / licznik.json).
   ===================================================================================== */
:root{
  --od-ecru:#F8F1E6;
  --od-ecru-2:#F2E7D6;
  --od-paper:#FBF7F0;
  --od-beige:#E9D8BF;
  --od-burgundy:#6A1C2A;
  --od-burgundy-deep:#4C1320;
  --od-gold:#B38A4E;
  --od-gold-soft:#D9C092;
  --od-gold-ink:#8C6A34;
  --od-ink:#3A2A25;
  --od-ink-soft:#64534B;
  --od-serif:'Cormorant Garamond', 'Times New Roman', serif;
  --od-sans:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --od-script:'Alex Brush', 'Brush Script MT', cursive;
  --od-wrap:1240px;
  --od-gutter:clamp(18px, 4.5vw, 56px);
}
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body.od{ margin:0; background:var(--od-ecru); color:var(--od-ink); font-family:var(--od-sans); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img{ max-width:100%; display:block; }
a{ color:inherit; }
:focus-visible{ outline:2px solid var(--od-gold); outline-offset:3px; border-radius:6px; }
.od-wrap{ max-width:var(--od-wrap); margin:0 auto; padding:0 var(--od-gutter); }
.od-skip{ position:absolute; left:-9999px; top:8px; z-index:50; background:var(--od-burgundy); color:#F7EEE2; padding:8px 14px; border-radius:10px; }
.od-skip:focus{ left:12px; }

/* ---------- elementy wspólne ---------- */
.od-kicker{ display:flex; align-items:center; justify-content:center; gap:14px; margin:0 0 10px; font-family:var(--od-serif); font-size:15px; font-weight:600;
  letter-spacing:.32em; text-transform:uppercase; color:var(--od-gold-ink); }
.od-kicker::before, .od-kicker::after{ content:''; width:46px; height:1px; background:var(--od-gold-soft); }
.od-section-h{ margin:0 auto; max-width:22em; font-family:var(--od-serif); font-weight:500; font-size:clamp(30px, 3vw, 44px); line-height:1.12;
  color:var(--od-burgundy); text-align:center; text-wrap:balance; }
.od-rule{ display:block; width:88px; height:1px; margin:26px 0; background:linear-gradient(90deg, var(--od-gold) 0%, rgba(179,138,78,0) 100%); }
.od-rule--center{ margin-left:auto; margin-right:auto; background:linear-gradient(90deg, rgba(179,138,78,0), var(--od-gold), rgba(179,138,78,0)); width:120px; }
.od-btn{ display:inline-flex; align-items:center; gap:12px; padding:16px 32px; border-radius:999px; text-decoration:none;
  font-family:var(--od-serif); font-size:20px; font-weight:600; letter-spacing:.01em; color:#F8EFE3;
  background:linear-gradient(160deg, #7E2235 0%, var(--od-burgundy) 45%, var(--od-burgundy-deep) 100%);
  box-shadow:inset 0 0 0 1px rgba(217,192,146,.55), 0 18px 34px -18px rgba(76,19,32,.8); transition:transform .3s ease, filter .3s ease; }
.od-btn svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.od-btn:hover{ transform:translateY(-2px); filter:brightness(1.07); }
.od-btn:focus-visible{ outline-offset:4px; }

/* odsłanianie sekcji (tylko z JS i bez „ogranicz ruch”) */
.od-js .od-reveal{ opacity:0; transform:translateY(18px); transition:opacity 1.1s ease, transform 1.1s cubic-bezier(.2,.7,.2,1); }
.od-js .od-reveal.is-in{ opacity:1; transform:none; }

/* ---------- górny pasek (wzorzec podstron projektu; wspólny z /odpowiedzialnosc/regulamin/) ---------- */
.od-top{ position:relative; z-index:5; background:var(--od-paper); border-bottom:1px solid rgba(179,138,78,.22); }
.od-top__in{ display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:54px; }
.od-top__back{ font-size:14px; color:var(--od-ink-soft); text-decoration:none; }
.od-top__back:hover{ color:var(--od-burgundy); }
.od-top__brand{ font-family:var(--od-serif); font-size:20px; font-weight:600; color:var(--od-burgundy); text-decoration:none; letter-spacing:.02em; }

/* =====================================================================================
   STRONA AKCJI (body.od--main) — ciemniejsza, cieplejsza paleta: ecru i beże jako baza,
   głębokie brązy w cieniach, wyraźniejszy burgund, subtelne złoto, filmowe światło.
   Regulamin (/odpowiedzialnosc/regulamin/) korzysta tylko z elementów wspólnych powyżej i nie zmienia wyglądu.
   ===================================================================================== */
/* ---------- stopka (wspólna z /odpowiedzialnosc/regulamin/) ---------- */
.od-foot{ border-top:1px solid rgba(179,138,78,.22); background:var(--od-ecru-2); }
.od-foot__in{ display:flex; justify-content:space-between; gap:16px; padding-top:18px; padding-bottom:18px; font-size:13.5px; color:var(--od-ink-soft); }
.od-foot a{ text-decoration:none; color:var(--od-burgundy); }

.od--main{
  --m-ecru:#F2E6D4;
  --m-sand:#E7D4B8;
  --m-sand-deep:#D9BF9B;
  --m-umber:#3B2418;
  --m-burgundy:#6E1B2C;
  --m-burgundy-deep:#4A0F1C;
  --m-gold:#B48A4F;
  --m-gold-light:#E2C68C;
  --m-ink:#2C1D17;
  --m-ink-soft:#54413A;
  --m-cream:#F6EBD8;
  --m-display:'Fraunces', 'Cormorant Garamond', Georgia, serif;   /* krój modułu „pomost” ze strony głównej */
  background:var(--m-ecru); color:var(--m-ink);
}
.od--main .od-top{ background:#F6ECDD; border-bottom-color:rgba(180,138,79,.3); }
.od--main .od-top__brand{ color:var(--m-burgundy); }
.od--main .od-foot{ background:#E9DAC3; border-top-color:rgba(180,138,79,.3); }
.od--main .od-foot__in{ color:var(--m-ink-soft); }

/* wspólne elementy tej strony */
.od--main .od-kicker{ color:#8A6532; }
.od--main .od-kicker::before, .od--main .od-kicker::after{ background:linear-gradient(90deg, rgba(180,138,79,0), var(--m-gold)); }
.od--main .od-kicker::after{ background:linear-gradient(270deg, rgba(180,138,79,0), var(--m-gold)); }
.od--main .od-orn{ display:flex; align-items:center; justify-content:center; gap:14px; }
.od--main .od-orn > span{ width:72px; height:1px; background:linear-gradient(90deg, rgba(180,138,79,0), var(--m-gold)); }
.od--main .od-orn > span:last-child{ background:linear-gradient(270deg, rgba(180,138,79,0), var(--m-gold)); }
.od--main .od-orn svg{ width:13px; height:13px; fill:var(--m-burgundy); }
.od--main .od-orn--light > span{ background:linear-gradient(90deg, rgba(226,198,140,0), var(--m-gold-light)); }
.od--main .od-orn--light > span:last-child{ background:linear-gradient(270deg, rgba(226,198,140,0), var(--m-gold-light)); }
.od--main .od-orn--light svg{ fill:var(--m-gold-light); }

.od-btn--main{ background:linear-gradient(160deg, #84253A 0%, var(--m-burgundy) 45%, var(--m-burgundy-deep) 100%);
  box-shadow:inset 0 0 0 1px rgba(226,198,140,.6), 0 20px 36px -18px rgba(74,15,28,.85); }
.od-btn--light{ color:var(--m-burgundy-deep); background:linear-gradient(180deg, #F8EEDD 0%, #EAD7B5 100%);
  box-shadow:inset 0 0 0 1px rgba(255,248,232,.7), 0 0 0 1px rgba(226,198,140,.75), 0 22px 40px -20px rgba(0,0,0,.6); }
.od-btn--light:hover{ filter:brightness(1.04); }

/* =====================================================================================
   1. HERO — pełnoszerokie zdjęcie; po lewej ciepłe światło z logo i tekstem, po prawej głębszy, filmowy kadr
   ===================================================================================== */
.od-hero{ position:relative; min-height:clamp(660px, 92vh, 900px); display:flex; align-items:center; overflow:hidden; isolation:isolate; background:var(--m-ecru); }
.od-hero__photo{ position:absolute; inset:0; z-index:-2; }
.od-hero__photo img{ width:100%; height:100%; object-fit:cover; object-position:74% 50%; }
.od-hero__veil{ position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(60% 75% at 18% 46%, rgba(246,235,216,.97) 0%, rgba(244,231,210,.9) 42%, rgba(242,228,206,0) 78%),
    linear-gradient(90deg, rgba(243,231,212,.96) 0%, rgba(241,228,207,.82) 30%, rgba(236,220,196,.25) 52%, rgba(60,30,18,0) 62%, rgba(46,22,14,.22) 100%),
    linear-gradient(180deg, rgba(46,22,14,.18) 0%, rgba(46,22,14,0) 22%, rgba(46,22,14,0) 70%, rgba(242,230,212,.9) 96%, var(--m-ecru) 100%); }
.od-hero__in{ width:100%; }
.od-hero__content{ max-width:620px; padding:56px 0 110px; }
/* oryginalne logo — skalowane proporcjonalnie, ciepła poświata pod spodem wtapia je w światło kadru */
.od-logo{ position:relative; margin:0 0 26px -10px; width:clamp(188px, 15vw, 236px); }
.od-logo::before{ content:''; position:absolute; inset:-14% -18%; z-index:-1; pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%, rgba(251,244,231,.95) 0%, rgba(249,240,224,.7) 45%, rgba(249,240,224,0) 100%); }
.od-logo img{ width:100%; height:auto; }
.od-hero__title{ margin:0; font-family:var(--od-serif); font-weight:500; font-size:clamp(46px, 4.6vw, 72px); line-height:1.02;
  letter-spacing:-.01em; color:var(--m-burgundy-deep); text-wrap:balance; }
.od--main .od-rule{ background:linear-gradient(90deg, var(--m-gold) 0%, rgba(180,138,79,0) 100%); margin:26px 0; }
.od-hero__lead{ margin:0 0 36px; max-width:46ch; font-size:17px; line-height:1.7; color:var(--m-ink-soft); }
.od-hero__lead strong{ font-weight:600; color:var(--m-ink); }

/* =====================================================================================
   2. RAZEM TWORZYMY CIEPŁE MIEJSCA — zdjęcie budy jako tło sceny, złoty łuk licznika nachodzi na nie z lewej
   ===================================================================================== */
.od-warm{ position:relative; overflow:hidden; isolation:isolate; padding:clamp(56px, 6vw, 96px) 0 clamp(64px, 7vw, 104px);
  background:
    radial-gradient(48% 62% at 72% 44%, rgba(247,214,168,.55) 0%, rgba(247,214,168,0) 70%),
    radial-gradient(90% 80% at 50% 0%, rgba(242,230,212,0) 55%, rgba(201,169,124,.28) 100%),
    linear-gradient(180deg, var(--m-ecru) 0%, #EEDDC4 100%); }
.od-stage{ position:relative; display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); align-items:center; }
.od-house{ grid-column:4 / -1; grid-row:1; margin:0; position:relative; z-index:0; text-align:center; }
.od-house img{ width:100%; height:auto;
  /* miękkie wtopienie w tło: elipsa sięga krawędzi kadru, więc zdjęcie nie ma prostokątnych brzegów */
  -webkit-mask-image:radial-gradient(56% 54% at 56% 48%, #000 50%, rgba(0,0,0,.55) 76%, transparent 100%);
          mask-image:radial-gradient(56% 54% at 56% 48%, #000 50%, rgba(0,0,0,.55) 76%, transparent 100%); }
/* podpis pod budą: krój modułu „pomost” (Fraunces), bez ozdobnej kursywy */
.od-house__cap{ margin:-18px auto 0; max-width:24em; padding-left:22%; font-family:var(--m-display); font-weight:400; font-size:clamp(19px, 1.55vw, 23px);
  line-height:1.45; letter-spacing:.005em; color:var(--m-ink); text-wrap:balance; }
.od-count{ grid-column:1 / 6; grid-row:1; position:relative; z-index:1; text-align:center; padding:12px 0; }
.od-count__h{ margin:0; font-family:var(--od-serif); font-weight:500; font-size:clamp(38px, 3.4vw, 52px); line-height:1.06; color:var(--m-burgundy-deep); text-wrap:balance; }
/* złoty łuk — echo wejścia do budy; podwójna linia, ciepłe wypełnienie, które przykrywa krawędź zdjęcia */
.od-count__arch{ position:relative; margin:34px auto 0; width:min(100%, 392px); padding:62px 30px 34px; border-radius:200px 200px 26px 26px;
  background:linear-gradient(180deg, rgba(250,242,228,.92) 0%, rgba(245,233,214,.9) 100%);
  box-shadow:inset 0 0 0 1px rgba(180,138,79,.7), inset 0 0 0 9px rgba(250,242,228,.0), 0 40px 70px -40px rgba(74,40,22,.55);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
.od-count__arch::before{ content:''; position:absolute; inset:9px; border:1px solid rgba(180,138,79,.38); border-radius:191px 191px 18px 18px; pointer-events:none; }
.od-count__heart{ position:absolute; top:-9px; left:50%; width:18px; height:18px; margin-left:-17px; padding:0 8px; box-sizing:content-box;
  background:var(--m-ecru); fill:var(--m-burgundy); }
.od-count__num{ margin:0; display:flex; align-items:baseline; justify-content:center; gap:16px; min-height:clamp(128px, 11vw, 168px); }
.od-count__n{ font-family:var(--od-serif); font-weight:500; font-size:clamp(128px, 11vw, 172px); line-height:.86; font-variant-numeric:lining-nums;
  background:linear-gradient(180deg, #E0C083 0%, #B48A4F 52%, #7E5B2A 100%); -webkit-background-clip:text; background-clip:text; color:transparent;
  opacity:0; transition:opacity .9s ease; }
.od-count__w{ font-family:var(--od-serif); font-weight:600; font-size:clamp(26px, 2.2vw, 32px); letter-spacing:.2em; text-transform:uppercase; color:var(--m-burgundy);
  opacity:0; transition:opacity .9s ease .15s; }
.od-count__num.is-ready .od-count__n, .od-count__num.is-ready .od-count__w{ opacity:1; }
.od-count__txt{ margin:14px auto 0; max-width:26ch; font-size:15.5px; line-height:1.6; color:var(--m-ink-soft); }
.od-count__start{ margin:26px auto 0; max-width:28ch; font-family:var(--m-display); font-style:italic; font-weight:400; font-size:clamp(19px, 1.5vw, 22px);
  line-height:1.5; color:var(--m-burgundy); text-wrap:balance; }
.od-count__date{ display:flex; align-items:center; justify-content:center; gap:10px; margin:22px auto 0; font-size:13.5px; line-height:1.5; color:var(--m-ink-soft); }
.od-count__date svg{ width:20px; height:20px; flex:none; fill:none; stroke:var(--m-gold); stroke-width:1.5; stroke-linecap:round; }
.od-count__date small{ display:block; font-size:12.5px; opacity:.85; }

/* =====================================================================================
   3. JAK TO DZIAŁA? — większe medaliony na złotej linii, ciepła głębia tła
   ===================================================================================== */
.od-how{ position:relative; padding:clamp(64px, 7vw, 104px) 0 clamp(72px, 8vw, 112px);
  background:
    radial-gradient(60% 90% at 50% 0%, rgba(255,246,230,.55) 0%, rgba(255,246,230,0) 70%),
    linear-gradient(180deg, #EEDDC4 0%, #E5CFAF 100%);
  border-top:1px solid rgba(180,138,79,.22); }
.od-steps__h{ margin:0 0 clamp(40px, 4.5vw, 64px); display:flex; align-items:center; justify-content:center; gap:18px; font-family:var(--od-serif);
  font-weight:500; font-size:clamp(34px, 3vw, 46px); line-height:1.1; color:var(--m-burgundy-deep); }
.od-steps__h::before, .od-steps__h::after{ content:''; width:72px; height:1px; background:linear-gradient(90deg, rgba(180,138,79,0), var(--m-gold)); }
.od-steps__h::after{ background:linear-gradient(270deg, rgba(180,138,79,0), var(--m-gold)); }
.od-steps__list{ position:relative; list-style:none; margin:0 auto; padding:0; max-width:1160px; display:grid; grid-template-columns:repeat(4, 1fr); gap:clamp(24px, 3vw, 48px); }
/* linia łącząca: złoty gradient przez środek medalionów */
.od-steps__list::before{ content:''; position:absolute; top:48px; left:12.5%; right:12.5%; height:1px;
  background:linear-gradient(90deg, rgba(180,138,79,.25), var(--m-gold) 18%, var(--m-gold) 82%, rgba(180,138,79,.25)); }
.od-steps__list li{ position:relative; text-align:center; padding:0 4px; }
.od-ico{ position:relative; width:96px; height:96px; margin:0 auto 22px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 32%, #FFF8EC 0%, #F3E4CB 62%, #E7D0AC 100%); color:var(--m-burgundy);
  box-shadow:inset 0 0 0 1px rgba(180,138,79,.75), 0 0 0 6px rgba(238,221,196,1), 0 0 0 7px rgba(180,138,79,.35), 0 22px 34px -20px rgba(74,40,22,.6); }
.od-ico svg{ width:36px; height:36px; fill:none; stroke:currentColor; stroke-width:1.35; stroke-linecap:round; stroke-linejoin:round; }
.od-steps__no{ display:block; font-family:var(--od-serif); font-weight:600; font-size:16px; letter-spacing:.24em; color:#8A6532; font-variant-numeric:lining-nums; }
.od-steps__list h3{ margin:6px 0 10px; font-family:var(--od-serif); font-weight:600; font-size:clamp(23px, 1.9vw, 27px); line-height:1.15; color:var(--m-ink); }
.od-steps__list p{ margin:0 auto; max-width:24ch; font-size:15.5px; line-height:1.6; color:var(--m-ink-soft); }

/* =====================================================================================
   4. NIE MOŻEMY ZMIENIĆ CAŁEGO ŚWIATA — kinowy kadr; jasna typografia Fraunces jak w module „pomost”
   ===================================================================================== */
.od-world{ position:relative; min-height:clamp(640px, 92vh, 880px); display:flex; align-items:center; overflow:hidden; isolation:isolate; background:#2B1A12; }
.od-world__photo{ position:absolute; inset:0; z-index:-2; }
.od-world__photo img{ width:100%; height:100%; object-fit:cover; object-position:30% 58%; }
/* światło pod tekstem: z prawej ciepły, przygaszony bursztyn, który przechodzi w zdjęcie */
.od-world__veil{ position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(48% 70% at 74% 50%, rgba(36,20,13,.66) 0%, rgba(36,20,13,.42) 55%, rgba(36,20,13,0) 100%),
    linear-gradient(90deg, rgba(26,14,9,0) 34%, rgba(26,14,9,.42) 62%, rgba(26,14,9,.6) 100%),
    linear-gradient(180deg, rgba(229,207,175,.9) 0%, rgba(229,207,175,0) 9%, rgba(26,14,9,0) 82%, rgba(26,14,9,.35) 100%); }
.od-world__in{ width:100%; display:flex; justify-content:flex-end; }
.od-world__panel{ max-width:580px; padding:88px 0; text-align:center; }
.od-world__title{ margin:0; font-family:var(--m-display); font-weight:400; font-size:clamp(32px, 2.9vw, 44px); line-height:1.2; letter-spacing:.01em;
  color:#EFE3CC; text-shadow:0 3px 18px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.4); text-wrap:balance; }
/* puenta — największy, najjaśniejszy moment strony */
.od-world__sub{ margin:18px 0 0; font-family:var(--m-display); font-weight:500; font-style:italic; font-size:clamp(40px, 4vw, 62px); line-height:1.08; letter-spacing:-.005em;
  color:#E8C878; text-shadow:0 4px 26px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.35); text-wrap:balance; }
/* październik 2027 — oddzielony od cytatu ornamentem i własnym, spokojnym blokiem */
.od-world__when-box{ margin:clamp(40px, 4vw, 56px) auto 0; max-width:440px; padding:28px 28px 26px; border-radius:22px;
  background:linear-gradient(180deg, rgba(30,17,11,.38), rgba(30,17,11,.22)); box-shadow:inset 0 0 0 1px rgba(226,198,140,.28); }
.od-world__when-box .od-orn{ margin-bottom:14px; }
.od-world__when-box .od-orn > span{ width:54px; background:linear-gradient(90deg, rgba(226,198,140,0), var(--m-gold-light)); }
.od-world__when-box .od-orn > span:last-child{ background:linear-gradient(270deg, rgba(226,198,140,0), var(--m-gold-light)); }
.od-world__when-box .od-orn svg{ fill:var(--m-gold-light); }
.od-world__when{ margin:0; font-family:var(--od-serif); font-weight:600; font-size:17px; letter-spacing:.32em; text-transform:uppercase; color:var(--m-gold-light); }
.od-world__txt{ margin:10px auto 0; max-width:36ch; font-size:15.5px; line-height:1.7; color:rgba(246,235,216,.9); }

/* =====================================================================================
   5. NASZE WSPÓLNE HISTORIE — wystawa fotograficzna: symetryczna siatka, karty 3:4 w passe-partout ze złotą ramką
   Stany karty: data-state="zapowiedz" (rozmyte zdjęcie, numer, „Wkrótce”) i data-state="historia" (ostre zdjęcie + opis).
   ===================================================================================== */
.od-stories{ position:relative; padding:clamp(88px, 9vw, 136px) 0 clamp(96px, 10vw, 148px);
  background:
    radial-gradient(60% 40% at 50% 0%, rgba(255,247,233,.75) 0%, rgba(255,247,233,0) 100%),
    linear-gradient(180deg, #E4CFB1 0%, #EADBC4 22%, #E6D4BA 100%); }
.od-stories__head{ text-align:center; max-width:780px; margin:0 auto; }
.od-stories__head .od-orn{ margin-bottom:20px; }
.od-stories__h{ margin:0; font-family:var(--od-serif); font-weight:500; font-size:clamp(25px, 2.3vw, 33px); line-height:1.35;
  letter-spacing:.14em; text-transform:uppercase; color:var(--m-ink); text-wrap:balance; }
.od-stories__lead{ margin:16px auto 0; max-width:54ch; font-size:15.5px; color:var(--m-ink-soft); }

.od-gallery{ list-style:none; margin:clamp(52px, 5vw, 76px) auto 0; padding:0; max-width:1120px;
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:clamp(28px, 3vw, 44px); align-items:stretch; }
.od-story{ margin:0; display:flex; }
/* passe-partout: jasna oprawa, cienka złota ramka, miękki cień jak na ścianie galerii */
.od-story__card{ position:relative; margin:0; width:100%; padding:14px 14px 0; border-radius:6px;
  background:linear-gradient(180deg, #FBF5EA 0%, #F4E9D7 100%);
  box-shadow:inset 0 0 0 1px rgba(180,138,79,.55), inset 0 0 0 5px #FBF5EA, inset 0 0 0 6px rgba(180,138,79,.22),
             0 30px 50px -30px rgba(59,36,24,.55), 0 2px 6px -2px rgba(59,36,24,.18); }
.od-story__media{ position:relative; aspect-ratio:3/4; border-radius:2px; overflow:hidden; isolation:isolate;
  background:linear-gradient(165deg, #E9D7BA 0%, #D9BF98 55%, #C9A97C 100%);
  box-shadow:inset 0 0 0 1px rgba(59,36,24,.12); }
.od-story__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.03);
  transition:transform 1.4s cubic-bezier(.2,.7,.2,1), filter 1.4s ease; }
.od-story__media::after{ content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(90% 70% at 50% 40%, rgba(255,240,215,0) 40%, rgba(59,36,24,.22) 100%); transition:opacity 1.2s ease; }
/* zapowiedź: zdjęcie delikatnie rozmyte */
.od-story[data-state="zapowiedz"] .od-story__media img{ filter:blur(7px) saturate(.9) brightness(1.04); transform:scale(1.1); }
/* brak pliku zapowiedzi → neutralne, ciepłe pole z linearną budą (bez przypadkowych zdjęć) */
.od-story.is-missing .od-story__media::after{ background:
  no-repeat 50% 46%/34% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23FBF4E8' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 30 32 8l26 22'/%3E%3Cpath d='M12 26v30h40V26'/%3E%3Cpath d='M24 56V42a8 8 0 0 1 16 0v14'/%3E%3C/svg%3E"),
  radial-gradient(90% 70% at 50% 40%, rgba(255,240,215,.18) 0%, rgba(59,36,24,.2) 100%); }
/* tabliczka pod zdjęciem jak w galerii: serce, numer, „Wkrótce” */
.od-story__badge{ position:relative; margin:0; display:flex; align-items:center; gap:10px; padding:16px 4px 18px; color:var(--m-ink); }
.od-story__heart{ flex:none; width:13px; height:13px;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23B48A4F' d='M12 21s-7-4.35-9.5-8.5C.8 9 2 5 5.5 4.2 8 3.6 10 5 12 7c2-2 4-3.4 6.5-2.8C22 5 23.2 9 21.5 12.5 19 16.65 12 21 12 21z'/%3E%3C/svg%3E"); }
.od-story__no{ font-family:var(--od-serif); font-weight:600; font-size:26px; line-height:1; letter-spacing:.06em; font-variant-numeric:lining-nums; color:var(--m-burgundy); }
.od-story__soon{ margin-left:auto; font-family:var(--od-serif); font-style:italic; font-size:18px; letter-spacing:.02em; color:#8A6532; }

/* przyszły stan „historia”: ostre zdjęcie, a pod tabliczką opis */
.od-story[data-state="historia"] .od-story__media img{ filter:none; transform:scale(1.02); }
.od-story[data-state="historia"] .od-story__badge{ padding-bottom:4px; }
.od-story__body{ padding:6px 4px 20px; }
.od-story__title{ margin:0; font-family:var(--od-serif); font-weight:500; font-size:25px; line-height:1.2; color:var(--m-burgundy); }
.od-story__desc{ margin:8px 0 0; font-size:14.5px; line-height:1.65; color:var(--m-ink-soft); }
.od-story__meta{ margin:10px 0 0; display:flex; flex-wrap:wrap; gap:4px 14px; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:#8A6532; }
.od-story__link{ display:inline-flex; align-items:center; gap:8px; margin-top:14px; font-family:var(--od-serif); font-size:18px; font-weight:600;
  color:var(--m-burgundy); text-decoration:none; border-bottom:1px solid rgba(110,27,44,.35); padding-bottom:2px; }
.od-story__link:hover{ border-bottom-color:var(--m-burgundy); }

/* najechanie: powolne, subtelne przybliżenie (tylko urządzenia z myszą; bez przy „ogranicz ruch”) */
@media (hover:hover) and (prefers-reduced-motion: no-preference){
  .od-story:hover .od-story__media img{ transform:scale(1.07); }
  .od-story[data-state="zapowiedz"]:hover .od-story__media img{ transform:scale(1.15); filter:blur(6px) saturate(.95) brightness(1.06); }
  .od-story:hover .od-story__media::after{ opacity:.75; }
}
@media (prefers-reduced-motion: reduce){ .od-story__media img{ transition:none; } }
/* odsłanianie kart rzędami, z drobnym opóźnieniem w rzędzie */
.od-js .od-gallery .od-reveal:nth-child(3n+2){ transition-delay:.12s; }
.od-js .od-gallery .od-reveal:nth-child(3n){ transition-delay:.24s; }

/* =====================================================================================
   6. TRANSPARENTNOŚĆ I REGULAMIN — burgundowe domknięcie ze złotem
   ===================================================================================== */
.od-rules{ position:relative; overflow:hidden; isolation:isolate; padding:clamp(80px, 8vw, 120px) 0 clamp(88px, 9vw, 128px); color:var(--m-cream);
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(160,52,72,.55) 0%, rgba(160,52,72,0) 70%),
    radial-gradient(80% 90% at 50% 120%, rgba(30,6,12,.55) 0%, rgba(30,6,12,0) 70%),
    linear-gradient(180deg, #6E1B2C 0%, #561424 60%, #470F1D 100%); }
/* przejście z galerii: ciepłe światło spływa w burgund + złota nitka */
.od-rules::before{ content:''; position:absolute; left:0; right:0; top:0; height:1px; z-index:1;
  background:linear-gradient(90deg, rgba(226,198,140,0), rgba(226,198,140,.8) 50%, rgba(226,198,140,0)); }
.od-stories{ box-shadow:inset 0 -60px 60px -40px rgba(110,27,44,.12); }
.od-rules__in{ display:flex; flex-direction:column; align-items:center; text-align:center; }
.od-rules__in .od-orn{ margin-bottom:20px; }
.od-rules__h{ margin:0; font-family:var(--od-serif); font-weight:500; font-size:clamp(38px, 3.6vw, 54px); line-height:1.08; color:#F8EEDD; text-wrap:balance; }
.od-rules__list{ list-style:none; margin:clamp(40px, 4vw, 56px) auto clamp(44px, 4.5vw, 60px); padding:0; max-width:1040px; width:100%;
  display:grid; grid-template-columns:repeat(3, 1fr); counter-reset:odr; }
.od-rules__list li{ position:relative; padding:4px clamp(18px, 2.4vw, 36px) 0; font-size:16px; line-height:1.65; color:rgba(246,235,216,.92); counter-increment:odr; }
.od-rules__list li + li{ border-left:1px solid rgba(226,198,140,.28); }
.od-rules__list li::before{ content:counter(odr, decimal-leading-zero); display:block; margin:0 auto 12px; font-family:var(--od-serif); font-weight:600;
  font-size:22px; letter-spacing:.2em; color:var(--m-gold-light); font-variant-numeric:lining-nums; }

/* =====================================================================================
   TABLET (poziomo i pionowo)
   ===================================================================================== */
@media (max-width:1100px){
  .od-steps__list{ grid-template-columns:repeat(2, 1fr); gap:48px 32px; max-width:720px; }
  .od-steps__list::before{ display:none; }
  .od-house{ grid-column:3 / -1; }
  .od-count{ grid-column:1 / 7; }
}

/* =====================================================================================
   TELEFON (i tablet pionowo) — osobna kompozycja: pionowy kadr u góry, tekst w ecru pod nim
   ===================================================================================== */
@media (max-width:860px){
  .od-hero{ display:block; min-height:0; }
  .od-hero__photo{ position:relative; inset:auto; display:block; aspect-ratio:3/4; max-height:82svh; }
  .od-hero__photo img{ object-position:50% 66%;
    -webkit-mask-image:linear-gradient(180deg, #000 68%, transparent 100%); mask-image:linear-gradient(180deg, #000 68%, transparent 100%); }
  .od-hero__veil{ display:none; }
  .od-hero__content{ max-width:none; margin-top:-96px; padding:0 0 64px; text-align:center; display:flex; flex-direction:column; align-items:center; }
  .od-logo{ width:min(52vw, 210px); margin:0 0 18px; }
  .od-hero__title{ font-size:clamp(38px, 10vw, 52px); }
  .od--main .od-rule{ margin:22px auto; background:linear-gradient(90deg, rgba(180,138,79,0), var(--m-gold), rgba(180,138,79,0)); }
  .od-hero__lead{ font-size:16px; }

  .od-stage{ display:block; }
  .od-house img{ max-width:520px; margin:0 auto;
    -webkit-mask-image:radial-gradient(52% 50% at 50% 48%, #000 55%, transparent 100%); mask-image:radial-gradient(52% 50% at 50% 48%, #000 55%, transparent 100%); }
  .od-house__cap{ padding-left:0; margin-top:-14px; font-size:19px; }
  .od-count{ margin-top:36px; padding:0; }
  .od-count__arch{ width:min(100%, 360px); padding:56px 22px 30px; }

  .od-world{ display:block; min-height:0; background:linear-gradient(180deg, #E5CFAF 0%, #3A2318 18%, #2B1A12 100%); }
  .od-world__photo{ position:relative; inset:auto; display:block; aspect-ratio:3/4; max-height:86svh; }
  .od-world__photo img{ object-position:50% 70%;
    -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 8%, #000 72%, transparent 100%);
            mask-image:linear-gradient(180deg, transparent 0%, #000 8%, #000 72%, transparent 100%); }
  .od-world__veil{ display:none; }
  .od-world__in{ display:block; }
  .od-world__panel{ max-width:none; margin-top:-120px; padding:0 0 80px; position:relative; }
  .od-world__title{ font-size:clamp(28px, 7.4vw, 36px); }
  .od-world__sub{ font-size:clamp(36px, 10vw, 48px); }

  .od-rules__list{ grid-template-columns:1fr; max-width:460px; gap:26px; }
  .od-rules__list li + li{ border-left:0; border-top:1px solid rgba(226,198,140,.28); padding-top:26px; }
}
@media (max-width:640px){
  .od-gallery{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:18px 14px; }
  .od-story__card{ padding:8px 8px 0; border-radius:4px;
    box-shadow:inset 0 0 0 1px rgba(180,138,79,.55), 0 20px 34px -22px rgba(59,36,24,.55), 0 1px 4px -1px rgba(59,36,24,.18); }
  .od-story__badge{ gap:6px; padding:11px 2px 12px; }
  .od-story__no{ font-size:19px; }
  .od-story__soon{ font-size:14px; }
  .od-story__heart{ width:10px; height:10px; }
  .od-stories__h{ letter-spacing:.08em; font-size:21px; }
  .od-steps__list{ grid-template-columns:1fr 1fr; gap:36px 14px; }
  .od-ico{ width:76px; height:76px; margin-bottom:16px; }
  .od-ico svg{ width:30px; height:30px; }
  .od-steps__list h3{ font-size:20px; }
  .od-steps__list p{ font-size:14px; }
  .od-steps__h::before, .od-steps__h::after{ width:36px; }
  .od-btn{ font-size:19px; padding:15px 28px; }
  .od-top__brand{ font-size:18px; }
  .od-count__arch{ padding:50px 16px 26px; }
}

/* ---------- /odpowiedzialnosc/regulamin/ — miejsce na regulamin (bez treści prawnych) ---------- */
.od-reg{ min-height:calc(100svh - 120px); display:flex; align-items:center;
  background:radial-gradient(90% 70% at 50% 30%, #FCF7EE 0%, var(--od-ecru) 55%, var(--od-ecru-2) 100%); }
.od-reg__in{ width:100%; padding-top:72px; padding-bottom:88px; text-align:center; display:flex; flex-direction:column; align-items:center; }
.od-reg__h{ margin:0; font-family:var(--od-serif); font-weight:600; font-size:clamp(38px, 4vw, 54px); line-height:1.1; color:var(--od-burgundy); }
.od-reg__msg{ margin:14px 0 34px; font-family:var(--od-serif); font-style:italic; font-size:clamp(21px, 2vw, 26px); color:var(--od-ink-soft); }