/* Thomas Pohle · brand tokens · v1.2 · 2026-10-21 · Host Grotesk self-hosted, one red, no eyebrows */
@font-face{font-family:"Host Grotesk";src:url("fonts/HostGrotesk-VF.woff2") format("woff2"),url("fonts/HostGrotesk-VF.ttf") format("truetype");font-weight:300 800;font-display:swap}
/* fallback with Host Grotesk metrics: text breaks the same before the font arrives, so nothing jumps (CLS) */
@font-face{font-family:"HG Fallback";src:local("Arial"),local("ArialMT"),local("Liberation Sans"),local("LiberationSans"),local("Arimo"),local("Helvetica");font-weight:100 549;size-adjust:104.5%;ascent-override:97.1%;descent-override:30.1%;line-gap-override:0%}
@font-face{font-family:"HG Fallback";src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold"),local("LiberationSans-Bold"),local("Arimo Bold"),local("Helvetica Bold");font-weight:550 900;size-adjust:99.5%;ascent-override:104.1%;descent-override:32.3%;line-gap-override:0%}
:root{
  /* color */
  --tp-ember-black:#0D0A0A;   /* ground */
  --tp-ash:#F4EFEA;           /* text on dark, ground for print */
  --tp-cardinal:#CC1E38;      /* the one red */
  --tp-smoke:#A39A94;         /* secondary text and small labels on dark */
  --tp-stone:#6E6560;         /* secondary text on light */
  --tp-surface:#161010;       /* cards on dark */
  --tp-surface-2:#1D1414;     /* raised card, hover */
  --tp-line:#2A1D1C;          /* borders on dark */
  --tp-petrol:#1E4F4C;        /* BACKUP ONLY, on light */
  --tp-petrol-light:#5FB8AE;  /* BACKUP ONLY, on dark */
  /* type */
  --tp-font:"Host Grotesk","HG Fallback",sans-serif;
  --tp-display:clamp(40px,4.4vw,64px); --tp-h1:clamp(36px,4.2vw,58px); --tp-h2:clamp(32px,4.2vw,52px); --tp-h3:clamp(22px,2.2vw,26px);
  --tp-body:18px; --tp-small:14px;
  --tp-track-display:-.025em; --tp-track-h3:-.015em;
  /* shape and motion */
  --tp-radius-card:6px; --tp-radius-button:8px;
  --tp-ease:cubic-bezier(.2,.7,.2,1); --tp-dur:.2s; --tp-dur-slow:.9s;
}
.tp-keyword{color:var(--tp-cardinal);font-style:normal}
.tp-button{display:inline-flex;align-items:center;gap:10px;background:var(--tp-cardinal);color:var(--tp-ash);font:600 16px/1 var(--tp-font);padding:15px 24px;border-radius:var(--tp-radius-button);text-decoration:none;transition:transform var(--tp-dur) var(--tp-ease),box-shadow var(--tp-dur) var(--tp-ease)}
.tp-button:hover{transform:translateY(-1px);box-shadow:0 0 0 6px rgba(204,30,56,.22)}
.tp-button:focus-visible{outline:2px solid var(--tp-ash);outline-offset:3px}
.tp-button--ghost{background:transparent;color:var(--tp-ash);border:1px solid var(--tp-line)}
.tp-button--ghost:hover{border-color:var(--tp-smoke);box-shadow:none}