/* ==========================================================================
   ZAO — Base: reset, document, typography, blueprint texture
   ========================================================================== */

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 12px);
}
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  font-family:var(--f-body);
  font-size:var(--step-0);
  line-height:1.6;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  position:relative;
  font-feature-settings:"kern" 1;
}

/* --- Radiant thermal base: heat rises from the floor (bottom) over a faint
   screed grid. The warmth IS the theme — underfloor heating. --------------- */
body::before{
  content:"";
  position:fixed; inset:0;
  z-index:-2;
  pointer-events:none;
  background-color:var(--paper);
  /* screed grid (faint) + radiant heat blooming up from the bottom edge */
  background-image:
    var(--heat-glow),
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 100% 100%, 30px 30px, 30px 30px;
  background-position: center bottom, center, center;
  background-attachment: fixed;
}
/* Film/paper grain via SVG turbulence — tactile, near-zero cost. */
body::after{
  content:"";
  position:fixed; inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.4;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}
/* On the dark bench theme, multiply-grain vanishes; overlay keeps the texture. */
body.theme-pcb::after{ mix-blend-mode:overlay; opacity:.22; }

img,svg,video,canvas{ display:block; max-width:100%; }
img{ height:auto; }

a{ color:inherit; text-decoration:none; }
button,input,textarea,select{ font:inherit; color:inherit; }
button{ cursor:pointer; background:none; border:none; }

:focus-visible{
  outline:2px solid var(--blue);
  outline-offset:2px;
  border-radius:1px;
}

::selection{ background:var(--red); color:#fff; }

/* --- Typography ---------------------------------------------------------- */
h1,h2,h3,h4{
  font-family:var(--f-display);
  font-weight:700;
  line-height:1.04;
  letter-spacing:-.02em;
  color:var(--ink);
  text-wrap:balance;
  font-variation-settings:'wght' 700, 'opsz' 40;
}
h1{ font-size:var(--step-4); }
h2{ font-size:var(--step-3); }
h3{ font-size:var(--step-1); letter-spacing:-.01em; }
p{ text-wrap:pretty; }

strong{ font-weight:700; color:var(--ink); }

/* Monospace "field label" — the recurring technical-doc signature */
.mono,.eyebrow,.spec-label{ font-family:var(--f-mono); }
.eyebrow{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--f-mono);
  font-size:var(--step--2);
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink-3);
}
.eyebrow::before{
  content:"";
  width:24px; height:2px; border-radius:2px;
  background:var(--thermal);
  flex:none;
}

/* --- Layout helpers ------------------------------------------------------ */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:clamp(3.5rem,9vw,7rem); }
.section--tight{ padding-block:clamp(2.5rem,6vw,4.5rem); }

/* A framed "sheet" — like a page torn from an engineering notebook */
.sheet{
  position:relative;
  background:var(--paper-2);
  border:1px solid var(--line);
  box-shadow:var(--shadow-1);
}

/* Crosshair registration mark — decorative technical signature, reusable */
.crosshair{ position:relative; }
.crosshair::before,.crosshair::after{
  content:""; position:absolute; background:var(--line-2); pointer-events:none;
}
.crosshair::before{ width:11px; height:1px; }
.crosshair::after{ width:1px; height:11px; }
.crosshair--tl::before{ top:-1px; left:-5px; }
.crosshair--tl::after{ top:-6px; left:-1px; }

/* visually-hidden but accessible */
.vh{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* Skip link */
.skip{
  position:absolute; left:8px; top:-60px; z-index:200;
  background:var(--ink); color:var(--paper);
  padding:.6rem 1rem; border-radius:var(--radius);
  font-family:var(--f-mono); font-size:.85rem;
  transition:top .2s var(--ease);
}
.skip:focus{ top:8px; }

/* --- Language toggle helpers (RO default; body.en swaps) ----------------- */
[data-lang="en"]{ display:none; }
body.en [data-lang="ro"]{ display:none; }
body.en [data-lang="en"]{ display:inline; }

/* Prevent FOUC of hidden fades before JS: only hide when .js present */

/* keep hyphenated words unbroken in display headlines */
.nbh{ white-space:nowrap; }