/* ==========================================================================
   Arthaus Journal — theme stylesheet
   ==========================================================================
   Framework-free, on top of tokens.css. No Tailwind — WordPress doesn't need
   it to speak this language (see ARCHITECTURE.md TD2 in the blog-redesign
   plan). Roughly the same ~60-line grammar as the marketplace's
   tailwind.entry.css, ported to plain CSS, plus real component styling for
   every template this theme ships.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: rgb(var(--color-parchment));
  color: rgb(var(--color-charcoal));
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }
a { color: rgb(var(--color-bronze)); text-decoration: none; }
a:hover { color: rgb(var(--color-charcoal)); }
:focus-visible { outline: 2px solid rgb(var(--color-bronze)); outline-offset: 3px; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
  color: rgb(var(--color-charcoal));
  margin: 0;
}

/* ── Layout primitives ────────────────────────────────────────────────── */
.container-x {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter-x, 1.5rem);
}
@media (min-width: 1024px) {
  .container-x { padding-inline: var(--gutter-x-lg, 3rem); }
}
.container-narrow { max-width: var(--container-narrow); margin-inline: auto; }

.section-y { padding-block: var(--space-section-y); }
@media (min-width: 1024px) {
  .section-y { padding-block: var(--space-section-y-lg); }
}

.label-eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: rgb(var(--color-warm-gray));
}

.divider-bronze {
  width: 2.5rem;   /* 40px, per DESIGN.md — the signature mark */
  height: 1px;
  background: rgb(var(--color-bronze));
  border: 0;
  margin: 1.25rem 0 0;
}

/* Scroll-reveal was removed (2026-09-18) — see the theme README. With this
   page's volume of lazy-loaded images, the layout shift as images loaded in
   left IntersectionObserver's initial "not intersecting" judgement stuck for
   good on 63% of targets in real testing, permanently hiding real content
   (an empty sidebar, an empty footer, an empty article body). Nothing here
   was worth that failure rate. */

/* ── Masthead ─────────────────────────────────────────────────────────── */
.masthead {
  border-bottom: 1px solid rgb(var(--color-border));
  background: rgb(var(--color-parchment-light));
  position: sticky;
  top: 0;
  z-index: var(--z-header, 50);
}
.masthead-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.25rem;
}
.wordmark {
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: rgb(var(--color-charcoal));
}
.wordmark:hover { color: rgb(var(--color-bronze)); }

.primary-nav { display: none; }
@media (min-width: 860px) {
  .primary-nav { display: flex; }
}
.primary-nav ul { display: flex; gap: 1.75rem; list-style: none; margin: 0; padding: 0; }
.primary-nav a {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 400;
  color: rgb(var(--color-charcoal));
  padding: 0.25rem 0;
  border-bottom: 1px solid transparent;
}
.primary-nav a:hover { color: rgb(var(--color-bronze)); border-color: rgb(var(--color-bronze) / 0.4); }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  background: none;
  border: 1px solid rgb(var(--color-border));
  border-radius: var(--radius-md);
  cursor: pointer;
}
@media (min-width: 860px) { .nav-toggle { display: none; } }
.nav-toggle svg { width: 1.125rem; height: 1.125rem; stroke: rgb(var(--color-charcoal)); }

.mobile-nav {
  display: none;
  border-top: 1px solid rgb(var(--color-border));
  padding-block: 1rem;
}
.mobile-nav.is-open { display: block; }
.mobile-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.125rem; }
.mobile-nav a {
  display: block;
  padding: 0.625rem 0.25rem;
  font-size: var(--fs-base);
  color: rgb(var(--color-charcoal));
  border-bottom: 1px solid rgb(var(--color-border) / 0.6);
}
@media (min-width: 860px) { .mobile-nav { display: none !important; } }

/* ── Hero (article) ───────────────────────────────────────────────────── */
.article-hero {
  width: 100%;               /* pin width explicitly — combining aspect-ratio
                                 with max-height on an auto-width block lets
                                 the browser derive width FROM the height
                                 constraint instead of filling the container,
                                 shrinking a full-bleed hero to a fraction of
                                 the viewport. This is the fix. */
  aspect-ratio: 16 / 9;
  max-height: 34rem;
  overflow: hidden;
  background: rgb(var(--color-parchment-light));
}
.article-hero img { width: 100%; height: 100%; object-fit: cover; }

.article-head { padding-block: 2.5rem 2rem; }
.article-head .label-eyebrow { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.article-head .label-eyebrow .sep { color: rgb(var(--color-mute)); text-transform: none; letter-spacing: 0; font-weight: 400; }
.article-head h1 {
  font-size: clamp(2rem, 5.5vw, 3.5rem);
  line-height: 1.08;
  font-weight: 300;
  margin-top: 1rem;
}
.article-head .dek {
  font-family: var(--font-body);
  font-size: var(--fs-lg);
  font-weight: 300;
  color: rgb(var(--color-warm-gray));
  max-width: 42rem;
  margin-top: 1.25rem;
}
.article-byline {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-top: 1.5rem;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: rgb(var(--color-mute));
}
.article-byline a { color: rgb(var(--color-warm-gray)); }
.article-byline a:hover { color: rgb(var(--color-bronze)); }

/* ── Article body + rail grid ─────────────────────────────────────────── */
.article-grid {
  display: grid;
  gap: 3rem;
  align-items: start;
  padding-block: 0 4rem;
}
@media (min-width: 1024px) {
  .article-grid { grid-template-columns: 1fr 22rem; gap: 4rem; }
}

/* min-width:0 overrides the grid item default (auto, which floors at content's
   intrinsic size) — without it, a long unbroken string in the body can force
   the whole left column wider than its 1fr share, squeezing or wrapping the
   rail column unpredictably. Standard CSS Grid gotcha. */
.article-main { min-width: 0; }

.article-body {
  max-width: 42rem;
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: rgb(var(--color-charcoal) / 0.9);
}
.article-body p { margin: 0 0 1.4em; }
.article-body p:last-child { margin-bottom: 0; }
.article-body h2 {
  font-size: var(--fs-2xl);
  font-weight: 300;
  margin: 2.5em 0 0.75em;
}
.article-body h3 {
  font-size: var(--fs-xl);
  font-weight: 400;
  margin: 2em 0 0.6em;
}
.article-body a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.article-body strong { font-weight: 500; color: rgb(var(--color-charcoal)); }
.article-body blockquote {
  margin: 2em 0;
  padding-left: 1.5rem;
  border-left: 2px solid rgb(var(--color-bronze));
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-style: italic;
  color: rgb(var(--color-charcoal) / 0.8);
  line-height: 1.5;
}
.article-body img,
.article-body figure {
  margin: 2em 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.article-body figure img { margin: 0; border-radius: 0; }
.article-body figcaption,
.article-body .wp-caption-text {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: rgb(var(--color-warm-gray));
  margin-top: 0.6rem;
  text-align: center;
}
/* Legacy .wp-caption wrapper from imported content — neutralise its inline
   width, let it size to the column instead. Content migration removes the
   inline style outright (Phase 1.6); this is the belt-and-suspenders CSS
   fallback for anything that slips through. */
.article-body .wp-caption { width: auto !important; max-width: 100%; margin: 2em auto; }
.article-body .wp-caption img { border-radius: var(--radius-lg); }

/* ── Sticky rail ──────────────────────────────────────────────────────── */
.rail { display: grid; gap: 1.5rem; }
@media (min-width: 1024px) {
  .rail { position: sticky; top: 6.5rem; }
}
.rail-card {
  background: rgb(var(--color-parchment-light));
  border: 1px solid rgb(var(--color-border));
  border-radius: var(--radius-lg);
  padding: 1.5rem;
}
.rail-card .label-eyebrow { margin-bottom: 1rem; display: block; }
.rail-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.875rem; }
.rail-list a {
  color: rgb(var(--color-charcoal));
  font-size: var(--fs-sm);
  line-height: 1.4;
  display: block;
}
.rail-list a:hover { color: rgb(var(--color-bronze)); }
.rail-empty { font-size: var(--fs-sm); color: rgb(var(--color-mute)); font-style: italic; }

.share-row { display: flex; gap: 0.625rem; }
.share-row a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem;
  border: 1px solid rgb(var(--color-border));
  border-radius: var(--radius-md);
  color: rgb(var(--color-warm-gray));
}
.share-row a:hover { color: rgb(var(--color-bronze)); border-color: rgb(var(--color-bronze)); }
.share-row svg { width: 1rem; height: 1rem; }

/* ── Journal landing grid ─────────────────────────────────────────────── */
.journal-hero {
  padding-block: 3rem 2.5rem;
  border-bottom: 1px solid rgb(var(--color-border));
}
.journal-hero h1 { font-size: clamp(2.25rem, 5vw, 3.25rem); font-weight: 300; }
.journal-hero .dek {
  font-size: var(--fs-lg);
  color: rgb(var(--color-warm-gray));
  max-width: 38rem;
  margin-top: 1rem;
  font-weight: 300;
}

/* ── Front page: lead band ────────────────────────────────────────────── */
/* The one place on the site that runs at display scale. Everything else on
   the front page is deliberately quieter than this. */
.lead-band {
  background: rgb(var(--color-parchment-light));
  border-bottom: 1px solid rgb(var(--color-border));
  padding-block: 2.25rem 3.5rem;
}
@media (min-width: 1024px) { .lead-band { padding-block: 2.75rem 4.5rem; } }

.journal-masthead {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  padding-bottom: 1.75rem;
  margin-bottom: 2.5rem;
  border-bottom: 1px solid rgb(var(--color-border));
}
.journal-masthead-name {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  color: rgb(var(--color-charcoal));
}
.journal-masthead-dek {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wide);
  color: rgb(var(--color-mute));
}

.lead { display: grid; gap: 1.75rem; align-items: center; }
@media (min-width: 900px) {
  .lead { grid-template-columns: 1.15fr 1fr; gap: 3.5rem; }
}
.lead-media {
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: rgb(var(--color-parchment));
}
.lead-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--ease-standard); }
.lead:hover .lead-media img { transform: scale(1.02); }
.lead-body { min-width: 0; }
.lead-body .label-eyebrow { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.lead-body .label-eyebrow .sep { text-transform: none; letter-spacing: 0; font-weight: 400; color: rgb(var(--color-mute)); }
.lead-body h2 {
  font-size: clamp(1.875rem, 3.6vw, 3rem);
  font-weight: 300;
  line-height: 1.08;
  margin-top: 0.875rem;
}
.lead-body h2 a { color: rgb(var(--color-charcoal)); }
.lead-body h2 a:hover { color: rgb(var(--color-bronze)); }
.lead-body .dek {
  font-size: var(--fs-lg);
  font-weight: 300;
  color: rgb(var(--color-warm-gray));
  margin: 1.25rem 0 0;
  max-width: 34rem;
}
.lead-meta {
  margin-top: 1.25rem;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: rgb(var(--color-mute));
}

.lead-secondary {
  display: grid;
  gap: 1.75rem;
  margin-top: 3rem;
  padding-top: 2.25rem;
  border-top: 1px solid rgb(var(--color-border));
}
@media (min-width: 768px) { .lead-secondary { grid-template-columns: repeat(2, 1fr); gap: 3rem; } }

.card-compact { display: grid; grid-template-columns: 5.5rem 1fr; gap: 1.125rem; align-items: start; }
.card-compact-media {
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: rgb(var(--color-parchment));
}
.card-compact-media img { width: 100%; height: 100%; object-fit: cover; }
.card-compact-body { min-width: 0; }
.card-compact .label-eyebrow { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.card-compact .label-eyebrow .sep { text-transform: none; letter-spacing: 0; font-weight: 400; }
.card-compact h3 { font-size: var(--fs-lg); font-weight: 400; line-height: 1.3; }
.card-compact h3 a { color: rgb(var(--color-charcoal)); }
.card-compact h3 a:hover { color: rgb(var(--color-bronze)); }

/* The lead band already carries its own generous bottom padding; stacking a
   full section rhythm on top of it opened a gap wide enough to read as a
   missing module. Only the section directly after it is tightened. */
.lead-band + .section-y { padding-top: 3.5rem; }
@media (min-width: 1024px) { .lead-band + .section-y { padding-top: 4.5rem; } }

/* ── Shared section header ────────────────────────────────────────────── */
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid rgb(var(--color-border));
}
.section-head h2 { font-size: clamp(1.375rem, 2.4vw, 1.875rem); font-weight: 300; }

/* ── Sections index ───────────────────────────────────────────────────── */
.sections-row { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px)  { .sections-row { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .sections-row { gap: 1.25rem; } }

.section-tile {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: rgb(var(--color-charcoal));
}
.section-tile img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-standard);
}
.section-tile:hover img { transform: scale(1.04); }
/* Scrim: the tile's label sits on top of a photograph that could be any
   brightness, so the contrast has to come from the tile, not from luck.
   Weighted hard toward the bottom third where the label actually sits — the
   first pass was too gentle and the labels disappeared into the pale images
   (a blue plush toy, a bright pink studio set), which is precisely the case
   a scrim exists to survive. */
.section-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgb(var(--color-charcoal) / 0.92) 0%,
    rgb(var(--color-charcoal) / 0.62) 34%,
    rgb(var(--color-charcoal) / 0.24) 66%,
    rgb(var(--color-charcoal) / 0.06) 100%);
}
.section-tile-meta {
  position: absolute;
  left: 1.125rem;
  right: 1.125rem;
  bottom: 1rem;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.section-tile-meta .name {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  color: #fff;
  line-height: 1.15;
}
.section-tile-meta .count {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--tracking-wide);
  color: rgb(255 255 255 / 0.72);
}

/* ── Archive band ─────────────────────────────────────────────────────── */
/* The page's only dark surface. Without it the whole front page is one
   unbroken parchment field and the scroll has no punctuation. */
.archive-band {
  background: rgb(var(--color-charcoal));
  color: rgb(var(--color-parchment));
}
/* Centered statement rather than a two-column split: at container width the
   split left a dead void between a headline capped at ~24ch and a button
   pinned to the far right, which read as a layout failure rather than a
   composition. Centred, the band has no gap to mismanage at any width. */
.archive-band-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
  padding-block: 4rem;
}
@media (min-width: 900px) { .archive-band-inner { padding-block: 5.5rem; } }
.archive-band .label-eyebrow { color: rgb(var(--color-bronze)); }
.archive-band h2 {
  color: rgb(var(--color-parchment));
  font-size: clamp(1.75rem, 3.4vw, 2.875rem);
  font-weight: 300;
  line-height: 1.12;
  margin-top: 1rem;
  max-width: 20ch;
}
.archive-band p {
  color: rgb(255 255 255 / 0.62);
  font-size: var(--fs-base);
  margin: 1.25rem 0 0;
  max-width: 52ch;
}
.archive-band-actions { margin-top: 2rem; }
/* .btn-invert lives with .btn further down, not here — .btn is declared later
   in this file and at equal specificity would otherwise win the cascade and
   repaint the button charcoal-on-charcoal. */

.journal-grid {
  display: grid;
  gap: 2.5rem 2rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .journal-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .journal-grid { grid-template-columns: repeat(3, 1fr); } }

.post-card { display: flex; flex-direction: column; }
.post-card-media {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: rgb(var(--color-parchment-light));
  margin-bottom: 1.125rem;
}
.post-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--ease-standard); }
.post-card:hover .post-card-media img { transform: scale(1.035); }
.post-card .label-eyebrow { margin-bottom: 0.625rem; display: flex; gap: 0.5rem; }
.post-card .label-eyebrow .sep { text-transform: none; letter-spacing: 0; font-weight: 400; }
.post-card h2 {
  font-size: var(--fs-xl);
  font-weight: 400;
  line-height: 1.25;
}
.post-card h2 a { color: rgb(var(--color-charcoal)); }
.post-card:hover h2 a { color: rgb(var(--color-bronze)); }
.post-card .excerpt {
  font-size: var(--fs-sm);
  color: rgb(var(--color-warm-gray));
  margin-top: 0.625rem;
  line-height: 1.55;
}

.featured-strip {
  background: rgb(var(--color-parchment-light));
  border-top: 1px solid rgb(var(--color-border));
  border-bottom: 1px solid rgb(var(--color-border));
}

/* ── Pagination ───────────────────────────────────────────────────────── */
.pagination-row {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding-top: 3rem;
}
.pagination-row a, .pagination-row span {
  min-width: 2.25rem; height: 2.25rem;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: var(--fs-sm);
  border-radius: var(--radius-md);
  color: rgb(var(--color-charcoal));
}
.pagination-row a:hover { background: rgb(var(--color-parchment-light)); color: rgb(var(--color-bronze)); }
.pagination-row .current { background: rgb(var(--color-charcoal)); color: #fff; }

/* ── Archive / author / search headers ───────────────────────────────── */
.page-head { padding-block: 3rem 2.5rem; border-bottom: 1px solid rgb(var(--color-border)); }
.page-head h1 { font-size: clamp(1.875rem, 4.5vw, 2.75rem); font-weight: 300; }
.page-head .dek { color: rgb(var(--color-warm-gray)); margin-top: 0.75rem; font-size: var(--fs-base); }

.author-card {
  display: flex; align-items: center; gap: 1.25rem;
  margin-top: 1.5rem;
}
.author-card img { width: 4rem; height: 4rem; border-radius: 999px; object-fit: cover; }
.author-card .name { font-family: var(--font-display); font-size: var(--fs-xl); }
.author-card .count { font-family: var(--font-mono); font-size: var(--fs-xs); color: rgb(var(--color-mute)); margin-top: 0.25rem; }

.search-form-row { margin-top: 1.5rem; display: flex; max-width: 32rem; }
.search-form-row input[type="search"] {
  flex: 1;
  padding: 0.75rem 1rem;
  border: 1px solid rgb(var(--color-border));
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  background: #fff;
}
.search-form-row button {
  padding: 0 1.25rem;
  background: rgb(var(--color-charcoal));
  color: #fff;
  border: 0;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  cursor: pointer;
}
.search-form-row button:hover { background: rgb(var(--color-bronze)); }

/* ── 404 ──────────────────────────────────────────────────────────────── */
.error-404 { text-align: center; padding-block: 5rem; }
.error-404 .code { font-family: var(--font-mono); color: rgb(var(--color-bronze)); font-size: var(--fs-sm); letter-spacing: var(--tracking-wider); }
.error-404 h1 { margin-top: 1rem; font-size: clamp(2rem, 5vw, 3rem); }
.error-404 p { color: rgb(var(--color-warm-gray)); margin-top: 1rem; }
.error-404 .btn { display: inline-block; margin-top: 2rem; }
.error-404-search { margin: 1.75rem auto 0; }
.error-404-search .search-form-row { margin-top: 0; margin-inline: auto; }

.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: rgb(var(--color-charcoal));
  color: #fff !important;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 400;
}
.btn:hover { background: rgb(var(--color-bronze)); }

/* For use on the dark archive band, where the default charcoal fill would be
   invisible. Must stay after .btn — same specificity, so order decides. */
.btn-invert { background: rgb(var(--color-parchment)); color: rgb(var(--color-charcoal)) !important; }
.btn-invert:hover { background: rgb(var(--color-bronze)); color: #fff !important; }

/* ── Sources / provenance (empty today — see Phase 4) ────────────────── */
.sources-block {
  margin-top: 3rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgb(var(--color-border));
}
.sources-block ol { margin: 0; padding-left: 1.25rem; font-size: var(--fs-sm); color: rgb(var(--color-warm-gray)); }

/* ── Footer ───────────────────────────────────────────────────────────── */
.site-footer {
  border-top: 1px solid rgb(var(--color-border));
  background: rgb(var(--color-parchment-light));
  padding-block: 3rem;
  margin-top: 4rem;
}
.footer-grid { display: grid; gap: 2rem; }
@media (min-width: 640px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; } }
.footer-grid .wordmark { display: block; margin-bottom: 0.75rem; }
.footer-grid p { font-size: var(--fs-sm); color: rgb(var(--color-warm-gray)); max-width: 24rem; }
.footer-col h3 { font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--tracking-wider); text-transform: uppercase; color: rgb(var(--color-warm-gray)); margin-bottom: 0.875rem; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.footer-col a { font-size: var(--fs-sm); color: rgb(var(--color-charcoal)); }
.footer-col a:hover { color: rgb(var(--color-bronze)); }
.footer-legal {
  margin-top: 2.5rem; padding-top: 1.5rem;
  border-top: 1px solid rgb(var(--color-border));
  font-family: var(--font-mono); font-size: var(--fs-xs); color: rgb(var(--color-mute));
}

/* ── Screen-reader utility ────────────────────────────────────────────── */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: rgb(var(--color-charcoal)); color: #fff;
  padding: 0.75rem 1.25rem; border-radius: 0 0 var(--radius-md) 0;
}
.skip-link:focus { left: 0; }