/* Duraj's Wood v3 · redakcyjna strona z papierową makietą na otwarcie.
   Tokeny najpierw (silnik czyta --sc-*), potem szkielet, film, sekcje strony
   głównej, podstrony. Ruch tylko transform/opacity; po filmie coraz mniej. */

:root {
  --paper: #F5F3EE;
  --paper-2: #EBE7E0;
  --ink: #161412;
  --ink-2: #4A4640;
  --soft: #746F66;
  --line: rgba(22, 20, 18, .14);
  --black: #0F0E0D;
  --oak: #B98C58;

  --sc-canvas: var(--paper);
  --sc-ink: var(--ink);
  --sc-ink-soft: var(--soft);
  --sc-accent: var(--ink);
  --sc-font-display: "Newsreader", Georgia, serif;
  --sc-font-text: "Barlow", system-ui, sans-serif;

  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Barlow", system-ui, sans-serif;
  --cond: "Barlow Condensed", "Barlow", system-ui, sans-serif;

  --gut: clamp(1rem, 4vw, 3rem);
  --hdr: 4.25rem;
  --col: min(42rem, calc(100% - 2 * var(--gut)));
  --col-wide: min(72rem, calc(100% - 2 * var(--gut)));
  --wide: min(88rem, calc(100% - 2 * var(--gut)));
  --sec: clamp(6rem, 14vw, 12rem);

  --t-h1: clamp(2.3rem, 1.5rem + 2.6vw, 3.9rem);
  --t-h2: clamp(1.9rem, 1.3rem + 1.9vw, 3rem);
  --t-st: clamp(2.2rem, 1.2rem + 3.2vw, 4.4rem);
  --t-lead: clamp(1.1rem, 1rem + .35vw, 1.3rem);
  --ease: cubic-bezier(.22, .61, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
/* scroll-behavior: auto nadpisuje „smooth” z arkusza silnika: przejazdami między
   stronami steruje site.js, a CSS-owe wygładzanie w Safari dublowało się z nimi. */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--hdr) + 1rem); scroll-behavior: auto !important; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 300 1.0625rem/1.65 var(--sans);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  hyphens: none; -webkit-hyphens: none; /* miękkie łączniki z build.mjs działają tylko tam, gdzie włączone niżej */
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }
h1, h2, h3, p, figure, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
/* zaznaczony tekst: lekko przezroczysty szarobeżowy, tekst zostaje w swoim kolorze
   (arkusz silnika dawał czarne tło, na którym czarny tekst znikał) */
::selection { background: rgba(150, 132, 108, .3); color: inherit; }
[data-theme="dark"] ::selection { background: rgba(235, 225, 208, .28); color: inherit; }
[hidden] { display: none !important; }

.col { width: var(--col); margin-inline: auto; }
.col-wide { width: var(--col-wide); margin-inline: auto; }
.wide { width: var(--wide); margin-inline: auto; }

.label, .crumb, figcaption, .rail, .hdr, .menu__more, .files__k, .facts dt, .dims caption, .dims thead {
  font-family: var(--cond); font-weight: 400; text-transform: uppercase; letter-spacing: .14em; font-size: .78rem;
}
figcaption { margin-top: .8rem; color: var(--soft); letter-spacing: .1em; }
.h1 { font: 300 var(--t-h1)/1.06 var(--serif); letter-spacing: -.015em; }
.h2 { font: 300 var(--t-h2)/1.1 var(--serif); letter-spacing: -.012em; }
.statement { font: 300 var(--t-st)/1.04 var(--serif); letter-spacing: -.02em; }
.statement--xl { font-size: clamp(2.6rem, 1.2rem + 4.6vw, 6rem); }
.lead { font-size: var(--t-lead); line-height: 1.55; color: var(--ink-2); max-width: 36em; }
/* Łamanie tekstu (2.10.2026): akapity bez pojedynczego słowa w ostatniej linii, nagłówki w równych
   liniach (przeglądarki bez obsługi po prostu to pomijają). Twarde spacje po kropkach dokłada build.mjs. */
p, li, dd, blockquote, summary { text-wrap: pretty; }
h1, h2, h3, .h1, .h2, .statement, .faqx__t { text-wrap: balance; }
/* początek zdania (build.mjs) przechodzi do nowej linii w całości, zamiast wisieć na końcu poprzedniej */
@media (min-width: 601px) { p .zd, li .zd, dd .zd { white-space: nowrap; } }
/* Telefon: teksty ciągłe wyjustowane, z dzieleniem wyrazów według miękkich łączników z build.mjs (3.10.2026:
   „manual” zamiast „auto”, bo Chrome nie zawsze ma polski słownik i robił dziury). Wąskie kolumny (opisy
   gatunków na stronie głównej) i dane kontaktowe zostają wyrównane do lewej. */
@media (max-width: 600px) {
  main p:not([class]), main .lead, main .prose li, .faqx__lead, .hundred__p, .page__note, .refnote, .fineprint {
    text-align: justify; hyphens: manual; -webkit-hyphens: manual;
  }
  main .species p, main .contact__grid p { text-align: left; hyphens: none; -webkit-hyphens: none; }
}
.go { display: inline-flex; gap: .6rem; align-items: baseline; font-family: var(--cond); text-transform: uppercase; letter-spacing: .14em; font-size: .82rem; text-decoration: none; padding-block: .6rem; border-bottom: 1px solid currentColor; }
.go span { transition: transform .4s var(--ease); }
.go:hover span { transform: translateX(.3rem); }
.btn { display: inline-block; padding: 1.05rem 1.9rem; background: var(--ink); color: var(--paper); text-decoration: none; font-family: var(--cond); text-transform: uppercase; letter-spacing: .16em; font-size: .85rem; transition: background-color .3s var(--ease); }
.btn:hover { background: #33302c; }
.btn--light { background: var(--paper); color: var(--ink); }
.btn--light:hover { background: #fff; }
.skip { position: fixed; left: 1rem; top: 1rem; z-index: 200; padding: .6rem 1rem; background: var(--ink); color: var(--paper); transform: translateY(-300%); }
.skip:focus { transform: none; }

/* ---------------------------------------------------------- nagłówek -- */
.hdr {
  position: fixed; inset: 0 0 auto; z-index: 60; height: var(--hdr);
  display: flex; align-items: center; justify-content: space-between; padding-inline: var(--gut);
  color: var(--ink); transition: color .35s var(--ease), background-color .35s var(--ease);
}
.is-sub .hdr, .hdr.is-solid { background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(8px); }
.hdr.is-dark { color: var(--paper); background: transparent; backdrop-filter: none; }
.hdr__logo { display: block; width: clamp(9.5rem, 14vw, 12rem); }
.hdr__logo svg { display: block; width: 100%; height: auto; fill: currentColor; }
.hdr__r { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.2rem); }
.hdr__link, .hdr__lang a { text-decoration: none; }
.hdr__link:hover, .hdr__lang a:hover { text-decoration: underline; }
.hdr__lang { display: flex; gap: .35rem; }
.hdr__lang a { opacity: .5; transition: opacity .2s; }
.hdr__lang a:hover { opacity: 1; }
.hdr__menu { display: inline-flex; align-items: center; gap: .7rem; text-transform: uppercase; letter-spacing: .14em; font-family: var(--cond); font-size: .78rem; }
.hdr__menu::after { content: ""; width: 1.6rem; height: 7px; border-block: 1px solid currentColor; transition: height .3s var(--ease); }
.hdr__menu[aria-expanded="true"]::after { height: 1px; border-bottom: 0; }
@media (max-width: 640px) { .hdr__contact { display: none; } }

/* ---------------------------------------------------- menu pełnoekranowe -- */
.menu { position: fixed; inset: 0; z-index: 55; background: var(--paper); overflow: auto; }
.menu__in { min-height: 100%; display: grid; grid-template-columns: 1.4fr 1fr; gap: 3rem; align-content: center; padding: calc(var(--hdr) + 3rem) var(--gut) 3rem calc(var(--gut) + 6vw); }
.menu__main { display: grid; gap: .1rem; }
.menu__main a { font: 300 clamp(2rem, 1.2rem + 3vw, 4rem)/1.12 var(--serif); text-decoration: none; letter-spacing: -.015em; width: fit-content; }
.menu__main a:hover, .menu__main a[aria-current] { font-style: italic; }
.menu__side { display: grid; gap: 2.5rem; align-content: end; }
.menu__more { display: grid; gap: .8rem; }
.menu__more a { text-decoration: none; color: var(--ink-2); }
.menu__more a:hover { color: var(--ink); text-decoration: underline; }
.menu__addr a { text-decoration: none; }
.menu.is-open .menu__main a { animation: menu-in .6s var(--ease) both; }
.menu.is-open .menu__main a:nth-child(2) { animation-delay: .03s; } .menu.is-open .menu__main a:nth-child(3) { animation-delay: .06s; }
.menu.is-open .menu__main a:nth-child(4) { animation-delay: .09s; } .menu.is-open .menu__main a:nth-child(5) { animation-delay: .12s; }
.menu.is-open .menu__main a:nth-child(6) { animation-delay: .15s; } .menu.is-open .menu__main a:nth-child(7) { animation-delay: .18s; }
@keyframes menu-in { from { opacity: 0; transform: translateY(.6rem); } }
/* Sezonowy akcent (2.10.2026, jesień): papierowe liście spadają za napisami po otwarciu menu (site.js). */
.menu__in { position: relative; z-index: 1; }
.season { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.season__f { position: absolute; top: 0; left: 0; will-change: transform; }
.season__f > i { display: block; will-change: transform; }
.season__f svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 .5rem .45rem rgba(60, 45, 25, .13)); }
html.has-menu { overflow: hidden; }
html.has-menu .hdr { color: var(--ink); background: transparent; backdrop-filter: none; }
@media (max-width: 760px) { .menu__in { grid-template-columns: 1fr; padding-left: var(--gut); align-content: start; } }
/* Telefon (3.10.2026): całe menu mieści się na jednym ekranie, bez przewijania, żeby przesuwanie palcem
   poruszało liśćmi, a stuknięcie otwierało link. Wielkości zależą od wysokości ekranu (dvh). Gdyby na bardzo
   niskim ekranie i tak się nie zmieściło, site.js zostawia przewijanie (klasa is-fit tylko gdy pasuje). */
@media (max-width: 760px) {
  .menu { overflow: hidden auto; }
  .menu.is-fit { overflow: hidden; touch-action: none; overscroll-behavior: none; }
  .menu__in { height: 100%; min-height: 100dvh; align-content: center; gap: clamp(1.1rem, 3.6dvh, 2.4rem);
    padding: calc(var(--hdr) + clamp(.25rem, 2dvh, 1.5rem)) var(--gut) clamp(.9rem, 3dvh, 2rem); }
  .menu__main a { font-size: clamp(1.55rem, 5.4dvh, 2.6rem); line-height: 1.12; }
  .menu__side { gap: clamp(.9rem, 2.8dvh, 1.8rem); align-content: start; }
  .menu__more { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(.45rem, 1.5dvh, .8rem) 1.2rem; }
  .menu__more a { line-height: 1.35; }
}

/* -------------------------------------------------------------- film -- */
/* Film otwierający gra sam (site.js). Ekran wysokości okna, film w ramie z papieru
   (niewielkie marginesy wokół kadru). Plakat pierwszej klatki leży pod wideo, więc
   do startu filmu nie ma pustego pola; wideo pojawia się dopiero, gdy naprawdę gra. */
.film { position: relative; height: 100vh; height: 100svh; }
.film__frame { position: absolute; inset: var(--hdr) var(--gut) var(--gut); overflow: hidden; background: var(--paper-2); }
.film__frame :is(img, video) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.film__video { opacity: 0; transition: opacity .6s var(--ease); }
.film__frame.is-playing .film__video, .film__frame.is-shown .film__video { opacity: 1; }
.film__poster--end { opacity: 0; }
.film__frame.is-still .film__poster--end { opacity: 1; } /* oszczędzanie danych / bez ruchu: ostatni kadr z logo */
/* Logo na ścianie szczytowej hali, nad drzwiami (ostatni kadr). Tylko cienki cień konturu. */
.film__logo { position: absolute; left: 50%; top: 28%; translate: -50% -50%; width: min(16.5rem, 18%); height: auto; color: #fff; fill: currentColor;
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .22)); opacity: 0; transition: opacity 1.4s var(--ease); }
.film__frame.is-end .film__logo { opacity: 1; }
/* Napis otwierający: biały, krojem „Kontakt” z nagłówka. Pod nim neutralny cień tylko w miejscu napisu. */
.film__hero { position: absolute; left: var(--gut); bottom: calc(var(--gut) + 1rem); transition: opacity 1s var(--ease); }
.film__frame.is-past-hero .film__hero { opacity: 0; }
.film__hero::before {
  content: ""; position: absolute; z-index: 0; inset: -4rem -8rem -2.5rem calc(var(--gut) * -1 + 2px);
  background: radial-gradient(closest-side, rgba(0, 0, 0, .34), rgba(0, 0, 0, .16) 55%, rgba(0, 0, 0, 0));
}
.film__t {
  position: relative; font: 300 clamp(1.15rem, .75rem + 1.3vw, 2.1rem)/1.1 var(--cond);
  text-transform: uppercase; letter-spacing: .14em; color: #fff; white-space: nowrap;
  text-shadow: 0 1px 14px rgba(0, 0, 0, .25);
}
/* Pauza / odtwórz / jeszcze raz */
.film__btn {
  position: absolute; z-index: 2; right: 1.2rem; bottom: 1.2rem;
  font-family: var(--cond); text-transform: uppercase; letter-spacing: .14em; font-size: .75rem;
  padding: .7rem 1rem; background: color-mix(in srgb, var(--paper) 88%, transparent); transition: background .3s;
}
.film__btn:hover { background: var(--paper); }
@media (max-width: 760px) {
  .film__frame { inset: var(--hdr) .6rem .6rem; }
  .film__poster--end { object-position: 50% 50%; }
  .film__logo { top: 30%; width: 50%; }
  .film__hero { left: 1.4rem; right: 1.4rem; bottom: 5.2rem; }
  .film__hero::before { inset: -3rem -1rem -2rem -.7rem; }
  .film__btn { right: .8rem; bottom: .8rem; }
}
@media (prefers-reduced-motion: reduce) { .film__video, .film__logo, .film__hero { transition: none; } }

/* ---------------------------------------------------------- szyna -- */
.rail {
  position: fixed; z-index: 40; left: calc(var(--gut) * .5); top: 50%; transform: translateY(-50%);
  opacity: 0; pointer-events: none; transition: opacity .5s var(--ease), color .35s var(--ease);
  color: var(--ink);
}
.rail.is-on { opacity: 1; pointer-events: auto; }
.rail.is-dark { color: var(--paper); }
.rail__list { display: grid; gap: .55rem; border-left: 1px solid color-mix(in srgb, currentColor 22%, transparent); padding: .6rem .7rem .6rem .9rem; transition: background-color .3s var(--ease); }
.rail__list a { display: flex; align-items: baseline; text-decoration: none; color: color-mix(in srgb, currentColor 42%, transparent); transition: color .3s; font-size: .7rem; position: relative; white-space: nowrap; }
.rail__list a b { font-weight: 400; }
.rail__list a:hover, .rail__list a[aria-current="true"] { color: currentColor; }
.rail__list a[aria-current="true"]::before { content: ""; position: absolute; left: calc(-.9rem - 1px); top: 0; bottom: 0; width: 1px; background: currentColor; }
/* Zwinięta szyna: same numery. Nazwy wysuwają się dopiero po najechaniu lub fokusie. */
.rail__name { display: inline-block; max-width: 0; overflow: hidden; opacity: 0; margin-left: 0; transition: max-width .35s var(--ease), opacity .25s, margin .35s var(--ease); }
.rail:is(:hover, :focus-within) .rail__name { max-width: 9rem; opacity: 1; margin-left: .6rem; }
.rail:is(:hover, :focus-within) .rail__list { background: color-mix(in srgb, var(--paper) 94%, transparent); }
.rail.is-dark:is(:hover, :focus-within) .rail__list { background: color-mix(in srgb, var(--black) 94%, transparent); }
.rail__count { display: none; }
@media (max-width: 860px) {
  .rail { top: auto; bottom: 1rem; left: 1rem; transform: none; }
  .rail__list { display: none; }
  .rail__count { display: block; padding: .45rem .7rem; background: color-mix(in srgb, var(--paper) 85%, transparent); color: var(--ink); }
  .rail.is-dark .rail__count { background: color-mix(in srgb, var(--black) 80%, transparent); color: var(--paper); }
}

/* ------------------------------------------------------ sekcje główne -- */
.s { position: relative; z-index: 2; background: var(--paper); padding-block: var(--sec); }
.s[data-theme="dark"] { background: var(--black); color: var(--paper); }
.s__head { margin-bottom: clamp(3rem, 7vw, 6rem); display: grid; gap: 1.5rem; }

/* Strona główna = ciąg pełnoekranowych stron (każda .pin-sec = jeden ekran).
   Na komputerze site.js przewija je krokami: jeden ruch kółkiem = płynny
   przejazd do następnej strony i zatrzymanie. */
.is-home .s.pin-sec, .is-home .s--proces, .is-home .s--proj { padding: 0; }
@media (min-width: 861px) and (min-height: 560px) {
  .pin-sec { height: 100vh; }
  .pin {
    position: sticky; top: 0; height: 100vh; overflow: hidden;
    display: grid; align-content: center;
    padding: calc(var(--hdr) + 1rem) 0 clamp(1.5rem, 4vh, 3rem) 3.25rem;
  }
}
@media (max-width: 860px), (max-height: 559px) {
  .pin { min-height: 100svh; display: grid; align-content: center; padding: calc(var(--hdr) + 2rem) 0 4rem; }
}

/* 01 · sto kłód */
.s--proces { padding-top: 0; }
.hundred { height: 170vh; }
.hundred__stick { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 7rem); align-items: center; width: var(--col-wide); margin-inline: auto; padding-top: var(--hdr); }
.hundred__txt { display: grid; gap: 2rem; }
.hundred__p { max-width: 30em; color: var(--ink-2); }
.hundred__grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: clamp(.35rem, .8vw, .7rem); width: min(100%, 34rem, 62vh); justify-self: end; }
.hundred__grid i {
  aspect-ratio: 1; border-radius: 50%; color: var(--soft);
  background: currentColor;
  -webkit-mask: var(--ring) center / 100% 100% no-repeat; mask: var(--ring) center / 100% 100% no-repeat;
  transition: opacity .5s var(--ease), color .6s var(--ease);
}
.hundred__grid i.is-out { opacity: .14; }
.hundred__grid i.is-one { color: var(--oak); }
.hundred__tally { position: absolute; right: 0; bottom: 2rem; font-family: var(--cond); letter-spacing: .14em; font-size: .78rem; color: var(--soft); font-variant-numeric: tabular-nums; }
.hundred__stick { --ring: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='black' stroke-width='1.3'><path d='M20 2.2c9.9-.2 17.9 7.6 17.8 17.6-.1 10-7.9 18-17.9 18S2.1 30 2.2 20 10.2 2.4 20 2.2z'/><path d='M20.4 6.6c7.3 0 13 6.1 12.9 13.4-.1 7.4-5.9 13.2-13.2 13.2-7.4 0-13.1-6-13-13.4.1-7.3 6-13.2 13.3-13.2z'/><path d='M19.8 11c5 .1 9 4.1 9 9.1s-4.2 8.9-9.2 8.8c-5-.1-8.8-4.1-8.7-9.1.1-5 4-8.9 8.9-8.8z'/><path d='M20.2 15.3c2.6 0 4.6 2.2 4.5 4.8 0 2.6-2.1 4.5-4.7 4.4-2.5 0-4.4-2.1-4.3-4.6.1-2.6 2-4.6 4.5-4.6z'/><circle cx='20' cy='19.9' r='1.1' fill='black'/></svg>"); }
@media (max-width: 860px) {
  .hundred { height: 170vh; }
  .hundred__stick { grid-template-columns: 1fr; align-content: center; gap: 2.5rem; }
  .hundred__grid { justify-self: start; width: min(100%, 22rem); }
  .hundred__tally { bottom: 1rem; }
}

/* 02 · materiały */
.mat { display: grid; gap: clamp(1.5rem, 4vh, 3rem); }
.mat__head { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem clamp(2rem, 6vw, 6rem); align-items: end; }
.mat__head > div { display: grid; gap: 1rem; justify-items: start; }
.species { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2.4vw, 2.5rem); }
.species img { width: 100%; height: min(44vh, 34vw); object-fit: cover; }
.species h3 { font: 300 1.4rem/1.2 var(--serif); margin-top: 1rem; }
.species p { color: var(--ink-2); font-size: .95rem; margin-top: .3rem; max-width: 18em; }
@media (max-width: 860px) {
  .mat__head { grid-template-columns: 1fr; }
  .species { grid-template-columns: repeat(2, 1fr); row-gap: 2rem; }
  .species img { height: auto; aspect-ratio: 3 / 4; }
}
.bog { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 7vw, 8rem); align-items: center; }
.bog__fig img { width: auto; max-width: 100%; max-height: 72vh; margin-inline: auto; }
.bog__txt { display: grid; gap: 1.6rem; max-width: 30rem; }
.bog__txt p:not(.label) { color: rgba(245, 243, 238, .78); }
.bog__txt .label { color: rgba(245, 243, 238, .6); }
@media (max-width: 860px) { .bog { grid-template-columns: 1fr; } .bog__fig img { max-height: 45vh; } }
/* Wyłanianie z ciemności: najpierw czerń, potem kłoda wychodzi z mroku od środka,
   a na brzegach zostaje cień. Tło zdjęcia ma kolor sekcji, więc zmieniamy tylko
   krycie i maskę (filtr jasności odsłoniłby kwadrat zdjęcia).
   Gaśnięcie bez przejścia (dzieje się poza ekranem), wyłanianie powolne. */
@property --lit { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
.bog__fig { position: relative; }
.bog__fig.is-dark img {
  --lit: 0%;
  opacity: 0;
  -webkit-mask-image: radial-gradient(closest-side, #000 calc(var(--lit) - 60%), transparent var(--lit));
          mask-image: radial-gradient(closest-side, #000 calc(var(--lit) - 60%), transparent var(--lit));
}
.bog__fig.is-dark::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(closest-side, transparent 25%, var(--black) 100%);
}
.bog__fig.is-lit img {
  --lit: 175%; opacity: 1;
  transition: opacity 3.2s cubic-bezier(.45, 0, .25, 1), --lit 3.6s cubic-bezier(.35, 0, .25, 1), transform 1.8s cubic-bezier(.65, 0, .35, 1);
}
.bog__fig.is-lit::after { opacity: .55; transition: opacity 4.5s cubic-bezier(.45, 0, .25, 1) .6s; }
/* „Rzadszy niż diamenty”: po wyłonieniu kłoda maleje do rozmiaru jednego pola siatki 5×5
   (jak „sto kłód”), a pozostałe 24 pola wypełniają obrysy diamentów. Pojawiają się falą
   od środka (--d = odległość pola od kłody). --s = rozmiar kłody na ekranie (site.js). */
.bog__fig img { transition: transform 1.8s cubic-bezier(.65, 0, .35, 1); }
.bog__fig.is-small img { transform: scale(.17); }
.bog__fig.is-small::after { opacity: 0; transition: opacity 1.2s; }
.bog__gems { position: absolute; left: 50%; top: 50%; width: var(--s, 30rem); height: var(--s, 30rem); transform: translate(-50%, -50%);
  display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(5, 1fr); z-index: 2; pointer-events: none; color: rgba(245, 243, 238, .55); }
.bog__gems i { display: grid; place-items: center; opacity: 0; transform: scale(.7); transition: opacity .8s, transform .9s cubic-bezier(.2, .7, .2, 1); transition-delay: 0s; }
.bog__gems i.is-log { visibility: hidden; }
.bog__gems svg { display: block; width: 72%; height: auto; fill: none; stroke: currentColor; stroke-width: 1; stroke-linejoin: miter; vector-effect: non-scaling-stroke; overflow: visible; }
.bog__fig.is-small .bog__gems i { opacity: 1; transform: none; transition-delay: calc(1.1s + var(--d) * .38s + var(--j) * .05s); }


/* 03 · podłogi: zdjęcie na połowę ekranu, obok tekst i wymiary */
@media (min-width: 861px) and (min-height: 560px) {
  .pin--split { grid-template-columns: 1fr 1fr; align-content: stretch; align-items: center; gap: clamp(2rem, 5vw, 6rem); padding: var(--hdr) var(--gut) 0 0; }
  .pin--split .split__fig { height: calc(100vh - var(--hdr)); }
  .pin--split .split__fig img { width: 100%; height: 100%; object-fit: cover; }
}
@media (max-width: 860px), (max-height: 559px) { .split__fig img { width: 100%; height: 50vh; object-fit: cover; } .pin--split { gap: 2rem; } .floor { width: var(--col-wide); margin-inline: auto; } }
.floor { display: grid; gap: clamp(1rem, 2.6vh, 1.6rem); justify-items: start; max-width: 36rem; }
/* „Deski do 12 metrów”: linia wymiarowa jak na rysunku. Po wejściu sekcji linia
   rozciąga się przez całą kolumnę, po drodze zapalają się znaczniki metrów 0–12,
   a licznik na końcu odlicza do 12 m (site.js). Po wyjściu z sekcji wraca do zera. */
.len { position: relative; width: 100%; height: 2.8rem; justify-self: stretch; }
.len__bar { position: absolute; left: 0; right: 0; top: .9rem; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: left center; }
.len__ticks i { position: absolute; top: calc(.9rem - 4px); left: calc(var(--k) / 12 * 100%); width: 1px; height: 9px; background: var(--ink); opacity: 0; translate: -.5px 0; }
.len__ticks i:first-child, .len__ticks i:last-child { top: calc(.9rem - 8px); height: 17px; }
.len__lab { position: absolute; right: 0; top: 1.5rem; font-family: var(--cond); text-transform: uppercase; letter-spacing: .14em; font-size: .8rem; color: var(--soft); opacity: 0; font-variant-numeric: tabular-nums; }
.len.is-on .len__bar { transform: scaleX(1); transition: transform 2.6s cubic-bezier(.55, 0, .25, 1); }
.len.is-on .len__ticks i { opacity: 1; transition: opacity .35s calc(var(--k) * .19s + .15s); }
.len.is-on .len__lab { opacity: 1; transition: opacity .6s .2s; }
@media (prefers-reduced-motion: reduce) { .len .len__bar { transform: none; } .len .len__ticks i, .len .len__lab { opacity: 1; } }
.floor__line { font-family: var(--cond); text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; color: var(--soft);
  justify-self: stretch; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem .6rem; } /* pozycje rozłożone równo na całą szerokość kolumny */
.dims { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.dims caption { text-align: left; color: var(--soft); padding-bottom: .8rem; }
.dims thead th { color: var(--soft); font-weight: 400; text-align: left; padding-bottom: .5rem; }
.dims th[scope="row"] { font: 300 1.1rem var(--serif); text-align: left; }
.dims td, .dims th[scope="row"] { padding: clamp(.45rem, 1.3vh, .95rem) 0; border-top: 1px solid var(--line); }
.dims td { text-align: left; }
/* niższe ekrany (laptopy): sekcja Podłogi musi się zmieścić na jednym ekranie */
@media (min-width: 861px) and (min-height: 560px) and (max-height: 860px) {
  .floor { gap: clamp(.6rem, 1.6vh, 1rem); }
  .floor .h2 { font-size: clamp(1.7rem, 1.1rem + 1.6vw, 2.5rem); }
  .floor .lead { font-size: clamp(.95rem, .8rem + .3vw, 1.05rem); line-height: 1.5; }
  .floor .len { height: 2.3rem; }
  .dims td, .dims th[scope="row"] { padding: .35rem 0; }
  .dims caption { padding-bottom: .4rem; }
}

/* 04 · tarasy: ten sam układ co podłogi – zdjęcie na połowę ekranu, obok tekst */
.deck { display: grid; gap: clamp(.9rem, 2.2vh, 1.4rem); justify-items: start; max-width: 36rem; }
@media (max-width: 860px), (max-height: 559px) { .deck { width: var(--col-wide); margin-inline: auto; } }
.deck__facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; width: 100%; border-top: 1px solid var(--line); padding-top: 1.2rem; }
.deck__facts b { display: block; font: 300 1.1rem/1.25 var(--serif); margin-bottom: .3rem; }
.deck__facts li { color: var(--ink-2); font-size: .9rem; }
@media (max-width: 760px) { .deck__facts { grid-template-columns: 1fr; gap: .8rem; } }

/* 05 · bespoke */
.bes { display: grid; gap: clamp(1.5rem, 4vh, 3rem); }
.bes__head { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem clamp(2rem, 6vw, 6rem); align-items: end; }
.bes__head > div { display: grid; gap: 1rem; justify-items: start; }
.bes__fig { margin: 0; }
.bes__fig img { width: 100%; height: min(52vh, 38vw); object-fit: cover; object-position: 50% 55%; }
@media (max-width: 860px) { .bes__fig img { height: auto; aspect-ratio: 4 / 3; } }
@media (max-width: 860px) { .bes__head { grid-template-columns: 1fr; } }

/* 06 · realizacje: jeden ekran; pas przesuwa się w bok, gdy kursor jest nad nim (site.js), palcem, gładzikiem */
.proj__head { display: flex; justify-content: space-between; align-items: end; gap: 2rem; flex-wrap: wrap; margin-bottom: clamp(1.5rem, 4vh, 3rem); }
.strip { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
.strip::-webkit-scrollbar { display: none; }
.strip__track { display: flex; gap: clamp(1rem, 2vw, 2rem); width: max-content; padding-inline: calc(var(--gut) + 3.25rem) var(--gut); }
.strip__track > * { width: clamp(16rem, 28vw, 26rem); flex: none; }
.hcard { text-decoration: none; display: grid; gap: .9rem; }
.hcard__fig { overflow: hidden; display: block; }
.hcard img { width: 100%; height: min(52vh, 36vw); object-fit: cover; transition: transform 1.2s var(--ease); }
.hcard:hover img { transform: scale(1.03); }
.hcard__cap, .pcard__cap { display: grid; grid-template-columns: 1fr auto; gap: .35rem 1rem; align-items: baseline; border-top: 1px solid var(--line); padding-top: .8rem; }
.hcard__t, .pcard__t { font: 300 1.2rem/1.25 var(--serif); grid-column: 1; }
.hcard__m, .pcard__m { font-family: var(--cond); text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; color: var(--soft); grid-column: 1; }
.hcard__cap::after { content: "→"; color: var(--soft); grid-column: 2; grid-row: 1; transition: transform .4s var(--ease); }
.hcard:hover .hcard__cap::after { transform: translateX(.3rem); }
@media (max-width: 860px), (max-height: 559px) {
  /* na telefonie zwykły pas przewijany palcem w bok */
  .strip { scroll-snap-type: x mandatory; }
  .strip__track { padding-inline: var(--gut); }
  .strip__track > * { width: 78vw; scroll-snap-align: center; }
  .hcard img { height: auto; aspect-ratio: 4 / 5; }
}

/* 07 · o nas */
.about { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; }
/* trzy pokolenia: zdjęcie pierwszego pokolenia, portret Antoniego Duraja (2.10.2026) i pionowy filmik
   „Bracia na produkcji”. Kolumny 8:3,5:3 przy proporcjach 3:2, ok. 2:3 i 9:16 dają wszystkim tę samą
   wysokość (górna i dolna krawędź w jednej linii); portret lekko przycięty z boków (object-fit). */
.about__fig { display: grid; grid-template-columns: 8fr 3.5fr 3fr; gap: clamp(.6rem, 1.2vw, 1rem); }
.about__fig > :is(img, video) { display: block; width: 100%; height: 100%; object-fit: cover; }
.about__txt { display: grid; gap: 1.6rem; justify-items: start; max-width: 30rem; }
.about__txt p { color: var(--ink-2); }
.about__logo { width: clamp(9rem, 14vw, 13rem); height: auto; color: var(--ink); fill: currentColor; }
/* Tekst po prawej mieści się między górną a dolną krawędzią zdjęcia: logo na górze, link na dole. */
@media (min-width: 861px) {
  .about { align-items: stretch; }
  .about__fig { margin: 0; }
  .about__txt { align-content: space-between; gap: 1.2rem; }
  .about__txt .go { padding-bottom: .35rem; }
}
@media (max-width: 860px) { .about { grid-template-columns: 1fr; } }

/* 08 · kontakt */
.contact { display: grid; gap: clamp(2rem, 6vh, 5rem); justify-items: start; }
.contact__grid { display: grid; grid-template-columns: repeat(4, auto); gap: 1.5rem clamp(2rem, 6vw, 6rem); }
.contact__note { display: block; margin-top: .4rem; font-size: .88rem; opacity: .6; } /* przygaszony kolor tekstu: działa na ciemnej (główna) i jasnej (Kontakt) */ /* „Prosimy o wcześniejsze umawianie wizyt.” */
@media (max-width: 1100px) and (min-width: 761px) { .contact__grid { grid-template-columns: repeat(2, auto); } }
.contact__grid p { display: grid; gap: .5rem; font-size: 1.1rem; }
.contact__grid a { text-decoration: none; }
.contact__grid a:hover { text-decoration: underline; }
.contact .label { color: rgba(245, 243, 238, .55); }
@media (max-width: 760px) { .contact__grid { grid-template-columns: 1fr; } }

/* zdjęcia na całą szerokość na podstronach */
.bleed { width: 100%; overflow: hidden; }
.bleed img { width: 100%; height: min(78vh, 56vw); object-fit: cover; }
.bleed--tall img { height: min(88vh, 62vw); }
/* kłody Czarnego Dębu: całe zdjęcie, bez kadrowania (wysokość wynika z proporcji) */
.bleed--logs img { height: auto; object-fit: fill; }

/* ---------------------------------------------------------- podstrony -- */
.page { padding: calc(var(--hdr) + clamp(3rem, 9vw, 7rem)) 0 var(--sec); }
.page__head { display: grid; gap: 1.6rem; margin-bottom: clamp(3rem, 7vw, 6rem); }
/* strony gatunków: grafika drzewa po lewej, tytuł i opis obok (tekst w kolumnie tej samej szerokości co zwykle) */
.page__head--tree { width: min(62rem, calc(100% - 2 * var(--gut))); margin-inline: auto;
  grid-template-columns: clamp(9rem, 17vw, 16rem) minmax(0, 42rem); column-gap: clamp(1.5rem, 4vw, 4rem); align-items: center; justify-content: center; }
.page__head-txt { display: grid; gap: 1.6rem; }
.page__tree img { width: 100%; height: auto; max-height: 20rem; object-fit: contain; }
@media (max-width: 600px) { .page__head--tree { grid-template-columns: 1fr; row-gap: 1.2rem; } .page__tree { width: 8rem; } }
/* jedno zdanie pod tytułem strony, kursywą (Podłogi) */
/* na komputerze w jednej linii: rozmiar liczony od szerokości kolumny (cqw), nie większy niż 1.55rem */
.page__head:has(.page__tag) { container-type: inline-size; }
.page__tag { font: italic 300 min(1.55rem, 3.8cqw)/1.35 var(--serif); color: var(--ink); margin-top: -.4rem; white-space: nowrap; }
/* telefon: w jednej linii byłoby za małe, więc normalny rozmiar i zawijanie */
@media (max-width: 700px) { .page__tag { font-size: 1.2rem; white-space: normal; } }
/* Wyróżniona informacja pod wstępem (Dąb Bagienny: datowanie radiowęglowe) */
.page__note { display: grid; gap: .5rem; max-width: 40em; padding-left: 1.2rem; border-left: 1px solid currentColor; color: var(--ink-2); }
.page__note-k { font-family: var(--cond); text-transform: uppercase; letter-spacing: .14em; font-size: .8rem; color: var(--soft); }
.page--dark .page__note { color: rgba(245, 243, 238, .82); border-color: rgba(245, 243, 238, .35); }
.page--dark .page__note-k { color: rgba(245, 243, 238, .55); }
.page--dark { background: var(--black); color: var(--paper); }
.page--dark :is(.lead, .prose p, .prose ul li) { color: rgba(245, 243, 238, .78); }
.page--dark .crumb a { color: rgba(245, 243, 238, .55); }
.page--dark .block { border-color: rgba(245, 243, 238, .14); }
.crumb a { text-decoration: none; color: var(--soft); }
.crumb a:hover { color: var(--ink); }
.toc { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; border-block: 1px solid var(--line); padding-block: 1rem; }
/* Na szerokim ekranie pozycje rozłożone na całą szerokość linii: ostatnia kończy się przy jej końcu. */
@media (min-width: 761px) { .toc { justify-content: space-between; } }
.toc a { text-decoration: none; font-family: var(--cond); text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; color: var(--ink-2); }
.toc a:hover { color: var(--ink); text-decoration: underline; }
.block { padding-block: clamp(3.5rem, 8vw, 7rem); border-top: 1px solid var(--line); }
.block__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 1.2rem clamp(2rem, 6vw, 6rem); margin-bottom: clamp(2rem, 5vw, 3.5rem); align-items: start; }
.block__head p { color: var(--ink-2); max-width: 34em; text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
@media (max-width: 760px) { .block__head { grid-template-columns: 1fr; } }
.prose { display: grid; gap: 1.2rem; }
.prose p { color: var(--ink-2); max-width: 38em; }
.prose h2 { font: 300 var(--t-h2)/1.12 var(--serif); margin-top: 1.5rem; }
.prose h3 { font: 300 1.5rem/1.25 var(--serif); margin-top: 1.6rem; }
.prose ul { display: grid; gap: .5rem; }
.prose ul li { padding-left: 1.2rem; position: relative; color: var(--ink-2); }
.prose ul li::before { content: ""; position: absolute; left: 0; top: .8em; width: .5rem; height: 1px; background: currentColor; }
.prose a { word-break: break-word; }
.tiles { display: grid; gap: clamp(1rem, 2vw, 1.8rem); grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); }
.tiles figure img { width: 100%; object-fit: cover; aspect-ratio: var(--ar, 1); background: var(--paper-2); }
.tiles figcaption { color: var(--ink); }
.tiles figcaption small { display: block; color: var(--soft); letter-spacing: .08em; margin-top: .25rem; text-transform: none; font-family: var(--sans); font-size: .85rem; }
.tiles--colors figcaption small { margin-top: .05rem; line-height: 1.25; } /* dawna nazwa tuż pod nową */
.tiles--lines figure img { background: #fff; padding: 6%; }
/* Lupa na wykończeniach: po najechaniu (dotyk: stuknięcie) faktura powiększa się
   w miejscu kursora i podąża za nim. Samo przybliżenie, bez deformacji. */
.zoom { display: block; overflow: hidden; cursor: zoom-in; touch-action: manipulation; }
/* Delikatnie: powolne wejście, mniejsze przybliżenie, punkt przybliżenia płynie za kursorem. */
.zoom img { display: block; will-change: transform;
  transition: transform 1.3s cubic-bezier(.25, .1, .25, 1), transform-origin .9s cubic-bezier(.25, .1, .25, 1); }
.zoom.is-on img { transform: scale(1.7); }
.zoom.is-on { cursor: zoom-out; }
@media (prefers-reduced-motion: reduce) { .zoom img { transition: none; } }
.tile--empty { aspect-ratio: var(--ar, 1); border: 1px solid var(--line); display: grid; place-items: center; color: var(--soft); font-size: .8rem; text-align: center; padding: 1rem; }
@media (max-width: 960px) { .tiles { grid-template-columns: repeat(min(var(--n, 4), 3), minmax(0, 1fr)); } }
@media (max-width: 600px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Wykończenia: 7 pól w rzędzie, „Różne stopnie wędzenia” (grafika pozioma, 4 deski) zajmuje dwa
   i ma tę samą wysokość co pionowe kafelki: wysokość = 1,5 × szerokość jednego pola. */
.tiles--fin { --tg: clamp(1rem, 2vw, 1.8rem); gap: var(--tg); }
@media (min-width: 961px) {
  .tiles--fin .tile-wide { grid-column: span 2; container-type: inline-size; }
  .tiles--fin .tile-wide img { aspect-ratio: auto; height: calc((100cqw - var(--tg)) * .75); }
}
.tiles--colors { --n: 4; } /* 19 kolorów + „Twój wymarzony kolor” = 4 kolumny × 5 rzędów (2.10.2026) */
/* Kolory: ostatni kafelek „Twój wymarzony kolor”: rozmyta, jasnobeżowa deska z odręcznym znakiem zapytania, prowadzi do zapytania. */
.tile-ask a { display: block; position: relative; overflow: hidden; text-decoration: none; }
.tile-ask__img img { filter: blur(7px) saturate(.7) brightness(1.2); transform: scale(1.15); transition: filter .6s, transform .8s var(--ease); }
/* znak zapytania rysowany odręcznie (SVG, jak szkice w Bespoke) */
.tile-ask__q { position: absolute; left: 50%; top: 50%; height: 46%; width: auto; translate: -50% -50%; fill: none; stroke: rgba(255, 255, 255, .95);
  stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 6px rgba(80, 60, 30, .18)); transition: transform .6s var(--ease); }
.tile-ask a:hover .tile-ask__img img { filter: blur(4px) saturate(.8) brightness(1.15); }
.tile-ask a:hover .tile-ask__q { transform: scale(1.08) rotate(-4deg); }
/* Wzory: kafelek „Custom”: zdjęcie już jest rozmyte, więc bez filtra; znak zapytania ciemnoszary */
.tile-ask--dark .tile-ask__img img, .tile-ask--dark a:hover .tile-ask__img img { filter: none; transform: none; padding: 0; }
.tile-ask--dark .tile-ask__q { stroke: #4A4640; filter: none; }
@media (max-width: 960px) { .tiles--colors { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* tablet: dalej 4 × 5 */
@media (max-width: 600px) { .tiles--colors { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* telefon: 2 kolumny */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.split--rev > :first-child { order: 2; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } .split--rev > :first-child { order: 0; } }
.entries { display: grid; gap: 0; }
.entry { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; padding-block: clamp(3rem, 7vw, 6rem); border-top: 1px solid var(--line); }
/* zdjęcie zawsze po lewej, opis po prawej (bez naprzemienności) */
.entry img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.entry__txt { display: grid; gap: 1.2rem; justify-items: start; }
.entry__txt p { color: var(--ink-2); max-width: 32em; }
@media (max-width: 860px) { .entry { grid-template-columns: 1fr; } }
.entry--solo { grid-template-columns: minmax(0, 46rem); } /* wpis bez zdjęcia: sam tekst */
.entry--fit img { aspect-ratio: auto; object-fit: contain; } /* wizualizacja pokazana w całości, bez kadrowania */
/* Tarasy: status rozwiązania (przed KOT), mniejszy druk w dwóch kolumnach */
.status { padding-block: clamp(2rem, 4vw, 3rem) clamp(3rem, 6vw, 5rem); display: grid; gap: 1rem; max-width: 62rem; }
.status__t { font-family: var(--cond); text-transform: uppercase; letter-spacing: .14em; font-size: .8rem; font-weight: 400; color: var(--soft); }
.status__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem clamp(1.5rem, 4vw, 3.5rem); }
.status__cols p { font-size: .9rem; line-height: 1.65; color: var(--ink-2); }
@media (max-width: 760px) { .status__cols { grid-template-columns: 1fr; } }
/* noty prawne: pod galerią realizacji, pod przyciskiem zapytania, drobny druk na dole strony Tarasy */
.refnote { margin-top: clamp(1.2rem, 2.5vw, 2rem); font-size: .85rem; line-height: 1.6; color: var(--soft); max-width: 46rem; }
.col-wide.refnote { margin-inline: auto; max-width: none; }
.btn-note { margin-top: 1rem; font-size: .88rem; color: var(--soft); max-width: 34rem; }
.fineprint { margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.2rem; border-top: 1px solid var(--line); font-size: .78rem; line-height: 1.6; color: var(--soft); }

.facts { display: flex; flex-wrap: wrap; gap: 1rem 3rem; }
.facts dt { color: var(--soft); }
.facts dd { font: 300 1.15rem var(--serif); margin-top: .2rem; }
.spec { display: grid; border-top: 1px solid var(--line); }
.spec li { display: grid; grid-template-columns: 12rem 1fr; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.spec li span:first-child { color: var(--ink); }
@media (max-width: 600px) { .spec li { grid-template-columns: 1fr; gap: .1rem; } }
/* panorama (O nas): w całości, bez kadrowania, w szerokości kolumny */
.pano img { width: 100%; height: auto; }
.gal { columns: 2; column-gap: clamp(1rem, 2vw, 2rem); }
.gal img { width: 100%; margin-bottom: clamp(1rem, 2vw, 2rem); break-inside: avoid; }
@media (max-width: 600px) { .gal { columns: 1; } }
/* realizacje: wszystkie zdjęcia w jednej szerokości kolumny, bez kadrowania. Poziome na cały
   wiersz, pionowe parami (flex z build.mjs = proporcje zdjęcia, więc para ma równą wysokość). */
.gal--rows { columns: auto; display: grid; gap: clamp(1rem, 2vw, 2rem); }
.gal__row { display: flex; gap: clamp(1rem, 2vw, 2rem); }
.gal__row > figure { min-width: 0; }
.gal--rows img { width: 100%; height: auto; margin: 0; }
.gal__row--half > figure { flex: none !important; width: calc(50% - clamp(1rem, 2vw, 2rem) / 2); margin-inline: auto; }
@media (max-width: 600px) { .gal__row { flex-direction: column; } .gal__row--half > figure { width: 100%; } }
.pnav { display: flex; justify-content: space-between; gap: 2rem; margin-top: 4rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.pnav a { text-decoration: none; font: 300 1.1rem var(--serif); }
.pnav a:hover { text-decoration: underline; }
.cta-line { margin-top: 4rem; }
.pgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2.5rem, 5vw, 4.5rem) clamp(1rem, 2.5vw, 2.5rem); }
.pcard { text-decoration: none; display: grid; gap: .9rem; align-content: start; }
.pcard__fig { overflow: hidden; display: block; }
.pcard img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 1.2s var(--ease); }
.pcard:hover img { transform: scale(1.03); }
@media (max-width: 960px) { .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .pgrid { grid-template-columns: 1fr; } }

/* Pasek zdjęć, który sam jedzie w lewo (Artykuły: zdjęcia z Kolacji Architektów).
   Dwie identyczne połowy: przesunięcie o -50% wraca do punktu wyjścia bez przeskoku.
   Najechanie myszą zatrzymuje ruch; przy ograniczonym ruchu pasek przewija się ręcznie. */
.marq-wrap { margin-block: clamp(2rem, 5vw, 4rem) clamp(1rem, 3vw, 2rem); }
.marq { overflow: hidden; }
.marq__track { display: flex; width: max-content; animation: marq-run calc(var(--n) * 4s) linear infinite; }
.marq:hover .marq__track { animation-play-state: paused; }
.marq__set { display: flex; gap: clamp(.6rem, 1.2vw, 1rem); padding-right: clamp(.6rem, 1.2vw, 1rem); }
.marq__set img { height: clamp(9rem, 16vw, 14rem); width: auto; max-width: none; display: block; }
.marq--lg .marq__set img { height: clamp(14rem, 28vw, 26rem); }
.marq--lg .marq__track { animation-duration: calc(var(--n) * 6s); } /* większe zdjęcia: wolniej */
@keyframes marq-run { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marq { overflow-x: auto; } .marq__track { animation: none; } .marq__set[aria-hidden] { display: none; }
}

/* Dąb Bagienny: rozdziały. Po lewej przyklejona kolumna (kłoda obracająca się
   z przewijaniem, numer rozdziału, spis), po prawej rozdziały; aktywny jest jasny. */
.bch { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 7rem); margin-block: clamp(4rem, 9vw, 8rem); }
.bch__aside { position: sticky; top: calc(var(--hdr) + 2rem); align-self: start; height: calc(100vh - var(--hdr) - 4rem); display: grid; grid-template-rows: minmax(0, 1fr) auto auto; gap: 1.6rem; }
.bch__log { margin: 0; position: relative; min-height: 0; } /* kłoda zawsze mieści się w swoim polu, nie nachodzi na numer */
.bch__log img { position: absolute; inset: 0; margin: auto; width: auto; height: auto; max-width: 100%; max-height: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 50%;
  transform: rotate(var(--r, 0deg)); transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.bch__big { font: 300 clamp(3rem, 2rem + 3vw, 5rem)/1 var(--cond); color: rgba(245, 243, 238, .35); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.bch__big span { display: inline-block; color: var(--paper); transition: opacity .35s, transform .35s; }
.bch__big span.is-swap { opacity: 0; transform: translateY(.3em); }
.bch__nav { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; border-top: 1px solid rgba(245, 243, 238, .14); padding-top: 1rem; }
.bch__nav a { display: flex; gap: 1rem; align-items: baseline; padding: .35rem 0; text-decoration: none; font-family: var(--cond); text-transform: uppercase;
  letter-spacing: .12em; font-size: .8rem; color: rgba(245, 243, 238, .4); transition: color .3s; }
.bch__nav a span { width: 1.6rem; }
.bch__nav a:hover, .bch__nav a.is-on { color: var(--paper); }
.bch__nav a { position: relative; padding-left: 0; transition: color .3s, padding-left .4s; }
.bch__nav a::before { content: ""; position: absolute; left: 0; top: 50%; width: 0; height: 1px; background: currentColor; transition: width .4s; }
.bch__nav a.is-on { padding-left: 1.6rem; }
.bch__nav a.is-on::before { width: 1.1rem; }
.bch__list { display: grid; }
/* każdy rozdział na cały ekran pod nagłówkiem; przejścia robi „przewijanie stronami” w site.js */
.bch__item { min-height: calc(100vh - var(--hdr)); display: grid; align-content: center; gap: 1.2rem; padding-block: 2rem; opacity: .22; transition: opacity .6s; }
.bch__item.is-on { opacity: 1; }
.bch__no { font-family: var(--cond); letter-spacing: .14em; font-size: .85rem; color: var(--paper); }
.bch__t { font: 300 var(--t-h2)/1.08 var(--serif); letter-spacing: -.012em; }
.bch__item p { color: rgba(245, 243, 238, .78); max-width: 36em; }
.bch__stat { font: 300 clamp(3.6rem, 2rem + 5.5vw, 7rem)/1 var(--cond); color: var(--paper) !important; letter-spacing: .01em; margin-top: .4rem; font-variant-numeric: tabular-nums; }
.bch__stat span { font-size: .3em; letter-spacing: .14em; text-transform: uppercase; color: rgba(245, 243, 238, .6); }
.bch__statnote { font-family: var(--cond); text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; color: rgba(245, 243, 238, .5) !important; margin-top: -.6rem; }
@media (max-width: 860px), (max-height: 559px) {
  .bch { grid-template-columns: 1fr; }
  .bch__aside { position: static; height: auto; grid-template-rows: auto; }
  .bch__log img { position: static; max-height: 16rem; margin: 0 auto; }
  .bch__big, .bch__nav { display: none; }
  .bch__item { min-height: 0; opacity: 1; padding-block: 2rem; border-top: 1px solid rgba(245, 243, 238, .14); }
}
@media (prefers-reduced-motion: reduce) { .bch__item { opacity: 1; } .bch__log img { transform: none; } }
/* Ekran dotykowy (tablet, laptop z dotykiem): rozdziały dociąga przeglądarka, płynnie z bezwładnością palca.
   Mysz i gładzik obsługuje site.js (jeden ruch = jeden rozdział). */
@media (pointer: coarse) and (min-width: 861px) and (min-height: 560px) {
  html:has(.bch) { scroll-snap-type: y proximity; }
  .bch__item { scroll-snap-align: start; scroll-margin-top: var(--hdr); }
}

/* Realizacje: odnośniki do artykułów pod wstępem */
.presslinks { display: grid; gap: .9rem; justify-items: start; margin-top: .6rem; }
.presslinks .label { color: var(--soft); }
.presslinks ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.15rem; }
/* na komputerze w jednej linii */
@media (min-width: 900px) { .presslinks ul { flex-wrap: nowrap; white-space: nowrap; width: max-content; } }
.presslinks ul a { font: 300 1.06rem/1.3 var(--serif); text-decoration: none; border-bottom: 1px solid var(--line); padding-bottom: .15rem; transition: border-color .3s; }
.presslinks ul a:hover { border-bottom-color: var(--ink); }
.presslinks ul a span { font-size: .8em; color: var(--soft); }

/* Artykuły: tytuł wydawcy, tytuł artykułu, data, odnośnik na zewnątrz */
.press { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.press a { display: grid; grid-template-columns: 14rem minmax(0, 1fr) auto; grid-template-areas: "pub t go" "pub d go"; gap: .4rem clamp(1.2rem, 4vw, 4rem);
  align-items: baseline; padding: clamp(1.4rem, 3vw, 2.2rem) 0; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; }
.press__pub { grid-area: pub; font-family: var(--cond); text-transform: uppercase; letter-spacing: .14em; font-size: .82rem; color: var(--soft); }
.press__t { grid-area: t; font: 300 clamp(1.3rem, 1rem + 1vw, 1.9rem)/1.2 var(--serif); letter-spacing: -.01em; }
.press__d { grid-area: d; color: var(--soft); font-size: .9rem; }
.press__go { grid-area: go; font-family: var(--cond); text-transform: uppercase; letter-spacing: .14em; font-size: .82rem; white-space: nowrap; }
.press a:hover .press__t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
@media (max-width: 760px) { .press a { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "pub go" "t t" "d d"; } }
.files { border-top: 1px solid var(--line); }
.files li > a, .files li.is-soon { display: grid; grid-template-columns: 1fr auto auto; gap: 1rem; align-items: baseline; padding: 1rem 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.files li > a:hover .files__n { text-decoration: underline; }
.files__n { font: 300 1.12rem/1.3 var(--serif); }
.files__note { color: var(--soft); font-size: .9rem; }
.files__k { color: var(--soft); }
.files li.is-soon .files__n { color: var(--ink-2); }
.money { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.money div { padding: 1.2rem 0; border-bottom: 1px solid var(--line); display: grid; gap: .3rem; }
.money dt { font-family: var(--cond); text-transform: uppercase; letter-spacing: .12em; font-size: .75rem; color: var(--soft); }
.money dd { font: 300 1.5rem var(--serif); font-variant-numeric: tabular-nums; }
@media (max-width: 600px) { .money { grid-template-columns: 1fr; } }

/* formularz */
.form { display: grid; gap: 1.4rem; grid-template-columns: 1fr 1fr; }
.form label { display: grid; gap: .45rem; font-family: var(--cond); text-transform: uppercase; letter-spacing: .12em; font-size: .75rem; color: var(--soft); }
.form .full { grid-column: 1 / -1; }
.form input, .form textarea, .form select { font: 300 1.05rem var(--sans); color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--ink-2); padding: .7rem 0; border-radius: 0; }
.form textarea { min-height: 5.5rem; resize: vertical; }
/* lista rozwijana jak pozostałe pola: tylko linia pod spodem i strzałka */
.form select {
  -webkit-appearance: none; appearance: none; cursor: pointer; padding-right: 1.5rem;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' stroke='%234A4640' stroke-width='1.2'><path d='M1 1l4 4 4-4'/></svg>") no-repeat right .2rem center;
}

/* kontakt: cała strona na jednym ekranie (dane po lewej, formularz po prawej) */
.page--contact { min-height: 100vh; min-height: 100svh; display: grid; align-content: center; padding: calc(var(--hdr) + clamp(1.5rem, 4vh, 3rem)) 0 clamp(1.5rem, 4vh, 3rem); }
.ct { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.ct__info { display: grid; gap: clamp(1.5rem, 4vh, 3rem); }
.ct__list { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 3vh, 1.8rem) 2rem; }
.ct__list dt { color: var(--soft); margin-bottom: .4rem; }
.ct__list dd { font-size: 1.05rem; line-height: 1.55; }
.ct__list a { text-decoration: none; }
.ct__list a:hover { text-decoration: underline; }
.ct__map { display: inline-block; margin-top: .3rem; font-family: var(--cond); text-transform: uppercase; letter-spacing: .12em; font-size: .75rem; }
.page--contact .form { gap: clamp(.8rem, 2.2vh, 1.4rem) 1.4rem; }
.page--contact .form input, .page--contact .form select { padding: .5rem 0; }
@media (max-width: 860px) { .ct { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .ct__list { grid-template-columns: 1fr; } }
.form input:focus, .form textarea:focus, .form select:focus { outline: none; border-bottom-color: var(--ink); box-shadow: 0 1px 0 var(--ink); }
.form__note { grid-column: 1 / -1; font-size: .88rem; color: var(--soft); }
/* pułapka na boty: pole poza ekranem (nie display:none, bo część botów je pomija) */
.form__hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.form__status { font-size: .95rem; color: var(--ink-2); min-height: 1.2em; }
.form__status:empty { display: none; }
.form__status.is-ok { color: var(--ink); }
.form button:disabled { opacity: .5; cursor: progress; }
@media (max-width: 600px) { .form { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------- stopka -- */
.foot { position: relative; z-index: 2; background: var(--black); color: rgba(245, 243, 238, .82); padding: clamp(4rem, 8vw, 6rem) 0 2.5rem; font-size: .95rem; }
.foot__in { width: var(--wide); margin-inline: auto; display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 2.5rem; }
.foot a { text-decoration: none; }
.foot a:hover { text-decoration: underline; color: #fff; }
.foot__logo { width: 11rem; color: var(--paper); }
.foot__logo svg { width: 100%; height: auto; fill: currentColor; display: block; }
.foot__brand { display: grid; gap: 2.2rem; align-content: start; justify-items: start; }
.foot__fsc { width: 6.5rem; height: auto; }
.foot__addr { font-style: normal; }
.foot__place { display: grid; gap: 1.6rem; align-content: start; }
/* godziny otwarcia pod adresem: nagłówek krojem nagłówka strony, uwaga przygaszona */
.foot__hours-k { display: block; font-family: var(--cond); text-transform: uppercase; letter-spacing: .14em; font-size: .78rem; color: rgba(245, 243, 238, .55); margin-bottom: .2rem; }
.foot__hours-n { color: rgba(245, 243, 238, .55); font-size: .88rem; }
.foot__nav { display: grid; gap: .5rem; align-content: start; }
.foot__eu { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 32rem) 1fr; gap: 2rem; align-items: center; margin-top: 2rem; padding: 1.2rem; background: #fff; color: var(--ink); }
.foot__eu:hover { color: var(--ink) !important; }
.foot__eu span { font-size: .85rem; color: var(--ink-2); }
.foot__copy { grid-column: 1 / -1; color: rgba(245, 243, 238, .45); font-size: .85rem; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .6rem 2rem; }
.foot__credit { font-family: var(--cond); text-transform: uppercase; letter-spacing: .14em; font-size: .78rem; } /* po prawej, w linii z prawami autorskimi */
@media (max-width: 860px) { .foot__in { grid-template-columns: 1fr 1fr; } .foot__eu { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .foot__in { grid-template-columns: 1fr; } }

/* ------------------------------------------------------- mniej ruchu -- */
/* ---------------------------------------------------------- bespoke: lista wyrobów --
   Numer · szkic · nazwa z opisem · odnośnik do zdjęć (otwiera przeglądarkę zdjęć). */
.bsp-wrap { margin-top: clamp(3rem, 7vw, 6rem); }
.bsp-wrap__lab { color: var(--soft); margin-bottom: 1.2rem; }
.bsp { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--line); counter-reset: none; }
.bsp__row { display: grid; grid-template-columns: 3.2rem 10rem minmax(0, 1fr); gap: clamp(1.2rem, 3vw, 3rem); align-items: center;
  padding-block: clamp(1.6rem, 3vw, 2.4rem); border-top: 1px solid var(--line); }
.bsp__no { font-family: var(--cond); letter-spacing: .12em; font-size: .85rem; color: var(--soft); align-self: start; padding-top: .9rem; }
.bsp__sk { display: block; aspect-ratio: 1; }
.bsp__sk img { width: 100%; height: 100%; object-fit: contain; }
.bsp__txt { display: grid; gap: .7rem; justify-items: start; }
.bsp__name { font: 300 clamp(1.7rem, 1.1rem + 1.8vw, 2.7rem)/1.08 var(--serif); letter-spacing: -.012em; }
.bsp__txt p { color: var(--ink-2); max-width: 36em; }
.bsp__more { font-family: var(--cond); text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; color: var(--soft); text-decoration: none; }
.bsp__more:hover { color: var(--ink); text-decoration: underline; }
.bsp__ph { justify-self: end; }
.bsp__go { white-space: nowrap; }
@media (max-width: 760px) {
  .bsp__row { grid-template-columns: 2rem minmax(0, 1fr) 5.5rem; grid-template-areas: "no txt sk"; row-gap: 1rem; align-items: start; }
  .bsp__no { grid-area: no; padding-top: .5rem; }
  .bsp__sk { grid-area: sk; }
  .bsp__txt { grid-area: txt; }
  .bsp__ph { grid-area: ph; justify-self: start; }
}

/* Zdjęcie z tekstem na nim (O nas: sto kłód). Biały tekst na dole zdjęcia,
   pod nim ciemny gradient, żeby był czytelny także na jasnej mgle. */
.ovl { position: relative; margin-block: clamp(3rem, 7vw, 6rem); color: #fff; overflow: hidden; }
.ovl__fig { margin: 0; }
.ovl__fig img { width: 100%; height: min(86vh, 56rem); object-fit: cover; object-position: 50% 45%; display: block; }
.ovl::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(10, 10, 9, .78) 0%, rgba(10, 10, 9, .45) 38%, rgba(10, 10, 9, 0) 70%); }
.ovl__txt { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; padding: clamp(1.5rem, 5vw, 4.5rem); display: grid; gap: 1.2rem; max-width: 46rem; }
.ovl__txt p { color: rgba(255, 255, 255, .88); }
.ovl__logo { position: absolute; z-index: 1; top: clamp(1.4rem, 4.5vw, 4rem); right: clamp(1.4rem, 4.5vw, 4rem); width: clamp(9rem, 16vw, 15rem); height: auto; color: #fff; fill: currentColor; filter: drop-shadow(0 1px 8px rgba(0, 0, 0, .35)); } /* białe logo na zdjęciu lasu */
.ovl__mark { position: absolute; z-index: 1; top: clamp(1.2rem, 4vw, 3.5rem); right: clamp(1.2rem, 4vw, 3.5rem); width: clamp(3.6rem, 6vw, 5.5rem); height: auto; opacity: .9; } /* znak FSC na zdjęciu lasu */
.ovl--top .ovl__fig img { object-position: 50% 20%; } /* kadr od góry: głowa stolarza zostaje w zdjęciu */
@media (max-width: 760px) { .ovl__fig img { height: 88vh; } }

/* Karuzela zdjęć: równa wysokość, zdjęcia bez przycinania, przewijanie palcem,
   gładzikiem albo strzałkami; kolejne zdjęcie wystaje zza krawędzi. */
.car { margin-block: clamp(3rem, 7vw, 6rem); }
.car__track { display: flex; gap: clamp(.8rem, 1.6vw, 1.4rem); overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-x: contain; outline: none; }
.car__track::-webkit-scrollbar { display: none; }
.car__slide { flex: 0 0 auto; margin: 0; scroll-snap-align: start; height: min(70vh, 42rem); }
/* szerokie zdjęcie nie zajmuje całej szerokości, żeby następne wystawało zza krawędzi */
.car__slide img { height: 100%; width: auto; max-width: calc(min(88rem, 100vw - 2 * var(--gut)) * .86); object-fit: cover; display: block; }
.car__ui { display: flex; justify-content: space-between; align-items: center; margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.car__count { font-family: var(--cond); letter-spacing: .14em; font-size: .85rem; color: var(--soft); }
.car__btns { display: flex; gap: .4rem; }
.car__btns button { width: 3rem; height: 3rem; border: 1px solid var(--line); border-radius: 50%; background: none; color: var(--ink);
  font-size: 1.1rem; cursor: pointer; transition: background .3s, color .3s, opacity .3s; }
.car__btns button:hover:not(:disabled) { background: var(--ink); color: var(--paper); }
.car__btns button:disabled { opacity: .3; cursor: default; }
/* telefon: każde zdjęcie w swoich proporcjach, jak największe w polu 86% szerokości × 52% wysokości ekranu
   (wcześniej wszystkie wciskane w jeden wąski prostokąt: szerokie powiększone i ucięte nawet 3×).
   Niższe pole = mniej pustego miejsca nad i pod szerokimi zdjęciami. */
@media (max-width: 600px) {
  .car__track { align-items: center; }
  .car__slide { height: auto; width: auto; }
  .car__slide img { width: auto; height: auto; max-width: 86vw; max-height: 52vh; object-fit: contain; }
}
@media (prefers-reduced-motion: reduce) { .car__track { scroll-behavior: auto; } }

/* Przeglądarka zdjęć (odnośniki z data-lb). Bez JS odnośnik otwiera samo zdjęcie. */
.lb { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: rgba(15, 14, 13, .98); color: var(--paper); }
.lb::backdrop { background: rgba(15, 14, 13, .6); }
.lb[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.lb__bar { display: flex; justify-content: space-between; align-items: center; padding: 1rem clamp(1rem, 3vw, 2rem);
  font-family: var(--cond); text-transform: uppercase; letter-spacing: .14em; font-size: .82rem; }
.lb__fig { display: grid; place-items: center; min-height: 0; padding: 0 clamp(3.2rem, 7vw, 6rem); margin: 0; }
.lb__fig img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.lb button { background: none; border: 0; color: inherit; font: inherit; cursor: pointer; padding: .6rem; letter-spacing: inherit; text-transform: inherit; }
.lb__nav { position: absolute; top: 50%; transform: translateY(-50%); font-size: 1.6rem !important; opacity: .8; }
.lb__nav:hover, .lb__close:hover { opacity: 1; text-decoration: underline; }
.lb__prev { left: clamp(.4rem, 2vw, 1.5rem); } .lb__next { right: clamp(.4rem, 2vw, 1.5rem); }
.lb__count { padding: 0 0 1.2rem; text-align: center; font-family: var(--cond); letter-spacing: .14em; font-size: .8rem; opacity: .7; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .hundred { height: auto; }
  .hundred__stick { position: static; height: auto; padding-block: calc(var(--hdr) + 4rem) 2rem; }
}

/* ------------------------------------------------- notatnik (Podłogi) -- */
/* Kartka w linie wysuwana z prawej. Zakładka „Notatnik” przy prawej krawędzi ekranu
   (na telefonie przycisk w prawym dolnym rogu). „+” przy zdjęciach dopisuje element. */
.notes { --np: #FBF8F1; --nl: rgba(92, 112, 140, .22); --nm: rgba(186, 92, 78, .35); --lh: 1.85rem; }
.notes__tab {
  position: fixed; z-index: 44; right: 0; top: 50%; translate: 0 -50%;
  display: flex; align-items: center; gap: .55rem; writing-mode: vertical-rl; rotate: 180deg;
  padding: 1.1rem .7rem; background: var(--np); color: var(--ink); border: 1px solid var(--line); border-left: 0;
  border-radius: .35rem 0 0 .35rem; box-shadow: 0 6px 22px rgba(22, 20, 18, .12);
  font-family: var(--cond); text-transform: uppercase; letter-spacing: .16em; font-size: .78rem;
  transition: background .3s, padding .3s var(--ease);
}
.notes__tab { border-radius: 0 .35rem .35rem 0; } /* obrócona o 180°: zaokrąglenie po stronie ekranu */
.notes__tab:hover { padding-block: 1.3rem; }
.notes__tab svg { width: 1.05rem; height: 1.05rem; rotate: 90deg; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }
.notes__n { writing-mode: horizontal-tb; rotate: 180deg; min-width: 1.3rem; height: 1.3rem; padding-inline: .3rem; border-radius: .65rem;
  background: var(--ink); color: var(--paper); font: 400 .7rem/1.3rem var(--sans); letter-spacing: 0; text-align: center; }
.notes__tab.is-bump { animation: notes-bump .6s var(--ease); }
@keyframes notes-bump { 30% { translate: -.5rem -50%; } }
.notes.is-open .notes__tab { opacity: 0; pointer-events: none; }

.notes__panel { position: fixed; z-index: 45; top: calc(var(--hdr) + .8rem); right: .8rem; bottom: .8rem; width: min(25rem, calc(100vw - 1.6rem));
  transform: translateX(calc(100% + 1.5rem)); transition: transform .55s var(--ease); }
.notes.is-open .notes__panel { transform: none; }
.notes__paper {
  height: 100%; overflow: hidden auto; overscroll-behavior: contain; padding: 1.6rem 1.5rem 1.4rem 2.6rem; position: relative; display: grid; gap: 1rem; align-content: start;
  background: var(--np); border: 1px solid rgba(22, 20, 18, .1); border-radius: .2rem;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 18px 50px rgba(22, 20, 18, .18), 0 2px 6px rgba(22, 20, 18, .08);
  /* kartka papieru czerpanego (2.10.2026, zamiast kołonotatnika z dziurkami): pionowy margines, lekko
     ciemniejsze brzegi i faktura z szumu SVG (drobne włókna, wydłużone włókna, miękkie przebarwienia) */
  background-color: #FCFAF3;
  background-image:
    linear-gradient(90deg, transparent 1.9rem, var(--nm) 1.9rem 2rem, transparent 2rem),
    radial-gradient(120% 90% at 50% 45%, transparent 65%, rgba(150, 125, 90, .08) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' seed='1' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.48 0 0 0 0 0.44 0 0 0 0 0.38 0 0 0 0.14 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='380' height='380'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.045' numOctaves='5' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.6 0 0 0 0 0.55 0 0 0 0 0.46 0 0 0 0.22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.009' numOctaves='3' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.66 0 0 0 0 0.6 0 0 0 0 0.5 0 0 0 0.14 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  background-size: 100% 100%, 100% 100%, 240px 240px, 380px 380px, 560px 560px;
  background-repeat: no-repeat, no-repeat, repeat, repeat, repeat;
}
.notes__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-top: .3rem; }
.notes__t { font: 300 1.6rem/1.15 var(--serif); }
.notes__close { font-size: 1.1rem; line-height: 1; padding: .4rem; margin: -.4rem -.4rem 0 0; color: var(--soft); }
.notes__close:hover { color: var(--ink); }
.notes__hint { font-size: .82rem; line-height: 1.5; color: var(--soft); margin-top: -.45rem; }
.notes__lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.notes__text {
  width: 100%; min-height: calc(var(--lh) * 9); resize: vertical; border: 0; outline: none; padding: 0; margin: 0;
  font: italic 300 1.12rem/var(--lh) var(--serif); color: var(--ink); background-color: transparent;
  background-image: linear-gradient(transparent calc(var(--lh) - 1px), var(--nl) calc(var(--lh) - 1px));
  background-size: 100% var(--lh); background-attachment: local;
}
.notes__text::placeholder { color: rgba(22, 20, 18, .35); }
.notes__text:focus-visible { box-shadow: 0 0 0 1px rgba(22, 20, 18, .25); }
.notes__send { display: grid; gap: .9rem; padding-top: .4rem; position: relative; }
.notes__send .form__hp { left: 0; opacity: 0; pointer-events: none; } /* pułapka bez wychodzenia poza kartkę */
.notes__fields { display: grid; grid-template-columns: 1fr; gap: .7rem; }
.notes__fields label { display: grid; gap: .25rem; font-family: var(--cond); text-transform: uppercase; letter-spacing: .12em; font-size: .7rem; color: var(--soft); }
.notes__fields input { font: 300 .95rem var(--sans); color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid rgba(22, 20, 18, .25); padding: .35rem 0; border-radius: 0; }
.notes__fields input:focus { outline: none; border-bottom-color: var(--ink); }
.notes__btns { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.notes__btn { padding: .8rem .6rem; border: 1px solid var(--ink); font-family: var(--cond); text-transform: uppercase; letter-spacing: .12em; font-size: .74rem; transition: background .3s, color .3s; }
.notes__btn:hover { background: rgba(22, 20, 18, .06); }
.notes__btn--dark { background: var(--ink); color: var(--paper); }
.notes__btn--dark:hover { background: #33302c; }
.notes__btn:disabled { opacity: .5; cursor: default; }
.notes__status { font-size: .85rem; line-height: 1.45; color: var(--ink-2); min-height: 1.2em; }
.notes__status.is-ok { color: #3d6b45; }
.notes__clear { justify-self: start; font-size: .78rem; color: var(--soft); text-decoration: underline; text-underline-offset: .2em; }
.notes__clear:hover { color: var(--ink); }
.notes__clear.is-armed { color: #9a3b2c; } /* drugi krok: „Na pewno? Kliknij jeszcze raz” */

/* „+” przy zdjęciach: dopisuje element do notatek */
[data-notes-cat] figure { position: relative; }
.notes__add {
  position: absolute; z-index: 3; top: .55rem; right: .55rem; width: 2rem; height: 2rem; border-radius: 50%; padding: 0;
  display: grid; place-items: center; color: var(--ink);
  /* ten sam szarobeżowy co zaznaczenie tekstu, gęstszy, żeby był czytelny także na ciemnych kolorach */
  background: rgba(214, 205, 191, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 1px 6px rgba(22, 20, 18, .14);
  opacity: 0; transform: scale(.85); transition: opacity .25s, transform .25s var(--ease), background .25s;
}
.notes__add svg { width: 1rem; height: 1rem; display: block; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
[data-notes-cat] figure:hover .notes__add, .notes__add:focus-visible, .notes__add.is-done { opacity: 1; transform: none; }
.notes__add:hover { background: rgba(226, 218, 205, .9); }
.notes__add.is-done { background: rgba(196, 184, 166, .85); }
@media (hover: none) { .notes__add { opacity: 1; transform: none; width: 1.85rem; height: 1.85rem; } }

@media (max-width: 760px) {
  /* telefon: wąska zakładka przy prawej krawędzi w dolnej części ekranu (z dala od środka, gdzie
     kciuk przewija stronę); otwarty notatnik zajmuje tylko dolną część wyświetlacza */
  .notes__tab { top: auto; bottom: 18svh; translate: none; padding: .8rem .45rem; gap: .4rem; font-size: .7rem; }
  .notes__tab:hover { padding-block: .8rem; }
  .notes__tab.is-bump { animation-name: notes-bump-m; }
  @keyframes notes-bump-m { 30% { translate: -.4rem 0; } }
  .notes__panel { top: auto; height: min(62svh, 34rem); right: .5rem; left: .5rem; bottom: .5rem; width: auto; transform: translateY(calc(100% + 1rem)); }
  .notes__paper { padding: 1.4rem 1.2rem 1.2rem 2.4rem; }
  .notes__text { min-height: calc(var(--lh) * 5); }
  .notes__fields, .notes__btns { grid-template-columns: 1fr; }
}
@media print { .notes, .notes__add { display: none !important; } }

/* ------------------------------------------------------ zgoda na cookies -- */
/* Karta w lewym dolnym rogu (na telefonie na dole ekranu). „Odrzucam” i „Akceptuję” mają ten sam
   wygląd i wagę, żeby żadna decyzja nie była podsuwana. */
.cc { position: fixed; z-index: 70; left: 1rem; bottom: 1rem; width: min(27rem, calc(100vw - 2rem));
  background: var(--paper); color: var(--ink); border: 1px solid var(--line); box-shadow: 0 14px 44px rgba(22, 20, 18, .18);
  opacity: 0; transform: translateY(1rem); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.cc.is-on { opacity: 1; transform: none; }
.cc__main { display: grid; gap: .9rem; padding: 1.3rem 1.4rem 1.2rem; }
.cc__t { font-family: var(--cond); text-transform: uppercase; letter-spacing: .16em; font-size: .78rem; color: var(--soft); }
.cc__txt { font-size: .9rem; line-height: 1.55; color: var(--ink-2); }
.cc__txt a { color: var(--ink); }
.cc__txt span { display: block; white-space: nowrap; } /* każde zdanie w jednej linijce (3.10.2026) */
.cc__set { display: grid; gap: .7rem; padding-block: .3rem; border-block: 1px solid var(--line); }
.cc__opt { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start; font-size: .85rem; line-height: 1.45; color: var(--ink-2); padding-block: .45rem; cursor: pointer; }
.cc__opt input { margin-top: .2rem; width: 1rem; height: 1rem; accent-color: var(--ink); }
.cc__opt b { display: block; font-weight: 400; color: var(--ink); }
.cc__btns { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.cc__btn { flex: 1 1 7rem; padding: .8rem .9rem; border: 1px solid var(--ink); background: var(--ink); color: var(--paper);
  font-family: var(--cond); text-transform: uppercase; letter-spacing: .14em; font-size: .76rem; transition: background .3s; }
.cc__btn:hover { background: #33302c; }
.cc__more { flex-basis: 100%; justify-self: start; text-align: left; font-size: .82rem; color: var(--soft); text-decoration: underline; text-underline-offset: .2em; }
.cc__more:hover { color: var(--ink); }
.foot__cc { justify-self: start; text-align: left; color: inherit; font: inherit; }
.foot__cc:hover { text-decoration: underline; color: #fff; }
@media (max-width: 600px) { .cc { left: .5rem; right: .5rem; bottom: .5rem; width: auto; } }
@media print { .cc { display: none !important; } }

/* Podłogi: naturalne mydło do drewna (zdjęcie obok krótkiej notatki) */
/* Zdjęcie od lewej krawędzi kafelków, trochę szersze niż jeden kafelek; tekst bliżej zdjęcia, mniejszy
   nagłówek; „Zapytaj o mydło” pod opisem (2.10.2026) */
.care { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 2.6fr); gap: clamp(1.5rem, 3.5vw, 3.5rem); align-items: center; }
.care__fig { grid-column: 1; }
.care__txt { grid-column: 2; grid-template-columns: minmax(0, 1fr); row-gap: 1.2rem; }
.care__txt > .label, .care__txt > .h2 { grid-column: 1 / -1; }
.care__txt > .h2 { font-size: clamp(2rem, 1.3rem + 1.9vw, 3.2rem); }
.care__txt > p:not(.label) { grid-column: 1; max-width: 32em; margin-bottom: .6rem; }
.care__txt > .go { grid-column: 1; justify-self: start; }
.care__fig img { width: 100%; height: auto; }
.care__txt { display: grid; row-gap: 1.1rem; justify-items: start; }
.care__txt p:not(.label) { color: var(--ink-2); }
@media (max-width: 760px) { .care { grid-template-columns: 1fr; row-gap: 2rem; } .care__fig, .care__txt { grid-column: 1; } .care__fig { max-width: 18rem; }
  .care__txt { grid-template-columns: 1fr; } .care__txt > * { grid-column: 1 !important; } }

/* Bespoke: karuzela realizacji pod wstępem – niższa niż na O nas, żeby nie dominowała strony */
@media (min-width: 601px) {
  .car--bsp { margin-block: clamp(1.5rem, 4vw, 3rem) clamp(3rem, 6vw, 5rem); }
  .car--bsp .car__slide { height: min(44vh, 25rem); }
}
@media (max-width: 600px) { .car--bsp .car__slide img { max-height: 44vh; } }

/* Pliki do pobrania: „Wkrótce” zamiast broszur */
.soon { font-family: var(--cond); text-transform: uppercase; letter-spacing: .2em; font-size: .9rem; color: var(--soft);
  padding: 1rem 0; border-block: 1px solid var(--line); }

/* Stopka: uwaga o naturalnym drewnie i poglądowych zdjęciach (na każdej stronie, nad kolumnami) */
/* każde zdanie od nowej linii; linia pod spodem na całą szerokość stopki, jak reszta podziałów */
.foot__note span { display: block; }
.foot__note { grid-column: 1 / -1; font-size: .88rem; line-height: 1.6; color: rgba(245, 243, 238, .55);
  padding-bottom: clamp(1.6rem, 3vw, 2.4rem); margin-bottom: .4rem; border-bottom: 1px solid rgba(245, 243, 238, .12); }

/* FAQ (osobna strona): po lewej przyklejony spis tematów, po prawej pytania w grupach.
   Numery krojem jak na stronie Dąb Bagienny; „Tak.” jako znaczek bez rozwijania; płynne rozwijanie
   tam, gdzie przeglądarka to umie (interpolate-size), w pozostałych zwykłe. */
.faqx { display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: clamp(2.5rem, 7vw, 7rem); align-items: start; }
.faqx__side { position: sticky; top: calc(var(--hdr) + 2rem); display: grid; gap: 1.5rem; justify-items: start; }
.faqx__lead { color: var(--ink-2); }
.faqx__nav ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); width: 100%; }
.faqx__nav { width: 100%; }
.faqx__nav li { border-bottom: 1px solid var(--line); }
.faqx__nav a { display: grid; grid-template-columns: 2.2rem 1fr auto; align-items: baseline; padding: .75rem 0; text-decoration: none; color: var(--ink-2); transition: color .25s, padding .3s var(--ease); }
.faqx__nav a:hover { color: var(--ink); padding-left: .35rem; }
.faqx__nav b { font: 400 .78rem var(--cond); letter-spacing: .12em; color: var(--soft); }
.faqx__nav span { font: 400 .78rem var(--cond); letter-spacing: .12em; color: var(--soft); }
.faqx__btn { margin-top: .5rem; }
.faqx__main { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
.faqx__grp { scroll-margin-top: calc(var(--hdr) + 1.5rem); }
.faqx__cat { display: flex; align-items: baseline; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--ink);
  font: 400 .82rem var(--cond); text-transform: uppercase; letter-spacing: .18em; color: var(--ink); }
.faqx__cat span { font: 300 clamp(2.4rem, 1.6rem + 2.4vw, 3.6rem)/.8 var(--cond); letter-spacing: .02em; color: rgba(22, 20, 18, .18); font-variant-numeric: tabular-nums; }
.faqx__q { border-bottom: 1px solid var(--line); }
.faqx__row { list-style: none; display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) auto; gap: 1rem; align-items: baseline; padding: 1.2rem 0; margin: 0; }
summary.faqx__row { cursor: pointer; }
summary.faqx__row::-webkit-details-marker { display: none; }
.faqx__n { font: 400 .8rem var(--cond); letter-spacing: .12em; color: var(--soft); font-variant-numeric: tabular-nums; }
.faqx__t { font: 300 clamp(1.15rem, 1rem + .45vw, 1.4rem)/1.35 var(--serif); transition: transform .35s var(--ease); }
summary.faqx__row:hover .faqx__t { transform: translateX(.3rem); }
.faqx__ico { position: relative; width: .9rem; height: .9rem; align-self: center; }
.faqx__ico::before, .faqx__ico::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--ink); transition: transform .4s var(--ease); }
.faqx__ico::after { transform: rotate(90deg); }
.faqx__q[open] .faqx__ico::after { transform: rotate(0deg); }
.faqx__yes { font: 400 .72rem var(--cond); text-transform: uppercase; letter-spacing: .16em; padding: .3rem .65rem; border: 1px solid var(--line); border-radius: 2rem; color: var(--ink-2); align-self: center; }
.faqx__a p { color: var(--ink-2); max-width: 38em; padding: 0 0 1.5rem 3.6rem; }
.faqx__q[open] .faqx__t { font-style: italic; }
@supports (interpolate-size: allow-keywords) {
  .faqx { interpolate-size: allow-keywords; }
  .faqx__q::details-content { height: 0; overflow: hidden; transition: height .45s var(--ease), content-visibility .45s allow-discrete; }
  .faqx__q[open]::details-content { height: auto; }
}
@media (max-width: 860px) {
  .faqx { grid-template-columns: 1fr; }
  .faqx__side { position: static; }
  .faqx__a p { padding-left: 0; }
  .faqx__row { grid-template-columns: 2rem minmax(0, 1fr) auto; }
}