/* Medium brand tokens, from unfairly.ai/brand-guidelines/medium (checked 2026-10-30).
   Sizes, spacing and components were measured on https://medium.com/ (logged out) (Playwright Chromium computed styles at 1440x900 and 390x844, plus 768, 1024, 1280, 1920 and a 4px-step width sweep 320-1600 for breakpoints, 2026-10-30).
   Fonts: --font-* use the open stand-ins (load them from Google Fonts); --font-*-original name Medium's own faces, which you may only use if you have a licence. */
:root {
  --color-paper: #F7F4ED;
  --color-ink: #242424;
  --color-accent: #34AA45;
  --color-ink-soft: #6B6B6B;
  --color-cream: #F7F4ED;
  --color-ink: #242424;
  --color-black: #000000;
  --color-button-black: #191919;
  --color-button-black-hover: #080808;
  --color-muted-grey: #6B6B6B;
  --color-white: #FFFFFF;
  --color-illustration-green: #34AA45;
  --color-dark-ground: #171717;
  --color-dark-nav: #121212;
  --color-dark-text: #E5E5E5;
  --color-dark-hairline: #D2D2D2;
  --color-button-primary-large-fill: #191919;
  --color-button-primary-large-text: #FFFFFF;
  --color-button-primary-nav-fill: #191919;
  --color-button-primary-nav-text: #FFFFFF;
  --color-nav-link-text: #242424;
  --color-footer-link-text: #6B6B6B;
  --color-hairline-text: #242424;
  --font-display: Newsreader, Georgia, Cambria, "Times New Roman", serif;
  --font-display-original: gt-super, Newsreader, Georgia, Cambria, "Times New Roman", serif;
  --font-body: Geist, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body-original: sohne, Geist, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --page-margin: 64px;
  --container-max: 1192px;
  --hero-text-max: 720px;
  --nav-height: 76px;
  --grid-columns: 1;
  --text-hero-size: 120px;
  --text-hero-line: 100px;
  --text-hero-weight: 400;
  --text-hero-tracking: -6.6px;
  --text-subline-size: 22px;
  --text-subline-line: 28px;
  --text-subline-weight: 400;
  --text-button-large-size: 20px;
  --text-button-large-line: 28px;
  --text-button-large-weight: 400;
  --text-nav-size: 14px;
  --text-nav-line: 20px;
  --text-nav-weight: 400;
  --text-footer-size: 13px;
  --text-footer-line: 20px;
  --text-footer-weight: 400;
  --text-story-title-size: 42px;
  --text-story-title-line: 52px;
  --text-story-title-weight: 700;
  --text-story-title-tracking: -0.462px;
  --text-story-subtitle-size: 22px;
  --text-story-subtitle-line: 28px;
  --text-story-subtitle-weight: 400;
  --text-story-heading-size: 20px;
  --text-story-heading-line: 24px;
  --text-story-heading-weight: 600;
  --text-story-body-size: 20px;
  --text-story-body-line: 32px;
  --text-story-body-weight: 400;
  --text-story-body-tracking: -0.06px;
  --text-story-meta-size: 14px;
  --text-story-meta-line: 20px;
  --text-story-meta-weight: 400;
  --radius-button-primary-large: 999px;
  --radius-button-primary-nav: 999px;
  --ease-button-color: linear;
  --duration-button-color: 300ms;
  --duration-app-splash: 1000ms;
}
/* Phone values measured at 390px; Medium's CSS switches at 727px. */
@media (max-width: 727px) {
  :root {
    --page-margin: 24px;
    --text-hero-size: 80px;
  }
}
.button-primary-large {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 46px; padding: 0 20px; border-radius: 999px;
  background: #191919; color: #FFFFFF;
  font: 400 20px/1 var(--font-body);
}
.button-primary-large:hover { background: #080808; } /* observed */
.button-primary-nav {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 38px; padding: 0 16px; border-radius: 999px;
  background: #191919; color: #FFFFFF;
  font: 400 14px/1 var(--font-body);
}
.button-primary-nav:hover { background: #080808; } /* observed */