@font-face {
  font-family: "Lletraferida";
  src: url("../fonts/Lletraferida.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "TrueTypewriter Polyglott";
  src: url("../fonts/TruetypewriterPolyglott-mELa.ttf") format("truetype");
  font-weight: 400 700;
  font-style: normal;
  font-display: block;
}

:root {
  --paper: #f3f1ec;
  --paper-strong: #efede7;
  --paper-soft: #f8f7f3;
  --ink: #161412;
  --ink-soft: rgba(22, 20, 18, 0.93);
  --ink-faint: rgba(22, 20, 18, 0.8);
  --line: rgba(22, 20, 18, 0.12);
  --line-strong: rgba(22, 20, 18, 0.18);
  --accent: #b88f56;
  --surface: rgba(255, 255, 255, 0.52);
  --surface-strong: rgba(255, 255, 255, 0.78);
  --shadow-soft: 0 24px 60px rgba(17, 14, 10, 0.08);
  --shadow-card: 0 20px 50px rgba(17, 14, 10, 0.12);
  --radius-sm: 16px;
  --radius-md: 24px;
  --radius-lg: 34px;
  --content: 1540px;
  --article: 630px;
  --gutter: clamp(28px, 3vw, 54px);
  --header-height: 136px;
  --header-height-mobile: 156px;
  --header-offset: 148px;
  --font-vertical-label: "Lletraferida", Inter, Arial, sans-serif;
  --font-typewriter: "TrueTypewriter Polyglott", "Courier New", monospace;
  --desktop-ratio: 1;
  --viewport-scale: 1;
  --hero-screen-height: 100svh;
  --hero-fit-height: 100svh;
  --hero-media-width: 50.2vw;
  --hero-height-trim: 0px;
  --header-bar-height: 136px;
}