/*
Theme Name:  The Black Commentator
Theme URI:   https://blackcommentator.com/
Author:      Black Commentator
Description: Editorial theme for The Black Commentator — weekly independent commentary on economic justice, social justice and peace. A four-colour palette (gold, red, green, black) on newsprint, set in Archivo.
Version:     1.2.9
Requires at least: 6.0
Requires PHP: 7.4
License:     GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: black-commentator
Tags:        editorial, news, magazine, custom-menu, translation-ready, accessibility-ready
*/
/* ============================================================
   The Black Commentator — landing page
   One typeface (Archivo / Archivo Expanded).
   Two colors only: red #93271A + black, on neutral newsprint paper.
   ============================================================ */

:root {
  /* Two colors only: red (#93271A) + black. Plus neutral paper/grey. */
  --ink:        #141210;   /* black */
  --ink-2:      #221C18;
  --paper:      #FFFFFF;   /* page background — white */
  --paper-2:    #ECECEA;   /* light grey — hover */
  --mist:       #F1F1EF;   /* clean light grey section tone */
  --gold:       #93271A;   /* mapped to red */
  --gold-soft:  #B6351F;   /* brighter red (hover / on-dark) */
  --gold-deep:  #7C2014;   /* deeper red */
  --pine:       #93271A;   /* mapped to red */
  --pine-soft:  #7C2014;
  --oxblood:    #93271A;
  --oxblood-br: #B6351F;
  --stone:      #6F665A;
  --stone-2:    #918878;
  --rose:       #F4E4DF;   /* lighter red shade — soft surface */
  --rose-2:     #EBD4CD;
  --rose-line:  rgba(147,39,26,.16);
  --red-light:  #E08A7A;   /* lighter red accent for use on black/dark */
  --red-light-d:#D97A68;

  /* ---- accent colors: heritage green + gold, used sparingly ---- */
  --green:      #3E7A56;   /* balanced pine-green — marks & text on light */
  --green-deep: #2F6042;   /* darker green — small text / borders */
  --green-light:#86BBA0;   /* soft green — for use on ink/dark */
  --green-soft: rgba(62,122,86,.12);  /* green tint surface */
  --brass:      #BE8A2C;   /* gold — decorative marks on light */
  --brass-deep: #946417;   /* deep gold — small text (readable on light) */
  --brass-light:#E1B45B;   /* bright gold — for use on ink/dark */
  --brass-soft: rgba(190,138,44,.14); /* gold tint surface */

  --line:       rgba(23, 19, 14, .14);
  --line-soft:  rgba(23, 19, 14, .08);

  --serif: 'Archivo', sans-serif;          /* single family */
  --exp:   'Archivo Expanded', 'Archivo', sans-serif;

  --wrap: 1200px;
  --pad: clamp(1.1rem, 4vw, 2.5rem);
  --r: 4px;

  --t: .45s cubic-bezier(.2, .7, .2, 1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--serif);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.6;
  font-size: clamp(1rem, .96rem + .2vw, 1.075rem);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

.wrap { width: min(var(--wrap), 100%); margin-inline: auto; padding-inline: var(--pad); }

.visually-hidden, .skip-link {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link:focus {
  position: fixed; top: .6rem; left: .6rem; width: auto; height: auto;
  clip: auto; z-index: 200; background: var(--ink); color: var(--paper);
  padding: .6rem 1rem; border-radius: var(--r);
}

/* visible focus everywhere */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2.5px solid var(--gold-deep);
  outline-offset: 2px;
}

/* ---------- shared type ---------- */
.kicker {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--exp);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--oxblood);
  margin-bottom: 1.1rem;
}
.kicker--gold { color: var(--brass-deep); }
.kicker--green { color: var(--green-deep); }
.kicker--center { justify-content: center; text-align: center; }
.kicker__rule { width: 34px; height: 2px; background: currentColor; display: inline-block; }

/* ---------- buttons ---------- */
.btn {
  --bg: transparent; --fg: var(--ink); --bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--exp);
  font-weight: 700; font-size: .82rem; letter-spacing: .04em;
  padding: .82rem 1.4rem; border-radius: var(--r);
  background: var(--bg); color: var(--fg);
  border: 1.5px solid var(--bd);
  transition: transform var(--t), background var(--t), color var(--t), box-shadow var(--t);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn--solid { --bg: var(--oxblood); --fg: #fff; --bd: var(--oxblood); }
.btn--solid:hover { --bg: var(--oxblood-br); --bd: var(--oxblood-br); box-shadow: 0 8px 22px -10px rgba(147,39,26,.6); }
.btn--ghost { --bd: var(--line); --fg: var(--ink); }
.btn--ghost:hover { --bd: var(--ink); }
.btn--cta {
  --bg: var(--oxblood); --fg: #fff; --bd: var(--oxblood);
  box-shadow: 0 10px 26px -14px rgba(147,39,26,.7);
}
.btn--cta:hover { --bg: var(--oxblood-br); --bd: var(--oxblood-br); box-shadow: 0 14px 30px -12px rgba(147,39,26,.8); }
/* green "read / free" action — pairs with red "join / support" */
.btn--go { --bg: var(--green); --fg: #fff; --bd: var(--green); box-shadow: 0 10px 26px -14px rgba(47,96,66,.65); }
.btn--go:hover { --bg: var(--green-deep); --bd: var(--green-deep); box-shadow: 0 14px 30px -12px rgba(47,96,66,.75); }
.btn--text { background: transparent; border-color: transparent; padding-inline: .4rem; }
.btn--text:hover { color: var(--green-deep); transform: none; text-decoration: underline; text-underline-offset: 4px; }
.btn--block { width: 100%; }

/* ============ UTILITY BAR ============ */
.utility {
  background: var(--ink);
  color: var(--paper);
  font-size: .76rem;
}
.utility__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-block: .5rem; flex-wrap: wrap;
}
.utility__brand {
  font-family: var(--exp); font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; font-size: .68rem; color: var(--brass-light);
}
.utility__meta { display: inline-flex; align-items: center; gap: .55rem; color: rgba(243,238,227,.82); letter-spacing: .02em; }
.utility__sep { color: rgba(243,238,227,.4); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green-light); box-shadow: 0 0 0 0 rgba(134,187,160,.6); animation: pulse 2.4s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(134,187,160,.55)} 70%{box-shadow:0 0 0 7px rgba(134,187,160,0)} 100%{box-shadow:0 0 0 0 rgba(134,187,160,0)} }
/* the site-wide "free email dispatch" CTA — a real button, not a text link,
   so it reads as prominent on every page, on phone and on laptop alike */
.utility__cta {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--brass-light); color: var(--ink);
  font-family: var(--exp); font-weight: 700; font-size: .72rem; letter-spacing: .02em;
  padding: .4rem .85rem; border-radius: 100px; white-space: nowrap;
  transition: background var(--t), transform var(--t);
}
.utility__cta:hover { background: #fff; transform: translateY(-1px); }

/* ============ NAV ============ */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: var(--mist);
  border-bottom: 1px solid var(--line);
  transition: border-color var(--t), box-shadow var(--t), background var(--t);
}
.nav.is-stuck { border-bottom-color: var(--line); box-shadow: 0 10px 30px -22px rgba(23,19,14,.5); }
.nav__inner { display: flex; align-items: center; gap: 1.5rem; padding-block: .85rem; }

.nameplate { display: flex; flex-direction: column; line-height: .92; margin-right: auto; }
.nameplate__logo { height: 46px; width: auto; }
.nameplate__the {
  font-family: var(--exp); font-weight: 600; font-size: .64rem;
  letter-spacing: .42em; text-transform: uppercase; color: var(--oxblood);
  padding-left: .12em;
}
.nameplate__name {
  font-family: var(--exp); font-weight: 900; font-size: 1.32rem;
  letter-spacing: -.01em; text-transform: uppercase; color: var(--ink);
}
.nav__links { display: flex; gap: 1.65rem; }
.nav__links a {
  font-family: var(--exp); font-weight: 600; font-size: .8rem;
  letter-spacing: .04em; color: var(--ink); position: relative; padding-block: .3rem;
}
.nav__links a::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  background: var(--gold); transition: width var(--t);
}
.nav__links a:hover::after { width: 100%; }
.nav__links a[aria-current="page"] { color: var(--oxblood); }
.nav__links a[aria-current="page"]::after { width: 100%; }
.nav__actions { display: flex; gap: .7rem; }
.nav__drawer { display: flex; align-items: center; gap: 1.5rem; }
.nav__drawer-head { display: none; }
.nav__scrim { display: none; }
.nav__toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; padding: .4rem; position: relative; z-index: 140; }
.nav__toggle span { width: 24px; height: 2px; background: var(--ink); transition: var(--t); }

/* ============ HERO ============ */
.hero { padding-top: clamp(2.5rem, 6vw, 5rem); position: relative; }
.hero__grid {
  display: grid; grid-template-columns: 1.15fr .85fr;
  gap: clamp(2rem, 5vw, 4.5rem); align-items: start;
}
.hero__headline {
  font-family: var(--exp); font-weight: 800;
  font-size: clamp(1.85rem, 1.15rem + 2.25vw, 3rem);
  line-height: 1.04; letter-spacing: -.02em; margin-bottom: 1.5rem;
  text-wrap: balance;
}
.hero__headline .hl {
  color: inherit; white-space: nowrap;
}
.hero__deck {
  font-size: clamp(.98rem, .94rem + .3vw, 1.12rem);
  color: var(--ink); max-width: 50ch; margin-bottom: 2rem; line-height: 1.55;
}
.hero__cta { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 2.4rem; }
.valueprops { list-style: none; padding: 0; display: grid; gap: .7rem; border-top: 1px solid var(--line); padding-top: 1.5rem; }
.valueprops li { font-size: .98rem; color: var(--stone); padding-left: 1.4rem; position: relative; }
.valueprops li::before {
  content: ''; position: absolute; left: 0; top: .58em; width: 9px; height: 9px;
  background: var(--green); transform: rotate(45deg);
}
/* let the three hero value props read across the palette */
.valueprops li:nth-child(2)::before { background: var(--brass); }
.valueprops li:nth-child(3)::before { background: var(--oxblood); }
.valueprops strong { color: var(--ink); font-weight: 700; }

/* Lead-area letter: use the exact shared white commentary card above the unchanged cover feature. */
.hero__feature { position: relative; display: flex; flex-direction: column; gap: 1.25rem; }
.hero__letter .ccard { width: 100%; }

/* lead story card (signature marginalia) */
.lead {
  background: var(--ink); color: var(--paper);
  border-radius: var(--r);
  position: relative; overflow: hidden;
}
.lead::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  background: var(--paper);
}
.lead__flag {
  display: inline-block; font-family: var(--exp); font-weight: 800;
  font-size: .66rem; letter-spacing: .16em; text-transform: uppercase;
  background: var(--paper); color: var(--ink); padding: .32rem .6rem; border-radius: 2px;
  margin-bottom: 1.3rem;
}
.lead__cat {
  font-family: var(--exp); font-weight: 600; font-size: .74rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--brass-light);
  margin-bottom: .5rem;
}
.lead__title {
  font-family: var(--exp); font-weight: 700;
  font-size: clamp(1.45rem, 1.1rem + 1.4vw, 1.95rem);
  line-height: 1.06; letter-spacing: -.01em; margin-bottom: .85rem; text-wrap: balance;
}
.lead__excerpt { color: rgba(243,238,227,.78); font-size: .95rem; margin-bottom: 1.5rem; }
.lead__by { display: flex; align-items: center; gap: .7rem; padding-bottom: 1.4rem; border-bottom: 1px solid rgba(243,238,227,.16); }
.avatar {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: var(--paper); color: var(--ink); font-family: var(--exp);
  font-weight: 700; font-size: .74rem; letter-spacing: .02em; flex: none;
}
.lead__byline { display: flex; flex-direction: column; line-height: 1.25; }
.lead__author { font-weight: 600; font-size: .92rem; }
.lead__readtime { font-size: .78rem; color: rgba(243,238,227,.6); }

/* the whole card is the one link — everything sits inside .lead__link, so
   there is no need for the title-plus-::after overlay trick used on .ccard.
   The padding lives here, on the link itself, rather than on .lead: that way
   the anchor's own box is the full visible card, edge to edge, and there is
   no inert padding ring around it that looks clickable but isn't. */
.lead__link {
  display: block; color: inherit; text-decoration: none;
  padding: clamp(1.6rem, 3vw, 2.3rem);
}
.lead__link:hover .lead__title { color: var(--red-light); }
.lead__link:focus-visible { outline: none; }
.lead:focus-within { outline: 2px solid var(--paper); outline-offset: 3px; }

/* the marginalia "add your voice" device — signature */
.margin-note {
  display: flex; gap: .8rem; margin-top: 1.4rem; padding-left: .2rem;
}
.margin-note__tick { width: 3px; align-self: stretch; background: var(--brass-light); border-radius: 2px; flex: none; }
.margin-note p { font-size: .9rem; color: rgba(243,238,227,.82); }
.margin-note strong { color: var(--red-light); font-weight: 700; }
.margin-note--lg p { color: rgba(243,238,227,.82); font-size: .98rem; }
.margin-note--lg strong { color: var(--red-light); }

/* ticker */
.ticker {
  margin-top: clamp(2.6rem, 5vw, 4rem);
  border-block: 1px solid var(--line); padding-block: .85rem; overflow: hidden;
}
.ticker__track {
  display: flex; gap: 1.6rem; align-items: center; width: max-content;
  animation: marquee 65s linear infinite;
  font-family: var(--exp); font-weight: 600; font-size: .82rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink);
}
.ticker__dot { color: var(--gold); flex: none; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* the headlines move, so they must stop for anyone trying to read or click one:
   on hover, and on keyboard focus (WCAG 2.2.2). */
.ticker:hover .ticker__track,
.ticker:focus-within .ticker__track { animation-play-state: paused; }

/* the duplicated half is only a wrapper for aria-hidden — it must not become a
   flex item itself, or the whole copy collapses into one cell and the gaps go */
.ticker__half { display: contents; }

.ticker__item { white-space: nowrap; color: inherit; text-decoration: none; }
.ticker__item:hover { color: var(--oxblood); }
.ticker__item:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.ticker__by { color: var(--stone-2); font-weight: 500; }

/* ============ section heads ============ */
.sec-head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.sec-head--row { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.sec-head__title {
  font-family: var(--exp); font-weight: 800;
  font-size: clamp(1.6rem, 1.2rem + 1.7vw, 2.4rem);
  line-height: 1.04; letter-spacing: -.02em; text-wrap: balance;
}
.sec-head__title--light { color: var(--ink); }

/* ============ PILLARS ============ */
/* tones swapped with .issue: the grey band now carries the week's issue,
   and the three fronts sit on white */
.pillars { padding-block: clamp(3.5rem, 8vw, 6rem); background: var(--paper); }
.pillars .sec-head { text-align: center; display: grid; justify-items: center; }
.pillars__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
/* three fronts, not four — the paper's masthead names three */
.pillars__grid--3 { grid-template-columns: repeat(3, 1fr); }
.pillar { background: var(--paper); padding: clamp(1.5rem, 2.4vw, 2.1rem); transition: background var(--t); position: relative; border-top: 3px solid var(--ink); }
.pillar:hover { background: var(--paper-2); }
/* the four fronts, each in one of the four colours */
.pillars__grid .pillar:nth-child(1) { border-top-color: var(--brass); }
.pillars__grid .pillar:nth-child(2) { border-top-color: var(--oxblood); }
.pillars__grid .pillar:nth-child(3) { border-top-color: var(--green); }
.pillars__grid .pillar:nth-child(4) { border-top-color: var(--ink); }
.pillar__no {
  font-family: var(--exp); font-weight: 800; font-size: 1rem;
  color: var(--gold-deep); letter-spacing: .05em; display: block; margin-bottom: 2.4rem;
}
/* subtle heritage-color accents across the four fronts */
.pillar:nth-child(1) .pillar__no { color: var(--brass-deep); }
.pillar:nth-child(2) .pillar__no { color: var(--oxblood); }
.pillar:nth-child(3) .pillar__no { color: var(--green-deep); }
.pillar:nth-child(4) .pillar__no { color: var(--ink); }
.pillar__title {
  font-family: var(--exp); font-weight: 700; font-size: 1.18rem;
  line-height: 1.05; margin-bottom: .7rem; letter-spacing: -.01em;
}
.pillar__text { font-size: .94rem; color: var(--stone); }

/* ============ ISSUE / CARDS ============ */
.issue { padding-block: clamp(3rem, 6vw, 5rem); border-top: 1px solid var(--line); background: var(--mist); }
/* the issue now follows the hero directly, and the ticker already closes with a
   rule of its own — without this the two hairlines stack into one thick line */
.hero + .issue { border-top: 0; }
/* The old .card / .card__img family lived here. It cropped each commentary's
   teaser PNG into a 1:1 box with object-fit: cover, which sliced the headline off
   the top and the pull-quote off the bottom on narrow screens. The commentary card
   replaced it — see THE COMMENTARY CARD below — and the rules are gone so the crop
   cannot come back. .tag survives: the Archives page still uses it. */
.tag {
  font-family: var(--exp); font-weight: 700; font-size: .64rem;
  letter-spacing: .12em; text-transform: uppercase; padding: .32rem .55rem; border-radius: 2px;
}
.tag--gold  { background: var(--brass-soft); color: var(--brass-deep); }
.tag--red   { background: rgba(147,39,26,.10); color: var(--oxblood); }
.tag--green { background: var(--green-soft); color: var(--green-deep); }
.tag--ink   { background: rgba(20,18,16,.07); color: var(--ink); }
.tag--pine  { background: var(--green-soft); color: var(--green-deep); }
.tag--ox    { background: rgba(20,18,16,.07); color: var(--ink); }

/* ============ MEMBERSHIP ============ */
.join {
  background: var(--ink); color: var(--paper);
  padding: clamp(3.5rem, 8vw, 6.5rem) 0 clamp(5rem, 9vw, 8rem);
  background-image: radial-gradient(120% 80% at 0% 0%, rgba(243,238,227,.06), transparent 55%);
}
.join__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
/* the plan cards below carry a badge that pokes .75rem above their top edge —
   without room here it overlaps the pitch text instead of sitting below it */
.join__pitch { margin-bottom: clamp(1.8rem, 4vw, 2.8rem); }
.join .kicker--gold { color: var(--brass-light); }
.join__title {
  font-family: var(--exp); font-weight: 800;
  font-size: clamp(1.7rem, 1.3rem + 1.9vw, 2.6rem); line-height: 1.04; letter-spacing: -.02em;
  margin-bottom: 1.4rem; text-wrap: balance;
}
.join__lede { color: rgba(243,238,227,.82); max-width: 46ch; margin-bottom: 1.8rem; }
.perks { list-style: none; padding: 0; display: grid; gap: .9rem; margin-bottom: 1.8rem; }
.perks li { display: flex; align-items: flex-start; gap: .7rem; font-size: 1rem; color: rgba(243,238,227,.92); }
.perks__mark { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--red-light); flex: none; margin-top: .18em; position: relative; }
.perks__mark::after { content: ''; position: absolute; inset: 0; margin: auto; width: 6px; height: 6px; border-radius: 50%; background: var(--red-light); }
.perks strong { color: var(--red-light); font-weight: 700; }

/* plans */
.plans { display: grid; gap: 1.2rem; grid-template-columns: 1fr 1fr; }
.plan {
  background: var(--paper); border: 1px solid var(--line); color: var(--ink);
  border-radius: var(--r); padding: 1.6rem 1.4rem; display: flex; flex-direction: column; position: relative;
}
/* dark-section (homepage) treatment */
.join .plan { background: rgba(243,238,227,.05); border-color: rgba(243,238,227,.18); color: var(--paper); }
.plan--feature { background: var(--paper); color: var(--ink); border-color: var(--gold); box-shadow: 0 24px 60px -30px rgba(0,0,0,.7); }
.plan__badge {
  position: absolute; top: -.75rem; left: 1.4rem;
  font-family: var(--exp); font-weight: 800; font-size: .62rem; letter-spacing: .14em;
  text-transform: uppercase; background: var(--ink); color: var(--paper);
  padding: .3rem .6rem; border-radius: 2px; line-height: 1.25; white-space: nowrap;
}
/* on the dark membership band, a black badge on a black section disappears —
   give it a gold ground so it reads, and lighten the feature label */
.join .plan__badge { background: var(--brass); color: var(--ink); }
.join .plan--feature .plan__name { color: var(--red-light); }
.plan__name {
  font-family: var(--exp); font-weight: 700; font-size: .82rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold-deep); margin-bottom: .8rem;
}
.plan:not(.plan--feature) .plan__name { color: var(--oxblood); }
.join .plan:not(.plan--feature) .plan__name { color: var(--green-light); }
/* ghost button on the dark Reader card needs light text */
.join .plan:not(.plan--feature) .btn--ghost { --fg: var(--paper); --bd: rgba(243,238,227,.32); }
.join .plan:not(.plan--feature) .btn--ghost:hover { --bd: var(--paper); }
.plan__price { display: flex; align-items: baseline; gap: .4rem; margin-bottom: 1.3rem; }
.plan__num { font-family: var(--exp); font-weight: 900; font-size: 2.6rem; line-height: 1; letter-spacing: -.02em; }
.plan__per { font-size: .85rem; color: var(--stone-2); }
.plan--feature .plan__per { color: var(--stone); }
.plan__list { list-style: none; padding: 0; display: grid; gap: .65rem; margin-bottom: 1.6rem; font-size: .92rem; }
.plan__list li { padding-left: 1.3rem; position: relative; }
.plan__list li::before { content: '+'; position: absolute; left: 0; font-family: var(--exp); font-weight: 800; color: var(--gold-deep); }
.join .plan:not(.plan--feature) .plan__list { color: rgba(243,238,227,.85); }
.join .plan:not(.plan--feature) .plan__list li::before { color: var(--green-light); }
.plan__list strong { font-weight: 700; }
.plan__fine { margin-top: .9rem; font-size: .78rem; color: var(--stone); text-align: center; }
.plan__fine a { text-decoration: underline; }

/* ============ VOICES ============ */
.voices {
  background: var(--paper); color: var(--ink);
  padding-top: clamp(3.5rem, 8vw, 6rem);
}
.voices .sec-head { text-align: center; display: grid; justify-items: center; }
.voices .kicker--gold { color: var(--oxblood); }
.pullquote { position: relative; max-width: 760px; margin: 0 auto clamp(2.5rem, 5vw, 3.5rem); padding-top: 1.8rem; text-align: center; }
/* the same curly marks the commentary cards use — .bcquote__mark, reused as-is
   so this quote and every pull-quote on the site share one visual language */
.pullquote blockquote {
  position: relative; padding: 0 1.9rem;
  font-family: var(--exp); font-weight: 600;
  font-size: clamp(1.3rem, 1rem + 1.3vw, 1.95rem); line-height: 1.18; letter-spacing: -.01em;
  text-wrap: balance; max-width: 28ch; margin-inline: auto;
}
.pullquote figcaption { margin-top: 1.2rem; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--green-deep); font-family: var(--exp); font-weight: 600; }
.bylines-band {
  background: transparent;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-bottom: clamp(3.5rem, 8vw, 6rem);
}
/* the masthead band: three people run the paper, so three columns */
.bylines { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.bylines li {
  display: grid; align-content: start; justify-items: center; text-align: center; gap: .55rem;
  padding: 1.6rem 1rem; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--mist);
  transition: box-shadow var(--t), transform var(--t);
}
.bylines li:hover { box-shadow: 0 16px 30px -22px rgba(147,39,26,.4); transform: translateY(-3px); }
.bylines li:focus-within { outline: 2px solid var(--ink); outline-offset: 3px; }
.avatar--lg { width: 54px; height: 54px; font-size: 1rem; background: var(--ink); color: var(--paper); }
.byline__n { font-family: var(--exp); font-weight: 700; font-size: .95rem; }
/* the role, sitting above the name — a title, so it reads like one */
.byline__c {
  font-family: var(--exp); font-weight: 700; font-size: .68rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--oxblood);
}
/* one short sentence, same register as an author bio elsewhere on the site —
   optional, so a tile with none just keeps its current compact shape */
.byline__bio { font-size: .82rem; line-height: 1.5; color: var(--stone); }

/* Keep the tile layout on a neutral wrapper so biography contact links never
   become invalid nested anchors inside the writer-archive link. */
.byline__link {
  display: grid; grid-auto-rows: max-content; align-content: start; justify-items: center; gap: .55rem;
  width: 100%;
  color: inherit; text-decoration: none;
}
.byline__identity {
  display: grid; grid-auto-rows: max-content; align-content: start; justify-items: center; gap: .55rem;
  color: inherit; text-decoration: none;
}
.byline__more {
  font-family: var(--exp); font-weight: 700; font-size: .72rem;
  letter-spacing: .04em; color: var(--oxblood); text-decoration: none;
  opacity: 0; transition: opacity var(--t);
}
.bylines li:hover .byline__more,
.bylines li:focus-within .byline__more { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .byline__more { opacity: 1; } }

/* ============ BOOKSHELF ============ */
.shelf {
  background: var(--ink); color: var(--paper);
  padding-block: clamp(3.5rem, 8vw, 6rem);
}
.shelf .sec-head__title { color: var(--paper); }
.shelf .kicker--gold { color: var(--brass-light); }
.shelf__note { color: rgba(243,238,227,.66); font-size: .92rem; max-width: 30ch; align-self: flex-end; }
.shelf__grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: clamp(1.6rem, 3vw, 2.4rem) 1.4rem;
}
.book { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .7rem; }
.book__cover {
  height: 215px; width: 100%; display: grid; place-items: end center;
}
.book__cover img {
  max-height: 215px; width: auto; max-width: 100%;
  border-radius: 2px;
  box-shadow: 0 16px 30px -14px rgba(0,0,0,.75), 0 2px 0 rgba(243,238,227,.08);
  transition: transform var(--t), box-shadow var(--t);
}
.book:hover .book__cover img { transform: translateY(-5px) scale(1.02); box-shadow: 0 26px 44px -16px rgba(0,0,0,.85); }
.book__author { font-family: var(--exp); font-weight: 700; font-size: .9rem; color: var(--paper); line-height: 1.2; }
.book__cta {
  font-family: var(--exp); font-weight: 600; font-size: .68rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--brass-light);
  transition: color var(--t);
}
.book:hover .book__cta { color: var(--paper); text-decoration: underline; text-underline-offset: 3px; }

/* ============ NEWSLETTER ============ */
.news { padding-block: clamp(3rem, 6vw, 5rem); background: var(--mist); }
.news__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  padding: clamp(1.8rem, 4vw, 3rem);
}
.news__title { font-family: var(--exp); font-weight: 800; font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.95rem); line-height: 1.05; letter-spacing: -.02em; margin-bottom: .6rem; text-wrap: balance; }
.news__sub { color: var(--stone); max-width: 42ch; }
.news__form { display: flex; gap: .6rem; flex: 1 1 320px; max-width: 460px; }
.news__form input {
  flex: 1; font: inherit; padding: .82rem 1rem; border-radius: var(--r);
  border: 1.5px solid var(--line); background: var(--mist); color: var(--ink);
}
.news__form input::placeholder { color: var(--stone-2); }
.news__form input:focus { border-color: var(--ink); }

/* ============ FOOTER ============ */
.foot { background: var(--ink); color: var(--paper); padding-top: clamp(3rem, 6vw, 4.5rem); border-top: 1px solid rgba(243,238,227,.14); }
.foot__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2rem; padding-bottom: 2.5rem; }
.nameplate--foot { margin-bottom: 1.1rem; }
.nameplate--foot .nameplate__the { color: var(--red-light); }
.nameplate--foot .nameplate__name { color: var(--paper); }
.foot__mission { color: rgba(243,238,227,.6); font-size: .9rem; max-width: 40ch; }
.foot__h { font-family: var(--exp); font-weight: 700; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--red-light); margin-bottom: 1rem; }
/* distribute the footer column headings across the palette */
.foot__grid nav:nth-of-type(1) .foot__h { color: var(--brass-light); }
.foot__grid nav:nth-of-type(2) .foot__h { color: var(--green-light); }
.foot__grid nav:nth-of-type(3) .foot__h { color: var(--red-light); }
.foot__col { display: flex; flex-direction: column; gap: .6rem; }
.foot__col a { color: rgba(243,238,227,.75); font-size: .92rem; width: fit-content; transition: color var(--t); }
.foot__col a:hover { color: var(--paper); }
.foot__bottom {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding-block: 1.5rem; border-top: 1px solid rgba(243,238,227,.14);
  font-size: .8rem; color: rgba(243,238,227,.55);
}
.foot__pan { display: inline-flex; gap: 4px; }
.foot__pan i { width: 26px; height: 5px; display: block; border-radius: 2px; }
.foot__pan i:nth-child(1) { background: var(--red-light); }
.foot__pan i:nth-child(2) { background: var(--brass-light); }
.foot__pan i:nth-child(3) { background: var(--green-light); }

/* ============ scroll reveal ============ */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.is-in { opacity: 1; transform: none; }

/* ============ RESPONSIVE ============ */
@media (max-width: 980px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__feature { max-width: 540px; }
  .join__grid { grid-template-columns: 1fr; }
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .foot__brand { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  .nav__toggle { display: flex; }

  /* off-canvas left drawer */
  .nav__drawer {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: min(84vw, 320px);
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper); border-right: 1px solid var(--line);
    padding: 5rem var(--pad) 2rem;
    transform: translateX(-100%);
    transition: transform .4s cubic-bezier(.2,.7,.2,1);
    box-shadow: 0 0 60px -10px rgba(20,18,16,.4);
    z-index: 130; overflow-y: auto;
  }
  body.nav-open .nav__drawer { transform: translateX(0); }
  .nav__drawer-head {
    display: block; font-family: var(--exp); font-weight: 700;
    font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
    color: var(--oxblood); margin-bottom: 1rem;
  }

  .nav__links { flex-direction: column; gap: 0; }
  .nav__links a {
    padding-block: .95rem; font-size: 1.05rem;
    border-bottom: 1px solid var(--line-soft);
  }
  .nav__links a::after { display: none; }

  .nav__actions { flex-direction: column; gap: .7rem; margin-top: 1.4rem; }
  .nav__actions .btn { width: 100%; }

  /* backdrop */
  .nav__scrim {
    display: block; position: fixed; inset: 0;
    background: rgba(20,18,16,.5); backdrop-filter: blur(2px);
    opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s;
    z-index: 120;
  }
  body.nav-open .nav__scrim { opacity: 1; visibility: visible; }
  body.nav-open { overflow: hidden; }

  /* hamburger -> X */
  body.nav-open .nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.nav-open .nav__toggle span:nth-child(2) { opacity: 0; }
  body.nav-open .nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .pillars__grid { grid-template-columns: 1fr 1fr; }
  /* three tiles in two columns leaves an orphan — stack them instead */
  .bylines { grid-template-columns: 1fr; }
  .pillar__no { margin-bottom: 1.4rem; }
}

@media (max-width: 560px) {
  .nameplate__logo { height: 34px; }
  /* full-width on its own row, so the free-dispatch button stays a real,
     tappable, prominent button instead of getting squeezed into the
     brand/meta row */
  .utility__cta { flex: 1 1 100%; justify-content: center; }
  .plans { grid-template-columns: 1fr; }
  .pillars__grid { grid-template-columns: 1fr; }
  .news__form { flex-direction: column; }
  .news__form .btn { width: 100%; }
  .foot__grid { grid-template-columns: 1fr; }
  .sec-head--row { align-items: flex-start; }
  .hero__cta { width: 100%; }
  .hero__cta .btn--cta { width: 100%; }
  .archive-search__field { flex: 1 1 100%; }
  .archive-search .btn { width: 100%; }
}

/* ============ reduced motion ============ */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
  .ticker__track { animation: none; }
}

/* ============================================================
   SUBPAGES
   ============================================================ */
/* NOTE: scoped to section/article on purpose — WordPress's body_class() puts a
   bare "page" class on <body> for every Page, which would otherwise inherit
   this padding and push the whole document down. */
section.page, article.page { padding-block: clamp(3rem, 6vw, 5rem); }
.page--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.page--grey { background: var(--mist); }

/* ---- page header band ---- */
.subhero { padding-block: clamp(2.6rem, 6vw, 4.5rem); background: var(--mist); border-bottom: 1px solid var(--line); }
.subhero__title {
  font-family: var(--exp); font-weight: 800;
  font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3.1rem);
  line-height: 1.02; letter-spacing: -.02em; text-wrap: balance; max-width: 20ch;
}
.subhero__lead { margin-top: 1.1rem; max-width: 58ch; color: var(--stone); font-size: 1.05rem; }
.subhero__lead a,
.article__bio a,
.byline__bio a {
  color: var(--oxblood);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
.subhero__lead a:hover,
.subhero__lead a:focus-visible,
.article__bio a:hover,
.article__bio a:focus-visible,
.byline__bio a:hover,
.byline__bio a:focus-visible {
  color: var(--oxblood-br);
  text-decoration-thickness: 2px;
}
/* Writer archives need an explicit state rule as well: browsers otherwise may
   paint an already-visited profile link with their default visited colour. */
body.tax-bc_writer .subhero__lead a,
body.tax-bc_writer .subhero__lead a:visited {
  color: var(--oxblood);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
body.tax-bc_writer .subhero__lead a:hover,
body.tax-bc_writer .subhero__lead a:focus-visible {
  color: var(--oxblood-br);
  text-decoration-thickness: 2px;
}
.breadcrumb {
  font-family: var(--exp); font-weight: 600; font-size: .72rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--stone-2); margin-bottom: 1.1rem;
  display: flex; gap: .5rem; align-items: center; flex-wrap: wrap;
}
.breadcrumb a { color: var(--oxblood); }
.breadcrumb span[aria-hidden] { color: var(--stone-2); }

/* ---- prose / reading column ---- */
.prose { max-width: 68ch; }
.prose > * + * { margin-top: 1.15rem; }
.prose p { color: #2B2621; line-height: 1.75; }
.prose .lead-p { font-size: 1.18rem; color: var(--ink); line-height: 1.6; }
.prose h2 { font-family: var(--exp); font-weight: 800; font-size: 1.4rem; letter-spacing: -.01em; margin-top: 2.3rem; }
.prose h3 { font-family: var(--exp); font-weight: 700; font-size: 1.1rem; margin-top: 1.9rem; }
.prose ul, .prose ol { padding-left: 1.3rem; display: grid; gap: .5rem; }
.prose li { line-height: 1.65; color: #2B2621; }
.prose a { color: var(--oxblood); text-decoration: underline; text-underline-offset: 3px; }
.prose blockquote {
  position: relative;
  border-left: 3px solid var(--oxblood); padding: 2.3rem 0 .2rem 1.4rem; margin-block: 2.2rem;
  font-family: var(--exp); font-weight: 600; font-size: 1.3rem; line-height: 1.3; color: var(--ink);
}
/* the open/close marks are .bcquote__mark spans in the markup (same ones the
   commentary cards and the home page pull-quote use — see bc_quote_marks())
   rather than CSS content, so every pull-quote on the site shares one visual
   language and one actual pair of curly quotes, not a second lookalike. */
.prose blockquote .bcquote__mark--open  { top: -.05em; left: -1.3rem; }
.prose blockquote .bcquote__mark--close { bottom: -.5rem; right: -.3rem; }
.prose strong { font-weight: 700; color: var(--ink); }
.prose hr { border: 0; border-top: 1px solid var(--line); margin-block: 2rem; }

/* ---- article layout ---- */
.article__grid { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.article__cat { font-family: var(--exp); font-weight: 700; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--brass-deep); }
.article__title { font-family: var(--exp); font-weight: 800; font-size: clamp(1.8rem, 1.3rem + 2vw, 2.8rem); line-height: 1.05; letter-spacing: -.02em; margin-top: .6rem; text-wrap: balance; max-width: 20ch; }
.article__byline { display: flex; align-items: center; gap: .85rem; margin-top: 1.4rem; padding-block: 1.1rem; border-block: 1px solid var(--line); }
.article__who { display: flex; flex-direction: column; line-height: 1.3; }
.article__author { font-family: var(--exp); font-weight: 700; }
.article__date { font-size: .82rem; color: var(--stone-2); }
.article__aside { position: sticky; top: 96px; display: grid; gap: 1.4rem; }
.aside-card { border: 1px solid var(--line); border-radius: var(--r); padding: 1.4rem; background: var(--mist); }
.aside-card__h { font-family: var(--exp); font-weight: 700; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--oxblood); margin-bottom: .9rem; }
.article__aside .aside-card:nth-of-type(1) .aside-card__h { color: var(--brass-deep); }
.article__aside .aside-card:nth-of-type(2) .aside-card__h { color: var(--green-deep); }
.aside-card p { font-size: .92rem; color: var(--stone); line-height: 1.55; }
.article__bio { margin-top: .8rem; }
/* Give the author biography clear breathing room below the byline divider and
   keep every actionable link in this card visibly in the publication red. */
.article__aside .aside-card:first-child .article__bio { margin-top: 1.2rem; }
.article__aside .aside-card:first-child a { color: var(--oxblood); }
.article__aside .aside-card:first-child a:hover,
.article__aside .aside-card:first-child a:focus-visible { color: var(--oxblood-br); }
.article__aside .aside-card:first-child .article__bio a {
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
.aside-links { display: grid; gap: .8rem; }
.aside-links a { display: block; font-family: var(--exp); font-weight: 600; font-size: .95rem; line-height: 1.25; }
.aside-links a:hover { color: var(--oxblood); }
.aside-links span { display: block; font-family: var(--serif); font-weight: 400; font-size: .78rem; color: var(--stone-2); margin-top: .15rem; }

/* ---- comments ---- */
.comments { margin-top: clamp(2.6rem, 5vw, 3.5rem); padding-top: 2rem; border-top: 2px solid var(--ink); max-width: 68ch; }
.comments__h { font-family: var(--exp); font-weight: 800; font-size: 1.4rem; margin-bottom: 1.4rem; }
.comments__h span { color: var(--stone-2); font-weight: 600; }
/* flex-wrap + full-width .children is what lets a reply thread drop below its
   parent instead of being squeezed beside the avatar */
.comment { display: flex; flex-wrap: wrap; gap: .9rem; padding-block: 1.2rem; border-bottom: 1px solid var(--line); }
.comment > div { flex: 1; min-width: 0; }
.comment .comment { border-bottom: 0; padding-bottom: 0; }
/* don't keep indenting forever — three levels deep is already a conversation */
.comment .comment .comment .comment { padding-left: 0; border-left: 0; }
.comment__who { font-family: var(--exp); font-weight: 700; font-size: .92rem; }
.comment__badge { font-family: var(--exp); font-weight: 700; font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: var(--oxblood); border: 1px solid var(--rose-line); border-radius: 100px; padding: .1rem .45rem; margin-left: .5rem; }
.comment__when { font-size: .76rem; color: var(--stone-2); margin-left: .5rem; }
.comment__text { margin-top: .4rem; color: #2B2621; line-height: 1.6; }
.commentbox { position: relative; margin-top: 1.8rem; border: 1px solid var(--line); border-radius: 6px; padding: 1.4rem; overflow: hidden; }
.commentbox textarea { width: 100%; border: 1px solid var(--line); border-radius: var(--r); padding: .9rem; font: inherit; background: var(--mist); resize: vertical; min-height: 92px; }
.commentbox__inner { display: grid; gap: 1rem; }
.commentbox__foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.commentbox__note { font-size: .82rem; color: var(--stone-2); }

/* core's older/newer comments nav — only appears past the per-page limit */
.comment-navigation { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.4rem; font-size: .88rem; }
.comment-navigation a { color: var(--oxblood); font-weight: 600; }

/* ---- threaded replies ---- */
/* With wp_list_comments( style: 'div' ) core adds NO .children wrapper — each
   reply div is nested directly inside its parent comment's div. The parent is
   a flex row, so without this a reply lands BESIDE the avatar instead of
   below: full row, indented, thread line on the left. */
.comment .comment {
  flex: 1 1 100%;
  margin-top: .4rem; padding-left: clamp(.9rem, 3vw, 1.6rem);
  border-left: 2px solid var(--line);
}
.comment__actions { margin-top: .5rem; display: flex; align-items: center; gap: 1rem; }
.comment__actions .comment-reply-link {
  font-family: var(--exp); font-weight: 700; font-size: .76rem;
  letter-spacing: .04em; color: var(--oxblood); text-decoration: none;
}
.comment__actions .comment-reply-link:hover { text-decoration: underline; text-underline-offset: 3px; }
/* matches .comment-reply-link exactly, so the two actions read as one pair */
.comment__delete {
  font-family: var(--exp); font-weight: 700; font-size: .76rem;
  letter-spacing: .04em; color: var(--oxblood); text-decoration: none;
}
.comment__delete:hover { text-decoration: underline; text-underline-offset: 3px; }
.comment__deleted-notice {
  margin-bottom: 1.2rem; padding: .7rem 1rem; border-radius: var(--r);
  background: var(--mist); color: var(--stone); font-size: .9rem;
}
/* "Replying to <name>" — the bar above the one fixed comment box */
.replying-to {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  border: 1.5px solid var(--ink); border-radius: var(--r);
  padding: .6rem .9rem; margin-bottom: 1rem;
  font-size: .92rem; color: var(--stone);
}
.replying-to[hidden] { display: none; }
.replying-to__txt b { color: var(--ink); }
.replying-to__x {
  flex: none; font-family: var(--exp); font-weight: 700; font-size: .95rem;
  color: var(--ink); text-decoration: none; line-height: 1; padding: .2rem .35rem;
}
.replying-to__x:hover { color: var(--oxblood); }

/* core prints its own cancel link inside the form — the bar's ✕ replaces it */
#cancel-comment-reply-link { display: none; }

/* ---- @mentions ---- */
.mention {
  font-weight: 700; color: var(--oxblood);
  background: rgba(147,39,26,.07); border-radius: 2px; padding: 0 .18em;
}
.mention-suggest {
  list-style: none; margin: .3rem 0 0; padding: .3rem;
  background: var(--paper); border: 1.5px solid var(--ink); border-radius: var(--r);
  box-shadow: 0 18px 34px -24px rgba(23,19,14,.55);
  max-width: 320px; position: relative; z-index: 5;
}
.mention-suggest li {
  padding: .45rem .6rem; border-radius: 3px; cursor: pointer;
  font-size: .9rem; font-weight: 600;
}
.mention-suggest li:hover,
.mention-suggest li.is-active { background: var(--mist); color: var(--oxblood); }

/* The locked box has broken two different ways, from two different fixes —
   worth recording both so the next change doesn't reintroduce either:

     1. Originally the card sat position:absolute inside a box whose height
        came only from the blurred preview behind it. The card is taller than
        that preview (icon, heading, two lines of copy, two buttons), so it
        spilled past the box and overflow:hidden sliced the buttons off.
     2. Fixing #1 by making the PREVIEW position:absolute instead just moved
        the bug: an absolutely positioned element doesn't contribute to its
        parent's height, so the box height came from whatever was left in
        normal flow — the (shorter) card got squeezed into the preview's own
        height and clipped exactly as before.

   The fix that holds both properties at once: the CARD stays in normal flow,
   so it — and only it — sets the box's height; it can never be taller than
   its own box. The PREVIEW is what gets position:absolute, because it is pure
   decoration and safe to stretch to any size. Pinned to all four edges
   (inset: 0) it always matches the card's box exactly, so .commentlock's
   opaque background fully covers it with no gap to bleed through, at any
   copy length or any screen width. */
.commentbox--locked { position: relative; }

.commentbox--locked .commentbox__inner {
  position: absolute; inset: 0; overflow: hidden;
  filter: blur(2.5px); opacity: .45; pointer-events: none; user-select: none;
}
.commentlock {
  position: relative; /* normal flow — this, not the preview, sets the box's height */
  display: grid; place-items: center;
  background: var(--paper);
  text-align: center; padding: 1rem;
}
.commentlock__card {
  background: var(--paper); border: 1px solid var(--line); border-radius: 8px;
  padding: clamp(1.1rem, 5vw, 1.6rem); box-shadow: 0 24px 50px -28px rgba(20,18,16,.5);
  max-width: 400px; width: 100%;
}
.commentlock__i { color: var(--oxblood); margin: 0 auto .6rem; }
.commentlock h4 { font-family: var(--exp); font-weight: 800; font-size: 1.15rem; }
.commentlock p { margin: .5rem 0 1.2rem; color: var(--stone); font-size: .95rem; }
.commentlock__btns { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }

/* ---- auth ---- */
.auth { min-height: 72vh; display: grid; place-items: center; padding-block: clamp(2.5rem, 6vw, 4.5rem); background: var(--mist); }
.auth__card { width: min(440px, 100%); background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: clamp(1.6rem, 4vw, 2.5rem); box-shadow: 0 40px 70px -40px rgba(20,18,16,.45); }
.auth__title { font-family: var(--exp); font-weight: 800; font-size: 1.6rem; letter-spacing: -.02em; }
.auth__sub { color: var(--stone); font-size: .92rem; margin-top: .45rem; margin-bottom: 1.7rem; }
.field { display: grid; gap: .4rem; margin-bottom: 1.05rem; }
.field label { font-family: var(--exp); font-weight: 600; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--stone); }
.field input { padding: .82rem .95rem; border: 1.5px solid var(--line); border-radius: var(--r); font: inherit; background: var(--paper); color: var(--ink); }
.field input:focus { border-color: var(--ink); }
.auth__row { display: flex; justify-content: space-between; align-items: center; font-size: .85rem; margin: .2rem 0 1.3rem; color: var(--stone); }
.auth__alt { text-align: center; margin-top: 1.4rem; font-size: .9rem; color: var(--stone); }
.link-red { color: var(--oxblood); font-weight: 600; }
/* auth mode switching */
[data-auth="signin"] .is-register, [data-auth="register"] .is-signin { display: none; }

/* ---- archive filters + pagination ---- */
.filters { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 2rem; }
.chip { font-family: var(--exp); font-weight: 600; font-size: .78rem; letter-spacing: .03em; padding: .5rem .95rem; border-radius: 100px; border: 1.5px solid var(--line); background: var(--paper); color: var(--ink); cursor: pointer; transition: var(--t); }
.chip:hover { border-color: var(--ink); }
.chip.is-active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
/* the real pagination markup (paginate_links()) is nav.pagination > div.nav-links > a —
   its layout rules live further down, scoped to .pagination .nav-links / .page-numbers.
   This block used to also set nav.pagination itself to display:flex with no wrapping,
   a leftover from an early static mockup that put the links directly inside .pagination
   with no .nav-links wrapper. Forcing the real nav to flex-nowrap kept .nav-links from
   ever shrinking to the viewport width, so on narrow screens it overflowed sideways and
   the overflow (including the "…" jump and sometimes the "←" prev arrow) was silently
   clipped by the site-wide overflow-x: hidden. Removed so nav.pagination stays a plain
   block and .nav-links controls its own wrapping. */
.pagination { margin-top: 2.6rem; }

/* ---- faq ---- */
.faq { max-width: 760px; margin-inline: auto; }
.faq details { border-bottom: 1px solid var(--line); padding-block: 1.15rem; }
.faq summary { font-family: var(--exp); font-weight: 700; font-size: 1.05rem; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--oxblood); font-family: var(--exp); font-weight: 800; font-size: 1.2rem; }
.faq details[open] summary::after { content: '\2013'; }
.faq p { margin-top: .8rem; color: var(--stone); line-height: 1.65; max-width: 64ch; }

/* ---- misc subpage helpers ---- */
.plans--3 { grid-template-columns: repeat(3, 1fr); }
.center-head { text-align: center; display: grid; justify-items: center; }
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.2rem, 3vw, 2.2rem); margin-top: 2.5rem; }
.stat { border-top: 3px solid var(--oxblood); padding-top: .85rem; }
/* the four colours, in the same order as the four fronts */
.stat-row .stat:nth-child(1) { border-top-color: var(--brass); }
.stat-row .stat:nth-child(2) { border-top-color: var(--oxblood); }
.stat-row .stat:nth-child(3) { border-top-color: var(--green); }
.stat-row .stat:nth-child(4) { border-top-color: var(--ink); }
.stat__n {
  font-family: var(--exp); font-weight: 800;
  font-size: clamp(1.05rem, .95rem + .45vw, 1.35rem);
  line-height: 1.2; letter-spacing: -.01em; color: var(--ink);
}
.stat__l { font-size: .78rem; color: var(--stone); margin-top: .35rem; line-height: 1.45; }

/* ---- the 'bc' heritage mark (black square, lowercase bc) ---- */
.bc-mark {
  display: inline-grid; place-items: center; flex: none;
  width: 34px; height: 34px; border-radius: 3px;
  background: var(--paper); color: var(--ink);
  border: 2px solid var(--ink);
  font-family: var(--exp); font-weight: 900; font-size: .95rem;
  letter-spacing: -.03em; line-height: 1; text-transform: lowercase;
}
.bc-mark--sm {
  width: 20px; height: 20px; font-size: .6rem; border-radius: 2px;
  vertical-align: -.22em;
}
.bc-mark--lg { width: 42px; height: 42px; font-size: 1.15rem; }

/* ============================================================
   THE COMMENTARY CARD
   The legacy site shipped each commentary as a flat PNG with the
   headline, byline, column and quote marks painted into it. This is
   that card, drawn in type: same anatomy, real text, scales to a phone.
   ============================================================ */

.ccards {
  display: grid; gap: 1.4rem;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}

/* ---- column emblem ---- */
.emblem { display: block; margin: 0 auto .9rem; line-height: 0; color: var(--ink); }
.emblem--brass   { color: var(--brass-deep); }
.emblem--oxblood { color: var(--oxblood); }
.emblem--green   { color: var(--green-deep); }
.emblem--ink     { color: var(--ink); }
.emblem__svg { display: block; }

/* ---- the curly quote marks — the one piece of the graphic kept by name ---- */
.bcquote {
  position: relative; margin: 1.4rem 0 1.5rem;
  padding: 0 1.9rem;
}
.bcquote__text {
  font-style: italic; font-size: 1rem; line-height: 1.7;
  color: var(--ink); text-wrap: pretty;
}
.bcquote__mark {
  position: absolute; font-family: Georgia, 'Times New Roman', serif;
  font-size: 3.4rem; line-height: 1; color: var(--oxblood);
  opacity: .85; pointer-events: none; user-select: none;
}
.bcquote__mark--open  { top: -.28em; left: 0; }
.bcquote__mark--close { bottom: -.62em; right: 0; }

/* ---- the card ---- */
.ccard {
  display: flex; flex-direction: column;
  background: var(--paper); border: 1.5px solid var(--line);
  border-radius: var(--r); overflow: hidden;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.ccard:hover {
  transform: translateY(-4px); border-color: var(--ink);
  box-shadow: 0 22px 40px -28px rgba(23,19,14,.55);
}
.ccard:focus-within { border-color: var(--ink); }

/* the rule above the emblem is the column's colour — the card's one flash of it */
.ccard { border-top: 4px solid var(--ink); }
.ccard--brass   { border-top-color: var(--brass); }
.ccard--oxblood { border-top-color: var(--oxblood); }
.ccard--green   { border-top-color: var(--green); }

/* artwork slot: cartoons and illustrations, when a piece genuinely has art */
.ccard__art { margin: 0; background: var(--mist); line-height: 0; }
.ccard__art img {
  width: 100%; height: auto; display: block;
  transition: transform var(--t);
}
.ccard:hover .ccard__art img { transform: scale(1.02); }

.ccard__body {
  display: flex; flex-direction: column; flex: 1;
  padding: clamp(1.4rem, 3vw, 1.9rem) clamp(1.1rem, 2.5vw, 1.5rem);
  text-align: center;
}

.ccard__title {
  font-family: var(--exp); font-weight: 800;
  font-size: clamp(1.12rem, 1rem + .5vw, 1.4rem);
  line-height: 1.18; letter-spacing: -.015em;
  text-wrap: balance; margin-bottom: .7rem;
}
.ccard__title a { color: inherit; text-decoration: none; }
.ccard__title a::after {
  /* the whole card is the hit area, but only the title takes the focus ring */
  content: ''; position: absolute; inset: 0;
}
.ccard { position: relative; }
.ccard__title a:focus-visible { outline: none; }
.ccard:focus-within { outline: 2px solid var(--ink); outline-offset: 3px; }
.ccard:hover .ccard__title { color: var(--oxblood); }

.ccard__by {
  font-size: .88rem; line-height: 1.5;
  display: flex; flex-direction: column; align-items: center; gap: .18rem;
}
.ccard__author { font-weight: 700; color: var(--ink); }
.ccard__role {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .82rem; color: var(--stone);
}

/* the column comes first now — it says whose column this is before the headline */
.ccard__column {
  font-family: var(--exp); font-weight: 700;
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink); margin-bottom: .55rem;
}
.ccard__column--brass   { color: var(--brass-deep); }
.ccard__column--oxblood { color: var(--oxblood); }
.ccard__column--green   { color: var(--green-deep); }

.ccard__lede {
  font-size: .95rem; color: var(--stone); line-height: 1.6;
  text-align: left; margin-bottom: 1.3rem;
}

.ccard__foot {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--line-soft);
  font-size: .85rem;
}
.ccard__more {
  font-family: var(--exp); font-weight: 700; font-size: .82rem;
  letter-spacing: .02em; color: var(--oxblood); text-decoration: none;
}
.ccard:hover .ccard__more span { padding-left: .18rem; transition: padding var(--t); }
.ccard__read { color: var(--stone-2); font-weight: 500; }

/* ============================================================
   THE MEMBERSHIP BANNER
   "Become a member and join the conversation." Two tones: dark, at
   the head of the week's commentaries; quiet, inside a piece, where
   it must never out-shout the writing it is sitting on top of.
   Never rendered for people who have already joined.
   ============================================================ */
.joinbar {
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 1.6rem);
  padding: clamp(1.1rem, 3vw, 1.5rem) clamp(1.1rem, 3vw, 1.7rem);
  border-radius: var(--r); margin-bottom: clamp(1.8rem, 4vw, 2.6rem);
  flex-wrap: wrap;
}
.joinbar__txt { flex: 1 1 260px; min-width: 0; }
.joinbar__h {
  font-family: var(--exp); font-weight: 800;
  font-size: clamp(1rem, .95rem + .35vw, 1.2rem);
  line-height: 1.25; letter-spacing: -.01em; text-wrap: balance;
}
.joinbar__p { margin-top: .35rem; font-size: .9rem; line-height: 1.55; }
.joinbar__cta { display: flex; align-items: center; gap: 1rem; flex: none; }
.joinbar__in { font-weight: 600; font-size: .88rem; text-decoration: underline; text-underline-offset: 3px; }

/* dark — the head of the issue */
.joinbar--dark { background: var(--ink); color: var(--paper); }
.joinbar--dark .joinbar__p { color: rgba(243,238,227,.78); }
.joinbar--dark .bc-mark { background: #000; color: #fff; box-shadow: inset 0 0 0 1px rgba(243,238,227,.28); }
.joinbar--dark .joinbar__in { color: var(--red-light); }
.joinbar--dark .joinbar__in:hover { color: var(--paper); }

/* quiet — sitting on top of a commentary, so it whispers */
.joinbar--quiet {
  background: var(--mist); color: var(--ink);
  border: 1px solid var(--line); border-left: 4px solid var(--oxblood);
}
.joinbar--quiet .joinbar__p { color: var(--stone); }
.joinbar--quiet .joinbar__in { color: var(--oxblood); }

@media (max-width: 620px) {
  .joinbar { align-items: flex-start; }
  .joinbar__cta { width: 100%; }
  .joinbar__cta .btn { flex: 1; justify-content: center; }
}

/* ============================================================
   ART & CARTOONS
   The one thing on the site that really is a picture. Shown at its
   own aspect ratio and never cropped — a cartoon with the punchline
   cut off is not a cartoon.
   ============================================================ */
.gallery {
  display: grid; gap: clamp(1.6rem, 4vw, 2.6rem);
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
.art { margin: 0; display: flex; flex-direction: column; }
.art__frame {
  display: block; background: var(--mist);
  border: 1px solid var(--line); border-radius: var(--r);
  padding: clamp(.8rem, 2vw, 1.3rem);
  transition: border-color var(--t), box-shadow var(--t), transform var(--t);
}
.art__frame:hover {
  border-color: var(--ink); transform: translateY(-3px);
  box-shadow: 0 22px 40px -28px rgba(23,19,14,.55);
}
.art__frame:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
/* height: auto — the artwork sets its own shape */
.art__frame img { width: 100%; height: auto; display: block; border-radius: 2px; }
.art__missing {
  display: grid; place-items: center; aspect-ratio: 4 / 3;
  font-size: .85rem; color: var(--stone-2);
}
.art__cap { padding-top: 1rem; }
.art__title {
  font-family: var(--exp); font-weight: 800;
  font-size: clamp(1.05rem, 1rem + .35vw, 1.25rem);
  line-height: 1.2; letter-spacing: -.01em; text-wrap: balance;
}
.art__title a { color: inherit; text-decoration: none; }
.art__title a:hover { color: var(--oxblood); }
/* the artist, credited the way the paper has always done it:
   name on one line, home town under it — "Mr. Fish / Philadelphia, PA" */
.art__by {
  margin-top: .4rem; display: flex; flex-direction: column; gap: .1rem;
}
.art__artist { font-weight: 700; font-size: .9rem; color: var(--ink); }
.art__where { font-size: .82rem; color: var(--stone); }
.art__stamp {
  margin-top: .45rem; font-family: var(--exp); font-weight: 600;
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--stone-2);
}
.art__note { margin-top: .55rem; font-size: .9rem; color: var(--stone); line-height: 1.6; }

/* ---- the card, on the article page: no border, no link, bigger type ---- */
.ccard--article {
  border: 0; border-top: 0; padding: 0; text-align: center;
  margin-bottom: 2.4rem; padding-bottom: 2rem;
  border-bottom: 1px solid var(--line);
}
.ccard--article:hover { transform: none; box-shadow: none; }
.ccard--article .ccard__title {
  font-size: clamp(1.7rem, 1.15rem + 2vw, 2.7rem); margin-bottom: 1.1rem;
}
.ccard--article .emblem__svg { width: 54px; height: 54px; }
.ccard--article .bcquote { max-width: 46ch; margin-inline: auto; }
.ccard--article .bcquote__text { font-size: 1.12rem; }
.ccard--article .ccard__body { padding: 0; }
.ccard--article .ccard__title:hover { color: inherit; }

.article__stamp {
  margin-top: 1.2rem; font-size: .84rem; color: var(--stone);
  display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem;
}

/* article end sign-off: bc mark + copyright dates (Pete's request) */
.bc-signoff {
  display: flex; align-items: center; gap: .9rem;
  max-width: 68ch; margin-top: 2.6rem; padding-top: 1.6rem;
  border-top: 1px solid var(--line);
}
.bc-signoff__copy { font-family: var(--exp); font-weight: 700; font-size: .82rem; letter-spacing: .03em; color: var(--ink); }
.bc-signoff__note { font-size: .82rem; color: var(--stone); margin-top: .15rem; }
.bc-signoff__note a { color: var(--oxblood); text-decoration: underline; text-underline-offset: 2px; }

/* footer copyright line: mark on the dark footer gets a hairline keyline */
.foot__copy { display: inline-flex; align-items: center; gap: .55rem; }
.foot__copy .bc-mark { width: 26px; height: 26px; font-size: .78rem; background: #000; box-shadow: inset 0 0 0 1px rgba(243,238,227,.28); }

/* newsletter status line (the honeypot hides itself inline — see inc/newsletter.php) */
.news__msg { margin-top: .8rem; font-size: .9rem; color: var(--green-light); }
.news__msg--err { color: var(--red-light); }

/* the paper's two accounts, as on the legacy site */
.foot__social { display: flex; gap: .6rem; margin-top: 1.1rem; }
.foot__social a {
  display: grid; place-items: center; width: 34px; height: 34px;
  border: 1px solid rgba(243,238,227,.25); border-radius: 3px;
  color: rgba(243,238,227,.75); transition: color var(--t), border-color var(--t);
}
.foot__social a:hover { color: #fff; border-color: rgba(243,238,227,.6); }

/* ---- archive search bar ---- */
.archive-search {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  margin-top: 1.8rem; max-width: 640px;
}
.archive-search__field {
  flex: 1 1 260px; min-width: 0; display: flex; align-items: center; gap: .6rem;
  background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--r);
  padding: .2rem .95rem; transition: border-color var(--t), box-shadow var(--t);
}
.archive-search__field:focus-within { border-color: var(--ink); box-shadow: 0 8px 22px -16px rgba(23,19,14,.5); }
.archive-search__field svg { color: var(--stone-2); flex: none; }
.archive-search input {
  flex: 1 1 auto; min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink);
  font: inherit; padding: .68rem 0;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  /* type="search" otherwise grows its own native clear (x) button once
     text is typed, floating over the end of the input with no padding
     reserved for it — with a long query that reads as the words running
     off the edge of the box. Our own icon + Search button already cover
     that job, so drop the native chrome entirely. */
  -webkit-appearance: none; appearance: none;
}
.archive-search input::-webkit-search-cancel-button,
.archive-search input::-webkit-search-decoration { display: none; }
.archive-search input::placeholder { color: var(--stone-2); }
.archive-search .btn { flex: none; }
.archive-search__note { margin-top: 1.4rem; font-family: var(--exp); font-weight: 600; font-size: .82rem; letter-spacing: .04em; color: var(--stone); }
.issue-block[hidden] { display: none; }
/* a writer's archive: the paper's existing subhero + card grid, plus two lines */
.writer__where { margin-top: .5rem; font-size: .9rem; color: var(--stone); }
.writer__count {
  font-family: var(--exp); font-weight: 600; font-size: .78rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--stone);
  margin-bottom: 1.4rem;
}

/* hero variant of the search bar */
.hero__search { margin: 0 0 2.3rem; max-width: 520px; }

/* ---- issues archive (grouped by issue) ---- */
.issues { display: grid; }
.issue-block { display: grid; grid-template-columns: 210px 1fr; gap: clamp(1.5rem, 4vw, 3rem); padding-block: clamp(1.8rem, 3.5vw, 2.6rem); border-top: 2px solid var(--ink); }
.issue-block__no { font-family: var(--exp); font-weight: 900; font-size: 1.7rem; line-height: 1; letter-spacing: -.02em; }
.issue-block__date { font-family: var(--exp); font-weight: 600; font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--stone-2); margin-top: .5rem; }
.issue-block__flag { display: inline-block; margin-top: .9rem; font-family: var(--exp); font-weight: 800; font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: #fff; background: var(--green); padding: .28rem .55rem; border-radius: 2px; }
.issue-block__count { margin-top: .9rem; font-size: .82rem; color: var(--stone-2); }
.issue-block__link { display: inline-flex; align-items: center; gap: .35rem; margin-top: 1.1rem; font-family: var(--exp); font-weight: 700; font-size: .78rem; letter-spacing: .03em; color: var(--green-deep); }
.issue-block__link:hover { text-decoration: underline; text-underline-offset: 3px; }

.issue-lead { display: grid; grid-template-columns: 168px 1fr; gap: 1.3rem; align-items: center; padding: 1rem; background: var(--mist); border: 1px solid var(--line); border-radius: var(--r); margin-bottom: 1.1rem; transition: border-color var(--t), transform var(--t); }
.issue-lead:hover { border-color: var(--ink); transform: translateY(-2px); }
/* no cover art: don't reserve the image column, or the headline gets crushed into it */
.issue-lead--noimg { grid-template-columns: 1fr; }
.issue-lead__img { display: block; border-radius: 3px; overflow: hidden; background: var(--paper-2); }
.issue-lead__img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.issue-lead__title { font-family: var(--exp); font-weight: 800; font-size: clamp(1.1rem, 1rem + .7vw, 1.45rem); line-height: 1.1; letter-spacing: -.01em; text-wrap: balance; margin-top: .5rem; color: var(--ink); }
.issue-lead__by { margin-top: .55rem; font-size: .86rem; color: var(--stone); }

/* hero lead card image */
.lead__img { margin-bottom: 1.2rem; border-radius: 3px; overflow: hidden; background: rgba(255,255,255,.08); }
.lead__img img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }

/* article lead image */
.article__hero { margin: 0 0 1.9rem; border-radius: 6px; overflow: hidden; background: var(--mist); }
.article__hero img { width: 100%; max-height: 460px; object-fit: cover; display: block; }
.article__hero figcaption { font-size: .78rem; color: var(--stone-2); padding: .6rem .2rem 0; }
/* Cartoons and Art pieces: the artwork is usually portrait and IS the
   content, not a landscape header photo — show it at full, uncropped
   height instead of the 460px landscape crop above. */
.article__hero--full img { max-height: none; object-fit: contain; }
.issue-lead__by b { color: var(--ink); font-weight: 600; }

.issue-pieces { list-style: none; padding: 0; display: grid; }
.issue-pieces li { border-bottom: 1px solid var(--line); }
.issue-pieces li:first-child { border-top: 1px solid var(--line); }
.issue-pieces a { display: grid; grid-template-columns: 168px 1fr auto; gap: 1rem; align-items: baseline; padding-block: .8rem; }
.piece__cat { font-family: var(--exp); font-weight: 700; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--green-deep); }
.piece__title { font-weight: 500; color: var(--ink); line-height: 1.35; }
.piece__by { font-size: .82rem; color: var(--stone-2); text-align: right; white-space: nowrap; }
.issue-pieces a:hover .piece__title { color: var(--green-deep); }

@media (max-width: 860px) {
  .article__grid { grid-template-columns: 1fr; }
  .article__aside { position: static; }
  .plans--3 { grid-template-columns: 1fr; }
  .stat-row { grid-template-columns: 1fr 1fr; gap: 1.2rem; }
  .issue-block { grid-template-columns: 1fr; gap: 1.2rem; }
  .commentbox--locked { padding: 0!important; }
  .commentbox--locked .commentlock{ padding: 0!important; }
}
@media (max-width: 620px) {
  .issue-pieces a { grid-template-columns: 1fr; gap: .15rem; }
  .piece__by { text-align: left; }
  .issue-lead { grid-template-columns: 1fr; }
  .issue-lead__img img { aspect-ratio: 16 / 9; }
}


/* ============================================================
   WORDPRESS INTEGRATION
   Everything above is the design system, untouched.
   ============================================================ */

/* keep the sticky nav clear of the admin bar */
body.admin-bar .nav { top: 32px; }
@media screen and (max-width: 782px) { body.admin-bar .nav { top: 46px; } }

/* editor content: the first paragraph reads as the lead paragraph */
.prose--entry > p:first-of-type { font-size: 1.18rem; color: var(--ink); line-height: 1.6; }

/* Gutenberg wraps quote text in <p>, which would otherwise pick up .prose p
   styling and flatten the pull quote — make it inherit the blockquote instead. */
.prose blockquote p { font: inherit; color: inherit; line-height: inherit; }
.prose blockquote cite {
  display: block; margin-top: .8rem; font-family: var(--serif); font-style: normal;
  font-weight: 400; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--green-deep);
}

/* media + alignment inside editor content */
.prose img, .prose iframe, .prose video { max-width: 100%; height: auto; }
.prose figure { margin-block: 1.6rem; }
.prose figcaption, .prose .wp-caption-text { font-size: .82rem; color: var(--stone-2); margin-top: .5rem; }
.prose .alignleft   { float: left;  margin: .4rem 1.4rem 1rem 0; }
.prose .alignright  { float: right; margin: .4rem 0 1rem 1.4rem; }
.prose .aligncenter { display: block; margin-inline: auto; }
.prose .alignwide, .prose .alignfull { max-width: none; }

/* ============================================================
   PAID MEMBERSHIPS PRO
   PMPro renders its own checkout / account / billing forms. Pull them into the
   design system so they don't look like a bolted-on plugin.
   ============================================================ */
.prose--wide { max-width: 880px; }

.pmpro_form fieldset,
.pmpro_form .pmpro_form_fields { border: 0; padding: 0; margin: 0; }

.pmpro_form legend,
.pmpro_form h2, .pmpro_form h3 {
  font-family: var(--exp); font-weight: 800; letter-spacing: -.01em; color: var(--ink);
}

.pmpro_form_label, .pmpro_form label, #pmpro_form label {
  font-family: var(--exp); font-weight: 600; font-size: .72rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--stone);
  display: block; margin-bottom: .4rem;
}

.pmpro_form_input, .pmpro_form input[type="text"], .pmpro_form input[type="email"],
.pmpro_form input[type="password"], .pmpro_form input[type="tel"],
.pmpro_form input[type="number"], .pmpro_form select, .pmpro_form textarea {
  width: 100%; padding: .82rem .95rem; font: inherit;
  border: 1.5px solid var(--line); border-radius: var(--r);
  background: var(--paper); color: var(--ink);
}
.pmpro_form_input:focus, .pmpro_form input:focus, .pmpro_form select:focus, .pmpro_form textarea:focus {
  border-color: var(--ink); outline: 2.5px solid var(--gold-deep); outline-offset: 1px;
}
.pmpro_form_field { margin-bottom: 1.05rem; }

/* buttons */
.pmpro_btn, .pmpro_btn-submit, input[type="submit"].pmpro_btn, a.pmpro_btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--exp); font-weight: 700; font-size: .82rem; letter-spacing: .04em;
  padding: .82rem 1.4rem; border-radius: var(--r);
  background: var(--oxblood); color: #fff; border: 1.5px solid var(--oxblood);
  box-shadow: 0 10px 26px -14px rgba(147,39,26,.7);
  transition: transform var(--t), background var(--t), box-shadow var(--t);
  text-decoration: none; cursor: pointer;
}
.pmpro_btn:hover, a.pmpro_btn:hover, .pmpro_btn-submit:hover {
  background: var(--oxblood-br); border-color: var(--oxblood-br);
  transform: translateY(-2px); color: #fff;
}
.pmpro_btn-cancel, a.pmpro_btn-cancel {
  background: transparent; color: var(--ink); border-color: var(--line);
  box-shadow: none;
}
.pmpro_btn-cancel:hover, a.pmpro_btn-cancel:hover { background: transparent; border-color: var(--ink); color: var(--ink); }

/* notices */
.pmpro_message, .pmpro_error, .pmpro_success {
  padding: .85rem 1rem; border-radius: var(--r); margin-bottom: 1.3rem;
  font-size: .9rem; line-height: 1.5;
}
.pmpro_message { background: var(--mist); border: 1px solid var(--line); color: var(--ink); }
.pmpro_error   { background: rgba(147,39,26,.07); border: 1px solid var(--rose-line); color: var(--gold-deep); }
.pmpro_success { background: var(--green-soft); border: 1px solid rgba(62,122,86,.28); color: var(--green-deep); }

/* level cost / checkout summary */
.pmpro_level_cost, .pmpro_checkout_gateway, .pmpro_thead { color: var(--stone); }
.pmpro_card, .pmpro_checkout {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  padding: clamp(1.2rem, 3vw, 1.8rem); margin-bottom: 1.4rem;
}
.pmpro_card_title h2, .pmpro_checkout h3 {
  font-family: var(--exp); font-weight: 800; font-size: 1.15rem; margin-bottom: .9rem;
}

/* auth: validation messages on the sign-in / register card */
.auth__msg {
  padding: .85rem 1rem; border-radius: var(--r); margin-bottom: 1.3rem;
  font-size: .9rem; line-height: 1.5;
}
.auth__msg p + p { margin-top: .4rem; }
.auth__msg--error {
  background: rgba(147,39,26,.07); color: var(--gold-deep);
  border: 1px solid var(--rose-line);
}
.auth__msg--ok {
  background: var(--green-soft); color: var(--green-deep);
  border: 1px solid rgba(62,122,86,.28);
}

/* archives: the migration is still in progress, so readers who hit a gap
   need a way to ask rather than assume the piece is gone for good */
.archive-notice {
  background: var(--mist); border: 1px solid var(--line); border-radius: var(--r);
  padding: .95rem 1.2rem; margin-bottom: 1.6rem; font-size: .92rem; line-height: 1.55; color: var(--ink);
}
.archive-notice a { color: inherit; text-decoration: underline; }

/* WordPress renders pagination as .pagination > .nav-links > a.page-numbers */
.pagination .nav-links { display: flex; gap: .4rem; justify-content: center; flex-wrap: wrap; }
.pagination .page-numbers {
  min-width: 42px; height: 42px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: var(--r);
  font-family: var(--exp); font-weight: 600; font-size: .85rem;
}
.pagination .page-numbers.current { background: var(--oxblood); color: #fff; border-color: var(--oxblood); }
.pagination .page-numbers:hover:not(.current) { border-color: var(--ink); }
.pagination .page-numbers.dots { border-color: transparent; }

/* On a deep archive/gallery (e.g. page 15 of 33), the pagination row has up to
   11 links — prev, first, dots, a 5-page window, dots, last, next — which is
   wider than any phone screen and has to wrap. With justify-content: center,
   the wrapped line's centering pushed the last link on that line past the
   screen edge instead of wrapping it, so it rendered half cut-off and, along
   with it, the "…" jump and the last-page link disappeared — the only way off
   the current neighborhood of pages. Left-aligning below the width where an
   11-link row could still need to wrap avoids that clipping; above it there's
   always room for the full row on one line, so centering is untouched. */
@media (max-width: 620px) {
  .pagination .nav-links { justify-content: flex-start; }
}

/* comment form inside the design's .commentbox */
.commentbox .comment-form-cookies-consent,
.commentbox .comment-form-author,
.commentbox .comment-form-email,
.commentbox .comment-form-url { font-size: .9rem; color: var(--stone); }
.commentbox .commentbox__foot .submit { cursor: pointer; }

/* WordPress required classes */
.screen-reader-text {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.screen-reader-text:focus {
  position: fixed; top: .6rem; left: .6rem; width: auto; height: auto;
  clip: auto; z-index: 200; background: var(--ink); color: var(--paper);
  padding: .6rem 1rem; border-radius: var(--r);
}
.sticky { display: block; }
.bypostauthor > .comment__who { font-weight: 700; }

/* Site-wide PayPal contribution link. */
.contribute-fab {
  position: fixed;
  right: calc(1rem + env(safe-area-inset-right));
  bottom: calc(1rem + env(safe-area-inset-bottom));
  z-index: 110;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: .75rem 1.2rem;
  border: 2px solid #fff;
  border-radius: 999px;
  background: var(--oxblood);
  box-shadow: 0 8px 24px rgba(20,18,16,.28);
  color: #fff;
  font-family: var(--exp);
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1;
  text-decoration: none;
  transition: background var(--t), box-shadow var(--t), transform var(--t);
}
.contribute-fab:visited { color: #fff; }
.contribute-fab:hover {
  background: var(--oxblood-br);
  box-shadow: 0 10px 28px rgba(20,18,16,.34);
  color: #fff;
  transform: translateY(-2px);
}
.contribute-fab:focus-visible {
  outline: 3px solid var(--brass-light);
  outline-offset: 3px;
}

@media (max-width: 560px) {
  .contribute-fab {
    right: calc(.75rem + env(safe-area-inset-right));
    bottom: calc(.75rem + env(safe-area-inset-bottom));
  }
}
/* BLACK COMMENTATOR — PASSWORD FIELD FINAL FIX */

.auth .password-field {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.auth .password-field #si-pass,
.auth .password-field #rg-pass {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    height: auto;
    box-sizing: border-box !important;
    flex: none !important;
    float: none !important;
    padding-right: 50px !important;
}

.auth .password-field .password-toggle {
    position: absolute !important;
    top: 50% !important;
    right: 10px !important;
    left: auto !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 5px !important;
    border: 0 !important;
    background: transparent !important;
    color: #6F665A !important;
    cursor: pointer !important;
    z-index: 999 !important;
}

.auth .password-field .password-toggle svg {
    width: 20px !important;
    height: 20px !important;
    display: block !important;
    pointer-events: none !important;
}

/* Password visibility toggle */
.auth .password-field {
    position: relative !important;
    display: block !important;
    width: 100% !important;
}

.auth .password-field input[type="password"],
.auth .password-field input[type="text"] {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding-right: 48px !important;
}

.auth .password-field .password-toggle {
    position: absolute !important;
    top: 50% !important;
    right: 10px !important;
    left: auto !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;
    height: 30px !important;
    margin: 0 !important;
    padding: 5px !important;
    border: 0 !important;
    background: transparent !important;
    color: #6F665A !important;
    cursor: pointer !important;
    z-index: 10 !important;
}

.auth .password-field .password-toggle svg {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    stroke: currentColor !important;
}

/* Issue grid: distinguish the Cover Story with the original black feature treatment. */
.ccard--cover-feature {
  background: var(--ink, #111);
  color: var(--paper, #f3eee3);
  border: 1.5px solid var(--ink, #111);
  border-top: 4px solid var(--paper, #f3eee3);
}
.ccard--cover-feature .ccard__editorial-label {
  display: inline-block;
  padding: .32rem .6rem;
  border-radius: 2px;
  background: var(--paper, #f3eee3);
  color: var(--ink, #111);
  margin-bottom: 1rem;
}
.ccard--cover-feature .ccard__title,
.ccard--cover-feature .ccard__title a,
.ccard--cover-feature .ccard__author { color: var(--paper, #f3eee3); }
.ccard--cover-feature .ccard__role,
.ccard--cover-feature .ccard__lede,
.ccard--cover-feature .ccard__read { color: rgba(243,238,227,.76); }
.ccard--cover-feature .ccard__foot { border-top-color: rgba(243,238,227,.2); }
.ccard--cover-feature .ccard__more { color: var(--brass-light, #d8bd82); }
.ccard--cover-feature:hover .ccard__title,
.ccard--cover-feature:hover .ccard__title a { color: var(--red-light, #e58b83); }
.ccard--cover-feature:focus-within { outline-color: var(--paper, #f3eee3); border-color: var(--paper, #f3eee3); }