/* STYLE — Ferma Fruct Brabova. Cream ground, no white surfaces. Fluid layout;
   lățimile de rupere sunt în secțiunea 13. */


/* ---------------------------------------------------------------------------
   1. SKIP LINK
   --------------------------------------------------------------------------- */

.skip {
    position: absolute;
    z-index: 10;
    inset-block-start: -4rem;
    inset-inline-start: var(--gutter);
    padding: var(--space-2xs) var(--space-s);
    border-radius: var(--radius-pill);
    background: var(--action);
    /* --bark-deep not --ink: 4.09 fails on --action, 4.8 passes. */
    color: var(--bark-deep);
    font-weight: var(--weight-mid);
    text-decoration: none;
    transition: inset-block-start var(--duration) var(--ease-out);
}

.skip:focus {
    inset-block-start: var(--space-xs);
}


/* ---------------------------------------------------------------------------
   2. FUNDAL DECORATIV — vița, ramura, mărul aparțin blocului lângă care stau,
   nu paginii (altfel se mută la fiecare schimbare de text).
   --------------------------------------------------------------------------- */

/* multiply cere gazdă cu isolation: isolate + fundal propriu, altfel albul
   din PNG rămâne alb (vezi .orchard, .film, .faq).
   .grove poate avea position: relative dar NU z-index/opacity/filter —
   oricare ar rupe stivuirea desenului.
   max-width: none — base.css taie img la 100%, desenele ies intenționat
   peste gazdă. */
.motif {
    position: absolute;
    z-index: -1;
    height: auto;
    max-width: none;
    mix-blend-mode: multiply;
    pointer-events: none;
    user-select: none;
}

/* VIȚA: 4 frunze pe bloc. 50% + margine negativă (nu inset-inline:0) ca
   --shift s-o tragă de pe linia centrală; blocul oglindit inversează
   shift-ul pentru zigzag continuu. Nu folosi translate la așezare —
   animația de derulare scrie translate și s-ar anula. */
.motif--vine {
    inset-inline-start: 50%;
    width: var(--w);
    margin-inline-start: calc(var(--w) / -2 + var(--shift, 0rem));
    opacity: 0.72;
    --drift: 4rem;
}

.grove--flip .motif--vine {
    margin-inline-start: calc(var(--w) / -2 - var(--shift, 0rem));
    scale: -1 1;
}

/* Unghiurile oglindite sunt 180 minus originalul, ca frunza să rămână
   înclinată în aceeași parte. leaf-c și leaf-b trebuie să acopere împreună
   --space-section, altfel vița pare 4 bucăți separate. */
.motif--vine-leaf-c {
    inset-block-start: -4.5rem;
    --w: clamp(7rem, 12vw, 12rem);
    --shift: 1.5rem;
    rotate: 102deg;
}

.grove--flip .motif--vine-leaf-c {
    rotate: 78deg;
}

.motif--vine-leaf-a {
    inset-block-start: 24%;
    --w: clamp(6.5rem, 11vw, 11rem);
    --shift: -2rem;
    rotate: 76deg;
}

.grove--flip .motif--vine-leaf-a {
    rotate: 104deg;
}

.motif--vine-leaf-d {
    inset-block-start: 54%;
    --w: clamp(7.5rem, 13vw, 13rem);
    --shift: 2rem;
    rotate: 104deg;
}

.grove--flip .motif--vine-leaf-d {
    rotate: 76deg;
}

.motif--vine-leaf-b {
    inset-block-end: -4.5rem;
    --w: clamp(6rem, 10vw, 10rem);
    --shift: -1.5rem;
    rotate: 78deg;
}

.grove--flip .motif--vine-leaf-b {
    rotate: 102deg;
}

/* Ramurile blocului alternează latura bloc cu bloc, fără să atingă culoarul
   viței din mijloc. Tăiate de overflow: clip pe .orchard. */
.motif--grove-branch {
    inset-block-start: 6%;
    inset-inline-end: -20rem;
    width: clamp(18rem, 34vw, 34rem);
    opacity: 0.4;
    rotate: -7deg;
    --drift: 5rem;
}

.grove--flip .motif--grove-branch {
    inset-inline-end: auto;
    inset-inline-start: -20rem;
    rotate: 7deg;
    scale: -1 1;
}

/* Mărul atârnă lângă tulpină, singurul gol liber (colțurile sunt ocupate de
   foto/text). 50% + margine negativă, nu margin auto — îl ține lângă
   tulpină, nu pe ea. */
.motif--fill-apple {
    inset-block-end: -1rem;
    inset-inline-start: 50%;
    margin-inline-start: -1rem;
    width: clamp(4.5rem, 7vw, 8rem);
    opacity: 0.6;
    rotate: -8deg;
    --drift: 3rem;
}

.grove--flip .motif--fill-apple {
    margin-inline-start: -7rem;
    rotate: 8deg;
}

/* Ramura de trecere dintre secțiuni: cea mai mare bucată de desen, deci cea
   mai palidă opacitate. */
.motif--cross {
    width: clamp(20rem, 42vw, 40rem);
    opacity: 0.5;
    --drift: 5rem;
}

/* Lângă declarație, intrând din stânga. scale: -1 1 plus semn invers la
   rotate, altfel desenul se înclină greșit. Aceeași lățime ca .motif--cross,
   doar latura se schimbă. */
.motif--head {
    inset-block-start: 0;
    inset-inline-start: -14rem;
    rotate: 8deg;
    scale: -1 1;
}

/* Șapte frunze prin golul declarației; dimensiuni, unghiuri și opacități nu
   se repetă, ca traiectoria să pară naturală, nu tipar. */
.motif--head-leaf {
    opacity: 0.44;
    --drift: 2.75rem;
}

.motif--head-leaf-a {
    inset-block-start: 1rem;
    inset-inline-end: 2%;
    width: clamp(7rem, 11vw, 12rem);
    rotate: 142deg;
}

.motif--head-leaf-b {
    inset-block-start: clamp(7rem, 11vw, 12rem);
    inset-inline-end: 12%;
    width: clamp(5rem, 8vw, 8.5rem);
    opacity: 0.38;
    rotate: 74deg;
}

.motif--head-leaf-c {
    inset-block-start: clamp(15rem, 21vw, 23rem);
    inset-inline-end: 23%;
    width: clamp(3.75rem, 6vw, 6.5rem);
    opacity: 0.3;
    rotate: 166deg;
}

.motif--head-leaf-d {
    inset-block-start: clamp(6rem, 9vw, 10rem);
    inset-inline-end: 43%;
    width: clamp(4.25rem, 6.5vw, 5.25rem);
    opacity: 0.32;
    rotate: 34deg;
}

.motif--head-leaf-e {
    inset-block-start: clamp(10rem, 14vw, 12rem);
    inset-inline-end: 38%;
    width: clamp(3.75rem, 5.5vw, 4.5rem);
    opacity: 0.35;
    rotate: 112deg;
}

.motif--head-leaf-f {
    inset-block-start: clamp(14rem, 20vw, 17rem);
    inset-inline-end: 31%;
    width: clamp(4rem, 6.5vw, 5.5rem);
    opacity: 0.27;
    rotate: 48deg;
}

.motif--head-leaf-g {
    inset-block-start: clamp(20rem, 29vw, 25rem);
    inset-inline-end: 27%;
    width: clamp(3.5rem, 5vw, 4.25rem);
    opacity: 0.33;
    rotate: 154deg;
}

/* scale: -1 1 întoarce ramura pe orizontală ca să intre din stânga — același
   fișier, nu al doilea desen. */
.motif--film {
    inset-block-end: 0;
    inset-inline-start: -15rem;
    rotate: 6deg;
    scale: -1 1;
}

.motif--faq {
    inset-block-start: 1rem;
    inset-inline-end: -16rem;
    rotate: 4deg;
}

.motif--faq-apple {
    inset-block-end: 4rem;
    inset-inline-start: 3%;
    rotate: 8deg;
}

/* Copil al .orchard, nu al .film (.film n-are padding sus). Se termină la
   marginea de jos, unde overflow: clip o taie chiar pe muchia ramei video —
   pare că intră în spatele filmului. */
.motif--film-branch {
    inset-block-end: 0;
    inset-inline-end: -4rem;
    width: clamp(16rem, 28vw, 28rem);
    opacity: 0.46;
    /* Fără scale: oglindită, tulpina ieșea din colțul de sus peste video. */
    rotate: -8deg;
    --drift: 4rem;
}

/* Frunze răzlețe peste golul film–întrebări, nu o a doua viță: mai mici și
   mai palide, nicio pereche cu aceeași mărime/înclinare. Fiecare stă în
   secțiunea ei — overflow: clip taie la granița .film/.faq, o frunză călare
   s-ar reteza. */
.motif--band-leaf {
    opacity: 0.5;
    --drift: 3.5rem;
}

.motif--band-leaf-a {
    inset-block-end: 1.75rem;
    inset-inline-start: 34%;
    width: clamp(4.5rem, 7vw, 7rem);
    rotate: 28deg;
}

.motif--band-leaf-b {
    inset-block-end: 4.5rem;
    inset-inline-end: 20%;
    width: clamp(3.5rem, 5.5vw, 5.5rem);
    opacity: 0.4;
    rotate: -16deg;
}

/* 20%, nu mai spre centru: la 28% frunza atingea Î-ul din titlu. */
.motif--band-leaf-c {
    inset-block-start: 1.25rem;
    inset-inline-start: 20%;
    width: clamp(4rem, 6.5vw, 6.5rem);
    opacity: 0.42;
    rotate: 156deg;
}

.motif--band-leaf-d {
    inset-block-start: 5rem;
    inset-inline-start: 10%;
    width: clamp(6rem, 10vw, 10rem);
    rotate: 200deg;
}

/* e și f umplu golul dreapta-sus al benzii, de o parte și alta a graniței
   secțiunilor: e ultima frunză din .film, f prima din .faq. Mărimi diferite
   ca granița să nu se ghicească. */
.motif--band-leaf-e {
    inset-block-end: 1.5rem;
    inset-inline-start: 50%;
    width: clamp(4rem, 6.5vw, 6.5rem);
    opacity: 0.44;
    rotate: -42deg;
}

/* 28%, nu 30%: colțul cutiei ei ajungea peste ultimul e din titlu. */
.motif--band-leaf-f {
    inset-block-start: 1.5rem;
    inset-inline-end: 28%;
    width: clamp(3.5rem, 5.5vw, 5.5rem);
    opacity: 0.38;
    rotate: 132deg;
}

/* g stă în golul din mijlocul ramurii .motif--faq, la înălțimea titlului,
   unde desenul are o pauză. Aceeași intensitate ca ramura, nu ca celelalte
   frunze — trebuie să pară a ei. */
.motif--band-leaf-g {
    inset-block-start: 9rem;
    inset-inline-end: 10%;
    width: clamp(5rem, 8vw, 8rem);
    opacity: 0.46;
    rotate: 20deg;
}

/* h, i, j îndesesc capetele benzii. Nicio frunză vecină nu repetă unghiul,
   altfel se citesc ca tipar, nu naturale. */
.motif--band-leaf-h {
    inset-block-end: 2.5rem;
    inset-inline-start: 4%;
    width: clamp(4.5rem, 7.5vw, 7.5rem);
    opacity: 0.42;
    rotate: 62deg;
}

.motif--band-leaf-i {
    inset-block-end: 3.5rem;
    inset-inline-end: 6%;
    width: clamp(3.5rem, 6vw, 6rem);
    opacity: 0.36;
    rotate: -70deg;
}

/* k, l, m trec peste titlu/subtitlu — opacity 0.3, cele mai palide, fiindcă
   trec pe sub litere. z-index -1 ține textul deasupra. */
.motif--band-leaf-k {
    inset-block-start: 3.5rem;
    inset-inline-start: 32%;
    width: clamp(4rem, 6.5vw, 6.5rem);
    opacity: 0.3;
    rotate: 118deg;
}

.motif--band-leaf-l {
    inset-block-start: 9rem;
    inset-inline-end: 34%;
    width: clamp(3.5rem, 5.5vw, 5.5rem);
    opacity: 0.3;
    rotate: 46deg;
}

.motif--band-leaf-m {
    inset-block-start: 13.5rem;
    inset-inline-start: 40%;
    width: clamp(4.5rem, 7.5vw, 7.5rem);
    opacity: 0.28;
    rotate: 168deg;
}

/* Sub g și puțin spre interior, dar la dreapta de unde se termină subtitlul:
   la 22% intra peste ultimul cuvânt. */
.motif--band-leaf-j {
    inset-block-start: 19rem;
    inset-inline-end: 16%;
    width: clamp(4.5rem, 7.5vw, 7.5rem);
    opacity: 0.4;
    rotate: 172deg;
}

/* animation-timeline: view(), nu JS — fără suport browser, desenul stă pe loc
   (starea dinainte de mișcare), nu se rupe nimic. */
@supports (animation-timeline: view()) {

    @media (prefers-reduced-motion: no-preference) {

        .motif {
            animation: motif-drift linear both;
            animation-timeline: view();
            animation-range: cover;
        }
    }
}

@keyframes motif-drift {

    from {
        translate: 0 var(--drift, 3rem);
    }

    to {
        translate: 0 calc(var(--drift, 3rem) * -1);
    }
}

/* Antetul este fix, cu z-index propriu, deci nu apare aici. */
main,
.site-footer {
    position: relative;
    z-index: 1;
}

/* ---------------------------------------------------------------------------
   3. HEADER — 1fr auto 1fr, not space-between: unequal end widths would push
   nav off centre.
   --------------------------------------------------------------------------- */

/* --p: 0..1 scroll progress from main.js, unset falls back to 0. No
   transition — arrives per frame. rgba spelled out, not color-mix:
   unsupported engines drop the whole rule. */
.site-header {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 5;
    padding: var(--space-xs) var(--gutter);
    background-color: rgba(105, 130, 64, var(--p, 0));
    box-shadow: 0 2px 6px rgba(33, 48, 26, calc(var(--p, 0) * 0.18)),
        0 10px 24px rgba(33, 48, 26, calc(var(--p, 0) * 0.14));
}

.site-header__inner {
    max-width: var(--container);
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--space-m);
}

.brand {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    color: var(--on-dark);
    text-decoration: none;
}

.brand__mark {
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-pill);
}

.brand__word {
    font-family: var(--font-display);
    font-weight: var(--weight-display);
    /* Small size: label axes, not display (display turns to mush here). */
    font-variation-settings: var(--axes-label);
    font-size: var(--step-1);
    line-height: 1;
    letter-spacing: var(--tracking-tight);
    /* Shadow needed: bright film washes out the wordmark without it. */
    text-shadow: 0 1px 3px rgba(33, 48, 26, 0.6);
}

.nav__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-m);
}

.nav__link {
    position: relative;
    display: inline-block;
    padding-block: var(--space-3xs);
    color: var(--on-dark);
    font-size: var(--step--1);
    font-weight: var(--weight-mid);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    text-decoration: none;
    text-shadow: 0 1px 3px rgba(33, 48, 26, 0.6);
    transition: color var(--duration) var(--ease);
}

/* Separate bar, not text-decoration: underline can't animate from 0 and
   cuts descenders. Grows from the left. */
.nav__link::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    height: var(--rule);
    background: var(--action);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--duration) var(--ease-out);
}

.nav__link:hover::after,
.nav__link[aria-current="page"]::after {
    transform: scaleX(1);
}

.lang {
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    color: var(--on-dark);
    font-size: var(--step--1);
    font-weight: var(--weight-mid);
    letter-spacing: var(--tracking-label);
    text-shadow: 0 1px 3px rgba(33, 48, 26, 0.6);
}

.lang__soon {
    padding-inline-start: var(--space-2xs);
    border-inline-start: var(--hairline) solid rgba(250, 249, 239, 0.4);
    opacity: 0.6;
}

/* BUTONUL DE MENIU. Ascuns peste 64em, unde navigarea încape întreagă în bară
   — regula care îl arată e în secțiunea 13. Fără script nu are ce deschide,
   deci nu apare: vezi .no-js în <head>. */
.burger {
    display: none;
    justify-self: end;
    /* Cutia de atins e 2.75rem, mai mare decât desenul: 44px e pragul sub
       care degetul ratează ținta. */
    padding: var(--space-2xs);
    border: 0;
    background: transparent;
    color: var(--on-dark);
    cursor: pointer;
    /* Aceeași umbră ca linkurile din bară: peste un cadru luminos din film
       liniile crem s-ar pierde. */
    filter: drop-shadow(0 1px 3px rgba(33, 48, 26, 0.6));
    transition: color var(--duration) var(--ease);
}

.no-js .burger,
.no-js .drawer {
    display: none;
}

.burger__icon {
    width: 1.75rem;
    height: 1.75rem;
}

.burger:hover {
    color: var(--action);
}


/* ---------------------------------------------------------------------------
   3b. MENIUL LATERAL — panou pe hârtie, nu pe verde: bara de sus e deja
   verde plină, iar un panou verde peste ea ar fi o pată fără muchie; pe
   hârtie se citește ca o filă trasă peste pagină. Există numai sub 64em
   (secțiunea 13 îl aprinde).
   --------------------------------------------------------------------------- */

.drawer {
    /* Peste 64em navigarea stă întreagă în bară, deci panoul nu există deloc
       — nici pentru tastatură, nici pentru cititorul de ecran. Secțiunea 13
       îl aprinde. Închis, main.js îi pune inert. */
    display: none;
    position: fixed;
    inset: 0;
    /* Peste antet (z-index 5): panoul acoperă bara, iar X-ul cade peste
       burgerul de dedesubt. */
    z-index: 20;
    /* clip, nu hidden: panoul stă tras în afara ecranului când e închis;
       hidden ar crea un al doilea container de derulare. */
    overflow: clip;
    /* Întârzierea ține panoul pe ecran cât alunecă afară; la deschidere
       transition-delay revine la 0 mai jos. */
    visibility: hidden;
    transition: visibility 0s linear var(--duration);
}

.drawer.is-open {
    visibility: visible;
    transition-delay: 0s;
}

.drawer__scrim {
    position: absolute;
    inset: 0;
    /* --bark-deep cu alfa, nu negru: negrul răcește crema de dedesubt. */
    background: rgba(58, 38, 17, 0.5);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity var(--duration) var(--ease);
}

.drawer.is-open .drawer__scrim {
    opacity: 1;
}

.drawer__panel {
    position: absolute;
    inset-block: 0;
    /* Ambele margini, nu o lățime: box-sizing e content-box, deci
       inline-size ar fi doar conținutul și paddingul s-ar adăuga peste —
       panoul ieșea 314px pe un ecran de 320. Între două margini, cutia iese
       exact cât spun ele: min(82%, 20rem), 82% ca să rămână o fâșie de
       pagină vizibilă, altfel sertarul se citește ca pagină nouă. */
    inset-inline: max(18%, calc(100% - 20rem)) 0;
    /* Marginea dreapta e --gutter, ca bara de sus, deci X-ul cade peste
       burger. Stânga e --space-l: --gutter ar fi prea lat pentru un panou
       de 20rem. */
    padding: var(--space-xs) var(--gutter) var(--space-xl) var(--space-l);
    /* Colțurile numai pe muchia dinspre pagină: celelalte două ies din ecran. */
    border-start-start-radius: var(--radius-xl);
    border-end-start-radius: var(--radius-xl);
    background: var(--paper);
    /* Condiția desenului de mai jos: multiply are nevoie de context propriu
       de stivuire plus fundal propriu — vezi secțiunea 2. */
    isolation: isolate;
    overflow: clip auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-l);
    box-shadow: var(--shadow-deep);
    translate: 100% 0;
    transition: translate var(--duration-slow) var(--ease-out);
}

.drawer.is-open .drawer__panel {
    translate: 0 0;
}

/* Aceeași frunză ca-n restul paginii, colțul de jos al panoului, sub text
   peste hârtie.
   Marginea de jos nu poate fi negativă: panoul derulează pe verticală
   (ecran scurt, telefon în peisaj), iar un desen ieșit pe sub ar adăuga
   exact atâta derulare — măsurat, 95px gol sub meniu. Pe orizontală nu
   contează, overflow e clip și nu derulează.
   Stă în golul dintre linkuri și limbă, nu în colț, altfel panoul rămâne o
   coloană goală de hârtie. Mărimea și distanța scad cu înălțimea ecranului,
   altfel frunza ajunge sub linkuri pe telefoane scurte. */
.drawer__leaf {
    position: absolute;
    z-index: -1;
    inset-block-end: clamp(6.25rem, 14svh, 9rem);
    inset-inline-start: -3.5rem;
    width: clamp(10rem, 28svh, 15rem);
    height: auto;
    max-width: none;
    opacity: 0.4;
    rotate: 24deg;
    mix-blend-mode: multiply;
    pointer-events: none;
}

/* 3rem = înălțimea mărcii din bară, deci rândul are exact înălțimea
   antetului și X-ul cade peste burgerul înlocuit. */
.drawer__top {
    flex: none;
    min-height: 3rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-m);
}

.drawer__mark {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius-pill);
}

.drawer__close {
    padding: var(--space-2xs);
    border: 0;
    background: transparent;
    color: var(--bark);
    cursor: pointer;
    transition: color var(--duration) var(--ease);
}

.drawer__close:hover {
    color: var(--action-ink);
}

.drawer__list {
    margin: var(--space-s) 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

/* Scară proprie, nu --step-2: la capăt --step-2 coboară sub 1.5rem, unde
   WONK 1 din --axes-display se face terci. 1.75rem e primul prag sigur. */
.drawer__link {
    position: relative;
    display: inline-block;
    /* Cu --space-3xs rândul ieșea 42px; pragul degetului este 44. */
    padding-block: var(--space-2xs);
    color: var(--forest);
    font-family: var(--font-display);
    font-weight: var(--weight-display);
    font-variation-settings: var(--axes-display);
    font-size: clamp(1.75rem, 1.4rem + 1.75vw, 2.375rem);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight);
    text-decoration: none;
    opacity: 0;
    translate: 1.5rem 0;
    transition: color var(--duration) var(--ease),
        opacity var(--duration) var(--ease-out),
        translate var(--duration-slow) var(--ease-out);
}

/* Aceeași bară ca în bara de sus, crescută din stânga. */
.drawer__link::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    height: var(--rule);
    background: var(--action);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--duration) var(--ease-out);
}

.drawer__link:hover::after,
.drawer__link[aria-current="page"]::after {
    transform: scaleX(1);
}

.drawer__lang {
    opacity: 0;
    translate: 1.5rem 0;
    transition: opacity var(--duration) var(--ease-out),
        translate var(--duration-slow) var(--ease-out);
}

.drawer__lang {
    margin: auto 0 0;
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    color: var(--ink-soft);
    font-size: var(--step--1);
    font-weight: var(--weight-mid);
    letter-spacing: var(--tracking-label);
}

.drawer__lang-now {
    color: var(--bark);
}

.drawer__lang-soon {
    padding-inline-start: var(--space-2xs);
    border-inline-start: var(--hairline) solid var(--sand);
    opacity: 0.7;
}

/* Rândurile intră unul după altul, în ordinea citirii. Decalajele sunt numai
   la deschidere: la închidere pleacă toate odată, altfel panoul ar aluneca
   afară cu textul încă intrând. */
.drawer.is-open .drawer__link,
.drawer.is-open .drawer__lang {
    opacity: 1;
    translate: 0 0;
}

.drawer.is-open .drawer__list li:nth-child(1) .drawer__link {
    transition-delay: 90ms;
}

.drawer.is-open .drawer__list li:nth-child(2) .drawer__link {
    transition-delay: 150ms;
}

.drawer.is-open .drawer__list li:nth-child(3) .drawer__link {
    transition-delay: 210ms;
}

.drawer.is-open .drawer__lang {
    transition-delay: 280ms;
}

/* Blochează derularea paginii cât panoul e deschis. Compensarea lățimii
   barei de derulare o scrie main.js, altfel pagina ar sări lateral. */
.is-locked {
    overflow: hidden;
}


/* ---------------------------------------------------------------------------
   4. BUTTON — drawn pill, hairline + on-dark label over hero film. Hover
   sweeps orange, label flips to ink (4.7:1; cream would fail at 3.8).
   Resting colours assume it sits on the film; light-ground use needs a
   variant.
   --------------------------------------------------------------------------- */

.btn {
    position: relative;
    /* isolation: keeps ::before's z-index -1 from falling behind the hero film. */
    isolation: isolate;
    /* Clips the sweep to the pill. */
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    padding: var(--space-s) var(--space-xl);
    border: var(--hairline) solid var(--on-dark);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--on-dark);
    font-family: var(--font-text);
    font-size: var(--step-0);
    font-weight: var(--weight-mid);
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: color var(--duration) var(--ease),
        border-color var(--duration) var(--ease),
        transform var(--duration-fast) var(--ease);
}

/* No radius of its own: scaling a rounded box stretches its corners —
   parent overflow clips instead. */
.btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--action);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--duration) var(--ease);
}

/* Border must go orange too: overflow clips the sweep to the padding box,
   a cream border would ring the orange fill. */
.btn:hover {
    border-color: var(--action);
    color: var(--bark-deep);
}

.btn:hover::before {
    transform: scaleX(1);
}

/* Takes the press. */
.btn:active {
    border-color: var(--action);
    transform: translateY(1px);
}

.btn:active::before {
    transform: scaleX(1);
}

/* Light-ground variant, for the side menu's paper panel. Only resting
   colours change — hover already goes orange fill with --bark-deep label,
   which works on either ground. --bark is 10.8:1 on --paper. */
.btn--ink {
    border-color: var(--forest);
    color: var(--bark);
}

/* Faint cream, sweep off. Local rgba: no token for on-dark at this alpha. */
.btn:disabled,
.btn[aria-disabled="true"] {
    border-color: rgba(243, 244, 232, 0.35);
    background: transparent;
    color: rgba(243, 244, 232, 0.55);
    cursor: not-allowed;
}

.btn:disabled:hover,
.btn[aria-disabled="true"]:hover {
    color: rgba(243, 244, 232, 0.55);
}

.btn:disabled:hover::before,
.btn[aria-disabled="true"]:hover::before {
    transform: scaleX(0);
}


/* ---------------------------------------------------------------------------
   5. HERO — svh not vh: vh is the bars-hidden height, so the hero would
   sit under the address bar on first paint.
   --------------------------------------------------------------------------- */

.hero {
    position: relative;
    /* content-box: min-height excludes padding, subtracted here to net
       100svh — keep in step with padding below. */
    min-height: calc(100svh - (var(--space-xl) + 3rem) - var(--space-2xl));
    display: grid;
    place-items: center;
    /* Top clears the fixed header, bottom clears the green band overlapping
       the film's foot. */
    padding: calc(var(--space-xl) + 3rem) var(--gutter) var(--space-2xl);
    overflow: hidden;
    background: var(--forest);
}

.hero__film {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Wash for legibility over the film: --forest's own rgb (105,130,64), not a
   new green. Top layer haze fades to --paper's rgb (246,241,225), hiding
   the film's cut edge — update both if --paper changes. 8 stops not 4:
   fewer band visibly on moving video; no jump over ~0.22 alpha. */
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to top,
            rgb(246, 241, 225) 0%,
            rgba(246, 241, 225, 1) 1%,
            rgba(246, 241, 225, 0.78) 2.5%,
            rgba(246, 241, 225, 0.56) 4%,
            rgba(246, 241, 225, 0.37) 6%,
            rgba(246, 241, 225, 0.22) 8.5%,
            rgba(246, 241, 225, 0.11) 11%,
            rgba(246, 241, 225, 0.04) 13.5%,
            rgba(246, 241, 225, 0) 16%),
        linear-gradient(to bottom, rgba(105, 130, 64, 0.74) 0%, rgba(105, 130, 64, 0.4) 32%, rgba(105, 130, 64, 0.52) 100%),
        radial-gradient(ellipse 70% 55% at 50% 55%, rgba(105, 130, 64, 0.56), rgba(105, 130, 64, 0) 100%);
}

/* Same --p as header. Words gone by 69% of travel, well ahead of the
   header fill, so they never show tinted through it. */
.hero__inner {
    position: relative;
    z-index: 1;
    max-width: var(--container-narrow);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-s);
    opacity: clamp(0, calc(1 - var(--p, 0) * 1.45), 1);
    transform: translateY(calc(var(--p, 0) * -1.5rem));
}

.hero__mark {
    width: clamp(3.75rem, 3rem + 3vw, 5.5rem);
    height: auto;
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-raise);
}

/* --step-4 not step-5: step-5 wraps to 3 lines and pushes the button off
   screen. */
.hero__title {
    margin-block-start: var(--space-2xs);
    max-width: 15ch;
    font-size: var(--step-4);
    color: var(--paper);
    text-shadow: 0 2px 14px rgba(28, 45, 18, 0.55);
}

.hero__lead {
    max-width: 42ch;
    color: var(--on-dark-soft);
    font-size: var(--step-1);
    text-shadow: 0 1px 6px rgba(28, 45, 18, 0.5);
}

.hero__cta {
    margin-block-start: var(--space-s);
}


/* ---------------------------------------------------------------------------
   6. BANDA CU CIFRE — negative margin is half the band's own height;
   change padding here and overlap follows. Numbers count up on arrival:
   tabular-nums keeps columns still as digit width changes.
   --------------------------------------------------------------------------- */

.brief {
    position: relative;
    z-index: 2;
    margin-block-start: calc(var(--space-l) * -1);
    padding-inline: var(--gutter);
}

.brief__list {
    max-width: var(--container);
    margin-inline: auto;
    /* Vertical padding sets the band's height (thin strip) — widen inline
       only. */
    padding: var(--space-m) var(--space-l);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    /* No inline gap: dividers below stand in for it. */
    gap: var(--space-s) 0;
    border-radius: var(--radius-xl);
    /* --sand only separates from --paper at 1.46 — shadow does real work
       here, don't remove it. */
    background: var(--sand);
    color: var(--bark);
    box-shadow: var(--shadow-raise);
}

/* Side by side, not stacked: stacking would make the band tall. */
.brief__item {
    flex: 1 1 auto;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: var(--space-2xs);
    padding-inline: var(--space-m);
    text-align: center;
}

/* Drawn on the item, not a separate divider: avoids a stray rule when a
   row wraps. */
.brief__item + .brief__item {
    /* --bark at low alpha: ground is light, rule must be darker not lighter. */
    border-inline-start: var(--hairline) solid rgba(73, 48, 23, 0.3);
}

.brief__number {
    font-family: var(--font-display);
    font-weight: var(--weight-display);
    font-variation-settings: var(--axes-display);
    /* --step-2, not the old display size: larger drives the strip's height
       up. */
    font-size: var(--step-2);
    line-height: 1;
    color: var(--bark);
    font-variant-numeric: tabular-nums;
}

.brief__unit {
    font-size: var(--step--1);
    font-weight: var(--weight-mid);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    /* Same --bark as the number, held back with alpha not a second brown. */
    color: rgba(73, 48, 23, 0.78);
}

.brief__note {
    margin-block-start: var(--space-m);
    max-width: var(--container);
    margin-inline: auto;
    color: var(--ink-soft);
    font-size: var(--step--1);
    text-align: center;
}


/* ---------------------------------------------------------------------------
   7. DECLARAȚIE ȘI CELE PATRU FRUCTE — un bloc pe fruct, ordinea culesului.
   Două coloane independente (nu grid), blocurile se oglindesc de la un fruct
   la altul pentru zigzag.
   --------------------------------------------------------------------------- */

/* isolation + background: condiția desenelor din fundal, vezi secțiunea 2. */
.orchard {
    position: relative;
    isolation: isolate;
    background: var(--paper);
    /* clip nu hidden: hidden ar crea al doilea container de scroll; desenele
       ies peste margine intenționat. */
    overflow: clip;
    padding: var(--space-section) var(--gutter);
}

.orchard__inner {
    max-width: var(--container);
    margin-inline: auto;
}

/* Aer în jurul declarației: banda cu cifre stă chiar deasupra, iar primul
   fruct începe imediat sub ea. */
.orchard__head {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: var(--space-m) var(--space-2xl);
    padding-block: var(--space-xl) var(--space-xl);
}

.orchard__statement {
    flex: 1 1 24rem;
    max-width: 20ch;
    font-family: var(--font-display);
    font-weight: var(--weight-normal);
    font-variation-settings: var(--axes-display);
    font-size: var(--step-4);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    text-wrap: balance;
    color: var(--forest);
}

.orchard__note {
    flex: 0 1 26ch;
    margin: 0;
    color: var(--ink-soft);
    text-align: end;
}

/* Pragul dintre promisiunea fermei și cele patru fructe. Riglele au aceeași
   culoare ca linia calendarului, ca titlul să deschidă vizual povestea
   recoltelor fără chenar sau bandă nouă. */
.orchard__catalog {
    display: grid;
    grid-template-columns: minmax(var(--space-xl), 1fr) auto minmax(var(--space-xl), 1fr);
    align-items: center;
    gap: var(--space-m);
    margin-block: var(--space-section) var(--space-xl);
}

.orchard__catalog-rule {
    height: var(--hairline);
    background: var(--sand);
}

.orchard__catalog-lockup {
    position: relative;
}

.orchard__catalog-leaf {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: calc(100% + var(--space-s));
    width: clamp(3.75rem, 6vw, 5.5rem);
    height: auto;
    opacity: 0.44;
    translate: 0 -50%;
    rotate: -18deg;
    mix-blend-mode: multiply;
}

.orchard__title {
    margin: 0;
    color: var(--forest);
    font-size: var(--step-4);
    line-height: var(--leading-tight);
    text-align: center;
    text-wrap: balance;
}

/* Lățimea containerului, nu 72rem: calendarul are padding mai mare, iar cei
   6rem în plus îl plătesc fără să strângă textul. La fel de lat ca
   declarația de deasupra, deci blocurile se aliniază cu ea.
   Gap 1.6× --space-section: fiecare fruct e o secțiune de sine stătătoare,
   altfel blocurile se citesc ca o listă.
   position: relative ancorează coloana desenată (.orchard__spine); z-index
   rămâne auto, altfel desenele din fundal pierd hârtia de sub ele. */
.orchard__groves {
    position: relative;
    max-width: var(--container);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: calc(var(--space-section) * 1.6);
}

/* LINIA SECȚIUNII: o singură trăsătură desenată, din cireșe până sub pere —
   nu chenarul unei liste, trebuie să șerpuiască: lângă calendarele de
   margine merge aproape de ele și le poartă bulinele, în blocurile din
   mijloc se leagănă stânga-dreapta pe tot coridorul.
   Desenată din main.js (job 8), fiindcă nicio regulă CSS nu știe pe ce x
   iese o coloană flexibilă. Fără script rămâne chenarul drept de mai jos,
   cu cârligele lui: patru calendare de sine stătătoare, nimic rupt. */
.orchard__spine {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    /* Legănarea iese cu câțiva pixeli din cutia listei, intenționat. */
    overflow: visible;
}

/* main.js scoate .has-spine sub 64em, unde blocul e pe o coloană și
   calendarele nu mai stau pe aceeași verticală — linia ar traversa pagina.
   Fără ea revine chenarul drept al fiecărui calendar, ca fără script. */
.orchard__groves:not(.has-spine) .orchard__spine {
    display: none;
}

.orchard__spine path {
    fill: none;
    stroke: var(--sand);
    stroke-width: 1;
    stroke-linecap: round;
}

/* Capetele: bob plin sus și jos, ca trăsătura să înceapă/încheie din voința
   ei, nu prin dispariție. */
.orchard__spine circle {
    fill: var(--bark-soft);
}

/* Cu linia desenată, chenarul drept și cârligele lui dispar: ar fi o a doua
   linie lipită de prima. */
.orchard__groves.has-spine .grove__rail {
    border-inline: 0;
}

.orchard__groves.has-spine .grove__rail::before,
.orchard__groves.has-spine .grove__rail::after {
    content: none;
}

/* Două coloane independente, nu grid (grid ținea foto 2 pe rândul 2, lăsând
   o gaură). row-reverse e starea normală: în DOM coloana cu numele vine
   prima (screen reader), pe ecran foto mare stă în stânga.
   Nu pune z-index/opacity/filter pe .grove — ar rupe multiply pe vița din
   el. */
.grove {
    /* Silueta fotografiilor: patru fișiere, patru perechi diferite mai jos,
       ca același contur să nu apară de două ori. */
    --blob-a: url("../img/blob-a1.webp");
    --blob-b: url("../img/blob-b1.webp");
    --rail-ink: var(--sand);
    --rail-pad: var(--space-l);

    position: relative;
    display: flex;
    flex-direction: row-reverse;
    align-items: start;
    gap: var(--space-2xl);
}

.grove--flip {
    flex-direction: row;
}

/* Calendarul pe mijlocul blocului, nu pe margine. Se schimbă numai ordinea:
   fotografia și textul rămân pe laturile lor, deci zigzagul se păstrează.
   Citită stânga-dreapta pe blocul oglindit și dreapta-stânga pe cel normal
   (row-reverse), aceleași trei valori dau text | calendar | fotografie și
   invers. Chenarul cade tot spre .grove__tell, fiindcă latura o alege
   .grove--flip, nu poziția în rând — linia separă calendarul de proză. */
.grove--mid .grove__tell {
    order: 1;
}

/* Padding lat pe latura liniei: acolo se leagănă trăsătura desenată, iar
   coridorul o ține să nu intre în text. Se strâmtează coridorul, se
   strâmtează legănarea — amândouă citite din DOM în main.js, se schimbă
   numai aici. */
.grove--mid .grove__rail {
    --rail-pad: calc(var(--space-l) * 3.4);

    order: 2;
}

.grove--mid .grove__lead {
    order: 3;
}

.orchard__groves > .grove:nth-child(2) {
    --blob-a: url("../img/blob-a2.webp");
    --blob-b: url("../img/blob-b2.webp");
}

.orchard__groves > .grove:nth-child(3) {
    --blob-a: url("../img/blob-a2.webp");
}

.orchard__groves > .grove:nth-child(4) {
    --blob-b: url("../img/blob-b2.webp");
}

/* Coloana fotografiei e puțin mai lată decât cea a textului: egale, blocul
   s-ar citi ca un tabel. flex-basis 0 pe amândouă, ca raportul să vină din
   flex-grow, nu din cât text a intrat în ele. */
.grove__lead {
    flex: 1.08 1 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2xl);
}

.grove__tell {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
    /* Aliniere optică cu marginea fotografiei: colțul ei rotund începe mai
       jos decât marginea cutiei. */
    padding-block-start: var(--space-m);
}

/* SILUETA: fotografia nu are margini drepte — se stinge organic pe toate
   laturile, ca o spălare de acuarelă.
   Masca e un webp cu silueta în canalul alfa, deci mask-image pe modul
   implicit, fără mask-mode/SVG (mask: url(#id) nu e de încredere în
   Safari); -webkit-mask-* rămâne pentru Safari. Nu radial-gradient: ar da
   un oval curat, nu conturul neregulat. Nu feTurbulence: costă la fiecare
   pictare.
   mask-size: 100% 100% întinde fișierul pe cutie — blob-a* e pătrat,
   blob-b* e 4:3, ca aspect-ratio al fotografiei. Schimbi raportul unei
   fotografii, regenerezi masca (altfel granulația se lățește în dungi);
   rețeta e în DESIGN.md.
   clip-path rămâne doar pentru dezvelirea de sosire — forma o dă masca. */
.grove__frame {
    -webkit-mask-image: var(--blob);
    mask-image: var(--blob);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    clip-path: inset(0);
    background: var(--sand-soft);
    transition: clip-path 900ms var(--ease-out);
}

.grove__frame--a {
    --blob: var(--blob-a);
}

.grove__frame--b {
    --blob: var(--blob-b);

    /* Puțin sub paragraful de deasupra: lipită, coloana s-ar citi ca de
       ziar, nu ca pagină. */
    margin-block-start: var(--space-2xs);
}

/* Cele trei fotografii secundare dinaintea perelor se lărgesc fără să-și
   schimbe raportul sau masca: silueta rămâne aceeași spălare de acuarelă. */
.orchard__groves > .grove:nth-child(-n + 3) .grove__frame--b {
    width: 115%;
}

/* Caisele și prunele primesc încă un pas de scară, ambele fotografii. Cadrul
   rămâne în raportul lui, deci masca nu se întinde în altă formă. */
.orchard__groves > .grove:is(:nth-child(2), :nth-child(3)) .grove__frame--a {
    width: 110%;
}

.orchard__groves > .grove:is(:nth-child(2), :nth-child(3)) .grove__frame--b {
    width: 120%;
}

/* aspect-ratio pe img nu pe ramă: pe ramă e ignorat cât timp imaginea o
   împinge la înălțimea naturală. */
.grove__photo {
    width: 100%;
    height: auto;
    object-fit: cover;
    transition: transform var(--duration-slow) var(--ease-out),
        filter var(--duration-slow) var(--ease-out);
}

.grove__frame--a .grove__photo {
    aspect-ratio: 1 / 1;
}

.grove__frame--b .grove__photo {
    aspect-ratio: 4 / 3;
}

/* Răspuns la pointer, nu invitație la clic: fotografia nu duce nicăieri, așa
   că mișcarea rămâne sub pragul la care ar părea buton. */
.grove__frame:hover .grove__photo {
    transform: scale(1.02);
    filter: saturate(1.08);
}

/* Sosirea: fotografia se descoperă de jos în sus, în propria formă. .wipe e
   pusă numai de main.js — fără script, fotografia e întreagă de la prima
   pictare. */
.grove__frame.wipe {
    clip-path: inset(100% 0 0 0);
}

.grove__frame.wipe.is-in {
    clip-path: inset(0);
}

.grove__name {
    font-size: var(--step-3);
    color: var(--forest);
}

.grove__season {
    margin-block-start: var(--space-xs);
    max-width: none;
    color: var(--ink-soft);
    font-size: var(--step--1);
    font-weight: var(--weight-mid);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
}

.grove__season span {
    /* Linia este structură, nu cuvânt: fără spațiere de literă. */
    letter-spacing: 0;
    padding-inline: 0.1em;
}

/* CALENDARUL LATERAL: coloană proprie, nu etichetă lipită pe margine. Linia
   e chenarul lateral al listei, merge cât ține lista, fără înălțime scrisă
   manual. Capetele se curbează în afară: pseudo-elementele au două laturi
   și un colț rotunjit — verticala continuă linia, orizontala o duce în
   lateral.
   order: -1 o pune pe latura opusă ramurii desenate (dreapta la blocul
   normal, stânga la cel oglindit) fără s-o muta din DOM, unde stă ultima ca
   screen readerul să audă întâi fructul, apoi calendarul.
   left/right fizice, nu logice, la cârlige și buline: latura o alege
   .grove--flip, nu direcția scrierii — într-un layout RTL ar trebui
   rescrise. */
.grove__rail {
    order: -1;
    /* Mai lată decât înainte fiindcă --rail-pad a crescut: coloana de text din
       calendar trebuie să rămână cam la fel de largă. */
    flex: 0 0 clamp(9rem, 16vw, 13.5rem);
    /* stretch bate align-items: start de pe .grove — linia trebuie să țină cât
       ține blocul, altfel calendarul se termină la jumătatea fructului. */
    align-self: stretch;
    position: relative;
    margin: 0;
    padding-block: var(--space-xs) var(--space-m);
    /* Amândouă laturile, nu doar cea cu chenarul: ol are implicit
       padding-inline-start, care lăsa 40px goi lângă text. */
    padding-inline: 0 var(--rail-pad);
    border-inline-end: 1px solid var(--rail-ink);
    list-style: none;
    display: flex;
    flex-direction: column;
    /* space-between întinde etapele pe toată linia; gap rămâne distanța minimă
       dintre ele, pentru blocul care iese scurt. */
    justify-content: space-between;
    gap: var(--space-2xl);
    text-align: end;
}

.grove--flip .grove__rail {
    padding-inline: var(--rail-pad) 0;
    border-inline-end: 0;
    border-inline-start: 1px solid var(--rail-ink);
    text-align: start;
}

/* Cârligele. 1px negativ pe verticală ca arcul să pornească din chenar, nu
   dintr-un pixel mai jos. */
.grove__rail::before,
.grove__rail::after {
    content: "";
    position: absolute;
    width: 1.75rem;
    height: 1.75rem;
    border: 0 solid var(--rail-ink);
    left: 100%;
}

.grove__rail::before {
    top: calc(-1.75rem + 1px);
    border-width: 1px 0 0 1px;
    border-start-start-radius: 1.75rem;
}

.grove__rail::after {
    bottom: calc(-1.75rem + 1px);
    border-width: 0 0 1px 1px;
    border-end-start-radius: 1.75rem;
}

.grove--flip .grove__rail::before,
.grove--flip .grove__rail::after {
    left: auto;
    right: 100%;
}

.grove--flip .grove__rail::before {
    border-width: 1px 1px 0 0;
    border-start-start-radius: 0;
    border-start-end-radius: 1.75rem;
}

.grove--flip .grove__rail::after {
    border-width: 0 1px 1px 0;
    border-end-start-radius: 0;
    border-end-end-radius: 1.75rem;
}

.grove__stage {
    position: relative;
}

/* 0.3125rem e jumătate din bulină plus jumătate de pixel de chenar. 0.35em
   sus o aliniază pe text, nu pe cutie. --dot-shift vine din main.js, per
   etapă; fără script rămâne 0. */
.grove__stage::before {
    content: "";
    position: absolute;
    top: 0.35em;
    right: calc(var(--rail-pad) * -1 - 0.3125rem);
    width: 0.5rem;
    height: 0.5rem;
    border: 1px solid var(--bark-soft);
    border-radius: 50%;
    background: var(--paper);
    transform: translateX(var(--dot-shift, 0px));
}

.grove--flip .grove__stage::before {
    right: auto;
    left: calc(var(--rail-pad) * -1 - 0.3125rem);
}

/* Capetele calendarului (lunile) au punct plin, nu inel, ca să se citească
   drept început și sfârșit. */
.grove__stage--edge::before {
    border-color: var(--bark-soft);
    background: var(--bark-soft);
}

.grove__month {
    color: var(--ink-soft);
    font-size: var(--step--1);
    font-weight: var(--weight-mid);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
}

.grove__stage-name {
    margin: 0;
    color: var(--forest);
    font-family: var(--font-text);
    font-size: var(--step--1);
    font-weight: var(--weight-mid);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
}

/* Sub --step--1 nu mai există treaptă în tokens; nu adăugăm una pentru un
   singur loc. */
.grove__stage-note {
    margin-block-start: var(--space-xs);
    max-width: none;
    color: var(--ink-soft);
    font-size: clamp(0.75rem, 0.73rem + 0.11vw, 0.8125rem);
    line-height: 1.7;
}

.grove__aside {
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
}

.grove__cue {
    display: flex;
    align-items: baseline;
    gap: 0.6em;
    margin: 0;
    color: var(--forest);
    font-family: var(--font-display);
    font-size: var(--step-1);
    font-weight: var(--weight-mid);
}

/* Nu shrink: la rând strâmt frunza se turtea într-o dungă. */
.grove__leaf {
    flex: none;
    width: 1.1em;
    height: 1.1em;
    /* Baseline aliniază cutia SVG, nu desenul din ea. */
    translate: 0 0.12em;
}

/* Linia de deasupra e scurtă intenționat: pe toată lățimea ar tăia coloana
   în două. */
.grove__seal {
    position: relative;
    margin: var(--space-s) 0 0;
    padding-block-start: var(--space-l);
    color: var(--ink-soft);
    font-size: var(--step--1);
    font-style: italic;
}

.grove__seal::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    width: 4rem;
    border-block-start: 1px solid var(--sand);
}

.grove__intro {
    font-size: var(--step-1);
    color: var(--ink);
}

.grove__detail {
    color: var(--ink-soft);
}

/* Lunile de pe pagină nu sunt încă ale fermei — se șterge la editarea în
   care sosesc datele reale. */
.orchard__foot {
    margin: var(--space-2xl) auto 0;
    max-width: 64rem;
    color: var(--ink-soft);
    font-size: var(--step--1);
    text-align: center;
}

@media (prefers-reduced-motion: reduce) {

    /* base.css taie duratele; asta taie și starea de plecare, ca fotografia
       să nu apară ascunsă în niciun cadru. */
    .grove__frame.wipe {
        clip-path: inset(0);
    }

    .grove__frame:hover .grove__photo {
        transform: none;
    }
}


/* ---------------------------------------------------------------------------
   8. BANDA VIDEO — framed with a margin, not full bleed (full bleed read
   as a second hero).
   --------------------------------------------------------------------------- */

/* position + isolation + background: condițiile desenelor din fundal, vezi
   secțiunea 2. */
.film {
    position: relative;
    isolation: isolate;
    background: var(--paper);
    /* clip nu hidden, vezi .orchard. */
    overflow: clip;
    padding: 0 var(--gutter) var(--space-section);
}

.film__inner {
    max-width: var(--container);
    margin-inline: auto;
}

/* Height not aspect-ratio: Chrome shrinks the frame's width instead when
   both are set. */
.film__frame {
    height: clamp(15rem, 34vw, 27rem);
    overflow: hidden;
    border-radius: var(--radius-xl);
    background: var(--forest);
    box-shadow: var(--shadow-raise);
}

.film__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.film__caption {
    margin: var(--space-m) auto 0;
    color: var(--ink-soft);
    font-size: var(--step--1);
    text-align: center;
}


/* ---------------------------------------------------------------------------
   9. ÎNTREBĂRI FRECVENTE — centred title, questions as stacked plates.
   --paper ground, the page's own: last light section before the green
   subsol. Native <details>, no JS.
   --------------------------------------------------------------------------- */

/* position + isolation + background: condițiile desenelor din fundal, vezi
   secțiunea 2. */
.faq {
    position: relative;
    isolation: isolate;
    background: var(--paper);
    /* clip nu hidden, vezi .orchard. */
    overflow: clip;
    padding: var(--space-m) var(--gutter) var(--space-2xl);
}

.faq__inner {
    max-width: var(--container);
    margin-inline: auto;
}

.faq__head {
    text-align: center;
}

.faq__title {
    font-size: var(--step-4);
    color: var(--forest);
}

/* margin-inline: auto needed: p's measure cap would otherwise sit it left
   of centre. */
.faq__lead {
    margin: var(--space-m) auto 0;
    max-width: 46ch;
    color: var(--ink-soft);
}

/* Narrower than the container: full 78rem width reads as a table of
   contents. */
.faq__list {
    max-width: 58rem;
    margin: var(--space-xl) auto 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
}

/* Flat --sand-soft, no border, no hover — outline reads as damage. 1.09
   against --paper is intentional: quiet, reads from the column of five. */
.faq__row {
    border-radius: var(--radius-xl);
    background: var(--sand-soft);
}

.faq__q {
    /* list-style kills the marker triangle; ::-webkit- line needed for
       Safari too. */
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-m);
    padding: var(--space-m) var(--space-l);
    cursor: pointer;
    color: var(--ink);
    /* --step-0, body size: step-1 read as five headlines shouting over the
       fruit above. */
    font-size: var(--step-0);
    font-weight: var(--weight-mid);
    line-height: var(--leading-snug);
    transition: color var(--duration) var(--ease);
}

.faq__q::-webkit-details-marker {
    display: none;
}

.faq__q:hover,
.faq__row[open] .faq__q {
    color: var(--forest);
}

/* Ring inset, not offset: offset draws half outside the plate's rounded
   corner. */
.faq__q:focus-visible {
    outline-offset: -6px;
    border-radius: var(--radius-xl);
}

.faq__qtext {
    text-wrap: balance;
}

/* Drawn plus, not a glyph: a character sits on Chivo's baseline, not the
   page's rule line. --action-ink not --action: plain --action is 2.4 on
   the fill, under the 3:1 floor. */
.faq__sign {
    position: relative;
    flex: none;
    width: 0.9rem;
    height: 0.9rem;
}

.faq__sign::before,
.faq__sign::after {
    content: '';
    position: absolute;
    inset-block-start: 50%;
    inset-inline: 0;
    height: var(--rule);
    border-radius: 1px;
    background: var(--action-ink);
    transition: transform var(--duration) var(--ease-out);
}

.faq__sign::before {
    transform: translateY(-50%);
}

.faq__sign::after {
    transform: translateY(-50%) rotate(90deg);
}

.faq__row[open] .faq__sign::after {
    transform: translateY(-50%) rotate(0deg);
}

/* Inline margin lines the rule under the question, not the plate edge. */
.faq__a {
    margin-inline: var(--space-l);
    padding-block: var(--space-3xs);
    padding-inline-start: var(--space-s);
    /* Bottom space lives on .faq__body, not here, so the rule stops at the
       last line. */
    border-inline-start: var(--rule) solid var(--leaf);
    color: var(--ink-soft);
}

.faq__a p {
    max-width: 62ch;
    font-size: var(--step--1);
}

/* Padding here, not on the row: row padding would leave dead space when
   closed. */
.faq__body {
    padding-block-end: var(--space-m);
}

/* Progressive enhancement: unsupported browsers still open, just jump
   instead of unroll. */
@supports (interpolate-size: allow-keywords) {

    html {
        interpolate-size: allow-keywords;
    }

    .faq__row::details-content {
        overflow: hidden;
        block-size: 0;
        transition: block-size var(--duration) var(--ease-out),
            content-visibility var(--duration) allow-discrete;
    }

    .faq__row[open]::details-content {
        block-size: auto;
    }
}

.faq__note {
    margin: var(--space-l) auto 0;
    color: var(--ink-soft);
    font-size: var(--step--1);
    text-align: center;
}


/* ---------------------------------------------------------------------------
   10. SUBSOL — nume, navigare, parteneri, rândul de bază. Fără date de
   contact. Poziția și z-index-ul sunt la secțiunea 2, cu main.
   --------------------------------------------------------------------------- */

.site-footer {
    /* O singură lățime pentru amândouă crengile: măsurate separat ieșeau
       inegale. */
    --leaf: clamp(17rem, 26vw, 28rem);
    --leaf-reach: clamp(5rem, 10vw, 10rem);
    /* Fâșia liberă dintre fereastră și container e singura zonă fără text —
       acolo stau crengile. Sub 64em fâșia se strânge la --gutter și
       crengile ar cădea sub text (2.40:1), deci ies din pagină, vezi
       secțiunea 13. */
    --leaf-lane: max((100% - var(--container)) / 2, var(--gutter));
    /* clip nu hidden: crengile ies peste colțuri intenționat, vezi
       secțiunea 2. */
    overflow: clip;
    padding: var(--space-l) var(--gutter) var(--space-s);
    background: var(--forest-deep);
    color: var(--on-dark-soft);
}

/* z-index: -1 le ține sub text, peste fundal — .site-footer are context
   propriu de stivuire (secțiunea 2). Niciun text peste ele: crema pe verde
   e 3.69:1, deja sub prag; peste creangă cade la 2.40:1. Poziția fiecărei
   crengi e calculată, nu aleasă din ochi. */
.site-footer__leaf {
    position: absolute;
    z-index: -1;
    /* base.css capează orice img la 100%; crengile trebuie să depășească. */
    max-width: none;
    width: var(--leaf);
    height: auto;
    opacity: 0.62;
    pointer-events: none;
}

/* Creanga de sus trece marginea containerului cu --leaf-reach; cea de jos
   intră doar pe jumătate, cât să nu ajungă sub rețelele sociale. */
.site-footer__leaf--top {
    inset-block-start: -4rem;
    inset-inline-end: calc(var(--leaf-lane) - var(--leaf) + var(--leaf-reach));
}

.site-footer__leaf--bottom {
    inset-block-end: -4rem;
    inset-inline-start: calc(var(--leaf-lane) - var(--leaf) + clamp(2.5rem, 5vw, 5rem));
    opacity: 0.68;
}

/* Coloana liberă din dreapta păstrează loc pentru creanga de sus. */
.site-footer__inner {
    position: relative;
    max-width: var(--container);
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-m) var(--space-xl);
}

.site-footer__lead {
    display: flex;
    align-items: center;
    gap: var(--space-s);
}

.site-footer__mark {
    flex: none;
    width: clamp(3.25rem, 2.8rem + 1.8vw, 4.5rem);
    height: auto;
    border-radius: var(--radius-pill);
}

/* Numele rămâne pe un rând lângă marcă, ca blocul de identitate să nu dicteze
   înălțimea subsolului. */
.site-footer__name {
    margin: 0;
    max-width: 22ch;
    color: var(--paper);
    font-family: var(--font-display);
    font-weight: var(--weight-display);
    font-variation-settings: var(--axes-display);
    font-size: var(--step-1);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
}

.site-footer__nav {
    grid-column: 2;
    text-align: center;
}

.site-footer__heading {
    margin: 0 0 var(--space-xs);
    color: var(--paper);
    font-family: var(--font-display);
    font-weight: var(--weight-display);
    font-variation-settings: var(--axes-display);
    font-size: var(--step-1);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight);
}

.site-footer__links {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    align-items: center;
    gap: var(--space-m);
}

/* Portocaliu la hover, ca-n tot site-ul; patru linii subliniate în repaus
   ar fi mai zgomotoase decât siglele de mai jos. */
.site-footer__nav-link {
    color: var(--on-dark-soft);
    font-size: var(--step-0);
    text-decoration: none;
    transition: color var(--duration) var(--ease);
}

.site-footer__nav-link:hover,
.site-footer__nav-link:focus-visible {
    color: var(--paper);
    text-decoration: underline;
    text-decoration-color: var(--action);
    text-decoration-thickness: var(--rule);
    text-underline-offset: 0.25em;
}

.site-footer__base {
    position: relative;
    max-width: var(--container);
    margin-inline: auto;
    margin-block-start: var(--space-s);
    padding-block-start: var(--space-s);
    border-block-start: var(--hairline) solid rgba(244, 237, 219, 0.22);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-s) var(--space-l);
}

.site-footer__social {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    align-items: center;
    gap: var(--space-s);
}

.site-footer__social-link {
    display: flex;
    color: var(--on-dark-soft);
    transition: color var(--duration) var(--ease);
}

.site-footer__social-link:hover,
.site-footer__social-link:focus-visible {
    color: var(--paper);
}

.site-footer__social-link svg {
    display: block;
    width: 1.5rem;
    height: 1.5rem;
}

.site-footer__lang {
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    font-size: var(--step-0);
    letter-spacing: var(--tracking-label);
    justify-self: end;
}

.site-footer__lang-now {
    color: var(--paper);
}

.site-footer__lang-sep {
    color: var(--on-dark-soft);
    opacity: 0.45;
}

.site-footer__lang-next {
    color: var(--on-dark-soft);
}

/* max-width + margin auto: base.css capează <p> la --measure, altfel
   text-align: center l-ar centra într-o cutie de 568px lipită de stânga.
   Fără opacity: --on-dark-soft pe --forest-deep abia trece 4.5. */
.site-footer__legal {
    position: relative;
    grid-column: 2;
    grid-row: 1;
    max-width: none;
    margin: 0;
    color: var(--on-dark-soft);
    font-size: var(--step--1);
    text-align: center;
}

/* Stilat înaintea conținutului: marcajul pentru telefon/e-mail stă parcat
   într-un comentariu în index.html, pentru pagina de contact. */
.site-footer__contact {
    margin-block-start: var(--space-m);
    display: flex;
    flex-direction: column;
    align-items: end;
    gap: var(--space-3xs);
}

.site-footer__link {
    color: var(--paper);
    font-size: var(--step-0);
    text-decoration: underline;
    text-decoration-color: var(--action);
    text-decoration-thickness: var(--rule);
    text-underline-offset: 0.25em;
    transition: color var(--duration) var(--ease);
}

.site-footer__link:hover {
    color: var(--action);
}


/* ---------------------------------------------------------------------------
   11. PARTENERI — siglele ies crem prin currentColor; --knockout e fundalul
   vizibil prin decupaje, schimbă-l dacă blocul se mută pe alt fundal.
   --------------------------------------------------------------------------- */

.partners {
    /* Citit din style="fill:var(--knockout)" în siglele din index.html. */
    --knockout: var(--forest-deep);
    --logo-size: clamp(2.25rem, 1.95rem + 1.2vw, 3rem);
    max-width: var(--container);
    margin-inline: auto;
    /* Spațiu deasupra riglei egal cu cel de sub ea, ca la .site-footer__base. */
    margin-block-start: var(--space-s);
    padding-block-start: var(--space-s);
    border-block-start: var(--hairline) solid rgba(244, 237, 219, 0.22);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-s) var(--space-l);
}

.partners__label {
    margin: 0;
    color: var(--on-dark-soft);
    font-family: var(--font-text);
    font-size: var(--step--1);
    font-weight: var(--weight-mid);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
}

/* Spațiu simplu, fără linii despărțitoare: pe verde ar fi a doua riglă
   într-un bloc care are deja una deasupra. */
.partners__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-s) var(--space-l);
}

.partners__item {
    display: flex;
    align-items: center;
}

/* SVG inline, nu fișiere legate, ca să meargă currentColor. Nu mask-image:
   nu se randa în Firefox. Verifică viewBox la înlocuirea unui fișier. */
.partners__logo {
    display: block;
    width: var(--logo-size);
    height: var(--logo-size);
    color: var(--paper);
}

/* Corecție optică: sigla 4 pare mai mică la aceeași cutie. Cutie mărită,
   nu scale() (ar ieși peste margine). Remăsoară la fișierul real. */
.partners__item:last-child .partners__logo {
    width: calc(var(--logo-size) * 1.3);
    height: calc(var(--logo-size) * 1.3);
}


/* ---------------------------------------------------------------------------
   12. REVEAL — card laid on a table: arrives low, tilted, settles flat.
   CSS below is the fallback/reduced-motion end state; GSAP drives it where
   loaded. .reveal is added only by main.js, so content stays visible
   without script.
   --------------------------------------------------------------------------- */

.reveal {
    opacity: 0;
    transform: translateY(1.75rem) rotate(-0.4deg);
    transition: opacity var(--duration-slow) var(--ease-out),
        transform var(--duration-slow) var(--ease-out);
}

/* No tilt: a rotated block of moving film reads as crooked, not as an
   arrival. */
.film__frame.reveal {
    transform: translateY(1.75rem);
}

/* Added only when GSAP drives the tween — GSAP owns transform/opacity,
   transition must be off. */
.reveal--js {
    transition: none;
}

.reveal.is-in {
    opacity: 1;
    transform: none;
}


/* ---------------------------------------------------------------------------
   13. LĂȚIMI

   Restul fișierului e fluid și ține singur pe aproape toată scara. Aici
   stau numai locurile unde ceva chiar se rupe, cu motivul. Nu sunt praguri
   de dispozitiv — sunt lățimile la care compoziția cedează.

   em, nu px: interogările de lățime în em se raportează la mărimea de bază
   a browserului, deci cine își mărește textul primește aranjamentul strâmt
   mai devreme, exact când are nevoie.

     64em  blocul fructului nu mai încape pe trei coloane, bara de sus nu
           mai ține marca + navigarea + limba
     48em  benzile și subsolul nu mai au loc pe rânduri de câte trei
     30em  ultimele strâmtări, telefon mic
   --------------------------------------------------------------------------- */

@media (max-width: 63.99em) {

    /* ANTETUL. „Ferma Fruct" pleacă: la lățimea asta marca și numele nu
       lasă loc navigării sau butonului. Numele întreg rămâne în subsol. */
    .site-header__inner {
        grid-template-columns: 1fr auto;
    }

    .brand__word,
    .nav,
    .lang {
        display: none;
    }

    .burger {
        display: block;
    }

    /* Fără script panoul nu se deschide, deci butonul nu apare (secțiunea 3);
       rămâne navigarea simplă, care se rupe singură pe telefon. */
    .no-js .nav {
        display: block;
    }

    .no-js .site-header__inner {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-2xs) var(--space-m);
    }

    .drawer {
        display: block;
    }

    /* BANDA VIDEO. Rama își ține înălțimea din 34vw; sub 64em asta o lasă
       de trei ori mai lată decât înaltă — filmul se citea ca o dungă. */
    .film__frame {
        height: clamp(12rem, 40vw, 22rem);
    }

    /* BLOCUL FRUCTULUI. Trei coloane nu mai încap sub 64em, se așază pe o
       coloană. display: contents desface .grove__tell/.grove__lead ca cele
       șase bucăți să fie frați, puse în ordinea citirii — main.js urmărește
       .grove__head/.grove__intro/.grove__detail pentru reveal, nu părinții. */
    .orchard__groves {
        gap: calc(var(--space-section) * 1.15);
    }

    .grove,
    .grove--flip {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-m);
    }

    /* CULOARUL LINIEI. Pe o coloană calendarul e ultimul rând; fără culoar,
       linia desenată ar trece prin fotografii și text ca să-l ajungă —
       măsurat, tăia 18 blocuri la 320px. Culoarul o scoate pe margine, pe
       latura calendarului; costă lățime de text (248px rămase la 320px). */
    .grove {
        padding-inline: 0 var(--space-l);
    }

    .grove--flip {
        padding-inline: var(--space-l) 0;
    }

    .grove__tell,
    .grove__lead {
        display: contents;
    }

    .grove__head {
        order: 1;
    }

    .grove__intro {
        order: 2;
    }

    .grove__frame--a {
        order: 3;
    }

    .grove__aside {
        order: 4;
    }

    .grove__frame--b {
        order: 5;
    }

    /* Aceeași specificitate ca treptele din secțiunea 7, deci ordinea din
       fișier decide: pe o coloană nu mai există trepte de mărit fotografia.
       Plafonul de 26rem vine din fișierele sursă (840/960px). */
    .orchard__groves > .grove:nth-child(n) .grove__frame {
        width: min(100%, 26rem);
        margin-block-start: var(--space-s);
    }

    /* Zigzagul se păstrează pe o coloană cu margini automate: o fotografie
       la stânga, cealaltă la dreapta, invers de la un fruct la altul. */
    .grove__frame--a {
        margin-inline: 0 auto;
    }

    .grove__frame--b {
        margin-inline: auto 0;
    }

    .grove--flip .grove__frame--a {
        margin-inline: auto 0;
    }

    .grove--flip .grove__frame--b {
        margin-inline: 0 auto;
    }

    /* CALENDARUL. Ultimul din bloc, pe toată lățimea. Latura chenarului nu
       se schimbă aici — rămâne cea aleasă de .grove--flip, care ține linia
       desenată vie: se lipește de un capăt, traversează golul, se lipește
       de celălalt la fructul următor. */
    .grove__rail,
    .grove--mid .grove__rail {
        --rail-pad: var(--space-l);

        order: 6;
        flex: 0 0 auto;
        justify-content: flex-start;
        gap: var(--space-l);
        /* Marginea negativă scoate chenarul în culoarul deschis de .grove,
           ca linia să cadă la mijlocul lui. Rămân 8px până la container,
           28px până la fereastră la 320px — legănarea de 16px încape. */
        margin: var(--space-l) calc(var(--space-m) * -1) 0 0;
    }

    .grove--flip .grove__rail {
        margin-inline: calc(var(--space-m) * -1) 0;
    }

    /* Blocurile din mijloc se poartă ca cele de margine: coridorul de 3.4×
       --space-l dispare pe o coloană, deci linia se lipește de chenarul
       fiecărui calendar. Perechea din main.js e plot.mid, la aceeași
       lățime. */
    .orchard__groves.has-spine .grove--mid .grove__stage::before {
        right: calc(var(--rail-pad) * -1 - 0.3125rem);
    }

    .orchard__groves.has-spine .grove--mid.grove--flip .grove__stage::before {
        right: auto;
        left: calc(var(--rail-pad) * -1 - 0.3125rem);
    }

    /* DESENELE DIN FUNDAL. Vița creștea prin culoarul din mijlocul secțiunii;
       pe o coloană culoarul e chiar textul. Frunzele de sus/jos rămân
       împinse pe margine cu --shift; cele din mijlocul blocului se mută pe
       fotografii, singurele benzi fără text. */
    .motif--vine-leaf-c {
        --shift: 26vw;
    }

    .motif--vine-leaf-b {
        --shift: -26vw;
    }

    /* Frunzele din mijlocul blocului stau pe muchia dinspre culoar a
       fotografiilor, jumătate în spatele pozei (motifele sunt z-index: -1).
       Nicio literă ajunge deasupra: pixelul cel mai închis dădea 3.62:1,
       sub prag, deci se evită prin așezare, nu opacitate.
       --shift urmărește lățimea fotografiei (min(100%, 26rem)); schimbă
       plafonul de 26rem din .grove__frame și schimbă-l și aici. Procentele
       verticale sunt centrul fotografiei (poza A 22-39%, poza B 63-76%).
       Podeaua clampului nu e estetică: pe telefon fotografia ține toată
       coloana, deci frunza crește pe verticală ca să se citească drept
       frunză, nu pată. */
    .motif--vine-leaf-a {
        inset-block-start: calc(30% - var(--w) / 2);
        --w: clamp(9rem, 20vw, 13rem);
        --shift: calc(min(100%, 26rem) - 50%);
    }

    .motif--vine-leaf-d {
        inset-block-start: calc(70% - var(--w) / 2);
        --w: clamp(9.5rem, 22vw, 14rem);
        --shift: calc(50% - min(100%, 26rem));
    }

    .motif--fill-apple {
        margin-inline-start: 20vw;
    }

    .grove--flip .motif--fill-apple {
        margin-inline-start: -26vw;
    }

    /* Ramura laterală ieșea cu 20rem din bloc: pe ecran îngust ieșea de tot
       din cadru, iar overflow: clip o tăia complet. */
    .motif--grove-branch {
        inset-inline-end: -8rem;
        width: clamp(13rem, 46vw, 22rem);
        opacity: 0.32;
    }

    .grove--flip .motif--grove-branch {
        inset-inline-start: -8rem;
    }

    .motif--film-branch {
        width: clamp(10rem, 40vw, 16rem);
    }

    /* Șapte frunze peste declarație stăteau în golul din dreapta ei; pe o
       coloană golul dispare. Rămân trei, cele mai de sus. */
    .motif--head-leaf-c,
    .motif--head-leaf-e,
    .motif--head-leaf-f,
    .motif--head-leaf-g {
        display: none;
    }

    /* Din treisprezece frunze răzlețe rămân șase — restul erau poziționate
       pe procente din titlul lat și cad peste el la lățimea asta. */
    .motif--band-leaf-b,
    .motif--band-leaf-c,
    .motif--band-leaf-f,
    .motif--band-leaf-i,
    .motif--band-leaf-k,
    .motif--band-leaf-l,
    .motif--band-leaf-m {
        display: none;
    }

    /* CRENGILE SUBSOLULUI. Pe ecran lat stau în fâșia liberă dintre fereastră
       și container; sub 64em fâșia e doar --gutter, deci se ancorează în
       colțuri. Opacitatea coboară de la 0.62 la 0.38 (crema pe acuarelă la
       putere plină cădea la 2.40:1). Aerul vertical crește: fără el, creanga
       de sus pornea pe numele fermei și cea de jos acoperea linia de
       copyright. */
    .site-footer {
        --leaf: clamp(6.5rem, 22vw, 11rem);

        padding-block: var(--space-2xl);
    }

    .site-footer__leaf {
        opacity: 0.38;
    }

    /* O treime din propria lățime în afara cadrului: creanga intră în colț, nu
       se lipește de el. */
    .site-footer__leaf--top {
        inset-block-start: -1.5rem;
        inset-inline-start: auto;
        inset-inline-end: calc(var(--leaf) / -3);
    }

    /* -2.5rem, nu -1.5rem: la -1.5rem colțul de sus al cutiei atingea eticheta
       partenerilor pe 4px. Măsurat, nu ghicit. */
    .site-footer__leaf--bottom {
        inset-block-end: -2.5rem;
        inset-inline-start: calc(var(--leaf) / -3);
        opacity: 0.38;
    }
}


@media (min-width: 48em) and (max-width: 63.99em) {

    /* La tabletă fotografia mare lasă liberă jumătate de rând, în timp ce
       calendarul cădea după tot conținutul. Grila folosește numai acel gol;
       capul, proza și restul blocului își păstrează ordinea. */
    .grove,
    .grove--flip {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: var(--space-xl);
        row-gap: var(--space-m);
    }

    .grove__head,
    .grove__intro,
    .grove__aside {
        grid-column: 1 / -1;
    }

    .grove__head {
        grid-row: 1;
    }

    .grove__intro {
        grid-row: 2;
    }

    .grove__frame--a {
        grid-column: 1;
        grid-row: 3;
    }

    .grove__rail,
    .grove--mid .grove__rail {
        grid-column: 2;
        grid-row: 3;
        align-self: stretch;
        margin-block-start: var(--space-s);
    }

    .grove__aside {
        grid-row: 4;
    }

    .grove__frame--b {
        grid-column: 2;
        grid-row: 5;
    }

    .grove--flip .grove__frame--a {
        grid-column: 2;
    }

    .grove--flip .grove__rail {
        grid-column: 1;
    }

    .grove--flip .grove__frame--b {
        grid-column: 1;
    }

    /* Keep the tablet closing motifs in row 5; another row can overlap copy. */
    .motif--vine-leaf-d {
        inset-block-start: calc(var(--tablet-leaf-b-position, 90%) - var(--w) / 2);
        --w: clamp(8.5rem, 20vw, 11rem);
        --shift: 0rem;
    }

    .orchard__groves > .grove:nth-child(3) .motif--vine-leaf-d {
        --tablet-leaf-b-position: 88%;
    }

    .orchard__groves > .grove:nth-child(4) .motif--vine-leaf-d {
        --tablet-leaf-b-position: 86%;
    }

    .motif--fill-apple {
        grid-row: 5;
        grid-column: 1;
        inset-block: 18% auto;
        inset-inline: 12% auto;
        margin-inline-start: 0;
        width: clamp(4.25rem, 10vw, 5.5rem);
        opacity: 0.52;
    }

    .grove--flip .motif--fill-apple {
        grid-column: 2;
        margin-inline-start: 0;
    }

    .orchard__groves > .grove:nth-child(2) .motif--fill-apple {
        inset-block-start: 58%;
        inset-inline-start: 58%;
        rotate: 7deg;
    }

    .orchard__groves > .grove:nth-child(3) .motif--fill-apple {
        inset-block-start: 56%;
        inset-inline-start: 16%;
        rotate: -11deg;
    }

    .orchard__groves > .grove:nth-child(4) .motif--fill-apple {
        inset-block-start: 12%;
        inset-inline-start: 56%;
        rotate: 10deg;
    }
}


@media (max-width: 47.99em) {

    /* DECLARAȚIA. Fraza și nota stăteau la capetele aceluiași rând; sub
       48em rândul se rupe oricum și nota rămânea aliniată greșit. */
    .orchard__head {
        display: block;
        padding-block: var(--space-l);
    }

    .orchard__statement {
        max-width: 18ch;
    }

    .orchard__note {
        margin-block-start: var(--space-m);
        text-align: start;
    }

    /* PRAGUL "FRUCTELE NOASTRE". Riglele plus titlul depășeau lățimea
       ferestrei; se așază pe trei rânduri. Frunza urcă deasupra titlului,
       singurul loc de unde nu poate cădea peste litere. */
    .orchard__catalog {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: var(--space-s);
        margin-block: var(--space-2xl) var(--space-l);
    }

    .orchard__catalog-rule {
        width: min(7rem, 40%);
    }

    .orchard__catalog-leaf {
        inset-block: auto calc(100% + var(--space-2xs));
        inset-inline: 50% auto;
        width: clamp(3rem, 12vw, 4rem);
        translate: -50% 0;
        rotate: -14deg;
    }

    /* BANDA CU CIFRE. Trei perechi nu mai încap pe un rând; pe coloană,
       liniile despărțitoare trec deasupra în loc de lateral. */
    .brief__list {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: var(--space-s) var(--space-m);
    }

    .brief__item {
        padding: var(--space-s) var(--space-2xs);
    }

    .brief__item + .brief__item {
        border-inline-start: 0;
        border-block-start: var(--hairline) solid rgba(73, 48, 23, 0.3);
    }

    .film__frame {
        height: clamp(10rem, 44vw, 18rem);
    }

    /* ÎNTREBĂRI. --space-l de o parte și de alta lăsa răspunsului mai puțin de
       jumătate din lățimea plăcii. */
    .faq__q {
        padding: var(--space-s) var(--space-m);
    }

    .faq__a {
        margin-inline: var(--space-m);
    }

    /* SUBSOLUL. Ambele rânduri erau grile de trei coloane, nu mai încap. */
    .site-footer__inner {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: var(--space-l);
        text-align: center;
    }

    .site-footer__nav {
        grid-column: auto;
    }

    .site-footer__base {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: var(--space-s);
    }

    .site-footer__legal {
        grid-column: auto;
        grid-row: auto;
    }

    .site-footer__lang {
        justify-self: center;
    }

    .partners {
        justify-content: center;
        gap: var(--space-m);
    }

    .partners__list {
        justify-content: center;
    }
}


/* Lățimea nu spune cu ce se atinge ecranul — un laptop poate avea ecran
   tactil. Măsurat: linkurile din subsol ies 19px, siglele 24px, sub pragul
   de 44px pentru deget. */
@media (pointer: coarse) {

    .site-footer__nav-link {
        display: inline-block;
        padding-block: var(--space-xs);
    }

    /* Distanța dintre sigle o dă acum marginea lor de atins, nu gap. */
    .site-footer__social {
        gap: 0;
    }

    .site-footer__social-link {
        padding: var(--space-xs);
    }
}


@media (max-width: 29.99em) {

    /* Calendarul: --space-l de la chenar la text lăsa notelor etapelor o coloană
       prea îngustă pe un ecran de 320. */
    .grove__rail,
    .grove--mid .grove__rail {
        --rail-pad: var(--space-m);
    }

    .orchard__catalog-rule {
        width: min(5rem, 34%);
    }

    /* Ultimele două frunze din bandă care mai cădeau peste titlu la lățimea
       asta, unde "Întrebări frecvente" ocupă trei rânduri. */
    .motif--band-leaf-d,
    .motif--band-leaf-g {
        display: none;
    }

    .partners {
        justify-content: center;
    }

    .partners__list {
        gap: var(--space-s) var(--space-m);
    }
}


/* ---------------------------------------------------------------------------
   14. ECRANE MARI

   85em e lățimea la care coloana atinge --container (78rem) și compoziția nu
   mai crește — măsurat, se întâmplă pe la 1355px. Peste ea, tot ce mai vine
   e hârtie goală de o parte și de alta. Nimic nu se rupe acolo, dar două
   lucruri încetează să mai fie adevărate:

     - desenele de fundal sunt așezate față de secțiune, iar secțiunile sunt
       cât fereastra, deci pleacă din compoziție în marginile goale;
     - toate clamp-urile din tokens.css se opresc pe la 1330-1430px, deci
       pagina rămâne la mărimea de laptop pe un monitor de 27 țoli.

   Două unelte, atât:

     --lane            câtă hârtie goală e peste --gutter, de fiecare parte.
                       Zero sub prag, deci regulile de aici trec continuu
                       prin el.
     calc(50% - Nrem)  poziție măsurată din mijlocul paginii, nu din marginea
                       ferestrei. Mijlocul paginii e și mijlocul coloanei,
                       deci desenul rămâne lipit de compoziție oricât de lată
                       e fereastra.
   --------------------------------------------------------------------------- */

@media (min-width: 85em) {

    :root {
        /* 100vw include bara de derulare (~15px); desenele care o folosesc
           sunt tăiate de overflow: clip, deci eroarea nu se vede. */
        --lane: max(0px, (100vw - var(--container)) / 2 - var(--gutter));

        /* Scara se oprea la ~1330px; de-aici urcă din nou, încet (titlul
           4rem la 1360, 5rem la 2560). Corpul textului NU crește — 18px se
           citește la fel pe orice monitor. */
        --step-3: clamp(2.8125rem, 2.32rem + 0.58vw, 3.25rem);
        --step-4: clamp(4rem, 2.87rem + 1.33vw, 5rem);
        --space-section: clamp(8.5rem, 6.8rem + 2vw, 10rem);
    }

    /* Golul dintre blocuri crește cu --space-section; frunzele de la
       capetele viței trebuie să-l acopere împreună, vezi secțiunea 2. */
    .motif--vine-leaf-c {
        inset-block-start: -5.25rem;
    }

    .motif--vine-leaf-b {
        inset-block-end: -5.25rem;
    }

    /* CRENGILE intră din marginea ferestrei și se opresc peste colțul
       blocului — cresc cu --lane. Plafonul de 64rem e lățimea reală a
       branch-1024.webp. */
    .motif--grove-branch {
        /* Gazda e blocul, nu fereastra, deci retragerea crește și ea —
           altfel desenul s-ar termina în hârtia goală. */
        inset-inline-end: calc(-20rem - var(--lane));
        width: min(clamp(18rem, 34vw, 34rem) + var(--lane), 64rem);
    }

    .grove--flip .motif--grove-branch {
        inset-inline-end: auto;
        inset-inline-start: calc(-20rem - var(--lane));
    }

    /* Aceste trei au gazda cât fereastra, deci retragerea e deja bună;
       le lipsește doar lungimea până la coloană. */
    .motif--cross {
        width: min(clamp(20rem, 42vw, 40rem) + var(--lane), 64rem);
    }

    .motif--film-branch {
        width: min(clamp(16rem, 28vw, 28rem) + var(--lane), 64rem);
    }

    /* FRUNZELE RĂZLEȚE erau așezate în procente din secțiune (cât fereastra);
       la 2560 jumătate cădeau în marginile goale. Recalculate din mijlocul
       paginii: N = 42.5 − 0.85 × procentul vechi. band-leaf-e stă la 50%,
       nu se mută. */
    .motif--head-leaf-a {
        inset-inline-end: calc(50% - 40.8rem);
    }

    .motif--head-leaf-b {
        inset-inline-end: calc(50% - 32.3rem);
    }

    .motif--head-leaf-c {
        inset-inline-end: calc(50% - 22.95rem);
    }

    .motif--head-leaf-d {
        inset-inline-end: calc(50% - 5.95rem);
    }

    .motif--head-leaf-e {
        inset-inline-end: calc(50% - 10.2rem);
    }

    .motif--head-leaf-f {
        inset-inline-end: calc(50% - 16.15rem);
    }

    .motif--head-leaf-g {
        inset-inline-end: calc(50% - 19.55rem);
    }

    .motif--band-leaf-a {
        inset-inline-start: calc(50% - 13.6rem);
    }

    .motif--band-leaf-b {
        inset-inline-end: calc(50% - 25.5rem);
    }

    .motif--band-leaf-c {
        inset-inline-start: calc(50% - 25.5rem);
    }

    .motif--band-leaf-d {
        inset-inline-start: calc(50% - 34rem);
    }

    .motif--band-leaf-f {
        inset-inline-end: calc(50% - 18.7rem);
    }

    .motif--band-leaf-g {
        inset-inline-end: calc(50% - 34rem);
    }

    .motif--band-leaf-h {
        inset-inline-start: calc(50% - 39.1rem);
    }

    .motif--band-leaf-i {
        inset-inline-end: calc(50% - 37.4rem);
    }

    .motif--band-leaf-j {
        inset-inline-end: calc(50% - 28.9rem);
    }

    .motif--band-leaf-k {
        inset-inline-start: calc(50% - 15.3rem);
    }

    .motif--band-leaf-l {
        inset-inline-end: calc(50% - 13.6rem);
    }

    .motif--band-leaf-m {
        inset-inline-start: calc(50% - 8.5rem);
    }

    .motif--faq-apple {
        inset-inline-start: calc(50% - 39.95rem);
    }

    /* SUBSOL. --leaf-lane crește cu fereastra, dar crengile ieșeau din
       cadru la 2560 (368px goi la margine) — același plafon de 64rem. */
    .site-footer {
        --leaf: min(clamp(17rem, 26vw, 28rem) + var(--lane), 64rem);
    }
}


/* ===========================================================================
   SFÂRȘITUL LUI style.css — și al paginii principale.

   Fișierul ăsta stilizează NUMAI index.html. Pagina de contact are fișierul
   ei, css/contact.css, încărcat după acesta.

   PENTRU URMĂTORUL CLAUDE: dacă lucrezi la contact.html, deschide
   css/contact.css și oprește-te acolo. Nu citi cele ~2900 de linii de
   deasupra: sunt hero-ul, blocurile de fructe, spina desenată, motivele de
   fundal și cele două pasuri de lățimi ale paginii principale, niciunul
   folosit pe pagina de contact. Ce se împarte între pagini sunt exact trei
   componente — .site-header, .drawer/.burger și .site-footer — iar
   contact.css spune în capul lui ce face cu fiecare.

   Regula, în ambele sensuri: CSS de contact nu se scrie aici, iar CSS de
   pagină principală nu se scrie în contact.css. Când o componentă chiar
   ajunge să fie folosită pe ambele pagini, locul ei e aici, cu o notă în
   DESIGN.md.
   =========================================================================== */