/* ==========================================================================
   The Journal of Men's Rights — stylesheet
   Colours are defined once below; change them there to re-theme the site.
   ========================================================================== */

:root {
  color-scheme: light dark;

  --paper: #f4eee3;        /* page background */
  --surface: #fbf8f2;      /* cards, boxes */
  --ink: #2b2520;          /* main text */
  --ink-soft: #4b4138;     /* secondary text */
  --muted: #73665a;        /* labels, dates */
  --rule: #d8cebd;         /* hairlines */
  --accent: #7a3b2e;       /* links, buttons */
  --accent-hover: #5e2c22;
  --on-accent: #fbf8f2;
  --chip: #eae1d1;

  --footer-bg: #2f2721;     /* footer background */
  --footer-ink: #f1e9dc;    /* footer headings */
  --footer-text: #cfc3b2;   /* footer text */
  --footer-muted: #a39585;  /* footer labels, small print */
  --footer-link: #e6bfa9;

  --serif: "Source Serif 4", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --wide: 68rem;
  --measure: 41rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #1c1815;
    --surface: #25201c;
    --ink: #ece4d8;
    --ink-soft: #d3c8b9;
    --muted: #a39585;
    --rule: #3b332c;
    --accent: #d9a188;
    --accent-hover: #e8b9a3;
    --on-accent: #1c1815;
    --chip: #302923;

    --footer-bg: #120f0d;
    --footer-ink: #ece4d8;
    --footer-text: #bfb3a3;
    --footer-muted: #8f8273;
    --footer-link: #d9a188;
  }
}

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

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main { flex: 1; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--accent-hover); }

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

h1, h2, h3, h4 { font-weight: 600; line-height: 1.2; margin: 0; text-wrap: balance; }
p { margin: 0 0 1em; }
img { max-width: 100%; height: auto; }

.wrap { width: 100%; max-width: var(--wide); margin: 0 auto; padding: 0 1.25rem; }
.narrow { width: 100%; max-width: calc(var(--measure) + 2.5rem); margin: 0 auto; padding: 0 1.25rem; }

.skip {
  position: absolute; left: -999px; top: 0;
  background: var(--accent); color: var(--on-accent); padding: 0.5rem 1rem; z-index: 10;
}
.skip:focus { left: 0; }

.label {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- Header ---------- */

.site-header { border-bottom: 1px solid var(--rule); }
.site-header .wrap {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 0.5rem 2rem; padding-top: 1.1rem; padding-bottom: 1.1rem;
}
.masthead {
  font-size: 1.35rem; font-weight: 600; letter-spacing: -0.005em;
  color: var(--ink); text-decoration: none; text-wrap: balance;
}
.masthead:hover { color: var(--accent); }
.masthead-tagline { display: none; }

.site-nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1.6rem; }
.site-nav a {
  font-family: var(--sans); font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-soft); text-decoration: none; padding: 0.3rem 0;
  border-bottom: 2px solid transparent; position: relative;
}
/* An invisible margin around each link makes it an easier tap target without moving anything. */
.site-nav a::before { content: ""; position: absolute; inset: -0.45rem -0.35rem; }
.site-nav a:hover { color: var(--accent); }
.site-nav a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); }

/* The home page gets the full, centred masthead. */
.home .site-header { border-bottom: 0; }
.home .site-header .wrap {
  flex-direction: column; align-items: center; text-align: center;
  gap: 0; padding-top: 3rem; padding-bottom: 0;
}
.home .masthead { font-size: clamp(2.1rem, 6vw, 3.6rem); line-height: 1.08; letter-spacing: -0.015em; }
.home .masthead-tagline {
  display: block; margin: 0.9rem 0 0; font-style: italic; color: var(--ink-soft); font-size: 1.1rem;
}
.home .site-nav {
  justify-content: center; width: 100%; margin-top: 2rem; padding: 0.7rem 0;
  border-top: 1px solid var(--accent); border-bottom: 3px double var(--accent);
}

/* ---------- Buttons & chips ---------- */

.btn {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-family: var(--sans); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.02em;
  padding: 0.6rem 1.05rem; border-radius: 3px; cursor: pointer; text-decoration: none;
  border: 1px solid var(--accent); background: var(--accent); color: var(--on-accent);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); }
.btn.quiet { background: transparent; color: var(--accent); border-color: var(--rule); }
.btn.quiet:hover { background: var(--chip); color: var(--accent-hover); border-color: var(--rule); }
.btn[disabled] { opacity: 0.6; cursor: progress; }
.btn svg { width: 1em; height: 1em; flex: none; }

.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.chip {
  font-family: var(--sans); font-size: 0.82rem; font-weight: 500;
  padding: 0.38rem 0.85rem; border-radius: 999px; cursor: pointer; text-decoration: none;
  border: 1px solid var(--rule); background: transparent; color: var(--ink-soft);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.chip:hover { background: var(--chip); color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.chip .n { opacity: 0.65; margin-left: 0.35em; font-variant-numeric: tabular-nums; }

/* ---------- Section headings ---------- */

.section { padding: 3rem 0; }
.section + .section { border-top: 1px solid var(--rule); }
.section-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  margin-bottom: 1.5rem;
}
.section-head a { font-family: var(--sans); font-size: 0.85rem; font-weight: 600; text-decoration: none; }
.section-head a:hover { text-decoration: underline; }

/* ---------- Home ---------- */

/* The home page's horizontal rules take the accent colour (colour only, so the
   first entry keeps its "no border" rule). */
.home .section + .section,
.home .recent .entry { border-top-color: var(--accent); }

.latest { display: grid; gap: 1.1rem; }

.more { margin: 2.75rem 0 0; text-align: center; }

.featured .entry-title { font-size: clamp(1.7rem, 3.4vw, 2.35rem); line-height: 1.15; letter-spacing: -0.01em; }
.featured .entry-summary { font-size: 1.15rem; color: var(--ink-soft); }
/* The opening of the spotlight's text (added by home.js) shows on wide screens only. */
.featured .excerpt, .featured .continue { display: none; }

.recent .entry { padding: 1.1rem 0; border-top: 1px solid var(--rule); }
.recent .entry-title { font-size: 1.2rem; }
.recent .entry-summary { display: none; }

/* Wide screens, laid out like a newspaper front page: the spotlight is the lead story,
   two of three columns wide and three rows tall, with the next three articles stacked
   beside it and the rest on a row beneath. (.recent is dissolved so its entries join
   the grid and flow around the spotlight.) */
@media (min-width: 56rem) {
  /* Six narrow tracks: the spotlight takes four, each brief two. */
  .latest { grid-template-columns: repeat(6, 1fr); gap: 0 3rem; }
  .latest > .recent { display: contents; }
  .recent .entry { grid-column: span 2; }
  /* With only two briefs left for the row beneath, they share it equally. */
  .recent .entry:nth-child(4):nth-last-child(2),
  .recent .entry:nth-child(5):last-child { grid-column: span 3; }
  /* The vertical rule belongs to the spotlight, so it runs the full height of the
     stack; the negative margin centres it in the column gap. */
  .latest > .featured {
    grid-column: span 4; grid-row: span 3; display: flex; flex-direction: column;
    margin-right: -1.5rem; padding-right: 1.5rem; border-right: 1px solid var(--rule);
  }
  .featured > .entry { flex: 1; display: flex; flex-direction: column; }
  /* A larger, roomier spotlight so it reads as the lead story. Its headline stays
     smaller than the masthead's at every width. */
  .featured .entry-meta { margin-bottom: 0.75rem; }
  .featured .entry-title { font-size: clamp(2rem, 3.9vw, 3rem); margin-bottom: 0.75rem; }
  .featured .entry-summary { font-size: 1.3rem; margin-bottom: 1rem; }
  /* The opening of the text, in two columns. It takes whatever height the stack beside
     it leaves (size containment stops the text itself from stretching the row) and
     is cut off at the foot of the second column, above the link to the rest. */
  .featured .excerpt {
    display: block; flex: 1 1 0; min-height: 12rem; contain: size; overflow: hidden;
    margin-top: 1.4rem; columns: 2; column-gap: 2.5rem; column-rule: 1px solid var(--rule); column-fill: auto;
    font-size: 1rem; line-height: 1.55; color: var(--ink-soft); hyphens: auto;
  }
  .excerpt p { margin: 0; text-indent: 1.2em; }
  .excerpt p:first-child, .excerpt .crosshead, .excerpt .crosshead + p, .excerpt :is(ul, ol) + p { text-indent: 0; }
  .excerpt :is(ul, ol) { margin: 0.25em 0; padding-left: 1.2em; }
  .excerpt .crosshead { margin: 0.6em 0 0.15em; font-weight: 600; color: var(--ink); text-align: left; break-after: avoid; }
  .featured .continue { display: block; margin: 0.9rem 0 0; font-family: var(--sans); font-size: 0.85rem; font-weight: 600; }
  .featured .continue a { text-decoration: none; }
  .featured .continue a:hover { text-decoration: underline; }
  .featured .continue a::after { content: " →"; content: " →" / ""; }
  /* Each brief gets its summary, as a newspaper's would. */
  .recent .entry-summary { display: block; font-size: 1rem; }
  /* Entries on the row beneath. */
  .recent .entry { padding: 1.25rem 0 0; margin-top: 2.5rem; }
  /* The stack beside the spotlight. */
  .recent .entry:nth-child(-n+3) { margin-top: 0; }
  .recent .entry:nth-child(-n+2) { padding-bottom: 1.25rem; }
  .recent .entry:first-child { padding-top: 0; border-top: 0; }
}

.columns { display: grid; gap: 2rem; }
@media (min-width: 48rem) { .columns { grid-template-columns: repeat(3, 1fr); gap: 3rem; } }
.columns h3 { font-size: 1.2rem; margin-bottom: 0.6rem; }
.columns p { color: var(--ink-soft); margin: 0; }

.callout {
  background: var(--surface); border: 1px solid var(--rule); border-radius: 4px;
  padding: 2rem; text-align: center;
}
.callout h2 { font-size: 1.6rem; margin-bottom: 0.6rem; }
.callout p { max-width: 36rem; margin: 0 auto 1.25rem; color: var(--ink-soft); }

/* ---------- Article entries (lists) ---------- */

.entry-meta {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.9rem;
  margin: 0 0 0.45rem;
  font-family: var(--sans); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
}
.entry-meta a { color: var(--accent); text-decoration: none; position: relative; }
.entry-meta a::before { content: ""; position: absolute; inset: -0.4rem -0.3rem; } /* larger tap target */
.entry-meta a:hover { text-decoration: underline; }
.entry-title { font-size: 1.5rem; margin: 0 0 0.45rem; }
.entry-title a { color: var(--ink); text-decoration: none; }
.entry-title a:hover { color: var(--accent); }
.entry-summary { margin: 0 0 0.5rem; color: var(--ink-soft); }
.entry-byline { margin: 0; font-size: 0.95rem; font-style: italic; color: var(--muted); }

/* ---------- Articles page ---------- */

.page-head { padding: 3rem 0 2rem; }
.page-head h1 { font-size: clamp(2rem, 5vw, 2.8rem); letter-spacing: -0.012em; }
.page-head p { margin: 0.75rem 0 0; max-width: 40rem; color: var(--ink-soft); font-size: 1.15rem; }

.toolbar {
  display: grid; gap: 1rem; padding: 1.25rem 0;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.toolbar-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; }
.toolbar-row .label { flex: none; min-width: 3.5rem; }
.field {
  font-family: var(--sans); font-size: 0.9rem; color: var(--ink);
  background: var(--surface); border: 1px solid var(--rule); border-radius: 3px;
  padding: 0.5rem 0.7rem;
}
input.field { flex: 1 1 14rem; min-width: 0; max-width: 24rem; }
.spacer { flex: 1; }

.results-count { margin: 1.5rem 0 0; font-family: var(--sans); font-size: 0.85rem; color: var(--muted); }

.results .entry { padding: 1.9rem 0; border-bottom: 1px solid var(--rule); max-width: 46rem; }
.results .entry:last-child { border-bottom: 0; }
.results { padding-bottom: 3rem; }

.empty { padding: 3rem 0; color: var(--muted); font-style: italic; }

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

.article-header { padding: 3.25rem 0 0; }
.kicker { display: flex; flex-wrap: wrap; gap: 0.25rem 0.9rem; margin: 0 0 1rem; }
.kicker a { color: var(--accent); text-decoration: none; }
.kicker a:hover { text-decoration: underline; }
.article-header h1 { font-size: clamp(2.1rem, 5.5vw, 3.1rem); line-height: 1.1; letter-spacing: -0.018em; }
.standfirst { margin: 1.1rem 0 0; font-size: 1.3rem; line-height: 1.45; color: var(--ink-soft); }
.byline { margin: 1.6rem 0 0; font-size: 1.1rem; }
.byline strong { font-weight: 600; }
.dateline { margin: 0.2rem 0 0; font-family: var(--sans); font-size: 0.85rem; color: var(--muted); }

.article-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem;
  margin: 1.6rem 0 0; padding: 1rem 0;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.share { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; }
.share .label { margin-right: 0.25rem; }
.share a, .share button {
  font-family: var(--sans); font-size: 0.82rem; font-weight: 500;
  padding: 0.3rem 0.65rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--rule); background: transparent; color: var(--ink-soft); text-decoration: none;
}
.share a:hover, .share button:hover { background: var(--chip); color: var(--ink); }
.pdf-status { font-family: var(--sans); font-size: 0.82rem; color: var(--muted); }

.prose { padding: 2.25rem 0 1rem; font-size: 1.2rem; line-height: 1.68; }
.prose p { margin: 0 0 1.15em; hanging-punctuation: first; }
.prose h2 { font-size: 1.6rem; margin: 2.2em 0 0.7em; letter-spacing: -0.008em; }
.prose h3 { font-size: 1.3rem; margin: 1.9em 0 0.6em; }
.prose h4 { font-size: 1.15rem; font-style: italic; margin: 1.7em 0 0.5em; }
.prose blockquote {
  margin: 1.8em 0; padding: 0.15em 0 0.15em 1.4em;
  border-left: 3px solid var(--accent); color: var(--ink-soft); font-size: 1.28rem; font-style: italic;
}
.prose blockquote p:last-child { margin-bottom: 0; }
.prose ul, .prose ol { margin: 0 0 1.15em; padding-left: 1.5em; }
.prose li { margin-bottom: 0.4em; }
.prose li > ul, .prose li > ol { margin: 0.4em 0 0; }
.prose .align-center { text-align: center; }
.prose .align-right { text-align: right; }
.prose figure { margin: 2em 0; text-align: center; }
.prose figure img { border-radius: 2px; }
.prose figcaption, .prose .caption {
  font-family: var(--sans); font-size: 0.85rem; line-height: 1.45; color: var(--muted); margin-top: 0.6rem;
}
.prose .smallcaps { font-variant-caps: small-caps; letter-spacing: 0.03em; }
.prose sup, .prose sub { line-height: 0; }
.prose .fn-ref a {
  font-family: var(--sans); font-size: 0.72em; font-weight: 600; text-decoration: none; padding: 0 0.15em;
}

.table-wrap { overflow-x: auto; margin: 1.8em 0; }
.prose table { width: 100%; border-collapse: collapse; font-size: 1rem; line-height: 1.45; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 0.6rem 0.9rem 0.6rem 0; border-bottom: 1px solid var(--rule); }
.prose th { font-family: var(--sans); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; border-bottom: 2px solid var(--ink-soft); }
.prose td p, .prose th p { margin: 0 0 0.4em; }
.prose td p:last-child, .prose th p:last-child { margin: 0; }

.notes { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); font-size: 1rem; line-height: 1.55; color: var(--ink-soft); }
.notes h2 { margin: 0 0 1rem; font-family: var(--sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.notes ol { padding-left: 1.4em; margin: 0; }
.notes li { margin-bottom: 0.6em; }
.notes p { margin: 0 0 0.4em; }
.notes .fn-back { text-decoration: none; font-family: var(--sans); margin-left: 0.3em; }
.notes li:target, .fn-ref a:target { background: var(--chip); }

.article-footer { padding: 1rem 0 3.5rem; }
.box {
  background: var(--surface); border: 1px solid var(--rule); border-radius: 4px;
  padding: 1.25rem 1.4rem; margin-top: 1.25rem;
}
.box .label { margin: 0 0 0.5rem; }
.box p:last-child { margin: 0; }
.cite-text { font-size: 1rem; line-height: 1.5; color: var(--ink-soft); overflow-wrap: anywhere; }
.article-footer .share { margin-top: 1.75rem; }

.related { border-top: 1px solid var(--rule); padding: 2.5rem 0 3.5rem; }
.related-grid { display: grid; gap: 2rem; }
@media (min-width: 48rem) { .related-grid { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; } }
.related .entry-title { font-size: 1.2rem; }
.related .entry-summary { display: none; }

.status { padding: 4rem 0; text-align: center; color: var(--muted); font-style: italic; }

/* ---------- Text pages (Write for Us) ---------- */

.page-body { padding-bottom: 4rem; font-size: 1.15rem; line-height: 1.65; }
.page-body h2 { font-size: 1.55rem; margin: 2.4em 0 0.7em; padding-top: 1.4em; border-top: 1px solid var(--rule); }
.page-body h2:first-child { margin-top: 0; }
.page-body h3 { font-size: 1.2rem; margin: 1.6em 0 0.4em; }
.page-body ul, .page-body ol { padding-left: 1.4em; margin: 0 0 1.15em; }
.page-body li { margin-bottom: 0.45em; }
.page-body dl { margin: 0 0 1.15em; }
.page-body dt { font-weight: 600; margin-top: 1em; }
.page-body dd { margin: 0.15em 0 0; color: var(--ink-soft); }
.page-body table { width: 100%; border-collapse: collapse; font-size: 1rem; margin: 0 0 1.4em; }
.page-body th, .page-body td { text-align: left; vertical-align: top; padding: 0.6rem 1rem 0.6rem 0; border-bottom: 1px solid var(--rule); }
.page-body td:last-child, .page-body th:last-child { white-space: nowrap; padding-right: 0; }
.page-body th { font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.page-body kbd, .page-body code {
  font-family: var(--sans); font-size: 0.88em; background: var(--chip); border-radius: 3px; padding: 0.1em 0.4em;
}

/* ---------- Editor's desk (editor.html) ---------- */

.drop {
  border: 2px dashed var(--rule); border-radius: 6px; padding: 2rem; text-align: center;
  background: var(--surface); color: var(--ink-soft);
}
.drop.over { border-color: var(--accent); }
.form-grid { display: grid; gap: 0.9rem 1.25rem; margin: 1.5rem 0; }
@media (min-width: 40rem) { .form-grid { grid-template-columns: 1fr 1fr; } .form-grid .full { grid-column: 1 / -1; } }
.form-grid label { display: grid; gap: 0.3rem; font-family: var(--sans); font-size: 0.8rem; font-weight: 600; color: var(--muted); }
.form-grid .field { width: 100%; max-width: none; font-weight: 400; }
pre.snippet {
  font-family: ui-monospace, Consolas, "Cascadia Mono", monospace; font-size: 0.85rem; line-height: 1.5;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 4px;
  padding: 1rem 1.2rem; overflow-x: auto; white-space: pre-wrap;
}
.preview { border: 1px solid var(--rule); border-radius: 4px; background: var(--surface); padding: 0 1.5rem; margin-bottom: 4rem; }
.page-body:has(+ #details), #details > .page-body { padding-bottom: 1.5rem; }
#details > .page-body { padding-top: 2rem; }

/* ---------- Footer ---------- */

.site-footer { background: var(--footer-bg); padding: 2.75rem 0 3rem; color: var(--footer-text); font-size: 0.98rem; }
.site-footer .wrap { display: grid; gap: 1.5rem; }
@media (min-width: 48rem) { .site-footer .wrap { grid-template-columns: 1.6fr 1fr 1fr; gap: 3rem; } }
.site-footer .name { font-size: 1.15rem; font-weight: 600; color: var(--footer-ink); margin-bottom: 0.4rem; }
.site-footer a { color: var(--footer-link); }
.site-footer a:hover { color: var(--footer-ink); }
.site-footer .label { color: var(--footer-muted); }
.site-footer :focus-visible { outline-color: var(--footer-link); }
.site-footer p { margin: 0 0 0.4rem; }
.site-footer ul { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.site-footer li { margin-bottom: 0.3rem; }
.site-footer .small { font-family: var(--sans); font-size: 0.8rem; color: var(--footer-muted); margin-top: 0.8rem; }

/* ---------- Phones ---------- */

@media (max-width: 30rem) {
  /* The nav stays on one row down to 320px wide, spread across the full width. */
  .site-nav { width: 100%; justify-content: space-between; column-gap: 0.75rem; }
  .site-nav a { font-size: 0.75rem; letter-spacing: 0.06em; }

  /* A shorter home masthead, so the articles start higher on the screen. */
  .home .site-header .wrap { padding-top: 2rem; }
  .home .masthead-tagline { margin-top: 0.6rem; }
  .home .site-nav { justify-content: space-between; margin-top: 1.4rem; padding: 0.45rem 0; }

  .section { padding: 2.25rem 0; }
  .more { margin-top: 2rem; }
  .callout { padding: 1.5rem 1.25rem; }

  /* Footer links get finger-sized rows. */
  .site-footer li { margin: 0; }
  .site-footer li a { display: inline-block; padding: 0.35rem 0; }
}

/* ---------- Print ---------- */

@media print {
  :root {
    color-scheme: light;
    --paper: #fff; --surface: #fff; --ink: #000; --ink-soft: #222; --muted: #555;
    --rule: #bbb; --accent: #000; --chip: #eee;
  }
  body { font-size: 11pt; display: block; }
  .site-header .site-nav, .site-footer, .article-actions, .share, .related, .skip, .fn-back { display: none !important; }
  .site-header { border: 0; }
  .site-header .wrap { padding: 0 0 0.5rem; }
  .masthead { font-size: 10pt; font-style: italic; font-weight: 400; }
  .narrow, .wrap { max-width: none; padding: 0; }
  .article-header { padding-top: 1rem; }
  .prose { font-size: 11pt; line-height: 1.5; }
  .prose h2, .prose h3, .prose h4 { break-after: avoid; }
  .prose blockquote, .prose figure, .box { break-inside: avoid; }
  .prose a { text-decoration: none; }
  .box { border-color: #bbb; }
  @page { margin: 2.2cm 2.4cm; }
}