/* Fonts, tokens and resets shared by every page. */

@font-face { font-family: 'Inter'; src: url('../assets/fonts/inter-300.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../assets/fonts/inter-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../assets/fonts/inter-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Libre Caslon Condensed'; src: url('../assets/fonts/libre-caslon-condensed-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Libre Caslon Condensed'; src: url('../assets/fonts/libre-caslon-condensed-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Libre Caslon Condensed'; src: url('../assets/fonts/libre-caslon-condensed-italic-400.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  --ink: #333;          /* headings, nav, captions */
  --black: #000;        /* body copy */
  --paper: #fff;
  --night: #121212;     /* behind the page, seen when scrolling past the ends */
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif: 'Libre Caslon Condensed', 'Times New Roman', serif;
  --gutter: 32px;
}
@media (max-width: 767.98px) { :root { --gutter: 16px; } }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--night); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--night); color: var(--black);
  font: 300 16px/1.2 var(--sans);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, p, figure { margin: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: none; }
button { font: inherit; color: inherit; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Cross-page transitions: moving between pages cross-fades, and elements that share a
   view-transition-name morph between them (the Buy X Get Y card's phone and gradient fly into the
   story's hero). The header keeps its place. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.3s; }
::view-transition-group(*) { animation-duration: 0.6s; animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }