/* cuflorian.ro · site.css · v13 · 13 Octombrie 2026
   Singura sursă pentru paletă, fonturi și scara tipografică.
   Regulă: nicio pagină nu-și redefinește aceste token-uri în <style>; ce e specific paginii rămâne inline.
   La orice modificare aici: crește ?v= în toate paginile (cache).
   v6: fonturile sunt găzduite local (/fonts/, woff2, latin + latin-ext), nu la Google:
   două conexiuni externe mai puțin în calea critică și niciun IP de vizitator trimis la Google.
   v7: butonul din header pe mobil 12px (era 10px).
   v8: linkurile legale din footer se așază pe două rânduri pe mobil (la 320px ieșeau din pagină cu 46px), zonă de atingere 28px.
   v9: wordmark-ul din footer în Besley 700, ca în header (era 400, cu punctul la 700); adresa de email cu litere mici peste tot; „Punct de vedere” din footer în 500, crem.
   v10: punctul din wordmark-ul din footer coborât optic cu .05em (1px).
   v11: textul selectat pe terracotta cu litere crem (4,92:1), cursorul de scriere terracotta (7 Octombrie 2026).
   v12: mod întunecat automat, doar când sistemul vizitatorului e pe întunecat (prefers-color-scheme), 8 Octombrie 2026,
   decizia lui Florian („site-ul e prea luminos pentru ochi”). Aspectul de bază rămâne crem. Aceeași paletă, inversată;
   benzile închise își repun local culorile închise (--ink = fundalul benzii, --paper = textul), ca să nu devină crem.
   v13: hârtie mai închisă (#E6DFD1, era #F3EFE6) și terracotta de site #9E3D1B (#B04520 coboară la 4,26:1 pe noua hârtie;
   brand kit-ul rămâne #B04520); modul întunecat pe sepia #211A14 (era #17150F), 13 Octombrie 2026, alegerile lui Florian (1 și C). */

/* fonturi · self-hosted din 10 Septembrie 2026 · sursa: Google Fonts prin google-webfonts-helper, subset latin + latin-ext */
@font-face { font-family: "Besley"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/besley-v22-latin_latin-ext-regular.woff2") format("woff2"); }
@font-face { font-family: "Besley"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/besley-v22-latin_latin-ext-500.woff2") format("woff2"); }
@font-face { font-family: "Besley"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/besley-v22-latin_latin-ext-600.woff2") format("woff2"); }
@font-face { font-family: "Besley"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/besley-v22-latin_latin-ext-700.woff2") format("woff2"); }
@font-face { font-family: "Besley"; font-style: italic; font-weight: 400; font-display: swap; src: url("/fonts/besley-v22-latin_latin-ext-italic.woff2") format("woff2"); }
@font-face { font-family: "Besley"; font-style: italic; font-weight: 500; font-display: swap; src: url("/fonts/besley-v22-latin_latin-ext-500italic.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/hanken-grotesk-v12-latin_latin-ext-regular.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/hanken-grotesk-v12-latin_latin-ext-500.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/hanken-grotesk-v12-latin_latin-ext-600.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/hanken-grotesk-v12-latin_latin-ext-700.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/ibm-plex-mono-v20-latin_latin-ext-regular.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/ibm-plex-mono-v20-latin_latin-ext-500.woff2") format("woff2"); }

:root {
  /* paletă · Ink Meridian */
  --paper:       #E6DFD1;
  --paper2:      #DED7C8;
  --ink:         #17150F;
  --ink2:        #211E16;
  --soft:        #5A554A;
  --accent:      #9E3D1B;   /* 5,05:1 pe paper, 4,67:1 pe paper2 */
  --accent-d:    #8E3617;   /* hover */
  --accent-dark: #D9714A;   /* text mic terracotta pe ink: 5,57:1 */
  --line:        #CBC3B2;
  --label:       var(--soft);   /* etichetele mono (eyebrow, numerotari, „Poarta”): gri; terracotta ramane pentru ce spune ceva. Revenire: var(--accent) */

  /* fonturi */
  --serif: "Besley", Georgia, serif;
  --sans:  "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, monospace;

  /* scara tipografică · aceeași pe toate paginile */
  --t-h1:    clamp(32px, 5vw, 52px);
  --t-h2:    clamp(26px, 3.5vw, 32px);
  --t-h3:    22px;
  --t-body:  18px;
  --t-small: 15px;
  --t-label: 12px;
  --lh-body: 1.65;

  --maxw: 1280px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
[id] { scroll-margin-top: 96px; }
/* cuvintele cu cratimă nu se rup la cratimă (regulă Florian, 9 Sept 2026); învelite de PFA/files/nw.py */
.nw { white-space: nowrap; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: var(--accent); color: var(--paper); }
input, textarea, select { caret-color: var(--accent); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ── Carcasa comună (10 Septembrie 2026): header, footer, lățimi. Aceeași pe toate paginile;
   paginile secundare pun textul de citit într-o coloană .col în interiorul carcasei. ── */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 40px; }
.col  { max-width: 720px; margin: 0 auto; }

.mast { border-bottom: 2px solid var(--ink); position: sticky; top: 0; z-index: 60; background: var(--paper); }
.mast-in { display: flex; align-items: center; justify-content: space-between; padding: 18px 40px; max-width: var(--maxw); margin: 0 auto; gap: 24px; }
.brand { font-family: var(--serif); font-weight: 700; font-size: 26px; letter-spacing: -.01em; }
.brand b { color: var(--accent); }
.mast-meta { font-family: var(--mono); font-size: var(--t-label); letter-spacing: .14em; text-transform: uppercase; color: var(--soft); white-space: nowrap; }
.mast-cta { font-family: var(--mono); font-size: var(--t-label); letter-spacing: .12em; text-transform: uppercase; border: 1.5px solid var(--ink); padding: 12px 20px; border-radius: 2px; transition: .2s var(--ease); white-space: nowrap; }
.mast-cta:hover { background: var(--ink); color: var(--paper); }

.site-foot { padding: 36px 0 40px; background: var(--ink); color: #b8b1a3; border-top: 1px solid #2b2822; }
.foot-in { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 14px; font-family: var(--mono); font-size: var(--t-label); letter-spacing: .08em; text-transform: uppercase; }
.foot-in .fb { font-family: var(--serif); font-weight: 700; font-size: 20px; line-height: 1; color: var(--paper); text-transform: none; letter-spacing: -.01em; }   /* aceeași greutate ca wordmark-ul din header și din brand kit (28 Sept 2026) */
.foot-in .fb b { color: var(--accent); position: relative; top: .05em; }   /* corecție optică: pe cerneală punctul pare ridicat deși stă pe linia de bază; coborât 1px, doar în footer (28 Sept 2026) */
.foot-legal { display: flex; gap: 16px; }
.foot-legal a { color: #b8b1a3; transition: color .2s; }
.foot-legal a:hover { color: var(--paper); }
/* „Punct de vedere” iese puțin în evidență: Plex Mono 500 (fața încărcată; 700 ar fi bold sintetizat) și crem (28 Sept 2026) */
.foot-legal a[href*="/pov/"] { font-weight: 500; color: var(--paper); }
.site-foot a[href^="mailto"] { text-decoration: underline; text-underline-offset: 3px; }
/* adresa de email rămâne cu litere mici și în etichetele mono cu majuscule (28 Sept 2026) */
a[href^="mailto:"] { text-transform: none; letter-spacing: .02em; }

@media (max-width: 900px) {
  .wrap, .mast-in { padding-left: 24px; padding-right: 24px; }
  .mast-meta { display: none; }
  .site-foot { padding: 28px 0 36px; }
  .foot-in { gap: 12px; }
  .foot-in .fb { width: 100%; margin-bottom: 4px; }
}
@media (max-width: 520px) {
  .mast-in { gap: 12px; }
  .foot-legal { flex-wrap: wrap; gap: 8px 16px; }
  .foot-legal a { display: inline-block; padding: 4px 0; }
  .mast-cta { padding: 0 12px; font-size: var(--t-label); letter-spacing: .06em; min-height: 44px; display: inline-flex; align-items: center; }   /* 12px, nu 10px (27 Sept 2026): 70% din vizite sunt pe mobil; încape la 320px */
}

/* ── Mod întunecat automat (v12, 8 Octombrie 2026) ──
   Se aplică doar când telefonul sau calculatorul vizitatorului e pe întunecat. Inversează paleta: --paper devine
   fundalul închis al paginii, --ink textul crem. Terracotta e una singură, #D9714A (5,24:1 pe fundal; #B04520 ar
   coborî la 3,23:1, sub prag pentru textul mic). Benzile închise (subsolul aici, restul în pagini) își repun local
   --ink pe fundalul benzii și --paper pe text; banda e cu o treaptă mai deschisă decât pagina. */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --paper:       #211A14;
    --paper2:      #2A221B;
    --ink:         #E6DACA;   /* 12,5:1 pe paper */
    --ink2:        #D4C7B4;
    --soft:        #AC9F8E;   /* 6,6:1 pe paper */
    --accent:      #D9714A;   /* 5,24:1 pe paper */
    --accent-d:    #E58A64;   /* hover */
    --accent-dark: #D9714A;
    --line:        #40362C;
  }
  .mast { border-bottom-color: var(--line); }
  .site-foot { --ink: #2C241C; --paper: #E6DACA; }
}