/*
Theme Name: The 1776 Gazette
Theme URI: https://example.com/1776-gazette
Author: Pennsylvania Avenue Press
Author URI: https://example.com
Description: A colonial-newspaper-meets-White-House themed WordPress blog theme, built for dispatches in which history's statesmen weigh in on today's headlines. Federal navy, antique gold and parchment palette, Playfair Display headlines, EB Garamond body copy, drop caps, statesman bylines (portrait, role) and a dedicated "Politician" taxonomy for filing posts under the figure who is "speaking."
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gazette1776
*/

/* ==========================================================================
   0. Design tokens
   ========================================================================== */
:root {
  --navy: #14213d;
  --navy-dark: #0a1220;
  --gold: #c6a15b;
  --gold-light: #e6cf9c;
  --parchment: #f4ecdb;
  --parchment-dark: #e7dabf;
  --cream: #fbf7ee;
  --red: #8c1d18;
  --red-dark: #6c130f;
  --ink: #2b2620;
  --ink-soft: #55503f;
  --white: #ffffff;
  --rule: rgba(20, 33, 61, 0.18);
  --shadow: 0 10px 30px rgba(20, 33, 61, 0.12);
  --radius: 2px;
  --font-display: "Playfair Display", "Georgia", serif;
  --font-body: "EB Garamond", "Iowan Old Style", Georgia, serif;
  --font-meta: "Source Serif 4", Georgia, serif;
  --font-script: "Mrs Saint Delafield", "Brush Script MT", cursive;
  --font-blackletter: "UnifrakturMaguntia", "Playfair Display", serif;
}

/* ==========================================================================
   1. Reset & base
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--parchment);
  background-image:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,0.5), transparent 45%),
    repeating-linear-gradient(0deg, rgba(20,33,61,0.015) 0px, rgba(20,33,61,0.015) 1px, transparent 1px, transparent 3px);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--red); text-decoration: none; }
a:hover { color: var(--navy); text-decoration: underline; }
ul, ol { padding-left: 1.3em; }
figure { margin: 0; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--navy);
  line-height: 1.2;
  margin: 0 0 0.5em;
  font-weight: 700;
}

.container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px;
}

.smallcaps {
  font-variant: small-caps;
  letter-spacing: 0.04em;
}

.eyebrow {
  font-family: var(--font-meta);
  font-variant: small-caps;
  letter-spacing: 0.12em;
  font-size: 0.8rem;
  color: var(--red);
  font-weight: 600;
}

.rule {
  border: none;
  border-top: 1px solid var(--rule);
  margin: 28px 0;
}

.rule--thick {
  border-top: 3px double var(--navy);
}

.star-divider {
  text-align: center;
  color: var(--gold);
  letter-spacing: 1em;
  font-size: 0.8rem;
  margin: 10px 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--navy);
  color: var(--white);
  padding: 10px 16px;
  z-index: 999;
}
.skip-link:focus { left: 10px; top: 10px; }

/* ==========================================================================
   2. Top bar & masthead
   ========================================================================== */
.topbar {
  background: var(--navy);
  color: var(--parchment-dark);
  font-family: var(--font-meta);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
}
.topbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 8px;
  padding-bottom: 8px;
}
.topbar a { color: var(--gold-light); }
.topbar .topbar__stripes {
  display: inline-flex;
  gap: 3px;
  margin-right: 10px;
  vertical-align: middle;
}
.topbar .topbar__stripes span {
  width: 10px;
  height: 3px;
  background: var(--red);
  display: inline-block;
}
.topbar .topbar__stripes span:nth-child(2n) { background: var(--gold); }

.masthead {
  position: relative;
  background: linear-gradient(180deg, var(--cream) 0%, var(--parchment) 100%);
  border-bottom: 4px solid var(--navy);
  padding: 38px 0 18px;
  text-align: center;
}

.masthead__seal {
  width: 74px;
  height: 74px;
  margin: 0 auto 26px;
}

.masthead__title {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(3.4rem, 9vw, 6rem);
  line-height: 0.9;
  margin: 0;
  letter-spacing: 0.01em;
  text-shadow: 2px 2px 0 rgba(20, 33, 61, 0.08), 1px 1px 6px rgba(20, 33, 61, 0.06);
}
.masthead__title a { color: var(--navy); text-decoration: none; }

.masthead__tagline {
  font-family: var(--font-meta);
  font-style: italic;
  color: var(--ink-soft);
  font-size: 1rem;
  margin-top: 2px;
}

.masthead__ribbon {
  display: flex;
  width: 190px;
  height: 6px;
  margin: 14px auto 0;
  box-shadow: 0 0 0 1px rgba(20, 33, 61, 0.3);
}
.masthead__ribbon span { flex: 1; }
.masthead__ribbon span:nth-child(1) { background: var(--navy); }
.masthead__ribbon span:nth-child(2) { background: var(--cream); }
.masthead__ribbon span:nth-child(3) { background: var(--red); }

.masthead__meta {
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  font-family: var(--font-meta);
  font-variant: small-caps;
  letter-spacing: 0.06em;
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin-top: 14px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 8px 0;
}

/* ==========================================================================
   2b. Ink blots & signature flourish
   ========================================================================== */
.ink-blot {
  position: absolute;
  pointer-events: none;
  opacity: 0.09;
  background: radial-gradient(circle at 30% 30%, var(--ink) 0%, var(--ink) 45%, transparent 72%);
  border-radius: 58% 42% 53% 47% / 44% 56% 41% 59%;
  z-index: 0;
}
.ink-blot--sm { width: 42px; height: 34px; }
.ink-blot--md { width: 76px; height: 60px; }
.ink-blot--lg { width: 130px; height: 100px; }
.ink-blot--r1 { transform: rotate(14deg); }
.ink-blot--r2 { transform: rotate(-10deg); }
.ink-blot--r3 { transform: rotate(28deg); border-radius: 46% 54% 60% 40% / 55% 45% 58% 42%; }

/* --- Fingerprints ---------------------------------------------------------
   A printer's thumb, left on the page while the ink was still wet. Built from
   repeating-radial-gradient rather than an image so it costs no request and
   recolours with --ink like the blots above.

   The ridges need to stay FINER than the blot gradients or the whole thing
   reads as a target rather than a print: 3px period, and the dark band only
   about a third of it, so the paper shows between ridges. */
.ink-blot--print {
  border-radius: 50% 50% 48% 52% / 60% 60% 40% 40%;
  background:
    repeating-radial-gradient(
      ellipse 60% 70% at 50% 55%,
      var(--ink) 0px,
      var(--ink) 1px,
      transparent 1px,
      transparent 3px
    );
  /* Fade the ridges out at the edge so the print has a rolled-off rim
     instead of a hard elliptical cut. */
  -webkit-mask-image: radial-gradient(ellipse 60% 68% at 50% 55%, #000 45%, transparent 78%);
          mask-image: radial-gradient(ellipse 60% 68% at 50% 55%, #000 45%, transparent 78%);
  opacity: 0.11;
}

/* A thumb rolled only halfway before it lifted — ridges on one side, smudge
   on the other. */
.ink-blot--print-partial {
  border-radius: 52% 48% 46% 54% / 58% 62% 38% 42%;
  background:
    repeating-radial-gradient(
      ellipse 55% 65% at 42% 58%,
      var(--ink) 0px,
      var(--ink) 1px,
      transparent 1px,
      transparent 3px
    );
  -webkit-mask-image: linear-gradient(105deg, #000 30%, rgba(0,0,0,0.35) 68%, transparent 92%);
          mask-image: linear-gradient(105deg, #000 30%, rgba(0,0,0,0.35) 68%, transparent 92%);
  opacity: 0.13;
}

/* Fingerprints want a portrait-ish footprint; the blot sizes above are all
   wider than they are tall. */
.ink-blot--print.ink-blot--sm,
.ink-blot--print-partial.ink-blot--sm { width: 34px; height: 44px; }
.ink-blot--print.ink-blot--md,
.ink-blot--print-partial.ink-blot--md { width: 54px; height: 70px; }
.ink-blot--print.ink-blot--lg,
.ink-blot--print-partial.ink-blot--lg { width: 82px; height: 106px; }

/* Rotations that read as a hand set down at an angle, not a stamp. */
.ink-blot--p1 { transform: rotate(-22deg); }
.ink-blot--p2 { transform: rotate(37deg); }
.ink-blot--p3 { transform: rotate(8deg); }

.signature-block {
  position: relative;
  margin-top: 30px;
  padding-top: 18px;
  border-top: 1px dashed var(--rule);
  text-align: right;
}
.signature-block .signoff-line {
  font-family: var(--font-meta);
  font-style: italic;
  color: var(--ink-soft);
  font-size: 0.95rem;
  margin-bottom: 2px;
}
.signature-block .signature-name {
  position: relative;
  display: inline-block;
  font-family: var(--font-script);
  font-size: 3rem;
  line-height: 1;
  color: #1a1410;
  transform: rotate(-2deg);
}

/* ==========================================================================
   3. Navigation
   ========================================================================== */
.site-nav {
  background: var(--red);
  border-bottom: 3px solid var(--gold);
}
.site-nav .container { display: flex; justify-content: center; }
.site-nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px;
  margin: 0;
  padding: 0;
}
.site-nav a {
  display: block;
  padding: 13px 18px;
  color: var(--cream);
  font-family: var(--font-meta);
  font-variant: small-caps;
  letter-spacing: 0.08em;
  font-size: 0.95rem;
  text-decoration: none;
  border-right: 1px solid rgba(255,255,255,0.15);
}
.site-nav li:last-child a { border-right: none; }
.site-nav a:hover,
.site-nav .current-menu-item > a {
  background: var(--red-dark);
  color: var(--gold-light);
}

/* --- Sub-menus (roundtable topics) ----------------------------------------
   header.php passes depth => 2, so a parent item with children renders a
   .sub-menu. Without these rules those children were laid out inline by the
   parent's flex row, which put every roundtable topic in the main nav bar as
   an equal sibling of its own parent. */
.site-nav li { position: relative; }

.site-nav .sub-menu {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 20;
  min-width: 240px;
  flex-direction: column;
  gap: 0;
  padding: 0;
  margin: 0;
  background: var(--navy);
  border: 1px solid var(--gold);
  border-top: 3px solid var(--gold);
  box-shadow: var(--shadow);
  /* Hidden without display:none so the links stay focusable and the panel can
     be revealed by :focus-within below. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s;
}

/* Opens on hover AND on keyboard focus. Hover alone would make the roundtable
   topics unreachable by keyboard, and this is the only place they are listed. */
.site-nav li:hover > .sub-menu,
.site-nav li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.site-nav .sub-menu li { width: 100%; }

.site-nav .sub-menu a {
  border-right: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding: 11px 16px;
  text-align: left;
  font-size: 0.9rem;
  white-space: normal;
}

.site-nav .sub-menu li:last-child a { border-bottom: none; }

.site-nav .sub-menu a:hover,
.site-nav .sub-menu .current-menu-item > a {
  background: var(--navy-dark);
  color: var(--gold-light);
}

/* A caret marking which item opens a panel, so the topics are discoverable
   rather than hidden behind a hover somebody has to guess at. */
.site-nav .menu-item-has-children > a::after {
  content: " \25BE";
  color: var(--gold);
}

@media (prefers-reduced-motion: reduce) {
  .site-nav .sub-menu { transition: none; }
}

.menu-toggle { display: none; }

/* ==========================================================================
   4. Layout
   ========================================================================== */
.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 44px;
  padding: 44px 0 60px;
  align-items: start;
}
.layout--single { grid-template-columns: minmax(0, 1fr) 300px; }
@media (max-width: 880px) {
  .layout { grid-template-columns: 1fr; }
}

/* ==========================================================================
   5. Post cards (index / archive)
   ========================================================================== */
.dispatch-feed { display: flex; flex-direction: column; gap: 34px; }

.post-card {
  background: var(--cream);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow);
  padding: 26px;
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 22px;
}
@media (max-width: 560px) {
  .post-card { grid-template-columns: 1fr; }
}

.post-card--featured {
  grid-template-columns: 1fr;
  border-top: 5px solid var(--navy);
  padding: 34px;
}
.post-card--featured .portrait-frame { width: 130px; margin-bottom: 14px; }

.portrait-frame {
  width: 150px;
  aspect-ratio: 1 / 1;
  border: 3px solid var(--gold);
  outline: 1px solid var(--navy);
  outline-offset: 3px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--parchment-dark);
}
.portrait-frame img { width: 100%; height: 100%; object-fit: cover; }
.portrait-frame--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--navy);
  font-family: var(--font-display);
  font-size: 2rem;
}

.byline {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-meta);
  font-variant: small-caps;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
  font-size: 0.88rem;
  margin: 4px 0 10px;
  flex-wrap: wrap;
}
.byline strong { color: var(--red); font-weight: 700; }
.byline .role { color: var(--ink-soft); }
.byline .sep { color: var(--gold); }

.post-card h2 {
  font-size: 1.5rem;
  margin: 0 0 8px;
}
.post-card h2 a { color: var(--navy); text-decoration: none; }
.post-card h2 a:hover { color: var(--red); }

.post-card .excerpt { color: var(--ink); }

.read-more {
  display: inline-block;
  margin-top: 10px;
  font-family: var(--font-meta);
  font-variant: small-caps;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--red);
  border-bottom: 1px solid var(--red);
}

.pagination {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 30px;
  font-family: var(--font-meta);
}
.pagination a, .pagination span {
  padding: 8px 14px;
  border: 1px solid var(--navy);
  color: var(--navy);
}
.pagination .current { background: var(--navy); color: var(--cream); }

/* ==========================================================================
   6. Single post (op-ed column)
   ========================================================================== */
.entry-header {
  position: relative;
  overflow: hidden;
  background: var(--cream);
  border: 1px solid var(--rule);
  border-top: 5px solid var(--navy);
  padding: 32px 36px;
  box-shadow: var(--shadow);
  margin-bottom: 30px;
}

.entry-header .eyebrow { display: block; margin-bottom: 10px; }

.entry-title {
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  margin-bottom: 14px;
}

.entry-byline {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 16px;
  align-items: center;
  padding-top: 16px;
  border-top: 1px dashed var(--rule);
}
.entry-byline .portrait-frame { width: 84px; }
.entry-byline .statesman-name {
  font-family: var(--font-display);
  color: var(--navy);
  font-size: 1.15rem;
  font-weight: 700;
}
.entry-byline .statesman-role {
  font-family: var(--font-meta);
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.entry-byline .post-date {
  font-family: var(--font-meta);
  font-size: 0.8rem;
  color: var(--ink-soft);
  margin-top: 2px;
}

.entry-content {
  position: relative;
  overflow: hidden;
  background: var(--cream);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow);
  padding: 36px 40px;
  font-size: 1.15rem;
  columns: 1;
}
.entry-content > p:first-of-type::first-letter {
  font-family: var(--font-display);
  float: left;
  font-size: 4.6rem;
  line-height: 0.82;
  padding: 6px 10px 0 0;
  color: var(--red);
  font-weight: 700;
}
.entry-content p { margin: 0 0 1.2em; }
.entry-content blockquote {
  margin: 1.6em 0;
  padding: 4px 0 4px 22px;
  border-left: 4px solid var(--gold);
  font-style: italic;
  color: var(--ink-soft);
}
.entry-content h2, .entry-content h3 { margin-top: 1.4em; }
.entry-content img { border: 1px solid var(--rule); }
.entry-content figcaption {
  font-family: var(--font-meta);
  font-size: 0.85rem;
  color: var(--ink-soft);
  text-align: center;
  margin-top: 6px;
}

.entry-footer {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-family: var(--font-meta);
  font-size: 0.85rem;
}
.entry-footer .tags a {
  display: inline-block;
  padding: 4px 10px;
  margin: 0 6px 6px 0;
  border: 1px solid var(--navy);
  color: var(--navy);
  font-variant: small-caps;
}
.entry-footer .tags a:hover { background: var(--navy); color: var(--cream); }

.satire-notice {
  margin-top: 26px;
  padding: 14px 18px;
  background: var(--parchment-dark);
  border-left: 4px solid var(--red);
  font-family: var(--font-meta);
  font-size: 0.85rem;
  color: var(--ink-soft);
}

/* ==========================================================================
   7. Sidebar / widgets
   ========================================================================== */
.widget {
  background: var(--cream);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow);
  padding: 22px 24px;
  margin-bottom: 26px;
}
.widget-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--navy);
  border-bottom: 2px solid var(--gold);
  padding-bottom: 8px;
  margin-bottom: 14px;
}
.widget ul { list-style: none; margin: 0; padding: 0; }
.widget li {
  padding: 7px 0;
  border-bottom: 1px dotted var(--rule);
  font-family: var(--font-meta);
}
.widget li:last-child { border-bottom: none; }
.widget a { color: var(--ink); }
.widget a:hover { color: var(--red); }

.statesman-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
.statesman-cloud a {
  padding: 5px 12px;
  border: 1px solid var(--gold);
  color: var(--navy);
  font-family: var(--font-meta);
  font-variant: small-caps;
  font-size: 0.85rem;
}
.statesman-cloud a:hover { background: var(--gold); color: var(--navy-dark); text-decoration: none; }

.search-form { display: flex; }
.search-form input[type="search"] {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid var(--navy);
  font-family: var(--font-body);
  font-size: 1rem;
  background: var(--parchment);
}
.search-form button {
  padding: 10px 16px;
  background: var(--navy);
  color: var(--cream);
  border: 1px solid var(--navy);
  font-family: var(--font-meta);
  font-variant: small-caps;
  cursor: pointer;
}
.search-form button:hover { background: var(--red); border-color: var(--red); }

/* ==========================================================================
   8. Archive / taxonomy header
   ========================================================================== */
.archive-header {
  position: relative;
  overflow: hidden;
  background: var(--navy);
  color: var(--cream);
  padding: 34px 36px;
  margin-bottom: 30px;
  box-shadow: var(--shadow);
  display: flex;
  gap: 24px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.archive-header .portrait-frame { width: 100px; border-color: var(--gold-light); flex-shrink: 0; }
.archive-header h1 { color: var(--cream); margin-bottom: 6px; }
.archive-header .archive-description { color: var(--parchment-dark); font-family: var(--font-meta); }
.archive-header .statesman-bio {
  color: var(--parchment-dark);
  font-family: var(--font-meta);
  font-size: 1rem;
  line-height: 1.65;
  max-width: 620px;
  margin: 10px 0 0;
}

/* ==========================================================================
   9. Comments
   ========================================================================== */
.comments-area {
  margin-top: 34px;
  background: var(--cream);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow);
  padding: 30px 36px;
}
.comment-list { list-style: none; margin: 0; padding: 0; }
.comment-body {
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
}
.comment-author { font-family: var(--font-display); color: var(--navy); font-weight: 700; }
.comment-metadata { font-family: var(--font-meta); font-size: 0.8rem; color: var(--ink-soft); }
.comment-form input, .comment-form textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--navy);
  background: var(--parchment);
  font-family: var(--font-body);
  margin-bottom: 12px;
}
.comment-form button {
  padding: 10px 20px;
  background: var(--red);
  color: var(--cream);
  border: none;
  font-family: var(--font-meta);
  font-variant: small-caps;
  cursor: pointer;
}
.comment-form button:hover { background: var(--red-dark); }

/* ==========================================================================
   10. Footer
   ========================================================================== */
.site-footer {
  position: relative;
  overflow: hidden;
  background: var(--navy-dark);
  color: var(--parchment-dark);
  padding: 40px 0 26px;
  margin-top: 40px;
  border-top: 4px solid var(--gold);
}
.site-footer .footer-seal {
  width: 46px;
  height: 46px;
  margin: 0 auto 14px;
}
.site-footer .footer-tagline {
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--gold-light);
  margin-bottom: 6px;
}
.site-footer .footer-meta {
  text-align: center;
  font-family: var(--font-meta);
  font-size: 0.78rem;
  color: rgba(244, 236, 219, 0.6);
  letter-spacing: 0.04em;
}
.site-footer .footer-nav {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin: 16px 0;
  flex-wrap: wrap;
  font-family: var(--font-meta);
  font-variant: small-caps;
  font-size: 0.85rem;
}
.site-footer .footer-nav a { color: var(--parchment-dark); }
.site-footer .footer-nav a:hover { color: var(--gold-light); }

/* ==========================================================================
   10b. Rebuttals
   ========================================================================== */
.rebuttal-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--parchment-dark);
  border-left: 4px solid var(--gold);
  padding: 12px 16px;
  margin-bottom: 24px;
  font-family: var(--font-meta);
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.rebuttal-notice__icon {
  font-size: 1.1rem;
  color: var(--red);
  line-height: 1;
}
.rebuttal-notice a { color: var(--red); }
.rebuttal-notice strong { color: var(--navy); }

.rebuttals-box {
  margin-top: 24px;
  background: var(--cream);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow);
  padding: 22px 24px;
}
.rebuttals-box .widget-title { margin-bottom: 12px; }
.rebuttals-box ul { list-style: none; margin: 0; padding: 0; }
.rebuttals-box li {
  padding: 8px 0;
  border-bottom: 1px dotted var(--rule);
  font-family: var(--font-meta);
  font-size: 0.92rem;
}
.rebuttals-box li:last-child { border-bottom: none; }
.rebuttals-box a { color: var(--ink); }
.rebuttals-box a:hover { color: var(--red); }
.rebuttals-box strong { color: var(--red); }

.reply-flag {
  font-family: var(--font-meta);
  font-size: 0.78rem;
  color: var(--ink-soft);
  font-style: italic;
  margin: -4px 0 8px;
}
.reply-flag span[aria-hidden] { color: var(--red); margin-right: 3px; }

/* ==========================================================================
   10c. Statesmen Roundtable
   ========================================================================== */
.roundtable-grid {
  display: grid;
  background: var(--cream);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow);
  margin-bottom: 30px;
}
.roundtable-grid--2 { grid-template-columns: repeat(2, 1fr); }
.roundtable-grid--3 { grid-template-columns: repeat(3, 1fr); }
.roundtable-column {
  padding: 30px 26px;
  border-right: 1px solid var(--rule);
  text-align: center;
}
.roundtable-column:last-child { border-right: none; }
.roundtable-column .portrait-frame { margin: 0 auto 12px; width: 110px; }
.roundtable-column .byline { justify-content: center; }
.roundtable-column .entry-title { font-size: 1.3rem; margin: 6px 0 10px; }
.roundtable-column .excerpt { text-align: left; font-size: 0.95rem; }
.roundtable-column .read-more { margin-top: 12px; }

@media (max-width: 760px) {
  .roundtable-grid--2, .roundtable-grid--3 { grid-template-columns: 1fr; }
  .roundtable-column { border-right: none; border-bottom: 1px solid var(--rule); }
  .roundtable-column:last-child { border-bottom: none; }
}

/* ==========================================================================
   10d. Newspaper front page — lead story, secondary stories, section rails
   ========================================================================== */
.front-lead {
  position: relative;
  background: var(--cream);
  border: 1px solid var(--rule);
  border-top: 6px solid var(--navy);
  box-shadow: var(--shadow);
  padding: 34px;
  margin-bottom: 32px;
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 30px;
  align-items: center;
}
.front-lead__media.portrait-frame { width: 220px; }
.front-lead__kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.front-lead .entry-title { font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
.front-lead .excerpt { font-size: 1.05rem; }

.front-secondary-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px;
  margin-bottom: 10px;
}
.front-secondary-item {
  background: var(--cream);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow);
  padding: 22px;
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 16px;
  align-items: start;
}
.front-secondary-item .portrait-frame { width: 90px; }
.front-secondary-item .entry-title { font-size: 1.15rem; margin: 4px 0 8px; }
.front-secondary-item .excerpt { font-size: 0.92rem; }

@media (max-width: 700px) {
  .front-lead { grid-template-columns: 1fr; text-align: center; }
  .front-lead__media.portrait-frame { margin: 0 auto; }
  .front-lead__kicker { justify-content: center; }
  .front-secondary-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .front-secondary-item { grid-template-columns: 1fr; text-align: center; }
  .front-secondary-item .portrait-frame { margin: 0 auto; }
}

.section-block { margin: 40px 0; }
.section-block__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 3px solid var(--navy);
  padding-bottom: 6px;
  margin-bottom: 20px;
}
.section-block__header h2 { margin: 0; font-size: 1.4rem; }
.section-block__header h2 a { color: var(--navy); text-decoration: none; }
.section-block__header h2 a:hover { color: var(--red); }
.section-block__more {
  font-family: var(--font-meta);
  font-variant: small-caps;
  letter-spacing: 0.06em;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--red);
  white-space: nowrap;
}

.section-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.section-item { display: flex; flex-direction: column; gap: 8px; }
.section-item .portrait-frame { width: 100px; }
.section-item .entry-title { font-size: 1.1rem; margin: 0; }
.section-item .excerpt { font-size: 0.9rem; }

.section-item--lead {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: flex-start;
  gap: 22px;
}
.section-item--lead .portrait-frame { width: 140px; flex-shrink: 0; }
.section-item--lead .entry-title { font-size: 1.5rem; }

@media (max-width: 760px) {
  .section-grid { grid-template-columns: 1fr; }
  .section-item--lead { flex-direction: column; }
  .section-item--lead .portrait-frame { margin: 0 auto; }
}

/* ==========================================================================
   10e. Correspondents directory (About page)
   ========================================================================== */
.correspondents-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-bottom: 20px;
}
.correspondent-card {
  background: var(--cream);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow);
  padding: 28px;
  text-align: center;
}
.correspondent-card .portrait-frame { width: 120px; margin: 0 auto 14px; }
.correspondent-card .entry-title { font-size: 1.25rem; margin: 0 0 4px; }
.correspondent-role {
  font-family: var(--font-meta);
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-bottom: 10px;
}
.correspondent-card .excerpt { text-align: left; font-size: 0.92rem; margin-bottom: 12px; }
.correspondent-card .read-more { margin-top: 4px; }

@media (max-width: 900px) {
  .correspondents-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .correspondents-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   11. Misc / utility
   ========================================================================== */
/* position: relative so the ink blots and fingerprints placed inside page
   headers anchor to the header rather than escaping to the nearest positioned
   ancestor further up the page. */
.page-header { text-align: center; margin-bottom: 20px; position: relative; }
.wp-block-quote, blockquote { font-style: italic; }
.alignwide { max-width: none; }

@media (max-width: 680px) {
  .site-nav ul { flex-direction: column; }
  .site-nav a { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.12); text-align: center; }

  /* There is no hover on touch, so the dropdown becomes a permanently open,
     indented section instead. Roundtable topics stay visible rather than
     being locked behind an interaction the device cannot perform. */
  .site-nav .sub-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    min-width: 0;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: none;
    background: var(--navy-dark);
  }
  .site-nav .sub-menu a { text-align: center; padding-left: 16px; }

  .entry-header, .entry-content, .comments-area { padding: 24px; }
}