/* Fonts — self-hosted, no third-party requests */
@font-face {
  font-family: 'Poiret One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/poiret-one-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Poiret One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/poiret-one-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/newsreader-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/newsreader-400-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/newsreader-400-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/newsreader-400-italic-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/newsreader-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/newsreader-600-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Custom properties */
:root {
  /* Blue ramp, hue ~205 — pulled from the cyanotype range itself, pale wash
     through Prussian. Use the scale for design decisions, the semantic
     aliases below for everything else. */
  --blue-50: #f2f8fc;
  --blue-100: #dcebf6;
  --blue-200: #b7d6ea;
  --blue-300: #86bada;
  --blue-400: #5299c7;
  --blue-500: #2c7aaf;
  --blue-600: #1b608f;
  --blue-700: #164c72;
  --blue-800: #123a56;
  --blue-900: #0e2b40;
  --blue-950: #0a1c2a;

  /* Semantic */
  /* Warm off-white ground. Cyanotype blue goes electric against pure #FFF;
     a dark ground turns the deep Prussian fields to mud. See spec §4. */
  --paper-50: #f4f1e9;
  --paper-100: #f1eee5;
  --paper-200: #e6e1d4;

  --color-text: #14232e;
  --color-text-muted: #5a7386;
  --color-bg: var(--paper-100);
  --color-bg-tint: var(--paper-50);
  /* The plate behind every work. Stays light in dark mode by design. */
  --color-plate: #faf8f3;
  --color-border: var(--paper-200);
  --color-heading: var(--blue-800);
  --color-accent: var(--blue-600);
  --color-accent-hover: var(--blue-800);
  --color-focus: var(--blue-500);

  --font-body: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-display: 'Poiret One', system-ui, sans-serif;
  --font-heading: var(--font-display);

  /* Type scale. Three body steps — label, body, lede — plus three headings.
     Nothing on any page should invent a size outside this list. */
  --text-label: 0.75rem;
  --text-small: 0.875rem;
  --text-body: 1.0625rem;
  --text-lede: 1.3125rem;
  --text-h3: 1.375rem;
  --text-h2: 1.75rem;
  --text-h1: 2.5rem;

  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;
  --space-xl: 4rem;
  --space-2xl: 6.5rem;
  --space-3xl: 10rem;

  --max-width: 60rem;
  --max-width-prose: 38rem;
  --max-width-gallery: 74rem;
}

/* Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
}

/* Base */
html {
  font-family: var(--font-body);
  font-size: var(--text-body);
  /* Newsreader sets on a longer leading than the old system sans wanted. */
  line-height: 1.7;
  color: var(--color-text);
  background: var(--color-bg);
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
  padding: var(--space-xl) var(--space-lg) var(--space-2xl);
  max-width: var(--max-width);
  width: 100%;
  margin-inline: auto;
}

/* Skip link */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-text);
  color: var(--color-bg);
  text-decoration: none;
  z-index: 1000;
}

.skip-link:focus {
  top: var(--space-md);
}

/* Focus indicators */
:focus {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

:focus:not(:focus-visible) {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* Header */
header {
  padding: var(--space-lg);
}

header nav {
  max-width: var(--max-width);
  margin-inline: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-md);
}

header nav > a {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-heading);
}

header nav ul {
  display: flex;
  gap: var(--space-lg);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  letter-spacing: 0.06em;
  list-style: none;
  padding: 0;
}

header nav a {
  color: inherit;
  text-decoration: none;
}

header nav a:hover {
  text-decoration: underline;
}

header nav a[aria-current='page'] {
  text-decoration: underline;
}

/* Footer */
footer {
  padding: var(--space-2xl) var(--space-lg) var(--space-lg);
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--text-small);
}

footer nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-lg);
  margin-bottom: var(--space-md);
}

footer nav a {
  text-decoration: none;
}

footer nav a:hover {
  text-decoration: underline;
}

/* Typography */
h1,
h2,
h3,
h4 {
  font-family: var(--font-heading);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0.06em;
  color: var(--color-heading);
}

h1 {
  font-size: var(--text-h1);
  margin-bottom: var(--space-md);
}

h2 {
  font-size: var(--text-h2);
  margin-bottom: var(--space-sm);
}

h3 {
  font-size: var(--text-h3);
}

/* Small uppercase label, used for captions and metadata */
.label {
  font-family: var(--font-display);
  font-size: var(--text-label);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--color-text-muted);
}

p {
  margin-bottom: var(--space-md);
}

/* Links */
a {
  color: var(--color-accent);
  text-underline-offset: 0.15em;
}

a:hover {
  color: var(--color-accent-hover);
}

/* Images */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* A closed <dialog> must never paint. Declared here, in the render-blocking
   stylesheet, so it holds before any component CSS arrives. */
dialog:not([open]) {
  display: none;
}

/* Utilities */
.prose {
  max-width: var(--max-width-prose);
}

.grid {
  display: grid;
  gap: var(--space-lg);
}

/* Breaks out of main's text column for full-width image galleries */
.wide {
  width: min(var(--max-width-gallery), calc(100vw - 2 * var(--space-lg)));
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

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