/* ============================================================
   TOKENS + BASE RESET + UTILS
   Auto-extracted from index.html (single source of truth).
   Edit here; index.html only links these files.
   ============================================================ */
:root {

    --paper:      #F5F1ED;
    --paper-hi:   #FBF8F3;
    --paper-lo:   #EDE7DD;
    --paper-card: #F9F5EF;


    --ink:        #1B1714;
    --ink-mid:    #3D332C;
    --ink-soft:   rgba(27, 23, 20, 0.62);
    --ink-faint:  rgba(27, 23, 20, 0.7);
    --hairline:   rgba(27, 23, 20, 0.12);
    --hairline-2: rgba(27, 23, 20, 0.20);


    --navy:       #14315B;
    --navy-deep:  #0A1F3D;
    --navy-soft:  rgba(20, 49, 91, 0.08);


    --oxblood:    #bb0d29;
    --oxblood-d:  #8a0820;


    /* Cormorant zostaje WYŁĄCZNIE dla brandu nav "Entropic" (hardcoded w .nav_brand_word).
       --serif / --sans-d / --sans = Exo 2 - wybrana czcionka strony. */
    --serif:      "Exo 2", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --sans-d:     "Exo 2", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --sans:       "Exo 2", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --mono:       "JetBrains Mono", "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace;

    /* Wysokość nav (deterministyczna, NIE mierzona). Padding nav_inner 18+18 + max child 36-44 = 76-80.
       Wybieramy 88px jako stabilny baseline pasujący do desktop i mobile (mobile nav_inner 14+14). */
    --nav-h: 88px;
}

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

html, body {
    margin: 0;
    padding: 0;
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.55;
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {

    background:
        radial-gradient(ellipse 60% 40% at 70% 0%, rgba(255, 252, 246, 0.7) 0%, transparent 60%),
        radial-gradient(ellipse 80% 50% at 0% 100%, rgba(237, 231, 221, 0.55) 0%, transparent 65%),
        var(--paper);
    min-height: 100vh;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0.35;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.11 0 0 0 0 0.09 0 0 0 0 0.08 0 0 0 0.05 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    background-size: 160px 160px;
}

img, svg { display: block; max-width: 100%; }

a {
    color: var(--ink);
    text-decoration: none;
    transition: color 200ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }

.serif { font-family: var(--serif); font-style: normal; font-variation-settings: "opsz" 144; font-weight: 400; }
.sans-d { font-family: var(--sans-d); font-weight: 700; letter-spacing: -0.01em; }
.mono-eyebrow {
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--navy);
}

.hero .mono-eyebrow,
.mono-eyebrow.hero_eyebrow { color: #E89882; }

.page {
    position: relative;
    z-index: 2;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 48px;
}