/* ==========================================================================
   House of Slow - design kit
   Leading design: hos-input (13 okt 2026) + clickable example.
   Fonts: Playfair Display (koppen) + Inter (tekst) - self-hosted.
   ========================================================================== */
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/inter-latin-400-normal.woff2") format("woff2");}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/inter-latin-500-normal.woff2") format("woff2");}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/inter-latin-600-normal.woff2") format("woff2");}
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/playfair-display-latin-400-normal.woff2") format("woff2");}

:root{
  --hos-paper:#f5f4f0;      /* achtergrond, warm wit */
  --hos-band:#eeece6;       /* Slow Letter-band */
  --hos-ink:#222220;        /* tekst, navigatie, knoppen */
  --hos-muted:#5f5d58;      /* lopende tekst */
  --hos-muted-2:#696760;    /* kaarttekst, footerlinks */
  --hos-label:#77746d;      /* kickers/labels (toegankelijk contrast) */
  --hos-stone:#b8b5af;      /* dunne lijnen, linkonderstreping */
  --hos-line:#d9d6cf;       /* scheidingslijnen */
  --hos-serif:"Playfair Display",Georgia,serif;
  --hos-sans:"Inter",Arial,sans-serif;
  --hos-gutter:clamp(24px,7.8vw,150px);
  --hos-content:1520px;
}
@media (max-width:1000px){:root{--hos-gutter:6vw;}}

html{scroll-behavior:smooth;}
body{background:var(--hos-paper);color:var(--hos-ink);font-family:var(--hos-sans);font-size:16px;line-height:1.65;}
h1,h2,h3,h4,h5,h6{font-family:var(--hos-serif);font-weight:400;color:var(--hos-ink);}

a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--hos-ink);outline-offset:3px;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}*,::before,::after{transition:none !important;animation:none !important;}}