/* ============================================================
   SLKTVES — Brand foundation
   Source of truth: SLKTVES-GUIDES.pdf + slktves.com
   Fonts are PROPOSED free substitutes for the licensed brand
   faces (Merta Sans -> Hanken Grotesk, Migra -> Newsreader).
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,200..800;1,6..72,200..600&display=swap');

/* Merta Sans — real brand face (provided) */
@font-face{font-family:'Merta Sans';font-weight:200;font-style:normal;font-display:swap;src:url('fonts/mertasans-extralight.ttf') format('truetype')}
@font-face{font-family:'Merta Sans';font-weight:300;font-style:normal;font-display:swap;src:url('fonts/mertasans-light.ttf') format('truetype')}
@font-face{font-family:'Merta Sans';font-weight:400;font-style:normal;font-display:swap;src:url('fonts/mertasans-regular.ttf') format('truetype')}
@font-face{font-family:'Merta Sans';font-weight:400;font-style:italic;font-display:swap;src:url('fonts/mertasans-italic.ttf') format('truetype')}
@font-face{font-family:'Merta Sans';font-weight:500;font-style:normal;font-display:swap;src:url('fonts/mertasans-medium.ttf') format('truetype')}
@font-face{font-family:'Merta Sans';font-weight:600;font-style:normal;font-display:swap;src:url('fonts/mertasans-semibold.ttf') format('truetype')}
@font-face{font-family:'Merta Sans';font-weight:700;font-style:normal;font-display:swap;src:url('fonts/mertasans-bold.ttf') format('truetype')}
@font-face{font-family:'Merta Sans';font-weight:800;font-style:normal;font-display:swap;src:url('fonts/mertasans-extrabold.ttf') format('truetype')}
@font-face{font-family:'Merta Sans';font-weight:900;font-style:normal;font-display:swap;src:url('fonts/mertasans-black.ttf') format('truetype')}

:root{
  /* Primary (from guide) */
  --ink:#101111;        /* near-black */
  --paper:#FDFEFF;      /* near-white */

  /* Ink steps */
  --ink-2:#1a1b1b;
  --ink-3:#26282a;
  --ink-line:#33373a;
  --paper-2:#f1f3f6;
  --paper-3:#e7ebf1;

  /* Secondary pastel accents (from guide) */
  --blue:#A8CCFD;       /* primary accent — periwinkle */
  --mist:#BFD3F7;
  --sky:#CBDDEB;
  --lav:#D0D3F1;
  --fog:#DCE7F3;

  --muted:#8b9096;
  --muted-d:#6c7177;

  --sans:'Merta Sans', system-ui, sans-serif;
  --serif:'Newsreader', Georgia, serif;

  --ease:cubic-bezier(.22,1,.36,1);       /* refined ease-out */
  --ease-io:cubic-bezier(.65,.05,.36,1);
  --maxw:1320px;
}

*{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{margin:0;font-family:var(--sans);background:var(--ink);color:var(--paper)}
::selection{background:var(--blue);color:var(--ink)}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p{margin:0}

/* Reusable atoms ------------------------------------------------ */
.eyebrow{font-size:12px;letter-spacing:.22em;text-transform:uppercase;font-weight:600}
.serif{font-family:var(--serif)}
.pill{display:inline-flex;align-items:center;gap:.6em;padding:.85em 1.5em;border-radius:999px;
  font-weight:600;font-size:15px;cursor:pointer;border:none;transition:transform .5s var(--ease),background .4s}
.pill-accent{background:var(--blue);color:var(--ink)}
.pill-accent:hover{background:#fff}
.pill-ghost{background:transparent;color:var(--paper);border:1px solid var(--ink-line)}
.pill-ghost:hover{border-color:var(--blue);color:var(--blue)}