/*
 * Drzewo Roku — warstwa wizualna.
 *
 * Założenie: strona jest rysunkiem. Podkowa Leśna powstała w 1925 roku jako miasto-ogród
 * zaprojektowane przez Antoniego Jawornickiego — ulice rozchodzą się promieniście od stacji
 * kolejki. Przekrój pnia starego drzewa to dokładnie ta sama figura: koncentryczne pierścienie
 * wokół jednego punktu. Cała identyfikacja stoi na tym zbiegu okoliczności, więc kolory
 * i typografia mają nie przeszkadzać.
 *
 * Kolorystyka odwzorowuje plakat konkursu wydany przez zarząd: biała kartka, czarny rysunek
 * drzewa pędzlem, akwarelowa zieleń *(decyzja usera, 2026-09-12)*.
 */

:root {
    --dr-ink:      var(--wp--preset--color--contrast, #14170F);
    --dr-ink-deep: var(--wp--preset--color--ink-deep, #000000);
    --dr-ink-soft: var(--wp--preset--color--ink-soft, #4A5347);
    --dr-base:     var(--wp--preset--color--base, #F2F6EF);
    --dr-paper:    var(--wp--preset--color--paper, #FFFFFF);
    --dr-line:     var(--wp--preset--color--line, #D8E2D2);
    --dr-forest:   var(--wp--preset--color--forest, #008037);
    --dr-moss:     var(--wp--preset--color--moss, #DCEDD3);
    --dr-cinnabar: var(--wp--preset--color--cinnabar, #A8321F);
    --dr-accent:   var(--wp--preset--color--accent, #008037);
    --dr-accent-d: #00612A;
    --dr-note:     var(--wp--preset--font-family--note, "Arial Narrow", sans-serif);
    --dr-display:  var(--wp--preset--font-family--display, "Century Gothic", sans-serif);
    --dr-wordmark: var(--wp--preset--font-family--wordmark, Georgia, serif);

    /* Kolumna treści i odstęp od krawędzi okna. Obie wartości były wpisane liczbą
       w kilkunastu miejscach, przez co pasy pełnoszerokościowe (pasek u góry, sekcja
       otwierająca, sekcje z tłem, stopka) i sekcje bez tła zaczynały tekst w dwóch różnych
       miejscach — różnica wynosiła dokładnie jeden odstęp (2026-09-01). */
    --dr-column: 74rem;
    --dr-gutter: var(--wp--preset--spacing--40, 1.75rem);
}

/* ---------------------------------------------------------------- podstawy */

body { background: var(--dr-base); }

::selection { background: var(--dr-ink); color: #fff; }

:where(a):focus-visible,
:where(button):focus-visible,
:where(input, textarea, select):focus-visible {
    outline: 2px solid var(--dr-accent);
    outline-offset: 2px;
}

/* Etykieta rysunkowa: eyebrow, podpis, dana liczbowa. Wszędzie ten sam krój. */
.dr-label {
    font-family: var(--dr-note);
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--dr-ink-soft);
    margin: 0 0 .75rem;
}

.dr-rule { border: 0; border-top: 1px solid var(--dr-line); margin: 0; }

/* ----------------------------------------------------------- pasek u góry */

.dr-header { background: var(--dr-paper); border-bottom: 1px solid var(--dr-line); }

.dr-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    max-width: var(--dr-column);
    margin: 0 auto;
    padding: .9rem var(--dr-gutter);
}

.dr-brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--dr-ink); }
/* Znak Związku w pasku u góry: plik wektorowy przekazany przez zarząd. Wysokość nie jest
   przypadkowa — poniżej ~2,5 rem litery w łuku zlewają się w jednolitą obwódkę. */
.dr-brand__znak { width: auto; height: 2.6rem; flex: none; }
.dr-brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.dr-brand__name { font-family: var(--dr-wordmark); font-weight: 400; font-size: 1.15rem; letter-spacing: .01em; }
.dr-brand__place {
    font-family: var(--dr-note);
    font-size: .6875rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--dr-ink-soft);
    margin-bottom: .15rem;
}

/* --------------------------------------------------------------------- hero */

.dr-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--dr-paper);
    color: var(--dr-ink);
    padding: clamp(3.5rem, 9vw, 7rem) var(--dr-gutter) clamp(3.5rem, 9vw, 6rem);
}

/*
 * Na telefonie rysunku nie ma wcale *(user, 2026-09-09)*.
 *
 * Nie ma go gdzie upchnąć: przy proporcji 1:3,2 każdy kadr mieszczący się na wąskim
 * ekranie jest albo wycinkiem bez początku i końca, albo blokiem na pół ekranu do
 * przewinięcia. Za tekstem nie może stać, bo akapit otwierający ma osiem wierszy
 * i zachodzi na koronę. Zamiast szukać kompromisu, którego nie ma — biała kartka
 * z samym tekstem. Rysunek wraca od tabletu w górę, gdzie jest dla niego miejsce.
 */
.dr-hero__plan { display: none; }

.dr-hero__inner { max-width: var(--dr-column); margin: 0 auto; }
.dr-hero .dr-label { color: var(--dr-forest); }

.dr-hero h1 {
    font-family: var(--dr-display);
    font-weight: 400;
    font-size: clamp(2.4rem, 7vw, 4.5rem);
    line-height: 1.1;
    letter-spacing: 0;
    margin: 0 0 1.1rem;
    max-width: 16ch;
    color: var(--dr-ink);
}
.dr-hero h1 em { font-style: normal; color: var(--dr-forest); }

.dr-hero p {
    max-width: 44ch;
    font-size: clamp(1.0625rem, 2vw, 1.25rem);
    color: var(--dr-ink);
    margin: 0 0 1.75rem;
}

@media (min-width: 48em) {
  .dr-hero {
    display: block;
    padding-bottom: clamp(3.5rem, 9vw, 6rem);
    min-height: min(84vh, 44rem);
  }

  /*
   * Rysunek bierze rozmiar z SZEROKOŚCI kolumny, nie z wysokości sekcji. Wpisany
   * w wysokość mieści się cały, ale przy proporcji 1:3,2 robi się z niego wąski pasek
   * przy krawędzi — próbowałem tak 2026-09-09 i user słusznie to odrzucił.
   */
  .dr-hero__plan {
    display: block;
    position: absolute;
    /* Rysunek jest treścią sekcji, nie znakiem wodnym pod nią. `.dr-hero` ma białe tło
       i własny kontekst nakładania (`isolation`), więc przy ujemnym indeksie rysunek
       wpadłby pod to tło i zniknął — stąd jawne `z-index: 0`. */
    right: max(var(--dr-gutter), (100% - var(--dr-column)) / 2);
    top: -4%;
    bottom: auto;
    left: auto;
    width: clamp(15rem, 22vw, 24rem);
    height: auto;
    overflow: visible;
    margin-right: 0;
    z-index: 0;
    /*
     * Rysunek celowo ZACHODZI na koniec wierszy nagłówka, a jego lewa krawędź gaśnie —
     * chodzi o to, żeby nie było widać styku dwóch prostokątów: okna z tekstem i obrazka.
     * Szerokość rośnie w lewo, prawa krawędź stoi przy kolumnie, więc zachodzi sama
     * korona. Skala jest dobrana tak, żeby przy typowej wysokości sekcji zmieścił się
     * także dół pnia — inaczej w miejscu paska terminów wypada najgrubsza, czarna część
     * pnia i data „Wyniki" ląduje na czerni.
     * Nie da się tego zrobić zwężaniem kolumny tekstu: akapit i nagłówek mają własne
     * `max-width` w znakach i tak czy owak kończą się na lewo od zarezerwowanego miejsca.
     */
    -webkit-mask-image: linear-gradient(to right,
      transparent 0%, rgba(0,0,0,.28) 10%, rgba(0,0,0,.72) 24%, #000 38%, #000 95%, transparent 100%);
    mask-image: linear-gradient(to right,
      transparent 0%, rgba(0,0,0,.28) 10%, rgba(0,0,0,.72) 24%, #000 38%, #000 95%, transparent 100%);
  }

  .dr-hero__plan img { display: block; width: 100%; height: auto; }

  .dr-hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 4rem;
    background: linear-gradient(to top, var(--dr-paper) 20%, rgba(255, 255, 255, 0));
    z-index: 0;
    pointer-events: none;
  }

  .dr-hero__inner {
    padding-right: clamp(11rem, 20vw, 18rem);
  }
}

@media (min-width: 68em) {
  .dr-hero { min-height: min(86vh, 47rem); }
}

@media (prefers-reduced-motion: no-preference) {
  .dr-hero__plan {
    animation: dr-wschod 1.1s cubic-bezier(.22, .7, .3, 1) .05s both;
  }
  @keyframes dr-wschod {
    from { transform: translateY(20px); }
    to   { transform: translateY(0); }
  }
}

.dr-cta { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }

.dr-btn,
.wp-block-button__link {
    display: inline-block;
    font-family: var(--dr-note);
    font-weight: 600;
    font-size: .9375rem;
    letter-spacing: .02em;
    text-decoration: none;
    padding: .95rem 1.6rem;
    border-radius: .15rem;
    border: 1px solid transparent;
    background: var(--dr-accent);
    color: #fff;
}
.dr-btn:hover,
.wp-block-button__link:hover { background: var(--dr-accent-d); color: #fff; }

/* Wariant obrysowany — na białym tle sekcji otwierającej. */
.wp-block-button.is-style-outline > .wp-block-button__link,
.dr-btn--ghost {
    background: transparent;
    border-color: var(--dr-ink);
    color: var(--dr-ink);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.dr-btn--ghost:hover { border-color: var(--dr-ink); background: var(--dr-ink); color: var(--dr-paper); }

.wp-block-buttons { margin-top: 1.75rem; }

/* Pasek stanu konkursu — jedyne miejsce, gdzie liczby są duże. */
/* Siatka, nie zawijany flex: na telefonie pozycje o różnej długości rozjeżdżały się
   w schodki i pasek wyglądał na zepsuty. Dwie kolumny na wąskim, jeden rząd na szerokim. */
.dr-status {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem 2.5rem;
    margin: clamp(2.5rem, 6vw, 4rem) 0 0;
    padding-top: 1.5rem;
    border-top: 1px solid var(--dr-line);
}
.dr-status > * + * { margin-block-start: 0; }
@media (min-width: 48em) { .dr-status { grid-template-columns: repeat(4, max-content); } }
.dr-status > .dr-status__item { padding: .5rem 0; }
.dr-status__k {
    font-family: var(--dr-note);
    font-size: .6875rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--dr-ink-soft);
    margin: 0;
}
.dr-status__v { margin: .3rem 0 0; font-size: 1.2rem; font-weight: 600; }
/* Wartość, której jeszcze nie ustalono, ma wyglądać na nieustaloną. */
.dr-status .is-tbd { font-weight: 400; font-style: italic; color: var(--dr-ink-soft); }

/* ------------------------------------------------------------------ sekcje */

/* Sekcja bez tła sama jest kolumną, więc `max-width` obejmuje u niej także odstęp od
   krawędzi (WordPress ustawia blokom `box-sizing: border-box`). Bez tej poprawki tekst
   zaczynał się o jeden odstęp dalej niż w pasku u góry, sekcji otwierającej, sekcjach
   z tłem i w stopce —
   na szerokim ekranie o 28 px, i było to widać na styku dwóch sąsiednich sekcji. */
.dr-section {
    max-width: calc(var(--dr-column) + 2 * var(--dr-gutter));
    margin: 0 auto;
    padding: clamp(3rem, 7vw, 5.5rem) var(--dr-gutter);
}
.dr-section--paper { background: var(--dr-paper); max-width: none; }
.dr-section--paper > .dr-section__inner { max-width: var(--dr-column); margin-inline: auto; }

/* Wariant „mech": pas w kolorze runa, żeby strona nie była jedną szarością od góry
   do dołu. Kolor jest z tej samej palety co reszta — to przygaszona zieleń, nie akcent. */
.dr-section--moss { background: var(--dr-moss); max-width: none; }
.dr-section--moss > .dr-section__inner { max-width: var(--dr-column); margin-inline: auto; }

/* Sekcje pełnoszerokościowe trzymają kolumnę opakowaniem `__inner` — a to opakowanie
   znika, gdy redakcja przeciąga bloki w edytorze między sekcjami: treść wychodzi wtedy
   z opakowania i rozlewa się na całą szerokość okna (zdarzyło się 2026-09-01 na stronie
   głównej). Kolumnę trzyma więc KAŻDE bezpośrednie dziecko, nie tylko `__inner`.
   Znak wodny jest wyłączony — on z założenia wystaje poza kolumnę. */
.dr-section--paper > :not(.dr-ringed__rings),
.dr-section--moss > :not(.dr-ringed__rings) { max-width: var(--dr-column); margin-inline: auto; }

/* Po przeniesieniu treści zostaje pusta sekcja: żadnego tekstu, a pion wysokości
   `padding` sekcji. W edytorze jej nie widać, na stronie wygląda jak zepsuty odstęp. */
.dr-section:empty { display: none; }

/* Pas na całą szerokość dla sekcji, która NIE ma wewnętrznego opakowania. Tło rozlewa
   się cieniem poza kolumnę tekstu, więc szerokość treści zostaje bez zmian — dzięki temu
   redakcja może dodać klasę do dowolnej sekcji w edytorze i nic się nie rozjedzie. */
.dr-section--band {
    background: var(--dr-paper);
    box-shadow: 0 0 0 100vmax var(--dr-paper);
    clip-path: inset(0 -100vmax);
}
.dr-section--band-moss {
    background: var(--dr-moss);
    box-shadow: 0 0 0 100vmax var(--dr-moss);
    clip-path: inset(0 -100vmax);
}

/* Nadtytuł sekcji to jedyna etykieta, która powtarza się na całej stronie — dlatego
   ona niesie kolor. Na ciemnym tle sekcji otwierającej zostaje błękit, bo zieleń tam ginie. */
.dr-section > .dr-label,
.dr-section__inner > .dr-label { color: var(--dr-forest); }

.dr-section h2 {
    font-family: var(--dr-display);
    font-size: clamp(1.75rem, 4.2vw, 2.75rem);
    font-weight: 400;
    line-height: 1.16;
    letter-spacing: 0;
    margin: 0 0 1rem;
    max-width: 20ch;
}
.dr-lead { max-width: 58ch; font-size: 1.125rem; }

/* WordPress dokłada odstęp „flow" (margin-block-start na każdym kolejnym dziecku).
   W siatce to nie jest odstęp, tylko przesunięcie: druga i trzecia kolumna zjeżdżały
   o kilkanaście pikseli w dół względem pierwszej. Odstępy w siatkach robi `gap`. */
.dr-steps > * + *,
.dr-notes > * + *,
.dr-figures > * + *,
.dr-kandydaci > * + *,
.dr-facts > * + * { margin-block-start: 0; }

/* ------------------------------------------------------ jak to działa (1-2-3) */

/* Numeracja niesie tu prawdziwą informację — to kolejność w czasie, nie ozdoba. */
.dr-steps {
    list-style: none;
    margin: 2.5rem 0 0;
    padding: 0;
    display: grid;
    gap: 1px;
    background: var(--dr-line);
    border: 1px solid var(--dr-line);
}
.dr-steps > .dr-step {
    background: var(--dr-base);
    padding: 1.75rem 1.5rem;
    border-top: 3px solid var(--dr-forest);
}
.dr-section--paper .dr-steps > .dr-step { background: var(--dr-paper); }
.dr-steps__no {
    display: block;
    font-family: var(--dr-note);
    font-size: .75rem;
    letter-spacing: .16em;
    color: var(--dr-forest);
    margin-bottom: .9rem;
}
.dr-steps h3 { font-size: 1.2rem; font-weight: 600; margin: 0 0 .5rem; }
.dr-steps p { margin: 0; font-size: 1rem; }

@media (min-width: 48em) { .dr-steps { grid-template-columns: repeat(3, 1fr); } }

/* ------------------------------------------------------- notatki o drzewach */

/* Treść edukacyjna udaje adnotację na rysunku: kropka, linia odniesienia, podpis.
   Dzięki temu można ją czytać wyrywkowo — nikt nie przeczyta wykładu o ekosystemie. */
.dr-notes { display: grid; gap: 1.75rem; margin: 2.5rem 0 0; padding: 0; list-style: none; }
@media (min-width: 48em) { .dr-notes { grid-template-columns: repeat(2, 1fr); gap: 2rem 3rem; } }

.dr-note { position: relative; padding-left: 2.25rem; }
.dr-note::before {
    content: "";
    position: absolute;
    left: 0; top: .45rem;
    width: 9px; height: 9px;
    border: 1px solid var(--dr-forest);
    border-radius: 50%;
    background: var(--dr-forest);
}
.dr-section--paper .dr-note::before,
.dr-section--moss .dr-note::before { border-color: var(--dr-forest); }
.dr-note::after {
    content: "";
    position: absolute;
    left: 4px; top: 1.25rem; bottom: .25rem;
    border-left: 1px solid rgba(44, 94, 58, .28);
}
.dr-note h3 { font-size: 1.1rem; font-weight: 600; margin: 0 0 .4rem; color: var(--dr-ink-deep); }
.dr-note p { margin: 0; font-size: 1rem; }
.dr-note__src {
    display: block;
    margin-top: .5rem;
    font-family: var(--dr-note);
    font-size: .6875rem;
    letter-spacing: .08em;
    color: var(--dr-ink-soft);
}

/* ------------------------------------------------- notatki jako jedna ramka */

/*
 * Dziesięć notatek „Dlaczego teraz" rozciągało stronę na telefonie na trzy tysiące
 * pikseli *(user, 2026-09-12)*. Zamiast listy — jedna ramka, w której notatki
 * przesuwa się palcem albo strzałkami.
 *
 * Trzy rzeczy, dla których to jest `scroll-snap`, a nie biblioteka:
 *
 * 1. Przesuwanie palcem jest prawdziwym przewijaniem przeglądarki — z rozpędem
 *    i odbiciem na końcach. Żadna biblioteka tego nie udaje dobrze.
 * 2. Wszystkie notatki zostają w kodzie strony, więc zamrożenie konkursu do
 *    statycznego HTML-a nadal działa, a wyszukiwarki widzą cały tekst.
 * 3. Bez JavaScriptu zostaje pas, który da się przewinąć. Nic nie znika.
 *
 * Włącza się to dołożeniem klasy `dr-carousel` do grupy, która i tak już jest
 * w treści strony. Skasowanie klasy przywraca listę — dlatego ani jedna notatka
 * nie musiała zostać przepisana z edytora do kodu.
 */
.dr-carousel {
    display: flex;
    gap: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    /* Pasek przewijania pod tekstem wyglądałby na usterkę — kierunek pokazują słoje. */
    scrollbar-width: none;
    border-top: 1px solid var(--dr-line);
    border-bottom: 1px solid var(--dr-line);
    padding-block: clamp(1.75rem, 4vw, 2.5rem);
}
.dr-carousel::-webkit-scrollbar { display: none; }

/*
 * Wysokości nie ustawiamy liczbą. Notatki mają od 33 do 66 słów, więc każda stała
 * wartość byłaby albo za mała dla najdłuższej, albo dziurawa przy najkrótszej —
 * a przy wysokości „do treści" strona podskakuje przy każdym przesunięciu.
 * `display: flex` załatwia to sam: pas jest wysoki jak najwyższa notatka i poprawia
 * się sam, kiedy zarząd zmieni tekst.
 */
.dr-carousel > .dr-note {
    flex: 0 0 86%;
    min-width: 0;
    padding-left: 0;
    padding-right: 1.5rem;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
}

/* Zielona kropka z kreską była znacznikiem pozycji na liście. Listy już tu nie ma. */
.dr-carousel > .dr-note::before,
.dr-carousel > .dr-note::after { content: none; }

/* Ostatnia notatka musi mieć dokąd dojechać, żeby stanąć przy lewej krawędzi. */
.dr-carousel::after { content: ""; flex: 0 0 14%; }

/* Nagłówek notatki jest tu treścią ramki, a nie pozycją listy — stąd krój tytułowy. */
.dr-carousel .dr-note h3 {
    font-family: var(--dr-display);
    font-weight: 400;
    font-size: clamp(1.5rem, 4.5vw, 2rem);
    line-height: 1.15;
    color: var(--dr-ink);
    margin: 0 0 .9rem;
}
.dr-carousel .dr-note p { max-width: 58ch; }
/* Źródło przy dolnej krawędzi, nie zaraz pod akapitem: przy krótszych notatkach
   powietrze zbiera się w jednym miejscu, zamiast rozjeżdżać wiersz ze źródłem. */
.dr-carousel .dr-note__src { margin-top: auto; padding-top: 1.25rem; }

@media (min-width: 48em) {
    /* Na szerokim ekranie sąsiadka nie musi wystawać — od przesuwania są strzałki. */
    .dr-carousel > .dr-note { flex-basis: 100%; padding-right: 0; }
    .dr-carousel::after { flex-basis: 0; }

    /*
     * Dwie kolumny: tytuł po lewej, treść po prawej.
     *
     * W jednej kolumnie tekst trzymał się lewej krawędzi i połowa szerokości stała
     * pusta — akapit ma sensowną miarę przy jakichś 58 znakach, a kolumna strony
     * mierzy 74 rem. Rozbicie na tytuł i treść zajmuje tę szerokość czymś, zamiast
     * ją rozciągać, i daje notatce układ rozkładówki zamiast lewego marginesu.
     */
    .dr-carousel .dr-note {
        display: grid;
        grid-template-columns: minmax(0, 21rem) minmax(0, 38rem);
        gap: 0 3.5rem;
        align-content: start;
    }
    .dr-carousel .dr-note h3 { grid-column: 1; margin: 0; }
    .dr-carousel .dr-note > p { grid-column: 2; max-width: none; }
    .dr-carousel .dr-note__src { margin-top: 1.25rem; padding-top: 0; }
}

/* ---- sterowanie (dokłada je skrypt; bez JS-u nie ma go wcale) ---- */

.dr-carousel__nav { display: flex; align-items: center; gap: 1rem; margin-top: 1.25rem; }

/*
 * Wskaźnikiem są słoje, nie kropki ani „3 z 10".
 *
 * Te notatki nie są kolejnością: zaczynamy od losowej, żadna nie jest pierwsza ani
 * ostatnia. Licznik i pasek postępu mówiłyby o nich nieprawdę. Koło nie ma początku —
 * a przekrój pnia jest w dodatku tym samym rysunkiem, który jest znakiem wodnym tej
 * sekcji, i jedynym przyrządem, który liczy lata. Wszystkie te notatki są o tym,
 * że skutek przychodzi po latach.
 */
.dr-carousel__rings { width: 5rem; height: 5rem; flex: none; display: block; }
@media (min-width: 48em) { .dr-carousel__rings { width: 6.5rem; height: 6.5rem; } }
/*
 * Kreska cienka, bo to ona niesie kształt. Przy grubej loby zlewały się w jedną plamę
 * i z przekroju robił się spłaszczony owal *(user, 2026-09-13)*. Zamiast grubości
 * czytelność daje kolor: słoje nieaktywne są zielone przygaszone, a nie szare —
 * przy kresce poniżej piksela szarość na bieli po prostu znika.
 */
.dr-carousel__rings path {
    fill: none;
    stroke: var(--dr-forest);
    stroke-opacity: .38;
    stroke-width: 1;
}
.dr-carousel__rings path.is-current { stroke-opacity: 1; stroke-width: 2.2; }

.dr-carousel__arrows { margin-left: auto; display: flex; gap: .5rem; }
.dr-carousel__btn {
    width: 2.75rem; height: 2.75rem;
    display: grid;
    place-items: center;
    padding: 0;
    background: transparent;
    border: 1px solid var(--dr-line);
    border-radius: 50%;
    color: var(--dr-ink);
    cursor: pointer;
}
.dr-carousel__btn svg { width: 1.25rem; height: 1.25rem; }
.dr-carousel__btn:hover:not(:disabled) { border-color: var(--dr-forest); color: var(--dr-forest); }
.dr-carousel__btn:disabled { opacity: .3; cursor: default; }

/* Widać tylko czytnikowi ekranu: słoje są rysunkiem, więc pozycję trzeba podać słowem. */
.dr-sr {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/*
 * Słoje jako znak wodny sekcji — ten sam rysunek co plan miasta, w innej skali.
 *
 * Trzy rzeczy trzeba tu trzymać razem, bo każda z osobna potrafiła wygasić rysunek
 * do zera *(sprawdzone 2026-08-27 przy 320, 390, 768, 1280 i 1600 px)*:
 *
 * 1. `height: auto` i `aspect-ratio`. Rysunek wchodzi na stronę jako <img> z atrybutem
 *    `height="400"`, a szerokość dostaje z CSS-a. Bez tych dwóch reguł koło rozciągało się
 *    do 736x400 px, czyli w elipsę — a wtedy nie jest to już przekrój pnia, tylko rozmazana
 *    spirala.
 * 2. Rysunek ma się mieścić w sekcji. Przy `overflow: hidden` wszystko, co wystaje poza nią,
 *    znika bez śladu; przy `right: -14rem` znikał środek koła i na telefonie zostawał
 *    czterdziestoprocentowy skrawek zewnętrznych łuków — najrzadszych i najmniej rozpoznawalnych.
 * 3. Koloru NIE ustawia CSS. To <img>, więc `color` nie wchodzi do wnętrza pliku i stara reguła
 *    `color: var(--dr-line)` nigdy nic nie robiła. Barwa i grubość kreski są zapisane
 *    w `assets/img/rings.svg`.
 */
.dr-ringed { position: relative; isolation: isolate; overflow: hidden; }
.dr-ringed__rings {
    position: absolute;
    /* Przy górze sekcji, nie w jej połowie: obok akapitu wprowadzającego jest wolna
       kolumna, a w połowie sekcji rysunek wchodzi wprost pod tekst notatek. Znak wodny
       ma być widoczny, a widoczny znak wodny pod akapitem po prostu przeszkadza czytać. */
    right: -3rem; top: 1.5rem;
    width: min(30rem, 46vw);
    height: auto;
    aspect-ratio: 1;
    opacity: .85;
    z-index: -1;
    pointer-events: none;
}

/*
 * Bez tej poprawki rysunek jest przyklejony do prawej krawędzi OKNA (`right: -3rem`
 * z reguły bazowej), więc na szerokim ekranie odjeżdża od kolumny tekstu i wisi sam
 * przy brzegu. Ustawiamy go tak jak drzewo w sekcji otwierającej: przy prawej
 * krawędzi KOLUMNY.
 */
@media (min-width: 48em) {
    .dr-ringed__rings {
        right: max(var(--dr-gutter), (100% - var(--dr-column)) / 2);
    }
}

/*
 * Tablet. Tekst wprowadzenia zajmuje tu całą szerokość, więc rysunek nie ma dokąd uciec —
 * mniejszy i wyraźnie przygaszony, żeby nie kładł się kreską na końcach wierszy.
 */
@media (min-width: 48em) and (max-width: 63.99em) {
    .dr-ringed__rings {
        width: min(24rem, 42vw);
        opacity: .45;
    }
}

/*
 * Telefon. Obok tekstu nie ma miejsca na rysunek, więc rysunek idzie pod tekst: wyśrodkowany,
 * cały widoczny, przygaszony na tyle, żeby nie walczyć z czytelnością akapitu. Wysoko w sekcji,
 * a nie w jej połowie — sekcja ma na telefonie ponad trzy tysiące pikseli wysokości i znak wodny
 * postawiony w środku trafia w przypadkowe miejsce przewijania.
 */
@media (max-width: 47.99em) {
    .dr-ringed__rings {
        right: 50%; top: 1rem;
        width: min(20rem, 68vw);
        transform: translateX(50%);
        opacity: .5;
    }
}

/* ------------------------------------------------------------------- zdjęcia */

/* Zdjęcia przychodzą z różnych źródeł i mają różną jakość. Wspólną tonację
   (ściągnięte nasycenie) wypalamy w pliku przy budowie, nie filtrem CSS —
   `filter` na <img> potrafi się nie namalować i zostają puste prostokąty. */
.dr-figure { margin: 0; }
.dr-figure img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: var(--dr-moss);
    border: 1px solid var(--dr-line);
}
.dr-figure figcaption,
.dr-figure .wp-element-caption {
    font-family: var(--dr-note);
    font-size: .6875rem;
    line-height: 1.5;
    letter-spacing: .06em;
    color: var(--dr-ink-soft);
    margin-top: .6rem;
}
.dr-figure figcaption a { color: inherit; }

.dr-figures { display: grid; gap: 1.5rem; margin-top: 2.5rem; }
@media (min-width: 40em) { .dr-figures { grid-template-columns: repeat(3, 1fr); } }

/* -------------------------------------------------------------- treść stron */

.dr-page { max-width: 52rem; margin: 0 auto; padding: clamp(2.5rem, 6vw, 4.5rem) var(--dr-gutter); }
.dr-page__head { border-bottom: 1px solid var(--dr-line); padding-bottom: 1.5rem; margin-bottom: 2.5rem; }
.dr-page__head h1 {
    font-family: var(--dr-display);
    font-size: clamp(2rem, 5vw, 3.25rem);
    font-weight: 400;
    line-height: 1.12;
    letter-spacing: 0;
    margin: 0;
}
.dr-prose { max-width: 44rem; }
.dr-prose > h2 { margin-top: 2.5rem; }
.dr-prose > h3 { margin-top: 2rem; }

/* Materiał zastępczy musi być widoczny jako zastępczy — także dla klienta. */
.dr-placeholder {
    border: 1px dashed var(--dr-cinnabar);
    background: #FBF0EE;
    padding: 1rem 1.25rem;
    margin: 0 0 2rem;
}
.dr-placeholder p { margin: .35rem 0 0; font-size: .9375rem; }
.dr-placeholder .dr-label { color: var(--dr-cinnabar); margin-bottom: 0; }

/*
 * Przypis pod sekcją.
 *
 * Gwiazdka przy nagłówku i gwiazdka przy przypisie są odsyłaczami w obie strony — na
 * telefonie przypis jest kilka ekranów niżej i bez tego nikt by go nie znalazł. Sam
 * przypis oddziela kreska i mniejszy stopień, żeby czytało się jak notka, a nie jak
 * kolejny akapit treści.
 */
.dr-fn-ref {
    font-size: .55em;
    vertical-align: super;
    line-height: 0;
    margin-left: .1em;
    text-decoration: none;
    color: var(--dr-accent);
}
.dr-fn-ref:hover { text-decoration: underline; }

.dr-footnote {
    max-width: 44rem;
    margin: 2.5rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--dr-line);
    font-family: var(--dr-note);
    font-size: .875rem;
    line-height: 1.55;
    color: var(--dr-ink-soft);
    /* Gwiazdka wisi na marginesie, tekst przypisu trzyma równą lewą krawędź. */
    padding-left: 1.1rem;
    text-indent: -1.1rem;
}
.dr-footnote .dr-fn-back {
    text-decoration: none;
    color: var(--dr-accent);
    padding-right: .35rem;
}
.dr-footnote .dr-fn-back:hover { text-decoration: underline; }

/* ------------------------------------------------------- zgoda na statystyki */

/*
 * Okno wymagające decyzji, nie pasek u dołu *(user, 2026-09-14)*.
 *
 * Pasek dało się przewinąć i tak robili wszyscy — pierwszego poranka na trzydzieści pięć
 * osób kliknęła jedna. Okno zasłania stronę do momentu wyboru.
 *
 * Oba przyciski tej samej wielkości i obok siebie: odmowa ma być tak samo łatwa jak zgoda.
 * Po odmowie strona działa normalnie — to jest różnica między wymaganym wyborem
 * a niedozwolonym „murem na ciasteczka".
 */
.dr-zgoda {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: grid;
    place-items: center;
    padding: var(--dr-gutter);
    background: rgba(20, 23, 15, .55);
}
.dr-zgoda[hidden] { display: none; }

/* Strona pod spodem nie przewija się, dopóki wybór nie padnie — inaczej okno wygląda
   na coś, co da się „przeczekać", a właśnie tego chcieliśmy uniknąć. */
body.dr-zgoda-otwarta { overflow: hidden; }

.dr-zgoda__okno {
    width: 100%;
    max-width: 32rem;
    background: var(--dr-paper);
    border: 1px solid var(--dr-line);
    padding: clamp(1.5rem, 5vw, 2.25rem);
    box-shadow: 0 24px 60px rgba(20, 23, 15, .28);
}

.dr-zgoda p { margin: 0; font-size: 1rem; line-height: 1.6; }

.dr-zgoda__wybor { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1.5rem; }
.dr-zgoda__wybor .dr-btn {
    flex: 1 1 12rem;
    text-align: center;
    cursor: pointer;
    padding-inline: 1rem;
}

/* Przycisk w stopce ma wyglądać jak pozostałe pozycje listy, a nie jak przycisk. */
.dr-zgoda-otworz {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: #fff;
    text-decoration: underline;
    cursor: pointer;
}

/* Widać tylko czytnikowi ekranu: słoje są rysunkiem, więc pozycję trzeba podać słowem. */
.dr-sr {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ------------------------------------------------------------------ stopka */

.dr-footer {
    background: var(--dr-ink);
    color: #C6D6E2;
    padding: clamp(2.5rem, 6vw, 4rem) var(--dr-gutter);
    font-size: .9375rem;
}
.dr-footer__inner { max-width: var(--dr-column); margin: 0 auto; display: grid; gap: 2rem; }
@media (min-width: 48em) { .dr-footer__inner { grid-template-columns: 1.5fr 1fr 1fr; } }
.dr-footer a { color: #fff; }
.dr-footer h2 {
    font-family: var(--dr-note);
    font-size: .6875rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #8298AE;
    margin: 0 0 .9rem;
    font-weight: 500;
}
.dr-footer ul { list-style: none; margin: 0; padding: 0; }
.dr-footer li { margin-bottom: .5rem; }

/* ---------------------------------------------------------------- nawigacja */

.dr-nav ul { display: flex; flex-wrap: wrap; gap: 1.4rem; list-style: none; margin: 0; padding: 0; }
.dr-nav a {
    font-family: var(--dr-note);
    font-size: .8125rem;
    letter-spacing: .04em;
    text-decoration: none;
    color: var(--dr-ink);
    padding-block: .4rem;
    border-bottom: 2px solid transparent;
}
.dr-nav a:hover { border-bottom-color: var(--dr-line); }
.dr-nav [aria-current="page"] { border-bottom-color: var(--dr-accent); }

/* ------------------------------------------------------- moment wejścia strony */

.dr-plan__rings { --dr-plan-op: .38; }
.dr-plan__shoe  { --dr-plan-op: .85; }
.dr-plan__rail  { --dr-plan-op: .55; }
.dr-plan__rays  { --dr-plan-op: .5; }
.dr-plan__pins  { --dr-plan-op: .65; }
.dr-plan__hub   { --dr-plan-op: 1; }

@media (prefers-reduced-motion: no-preference) {
    .dr-plan__shoe {
        stroke-dasharray: 2820;
        stroke-dashoffset: 2820;
        animation: dr-draw 1.8s cubic-bezier(.22,.61,.36,1) .15s forwards;
    }
    .dr-plan__rays, .dr-plan__rings, .dr-plan__pins, .dr-plan__rail, .dr-plan__hub {
        opacity: 0;
        animation: dr-fade .9s ease-out forwards;
    }
    .dr-plan__rail  { animation-delay: .5s; }
    .dr-plan__rays  { animation-delay: .8s; }
    .dr-plan__rings { animation-delay: 1.1s; }
    .dr-plan__pins  { animation-delay: 1.4s; }
    .dr-plan__hub   { animation-delay: 1.6s; }
}

@keyframes dr-draw { to { stroke-dashoffset: 0; } }
@keyframes dr-fade { to { opacity: var(--dr-plan-op, .5); } }


/* ------------------------------------------------------- regulamin: numeracja */

/* Numery ustępów i punktów są w regulaminie sposobem odwoływania się do przepisu
   („§ 4 ust. 5 pkt 2"), nie ozdobą. Poziom pierwszy to ustępy „1.", zagnieżdżony —
   punkty „1)", zgodnie z polską konwencją redagowania aktów. */
.dr-prose ol {
    list-style: none;
    counter-reset: dr-ust;
    padding-left: 0;
    margin-left: 0;
}

/*
 * Lista rozcięta na kawałki musi liczyć dalej, a nie od nowa.
 *
 * W regulaminie zdarza się, że między punktami jednej listy stoi coś, co listą nie jest —
 * nazwa miesiąca w harmonogramie (§ 11) albo etykieta „DANE ZGŁASZAJĄCEGO" (§ 4). Każdy
 * kawałek jest wtedy osobnym `<ol>`, więc licznik startuje od 1 i na stronie widać dwa
 * punkty o tym samym numerze *(zgłoszone przez usera 2026-09-10)*.
 *
 * Pole „Wartość początkowa" w edytorze listy wpisuje do HTML atrybut `start`, ale licznik
 * CSS sam z siebie go nie widzi — trzeba go przepisać regułą. Stąd te wiersze: redakcja
 * ustawia numer w edytorze i numeracja idzie dalej. Zakres do 20 wystarcza na najdłuższy
 * paragraf regulaminu i nie ma sensu go rozdmuchiwać.
 */
.dr-prose ol[start="2"] { counter-reset: dr-ust 1; }
.dr-prose ol[start="3"] { counter-reset: dr-ust 2; }
.dr-prose ol[start="4"] { counter-reset: dr-ust 3; }
.dr-prose ol[start="5"] { counter-reset: dr-ust 4; }
.dr-prose ol[start="6"] { counter-reset: dr-ust 5; }
.dr-prose ol[start="7"] { counter-reset: dr-ust 6; }
.dr-prose ol[start="8"] { counter-reset: dr-ust 7; }
.dr-prose ol[start="9"] { counter-reset: dr-ust 8; }
.dr-prose ol[start="10"] { counter-reset: dr-ust 9; }
.dr-prose ol[start="11"] { counter-reset: dr-ust 10; }
.dr-prose ol[start="12"] { counter-reset: dr-ust 11; }
.dr-prose ol[start="13"] { counter-reset: dr-ust 12; }
.dr-prose ol[start="14"] { counter-reset: dr-ust 13; }
.dr-prose ol[start="15"] { counter-reset: dr-ust 14; }
.dr-prose ol[start="16"] { counter-reset: dr-ust 15; }
.dr-prose ol[start="17"] { counter-reset: dr-ust 16; }
.dr-prose ol[start="18"] { counter-reset: dr-ust 17; }
.dr-prose ol[start="19"] { counter-reset: dr-ust 18; }
.dr-prose ol[start="20"] { counter-reset: dr-ust 19; }
.dr-prose ol > li {
    counter-increment: dr-ust;
    position: relative;
    padding-left: 2.5rem;
    margin-bottom: .6rem;
}
.dr-prose ol > li::before {
    content: counter(dr-ust) ".";
    position: absolute;
    left: 0;
    top: 0;
    width: 2rem;
    font-variant-numeric: tabular-nums;
    color: var(--dr-ink-soft);
}
.dr-prose ol ol {
    counter-reset: dr-pkt;
    margin-top: .6rem;
    margin-bottom: 0;
}
.dr-prose ol ol > li {
    counter-increment: dr-pkt;
    padding-left: 2.5rem;
    margin-bottom: .35rem;
}
.dr-prose ol ol > li::before { content: counter(dr-pkt) ")"; }

.dr-prose h2 { margin-top: 2.75rem; }


/* -------------------------------------------------- kandydaci: siatka i karty */

/* Siatka, nie numerowany ranking. Numeracja sugerowałaby kolejność, a kolejność
   ustala dopiero głosowanie — i to wtedy, gdy komisja zdecyduje ją pokazać. */
.dr-kandydaci {
    display: grid;
    gap: 1.75rem;
    margin: 2.5rem 0 0;
}
/*
 * `minmax(0, 1fr)`, a nie `1fr` — i to nie jest kosmetyka.
 *
 * Samo `1fr` znaczy `minmax(auto, 1fr)`: kolumna nigdy nie zwęzi się poniżej najszerszego
 * nierozrywalnego kawałka swojej treści. Zgłoszenie z opisem bez ani jednej spacji (tester
 * wkleił 205 znaków ciągiem) rozpycha przez to swoją kolumnę na kilka tysięcy pikseli,
 * dwie pozostałe ściska do paska szerokości słowa, a cała strona dostaje poziomy pasek
 * przewijania. Zera w `minmax` mówią: kolumna ma prawo być węższa niż jej treść.
 * Reszta należy do `overflow-wrap` niżej. *(sprawdzone 2026-08-25 na zgłoszeniu 127)*
 */
@media (min-width: 40em) { .dr-kandydaci { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .dr-kandydaci { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.25rem; } }

/*
 * Dwie grupy kandydatur: finaliści i reszta *(decyzja usera 2026-08-27)*.
 *
 * Pierwsza wersja rozdzielała je samą poziomą kreską i to było za mało — hairline między
 * dwoma rzędami kart czyta się jak obramowanie ostatniego wiersza, a nie jak granica.
 * Podział niesie teraz nagłówek i zdanie mówiące, na co wolno głosować; kreska tylko
 * mu towarzyszy.
 */
.dr-grupa + .dr-grupa {
    margin-top: 4rem;
    padding-top: 3rem;
    border-top: 1px solid var(--dr-line);
}
.dr-grupa__tytul {
    font-family: var(--dr-display);
    font-size: 1.6rem;
    line-height: 1.2;
    margin: 0;
}
/* Zielony znacznik przy finalistach — ten sam kolor, co plakietka „Finalista" na karcie.
   Powtórzenie jest celowe: oko ma połączyć nagłówek z odznakami pod nim. */
.dr-grupa--finalisci .dr-grupa__tytul {
    border-left: 4px solid var(--dr-forest);
    padding-left: .85rem;
}
.dr-grupa__opis {
    margin: .6rem 0 0;
    max-width: 46rem;
    color: var(--dr-ink-soft);
}
/* Akapit ma krój cienki (300), a `<strong>` domyślnie daje „bolder" — czyli tylko 400,
   na oko bez różnicy. Zasada głosowania ma być widoczna. */
.dr-grupa__opis strong { font-weight: 700; color: var(--dr-ink); }
/* Siatka niesie własny `margin-top: 2.5rem` — po zdaniu wyjaśniającym to za dużo,
   nagłówek przestaje wtedy wyglądać na przypisany do kart pod sobą. */
.dr-grupa .dr-kandydaci { margin-top: 1.75rem; }

.dr-card { background: var(--dr-paper); border: 1px solid var(--dr-line); }
.dr-card__link { display: block; color: inherit; text-decoration: none; }
.dr-card__link:hover .dr-card__title { text-decoration: underline; }
/* Kafelek ma stałą ramkę, żeby wiersze siatki były równe — ale zdjęcie mieści się w niej
   W CAŁOŚCI (`contain`), a nie wypełnia jej kosztem obciętych brzegów *(user, 2026-09-21)*.
   Przycięcie po cichu zmienia to, co widać na fotografii, a kadr należy do zgłaszającego:
   drzewo sfotografowane w pionie traciło koronę. Puste pasy po bokach kryje tło kartki. */
.dr-card__photo { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--dr-paper); }
.dr-card__photo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.dr-card__title { font-size: 1.2rem; font-weight: 600; margin: 1.1rem 1.25rem .35rem; }
.dr-card__facts {
    font-family: var(--dr-note);
    font-size: .75rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--dr-ink-soft);
    margin: 0 1.25rem .6rem;
}
.dr-card__excerpt { font-size: .9375rem; margin: 0 1.25rem 1.35rem; }

/*
 * Wszystko, co wpisał mieszkaniec, łamiemy w środku wyrazu, gdy inaczej się nie da.
 *
 * Nazwa drzewa, gatunek, ulica i opis idą na stronę tak, jak je ktoś wpisał — a wpisać
 * można adres bez spacji, sklejony ciąg albo (jak w teście) nierozrywalny bełkot.
 * Bez tego taki wyraz wychodzi poza kartę i rozjeżdża układ; `anywhere`, a nie
 * `break-word`, bo tylko `anywhere` zmniejsza szerokość minimalną komórki siatki.
 */
.dr-card__title,
.dr-card__facts,
.dr-card__excerpt,
.dr-fact dd,
.dr-drzewo__opis { overflow-wrap: anywhere; }

.dr-badge {
    position: absolute;
    left: 0; top: 1rem;
    font-family: var(--dr-note);
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: .35rem .8rem;
    background: var(--dr-ink);
    color: #fff;
}
.dr-badge--finalista { background: var(--dr-forest); }

.dr-empty { margin-top: 2rem; color: var(--dr-ink-soft); }

/* ------------------------------------------------------ karta jednego drzewa */

.dr-page--drzewo { max-width: 62rem; }

/* Dane oddzielone od opowieści: da się sprawdzić gatunek bez czytania całości. */
.dr-facts {
    display: grid;
    gap: 0;
    margin: 0 0 2.5rem;
    border-top: 1px solid var(--dr-line);
}
.dr-fact {
    display: grid;
    grid-template-columns: 10rem 1fr;
    gap: 1rem;
    padding: .8rem 0;
    border-bottom: 1px solid var(--dr-line);
}
.dr-fact dt {
    font-family: var(--dr-note);
    font-size: .75rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--dr-ink-soft);
    margin: 0;
    padding-top: .15rem;
}
.dr-fact dd { margin: 0; }

/* Nazwa łacińska gatunku kursywą, skrót autora prosto (zapis botaniczny). Podkova nie ma
   kursywy — przeglądarka pochyliłaby ją sztucznie, więc łacina idzie krojem szeryfowym
   z prawdziwą kursywą, dostępnym w każdym systemie. */
.dr-lacina { font-family: Georgia, "Times New Roman", "Noto Serif", serif; font-style: italic; font-size: .9em; }
@media (max-width: 34em) {
    .dr-fact { grid-template-columns: 1fr; gap: .2rem; }
}

.dr-drzewo__opis { max-width: 40rem; }
.dr-drzewo__opis p { margin-bottom: 1.1rem; }

/* Komentarz Komisji pod opisem — głos organizatora, odróżniony od opowieści zgłaszającego. */
.dr-drzewo__komentarz {
    max-width: 40rem;
    margin: 2rem 0 0;
    padding: 1rem 1.25rem;
    background: var(--dr-moss);
    border-left: .4rem solid var(--dr-forest);
    border-radius: .25rem;
    overflow-wrap: anywhere;
}
.dr-drzewo__komentarz-tytul {
    margin: 0 0 .5rem;
    font-family: inherit;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--dr-forest);
}
.dr-drzewo__komentarz p { margin: 0 0 .75rem; }
.dr-drzewo__komentarz p:last-child { margin-bottom: 0; }

.dr-drzewo__zdjecia { display: grid; gap: 1.5rem; margin-top: 2.5rem; }
@media (min-width: 48em) { .dr-drzewo__zdjecia { grid-template-columns: repeat(2, 1fr); } }
/* Karta drzewa pokazuje zdjęcia w ich własnych proporcjach — bez ramki 4:3, którą niesie
   `.dr-figure` dla zdjęć ilustracyjnych na stronie głównej. Tu ogląda się drzewo, nie ozdobnik. */
.dr-drzewo__zdjecia img {
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    /* Gdyby proporcje kiedykolwiek się rozjechały, zdjęcie ma się zmieścić w ramce,
       a nie zostać przycięte ani rozciągnięte. */
    object-fit: contain;
    display: block;
    border: 1px solid var(--dr-line);
}

/* Film dołączony przez zgłaszającego — odsyłacz, nie osadzony odtwarzacz (patrz PublicView::video).
   Wygląda jak przypis pod galerią, bo tym właśnie jest: materiałem dodatkowym, nie treścią karty. */
.dr-drzewo__film {
    margin: 1.75rem 0 0;
    padding: .85rem 1rem;
    border-left: 3px solid var(--dr-accent);
    background: #EEF5FB;
    font-size: .9375rem;
}
.dr-drzewo__film-uwaga { color: var(--dr-ink-soft); }

/* Uwaga redakcji nad treścią strony (np. ogłoszenie zmiany regulaminu) — akapit z klasą
   `dr-uwaga` nadaną w edytorze, ten sam wygląd co komentarz Komisji na karcie drzewa. */
.dr-uwaga {
    padding: 1rem 1.25rem;
    background: var(--dr-moss);
    border-left: .4rem solid var(--dr-forest);
    border-radius: .25rem;
}