/* ============================================================
   Quadrart Wave — quadrart.ro
   Tokens are derived from the 2026 presentation booklet:
   the orange square, the blue plus, the teal outline boxes,
   the lime back cover and the pale blue circle.
   ============================================================ */

/* ── fonturi ─────────────────────────────────── */
/* Gazduite local, in assets/fonts/. Site-ul nu face nicio cerere
   catre un server tert; vezi politica de confidentialitate.
   Archivo si IBM Plex sunt sub licenta SIL Open Font License 1.1. */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100% 125%;
  src: url("../fonts/archivo-latin-ext.woff2") format("woff2");
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100% 125%;
  src: url("../fonts/archivo-latin.woff2") format("woff2");
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  src: url("../fonts/plex-sans-latin-ext.woff2") format("woff2");
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  src: url("../fonts/plex-sans-latin.woff2") format("woff2");
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  src: url("../fonts/plex-sans-latin-ext.woff2") format("woff2");
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  src: url("../fonts/plex-sans-latin.woff2") format("woff2");
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  src: url("../fonts/plex-sans-latin-ext.woff2") format("woff2");
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  src: url("../fonts/plex-sans-latin.woff2") format("woff2");
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/plex-mono-400-latin-ext.woff2") format("woff2");
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/plex-mono-400-latin.woff2") format("woff2");
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  src: url("../fonts/plex-mono-500-latin-ext.woff2") format("woff2");
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  src: url("../fonts/plex-mono-500-latin.woff2") format("woff2");
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  --ink:      #0B2E2F;
  --ink-2:    #265E5F;
  --paper:    #F3F4F0;
  --paper-2:  #E7E9E3;
  --orange:   #FB5F24;
  --blue:     #363F9E;
  --lime:     #C2DD05;
  --mist:     #C4DBE9;

  --display: "Archivo", system-ui, sans-serif;
  --body:    "IBM Plex Sans", system-ui, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, monospace;

  --pad: clamp(1.25rem, 5vw, 5.5rem);
  --max: 1320px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-weight:300;
  font-size:clamp(1rem,.96rem + .2vw,1.0625rem);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{ display:block; max-width:100%; height:auto; }

a{ color:inherit; }

/* Doua straturi: halou deschis, care se vede pe fond inchis, si o margine
   inchisa in exteriorul lui, care se vede pe fond deschis. Asa inelul tine
   pe toate cele patru fundaluri din site. */
:focus-visible{
  outline:2px solid var(--orange); outline-offset:2px;
  box-shadow:0 0 0 4px rgba(243,244,240,.85), 0 0 0 6px rgba(11,46,47,.55);
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--ink); color:var(--paper); padding:.75rem 1rem;
}
.skip:focus{ left:0; }

/* ── shared type ─────────────────────────────────────────── */

.h2{
  font-family:var(--display);
  font-variation-settings:"wdth" 112;
  font-weight:600;
  font-size:clamp(1.9rem,1.2rem + 2.6vw,3.25rem);
  line-height:1.02;
  letter-spacing:-.022em;
  margin:.4rem 0 1rem;
  max-width:20ch;
}

.eyebrow{
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.34em;
  text-transform:lowercase;
  color:var(--ink-2);
  margin:0;
}

/* Eticheta de sectiune. Crescuta pe 2026-08-27, ca sa se vada de unde incepe o
   sectiune cand derulezi: la .7rem si la 1.4rem distanta de titlu era prea
   discreta si nu tinea locul de reper. Acum e mai mare, cu chenar de 2px si
   lipita de h2 — perechea eticheta+titlu se citeste ca un singur cap de
   sectiune. Tracking-ul scade de la .34em, mostenit din `.eyebrow`, pentru ca
   la corpul asta ar rupe cuvantul in litere razlete.

   Nu s-a adaugat linie de prag intre benzi; ramane in rezerva pentru jonctiunea
   Planner -> Contact, singurul loc unde doua benzi inchise se ating fara niciun
   semn, daca dupa asta tot nu se citeste. */
.eyebrow--boxed{
  display:inline-block;
  border:2px solid var(--ink-2);
  padding:.6rem 1rem .56rem;
  margin-bottom:.6rem;
  font-size:.82rem;
  letter-spacing:.22em;
}

.section-lede{
  max-width:52ch;
  margin:0 0 2.5rem;
  color:#385152;
}

/* ── colapsul unei secțiuni ──────────────────────────────── */
/* Butonul sta pe acelasi rand cu eticheta si la aceeasi margine din stanga.
   Tine pentru ca amandoua sunt inline-level: marginile automate puse de
   `<sectiune> > *` se calculeaza 0 pe amandoua. Nu-l inveli impreuna cu
   eticheta intr-un container — acela ar fi bloc, ar prinde `margin-inline:auto`
   si ar duce eticheta pe coloana de continut. Vezi comentariul de la regula de
   gutter.

   Inaltimea, 2.75rem, e exact inaltimea casetei etichetei: .82rem × 1.6 de
   line-height, plus paddingul si cele doua chenare de 2px. `vertical-align:top`
   le lipeste de acelasi rand de sus. Daca se schimba metrica etichetei, se
   schimba si asta.

   Vocabularul e al butonului "Vezi toate": mono, chenar subtire, fara fundal,
   iar la hover se umple cu ink. Fara JS butonul nu apare deloc — n-ar avea ce
   sa faca — aceeasi regula ca la "Vezi toate" si la coltul indoit. */
.sect__btn{ display:none; }
.js-cards .sect__btn{
  display:inline-flex; align-items:center; justify-content:center;
  vertical-align:top;
  width:2.75rem; height:2.75rem;
  margin:0 0 .6rem .7rem;
  padding:0;
  font-family:var(--mono); font-size:1.05rem; line-height:1;
  background:none; color:var(--ink);
  border:1px solid rgba(11,46,47,.32);
  cursor:pointer;
  transition:background-color .18s ease, color .18s ease, border-color .18s ease;
}
.js-cards .sect__btn:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
/* cardul de sectiune n-are overflow ascuns, deci inelul de focus incape pe
   dinafara; se lasa cel global */

/* Ambele semne stau in HTML, CSS-ul alege care se vede — ca la "Vezi toate",
   ca sa nu ajunga text vizibil in JS. */
.sect__btn-shut{ display:none; }
.is-shut .sect__btn-shut{ display:inline; }
.is-shut .sect__btn-open{ display:none; }

/* Continutul se ascunde prin clasa, nu se scoate din DOM: ramane in pagina si
   indexabil. Fara JS regula nu se aplica — `is-shut` n-are cine s-o puna — deci
   toate sectiunile raman deschise. */
.js-cards .is-shut .sect__body{ display:none; }
/* banda care apartine altei sectiuni dispare cu totul, nu pe bucati */
.js-cards section[data-belongs].is-shut{ display:none; }

/* Pe benzile inchise butonul imprumuta culorile pe care le are acolo eticheta:
   portocaliu la Planner, bleu la Contact. Niciun verde — nu e in paleta. */
.js-cards .app .sect__btn{ color:var(--orange); border-color:var(--orange); }
.js-cards .app .sect__btn:hover{ background:var(--orange); color:#fff; }
.js-cards .contact .sect__btn{ color:var(--mist); border-color:rgba(196,219,233,.5); }
.js-cards .contact .sect__btn:hover{ background:var(--mist); color:var(--ink); border-color:var(--mist); }

/* ── buttons ─────────────────────────────────────────────── */

.btn{
  display:inline-block;
  font-family:var(--mono);
  font-size:.78rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  text-decoration:none;
  padding:.85rem 1.4rem;
  border:1.5px solid currentColor;
  transition:background-color .18s ease, color .18s ease, transform .18s ease;
}
.btn:hover{ transform:translateY(-2px); }

/* mai inchis decat portocaliul de brand, ca albul de deasupra sa treaca
   pragul de contrast. `--orange` ramane neschimbat peste tot altundeva. */
.btn--solid{ background:#D2440B; border-color:#D2440B; color:#fff; }
.btn--solid:hover{ background:#B83705; border-color:#B83705; }

.btn--ghost{ color:var(--paper); }
.btn--ghost:hover{ background:var(--paper); color:var(--ink); }

.btn--login{
  background:var(--orange); border-color:var(--orange); color:#fff;
  padding:.62rem 1.05rem; font-size:.72rem;
}
.btn--login:hover{ background:#e34d13; border-color:#e34d13; }

/* ── header ──────────────────────────────────────────────── */

.bar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:1.25rem;
  padding:.7rem var(--pad);
  background:var(--ink);
  color:var(--paper);
}

.mark{ display:flex; align-items:center; gap:.7rem; text-decoration:none; }
.mark img{ width:30px; height:30px; flex:none; }
.mark__wordmark{
  font-family:var(--display);
  font-variation-settings:"wdth" 118;
  font-weight:700;
  font-size:.92rem;
  letter-spacing:.06em;
  text-transform:uppercase;
}


.bar__nav{ margin-left:auto; display:flex; gap:1.6rem; }
.bar__nav a{
  font-family:var(--mono);
  font-size:.76rem; letter-spacing:.08em;
  text-decoration:none; color:var(--mist);
  padding-block:.3rem;
  border-bottom:1px solid transparent;
  /* „Construcții civile" e cea mai lunga eticheta din bara. Fara asta se rupe
     pe doua randuri la latimile mici si inalta bara. */
  white-space:nowrap;
}
.bar__nav a:hover{ color:#fff; border-bottom-color:var(--orange); }

/* Sub 920px meniul dispare, iar spatiul ramas se imparte prin cele trei
   margin-left:auto de mai jos: unul impinge sageata de intoarcere la inceput,
   unul comutatorul de limba, unul butonul de login. Toate sunt necesare — cu
   unul singur, elementele de dupa raman lipite. Singurul bloc pe latimea
   asta; nu-l dubla mai jos in fisier, pe langa componenta, ca sa nu se
   desparta iar.

   Pragul era 820px cat timp bara avea patru intrari. Cu a cincea, continutul
   barei cere ~816px, iar sub ~907px etichetele incepeau sa se rupa. Daca se
   mai adauga o intrare sau se lungeste una, pragul se recalculeaza.

   Sageata isi tine locul din start, dar se vede abia dupa un ecran si
   jumatate de derulare, cand site.js pune `is-deep` pe <html>. Aparitia se
   face din opacitate, nu din `display`: daca ar intra si iesi din flow, bara
   s-ar reaseza sub degetul omului exact in timp ce deruleaza. `visibility` o
   scoate din ordinea de Tab si de la cititoarele de ecran cat timp nu se
   vede, si se comuta fara intarziere la aparitie, respectiv dupa ce se
   stinge — altfel ori nu s-ar vedea intrarea, ori ar ramane apasabila cat
   timp iese. Restul stilului sageții e mai jos, langa `.lang`. */
@media (max-width:920px){
  .bar__nav{ display:none; }
  .bar .bar__top{
    display:block; margin-left:auto;
    opacity:0; visibility:hidden; transform:translateY(-3px);
    transition:opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
  }
  .is-deep .bar .bar__top{
    opacity:1; visibility:visible; transform:none;
    transition:opacity .22s ease, transform .22s ease, visibility 0s;
  }
  .bar .lang{ margin-left:auto; }
  .bar .btn--login{ margin-left:auto; }
}

/* Al patrulea element din bara — sageata — nu mai incape la spatiile de pe
   desktop: marca, sageata, comutatorul de limba si butonul cereau impreuna
   351px, iar la 360px raman 320 intre paddinguri. Bara iesea in afara paginii
   si o pornea pe orizontala. Aici se string spatiile si paddingurile, nu se
   scoate nimic: toate patru raman pe ecran, iar la 360px continutul cere 300
   din 320, deci ramane si o rezerva de 20px daca vreun font cade pe varianta
   de rezerva, care e mai lata.

   Sub 360px nici asa nu ajunge: raman 280px intre paddinguri si continutul
   cere 300. Nu s-a pus nicio regula pentru latimea aia, pentru ca acolo
   pagina depasea si inainte de sageata, din alta parte si mai lat: `.two__col`
   are piste de minim 300px, iar `.grid` de minim 320px, deci si coloanele din
   Energie, si cardurile de portofoliu ies din ecran la 320px. O regula care ar
   repara doar bara ar lasa restul asa cum e. Daca se cere si 320px, atunci se
   umbla la minimele alea, iar in bara se retrage cuvantul din marca — dar aia
   e o decizie de brand, nu una de layout.

   Al doilea si ultimul bloc @media al barei. Daca se mai adauga un element in
   bara, aici se recalculeaza, nu se mai deschide unul nou. */
@media (max-width:480px){
  .bar{ gap:.55rem; }
  .mark{ gap:.5rem; }
  .mark__wordmark{ font-size:.82rem; letter-spacing:.04em; }
  .bar .bar__top{ padding:.5rem .48rem; }
  .bar .lang{ padding:.5rem .45rem; }
  .bar .btn--login{ padding:.62rem .72rem; }
}

/* ── hero ────────────────────────────────────────────────── */

.hero{
  background:var(--ink);
  color:var(--paper);
  padding:clamp(3rem,7vw,6rem) var(--pad) clamp(2rem,4vw,3rem);
}

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

.hero .eyebrow{ color:var(--mist); }

.hero h1{
  font-family:var(--display);
  font-variation-settings:"wdth" 108;
  font-weight:600;
  font-size:clamp(2.35rem,1rem + 6vw,5.4rem);
  line-height:.98;
  letter-spacing:-.03em;
  margin:1.1rem 0 1.6rem;
}

.lede{
  max-width:48ch;
  font-size:clamp(1.02rem,.98rem + .35vw,1.22rem);
  color:#D7E1E1;
  margin:0 0 2rem;
}

.hero__cta{ display:flex; flex-wrap:wrap; gap:.8rem; }

/* the record — signature element */

.record{
  max-width:var(--max);
  margin:clamp(3.5rem,7vw,6rem) auto 0;
  padding-top:clamp(2rem,4vw,3rem);
  border-top:1px solid rgba(196,219,233,.28);
}

.record figcaption{
  display:grid; gap:.75rem 3rem;
  grid-template-columns:minmax(0,1fr);
  align-items:end;
  margin-bottom:1.5rem;
}
@media (min-width:900px){
  .record figcaption{ grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); }
}

.record__title{
  font-family:var(--display);
  font-variation-settings:"wdth" 112;
  font-weight:500;
  font-size:clamp(1.35rem,1.1rem + 1vw,1.9rem);
  letter-spacing:-.015em;
  margin:0;
}

.record__note{
  margin:0; font-size:.9rem; line-height:1.55;
  color:#9FB6B7; max-width:60ch;
}

.record__plot{ position:relative; }
.record__plot svg{ width:100%; height:auto; overflow:visible; }

.dot{ cursor:pointer; transition:opacity .2s ease; }
.dot circle{ transition:fill-opacity .2s ease, stroke-width .2s ease; }
.dot:hover circle, .dot:focus-visible circle{ stroke-width:3; }
/* pe SVG box-shadow nu se deseneaza, asa ca al doilea strat al inelului e un
   cerc propriu, sub cel colorat: portocaliu inauntru, margine inchisa in afara */
/* Doar cercul mare, adica cel de imediat dupa inel: site.js deseneaza
   .dot__ring primul, ca sa stea dedesubt, deci cercul colorat e fratele lui
   urmator. La un proiect hibrid, cercul-miez vine dupa acesta si isi pastreaza
   culoarea tehnologiei lui. */
.dot:focus-visible .dot__ring + circle{ stroke:var(--orange); }
.dot__ring{ stroke:none; fill:none; }
.dot:focus-visible .dot__ring{ stroke:rgba(11,46,47,.55); stroke-width:2; }
/* Pe un <g> din SVG, outline se deseneaza dreptunghiular, in jurul casetei
   grupului — deci peste inelul nostru apare si un chenar patrat.
   (box-shadow-ul nu se deseneaza deloc pe SVG, vezi comentariul de mai sus.)
   Il scoatem pe :focus, nu doar pe :focus-visible, pentru ca vine din doua
   locuri: regula globala :focus-visible de mai sus, la navigarea cu tastatura,
   si conturul implicit al browserului, la click cu mouse-ul. Al doilea nu
   trece prin :focus-visible, deci pe un selector :focus-visible ramanea
   nescos si clipea ca un dreptunghi negru in jurul cercului.
   Inelul propriu se deseneaza mai departe doar pe :focus-visible (cele doua
   reguli de deasupra), deci la tastatura apare inelul, la mouse nu apare
   nimic. */
.dot:focus{ outline:none; }
/* Exceptie: in contrast fortat, sistemul rescrie culorile de stroke si
   inelul desenat de noi poate sa dispara. Acolo lasam outline-ul sa revina,
   cu culoarea sistemului. */
@media (forced-colors: active){
  .dot:focus-visible{ outline:2px solid; outline-offset:2px; }
}
.record__plot.is-hovering .dot:not(:hover):not(:focus-visible){ opacity:.35; }

.axis line{ stroke:rgba(196,219,233,.3); }
.axis text{
  font-family:var(--mono); font-size:15px; letter-spacing:.06em;
  fill:#7E9899;
}

.record__readout{
  font-family:var(--mono);
  font-size:.8rem; letter-spacing:.06em;
  color:var(--mist);
  min-height:1.6em;
  margin:.5rem 0 0;
}
.record__readout b{ color:#fff; font-weight:500; }
.record__readout span{ color:#6E8889; }

.record__key{
  list-style:none; display:flex; flex-wrap:wrap; gap:1.4rem;
  margin:1.6rem 0 0; padding:0;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.1em;
  color:var(--mist); text-transform:uppercase;
}
.record__key li{ display:flex; align-items:center; gap:.5rem; }
.record__key i{ width:12px; height:12px; border-radius:50%; border:1.5px solid; }
.record__key i[data-tech="wind"]{ background:rgba(38,94,95,.42); border-color:#265E5F; }
.record__key i[data-tech="solar"]{ background:rgba(155,176,0,.42); border-color:#9BB000; }
.record__key i[data-tech="storage"]{ background:rgba(251,95,36,.42); border-color:#FB5F24; }
.record__key i[data-tech="grid"]{ background:rgba(54,63,158,.42); border-color:#363F9E; }

/* tally */

.tally{
  max-width:var(--max);
  margin:clamp(2.5rem,5vw,4rem) auto 0;
  display:grid; gap:1px;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}
/* Liniile stau pe fiecare casuta, nu pe fundalul containerului. Cele trei cifre
   incap pe doua coloane intre 509 si 754px, randul de jos ramane incomplet, iar
   fundalul containerului s-ar vedea acolo ca un dreptunghi gol. Inelul de 1px al
   vecinilor se suprapune in gap-ul de 1px, deci liniile raman la fel de subtiri,
   iar chenarul se inchide singur si pe dreapta, si jos — inclusiv in jurul unei
   casute ramase singure pe rand. */
.tally > div{
  background:var(--ink); padding:1.4rem 1.5rem;
  box-shadow:0 0 0 1px rgba(196,219,233,.22);
}
.tally dt{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.1em;
  text-transform:uppercase; color:#7E9899; margin-bottom:.6rem;
}
.tally dd{
  margin:0;
  font-family:var(--display);
  font-variation-settings:"wdth" 112;
  font-weight:600; font-size:clamp(1.7rem,1.3rem + 1.4vw,2.5rem);
  letter-spacing:-.02em; line-height:1;
}
.tally abbr{ text-decoration:none; font-size:.5em; margin-left:.25em; color:var(--mist); }

/* ── practice ────────────────────────────────────────────── */

/* Blocul nu mai poarta eticheta de sectiune si a pierdut si ultimul paragraf
   din coloana din dreapta, deci banda ramasese mai inalta decat continutul ei.
   Padding-ul e strans fata de restul sectiunilor — care stau pe
   clamp(4rem,9vw,7.5rem) — tocmai pentru ca aici pragurile de sus si de jos
   sunt fondul inchis al hero-ului si banda deschisa a portofoliului, iar
   distanta dintre ele se citea ca gol, nu ca respiratie. */
.practice{ padding:clamp(2.75rem,5.5vw,4.5rem) var(--pad); }
.practice__grid{
  max-width:var(--max); margin-inline:auto;
  display:grid; gap:2.5rem clamp(2rem,5vw,5rem);
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:900px){
  .practice__grid{ grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); }
}
.practice__lead p{
  font-family:var(--display);
  font-variation-settings:"wdth" 105;
  font-weight:400;
  font-size:clamp(1.35rem,1.05rem + 1.3vw,2.05rem);
  line-height:1.22; letter-spacing:-.02em;
  margin:0 0 1.2rem;
}
.practice__lead p:first-child::first-letter{ color:var(--orange); }
.practice__body p{ margin:0 0 1.15rem; color:#2E4647; }
.practice__body p:last-child{ margin-bottom:0; }

/* ── route ───────────────────────────────────────────────── */

.route{
  padding:clamp(4rem,9vw,7.5rem) var(--pad) clamp(2rem,4vw,3rem);
  background:var(--paper-2);
}
.route > *{ max-width:var(--max); margin-inline:auto; }

/* ── work ────────────────────────────────────────────────── */

.work{ padding:clamp(3rem,6vw,5rem) var(--pad) clamp(4rem,9vw,7.5rem); background:var(--paper-2); }
.work > *{ max-width:var(--max); margin-inline:auto; }

.filters{ display:flex; flex-wrap:wrap; gap:.55rem; margin:1.6rem 0 2.5rem; }
.chip{
  font-family:var(--mono); font-size:.74rem; letter-spacing:.1em;
  text-transform:uppercase;
  padding:.6rem 1rem;
  background:none; color:var(--ink);
  border:1.5px solid rgba(11,46,47,.3);
  cursor:pointer;
  transition:background-color .15s ease, color .15s ease, border-color .15s ease;
}
.chip:hover{ border-color:var(--ink); }
.chip.is-on{ background:var(--ink); border-color:var(--ink); color:var(--paper); }

.grid{
  display:grid; gap:clamp(1.5rem,2.5vw,2.25rem);
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
}

.proj{
  border:1px solid rgba(11,46,47,.2);
  background:#fff;
  display:flex; flex-direction:column;
  transition:border-color .2s ease, transform .2s ease;
  /* panoul "ce am facut" urca peste card, deci cardul il incadreaza */
  position:relative; overflow:hidden;
}
.proj:hover{ border-color:var(--ink); transform:translateY(-3px); }
.proj[hidden]{ display:none; }
.proj:target{ border-color:var(--orange); }

.proj__img{ aspect-ratio:16/10; overflow:hidden; background:var(--paper-2); }
.proj__img img{ width:100%; height:100%; object-fit:cover; }
.proj__img--draw{ display:flex; align-items:center; justify-content:center; padding:1rem; background:#fff; }
.proj__img--draw img{ object-fit:contain; }

.proj__head{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding:1.35rem 1.35rem .8rem;
}
.proj__head h3{
  font-family:var(--display);
  font-variation-settings:"wdth" 108;
  font-weight:500; font-size:1.1rem; line-height:1.2;
  letter-spacing:-.012em; margin:0;
}
.proj__cap{
  margin:0; flex:none;
  font-family:var(--mono); font-size:.82rem; font-weight:500;
  color:var(--orange); white-space:nowrap;
}

.spec{ margin:0; padding:0 1.35rem 1.1rem; }
.spec > div{
  display:grid; grid-template-columns:5.5rem 1fr; gap:.5rem;
  padding:.42rem 0;
  border-top:1px solid rgba(11,46,47,.1);
}
.spec dt{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.08em;
  text-transform:uppercase; color:#6D8384; padding-top:.15em;
}
.spec dd{ margin:0; font-size:.9rem; }

.proj details{ margin-top:auto; }
.proj summary{
  cursor:pointer; list-style:none;
  padding:.95rem 1.35rem;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-2);
  /* bara ramane deasupra panoului care urca, si opaca, ca sa nu se citeasca
     textul pe sub ea */
  position:relative; z-index:2; background:#fff;
  border-top:1px solid rgba(11,46,47,.14);
}
.proj summary::-webkit-details-marker{ display:none; }
.proj summary::after{ content:" +"; color:var(--orange); }
.proj details[open] summary::after{ content:" –"; }
.proj summary:hover{ color:var(--ink); }
/* cardul are overflow:hidden pentru panoul care urca, si taie inelul de
   focus; pe bara il desenam spre interior, ca sa ramana intreg */
.proj summary:focus-visible{ outline-offset:-3px; }

/* Panoul nu mai creste cardul: sta peste el si urca de sub bara de jos.
   Regulile de mai jos atarna de `.js-cards`, pus de site.js — fara JS,
   <details> ramane un acordeon obisnuit si textul e tot acolo. */
.js-cards .proj__scope{
  position:absolute; inset:0; z-index:1;
  background:#fff;
  padding:1.35rem 0 4rem;
  overflow-y:auto; overscroll-behavior:contain;
  box-shadow:0 -14px 30px rgba(11,46,47,.12);
  /* opac din primul cadru: un panou translucid ar lasa titlul si fisele
     sa se citeasca prin el cat urca, si textul s-ar incaleca */
  transform:translateY(100%);
  transition:transform .44s cubic-bezier(.22,.61,.36,1);
}
.js-cards .proj details.is-open .proj__scope{ transform:none; }

/* textul intra putin dupa panou, ca sa nu apara totul dintr-o bucata */
.js-cards .proj__scope > *{
  opacity:0; transform:translateY(12px);
  transition:opacity .34s ease, transform .34s cubic-bezier(.22,.61,.36,1);
}
.js-cards .proj details.is-open .proj__scope > *{ opacity:1; transform:none; }
.js-cards .proj details.is-open .proj__scope > :nth-child(1){ transition-delay:.10s; }
.js-cards .proj details.is-open .proj__scope > :nth-child(2){ transition-delay:.16s; }
.js-cards .proj details.is-open .proj__scope > :nth-child(3){ transition-delay:.22s; }

.proj details p, .proj details ul{ font-size:.88rem; color:#3B5354; }
.proj details p{ margin:0 1.35rem .8rem; }
.proj details ul{ margin:0 1.35rem 1.35rem; padding-left:1.1rem; }
.proj details li{ margin-bottom:.3rem; }

/* ── seria de imagini a unui card ────────────────────────── */
/* Cardul cu mai multe imagini: prima e fata lui, la clic cardul se intoarce
   si arata a doua, apoi seria curge singura, cu cate o rotatie la fiecare
   schimbare de imagine. Toate cadrele sunt in HTML de la inceput; regulile
   care le ascund atarna de `.js-cards`, clasa pusa de site.js pe <html>.
   Fara JS raman toate vizibile, stivuite in ordine — ca la panourile "Ce am
   facut" si la cardurile din construcții civile.

   Durata rotatiei de mai jos e aceeasi cu FLIP_MS din site.js. Se schimba
   amandoua sau niciuna: JS-ul schimba imaginea exact la jumatatea ei, cand
   cadrul e pe muchie. Daca valorile se despart, schimbarea se vede. */

.series{ position:relative; }
/* .proj__img fixeaza 16/10 pe container; la serie proportia trece pe fiecare
   cadru, altfel teancul de fara-JS s-ar taia la inaltimea unei imagini */
.proj__img.series{ aspect-ratio:auto; }
/* rotatia se face in interiorul casetei de imagine, ca sa nu treaca peste
   titlul de dedesubt cat tine */
.js-cards .series{ cursor:pointer; perspective:1100px; overflow:hidden; }
/* cardul taie inelul de focus, ca la bara "Ce am facut"; il desenam inauntru */
.series:focus-visible{ outline-offset:-3px; }

.series__stage{ position:relative; }

.series__frame{ position:relative; aspect-ratio:16/10; background:var(--paper-2); }
.series__frame img{ width:100%; height:100%; object-fit:cover; }
.js-cards .series__frame{ display:none; }
.js-cards .series__frame.is-on{ display:block; }

/* Flip pe axa verticala, la fiecare clic. Cele 520ms sunt aceeasi valoare cu
   FLIP_MS din site.js si se schimba impreuna cu ea. Imaginile avanseaza doar
   la clic: nu exista avans automat. */
.js-cards .series.is-turning .series__stage{ animation:series-turn .52s ease-in-out; }
@keyframes series-turn{
  0%  { transform:rotateY(0); }
  50% { transform:rotateY(-90deg); }
  100%{ transform:rotateY(0); }
}

/* Primul semnal ca imaginea se intoarce: coltul indoit din dreapta-sus.
   Permanent, pe toate ecranele; la hover se ridica putin, iar pe telefon,
   unde hover-ul nu exista, ramane static si tot se vede. Fara JS nu apare
   deloc: acolo imaginile sunt toate in pagina, una sub alta, si n-ar avea ce
   sa anunte — aceeasi regula ca la butonul "Vezi toate". */
.series__fold{ display:none; }
.js-cards .series__fold{
  display:block;
  position:absolute; top:0; right:0; width:30px; height:30px;
  background:linear-gradient(225deg, var(--paper) 0 50%, transparent 50%);
  filter:drop-shadow(-1px 1px 1px rgba(11,46,47,.4));
  transition:width .22s ease, height .22s ease, filter .22s ease;
  pointer-events:none;
}
.js-cards .series:hover .series__fold,
.js-cards .series:focus-visible .series__fold{
  width:38px; height:38px;
  filter:drop-shadow(-2px 2px 3px rgba(11,46,47,.45));
}

/* Al doilea semnal: contorul. Sta in cadru, deci se schimba odata cu imaginea
   fara ca JS-ul sa scrie text vizibil. Fara JS, fiecare imagine din teanc isi
   poarta numarul ei. */
.series__count{
  position:absolute; left:0; bottom:0; margin:0;
  padding:.3rem .55rem;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.08em;
  background:var(--ink); color:var(--paper);
}

/* ── app ─────────────────────────────────────────────────── */

.app{
  background:var(--ink);
  color:var(--paper);
  border-top:5px solid var(--orange);
  padding:clamp(4rem,9vw,7rem) var(--pad);
}
/* .eyebrow e ink-2, facut pentru benzile deschise; pe fondul inchis al
   sectiunii il intoarcem pe portocaliu */
.app .eyebrow--boxed{ border-color:var(--orange); color:var(--orange); }
.app__inner{ max-width:var(--max); margin-inline:auto; }
.app__title{ max-width:16ch; }
.app__lede{ max-width:46ch; font-size:clamp(1.02rem,.98rem + .35vw,1.18rem); margin:0 0 2rem; color:#D7E1E1; }
.app__lede p{ margin:0 0 1.15rem; }
.app__lede p:last-child{ margin-bottom:0; }

/* ── contact ─────────────────────────────────────────────── */

.contact{
  background:var(--ink); color:var(--paper);
  padding:clamp(4rem,9vw,7rem) var(--pad);
}
.contact > *{ max-width:var(--max); margin-inline:auto; }
.contact .eyebrow--boxed{ border-color:var(--mist); color:var(--mist); }
.contact .section-lede{ color:#9FB6B7; }

.contact__grid{
  display:grid; gap:2.5rem clamp(2rem,5vw,5rem);
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:900px){
  .contact__grid{ grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); }
}

.contact__card{
  font-style:normal;
  border:1px solid rgba(196,219,233,.3);
  padding:1.8rem;
  align-self:start;
}
.contact__card p{ margin:0 0 1rem; color:#D7E1E1; }
.contact__name{
  font-family:var(--display);
  font-variation-settings:"wdth" 112;
  font-weight:600; letter-spacing:.02em; text-transform:uppercase;
  color:var(--paper) !important;
}
.contact__lines{ font-family:var(--mono); font-size:.9rem; margin-bottom:0 !important; }
.contact__lines a{ text-decoration:none; border-bottom:1px solid rgba(196,219,233,.4); }
.contact__lines a:hover{ border-bottom-color:var(--orange); color:#fff; }

/* ── footer ──────────────────────────────────────────────── */

.foot{
  background:var(--ink); color:#7E9899;
  border-top:1px solid rgba(196,219,233,.18);
  padding:1.6rem var(--pad) 2.4rem;
  display:flex; flex-wrap:wrap; gap:.4rem 2rem;
  font-family:var(--mono); font-size:.74rem; letter-spacing:.06em;
}
.foot p{ margin:0; }
.foot a{ text-decoration:none; border-bottom:1px solid currentColor; }
.foot a:hover{ color:var(--paper); }
.foot__links{ display:flex; gap:1.2rem; }

/* ── pagini legale ───────────────────────────────────────── */

.legal{
  max-width:68ch; margin-inline:auto;
  padding:clamp(3rem,7vw,5.5rem) var(--pad) clamp(4rem,8vw,6rem);
}
.legal h1{ margin:0 0 .4rem; }
.legal h2{
  font-family:var(--mono); font-size:.76rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-2);
  margin:2.4rem 0 .7rem;
}
.legal p{ margin:0 0 1.1rem; color:#2E4647; line-height:1.65; }
.legal__upd{
  font-family:var(--mono); font-size:.74rem; letter-spacing:.06em;
  color:var(--ink-2); margin-bottom:2.2rem;
}
.legal a{ color:inherit; text-underline-offset:.18em; }

/* ── motion ──────────────────────────────────────────────── */

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

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  .reveal{ opacity:1; transform:none; }
  .btn:hover, .proj:hover{ transform:none; }
}

/* the plot is one fixed drawing that scales down; on small
   screens the labels need to grow inside the viewBox to stay
   legible once the whole thing is shrunk to phone width */
@media (max-width:760px){
  .axis text{ font-size:26px; }
  .axis line{ stroke-width:1.6; }
  .record__readout{ font-size:.74rem; }
}

/* Gutter-ul benzilor care nu poarta eticheta de sectiune: bara, hero, banda
   de portofoliu si subsolul. Padding-ul urca pana la coloana de continut, deci
   tot ce e inauntru porneste de acolo.

   Sectiunile cu eticheta — .practice, .route, .civ, .env, .acc, .app, .contact
   — sunt scoase deliberat de aici si folosesc modelul celalalt: padding doar
   `var(--pad)`, iar coloana de continut o dau copiii, prin
   `max-width:var(--max)` plus `margin-inline:auto`. Marginile automate
   centreaza corect elementele de tip bloc — h2, lede, grile, carduri, grafic —
   deci continutul cade exact pe aceeasi coloana ca aici. `.eyebrow--boxed` e
   insa `display:inline-block`, iar pe un element inline marginile automate se
   calculeaza 0: eticheta ramane la `var(--pad)`, langa marginea paginii.

   Decalajul e voit, cerut de operator pe 2026-08-27: toate cele sapte etichete
   de sectiune stau pe aceeasi verticala, la marginea din stanga, si nu urmeaza
   coloana titlurilor. Daca muti o sectiune inapoi in lista de mai jos, eticheta
   ei sare pe coloana de continut si iese din rand cu celelalte. */
.bar, .hero, .work, .foot{
  padding-inline: max(var(--pad), calc((100% - var(--max)) / 2));
}

/* ── comutator de limbă ──────────────────────────────────── */
.lang{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.1em;
  text-decoration:none; color:var(--mist);
  border:1px solid rgba(196,219,233,.4);
  padding:.5rem .6rem; line-height:1;
}
.lang:hover{ color:#fff; border-color:var(--mist); }

/* ── jump to top, doar in bara de pe mobil ───────────────── */
/* Sub 920px bara nu are meniu, deci nu exista drum inapoi in capul paginii in
   afara de marca — care duce la #top, dar nu se citeste ca buton. Sageata ia
   locul lasat liber de meniu si imprumuta caseta comutatorului de limba:
   acelasi chenar subtire, acelasi mono, aceeasi culoare. Nimic nou de desenat.

   Locul ei e rezervat din start si aparitia se face din opacitate. Daca ar
   intra si iesi din flow, bara s-ar reaseza sub degetul omului exact in timp
   ce deruleaza. `visibility` o scoate din ordinea de Tab si de la cititoarele
   de ecran cat timp nu se vede, si se schimba fara tranzitie la aparitie,
   respectiv dupa ce se stinge — altfel ori nu s-ar vedea intrarea, ori ar
   ramane apasabila cat timp iese.

   Clasa `is-deep` o pune site.js pe <html>, dupa un ecran si jumatate de
   derulare. Fara JS sageata nu apare niciodata: nu strica nimic, marca duce
   tot acolo. */
.bar__top{
  display:none;
  font-family:var(--mono); font-size:.8rem; line-height:1;
  text-decoration:none; color:var(--mist);
  border:1px solid rgba(196,219,233,.4);
  padding:.5rem .62rem;
}
.bar__top:hover{ color:#fff; border-color:var(--mist); }
/* Cand si cum apare sta in blocul @media al barei, sus in fisier, langa
   celelalte reguli de sub 920px. Blocul acela e singurul pe latimea asta si
   asa ramane. */

/* ── bifurcația celor două domenii ───────────────────────── */
.split{
  max-width:var(--max); margin:clamp(3rem,6vw,5rem) auto 0;
  display:grid; gap:1px;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}
/* Cardurile sunt trei, deci numarul de coloane nu mai imparte exact numarul de
   elemente: pe doua coloane randul de jos ramane pe jumatate. Cu fundal pe
   container, locul fara card s-ar vedea ca un dreptunghi colorat gol — un card
   fantoma, intre ~600 si ~840px. Deci liniile stau pe fiecare card, ca la
   `.tally`: inelele vecinilor se suprapun in gap-ul de 1px si raman la fel de
   subtiri, iar chenarul se inchide singur si in jurul cardului ramas singur pe
   rand. Daca revin vreodata la doua carduri, tehnica asta ramane corecta. */
.split__card{
  background:var(--ink); padding:1.8rem 1.7rem 2rem;
  box-shadow:0 0 0 1px rgba(196,219,233,.22);
  text-decoration:none; color:inherit;
  transition:background-color .2s ease;
}
.split__card:hover{ background:#123B3C; }
.split__card h2{
  font-family:var(--display); font-variation-settings:"wdth" 110;
  font-weight:500; font-size:1.35rem; letter-spacing:-.015em;
  margin:0 0 .6rem; color:var(--paper);
}
.split__card h2::after{ content:" →"; color:var(--orange); }
.split__card p{ margin:0; font-size:.94rem; line-height:1.55; color:#9FB6B7; }

/* ── două coloane: semnat de noi / coordonat de noi ──────── */
.two{
  display:grid; gap:1px;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  background:rgba(11,46,47,.16);
  border:1px solid rgba(11,46,47,.16);
  margin-top:2.5rem;
}
.two__col{ background:var(--paper); padding:1.9rem 1.7rem 2rem; }
.two__col--muted{ background:#E9EBE5; }
.two__h{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-2);
  margin:0 0 1.1rem;
}
.ticks{ list-style:none; margin:0; padding:0; }
.ticks li{
  position:relative; padding-left:1.4rem; margin-bottom:.6rem;
  font-size:.96rem; line-height:1.45;
}
.ticks li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:8px; height:8px; background:var(--orange);
}
.ticks--open li::before{ background:none; border:1.5px solid var(--ink-2); }
.two__note{ margin:1.2rem 0 0; font-size:.9rem; color:#4A6162; }

/* ── construcții civile ──────────────────────────────────── */

.civ{ padding:clamp(4rem,9vw,7.5rem) var(--pad); background:var(--paper); }
.civ > *{ max-width:var(--max); margin-inline:auto; }

.civ__groups{ margin-top:2.5rem; display:grid; gap:2rem; }

/* Capul de categorie e slabit deliberat, 2026-08-27. Inainte arata ca un cap de
   sectiune si era mai puternic decat eticheta de deasupra lui — o inversare de
   ierarhie: categoria parea mai importanta decat sectiunea din care face parte.
   Trei lucruri o cauzau, si toate trei s-au schimbat aici:

   1. `display:inline-flex`, nu `flex`. Capul se stramteaza pe continut, deci
      linia de jos tine doar cat titlul plus contorul, nu toata coloana. O linie
      pe toata latimea citeste ca prag de sectiune.
   2. Contorul nu mai are `margin-left:auto`. Statea la capatul opus al randului
      si intindea capul peste tot ecranul; acum sta lipit de titlu.
   3. Titlul scade de la 1.2rem la 1.02rem, contorul de la .72rem la .64rem, iar
      aerul din jur se strange (`gap` intre grupuri 2.6rem -> 2rem, distanta pana
      la carduri 1.4rem -> .95rem).

   Contorul isi pastreaza culoarea `--ink-2`. In macheta era gri deschis, dar la
   .64rem ar fi coborat la 3:1 contrast pe fond `--paper`, sub pragul AA — vezi
   regula de accesibilitate din CLAUDE.md. Slabirea o fac oricum marimea si
   pozitia, nu culoarea. */
.civ__head{
  display:inline-flex; align-items:baseline; gap:.65rem;
  border-bottom:1px solid rgba(11,46,47,.16);
  padding-bottom:.32rem;
}
.civ__h{
  font-family:var(--display); font-variation-settings:"wdth" 108;
  font-weight:500; font-size:1.02rem; letter-spacing:-.01em;
  margin:0; color:var(--ink);
}
.civ__n{
  margin:0;
  font-family:var(--mono); font-size:.64rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-2);
}

/* Aceeasi tehnica cu inele ca la `.split` si `.tally`: numarul de carduri
   variaza de la un grup la altul, deci liniile nu au voie sa stea pe fundalul
   containerului. Lista e goala cat timp proiectele nu sunt importate. */
.civ__list{
  list-style:none; margin:.95rem 0 0; padding:0;
  display:grid; gap:1px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
.civ__card{ background:var(--paper); box-shadow:0 0 0 1px rgba(11,46,47,.16); }
.civ__list:empty{ display:none; }

/* Caseta de imagine a cardurilor civile e 4/3, nu 16/10 ca la energie: 42 din
   cele 170 de imagini sunt portret, iar intr-o caseta 16/10 s-ar vedea doar o
   banda ingusta din mijloc. Cardurile de energie nu sunt atinse — regulile de
   aici atarna toate de `.civ__card`. Randul al doilea trebuie sa ramana: fara
   el, `.civ__card .proj__img` (aceeasi specificitate, dar mai jos in fisier)
   ar bate `.proj__img.series`, iar teancul de fara-JS s-ar taia la inaltimea
   unei singure imagini. */
.civ__card .proj__img{ aspect-ratio:4/3; }
.civ__card .proj__img.series{ aspect-ratio:auto; }
.civ__card .series__frame{ aspect-ratio:4/3; }

.civ__t{
  font-family:var(--display); font-variation-settings:"wdth" 108;
  font-weight:500; font-size:1rem; line-height:1.25; letter-spacing:-.012em;
  margin:0; padding:1.05rem 1.05rem .35rem;
}
/* Eticheta celor doua proiecte ale caror imagini nu arata lucrarea: macheta
   de studiu la Marine museum, desen de urbanism la Centru Civic Casimcea. Sta
   in card, sub titlu, ca sa n-o poata rata cineva care nu citeste alt-ul. */
.civ__tag{
  margin:0; padding:0 1.05rem .1rem;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.09em;
  text-transform:uppercase; color:var(--orange);
}
.civ__spec{ margin:0; padding:.5rem 1.05rem 1.05rem; }
.civ__spec > div{
  display:grid; grid-template-columns:4.6rem 1fr; gap:.5rem;
  padding:.34rem 0;
  border-top:1px solid rgba(11,46,47,.1);
}
.civ__spec dt{
  font-family:var(--mono); font-size:.63rem; letter-spacing:.08em;
  text-transform:uppercase; color:#6D8384; padding-top:.25em;
}
.civ__spec dd{ margin:0; font-size:.85rem; }

/* Cardurile de peste primele patru si butonul care le deschide exista doar cu
   JS. Fara JS regulile de mai jos nu se aplica: toate cardurile raman vizibile
   si indexabile, iar butonul, care n-ar face nimic, sta ascuns. */
.civ__more{ display:none; }
.js-cards .civ__group .civ__card--extra{ display:none; }
.js-cards .civ__group.is-open .civ__card--extra{ display:block; }
.js-cards .civ__more{
  display:inline-block; margin-top:1.2rem;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.1em;
  text-transform:uppercase;
  padding:.6rem 1rem; cursor:pointer;
  background:none; color:var(--ink);
  border:1px solid rgba(11,46,47,.32);
  transition:background-color .18s ease, color .18s ease;
}
.js-cards .civ__more:hover{ background:var(--ink); color:var(--paper); }
/* Ambele etichete stau in HTML; CSS-ul alege care se vede, ca sa nu ajunga
   text vizibil in JS. JS-ul comuta doar clasa `is-open` pe grup. */
.civ__more-close{ display:none; }
.civ__group.is-open .civ__more-open{ display:none; }
.civ__group.is-open .civ__more-close{ display:inline; }

/* ── mediu ───────────────────────────────────────────────── */
/* Sectiunea refacuta pe 2026-08-27, dupa machetele operatorului. Din machete
   s-au preluat textele si structura — antetele de card, pozitia chenarelor,
   ordinea blocurilor. Tratamentul vizual a ramas al site-ului: fond deschis,
   fara numerotare de sectiune, aceleasi culori.

   Atestarea a intrat aici, ca ultimele doua blocuri. N-are eticheta proprie,
   n-are h2 si n-are buton de colaps: se strange odata cu Mediu. */

.env{ padding:clamp(4rem,9vw,7.5rem) var(--pad); background:var(--paper); }
.env > *{ max-width:var(--max); margin-inline:auto; }

/* Doua carduri alaturate, egale ca inaltime. Sunt doua fixe, ca la `.two`, deci
   randul nu poate ramane incomplet — dar liniile stau pe carduri, prin
   `box-shadow`, nu pe fundalul containerului, ca la `.split`, `.tally` si
   `.civ__list`. E gratis si tine daca apare vreodata al treilea card. */
.env__grid{
  margin-top:2.5rem;
  display:grid; gap:1px;
  grid-template-columns:1fr;
}
@media (min-width:760px){
  .env__grid{ grid-template-columns:1fr 1fr; }
}

/* --card-pad e singurul loc unde se scrie paddingul orizontal al cardului.
   Tabelul de coduri il citeste de acolo, ca eticheta lui din antet sa cada
   pe exact acelasi x ca eticheta cardului de deasupra — cele doua se ating,
   deci un decalaj de cativa pixeli s-ar vedea imediat. */
.env__card, .env__table{
  --card-pad:1.7rem;
  background:var(--paper);
  box-shadow:0 0 0 1px rgba(11,46,47,.16);
}
.env__card{ padding:1.9rem var(--card-pad) 2rem; }

/* Antetul de card: o eticheta de continut, despartita de titlu printr-o linie.
   Antetele n-au parte dreapta. Au avut o zi — "01 — 07", "Pe sezoane" si
   "Valabil 10.2027" — si au fost scoase pe 2026-08-27: primele doua veneau
   dintr-un sistem de numerotare al machetei si nu trimiteau nicaieri, iar
   valabilitatea atestarii nu mai apare deloc pe site. Nu readuce o a doua
   eticheta in `.env__head` fara sa se ceara: linia e calibrata pentru una. */
.env__head{
  display:flex; align-items:baseline;
  border-bottom:1px solid rgba(11,46,47,.16);
  padding-bottom:.6rem;
  margin:0 0 1.15rem;
}
.env__k{
  margin:0;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-2);
}

/* Titlul de card sta intre `.h2` si capul de categorie din #civile: e mai
   mare decat acela, dar destul de mic cat sa nu concureze cu h2-ul sectiunii.
   Aceeasi ierarhie ca peste tot — sectiunea ramane deasupra cardului. */
.env__t{
  font-family:var(--display); font-variation-settings:"wdth" 108;
  font-weight:500; font-size:clamp(1.14rem,1.02rem + .5vw,1.42rem);
  line-height:1.2; letter-spacing:-.012em;
  margin:0 0 1.1rem; color:var(--ink); max-width:26ch;
}
.env__p{ margin:0; font-size:.96rem; line-height:1.55; color:#3B5354; }

/* Vocabularul chip-urilor de la filtrele din portofoliu, dar statice: nu sunt
   butoane, nu filtreaza nimic, doar enumera ce se urmareste pe teren. */
.env__chips{
  list-style:none; margin:1.3rem 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:.45rem;
}
.env__chips li{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-2);
  border:1px solid rgba(11,46,47,.28);
  padding:.42rem .68rem;
}

/* ── atestarea: cardul si tabelul de coduri ──────────────── */
/* Un singur bloc, pe toata latimea, cele doua lipite la 1px — inelele lor se
   suprapun in gap si dau o linie, ca la orice grila din site. Tabelul e
   continuarea cardului, nu alt subiect, si asa se si citeste.

   Cardul a stat o zi pe o singura coloana din `.env__grid` si lasa jumatate de
   rand gol la dreapta; pe fond deschis golul se vedea si arata a scapare.
   Latimea textului o tine acum `max-width` — 26ch pe titlu, 64ch pe paragraf —
   nu latimea cardului. Nu-l pune inapoi in grila. */
.env__acc{
  margin-top:1.5rem;
  display:grid; gap:1px;
}
.env__card--acc .env__p{ max-width:64ch; }

/* ── tabelul de coduri ARM ───────────────────────────────── */
/* A inlocuit scara in zigzag pe 2026-08-27. Acum e un tabel obisnuit: codul in
   mono la stanga, descrierea la dreapta, pe toate cele cinci randuri. Alternanta
   pe `nth-child` a disparut odata cu ea.

   Antetul e in chenar, ca prim rand al tabelului, nu text liber deasupra lui;
   de-aia `.env__table` poarta inelul si fundalul, iar antetul isi ia paddingul
   din `--card-pad`. Randurile sunt stranse deliberat: la `.9rem` sus si jos se
   citeau a lista rara, nu a tabel. */
.env__head--tbl{ padding:.95rem var(--card-pad); margin:0; }
.acc__list{ margin:0; }
.acc__list > div{
  display:grid; grid-template-columns:minmax(0,7rem) minmax(0,1fr);
  gap:1rem; align-items:baseline;
  padding-inline:var(--card-pad);
}
.acc__list > div + div{ border-top:1px solid rgba(11,46,47,.16); }
.acc__list dt{
  margin:0; padding:.58rem 0;
  font-family:var(--mono); font-weight:500; font-size:.82rem;
  letter-spacing:.04em; color:var(--orange);
}
.acc__list dd{
  margin:0; padding:.58rem 0;
  font-size:.92rem; line-height:1.45; color:#3B5354;
}

/* Sub pragul asta coloana codului lasa descrierii prea putin: se trece pe un
   rand, codul deasupra explicatiei lui. */
@media (max-width:599px){
  .env__card, .env__table{ --card-pad:1.25rem; }
  .acc__list > div{ grid-template-columns:1fr; gap:0; }
  .acc__list dt{ padding:.7rem 0 .1rem; }
  .acc__list dd{ padding:0 0 .7rem; }
}

/* secțiunile work/route nu mai poartă titlu propriu de secțiune */
.work .record{ border-top:0; padding-top:0; margin-top:0; }
.work .record figcaption h2{ color:var(--ink); }
.work .record__note{ color:#4A6162; }
.work .record__readout{ color:var(--ink-2); }
.work .record__readout b{ color:var(--ink); }
.work .record__readout span{ color:#7E9899; }
.work .axis line{ stroke:rgba(11,46,47,.25); }
.work .axis text{ fill:#6D8384; }
.work .record__key{ color:var(--ink-2); }
.work .tally > div{ background:var(--paper-2); box-shadow:0 0 0 1px rgba(11,46,47,.16); }
.work .tally dt{ color:#6D8384; }
.work .tally dd{ color:var(--ink); }
.work .tally abbr{ color:var(--ink-2); }
.work .filters{ margin-top:3rem; }