/* ---------------------------------------------------------------------------
   Dopuna runde 4 — prikazno pismo ide na "swap", telo teksta ostaje "optional".

   U rundi 4 su oba pisma stavljena na "optional" jer je izmereno 0,147 CLS, i
   tada je uzrok pripisan prikaznom pismu. Ponovljeno merenje (tools/cls4b.py,
   mobilni, spori 4G, 4x sporiji procesor, woff2 vestacki zakasnjen 4 s da se
   zamena pisma sigurno desi posle iscrtavanja) pokazuje da to nije tacno:

     prikazno swap + telo optional ->  0,0000   (kontrola sa kasnjenjem: 0,0004)
     prikazno swap + telo swap     ->  0,1471   DIV.page-hero__inner dy=+60

   Pomeraj daje iskljucivo TELO teksta: kada Manrope stigne, uvodni pasus se
   prelomi u jedan red manje, baner se skrati i sve ispod skoci za 60 px. To je
   isti onaj potpis od 0,147 iz runde 4. Prikazno pismo prelom ne menja — naslovi
   su kratki u odnosu na svoj prostor.

   Zato: prikazno pismo sme "swap" (i treba, da se naslov vidi u pravom pismu i
   pri prvoj poseti — dokaz u qa/round4/font-shots/), a telo teksta ostaje
   "optional" jer bi sa "swap" CLS bio 7x iznad dozvoljenog.
   --------------------------------------------------------------------------- */
/* Ultimate Design — Design tokens Concept: "Precision Film Lab". Colors sampled from the client logo. */

@font-face {
font-family: "Big Shoulders Display"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../assets/fonts/bigshoulders-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face {
font-family: "Big Shoulders Display"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../assets/fonts/bigshoulders-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face {
font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: optional; src: url("../assets/fonts/manrope-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face {
font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: optional; src: url("../assets/fonts/manrope-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* ---------------------------------------------------------------------------
   Metricki uskladjena rezervna pisma. Dok se web font skida, tekst se crta
   rezervnim; size-adjust skalira rezervno pismo da zauzme istu sirinu, pa
   zamena ne pomera prelom. Novih zahteva nema — local() uzima pismo koje je
   vec na uredjaju.

   TELO TEKSTA (104%) — iz merenja sirine. tools/fontratio.py prolazi svih 26
   stranica i za svaki element koji pismo stvarno koristi meri sirinu BAS tog
   teksta, u tom stepenu i toj debljini, u oba pisma: Manrope / Segoe UI,
   2.707 elemenata, medijana 1,042. Telo je na font-display: optional, pa
   rezervno pismo za to ucitavanje ostaje do kraja i jedino je bitno da zauzme
   isti prostor — a to je tacno ono sto odnos sirina meri.

   PRIKAZNO PISMO (96%) — iz merenja CLS-a, jer se ta dva merenja ne slazu.
   Odnos sirina za prikazno pismo je 0,88 (naslovi >= 28 px, n=318), ali kad se
   izmeri sta se STVARNO desi pri zameni pisma (tools/cls4b.py, mobilni, spori
   4G, woff2 zadrzan 4 s da se zamena sigurno desi posle iscrtavanja, 8
   stranica), ispada suprotno:

     size-adjust:  80%    88%    92%    94%    96%    98%   100%
     najgori CLS: 0,0341 0,0341 0,0004 0,0003 0,0000 0,0000 0,0000

   Od 96% navise je ravno na nuli — dakle nije rec o slucajnoj vrednosti nego o
   platou. Uzeta je najmanja vrednost sa tog platoa. Merenje ima prednost nad
   racunom: racun gleda samo sirinu, a pomeraj pravi i visina reda.
   (U rundi 4 je ovde stajalo 93,4%, izmereno na jednom uzorku — po oba
   merenja pogresno.)
   --------------------------------------------------------------------------- */
@font-face {
font-family: "Big Shoulders Fallback"; font-style: normal; font-weight: 100 900;
src: local("Arial Narrow"), local("Haettenschweiler"); size-adjust: 96%; }
@font-face {
font-family: "Manrope Fallback"; font-style: normal; font-weight: 200 800;
src: local("Segoe UI"), local("Helvetica Neue"), local("Arial"); size-adjust: 104%; }
:root { /* --- Brand palette (sampled from ultimate-design-logo.png) --- */ --plum-900: #17101a; --plum-800: #231821; --plum-600: #463a48; --mauve-400: #7c707e; --silver-300: #c5c4c5; --paper-100: #f0f0f0; --gold-300: #f8e966; --gold-500: #efd417; --gold-700: #c89f08; --ink: #000000; /* --- Semantic surface / text (dark canvas is the default) --- */ --bg: var(--plum-900); --surface: var(--plum-800); --surface-raised: #2c2030; --line: var(--plum-600); --line-soft: rgba(124, 112, 126, 0.28); --text: #ffffff; --text-muted: var(--silver-300); --text-dim: #a49ba6; --accent: var(--gold-500); --on-accent: var(--ink); --gold-grad: linear-gradient(180deg, var(--gold-300) 0%, var(--gold-500) 52%, var(--gold-700) 100%); --danger: #ff6b6b; --ok: #7ddc8a; /* --- Spacing: 4px base grid --- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px; --s-32: 128px; --section-y: clamp(64px, 9vw, 128px); /* --- Layout --- */ --container: 1320px; --gutter: clamp(16px, 4vw, 40px); /* --- Radii: precise, print-like. Round only for FABs/chips. --- */ --r-frame: 2px; --r-card: 4px; --r-chip: 999px; --r-fab: 50%; /* --- Type scale (fluid) --- */ --font-display: "Big Shoulders Display", "Big Shoulders Fallback", "Arial Narrow", "Haettenschweiler", sans-serif; --font-text: "Manrope", "Manrope Fallback", "Segoe UI", system-ui, -apple-system, Arial, sans-serif; --t-display: clamp(2.75rem, 8.2vw, 6.5rem); --t-h1: clamp(2.25rem, 6vw, 4.5rem); --t-h2: clamp(1.875rem, 4.4vw, 3.25rem); --t-h3: clamp(1.375rem, 2.6vw, 1.875rem); --t-h4: clamp(1.125rem, 1.8vw, 1.375rem); --t-body: clamp(1rem, 0.96rem + 0.2vw, 1.125rem); --t-small: 0.9375rem; --t-xs: 0.8125rem; --lh-display: 0.92; --lh-head: 1.06; --lh-body: 1.65; --measure: 68ch; /* --- Elevation --- */ --sh-1: 0 1px 2px rgba(0, 0, 0, 0.4); --sh-2: 0 6px 20px rgba(0, 0, 0, 0.35); --sh-3: 0 18px 50px rgba(0, 0, 0, 0.5); --sh-gold: 0 8px 28px rgba(239, 212, 23, 0.22); /* --- Motion --- */ --e-out: cubic-bezier(0.22, 1, 0.36, 1); --e-in: cubic-bezier(0.55, 0, 1, 0.45); --e-io: cubic-bezier(0.65, 0, 0.35, 1); --d-fast: 160ms; --d-base: 260ms; --d-slow: 420ms; /* --- Fixed chrome (shared by AI button + back-to-top; see 4.5) --- */ --tabbar-h: 64px; --header-h: 56px; --fab-size: 56px; --fab-inset: 16px; --fab-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + var(--fab-inset)); /* --- z-index scale --- */ --z-base: 0; --z-raised: 10; --z-sticky: 40; --z-header: 60; --z-tabbar: 70; --z-fab: 80; --z-sheet: 90; --z-lightbox: 100; --z-preloader: 120; }

@media (min-width: 1024px) {
:root { --header-h: 72px; --fab-inset: 24px; --fab-bottom: 24px; }
}

/* Paper sections: a printed sheet laid on a dark table. */
.on-paper { --bg: var(--paper-100); --surface: #ffffff; --surface-raised: #ffffff; --line: #d3d2d4; --line-soft: rgba(35, 24, 33, 0.14); --text: var(--plum-900); --text-muted: #4a3f4c; --text-dim: #6c626e; background: var(--paper-100); color: var(--text); }