/* base.css: the "Instrument" design system's foundation (docs/design-pov.md,
   section 4): house fonts, tokens, reset. Shared by the public shell
   (site.css, build-modal.css) and the admin (admin.css). */

@font-face {
  font-family: "Newsreader";
  src: url("/static/fonts/newsreader-roman.woff2") format("woff2");
  font-weight: 300 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("/static/fonts/newsreader-italic.woff2") format("woff2");
  font-weight: 300 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/static/fonts/instrument-sans-roman.woff2") format("woff2");
  font-weight: 400 600; font-stretch: 85% 100%; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/static/fonts/instrument-sans-italic.woff2") format("woff2");
  font-weight: 400 600; font-stretch: 85% 100%; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Fragment Mono";
  src: url("/static/fonts/fragment-mono-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Fragment Mono";
  src: url("/static/fonts/fragment-mono-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
/* metric-matched fallback, so the name doesn't reflow when Newsreader lands */
@font-face {
  font-family: "Newsreader Fallback";
  src: local("Times New Roman"), local("Tinos"), local("Liberation Serif"), local("DejaVu Serif");
  size-adjust: 96%; ascent-override: 98%; descent-override: 26%; line-gap-override: 0%;
}

:root {
  color-scheme: dark light;
  /* type */
  --font-display: "Newsreader", "Newsreader Fallback", "Iowan Old Style", "Times New Roman", serif;
  --font-text: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Fragment Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --t-mega: clamp(4.25rem, 1.2rem + 12.5vw, 13.5rem);
  --t-display: clamp(2.75rem, 1.6rem + 4.6vw, 6rem);
  --t-title: clamp(1.75rem, 1.35rem + 1.7vw, 2.875rem);
  --t-lede: clamp(1.375rem, 1.15rem + .95vw, 2rem);
  --t-body: clamp(1rem, .96rem + .18vw, 1.125rem);
  --t-ui: .875rem;
  --t-meta: .6875rem;

  /* colour: Ink (dark, the default) */
  --bg: #0F0F0D;
  --bg-raised: #171714;
  --fg: #ECE8DF;
  --fg-2: #A8A398;
  --fg-3: #6E6A62;
  --rule: rgb(236 232 223 / .14);
  --rule-strong: rgb(236 232 223 / .32);
  --accent: #FF5B1F;
  --accent-ink: #0F0F0D;
  --scrim: rgb(8 8 7 / .62);
  --grain-opacity: .05;

  /* space */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px;
  --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 144px; --s-11: 216px;
  --gap-section: clamp(96px, 6rem + 8vw, 216px);
  --m: clamp(16px, 2.8vw, 40px);
  --g: clamp(12px, 1.4vw, 20px);

  /* shape */
  --r-0: 0; --r-1: 3px; --r-pill: 999px;

  /* motion */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-quint: cubic-bezier(.23, 1, .32, 1);
  --ease-inout: cubic-bezier(.76, 0, .24, 1);
  --ease-in: cubic-bezier(.5, 0, .75, 0);
  --d-1: 150ms; --d-2: 250ms; --d-3: 450ms; --d-4: 700ms; --d-5: 1100ms;
  --stagger: 70ms;

  /* layers */
  --z-base: 0; --z-frontend: 10; --z-chrome: 20; --z-cta: 40; --z-banner: 50;
  --z-scrim: 80; --z-modal: 90; --z-toast: 100; --z-grain: 110;
}
/* Paper (light): follows the system, or [data-theme="light"] */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #F1EEE7; --bg-raised: #E8E4DB;
    --fg: #151513; --fg-2: #55524B; --fg-3: #8A867D;
    --rule: rgb(21 21 19 / .14); --rule-strong: rgb(21 21 19 / .4);
    --accent: #D9400B; --accent-ink: #FFFFFF;
    --scrim: rgb(241 238 231 / .7);
    --grain-opacity: .035;
  }
}
:root[data-theme="light"] {
  --bg: #F1EEE7; --bg-raised: #E8E4DB;
  --fg: #151513; --fg-2: #55524B; --fg-3: #8A867D;
  --rule: rgb(21 21 19 / .14); --rule-strong: rgb(21 21 19 / .4);
  --accent: #D9400B; --accent-ink: #FFFFFF;
  --scrim: rgb(241 238 231 / .7);
  --grain-opacity: .035;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: var(--font-text); font-size: var(--t-body); font-weight: 420; line-height: 1.5;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-synthesis: none; text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, textarea, select { font: inherit; color: inherit; }
::selection { background: var(--fg); color: var(--bg); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* the meta voice: mono, uppercase, tracked (the only uppercase on the site) */
.meta, .t-meta {
  font-family: var(--font-mono); font-size: var(--t-meta); font-weight: 400;
  line-height: 1.3; letter-spacing: .06em; text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

/* links: ink with a hairline underline that firms up on hover */
a { color: inherit; text-decoration-line: underline; text-decoration-thickness: 1px;
  text-underline-offset: .2em; text-decoration-color: var(--rule-strong);
  transition: text-decoration-color var(--d-2) var(--ease-quint), color var(--d-2) var(--ease-quint); }
@media (hover: hover) and (pointer: fine) {
  a:hover { text-decoration-color: var(--fg); }
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important; animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0ms !important; transition-delay: 0ms !important;
  }
}