/* ============================================================
   Self-hosted fonts (Newsreader + Hanken Grotesk)
   Downloaded from Google Fonts, served from assets/fonts/
   ============================================================ */

/* Hanken Grotesk — 400 */
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/hanken-grotesk-normal-400-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: 'Hanken Grotesk'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/hanken-grotesk-normal-400-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: 'Hanken Grotesk'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/hanken-grotesk-normal-400-vietnamese.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/hanken-grotesk-normal-400-cyrillic-ext.woff2') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }

/* Hanken Grotesk — 500 */
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url('../assets/fonts/hanken-grotesk-normal-500-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: 'Hanken Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url('../assets/fonts/hanken-grotesk-normal-500-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: 'Hanken Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url('../assets/fonts/hanken-grotesk-normal-500-vietnamese.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url('../assets/fonts/hanken-grotesk-normal-500-cyrillic-ext.woff2') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }

/* Hanken Grotesk — 600 */
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 600; font-display: swap; src: url('../assets/fonts/hanken-grotesk-normal-600-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: 'Hanken Grotesk'; font-style: normal; font-weight: 600; font-display: swap; src: url('../assets/fonts/hanken-grotesk-normal-600-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: 'Hanken Grotesk'; font-style: normal; font-weight: 600; font-display: swap; src: url('../assets/fonts/hanken-grotesk-normal-600-vietnamese.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 600; font-display: swap; src: url('../assets/fonts/hanken-grotesk-normal-600-cyrillic-ext.woff2') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }

/* Newsreader — normal 400 */
@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/newsreader-normal-400-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: 'Newsreader'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/newsreader-normal-400-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: 'Newsreader'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/newsreader-normal-400-vietnamese.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }

/* Newsreader — normal 500 */
@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 500; font-display: swap; src: url('../assets/fonts/newsreader-normal-500-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: 'Newsreader'; font-style: normal; font-weight: 500; font-display: swap; src: url('../assets/fonts/newsreader-normal-500-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: 'Newsreader'; font-style: normal; font-weight: 500; font-display: swap; src: url('../assets/fonts/newsreader-normal-500-vietnamese.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }

/* Newsreader — italic 400 */
@font-face { font-family: 'Newsreader'; font-style: italic; font-weight: 400; font-display: swap; src: url('../assets/fonts/newsreader-italic-400-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: 'Newsreader'; font-style: italic; font-weight: 400; font-display: swap; src: url('../assets/fonts/newsreader-italic-400-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: 'Newsreader'; font-style: italic; font-weight: 400; font-display: swap; src: url('../assets/fonts/newsreader-italic-400-vietnamese.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }

/* Newsreader — italic 500 */
@font-face { font-family: 'Newsreader'; font-style: italic; font-weight: 500; font-display: swap; src: url('../assets/fonts/newsreader-italic-500-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: 'Newsreader'; font-style: italic; font-weight: 500; font-display: swap; src: url('../assets/fonts/newsreader-italic-500-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: 'Newsreader'; font-style: italic; font-weight: 500; font-display: swap; src: url('../assets/fonts/newsreader-italic-500-vietnamese.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }

/* ============================================================
   crobase.de — Design Tokens
   "Atelier" — warm paper & ink. Boutique private-bank restraint.
   Drop this in once and reference the custom properties everywhere.
   ============================================================ */

:root {
  /* ---- Color · surfaces ---------------------------------- */
  --c-paper:        #EFEBE1;  /* page background (warm paper)         */
  --c-surface:      #E7E1D4;  /* subtle section break (Proof band)    */
  --c-ink:          #1C1A17;  /* primary text / near-black warm       */

  /* ---- Color · text -------------------------------------- */
  --c-text:         #1C1A17;  /* headlines, strong body               */
  --c-text-body:    #514A42;  /* hero/long-form body                  */
  --c-text-soft:    #575047;  /* secondary body (work, about)         */
  --c-text-muted:   #6E665C;  /* labels, captions, secondary          */
  --c-text-faint:   #8A8077;  /* footer, legal                        */

  /* ---- Color · lines ------------------------------------- */
  --c-line:         rgba(28,26,23,0.12);  /* hairlines               */
  --c-line-strong:  rgba(28,26,23,0.20);  /* input underlines         */

  /* ---- Color · ACCENT (used in EXACTLY 3 places) ---------
     CTA / interactive · one hero detail (the thin rule) ·
     active language-toggle state. Nowhere else.
     Default = Oxblood. Swap the two lines below to re-theme. */
  --accent:         #8A2E2A;  /* oxblood                              */
  --accent-hover:   #A23A33;

  /* Alternate accents (documented options — pick one pair):
     Antique gold : --accent:#9A7B45;  --accent-hover:#B8945A;
     Ink blue     : --accent:#1F3A52;  --accent-hover:#2C5274;  (ties to navy suit)
     Forest       : --accent:#2E4434;  --accent-hover:#3C5A45;  */

  /* ---- Typography ---------------------------------------- */
  --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-body:    'Hanken Grotesk', system-ui, -apple-system, sans-serif;

  /* Fluid type scale (min, preferred, max) */
  --t-display:    clamp(42px, 6vw, 80px);   /* hero headline · Newsreader 500 · lh 1.05 · ls -0.015em */
  --t-h2:         clamp(28px, 3.4vw, 40px); /* section opener · Newsreader 400 · lh 1.18              */
  --t-pov:        clamp(22px, 2.7vw, 27px); /* POV / lead serif · Newsreader 400 · lh 1.5             */
  --t-lead:       clamp(24px, 3vw, 32px);   /* contact opener · Newsreader 400                        */
  --t-body:       18px;                     /* body · Hanken 400 · lh 1.7                             */
  --t-body-sm:    17px;                     /* secondary body                                         */
  --t-label:      12.5px;                   /* labels · Hanken 600 · UPPERCASE · ls 0.18em            */
  --t-wordmark:   13px;                     /* CROBASE · Hanken 500 · UPPERCASE · ls 0.28em           */

  --lh-tight:     1.05;
  --lh-snug:      1.3;
  --lh-body:      1.7;

  /* ---- Spacing (8pt-ish rhythm) -------------------------- */
  --sp-1: 8px;  --sp-2: 16px;  --sp-3: 24px;  --sp-4: 32px;
  --sp-5: 48px; --sp-6: 64px;  --sp-7: 96px;  --sp-8: 132px;

  --gutter:        56px;   /* desktop page padding L/R          */
  --gutter-mobile: 28px;
  --section-y:     132px;  /* vertical padding between sections */
  --maxw-text:     700px;  /* POV / proof reading measure       */
  --maxw-page:     1180px; /* work / about content width        */

  /* ---- Radius / misc ------------------------------------- */
  --radius: 2px;           /* buttons, inputs — barely there    */
  --header-h: 84px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ============================================================
   ALT THEME — "Obsidian" (the briefed dark direction).
   Kept as a documented fallback. Add data-theme="obsidian"
   to <html> to use it. Accent shifts to muted antique gold.
   ============================================================ */
:root[data-theme="obsidian"] {
  --c-paper:       #14110F;
  --c-surface:     #1A1917;
  --c-ink:         #EDE7DC;
  --c-text:        #EDE7DC;
  --c-text-body:   #B8AFA5;
  --c-text-soft:   #B8AFA5;
  --c-text-muted:  #8A817A;
  --c-text-faint:  #6B6560;
  --c-line:        rgba(237,231,220,0.12);
  --c-line-strong: rgba(237,231,220,0.22);
  --accent:        #B08D57;
  --accent-hover:  #C4A06E;
}

@media (prefers-reduced-motion: reduce) {
  :root { --ease: linear; }
}