/* The Hmm Herald: calm and friendly, built from hexagons. Panels, buttons, labels and dots are six-sided,
   a honeycomb strip runs along the very top of the page, and the headings use a soft rounded font. The pixel
   fonts are options in the "Aa" menu only. Day is the default; night is a dark cave. All art is our own. */

/* ---- 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: "Pixelify Sans"; src: url("../fonts/pixelify-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Pixelify Sans"; src: url("../fonts/pixelify-sans-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("../fonts/nunito-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("../fonts/nunito-latin-800-normal.woff2") format("woff2"); font-weight: 800; 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: "Press Start 2P"; src: url("../fonts/press-start-2p-latin-400-normal.woff2") format("woff2"); font-weight: 400; 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: "Atkinson Hyperlegible"; src: url("../fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("../fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }

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

  /* Sky above, stone-white panels, soft warm outlines */
  --sky-top: #8fcdf7;
  --sky-bottom: #e2f3ff;
  --page: #e2f3ff;          /* matches the gradient's end, so long pages never show a band */
  --panel: #f4f1ea;
  --panel-solid: #f4f1ea;
  --slot: #e6e1d6;          /* buttons, fields, nav slots */
  --edge: #968c75;          /* the outline: warm stone, not black */
  --bevel-hi: #ffffff;
  --bevel-lo: #ddd6c6;
  --line: #cfc8b8;
  --line-strong: #6c7366;
  --field: #ffffff;
  --footer-bg: #e6e1d6;

  --text: #1c2418;
  --text-soft: #36432f;
  --text-dim: #4f5a49;
  --hero-sub: #26331f;
  --title-shadow: rgba(255, 255, 255, 0.75);

  --accent: #1d6b22;        /* links */
  --accent-strong: #124d17;
  --accent-soft: rgba(47, 122, 31, 0.12);
  --btn: #2f7a1f;
  --btn-hi: #4c9a35;
  --btn-lo: #1f5714;
  --on-btn: #ffffff;
  --ring: #14301a;          /* focus and selected slot */

  --grass: #5fa83a;
  --grass-dark: #4a8a2c;
  --dirt: #8b5a2f;
  --dirt-dark: #6b4423;
  --wood: #c99a55;          /* signs and flags */
  --wood-dark: #7d5426;
  --on-wood: #2b1a08;

  --logo-edge: #1c2418;
  --ok: #1f7a3a;
  --warn: #9a5b00;
  --shadow: rgba(0, 0, 0, 0.28);
  --lift: rgba(90, 76, 50, 0.18);   /* the soft ledge under each block */
  --backdrop: rgba(20, 30, 18, 0.62);

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

  /* Text style "Classic". The other styles override these in html[data-font="…"] below. */
  --font-display: "Nunito", ui-rounded, 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: 800;
  --display-medium: 800;
  --display-tracking: -0.01em;
  --display-leading: 1.18;   /* line height of titles */
  --body-weight: 400;
  --body-leading: 1.6;

  --radius-small: 10px;    /* text fields */
  --wrap: 1100px;
  --wrap-narrow: 720px;
  --gap: 20px;
}

/* ---- Night: a dark cave. Used when chosen, or when the device prefers dark. ---------------------- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --sky-top: #101316;
  --sky-bottom: #1b1f24;
  --page: #1b1f24;
  --panel: #262b31;
  --panel-solid: #262b31;
  --slot: #1c2025;
  --edge: #3a414b;
  --bevel-hi: #333a43;
  --bevel-lo: #1f2328;
  --line: #3a414a;
  --line-strong: #7b8693;
  --field: #14171b;
  --footer-bg: #101316;
  --text: #e9eee4;
  --text-soft: #c4cdbf;
  --text-dim: #9ba696;
  --hero-sub: #c4cdbf;
  --title-shadow: rgba(0, 0, 0, 0.8);
  --accent: #ffb84d;        /* torch amber */
  --accent-strong: #ffd28a;
  --accent-soft: rgba(255, 184, 77, 0.12);
  --ring: #ffd479;
  --logo-edge: #e9eee4;
  --ok: #5fd18a;
  --warn: #ffc05a;
  --shadow: rgba(0, 0, 0, 0.55);
  --lift: rgba(0, 0, 0, 0.45);
  --backdrop: rgba(0, 0, 0, 0.74);
  --show-sun: inline-block;
  --show-moon: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --sky-top: #101316;
    --sky-bottom: #1b1f24;
    --page: #1b1f24;
    --panel: #262b31;
    --panel-solid: #262b31;
    --slot: #1c2025;
    --edge: #3a414b;
    --bevel-hi: #333a43;
    --bevel-lo: #1f2328;
    --line: #3a414a;
    --line-strong: #7b8693;
    --field: #14171b;
    --footer-bg: #101316;
    --text: #e9eee4;
    --text-soft: #c4cdbf;
    --text-dim: #9ba696;
    --hero-sub: #c4cdbf;
    --title-shadow: rgba(0, 0, 0, 0.8);
    --accent: #ffb84d;
    --accent-strong: #ffd28a;
    --accent-soft: rgba(255, 184, 77, 0.12);
    --ring: #ffd479;
    --logo-edge: #e9eee4;
    --ok: #5fd18a;
    --warn: #ffc05a;
    --shadow: rgba(0, 0, 0, 0.55);
    --lift: rgba(0, 0, 0, 0.45);
    --backdrop: rgba(0, 0, 0, 0.74);
    --show-sun: inline-block;
    --show-moon: none;
  }
}

/* ---- Text styles. Each sets the fonts plus the sizing tweaks that keep it comfortable to read. ------- */
html[data-font="arcade"] {      /* wide 8-bit titles over a pixel body */
  --font-display: "Press Start 2P", ui-monospace, monospace;
  --font: "VT323", ui-monospace, monospace;
  --font-label: "VT323", ui-monospace, monospace;
  --root-scale: 1.22;
  --display-scale: 0.46;
  --label-scale: 1.05;
  --display-bold: 400;
  --display-medium: 400;
  --display-tracking: 0;
  --display-leading: 1.45;
  --body-leading: 1.3;
}
html[data-font="terminal"] {    /* one pixel monospace font for everything */
  --font-display: "VT323", ui-monospace, monospace;
  --font: "VT323", ui-monospace, monospace;
  --font-label: "VT323", ui-monospace, monospace;
  --root-scale: 1.24;
  --display-scale: 1.3;
  --label-scale: 1.1;
  --display-bold: 400;
  --display-medium: 400;
  --display-tracking: 0.02em;
  --display-leading: 1;
  --body-leading: 1.3;
}
html[data-font="pixel"] {       /* soft pixel-art titles, plain body */
  --font-display: "Pixelify Sans", ui-sans-serif, system-ui, sans-serif;
  --display-bold: 700;
  --display-medium: 700;
  --display-tracking: 0;
  --display-leading: 1.15;
}
html[data-font="readable"] {    /* the most legible: designed for low-vision readers */
  --font-display: "Atkinson Hyperlegible", ui-sans-serif, system-ui, sans-serif;
  --font: "Atkinson Hyperlegible", ui-sans-serif, system-ui, sans-serif;
  --font-label: "Atkinson Hyperlegible", ui-sans-serif, system-ui, sans-serif;
  --root-scale: 1.06;
  --display-scale: 1;
  --body-weight: 400;
  --display-bold: 700;
  --display-medium: 700;
  --display-tracking: 0;
  --display-leading: 1.2;
}

/* ---- 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(--page);
  background-image: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-bottom) 520px);
  background-repeat: no-repeat;
  color: var(--text);
  font-family: var(--font);
  font-weight: var(--body-weight);
  font-size: 1.0625rem;
  line-height: var(--body-leading);
  -webkit-font-smoothing: antialiased;
}

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

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: -64px; z-index: 50;
  padding: 8px 14px; border: 2px solid var(--edge); border-radius: var(--radius-small); background: var(--panel-solid); color: var(--text); font-weight: 600;
}
.skip-link:focus { top: 12px; }

/* Small uppercase labels used across the site */
.badge, .story__source, .story__more-label, .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.12em;
  text-transform: uppercase;
}

/* ---- Hexagons ------------------------------------------------------------------------------------------
   Every panel, button and label is a stretched hexagon. The outline is the element's own background and
   ::before is the fill, inset by the outline width (--bw); clip-path cuts both into six sides (--cut is how far
   the pointed ends reach in). A clip-path also clips outlines, so keyboard focus thickens the rim instead. */
.panel,
.story,
.pager__link,
.dock,
.callout,
.notice-dialog__body,
.form__status,
.notice,
.index-list,
.font-menu__list,
.btn,
.topbar__nav a,
.status,
.story__more summary,
.footer__donate,
.badge,
.story__flag,
.font-menu__list button,
.theme-toggle,
.font-menu__button {
  --rim: var(--edge);
  --fill: var(--panel);
  --bw: 2px;
  --cut: 18px;
  position: relative;
  isolation: isolate;
  border: 0;
  background: var(--rim);
  clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% 50%, calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 50%);
}
.panel::before,
.story::before,
.pager__link::before,
.dock::before,
.callout::before,
.notice-dialog__body::before,
.form__status::before,
.notice::before,
.index-list::before,
.font-menu__list::before,
.btn::before,
.topbar__nav a::before,
.status::before,
.story__more summary::before,
.footer__donate::before,
.badge::before,
.story__flag::before,
.font-menu__list button::before,
.theme-toggle::before,
.font-menu__button::before {
  content: "";
  position: absolute;
  inset: var(--bw);
  z-index: -1;
  background: var(--fill);
  clip-path: polygon(calc(var(--cut) - 1px) 0, calc(100% - var(--cut) + 1px) 0, 100% 50%, calc(100% - var(--cut) + 1px) 100%, calc(var(--cut) - 1px) 100%, 0 50%);
}
.btn:focus-visible,
.topbar__nav a:focus-visible,
.status:focus-visible,
.story__more summary:focus-visible,
.footer__donate:focus-visible,
.pager__link:focus-visible,
.callout:focus-visible,
.font-menu__list button:focus-visible,
.theme-toggle:focus-visible,
.font-menu__button:focus-visible { outline: none; --rim: var(--ring); --bw: 4px; }

/* Smaller shapes reach in less */
.btn, .status, .footer__donate { --cut: 10px; }
.topbar__nav a, .story__more summary, .font-menu__list button { --cut: 9px; }
.notice, .form__status, .dock { --cut: 14px; }
.badge, .story__flag { --cut: 8px; --rim: var(--wood-dark); --fill: var(--wood); }
.font-menu__list { --cut: 16px; }

/* Panels with a coloured bar inside the left end, just past where the pointed tip meets the straight sides */
.callout, .notice, .form__status, .outbox, .dock {
  --bar: var(--grass);
  --face: var(--panel);
  --fill: linear-gradient(90deg, var(--face) 0 var(--cut), var(--bar) var(--cut) calc(var(--cut) + 6px), var(--face) calc(var(--cut) + 6px));
}

/* ---- Buttons ------------------------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4em;
  padding: 0.7em calc(1.2em + 8px);
  --fill: var(--slot);
  color: var(--text);
  font: 600 0.95rem/1 var(--font);
  text-decoration: none;
  cursor: pointer;
}
.btn:hover { color: var(--text); --fill: var(--panel); }
.btn:active { transform: translateY(1px); }
.btn--primary { --rim: var(--btn-lo); --fill: var(--btn); color: var(--on-btn); }
.btn--primary:hover { --fill: #378a24; color: var(--on-btn); }
.btn--ghost { --fill: var(--panel); }
.btn--ghost:hover { --fill: var(--slot); }
.btn--small { padding: 0.55em calc(0.95em + 7px); font-size: 0.9rem; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

/* ---- Top bar: a honeycomb strip along the very top of the page ---------------------------------------- */
/* Above the page, so the text-style menu opens over the content instead of under it */
.topbar { position: relative; z-index: 20; padding-top: 22px; border-bottom: 2px solid var(--edge); background: var(--panel-solid); }
.topbar::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0;
  height: 18px;
  pointer-events: none;
  background: url("../img/honeycomb.svg") repeat-x 0 0 / 14px 24.25px;
}
.topbar__inner { display: flex; align-items: center; gap: 22px; min-height: 66px; }

.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; }
.logo:hover { color: var(--text); }
.logo__mark { width: 32px; height: 32px; flex: none; }
.logo__mark .l-top { fill: var(--grass); }
.logo__mark .l-left { fill: var(--dirt); }
.logo__mark .l-right { fill: var(--dirt-dark); }
.logo__mark .l-lip { fill: var(--grass-dark); }
.logo__text {
  font-family: var(--font-display);
  font-weight: var(--display-bold);
  font-size: calc(1.28rem * var(--display-scale));
  line-height: 1;
  letter-spacing: -0.005em;
  color: var(--text);
  white-space: nowrap;
}
.logo__text span { color: var(--accent); }

/* The menu: each page is a hexagon, and the page you are on is the filled one */
.topbar__nav { display: flex; gap: 6px; margin-right: auto; }
.topbar__nav a {
  padding: 7px 20px;
  --rim: transparent;
  --fill: transparent;
  color: var(--text-soft);
  font-size: 0.94rem;
  font-weight: 600;
  text-decoration: none;
}
.topbar__nav a:hover { color: var(--text); --rim: var(--edge); --fill: var(--panel); }
.topbar__nav a[aria-current="page"] { color: var(--text); --rim: var(--ring); --fill: var(--panel); }

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

/* Round-ish buttons are true hexagons, point up */
.theme-toggle,
.font-menu__button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 46px;
  padding: 0;
  --fill: var(--slot);
  color: var(--text);
  cursor: pointer;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.theme-toggle::before,
.font-menu__button::before { clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.theme-toggle:hover,
.font-menu__button:hover,
.font-menu[open] .font-menu__button { --fill: var(--panel); color: var(--accent); }
.theme-toggle svg { width: 22px; height: 22px; fill: currentColor; }
.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; }
/* The menu floats over the page; the shadow is on the wrapper because a clip-path would cut off its own */
.font-menu[open] { filter: drop-shadow(0 8px 12px var(--shadow)); }
.font-menu__list {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 40;
  display: grid; gap: 4px;
  min-width: 210px;
  padding: 14px 22px;
}
.font-menu__list button {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%;
  padding: 9px 18px;
  --rim: transparent;
  --fill: var(--panel);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.font-menu__list button:hover { --fill: var(--slot); }
.font-menu__list button[aria-pressed="true"] { --rim: var(--line-strong); --fill: var(--slot); color: var(--accent); }
.font-menu__list button[aria-pressed="true"]::after { content: ""; width: 10px; height: 11px; background: currentColor; flex: none; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
/* 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: "Nunito", sans-serif; font-weight: 800; font-size: 1.08rem; }
.font-menu__list [data-font="pixel"] { font-family: "Pixelify Sans", sans-serif; font-weight: 700; font-size: 1.1rem; }
.font-menu__list [data-font="arcade"] { font-family: "Press Start 2P", monospace; font-weight: 400; font-size: 0.62rem; }
.font-menu__list [data-font="terminal"] { font-family: "VT323", monospace; font-weight: 400; font-size: 1.4rem; }
.font-menu__list [data-font="readable"] { font-family: "Atkinson Hyperlegible", sans-serif; font-weight: 700; font-size: 1rem; }

/* 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 20px;
  --fill: var(--slot);
  color: var(--text-soft);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.status:hover { color: var(--text); --fill: var(--panel); }
.status__dot { width: 9px; height: 10px; background: var(--accent); flex: none; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.status--ok .status__dot { background: var(--ok); }
.status--warn .status__dot { background: var(--warn); }

/* ---- Hero ------------------------------------------------------------------------------------------ */
.hero { padding: clamp(40px, 7vw, 80px) 0 clamp(28px, 5vw, 44px); text-align: center; }
.hero__inner { display: flex; flex-direction: column; align-items: center; }
/* The badge is a little oak hexagon */
.badge { display: inline-block; max-width: 100%; margin-bottom: 18px; padding: 6px 24px; color: var(--on-wood); }
.hero__title {
  font-family: var(--font-display);
  font-weight: var(--display-bold);
  font-size: calc(clamp(2.1rem, 5.6vw, 3.5rem) * var(--display-scale));
  line-height: calc(var(--display-leading) - 0.05);
  letter-spacing: var(--display-tracking);
  overflow-wrap: anywhere;
}
.hero__divider { display: flex; justify-content: center; gap: 8px; margin: 22px auto 18px; }
.hero__divider i { display: block; width: 16px; height: 18px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.hero__divider i:nth-child(1) { background: var(--grass); }
.hero__divider i:nth-child(2) { background: var(--grass-dark); }
.hero__divider i:nth-child(3) { background: var(--dirt); }
.hero__sub { max-width: 58ch; color: var(--hero-sub); 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 --------------------------------------------------------------------------- */
.panel,
.story { position: relative; }  /* also the containing block for the screen-reader-only text inside (see "main") */
.panel { padding: clamp(20px, 3vw, 32px) clamp(26px, 4vw, 42px); }
.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 hmm/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; }
.story:hover { --rim: var(--accent); }
.story__body { display: flex; flex-direction: column; gap: 10px; padding: 24px 32px; height: 100%; }
.story__shot { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }

.story__source { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: var(--text-dim); }
.story__flag { padding: 4px 16px; color: var(--on-wood); }
.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; font-weight: 600; }
.story__meta a:hover { text-decoration: underline; }

/* "Read more": a plain account of what actually happened, under the funny summary */
.story__more summary { display: inline-flex; align-items: center; gap: 8px; padding: 4px 18px; --fill: var(--slot); color: var(--text); font-size: 0.88rem; font-weight: 600; cursor: pointer; list-style: none; user-select: none; }
.story__more summary::-webkit-details-marker { display: none; }
.story__more summary::after { content: ""; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid currentColor; }
.story__more[open] summary::after { transform: rotate(180deg); }
.story__more summary:hover { --fill: var(--panel); }
.story__more:not([open]) .story__more-open, .story__more[open] .story__more-closed { display: none; }
.story__more-body { display: grid; gap: 6px; margin-top: 12px; padding: 10px 14px; border-left: 4px solid var(--grass); border-radius: 8px; background: var(--slot); }
.story__more-label { color: var(--text-dim); }
.story__details { color: var(--text-soft); white-space: pre-line; overflow-wrap: anywhere; }

/* The top story has a strip of grass along its top edge */
.story--lead::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--grass); }
.story--lead .story__body { padding: clamp(28px, 4vw, 42px) clamp(34px, 5vw, 56px); 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: 16px 34px 16px 46px;
  color: var(--text);
  text-decoration: none;
}
.callout:hover { color: var(--text); --face: var(--slot); --rim: var(--accent); }
.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 30px 14px 38px; 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 34px; color: var(--text); text-decoration: none; }
.pager__link:hover { color: var(--text); --fill: var(--slot); --rim: var(--accent); }
.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: 2px; }
.index-list li + li { border-top: 2px solid var(--line); }
.index-list__item { display: grid; gap: 6px; padding: 18px 30px; 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); font-weight: 600; }

/* Fields look pressed in, like a sign you are writing on */
textarea, input[type="text"], select {
  width: 100%;
  padding: 12px 14px;
  border: 2px solid var(--edge);
  border-radius: var(--radius-small);
  background: var(--field);
  box-shadow: inset 0 2px 0 var(--bevel-lo);
  color: var(--text);
  font: inherit;
  font-size: 1rem;
  line-height: 1.55;
}
select { appearance: none; -webkit-appearance: none; padding-right: 38px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--text) 50%), linear-gradient(135deg, var(--text) 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: 3px solid var(--ring); outline-offset: 2px; }

.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: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--btn); 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 30px 12px 38px; color: var(--text-soft); }
.form__status--ok { --bar: var(--ok); }
.form__status--error { --bar: var(--warn); }
.form__status p { flex: 1 1 260px; }

.outbox { margin-bottom: var(--gap); padding-left: calc(clamp(26px, 4vw, 42px) + 12px); }
.outbox__text { color: var(--text-soft); }
.outbox__preview { margin-top: 12px; padding: 10px 14px; border-left: 6px solid var(--line-strong); border-radius: 8px; background: var(--slot); 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(380px, calc(100vw - 32px));
  display: grid; grid-template-columns: 1fr auto; gap: 10px;
  padding: 16px 30px 16px 40px;
  color: var(--text-soft);
  font-size: 0.94rem;
}
.dock--ok { --bar: var(--ok); }
.dock--warn { --bar: var(--warn); }
.dock__captcha { grid-column: 1 / -1; }
.dock__captcha:empty { display: none; }
.dock__close { align-self: start; padding: 0 6px; border: 0; background: none; color: var(--text-dim); font-size: 1.3rem; line-height: 1; cursor: pointer; }
.dock__close:hover { color: var(--text); }

/* ---- The "you're leaving" notice before Reddit links: a small inventory window ---------------------- */
.notice-dialog { width: min(480px, calc(100vw - 32px)); padding: 0; border: 0; background: transparent; color: var(--text); overflow: visible; }
.notice-dialog::backdrop { background: var(--backdrop); }
.notice-dialog__body { display: grid; gap: 14px; padding: clamp(24px, 3vw, 30px) clamp(34px, 5vw, 46px); }
.notice-dialog__title { padding-bottom: 10px; border-bottom: 2px solid var(--line); font-size: calc(1.3rem * var(--display-scale)); }
.notice-dialog__body p { color: var(--text-soft); }
.notice-dialog__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }

/* ---- 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 { position: relative; border-top: 2px solid var(--edge); background: var(--footer-bg); }
.footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; padding-block: 36px 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; font-weight: 600; }
.footer__links a:hover { color: var(--accent); text-decoration: underline; }
.footer__bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px;
  padding-block: 18px 28px;
  border-top: 2px solid var(--line);
  color: var(--text-dim);
  font-size: 0.84rem;
}
.footer__bottom p { max-width: 70ch; }
.footer__donate {
  padding: 7px 22px;
  --fill: var(--slot);
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
}
.footer__donate:hover { --fill: var(--panel); color: var(--accent); }

/* ---- 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; overflow-x: auto; scrollbar-width: none; }
  .topbar__nav::-webkit-scrollbar { display: none; }
  .topbar__nav a { flex: 1 0 auto; text-align: center; 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 6px;
    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)); }

  /* Position dots are little hexagons; the current one is green */
  .swipe-dots { display: flex; justify-content: center; gap: 6px; margin-top: 16px; }
  .swipe-dots button {
    width: 17px; height: 19px; padding: 0;
    border: 0;
    background: var(--line-strong);
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    cursor: pointer;
  }
  .swipe-dots button[aria-current="true"] { background: var(--btn); }
  .swipe-dots button:focus-visible { outline: none; background: var(--ring); }

  .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(1.02rem * var(--display-scale)); }
  .topbar__inner { gap: 8px; }
  .topbar__actions { gap: 8px; }
  .topbar__nav { gap: 2px; }
  .topbar__nav a { padding: 6px 13px; font-size: 0.86rem; }
  .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 */
  .nav__long { display: none; }   /* "Weekly", so all four menu hexagons fit */
  .topbar__nav a { padding: 6px 10px; }
}

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

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