/* Antresola v3 — wieczór w kamienicy.
   Układ wzorowany na rytmie Zimmerl: mało ról tekstu, dużo powietrza, wyśrodkowane wejścia do sekcji,
   wysokie ramy zdjęć (materiał jest pionowy), papier vintage tam, gdzie gość czyta menu i ceny. */

:root {
  /* kolor */
  --ink: #0f0d0b;
  --ink-2: #17130f;
  --brown: #2a1a11;
  --paper-c: #ece6db;
  --text: #efe7dc;
  --text-dim: #bcae9b;
  --text-faint: #908370;
  --copper: #c99668;
  --on-paper: #211912;
  --on-paper-dim: #5b4c3d;
  --copper-on-paper: #7d5534;
  /* kraft: jeden atrament na wszystko (≥4,5:1 także na ciemniejszych plamach tekstury); miedź i odcienie „dim” nie mieszczą się w kontraście */
  --kraft-c: #ab855e;
  --on-kraft: #0d0906; /* ok. 5,9:1 na średnim krafcie, ≥4,5:1 także na najciemniejszych 5% tekstury (drobny tekst przy rachunku) */
  --receipt-c: #fbf8f2; /* kartka rachunku: jaśniejsza od papieru menu, on-paper 16,3:1 */
  --hair: rgba(239, 231, 220, .14);
  --hair-paper: rgba(33, 25, 18, .18);
  /* uwaga: --text-faint tylko na ink / ink-2; na --brown drobny tekst co najmniej --text-dim (faint = 4,52:1, na granicy) */

  /* kroje: Bellefair (zamiennik Valky), Jost 300 (zamiennik Nord), Judson (jak Zimmerl) */
  --f-display: "Bellefair", "Times New Roman", Georgia, serif;
  --f-sans: "Jost", "Helvetica Neue", Arial, sans-serif;
  --f-serif: "Judson", Georgia, "Times New Roman", serif;

  /* jedyne role tekstu */
  --t-h1: 400 clamp(2.2rem, 4.6vw, 3.5rem)/1.06 var(--f-display); /* strony bez zdjęcia w hero (menu, galeria, kontakt, struktura): 3,5rem; hero ze zdjęciem: reguła przy .hero--occ / .hero--home */
  --t-h2: 400 clamp(1.8rem, 3.2vw, 2.75rem)/1.1 var(--f-display);
  --t-h3: 400 clamp(1.25rem, 1.7vw, 1.5rem)/1.2 var(--f-display);
  --t-kicker: 300 clamp(.95rem, 1.15vw, 1.05rem)/1.5 var(--f-sans);
  --t-lead: 400 clamp(1.15rem, 1.45vw, 1.32rem)/1.65 var(--f-serif);
  --t-body: 400 1.125rem/1.75 var(--f-serif);
  --t-small: 400 1rem/1.6 var(--f-serif);
  --t-ui: 400 .8125rem/1.3 var(--f-sans);
  --ls-display: .035em;
  --ls-kicker: .14em;
  --ls-ui: .14em;

  --gutter: clamp(16px, 4vw, 56px);
  --maxw: 1240px;
  --narrow: 46rem;
  --sec: clamp(96px, 12vw, 176px);
  --hdr: 78px;
  --tex-paper: url("../tex/paper.jpg");
  --tex-kraft: url("../tex/kraft.jpg");
  color-scheme: dark;
}

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--hdr) + 16px); }
body { margin: 0; background: var(--ink); color: var(--text); font: var(--t-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, video { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--copper); outline-offset: 4px; }
.sec--paper :focus-visible, .on-paper :focus-visible { outline-color: var(--copper-on-paper); }
.sec--kraft :focus-visible { outline-color: var(--on-kraft); }
[tabindex="-1"]:focus { outline: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 16px; top: -80px; z-index: 200; display: inline-flex; align-items: center; min-height: 44px; background: var(--text); color: var(--ink); padding: 12px 18px; font: var(--t-ui); letter-spacing: var(--ls-ui); text-transform: uppercase; text-decoration: none; }
.skip:focus { top: 16px; }
.page { overflow-x: clip; }
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: calc(var(--narrow) + 2 * var(--gutter)); }

/* ——— typografia (role) ——— */
.h1 { margin: 0; font: var(--t-h1); letter-spacing: var(--ls-display); text-transform: uppercase; text-wrap: balance; }
.h2 { margin: 0; font: var(--t-h2); letter-spacing: var(--ls-display); text-transform: uppercase; text-wrap: balance; }
.h3 { margin: 0; font: var(--t-h3); letter-spacing: .05em; text-transform: uppercase; text-wrap: balance; }
/* bez pojedynczego słowa w ostatnim wierszu akapitu (Chromium; inne przeglądarki łamią zwyczajnie) */
p, li, dd, dt, figcaption { text-wrap: pretty; }
.faq summary, .steps h3, .pkg__name, .form__note, .sign { text-wrap: balance; }
.kicker { margin: 0; font: var(--t-kicker); letter-spacing: var(--ls-kicker); text-transform: uppercase; color: var(--copper); }
.lead { font: var(--t-lead); color: var(--text-dim); }
.small { font: var(--t-small); }
.ui { font: var(--t-ui); letter-spacing: var(--ls-ui); text-transform: uppercase; }
.dim { color: var(--text-dim); }
.verify { color: var(--text-faint); }
.verify b { font-weight: 400; color: var(--copper); }
.sec--paper .verify { color: var(--on-paper-dim); }
.sec--paper .verify b { color: var(--copper-on-paper); }
.intro { display: grid; gap: 22px; justify-items: center; text-align: center; max-width: var(--narrow); margin-inline: auto; }
.intro .lead { max-width: 38em; }
.prose { display: grid; gap: 1.05em; max-width: 36em; }
.prose p { color: var(--text-dim); }
.prose p:first-child { color: var(--text); }

/* ——— przyciski i linki ——— */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .75em; min-height: 52px; padding: 0 1.7em; font: var(--t-ui); letter-spacing: var(--ls-ui); text-transform: uppercase; text-decoration: none; border: 1px solid transparent; border-radius: 999px; cursor: pointer; background: none; transition: background .3s, color .3s, border-color .3s; }
.btn svg { width: 16px; height: 16px; flex: none; }
.btn--solid { background: var(--text); color: var(--ink); }
.btn--line { border-color: rgba(239, 231, 220, .42); color: var(--text); }
.btn--ink { background: var(--on-paper); color: var(--paper-c); }
/* wypełnienie pod myszą tylko przy (hover: hover): na dotyku :hover zostaje po stuknięciu i wygląda jak stan „włączony”;
   stuknięcie daje krótki :active (ten sam wzór co −/+ rachunku) */
@media (hover: hover) {
  .btn--solid:hover { background: var(--copper); }
  .btn--line:hover { border-color: var(--copper); color: var(--copper); }
  .btn--ink:hover { background: var(--copper-on-paper); }
}
.btn--solid:active { background: var(--copper); transition-duration: 0s; }
.btn--line:active { border-color: var(--copper); color: var(--copper); transition-duration: 0s; }
.btn--ink:active { background: var(--copper-on-paper); transition-duration: 0s; }
.btn--sm { min-height: 44px; padding: 0 1.3em; }
.actions { display: flex; flex-wrap: wrap; gap: 14px; }
.intro .actions { justify-content: center; }
.more { display: inline-flex; align-items: center; gap: 12px; font: var(--t-ui); letter-spacing: var(--ls-ui); text-transform: uppercase; text-decoration: none; color: var(--copper); }
.more svg { width: 26px; height: 10px; transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.more:hover svg { transform: translateX(6px); }
.on-paper .more { color: var(--copper-on-paper); }

/* ——— ramy zdjęć i filmy ——— */
.frame { position: relative; overflow: hidden; margin: 0; background: var(--ink-2); }
.frame > picture { display: contents; } /* <picture> w ramie (hero telefonu): obraz zachowuje się jak bezpośrednie dziecko ramy */
.frame > img, .frame > video, .frame > picture > img { width: 100%; height: 100%; object-fit: cover; }
.frame--para > img, .frame--para > video { position: absolute; left: 0; top: -9%; height: 118%; }
.r-34 { aspect-ratio: 3 / 4; }
.r-45 { aspect-ratio: 4 / 5; }
.r-916 { aspect-ratio: 9 / 16; }
.r-wide { aspect-ratio: 16 / 10; }
/* jeden grading filmów; plakat kafelka dostaje ten sam filtr co film, więc start rolki nie zmienia koloru.
   is-day: rolki z dziennego światła (jaśniejsze od zdjęć) mocniej przygaszone */
.film, .ig__tile[data-video-tile] > img { filter: var(--film, saturate(.8) contrast(1.05) brightness(.93) sepia(.06)); }
.is-day { --film: saturate(.8) contrast(1.05) brightness(.72) sepia(.06); }
/* pauza filmu: ten sam okrągły przycisk co w sliderze opinii, na ciemnej podkładce */
.vidctl { position: absolute; left: 14px; bottom: 14px; z-index: 2; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid var(--copper); background: rgba(15, 13, 11, .72); color: var(--copper); display: grid; place-items: center; cursor: pointer; transition: background .3s, color .3s; }
@media (hover: hover) { .vidctl:hover { background: var(--copper); color: var(--ink); } }
.vidctl:active { background: var(--copper); color: var(--ink); transition-duration: 0s; }
.vidctl:focus-visible { outline-offset: 2px; box-shadow: 0 0 0 2px var(--ink), 0 0 0 6px var(--ink); }
.vidctl svg { width: 16px; height: 16px; }
.vidctl .i-play, .roundbtn--toggle .i-play, .is-paused .i-pause { display: none; }
.vidctl.is-paused .i-play, .roundbtn--toggle.is-paused .i-play { display: block; }

/* ——— nagłówek ——— */
.hdr { position: fixed; inset: 0 0 auto 0; padding-top: env(safe-area-inset-top, 0px); z-index: 80; border-bottom: 1px solid transparent; transition: background .4s, border-color .4s; }
.hdr.is-solid, .hdr.is-open { background: rgba(15, 13, 11, .94); border-bottom-color: var(--hair); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.hdr__in { display: flex; align-items: center; gap: 28px; min-height: var(--hdr); }
.brand { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; text-decoration: none; margin-right: auto; }
.brand__mark { width: 36px; height: auto; }
.brand__word { width: 116px; height: auto; }
.nav { display: flex; align-items: center; gap: clamp(16px, 2vw, 28px); }
.nav__a, .nav__btn { white-space: nowrap; font: var(--t-ui); letter-spacing: var(--ls-ui); text-transform: uppercase; text-decoration: none; color: var(--text-dim); background: none; border: 0; padding: 8px 0; cursor: pointer; transition: color .3s; display: inline-flex; align-items: center; gap: 8px; }
.nav__a:hover, .nav__btn:hover, .nav__a[aria-current="page"], .nav__btn.is-current { color: var(--text); }
.nav__btn svg { width: 9px; height: 9px; transition: transform .3s; }
.nav__btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.drop { position: relative; }
.drop__panel { position: absolute; top: calc(100% + 14px); left: -24px; min-width: 260px; padding: 14px 0; background: rgba(23, 19, 15, .98); border: 1px solid var(--hair); }
.drop__panel::before { content: ""; position: absolute; left: 0; right: 0; top: -15px; height: 15px; } /* most nad szczeliną: panel nie gaśnie w drodze kursora */
.drop__panel a { display: block; padding: 10px 24px; font: var(--t-small); text-decoration: none; color: var(--text-dim); transition: color .3s, background .3s; }
.drop__panel a:focus-visible { outline-offset: -4px; } /* link na całą szerokość panelu: pierścień w środku, nie za ramką */
.drop__panel a:hover, .drop__panel a[aria-current="page"] { color: var(--text); background: rgba(239, 231, 220, .04); }
.drop__panel a.drop__all { font: var(--t-ui); letter-spacing: var(--ls-ui); text-transform: uppercase; color: var(--copper); border-bottom: 1px solid var(--hair); margin-bottom: 6px; padding-bottom: 14px; }
.hdr__tel { font: var(--t-ui); letter-spacing: var(--ls-ui); text-decoration: none; white-space: nowrap; color: var(--text); transition: color .3s; }
@media (hover: hover) { .hdr__tel:hover { color: var(--copper); } }
.hdr__menu { display: none; }
.hdr.is-open { background: var(--ink); -webkit-backdrop-filter: none; backdrop-filter: none; }
.mnav { border-top: 1px solid var(--hair); height: calc(100vh - var(--hdr) - env(safe-area-inset-top, 0px)); height: calc(100svh - var(--hdr) - env(safe-area-inset-top, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); overflow-y: auto; overscroll-behavior: contain; background: var(--ink); }
html.is-locked, html.is-locked body { overflow: hidden; }
.mnav ul { list-style: none; margin: 0; padding: 8px 0 28px; }
.mnav li a { display: block; padding: 14px 0; font: var(--t-h3); letter-spacing: .05em; text-transform: uppercase; text-decoration: none; color: var(--text); border-bottom: 1px solid var(--hair); }
.mnav li.sub a { font: var(--t-small); text-transform: none; letter-spacing: 0; padding-left: 18px; color: var(--text-dim); }
.mnav li a:focus-visible { outline-offset: -2px; } /* link na całą szerokość: pierścień w środku */
.mnav li a[aria-current="page"] { color: var(--copper); } /* „tu jesteście”, jak w menu desktopowym */
.mnav .actions { margin-top: 24px; }

/* ——— sekcje ——— */
.sec { padding-block: var(--sec); position: relative; }
.sec--tight { padding-block: calc(var(--sec) * .6); }
.sec--tight + .sec--tight { padding-top: 0; } /* pasek zdjęć i cytat pod nim (urodziny): jeden odstęp, cytat czyta się jak podpis */
.sec--ink2 { background: var(--ink-2); }
.sec--brown { background: var(--brown); }
.sec--paper, .on-paper { color: var(--on-paper); color-scheme: light; }
.sec--paper { background: var(--paper-c) var(--tex-paper) repeat; background-size: 768px; }
/* podarty brzeg: papier menu i kraft pod rachunkiem (.sec--torn) leżą arkuszem na sąsiednich sekcjach */
.sec--paper::before, .sec--paper::after, .sec--torn::before, .sec--torn::after { content: ""; position: absolute; left: 0; right: 0; height: 22px; background: inherit; background-size: 768px;
  -webkit-mask: url("../tex/edge.png") repeat-x 0 0 / 640px 22px; mask: url("../tex/edge.png") repeat-x 0 0 / 640px 22px; }
.sec--paper::before, .sec--torn::before { top: -21px; }
.sec--paper::after, .sec--torn::after { bottom: -21px; transform: scaleY(-1); }
.sec--kraft { background: var(--kraft-c) var(--tex-kraft) repeat; background-size: 768px; color: var(--on-kraft); color-scheme: light; }
.sec--paper .kicker, .on-paper .kicker { color: var(--copper-on-paper); }
.sec--paper .lead, .sec--paper .dim, .on-paper .lead, .on-paper .dim { color: var(--on-paper-dim); }
.sec--paper .prose p { color: var(--on-paper-dim); }
.sec--paper .prose p:first-child { color: var(--on-paper); }
/* kraft: hierarchia z ról tekstu (Jost caps, rozmiar Judson), nie z jasności */
.sec--kraft .kicker, .sec--kraft .lead, .sec--kraft .dim, .sec--kraft .prose p { color: var(--on-kraft); }
.sec + .sec--paper, .sec--paper + .sec { z-index: 1; }

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 112px); align-items: center; }
.split--media-first > :first-child { order: -1; }
.split--wide-media { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); align-items: end; } /* wesele: zdjęcie jest tu treścią, większe niż tekst */
.split--wide-media .collage { padding-right: 15%; padding-bottom: 11%; }
.split--wide-media .quote--side { padding-bottom: clamp(16px, 3vw, 48px); } /* cytat przy dolnym rogu, obok mniejszego zdjęcia, jak podpis */
.split__text { display: grid; gap: 28px; min-width: 0; }

/* ——— hero ——— */
.hero { padding-block: calc(var(--hdr) + clamp(36px, 6vw, 88px)) clamp(64px, 8vw, 120px); }
.hero__in { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(36px, 6vw, 104px); align-items: end; }
/* kolumna tekstu jest kontenerem: H1 nie wychodzi poza nią (najdłuższe słowo, „okolicznościowe”, to ok. 10,4 em, więc 9,4cqi);
   na niskich ekranach H1 maleje także z wysokością (7,4svh), żeby przyciski zostały w pierwszym ekranie */
.hero__text { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; min-width: 0; container-type: inline-size; }
.hero .h1 { font-size: min(max(2.2rem, min(4.6vw, 7.4svh)), 3.5rem, 9.4cqi); }
.hero__lead { max-width: 30em; }
.hero__media { margin: 0; min-width: 0; }
.hero__media .frame { max-height: 80vh; }
.hero__still { display: none; } /* strona główna: zdjęcie stołu zamiast filmu tylko na telefonie */
/* kropka przed każdą pozycją; lista wysunięta o 30 px w lewo i przycięta clip-path, więc kropka pozycji, która zaczyna wiersz
   (także po zawinięciu), zostaje poza kolumną tekstu i nie wisi na lewym marginesie; 8 px zapasu u góry i u dołu na podkreślenie
   i pierścień fokusu linku, 22 px z lewej (kropki leżą 13–17 px w liście), więc lewy brzeg pierścienia też widać;
   linia nad listą to tło od 30 px (krawędź kolumny tekstu), nie border, który wystawałby 8 px w lewo */
.facts { list-style: none; margin: 0 0 0 -30px; padding: 22px 0 0; background: linear-gradient(var(--hair), var(--hair)) 30px 0 / calc(100% - 30px) 1px no-repeat; clip-path: inset(-8px 0 -8px 22px); display: flex; flex-wrap: wrap; gap: 10px 0; font: var(--t-ui); letter-spacing: var(--ls-ui); text-transform: uppercase; color: var(--text-dim); }
.facts li { position: relative; margin-left: 30px; }
.facts li::before { content: ""; position: absolute; left: -17px; top: .5em; width: 4px; height: 4px; border-radius: 50%; background: var(--copper); }
.rating { display: inline-flex; align-items: center; gap: 10px; width: fit-content; font: var(--t-ui); letter-spacing: var(--ls-ui); text-transform: uppercase; color: var(--text-dim); text-decoration: none; }
.rating b { font-weight: 400; color: var(--text); }
.rating__star { color: var(--copper); font-size: 1rem; line-height: 1; }
.crumbs { display: flex; flex-wrap: wrap; gap: 10px; font: var(--t-ui); letter-spacing: var(--ls-ui); text-transform: uppercase; color: var(--text-faint); }
.crumbs a { text-decoration: none; color: var(--text-dim); transition: color .3s; }
.crumbs a:hover { color: var(--text); }
.crumbs [aria-current] { color: var(--text-dim); }
/* fakt-link (główna: „Cały lokal od 4 500 zł” → rachunek) */
.facts__a { color: inherit; text-decoration: underline; text-decoration-color: var(--text-faint); text-decoration-thickness: 1px; text-underline-offset: .35em; transition: color .3s, text-decoration-color .3s; }
@media (hover: hover) { .facts__a:hover { color: var(--copper); text-decoration-color: var(--copper); } }
/* zdjęcie hero widoczne od pierwszego malowania; z ruchem startuje lekko powiększone (.motion-pre) i osiada, gdy klasa znika */
.hero__media .frame > img, .hero__media .frame > video, .hero__media .frame > picture > img { transition: transform 2.2s cubic-bezier(.16, 1, .3, 1); }

/* hero okazji i O nas: stół i ludzie najpierw. Zdjęcie na pełną wysokość przy prawej krawędzi, zaczyna się pod nagłówkiem
   (nawigacja zawsze na atramencie, żaden tekst nie leży na zdjęciu); H1 dopasowany do najdłuższego słowa (--lw z build.py) */
@media (min-width: 1081px) {
  :is(.hero--occ, .hero--home) { padding: 0; }
  :is(.hero--occ, .hero--home) .hero__in { max-width: none; padding: 0; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; align-items: stretch; min-height: max(620px, min(100svh, 980px)); }
  :is(.hero--occ, .hero--home) .hero__text { align-content: end; padding: calc(var(--hdr) + 32px) clamp(40px, 5vw, 96px) clamp(48px, 6vw, 88px) max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter))); }
  :is(.hero--occ, .hero--home) .hero__media { position: relative; margin-top: var(--hdr); }
  :is(.hero--occ, .hero--home) .hero__media .frame { position: absolute; inset: 0; max-height: none; aspect-ratio: auto; }
  .hero--occ .hero__media .frame > img { object-position: var(--band, 50% 50%); }
  .hero--occ .h1 { font-size: min(calc(100cqi / var(--lw, 7)), 4.5rem, max(2.2rem, 8.4svh)); }
  /* rolka (wesele, główna): w całości 9:16 na pełną wysokość, bez kadrowania */
  :is(.hero--film, .hero--home) .hero__in { grid-template-columns: minmax(0, 1fr) auto; }
  .hero--film .hero__media { height: calc(max(620px, min(100svh, 980px)) - var(--hdr)); aspect-ratio: 9 / 16; max-width: 44vw; }
  /* wesele: krótki H1 (dwa wiersze) przy pełnej wysokości rolki: tekst na środku wysokości, bez pustego pasa atramentu nad okruszkami */
  .hero--film .hero__text { align-content: center; }
  /* główna: hero niższe niż ekran (86svh), więc pod nim widać już podarty brzeg kraftu i ząbki rachunku; H1 w skali hero okazji,
     ale ograniczony wysokością ekranu, bo zdanie jest długie (cztery, pięć wierszy) */
  .hero--home { --hh: max(600px, min(86svh, 900px)); }
  .hero--home .hero__in { min-height: var(--hh); }
  .hero--home .hero__text { padding-bottom: clamp(40px, 4.5vw, 64px); }
  /* szerokość z wysokości hero (9:16), wysokość rozciągnięta do wiersza: gdy tekst jest wyższy (wąskie okno), film sięga
     do brzegu kraftu i lekko się kadruje (object-fit), zamiast zostawiać pas atramentu pod spodem */
  .hero--home .hero__media { width: min(40vw, calc((var(--hh) - var(--hdr)) * 9 / 16)); }
  .hero--home .h1 { font-size: min(calc(100cqi / var(--lw, 7)), 4.5rem, max(3.3rem, 7svh)); }
}
/* reguła H1 hero ze zdjęciem: min(najdłuższe słowo mieści się w kolumnie, 4,5rem, limit wysokości ekranu).
   Główna od 1281 px: węższy prawy margines kolumny i limit 7,5svh, więc przy 1440x900 H1 ma skalę okazji (ok. 67 px), zdanie
   zostaje w czterech wierszach, a brzeg kraftu nadal w pierwszym ekranie. Poniżej 1281 px hero byłoby wyższe niż ekran */
@media (min-width: 1281px) {
  .hero--home .hero__text { padding-right: clamp(32px, 3.4vw, 56px); }
  .hero--home .h1 { font-size: min(calc(100cqi / var(--lw, 7)), 4.5rem, max(3.3rem, 7.5svh)); }
}
@media (min-width: 1081px) and (max-width: 1200px) {
  .hero--occ .h1 { font-size: min(calc(100cqi / var(--lw, 7)), 4.5rem, max(2.2rem, 7.6svh)); }
}
@media (min-width: 721px) and (max-width: 1080px) {
  .hero--occ .h1 { font-size: min(max(2.2rem, min(4.6vw, 7.4svh)), 3.5rem, calc(100cqi / var(--lw, 7))); }
}

/* Przyjęcia: hero to sam wybór okazji (wstęp nad siatką kafli) */
.hero--index .intro { max-width: 60rem; container-type: inline-size; }
/* H1 Przyjęć w skali hero okazji: dopasowany do szerokości wstępu (najdłuższe słowo „okolicznościowe”, --lw z build.py), do 4,5rem */
@media (min-width: 721px) { .hero--index .h1 { font-size: min(calc(100cqi / var(--lw, 7)), 4.5rem, max(2.2rem, 8.4svh)); } }
.hero--index .ogrid { margin-top: clamp(40px, 5vw, 64px); }
.hero--index .hero__still { aspect-ratio: 16 / 10; max-height: 34svh; margin-bottom: 22px; }
.hero--index .hero__still img { object-position: var(--band, 50% 50%); }

/* Menu: strona zaczyna się od karty menu na papierze; ceny pakietów są dużą literą (rola h2) */
.menu-hero { margin-top: calc(var(--hdr) + 22px); padding-top: clamp(48px, 6vw, 88px); z-index: 1; }
.menu-hero .actions { justify-content: center; }
.menu-card__sub { text-align: center; }
.menu-card--full .pkg__name, .menu-card--full .pkg__price { font: var(--t-h2); letter-spacing: var(--ls-display); }
.menu-band { display: none; }
.sec--paper .btn--line { border-color: rgba(33, 25, 18, .45); color: var(--on-paper); }
@media (hover: hover) { .sec--paper .btn--line:hover { border-color: var(--copper-on-paper); color: var(--copper-on-paper); } }
.sec--paper .btn--line:active { border-color: var(--copper-on-paper); color: var(--copper-on-paper); }

/* Kontakt: numer telefonu jako największa liczba strony (rola h1, cyfry; do 6rem, nie szerzej niż kolumna) */
.book__in.contact__in { grid-template-areas: "top form" "more form"; grid-template-rows: auto 1fr; row-gap: 28px; }
.contact__top { grid-area: top; }
.contact__in > .form { grid-area: form; }
.contact__more { grid-area: more; }
.tel--xl { container-type: inline-size; }
.tel--xl .tel__num { font: 400 min(6rem, 19cqi)/.95 var(--f-display); letter-spacing: .02em; }

/* ——— właściciele ——— */
.owners__media, .collage { position: relative; padding-right: 18%; padding-bottom: 14%; }
.owners__second, .collage__second { position: absolute; right: 0; bottom: 0; width: 42%; border: 8px solid var(--ink); }
/* liczba jako dowód (główna: „4,8” w Google, O nas: „9 lat”): rola h1, cyfry jak numer na Kontakcie, do 6rem */
.numeral { display: block; font: 400 clamp(4rem, 8vw, 6rem)/.9 var(--f-display); letter-spacing: .02em; text-transform: uppercase; font-variant-numeric: lining-nums; }
.score__h { display: grid; gap: 10px; }
.bignum { display: grid; gap: 12px; justify-items: start; padding-bottom: 28px; border-bottom: 1px solid var(--hair); }
.bignum .ui { color: var(--text-dim); }
.bignum__t { font: var(--t-lead); color: var(--text); max-width: 22em; }
/* wesele: duże zdjęcie stołu z mniejszym obok (ten sam układ co właściciele na głównej) i cytat gościa przy nim */
.quote.quote--side { text-align: left; margin-inline: 0; }
.sign { font: var(--t-h3); letter-spacing: .05em; text-transform: uppercase; color: var(--copper); }

/* ——— karty okazji z CTA na najechaniu ——— */
.occ { background: var(--brown); }
.occ__pin { position: relative; display: flex; align-items: center; padding-block: var(--sec); }
.occ--pinned .occ__pin { min-height: 100svh; padding-block: 48px; }
.occ__viewport { width: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter))); scrollbar-width: thin; scrollbar-color: var(--copper) transparent; padding-bottom: 18px; }
.occ--pinned .occ__viewport { overflow: hidden; scroll-snap-type: none; padding-block: 8px; }
.occ__viewport { padding-top: 8px; } /* miejsce na pierścień fokusa kart (overflow przycina górę) */
.occ__viewport:focus-visible { outline-offset: -2px; }
.occ__track { list-style: none; margin: 0; display: flex; align-items: flex-end; gap: clamp(20px, 2.6vw, 40px); width: max-content; padding-inline: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter))); }
.occ__intro { flex: none; width: min(28rem, 34vw); display: grid; gap: 24px; align-self: center; padding-right: 16px; scroll-snap-align: start; }
.occ__track > li.card-li { flex: none; width: clamp(240px, min(24vw, calc((100svh - 330px) * .75)), 340px); scroll-snap-align: start; }
.ocard { display: grid; gap: 16px; text-decoration: none; color: inherit; }
.ocard .frame { aspect-ratio: 3 / 4; }
.ocard .frame img { transition: transform 1.1s cubic-bezier(.2,.8,.2,1); }
.ocard__veil { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(15, 13, 11, .48); opacity: 0; transition: opacity .45s; }
.ocard__cta { transform: translateY(10px); transition: transform .45s cubic-bezier(.2,.8,.2,1); pointer-events: none; }
.ocard:hover .frame img, .ocard:focus-visible .frame img { transform: scale(1.06); }
.ocard:hover .ocard__veil, .ocard:focus-visible .ocard__veil { opacity: 1; }
.ocard:hover .ocard__cta, .ocard:focus-visible .ocard__cta { transform: none; }
.ocard__body { display: grid; gap: 8px; }
.ocard__meta { font: var(--t-ui); letter-spacing: var(--ls-ui); text-transform: uppercase; color: var(--copper); }
.ocard__text { font: var(--t-small); color: var(--text-dim); }
.ocard__go { display: none; }
.occ__progress { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 32px; height: 1px; background: var(--hair); display: none; }
.occ--pinned .occ__progress { display: block; }
.occ__progress span { display: block; height: 100%; background: var(--copper); transform-origin: left; transform: scaleX(0); }
@media (hover: none) { .ocard__veil { display: none; } .ocard__go { display: inline-flex; } }

/* siatka okazji (strona Przyjęcia) */
.ogrid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px) clamp(20px, 3vw, 40px); }
.ogrid > * { grid-column: span 4; }
.ogrid > .wide { grid-column: span 6; }
.ogrid > .wide .frame { aspect-ratio: 4 / 3; }

/* ——— karta menu (papier) ——— */
.menu-card { max-width: 980px; margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(36px, 5vw, 56px); }
.menu-card__head { display: grid; gap: 18px; justify-items: center; text-align: center; }
.leafline { width: 180px; height: auto; }
.pkg { display: grid; gap: 14px; padding-block: 30px; border-top: 1px solid var(--hair-paper); }
.pkg:last-child { border-bottom: 1px solid var(--hair-paper); }
.pkg__row { display: flex; align-items: baseline; gap: 16px; }
.pkg__name { margin: 0; font: var(--t-h3); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.pkg__dots { flex: 1; min-width: 24px; border-bottom: 1px dotted rgba(33, 25, 18, .45); transform-origin: left; }
.pkg__price { min-width: 0; font: var(--t-h3); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.pkg__price .verify { white-space: normal; }
.pkg__price span { font: var(--t-ui); letter-spacing: var(--ls-ui); text-transform: uppercase; color: var(--on-paper-dim); margin-left: 4px; }
.pkg__desc { font: var(--t-small); color: var(--on-paper-dim); max-width: 38em; }
.pkg__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 18px 36px; }
@media (min-width: 861px) { .menu-card--full .pkg__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* menu: wspólna siatka czterech kolumn, „Drugie danie” w tym samym miejscu w każdym pakiecie */
.pkg__cols h4, .pkg__cols h3 { margin: 0 0 6px; font: var(--t-ui); letter-spacing: var(--ls-ui); text-transform: uppercase; color: var(--copper-on-paper); }
.pkg__cols p { font: var(--t-small); color: var(--on-paper-dim); }
.pkg__note { font: var(--t-small); color: var(--on-paper); }
/* pod pakietami: wymiana dań i wersja wegetariańska (listek), linie ikon w kolorze akcentu na papierze */
.perks { list-style: none; margin: 28px 0 0; padding: 20px 0 0; border-top: 1px solid var(--hair-paper); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 14px 40px; }
.perks li { display: flex; align-items: flex-start; gap: 12px; font: var(--t-small); color: var(--on-paper); }
.perks .ico, .veg-legend .ico { flex: none; width: 22px; height: 22px; color: var(--copper-on-paper); }
.veg { display: inline-flex; vertical-align: -.12em; margin-left: .2em; color: var(--copper-on-paper); }
.veg .ico { width: 1.05em; height: 1.05em; }
.veg-legend { display: flex; align-items: center; gap: 10px; margin: 18px 0 0; font: var(--t-small); color: var(--on-paper-dim); }
/* jak zarezerwować salę: cztery opcje (scena rachunku na krafcie i „Sala” na O nas) */
.rooms { margin-top: 28px; width: 100%; max-width: 34rem; text-align: left; }
.rooms__h { margin: 0 0 6px; font: var(--t-ui); letter-spacing: var(--ls-ui); text-transform: uppercase; }
.rooms__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
.rooms__list li { display: grid; gap: 2px; align-content: start; padding: 12px 0; border-top: 1px solid rgba(13, 9, 6, .28); }
.rooms__n { font: var(--t-h3); letter-spacing: .05em; text-transform: uppercase; }
.rooms__d { font: var(--t-small); }
.rooms--dark { margin: 40px auto 0; max-width: 46rem; }
.rooms--dark .rooms__h { color: var(--copper); }
.rooms--dark .rooms__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rooms--dark .rooms__list li { border-top-color: var(--hair); }
.rooms--dark .rooms__d { color: var(--text-dim); }
@media (max-width: 720px) { .rooms--dark .rooms__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.terms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; }
.terms div { display: flex; justify-content: space-between; gap: 18px; padding-block: 14px; border-bottom: 1px solid var(--hair-paper); font: var(--t-small); }
.terms dt { color: var(--on-paper-dim); }
.terms dd { margin: 0; text-align: right; }
.terms--one { grid-template-columns: minmax(0, 1fr); }
/* nieparzysta liczba warunków: ostatni na całą szerokość (bez pustej komórki i krótszej linii);
   trzy warunki w jednym rzędzie dopiero od 1081 px, na tabletach kolumny po ~200 px łamały „bez limitu” i „w cenie” */
@media (min-width: 721px) {
  .terms > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 1081px) {
  .terms:not(.terms--one):has(> div:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .terms:not(.terms--one):has(> div:nth-child(3):last-child) > div { grid-column: auto; }
  .terms:not(.terms--one):has(> div:nth-child(3):last-child) dd { white-space: nowrap; } /* krótkie wartości („bez limitu”, „+99 zł / os.”) w jednej linii; łamie się tylko opis po lewej */
}
/* dwie listy obok siebie (np. „W cenie” i „Dodatkowo płatne”), każda z nagłówkiem w roli UI */
.terms-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 48px; align-items: start; }
.terms__h { margin: 0 0 4px; font: var(--t-ui); letter-spacing: var(--ls-ui); text-transform: uppercase; color: var(--copper-on-paper); }
.terms--dark div { border-bottom-color: var(--hair); }
.terms--dark dt { color: var(--text-dim); }
.terms--dark dd a { padding-block: 13px; }

/* ——— rachunek: znak rozpoznawczy strony ———
   scena: kraft na całą szerokość z podartymi brzegami (ten sam brzeg co papier), wstęp po lewej, kartka po prawej.
   Kartka: papier --receipt-c z teksturą, ząbki u góry i u dołu (maska na .receipt__paper). Cień przez filter: drop-shadow
   na opakowaniu (.receipt), bo maska obcina box-shadow; drop-shadow idzie za kształtem maski, razem z ząbkami. */
.sec--torn { z-index: 1; }
/* reguła szwów (DESIGN.md › Materiały): podarty brzeg tylko tam, gdzie materiał styka się z atramentem; kraft z papierem
   łączą się prostą krawędzią (nie trzy podarte brzegi z rzędu: hero → kraft → papier → atrament). Tak na każdej stronie */
.sec--torn + .sec--paper::before, .sec--paper + .sec--torn::before,
.sec--torn:has(+ .sec--paper)::after, .sec--paper:has(+ .sec--torn)::after { display: none; }
/* scena krótsza niż zwykła sekcja: na głównej spod hero (86svh) wychodzą już podarty brzeg i ząbki kartki */
.est-stage { padding-block: clamp(64px, 6vw, 96px); }
.est-stage__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 28px clamp(40px, 7vw, 112px); align-items: start; }
/* wstęp zaczyna się na wysokości pierwszej linii nadruku i jedzie z wysoką kartką (sticky), więc tytuł i wydruk są w kadrze razem */
.est-stage__intro { justify-items: start; text-align: left; margin: 0; padding-top: clamp(28px, 3vw, 44px); }
.est-stage__note { font: var(--t-body); }
.est-stage__note a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }
.est-stage__note a:hover { text-decoration-thickness: 2px; }
.est-stage .receipt { justify-self: center; width: min(100%, 35rem); }
/* podstrony i menu: sam tytuł nad kartką, jedna kolumna na środku */
.est-stage--solo .est-stage__in { grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 3vw, 40px); }
.est-stage--solo .est-stage__intro { justify-items: center; text-align: center; margin-inline: auto; padding-top: 0; }
@media (min-width: 1081px) {
  .est-stage:not(.est-stage--solo) .est-stage__intro { position: sticky; top: calc(var(--hdr) + 48px); }
}
/* kartka stoi prosto (pola, kwoty i linie przerywane zostają ostre); lekki skos ma tylko w trakcie druku (site.js) */
.receipt { position: relative; color: var(--on-paper); color-scheme: light;
  filter: drop-shadow(0 1px 0 rgba(15, 13, 11, .10)) drop-shadow(0 18px 22px rgba(15, 13, 11, .32)); }
.receipt__paper { container-type: inline-size; background: var(--receipt-c) var(--tex-paper); background-size: 768px; padding: clamp(28px, 3vw, 44px) clamp(22px, 3.2vw, 48px) clamp(36px, 4vw, 56px);
  -webkit-mask: radial-gradient(7px at 50% 0, #0000 98%, #000) 50% 0 / 14px 51% repeat-x, radial-gradient(7px at 50% 100%, #0000 98%, #000) 50% 100% / 14px 51% repeat-x;
  mask: radial-gradient(7px at 50% 0, #0000 98%, #000) 50% 0 / 14px 51% repeat-x, radial-gradient(7px at 50% 100%, #0000 98%, #000) 50% 100% / 14px 51% repeat-x; }
/* głowa: kremowe logo przyciemnione do atramentu papieru (bez nowego pliku), adres w roli UI */
.receipt__head { display: grid; justify-items: center; gap: 8px; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px dashed rgba(33, 25, 18, .4); }
.receipt__head img { height: auto; filter: brightness(.14); }
.receipt__head img:first-child { width: 36px; }
.receipt__head img:nth-child(2) { width: 128px; }
.receipt__head span { font: var(--t-ui); letter-spacing: var(--ls-ui); text-transform: uppercase; color: var(--on-paper-dim); }
/* podstrony i menu: głowa w jednym wierszu (znak + „Antresola · Masztalarska 7A”), ok. 40 px, żeby kartka nadal była
   rachunkiem Antresoli, a nie kalkulatorem, i żeby „Razem” zostało wysoko */
.receipt__head--compact { grid-auto-flow: column; justify-content: center; align-items: center; gap: 10px; padding-bottom: 12px; margin-bottom: 16px; }
.receipt__head--compact img:first-child { width: 22px; }
.receipt__head--compact span { color: var(--on-paper); }
.receipt h3 { margin: 0 0 18px; font: var(--t-ui); letter-spacing: var(--ls-ui); text-transform: uppercase; color: var(--copper-on-paper); }
.receipt dl { margin: 0; display: grid; gap: 8px; font: var(--t-small); font-variant-numeric: lining-nums tabular-nums; }
.receipt dl div { display: flex; justify-content: space-between; gap: 16px; }
.receipt dt { min-width: 0; }
.receipt dd { margin: 0; white-space: nowrap; }
/* „Razem”: odpowiedź na pytanie strony, największa liczba na stronie (rola h1, do 3,5rem, nie szerzej niż 15% kartki) */
.receipt .sum { align-items: baseline; margin-top: 12px; padding-top: 16px; border-top: 1px dashed rgba(33, 25, 18, .4); }
.receipt .sum dt { font: var(--t-ui); letter-spacing: var(--ls-ui); text-transform: uppercase; color: var(--on-paper-dim); }
.receipt .sum dd { font: var(--t-h1); font-size: min(3.5rem, 15cqi); line-height: 1; letter-spacing: var(--ls-display); text-transform: uppercase; }
/* maski wartości (przedruk przy zmianie): zapas u góry na kreski nad wersalikami, zniesiony ujemnym marginesem */
.est__mask { overflow: hidden; padding-top: .14em; margin-top: -.14em; }
.est__mask > span { display: inline-block; }
.receipt .verify { color: var(--on-paper-dim); }
.receipt .verify b { color: var(--copper-on-paper); }
.receipt :focus-visible { outline-color: var(--copper-on-paper); }
.receipt .est__alt { color: var(--on-paper-dim); }
.est__body { display: grid; }
.est__body dl, .est__room { transition: opacity .3s; }
.est.is-stale .est__body dl, .est.is-stale .est__room { opacity: .45; }
/* przygaszony rachunek: podpowiedź stoi w tej samej komórce co zdanie o sali (zdanie niewidoczne, ale zostaje opisem pola),
   więc wysokość kartki się nie zmienia, a „Razem” i przycisk nie skaczą */
.est__room, .receipt .est__err { grid-area: 2 / 1; }
.est.is-stale:has(.est__err:not([hidden])) .est__room { visibility: hidden; } /* zdanie znika tylko wtedy, gdy jego miejsce zajmuje podpowiedź; puste pole: zostaje przygaszone */
.receipt .est__room { margin-top: 18px; font: var(--t-body); color: var(--on-paper); }
.receipt .est__room:empty { display: none; }
/* pola rachunku (pokazuje je site.js): na papierze paragonu, ta sama rola etykiet co w formularzu */
.est__ctl { display: grid; gap: 16px; margin: -4px 0 20px; padding-bottom: 20px; border-bottom: 1px dashed rgba(33, 25, 18, .4); }
.est__f { display: grid; gap: 8px; min-width: 0; }
.est__f label, .est__pk legend { font: var(--t-ui); letter-spacing: var(--ls-ui); text-transform: uppercase; color: var(--on-paper-dim); }
/* liczba gości jednym kciukiem: −/+ po 56 px na brzegach, liczba w roli h2 pośrodku (klawiatura tylko po stuknięciu w liczbę) */
.stepper { display: grid; grid-template-columns: 56px minmax(0, 1fr) 56px; align-items: center; gap: 12px; }
.stepper__btn { width: 56px; height: 56px; padding: 0; border-radius: 50%; border: 1px solid var(--on-paper); background: none; color: var(--on-paper); font: 300 1.6rem/1 var(--f-sans); cursor: pointer;
  touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; transition: background .3s, color .3s, opacity .3s; }
/* wypełnienie tylko pod myszą: na dotyku :hover zostaje po stuknięciu i wyglądałby jak stan zaznaczenia; stuknięcie daje krótki :active */
@media (hover: hover) { .stepper__btn:hover { background: var(--on-paper); color: var(--paper-c); } }
.stepper__btn:active { background: var(--on-paper); color: var(--paper-c); transition-duration: 0s; }
.stepper__btn[aria-disabled="true"] { opacity: .35; cursor: default; background: none; color: var(--on-paper); }
.stepper input { width: 100%; min-height: 56px; background: transparent; color: var(--on-paper); border: 0; border-bottom: 1px solid rgba(33, 25, 18, .55); border-radius: 0; padding: 4px 0 0;
  text-align: center; font: 400 clamp(1.8rem, 3.2vw, 2.75rem)/1 var(--f-display); -moz-appearance: textfield; appearance: textfield; transition: border-color .3s, box-shadow .3s; }
.stepper input::-webkit-inner-spin-button, .stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.stepper input:focus { outline: none; border-bottom-color: var(--copper-on-paper); box-shadow: inset 0 -1px 0 var(--copper-on-paper); }
.stepper input:focus-visible { outline: 2px solid var(--copper-on-paper); outline-offset: 3px; } /* klawiatura: ten sam pierścień co pigułki pakietu */
.est__f:focus-within label { color: var(--copper-on-paper); }
.est__f [aria-invalid="true"] { border-bottom-style: dashed; border-bottom-color: var(--copper-on-paper); }
.receipt .est__cap { font: var(--t-small); color: var(--on-paper-dim); }
/* pakiet: natywne radia jako pigułki (cyfra rzymska w kroju nagłówków, cena w roli UI) */
.est__pk { border: 0; padding: 0; margin: 0; min-width: 0; }
.est__pk legend { padding: 0; margin-bottom: 8px; }
.est__pills { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; }
.est__pill { position: relative; display: grid; place-items: center; min-height: 56px; padding: 6px 4px; border: 1px solid rgba(33, 25, 18, .35); border-radius: 999px; cursor: pointer; transition: background .3s, color .3s, border-color .3s; }
.est__pill input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; }
.est__pill span[aria-hidden] { display: grid; justify-items: center; gap: 3px; font: var(--t-ui); letter-spacing: .08em; text-transform: uppercase; }
.est__pill b { font: 400 1.25rem/1 var(--f-display); letter-spacing: .05em; }
@media (hover: hover) { .est__pill:hover { border-color: var(--on-paper); } }
.est__pill:active { border-color: var(--on-paper); }
.est__pill:has(:checked) { background: var(--on-paper); color: var(--receipt-c); border-color: var(--on-paper); }
.est__pill:has(:focus-visible) { outline: 2px solid var(--copper-on-paper); outline-offset: 3px; }
.receipt .est__err { margin: 18px 0 0; align-self: start; font: var(--t-body); color: var(--copper-on-paper); }
/* nadruk na dole: zapytanie z liczbą gości i telefon */
.est__cta { display: grid; gap: 4px; margin-top: 24px; padding-top: 22px; border-top: 1px dashed rgba(33, 25, 18, .4); }
.est__cta .btn { width: 100%; }
.est__tel { display: block; text-align: center; padding-block: 14px; font: var(--t-ui); letter-spacing: var(--ls-ui); text-transform: uppercase; color: var(--on-paper); text-decoration: none; transition: color .3s; }
@media (hover: hover) { .est__tel:hover { color: var(--copper-on-paper); } }
/* wąska kartka (telefon): „Razem” nad kwotą, mniejsza głowa, liczba gości w przycisku tylko dla czytnika (pełna etykieta się nie mieści) */
@container (max-width: 420px) {
  .receipt .sum { flex-direction: column; align-items: flex-start; gap: 6px; }
  .est__ctl { gap: 12px; margin-bottom: 16px; padding-bottom: 16px; }
  .receipt .est__room { margin-top: 14px; line-height: 1.6; }
  .receipt__head { padding-bottom: 14px; margin-bottom: 14px; }
  .receipt__head:not(.receipt__head--compact) img:first-child { width: 28px; }
  .receipt__head--compact { padding-bottom: 10px; margin-bottom: 14px; }
  .receipt__head img:nth-child(2) { width: 104px; }
  [data-est-ctan] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
}

/* ——— opinie ——— */
.reviews { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(40px, 7vw, 112px); align-items: center; }
.score { display: grid; gap: 14px; justify-items: start; }
.slider { display: grid; gap: 30px; }
.slider__stage { display: grid; }
.slide { grid-area: 1 / 1; display: grid; gap: 18px; margin: 0; opacity: 0; visibility: hidden; transition: opacity .6s, visibility .6s; }
.slide.is-on { opacity: 1; visibility: visible; }
.slide p, .quote p { font: var(--t-lead); font-style: italic; color: var(--text); } /* kursywa tylko w cytatach gości */
.slide footer, .quote footer { font: var(--t-small); color: var(--text-faint); } /* imię gościa, nie etykieta UI */
.slider__nav { display: flex; align-items: center; gap: 14px; }
.roundbtn { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--copper); background: none; color: var(--copper); display: grid; place-items: center; cursor: pointer; transition: background .3s, color .3s; }
@media (hover: hover) { .roundbtn:hover { background: var(--copper); color: var(--ink); } }
.roundbtn:active { background: var(--copper); color: var(--ink); transition-duration: 0s; }
.roundbtn svg { width: 18px; height: 18px; }
.slider__count { font: var(--t-ui); letter-spacing: var(--ls-ui); text-transform: uppercase; color: var(--text-faint); margin-left: 6px; }
.quote { display: grid; gap: 16px; max-width: 40em; margin-inline: auto; text-align: center; }

/* ——— Instagram ——— */
.ig { max-width: 980px; margin-inline: auto; display: grid; gap: 34px; }
.ig__head { display: flex; flex-wrap: wrap; align-items: center; gap: 22px 28px; }
.ig__avatar { width: 88px; height: 88px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); border: 1px solid var(--hair); padding: 2px; box-shadow: 0 0 0 2px var(--copper); }
.ig__avatar img { width: 54px; height: auto; }
.ig__who { display: grid; gap: 6px; flex: 1; min-width: 220px; }
.ig__handle { font: var(--t-small); color: var(--text); }
.ig__bio { font: var(--t-small); color: var(--text-dim); max-width: 38em; }
.ig__stats { font: var(--t-ui); letter-spacing: var(--ls-ui); text-transform: uppercase; color: var(--text-faint); }
.ig__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.ig__tile { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--ink-2); display: block; color: var(--text); text-decoration: none; }
.ig__tile > img, .ig__tile > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ig__tile > video { opacity: 0; transition: opacity .4s; }
.ig__tile.is-playing > video { opacity: 1; }
.ig__type { position: absolute; top: 10px; right: 10px; width: 22px; height: 22px; color: #fff; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
.ig__cap { position: absolute; inset: auto 0 0 0; padding: 40px 16px 14px; font: var(--t-small); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; background: linear-gradient(180deg, transparent 0, rgba(15,13,11,.72) 38%, rgba(15,13,11,.92)); text-shadow: 0 1px 2px rgba(0,0,0,.6); opacity: 0; transform: translateY(8px); transition: opacity .35s, transform .35s; }
.ig__tile:focus-visible .ig__cap { opacity: 1; transform: none; }
@media (hover: hover) { .ig__tile:hover .ig__cap { opacity: 1; transform: none; } }
/* rolka w galerii: gra = ikona pauzy i cienki miedziany pierścień (aria-pressed), stoi = ikona rolki */
.ig__tile[aria-pressed="true"] .ig__type:not(.ig__type--pause), .ig__tile:not([aria-pressed="true"]) .ig__type--pause { display: none; }
.ig__tile[aria-pressed="true"]::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 2px var(--copper); pointer-events: none; } /* nad filmem, nie pod nim */
.ig__tile:focus-visible { outline-offset: 1px; z-index: 1; } /* pierścień w szczelinie siatki, nad sąsiednim kafelkiem */
button.ig__tile { width: 100%; padding: 0; border: 0; font: inherit; cursor: pointer; }

/* ——— galeria ——— */
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
@media (min-width: 1081px) { .chips { gap: 8px; } .chips .chip { padding-inline: 14px; } }  /* sześć filtrów mieści się w jednym rzędzie w kolumnie .intro */
.chip { font: var(--t-ui); letter-spacing: var(--ls-ui); text-transform: uppercase; color: var(--text-dim); background: none; border: 1px solid var(--hair); border-radius: 999px; min-height: 44px; padding: 0 20px; cursor: pointer; transition: color .3s, border-color .3s, background .3s; }
@media (hover: hover) { .chip:hover { color: var(--text); border-color: rgba(239,231,220,.4); } }
.chip[aria-pressed="true"] { background: var(--text); color: var(--ink); border-color: var(--text); }
@media (forced-colors: active) { .chip[aria-pressed="true"] { outline: 2px solid Highlight; outline-offset: 2px; } }
.masonry { columns: 3 300px; column-gap: 16px; }
.masonry figure { break-inside: avoid; margin: 0 0 16px; }
.masonry .frame img, .masonry .frame video { height: auto; } /* proporcje z atrybutów width/height: miejsce zarezerwowane, zanim zdjęcie się wczyta */
.masonry figcaption { margin-top: 8px; font: var(--t-ui); letter-spacing: var(--ls-ui); text-transform: uppercase; color: var(--text-faint); }
.sala-grid__reel { grid-row: span 2; } /* o-nas: pionowa rolka obok dwóch poziomych zdjęć */
.gstrip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 2vw, 24px); }

/* ——— kroki, FAQ ——— */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); counter-reset: s; }
.steps li { display: grid; gap: 12px; padding-top: 22px; border-top: 1px solid var(--hair); }
.steps li::before { counter-increment: s; content: counter(s, decimal-leading-zero); font: var(--t-h3); color: var(--copper); }
.steps h3 { margin: 0; font: var(--t-h3); letter-spacing: .05em; text-transform: uppercase; }
.steps p { font: var(--t-small); color: var(--text-dim); }
.faq { max-width: 52rem; margin-inline: auto; border-top: 1px solid var(--hair); }
.faq details { border-bottom: 1px solid var(--hair); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; align-items: center; padding: 22px 0; font: var(--t-h3); letter-spacing: .05em; text-transform: uppercase; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; content: "+" / ""; font: 300 1.6rem/1 var(--f-sans); color: var(--copper); transition: transform .3s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding: 0 0 24px; max-width: 42em; font: var(--t-body); color: var(--text-dim); }
.sec--paper .faq, .sec--paper .faq details { border-color: var(--hair-paper); }
.sec--paper .faq details > div { color: var(--on-paper-dim); }

/* ——— termin / formularz ——— */
.book { position: relative; isolation: isolate; }
.book__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.book__bg img { width: 100%; height: 100%; object-fit: cover; }
.book__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(15,13,11,.96) 0%, rgba(15,13,11,.86) 50%, rgba(15,13,11,.66) 100%); }
.book__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 112px); align-items: start; }
.tel { display: grid; gap: 6px; padding-block: 26px; border-block: 1px solid var(--hair); }
.tel__num { font: var(--t-h2); letter-spacing: var(--ls-display); text-transform: uppercase; text-decoration: none; color: var(--text); width: fit-content; user-select: all; transition: color .3s; }
@media (hover: hover) { .tel__num:hover { color: var(--copper); } }
.form { background: rgba(23, 19, 15, .92); border: 1px solid var(--hair); padding: clamp(24px, 3.4vw, 46px); display: grid; gap: 22px; min-width: 0; }
.form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 26px; }
.field { display: grid; grid-template-rows: 1fr auto; gap: 6px; min-width: 0; } /* zapas bez subgrid: nadwyżkę bierze wiersz etykiety */
/* pola w parze dzielą trzy wiersze siatki (subgrid): etykieta, pole, komunikat. Dwuwierszowa etykieta obok jednowierszowej
   ani błąd czy uwaga pod jednym polem nie przesuwają pola obok; odstęp między rzędami pól to padding (pusty wiersz komunikatu nie dokłada przerwy) */
@supports (grid-template-rows: subgrid) {
  .form__grid { row-gap: 0; margin-bottom: -22px; }
  .form__grid > .field { grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; padding-bottom: 22px; }
  .form__grid > .field > label { grid-row: 1; padding-bottom: 6px; }
  .form__grid > .field > :is(input, select, textarea) { grid-row: 2; }
  .form__grid > .field > :is(.field__err, .field__note) { grid-row: 3; margin-top: 6px; }
}
.field--wide { grid-column: 1 / -1; }
.field label { font: var(--t-ui); letter-spacing: var(--ls-ui); text-transform: uppercase; color: var(--text-faint); }
.field input, .field select, .field textarea { width: 100%; min-height: 46px; background: transparent; color: var(--text); border: 0; border-bottom: 1px solid rgba(239,231,220,.45); border-radius: 0; font: var(--t-small); padding: 8px 0; transition: border-color .3s, box-shadow .3s; }
.field textarea { min-height: 92px; resize: vertical; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text-dim) 50%), linear-gradient(135deg, var(--text-dim) 50%, transparent 50%); background-position: calc(100% - 12px) 55%, calc(100% - 7px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 28px; }
.field select option { background: var(--ink-2); color: var(--text); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom-color: var(--copper); box-shadow: inset 0 -1px 0 var(--copper); }
.field:focus-within label { color: var(--copper); }
.field input::placeholder, .field textarea::placeholder { color: var(--text-faint); }
.field [aria-invalid="true"] { border-bottom-color: #e3967f; }
.field__err { font: var(--t-small); color: #eaa792; }
.field__note { font: var(--t-small); color: var(--text-dim); }
.field__note:empty { position: absolute; } /* pusta uwaga nie zajmuje miejsca w siatce (czytnik słyszy ją z osobnego regionu sr-only [data-note-live]) */
.consent { display: flex; gap: 12px; align-items: flex-start; font: var(--t-small); color: var(--text-dim); }
.consent a { padding-block: 7px; } /* większy cel dotyku bez zmiany rytmu (inline) */
.mail { padding-block: 13px; }
.consent input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--copper); flex: none; }
.form .btn { width: 100%; }
.form__note { font: var(--t-small); color: var(--text-faint); text-align: center; }
.form__ok { display: grid; gap: 12px; padding-block: 24px; }

/* ——— stopka ——— */
.foot { border-top: 1px solid var(--hair); padding-block: clamp(64px, 8vw, 104px) 40px; }
.foot__in { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
.foot__logo { width: 180px; height: auto; }
.foot h2 { margin: 0 0 16px; font: var(--t-ui); letter-spacing: var(--ls-ui); text-transform: uppercase; color: var(--copper); }
.foot ul, .foot address { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font: var(--t-small); font-style: normal; color: var(--text-dim); }
.foot a { text-decoration: none; transition: color .3s; }
.foot a:hover { color: var(--text); }
.foot__bottom { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--hair); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px; font: var(--t-small); color: var(--text-faint); }
.foot__bottom a { font: var(--t-ui); letter-spacing: var(--ls-ui); text-transform: uppercase; }
/* podpis wykonawcy przy copyrighcie: drobny, w kolorze copyrightu, bez wersalików linków stopki */
.foot__credit { font-size: .875em; white-space: nowrap; }
.foot__bottom .foot__credit a { font: inherit; letter-spacing: 0; text-transform: none; color: inherit; }
.foot__bottom .foot__credit a:hover { color: var(--text-dim); }

/* ——— stałe CTA ——— */
/* ukryte = także poza fokusem i drzewem dostępności (visibility gaśnie po zakończeniu przejścia) */
.float-cta { position: fixed; right: clamp(16px, 2.4vw, 32px); bottom: calc(clamp(16px, 2.4vw, 32px) + env(safe-area-inset-bottom, 0px)); z-index: 70; opacity: 0; visibility: hidden; transform: translateY(16px); pointer-events: none; transition: opacity .45s, transform .45s, background .3s, visibility 0s linear .45s; box-shadow: 0 0 0 1px rgba(15,13,11,.55), 0 14px 34px -14px rgba(0,0,0,.65); }
/* krawędź i pierścień fokusu niezależne od tła (na papierze i kartce rachunku przycisk ma prawie ten sam kolor): pierścień na atramencie, jak .vidctl */
.float-cta:focus-visible { outline-offset: 2px; box-shadow: 0 0 0 2px var(--ink), 0 0 0 6px var(--ink), 0 14px 34px -14px rgba(0,0,0,.65); }
.float-cta.is-on { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition-delay: 0s; }
.float-cta.is-on.is-hidden { opacity: 0; visibility: hidden; transform: translateY(16px); pointer-events: none; transition-delay: 0s, 0s, 0s, .45s; }
.mbar { display: none; }
@media (min-width: 1081px) { .float-cta { display: none; } }

/* ——— struktura (wireframe'y) ——— */
.wf { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 28px; }
.wf__page { border: 1px solid var(--hair); padding: 18px; display: grid; gap: 8px; align-content: start; }
.wf__page h3 { margin: 0 0 8px; font: var(--t-h3); text-transform: uppercase; letter-spacing: .05em; text-wrap: balance; }
.wf__page h3 a { text-decoration: none; }
.wf__blk { border: 1px dashed rgba(239,231,220,.28); padding: 10px 12px; font: var(--t-small); color: var(--text-dim); }
.wf__blk b { display: block; font: var(--t-ui); letter-spacing: var(--ls-ui); text-transform: uppercase; color: var(--copper); margin-bottom: 4px; }
.wf__blk.is-paper { background: rgba(236, 230, 219, .08); }
.wf__blk.is-kraft { background: color-mix(in srgb, var(--kraft-c) 22%, transparent); }
.sitemap { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font: var(--t-small); }
.sitemap ul { list-style: none; padding-left: 22px; margin: 8px 0 0; display: grid; gap: 6px; color: var(--text-dim); }

/* ——— responsywność ——— */
/* progi z treści: 1080 menu w panelu, 860 kolumny tekst/zdjęcie się układają, 720 telefon; osobno telefon w poziomie (wysokość ≤ 500) */
@media (max-width: 1080px) {
  .nav, .hdr__tel { display: none; }
  .hdr__menu { display: inline-flex; }
  .book__in, .reviews { grid-template-columns: minmax(0, 1fr); }
  /* tablet: hero nadal w dwóch kolumnach, rama zdjęcia nie wyższa niż ekran */
  .hero__in { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 4.4vw, 56px); align-items: center; }
  .hero__media .frame { max-height: min(78svh, 720px); }
  .hero .actions .btn { flex: 1 1 auto; } /* po zawinięciu każdy przycisk wypełnia swój wiersz (bez poszarpanej prawej krawędzi) */
  /* okazje bez toru w bok (palec i kółko myszy przewijają stronę): siatka trzech kart */
  .occ__pin { display: block; }
  .occ__viewport { overflow: visible; scroll-snap-type: none; padding: 0; }
  /* pięć kart: 3 + 2, drugi rząd wyśrodkowany (6 kolumn, karta zajmuje 2), bez pustej komórki */
  .occ__track { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 44px clamp(16px, 2.6vw, 28px); align-items: start; width: auto; padding-inline: var(--gutter); }
  .occ__intro { grid-column: 1 / -1; width: auto; max-width: 34rem; padding: 0 0 4px; }
  .occ__track > li.card-li { width: auto; grid-column: span 2; }
  .occ__track > li.card-li:nth-child(5) { grid-column: 2 / span 2; }
  .ogrid > *, .ogrid > .wide { grid-column: span 6; }
  /* scena rachunku: jedna kolumna, wstęp i kartka wyśrodkowane */
  .est-stage__in { grid-template-columns: minmax(0, 1fr); }
  .est-stage__intro { justify-items: center; text-align: center; margin-inline: auto; padding-top: 0; }
  .book__in.contact__in { grid-template-areas: "top" "form" "more"; grid-template-rows: auto; row-gap: 32px; }
  .foot__in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot__brand { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  /* trzy poziomy okruszków bez korzenia (logo prowadzi na stronę główną): na tablecie pionowo bez „/” na końcu wiersza */
  .crumbs--deep > a:first-child, .crumbs--deep > a:first-child + span { display: none; }
}
@media (max-width: 860px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .split--media-first > :first-child { order: 0; }
  /* jedna kolumna: rama na całą szerokość kolumny, wysokość z proporcji 4:5, ale nie wyższa niż ekran (object-fit przycina kadr,
     zamiast zwężać ramę i zostawiać pustkę z boku) */
  .split .frame:not(.owners__second):not(.collage__second) { width: 100%; aspect-ratio: auto; height: min(70svh, 640px, calc((100vw - 2 * var(--gutter)) * 1.25)); max-height: none; }
}
@media (max-width: 720px) {
  :root { --hdr: 66px; --sec: 72px; }
  .hdr__cta { display: none; }
  .brand__word { width: 104px; }
  .h1 { font-size: min(2.2rem, 8.4vw); } /* „okolicznościowe” wersalikami musi zmieścić się w 320 px */
  :root { --t-h2: 400 clamp(1.3rem, 6.4vw, 1.8rem)/1.1 var(--f-display); } /* H1 ok. 31 px przy 375 (25 px przy 320): H2 24 px (21 px), stopień ok. 1,2–1,3 zamiast 1,07 */
  /* hero na telefonie: najpierw niski pas zdjęcia (stół, sala), potem okruszki / kicker, H1, przyciski i fakty; opis pod nimi */
  .hero { padding-block: calc(var(--hdr) + 12px) 56px; }
  .hero__in { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .hero__media { order: -1; }
  .hero__media .frame { aspect-ratio: 16 / 10; max-height: 34svh; }
  .hero__media .frame > img, .hero__media .frame > video, .hero__media .frame > picture > img { object-position: var(--band, 50% 50%); }
  .hero__still { display: block; }
  .hero__still + .frame { display: none; }
  .hero__text { gap: 18px; }
  .hero__lead { order: 1; }
  /* okruszki w jednym wierszu; przy trzech poziomach bez korzenia (logo prowadzi na stronę główną) */
  .crumbs { flex-wrap: nowrap; white-space: nowrap; }
  .crumbs > :last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .facts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; }
  .facts { margin-left: 0; clip-path: none; background-position: 0 0; background-size: 100% 1px; }
  .facts li { margin-left: 0; }
  .facts li::before { display: none; }
  .facts .facts__wide { grid-column: 1 / -1; } /* dłuższy fakt w jednym wierszu przez obie kolumny */
  .steps { grid-template-columns: minmax(0, 1fr); }
  .gstrip { grid-template-columns: 1fr 1fr; }
  .gstrip > :nth-child(3) { display: none; }
  .form__grid { grid-template-columns: minmax(0, 1fr); }
  .pkg__row { flex-wrap: wrap; }
  .pkg__name { white-space: normal; }
  .terms, .terms-pair { grid-template-columns: minmax(0, 1fr); }
  .ig__grid { gap: 2px; }
  /* profil: mniejszy awatar przy nazwie, „Obserwuj” pod tekstem, nie samotnie pod awatarem (siatka 6 kafli bez zmian) */
  .ig__head { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px 18px; align-items: start; }
  .ig__avatar { width: 64px; height: 64px; }
  .ig__avatar img { width: 40px; }
  .ig__who { min-width: 0; }
  .ig__head .btn { grid-column: 2; justify-self: start; }
  .sala-grid, .cake-grid { grid-template-columns: 1fr 1fr !important; }
  .sala-grid > :first-child { grid-column: 1 / -1; }
  .sala-grid__reel { grid-row: auto; }
  .sala-grid > .frame:not(:first-child) { aspect-ratio: 3 / 4; } /* rolka i zdjęcie obok siebie w tej samej ramie */
  .masonry { columns: 2; column-gap: 8px; }
  .masonry figure { margin-bottom: 14px; }
  /* tło formularza: tylko pas u góry, bez wielokrotnego powiększenia poziomego zdjęcia */
  .book__bg { bottom: auto; height: 70svh; }
  .book__bg::after { background: linear-gradient(180deg, rgba(15,13,11,.8) 0%, rgba(15,13,11,.9) 55%, var(--ink) 100%); }
  .ig__cap { display: none; }
  .foot__in { grid-template-columns: minmax(0, 1fr); }
  /* rachunek: kartka na całą szerokość kolumny, wstęp do lewej jak reszta telefonu */
  .est-stage__intro, .est-stage--solo .est-stage__intro { justify-items: start; text-align: left; margin-inline: 0; }
  .est-stage .receipt { width: 100%; }
  /* Przyjęcia: wstęp do lewej, jak hero innych stron na telefonie */
  .hero--index .intro { justify-items: start; text-align: left; }
  .hero--index .intro .actions { justify-content: flex-start; }
  /* Menu: niski pas zdjęcia dania pod nagłówkiem, karta leży na nim podartym brzegiem; bez liścia i z mniejszym zapasem u góry,
     żeby pierwsza cena pakietu była w pierwszym ekranie także przy 360x740 */
  .menu-band { display: block; margin-top: var(--hdr); height: min(18svh, 170px); }
  .menu-hero { padding-top: 36px; }
  .menu-hero .leafline { display: none; }
  .menu-hero .menu-card { gap: 24px; }
  .menu-hero .pkg:first-child { padding-top: 22px; }
  .menu-band img { object-position: var(--band, 50% 50%); }
  .menu-band + .menu-hero { margin-top: 0; }
  /* Kontakt: formularz zaraz pod numerem */
  .book__in.contact__in { row-gap: 24px; }
  .tel--xl { padding-block: 14px; }
}
/* niski telefon (np. 360x740): niższy pas sali nad H1 Przyjęć, żeby oba przyciski były w pierwszym ekranie */
@media (max-width: 720px) and (max-height: 760px) {
  .hero--index .hero__still { max-height: 24svh; }
}
/* hero okazji na telefonie (dość wysokim, żeby przyciski zostały w pierwszym ekranie): zdjęcie od krawędzi do krawędzi, wyższe niż pas,
   H1 dopasowany do najdłuższego słowa (do 2,5rem). Niższe ekrany zostają przy pasie 16:10 i H1 8,4vw */
@media (max-width: 720px) and (min-height: 700px) {
  .hero--occ .hero__media { margin-inline: calc(-1 * var(--gutter)); }
  .hero--occ .hero__media .frame { aspect-ratio: auto; height: clamp(200px, 36svh, 340px); max-height: none; }
  .hero--occ .h1 { font-size: min(calc(100cqi / var(--lw, 7)), 2.5rem); }
  /* główna z tej samej rodziny: zdjęcie od krawędzi do krawędzi, H1 nieco większy (pas 16:10 zostaje, oba przyciski w pierwszym ekranie) */
  .hero--home .hero__media { margin-inline: calc(-1 * var(--gutter)); }
  .hero--home .h1 { font-size: min(calc(100cqi / var(--lw, 7)), 2.25rem); }
}
/* okazje na telefonie (także w poziomie): lista wierszy, miniatura + cena + nazwa + link; wszystkie pięć bez przewijania w bok */
@media (max-width: 720px), (max-height: 500px) and (pointer: coarse) {
  .occ__track { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .occ__track > li.card-li:nth-child(n) { grid-column: auto; }
  .occ__intro { padding-bottom: 28px; }
  .ogrid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ogrid > *, .ogrid > .wide { grid-column: auto; }
  .occ .ocard, .ogrid .ocard { grid-template-columns: 88px minmax(0, 1fr); gap: 18px; align-items: center; padding-block: 16px; border-top: 1px solid var(--hair); }
  .occ__track > :last-child .ocard, .ogrid > :last-child .ocard { border-bottom: 1px solid var(--hair); }
  .ocard .frame, .ogrid > .wide .frame { aspect-ratio: 3 / 4; }
  .ocard__body { gap: 4px; }
  .ocard__text, .ocard__veil { display: none; } /* warunek zostaje w opisie linku (aria-describedby) i na podstronie */
  .ocard__go { display: inline-flex; }
  .ocard:hover .frame img, .ocard:focus-visible .frame img { transform: none; }
}
/* dolny pasek „Zadzwoń / Zapytaj o termin”: telefon, także w poziomie (zamiast pływającego przycisku) */
@media (max-width: 720px), (max-height: 500px) and (pointer: coarse) {
  .float-cta { display: none; }
  .mbar { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; padding: 10px max(12px, calc((100vw - 560px) / 2)) calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(15,13,11,.96); border-top: 1px solid var(--hair); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transform: translateY(110%); visibility: hidden; transition: transform .4s cubic-bezier(.2,.8,.2,1), visibility 0s linear .4s; }
  .mbar.is-on { transform: none; visibility: visible; transition-delay: 0s; }
  .mbar.is-on.is-hidden, .is-locked .mbar { transform: translateY(110%); visibility: hidden; transition-delay: 0s, .4s; }
  .mbar .btn { min-height: 48px; padding: 0 .8em; }
  .foot { padding-bottom: 112px; }
  html { scroll-padding-bottom: 88px; } /* pole z fokusem nie chowa się pod dolnym paskiem */
}
/* cele dotyku ≥44 px na telefonie i na każdym ekranie dotykowym (tablet, laptop z dotykiem): większy obszar kliknięcia (padding),
   ten sam rytm (ujemny margines), bez większych liter */
@media (max-width: 720px), (pointer: coarse) {
  .more, .rating, .crumbs a, .foot__bottom a, .facts__a { padding-block: 13.5px; margin-block: -13.5px; }
  .tel__num { padding-block: max(3px, calc((44px - 1.1em) / 2)); margin-block: min(-3px, calc((44px - 1.1em) / -2)); } /* 44 px przy rozmiarze h2, ten sam rytm */
  .foot ul, .foot address { gap: 0; }
  .foot ul a, .foot address > * { display: block; padding-block: 9.5px; }
  .foot h2 { margin-bottom: 6px; }
  /* struktura: mapa strony jak linki w stopce (blok 44 px, bez nakładania się obszarów), tytuły kart przez padding */
  .sitemap, .sitemap ul { gap: 0; }
  .sitemap ul { margin-top: 0; }
  .sitemap a { display: block; padding-block: calc((44px - 1.6em) / 2); } /* linia --t-small (1.6) + padding = 44 px */
  .wf__page h3 a { display: inline-block; padding-block: 10.5px; margin-block: -10.5px; }
}
@media (pointer: coarse) {
  .nav__a, .nav__btn { padding-block: 13px; } /* iPad w poziomie dostaje układ desktopowy */
}
/* telefon w poziomie: niższy nagłówek, hero tekst + zdjęcie obok siebie, zdjęcie w wysokości ekranu.
   Tylko dotyk: niskie okno przeglądarki na komputerze (konsola zadokowana, powiększenie) zostaje przy układzie desktopowym */
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  :root { --hdr: 56px; }
  .brand__mark { width: 28px; }
  .hero { padding-block: calc(var(--hdr) + 20px) 48px; }
  .hero__in { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 28px; align-items: start; }
  .hero__media { order: 0; }
  .hero__media .frame { aspect-ratio: 3 / 4; max-height: calc(100svh - var(--hdr) - 40px); }
  .hero__still { display: block; }
  .hero__still + .frame { display: none; }
  .hero__text { gap: 16px; }
  .hero .h1 { font-size: min(1.9rem, 9.4cqi); }
  .hero__lead { order: 1; } /* jak na telefonie: przyciski zaraz pod H1 */
  .mnav li a { padding-block: 10px; }
}
/* niskie okno na komputerze (bez układu telefonu w poziomie): ciaśniejszy hero, przycisk telefonu nadal na pierwszym ekranie */
@media (min-width: 721px) and (max-height: 560px) and (pointer: fine) {
  .hero { padding-top: calc(var(--hdr) + 20px); }
  .hero__text { gap: 18px; }
}
/* bardzo niski ekran w poziomie (np. 568x320): bez kickera i okruszków, ciaśniej, żeby przycisk telefonu był na pierwszym ekranie */
@media (orientation: landscape) and (max-height: 340px) and (pointer: coarse) {
  .hero { padding-top: calc(var(--hdr) + 10px); }
  .hero__text > .kicker, .hero__text > .crumbs { display: none; }
  .hero__text { gap: 12px; }
}
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .occ__track, .ogrid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
  .occ__intro { grid-column: 1 / -1; }
}
@media (min-width: 1081px) {
  .mnav { display: none !important; } /* obrót tabletu z otwartym menu: JS i tak je zamyka */
  /* bez ruchu (reduced motion, ?static, brak GSAP) okazje nie chowają się w torze w bok: siatka jak na tablecie, wszystkie pięć od razu */
  html:not(.motion) .occ__pin { display: block; }
  html:not(.motion) .occ__viewport { overflow: visible; scroll-snap-type: none; padding: 0; }
  html:not(.motion) .occ__track { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 56px clamp(20px, 2.6vw, 40px); align-items: start; width: auto; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
  html:not(.motion) .occ__intro { grid-column: 1 / -1; width: auto; max-width: 34rem; padding: 0 0 4px; }
  html:not(.motion) .occ__track > li.card-li { width: auto; grid-column: span 2; }
  html:not(.motion) .occ__track > li.card-li:nth-child(5) { grid-column: 2 / span 2; }
}
/* duże ekrany: szersza kolumna i większe zdjęcie hero (bez rozciągania na całe 4K) */
@media (min-width: 1680px) {
  :root { --maxw: 1440px; }
  .hero__media .frame { max-height: min(80vh, 920px); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* przed startem animacji hero (klasa z inline skryptu w <head>, zdejmowana przez site.js albo po 0,9 s):
   ukryte tylko H1 i przyciski; zdjęcie widać od razu, lekko powiększone, i osiada przejściem CSS, gdy klasa znika */
.motion-pre .hero .js-in, .motion-pre .hero .h1 { visibility: hidden; }
.motion-pre .hero__media .frame > img, .motion-pre .hero__media .frame > video, .motion-pre .hero__media .frame > picture > img { transform: scale(1.06); }

@media print {
  body { background: none; } body, body * { color: var(--on-kraft) !important; text-shadow: none !important; }
  .hdr, .mbar, .float-cta, .skip, .book__bg, .vidctl, .slider__nav, .occ__progress, .ig, .chips, .form { display: none !important; }
  .sec, .sec--paper, .sec--kraft, .sec--ink2, .sec--brown, .occ, .book { background: none !important; color: var(--on-kraft); padding-block: 24px; }
  .sec--paper::before, .sec--paper::after, .sec--torn::before, .sec--torn::after { display: none; }
  .receipt { filter: none; } .receipt__paper { -webkit-mask: none; mask: none; border: 1px dashed; } .est__cta { display: none; }
  /* kartka jeszcze niewydrukowana na ekranie (clip i przezroczyste linie z site.js): na papierze zawsze cała */
  .receipt { clip-path: none !important; } .receipt *:not(input) { opacity: 1 !important; transform: none !important; } .est__pill input { display: none; }  /* ukryte radio nie może zasłonić nazw pakietów na wydruku */
  .lead, .dim, .prose p, .kicker, .terms dt, .pkg__desc, .pkg__cols p, .faq details > div, .slide footer, .quote footer, .crumbs, .facts { color: var(--on-paper-dim) !important; }
  .h1 *, .h2 *, .pkg__dots, .receipt, .js-in { transform: none !important; opacity: 1 !important; visibility: visible !important; }
  .slide { opacity: 1; visibility: visible; grid-area: auto; }
  .hero__media, .frame--para { display: none; }
}


/* ——— WordPress ——— */
/* pasek administratora (zalogowani) nad stałym nagłówkiem */
.admin-bar .hdr { top: 32px; }
@media (max-width: 782px) { .admin-bar .hdr { top: 46px; } }

/* zwykłe bloki WordPressa wstawione między sekcje (akapit, nagłówek, lista, obraz): kolumna tekstu */
main > :is(p, h2, h3, h4, ul, ol, .wp-block-image) { max-width: calc(var(--narrow) + 2 * var(--gutter)); margin: 40px auto; padding-inline: var(--gutter); }
main > :is(h2, h3, h4) { font: var(--t-h2); letter-spacing: var(--ls-display); text-transform: uppercase; }
main > p { color: var(--text-dim); }

/* Contact Form 7: formularz w opakowaniu .wpcf7, pola w .wpcf7-form-control-wrap (układ jak w prototypie) */
.wpcf7 { min-width: 0; }
.contact__in > .wpcf7 { grid-area: form; }
.wpcf7 .screen-reader-response, .wpcf7 .hidden-fields-container { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wpcf7-form-control-wrap { display: block; position: relative; min-width: 0; }
@supports (grid-template-rows: subgrid) { .form__grid > .field > .wpcf7-form-control-wrap { grid-row: 2; } }
.consent .wpcf7-form-control-wrap { flex: none; }
/* błędy przy polach pokazuje site.js (.field__err, także te odrzucone przez serwer); komunikaty Contact Form 7 tylko bez JS */
.wpcf7.js .wpcf7-not-valid-tip { display: none; }
.wpcf7-not-valid-tip { display: block; margin-top: 6px; font: var(--t-small); color: #eaa792; }
.wpcf7-response-output { margin: 0; padding: 14px 18px; border: 1px solid var(--hair); font: var(--t-small); color: var(--text-dim); }
.wpcf7-response-output:empty, .wpcf7 form.init .wpcf7-response-output, .wpcf7.js form.sent .wpcf7-response-output, .wpcf7 form.submitting .wpcf7-response-output, .wpcf7 form.resetting .wpcf7-response-output { display: none; }
.wpcf7.no-js form.sent .wpcf7-response-output { border-color: var(--copper); color: var(--text); } /* bez JS: potwierdzenie wysyłki */
.wpcf7 form:is(.invalid, .unaccepted, .failed, .spam, .aborted) .wpcf7-response-output { border-color: #e3967f; color: #eaa792; }
.wpcf7 form.submitting [type="submit"] { opacity: .6; cursor: progress; }
.wpcf7-spinner { display: none; }