@font-face {
  font-family: 'Zalando Sans';
  src: url('/assets/zalando-sans.woff2') format('woff2');
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-display: swap;
}
@font-face {
  font-family: 'Zalando Fallback';
  src: local('Helvetica Neue'), local('Arial');
  size-adjust: 101%;
  ascent-override: 94%;
}

:root {
  /* Colour */
  --black: #0a0a0a;          /* hero, header, dark bands */
  --ink: #232324;            /* text on light grounds */
  --ink-strong: #0a0a0a;     /* text on the gradient */
  --muted: #5c5c5f;          /* 6.5:1 on white, 6:1 on ash */
  --paper: #ffffff;
  --white: #ffffff;
  --ash: #f2f5fa;            /* cool light ground */
  --stone: #f2f5fa;
  --mist: #e8edf5;           /* ash, one step deeper: hover, placeholders */
  --line: #dfe3ea;
  --line-strong: #c7ccd5;
  --panel: #151516;          /* a panel on black */
  --panel-2: #1d1d1f;
  --line-dark: #333336;
  --on-dark: #ffffff;
  --on-dark-muted: #b8b8bd;  /* 9.6:1 on black, 8.6:1 on the panel */
  --ember: #ea4700;          /* large type and graphics only on white */
  --ember-ink: #b63800;      /* small text on light: 5.7:1 on white */
  --amber: #ff9900;          /* text and marks on dark: 9.6:1 on black */
  --helios: #fcbf00;
  --gradient: linear-gradient(120deg, #ea4700 0%, #ff7a00 48%, #ff9900 100%);
  --scrim: linear-gradient(180deg, rgb(10 10 10 / 0%) 0%, rgb(10 10 10 / 55%) 42%, rgb(10 10 10 / 92%) 100%);
  --focus-light: #0a0a0a;
  --focus-dark: #ff9900;
  --focus-gradient: #0a0a0a;

  /* Shape and depth */
  --radius: 20px;
  --radius-lg: 28px;
  --radius-sm: 12px;
  --pill: 999px;
  --card-shadow: 0 1px 2px rgb(10 10 10 / 5%), 0 18px 40px -22px rgb(10 10 10 / 28%);
  --card-shadow-hover: 0 2px 4px rgb(10 10 10 / 6%), 0 30px 60px -28px rgb(10 10 10 / 40%);
  --hairline: 1px solid var(--line);
  --hairline-dark: 1px solid var(--line-dark);

  /* Type: nine roles. Labels 14 px and reading text 16 px at the smallest. */
  --font: 'Zalando Sans', 'Zalando Fallback', 'Helvetica Neue', Arial, sans-serif;
  --display-size: clamp(3rem, 1.1rem + 7.6vw, 8rem);
  --display-weight: 400;
  --display-track: -0.05em;
  --h1-size: clamp(2.5rem, 1.55rem + 3.9vw, 5rem);
  --h1-weight: 420;
  --h2-size: clamp(2rem, 1.3rem + 2.8vw, 4rem);
  --h2-weight: 430;
  --h3-size: clamp(1.375rem, 1.18rem + 0.8vw, 1.875rem);
  --figure-size: clamp(2.5rem, 1.7rem + 3.2vw, 4.5rem);
  --lede-size: clamp(1.1875rem, 1.06rem + 0.5vw, 1.5rem);
  --body-size: clamp(1.0625rem, 1.04rem + 0.09vw, 1.125rem);
  --small-size: 1rem;
  --label-size: 0.875rem;

  /* Space and frame */
  --frame: 1320px;
  --gutter: clamp(16px, 4.4vw, 72px);
  --section: clamp(56px, 6vw, 88px);
  --gap: 16px;
  --header-main: 64px;
  --header-quiet: 0px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 140ms;
  --t-mid: 220ms;
  --t-slow: 520ms;
}
@media (min-width: 768px) { :root { --gap: 20px; } }
@media (min-width: 1024px) { :root { --gap: 24px; --header-main: 72px; --header-quiet: 36px; } }