/* ============================================================
   ESHATON · sistemul editorial
   ------------------------------------------------------------
   Un singur fișier pentru tot site-ul. Înlocuiește site.css,
   editorial.css, acasa-editorial.css și pagini-editorial.css.

   Principiul, luat din publicațiile de arhitectură: litera stă
   mică și tăcută, fotografia vorbește. Titlul de fișă are 19px,
   nu 40. Eticheta are 10px, majuscule, cu aer între litere.
   Rezumatul are 14px și două rânduri. Restul e spațiu alb.

   Culorile vin din tokens.css. Aici nu se scrie niciun hex.
   ============================================================ */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:var(--antet)}
body{
  margin:0;
  background:var(--alb);
  color:var(--text);
  font-family:var(--sans);
  font-weight:var(--reg);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img,video,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,h4{margin:0;font-weight:var(--reg);line-height:1.14;letter-spacing:-.012em}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
hr{border:0;border-top:1px solid var(--linie);margin:0}
:focus-visible{outline:2px solid var(--mud);outline-offset:3px}
body.meniu-deschis,html.fara-derulare,html.fara-derulare body{overflow:hidden}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
/* ATENȚIE · orice clasă care se pune pe același element cu .wrap
   trebuie să folosească padding-top / padding-bottom, NU scurtătura
   „padding". Scurtătura are aceeași specificitate ca .wrap și, fiind
   scrisă mai jos în fișier, îi șterge marginile laterale. Așa au
   ajuns grilele lipite de marginea ecranului, în timp ce antetul și
   colofonul își păstrau aerul. */
.coloana{max-width:var(--coloana)}
/* Capcana pentru roboți.
   Un câmp pe care omul nu-l vede și deci nu-l completează, dar
   pe care robotul îl umple pentru că citește doar HTML-ul.
   Nu se ascunde cu display:none — unii roboți știu să sară
   câmpurile ascunse așa. Se scoate din pagină, ca textul pentru
   cititoarele de ecran, dar cu aria-hidden și tabindex -1 pe
   deasupra, ca omul cu tastatura sau cu cititor de ecran să nu
   dea peste el niciodată. */
.capcana{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
/* Cutia are 1px, dar un <input> își ține lățimea lui implicită de
   vreo 180px indiferent de părinte. Pe un ecran de 320, câmpul
   ieșea din pagină și scotea o bară de derulare orizontală — o
   capcană pentru roboți care strica pagina pentru oameni.
   Deci se strânge și câmpul, nu doar cutia. */
.capcana input{width:1px;height:1px;min-width:0;padding:0;border:0}

/* Plasa de dedesubt. Dacă tot rămâne un cuvânt mai lat decât
   coloana — un nume propriu lung, o adresă — se rupe el, nu
   pagina. Se întâmplă numai când nu mai e altă soluție: cuvintele
   normale se despart tot la spații. */
h1,h2,h3,.plansa__titlu,.cap h1{overflow-wrap:break-word}

.doar-cititor{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.sari-la-continut{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--mud);color:var(--alb);
  padding:12px 20px;font-size:13px;
}
.sari-la-continut:focus{left:0}

/* ---------- eticheta mică · piesa care ține tot sistemul ---- */
.et{
  display:block;
  font-size:var(--et);
  letter-spacing:var(--ls-et);
  text-transform:uppercase;
  font-weight:var(--med);
  line-height:1;
  color:var(--text-doi);
}
.et--pe-inchis{color:rgba(255,255,255,.78)}

/* ---------- legătura subliniată ---------- */
.leg{
  display:inline-block;
  border-bottom:1px solid currentColor;
  padding-bottom:3px;
  font-size:var(--et);
  letter-spacing:var(--ls-et);
  text-transform:uppercase;
  font-weight:var(--med);
  transition:color .2s,border-color .2s;
}
.leg:hover{color:var(--gri)}
.leg--pe-inchis{color:var(--alb);border-bottom-color:rgba(255,255,255,.5)}
.leg--pe-inchis:hover{color:var(--alb);border-bottom-color:var(--alb)}

/* ============================================================
   1 · BARA DE SUS
   ============================================================ */
.promo{background:var(--mud);color:var(--alb);text-align:center;padding:9px 20px}
.promo a{
  font-size:var(--et);letter-spacing:var(--ls-et);
  text-transform:uppercase;font-weight:var(--reg);
}
.promo strong{font-weight:var(--med)}
.promo__lung,.promo__scurt{display:inline}
.promo a:hover{opacity:.62}

/* ============================================================
   2 · CAPUL DE PAGINĂ
   ============================================================ */
.antet{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:20px;
  max-width:var(--max);
  margin:0 auto;
  padding:24px var(--pad) 20px;
}
.antet__stanga{display:flex;gap:16px;align-items:center}
.antet__dreapta{display:flex;gap:22px;align-items:center;justify-content:flex-end}
.antet__dreapta a{
  font-size:var(--et);letter-spacing:var(--ls-et);
  text-transform:uppercase;font-weight:var(--med);color:var(--text-doi);
}
.antet__dreapta a:hover{color:var(--text)}

.sigla{display:block;justify-self:center}
.sigla img{width:clamp(178px,20vw,238px)}

.social{width:14px;height:14px;color:var(--text-doi);transition:color .2s}
.social:hover{color:var(--text)}

/* Cele trei linii rămân de 20px — desenul nu se schimbă. Se schimbă
   doar cât poate rata degetul: pseudo-elementul întinde suprafața de
   atins la 44×44 fără să miște nimic în grilă, fiindcă e absolut.
   Butonul principal de navigare de pe telefon avea 20×23. */
.burger{display:none;position:relative;flex-direction:column;gap:4px;width:20px;padding:6px 0}
.burger::before{content:"";position:absolute;left:-12px;right:-12px;top:-11px;bottom:-10px}
.burger span{display:block;height:1px;background:var(--text)}

/* ============================================================
   3 · NAVIGAȚIA
   ============================================================ */
.bara-meniu{
  border-top:1px solid var(--linie);
  border-bottom:1px solid var(--linie);
  position:sticky;top:0;z-index:60;
  background:var(--alb);
}
.meniu{
  display:flex;justify-content:center;gap:36px;
  max-width:var(--max);margin:0 auto;padding:0 var(--pad);
}
.meniu > li{position:static}
/* Învelișul rândului există pentru telefon, unde ține legătura și
   clapa una lângă alta. Pe desktop nu are ce face: se poartă ca
   și cum n-ar fi. */
.meniu__rand{display:contents}
.meniu__clapa{display:none}
/* ATENȚIE la selector.
   Legătura nu mai e copil direct al lui <li>: am pus între ele
   învelișul .meniu__rand, ca pe telefon să stea alături de clapa
   sertarului. Pe desktop învelișul e display:contents, deci nu se
   vede — dar selectorii lucrează pe DOM, nu pe cum se afișează.
   Regula scrisă „.meniu > li > a" a încetat pur și simplu să mai
   prindă, iar meniul și-a pierdit majusculele, spațierea și
   mărimea. Trebuie mers prin înveliș. */
.meniu > li > .meniu__rand > a{
  display:block;padding:14px 0;
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:var(--reg);
  border-bottom:1px solid transparent;
  transition:border-color .2s;
}
.meniu > li:hover > .meniu__rand > a,
.meniu > li > .meniu__rand > a[aria-current]{border-bottom-color:var(--text)}

.sertar{
  position:absolute;left:0;right:0;top:100%;
  background:var(--alb);
  border-bottom:1px solid var(--linie);
  padding:26px var(--pad) 32px;
  display:none;
}
.meniu > li:hover .sertar,
.meniu > li:focus-within .sertar{display:block}
.sertar__inner{max-width:var(--max);margin:0 auto;display:flex;gap:52px}
.sertar a{display:block;font-size:13px;color:var(--text-doi);padding:5px 0}
.sertar a:hover{color:var(--text)}
.sertar__cap{
  font-size:var(--et);letter-spacing:var(--ls-et);
  text-transform:uppercase;color:var(--text);margin-bottom:8px;font-weight:var(--med);
}
/* Capul de coloană e și legătură când coloana e un eveniment cu
   pagina lui: „Salon Rural Contemporan" duce la salon, edițiile
   stau sub el. Regula .sertar a e mai specifică decât .sertar__cap
   și i-ar mânca mărimea și culoarea, deci o luăm înainte. */
.sertar a.sertar__cap{
  font-size:var(--et);letter-spacing:var(--ls-et);
  text-transform:uppercase;color:var(--text);font-weight:var(--med);
  padding:0;margin-bottom:8px;
}
.sertar a.sertar__cap:hover{
  color:var(--text);text-decoration:underline;text-underline-offset:3px;
}

/* Perdeaua de telefon · pe desktop nu există nimic din ea.
   .meniu__corp e doar înveliș de derulare pentru ecrane mici:
   display:contents îl face să dispară din calcul, ca lista să
   rămână copil direct al barei și grila de sus să nu se schimbe. */
.meniu__cap{display:none}
.meniu__corp{display:contents}
.meniu__subsol,.meniu__marunt{display:none}

/* ============================================================
   4 · HERO · caruselul de pe acasă
   ============================================================ */
.hero{position:relative;background:var(--mud-adanc);overflow:hidden}
.plansa{position:absolute;inset:0;opacity:0;transition:opacity 1s ease;pointer-events:none}
.plansa.pornit{opacity:1;pointer-events:auto}
.plansa:first-child{position:relative}
.plansa__foto{height:clamp(430px,74vh,780px);width:100%;position:relative;background:var(--mud-adanc)}
.plansa__foto img{width:100%;height:100%;object-fit:cover}
/* Fotografiile verticale în hero: cadrul e de peste două ori mai
   lat decât înalt, deci tăierea din centru le retează exact ce au
   mai important. --jos coboară încadrarea, ca lucrul privit să
   rămână în cadru. */
.plansa__foto--jos img{object-position:center 62%}
/* Două voaluri suprapuse. Unul de jos în sus, ca titlul să stea pe
   închis oricât de luminoasă e fotografia; unul dinspre stânga, ca
   eticheta mică să nu cadă pe un petic alb. Fără ele, o fotografie
   de amiază înghite textul. */
.plansa__voal{
  position:absolute;inset:0;
  background:
    linear-gradient(to right,rgba(20,20,20,.62) 0%,rgba(20,20,20,.28) 38%,rgba(20,20,20,0) 64%),
    linear-gradient(to top,rgba(20,20,20,.86) 0%,rgba(20,20,20,.44) 34%,rgba(20,20,20,0) 66%);
}
.plansa__corp{
  position:absolute;left:var(--pad);right:var(--pad);bottom:52px;
  color:var(--alb);max-width:660px;
}
.plansa__corp .et{margin-bottom:15px}
.plansa__titlu{font-size:clamp(30px,3.6vw,48px);font-weight:var(--light);line-height:1.05}
.plansa__sub{font-size:16px;color:rgba(255,255,255,.84);margin-top:9px;line-height:1.45}
.plansa__corp .leg{margin-top:24px}

/* Punctele stau în dreapta jos, în hero. Acolo urcă și bara
   plutitoare cu radioul: 44px lățime, la 22px de margine, deci
   ocupă primii 66px. Cu doar --pad, punctele ajungeau la 10px
   de ea și cele două se citeau ca un singur grup. Le dăm bara
   la o parte. Am încercat întâi să le întorc la marginea normală
   sub 900px, dar acolo hero-ul e scund, deci fundul lui coincide
   cu fundul ferestrei, unde stă bara: se suprapuneau. Decalajul
   rămâne la toate lățimile. */
/* Planșa cu afișul.
   Un afiș nu e o fotografie: are propriul lui text, propria lui
   margine și propria lui hârtie. Decupat ca o fotografie, se
   taie tocmai partea de jos, unde scrie crama și intrarea
   liberă — iar titlul hero-ului cade exact peste titlul lui.
   Două straturi de literă care se bat.

   Deci intră întreg, pe hârtia lui, fără voal și fără text
   suprapus. Rămâne doar legătura, în cerneală, jos în stânga.
   Aceeași regulă ca .fisa__foto--afis și .feature__foto--afis. */
.plansa--afis .plansa__foto{background:#F6F4F0}
.plansa--afis .plansa__foto img{object-fit:contain;padding:clamp(18px,2.6vw,40px)}
.plansa--afis .plansa__corp{color:var(--text)}

.puncte{position:absolute;right:calc(var(--pad) + 62px);bottom:58px;display:flex;gap:17px;z-index:5}
/* Punctul rămâne de 7px la vedere. Distanța dintre puncte crește de
   la 9 la 17px, ca suprafețele de atins să ajungă la 24 fără să se
   suprapună — două ținte care se calcă una pe alta sunt mai rele
   decât una mică, fiindcă apeși pe ce nu voiai. */
.puncte button{position:relative;width:7px;height:7px;background:rgba(255,255,255,.34);transition:background .2s}
.puncte button::after{content:"";position:absolute;left:-8px;right:-8px;top:-9px;bottom:-9px}
.puncte button.pornit{background:var(--alb)}

/* ============================================================
   5 · CAPUL PAGINILOR INTERIOARE
   ============================================================ */
.cap{padding-top:clamp(52px,6vw,86px);padding-bottom:clamp(34px,4vw,52px);border-bottom:1px solid var(--linie)}
.cap__inapoi{display:inline-block;font-size:var(--et);letter-spacing:var(--ls-et);
  text-transform:uppercase;color:var(--text-doi);margin-bottom:22px}
.cap__inapoi:hover{color:var(--text)}
.cap .et{margin-bottom:20px}
.cap h1{font-size:clamp(32px,4.4vw,58px);font-weight:var(--light);max-width:19ch}
.cap__lead{margin-top:20px;font-size:17px;color:var(--text-doi);max-width:52ch;line-height:1.5}

/* ------------------------------------------------------------
   .tonic · singura excepție de la interdicția de italic
   ------------------------------------------------------------
   În fonts.css scrie „i,em,cite,dfn,address,var{font-style:normal}".
   Regula aia rămâne: niciun <em> întâlnit într-un text nu se
   înclină de la sine. Se înclină doar ce poartă clasa asta,
   pusă anume, cuvânt cu cuvânt.

   Așa interdicția nu se transformă în „uneori da, uneori nu":
   rămâne o interdicție cu o portiță numită. Dacă mâine apare
   un <em> într-o însemnare, el rămâne drept.

   .tonic bate regula din fonts.css prin specificitate (0,1,0
   față de 0,0,1), deci nu are nevoie de !important și nu
   contează ordinea în care se încarcă cele două fișiere.
   ------------------------------------------------------------ */
.tonic{font-style:italic;font-weight:var(--bold)}


.banda-foto{margin:0;position:relative}

/* ------------------------------------------------------------
   .foto-text · fotografia așezată în coloana textului
   ------------------------------------------------------------
   .banda-foto de deasupra întinde imaginea pe toată lățimea
   ferestrei și o taie la o înălțime fixă. Merge pentru
   fotografiile mari ale casei (1600–2200px), nu și pentru cele
   mici: o fotografie de 724px întinsă pe un ecran de 1900px e
   mărită de două ori și jumătate — și tot tăiată pe deasupra.

   Aici imaginea își păstrează lățimea ei adevărată și se vede
   întreagă. Nu are width:100%, tocmai ca să nu fie mărită
   niciodată peste ce are; pe ecrane înguste, max-width din
   regula globală o strânge singur.
   ------------------------------------------------------------ */
.foto-text{
  /* stă în coloana textului, deci nu-și pune propriile margini
     laterale: le are de la coloană. Așa se aliniază exact cu
     rândurile de deasupra, fără niciun număr potrivit de mână. */
  margin:34px 0 0;
}
.foto-text img{width:auto}
.foto-text figcaption{
  padding-top:12px;
  font-size:var(--et);letter-spacing:var(--ls-et);text-transform:uppercase;
  color:var(--text-doi);
}
.banda-foto img{width:100%;height:clamp(300px,48vh,560px);object-fit:cover}
.banda-foto figcaption{
  padding:12px var(--pad) 0;max-width:var(--max);margin:0 auto;
  font-size:var(--et);letter-spacing:var(--ls-et);text-transform:uppercase;
  /* Legenda de sub bandă spune unde și când — informație, nu
     ornament. #9C9C9C dă 2,75, iar la 10px e cu atât mai greu de
     citit. Trece pe vocea a doua. */
  color:var(--text-doi);
}

/* ============================================================
   6 · SECȚIUNE ȘI CAP DE SECȚIUNE
   ============================================================ */
.sectiune{padding-top:var(--aer)}
.sectiune--stramt{padding-top:clamp(48px,5vw,72px)}
.cap-sect{
  display:flex;align-items:baseline;justify-content:space-between;gap:24px;
  border-bottom:1px solid var(--text);
  padding-bottom:11px;margin-bottom:36px;
}
.cap-sect .et{font-size:12px;letter-spacing:.12em;color:var(--text)}
.cap-sect a{font-size:var(--et);letter-spacing:var(--ls-et);text-transform:uppercase;color:var(--text-doi)}
.cap-sect a:hover{color:var(--text)}

/* ============================================================
   7 · GRILA DE FIȘE
   ============================================================ */
.grila{display:grid;grid-template-columns:repeat(3,1fr);column-gap:var(--gut);row-gap:54px}
.grila--2{grid-template-columns:repeat(2,1fr)}
.grila--4{grid-template-columns:repeat(4,1fr);row-gap:46px}

.fisa{display:block}
.fisa figure{margin:0;overflow:hidden}
.fisa__foto{aspect-ratio:4/3;background:var(--spalat);overflow:hidden}
.fisa__foto img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.6,.2,1)}
.fisa:hover .fisa__foto img{transform:scale(1.03)}
.fisa__corp{padding-top:16px}
.fisa h3{font-size:19px;font-weight:var(--reg);transition:color .2s}
.fisa__doi{font-size:19px;font-weight:var(--light);color:var(--text-doi);line-height:1.18}
.fisa__rez{font-size:14px;margin-top:11px;line-height:1.52;color:var(--text)}
.fisa__etichete{display:flex;gap:14px;margin-top:14px;flex-wrap:wrap}
.fisa__etichete span{
  font-size:var(--et);letter-spacing:var(--ls-et);
  text-transform:uppercase;color:var(--text-doi);
}
/* Starea unei ediții care n-a avut încă loc.
   Nu mai stă printre etichetele de dedesubt, unde se citea la
   fel ca „Cinema" sau „Arhivă" — adică se pierdea. Stă pe
   fotografie, în colțul din stânga sus, ca un bilet lipit
   deasupra: hârtia paginii, cerneala paginii, aceeași literă
   mică și rărită ca toate etichetele.

   Fără culoare nouă. Site-ul are unsprezece griuri și nimic
   altceva; roșul, lemnul și aurul trăiesc numai în fotografii.
   Un singur cuvânt roșu în interfață ar fi prima excepție, iar
   prima excepție e cea care deschide ușa.

   Regula de conținut, care contează mai mult decât CSS-ul: o
   ediție care n-a avut loc nu are documentație. Pe fișa ei nu
   stă o fotografie de la un eveniment. */
.fisa__foto{position:relative}
.fisa__stare,
.feature__stare{
  position:absolute;top:0;left:0;z-index:2;
  padding:9px 14px;
  background:var(--hartie);color:var(--text);
  font-size:var(--et);letter-spacing:var(--ls-et);text-transform:uppercase;
}

.fisa:hover h3{color:var(--gri)}

/* Afișul într-o fișă. Ca și în feature: nu se taie, are text în el.
   Intră întreg, pe hârtia lui, în cadrul de 4:3. */
.fisa__foto--afis{background:#F6F4F0}
.fisa__foto--afis img{object-fit:contain;padding:14px}
.fisa:hover .fisa__foto--afis img{transform:none}

/* fișă înaltă, pentru portrete */
.fisa--portret .fisa__foto{aspect-ratio:4/5}

/* ============================================================
   8 · BANDA ÎNCHISĂ · crez, radio, citate
   ============================================================ */
.banda{
  background:var(--mud);color:var(--alb);
  margin-top:var(--aer);
  padding:var(--aer-banda) 0;
}
.banda--centru{text-align:center}
.banda .et{color:var(--pe-inchis-trei);margin-bottom:32px}
.banda blockquote{
  margin:0 auto;max-width:840px;
  font-size:clamp(22px,2.5vw,33px);font-weight:var(--light);
  line-height:1.4;
}
.banda__semn{
  margin-top:28px;
  font-size:var(--et);letter-spacing:var(--ls-et);
  text-transform:uppercase;color:var(--pe-inchis-trei);
}
.banda p{color:var(--pe-inchis-doi)}
.banda .leg{margin-top:32px}

/* ============================================================
   9 · FEATURE PE DOUĂ COLOANE
   ============================================================ */
/* Blocul stă pe grila paginii, ca tot restul.
   A fost o vreme lipit de marginile ecranului, ca fotografia să
   „iasă din pagină". Nu funcționa: ieșea doar în stânga, în timp
   ce textul respecta marginea din dreapta. Pe un ecran de 1920,
   fotografia pornea de la 0 iar toate titlurile de deasupra ei
   de la 236 — blocul părea că atârnă spre stânga. Un singur
   element care sparge marginea nu se citește ca o decizie, se
   citește ca o greșeală.
   Aceleași două valori ca .wrap, deci aceeași margine. */
.feature{
  display:grid;grid-template-columns:1.12fr 1fr;align-items:stretch;
  max-width:var(--max);margin:var(--aer) auto 0;padding-inline:var(--pad);
}
.feature--sus{margin-top:0}
.feature__foto{background:var(--spalat);min-height:520px;position:relative;overflow:hidden}
.feature__foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Afișul nu se taie. E o compoziție gata făcută, cu text în ea, deci
   intră întreg, pe fondul lui crem, nu decupat ca o fotografie. */
.feature__foto--afis{background:#F6F4F0}
.feature__foto--afis img{object-fit:contain;padding:clamp(16px,3vw,40px)}
.feature--inchis .feature__foto--afis{background:#F6F4F0}
.feature__text{
  padding-block:clamp(48px,5vw,78px);
  padding-inline:clamp(34px,4vw,68px) 0;
  display:flex;flex-direction:column;justify-content:center;
}
.feature__text .et{margin-bottom:20px}
.feature__text h2{font-size:clamp(26px,2.8vw,38px);font-weight:var(--light)}
.feature__doi{font-size:clamp(26px,2.8vw,38px);font-weight:var(--light);color:var(--text-doi);line-height:1.14}
.feature__text p{margin-top:20px;max-width:56ch;line-height:1.6}
/* Lista de ingrediente a serii, exact cum o scrie Alina: cuvinte
   separate, nu propoziție. Stă puțin mai jos și mai stins decât
   restul, ca o legendă. */
.feature__ingrediente{
  margin-top:18px;font-size:14px;color:var(--text-doi);
  letter-spacing:.01em;max-width:44ch;
}
.feature--inchis .feature__ingrediente{color:var(--pe-inchis-doi)}
.feature--inchis{background:var(--mud);color:var(--alb)}
.feature--inchis .feature__text .et{color:var(--pe-inchis-trei)}
.feature--inchis .feature__doi{color:var(--pe-inchis-doi)}
.feature--inchis p{color:var(--pe-inchis-doi)}
.feature--inchis .feature__foto{background:var(--mud-adanc)}

/* lista de date sub feature */
.date{margin-top:28px;border-top:1px solid var(--linie);padding-top:18px}
.date div{display:flex;gap:18px;padding:7px 0;font-size:14px}
.date dt{
  width:104px;flex:none;padding-top:3px;
  font-size:var(--et);letter-spacing:var(--ls-et);
  text-transform:uppercase;color:var(--text-doi);
}
.date dd{margin:0}
.feature--inchis .date{border-top-color:var(--linie-clara)}
/* Eticheta din lista de date, când lista stă pe fond închis.
   Regula exista pentru două contexte anume (.feature--inchis și
   .afis-detalii) și lipsea pentru al treilea, banda închisă de pe
   pagina Oamenii: acolo rămânea #767676 pe #252525, adică 3,37 —
   sub pragul AA, la 10px. Acum e scrisă o singură dată, pentru
   orice părinte care poartă cerneala. */
.feature--inchis .date dt,
.banda .date dt,
.pe-inchis .date dt{color:var(--pe-inchis-doi)}
.feature--inchis .date dd{color:var(--alb)}
.feature__text .leg{align-self:flex-start;margin-top:32px}

/* ============================================================
   10 · TEXT LUNG
   ============================================================ */
.text-lung{padding-top:var(--aer)}
.text-lung .coloana > p{
  font-size:17px;line-height:1.72;margin-top:24px;max-width:62ch;
}
.text-lung .coloana > p:first-of-type{margin-top:26px}
.text-lung h2{font-size:clamp(24px,2.6vw,34px);font-weight:var(--light);margin-top:8px}
.text-lung .et{margin-bottom:18px}
.text-lung strong{font-weight:var(--med)}
.nota{
  margin-top:34px;padding-top:18px;border-top:1px solid var(--linie);
  font-size:14px;color:var(--text-doi);max-width:62ch;
}

/* ============================================================
   11 · LITANIA
   ============================================================ */
/* Litania stă pe hârtia caldă, deci vocea a doua din ea are
   nevoie de griul pentru hârtie: pe #F7F7F7, #767676 dă doar
   4,24, sub pragul AA. Se aplică la tot ce e înăuntru și nu are
   altă culoare scrisă anume. */
.litanie{background:var(--spalat-cald);padding:clamp(56px,6vw,86px) 0;margin-top:var(--aer);
  color:var(--text-doi-pe-hartie)}
.litanie__sir{
  display:flex;flex-wrap:wrap;align-items:baseline;
  gap:0 14px;max-width:1080px;
}
.litanie__sir li{
  font-size:clamp(19px,2.2vw,30px);font-weight:var(--light);color:var(--text-doi-pe-hartie);
  line-height:1.42;
}
.litanie__sir li::after{content:"·";margin-left:14px;color:var(--text-slab)}
.litanie__sir li:last-child::after{content:""}
.litanie__sir li.tare{color:var(--text);font-weight:var(--reg)}
/* Și semnătura de sub litanie, cu legătura din ea, stă tot pe
   hârtia caldă. --text-doi ar da 4,24, sub prag. */
.litanie__semn{margin-top:30px;font-size:14px;color:var(--text-doi-pe-hartie)}
.litanie__semn a{border-bottom:1px solid var(--linie-tare);padding-bottom:2px}
.litanie__semn a:hover{color:var(--text);border-bottom-color:var(--text)}

/* ============================================================
   12 · PLĂCILE DE FOTOGRAFII + VITRINA
   ============================================================ */
/* Atributul hidden trebuie să câștige. Regula implicită a
   browserului, [hidden]{display:none}, vine din foaia lui de stil
   și pierde în fața oricărei clase scrise de noi. Fără linia de
   mai jos, „Vezi toate cele N" nu ascundea nimic: restul arhivei
   stătea la vedere de la început. */
[hidden]{display:none !important}
/* dense: un cadru lat pornește obligatoriu din prima coloană, deci
   ar lăsa două celule goale în rândul dinaintea lui. Cu dense,
   plăcile obișnuite care vin după se întorc și umplu golurile.
   Ordinea se amestecă puțin — într-o arhivă de o sută treizeci
   de cadre, asta nu deranjează pe nimeni; două găuri albe, da. */
.placi{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gut);grid-auto-flow:dense}
.placi--ascunse{margin-top:var(--gut)}
/* ============================================================
   APARIȚIA FOTOGRAFIILOR
   Pagina ediției are o sută treizeci și patru de imagini cu
   loading="lazy". Fără nimic, fiecare pocnește în pagină în
   momentul în care s-a descărcat: hârtia goală se umple brusc,
   iar ochiul e tras acolo unde nu trebuie.
   Cu asta, imaginea urcă din hârtie în opt zecimi de secundă.
   Nu e o animație de derulare — nu ascultă nimeni scroll-ul.
   E doar sfârșitul încărcării, făcut vizibil. Pentru că
   imaginile leneșe se încarcă pe măsură ce cobori, efectul
   arată la fel cu un „reveal", dar fără niciun handler.

   Regula atârnă de clasa .js pusă în <head>: dacă JavaScript-ul
   nu pornește, fotografiile rămân pur și simplu vizibile, nu
   invizibile pe veci. Apariția se face cu animation, nu cu
   transition, ca să nu se bată cu transition:transform de la
   hover, care e pe același element.
   ============================================================ */
.js img[loading="lazy"]{opacity:0}
.js img[loading="lazy"].vazuta{animation:aparitie .8s ease forwards}
@keyframes aparitie{ to{opacity:1} }
@media (prefers-reduced-motion:reduce){
  .js img[loading="lazy"]{opacity:1}
  .js img[loading="lazy"].vazuta{animation:none}
}

.placa{display:block;width:100%;aspect-ratio:4/3;overflow:hidden;background:var(--spalat);padding:0}

/* Cadrul cinematografic ia toate cele trei coloane și își
   păstrează raportul. Tăiat la 4:3 ar pierde exact ce îl face
   să merite: lățimea. Clasa se pune la generare, din raportul
   real al fișierului — vezi build.py, funcția _placa. */
.placa--lat{grid-column:1 / -1;aspect-ratio:2.35/1}

/* Arhiva pornește strânsă, la două rânduri.
   Regula atârnă de .js pus în <head>: fără JavaScript nu are cine
   să apese butonul, deci nu se ascunde nimic — se văd toate.
   Cadrele late ocupă trei coloane, deci un rând de-al lor
   înseamnă o singură placă; numărul 12 e ales ca să iasă mereu
   ceva plin, nu un rând ciuntit. */
.js .placi--strans .placa:nth-child(n+13){display:none}
.placa img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.6,.2,1)}
.placa:hover img{transform:scale(1.035)}
.placi__mai{margin-top:34px}

/* Arhiva ediției trece de 30.000px. Fără asta, întoarcerea sus
   înseamnă un minut de derulat. Butonul intră în bara plutitoare
   care există deja în dreapta jos (vezi js/sus.js) și moștenește
   de acolo forma de pătrat 44×44; aici rămâne doar apariția.
   Se arată abia după două ecrane, ca să nu stea în drum pe
   paginile scurte. */
.sus{opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}
.sus--vizibil{opacity:1;visibility:visible}
.sus--singur{
  position:fixed;right:22px;bottom:22px;z-index:90;
  width:44px;height:44px;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--linie);background:var(--hartie);color:var(--text);
  cursor:pointer;
}
.sus--singur svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.3}
@media (prefers-reduced-motion:reduce){ .sus{transition:none} }

.vitrina{
  position:fixed;inset:0;z-index:120;display:none;
  background:var(--voal);
  align-items:center;justify-content:center;
  padding:clamp(24px,5vw,64px);
}
.vitrina.deschis{display:flex}
.vitrina__cadru{max-width:1180px;max-height:84vh}
.vitrina__cadru img{max-width:100%;max-height:84vh;object-fit:contain}
.vitrina__numar{
  position:absolute;top:22px;left:24px;color:var(--alb);
  font-size:var(--et);letter-spacing:var(--ls-et);
}
.vitrina__x{position:absolute;top:14px;right:22px;color:var(--alb);font-size:30px;line-height:1;padding:8px}
.vitrina__sageata{
  position:absolute;top:50%;transform:translateY(-50%);
  color:var(--alb);font-size:26px;padding:16px;
}
.vitrina__sageata--st{left:12px}
.vitrina__sageata--dr{right:12px}
.vitrina__legenda{
  position:absolute;bottom:22px;left:24px;right:24px;text-align:center;
  color:var(--pe-inchis-doi);font-size:13px;
}

/* ============================================================
   13 · RECUNOȘTINȚĂ · generic de film
   ============================================================ */
.credite{margin-top:var(--aer);border-top:1px solid var(--text);padding-top:34px}
.credite .et{margin-bottom:18px}
.credite h2{font-size:clamp(22px,2.4vw,30px);font-weight:var(--light);max-width:24ch}
.credite ul{margin-top:34px;max-width:660px}
.credite li{
  display:flex;justify-content:space-between;gap:24px;
  padding:13px 0;border-bottom:1px solid var(--linie);
  font-size:15px;
}
.credite li:first-child{font-weight:var(--med)}
.credite li span{color:var(--text-doi);font-size:13px;text-align:right;flex:none;max-width:48%}
.credite__final{margin-top:24px;font-size:14px;color:var(--text-doi)}

/* ============================================================
   14 · JURNAL · listă de însemnări
   ============================================================ */
.insemnari{border-top:1px solid var(--text)}
.insemnari li{border-bottom:1px solid var(--linie)}
.insemnari a{
  display:grid;grid-template-columns:220px 1fr 1.2fr;gap:32px;align-items:baseline;
  padding:28px 0;transition:opacity .2s;
}
.insemnari a:hover{opacity:.58}
.insemnare__data{
  font-size:var(--et);letter-spacing:var(--ls-et);
  text-transform:uppercase;color:var(--text-doi);
}
.insemnare__titlu{font-size:21px;font-weight:var(--reg)}
.insemnare__rezumat{font-size:14px;color:var(--text-doi);line-height:1.55}

/* ============================================================
   15 · OAMENII
   ============================================================ */
/* Rândul de oameni se trage cu degetul sau cu trackpad-ul. Bara de
   derulare implicită a browserului e groasă și gri, adică exact ce
   nu vrem: un element de sistem în mijlocul unei pagini tăcute. O
   subțiem la o linie de 2px pe un jgheab de o linie, în negrul
   paginii. Firefox primește aceleași culori prin scrollbar-color. */
.rail{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(228px,1fr);
  gap:var(--gut);overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:22px;
  scrollbar-width:thin;
  scrollbar-color:var(--text) var(--linie);
}
.rail > *{scroll-snap-align:start}
.rail::-webkit-scrollbar{height:2px}
.rail::-webkit-scrollbar-track{background:var(--linie)}
.rail::-webkit-scrollbar-thumb{background:var(--text)}
.rail:hover::-webkit-scrollbar{height:4px}
.rail::-webkit-scrollbar-thumb:hover{background:var(--text)}

.om__cadru{aspect-ratio:4/5;background:var(--spalat);overflow:hidden}
.om__cadru img{width:100%;height:100%;object-fit:cover}
.om__nume{display:block;font-size:16px;margin-top:14px;font-weight:var(--reg)}
.om__rol{
  display:block;margin-top:4px;
  font-size:var(--et);letter-spacing:var(--ls-et);
  text-transform:uppercase;color:var(--text-slab);
}
.om__fragment{margin-top:7px;font-size:14px;color:var(--text-doi);line-height:1.55}
/* „Răspuns în așteptare" e text pe care omul chiar îl citește,
   deci nu poate purta griul decorativ: #9C9C9C dă 2,75 pe alb,
   mult sub pragul AA de 4,5. Tokenul --text-slab își scrie
   singur în tokens.css că e „niciodată de citit" — aici regula
   fusese încălcată. */
.om__fragment--gol{color:var(--text-doi)}
.om__fragment--strans{
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
}
.om__mai{
  display:inline-block;margin-top:6px;color:var(--text);
  border-bottom:1px solid var(--linie-tare);padding-bottom:1px;font-size:13px;
}
.om__mai:hover{border-bottom-color:var(--text)}

.om-citat{
  grid-column:1/-1;margin:24px 0;padding:44px 0;
  border-top:1px solid var(--text);border-bottom:1px solid var(--text);
  text-align:center;
}
.om-citat p{font-size:clamp(21px,2.4vw,31px);font-weight:var(--light);max-width:22ch;margin:0 auto}
.om-citat span{
  display:block;margin-top:18px;
  font-size:var(--et);letter-spacing:var(--ls-et);
  text-transform:uppercase;color:var(--text-doi);
}

/* ============================================================
   16 · RADIO
   ============================================================ */
.radio-fasie{
  margin-top:var(--aer);
  border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);
  padding:40px 0;
}
.radio-fasie__inner{
  max-width:var(--max);margin:0 auto;padding:0 var(--pad);
  display:flex;align-items:center;gap:26px;flex-wrap:wrap;
}
.eq{display:flex;align-items:flex-end;gap:3px;height:22px;flex:none}
.eq i{display:block;width:3px;background:var(--camp);transform-origin:bottom;animation:eq 1.1s ease-in-out infinite}
.eq i:nth-child(1){height:9px;animation-delay:0s}
.eq i:nth-child(2){height:17px;animation-delay:.16s}
.eq i:nth-child(3){height:12px;animation-delay:.32s}
.eq i:nth-child(4){height:21px;animation-delay:.48s}
.eq i:nth-child(5){height:14px;animation-delay:.64s}
@keyframes eq{0%,100%{transform:scaleY(.32)}50%{transform:scaleY(1)}}
.eq--pe-inchis i{background:var(--pe-inchis-doi)}
.radio-fasie__nume{font-size:16px}
.radio-fasie__nota{font-size:14px;color:var(--text-doi);flex:1;min-width:220px}

.radio-pagina{padding-top:var(--aer)}
.radio-pagina__grila{display:grid;grid-template-columns:auto 1fr;gap:clamp(32px,5vw,76px);align-items:start}
.radio-pagina__semn{display:flex;align-items:flex-end;gap:6px;height:120px}
.radio-pagina__semn i{display:block;width:6px;background:var(--camp);transform-origin:bottom;
  animation:eq 1.3s ease-in-out infinite}
.radio-pagina__semn i:nth-child(1){height:44px;animation-delay:0s}
.radio-pagina__semn i:nth-child(2){height:88px;animation-delay:.12s}
.radio-pagina__semn i:nth-child(3){height:62px;animation-delay:.24s}
.radio-pagina__semn i:nth-child(4){height:118px;animation-delay:.36s}
.radio-pagina__semn i:nth-child(5){height:74px;animation-delay:.48s}
.radio-pagina__semn i:nth-child(6){height:52px;animation-delay:.6s}
.radio-pagina__semn i:nth-child(7){height:96px;animation-delay:.72s}
.radio-pagina__corp h2{font-size:clamp(28px,3vw,42px);font-weight:var(--light);margin-top:18px}
.radio-pagina__ton{margin-top:18px;font-size:17px;color:var(--text-doi);max-width:52ch;line-height:1.6}
.radio-pagina__corp .leg,.radio-pagina__corp .buton{margin-top:30px}
.radio-pagina__tehnic{margin-top:34px;font-size:13px;color:var(--text-doi);max-width:62ch;line-height:1.7}
.radio-pagina__tehnic a{border-bottom:1px solid var(--linie-tare)}

/* ============================================================
   17 · CĂI DE SPRIJIN
   ============================================================ */
.cai{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid var(--text)}
.cale{padding:40px 40px 40px 0;border-bottom:1px solid var(--linie)}
.cai > .cale:nth-child(odd){border-right:1px solid var(--linie);padding-right:40px}
.cai > .cale:nth-child(even){padding-left:40px}
.cale h2{font-size:23px;font-weight:var(--reg);margin-top:14px;max-width:22ch}
.cale p{margin-top:14px;font-size:14px;color:var(--text-doi);line-height:1.6;max-width:44ch}
.cale .leg{margin-top:22px}

/* ============================================================
   18 · CONTACT
   ============================================================ */
.contact{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(40px,6vw,96px);padding-top:var(--aer)}
.contact__adresa{
  display:block;margin-top:20px;
  font-size:clamp(22px,2.4vw,30px);font-weight:var(--light);
  border-bottom:1px solid var(--linie-tare);padding-bottom:10px;
}
.contact__adresa:hover{border-bottom-color:var(--text)}
.contact dl{margin:34px 0 0}
.contact .detaliu{display:flex;gap:20px;padding:12px 0;border-top:1px solid var(--linie)}
.contact dt{
  width:104px;flex:none;padding-top:3px;
  font-size:var(--et);letter-spacing:var(--ls-et);
  text-transform:uppercase;color:var(--text-doi);
}
.contact dd{margin:0;font-size:14px;line-height:1.6}
.contact dd a{border-bottom:1px solid var(--linie-tare)}

.camp{margin-top:22px}
.camp label{
  display:block;margin-bottom:8px;
  font-size:var(--et);letter-spacing:var(--ls-et);
  text-transform:uppercase;color:var(--text-doi);
}
.camp input,.camp textarea{
  width:100%;font:inherit;font-size:15px;color:var(--text);
  background:none;border:0;border-bottom:1px solid var(--linie-tare);
  padding:10px 0;
}
.camp input::placeholder,.camp textarea::placeholder{color:var(--text-slab)}
.camp input:focus,.camp textarea:focus{outline:none;border-bottom-color:var(--text)}
.camp textarea{resize:vertical}
.camp__nota{margin-top:18px;font-size:12px;color:var(--text-doi)}
.camp__nota a{border-bottom:1px solid var(--linie-tare)}

/* Răspunsul formularului.
   Până acum se scria tot în nota de dedesubt: 12px, gri, sub
   buton. Textul chiar se schimba — dar arăta ca o notă de
   subsol, iar omul care apăsa rămânea cu impresia că butonul
   nu face nimic. Acum are locul lui, cu chenar și cu greutate.
   Culoarea singură nu spune nimic (site-ul n-are accent, iar
   pe culoare nu te poți bizui la accesibilitate) — ce s-a
   întâmplat scrie în text. Dunga din stânga doar ajută ochiul. */
.camp__stare{
  margin-top:22px;padding:14px 16px;
  font-size:14px;line-height:1.55;color:var(--text);
  background:var(--spalat);
  border-left:3px solid var(--linie-tare);
}
.camp__stare[hidden]{display:none}
.camp__stare--bun{border-left-color:var(--text)}
.camp__stare--rau{border-left-color:#B3261E}
.camp__stare a{border-bottom:1px solid var(--linie-tare)}
.buton{
  display:inline-block;margin-top:28px;
  background:var(--mud);color:var(--alb);
  padding:14px 26px;
  font-size:var(--et);letter-spacing:var(--ls-et);text-transform:uppercase;font-weight:var(--med);
  transition:background .2s;
}
.buton:hover{background:var(--mud-adanc)}

/* ============================================================
   19 · ABONARE
   ============================================================ */
.abonare-sect{padding:var(--aer) 0;text-align:center;border-bottom:1px solid var(--linie);margin-top:var(--aer)}
.abonare-sect .et{margin-bottom:18px}
.abonare-sect h2{font-size:clamp(22px,2.4vw,31px);font-weight:var(--light);max-width:26ch;margin:0 auto}
.abonare{display:flex;max-width:440px;margin:32px auto 0;border-bottom:1px solid var(--text)}
.abonare input{flex:1;border:0;background:none;font:inherit;font-size:14px;padding:9px 0;color:var(--text)}
.abonare input::placeholder{color:var(--text-slab)}
/* Aici era „outline:none" fără nimic în loc. Cine ajunge la câmp
   cu tastatura nu vedea niciun semn că a ajuns — linia de sub
   formular nu se schimbă la focus, e mereu aceeași.

   Inelul se pune pe tot formularul, nu pe câmp: pe câmp singur,
   marginea lui de jos cădea exact peste linia formularului și
   se vedea o cutie care taie linia. Pe înveliș, inelul cuprinde
   câmpul și butonul deodată — care e și adevărul, sunt un
   singur control. */
.abonare input:focus-visible{outline-offset:4px}
@supports selector(:has(*)){
  .abonare:has(input:focus-visible){outline:2px solid var(--text);outline-offset:8px}
  .abonare input:focus-visible{outline:none}
}
.abonare button{
  padding:9px 0 9px 20px;
  font-size:var(--et);letter-spacing:var(--ls-et);text-transform:uppercase;font-weight:var(--med);
}
.abonare button:hover{color:var(--gri)}
.abonare-sect__nota{margin-top:14px;font-size:12px;color:var(--text-doi)}

/* ============================================================
   20 · COLOFON
   ============================================================ */
.colofon{background:var(--mud-adanc);color:var(--alb);padding:clamp(56px,6vw,76px) 0 32px;margin-top:0}
.colofon__coloane{
  display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:var(--gut);
  padding-bottom:52px;border-bottom:1px solid var(--linie-clara);
}
/* Capetele de coloana din subsol.
   Erau <h4> dupa un <h2>, adica un nivel sarit; cititoarele de
   ecran anunta o structura cu o treapta lipsa. Acum sunt <h2>:
   inauntrul subsolului sunt titluri de prim rang, iar fata de
   titlurile paginii nu mai sare nimic. Aspectul e neschimbat. */
.colofon__cap{
  font-size:var(--et);letter-spacing:var(--ls-et);
  text-transform:uppercase;margin-bottom:16px;font-weight:var(--med);
}
.colofon li a,.colofon__meniu a{display:block;padding:5px 0;font-size:13px;color:var(--pe-inchis-doi)}
.colofon li a:hover{color:var(--alb)}
.colofon__marca img{width:196px;margin-bottom:20px}
.colofon__marca p{font-size:13px;color:var(--pe-inchis-doi);line-height:1.75;max-width:32ch}
.colofon__marca address{font-size:13px;color:var(--pe-inchis-doi);margin-top:18px;line-height:1.75}
.colofon__marca address a{border-bottom:1px solid var(--linie-clara)}
.colofon__marca address a:hover{color:var(--alb);border-bottom-color:var(--alb)}
.colofon .social{color:var(--pe-inchis-doi)}
/* Iconița rămâne de 14px. Legătura din jurul ei primește 9px de aer
   lateral și 15px pe verticală, scăzuți înapoi din margine — cutia la
   vedere rămâne de 14×14 și spațierea neschimbată, dar degetul are
   32×44 de apăsat în loc de 14×14. */
.colofon__retea{display:flex;gap:18px;margin-top:22px;align-items:center}
.colofon__retea a{
  display:inline-flex;align-items:center;justify-content:center;
  padding:15px 9px;margin:-15px -9px;
}
.colofon__retea a:hover .social{color:var(--alb)}
.colofon__jos{
  display:flex;justify-content:space-between;gap:22px;flex-wrap:wrap;
  padding-top:24px;font-size:11px;color:var(--pe-inchis-trei);
}
/* Legăturile din rândul de jos au 11px, adică vreo 13px înălțime
   de apăsat. Sunt legături dintr-o frază, deci intră la excepția
   „inline" din WCAG 2.5.8 — dar tot se ratează cu degetul.
   Padding-ul vertical pe un element inline mărește zona de atins
   fără să atingă înălțimea rândului: nimic nu se mută, doar
   degetul are unde nimeri. Cele 7px de sus și de jos rămân sub
   jumătatea distanței de 22px dintre rânduri, deci nici la
   încolonare pe telefon nu se calcă unele pe altele. */
.colofon__jos a{padding:7px 0}
.colofon__jos a:hover{color:var(--alb)}

/* Cele patru drumuri de pe pagina de 404.
   Aceeași rețea de hairline-uri ca restul: nicio cutie, nicio
   umbră, doar linii care despart. */
.patru-cai{margin-top:26px;border-top:1px solid var(--linie)}
.patru-cai li{border-bottom:1px solid var(--linie)}
.patru-cai a{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;padding:18px 0}
.patru-cai strong{font-weight:var(--reg);font-size:17px;color:var(--text)}
.patru-cai span{font-size:14px;color:var(--text-doi)}
.patru-cai a:hover strong{color:var(--gri)}

/* ============================================================
   21 · WIDGETS · fără colț rotund
   Banner-ul de cookie, playerul și vitrina se recolorează
   singure din tokens. Aici le luăm doar rotunjimile.
   ============================================================ */
.cb,.cm,.cm__foaie,.cm__panou,.cfab,.radio-buton,.radio-panou,
.radio-poarta,.cm__comuta,.cm__eticheta,.cb__ok,.cb__nu,.cb__set,
.cm__salveaza,.cm__tot,.cm__nimic,.fab-eticheta{border-radius:0 !important}

/* ============================================================
   22 · ECRANE MICI
   ============================================================ */
@media(max-width:1180px){
  :root{--pad:36px;--gut:22px}
  .grila{grid-template-columns:repeat(2,1fr)}
  .grila--4{grid-template-columns:repeat(2,1fr)}
  .colofon__coloane{grid-template-columns:1fr 1fr 1fr}
  .insemnari a{grid-template-columns:180px 1fr;gap:12px 26px}
  .insemnare__rezumat{grid-column:2}
}

@media(max-width:900px){
  /* ------------------------------------------------------------
     PERDEAUA DE MENIU · numai pe telefon (sub 900px)

     Trei etaje, nu un sul lung:
       cap     · lipit sus, nu pleacă la derulare
       corp    · singurul care derulează
       subsol  · lipit jos, mereu la degetul mare

     Motivul e simplu: cu sertarele deschise lista trece de
     ecran. Dacă derulează tot panoul, dispar și logoul și
     butonul de închidere, iar omul rămâne fără ieșire vizibilă.
     ------------------------------------------------------------ */
  .bara-meniu{
    display:flex;flex-direction:column;
    position:fixed;inset:0;top:0;
    /* Peste banner-ul de cookie (120) și peste butonul de radio
       (90). Înainte era 100 și banner-ul tăia jumătatea de jos a
       meniului — se vedeau doar patru rânduri din șapte. */
    z-index:150;
    background:var(--alb);
    border-top:0;
    visibility:hidden;
    transform:translateX(-100%);
    transition:transform .28s cubic-bezier(.4,0,.2,1),visibility 0s .28s;
  }
  .bara-meniu.deschis{
    visibility:visible;
    transform:translateX(0);
    transition:transform .28s cubic-bezier(.4,0,.2,1),visibility 0s 0s;
  }
  @media (prefers-reduced-motion:reduce){
    .bara-meniu,.bara-meniu.deschis{transition:none}
  }

  /* Cât e perdeaua trasă, ce e dedesubt tace: banner-ul de
     cookie și butonul plutitor al radioului. Nu se pierd —
     reapar la închidere. */
  body.meniu-deschis .cb,
  body.meniu-deschis .cfab{display:none}

  /* --- capul --- */
  /* Cerneala adâncă, aceeași ca subsolul paginii. Sunt cele două
     capete ale casei, deci se poartă la fel. Pe fond închis intră
     logoul alb; cel colorat are literele negre și ar dispărea. */
  .meniu__cap{
    display:flex;align-items:center;gap:16px;
    flex:0 0 auto;
    padding:18px var(--pad);
    background:var(--negru-adanc);border-bottom:0;
  }
  /* Închiderea stă la STÂNGA, exact peste locul burgerului din
     antet. Degetul care a deschis meniul nu are unde să plece ca
     să-l închidă — găsește butonul acolo unde l-a lăsat. */
  .meniu__inchide{
    order:-1;
    display:flex;align-items:center;justify-content:center;
    width:44px;height:44px;margin-left:-12px;
    background:none;border:0;padding:0;cursor:pointer;
  }
  /* Crucea e desenată din două linii de 1px, ca burgerul. Nicio
     glifă de font: „×" din Helvetica e mai gros decât liniile
     burgerului și se vedea diferența. */
  .meniu__inchide span{position:relative;display:block;width:16px;height:16px}
  .meniu__inchide span::before,
  .meniu__inchide span::after{
    content:"";position:absolute;left:0;top:50%;
    width:16px;height:1px;background:var(--pe-inchis);
  }
  .meniu__inchide span::before{transform:rotate(45deg)}
  .meniu__inchide span::after{transform:rotate(-45deg)}
  .meniu__cap img{width:150px;margin-left:auto;margin-right:auto;padding-right:32px}

  /* --- corpul · singurul etaj care derulează --- */
  .meniu__corp{
    /* Coloană, ca mărunțișurile de la coadă să se așeze pe
       fundul zonei de derulare când lista e scurtă, în loc să
       plutească la mijlocul unui gol alb. */
    display:flex;flex-direction:column;
    flex:1 1 auto;min-height:0;
    overflow-y:auto;-webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    /* Bara de derulare nu se desenează. Într-un panou care
       acoperă tot ecranul e un element de sistem care nu are ce
       căuta; derularea rămâne, doar semnul ei dispare. */
    scrollbar-width:none;
  }
  .meniu__corp::-webkit-scrollbar{display:none}

  .bara-meniu .meniu{flex-direction:column;gap:0;padding:0 var(--pad)}
  .bara-meniu .meniu > li{border-bottom:1px solid var(--linie)}
  .bara-meniu .meniu > li:last-child{border-bottom:0}

  /* Rândul: legătura la stânga, clapa la dreapta. Legătura duce
     la pagină, clapa deschide lista de sub ea. Două acțiuni,
     două controale — nu un rând care face amândouă și niciuna
     bine. */
  .bara-meniu .meniu__rand{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    position:relative;
  }
  .bara-meniu .meniu > li > .meniu__rand > a{
    flex:1;
    display:flex;align-items:center;
    /* 54px de rând. Sub 48 degetul ratează vecinul de deasupra;
       ăsta e pragul recomandat, nu o preferință. */
    min-height:54px;padding:4px 0;
    font-size:13px;letter-spacing:.09em;
    border-bottom:0;
    transition:color .2s ease;
  }
  .bara-meniu .meniu > li > .meniu__rand > a:hover{color:var(--negru)}
  /* Pagina pe care ești deja: literă mai apăsată și o cratimă
     scurtă în margine. Fără culoare — nu avem culoare de accent. */
  .bara-meniu .meniu > li > .meniu__rand > a[aria-current]{
    font-weight:var(--med);
  }
  .bara-meniu .meniu > li > .meniu__rand > a[aria-current]::before{
    content:"";position:absolute;left:calc(var(--pad) * -1 + 6px);
    top:50%;width:8px;height:1px;background:var(--text);
  }

  .meniu__clapa{
    display:flex;align-items:center;justify-content:center;
    width:54px;height:54px;margin-right:-16px;
    background:none;border:0;padding:0;cursor:pointer;
    color:var(--text-doi);
  }
  /* Semnul e un plus din două linii: orizontala rămâne,
     verticala se culcă la deschidere și rămâne un minus. */
  .meniu__clapa span{position:relative;display:block;width:13px;height:1px;background:currentColor}
  .meniu__clapa span::after{
    content:"";position:absolute;left:6px;top:-6px;
    width:1px;height:13px;background:currentColor;
    transition:transform .22s ease;transform-origin:50% 50%;
  }
  .meniu__clapa[aria-expanded="true"]{color:var(--text)}
  .meniu__clapa[aria-expanded="true"] span::after{transform:scaleY(0)}
  @media (prefers-reduced-motion:reduce){ .meniu__clapa span::after{transition:none} }

  /* --- sertarele --- */
  /* Pornesc închise. Deschise toate deodată, meniul avea 1210px
     de conținut într-un ecran de 844 — pentru șapte rânduri.

     Deschiderea NU se mai face cu display:none → block. Aia e o
     comutare, nu o mișcare: sertarul apărea dintr-o bucată și
     împingea restul listei în jos dintr-un cadru în altul.

     Se face cu grid-template-rows: 0fr → 1fr. E singurul fel
     curat de a anima o înălțime necunoscută — nu trebuie
     măsurat nimic în JavaScript, nu există max-height ghicit
     „cât să încapă", iar sertarul se oprește exact la înălțimea
     conținutului lui, oricâte legături ar avea. */
  .sertar{
    display:grid;grid-template-rows:0fr;
    position:static;border:0;padding:0;overflow:hidden;
    transition:grid-template-rows .34s cubic-bezier(.4,0,.2,1);
  }
  .sertar__inner{
    flex-direction:column;gap:0;
    min-height:0;overflow:hidden;
    /* Sertarul e retras față de rândul-părinte și ancorat de o
       linie verticală. Așa se vede din priviri unde se termină
       lista lui și începe următorul capitol de meniu — fără să
       fie nevoie de fond gri sau de chenar. */
    margin-left:2px;padding:0 0 0 20px;
    border-left:1px solid var(--linie);
    /* Aerul de sus și de jos stă pe copii, nu aici. Pe înveliș
       ar rămâne și strâns: 0fr face rândul de zero, dar padding-ul
       se adaugă peste, și sertarul închis ar păstra 16px de gol
       sub fiecare capitol. */
    visibility:hidden;
    /* Ascunderea se amână până se termină strângerea, altfel
       conținutul dispare brusc și rămâne o cutie goală care se
       închide. La deschidere e invers: apare din prima clipă.
       visibility (spre deosebire de opacity) scoate legăturile
       și din ordinea de tabulare — un sertar strâns nu trebuie
       să prindă focusul. */
    transition:visibility 0s .34s;
  }
  .sertar__inner > div:first-child{padding-top:2px}
  .sertar__inner > div:last-child{padding-bottom:14px}

  .meniu > li.deschis > .sertar{grid-template-rows:1fr}
  .meniu > li.deschis > .sertar > .sertar__inner{
    visibility:visible;transition:visibility 0s 0s;
  }

  /* Deschiderea la trecerea cursorului · numai unde există cu
     adevărat cursor.
     Pe telefon nu ai cursor, dar :hover rămâne lipit după
     atingere — de-aia „Salonul Rural" apărea deschis din start,
     deși clapa lui zicea închis. Filtrul (hover:hover) taie
     exact cazul ăla: ecranele tactile raportează hover:none, un
     mouse raportează hover:hover. */
  @media (hover:hover) and (pointer:fine){
    /* Intenție, nu atingere.
       Deschiderea se amână 140ms. Fără pauza asta, cursorul care
       traversează lista ca să ajungă la „Contact" deschidea și
       închidea trei sertare pe drum, iar rândurile de dedesubt
       săreau în sus și-n jos sub degetul mare al mouse-ului.
       Cu ea, ce treci în viteză rămâne închis; ce te oprești
       deasupra se deschide.
       Închiderea nu se amână — plecarea e un răspuns imediat. */
    .meniu > li.are-sertar:hover > .sertar{
      grid-template-rows:1fr;
      transition-delay:.14s;
    }
    .meniu > li.are-sertar:hover > .sertar > .sertar__inner{
      visibility:visible;transition:visibility 0s .14s;
    }
    /* Semnul se face minus, ca și cum ai fi apăsat clapa. */
    .meniu > li.are-sertar:hover > .meniu__rand > .meniu__clapa{
      color:var(--text);transition:color .2s ease .14s;
    }
    .meniu > li.are-sertar:hover > .meniu__rand > .meniu__clapa span::after{
      transform:scaleY(0);transition-delay:.14s;
    }
    /* Strângerea celui părăsit pornește în aceeași clipă cu
       deschiderea celui nou — același sfert de secundă de
       întârziere. Fără asta se vedeau două mișcări una după
       alta: întâi sărea lista în sus, apoi se desfăcea sertarul.
       Sincronizate, e o singură mișcare. */
    .meniu:hover > li.are-sertar:not(:hover) > .sertar{transition-delay:.14s}

    /* Cât cursorul e în listă, sertarul lăsat deschis cu degetul
       se strânge. Altfel rămâneau două deschise deodată — unul
       apăsat, unul plimbat — și lista se lungea cât un ecran și
       jumătate. */
    .meniu:hover > li.deschis:not(:hover) > .sertar{grid-template-rows:0fr}
    .meniu:hover > li.deschis:not(:hover) > .sertar > .sertar__inner{
      visibility:hidden;transition:visibility 0s .34s;
    }
  }

  /* :focus-within rămâne scos. Se aprinde de îndată ce focusul
     intră în rândul de sus — iar JS-ul mută focusul pe primul
     element la deschiderea perdelei, deci primul capitol s-ar
     deschide singur, de fiecare dată. */

  .sertar__cap{
    font-size:9px;letter-spacing:.16em;
    color:var(--text-doi);margin:12px 0 2px;
  }
  .sertar__inner > div:first-child .sertar__cap{margin-top:0}
  .sertar a{
    display:flex;align-items:center;min-height:40px;
    font-size:13px;color:var(--text-doi);padding:0;
    transition:color .2s ease;
  }
  .sertar a:hover,.sertar a:focus-visible{color:var(--text)}
  .sertar a[aria-current]{color:var(--text);font-weight:var(--med)}
  .sertar a.sertar__cap{
    display:flex;align-items:center;min-height:34px;
    font-size:9px;letter-spacing:.16em;text-transform:uppercase;
    color:var(--text);font-weight:var(--med);margin:12px 0 2px;
  }
  .sertar__inner > div:first-child a.sertar__cap{margin-top:0}

  @media (prefers-reduced-motion:reduce){
    .sertar,.sertar__inner{transition:none}
  }

  /* --- mărunțișurile de la coada listei --- */
  /* Ce nu merită un rând de meniu, dar trebuie să existe: legal,
     cookie-uri. Mai mic, mai gri, despărțit de o linie. */
  .meniu__marunt{
    display:flex;flex-wrap:wrap;gap:4px 18px;
    margin-top:auto;
    padding:22px var(--pad) 26px;
  }
  .meniu__marunt a{
    font-size:11px;color:var(--text-doi);
    min-height:32px;display:flex;align-items:center;
  }

  /* --- subsolul · lipit jos --- */
  /* Instagram și Facebook erau ascunse pe telefon (.antet__stanga
     .social{display:none}) și nu se mai ajungea la ele decât din
     colofon, adică după toată pagina. Aici sunt la un deget. */
  .meniu__subsol{
    display:block;
    flex:0 0 auto;
    background:var(--negru-adanc);
    padding:16px var(--pad);
    padding-bottom:max(16px, env(safe-area-inset-bottom));
  }
  .meniu__legaturi{display:flex;align-items:center;gap:20px}
  .meniu__legaturi a{
    display:flex;align-items:center;justify-content:center;
    min-width:40px;min-height:44px;color:var(--pe-inchis-doi);
  }
  .meniu__legaturi svg{width:16px;height:16px}
  .meniu__legaturi a:hover,.meniu__legaturi a:focus-visible{color:var(--pe-inchis)}
  .meniu__mail{
    margin-left:auto;justify-content:flex-end;
    font-size:11px;letter-spacing:.03em;
  }

  .burger{display:flex}
  .antet{padding:16px var(--pad);grid-template-columns:auto 1fr auto}
  .antet__stanga .social{display:none}
  .sigla{justify-self:center}
  .feature{grid-template-columns:1fr}
  .feature__foto{min-height:320px}
  /* .feature dă deja aerul lateral. Dacă îl mai pune o dată și
     textul, se adună: pe telefon ieșea 72px în loc de 36. */
  .feature__text{padding:44px 0 52px}
  .plansa__corp{bottom:34px}
  .puncte{bottom:38px}
  .contact{grid-template-columns:1fr}
  .placi{grid-template-columns:repeat(2,1fr)}
  .radio-pagina__grila{grid-template-columns:1fr;gap:28px}
  .cai{grid-template-columns:1fr}
  .cai > .cale:nth-child(odd){border-right:0;padding-right:0}
  .cai > .cale:nth-child(even){padding-left:0}
}

@media(max-width:640px){
  :root{--pad:20px}
  .promo{padding:8px 16px}
  .promo a{font-size:9px;letter-spacing:.1em}
  .promo__lung{display:none}
  .antet{gap:10px}
  .sigla img{width:142px}
  .antet__dreapta a:first-child{display:none}
  .antet__dreapta a{font-size:9px}
  .grila,.grila--2,.grila--4{grid-template-columns:1fr;row-gap:42px}
  .placi{grid-template-columns:1fr 1fr;gap:12px}
  .colofon__coloane{grid-template-columns:1fr 1fr;gap:30px var(--gut)}
  .colofon__marca{grid-column:1/-1}
  .insemnari a{grid-template-columns:1fr;gap:8px;padding:24px 0}
  .insemnare__rezumat{grid-column:1}
  .credite li{flex-direction:column;gap:4px}
  .credite li span{text-align:left;max-width:none}
  .date div{flex-direction:column;gap:2px}
  .date dt{width:auto}
  .contact .detaliu{flex-direction:column;gap:4px}
  .contact dt{width:auto}
  .banda-foto img{height:280px}
}

@media(prefers-reduced-motion:reduce){
  .eq i,.radio-pagina__semn i{animation:none;transform:scaleY(1)}
  .plansa{transition:none}
  .fisa__foto img,.placa img{transition:none}
}

/* ============================================================
   23 · PAGINA LEGALĂ
   ------------------------------------------------------------
   Înlocuiește legal.css, care venea cu propriul antet fix și se
   bătea cap în cap cu cel nou. Aici e doar corpul documentului:
   capul, cuprinsul lipit pe margine, articolul și tabelele.
   ============================================================ */
.legal-cap{padding:clamp(48px,5vw,78px) 0 clamp(30px,3vw,44px);border-bottom:1px solid var(--linie)}
.legal-cap h1{font-size:clamp(28px,3.6vw,46px);font-weight:var(--light);max-width:20ch;margin-top:18px}
.legal-cap__lead{margin-top:18px;font-size:16px;color:var(--text-doi);max-width:58ch;line-height:1.6}
.legal-cap__meta{
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px var(--gut);
  margin-top:36px;border-top:1px solid var(--linie);padding-top:20px;
}
.legal-cap__meta div{
  display:flex;flex-direction:column;gap:6px;
  font-size:var(--et);letter-spacing:var(--ls-et);text-transform:uppercase;color:var(--text-doi);
}
.legal-cap__meta strong{
  font-size:13px;letter-spacing:0;text-transform:none;
  font-weight:var(--reg);color:var(--text);
}

.legal-grila{display:grid;grid-template-columns:238px 1fr;gap:clamp(40px,6vw,88px);padding-top:var(--aer)}

.cuprins{position:sticky;top:calc(var(--antet) + 20px);align-self:start}
.cuprins h2{
  font-size:var(--et);letter-spacing:var(--ls-et);
  text-transform:uppercase;color:var(--text-doi);margin-bottom:14px;
}
.cuprins ol{counter-reset:c;border-top:1px solid var(--text)}
.cuprins li{counter-increment:c;border-bottom:1px solid var(--linie)}
.cuprins a{display:flex;gap:12px;padding:10px 0;font-size:13px;color:var(--text-doi)}
.cuprins a::before{content:counter(c,decimal-leading-zero);color:var(--text-slab);flex:none}
.cuprins a:hover{color:var(--text)}
.cuprins__buton{
  margin-top:22px;width:100%;text-align:left;
  border:1px solid var(--linie-tare);padding:12px 14px;
  font-size:var(--et);letter-spacing:var(--ls-et);text-transform:uppercase;
  color:var(--text-doi);transition:border-color .2s,color .2s;
}
.cuprins__buton:hover{border-color:var(--text);color:var(--text)}

.articol{max-width:70ch}
.articol section{padding-bottom:clamp(40px,4vw,64px)}
.articol h2{font-size:clamp(22px,2.4vw,30px);font-weight:var(--light)}
.articol h3{font-size:17px;font-weight:var(--med);margin-top:28px}
.articol__rigla{border-top:1px solid var(--text);margin:14px 0 22px}
.articol p{margin-top:16px;line-height:1.72;font-size:15px}
.articol ul{margin-top:16px}
.articol li{padding:6px 0 6px 20px;position:relative;line-height:1.65;font-size:15px}
.articol li::before{content:"·";position:absolute;left:4px;color:var(--text-slab)}
.articol strong{font-weight:var(--med)}
.articol a{border-bottom:1px solid var(--linie-tare)}
.articol a:hover{color:var(--gri);border-bottom-color:var(--gri)}

.tabel-strat{margin-top:22px;overflow-x:auto}
.tabel-strat table{width:100%;border-collapse:collapse;font-size:13px;min-width:520px}
.tabel-strat th{
  text-align:left;padding:10px 14px 10px 0;
  border-bottom:1px solid var(--text);
  font-size:var(--et);letter-spacing:var(--ls-et);
  text-transform:uppercase;font-weight:var(--med);color:var(--text-doi);
}
.tabel-strat td{padding:13px 14px 13px 0;border-bottom:1px solid var(--linie);vertical-align:top;line-height:1.55}

.caseta{margin-top:26px;border:1px solid var(--linie-tare);padding:24px}
.caseta--atentie{border-color:var(--text);background:var(--spalat-cald);color:var(--text-doi-pe-hartie)}
.caseta p{margin-top:12px;font-size:14px;line-height:1.65}
.caseta__buton{
  margin-top:18px;background:var(--mud);color:var(--alb);padding:12px 20px;
  font-size:var(--et);letter-spacing:var(--ls-et);text-transform:uppercase;font-weight:var(--med);
}
.caseta__buton:hover{background:var(--mud-adanc)}

/* etichetele mici moștenite din paginile vechi */
.supra{
  display:block;font-size:var(--et);letter-spacing:var(--ls-et);
  text-transform:uppercase;font-weight:var(--med);color:var(--text-doi);
}
.supra--vd{color:var(--gri)}

@media(max-width:900px){
  /* minmax(0,1fr), nu 1fr.
     O pistă „1fr" nu coboară sub lățimea minimă a conținutului
     ei. Tabelele din pagina legală au 520px minim, deci pe un
     telefon de 390 împingeau toată pagina la 540 și se derula
     lateral. Cu minmax(0,1fr) pista are voie să se strângă. */
  .legal-grila{grid-template-columns:minmax(0,1fr);gap:36px}
  .cuprins{position:static}

  /* Iar tabelul, care tot nu încape, se derulează el în lăuntrul
     lui. Mai bine un tabel care alunecă sub deget decât o pagină
     întreagă care se clatină lateral. */
  .legal-grila table{display:block;max-width:100%;overflow-x:auto}
  .legal-cap__meta{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .legal-cap__meta{grid-template-columns:1fr;gap:16px}
  .caseta{padding:18px}
}


/* ============================================================
   24 · AFIȘUL EDIȚIEI
   Un afiș nu e o fotografie. Are text în el și o compoziție
   proprie, deci nu se decupează niciodată: intră întreg, pe
   hârtia lui, la lățimea lui.
   ============================================================ */
.afis{background:#F6F4F0;padding:clamp(28px,4vw,64px) var(--pad)}
.afis img{max-width:1180px;width:100%;margin:0 auto}

.afis-detalii{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(32px,5vw,80px);align-items:start}
.afis-detalii__motto{
  margin-top:16px;font-size:clamp(22px,2.5vw,32px);
  font-weight:var(--light);max-width:20ch;
}
.afis-detalii__ingrediente{
  margin-top:18px;font-size:14px;color:var(--pe-inchis-doi);max-width:40ch;
}
.afis-detalii .leg{margin-top:28px}
.afis-detalii .date{margin-top:0;border-top:1px solid var(--linie-clara);padding-top:0}
.afis-detalii .date div{padding:14px 0;border-bottom:1px solid var(--linie-clara)}
.afis-detalii .date dt{color:var(--pe-inchis-trei)}
.afis-detalii .date dd{color:var(--alb)}

@media(max-width:900px){
  .afis-detalii{grid-template-columns:1fr;gap:34px}
}