/* The Western Republican — front-end + editor styles. */

:root {
  --paper: #e6ddca;
  --ink: var(--wp--preset--color--ink, #15110d);
  --ink-soft: var(--wp--preset--color--ink-soft, #5a5148);
  --rule: var(--ink);
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* ---- paper background: pale mottled limestone/ecru, not kraft-orange ---- */
body {
  background:
    radial-gradient(ellipse 55% 38% at 18% 12%, rgba(120, 110, 92, 0.07), transparent 60%),
    radial-gradient(ellipse 48% 34% at 82% 68%, rgba(115, 105, 88, 0.08), transparent 58%),
    radial-gradient(ellipse 42% 30% at 52% 46%, rgba(125, 115, 98, 0.05), transparent 62%),
    radial-gradient(ellipse 40% 28% at 8% 85%, rgba(110, 100, 84, 0.06), transparent 55%),
    linear-gradient(160deg, #f1ebdd 0%, #e9e0cd 42%, #e2d8c3 70%, #ece3d3 100%);
  background-attachment: fixed;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.2;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='480'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.55 0 0 0 0 0.52 0 0 0 0 0.45 0 0 0 0.35 0'/%3E%3C/filter%3E%3Crect width='480' height='480' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 480px 480px;
}
.wp-site-blocks { position: relative; z-index: 1; }

/* ---- masthead ---- */
.wr-masthead { text-align: center; padding-bottom: 0.85rem; }
.wr-motto {
  font-style: italic;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
  margin: 0 0 0.2em;
}
.wr-title,
.wr-title a {
  font-family: var(--wp--preset--font-family--display), Georgia, serif;
  font-weight: 400;
  font-size: clamp(2.4rem, 6vw, 4.1rem);
  letter-spacing: 0.01em;
  line-height: 1;
  color: var(--ink);
  text-decoration: none;
}
.wr-title { margin: 0.1em 0 0.15em; }
.wr-sub {
  font-size: clamp(1rem, 2.4vw, 1.35rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 0.55em;
}
.wr-rule-heavy { border: none; border-top: 3px double var(--rule); }
.wr-rule-thin { border: none; border-top: 1px solid var(--rule); }

/* ---- dateline ---- */
.wr-dateline { font-size: 0.82rem; letter-spacing: 0.03em; padding: 0.4rem 0 0.55rem; }
.wr-dateline-center { font-weight: 700; letter-spacing: 0.02em; }
.wr-dateline p { margin: 0; }

/* ---- lede: full-width headline + deck, so the article body below can
   start immediately after with no row to wait on ---- */
.wr-lede { margin-top: 1.6rem; }
.wr-headline {
  font-weight: 700;
  font-size: clamp(1.9rem, 3.6vw, 2.7rem);
  line-height: 1.06;
  margin: 0 0 0.5rem;
}
.wr-deck {
  font-style: italic;
  font-size: 1.08rem;
  line-height: 1.42;
  color: var(--ink-soft);
  margin: 0;
  max-width: 50rem;
}
.wr-engraving {
  margin: 0 0 1.4rem;
}
.wr-engraving img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  border: 1px solid var(--rule);
  outline: 4px solid var(--paper);
  outline-offset: -6px;
  filter: grayscale(1) contrast(1.15) brightness(0.97) sepia(0.12);
}

/* ---- post content ---- */
.wr-kicker {
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 1.7rem 0 0.35em;
}
.wr-byline { font-size: 0.85rem; color: var(--ink-soft); margin: 0 0 0.3rem; }
.wr-byline strong { color: var(--ink); letter-spacing: 0.02em; }

.wr-article-body {
  column-width: 17rem;
  column-gap: 2.4rem;
  column-rule: 1px solid rgba(21, 17, 13, 0.3);
  font-size: 1rem;
  line-height: 1.56;
  text-align: justify;
  hyphens: auto;
  margin-top: 0.6rem;
}
.wr-article-body p { margin: 0 0 0.95em; }
.wr-article-body p:first-of-type::first-letter {
  font-family: var(--wp--preset--font-family--display), serif;
  float: left;
  font-size: 3.4em;
  line-height: 0.82;
  padding: 0.03em 0.08em 0 0;
  color: var(--ink);
}

/* ---- page grid: article body + modules on the left, engraving + notes
   on the right, both starting at the same line ---- */
.wr-page-grid { margin-top: 0.6rem; align-items: stretch !important; }
.wr-module { margin-top: 1.8rem; }
.wr-module:first-child { margin-top: 0; }
.wr-module h3 {
  font-size: 0.98rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  margin: 0 0 0.15em;
  padding-bottom: 0.35em;
  border-bottom: 1px solid var(--rule);
}
.wr-module p { margin: 0.55em 0 0; font-size: 0.93rem; line-height: 1.5; }

/* sidebar: engraving leads, then notes stack below it; flex column so the
   last card can be pinned to the bottom */
.wr-sidebar { display: flex; flex-direction: column; }
.wr-note-card { margin-top: 1.4rem; }
.wr-note-card-bottom { margin-top: auto; }
.wr-note-card h4 {
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  margin: 0 0 0.15em;
  padding-bottom: 0.3em;
  border-bottom: 2px solid var(--rule);
}
.wr-note-card p { font-size: 0.86rem; line-height: 1.48; margin: 0.5em 0 0; }
.wr-note-card ul {
  list-style: none;
  margin: 0.5em 0 0;
  padding: 0;
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
}
.wr-note-card li {
  padding: 0.2em 0;
  border-bottom: 1px dotted rgba(21, 17, 13, 0.35);
}

/* price rows: label left, amount right — a Group per row, not a plain list,
   so the amount can align to the right edge of the card */
.wr-price-row {
  padding: 0.2em 0;
  border-bottom: 1px dotted rgba(21, 17, 13, 0.35);
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
  margin-top: 0.5em !important;
}
.wr-note-card > .wr-price-row:first-of-type { margin-top: 0.5em; }
.wr-price-row p { margin: 0; }
.wr-price-row p:last-child { color: var(--ink-soft); }

/* ---- editorial sign-off ---- */
.wr-thoughts { margin-top: 2.2rem; padding: 1.1rem 0 0.3rem; text-align: center; }
.wr-thoughts h3 {
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  margin: 0 0 0.6em;
}
.wr-thoughts p {
  font-style: italic;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* ---- footer ---- */
.wr-colophon {
  margin-top: 1.2rem;
  padding-top: 0.6rem;
  text-align: center;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
}
.wr-colophon p { margin: 0.2em 0; }
.wr-disclaimer { font-style: italic; margin-top: 0.6em !important; }

/* ---- archive list (templates/index.html) ---- */
.wr-archive-item {
  padding: 1.4rem 0;
  border-bottom: 1px solid rgba(21, 17, 13, 0.25);
}
.wr-archive-item:first-child { padding-top: 0; }
/* .wr-deck carries a max-width tuned for the single-post byline; the
   archive listing reuses the class for its italic styling but should
   use the full column width, not stop halfway across the page */
.wr-archive-item .wr-deck { max-width: none; }
.wr-archive-item .wp-block-post-title a { text-decoration: none; }
.wr-archive-item .wp-block-post-title a:hover { text-decoration: underline; }

@media screen and (max-width: 48rem) {
  .wr-page-grid.wp-block-columns { flex-wrap: wrap !important; }
  .wr-article-body { column-width: auto; column-count: 1; }
}

/* ---- print: keep the newspaper layout instead of a plain reflow ----
   A printed page's width in CSS terms falls inside the mobile breakpoint
   above, so without "screen" scoping it there, printing would silently
   stack the sidebar under the article. This block also restores the
   paper background (browsers strip backgrounds by default when
   printing), locks the body text to a firm two columns rather than the
   fluid auto-fit count, and stops cards/figures from splitting across a
   page break. */
@media print {
  @page {
    size: letter;
    margin: 0.6in;
  }

  * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  body {
    background: var(--paper) !important;
  }
  body::before {
    display: none; /* fixed-position grain layer doesn't paginate reliably */
  }

  .wr-main,
  .wr-masthead,
  .wr-colophon {
    max-width: 100% !important;
  }

  .wr-page-grid.wp-block-columns {
    flex-wrap: nowrap !important;
  }

  .wr-article-body {
    column-width: auto;
    column-count: 2;
  }
  .wr-article-body p {
    orphans: 3;
    widows: 3;
  }

  .wr-lede,
  .wr-engraving,
  .wr-note-card,
  .wr-module,
  .wr-thoughts {
    break-inside: avoid;
  }
  .wr-masthead {
    break-after: avoid;
  }
}