/* ============================================================================
   stil.css — SSER Young. Toate valorile vin din ../tokens.css (§19: niciun hex aici).
   Plasa de siguranță (§7): nimic nu e ascuns fără JavaScript — stările „înainte de animație"
   există doar sub .js-miscare, pe care o pune site.js (și n-o pune la mișcare redusă).
   ========================================================================= */

@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .38s; animation-timing-function: var(--e-arc); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--c-hartie); scroll-padding-top: 6rem; }
body {
  margin: 0; background: var(--c-hartie); color: var(--c-cerneala);
  font-family: var(--font-text); font-size: var(--t-corp); line-height: var(--lh-corp);
  font-feature-settings: "kern", "lnum"; -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img, svg, canvas, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 800; font-stretch: var(--lat);
  line-height: var(--lh-titlu); letter-spacing: -.012em; text-wrap: balance; }
::selection { background: var(--c-roz); color: var(--c-cerneala); }
:focus-visible { outline: 3px solid var(--c-rosu-actiune); outline-offset: 3px; border-radius: 4px; }
[data-tema="noapte"] :focus-visible { outline-color: var(--c-lampa); }
[hidden] { display: none !important; }
.vizual-ascuns { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.sari { position: fixed; left: var(--s-4); top: var(--s-4); z-index: 100; padding: var(--s-3) var(--s-5);
  background: var(--c-cerneala); color: var(--c-hartie); border-radius: var(--r-pastila); transform: translateY(-200%); }
.sari:focus { transform: none; }

.lat { width: 100%; max-width: var(--latime); margin-inline: auto; padding-inline: var(--gutter); }
.rosu { color: var(--c-rosu); }
[data-tema="noapte"] .rosu { color: var(--c-rosu-noapte); }
.fara-rupere { white-space: nowrap; }

/* ------------------------------------------------------------- etichete, text */
.eticheta { display: inline-block; font-family: var(--font-text); font-size: var(--t-eticheta); font-weight: 600;
  letter-spacing: var(--tracking-eticheta); text-transform: uppercase; color: var(--c-cerneala-2); line-height: 1.3; }
.eticheta--rosu { color: var(--c-rosu-actiune); }
.eticheta--noapte, [data-tema="noapte"] .eticheta { color: var(--c-lumina-2); }
.paragraf-mare { font-size: var(--t-mare); line-height: 1.45; max-width: 34em; }
.text-2 { color: var(--c-cerneala-2); }
[data-tema="noapte"] .text-2 { color: var(--c-lumina-2); }
.cifre { font-feature-settings: "tnum", "lnum"; }

/* ------------------------------------------------------------- butoane */
.buton {
  --b-fond: var(--c-rosu-actiune); --b-text: var(--c-alb);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 3.25rem; padding: .85em 1.6em; border: 0; border-radius: var(--r-pastila);
  background: var(--b-fond); color: var(--b-text); font: 600 1rem/1.1 var(--font-text); letter-spacing: .01em;
  text-decoration: none; cursor: pointer; isolation: isolate; overflow: hidden;
  transition: color var(--d-scurt) var(--e-iesire), box-shadow var(--d-scurt) var(--e-iesire);
  box-shadow: var(--umbra-mica);
}
.buton::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--c-cerneala);
  transform: translateY(101%); transition: transform var(--d-mediu) var(--e-iesire); }
.buton:hover::before, .buton:focus-visible::before { transform: none; }
.buton:hover { box-shadow: var(--umbra); }
.buton--contur { --b-fond: transparent; --b-text: var(--c-cerneala); box-shadow: inset 0 0 0 1.5px var(--c-cerneala); }
.buton--contur:hover, .buton--contur:focus-visible { color: var(--c-hartie); }
.buton--lumina { --b-fond: var(--c-lumina); --b-text: var(--c-cerneala); }
.buton--lumina::before { background: var(--c-rosu-noapte); }
.buton--mic { min-height: 2.6rem; padding: .6em 1.15em; font-size: .9375rem; }
.buton .sageata { transition: transform var(--d-mediu) var(--e-iesire); }
.buton:hover .sageata { transform: translateX(.3em); }
.butoane { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.link-sageata { display: inline-flex; align-items: center; gap: .45em; font-weight: 600; text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition: background-size var(--d-mediu) var(--e-iesire); }
.link-sageata:hover { background-size: 100% 1.5px; }
.link-sageata .sageata { transition: transform var(--d-mediu) var(--e-iesire); }
.link-sageata:hover .sageata { transform: translateX(.35em); }

/* ------------------------------------------------------------- antetul */
.antet { position: fixed; inset: 0 0 auto; z-index: 50; display: flex; align-items: center; gap: var(--s-5);
  padding: var(--s-3) var(--gutter); transition: transform var(--d-mediu) var(--e-iesire), background-color var(--d-scurt), box-shadow var(--d-scurt); }
.antet--derulat { background: var(--c-hartie-sticla); box-shadow: 0 1px 0 var(--c-linie); }
.antet--ascuns { transform: translateY(-110%); }
.marca { display: flex; align-items: center; gap: var(--s-3); text-decoration: none; margin-right: auto; }
.marca-logo { width: 2.75rem; height: auto; }
.marca-logo--noapte { display: none; }
.marca-text { font-family: var(--font-display); font-weight: 800; font-stretch: var(--lat); font-size: 1.0625rem; letter-spacing: -.01em; }
.nav { display: flex; gap: var(--s-6); }
.nav a { position: relative; text-decoration: none; font-weight: 500; padding-block: .3em; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: currentColor;
  transform: scaleX(0); transform-origin: right; transition: transform var(--d-mediu) var(--e-iesire); }
.nav a:hover::after, .nav a[aria-current]::after { transform: scaleX(1); transform-origin: left; }
.antet--noapte { color: var(--c-lumina); }
.antet--noapte.antet--derulat { background: var(--c-grafit-sticla); box-shadow: 0 1px 0 var(--c-linie-noapte); }
.antet--noapte .marca-logo { display: none; }
.antet--noapte .marca-logo--noapte { display: block; }
.antet--noapte .antet-buton { --b-fond: var(--c-lumina); --b-text: var(--c-cerneala); }

.meniu { display: none; position: relative; }
.meniu summary { list-style: none; display: flex; align-items: center; gap: var(--s-3); cursor: pointer; padding: .55em .2em; font-weight: 600; }
.meniu summary::-webkit-details-marker { display: none; }
.meniu-linii { position: relative; width: 1.5rem; height: 2px; background: currentColor; transition: background-color var(--d-scurt); }
.meniu-linii::before, .meniu-linii::after { content: ""; position: absolute; left: 0; width: 100%; height: 2px; background: currentColor; transition: transform var(--d-mediu) var(--e-iesire); }
.meniu-linii::before { transform: translateY(-6px); }
.meniu-linii::after { transform: translateY(6px); }
.meniu[open] .meniu-linii { background: transparent; }
.meniu[open] .meniu-linii::before { transform: rotate(45deg); }
.meniu[open] .meniu-linii::after { transform: rotate(-45deg); }
.meniu-panou { position: fixed; inset: 0; z-index: -1; display: flex; flex-direction: column; justify-content: flex-end; gap: .1em;
  padding: 6rem var(--gutter) 2.5rem; background: var(--c-hartie); overflow-y: auto; overscroll-behavior: contain; }
.meniu-panou a { font-family: var(--font-display); font-weight: 800; font-stretch: var(--lat); font-size: clamp(2rem, 9vw, 3rem);
  line-height: 1.05; text-decoration: none; padding-block: .12em; }
.meniu-panou .meniu-sub { font-family: var(--font-text); font-stretch: 100%; font-weight: 500; font-size: var(--t-mare); color: var(--c-cerneala-2); padding-left: .2em; }
.meniu-panou .meniu-mic { margin-top: var(--s-5); font-family: var(--font-text); font-stretch: 100%; font-weight: 600; font-size: var(--t-corp); color: var(--c-rosu-actiune); }
.meniu-panou a[aria-current] { color: var(--c-rosu-actiune); }
.meniu[open] { color: var(--c-cerneala); }
/* meniul deschis: starea vine dintr-o clasă pusă de site.js, nu din :has() — și antetul n-are niciodată transform,
   filter sau backdrop-filter cât meniul e deschis (altfel devine cutia panoului fix și meniul apare pe jumătate pe iPhone) */
.antet--meniu { background: var(--c-hartie); color: var(--c-cerneala); transform: none !important; transition: none; }
.antet--meniu .marca-logo { display: block; }
.antet--meniu .marca-logo--noapte { display: none; }

@media (max-width: 760px) {
  .nav, .antet-buton { display: none; }
  .meniu { display: block; }
}

/* ------------------------------------------------------------- firele (canvas) */
.fire { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* fără JS, fără canvas: fundalul din afișe, static */
html:not(.js) .erou, html:not(.js) .final { background-image: url("img/fundal-fire-1200.webp"); background-size: cover; background-position: center; }
html:not(.js) .final { background-blend-mode: multiply; }

/* ------------------------------------------------------------- 1. deschiderea */
.erou { position: relative; min-height: 100svh; display: grid; align-items: end; overflow: hidden; isolation: isolate;
  padding: 7rem var(--gutter) clamp(2rem, 5vh, 4rem); }
.erou-continut { position: relative; z-index: 1; width: 100%; max-width: var(--latime); margin-inline: auto; display: grid; gap: clamp(1.5rem, 4vh, 3rem); }
.erou-titlu { font-size: clamp(2.9rem, 1rem + 7vw, 9.5rem); font-weight: 850; line-height: .9; letter-spacing: -.025em; }
.erou-titlu .rand { white-space: nowrap; }
.erou-jos { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--s-6); }
.erou-text { max-width: 31em; font-size: var(--t-mare); line-height: 1.45; }
.erou-hashtag { position: absolute; right: var(--gutter); top: 6.5rem; z-index: 1; margin: 0; font-family: var(--font-display);
  font-stretch: var(--lat); font-weight: 800; font-size: var(--t-h3); color: var(--c-rosu); line-height: 1; text-align: right; }
.erou-hashtag span { display: block; }
.erou-jos-indiciu { display: inline-flex; align-items: center; gap: .6em; font-size: var(--t-mic); color: var(--c-cerneala-2); }
.erou-jos-indiciu i { width: 1px; height: 2.5rem; background: var(--c-cerneala-2); transform-origin: top; animation: picur 2.4s var(--e-arc) infinite; }
@keyframes picur { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
@media (max-width: 760px) {
  .erou { padding-top: 6rem; }
  .erou-jos { grid-template-columns: 1fr; }
  .erou-hashtag, .erou-jos-indiciu { display: none; }   /* hashtag-ul e decor; pe telefon îl are banda de mai jos */
}

/* ------------------------------------------------------------- 2. fotografia care se deschide */
.deschidere { position: relative; padding-block: var(--sectiune) 0; }
.deschidere-scena { position: relative; height: 100svh; display: grid; place-items: center; overflow: hidden; }
.deschidere-foto { position: relative; width: min(30rem, 72vw); aspect-ratio: 3 / 2; border-radius: var(--r-mare); overflow: hidden;
  box-shadow: var(--umbra-mare); }
.deschidere-foto img { width: 100%; height: 100%; object-fit: cover; }
.deschidere-text { position: absolute; inset: 0; display: flex; justify-content: space-between; align-items: center; gap: min(40vw, 34rem); pointer-events: none;
  font-family: var(--font-display); font-weight: 850; font-stretch: var(--lat); font-size: clamp(2rem, .6rem + 3.2vw, 4.25rem); line-height: .95; padding-inline: var(--gutter); }
.deschidere-text span { flex: 1 1 0; max-width: 9em; }
.deschidere-text span:last-child { text-align: right; }
.deschidere-nota { max-width: var(--latime); margin: var(--s-7) auto 0; padding-inline: var(--gutter); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); }
.deschidere-nota p { margin: 0; }
.deschidere-nota b { display: block; font-family: var(--font-display); font-stretch: var(--lat); font-weight: 800; font-size: var(--t-h3); line-height: 1; margin-bottom: .35em; }
@media (max-width: 760px) {
  .deschidere-scena { height: auto; padding-block: var(--s-6); }
  .deschidere-text { position: static; display: grid; gap: var(--s-2); margin-bottom: var(--s-6); padding-inline: 0; font-size: var(--t-h3); }
  .deschidere-text span { max-width: none; }
  .deschidere-text span:last-child { text-align: left; }
  .deschidere-scena { display: block; padding-inline: var(--gutter); }
  .deschidere-foto { width: 100%; }
  .deschidere-nota { grid-template-columns: 1fr; gap: var(--s-5); }
}
/* pe ecran mare, cu mișcare: fotografia pornește mică și ajunge pe tot ecranul (site.js) */
.js-miscare .deschidere--fixata .deschidere-foto { will-change: width, height, border-radius; }

/* ------------------------------------------------------------- 3. O ZI DE WORKSHOP (semnătura) */
.ziua { position: relative; padding-block: var(--sectiune); isolation: isolate; }
.ziua-cap { max-width: var(--latime); margin: 0 auto var(--s-8); padding-inline: var(--gutter); display: grid; gap: var(--s-4); }
.ziua-cap h2 { font-size: var(--t-h2); max-width: 14em; }
.ziua-pasi { list-style: none; margin: 0; padding: 0 var(--gutter); max-width: var(--latime); margin-inline: auto; display: grid; gap: var(--s-8); }
.ziua-pas { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s-7); align-items: center; }
.ziua-ora { font-family: var(--font-display); font-weight: 850; font-stretch: var(--lat); font-size: var(--t-uriasa); line-height: .85;
  font-feature-settings: "tnum", "lnum"; letter-spacing: -.03em; color: var(--c-cerneala); }
.ziua-pas h3 { font-size: var(--t-h3); margin: var(--s-4) 0 var(--s-3); }
.ziua-pas p { max-width: 30em; }
.ziua-foto { border-radius: var(--r-mare); overflow: hidden; aspect-ratio: 4 / 5; box-shadow: var(--umbra-mare); background: var(--c-hartie-2); }
.ziua-foto img { width: 100%; height: 100%; object-fit: cover; }
.ziua-pas--noapte { background: var(--c-noapte); color: var(--c-lumina); margin-inline: calc(var(--gutter) * -1); padding: var(--s-7) var(--gutter); border-radius: var(--r-mare); }
.ziua-pas--noapte .ziua-ora { color: var(--c-lampa); }
.ziua-pas--noapte p { color: var(--c-lumina-2); }
@media (max-width: 860px) {
  .ziua-pas { grid-template-columns: 1fr; gap: var(--s-5); }
  .ziua-foto { aspect-ratio: 4 / 3; }
}
/* scena fixată (site.js o construiește peste lista de mai sus, doar pe ecrane late și cu mișcare) */
.ziua-scena { position: relative; height: 100svh; overflow: hidden; display: none; }
.ziua--scena .ziua-pasi { display: none; }
.ziua--scena .ziua-scena { display: block; }
.ziua--scena { padding-bottom: 0; }
.zs-fundal { position: absolute; inset: 0; background: var(--c-noapte); opacity: 0; z-index: 0; }
.zs-fir { position: absolute; inset: 0; z-index: 1; }
.zs-grila { position: relative; z-index: 2; height: 100%; max-width: var(--latime); margin-inline: auto; padding: calc(var(--antet-h, 4.5rem) + 1rem) var(--gutter) var(--s-7);
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--s-7); align-items: center; }
.zs-ceas { display: flex; align-items: flex-start; font-family: var(--font-display); font-weight: 850; font-stretch: var(--lat);
  font-size: clamp(5rem, 1rem + 11.5vw, 13.5rem); line-height: 1; letter-spacing: -.03em; font-feature-settings: "tnum", "lnum"; color: var(--c-cerneala); }
.zs-cifra { position: relative; display: block; height: 1em; overflow: hidden; width: .78em; }
.zs-cifra > span { display: block; will-change: transform; }
.zs-cifra > span > span { display: block; height: 1em; text-align: center; }
.zs-doua-puncte { width: .3em; text-align: center; }
.zs-texte { position: relative; margin-top: var(--s-5); min-height: 9.5em; }
.zs-text { position: absolute; inset: 0 auto auto 0; max-width: 28em; }
.zs-text h3 { font-size: var(--t-h3); margin-bottom: var(--s-3); }
.zs-text p { color: var(--c-cerneala-2); font-size: var(--t-mare); line-height: 1.45; }
.zs-progres { display: flex; gap: var(--s-2); margin-top: var(--s-6); }
.zs-progres i { width: 2rem; height: 3px; border-radius: 2px; background: var(--c-linie-tare); overflow: hidden; position: relative; }
.zs-progres i::after { content: ""; position: absolute; inset: 0; background: var(--c-rosu); transform: scaleX(var(--p, 0)); transform-origin: left; }
.zs-fotografii { position: relative; height: min(76svh, 46rem); border-radius: var(--r-mare); overflow: hidden; box-shadow: var(--umbra-mare);
  background: var(--c-hartie-2); }
.zs-foto { position: absolute; inset: 0; clip-path: inset(100% 0 0 0); }
.zs-foto:first-child { clip-path: inset(0 0 0 0); }
.zs-foto img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); }
.zs-lampa { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at var(--lx, 50%) var(--ly, 45%), transparent 0, transparent var(--lr, 22%), var(--c-noapte-voal) calc(var(--lr, 22%) + 6%), var(--c-noapte) calc(var(--lr, 22%) + 26%)); }
.ziua--intuneric .zs-ceas { color: var(--c-lampa); }
.ziua--intuneric .zs-text p { color: var(--c-lumina-2); }
.ziua--intuneric .zs-text h3 { color: var(--c-lumina); }
.ziua--intuneric .zs-progres i { background: var(--c-linie-noapte); }
.ziua--intuneric .zs-fotografii { background: var(--c-noapte); box-shadow: 0 0 120px -30px var(--c-lampa); }
.zs-ceas, .zs-text h3, .zs-text p { transition: color .6s var(--e-arc); }

/* ------------------------------------------------------------- 4. indexul workshop-urilor */
.sectiune { padding-block: var(--sectiune); }
.sectiune--adancita { background: var(--c-hartie-2); }
.sectiune-cap { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--s-5); margin-bottom: var(--s-7); }
.sectiune-cap h2 { font-size: var(--t-h2); }
.index { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--c-linie-tare); }
.index-rand { position: relative; border-bottom: 1px solid var(--c-linie-tare); }
.index-rand > a, .index-rand > div { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(12rem, 18rem) 3rem; gap: var(--s-5);
  align-items: center; padding: clamp(1.5rem, 3.4vw, 3rem) var(--s-3); text-decoration: none; isolation: isolate; }
.index-rand > a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--c-roz); transform: scaleY(0); transform-origin: bottom;
  transition: transform var(--d-mediu) var(--e-iesire); }
.index-rand > a:hover::before, .index-rand > a:focus-visible::before { transform: none; }
.index-titlu { font-family: var(--font-display); font-weight: 850; font-stretch: var(--lat); font-size: clamp(1.75rem, .8rem + 3.6vw, 4.25rem);
  line-height: 1.12; letter-spacing: -.02em; transition: transform var(--d-mediu) var(--e-iesire), font-stretch var(--d-mediu) var(--e-iesire); }
.index-rand > a:hover .index-titlu { transform: translateX(.35em); }
.index-meta { display: grid; gap: .2em; font-size: var(--t-mic); color: var(--c-cerneala-2); }
.index-meta b { color: var(--c-cerneala); font-weight: 600; font-size: var(--t-corp); }
.index-sageata { justify-self: end; width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px currentColor;
  transition: transform var(--d-mediu) var(--e-iesire), background-color var(--d-scurt), color var(--d-scurt); }
.index-rand > a:hover .index-sageata { transform: rotate(-45deg); background: var(--c-cerneala); color: var(--c-hartie); }
.index-rand--viitor .index-titlu { color: var(--c-cerneala-2); }
.index-rand--viitor .eticheta { margin-bottom: var(--s-2); }
.index-plutitor { position: fixed; left: 0; top: 0; z-index: 40; width: 19rem; aspect-ratio: 4 / 3; border-radius: var(--r-mare); overflow: hidden;
  pointer-events: none; opacity: 0; box-shadow: var(--umbra-mare); }
.index-plutitor img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
@media (max-width: 760px) {
  .index-rand > a, .index-rand > div { grid-template-columns: minmax(0, 1fr) 2.75rem; }
  .index-meta { grid-column: 1; grid-row: 2; }
  .index-sageata { grid-row: 1 / span 2; grid-column: 2; width: 2.75rem; height: 2.75rem; }
  .sectiune-cap { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------- 5. lectorii */
.lectori { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-7); }
.lector { display: grid; gap: var(--s-5); align-content: start; }
.lector-rama { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r-mare); }
.lector-rama-fond { position: absolute; inset: 30% 0 0; border-radius: var(--r-mare); background: var(--c-rosu); overflow: hidden; }
.lector-rama-fond::after { content: ""; position: absolute; inset: 0; background: url("img/fundal-fire-1200.webp") center / cover; mix-blend-mode: soft-light; opacity: .55; }
.lector-rama--foto .lector-rama-fond { inset: 0; background: var(--c-hartie-2); }
.lector-rama--foto .lector-rama-fond::after { display: none; }
.lector-rama img.decupat { position: absolute; left: 50%; bottom: 0; width: 100%; transform: translateX(-50%); filter: var(--umbra-decupaj);
  border-radius: 0 0 var(--r-mare) var(--r-mare); }
.lector-rama--foto { overflow: hidden; }   /* fotografia se mărește la derulare: rama o taie, nu pagina */
.lector-rama--foto img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-mare); }
.lector-nume { font-size: var(--t-h2); line-height: .95; }
.lector-nume small { display: block; font-family: var(--font-text); font-stretch: 100%; font-weight: 500; font-size: var(--t-mic); letter-spacing: var(--tracking-eticheta);
  text-transform: uppercase; color: var(--c-cerneala-2); margin-bottom: var(--s-3); line-height: 1.4; }
.lector p { max-width: 32em; }
@media (max-width: 860px) { .lectori { grid-template-columns: 1fr; gap: var(--s-8); } }

/* ------------------------------------------------------------- 6. banda #young &refreshed */
.banda { position: relative; overflow: hidden; background: var(--c-rosu); color: var(--c-alb); padding-block: clamp(1rem, 2.6vw, 2rem); }
.banda-pista { display: flex; width: max-content; animation: curge var(--durata, 28s) linear infinite; will-change: transform; }
.banda-pista span { flex: none; padding-right: .7em; font-family: var(--font-display); font-weight: 850; font-stretch: var(--lat); font-size: clamp(2.5rem, 1rem + 6vw, 7rem);
  line-height: 1; letter-spacing: -.02em; white-space: nowrap; }
.banda-pista span:nth-child(even) { -webkit-text-stroke: 1.5px var(--c-alb); color: transparent; }
@keyframes curge { to { transform: translateX(-50%); } }
.banda--oprita .banda-pista { animation-play-state: paused; }
.banda-opreste { position: absolute; right: var(--s-3); bottom: var(--s-2); z-index: 2; border: 0; background: transparent; color: var(--c-alb);
  font: 600 .8125rem/1 var(--font-text); letter-spacing: .08em; text-transform: uppercase; padding: .5em; cursor: pointer; opacity: .85; }
.banda-opreste:hover { opacity: 1; text-decoration: underline; }

/* ------------------------------------------------------------- 7. voluntarii */
.voluntari { position: relative; overflow: hidden; padding-top: var(--sectiune); background: var(--c-hartie-2); isolation: isolate; }
.voluntari-cap { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); gap: var(--s-6); align-items: end; }
.voluntari-cap h2 { font-size: var(--t-h2); }
.voluntari-scena { position: relative; margin-top: var(--s-7); padding-top: clamp(2.5rem, 6.4vw, 6.5rem); }
.voluntari-cuvant { position: absolute; left: 0; right: 0; top: 0; z-index: 0; margin: 0; text-align: center;
  font-family: var(--font-display); font-weight: 900; font-stretch: var(--lat); font-size: 13.4vw; line-height: .8; letter-spacing: -.035em;
  color: var(--c-rosu); white-space: nowrap; }
.voluntari-oameni { position: relative; z-index: 1; display: block; width: min(94%, 96rem); margin-inline: auto; }
.voluntari-eticheta { position: absolute; z-index: 2; right: var(--gutter); bottom: 12%; display: grid; gap: .3em; padding: var(--s-4) var(--s-5);
  border-radius: var(--r-mic); background: var(--c-hartie); box-shadow: var(--umbra); font-size: var(--t-mic); max-width: 17rem; }
.voluntari-eticheta b { font-family: var(--font-display); font-stretch: var(--lat); font-weight: 800; font-size: var(--t-mare); line-height: 1.05; }
@media (max-width: 760px) {
  .voluntari-cap { grid-template-columns: 1fr; }
  .voluntari-eticheta { position: relative; right: auto; bottom: auto; margin: var(--s-5) var(--gutter) 0; max-width: none; }
  .voluntari-oameni { width: 100%; }
}

/* ------------------------------------------------------------- 8. finalul + formularul „Anunță-mă" */
.final { position: relative; overflow: hidden; isolation: isolate; background: var(--c-grafit); color: var(--c-lumina); padding: var(--sectiune) var(--gutter); }
.final-continut { position: relative; z-index: 1; max-width: var(--latime); margin-inline: auto; display: grid; gap: var(--s-6); }
.final-titlu { font-size: var(--t-uriasa); line-height: .88; letter-spacing: -.03em; }
.final-text { max-width: 32em; font-size: var(--t-mare); line-height: 1.45; color: var(--c-lumina-2); }
.final-sau { color: var(--c-lumina-2); font-size: var(--t-mic); }
.final-sau a { color: var(--c-lumina); }
.anunta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-4) var(--s-5); align-items: end; max-width: 52rem; }
.anunta-camp { display: grid; gap: var(--s-2); }
.anunta input[type="email"] { width: 100%; min-height: 3.5rem; padding: .75em 0; border: 0; border-bottom: 1.5px solid var(--c-lumina-2); border-radius: 0;
  background: transparent; color: var(--c-lumina); font: 500 var(--t-mare)/1.2 var(--font-text); }
.anunta input[type="email"]::placeholder { color: var(--c-lumina-2); opacity: .7; }
.anunta input[type="email"]:focus { outline: 0; border-bottom-color: var(--c-lampa); }
.anunta input[type="email"]:focus-visible { box-shadow: 0 2px 0 var(--c-lampa); }
.anunta .bifa { grid-column: 1 / -1; grid-row: 2; }
.anunta .buton { grid-column: 2; grid-row: 1; }
.anunta-mesaj { grid-column: 1 / -1; margin: 0; min-height: 1.5em; color: var(--c-lampa); font-weight: 500; }
.anunta-mesaj.eroare { color: var(--c-rosu-noapte); }
@media (max-width: 640px) { .anunta { grid-template-columns: 1fr; } .anunta .buton { grid-column: 1; grid-row: auto; justify-self: start; } .anunta .bifa { grid-row: auto; } }

.bifa { display: grid; grid-template-columns: 1.375rem minmax(0, 1fr); gap: var(--s-3); align-items: start; font-size: var(--t-mic); line-height: 1.5; cursor: pointer; }
.bifa input { appearance: none; width: 1.375rem; height: 1.375rem; margin: .1em 0 0; border: 1.5px solid currentColor; border-radius: 5px; display: grid; place-items: center; cursor: pointer; background: transparent; }
.bifa input::after { content: ""; width: .75rem; height: .4rem; border: 2px solid currentColor; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px) scale(0);
  transition: transform var(--d-scurt) var(--e-iesire); }
.bifa input:checked::after { transform: rotate(-45deg) translate(1px, -1px) scale(1); }
.bifa a { color: inherit; }

/* ------------------------------------------------------------- subsolul */
.subsol { background: var(--c-grafit); color: var(--c-lumina); padding: var(--s-8) var(--gutter) var(--s-6); border-top: 1px solid var(--c-linie-noapte); }
.subsol-grila { max-width: var(--latime); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: var(--s-7); }
.subsol-marca img { width: min(17rem, 100%); margin-bottom: var(--s-4); }
.subsol-marca p, .subsol-col p { color: var(--c-lumina-2); font-size: var(--t-mic); }
.subsol-col { display: grid; align-content: start; gap: var(--s-3); font-size: var(--t-mic); }
.subsol-col a { color: var(--c-lumina); text-decoration: none; width: fit-content; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size var(--d-mediu) var(--e-iesire); }
.subsol-col a:hover { background-size: 100% 1px; }
.subsol-jos { max-width: var(--latime); margin: var(--s-8) auto 0; padding-top: var(--s-5); border-top: 1px solid var(--c-linie-noapte); display: flex; flex-wrap: wrap;
  justify-content: space-between; gap: var(--s-3); font-size: .8125rem; color: var(--c-lumina-2); }
.subsol-tag { font-family: var(--font-display); font-stretch: var(--lat); font-weight: 800; color: var(--c-rosu-noapte); font-size: var(--t-corp); }
@media (max-width: 960px) { .subsol-grila { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .subsol-grila { grid-template-columns: 1fr; gap: var(--s-6); } .subsol { padding-bottom: 6.5rem; } }

/* ------------------------------------------------------------- bara fixă de pe telefon (§9) */
.bara-jos { display: none; }
@media (max-width: 760px) {
  .bara-jos { position: fixed; left: var(--s-3); right: var(--s-3); bottom: calc(var(--s-3) + env(safe-area-inset-bottom)); z-index: 45;
    display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-2) var(--s-2) var(--s-2) var(--s-5);
    border-radius: var(--r-pastila); background: var(--c-grafit-sticla); color: var(--c-lumina); box-shadow: var(--umbra-mare);
    transition: transform var(--d-mediu) var(--e-iesire), opacity var(--d-scurt); }
  .bara-jos-text { margin: 0; display: grid; line-height: 1.2; font-weight: 600; font-size: .9375rem; }
  .bara-jos-text .eticheta { font-size: .6875rem; color: var(--c-lumina-2); }
  .bara-jos--ascunsa { transform: translateY(160%); opacity: 0; }
  .meniu-deschis .bara-jos { transform: translateY(160%); }
}

/* ------------------------------------------------------------- paginile interioare */
.pagina-cap { position: relative; padding: clamp(8rem, 18vh, 12rem) var(--gutter) var(--s-8); overflow: hidden; isolation: isolate; }
.pagina-cap-continut { position: relative; z-index: 1; max-width: var(--latime); margin-inline: auto; display: grid; gap: var(--s-5); }
.pagina-cap h1 { font-size: var(--t-h1); max-width: 13em; letter-spacing: -.025em; }
.pagina-cap .paragraf-mare { color: var(--c-cerneala-2); }
.fir-urma { display: flex; flex-wrap: wrap; gap: .5em; list-style: none; margin: 0; padding: 0; font-size: var(--t-mic); color: var(--c-cerneala-2); }
.fir-urma li + li::before { content: "/"; margin-right: .5em; opacity: .6; }
.fir-urma a { text-decoration: none; }
.fir-urma a:hover { text-decoration: underline; }

.fapte { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--c-linie-tare); margin: 0; }
.fapte > div { padding: var(--s-5) var(--s-4) 0 0; }
.fapte dt { font-size: var(--t-eticheta); letter-spacing: var(--tracking-eticheta); text-transform: uppercase; color: var(--c-cerneala-2); font-weight: 600; }
.fapte dd { margin: .35em 0 0; font-family: var(--font-display); font-stretch: var(--lat); font-weight: 800; font-size: var(--t-h3); line-height: 1.05; overflow-wrap: anywhere; }
.fapte--contact dd { font-size: var(--t-mare); }
.fapte dd small { display: block; font-family: var(--font-text); font-stretch: 100%; font-weight: 400; font-size: var(--t-mic); color: var(--c-cerneala-2); margin-top: .3em; }
@media (max-width: 860px) { .fapte { grid-template-columns: 1fr 1fr; row-gap: var(--s-5); } }
@media (max-width: 560px) { .fapte--contact { grid-template-columns: 1fr !important; } }

.foto-mare { border-radius: var(--r-mare); overflow: hidden; box-shadow: var(--umbra-mare); background: var(--c-hartie-2); }
.foto-mare img { width: 100%; height: 100%; object-fit: cover; }
.js-miscare [data-masca] { clip-path: inset(18% 8% 18% 8% round var(--r-mare)); }
.js-miscare [data-masca] img { transform: scale(1.25); }

.doua-col { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-8); align-items: start; }
.doua-col--invers { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.doua-col h2 { font-size: var(--t-h2); }
.lipit { position: sticky; top: calc(var(--antet-h, 4.5rem) + var(--s-5)); }
@media (max-width: 860px) { .doua-col, .doua-col--invers { grid-template-columns: 1fr; gap: var(--s-6); } .lipit { position: static; } }

.pasi { list-style: none; margin: 0; padding: 0; counter-reset: pas; border-top: 1px solid var(--c-linie-tare); }
.pasi li { counter-increment: pas; display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: var(--s-4); padding: var(--s-5) 0; border-bottom: 1px solid var(--c-linie-tare); }
.pasi li::before { content: counter(pas, decimal-leading-zero); font-family: var(--font-display); font-stretch: var(--lat); font-weight: 800; color: var(--c-rosu-actiune);
  font-feature-settings: "tnum"; font-size: var(--t-corp); padding-top: .15em; }
.pasi b { display: block; font-weight: 600; }

.program { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--c-linie-tare); }
.program li { display: grid; grid-template-columns: minmax(7rem, 11rem) minmax(0, 1fr); gap: var(--s-5); padding: var(--s-4) 0; border-bottom: 1px solid var(--c-linie-tare); align-items: baseline; }
.program time { font-family: var(--font-display); font-stretch: var(--lat); font-weight: 800; font-feature-settings: "tnum", "lnum"; font-size: var(--t-mare); }
.program .program--practica { color: var(--c-rosu-actiune); }
.program .program--practica b { font-weight: 700; }

.editii { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.editie { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-4); align-items: center; padding: var(--s-5); border-radius: var(--r-mic);
  background: var(--c-hartie); box-shadow: inset 0 0 0 1px var(--c-linie); }
.editie b { display: block; font-family: var(--font-display); font-stretch: var(--lat); font-weight: 800; font-size: var(--t-mare); line-height: 1.1; }
.editie span { color: var(--c-cerneala-2); font-size: var(--t-mic); }
.editie-stare { font-size: var(--t-eticheta); font-weight: 600; letter-spacing: var(--tracking-eticheta); text-transform: uppercase; color: var(--c-cerneala-2); }
.editie--deschisa { box-shadow: inset 0 0 0 2px var(--c-rosu-actiune); background: var(--c-alb); }
.editie--deschisa .editie-stare { color: var(--c-rosu-actiune); }

.parteneri-text { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin: var(--s-3) 0 0; padding: 0; list-style: none;
  font-family: var(--font-display); font-stretch: var(--lat); font-weight: 800; font-size: var(--t-h3); line-height: 1.1; }
.parteneri-text li:not(:last-child)::after { content: " ·"; color: var(--c-rosu); }

.proza { max-width: var(--latime-text); }
.proza h2 { font-size: var(--t-h3); margin: var(--s-7) 0 var(--s-4); }
.proza h3 { font-size: var(--t-mare); margin: var(--s-6) 0 var(--s-3); }
.proza ul, .proza ol { padding-left: 1.2em; margin: 0 0 1em; }
.proza li { margin-bottom: .4em; }
.proza table { width: 100%; border-collapse: collapse; margin: var(--s-4) 0 var(--s-5); font-size: var(--t-mic); }
.proza th, .proza td { text-align: left; vertical-align: top; padding: var(--s-3) var(--s-3) var(--s-3) 0; border-bottom: 1px solid var(--c-linie-tare); }
.proza th { font-weight: 600; }
.tabel-derulant { overflow-x: auto; }

/* ------------------------------------------------------------- formularul de înscriere */
.formular { display: grid; gap: var(--s-6); max-width: 46rem; }
.formular fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
.formular legend { font-family: var(--font-display); font-stretch: var(--lat); font-weight: 800; font-size: var(--t-h3); margin-bottom: var(--s-4); padding: 0; }
.camp { display: grid; gap: var(--s-2); }
.camp > span:first-child { font-weight: 600; font-size: var(--t-mic); }
.camp small { color: var(--c-cerneala-2); font-size: var(--t-mic); }
.camp input, .camp select, .camp textarea { width: 100%; min-height: 3.25rem; padding: .7em .9em; border: 1.5px solid var(--c-linie-tare); border-radius: var(--r-mic);
  background: var(--c-alb); color: var(--c-cerneala); font: 400 var(--t-corp)/1.3 var(--font-text); transition: border-color var(--d-scurt), box-shadow var(--d-scurt); }
.camp input:focus, .camp select:focus { outline: 0; border-color: var(--c-cerneala); box-shadow: 0 0 0 3px var(--c-roz); }
.camp--eroare input, .camp--eroare select { border-color: var(--c-rosu-actiune); }
.camp-eroare { color: var(--c-rosu-actiune); font-size: var(--t-mic); font-weight: 500; min-height: 0; }
.campuri-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
@media (max-width: 560px) { .campuri-2 { grid-template-columns: 1fr; } }
.optiuni { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.optiune { position: relative; }
.optiune input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.optiune span { display: inline-flex; min-height: 2.75rem; align-items: center; padding: .5em 1.1em; border-radius: var(--r-pastila); box-shadow: inset 0 0 0 1.5px var(--c-linie-tare);
  font-weight: 500; transition: background-color var(--d-scurt), color var(--d-scurt), box-shadow var(--d-scurt); }
.optiune input:checked + span { background: var(--c-cerneala); color: var(--c-hartie); box-shadow: none; }
.optiune input:focus-visible + span { outline: 3px solid var(--c-rosu-actiune); outline-offset: 2px; }
.rezumat { position: sticky; top: calc(var(--antet-h, 4.5rem) + var(--s-5)); padding: var(--s-6); border-radius: var(--r-mare); background: var(--c-alb); box-shadow: var(--umbra); display: grid; gap: var(--s-4); }
.rezumat-pret { font-family: var(--font-display); font-stretch: var(--lat); font-weight: 850; font-size: var(--t-h2); line-height: 1; font-feature-settings: "tnum", "lnum"; }
.mesaj { padding: var(--s-5); border-radius: var(--r-mic); background: var(--c-roz); }
.mesaj--eroare { background: var(--c-rosu-voal); box-shadow: inset 3px 0 0 var(--c-rosu-actiune); }
.mesaj h2, .mesaj h3 { font-size: var(--t-h3); margin-bottom: var(--s-3); }
.se-incarca { opacity: .6; pointer-events: none; }

/* ------------------------------------------------------------- apariții (doar cu .js-miscare, pusă de site.js) */
.js-miscare .apare { opacity: 0; transform: translateY(2.2rem); transition: opacity .9s var(--e-iesire), transform 1.1s var(--e-iesire); transition-delay: var(--intarziere, 0ms); }
.js-miscare .apare.vazut { opacity: 1; transform: none; }
.rand { display: block; padding-bottom: .04em; }
.rand-mask { padding-block: .16em .14em; margin-block: -.16em -.14em; }   /* accentele de pe Î Â Ă și virgulele de sub Ș Ț nu se taie (lecția SSER) */

/* butoanele magnetice: doar transform, pus de site.js */
[data-magnet] { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .banda-pista { animation: none; }
  @view-transition { navigation: none; }
}

/* ------------------------------------------------------------- întrebările (details) */
.intrebari { border-top: 1px solid var(--c-linie-tare); }
.intrebari details { border-bottom: 1px solid var(--c-linie-tare); }
.intrebari summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) 2.5rem; gap: var(--s-4); align-items: center;
  padding: var(--s-5) 0; font-family: var(--font-display); font-stretch: var(--lat); font-weight: 800; font-size: var(--t-mare); line-height: 1.15; }
.intrebari summary::-webkit-details-marker { display: none; }
.intrebari summary::after { content: "+"; justify-self: end; width: 2.5rem; height: 2.5rem; border-radius: 50%; display: grid; place-items: center;
  box-shadow: inset 0 0 0 1.5px currentColor; font-family: var(--font-text); font-weight: 400; font-size: 1.4rem; transition: transform var(--d-mediu) var(--e-iesire); }
.intrebari details[open] summary::after { transform: rotate(45deg); }
.intrebari details > div { padding: 0 3.5rem var(--s-5) 0; max-width: 46rem; }

/* ------------------------------------------------------------- capul paginii de workshop: titlu + fotografie */
.ws-cap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-7); align-items: end; }
.ws-cap .foto-mare { aspect-ratio: 4 / 5; }
.ws-cap h1 { font-size: clamp(2.6rem, 1rem + 5.4vw, 7rem); }
@media (max-width: 960px) { .ws-cap { grid-template-columns: 1fr; } .ws-cap .foto-mare { aspect-ratio: 4 / 3; } }
.ws-actiune { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); }
.ws-actiune .text-2 { font-size: var(--t-mic); }
.sectiune + .sectiune { padding-top: 0; }
.sectiune--adancita + .sectiune, .sectiune + .sectiune--adancita { padding-top: var(--sectiune); }
.nota-pret { font-size: var(--t-mic); color: var(--c-cerneala-2); }

/* ------------------------------------------------------------- panoul echipei */
.pagina-panou .antet-buton, .pagina-panou .meniu-panou .meniu-mic { display: none; }
.panou { padding: calc(var(--antet-h, 4.5rem) + var(--s-6)) var(--gutter) var(--s-9); max-width: 110rem; margin-inline: auto; }
.panou h1 { font-size: var(--t-h2); line-height: 1.05; margin-bottom: var(--s-5); }
.panou h2 { font-size: var(--t-h3); margin: var(--s-7) 0 var(--s-4); }
.panou-bara { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; justify-content: space-between; margin-bottom: var(--s-5); }
.panou-carduri { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: var(--s-4); }
.panou-card { padding: var(--s-5); border-radius: var(--r-mic); background: var(--c-alb); box-shadow: inset 0 0 0 1px var(--c-linie); display: grid; gap: var(--s-2); text-align: left;
  font: inherit; color: inherit; cursor: pointer; }
.panou-card[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--c-rosu-actiune); }
.panou-card b { font-family: var(--font-display); font-stretch: var(--lat); font-weight: 800; font-size: var(--t-mare); line-height: 1.1; }
.tabel { width: 100%; border-collapse: collapse; font-size: var(--t-mic); background: var(--c-alb); border-radius: var(--r-mic); overflow: hidden; }
.tabel th, .tabel td { text-align: left; padding: var(--s-3); border-bottom: 1px solid var(--c-linie); vertical-align: top; }
.tabel th { font-weight: 600; background: var(--c-hartie-2); position: sticky; top: 0; }
.tabel td .buton { min-height: 2.25rem; padding: .4em .9em; font-size: .8125rem; }
.stare { display: inline-block; padding: .15em .6em; border-radius: var(--r-pastila); font-size: .8125rem; font-weight: 600; background: var(--c-hartie-2); }
.stare--platita { background: var(--c-cerneala); color: var(--c-hartie); }
.stare--in_curs { background: var(--c-roz); }
.panou-formular { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: var(--s-4); align-items: end; padding: var(--s-5); border-radius: var(--r-mic); background: var(--c-alb); }

/* ------------------------------------------------------------- tabelul de date, pe telefon: fiecare rând e o fișă */
@media (max-width: 640px) {
  .tabel-fise thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabel-fise, .tabel-fise tbody, .tabel-fise tr, .tabel-fise td { display: block; width: 100%; }
  .tabel-fise tr { padding: var(--s-4) 0; border-bottom: 1px solid var(--c-linie-tare); }
  .tabel-fise td { border: 0; padding: var(--s-1) 0; }
  .tabel-fise td::before { content: attr(data-eticheta); display: block; font-size: var(--t-eticheta); font-weight: 600; letter-spacing: var(--tracking-eticheta);
    text-transform: uppercase; color: var(--c-cerneala-2); }
  .tabel-fise td:first-child { font-weight: 600; font-size: var(--t-corp); }
  .tabel-fise td:first-child::before { display: none; }
}