/* ==========================================================
   Base – design tokens, reset, typography, utilities
   ========================================================== */
:root{
  /* Color: names come from the subject, not from a palette generator */
  --porcelain:#EDF0EE;   /* page ground: cool, clinical, calm */
  --paper:#F8F9F7;       /* raised surfaces */
  --ink:#2B2030;         /* text: aubergine-black */
  --ink-soft:#5F5565;    /* secondary text */
  --rose:#B83A62;        /* the one action colour: laser pulse */
  --rose-deep:#9A2D50;   /* pressed / hover */
  --skin:#EBCDBF;        /* warm field, used for zones and the hero */
  --line:#CBD3CF;        /* hairlines */

  /* Type: Spectral (voice) + Onest (information). Both carry Cyrillic. */
  --f-display:'Spectral','Georgia','Times New Roman',serif;
  --f-text:'Onest','Segoe UI','Helvetica Neue',Arial,sans-serif;
  /* scale 1.25 */
  --t-s:.875rem; --t-0:1rem; --t-1:1.25rem; --t-2:1.563rem;
  --t-3:1.953rem; --t-4:clamp(2.4rem,4.2vw,3.05rem); --t-5:clamp(2.7rem,6.4vw,4.9rem);

  /* Space (4px base) */
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem; --s6:2rem; --s7:3rem; --s8:4.5rem; --s9:7rem;

  /* Radius: three roles only */
  --r-ctl:999px;  /* buttons */
  --r-surface:20px; /* large surfaces */
  --r-icon:50%;   /* icon wells */

  --wrap:1160px;
  --ease:cubic-bezier(.3,.7,.2,1);
  --ease-premium:cubic-bezier(.05,.7,.1,1); /* entrances, reveals */
  --ease-float:cubic-bezier(.4,0,.2,1);      /* ambient, looping */
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:5rem}
body{margin:0;background:var(--porcelain);color:var(--ink);font:400 var(--t-0)/1.65 var(--f-text);-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{font-family:var(--f-display);font-weight:300;line-height:1.08;letter-spacing:-.015em;margin:0}
h2{font-size:var(--t-4)}
h3{font-size:var(--t-2);font-weight:400;letter-spacing:-.01em}
p{margin:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--s5)}
.measure{max-width:56ch}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:focus-visible{outline:2px solid var(--rose);outline-offset:3px;border-radius:6px}

/* Icons: 24 grid, 1.5 stroke, round caps. One family, never filled. */
.i{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* Zone icons: Healthicons (CC0) and Phosphor Light (MIT), filled-outline paths */
.ic{width:30px;height:30px;fill:currentColor;flex:none}