/* PaperShort — editorial identity stylesheet (D13).
   Typography is the identity: STIX Two Text (the serif designed for
   scientific publishing; self-hosted latin woff2 in static/fonts/, OFL
   license alongside) carries everything editorial. A system sans carries
   UI chrome (chips, nav, metadata). No frameworks, no external requests
   of any kind (D9).

   Both color schemes are designed, not derived: light is warm paper with
   near-black ink; dark is a deep ink blue-black (never pure #000) with
   softened warm text and category colors lifted for the dark ground. */

/* ---------- Self-hosted fonts ---------- */

@font-face {
  font-family: "STIX Two Text";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/stix-two-text-latin-400-normal.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: "STIX Two Text";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/stix-two-text-latin-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: "STIX Two Text";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/stix-two-text-latin-600-normal.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: "STIX Two Text";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/stix-two-text-latin-700-normal.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;
}

/* ---------- Design tokens ---------- */

:root {
  color-scheme: light dark;

  /* Light: warm paper, near-black ink, restrained bottle-green accent. */
  --bg: #f7f4ec;
  --bg-soft: #f0ecdf;
  --text: #1e1b14;
  --text-soft: #5b5548;
  --text-faint: #8a8376;
  --line: #ddd6c4;
  --rule: #2c2820; /* strong editorial rules: masthead, footer */
  --accent: #1c6b50;
  --accent-strong: #14523c;
  --like: #b23a31;

  --serif: "STIX Two Text", "STIX Two Text Local", Charter, "Iowan Old Style",
    Georgia, Cambria, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --wrap: 1120px;
  --measure: 41rem; /* ~68ch of STIX Two Text at body size */
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Dark: deep ink blue-black, softened warm text, brighter accent. */
    --bg: #131720;
    --bg-soft: #1a1f2a;
    --text: #e8e6e1;
    --text-soft: #a9a69d;
    --text-faint: #7e7b72;
    --line: #2b303c;
    --rule: #d3d0c8;
    --accent: #5fbf9b;
    --accent-strong: #82d3b4;
    --like: #e5837a;
  }
}

/* Category colors arrive as an inline --cat-color (hex tuned for paper).
   Everything reads --cat / --cat-text instead, so dark mode can lift the
   same ten hues toward a cool white for the blue-black ground. */
[style*="--cat-color"] {
  --cat: var(--cat-color);
  --cat-text: color-mix(in srgb, var(--cat-color) 72%, var(--text));
}

@media (prefers-color-scheme: dark) {
  [style*="--cat-color"] {
    --cat: color-mix(in oklab, var(--cat-color) 62%, #dfe7ea);
    --cat-text: color-mix(in oklab, var(--cat-color) 55%, var(--text));
  }
}

/* ---------- Base ---------- */

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
}

a {
  color: inherit;
}

img {
  max-width: 100%;
  display: block;
}

time,
.page-status,
.citation-fields {
  font-variant-numeric: tabular-nums;
}

::selection {
  background: color-mix(in srgb, var(--accent) 26%, transparent);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }
}

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 1.25rem;
}

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

/* Small-caps-style label: the site's recurring editorial marker. */
.chip,
.site-nav a,
.footer-nav a,
.cover-label,
.card-category,
.card-date,
.article-date,
.more-in-category,
.more-in-date,
.citation-title,
.citation-fields dt,
.more-in-title,
.pagination {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.09em;
}

/* ---------- Masthead ---------- */

.site-header {
  /* The double rule: the classic front-page signature. */
  border-bottom: 3px double var(--rule);
  background: var(--bg);
}

.header-inner {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding-top: 1.3rem;
  padding-bottom: 1.05rem;
}

.logo {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  text-decoration: none;
}

/* Monogram: the wordmark reduced to its initials, set tight with the
   accent full stop that also ends the wordmark. */
.logo-mark {
  font-size: 1.9rem;
  letter-spacing: -0.045em;
  padding-right: 0.02em;
}

.logo-word {
  font-size: 1.62rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--text);
}

/* On phones the monogram carries the brand on its own. */
@media (max-width: 560px) {
  .logo-word {
    display: none;
  }
}

/* Wordmark terminal: a full stop in the accent — pure typography, no logo. */
.logo-mark::after,
.logo-word::after {
  content: ".";
  color: var(--accent);
}

.masthead-tagline {
  margin: 0 0 0 auto;
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.9rem;
  line-height: 1.2;
  text-align: right;
  /* One line, always: it trims rather than wrapping the masthead taller. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 46vw;
  color: var(--text-faint);
}

.tagline-short {
  display: none;
}

@media (max-width: 720px) {
  .masthead-tagline {
    font-size: 0.8rem;
    max-width: 12ch;
    line-height: 1.25;
  }

  .tagline-full {
    display: none;
  }

  .tagline-short {
    display: inline;
  }
}

@media (max-width: 800px) {
  .masthead-tagline {
    display: none;
  }
}

.site-nav {
  display: flex;
  gap: 1.4rem;
}

.site-nav a {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-soft);
  text-decoration: none;
  transition: color 120ms ease;
}

.site-nav a:hover {
  color: var(--text);
}

/* ---------- Category chips: a newspaper section bar, not pills ---------- */

.category-nav {
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: saturate(160%) blur(8px);
}

/* One horizontal row. The row itself scrolls; the page never does. Fading
   edges hint that there is more to the right without adding chrome. */
.chip-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.1rem;
  /* One line, always. Whatever does not fit is moved into the "More"
     dropdown by app.js, so nothing is hidden and nothing scrolls. */
  overflow: visible;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  align-items: stretch;
  padding-top: 0.55rem;
  row-gap: 0;
  padding-bottom: 0;
}

.chip-row::-webkit-scrollbar {
  display: none;
}

/* Each category is a tab; the active one carries the underline. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex: 0 0 auto;
  padding: 0.6rem 0.9rem;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--text-soft);
  text-decoration: none;
  transition: color 120ms ease, border-color 120ms ease;
}

.chip:hover {
  color: var(--text);
  border-bottom-color: color-mix(in srgb, var(--cat) 45%, transparent);
}

.chip-active {
  color: var(--text);
  border-bottom-color: var(--cat);
}

/* "For you" is the default view, so it carries the site accent rather than
   a category colour. */
.chip-foryou {
  --cat: var(--accent);
}

/* The leading tab sits slightly inboard so it never hugs the viewport edge. */
/* Wide screens: let the ten fields breathe across the full measure. */
@media (min-width: 1000px) {
  .chip-row {
    justify-content: space-between;
  }

  .chip {
    padding: 0.65rem 0.35rem;
    font-size: 0.78rem;
  }
}

@media (max-width: 620px) {
  .chip {
    padding: 0.5rem 0.6rem;
    font-size: 0.69rem;
  }
}

}

/* ---------- Feed cards ---------- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  /* Row gap is deliberately larger than the column gap: cards read as a
     vertical list first, columns second. */
  gap: 2.4rem 2rem;
  /* Top value clears the sticky tab bar. Keep this in the shorthand — an
     earlier separate padding-top was silently overridden by it. */
  padding: 2rem 0 3rem;
}

.card-link {
  display: block;
  text-decoration: none;
}

/* Typographic category cover (D6): tinted paper panel, category bar,
   letter-spaced label, and the category glyph oversized and cropped at the
   corner — a deliberate composition, not a centered icon. */
.card-cover {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  padding: 1.05rem 1.1rem;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--cat) 16%, var(--bg-soft)) 0%,
    color-mix(in srgb, var(--cat) 7%, var(--bg-soft)) 100%
  );
  border: 1px solid color-mix(in srgb, var(--cat) 32%, var(--line));
  transition: border-color 140ms ease;
}

.card-cover::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--cat);
}

.cover-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--cat-text);
}

.cover-label::after {
  content: "";
  display: block;
  width: 2.1rem;
  height: 1px;
  margin-top: 0.5rem;
  background: currentcolor;
  opacity: 0.55;
}

.cover-icon {
  position: absolute;
  right: -0.12em;
  bottom: -0.22em;
  font-size: 6.75rem;
  line-height: 1;
  color: color-mix(in srgb, var(--cat) 30%, transparent);
}

.card-link:hover .card-cover {
  border-color: color-mix(in srgb, var(--cat) 60%, var(--line));
}

.card-cover-image {
  padding: 0;
  border: 1px solid var(--line);
  background: var(--bg-soft);
}

.card-cover-image::before {
  display: none;
}

.card-cover-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.card-body {
  padding-top: 0.95rem;
}

.card-category {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  color: var(--cat-text);
}

.card-headline {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.38rem;
  line-height: 1.22;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin: 0.4rem 0 0.45rem;
}

.card-link:hover .card-headline {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--text) 45%, transparent);
}

.card-dek {
  margin: 0 0 0.6rem;
  color: var(--text-soft);
  font-family: var(--serif);
  font-size: 0.98rem;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-date {
  font-size: 0.68rem;
  color: var(--text-faint);
}

/* Lead story: the first card becomes the front-page splash. */
@media (min-width: 880px) {
  .card-grid .card:first-child {
    grid-column: 1 / -1;
    padding-bottom: 2.8rem;
    border-bottom: 1px solid var(--line);
  }

  .card-grid .card:first-child .card-link {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 1.5rem 2.4rem;
    align-items: center;
  }

  .card-grid .card:first-child .card-body {
    padding-top: 0;
  }

  .card-grid .card:first-child .card-headline {
    font-size: 2.05rem;
    line-height: 1.14;
  }

  .card-grid .card:first-child .card-dek {
    font-size: 1.08rem;
    line-height: 1.55;
    -webkit-line-clamp: 4;
  }

  .card-grid .card:first-child .cover-icon {
    font-size: 9rem;
  }
}

/* ---------- Category page ---------- */

.category-header {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  padding: 2.5rem 0 0;
}

.category-header-icon {
  font-size: 1.9rem;
  line-height: 1;
  color: var(--cat);
  align-self: center;
}

.category-header h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 2.3rem;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0;
}

.category-intro {
  max-width: var(--measure);
  margin: 0.7rem 0 0;
  color: var(--text-soft);
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.08rem;
}

/* ---------- Article page ---------- */

.article {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 2.75rem 0 3.5rem;
}

.article-header .chip {
  margin-bottom: 1.2rem;
  font-size: 0.74rem;
}

.article-headline {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(2rem, 4.8vw, 2.7rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin: 0 0 0.85rem;
}

.article-dek {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.28rem;
  line-height: 1.45;
  color: var(--text-soft);
  margin: 0 0 1.05rem;
}

.article-date {
  font-size: 0.72rem;
  color: var(--text-faint);
}

.article-cover {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 21 / 9;
  border-radius: 3px;
  overflow: hidden;
  margin: 1.9rem 0 0;
  padding: 1.15rem 1.25rem;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--cat) 16%, var(--bg-soft)) 0%,
    color-mix(in srgb, var(--cat) 7%, var(--bg-soft)) 100%
  );
  border: 1px solid color-mix(in srgb, var(--cat) 32%, var(--line));
}

.article-cover::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--cat);
}

.article-cover .cover-icon {
  font-size: 8.5rem;
}

.article-cover-image {
  padding: 0;
  border: 1px solid var(--line);
  background: var(--bg-soft);
  overflow: hidden;
  margin-left: 0;
  margin-right: 0;
}

.article-cover-image::before {
  display: none;
}

.article-cover-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

/* ---------- Article body: the reading experience ---------- */

.article-body {
  font-family: var(--serif);
  font-size: 1.19rem;
  line-height: 1.72;
  padding-top: 2rem;
  overflow-wrap: break-word;
}

.article-body p {
  margin: 0 0 1.45rem;
}

/* Opening drop cap — three lines of STIX, an offprint signature. */
.article-body > p:first-child::first-letter {
  float: left;
  font-weight: 600;
  font-size: 3.35em;
  line-height: 0.82;
  padding: 0.06em 0.09em 0 0;
}

.article-body h2,
.article-body h3 {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin: 2.4rem 0 0.85rem;
}

.article-body h2 {
  font-size: 1.5rem;
}

.article-body h3 {
  font-size: 1.22rem;
}

.article-body a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 120ms ease;
}

.article-body a:hover {
  color: var(--accent-strong);
}

.article-body blockquote {
  margin: 1.8rem 0;
  padding-left: 1.4rem;
  border-left: 2px solid var(--accent);
  color: var(--text-soft);
  font-style: italic;
  font-size: 1.05em;
}

.article-body blockquote p {
  margin-bottom: 0.9rem;
}

.article-body figure {
  margin: 1.9rem 0;
}

.article-body img {
  border: 1px solid var(--line);
  border-radius: 8px;
}

.article-body figcaption {
  font-family: var(--sans);
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-faint);
  border-top: 1px solid var(--line);
  margin-top: 0.65rem;
  padding-top: 0.55rem;
}

.article-body hr {
  border: 0;
  margin: 2.6rem 0;
  text-align: center;
}

.article-body hr::before {
  content: "✦\2002✦\2002✦";
  font-size: 0.75rem;
  letter-spacing: 0.4em;
  color: var(--text-faint);
}

.article-body ul,
.article-body ol {
  margin: 0 0 1.45rem;
  padding-left: 1.5rem;
}

.article-body li {
  margin-bottom: 0.45rem;
}

.article-body table {
  border-collapse: collapse;
  width: 100%;
  font-family: var(--sans);
  font-size: 0.92rem;
  line-height: 1.45;
  margin: 0 0 1.5rem;
  /* Wide tables scroll inside their own box — no page-level clipping. */
  display: block;
  overflow-x: auto;
}

/* Journal-style table rules: horizontal only. */
.article-body th {
  border-top: 2px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 0.5rem 0.8rem 0.45rem 0;
  text-align: left;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.article-body td {
  border-bottom: 1px solid var(--line);
  padding: 0.5rem 0.8rem 0.5rem 0;
  text-align: left;
}

.article-body code {
  font-family: var(--mono);
  font-size: 0.86em;
  background: var(--bg-soft);
  border-radius: 3px;
  padding: 0.12em 0.35em;
}

/* ---------- "Why it matters" callout (D5) ---------- */

.why-matters {
  margin: 2.6rem 0;
  padding: 1.35rem 1.55rem 0.35rem;
  background: color-mix(in srgb, var(--accent) 6%, var(--bg-soft));
  border-top: 2px solid var(--accent);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  border-radius: 0 0 3px 3px;
}

.why-matters h2,
.why-matters h3 {
  font-family: var(--sans);
  margin: 0 0 0.85rem;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

.why-matters h2::before,
.why-matters h3::before {
  content: "※";
  margin-right: 0.55em;
  font-size: 1.05em;
}

.why-matters p {
  font-size: 1.06rem;
  line-height: 1.65;
  margin-bottom: 1.05rem;
}

/* ---------- Actions ---------- */

.article-actions {
  display: flex;
  gap: 0.6rem;
  padding: 1.5rem 0 0.4rem;
  border-top: 1px solid var(--line);
  margin-top: 1.6rem;
}

.btn {
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--text-soft);
  background: none;
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 0.45rem 1rem;
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease;
}

.btn:hover {
  border-color: var(--text-faint);
  color: var(--text);
}

.btn-like[aria-pressed="true"] {
  color: var(--like);
  border-color: var(--like);
}

/* ---------- Citation box (D5): an academic reference card ---------- */

.citation-box {
  margin-top: 2.2rem;
  padding: 1.4rem 1.6rem 1.5rem;
  border: 1px solid var(--line);
  border-top: 3px double var(--rule);
  border-radius: 0 0 3px 3px;
  background: var(--bg-soft);
}

.citation-title {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--text-soft);
  margin: 0 0 1rem;
}

/* The header rule runs to the card edge — a proper reference entry. */
.citation-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.citation-fields {
  margin: 0;
  font-size: 0.95rem;
}

.citation-fields > div {
  display: grid;
  grid-template-columns: 6.75rem 1fr;
  gap: 0.9rem;
  padding: 0.38rem 0;
  border-bottom: 1px dotted var(--line);
}

.citation-fields > div:last-child {
  border-bottom: 0;
}

.citation-fields dt {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-faint);
  padding-top: 0.22em;
}

.citation-fields dd {
  margin: 0;
  font-family: var(--serif);
}

/* Journal names are set in italic, as a reference should. */
.citation-fields > div:first-child dd {
  font-weight: 600;
}

.citation-fields a {
  font-family: var(--mono);
  font-size: 0.86em;
  color: var(--accent);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  word-break: break-all;
  transition: color 120ms ease;
}

.citation-fields a:hover {
  color: var(--accent-strong);
}

/* ---------- Article footer ---------- */

.article-footer {
  margin-top: 1.7rem;
}

.article-disclosure {
  font-family: var(--serif);
  font-size: 0.9rem;
  color: var(--text-faint);
  font-style: italic;
  margin: 0;
}

/* ---------- "More in <Category>" (internal linking) ---------- */

.more-in {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 0 3.5rem;
}

.more-in-title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--text-faint);
  margin: 0 0 0.4rem;
}

.more-in-grid {
  display: grid;
}

.more-in-card {
  display: block;
  padding: 0.95rem 0;
  border-top: 1px solid var(--line);
  text-decoration: none;
}

.more-in-category {
  display: block;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--cat-text);
  margin-bottom: 0.3rem;
}

.more-in-headline {
  display: block;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.12rem;
  line-height: 1.3;
}

.more-in-card:hover .more-in-headline {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--text) 45%, transparent);
}

.more-in-date {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.66rem;
  color: var(--text-faint);
}

/* ---------- 404 page ---------- */

.not-found {
  text-align: center;
  padding: 4.5rem 0 5rem;
}

.not-found-code {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 5rem;
  line-height: 1;
  color: var(--text-faint);
  margin: 0;
}

.not-found h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.9rem;
  letter-spacing: -0.01em;
  margin: 0.7rem 0 0.5rem;
}

.not-found p {
  color: var(--text-soft);
  margin: 0.4rem 0;
}

.not-found-links a {
  color: var(--accent);
  text-decoration: none;
  transition: color 120ms ease;
}

.not-found-links a:hover {
  color: var(--accent-strong);
  text-decoration: underline;
}

/* ---------- Pagination + empty state ---------- */

.pagination {
  display: flex;
  align-items: center;
  gap: 1.3rem;
  justify-content: center;
  padding-bottom: 3rem;
  font-size: 0.72rem;
  font-weight: 600;
}

.page-link {
  color: var(--accent);
  text-decoration: none;
  transition: color 120ms ease;
}

.page-link:hover {
  color: var(--accent-strong);
}

.page-status {
  color: var(--text-faint);
}

.empty-state {
  text-align: center;
  color: var(--text-faint);
  padding: 5rem 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15rem;
}

/* ---------- Site footer ---------- */

.site-footer {
  /* Mirrors the masthead's double rule: the page is bookended. */
  border-top: 3px double var(--rule);
  margin-top: 1.5rem;
  padding: 1.9rem 0 2.4rem;
  font-size: 0.85rem;
  color: var(--text-faint);
}

.footer-grid {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem 2rem;
  flex-wrap: wrap;
}

.footer-wordmark {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.2rem;
  letter-spacing: -0.015em;
  color: var(--text);
  text-decoration: none;
}

.footer-wordmark::after {
  content: ".";
  color: var(--accent);
}

.footer-tagline {
  font-family: var(--serif);
  font-style: italic;
  color: var(--text-soft);
  margin: 0.3rem 0 0;
}

.footer-nav {
  display: flex;
  gap: 1.4rem;
}

.footer-nav a {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-soft);
  text-decoration: none;
  transition: color 120ms ease;
}

.footer-nav a:hover {
  color: var(--text);
}

.footer-disclosure {
  font-family: var(--serif);
  font-style: italic;
  margin: 1.4rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
}

/* ---------- Small screens ---------- */

@media (max-width: 600px) {
  .card-grid {
    grid-template-columns: 1fr;
    padding-top: 2.2rem;
  }

  .citation-fields > div {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }

  .article-cover {
    aspect-ratio: 16 / 9;
  }

  .article-cover .cover-icon {
    font-size: 6.5rem;
  }
}

/* ---------- Design chooser (/themes) ----------
   Deliberately styled with its own classes so an applied design theme cannot
   restructure the page you use to compare designs. */

.theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 1.4rem;
  padding: 2rem 0 3rem;
}

.theme-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 140ms ease, transform 140ms ease;
}

.theme-card-link:hover {
  border-color: var(--cat, var(--accent));
  transform: translateY(-2px);
}

.theme-swatch {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  aspect-ratio: 16 / 7;
  padding: 0.8rem 0.9rem;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--cat-color) 22%, var(--bg-soft)),
    var(--bg-soft));
  border-bottom: 3px solid var(--cat-color);
}

.theme-swatch-num {
  font-family: var(--mono);
  font-size: 1.5rem;
  color: var(--cat-color);
}

.theme-card-body {
  padding: 0.9rem 1rem 1.1rem;
}

.theme-card-num {
  font-family: var(--sans);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.theme-card-name {
  font-family: var(--serif);
  font-size: 1.15rem;
  margin: 0.2rem 0 0.35rem;
}

.theme-card-desc {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text-soft);
}

/* The PS mark doubles as the "For you" tab: the wordmark reduced to a badge,
   so the strip opens with identity rather than a label. */
.chip-ps {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 1.55rem;
  padding: 0 0.4rem;
  font-family: var(--serif);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--bg);
  background: var(--text);
  border-radius: 4px;
}

.chip-foryou {
  padding-left: 0.35rem;
  padding-right: 0.55rem;
}

.chip-foryou:not(.chip-active) .chip-ps {
  color: var(--text-soft);
  background: transparent;
  border: 1px solid var(--line);
}

.chip-foryou .chip-ps::after {
  content: ".";
}

/* ---------- Condensing masthead ----------
   Masthead and tabs travel together in one sticky block. Once the reader is
   past the first screenful the wordmark gives way to the PS monogram and the
   block tightens, so the tabs stay reachable without a tall header eating the
   page. Purely additive: without JS the header simply never condenses. */

.site-top {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--bg);
}

.category-nav {
  position: static;
}

/* Both marks are always present; they trade places by animating width and
   opacity, so the swap glides instead of snapping. */
.logo-word,
.logo-mark {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  transition: max-width 260ms cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 180ms ease, transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.logo-word {
  max-width: 14ch;
  opacity: 1;
}

.logo-mark {
  max-width: 0;
  opacity: 0;
  transform: translateY(0.1em);
}

.site-top.is-condensed .header-inner {
  padding-top: 0.5rem;
  padding-bottom: 0.35rem;
}

.site-top.is-condensed .logo-word {
  max-width: 0;
  opacity: 0;
}

.site-top.is-condensed .masthead-tagline {
  opacity: 0;
  pointer-events: none;
}

.site-top.is-condensed .logo-mark {
  max-width: 5ch;
  opacity: 1;
  transform: translateY(0);
  letter-spacing: -0.04em;
}

.masthead-tagline {
  transition: opacity 180ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .logo-word,
  .logo-mark,
  .masthead-tagline {
    transition: none;
  }
}

.site-top,
.header-inner,
.logo-word,
.logo-mark {
  transition: padding 140ms ease, font-size 140ms ease;
}

/* ---------- Category overflow ----------
   The strip stays a single line; app.js moves the tabs that do not fit into
   this dropdown, so every field is still one click away. */

.chip-more {
  position: relative;
  flex: 0 0 auto;
}

.chip-more[hidden] {
  display: none;
}

.chip-more-summary {
  list-style: none;
  cursor: pointer;
}

.chip-more-summary::-webkit-details-marker {
  display: none;
}

.chip-more-summary::after {
  content: "▾";
  margin-left: 0.35rem;
  font-size: 0.85em;
}

.chip-more[open] .chip-more-summary {
  color: var(--text);
  border-bottom-color: var(--text);
}

.chip-more-menu {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 40;
  min-width: 12rem;
  display: flex;
  flex-direction: column;
  padding: 0.35rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 0 0 8px 8px;
  box-shadow: 0 10px 26px -14px rgba(0, 0, 0, 0.4);
}

.chip-more-menu .chip {
  border-bottom: 0;
  border-left: 2px solid transparent;
  padding: 0.5rem 0.6rem;
  white-space: nowrap;
}

.chip-more-menu .chip:hover,
.chip-more-menu .chip-active {
  border-left-color: var(--cat);
  background: color-mix(in srgb, var(--cat) 8%, transparent);
}

/* Reading time sits with the date as one quiet metadata line. */
.card-meta {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0.5rem 0 0;
}

.card-meta .card-date {
  margin: 0;
}

.card-readtime,
.article-readtime {
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--text-faint);
}

.card-readtime::before,
.article-readtime::before {
  content: "·";
  margin-right: 0.5rem;
}