/* =========================================================
   ROȘCA DIMA — SITE OFICIAL
   Author: Skroll

   Arcul paginii: peretele de studio (gri cald, culoarea reală a ciclorámei
   din clip) → trecere → negrul în care trăiesc fotografiile.
   Hero-ul e clipul pe tot ecranul, ancorat pe BARĂ, nu pe om — bara nu se mișcă
   niciodată, deci rămâne în centru la orice ecran. Centrarea e coaptă în fișierul
   video (decupaj simetric față de bară), nu compensată din CSS.
   ========================================================= */

:root{
  --wall:#a6a098;
  --wall-2:#b6b1a9;
  --paper:#ded9d0;   /* bejul secțiunilor de text — mai deschis decât peretele din clip */
  --ink:#16140f;
  --ink-2:#43403a;
  --brass:#8f6f2e;

  --bg:#0a0a0b;
  --bg-soft:#101012;
  --bg-card:#141416;
  --cream:#f2efe9;
  --cream-dim:#a49f97;
  --cream-faint:#6d6862;
  --gold:#d9b168;
  --gold-soft:#8d7346;
  --line:rgba(242,239,233,.13);
  --line-soft:rgba(242,239,233,.07);

  --fd:'Bodoni Moda',Didot,Georgia,'Times New Roman',serif;
  --fb:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --wrap:1220px;
  --pad:clamp(20px,5vw,56px);
  --sec:clamp(72px,11vw,150px);
  --ease:cubic-bezier(.22,.61,.36,1);
  --pole:50%;   /* bara e centrată direct în fișierul video, deci aici e simplu 50% */
}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--cream);
  font-family:var(--fb);font-weight:300;font-size:clamp(15px,1.05vw,17px);
  line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
#page{transition:opacity .5s ease}
#page.is-ready{opacity:1}
/* scroll blocat până pune mâna pe bară; se ridică din JS, cu plasă de siguranță */
html.is-locked,html.is-locked body{overflow:hidden;height:100%;touch-action:none;overscroll-behavior:none}
/* Meniul BLOCHEAZA scroll-ul din spate, dar din JS, nu de aici (`main.js`,
   sectiunea 5: `taieDerulareaDeFundal`). Se taie gestul cat e meniul deschis.

   De ce nu din CSS: `overflow:hidden` pe <html> pierde pozitia — deschideai
   meniul de la mijlocul paginii si te trezeai in hero. Iar corpul fixat cere
   salvat/restaurat de scroll. Ambele au fost incercate si abandonate.

   `overscroll-behavior:contain` de mai jos ramane, dar NU e de ajuns singur:
   pe Android da, pe iPhone nu, fiindca Safari o aplica doar containerelor care
   chiar au ce derula — iar panza, cu cinci linkuri, n-are. Raportat de Gabi pe
   20.08.2026: pe Samsung nu se misca, pe iPhone da. */
/* fără bară de scroll nicăieri — repetat și aici, nu doar în CSS-ul critic,
   ca regula să existe și dacă cineva încarcă foaia de stil separat */
html{scrollbar-width:none;-ms-overflow-style:none}
html::-webkit-scrollbar,body::-webkit-scrollbar{width:0;height:0;display:none}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;font-weight:400;line-height:1.05}
p{margin:0 0 1.1em}
ul{margin:0;padding:0;list-style:none}
::selection{background:var(--gold);color:#0a0a0b}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.skip{position:absolute;left:-9999px;top:0;background:var(--gold);color:#000;padding:12px 20px;z-index:200}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
/* Fără dreptunghiul albastru de la atingere. E o culoare de sistem, nu a temei,
   și apare pe orice element atins, nu doar pe butoane.
   Se pune pe `html`, de unde se moștenește peste tot. NU atinge `:focus-visible`
   de mai sus — ăla e inelul pentru navigarea de la tastatură și rămâne. */
html{-webkit-tap-highlight-color:transparent}

/* =========================================================
   CURSOR PROPRIU — un cerc care vine din urmă
   Doar pe mouse adevărat: `hover:hover` și `pointer:fine`. Pe telefon nu se
   activează deloc, altfel ar rămâne un cerc lipit unde ai atins ultima oară.
   ========================================================= */
.cursor{display:none}
@media (hover:hover) and (pointer:fine){
  .cursor{
    display:block;position:fixed;top:0;left:0;z-index:400;pointer-events:none;
    width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;
    /* Pe pagină, culoarea REZULTĂ din blend: alb peste `difference` iese închis
       pe peretele crem al hero-ului și alb pe fundalul negru, fără să știe nimeni
       dinainte pe ce se află. Același truc ca la numele din hero. */
    background:#fff;mix-blend-mode:difference;
    opacity:0;transition:opacity .35s ease,background-color .5s var(--ease),
      width .25s var(--ease),height .25s var(--ease),margin .25s var(--ease);
    will-change:transform;
  }
  /* se aprinde abia după prima mișcare de mouse, ca să nu apară un cerc în colț */
  .cursor.e-pornit{opacity:1}
  /* PESTE FOTOGRAFII blendul se oprește. Cerut de Gabi: „îmi place difference pe
     pagină, dar nu pe poze, că le face să arate ciudat." Are dreptate — inversul
     unei fotografii cu tonuri de piele iese în culori de neon, pe când inversul
     unui perete neutru sau al unui fundal negru rămâne neutru.
     Aici discul devine opac, iar culoarea vine din același prag care schimbă și
     culoarea headerului: închis cât timp e pe peretele hero-ului, crem după. */
  .cursor.pe-poza{mix-blend-mode:normal;background:var(--ink)}
  html.fond-inchis .cursor.pe-poza{background:var(--cream)}
  /* peste ceva clicabil crește — fără cursorul de sistem, altfel n-ai de unde
     ști ce e buton și ce nu */
  .cursor.e-activ{width:40px;height:40px;margin:-20px 0 0 -20px}
  html.cursor-propriu,html.cursor-propriu *{cursor:none}
}
/* Pe `prefers-reduced-motion` cercul dispare și revine cursorul normal:
   întârzierea E efectul, iar un cerc care se târăște e exact ce se cere evitat. */
@media (prefers-reduced-motion:reduce){
  .cursor{display:none}
  html.cursor-propriu,html.cursor-propriu *{cursor:auto}
}

/* =========================================================
   HERO — clipul pe tot ecranul
   ========================================================= */
.hero{
  position:relative;height:100svh;min-height:520px;overflow:hidden;
  background:var(--wall);isolation:isolate;      /* context de blend pentru nume */
}
.hero__media{position:absolute;inset:0;z-index:0}
.hero__video,.hero__poster{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:var(--pole) 50%;
}
/* Posterul dispare INSTANT, nu în fade.
   Cu stingere lentă se vedea clipul „dublat": posterul e cadrul de la secunda 0,
   iar clipul era deja la 0,5 — două imagini diferite suprapuse la opacități
   diferite. Fiind exact primul cadru, schimbul brusc nu se vede. */
.hero__poster{z-index:1}
.hero.is-playing .hero__poster{opacity:0;visibility:hidden}
/* voal discret doar sus și jos, pentru nav și pentru butoane */
.hero__veil{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(166,160,152,.85) 0%,rgba(166,160,152,0) 18%),
    linear-gradient(0deg,rgba(166,160,152,.92) 0%,rgba(166,160,152,0) 26%);
}

.hero__type{
  position:absolute;inset:0;z-index:4;
  display:flex;flex-direction:column;justify-content:center;
  padding:0 var(--pad);pointer-events:none;
}
.hero__type > *{pointer-events:auto}

/* --- sprânceana: stânga-dreapta, de-o parte și de alta a barei --- */
.hero__eyebrow{
  position:absolute;top:clamp(84px,13vh,128px);left:0;right:0;
  display:flex;justify-content:space-between;margin:0;padding:0 var(--pad);
  font-size:clamp(9px,.72vw,11.5px);letter-spacing:.3em;text-transform:uppercase;
  color:var(--ink-2);
}

/* --- numele: DIMA lipit de marginea stângă, ROȘCA de cea dreaptă, pe aceleași
       margini ca restul textelor din hero. El rămâne în golul dintre ele. --- */
.hero__name{
  position:absolute;left:0;right:0;top:30%;transform:translateY(-50%);z-index:3;
  display:flex;align-items:baseline;margin:0;padding:0 var(--pad);
  font-family:var(--fd);font-weight:400;text-transform:uppercase;
  font-size:clamp(3rem,9vw,10rem);line-height:.86;letter-spacing:-.02em;
  /* culoarea e deja închisă, deci dacă blendul nu se compune (Safari e capricios
     peste video) textul rămâne lizibil, doar fără efect */
  color:#353026;
}
/* Negrul REZULTĂ din blend, nu e pus.
   difference dă |culoare − fundal|. Culoarea textului e fix tonul peretelui
   (măsurat pe cadru: ~194,188,180), deci:
     · peste perete   → diferență ~0        → literele ies NEGRE
     · peste el, unde e întunecat (păr, pantaloni, bara) → diferență mare
                                            → literele se APRIND, el se vede clar
     · peste pielea lui luminată → tot închis
   Cu alb pur ieșea (80,87,94), adică gri-albăstrui pe tot ecranul — de aia părea
   spălăcit. Fallback-ul de mai sus rămâne închis, ca textul să fie lizibil dacă
   blendul nu se compune. */
@supports (mix-blend-mode:difference){
  .hero__name{color:#c2bcb4;mix-blend-mode:difference}
}
.hero__n{display:block;flex:1 1 0;min-width:0}
.hero__n--l{text-align:left}
.hero__n--r{text-align:right}

/* --- meta: tot stânga-dreapta --- */
.hero__meta{
  position:absolute;left:0;right:0;bottom:clamp(150px,22vh,220px);
  display:flex;justify-content:space-between;gap:20px;padding:0 var(--pad);
}
.hero__m{
  margin:0;font-size:clamp(9.5px,.78vw,12px);letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-2);max-width:38%;
}
.hero__m span{display:block;color:rgba(22,20,15,.5);margin-top:5px}
.hero__m--r{text-align:right}

.hero__act{
  position:absolute;left:0;right:0;bottom:clamp(64px,9vh,104px);
  display:flex;gap:12px;justify-content:center;flex-wrap:wrap;padding:0 var(--pad);
}

/* elementele care intră după clip */
.hero__eyebrow,.hero__name,.hero__meta,.hero__act{
  opacity:0;transform:translateY(14px);
  transition:opacity 1s var(--ease),transform 1.1s var(--ease);
}
.hero.is-typed .hero__eyebrow{opacity:1;transform:none;transition-delay:0s}
.hero.is-typed .hero__name{opacity:1;transform:none;transition-delay:.12s}
.hero.is-typed .hero__meta{opacity:1;transform:none;transition-delay:.42s}
.hero.is-typed .hero__act{opacity:1;transform:none;transition-delay:.54s}

.hero__cue{
  position:absolute;left:50%;bottom:20px;transform:translateX(-50%);z-index:4;
  width:1px;height:44px;background:rgba(22,20,15,.18);overflow:hidden;
  opacity:0;transition:opacity .8s ease 1s;
}
.hero.is-typed .hero__cue{opacity:1}
.hero__cue span{position:absolute;inset:0;background:var(--ink);animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

/* ---------- portret / ecrane înguste ----------
   Clipul umple ecranul și aici, exact ca pe desktop. Din 17.08.2026 sursa de
   portret e un render 1920×3000 cu peretele și podeaua compuse ÎN clip — iar
   din 18.08.2026 asta e și rezoluția fișierului livrat (până atunci se urca un
   reîncodaj la 1152×1800; acum clipurile vin gata făcute de la Gabi) — deci
   nu mai există nici panoul 1:1 centrat, nici masca de dizolvare a muchiilor,
   nici imaginea de cicloramă așezată peste el (`hero-fundal.webp`). Tot ce
   încerca CSS-ul să lipească la pixel e acum o singură imagine, făcută la montaj.

   Bara e la 50,03% din lățimea sursei, deci `object-position:50%` o duce singur
   în centrul ecranului, la orice raport — aceeași regulă ca pe desktop.

   `--ph` a rămas, dar și-a schimbat înțelesul: nu mai e înălțimea unui panou, ci
   BANDA în care zboară el (măsurat pe cadre: ~28%—68% din cadru). Numele se
   sprijină pe marginile ei, deci cad în peretele gol de sus și în podeaua goală
   de jos, oriunde ar fi tăiat ecranul. */
@media (max-aspect-ratio:4/3){
  /* Clipul e FUNDAL, nu compoziție: mărit atât cât să nu mai concureze cu textul.
     De aceea `--ph` nu se mai derivă din banda în care zboară el — la scale 2,2 banda
     aia depășește ecranul și n-ar mai selecta nimic. Acum e pur tipografic: cât de
     departe stau cele două cuvinte unul de altul. */
  .hero{--ph:62svh;background:var(--wall)}
  /* Clipul, mărit. Gabi: „mărește videoclipul chiar dacă în unele momente nu
     încape tot în ecran, că e prea mic." Scalarea e din centru, deci bara — care
     e la 50,03% din sursă — rămâne exact pe mijlocul ecranului. Ce iese din cadru
     taie `.hero{overflow:hidden}`.
     Cât ne costă în finețe, măsurat pe 18.08.2026 cu sursa de 1920×3000 pusă de
     Gabi (înainte era un reîncodaj la 1152×1800): pe un ecran cu dpr 2 sursa
     ajunge fix cât trebuie (0,98×, adică 1:1), iar pe telefoanele cu dpr 3 e
     întinsă 1,86× pe un iPhone 14 și 2,05× pe un 14 Pro Max. Cu vechiul 1152
     aceleași ecrane cereau peste 3×. E un fundal voalat și mișcat, deci se ține
     bine — dar dacă vreodată se vrea 1:1 peste tot, sursa trebuie să plece de la
     ~3900px lățime, nu clipul mărit din CSS. */
  .hero__video,.hero__poster{object-position:50% 50%;transform:scale(2.2)}
  /* Voal mai apăsat decât pe desktop. Motivul e o consecință directă a măririi:
     cât timp clipul era compoziție, numele cădeau prin construcție pe peretele
     gol, iar `mix-blend-mode:difference` le scotea negre. Ca FUNDAL, clipul le
     pune peste orice — iar peste talerul gri diferența dă gri pe gri.
     Voalul readuce zona de sus și cea de jos spre tonul peretelui, deci literele
     redevin închise fără să pierdem senzația de clip pe tot ecranul. */
  .hero__veil{display:block;background:
    linear-gradient(180deg,rgba(166,160,152,.92) 0%,rgba(166,160,152,.40) 17%,rgba(166,160,152,0) 32%),
    linear-gradient(0deg,rgba(166,160,152,.94) 0%,rgba(166,160,152,.48) 15%,rgba(166,160,152,0) 34%)}

  .hero__name{
    position:absolute;inset:0;top:0;transform:none;display:block;padding:0;
    /* Mare. De când clipul e fundal, numele e foreground-ul, deci poate duce
       greutatea. Plafonul venit din devtools era 5.4rem; scăzut cu 15%, la cerere. */
    font-size:clamp(2.05rem,18.7vw,4.6rem);
    /* NEGRU, fără blend. Pe desktop `difference` merge, fiindcă numele cade pe
       peretele gol. Pe telefon clipul e fundal, deci literele ajung peste orice —
       iar diferența dintre un gri și alt gri iese tot gri, spălăcit.
       Aici e cerneală plină, care nu depinde de ce se întâmplă în cadru.
       Regula stă DUPĂ blocul `@supports`, deci îl învinge la specificitate egală. */
    color:var(--ink);mix-blend-mode:normal;
    /* blendul rămâne cel definit mai sus (difference unde se poate) */
  }
  .hero__n{position:absolute;left:0;right:0;flex:none;text-align:center;padding:0}
  /* ROȘCA la 49%, DIMA la 52% — cele două cuvinte cât mai depărtate, ales de Gabi.
     Costul e cunoscut și acceptat: pe 390×844, DIMA rămâne la 10px de buton.
     De aici încolo, dacă mai trebuie aer jos, se ia din `.hero__act{bottom}`. */
  .hero__n--l{bottom:calc(49% + var(--ph)/2 - .04em)}
  /* DIMA intră cu 0,1em peste marginea de jos, ca tălpile lui să treacă prin literă.
     Aceeași mărime ca ROȘCA — cele două cuvinte sunt un singur nume. */
  .hero__n--r{top:calc(52% + var(--ph)/2 - .10em)}

  /* Minimul e 84px, nu 70: header-ul are 76px, iar pe un telefon de 667px `10vh`
     iese 67 — sprânceana ajungea SUB bară. Pragul trebuie să treacă de header,
     nu doar să fie mic. */
  .hero__eyebrow{top:clamp(76px,8vh,90px);font-size:9.5px;letter-spacing:.22em}
  /* pe telefon cifrele se repetă imediat sub hero — aici doar încarcă ecranul */
  .hero__meta{display:none}
  /* un singur buton pe portret: două stivuite urcă peste ROȘCA pe ecrane scurte,
     iar „vezi rutina" e oricum la un scroll și în meniu */
  /* Pe telefoanele scunde banda calculată împinge numele în sprânceană (măsurat:
     7px pe 360×640). Acolo `--ph` primește un plafon: numele intră câțiva
     procente în bandă, dar exact la capetele ei, unde e vârful barei și talpa —
     nu peste el. O suprapunere de câțiva pixeli cu decorul e mai bună decât una
     cu textul de deasupra. */
  @media (max-height:820px){
    .hero{--ph:52svh}
    /* Pe ecrane scunde plafonul e mai jos: altfel numele nu mai încape între
       sprânceană și buton. Valoarea exactă e măsurată mai jos, nu ghicită. */
    .hero__name{font-size:clamp(2.05rem,18.7vw,4.6rem)}
  }

  .hero__act{bottom:clamp(20px,3.5svh,44px);justify-content:center}
  /* Butonul, mai mic. Era lat cât 78% din ecran și cu paddingul de pe desktop,
     deci pe telefon ieșea elementul cel mai greu din hero — mai greu decât
     numele. Invitația la acțiune trebuie să fie clară, nu cea mai mare.
     Se strâmtează din LĂȚIME și din padding; litera rămâne cea de pe restul
     site-ului (13px / .13em), ca butonul să nu pară altă familie decât cele
     din Contact. */
  .hero__act .btn{width:auto;min-width:0;justify-content:center;padding:12px 24px}
  .hero__act .btn--line{display:none}
  .hero__cue{display:none}
}

/* Trecerea perete → negru se face tăiat, fără gradient (cerut de Gabi):
   peretele de studio se termină, începe negrul în care trăiesc fotografiile. */

/* =========================================================
   NAV
   ========================================================= */
/* `translate` e proprietate separată de `transform` — dinadins: intrarea
   header-ului folosește `transform`, retragerea la scroll folosește `translate`,
   deci nu se calcă una pe alta și fiecare își are durata ei. Se compun singure. */
.nav{position:fixed;inset:0 0 auto;z-index:100;
  transition:color .5s var(--ease),translate .4s var(--ease)}
/* header-ul pornește invizibil și intră odată cu textul din hero */
.nav--hidden{opacity:0;transform:translateY(-10px);pointer-events:none}
/* Lista de tranziții se REPETĂ aici, nu se completează: `transition` e o
   proprietate, nu o listă cumulativă. Prima versiune scria doar opacity și
   transform, ceea ce ștergea tranziția de culoare de mai sus — de aceea
   header-ul își schimba culoarea instant, dintr-un cadru în altul. */
.nav--hidden.is-in{
  opacity:1;transform:none;pointer-events:auto;
  transition:opacity 1s var(--ease) .3s,transform 1.1s var(--ease) .3s,
             color .5s var(--ease),translate .4s var(--ease);
}
/* Pe telefon header-ul se retrage la scroll în jos și revine la scroll în sus.
   Doar acolo: pe desktop bara e subțire și nu fură din ecran, iar mișcarea ar
   fi zgomot. Se aplică pe `.nav`, nu pe `.nav__in`, ca să plece cu tot cu
   fundalul și blurul, care stau pe `::before`. */
@media(max-width:819px){
  .nav.e-retras{translate:0 -100%}
}
/* fără max-width: header-ul cade pe aceleași margini ca textele din hero */
.nav__in{max-width:none;margin-inline:0;padding:22px var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  transition:padding .5s var(--ease)}
/* Bara subțire merge și pe ecranele de 4:3 (1024×768), care iau oricum layoutul
   de portret: acolo header-ul de desktop rămânea 85px și sprânceana intra sub el.
   Regula stă DUPĂ `.nav__in` de bază — la specificitate egală contează ordinea. */
@media (max-aspect-ratio:4/3){ .nav__in{padding:11px var(--pad)} }
.nav--light{color:var(--ink)}
/* Fundalul si blurul stau pe un PSEUDO-ELEMENT, nu pe `.nav`.
   Motivul e o regula de CSS usor de calcat: `backdrop-filter` (ca si `transform`
   sau `filter`) face din element blocul de referinta pentru descendentii
   `position:fixed`. Cu blurul pe `.nav`, panza meniului — `fixed;inset:0` — se
   raporta la HEADER, nu la ecran: dupa ce derulai, meniul se deschidea ca o fasie
   de 136px in loc de tot ecranul. Pe pseudo-element, `.nav` ramane curat.

   Linia de jos e umbra, nu chenar: un `border` ar adauga 1px la inaltime exact la
   comutare, iar tot rostul e sa nu se miste nimic. */
.nav::before{content:'';position:absolute;inset:0;z-index:-1;
  transition:background-color .5s var(--ease),backdrop-filter .5s var(--ease),
             box-shadow .5s var(--ease)}
.nav.is-stuck::before{background:rgba(10,10,11,.86);backdrop-filter:blur(14px);
  box-shadow:inset 0 -1px 0 var(--line-soft)}
.nav.is-stuck{color:var(--cream)}
/* header-ul NU se mai subtiaza cand trece pe negru: sarea de la 85px la 70px si
   se vedea ca sughit exact in momentul schimbarii de culoare */
.nav__brand{display:flex;align-items:center;gap:12px}
/* Monograma e SVG inline, nu imagine: asa mosteneste `currentColor` si trece
   singura de la tus la crem odata cu header-ul. Fara chenar — e o monograma. */
.nav__mono{display:block;height:30px;width:auto;flex:none;fill:currentColor;opacity:.92}
.nav.is-stuck .nav__mono,.nav.is-menu .nav__mono{opacity:1}
.nav__name{font-family:var(--fd);font-size:17px}
.nav__links{display:flex;align-items:center;gap:clamp(18px,2.4vw,34px)}
.nav__links a{font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;
  opacity:.72;transition:opacity .3s;position:relative;padding-block:4px}
.nav__links a:hover{opacity:1}
.nav__cta{border:1px solid currentColor;padding:9px 20px!important;opacity:1!important;
  transition:color .5s var(--ease),border-color .5s var(--ease)}
.nav.is-stuck .nav__cta{color:var(--gold)}
/* `color:inherit` nu e decorativ: un <button> are culoare proprie de la browser,
   care bate mostenirea. Fara ea, hamburgerul ramanea negru orice ar fi facut
   header-ul — inclusiv negru pe panza neagra a meniului deschis. */
.nav__burger{display:none;width:44px;height:44px;background:none;border:0;cursor:pointer;
  color:inherit;
  flex-direction:column;justify-content:center;gap:6px;padding:0}
.nav__burger span{display:block;height:1px;background:currentColor;transition:.35s var(--ease)}
.nav__burger span:nth-child(1),.nav__burger span:nth-child(3){width:24px}
.nav__burger span:nth-child(2){width:18px}
.nav__burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav__burger.is-open span:nth-child(2){opacity:0}
.nav__burger.is-open span:nth-child(3){width:24px;transform:translateY(-7px) rotate(-45deg)}
@media(max-width:900px){
  /* Bara mai subțire, doar pe telefon — pe 844px, 88px însemnau 10% din ecran.
     Regula stă AICI, nu în blocul de mai sus: acela vine înaintea regulii de
     bază `.nav__in{padding:22px}`, iar la specificitate egală câștigă ultima
     din fișier. Aceeași capcană ca la compactarea cifrului. */
  .nav__in{padding:11px var(--pad)}
  .nav__burger{display:flex}
  /* marca si butonul raman DEASUPRA panzei: altfel meniul deschis acopera tot si
     nu mai vezi nici unde esti, nici cu ce inchizi */
  .nav__brand,.nav__burger{position:relative;z-index:2}
  .nav__links{position:fixed;inset:0;background:rgba(10,10,11,.97);backdrop-filter:blur(10px);
    color:var(--cream);flex-direction:column;justify-content:center;gap:8px;
    padding:96px var(--pad) calc(var(--pad) + 20px);
    overflow-y:auto;overscroll-behavior:contain;
    opacity:0;visibility:hidden;transition:.45s var(--ease)}
  .nav__links.is-open{opacity:1;visibility:visible}
  .nav__links a{font-family:var(--fd);font-size:clamp(21px,6.2vw,27px);text-transform:none;
    opacity:1;padding:12px 16px}
  .nav__cta{margin-top:16px}
}
/* ecran scund (telefon in landscape): centrarea nu mai incape, deci pornim de sus
   si micsoram. Fara asta, primul link ajungea peste butonul de inchidere. */
@media(max-width:900px) and (max-height:560px){
  .nav__links{justify-content:flex-start;gap:0;padding-top:78px}
  .nav__links a{font-size:19px;padding:8px 14px}
  .nav__cta{margin-top:10px}
}
/* Cat timp meniul e deschis, header-ul e pe fundal negru, deci trebuie crem.
   Inainte ramanea pe `--ink` si iesea un X negru pe panza neagra — invizibil.
   Sta DUPA `.is-stuck`, ca sa castige la specificitate egala. */
.nav.is-menu{color:var(--cream)}
.nav.is-menu .nav__cta{color:var(--gold)}

/* =========================================================
   BUTOANE
   ========================================================= */
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 30px;border-radius:2px;
  font-family:var(--fb);font-size:13px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;
  border:1px solid transparent;transition:.35s var(--ease);cursor:pointer}
.btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;flex:none}
.btn--ink{background:var(--ink);color:var(--wall-2);border-color:var(--ink)}
.btn--ink:hover{background:#000;transform:translateY(-2px)}
.btn--line{color:var(--ink);border-color:rgba(22,20,15,.4)}
.btn--line:hover{border-color:var(--ink);transform:translateY(-2px)}
.btn--gold{background:var(--gold);color:#0a0a0b;border-color:var(--gold)}
.btn--gold:hover{background:#e6c589;border-color:#e6c589;transform:translateY(-2px)}
.btn--ghost{color:var(--cream);border-color:var(--line)}
.btn--ghost:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-2px)}

/* =========================================================
   SECȚIUNI PE PERETE (bej)
   Pagina alternează: perete → negru (acolo unde sunt fotografiile, care sunt
   toate fotografiate pe fundal negru) → perete → negru.
   Nu dublăm CSS-ul: clasa asta redefinește DOAR variabilele de culoare, iar
   regulile de mai jos, scrise pe variabile, se întorc singure.
   ========================================================= */
.on-wall{
  /* mai deschis decât peretele din clip (#a6a098): acolo e fundal de imagine,
     aici e fundal de TEXT, iar pe #a6a098 contrastul cădea sub prag */
  background:var(--paper);
  --cream:#16140f;                 /* textul principal devine închis */
  --cream-dim:#3a362f;
  --cream-faint:#4e4a42;
  --gold:#6f5518;                  /* alama; pe bejul deschis poate fi mai caldă */
  --gold-soft:#8a7141;
  --line:rgba(22,20,15,.20);
  --line-soft:rgba(22,20,15,.11);
  --bg-soft:var(--paper);
  --bg-card:#cdc8be;
  color:var(--cream);
}
/* argintul și bronzul de la medalii sunt prea deschise pe bej */
.on-wall .m--s{color:#474b4f}
.on-wall .m--b{color:#694726}
/* pozele din secțiunile pe perete primesc un chenar, ca să nu plutească */
.on-wall .about__media img{box-shadow:0 1px 0 rgba(22,20,15,.12)}

/* =========================================================
   SECȚIUNI ÎNTUNECATE
   ========================================================= */
.sec__num{font-size:12px;font-weight:500;letter-spacing:.32em;color:var(--gold);margin:0 0 18px}
.sec__num::after{content:'';display:inline-block;width:52px;height:1px;background:var(--gold-soft);margin-left:16px;vertical-align:middle}
.sec__t{font-family:var(--fd);font-size:clamp(2rem,5.2vw,3.9rem);letter-spacing:-.015em;margin:0 0 .5em}
.sec__lead{color:var(--cream-dim);max-width:56ch;font-size:1.05em}

.stats{border-block:1px solid var(--line-soft);background:var(--bg-soft)}
.stats__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line-soft);padding:0}
/* Sub 380px se trece pe o coloană. Măsurat: la 360px TOATE cele patru etichete
   se rup în două rânduri, iar la 320px „titluri de campion mondial" ajunge la
   trei — cifra și eticheta ei nu mai arată ca o pereche, ci ca un bloc de text.
   Peste prag rămân două coloane, unde cel mult o etichetă se rupe. */
@media(max-width:379px){.stats__grid{grid-template-columns:1fr}}
@media(min-width:760px){.stats__grid{grid-template-columns:repeat(4,1fr)}}
.stat{background:var(--bg-soft);padding:clamp(28px,4vw,48px) clamp(16px,2.5vw,28px);text-align:center}
.stat__n{display:block;font-family:var(--fd);font-size:clamp(2.3rem,5vw,3.5rem);color:var(--gold);
  line-height:1;margin-bottom:12px;font-variant-numeric:tabular-nums}
/* plusul, în sans: în Bodoni bara lui orizontală e un fir de păr și dispare pe
   telefon, rămânând doar cea verticală. Pus puțin mai mic și ridicat, ca să
   citească a exponent, nu a semn de adunare lipit de cifră. */
.stat__plus{font-family:var(--fb);font-size:.5em;font-weight:300;
  vertical-align:.5em;margin-left:.08em;letter-spacing:0}
.stat__l{display:block;font-size:11.5px;letter-spacing:.19em;text-transform:uppercase;color:var(--cream-faint)}

.about{padding-block:var(--sec)}
.about__grid{display:grid;gap:clamp(32px,5vw,72px)}
/* Poza NU e lipită. A fost, dar textul de lângă ea e scurt: cursa pe care rămânea
   pe loc era atât de mică încât nu se citea ca intenție, ci ca o poză care se
   agață o clipă și apoi sare — adică a glitch. Un efect pe care trebuie să-l
   explici nu-și merită locul. Stă normal, sus în coloana ei. */
/* Poza cu 25% mai mare, cerut de Gabi. Raportul nu se ghicește: coloana ei
   avea .85fr din 1.85fr, adică 45,9% din lățime; pentru +25% îi trebuie 57,4%,
   ceea ce înseamnă 1.35fr din 2.35fr. Textul rămâne la ~440px, adică sub cele
   60ch pe care le are oricum ca plafon — deci nu se lățește, doar se strânge
   coloana în jurul lui. */
@media(min-width:900px){.about__grid{grid-template-columns:1.35fr 1fr;align-items:start}}
.about__media img{width:100%;height:auto;filter:grayscale(.15) contrast(1.03)}
.about__text p{color:var(--cream-dim);max-width:60ch}
.about__text strong{color:var(--cream);font-weight:400}
.about__facts{margin:2.4em 0;border-top:1px solid var(--line-soft)}
.about__facts li{display:grid;grid-template-columns:110px 1fr;gap:16px;padding:15px 0;
  border-bottom:1px solid var(--line-soft);font-size:.95em;color:var(--cream-dim)}
.about__facts span{font-size:11px;letter-spacing:.19em;text-transform:uppercase;color:var(--gold);padding-top:3px}

.disc{padding-block:0 var(--sec)}
.disc__grid{display:grid;grid-template-columns:1fr;gap:clamp(14px,1.8vw,24px);margin-top:clamp(32px,4vw,56px)}
@media(min-width:640px){.disc__grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.disc__grid{grid-template-columns:repeat(3,1fr)}}
.disc__card{margin:0;position:relative;overflow:hidden;background:var(--bg-card)}
.disc__card img{width:100%;height:100%;aspect-ratio:4/5;object-fit:cover;
  transition:transform 1.1s var(--ease);filter:brightness(.82)}
.disc__card:hover img{transform:scale(1.045);filter:brightness(.95)}
.disc__card figcaption{position:absolute;inset:auto 0 0;padding:clamp(20px,2.6vw,28px);
  background:linear-gradient(transparent,rgba(10,10,11,.55) 30%,rgba(10,10,11,.95))}
.disc__card h3{font-family:var(--fd);font-size:clamp(1.15rem,1.9vw,1.5rem);margin-bottom:.35em}
.disc__card p{font-size:.85em;color:var(--cream-dim);margin:0;line-height:1.55}

.ev{padding-block:var(--sec);background:var(--bg-soft);border-block:1px solid var(--line-soft)}
.ev__grid{display:grid;gap:1px;background:var(--line-soft);margin-top:clamp(28px,4vw,48px);border:1px solid var(--line-soft)}
@media(min-width:680px){.ev__grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.ev__grid{grid-template-columns:repeat(3,1fr)}}
.ev__i{background:var(--bg-soft);padding:clamp(28px,3.4vw,44px);transition:background .4s}
.ev__i:hover{background:var(--bg-card)}
.ev__i h3{font-family:var(--fd);font-size:1.35rem;margin-bottom:.55em}
.ev__i p{color:var(--cream-dim);font-size:.92em;margin:0}

.gal{padding-block:var(--sec)}
.gal__grid{columns:2;column-gap:clamp(8px,1.2vw,16px);margin-top:clamp(28px,4vw,48px)}
@media(min-width:760px){.gal__grid{columns:3}}
@media(min-width:1200px){.gal__grid{columns:4}}
.gal__i{break-inside:avoid;margin:0 0 clamp(8px,1.2vw,16px);position:relative;display:block;
  width:100%;padding:0;border:0;background:#0e0e10;cursor:zoom-in;overflow:hidden}
.gal__i img{width:100%;height:auto;transition:transform .9s var(--ease),opacity .5s;opacity:.86}
.gal__i:hover img{transform:scale(1.05);opacity:1}
/* HOVER AGĂȚAT LA DERULARE
   Browserul nu reevaluează `:hover` când derulezi fără să miști mouse-ul: poza
   pleacă de sub cursor, dar rămâne mărită până la prima mișcare. Se vede cel mai
   tare la galerie, unde efectul e o scalare.
   `fara-hover` se pune pe `<html>` la primul scroll și se ridică la prima mișcare
   de mouse. Nu dezactivează interacțiunea — doar starea vizuală, care oricum
   descria ceva ce nu mai e adevărat. Tranzițiile rămân, deci revenirea e lină. */
html.fara-hover .gal__i:hover img{transform:none;opacity:.86}
html.fara-hover .gal__i:hover::after{border-color:transparent}
html.fara-hover .disc__card:hover img{transform:none;filter:none}
html.fara-hover .btn:hover{transform:none}
html.fara-hover .mq__i:hover img{opacity:.62}
.gal__i::after{content:'';position:absolute;inset:0;border:1px solid transparent;transition:border-color .4s}
.gal__i:hover::after{border-color:var(--gold-soft)}

.pal{padding-block:var(--sec);background:var(--bg-soft);border-block:1px solid var(--line-soft)}

/* ---------------------------------------------------------
   CIFRUL DE ANI
   Palmaresul întreg pe ecran era un zid de text. Aici e un an
   pe rând: rola de ani se învârte pe scroll, în dreapta stă
   panoul anului. Nu blochează scroll-ul — secțiunea e doar
   înaltă, iar conținutul e `sticky` în mijlocul ecranului.
   --------------------------------------------------------- */
.cifru{position:relative;height:calc(100svh + (var(--pasi) - 1)*38svh)}
/* continutul se centreaza pe verticala in ecran, dar intr-o caseta care lasa loc
   header-ului sus: `padding-block` intra in calculul centrarii, deci nu poate
   ajunge sub header oricat de scund ar fi ecranul */
.cifru__lipit{position:sticky;top:0;height:100svh;display:flex;align-items:center;
  padding-block:clamp(84px,10vh,116px) 24px}
.cifru__in{width:100%;display:grid;gap:clamp(14px,3vw,56px);align-items:center}
@media(min-width:820px){.cifru__in{grid-template-columns:minmax(110px,20%) 1fr}}

.cifru__ani{--h:clamp(44px,5.4vw,70px);height:calc(var(--h)*5);overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 24%,#000 76%,transparent);
  mask-image:linear-gradient(to bottom,transparent,#000 24%,#000 76%,transparent)}
.cifru__rola{margin:0;padding:0;list-style:none;
  transform:translateY(calc(var(--h)*2 - var(--activ,0)*var(--h)));
  transition:transform .55s cubic-bezier(.22,1,.36,1)}
.cifru__rola li{height:var(--h)}
.cifru__an{
  display:flex;align-items:center;height:100%;width:100%;padding:0;
  background:none;border:0;cursor:pointer;font-family:var(--fd);
  font-size:clamp(1.05rem,2.1vw,1.7rem);line-height:1.1;letter-spacing:.02em;
  color:var(--cream-faint);opacity:.3;
  transition:opacity .5s var(--ease),color .5s var(--ease);
}
.cifru__an.e-activ{opacity:1;color:var(--cream)}
.cifru__an:focus-visible{outline:1px solid var(--gold);outline-offset:4px;opacity:1}

/* Panoramare: un an cu multe randuri (2024—2025 are sapte) nu incape intr-un
   ecran de telefon. In loc sa renuntam la rola — care e tot rostul sectiunii —
   panoul se plimba pe verticala in interiorul ecranului, tras de acelasi scroll
   care invarte rola. Fara scroll imbricat, fara continut taiat. */
/* Fereastra panoului: inaltime fixa (pusa din JS) si DECUPATA. Fara decupare,
   panoul plimbat pe verticala urca peste rola de ani, care n-are fundal propriu.
   Panoramarea sta pe PANOU, nu pe fereastra — fereastra trebuie sa ramana pe loc
   ca sa poata taia. */
.cifru__panouri{display:grid;align-items:center;overflow:hidden}
.cifru__p{grid-area:1/1;opacity:0;visibility:hidden;
  transform:translateY(var(--pan,0px));will-change:transform;
  transition:opacity .45s var(--ease),visibility .45s}
.cifru__p.e-activ{opacity:1;visibility:visible}
/* Pe telefon, alt tipar — și nu din estetică, ci fiindcă altfel se pierde conținut:
   panoul lui 2024 are șase rânduri, adică ~690px, iar cu rola deasupra nu încape
   într-un ecran de 640px. Într-un bloc `sticky` de o înălțime de ecran, ce nu încape
   nu se poate derula: rămâne tăiat, definitiv.

   Deci pe lat rămâne cifrul clasic (rola lângă panou, un an pe ecran), iar pe telefon
   rola se lipește sus ca o bandă și anii curg normal pe sub ea. Efectul se păstrează,
   nimic nu se mai taie. */
/* un an = o singură listă. Concursuri, teatru, film și reclame stau amestecate,
   în ordinea în care s-au întâmplat; felul faptei e o etichetă în stânga, nu o
   secțiune separată. Împărțirea veche pe „Film, TV" / „Teatru" rupea anul în două. */
.cifru__r{display:grid;gap:6px;padding-block:clamp(11px,1.3vw,16px)}
@media(min-width:820px){
  .cifru__r{grid-template-columns:clamp(110px,12vw,150px) 1fr;gap:0 clamp(18px,2vw,32px);
    align-items:baseline}
}
.cifru__r + .cifru__r{border-top:1px solid var(--line-soft)}
/* Fiecare rând își poartă anul: pașii sunt intervale, nu ani, de când s-au comasat
   grupele cu un singur rând. Anul, deasupra felului, în aceeași coloană. */
.cifru__fel{margin:0;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);line-height:1.5}
.cifru__fel b{display:block;font-family:var(--fd);font-weight:400;font-size:1.02rem;
  letter-spacing:0;text-transform:none;color:var(--cream-faint);margin-bottom:.15em;line-height:1.2}
.cifru__t{margin:0;font-size:clamp(1rem,1.5vw,1.12em);color:var(--cream);line-height:1.35}
.cifru__pr{margin:.4em 0 0;color:var(--cream-dim);font-size:.84em;line-height:1.7;max-width:64ch}

/* Ecran scund (telefoane mici, laptopuri de 720px): strangem si mai mult, ca sa
   nu ramana nicio grupa mai inalta decat ecranul. Panoramarea exista in continuare
   ca plasa, dar nu mai are ce prinde — si asta conteaza: o grupa care se plimba
   printre altele care doar se sting arata a defect, chiar daca e corecta. */
@media(max-height:760px){
  .cifru__lipit{padding-block:clamp(76px,9vh,96px) 20px}
  .cifru__r{padding-block:8px}
  .cifru__pr{font-size:.8em;line-height:1.55;margin-top:.3em}
  .cifru__t{font-size:1rem;line-height:1.3}
  .pal__med{margin-bottom:.45em}
  .pal__med .m{padding:2px 8px;font-size:.74em}
}
/* si mai strans, pentru telefoanele mici (640px inaltime): ultimele zeci de pixeli
   care fac diferenta intre „se stinge" si „se plimba" */
@media(max-height:680px){
  .cifru__lipit{padding-block:64px 16px}
  .cifru__in{gap:8px}
  .cifru__r{padding-block:4px}
  .cifru__t{line-height:1.25}
  .cifru__pr{font-size:.76em;line-height:1.4;margin-top:.25em}
  .cifru__ani{--h:clamp(24px,6.4vw,32px)}
}
@media(max-width:819px){
  /* Anii urcă în locul header-ului. Se poate abia de când bara nu mai apare în
     secțiunea asta: spațiul rezervat ei sus era gol, iar rola și panoul se
     înghesuiau amândouă în ce rămânea. Acum rola stă sus, lipită de marginea de
     sus a ecranului, iar panoul primește tot restul.
     `padding-block` scade de la ~84px la 14px + zona sigură (crestătura): nu mai
     are ce ocoli. Formula din JS (`loc = blocul lipit − padding − rolă − gap`)
     rămâne valabilă, doar că îi iese mai mult loc. */
  .cifru__lipit{align-items:stretch;
    padding-block:calc(14px + env(safe-area-inset-top,0px)) 20px}
  .cifru__in{grid-template-rows:auto 1fr;align-items:start}
  .cifru__panouri{align-self:center}
  .cifru__ani{--h:clamp(30px,7.6vw,40px);height:calc(var(--h)*3)}
  .cifru__rola{transform:translateY(calc(var(--h) - var(--activ,0)*var(--h)))}
  .cifru__r{grid-template-columns:clamp(58px,15vw,74px) 1fr;gap:0 12px;
    display:grid;align-items:baseline;padding-block:9px}
  .cifru__fel{font-size:9px;letter-spacing:.14em}
  .cifru__fel b{font-size:.9rem}
  .cifru__t{font-size:.97rem;line-height:1.3}
  .cifru__pr{font-size:.76em;line-height:1.55;margin-top:.3em}
  .pal__med{gap:5px;margin-bottom:.45em}
  .pal__med .m{padding:2px 7px;font-size:.72em}
}
/* Telefon mic = îngust ȘI scund, adică amândouă seturile de reguli deodată.
   Blocul de lățime de mai sus vine DUPĂ cele de înălțime în fișier, deci le
   anula (aceeași specificitate, ultimul câștigă): pe un 375×667 rândurile
   rămâneau la 9px de padding, nu la 4. Aici se repetă compactarea, de data asta
   după ce a trecut și regula de lățime.

   Contează fiindcă pe o coloană rola stă DEASUPRA panoului: locul rămas pentru
   panou e ecranul minus rola minus gap, nu tot ecranul. O grupă de șase rânduri
   nu încape fără strângerea asta — și ce nu încape într-un bloc `sticky` nu se
   poate derula, rămâne tăiat. Paddingul de sus al blocului lipit NU se atinge:
   el e cel care ține conținutul sub header. */
@media(max-width:819px) and (max-height:760px){
  .cifru__r{padding-block:6px}
  .cifru__t{font-size:.95rem;line-height:1.28}
  .cifru__pr{font-size:.75em;line-height:1.45;margin-top:.25em}
  .pal__med .m{padding:2px 6px;font-size:.7em}
}
@media(max-width:819px) and (max-height:700px){
  .cifru__in{gap:6px}
  .cifru__r{padding-block:3px}
  .cifru__t{line-height:1.22}
  .cifru__pr{font-size:.72em;line-height:1.35;margin-top:.2em}
  .cifru__ani{--h:clamp(22px,6vw,28px)}
}

.pal__med{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 .7em}
.pal__med .m{border:1px solid var(--line);border-radius:2px;
  padding:3px 10px;font-size:.78em;letter-spacing:.08em;text-transform:uppercase}

/* Fără roată: pe reduced-motion și fără JS, anii și panourile stau pur și simplu
   unul sub altul. Palmaresul rămâne întreg, doar că nu se mai învârte. */
@media(prefers-reduced-motion:reduce){
  .cifru,.no-js .cifru{height:auto}
  .cifru__lipit{position:static;height:auto;display:block;padding-block:var(--sec)}
  .cifru__in{grid-template-columns:1fr}
  .cifru__ani{display:none}
  .cifru__panouri{display:block}
  .cifru__p{opacity:1;visibility:visible;transform:none}
  .cifru__p + .cifru__p{margin-top:clamp(40px,6vw,80px)}
}
.m{font-weight:500;letter-spacing:.04em;font-size:.92em}
/* medaliile ca jetoane, nu ca frază: rândul vizibil spune CÂT, disclosure-ul
   de dedesubt spune LA CE. Palmaresul complet era un bloc de text pe care
   nimeni nu-l citea până la capăt. */
.pal__med{display:flex;flex-wrap:wrap;gap:8px;margin:.15em 0 0}
.pal__med .m{
  border:1px solid var(--line);border-radius:2px;
  padding:3px 10px;font-size:.78em;letter-spacing:.08em;text-transform:uppercase;
}
.m--g{color:var(--gold)}.m--s{color:#c3c7cc}.m--b{color:#b98d63}

.cli{padding-block:var(--sec);background:var(--bg-soft);border-block:1px solid var(--line-soft);overflow:hidden}
.mq{margin-top:clamp(24px,3vw,40px);display:grid;gap:clamp(12px,1.6vw,20px)}
.mq__row{display:flex;width:max-content;animation:mq 46s linear infinite}
/* Strat propriu de compunere: fără el, Safari repictează pista bucată cu bucată
   în timp ce se mișcă. Clasa se pune din JS și DOAR pe rândurile care rămân sub
   8192px, fiindcă un strat mai lat de atât riscă să nu mai poată fi rasterizat —
   și atunci nu clipește, ci dispare tot rândul. Pe telefon rândurile fac
   3700—7700px, deci îl primesc; pe un ultrawide, unde pista trebuie oricum să
   fie mai lată decât ecranul, nu au cum să încapă și rămân nepromovate. */
.mq__row--strat{will-change:transform;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.mq__row--rev{animation-direction:reverse;animation-duration:58s}
/* banda NU se oprește la hover — cerut de Gabi: pauza rupea ritmul fără să
   aducă nimic, logourile nu-s clicabile */
.mq__t{display:flex;flex:none;align-items:center}
/* fiecare element din bandă: fie logo, fie numele scris. Aceeași înălțime
   optică pentru amândouă, ca banda să pară un singur set. */
.mq__i{
  display:inline-flex;align-items:center;flex:none;
  padding-inline:clamp(18px,2.4vw,34px);white-space:nowrap;
}
.mq__i img{
  height:clamp(26px,3.2vw,46px);width:auto;
  opacity:.62;transition:opacity .35s var(--ease);
}
.mq__i:hover img{opacity:1}
.mq__i::after{content:'·';margin-left:clamp(18px,2.4vw,34px);color:var(--gold-soft)}
@keyframes mq{to{transform:translateX(-50%)}}

.coach{padding-block:var(--sec)}
.coach__in{display:grid;gap:clamp(32px,5vw,72px)}
@media(min-width:900px){.coach__in{grid-template-columns:1fr 1fr;align-items:start}}
.coach p{color:var(--cream-dim);max-width:56ch}
.coach strong{color:var(--cream);font-weight:400}
.coach__l{border-top:1px solid var(--line-soft)}
.coach__l li{padding:20px 0;border-bottom:1px solid var(--line-soft);color:var(--cream-dim);font-size:.95em}
.coach__l li span{display:block;font-size:11px;letter-spacing:.19em;text-transform:uppercase;
  color:var(--gold);margin-bottom:6px}

.ct{padding-block:var(--sec);border-top:1px solid var(--line-soft);
  background:radial-gradient(90% 120% at 50% 100%,rgba(217,177,104,.07),transparent 70%),var(--bg)}
.ct__in{text-align:center;display:flex;flex-direction:column;align-items:center}
.ct .sec__num::after{display:none}
.ct__t{font-family:var(--fd);font-size:clamp(2.2rem,6.4vw,4.6rem);line-height:1.05;margin-bottom:.4em}
.ct__t span{color:var(--gold)}
.ct__lead{color:var(--cream-dim);max-width:46ch;margin-bottom:2.6em}
.ct__btns{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}

.ft{border-top:1px solid var(--line-soft);padding-block:clamp(36px,5vw,58px)}
/* trei coloane, nu `space-between`: doar asa logoul e pe centrul PAGINII, nu la
   mijlocul distantei dintre cele doua texte, care au lungimi diferite */
.ft__in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px}
.ft__l,.ft__r{margin:0;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cream-faint)}
.ft__r{text-align:right}
.ft__logo{display:block;justify-self:center;color:var(--cream-dim);
  transition:color .35s var(--ease)}
.ft__logo svg{display:block;width:clamp(118px,13vw,164px);height:auto;fill:currentColor}
.ft__logo:hover,.ft__logo:focus-visible{color:var(--cream)}
@media(max-width:660px){
  .ft__in{grid-template-columns:1fr;justify-items:center;text-align:center;gap:24px}
  .ft__logo{order:-1}
  .ft__r{text-align:center}
}

/* Ecrane foarte înguste — Galaxy Fold închis (280px), sau text mărit la maximum.
   Măsurat pe live pe 19.08.2026: singurul loc din toată pagina care ieșea lateral
   era butonul de e-mail din Contact. `dimarosca92@gmail.com` e un cuvânt care nu
   se poate rupe, iar cu majuscule, litere rărite și 60px de padding cerea 309px —
   la 280px pagina se lățea cu 15px și se putea trage orizontal.
   Nu se schimbă nimic peste pragul ăsta: de la 320px în sus nu era overflow. */
@media(max-width:340px){
  .ct__btns .btn{max-width:100%;padding-inline:14px;letter-spacing:.06em;
    overflow-wrap:anywhere;text-align:center}
}

.lb{position:fixed;inset:0;z-index:150;background:rgba(6,6,7,.97);backdrop-filter:blur(8px);
  display:grid;place-items:center;padding:clamp(16px,4vw,56px);opacity:0;transition:opacity .35s var(--ease)}
.lb[hidden]{display:none}
.lb.is-open{opacity:1}
/* fără legendă sub poză: rămâne doar imaginea, deci nici coloană, nici gap */
.lb__f{margin:0;max-width:100%;max-height:100%;display:flex;align-items:center;justify-content:center}
.lb__f img{max-width:100%;max-height:82vh;width:auto;height:auto;object-fit:contain}
.lb__x,.lb__p{position:absolute;background:none;border:0;color:var(--cream-dim);cursor:pointer;
  transition:color .3s;line-height:1;padding:12px}
.lb__x{top:12px;right:16px;font-size:38px}
.lb__p{top:50%;transform:translateY(-50%);font-size:52px}
.lb__p--prev{left:6px}.lb__p--next{right:6px}
.lb__x:hover,.lb__p:hover{color:var(--gold)}

.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.is-in{opacity:1;transform:none}

/* =========================================================
   DEZVĂLUIRE LEGATĂ DE SCROLL
   Textul stă la opacitate mică și se aprinde de la stânga la dreapta pe
   măsură ce derulezi. Se aplică DOAR pe titluri și pe câteva declarații —
   pe liste și pe palmares ar fi enervant, acolo omul scanează date.
   ========================================================= */
[data-rv]{--rv-jos:.16}
[data-rv] .rv__u{
  display:inline-block;white-space:pre-wrap;
  opacity:var(--rv-jos);
  will-change:opacity;
}
/* fără JS, textul e întreg și lizibil — nu depinde de animație */
.no-js [data-rv] .rv__u{opacity:1}

/* citatul: singurul loc unde efectul e subiectul, nu accesoriul */
.quote{padding-block:var(--sec)}
/* lățime în px/vw, NU în `ch`: pe containerul ăsta `ch` se raportează la fontul
   lui (17px), nu la corpul mare al citatului — ieșea ~180px, adică un cuvânt pe rând */
.quote__in{max-width:clamp(300px,64vw,880px);margin-inline:auto;text-align:center}
.quote blockquote{
  margin:0;font-family:var(--fd);font-weight:400;
  font-size:clamp(1.9rem,5.2vw,4.2rem);line-height:1.12;letter-spacing:-.015em;
}
.quote figcaption{
  margin-top:clamp(24px,3vw,40px);font-size:11px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--cream-faint);
}

@media(prefers-reduced-motion:reduce){
  [data-rv] .rv__u{opacity:1!important}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  .reveal{opacity:1;transform:none}
  .hero__eyebrow,.hero__name,.hero__meta,.hero__act{opacity:1;transform:none}
  .hero__cue{display:none}
  .mq__row{animation:none;width:auto;flex-wrap:wrap;justify-content:center}
  .mq__t{flex-wrap:wrap;justify-content:center}
  .mq__t[aria-hidden="true"]{display:none}
}

/* =========================================================
   FĂRĂ JAVASCRIPT
   Tot ce așteaptă JS ca să devină vizibil trebuie arătat din start, altfel
   conținutul e în DOM dar invizibil: .reveal stă pe opacity 0 până îl atinge
   IntersectionObserver, iar hero-ul și navul așteaptă clipul.
   ========================================================= */
.no-js .reveal{opacity:1;transform:none}
.no-js .hero__eyebrow,.no-js .hero__name,.no-js .hero__meta,.no-js .hero__act{opacity:1;transform:none}
.no-js .nav--hidden{opacity:1;transform:none;pointer-events:auto}
.no-js .hero__poster{opacity:1;visibility:visible}
/* cifrul de ani are nevoie de JS ca să se învârtă; fără el, anii și panourile
   stau unul sub altul și palmaresul se citește întreg */
.no-js .cifru{height:auto}
.no-js .cifru__lipit{position:static;height:auto;display:block;padding-block:var(--sec)}
.no-js .cifru__in{grid-template-columns:1fr}
.no-js .cifru__ani{display:none}
.no-js .cifru__panouri{display:block}
.no-js .cifru__p{opacity:1;visibility:visible;transform:none}
.no-js .cifru__p + .cifru__p{margin-top:clamp(40px,6vw,80px)}