/* purplemon · UX prototyp · sdílený základ (tokeny, mřížka, typografie)
   Nadpisy: Objektiv Mk1 (licence [OVĚŘIT]). V náhledech náhradní Figtree 800 (OFL), viz ux-spec.md §6. */
@font-face{font-family:"PM Head Fallback";src:url(fonts/Figtree-Variable.ttf) format("truetype");font-weight:300 900;font-display:swap}
@font-face{font-family:"PM Roboto";src:local("Roboto"),url(fonts/Roboto-Variable.ttf) format("truetype");font-weight:100 900;font-display:swap}
@font-face{font-family:"Material Symbols Rounded";src:url(fonts/MaterialSymbolsRounded-subset.woff2) format("woff2");font-weight:300;font-display:block}
:root{
  --bg:#000000; --surface:#151917; --fg:#FFFFFF; --fg2:#D5D7D6; --fg3:#8A8D8C;
  --line:rgba(213,215,214,.16); --line2:rgba(213,215,214,.42);
  /* jen černobíle (Petr, 22. 10.): bývalá červená a modrá nahrazeny šedou škálou; --red/--blue zůstávají jen kvůli kompatibilitě */
  --accent:#FFFFFF; --red:var(--accent); --blue:#8A8D8C;
  --f-head:"Objektiv Mk1","PM Head Fallback",system-ui,sans-serif;
  --f-body:"PM Roboto","Roboto",Arial,sans-serif;
  --w-head:800;
  /* mřížka */
  --cols:12; --gut:24px; --mar:64px; --max:1440px;
  /* mezery (4px základ) */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;--s10:128px;--s11:160px;
  --sec:var(--s11);
  /* typografická škála (desktop) */
  --t-display:96px; --lh-display:1.0;
  --t-h1:80px; --lh-h1:1.02;
  --t-h2:48px; --lh-h2:1.08;
  --t-h3:24px; --lh-h3:1.25;
  --t-lead:22px; --lh-lead:1.55;
  --t-body:17px; --lh-body:1.65;
  --t-small:14px; --lh-small:1.5;
  --t-label:13px;
  --hdr:80px;
}
@media (max-width:1199px){:root{--cols:8;--mar:40px;--sec:var(--s10);--t-display:72px;--t-h1:64px;--t-h2:40px}}
@media (max-width:767px){:root{--cols:4;--gut:16px;--mar:20px;--sec:var(--s9);--t-display:44px;--lh-display:1.04;--t-h1:40px;--lh-h1:1.06;--t-h2:30px;--lh-h2:1.12;--t-h3:20px;--lh-h3:1.3;--t-lead:18px;--lh-lead:1.55;--t-body:16px;--lh-body:1.62;--hdr:64px}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--hdr) + 16px)}
body{margin:0;font-family:var(--f-body);font-size:var(--t-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
h1,h2,h3,h4{font-family:var(--f-head);font-weight:var(--w-head);margin:0;letter-spacing:-.015em}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--mar)}
.grid{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));column-gap:var(--gut)}
.ico{font-family:"Material Symbols Rounded";font-weight:300;font-style:normal;font-size:24px;line-height:1;display:inline-block;vertical-align:middle;letter-spacing:normal;text-transform:none;white-space:nowrap;-webkit-font-feature-settings:"liga";font-feature-settings:"liga";font-variation-settings:"FILL" 0,"wght" 300,"GRAD" 0,"opsz" 24}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:var(--mar);top:-60px;z-index:100;padding:12px 16px}
.skip:focus{top:12px}
.display{font-size:var(--t-display);line-height:var(--lh-display);letter-spacing:-.025em}
.h1{font-size:var(--t-h1);line-height:var(--lh-h1);letter-spacing:-.022em}
.h2{font-size:var(--t-h2);line-height:var(--lh-h2);letter-spacing:-.018em}
.h3{font-size:var(--t-h3);line-height:var(--lh-h3);letter-spacing:-.005em}
.lead{font-size:var(--t-lead);line-height:var(--lh-lead)}
.small{font-size:var(--t-small);line-height:var(--lh-small)}
.label{font-size:var(--t-label);line-height:1.4;letter-spacing:.08em;text-transform:uppercase;font-weight:500}
.measure{max-width:64ch}
/* ikony bez textu v DOM (SEO audit S1, 30. 10.): <span class="ico" data-i="arrow_forward"> */
.ico::before{content:attr(data-i)}