/*
Theme Name: Staple News
Theme URI: https://staplerecords.com/
Author: Staple News
Description: Dark zine editorial theme for Staple News, an independent punk, emo, and post-hardcore reference magazine. Two column homepage, bone paper reading lane, theme owned SEO output, no SEO plugin required.
Version: 1.0.4
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: staple-news
Tags: blog, news, two-columns, custom-logo, custom-menu, accessibility-ready
*/

/* ------------------------------------------------------------------
   Tokens. Values come from staplerecords/DESIGN.md and are not tuned
   here, so a design change happens in one place.
   ------------------------------------------------------------------ */
:root {
  --ink: #15110F;
  --bone: #F3E8D5;
  --oxide: #B7352A;
  --neutral: #5E5046;
  --surface: #221C19;
  --muted: #C7B8A4;
  --border: #40352F;
  --accent: #F0B45D;

  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 18px;

  --s-xs: 4px;
  --s-sm: 8px;
  --s-md: 16px;
  --s-lg: 32px;
  --s-xl: 64px;

  /* The reading measure. The bone panel is this plus its padding, so the
     text column stays at 740px on every article and page. */
  --lane: 740px;
  --lane-pad: 40px;
  --wrap: 1200px;

  /* Type. DESIGN.md names Oswald and Inter. Neither is loaded: a webfont here
     would be two extra third party round trips before a headline can paint,
     and the design calls for a condensed poster face and a plain reading face,
     which every target device already has. Headlines fall through the
     condensed families on macOS, Windows, Android, and Linux in that order and
     land on the platform UI face if none is installed. Body copy uses the
     reader's own system face. */
  --head: "Arial Narrow", "Avenir Next Condensed", "Roboto Condensed", "Liberation Sans Narrow", "Segoe UI", system-ui, sans-serif;
  --body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

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

html {
  -webkit-text-size-adjust: 100%;
}
/* No overflow-x:hidden here on purpose. It would clamp
   documentElement.scrollWidth, which is the measurement gate 7 of
   scripts/verify_rendered_article.js reads, so a real sideways overflow at
   390px would report as zero and ship. Every box below is sized to fit
   instead: minmax(0, ...) grid tracks, wrapping cells, and no fixed widths. */

body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* A bare URL, a catalog number, or a long band name written without spaces
     is otherwise wider than the 310px reading column on a 390px screen and
     spills out of the bone panel. break-word wraps only the tokens that do not
     fit, so ordinary prose still breaks between words. */
  overflow-wrap: break-word;
}

img, svg, video, iframe { max-width: 100%; }
img, video { height: auto; }

h1, h2, h3, h4 {
  font-family: var(--head);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 var(--s-md);
  overflow-wrap: break-word;
}
h1 { font-weight: 700; line-height: 1.02; letter-spacing: -0.03em; }

p, ul, ol, blockquote, figure, table, pre { margin: 0 0 var(--s-md); }

a { color: inherit; }

/* Red is never the only signal for a link. Every link carries an
   underline as well, per DESIGN_GUIDELINES.md. */
a:where(:not(.btn):not(.card):not(.brand):not(.row)) {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--oxide);
}
a:where(:not(.btn):not(.card):not(.brand):not(.row)):hover {
  text-decoration-color: var(--accent);
  color: var(--accent);
}

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

.screen-reader-text {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--accent);
  color: var(--ink);
  padding: var(--s-sm) var(--s-md);
  font-weight: 700;
}
.skip-link:focus { left: var(--s-md); top: var(--s-sm); }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--s-lg);
}

/* ------------------------------------------------------------------
   Catalog labels. Uppercase with wide tracking, the way a record
   catalog number or a show flyer sets them. Used on badges and rail
   headings only, never as an eyebrow above every heading.
   ------------------------------------------------------------------ */
.label {
  font-family: var(--body);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.badge {
  display: inline-block;
  background: var(--ink);
  color: var(--accent);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: var(--s-xs) var(--s-sm);
  text-decoration: none;
}
a.badge:hover { color: var(--ink); background: var(--accent); border-color: var(--accent); }

.meta {
  color: var(--muted);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-sm);
  margin: 0;
}
.meta > * + *::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 0.9em;
  background: var(--neutral);
  margin-right: var(--s-sm);
  vertical-align: -0.05em;
}

/* ------------------------------------------------------------------
   Header
   ------------------------------------------------------------------ */
.site-header {
  border-top: 4px solid var(--oxide);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-md);
  min-height: 92px;
  padding-top: var(--s-md);
  padding-bottom: var(--s-md);
}

.brand { display: inline-flex; align-items: center; text-decoration: none; }
/* The wordmark is a rubber stamp, so it gets paper to be stamped on. */
.brand-plate {
  display: block;
  background: var(--bone);
  padding: 6px 10px;
  border-radius: 2px;
  transform: rotate(-1.2deg);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.45);
}
.brand-plate img { display: block; width: 150px; height: auto; }
.brand-wordmark {
  font-family: var(--head);
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1;
  padding: 4px 2px;
}

.nav-toggle {
  display: none;
  font-family: var(--body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bone);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 10px 14px;
  cursor: pointer;
}
.nav-toggle:hover { border-color: var(--accent); color: var(--accent); }

.primary-nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-md) var(--s-lg);
  margin: 0;
  padding: 0;
}
.primary-nav a {
  font-family: var(--body);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--bone);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  display: inline-block;
}
.primary-nav a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.primary-nav .current-menu-item > a,
.primary-nav .current_page_item > a,
.primary-nav [aria-current] {
  color: var(--bone);
  border-bottom-color: var(--oxide);
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-color: var(--oxide);
}
/* Submenus stay in the flow. A hover only dropdown is unusable on touch
   and the menu here is one level by design. */
.primary-nav .sub-menu {
  display: flex;
  gap: var(--s-md);
  margin-left: var(--s-md);
}
.primary-nav .sub-menu a { font-weight: 400; color: var(--muted); }

/* ------------------------------------------------------------------
   Homepage: feature column plus archive rail
   ------------------------------------------------------------------ */
.home-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--s-xl);
  padding: var(--s-xl) 0;
  align-items: start;
}

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-md);
  border-bottom: 2px solid var(--oxide);
  padding-bottom: var(--s-sm);
  margin-bottom: var(--s-lg);
}
.section-head h2 { margin: 0; font-size: 1.25rem; letter-spacing: 0.12em; text-transform: uppercase; font-family: var(--body); font-weight: 700; }

.lead { margin-bottom: var(--s-xl); }
.lead a.card-link { text-decoration: none; display: block; }
.lead-figure {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  margin-bottom: var(--s-md);
  background: var(--surface);
}
.lead-figure img { display: block; width: 100%; height: auto; }
.lead h1, .lead h2 {
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  margin: var(--s-sm) 0 var(--s-md);
}
.lead .dek { color: var(--muted); font-size: 1.0625rem; max-width: 40em; }
.lead a.card-link:hover h2 { color: var(--accent); }

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--s-lg);
}

/* Archive card: dark surface, thin tan border, label, title, note, meta. */
.card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 0 0 var(--s-md);
  text-decoration: none;
  color: var(--bone);
  overflow: hidden;
}
.card:hover { border-color: var(--accent); }
.card:hover h3 { color: var(--accent); }
.card img { display: block; width: 100%; height: auto; }
.card .card-body { padding: var(--s-md) var(--s-md) 0; display: flex; flex-direction: column; gap: var(--s-sm); }
.card h3 { font-size: 1.375rem; margin: 0; }
.card p { color: var(--muted); font-size: 0.9375rem; margin: 0; }
.card .badge { align-self: flex-start; }

/* Archive rail */
.rail { border-left: 1px solid var(--border); padding-left: var(--s-lg); }
.rail + .rail { margin-top: var(--s-xl); }
.rail-list { list-style: none; margin: 0; padding: 0; }
.rail-list li { border-bottom: 1px solid var(--border); padding: var(--s-md) 0; }
.rail-list li:first-child { padding-top: 0; }
.rail-list a { color: var(--bone); text-decoration: none; font-weight: 600; display: block; }
.rail-list a:hover { color: var(--accent); }
.rail-list .date { color: var(--muted); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; display: block; margin-bottom: var(--s-xs); }

/* Bin dividers: the section index and the related crate share this shape. */
.crate { list-style: none; margin: 0; padding: 0; }
.crate li { border-left: 3px solid var(--oxide); background: var(--surface); margin-bottom: var(--s-sm); }
.crate a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-sm);
  padding: 12px var(--s-md);
  color: var(--bone);
  text-decoration: none;
  font-weight: 600;
}
.crate a:hover { background: var(--border); color: var(--accent); }
.crate .count { color: var(--muted); font-size: 0.75rem; letter-spacing: 0.12em; font-weight: 400; }

.empty-note {
  border: 1px dashed var(--border);
  border-radius: var(--r-md);
  padding: var(--s-lg);
  color: var(--muted);
}
.empty-note p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------
   Category and archive lists: compact rows, date labels, tags
   ------------------------------------------------------------------ */
.archive-head { padding: var(--s-xl) 0 var(--s-lg); border-bottom: 2px solid var(--oxide); }
.archive-head h1 { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: var(--s-sm); }
.archive-head .term-note { color: var(--muted); max-width: 46em; margin: 0; }

.row-list { list-style: none; margin: 0; padding: 0 0 var(--s-xl); }
.row {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: var(--s-lg);
  padding: var(--s-lg) 0;
  border-bottom: 1px solid var(--border);
}
.row .row-date { color: var(--muted); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; padding-top: 6px; }
.row h2 { font-size: 1.5rem; margin: 0 0 var(--s-sm); }
.row h2 a { color: var(--bone); text-decoration: none; }
.row h2 a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
.row p { color: var(--muted); margin: 0 0 var(--s-sm); font-size: 0.9375rem; }
.row .tags { display: flex; flex-wrap: wrap; gap: var(--s-sm); }

.pagination { padding: 0 0 var(--s-xl); display: flex; flex-wrap: wrap; gap: var(--s-sm); }
/* the_posts_pagination wraps the links in .nav-links, so the gap has to be set
   on that element and not only on the nav around it. */
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: var(--s-sm); }
.pagination .page-numbers {
  display: inline-block;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 8px 14px;
  text-decoration: none;
  color: var(--bone);
}
.pagination .page-numbers:hover { border-color: var(--accent); color: var(--accent); }
.pagination .page-numbers.current { background: var(--oxide); border-color: var(--oxide); color: var(--bone); }

/* ------------------------------------------------------------------
   Article: bone paper reading lane on ink
   ------------------------------------------------------------------ */
.lane-outer { padding: var(--s-xl) 0; }
.article-lane {
  width: 100%;
  max-width: calc(var(--lane) + (2 * var(--lane-pad)));
  margin: 0 auto;
  background: var(--bone);
  color: var(--ink);
  border-radius: var(--r-sm);
  padding: var(--s-xl) var(--lane-pad);
  border-top: 6px solid var(--oxide);
}
.article-lane .entry-header { margin-bottom: var(--s-lg); }
.article-lane h1 { font-size: clamp(2rem, 5vw, 3.5rem); margin: var(--s-md) 0; color: var(--ink); }
.article-lane .meta { color: var(--neutral); }
.article-lane .meta > * + *::before { background: var(--neutral); }
.article-lane .badge { background: var(--oxide); color: var(--bone); border-color: var(--oxide); }
.article-lane a.badge:hover { background: var(--ink); color: var(--accent); border-color: var(--ink); }

.entry-content {
  max-width: var(--lane);
  margin: 0 auto;
  font-size: 1.125rem;
  line-height: 1.7;
}
.entry-content p, .entry-content ul, .entry-content ol { margin: 0 0 1.35em; }
.entry-content h2 { font-size: 2rem; margin: 2em 0 0.6em; color: var(--ink); }
.entry-content h3 { font-size: 1.375rem; margin: 1.8em 0 0.5em; color: var(--ink); }
.entry-content a { color: var(--oxide); text-decoration-color: var(--oxide); }
.entry-content a:hover { color: var(--ink); text-decoration-color: var(--ink); }
.entry-content li { margin-bottom: 0.4em; }
.entry-content strong { font-weight: 700; }

/* Inline figures run the full width of the reading column and keep the
   file's own aspect ratio. No fixed ratio box and no object-fit crop,
   which is what scripts/verify_rendered_article.js gate 1 checks. */
.entry-content figure,
.entry-content .wp-block-image { margin: 2em 0; }
.entry-content figure img,
.entry-content .wp-block-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-sm);
}
.entry-content figcaption,
.entry-content .wp-block-image figcaption {
  font-size: 0.875rem;
  color: var(--neutral);
  margin-top: var(--s-sm);
  text-align: left;
}
/* Wide and full alignments are clamped to the reading column. An image
   wider than the column fails the width gate. */
.entry-content .alignwide,
.entry-content .alignfull,
.entry-content .alignleft,
.entry-content .alignright,
.entry-content .aligncenter {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  float: none;
}

.entry-content blockquote {
  margin: 1.8em 0;
  padding: var(--s-md) var(--s-lg);
  border-left: 4px solid var(--oxide);
  background: rgba(21, 17, 15, 0.05);
  font-size: 1.1875rem;
}
.entry-content blockquote p:last-child { margin-bottom: 0; }
.entry-content cite { display: block; font-size: 0.875rem; color: var(--neutral); font-style: normal; margin-top: var(--s-sm); }

/* Tables have to fit 390px without a sideways scroll, so the layout is
   fixed and long cell strings wrap instead of forcing a min width. */
.entry-content table,
.entry-content .wp-block-table table {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 0.9375rem;
}
.entry-content .wp-block-table { overflow-x: visible; margin: 2em 0; }
.entry-content th, .entry-content td {
  border: 1px solid rgba(21, 17, 15, 0.25);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
}
.entry-content th { background: rgba(21, 17, 15, 0.08); font-weight: 700; }
.entry-content caption {
  caption-side: top;
  text-align: left;
  font-size: 0.875rem;
  color: var(--neutral);
  padding-bottom: var(--s-sm);
}

.entry-content pre, .entry-content code {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-width: 100%;
}
.entry-content pre {
  background: rgba(21, 17, 15, 0.06);
  padding: var(--s-md);
  border-radius: var(--r-sm);
  overflow-x: visible;
  font-size: 0.9375rem;
}

.article-footer { max-width: var(--lane); margin: var(--s-xl) auto 0; padding-top: var(--s-lg); border-top: 1px solid rgba(21, 17, 15, 0.2); }
/* Direct child only. The category badges below carry .label too, and a
   descendant selector here repainted their text neutral brown on oxide red,
   which measured 1.31:1. */
.article-footer > .label { color: var(--neutral); display: block; margin-bottom: var(--s-sm); }
.article-footer .tags { display: flex; flex-wrap: wrap; gap: var(--s-sm); }

.related { padding: var(--s-xl) 0; }
.related .crate li { background: var(--surface); }

/* ------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------ */
.site-footer {
  border-top: 1px solid var(--border);
  background: var(--surface);
  margin-top: var(--s-xl);
  padding: var(--s-xl) 0 var(--s-lg);
}
.footer-cols {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s-lg) var(--s-xl);
}
.footer-cols h2 {
  font-family: var(--body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--s-md);
}
.footer-cols ul { list-style: none; margin: 0; padding: 0; }
.footer-cols li { margin-bottom: var(--s-sm); }
.footer-cols a { color: var(--bone); text-decoration: none; }
.footer-cols a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

.footer-standing { color: var(--muted); font-size: 0.9375rem; max-width: 34em; margin: var(--s-md) 0 0; }
.footer-legal {
  border-top: 1px solid var(--border);
  margin-top: var(--s-lg);
  padding-top: var(--s-md);
  color: var(--muted);
  font-size: 0.8125rem;
}
.footer-legal p { margin: 0 0 var(--s-xs); }

/* ------------------------------------------------------------------
   Homepage columns, search, and the pieces the templates add
   ------------------------------------------------------------------ */

/* Grid children default to min-width:auto, so one long headline or one wide
   image would push the whole column past the viewport. Both tracks are
   minmax(0, ...) and both children opt out of that default. */
.home-main, .home-rail { min-width: 0; }
.home-rail > .rail:first-child { margin-top: 0; }
.row-body { min-width: 0; }

/* Copy from a static front page, set on the dark surface rather than in the
   bone reading lane. */
.front-copy { margin-bottom: var(--s-xl); }
.front-copy h1 { font-size: clamp(2rem, 5vw, 3rem); }
.front-copy p { color: var(--muted); max-width: 46em; }
.front-copy a { color: var(--bone); }

/* Muted, not neutral. Neutral brown on the card surface measured 2.17:1. */
.card-date { color: var(--muted); }

.crate a > .count { flex: none; }
.empty-note .crate { margin-top: var(--s-md); }

/* The featured image keeps the file's own proportions at the full width of the
   reading lane. No fixed ratio box and no object-fit anywhere in this theme. */
.article-figure { margin: 0 0 var(--s-lg); }
.article-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-sm);
}
.article-figure figcaption {
  font-size: 0.875rem;
  color: var(--neutral);
  margin-top: var(--s-sm);
}

.entry-header .badge { margin-bottom: var(--s-sm); }
.entry-header .badge + h1 { margin-top: var(--s-sm); }

.page-links { margin-top: var(--s-lg); font-weight: 700; }
.page-links a { color: var(--oxide); }

.search-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-sm);
  margin: var(--s-lg) 0 0;
  max-width: 34em;
}
.search-field {
  flex: 1 1 12em;
  min-width: 0;
  background: var(--ink);
  color: var(--bone);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  font: inherit;
}
.search-field::placeholder { color: var(--neutral); }
.search-submit {
  flex: none;
  background: var(--oxide);
  color: var(--bone);
  border: 1px solid var(--oxide);
  border-radius: var(--r-sm);
  padding: 10px 18px;
  font-family: var(--body);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}
.search-submit:hover { background: var(--accent); border-color: var(--accent); color: var(--ink); }

/* ------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------ */
@media (max-width: 1000px) {
  .home-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-xl); }
  .rail { border-left: 0; border-top: 1px solid var(--border); padding-left: 0; padding-top: var(--s-lg); }
}

@media (max-width: 782px) {
  :root { --lane-pad: 20px; }
  .wrap { padding: 0 20px; }
  .site-header .wrap { flex-wrap: wrap; min-height: 0; }

  /* Without JavaScript the menu stays open and usable, so the toggle
     only takes over once the script has run. */
  .has-js .nav-toggle { display: inline-block; }
  .has-js .primary-nav { display: none; width: 100%; }
  .has-js .primary-nav.is-open { display: block; }
  .primary-nav ul { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
  .primary-nav li { border-top: 1px solid var(--border); }
  .primary-nav a { display: block; padding: 14px 0; }
  .primary-nav .sub-menu { flex-direction: column; margin-left: var(--s-md); }

  .row { grid-template-columns: minmax(0, 1fr); gap: var(--s-sm); }
  .row .row-date { padding-top: 0; }
  .article-lane { padding: var(--s-lg) var(--lane-pad); border-radius: 0; }
  .lane-outer { padding: var(--s-lg) 0; }
  .entry-content { font-size: 1.0625rem; }
  .entry-content h2 { font-size: 1.625rem; }
  .entry-content table, .entry-content .wp-block-table table { font-size: 0.875rem; }
  .entry-content th, .entry-content td { padding: 8px; }
  .card-grid { grid-template-columns: minmax(0, 1fr); }
  .home-grid { padding: var(--s-lg) 0; }

  /* auto-fit kept trying for three columns at 390px, which squeezed the
     standing paragraph to about two words per line and pushed the Site column
     out of reading order. */
  .footer-cols { grid-template-columns: minmax(0, 1fr); gap: var(--s-lg); }
}

@media (max-width: 420px) {
  .brand-plate img { width: 124px; }
  .entry-content th, .entry-content td { padding: 6px; font-size: 0.8125rem; }
}

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

@media print {
  .site-header, .site-footer, .related, .skip-link { display: none; }
  body { background: #FFFFFF; color: #000000; }
  .article-lane { background: #FFFFFF; max-width: none; padding: 0; }
}