/* ============================================================================
   APARAT.CSS — stratul de OBIECT peste limbajul de panou            (26-Aug-2026)
   ----------------------------------------------------------------------------
   Cusuta din cele sapte foi ale studiului de pe home, in ordinea in care au fost
   aprinse acolo. ORDINEA E CASCADA, nu gustul (vezi scratchpad/fa-aparat-css.py).

   Ce face, in trei propozitii:
   1. CORPUL devine obiect: perete, umbra de masa, vinieta pe muchii, finisaj fin.
   2. APARATUL capata piese reale: bara de lot, mufe, cod, lumini de stare.
   3. MARCA primeste semnul 職人, portocaliu, in sigla si pe placuta din subsol.

   Ce NU face, dinadins: nu misca nimic. Regula de ADN a site-ului ramane
   „miscarea = lumina care se aprinde/stinge, sasiul NU se misca niciodata".

   Trei lucruri au fost SCOASE la cererea lui Ali (26-Aug), si sunt scoase de la
   sursa, nu ascunse: 機構/KIKŌ, zgarieturile de pe carcasa, si toate cablurile.
   Notele din sectiuni spun ce anume si de ce — se citesc inainte de a le pune
   inapoi.
   ============================================================================ */


/* ---------------------------------------------------------------------------
   din studiu-1.css
   --------------------------------------------------------------------------- */
/* STUDIU — TREAPTA 1: „PLACUTA"
   Doar doua lucruri, amandoua cu informatie in ele:
   1. o placuta de echipament cu 職人 si citirea ei;
   2. serialele existente (`.serie`) tiparite ca pe un aparat, nu ca pe un ecran.
   Nicio textura. Nicio uzura. Nimic pe display. */

/* --- 1. Placuta ---------------------------------------------------------- */
/* E o piesa de CORP: gravata in gri, nu luminata pe negru. De aia sta in
   interiorul `.aparat` si isi ia cerneala din tokenii de sasiu. */
.plc{
  display:flex; align-items:baseline; gap:14px;
  margin-top:26px; padding:11px 14px 10px;
  border:1px solid var(--chrule); border-radius:4px;
  background:linear-gradient(180deg,rgba(0,0,0,.035),rgba(0,0,0,.012));
  box-shadow:0 1px 0 rgba(255,255,255,.55) inset;
}
.plc__ro{
  font-family:var(--mono); font-size:10px; font-weight:500; letter-spacing:.22em;
  text-transform:uppercase; color:var(--chink3);
}
/* Separatoarele de pe CARCASA nu sunt portocalii.
   Masurat: `--or` (#F04E23) pe crem da 2,20:1 la placuta si 2,29:1 la bara de lot —
   sub pragul de 4,5:1, si exact aceeasi cadere ca bug-ul din brandbook (2,16:1).
   Pe masa neagra acelasi portocaliu da 5,39:1 si ramane acolo unde e.
   Regula care rezulta, si care e deja limbajul aparatului: PORTOCALIUL E ACTIUNE,
   si actiunea se apasa pe display. O placuta stantata nu se apasa.
   Inlocuitorul e cerneala carcasei o treapta mai inchisa decat textul (5,79:1),
   deci separatorul se citeste ca separator fara sa imprumute culoarea de buton. */
.plc__ro b{color:var(--chink2); font-weight:600}
/* Suruburile placutei. Doua puncte, nu patru: pe aparatele reale placuta e
   prinsa pe muchia lunga, nu in colturi. */
.plc{position:relative}
.plc::before,.plc::after{
  content:""; position:absolute; top:50%; width:3px; height:3px; margin-top:-1.5px;
  border-radius:50%; background:var(--chrule); box-shadow:0 1px 0 rgba(255,255,255,.6);
}
.plc::before{left:5px} .plc::after{right:5px}
.plc{padding-left:18px; padding-right:18px}


/* --- 2. Serialele, tiparite ---------------------------------------------- */
/* Un serial ștanțat nu e text curat: masina il taie identic, iar contactul il
   toceste inegal. Efectul se face din DENSITATE, nu dintr-un font distressed —
   o umbra orizontala de sub-pixel, atat. Peste ea, textul ramane text: se
   selecteaza, se citeste de un cititor de ecran, si trece pragul de contrast. */
.serie,.eyebrow{
  text-shadow:.55px 0 0 rgba(0,0,0,.14), -.35px 0 0 rgba(255,255,255,.05);
}
.aparat .serie,.aparat .eyebrow{
  text-shadow:.55px 0 0 rgba(255,255,255,.5), -.35px 0 0 rgba(0,0,0,.1);
}
.serie{letter-spacing:.215em}


/* ---------------------------------------------------------------------------
   din s2-corp.css
   --------------------------------------------------------------------------- */
/* ==========================================================================
   STUDIU 2 · CARCASA REALĂ                                          (26-Aug)
   --------------------------------------------------------------------------
   Ce s-a schimbat față de prima încercare, după feedback:

   1. AU DISPĂRUT CRUCILE DIN COLȚURI. Erau un semn tipografic pus peste o
      suprafață plată — adică tot desen. Un obiect nu pare real fiindcă are
      însemne, ci fiindcă are LUMINĂ: o muchie de sus care prinde lumina, o
      bază care se întunecă, o grosime care aruncă umbră pe masă.

   2. Textura nu mai e grăunte de film uniform. Aluminiul sablat are un zgomot
      FIN și strâns, care se vede și în lumină și în umbră — deci `overlay`,
      nu `multiply`.

      SCOASE (26-Aug, la cererea lui Ali: „scoatem si zgarieturile de peste
      tot"): opt zgârieturi desenate una câte una, fiecare cu perechea ei albă
      și neagră. Erau corecte ca desen și greșite ca decizie — urmele de
      folosire spun că obiectul a fost purtat, iar ăsta e primul exemplar.
      Rămâne doar uzura STRUCTURALĂ: vinieta de pe muchii, adică forma
      obiectului, nu biografia lui.

   3. Uzura e la MUCHII și în jurul locașurilor, adică unde chiar se freacă un
      aparat. O uzură distribuită egal pe toată fața nu e uzură, e filtru.

   Ce NU s-a schimbat: displayul negru rămâne neatins. Corpul e ce a fost ținut
   în mână; displayul e ce trebuie citit.
   ========================================================================== */

.aparat{
  /* Cerneala marunta a carcasei, coborata o treapta. Masurat pe randare, nu
     presupus: `--chink3` (#4E5255) pe placuta da 4,42:1 si pe bara de lot 4,48:1
     — sub 4,5:1, deci TOT scrisul marunt al aparatului cadea, la limita, in
     acelasi loc. #45494C da 5,10:1. `--chink2` coboara cu el ca sa ramana o
     treapta vizibila intre ele (altfel bold-ul din `.lot b` nu s-ar mai vedea).
     Se redefinesc AICI, pe corp, nu in `:root`: displayurile negre isi iau
     cerneala din alt set si nu au nevoie de corectia asta. */
  --chink2:#33373A; --chink3:#45494C;
  isolation:isolate;                 /* finisajul rămâne sub conținut, vezi ::before */
  border:1px solid var(--chrule);
  border-top-color:rgba(255,255,255,.75);
  border-bottom-color:rgba(0,0,0,.22);
  background:
    /* lumina care cade de sus-stânga, ca în fotografiile de produs */
    radial-gradient(130% 80% at 20% -18%, rgba(255,255,255,.9), rgba(255,255,255,0) 58%),
    linear-gradient(180deg, #EFEDE8 0%, #E6E4DE 40%, #D6D4CD 78%, #C9C7C0 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.92) inset,          /* muchia de sus, frezată */
    0 -1px 0 rgba(0,0,0,.10) inset,
    0 -20px 26px -24px rgba(0,0,0,.55) inset,     /* umbra se adună spre bază */
    0 6px 0 -1px #B5B3AC,                         /* PERETELE: aparatul are grosime */
    0 7px 0 -1px rgba(255,255,255,.30),           /* lumina pe muchia peretelui */
    0 34px 62px -30px rgba(0,0,0,.92);            /* umbra pe masă */
}

/* Finisajul. `z-index:-1` + `isolation:isolate` pe părinte: stratul se pune peste
   FUNDALUL aparatului și rămâne sub tot conținutul, fără să ating niciun copil.
   Un overlay cu z-index pozitiv ar acoperi textul — ordinea de pictare pune
   elementele poziționate peste conținutul în flux, oricât de transparente ar fi. */
.aparat::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  border-radius:inherit;
  background:
    /* SCOASE: locasurile frezate. Au fost mutate o data (30px la 24px inset
       cadeau peste text), apoi micsorate la 14px pe fasia din stanga — si acolo
       nu mai citeau a gaura, ci a scama pe ecran. Un detaliu care are nevoie de
       trei incercari ca sa nu incurce nimic nu-si plateste locul: realismul aici
       vine din lumina, perete si umbra, nu din inca un semn pe carcasa.
       (Regula, mai generala: cand un ornament se tot muta ca sa evite continutul,
       raspunsul e ca nu incape, nu ca n-a gasit inca locul potrivit.) */
    /* uzura: se strânge pe muchii, unde chiar se freacă */
    radial-gradient(135% 118% at 50% 46%, rgba(0,0,0,0) 56%, rgba(0,0,0,.13) 100%),
    /* sablarea: zgomot fin, strâns. `overlay` fiindcă metalul sablat sclipește
       și se întunecă deodată — un `multiply` l-ar face doar murdar.
       Intensitatea NU se scade din `opacity` — aia ar sterge si vinieta, care
       sta pe acelasi strat. Se scade din zgomotul insusi:
       `feComponentTransfer` strange gama [0,1] la [0.29, 0.71], adica in jurul
       lui 0,5 — iar 0,5 in `overlay` inseamna EXACT „nu schimba nimic". Deci
       `slope` e chiar butonul de granulatie: 1 = maxim, 0 = deloc. Acum .42. */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='.42' intercept='.29'/%3E%3CfeFuncG type='linear' slope='.42' intercept='.29'/%3E%3CfeFuncB type='linear' slope='.42' intercept='.29'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat:no-repeat,repeat;
  background-position:center,center;
  background-size:100% 100%, 160px 160px;
  background-blend-mode:normal,overlay;
  opacity:.9;
}

/* Aparatele din grile dese (treptele) sunt mai mici: peretele și umbra de masă
   se scad, altfel două aparate alăturate par că plutesc unul peste altul. */
.aparat.treapta{
  box-shadow:
    0 1px 0 rgba(255,255,255,.92) inset,
    0 -1px 0 rgba(0,0,0,.10) inset,
    0 -16px 22px -22px rgba(0,0,0,.5) inset,
    0 4px 0 -1px #B5B3AC,
    0 5px 0 -1px rgba(255,255,255,.28),
    0 22px 40px -24px rgba(0,0,0,.85);
}

/* --------------------------------------------------------------------------
   ÎNSEMNELE. Toate poartă informație adevărată — niciunul nu e umplutură.
   -------------------------------------------------------------------------- */

/* Textul de pe muchie, cules pe verticală, ca blocul legal de pe spatele
   aparatelor. Conține exact ce scrie deja în subsol: firma reală. */
.muchie{
  position:absolute; top:34px; right:9px; z-index:1;
  writing-mode:vertical-rl;
  font-family:var(--mono); font-size:8px; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; color:var(--chink3);
  pointer-events:none; user-select:none;
}
@media(max-width:900px){.muchie{display:none}}

/* Codul de bare. Bare cu lățimi neregulate — unul cu bare egale e o grilă,
   nu un cod, și se vede. Cifrele de dedesubt sunt CUI-ul real. */
.codbare{
  position:absolute; right:26px; bottom:26px; z-index:1;
  display:flex; flex-direction:column; align-items:flex-end; gap:3px;
  pointer-events:none; user-select:none;
}
.codbare__b{
  display:block; width:104px; height:22px; opacity:.55;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='104' height='22'%3E%3Cg fill='%23000'%3E%3Crect x='0' width='2' height='22'/%3E%3Crect x='4' width='1' height='22'/%3E%3Crect x='8' width='3' height='22'/%3E%3Crect x='13' width='1' height='22'/%3E%3Crect x='17' width='2' height='22'/%3E%3Crect x='22' width='1' height='22'/%3E%3Crect x='26' width='1' height='22'/%3E%3Crect x='29' width='3' height='22'/%3E%3Crect x='35' width='2' height='22'/%3E%3Crect x='40' width='1' height='22'/%3E%3Crect x='43' width='2' height='22'/%3E%3Crect x='48' width='3' height='22'/%3E%3Crect x='54' width='1' height='22'/%3E%3Crect x='57' width='1' height='22'/%3E%3Crect x='61' width='2' height='22'/%3E%3Crect x='66' width='3' height='22'/%3E%3Crect x='72' width='1' height='22'/%3E%3Crect x='75' width='2' height='22'/%3E%3Crect x='80' width='1' height='22'/%3E%3Crect x='84' width='3' height='22'/%3E%3Crect x='90' width='1' height='22'/%3E%3Crect x='93' width='2' height='22'/%3E%3Crect x='98' width='1' height='22'/%3E%3Crect x='101' width='3' height='22'/%3E%3C/g%3E%3C/svg%3E") no-repeat;
}
.codbare__n{font-family:var(--mono); font-size:8px; font-weight:500; letter-spacing:.3em;
  color:var(--chink3)}
@media(max-width:900px){.codbare{display:none}}

/* --------------------------------------------------------------------------
   VARIANTA NEAGRĂ. Același obiect, alt finisaj: aluminiu anodizat negru.
   Regula casei nu se rupe — corpul rămâne CORP, displayul rămâne DISPLAY.
   Ce le mai desparte când amândouă sunt negre e exact ce le desparte și pe
   aparatele reale: corpul e mat și granulat, displayul e lucios, adâncit,
   și are o buză fină de lumină de jur-împrejur.
   -------------------------------------------------------------------------- */
.aparat--negru{
  --ch:#1B1D20; --ch2:#0F1113; --ch3:#232629;
  --chink:#F0F1ED; --chink2:#BABFC1;
  /* #8F9699 dadea 4,11:1 pe corpul negru — aceeasi cadere, in oglinda.
     #A3AAAD da 5,24:1 si ramane sub `--chink2`, deci treapta se pastreaza. */
  --chink3:#A3AAAD;
  --chrule:#34383C; --chrule2:#25292D;
  --sink:var(--chink); --sink2:var(--chink2); --sink3:var(--chink3);
  --srule:var(--chrule); --stag:var(--ch3);
  --slic:rgba(255,255,255,.10);
  color:var(--chink);
  border-color:#2B2F33;
  border-top-color:rgba(255,255,255,.16);
  border-bottom-color:rgba(0,0,0,.6);
  background:
    radial-gradient(130% 80% at 20% -18%, rgba(255,255,255,.13), rgba(255,255,255,0) 58%),
    linear-gradient(180deg, #212427 0%, #191C1F 42%, #121417 80%, #0D0F11 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.14) inset,
    0 -1px 0 rgba(0,0,0,.5) inset,
    0 -20px 26px -24px rgba(0,0,0,.8) inset,
    0 6px 0 -1px #16181B,
    0 7px 0 -1px rgba(255,255,255,.07),
    0 34px 62px -30px rgba(0,0,0,.95);
}
/* Anodizatul negru arată granulația mai tare decât aluminiul natural. Nu e
   impresie, e măsurat (`scratchpad/gran.mjs`, filtru trece-sus de 1px, ca să nu
   intre degradeul în socoteală): la aceeași foaie de zgomot, bobul raportat la
   luminanța medie ieșea 1,4% pe cremul natural și 10,2% pe placa neagră — de
   șapte ori. Cauza e `screen` peste o bază închisă: aceeași amplitudine absolută
   cântărește mult mai mult când media e 56 decât când e 213.
   De aia negrul primește propria doză: `.85` → `.45`, măsurat 10,2% → 6,9% pe
   placă și 5,7% → 3,8% pe treaptă. Nu coboară până la 1,4% — ar cere `.10`, adică
   fără finisaj deloc, plus vinieta ștearsă (stă pe același strat, vezi nota de
   sus). Efectul secundar e binevenit: placa se închide (medie 56 → 44), deci
   toate cernelurile de pe ea cresc în contrast, inclusiv semnul portocaliu. */
.aparat--negru::before{
  opacity:.45;
  background-blend-mode:normal,soft-light;
  filter:invert(1) hue-rotate(180deg);
  mix-blend-mode:screen;
}
.aparat--negru .muchie, .aparat--negru .codbare__n{color:var(--chink3)}
.aparat--negru .codbare__b{opacity:.42; filter:invert(1)}

/* Displayul într-un corp negru: mai adânc decât corpul, cu o buză de lumină.
   Fără buză, un display negru pe un corp negru dispare — și atunci n-a mai
   rămas nicio distincție de făcut. */
.aparat--negru .disp{
  background:#050506; border-color:#000;
  box-shadow:0 0 0 1px rgba(255,255,255,.07),
             0 2px 18px -4px rgba(0,0,0,.95) inset;
}


/* ---------------------------------------------------------------------------
   din s2-lot.css
   --------------------------------------------------------------------------- */
/* STUDIU 2 — BARA DE LOT
   Ce a mai ramas bun din treapta 2 dupa ce au cazut crucile din colturi.
   NU se incarca `studiu-2.css`: crucile stateau pe `.aparat::before`, exact
   pseudo-elementul pe care `s2-corp.css` il foloseste acum pentru finisaj.
   Doua reguli pe acelasi pseudo-element inseamna ca una dispare tacut. */

.lot{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  margin-top:20px; padding-top:12px; border-top:1px solid var(--chrule2);
  font-family:var(--mono); font-size:9.5px; font-weight:500; letter-spacing:.2em;
  text-transform:uppercase; color:var(--chink3);
  position:relative; z-index:1;
}
.lot b{color:var(--chink2); font-weight:600}
.lot span{white-space:nowrap}
/* Fantele de ventilatie — o piesa de corp, deci gri pe gri, nu desen. */
.lot__fante{
  flex:1; height:7px; min-width:40px; border-radius:1px;
  background:repeating-linear-gradient(90deg, var(--chrule) 0 1px, transparent 1px 5px);
  opacity:.7;
}
.shead__sus .serie{padding:3px 8px; border:1px solid var(--srule); border-radius:2px}

/* Pe ecran ingust bara de lot NU incape pe un rand: cele doua capete au
   `white-space:nowrap` si fac ~480px la 390px de ecran. Nu se vedea, fiindca
   masuram revarsarea fata de `innerWidth` — iar `innerWidth` era deja umflat
   de revarsare, deci confirma ce ar fi trebuit sa semnaleze. Se masoara fata
   de latimea CERUTA. Fantele trec pe randul lor; ele sunt oricum umplutura. */
@media(max-width:640px){
  .lot{flex-wrap:wrap; gap:7px 14px; letter-spacing:.14em}
  .lot__fante{order:9; flex-basis:100%; min-width:0}
}


/* ---------------------------------------------------------------------------
   din s2-masina.css
   --------------------------------------------------------------------------- */
/* ==========================================================================
   STUDIU 2 · MAȘINĂRIA                                              (26-Aug)
   --------------------------------------------------------------------------
   „E o mașinărie, un sistem. Asta promovăm." — deci piesele de mașinărie
   trebuie să spună ceva despre sistem, nu să-l ilustreze.

   Două piese, fiecare cu o treabă:

   BANDA DE I/O   Fâșia neagră din hero devine ce e pe orice aparat: un rând
                  de segmente cu etichete. Segmentul PORTOCALIU e intrarea —
                  singurul lucru pe care îl dă clientul (cele două ore). Pe
                  aparatele de referință exact `INPUT` e blocul portocaliu.
                  Asta transformă un ornament într-o afirmație: restul benzii
                  e ieșire, un singur bloc e intrare.

   JACK-URILE     Două mufe adâncite lângă codul de bare, jos. Marchează
                  muchia din spate a aparatului — portul, nu cablul.
   ========================================================================== */

/* --------------------------------------------------------------------------
   BANDA DE I/O
   -------------------------------------------------------------------------- */
.banda{
  display:flex; align-items:stretch; gap:0; padding:0 !important;
  overflow:hidden;
}
.banda__s{
  display:flex; align-items:center; padding:13px 18px;
  font-family:var(--mono); font-size:11.5px; font-weight:500; letter-spacing:.185em;
  text-transform:uppercase; color:var(--sink2); white-space:nowrap;
  border-right:1px solid var(--srule);
}
/* Intrarea. Singurul bloc portocaliu de pe bandă, fiindcă e singura intrare.
   Portocaliu pe negru: 5,39:1. Textul de deasupra lui e negru pe portocaliu,
   care e raportul invers, tot peste prag. */
.banda__s--in{background:var(--or); color:#140A06; font-weight:600}
/* Hașura. Umple ce nu e nici intrare, nici ieșire — spațiul de pe placă unde
   nu e nimic. Pe aparatele reale exact asta face hașura diagonală. */
.banda__h{
  flex:1; min-width:40px;
  background:repeating-linear-gradient(-45deg,
    var(--srule) 0 1px, transparent 1px 7px);
  opacity:.85;
}
/* Mufele de la capătul benzii. Inel adâncit: umbră sus, lumină pe buza de jos. */
.banda__j{
  display:flex; align-items:center; gap:9px; padding:0 16px 0 14px;
  border-left:1px solid var(--srule);
}
.banda__j::before,.banda__j::after{
  content:""; width:15px; height:15px; border-radius:50%;
  background:radial-gradient(circle at 50% 38%, #000 0 4px, #17191C 5px, #26292D 100%);
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.13), inset 0 2px 3px rgba(0,0,0,.9),
             0 0 0 1px rgba(0,0,0,.7);
}
@media(max-width:900px){
  .banda{flex-wrap:wrap}
  .banda__h,.banda__j{display:none}
  .banda__s{border-right:0; padding:11px 14px}
}

/* --------------------------------------------------------------------------
   CABLUL DE LEGĂTURĂ — SCOS (26-Aug)
   --------------------------------------------------------------------------
   Ali: „nu mi place ideea cu cablu nicaieri." Scos peste tot, nu doar de aici:
   și cablul dintre „Fundația" și „Sistemul", și cordonul care ieșea de sub
   aparat (`s2-fire.css`). Săgeata de text (`→`) rămâne cea din pagina vie.

   Ce rămâne din ideea de mașinărie: MUFELE și LUMINILE. Un aparat are porturi
   fie că are ceva băgat în ele sau nu — portul e parte din obiect, cablul e un
   accesoriu. De aia scoaterea cablului nu lasă nimic descusut în urmă.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   MUFELE DE PE MUCHIA DIN SPATE (lângă codul de bare)
   -------------------------------------------------------------------------- */
.mufe{
  position:absolute; left:26px; bottom:24px; z-index:1;
  display:flex; gap:10px; align-items:center; pointer-events:none;
}
.mufe i{
  width:17px; height:17px; border-radius:50%;
  background:radial-gradient(circle at 50% 36%, #0A0B0C 0 4.5px, #4A4E52 5.5px, #B0AEA7 100%);
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.5), inset 0 2px 3px rgba(0,0,0,.45),
             0 1px 0 rgba(255,255,255,.6);
}
.mufe b{
  font-family:var(--mono); font-size:8px; font-weight:500; letter-spacing:.22em;
  text-transform:uppercase; color:var(--chink3); margin-left:2px;
}
@media(max-width:900px){.mufe{display:none}}

/* --------------------------------------------------------------------------
   MUCHIA DE 1px CA DEGRADEU
   O muchie făcută din patru culori de latură se rupe în colțuri. Un singur
   degradeu pe `border-box` merge continuu de jur-împrejur — de aia pare
   turnată, nu desenată. Vine după `s2-corp.css` fiindcă îl corectează.
   -------------------------------------------------------------------------- */
.aparat{
  border:1px solid transparent;
  background:
    radial-gradient(130% 80% at 20% -18%, rgba(255,255,255,.9), rgba(255,255,255,0) 58%) padding-box,
    linear-gradient(180deg, #EFEDE8 0%, #E6E4DE 40%, #D6D4CD 78%, #C9C7C0 100%) padding-box,
    linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.28) 42%, rgba(0,0,0,.26)) border-box;
}
.aparat--negru{
  background:
    radial-gradient(130% 80% at 20% -18%, rgba(255,255,255,.13), rgba(255,255,255,0) 58%) padding-box,
    linear-gradient(180deg, #212427 0%, #191C1F 42%, #121417 80%, #0D0F11 100%) padding-box,
    linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.05) 42%, rgba(0,0,0,.75)) border-box;
}

/* --------------------------------------------------------------------------
   MUCHIA DE JOS: bara de lot devine chiar muchia din spate a aparatului.
   Codul de bare si mufele erau `position:absolute` la 26px de fund — adica
   exact peste bara de lot. In loc sa le mut mai sus (si sa las un gol),
   intra IN bara: pe un aparat real, tot ce e priza sau cod sta pe aceeasi
   muchie, la rand. Un lucru in plus dispare, si desenul e mai adevarat.
   -------------------------------------------------------------------------- */
.aparat{position:relative}
.lot{display:flex; align-items:center}
.lot .codbare,.lot .mufe{position:static; flex:none}
.lot .codbare{flex-direction:row; align-items:center; gap:8px}
.lot .codbare__b{height:16px; width:88px; background-size:88px 16px}
.lot .mufe{margin-right:2px}


/* ---------------------------------------------------------------------------
   din s2-tipo.css
   --------------------------------------------------------------------------- */
/* ==========================================================================
   STUDIU 2 · SCARA DE LITERĂ, O TREAPTĂ MAI SUS                     (26-Aug)
   --------------------------------------------------------------------------
   Corpul era 16px cu proză de card la 14,2–14,8px. Pe un ecran de 1440 asta
   se citește mic. Nu se umflă totul la fel: se ridică ce se CITEȘTE și rămâne
   pe loc ce se ȘTAMPILEAZĂ.

   Cerneala tipărită pe carcasă (serii, loturi, etichete mono) e mică fiindcă
   așa e cerneala tipărită pe un aparat — dacă o mărești odată cu proza, obiectul
   se transformă înapoi în pagină web. Singura corecție acolo e la cele de 9,5px,
   care erau sub pragul de citit confortabil chiar și ca ștampilă: urcă la 10,5.

   Titlurile urcă mai mult decât proza, ca să nu se aplatizeze scara: dacă tot
   crește cu același procent, raportul rămâne identic și nu s-a schimbat nimic
   în afară de zoom. h1 la 1440 trece de la 54 la 64.
   ========================================================================== */

body{font-size:17.5px; line-height:1.6}

h1{font-size:clamp(34px,5.3vw,64px); line-height:1.0}
h2{font-size:clamp(25px,3.4vw,40px)}
h3{font-size:21px}
h4{font-size:19px}

.lede{font-size:20.5px; line-height:1.55}
.sdek{font-size:18.5px; line-height:1.58}

.card p{font-size:15.8px; line-height:1.55}
.rand__t{font-size:18.5px}
.rand__d{font-size:15.8px; line-height:1.5}
.tasta__t{font-size:18px}
.tasta__d{font-size:14.8px; line-height:1.5}
.rotativ__t{font-size:17.5px}
.rotativ__d{font-size:15px; line-height:1.5}
.intreb summary{font-size:17px}
.intreb p{font-size:16.2px; line-height:1.56}
.treapta__d{font-size:15.6px; line-height:1.5}
.treapta li{font-size:15.4px; line-height:1.5}
.treapta__u{font-size:14px}
.treapta__p{font-size:28px}
.final p{font-size:18.5px}
.final__alt{font-size:15.2px}
.pict__n{font-size:16.5px}
.bara__nav a{font-size:15.5px}

/* Ștampilele. Cresc cu jumătate de pixel, nu cu doi — ca să rămână ștampile. */
.serie{font-size:12px}
.eyebrow{font-size:11.5px}
.lbl{font-size:11px}
.card__e,.treapta__e{font-size:11px}
.segment__u{font-size:11.5px}
.pict b{font-size:10.5px}
.subsol__in,.subsol__lege{font-size:11.5px}


/* ---------------------------------------------------------------------------
   din s2-fire.css
   --------------------------------------------------------------------------- */
/* STUDIU 2 — LUMINILE DE STARE
   Fișierul s-a numit „fire și lumini". Firul a fost scos pe 26-Aug, la cererea
   lui Ali („nu mi place ideea cu cablu nicaieri"), împreună cu cablul dintre
   aparate din `s2-masina.css`. A rămas jumătatea care nu era cablu.

   Ce se pierde odată cu firul, ca să fie scris undeva: capătul liber spunea că
   aparatul e o piesă dintr-un lanț, nu o ilustrație închisă în sine. Aceeași
   frază o spun acum mufele — un port gol e tot o promisiune de legătură, doar
   că nu atârnă nimic din el.

   CAPCANA, plătită o dată și valabilă mai departe: clasa `fir` E DEJA LUATĂ.
   `panou.js:68` ștampilează `data-fir` pe ORICE `.fir` din pagină, iar
   `panou.css:515` răspunde cu `.js [data-fir]{position:relative; overflow:hidden}`
   — specificitate 0,2,0, deci bate un simplu `.fir{position:absolute}`. Nu apare
   nicio eroare: piesa rămâne `inline`, `top/left` nu se aplică, iar carcasa
   crește de la 686px la 1265px ca s-o cuprindă. Înainte de a boteza o piesă
   nouă: `grep -n "q('\.NUME')" assets/panou.js`.

   ADN-ul de mișcare al sitului, respectat la literă:
   MIȘCAREA E LUMINA CARE SE APRINDE ȘI SE STINGE. ȘASIUL NU SE MIȘCĂ NICIODATĂ.
   Ledurile clipesc, dar nu se mută. Nimic din corp nu se deplasează.
   -------------------------------------------------------------------------- */

/* LUMINILE DE STARE. Puse pe bara de lot, nu imprastiate pe carcasa.
      Regula casei tinuta la litera: godeul e CORP (gri, adancit), lumina
      dinauntru e INFORMATIE (are voie sa fie colorata). Doua, nu trei —
      a treia n-ar mai insemna nimic, ar fi doar inca un punct. */
.led{display:inline-flex; align-items:center; gap:7px; flex:none}
.led i{
  width:7px; height:7px; border-radius:50%; display:block;
  background:#2A2C2E;
  box-shadow:0 1px 0 rgba(255,255,255,.75), 0 0 0 1px var(--chrule) inset,
             0 1px 2px rgba(0,0,0,.5) inset;
  position:relative;
}
.led i::after{
  content:""; position:absolute; inset:1.5px; border-radius:50%;
  background:currentColor; box-shadow:0 0 5px 1px currentColor;
}
.led .led--on{color:var(--gn)}                    /* alimentat: nu clipeste */
.led .led--bat{color:var(--or); animation:led-bat 2.6s ease-in-out infinite}
@keyframes led-bat{0%,100%{opacity:1} 50%{opacity:.22}}

@media(prefers-reduced-motion:reduce){
  .led .led--bat{animation:none; opacity:.7}
}

/* Varianta neagra: acelasi godeu, alt finisaj. */
.aparat--negru .led i{background:#0A0B0C; box-shadow:0 1px 0 rgba(255,255,255,.10),
  0 0 0 1px var(--chrule) inset, 0 1px 2px rgba(0,0,0,.7) inset}


/* ---------------------------------------------------------------------------
   din s2-marca.css
   --------------------------------------------------------------------------- */
/* STUDIU 2 — MARCA                                          (26-Aug, revizia 2)
   „mi a placut mai mult 職人 — shokunin. «Meșter» — dar ar trebui cumva sa zica
    ceva ca un slogan... si in logo langa mode acolo cu portocaliu. si cam atat."

   REVIZIA 2, ce s-a schimbat:
   機構 (KIKŌ) A IEȘIT COMPLET — din siglă, din plăcuță, din sprite. Ali: „nu mi
   place ca scrie kiko - scoatem de tot". Nu e ascuns cu `display:none` și nu
   stă nechemat în sprite: un simbol pe care nu-l cheamă nicio pagină se
   inlinează totuși în fiecare document și e primul lucru care minte la
   următoarea citire a fișierului. Sprite-ul are acum UN singur simbol.

   A rămas 職人 (SHOKUNIN) — meșterul. Un cuvânt, trei locuri, și fiecare loc
   spune altceva, nu același lucru de trei ori:

     1. ÎN SIGLĂ, lângă MODE, portocaliu — SEMNUL. Doar semnul, fără citire.
     2. PE PLĂCUȚA DIN HERO — locul care EXPLICĂ: citirea, traducerea, sloganul.
     3. PE PLĂCUȚA DIN SUBSOL — SEMNĂTURA: semnul, sloganul, modelul. Nu repetă
        citirea; o plăcuță de pe spatele aparatului nu reexplică marca.

   SLOGANUL: «FĂ CE-ȚI PLACE. RESTUL ÎL FACE APARATUL.» Nu e ornament lângă un
   cuvânt japonez — e chiar ce zice pagina de mai jos despre ea însăși: cinci
   etape, mâna omului pe exact două (sesiunea și aprobarea). Traducerea lui 職人
   și promisiunea produsului sunt aceeași frază, de asta stau împreună: un
   shokunin nu e cel care muncește tot, e cel care ține partea care contează.

   Formula veche era «MAȘINA FACE. MEȘTERUL RĂSPUNDE.» — schimbată pe 2026-08-27
   fiindcă spunea cine e de vină, nu ce câștigă cititorul. Se scrie în DOUĂ
   locuri, care trebuie să rămână la fel: plăcuța din hero (`.plc__sl`) și
   semnătura din subsol (`.tabla__tr`, cu majuscule și `·` în loc de punct).
   Pe 27-Aug prima a fost schimbată singură, iar a doua a rămas o zi întreagă
   pe formula veche, pe toate cele 16 pagini. Dacă se mai schimbă vreodată,
   se caută sloganul în TOT site-ul, nu în pagina de unde a pornit discuția.

   PORTOCALIUL, unde are voie: `--or` (#F04E23) pe crem dă 2,2:1 — sub prag,
   aceeași cădere ca bug-ul din brandbook (2,16:1). Pe negru dă ~5,3:1. Deci
   semnul e portocaliu EXACT unde fundalul e negru: în bară și pe plăcuța din
   subsol, care de-aia trece pe anodizat negru. Regula nu e „portocaliu unde
   arată bine", e „portocaliu unde se citește".

   REGULA DE FIER: japoneza NU E TEXT nicăieri în pagină. E contur.
   `fonturi-panou.css` găzduiește fonturile local, tăiate pe `unicode-range`
   latin/latin-ext — un 職 scris ca text cade pe fontul de sistem al
   vizitatorului: alt desen pe fiecare mașină și pătrățel gol pe Windows-urile
   fără pachet japonez. Contururile vin din `scratchpad/kanji_sprite.py`, sursă
   Hiragino Sans W7 JAPONEZ — nu `Hiragino Sans GB`, care e varianta chineză
   simplificată și desenează altfel aceleași codepoint-uri. Verificat prin
   suprapunere cu textul randat de sistem, nu presupus.

   Raportul lățime/înălțime e măsurat din contur, nu din caseta em: 職人 2,144.
   Dacă se regenerează sprite-ul, se remăsoară. */

/* --- 1. În siglă: semnul, agățat de MODE -------------------------------- */
/* `.bara__jp` din treapta 1 nu se ascunde aici — a fost ȘTERS din generator
   (`var2.py`). Ascunderea ar fi mințit în două feluri: foaia asta se încarcă
   doar la F, deci în B–E semnul rămânea vizibil, iar el era TEXT — kanji cu
   fontul de sistem, fiindcă fonturile casei au `unicode-range` doar latin.
   Ce era greșit ca poziție: stătea DUPĂ `.bara__wm` dar ÎN AFARA ancorei, deci
   `margin-right:auto` de pe `.bara__marca` îl împingea lângă meniu (x≈1110 la
   1440) — semn rătăcit prin bară, nu parte din siglă. Acum e înăuntru. */

/* De ce `flex-end` și nu `center`: Ali a cerut semnul „lângă MODE", iar MODE e
   rândul DE JOS al wordmark-ului. Aliniat la bază, semnul se citește ca un
   sufix al lui MODE; centrat, ar pluti între cele două rânduri și ar deveni a
   treia coloană — exact ce era înainte, cu KIKŌ.
   De ce nu e pus ÎN rândul MODE: MODE are `calc(var(--h)*.24)` = 8,2px la
   h=34px, iar 職人 la 8px nu mai e două semne, e o pată. Trebuie să fie mai
   mare decât rândul de care atârnă, deci stă alături, nu înăuntru. */
.marca__kj{display:flex; align-self:flex-end; flex:none; margin-bottom:-1px}
.marca__kj svg{display:block; color:var(--or);
  height:calc(var(--h)*.44); width:calc(var(--h)*.44*2.144)}
/* Sub 900px bara își pierde meniul și sigla rămâne singură pe rând. Semnul
   RĂMÂNE — e marca, nu un ornament de lățime; ce se pierde e doar un pic din
   scară, ca tot lockup-ul (`--h` scade la 28px prin `panou.css`). */

/* --- 2. Plăcuța din hero: locul care explică ---------------------------- */
/* `.plc__jp` era SCRIS cu `--jp`, adică exact capcana de mai sus: pe Mac se
   vedea (are Hiragino), pe Windows fără pachet japonez ar fi ieșit pătrățel în
   mijlocul hero-ului. Trece și el pe contur. */
.plc{align-items:center; gap:16px}
.plc__jp{font-size:0; line-height:0; flex:none}
.plc__jp svg{display:block; height:26px; width:calc(26px*2.144); color:var(--chink)}
/* Coloană, nu rând: citirea și sloganul sunt două lucruri diferite (eticheta și
   promisiunea), iar pe un rând singur ar fi făcut ~560px de mono și ar fi rupt
   plăcuța la primul telefon. */
.plc__txt{display:flex; flex-direction:column; gap:5px; min-width:0}
.plc__ro{
  font-family:var(--mono); font-size:9.5px; font-weight:500; letter-spacing:.22em;
  text-transform:uppercase; color:var(--chink3);
}
/* Sloganul e rândul cel mai apăsat de pe plăcuță — e singurul care promite
   ceva. Restul plăcuței îl introduce. */
.plc__sl{
  font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:.13em;
  text-transform:uppercase; color:var(--chink); line-height:1.25;
}
/* Separatoarele de pe CARCASĂ nu sunt portocalii — vezi nota de contrast din
   antet. Pe crem, portocaliul e sub prag; înlocuitorul e cerneala carcasei o
   treaptă mai închisă decât textul. */
.plc__ro b{color:var(--chink2); font-weight:600}
@media(max-width:640px){
  .plc{gap:12px}
  .plc__jp svg{height:21px; width:calc(21px*2.144)}
  .plc__sl{font-size:11px; letter-spacing:.1em}
  .plc__ro{font-size:8.5px; letter-spacing:.18em}
}

/* --- 3. Plăcuța din subsol: semnătura ----------------------------------- */
/* De ce tocmai aici: subsolul E spatele mașinii. Pe un aparat adevărat, marca
   citibilă, modelul și revizia stau pe plăcuța de pe spate — nu pe față.
   Poartă clasele `.aparat.aparat--negru`, deci ia gratis carcasa reală din
   s2-corp.css: lumina de sus, peretele de 6px, finisajul. Neagră fiindcă acolo
   semnul are voie să fie portocaliu — și fiindcă plăcuța de identificare de pe
   spatele unui aparat de serie chiar e cea anodizată. */
/* Lățimea, a treia oară — și de data asta fără prag. Am mers 560 → 720 pe un
   raționament de compoziție („o plăcuță trebuie să rămână mai îngustă decât
   aparatul de deasupra"), iar Ali a spus a doua oară același lucru: *„asta e
   încă prea mică pentru desktop"*. Când verdictul se repetă, raționamentul e
   cel greșit — plăcuța nu se citește ca plăcuță fiindcă e îngustă, ci fiindcă
   are șuruburi în colțuri, o tăietură și un rând de model. Geometria o face
   plăcuță; lățimea o făcea doar mică.
   Deci pe desktop ține toată lățimea subsolului, iar CONȚINUTUL crește odată cu
   ea: o placă lățită cu același lettering înăuntru s-ar fi citit și mai goală
   decât înainte. Sub 1000px nu se schimbă nimic — acolo era deja potrivită. */
.tabla{
  max-width:720px; margin:0 0 30px;
  padding:23px 28px 18px; border-radius:11px;
}
@media(min-width:1000px){
  .tabla{max-width:none; padding:30px 36px 24px; border-radius:13px; margin-bottom:34px}
  .tabla__sus{gap:23px}
  .tabla__glifa{height:58px; width:calc(58px*194/147)}
  .tabla__wm b{font-size:40px}
  .tabla__wm span{font-size:12px}
  .tabla__kj{height:32px; width:calc(32px*2.144)}
  .tabla__jos{margin-top:22px; padding-top:17px; font-size:12px}
  .tabla__s{width:8px; height:8px}
  .tabla__s:nth-of-type(1){left:11px; top:11px}
  .tabla__s:nth-of-type(2){right:11px; top:11px}
  .tabla__s:nth-of-type(3){left:11px; bottom:11px}
  .tabla__s:nth-of-type(4){right:11px; bottom:11px}
}
.tabla__sus{display:flex; align-items:center; gap:19px}
.tabla__glifa{height:47px; width:calc(47px*194/147); flex:none; display:block;
  color:var(--chink)}
/* Firul dintre glifă și wordmark — aceeași articulație ca în bară, la scara
   plăcuței. Al doilea fir a dispărut odată cu a treia coloană: semnul stă acum
   lipit de wordmark, ca în siglă, nu separat de el. */
.tabla__fir{display:block; width:1px; align-self:stretch; margin:3px 0; flex:none;
  background:var(--chink); opacity:.2}
.tabla__wm{display:flex; flex-direction:column; gap:3px}
.tabla__wm b{font-weight:800; font-size:32px; letter-spacing:-.035em; line-height:.9;
  color:var(--chink)}
.tabla__wm span{font-family:var(--mono); font-weight:500; font-size:11px;
  letter-spacing:.34em; margin-right:-.34em; color:var(--chink3)}
/* Aici semnul NU stă lipit de MODE, ca în bară — stă la capătul opus.
   Motivul e ce face plăcuța: în bară semnul e parte din NUME, deci atârnă de
   nume; pe plăcuța din subsol semnul ȘTAMPILEAZĂ, iar o ștampilă stă la capăt.
   Lipit de MODE, lăsa jumătatea dreaptă a plăcuței goală (măsurat: lockup 270px
   într-o casetă de 512px) — un gol care se citea a piesă neterminată, nu a
   spațiu. Împins la dreapta, golul devine distanța dintre două ancore, iar cele
   două rânduri se aliniază: nume ↔ semn sus, promisiune ↔ model jos. */
.tabla__kj{display:block; height:26px; width:calc(26px*2.144); flex:none;
  align-self:flex-end; margin:0 0 2px auto; color:var(--or)}

/* Rândul de jos. Stă SUB o tăietură, nu lângă semn: sloganul nu e parte din
   marcă, e ce promite ea. */
.tabla__jos{
  display:flex; align-items:baseline; gap:6px 16px; flex-wrap:wrap;
  margin-top:18px; padding-top:14px; border-top:1px solid var(--chrule);
  font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.19em;
  text-transform:uppercase;
}
.tabla__tr{color:var(--chink2); margin-right:auto}
.tabla__nr{color:var(--chink3)}
.tabla__jos b{color:var(--chink3); font-weight:500}
.tabla__tr b{color:var(--chink3)}

/* Patru șuruburi, în colțuri. Plăcuța e prinsă pe toate patru fiindcă e mare și
   plată; `.plc` din hero e mică și e prinsă doar pe muchia lungă, cu două.
   Metalul lor e cel al carcasei NEGRE — un șurub crem pe o plăcuță anodizată e
   piesa care strică tot restul iluziei. */
.tabla__s{position:absolute; width:7px; height:7px; border-radius:50%;
  background:radial-gradient(circle at 38% 30%, #6E7377, #3A3E42 58%, #212427 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.10), 0 1px 2px rgba(0,0,0,.6)}
/* Slitul: o singură linie, aceeași înclinare pe toate patru. Șuruburi rotite
   diferit ar fi „realism" inventat — pe un aparat de serie sunt strânse de
   aceeași mașină. */
.tabla__s::after{content:""; position:absolute; left:1px; right:1px; top:3px; height:1px;
  background:rgba(0,0,0,.55)}
.tabla__s:nth-of-type(1){left:9px;  top:9px}
.tabla__s:nth-of-type(2){right:9px; top:9px}
.tabla__s:nth-of-type(3){left:9px;  bottom:9px}
.tabla__s:nth-of-type(4){right:9px; bottom:9px}

@media(max-width:640px){
  .tabla{padding:16px 18px 13px}
  .tabla__glifa{height:32px; width:calc(32px*194/147)}
  .tabla__wm b{font-size:22px}
  .tabla__kj{height:18px; width:calc(18px*2.144)}
  .tabla__sus{gap:12px}
  .tabla__jos{font-size:9px; letter-spacing:.16em}
}
/* Sub 460px se STRÂNGE, nu se ascunde. O încercare anterioară retrăgea semnul,
   și plăcuța rămânea cu citirea unui semn care nu mai era acolo — adică exact
   piesa pentru care există plăcuța lipsea tocmai pe ecranul pe care se intră cel
   mai des. Măsurat la 320px: rândul de sus cere 28+1+112+16+3×10 ≈ 187px, iar
   plăcuța are 248px pe dinăuntru. Încape. */
@media(max-width:460px){
  .tabla__sus{gap:10px}
  .tabla__glifa{height:28px; width:calc(28px*194/147)}
  .tabla__wm b{font-size:20px}
  .tabla__wm span{font-size:8.5px}
  .tabla__kj{height:15px; width:calc(15px*2.144)}
}


/* Meniul de sus, pe telefon. Litera din bara de sus a crescut de la 14,5 la 15,5px
   odata cu restul tipografiei — cerut, si se pastreaza. Efectul lateral, masurat la
   375px: cele cinci linkuri cer 346,9px cu distanta de 20px, iar bara ofera 339.
   Lipseau 8 pixeli, deci meniul trecea pe doua randuri si bara sarea de la 84 la
   131px inaltime. Se plateste din distanta, nu din marimea literei: cu 12px suma
   scade la 314,9 si intra pe un rand. Sub 340px tot nu incape (linkurile singure fac
   266,9) — acolo se aseaza pe doua randuri, exact ca inainte de rulaj. */
@media(max-width:420px){.bara__nav{gap:12px}}

/* --------------------------------------------------------------------------
   MARCAJUL — portocaliul iese din etichetă și devine tratament de text
   --------------------------------------------------------------------------
   Ali, 27-Aug: „cum e colorat sus «doua ore de fata ta pe luna» sa fie si «al
   doilea job». si celelalte cum ar fi «alternativele» ... cred ca se intelege
   mai bine asa, peste tot."

   Până acum portocaliul pe text exista într-un singur loc, `.tag--or`: o
   etichetă mică, condensată, cu majuscule. Ce cere Ali nu e o etichetă, e un
   MARCAJ — sintagma rămâne în propoziție, la mărimea ei, și doar primește
   fundal. Sunt două lucruri diferite și de-aia primește clasa lui.

   E FUNDAL, nu cerneală, și asta e o măsurătoare, nu o preferință: portocaliu
   pe crem dă 2,20:1, sub orice prag — deci portocaliul nu are voie să fie text
   pe șasiu. Invers, cerneala aproape neagră (`--gr`) pe portocaliu dă 5,39:1 și
   trece. Marcajul e singura formă în care portocaliul poate atinge o vorbă
   scrisă pe corpul crem. Regula asta nu se rescrie local, nicăieri.

   `<mark>`, nu un `<span>` cu clasă: elementul există în HTML exact pentru
   „scos în față ca să fie găsit", deci și cititorul de ecran află că sintagma
   e marcată. Fundalul galben implicit al browserului se rescrie aici.

   `box-decoration-break: clone` — fără el, o sintagmă care se rupe pe două
   rânduri primește colțurile rotunjite și marginile doar la capete, iar al
   doilea rând iese lipit de text. Cu el, fiecare rând e un marcaj întreg. */
mark{
  background:var(--or); color:var(--gr);
  /* Marginea e stransa dinadins: la 80px de titlu, `.26em` insemna 21px de o
     parte si de alta, iar sintagma se rupea de propozitie — parea o placuta
     lipita, nu un cuvant scos in fata. `.13em` scaleaza cu litera peste tot. */
  padding:.04em .13em .09em; border-radius:2px;
  box-decoration-break:clone; -webkit-box-decoration-break:clone;
}
/* TITLURILE NU PRIMESC MARCAJ. Decizia lui Ali, 27-Aug, după ce marcajul fusese
   pus pe câte o sintagmă din fiecare `h1` de pe site — 14 în total, scoase toate.
   Accentul portocaliu al mărcii stă pe **plăcuțele de serie** (`.serie b`, adică
   `BM—01.2 / ALTERNATIVELE`), nu pe cuvinte din propoziții: acolo e un indice
   tehnic, cu un rol de citit, iar portocaliul îl marchează ca reper. Pe un titlu,
   același portocaliu alege în locul cititorului ce e important — și alegea greșit.

   Regula, ca să nu se refacă: dacă un titlu are nevoie de accent, accentul e
   **sintagma însăși** (ordinea cuvintelor, ruptura de rând, punctul), nu un fundal.

   Ce rămâne valabil dacă marcajul reapare vreodată în proză: sintagma trebuie să
   fie scurtă (una–trei vorbe) și `nowrap` în titluri — un dreptunghi portocaliu
   tăiat în două și mutat cu un rând mai jos arată a greșeală de randare, nu a
   accent (măsurat pe patru pagini, chiar așa arăta). `box-decoration-break` de mai
   sus rămâne pentru proză, unde ruperea e normală și trebuie să arate bine. */
h1 mark,h2 mark,h3 mark{white-space:nowrap}