@font-face {
  font-family: 'PTSerif';
  src: url('fonts/PTSerif-400.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'PTSerif';
  src: url('fonts/PTSerif-700.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Walfork';
  src: url('fonts/Walfork-400.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Walfork';
  src: url('fonts/Walfork-600.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'FeatureFlat';
  src: url('fonts/FeatureFlatDisplay-700.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'FeatureFlatText';
  src: url('fonts/Feature_Flat_Text_Web-400.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'FeatureFlatText';
  src: url('fonts/Feature_Flat_Text_Web-700.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'FeatureFlatText';
  src: url('fonts/Feature_Flat_Text_Web-800.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'RollingStoneSlab';
  src: url('fonts/Rolling_Stone_Slab_Web-400.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'RollingStoneSlab';
  src: url('fonts/Rolling_Stone_Slab_Web-900.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'BBCReithSans';
  src: url('fonts/BBC_Reith_Sans-400.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'BBCReithSans';
  src: url('fonts/BBC_Reith_Sans-700.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'BBCReithSerif';
  src: url('fonts/BBC_Reith_Serif-400.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'BBCReithSerif';
  src: url('fonts/BBC_Reith_Serif-700.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SpotifyMixUITitle';
  src: url('fonts/SpotifyMixUITitle-700.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SpotifyMixUITitle';
  src: url('fonts/SpotifyMixUITitle-800.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'FragmentMono';
  src: url('fonts/FragmentMono-400.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Crystal';
  src: url('fonts/Crystal_ExtraBold-400.otf') format('opentype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Crystal';
  src: url('fonts/Crystal_ExpandedExtraBlack-400.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
:root {
  --color-black: rgba(0,0,0,1);
  --color-text: rgba(26,26,26,1);
  --color-text-secondary: rgba(102,102,102,1);
  --color-text-tertiary: rgba(153,153,153,1);
  --color-white: #fff;
  --color-bg: #fff;
  --color-divider: rgba(0,0,0,1);
  --color-divider-light: rgba(180,180,180,1);
  --color-accent: #e60000;
  --color-link-hover: #0066cc;

  --header-height: 450px;
  --grid-gap: 0.75rem;
  --grid-margin: 1.25rem;
  --grid-columns: 4;

  --font-sans: "BBCReithSans", "FeatureFlatText", "Walfork", Arial, sans-serif;
  --font-serif: "BBCReithSerif", "RollingStoneSlab", Georgia, serif;
  --font-display: "FeatureFlat", "Walfork", sans-serif;
  --font-mono: "FragmentMono", monospace;

  /* Typography — replica delle classi estratte */
  --font-foundation-title-primary: 800 0.6875rem/1 var(--font-sans);
  --font-discovery-hed-core-primary: 700 0.9375rem/1.2 var(--font-sans);
  --font-discovery-hed-core-secondary: 700 1.125rem/1.15 var(--font-sans);
  --font-discovery-hed-feature: 700 1.375rem/1.1 var(--font-sans);
  --font-consumption-editorial-hed-standard: 700 0.9375rem/1.2 var(--font-serif);
  --font-consumption-editorial-body-core: 400 0.9375rem/1.45 var(--font-sans);
  --font-global-editorial-accreditation-core: 400 0.6875rem/1.3 var(--font-sans);
  --font-global-editorial-context-primary: 400 0.8125rem/1.35 var(--font-sans);
  --font-global-editorial-context-secondary: 400 0.6875rem/1.3 var(--font-sans);
  --font-utility-button-utility: 700 0.6875rem/1 var(--font-sans);
  --font-utility-button-core: 700 0.6875rem/1 var(--font-sans);
}
  :root {
    --grid-gap: 1.5rem;
    --grid-margin: 3rem;
    --grid-columns: 12;
  }
}
  :root { --grid-gap: 2rem; }
}
  :root { --grid-margin: 4rem; }
}
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  font: var(--font-consumption-editorial-body-core);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding-top: 0;
}