/* No Man's News: calm, geometric, lit by the light blue of a sublight engine. No framework, no build step. */

/* ---- Fonts (self-hosted, SIL Open Font License; see static/fonts/OFL-*.txt) --------------------------
   Five text styles, switched by the "Aa" button (html[data-font]). A browser only downloads the font
   files of the style in use. */
@font-face { font-family: "Exo 2"; src: url("../fonts/exo-2-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Exo 2"; src: url("../fonts/exo-2-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "VT323"; src: url("../fonts/vt323-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Rajdhani"; src: url("../fonts/rajdhani-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Rajdhani"; src: url("../fonts/rajdhani-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Rajdhani"; src: url("../fonts/rajdhani-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Orbitron"; src: url("../fonts/orbitron-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Orbitron"; src: url("../fonts/orbitron-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Outfit"; src: url("../fonts/outfit-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Outfit"; src: url("../fonts/outfit-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Outfit"; src: url("../fonts/outfit-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }

/* ---- Design tokens: dark (default) ------------------------------------------------------------ */
:root {
  color-scheme: dark;

  /* Deep space: navy into indigo, with an engine-blue glow above and a faint violet one below */
  --bg-top: #070c1d;
  --bg-mid: #0a1030;
  --bg-bottom: #05070f;
  --nebula-1: rgba(110, 205, 255, 0.16);
  --nebula-2: rgba(125, 105, 255, 0.09);
  --star: rgba(225, 242, 255, 0.75);
  --grid-line: rgba(143, 210, 255, 0.15);

  --panel: rgba(12, 20, 44, 0.72);
  --panel-solid: #0c1430;
  --line: rgba(143, 210, 255, 0.13);
  --line-strong: rgba(143, 215, 255, 0.3);
  --field: rgba(3, 7, 20, 0.6);

  --text: #eef5ff;
  --text-soft: #b6c5de;
  --text-dim: #7e8fae;

  /* The engine glow: icy light blue */
  --accent: #8fdcff;
  --accent-strong: #46bdff;
  --accent-soft: rgba(143, 220, 255, 0.1);
  --accent-grad: linear-gradient(120deg, #d6f5ff 0%, #8fdcff 45%, #46bdff 100%);
  --on-accent: #03131f;
  --glow: 0 0 24px rgba(120, 210, 255, 0.35);
  --title-glow: 0 0 42px rgba(143, 220, 255, 0.28);
  --bracket: rgba(143, 220, 255, 0.5);

  --ok: #4be3a8;
  --warn: #ffc857;

  --show-sun: inline-block;  /* the toggle shows the mode you can switch to */
  --show-moon: none;

  /* Text style "Classic". The other styles override these in html[data-font="…"] below. */
  --font-display: "Exo 2", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --font: "Inter", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --font-label: var(--font);
  --root-scale: 1;       /* scales every rem-based size */
  --display-scale: 1;    /* extra scale for titles */
  --label-scale: 1;      /* extra scale for the small uppercase labels */
  --display-bold: 700;
  --display-medium: 600;
  --display-tracking: 0;
  --display-leading: 1.2;   /* line height of titles */
  --body-weight: 400;

  --radius: 6px;
  --wrap: 1100px;
  --wrap-narrow: 720px;
  --gap: 20px;
}

/* ---- Light theme: an icy, pale-blue version. Used when chosen, or when the device prefers light. ---- */
:root[data-theme="light"] {
  color-scheme: light;
  --bg-top: #f6faff;
  --bg-mid: #edf4ff;
  --bg-bottom: #e4edfb;
  --nebula-1: rgba(80, 180, 255, 0.2);
  --nebula-2: rgba(150, 130, 255, 0.1);
  --star: transparent;
  --grid-line: rgba(20, 80, 160, 0.06);
  --panel: rgba(255, 255, 255, 0.82);
  --panel-solid: #ffffff;
  --line: rgba(20, 70, 140, 0.13);
  --line-strong: rgba(20, 80, 160, 0.3);
  --field: #ffffff;
  --text: #0b1830;
  --text-soft: #3a4c68;
  --text-dim: #5d6f8d;
  --accent: #0a72c0;
  --accent-strong: #0861a6;
  --accent-soft: rgba(10, 114, 192, 0.08);
  --glow: 0 0 18px rgba(70, 189, 255, 0.35);
  --title-glow: none;
  --bracket: rgba(10, 114, 192, 0.45);
  --ok: #0f9d66;
  --warn: #b97800;
  --show-sun: none;
  --show-moon: inline-block;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg-top: #f6faff;
    --bg-mid: #edf4ff;
    --bg-bottom: #e4edfb;
    --nebula-1: rgba(80, 180, 255, 0.2);
    --nebula-2: rgba(150, 130, 255, 0.1);
    --star: transparent;
    --grid-line: rgba(20, 80, 160, 0.06);
    --panel: rgba(255, 255, 255, 0.82);
    --panel-solid: #ffffff;
    --line: rgba(20, 70, 140, 0.13);
    --line-strong: rgba(20, 80, 160, 0.3);
    --field: #ffffff;
    --text: #0b1830;
    --text-soft: #3a4c68;
    --text-dim: #5d6f8d;
    --accent: #0a72c0;
    --accent-strong: #0861a6;
    --accent-soft: rgba(10, 114, 192, 0.08);
    --glow: 0 0 18px rgba(70, 189, 255, 0.35);
    --title-glow: none;
    --bracket: rgba(10, 114, 192, 0.45);
    --ok: #0f9d66;
    --warn: #b97800;
    --show-sun: none;
    --show-moon: inline-block;
  }
}

/* ---- Text styles. Each sets the fonts plus the sizing tweaks that keep it comfortable to read. ------- */
html[data-font="blocky"] {      /* chunky pixel titles */
  --font-display: "VT323", ui-monospace, monospace;
  --font-label: "VT323", ui-monospace, monospace;
  --display-scale: 1.45;
  --label-scale: 1.4;
  --display-bold: 400;
  --display-medium: 400;
  --display-tracking: 0.02em;
  --display-leading: 0.95;
}
html[data-font="lines"] {       /* straight, squared-off strokes, all parallel */
  --font-display: "Rajdhani", ui-sans-serif, system-ui, sans-serif;
  --font: "Rajdhani", ui-sans-serif, system-ui, sans-serif;
  --font-label: "Rajdhani", ui-sans-serif, system-ui, sans-serif;
  --root-scale: 1.1;
  --display-scale: 1.05;
  --body-weight: 500;
  --display-bold: 700;
  --display-medium: 600;
  --display-tracking: 0.01em;
  --display-leading: 1.1;
}
html[data-font="dos"] {         /* a 1980s terminal: monospace everywhere */
  --font-display: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --font: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --font-label: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --root-scale: 0.92;
  --display-scale: 0.9;
  --label-scale: 0.95;
  --display-bold: 600;
  --display-medium: 600;
  --display-tracking: -0.02em;
  --display-leading: 1.25;
}
html[data-font="futuristic"] {  /* smooth, wide, sci-fi */
  --font-display: "Orbitron", ui-sans-serif, system-ui, sans-serif;
  --font: "Outfit", ui-sans-serif, system-ui, sans-serif;
  --font-label: "Orbitron", ui-sans-serif, system-ui, sans-serif;
  --display-scale: 0.78;
  --label-scale: 0.85;
  --display-bold: 700;
  --display-medium: 600;
  --display-tracking: 0.03em;
  --display-leading: 1.25;
}

/* ---- Base ------------------------------------------------------------------------------------ */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; font-size: calc(100% * var(--root-scale)); }

/* `hidden` must always win, even over components that set their own display */
[hidden] { display: none !important; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--bg-bottom);  /* matches the gradient's end, so long pages never show a band */
  background-image:
    radial-gradient(900px 480px at 50% -8%, var(--nebula-1), transparent 70%),
    radial-gradient(760px 560px at 0% 100%, var(--nebula-2), transparent 70%),
    linear-gradient(180deg, var(--bg-top) 0%, var(--bg-mid) 45%, var(--bg-bottom) 100%);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font);
  font-weight: var(--body-weight);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Faint geometric grid, fading out down the page */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
body::before {
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.55) 55%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.55) 55%, transparent 100%);
}
/* A very sparse starfield (dark mode only) */
body::after {
  background-image:
    radial-gradient(1px 1px at 23px 41px, var(--star), transparent 60%),
    radial-gradient(1px 1px at 157px 93px, var(--star), transparent 60%),
    radial-gradient(1.4px 1.4px at 271px 187px, var(--star), transparent 60%),
    radial-gradient(1px 1px at 83px 233px, var(--star), transparent 60%),
    radial-gradient(1px 1px at 341px 29px, var(--star), transparent 60%),
    radial-gradient(1.2px 1.2px at 213px 301px, var(--star), transparent 60%);
  background-size: 380px 330px;
  opacity: 0.35;
  mask-image: linear-gradient(to bottom, #000 0%, transparent 85%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 85%);
}

a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-strong); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--display-medium);
  letter-spacing: var(--display-tracking);
  line-height: var(--display-leading);
  text-wrap: balance;
}
p { margin: 0; }
img { max-width: 100%; height: auto; display: block; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 16px; }
.wrap--narrow { max-width: var(--wrap-narrow); }

.visually-hidden {
  position: absolute !important;
  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;
}

.skip-link {
  position: absolute; left: 12px; top: -48px; z-index: 20;
  padding: 8px 14px; background: var(--accent); color: var(--on-accent); font-weight: 600;
}
.skip-link:focus { top: 12px; }

/* Small uppercase labels used across the site */
.badge, .story__source, .callout__label, .pager__dir, .index-list__date, .hero__period {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: calc(0.74rem * var(--label-scale));
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ---- Buttons ----------------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4em;
  padding: 0.72em 1.3em;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font: 600 0.95rem/1 var(--font);
  text-decoration: none;
  cursor: pointer;
  transition: box-shadow 160ms ease, border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}
.btn--primary { background: var(--accent-grad); color: var(--on-accent); }
.btn--primary:hover { color: var(--on-accent); box-shadow: var(--glow); }
.btn--ghost { background: transparent; color: var(--text); border-color: var(--line-strong); }
.btn--ghost:hover { color: var(--text); border-color: var(--accent); background: var(--accent-soft); }
.btn--small { padding: 0.58em 1em; font-size: 0.9rem; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; box-shadow: none; }

/* ---- Top bar ------------------------------------------------------------------------------------ */
/* Above the page, so the text-style menu opens over the content instead of under it */
.topbar { position: relative; z-index: 20; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg-top) 70%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.topbar__inner { display: flex; align-items: center; gap: 24px; min-height: 64px; }

.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; }
.logo:hover { color: var(--text); }
.logo__mark { width: 28px; height: 28px; color: var(--accent); flex: none; }
.logo__text {
  font-family: var(--font-display);
  font-weight: var(--display-bold);
  font-size: calc(1.08rem * var(--display-scale));
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
  white-space: nowrap;
}
.logo__text span { color: var(--accent); }

.topbar__nav { display: flex; gap: 4px; margin-right: auto; }
.topbar__nav a { padding: 6px 10px; color: var(--text-soft); font-size: 0.94rem; font-weight: 500; text-decoration: none; border-radius: var(--radius); }
.topbar__nav a:hover { color: var(--text); background: var(--accent-soft); }
.topbar__nav a[aria-current="page"] { color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); border-radius: 0; }

.topbar__actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px; }

.theme-toggle,
.font-menu__button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: transparent;
  color: var(--text-soft);
  cursor: pointer;
}
.theme-toggle:hover,
.font-menu__button:hover,
.font-menu[open] .font-menu__button { color: var(--accent); border-color: var(--accent); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle__sun { display: var(--show-sun); }
.theme-toggle__moon { display: var(--show-moon); }

/* Text-style picker: a small "Aa" button that opens a list of the five styles, each in its own font */
.font-menu { position: relative; }
.font-menu__button { list-style: none; font-family: var(--font-display); font-weight: var(--display-bold); font-size: calc(0.95rem * var(--display-scale)); line-height: 1; user-select: none; }
.font-menu__button::-webkit-details-marker { display: none; }
.font-menu__list {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 40;
  display: grid; gap: 2px;
  min-width: 190px;
  padding: 6px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--panel-solid);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
}
.font-menu__list button {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.font-menu__list button:hover { background: var(--accent-soft); }
.font-menu__list button[aria-pressed="true"] { color: var(--accent); }
.font-menu__list button[aria-pressed="true"]::after { content: "✓"; font-family: system-ui, sans-serif; font-size: 0.9rem; }
/* Each choice is shown in its own style (these fonts are only fetched when the list is opened) */
.font-menu__list [data-font="classic"] { font-family: "Exo 2", sans-serif; font-weight: 700; font-size: 1.05rem; }
.font-menu__list [data-font="blocky"] { font-family: "VT323", monospace; font-weight: 400; font-size: 1.45rem; }
.font-menu__list [data-font="lines"] { font-family: "Rajdhani", sans-serif; font-weight: 700; font-size: 1.2rem; }
.font-menu__list [data-font="dos"] { font-family: "IBM Plex Mono", monospace; font-weight: 500; font-size: 0.9rem; }
.font-menu__list [data-font="futuristic"] { font-family: "Orbitron", sans-serif; font-weight: 600; font-size: 0.82rem; letter-spacing: 0.04em; }

/* Your own story's status: waiting / sending / delivered. Only shown when there is something to say. */
.status {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--text-soft);
  font-size: 0.82rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.status:hover { color: var(--text); border-color: var(--accent); }
.status__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
.status--ok .status__dot { background: var(--ok); }
.status--warn .status__dot { background: var(--warn); }

/* ---- Hero ------------------------------------------------------------------------------------------ */
.hero { padding: clamp(48px, 8vw, 92px) 0 clamp(28px, 5vw, 48px); text-align: center; }
.hero__inner { display: flex; flex-direction: column; align-items: center; }
.badge { display: inline-block; max-width: 100%; margin-bottom: 18px; padding: 6px 13px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--accent-soft); color: var(--accent); }
.hero__title {
  font-family: var(--font-display);
  font-weight: var(--display-bold);
  font-size: calc(clamp(2.2rem, 5.6vw, 3.6rem) * var(--display-scale));
  line-height: calc(var(--display-leading) - 0.1);
  letter-spacing: var(--display-tracking);
  overflow-wrap: anywhere;
  text-shadow: var(--title-glow);
}
.hero__divider { width: 56px; height: 2px; margin: 22px auto 18px; border-radius: 2px; background: var(--accent-grad); box-shadow: var(--glow); }
.hero__sub { max-width: 58ch; color: var(--text-soft); font-size: 1.1rem; display: grid; gap: 12px; }
.hero__period { color: var(--accent); }
.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 8px; }

/* ---- Panels and stories, with small HUD-style corner brackets ------------------------------------ */
.panel,
.story {
  --bk: var(--bracket);
  position: relative;  /* also the containing block for the screen-reader-only text inside (see "main") */
  border: 1px solid var(--line);
  border-radius: 3px;
  background:
    linear-gradient(var(--bk), var(--bk)) top left / 12px 1px no-repeat,
    linear-gradient(var(--bk), var(--bk)) top left / 1px 12px no-repeat,
    linear-gradient(var(--bk), var(--bk)) top right / 12px 1px no-repeat,
    linear-gradient(var(--bk), var(--bk)) top right / 1px 12px no-repeat,
    linear-gradient(var(--bk), var(--bk)) bottom left / 12px 1px no-repeat,
    linear-gradient(var(--bk), var(--bk)) bottom left / 1px 12px no-repeat,
    linear-gradient(var(--bk), var(--bk)) bottom right / 12px 1px no-repeat,
    linear-gradient(var(--bk), var(--bk)) bottom right / 1px 12px no-repeat,
    var(--panel);
}
.panel { padding: clamp(20px, 3vw, 32px); }
.panel__title { font-size: 1.15rem; margin-bottom: 8px; }
.panel__actions { margin-top: 20px; }

/* Desktop: the top story, then rows sized by how much each story has to say (see nmn/site/layout.py) */
.stories { position: relative; display: grid; gap: var(--gap); }
.stories__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); }
.story--span-4 { grid-column: span 4; }
.story--span-5 { grid-column: span 5; }
.story--span-6 { grid-column: span 6; }
.story--span-7 { grid-column: span 7; }
.story--span-8 { grid-column: span 8; }
.story--span-12 { grid-column: span 12; }

.story { display: flex; flex-direction: column; overflow: hidden; transition: border-color 160ms ease, box-shadow 160ms ease; }
.story:hover { --bk: var(--accent); border-color: var(--line-strong); }
.story__body { display: flex; flex-direction: column; gap: 10px; padding: 22px 24px; height: 100%; }
.story__shot { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; border-bottom: 1px solid var(--line); }

.story__source { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: var(--accent); }
.story__flag { padding: 4px 8px; border-radius: 3px; background: var(--accent-soft); border: 1px solid var(--line-strong); color: var(--text); }
.story__title { font-size: calc(1.2rem * var(--display-scale)); overflow-wrap: anywhere; }
.story--large .story__title { font-size: calc(1.42rem * var(--display-scale)); }
.story--small .story__title { font-size: calc(1.1rem * var(--display-scale)); }
.story__blurb { color: var(--text-soft); overflow-wrap: anywhere; }
.story__meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: auto; padding-top: 6px; color: var(--text-dim); font-size: 0.88rem; }
.story__meta a { text-decoration: none; }
.story__meta a:hover { text-decoration: underline; }

.story--lead .story__body { padding: clamp(24px, 4vw, 42px); gap: 14px; }
.story--lead .story__title { font-size: calc(clamp(1.7rem, 3.6vw, 2.5rem) * var(--display-scale)); font-weight: var(--display-bold); max-width: 28ch; }
.story--lead .story__blurb { font-size: 1.12rem; max-width: 65ch; }

/* Phones: swipe sideways through the stories (built by site.js) */
.swipe-dots { display: none; }

/* ---- Weekly wrap callout, notices --------------------------------------------------------------- */
.callout {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  margin-bottom: var(--gap);
  padding: 14px 20px;
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--accent);
  border-radius: 3px;
  background: var(--accent-soft);
  color: var(--text);
  text-decoration: none;
}
.callout:hover { color: var(--text); box-shadow: var(--glow); }
.callout__label { color: var(--accent); }
.callout__text { flex: 1 1 260px; color: var(--text-soft); }
.callout__text strong { color: var(--text); font-weight: 600; }
.callout__go { color: var(--accent); font-size: 1.2rem; }

.notice { padding: 14px 18px; border: 1px solid var(--line); border-left: 3px solid var(--accent); background: var(--accent-soft); color: var(--text-soft); }

/* ---- Previous / next ---------------------------------------------------------------------------- */
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); margin-top: calc(var(--gap) * 1.5); }
.pager__link { display: flex; flex-direction: column; gap: 6px; padding: 16px 20px; border: 1px solid var(--line); border-radius: 3px; background: var(--panel); color: var(--text); text-decoration: none; transition: border-color 160ms ease; }
.pager__link:hover { color: var(--text); border-color: var(--line-strong); }
.pager__link--prev { grid-column: 1; }
.pager__link--next { grid-column: 2; align-items: flex-end; text-align: right; }
.pager__dir { color: var(--accent); }
.pager__date { font-family: var(--font-display); font-weight: var(--display-medium); font-size: calc(1rem * var(--display-scale)); }

/* ---- Archive-style lists ------------------------------------------------------------------------- */
.index-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.index-list li { border-bottom: 1px solid var(--line); }
.index-list__item { display: grid; gap: 6px; padding: 18px 8px; color: var(--text); text-decoration: none; }
.index-list__item:hover { color: var(--text); background: var(--accent-soft); }
.index-list__date { color: var(--accent); }
.index-list__title { font-family: var(--font-display); font-weight: var(--display-medium); font-size: calc(1.1rem * var(--display-scale)); overflow-wrap: anywhere; }
.index-list__meta { color: var(--text-dim); font-size: 0.88rem; }

/* ---- Submit form and outbox --------------------------------------------------------------------- */
.form { display: grid; gap: 22px; }
.field { display: grid; gap: 8px; align-content: start; }
.field label, .checks legend { font-weight: 600; }
.field__row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; }
.field-pair { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 8px 16px; }
.field-pair__help { grid-column: 1 / -1; }
.optional { font-weight: 400; color: var(--text-dim); }
.help { color: var(--text-dim); font-size: 0.88rem; }
.counter { color: var(--text-dim); font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.counter.is-off { color: var(--warn); }

textarea, input[type="text"], select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--field);
  color: var(--text);
  font: inherit;
  font-size: 1rem;
  line-height: 1.55;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
select { appearance: none; -webkit-appearance: none; padding-right: 38px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-soft) 50%), linear-gradient(135deg, var(--text-soft) 50%, transparent 50%);
  background-position: calc(100% - 19px) 55%, calc(100% - 13px) 55%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat; }
select option { background: var(--panel-solid); color: var(--text); }
textarea { resize: vertical; min-height: 180px; }
textarea:focus, input[type="text"]:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.checks { display: grid; gap: 12px; margin: 0; padding: 0; border: 0; }
.checks legend { margin-bottom: 10px; padding: 0; }
.check { display: flex; align-items: flex-start; gap: 12px; color: var(--text-soft); cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 3px 0 0; flex: none; accent-color: var(--accent-strong); cursor: pointer; }

/* Honeypot: off-screen for people, present for naive bots */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.captcha:empty { display: none; }

.form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.draft-note { color: var(--text-dim); font-size: 0.88rem; }

.form__status { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px 16px; border: 1px solid var(--line); border-left: 3px solid var(--accent); color: var(--text-soft); }
.form__status--ok { border-left-color: var(--ok); }
.form__status--error { border-left-color: var(--warn); }
.form__status p { flex: 1 1 260px; }

.outbox { margin-bottom: var(--gap); border-left: 3px solid var(--accent); }
.outbox__text { color: var(--text-soft); }
.outbox__preview { margin-top: 12px; padding: 10px 14px; border-left: 2px solid var(--line-strong); color: var(--text-dim); font-style: italic; overflow-wrap: anywhere; }
.outbox__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }

.fineprint { display: grid; gap: 8px; margin-top: 18px; color: var(--text-dim); font-size: 0.88rem; }
.plain-list { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; color: var(--text-soft); }

/* Sending a saved story from any page */
.dock {
  position: fixed; right: 16px; bottom: 16px; z-index: 30;
  width: min(360px, calc(100vw - 32px));
  display: grid; grid-template-columns: 1fr auto; gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--accent);
  border-radius: 3px;
  background: var(--panel-solid);
  color: var(--text-soft);
  font-size: 0.94rem;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}
.dock--ok { border-left-color: var(--ok); }
.dock--warn { border-left-color: var(--warn); }
.dock__captcha { grid-column: 1 / -1; }
.dock__captcha:empty { display: none; }
.dock__close { align-self: start; padding: 0 4px; border: 0; background: none; color: var(--text-dim); font-size: 1.3rem; line-height: 1; cursor: pointer; }
.dock__close:hover { color: var(--text); }

/* ---- Prose (about page) ------------------------------------------------------------------------ */
.prose { display: grid; gap: 14px; }
.prose h2 { margin-top: 10px; font-size: calc(1.2rem * var(--display-scale)); }
.prose h2:first-child { margin-top: 0; }
.prose p { color: var(--text-soft); }

/* ---- Page frame and footer ----------------------------------------------------------------------- */
/* `main` is positioned and clips sideways overflow. Screen-reader-only text is absolutely positioned, and
   without a positioned ancestor it sits at its natural spot, which inside the swipeable row is far off to
   the right. That used to stretch the whole page several screens wide, so phones zoomed out to fit it. */
main { position: relative; overflow-x: clip; flex: 1; padding-bottom: clamp(48px, 8vw, 88px); }

.footer { border-top: 1px solid var(--line); background: color-mix(in srgb, var(--bg-bottom) 80%, transparent); }
.footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; padding-block: 40px 28px; }
.footer__brand { display: grid; gap: 10px; max-width: 42ch; color: var(--text-dim); font-size: 0.92rem; }
.footer__title { margin-bottom: 10px; font-size: calc(0.95rem * var(--display-scale)); }
.footer__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 0.92rem; }
.footer__links a { color: var(--text-soft); text-decoration: none; }
.footer__links a:hover { color: var(--accent); }
.footer__bottom { padding-block: 18px 28px; border-top: 1px solid var(--line); color: var(--text-dim); font-size: 0.84rem; }

/* ---- Responsive ------------------------------------------------------------------------------------ */
@media (max-width: 960px) {
  /* Tablets: two even columns; an odd last story spans both */
  .stories__grid > .story { grid-column: span 6; }
  .stories__grid > .story:last-child:nth-child(odd) { grid-column: span 12; }
}

@media (max-width: 860px) {
  .topbar__inner { flex-wrap: wrap; gap: 8px 12px; padding-block: 10px; }
  .topbar__actions { margin-left: auto; }
  .topbar__nav { order: 3; width: 100%; margin: 0 0 0 -10px; overflow-x: auto; scrollbar-width: none; }
  .topbar__nav::-webkit-scrollbar { display: none; }
  .topbar__nav a { white-space: nowrap; }
}

@media (max-width: 720px) {
  /* Phones: every story in one row you swipe through, each snapping into place */
  .stories {
    display: flex;
    gap: 12px;
    margin-inline: -16px;
    padding: 2px 16px 4px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 16px;
    scrollbar-width: none;
  }
  .stories::-webkit-scrollbar { display: none; }
  .stories__grid { display: contents; }
  .stories .story,
  .stories__grid > .story,
  .stories__grid > .story:last-child:nth-child(odd) { flex: 0 0 86%; scroll-snap-align: start; }
  .story--lead .story__title { font-size: calc(1.55rem * var(--display-scale)); }

  .swipe-dots { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
  .swipe-dots button {
    width: 8px; height: 8px; padding: 0;
    border: 0; border-radius: 50%;
    background: var(--line-strong);
    cursor: pointer;
    transition: width 160ms ease, background-color 160ms ease;
  }
  .swipe-dots button[aria-current="true"] { width: 22px; border-radius: 4px; background: var(--accent); }

  .field-pair { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 480px) {
  .logo__text { font-size: calc(0.98rem * var(--display-scale)); letter-spacing: 0.08em; }
  .topbar__inner { gap: 8px; }
  .topbar__actions { gap: 8px; }
  .btn__long { display: none; }  /* "Submit" on small phones, so the top bar stays on one line */
  .status { font-size: 0.78rem; padding: 4px 9px; }
  .pager { grid-template-columns: 1fr; }
  .pager__link--prev, .pager__link--next { grid-column: auto; }
  .font-menu__list { min-width: 172px; }
}

@media (max-width: 400px) {
  .logo__mark { display: none; }  /* room for the three buttons on the narrowest phones */
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}

@media print {
  body { background: #fff; color: #000; }
  body::before, body::after, .topbar, .footer, .pager, .callout, .dock, .swipe-dots { display: none; }
  .story, .panel { background: none; border: 1px solid #999; }
}