:root {
  --ink-dark: #1a1612;
  --ink-body: #2e2a24;
  --ink-light: #4a443c;
  --paper: #f5f0e1;
  --paper-aged: #ede7d4;
  --paper-dark: #e8e3d5;
  --flag-red: #b31942;
  --font-headline: "Playfair Display", Georgia, serif;
  --font-body: "Lora", Georgia, serif;
  --font-condensed: "Oswald", Arial, sans-serif;
}

/* ============================================
   SKIP NAVIGATION LINK — accessibility
   ============================================ */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--ink-dark);
  color: var(--paper);
  padding: 8px 16px;
  z-index: 1000;
  font-family: var(--font-condensed);
  font-size: 13px;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.skip-link:focus {
  top: 0;
}

body {
  background-color: #a39177;
  color: var(--ink-body);
  font-family: var(--font-body);
  margin: 0;
  padding: 40px;
  overflow-x: hidden;
}

.page {
  display: grid;
  grid-template-columns: 2fr 2fr 1.5fr;
  grid-template-rows: auto;
  max-width: 900px;
  margin: 0 auto;
  border: 2px solid var(--ink-dark);
  box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.3);
}

.ad {
  border: 1px solid #2b2b2b;
  padding: 3px;
  font-size: 11px;
  line-height: 1.3;
  background-color: var(--box-color, var(--paper));
}

.centered {
  text-align: center;
}

.fine-print {
  font-family: "Courier New", Courier, monospace;
  font-size: 8px;
  line-height: 1.2;
  text-transform: uppercase;
  color: #444;
}

.clear {
  clear: both;
}

/* ============================================
   FULL-WIDTH SHARED ELEMENTS
   ============================================ */
.masthead,
.issue-subheading,
.color-dose,
.end-matter {
  grid-column: 1 / -1;
}

/* ============================================
   MASTHEAD
   ============================================ */
.masthead {
  text-align: center;
  background-color: var(--paper);
  color: var(--paper);
  border-bottom: 3px solid var(--ink-dark);
  padding: 0;
}

.masthead-logo {
  display: block;
  width: 100%;
  height: auto;
}

.masthead-title {
  font-family: var(--font-headline);
  font-size: 28px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 6px;
  margin: 0;
  color: var(--paper);
}

.masthead-tagline {
  display: block;
  font-family: var(--font-condensed);
  font-size: 11px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 3px;
  background-color: var(--ink-dark);
  color: var(--paper);
  text-align: right;
  padding: 5px 14px;
  margin: 0;
  box-sizing: border-box;
  width: 100%;
}

.masthead-date {
  display: block;
  font-family: var(--font-condensed);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 1px;
  color: var(--ink-body);
  text-align: left;
  padding: 5px 10px;
  margin: 0;
}

.masthead-date a {
  color: var(--ink-body);
  text-decoration: none;
}

.masthead-date a:hover {
  text-decoration: underline;
}

/* ============================================
   ISSUE SUBHEADING NAV BAR
   ============================================ */
.issue-subheading {
  background-color: var(--ink-dark);
  color: var(--paper);
  font-family: var(--font-condensed);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 4px;
  text-align: center;
  padding: 6px 14px;
  border-top: 1px solid var(--ink-light);
}

.issue-subheading a {
  color: var(--paper);
  text-decoration: none;
  letter-spacing: 4px;
}

.issue-subheading a:hover {
  text-decoration: underline;
}

.section-header {
  text-align: center;
  font-family: var(--font-condensed);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 4px;
  padding: 4px 10px;
  background-color: var(--paper);
  color: var(--ink-dark);
  border-bottom: 1px solid var(--ink-dark);
}

/* ============================================
   GRID AD POSITIONS (DESKTOP — base .page grid)
   ============================================ */
#ad-23 {
  grid-column: 1 / 4;
  grid-row: 1;
  text-align: center;
  font-family: var(--font-headline);
  font-size: 18px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 3px;
  padding: 6px;
  background-color: var(--ink-dark);
  color: var(--paper);
  border-bottom: 3px solid var(--ink-dark);
}

/* Left Column */
#ad-1 { grid-column: 1; grid-row: 2 / 5; }
#ad-2 { grid-column: 1; grid-row: 5; }
#ad-3 { grid-column: 1; grid-row: 6; }
#ad-4 { grid-column: 1; grid-row: 7; }
#ad-5 { grid-column: 1; grid-row: 8 / 11; }

/* Middle Column */
#ad-6  { grid-column: 2; grid-row: 2 / 5; }
#ad-7  { grid-column: 2; grid-row: 5 / 7; }
#ad-8  { grid-column: 2; grid-row: 7; }
#ad-9  { grid-column: 2; grid-row: 8; }
#ad-10 { text-align: center; grid-column: 2; grid-row: 9; }
#ad-11 { grid-column: 2; grid-row: 10; }

/* Right Column */
#ad-13 { grid-column: 3; grid-row: 2; }
#ad-14 { text-align: center; grid-column: 3; grid-row: 3; }
#ad-15 { grid-column: 3; grid-row: 4; }
#ad-16 { grid-column: 3; grid-row: 5; }
#ad-17 { grid-column: 3; grid-row: 6; }
#ad-18 { grid-column: 3; grid-row: 7 / 9; }
#ad-19 { grid-column: 3; grid-row: 9 / 11; }
#ad-20 { grid-column: 3; grid-row: 11 / 13; }
#ad-21 { grid-column: 3; grid-row: 13 / 15; }

/* Multi-Column Display Ads */
#ad-12 { grid-column: 1 / 3; grid-row: 11 / 14; }

#ad-22 {
  grid-column: 1 / 4;
  grid-row: 15;
  text-align: justify;
  padding: 15px;
  background-color: #e8e3d5;
  border-top: 4px double #2b2b2b;
  column-count: 3;
  column-gap: 20px;
  column-rule: 1px solid #ccc;
}

/* ============================================
   AD TYPOGRAPHY & ELEMENTS
   ============================================ */
.ad h2 {
  font-family: var(--font-headline);
  font-size: 14px;
  text-transform: uppercase;
  margin: 0 0 1px 0;
  letter-spacing: 1px;
  color: var(--ink-dark);
}

.ad p {
  font-family: var(--font-condensed);
  margin: 3px 0;
  font-size: 10px;
  line-height: 1.4;
  color: var(--ink-body);
}

.ad em {
  font-size: 9px;
  color: var(--ink-light);
}

.ad .reversed {
  background-color: var(--ink-dark);
  color: var(--paper);
  padding: 2px 4px;
  margin-left: -3px;
  margin-right: -3px;
}

.ad a {
  color: var(--ink-dark);
  text-decoration: underline;
}

.ad a:hover {
  color: var(--ink-light);
  text-decoration: none;
}

.reversed a {
  color: var(--paper);
  text-decoration: underline;
}

.reversed a:hover {
  color: var(--paper-aged);
  text-decoration: none;
}

/* ============================================
   AD FORMAT VARIATIONS
   ============================================ */

/* Classified */
.ad-classified h2 {
  font-family: var(--font-condensed);
  font-size: 8px;
  line-height: 1.3;
  margin: 1px 0;
  font-weight: 400;
}
.ad-classified p {
  font-size: 8px;
  line-height: 1.3;
  margin: 1px 0;
}
.ad-classified em {
  font-size: 7px;
}

/* Standard */
.ad-standard h2 {
  font-size: 14px;
  letter-spacing: 1px;
  margin-bottom: 4px;
}
.ad-standard p {
  font-size: 10px;
  line-height: 1.4;
  margin: 3px 0;
}

/* Editor's Snowball inset — full-width image below the text. The img
   needs its own width rule regardless of the wrapper's size, or it
   renders at full native resolution. */
.editor-inset-graphic {
  width: 100%;
  margin-top: 8px;
}

.editor-inset-graphic img {
  width: 100%;
  height: auto;
  display: block;
}

/* Feature */
.ad-feature h2 {
  font-size: 18px;
  letter-spacing: 2px;
  margin-bottom: 6px;
  line-height: 1.1;
}
.ad-feature p {
  font-size: 11px;
  line-height: 1.5;
  margin: 5px 0;
}

/* Shout */
.ad-shout h2 {
  font-family: var(--font-condensed);
  font-size: 16px;
  letter-spacing: 3px;
  text-transform: uppercase;
  line-height: 1.0;
  margin-bottom: 3px;
  font-weight: 700;
}
.ad-shout p {
  font-family: var(--font-condensed);
  font-size: 9px;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Quote */
.ad-quote {
  text-align: center;
  background-color: var(--paper-dark);
  border-width: 2px;
  padding: 12px 3px;
}
.ad-quote p {
  font-size: 11px;
  font-style: italic;
  line-height: 1.6;
}
.ad-quote strong {
  font-size: 14px;
  font-style: normal;
  letter-spacing: 1px;
}

/* Narrative */
.ad-narrative h2 {
  font-size: 16px;
  letter-spacing: 1px;
  margin-bottom: 6px;
  text-align: center;
}
.ad-narrative p {
  font-size: 9px;
  line-height: 1.5;
  margin: 4px 0;
  text-align: justify;
}
.ad-narrative em {
  font-size: 8px;
  display: block;
  margin-top: 6px;
  text-align: center;
}

/* ============================================
   GRAPHICS & IMAGES
   ============================================ */
.illustration-box {
  width: 94%;
  margin: auto;
  border: 1px dashed var(--ink-light);
  display: block;
  background-color: var(--paper-aged);
  padding: 6px;
  font-family: var(--font-condensed);
  font-size: 7px;
  color: var(--ink-light);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.illustration-box img {
  max-width: 100%;
  height: auto;
  display: block;
}

.farmer-photo {
  margin: 0 0 24px;
}

.farmer-photo img {
  display: block;
  width: 100%;
  height: auto;
}

.tilted   { transform: rotate(1deg); }
.tilted-1 { transform: rotate(-1deg); }

.float-right {
  float: right;
  width: 80%;
  margin: 0 0 10px 10px;
}

.float-left {
  float: left;
  width: 40%;
  margin: 0 10px 10px 0;
}

/* ============================================
   COUPON CTA BLOCK
   ============================================ */
.coupon-cta {
  background-color: var(--paper);
  border: 2px dashed var(--ink-dark);
  padding: 10px 14px 14px;
  font-family: var(--font-condensed);
}

.coupon-cutline {
  display: block;
  font-family: var(--font-condensed);
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--ink-light);
  margin-bottom: 8px;
  overflow: hidden;
  white-space: nowrap;
}

.coupon-cta p {
  font-family: var(--font-condensed);
  font-size: 12px;
  line-height: 1.5;
  text-transform: uppercase;
  margin: 4px 0;
  color: var(--ink-body);
}

.coupon-cta .cta-yes { font-size: 14px; font-weight: 700; }

.coupon-cta .cta-titles {
  font-family: var(--font-headline);
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 1px;
}

.coupon-cta .cta-price {
  font-family: var(--font-headline);
  font-size: 20px;
  font-weight: 900;
  color: var(--ink-dark);
}

.coupon-cta .cta-strike {
  text-decoration: line-through;
  color: var(--ink-light);
  font-weight: 400;
  font-size: 11px;
}

.coupon-cta .cta-exclusive {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  margin-top: 10px;
  text-align: center;
}

.coupon-cta .cta-link-line {
  text-align: center;
  margin-top: 6px;
}

.coupon-cta a {
  font-family: var(--font-condensed);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--ink-dark);
  text-decoration: underline;
}

.coupon-cta a:hover {
  color: var(--ink-light);
  text-decoration: none;
}

.coupon-inner {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.coupon-photo {
  flex: 0 0 auto;
  width: 140px;
  margin-top: 20px;
  border: 2px solid black;
}

.coupon-photo img {
  width: 100%;
  height: auto;
  display: block;
}

.coupon-text {
  flex: 1;
  text-align: center;
}

/* ============================================
   VISUALLY HIDDEN (screen reader only)
   ============================================ */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================
   ISSUE 01 — CHARLES ATLAS FORMAT
   ============================================ */
.page.issue-01 {
  grid-template-columns: 220px 1fr;
  max-width: 980px;
}

.i01-left {
  grid-column: 1;
  border-right: 1px solid var(--ink-dark);
}

.i01-right {
  grid-column: 2;
}

.i01-main-figure {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--ink-dark);
}

.i01-main-figure img {
  display: block;
  width: 100%;
  height: auto;
}

/* ============================================
   CHARACTER AD FORMAT
   ============================================ */
.ad-character {
  padding: 0;
  overflow: hidden;
}

.ad-character .char-header {
  background-color: var(--ink-dark);
  color: var(--paper);
  font-family: var(--font-condensed);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3px;
  text-align: center;
  padding: 4px;
}

.ad-character .char-eyebrow {
  text-align: center;
  font-family: var(--font-headline);
  font-style: italic;
  font-size: 14px;
  font-weight: 700;
  margin: 6px 4px;
}

.ad-character .char-name {
  font-family: var(--font-headline);
  font-size: 48px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 8px;
  text-align: center;
  line-height: 1;
  padding: 6px 0;
  margin: 0;
}

.ad-character .char-body {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 8px;
  padding: 8px;
}

.ad-character .char-left,
.ad-character .char-right {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  font-family: var(--font-condensed);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.2;
}

.ad-character .char-right { text-align: right; }

.ad-character .char-center img {
  max-width: 100%;
  height: auto;
  display: block;
}

.ad-character .char-yes {
  font-family: var(--font-headline);
  font-size: 24px;
  font-weight: 900;
  text-align: center;
  border: 2px solid var(--ink-dark);
  padding: 6px;
  margin: 8px 0 0;
}

.ad-character .char-highlight {
  font-family: var(--font-headline);
  font-size: 20px;
  font-weight: 900;
  text-transform: uppercase;
  background-color: var(--ink-dark);
  color: var(--paper);
  padding: 1px 4px;
  display: inline-block;
}

.ad-character .char-testimonial {
  border: 1px solid var(--ink-dark);
  padding: 4px 6px;
  font-size: 8px;
  font-style: italic;
  background-color: var(--paper-aged);
  font-family: var(--font-body);
  line-height: 1.3;
  margin: 6px 0;
}

.ad-character .char-coupon {
  border-top: 2px dashed var(--ink-dark);
  padding: 8px;
  margin: 0 8px 8px;
}

.ad-character .char-coupon p {
  font-family: var(--font-condensed);
  font-size: 11px;
  text-transform: uppercase;
  line-height: 1.4;
  margin: 3px 0;
}

.ad-character .char-coupon .coupon-bold {
  font-family: var(--font-headline);
  font-size: 15px;
  font-weight: 900;
  text-transform: uppercase;
  display: block;
  margin: 4px 0;
}

/* ============================================
   ISSUE 02 — CLASSIFIED GRID FORMAT
   ============================================ */
.page.issue-02 {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas:
    "masthead     masthead     masthead"
    "subnav       subnav       subnav"
    "classifieds  classifieds  classifieds"
    "totaste      captamerica  captamerica"
    "totaste      article-body article-body"
    "open4        weather      open5"
    "banner       banner       banner"
    "aob          editor       farmer";
  max-width: 980px;
}

.page.issue-02 .masthead           { grid-area: masthead; }
.page.issue-02 .issue-subheading   { grid-area: subnav; }
.page.issue-02 #ad-classifieds     { grid-area: classifieds; }
.page.issue-02 #ad-to-taste        { grid-area: totaste; }
.page.issue-02 #ad-captamerica     { grid-area: captamerica; }
.page.issue-02 #ad-article-body    { grid-area: article-body; }
.page.issue-02 #ad-open-4          { grid-area: open4; }
.page.issue-02 #ad-weather         { grid-area: weather; }
.page.issue-02 #ad-open-5          { grid-area: open5; }
.page.issue-02 #banner-bar-1       { grid-area: banner; }
.page.issue-02 #ad-great-american-pinup           { grid-area: aob; }
.page.issue-02 #ad-editor-feature  { grid-area: editor; }
.page.issue-02 #ad-farmer          { grid-area: farmer; }

/* Captain America article — 3-col inner grid */
#ad-article-body {
  display: grid;
  grid-template-columns: 1fr 180px 1fr;
  gap: 12px;
  align-items: start;
}

#ad-article-body .article-col-image img {
  width: 100%;
  height: auto;
  display: block;
}

#ad-article-body .article-col-left p,
#ad-article-body .article-col-right p {
  font-size: 13px;
  line-height: 1.5;
  margin: 0 0 6px 0;
}

/* Override .ad-narrative em for article body — ID beats class */
#ad-article-body em {
  font-size: inherit;
  display: inline;
  margin-top: 0;
  text-align: left;
  color: inherit;
}

/* Captain America headline */
#ad-captamerica h2 {
  font-family: var(--font-condensed);
  font-size: 22px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  background-color: var(--ink-dark);
  color: var(--paper);
  padding: 6px 10px;
  margin: 0;
  text-align: center;
}

/* Classifieds band — CSS Grid */
#ad-classifieds {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  padding: 8px 10px;
  background-color: var(--paper-aged);
  border-bottom: 2px solid var(--ink-dark);
}

#ad-classifieds .classified-entry {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#ad-classifieds .classified-entry img,
#ad-classifieds .classified-entry a img {
  width: 100%;
  height: auto;
  display: block;
}

#ad-classifieds .classified-entry p {
  font-family: var(--font-condensed);
  font-size: 8px;
  line-height: 1.4;
  margin: 0;
  color: var(--ink-body);
}

#ad-classifieds .classified-entry strong {
  font-size: 8px;
  font-family: var(--font-condensed);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ink-dark);
}

/* ============================================
   ISSUE 03 — AD-SPOT FORMAT (AUTO-FLOW)
   Mobile-first: single column, no tilt/scale by default. The
   multi-column "scrapbook" layout with box tilt/scale only turns on
   at 900px and up (see the min-width block near the end of this
   section), where neighboring boxes reliably exist to absorb the
   visual bleed. This is intentionally safe-by-default rather than
   tuned to any specific device's width, since box adjacency in the
   auto-fill grid was never guaranteed at every viewport size.
   ============================================ */
.page.issue-03 {
  grid-template-columns: 1fr;
  grid-auto-flow: dense;
  grid-auto-rows: minmax(90px, auto);
  max-width: 980px;
}

@media screen and (min-width: 900px) {
  .page.issue-03 {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  }
}

/* masthead, subnav, end-matter already get grid-column: 1 / -1 globally.
   These three also need full width but aren't in that global list. */
.page.issue-03 #banner-bar-1,
.page.issue-03 #ad-shipnote,
.page.issue-03 #ad-orderform {
  grid-column: 1 / -1;
}

/* Featured/taller boxes — double-height treatment only applies once
   the multi-column layout is active (900px+). Below that, everything
   is single column, so a span:2 would just leave dead empty space. */
@media screen and (min-width: 900px) {
  .page.issue-03 #ad-farmer,
  .page.issue-03 #ad-editor-feature,
  .page.issue-03 #ad-paris-teaser {
    grid-row: span 2;
  }
}

/* Optional hand-pasted tilt and/or oversize for individual ad boxes.
   Both unset by default — to alter a specific box, add lines to its ID
   rule below, next to its --box-color line, e.g.:
     .page.issue-03 #ad-diners {
       --box-color: #a8c8d8;
       --box-tilt: 0.5deg;
       --box-scale: 1.03;
       z-index: 2;
     }
   --box-scale takes a multiplier, not a percent: 1.03 = 103%. Since
   transform doesn't affect grid layout, a scaled-up box keeps its
   original cell for layout purposes but visually bleeds into whatever's
   next to it — that's the forced overlap. Same z-index note as before:
   add it if you want that box's overlap to sit on top of its neighbor
   rather than duck behind it. Leave all three off and the box is
   unchanged from today.
   Tilt/scale only render at 900px+ (see min-width block below) — below
   that, boxes stack single-column with no transform, so there's never
   a neighbor for the bleed to overlap into. */
.page.issue-03 .ad {
  position: relative;
}

@media screen and (min-width: 900px) {
  .page.issue-03 .ad {
    transform: rotate(var(--box-tilt, 0deg)) scale(var(--box-scale, 1));
  }
}

/* CLICKABLE-BOX PATTERN
   Any box meant to be an actual link uses this exact recipe, so the
   tilt/scale/color combination reads as a consistent "this one does
   something" signal to the reader, distinct from boxes tilted just for
   scrapbook texture. Established on the Paris teaser — copy these three
   values onto any other box you're turning into a link:
     --box-tilt: -0.5deg;
     --box-scale: 0.97;
     --box-color: #e8d34a;
   Don't vary these per box once a box is marked clickable — the whole
   point is that they all look identical so the pattern is recognizable. */

/* Top zone — 8 boxes, all filled */
.page.issue-03 #ad-diners           { --box-color: #a8c8d8; }
.page.issue-03 #ad-gas-station-memories       { --box-color: #e8b4c0; --box-scale: 0.95; }
.page.issue-03 #ad-drive-in-deluxe   { --box-color: #a8c8a0; --box-tilt: -0.5deg; }
.page.issue-03 #ad-american-drive-in { --box-color: #b8b478; --box-tilt: 0.5deg; --box-scale: 1.03; }
.page.issue-03 #ad-googie           { --box-color: #d9a441; }
.page.issue-03 #ad-saucer-attack    { --box-color: #c4b8d8; }
.page.issue-03 #ad-american-state-fair       { --box-color: #9ec4d8; --box-scale: 0.95; }

/* Bottom zone — 10 boxes: 4 filled with locked content, 6 open */
.page.issue-03 #ad-editor-feature   { --box-color: #a8c8a0; }
.page.issue-03 #ad-paris-teaser     { --box-color: #e8d34a; --box-tilt: -0.5deg; --box-scale: 0.97; }
.page.issue-03 #ad-great-american-pinup            { --box-color: #e8b4c0; }
.page.issue-03 #ad-weather          { --box-color: #a8c8d8; --box-tilt: -0.5deg; }
.page.issue-03 #ad-witzel-mythologies      { --box-color: #d9a441; }
.page.issue-03 #ad-overground-railroad      { --box-color: #b8b478; --box-scale: 1.05; }
.page.issue-03 #ad-green-book-compendium     { --box-color: #9ec4d8; --box-scale: 1.05; }
.page.issue-03 #ad-wooden-horse   { --box-color: #c4b8d8; --box-tilt: 1deg; }

/* Open/unfilled ad box */
.ad-open {
  min-height: 90px;
}

/* Image-only ad box — the image is the entire box, no text, no
   multiply blend (that's specifically for book covers elsewhere),
   solid white background. */
.ad-image-fill {
  padding: 0;
  background-color: #ffffff;
}

.ad-image-fill img {
  width: 100%;
  height: auto;
  display: block;
}

/* Shipping/minimum-order disclaimer bar — plain, not a colored ad box */
#ad-shipnote {
  text-align: center;
  font-family: var(--font-condensed);
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 6px;
  min-height: 20px;
}

/* Ad-spot classifieds — small boxed items, text-forward */
.ad-spot {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ad-spot img {
  width: var(--img-width, 20%);
  height: auto;
  display: block;
  margin: 0 auto 8px;
  mix-blend-mode: multiply;
}

/* Image-left / image-right variants — image floats, text wraps beside it,
   matching the reference page's mix of left/right/centered illustrations.
   display: flow-root on the container properly wraps the box around the
   floated image without a separate clearfix. */
.ad-spot-img-left,
.ad-spot-img-right {
  display: flow-root;
}

.ad-spot-img-left img {
  float: left;
  width: var(--img-width, 32%);
  margin: 0 10px 6px 0;
}

.ad-spot-img-right img {
  float: right;
  width: var(--img-width, 32%);
  margin: 0 0 6px 10px;
}

/* Below 900px (phones and tablets, single-column layout), floated
   book-cover thumbnails read as too small at the default 32% — bump
   them up, and bump body copy up slightly for readability. Properly
   scoped this time: only applies below 900px, nowhere else. */
@media screen and (max-width: 899px) {
  .ad-spot-img-left img,
  .ad-spot-img-right img {
    width: 40%;
  }

  .page.issue-03 .ad p {
    font-size: 12px;
  }
}

.ad-spot h2 {
  font-family: var(--font-condensed);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0 0 2px 0;
  color: var(--ink-dark);
}

.ad-spot .ad-spot-credit {
  font-family: var(--font-condensed);
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ink-light);
  margin: 0 0 4px 0;
}

.ad-spot p {
  font-family: var(--font-condensed);
  font-size: 10px;
  line-height: 1.4;
  margin: 0;
  color: var(--ink-body);
}

/* Linked tagline — sits at the bottom of a book ad, points to further reading */
.ad-spot-link-line {
  margin-top: 6px !important;
  font-style: italic;
}

/* Title-only ad-spot — cover/typography carries it, no body copy */
.ad-spot-title-only h2 {
  font-family: var(--font-headline);
  font-size: 17px;
  font-weight: 900;
  letter-spacing: 1px;
  margin: 0 0 2px 0;
}

.ad-spot-title-only .ad-spot-subtitle {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 10px;
  line-height: 1.3;
  margin: 0 0 4px 0;
  color: var(--ink-body);
}

/* Farmer's sign — featured/spanning slot, no photo this issue */
.farmer-sign {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  padding: 20px 10px;
  box-sizing: border-box;
}

/* Inverted header bar — sits above the Farmer's illustration */
.farmer-header {
  background-color: var(--ink-dark);
  color: #ffffff !important; /* Forces the text to be white */
  font-family: var(--font-condensed);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.3;
  text-align: center;
  padding: 6px 8px;
  margin: 0;
}

/* "Know your enemy." — propaganda-poster tagline */
.farmer-tagline {
  font-family: var(--font-condensed);
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: center;
  color: var(--flag-red);
  margin: 6px 0;
}

/* Small factual caption under the diagram */
.farmer-factoid {
  font-family: var(--font-condensed);
  font-size: 9px;
  font-style: italic;
  text-align: center;
  color: var(--ink-light);
  margin: 4px 6px 0;
}

/* ============================================
   PEST-SCATTER COMPONENT — reusable across any box, any issue
   Not scoped to .page.issue-03 on purpose. This is a running gag that
   escalates over several issues (more aphids, spreading to more boxes,
   eventually a ladybug payoff), and each issue has its own layout, so
   nothing here should assume a specific grid, box, or set of dimensions.
   To add pest-scatter to a box in ANY issue: wrap its image in
   .pest-scatter-host, add a .pest-scatter div inside it (aria-hidden),
   and drop in however many .aphid SVGs you want from the aphid-path-N
   library below. Positions are percentages of the host container, so
   they always cover its full area regardless of actual size.
   Currently active: 2 aphids (Issue 3). Paths 3-6 are defined but unused
   — ready to reactivate for the next escalation without writing new CSS,
   just add the SVG markup back in the HTML.
   Not used in Issue 4 — shelved per production decision (see chat notes;
   the percentage-based positioning doesn't hold up reliably across
   phone/tablet viewport sizes).
   ============================================ */
.pest-scatter-host {
  position: relative;
  overflow: hidden;
}

.farmer-illustration {
  width: 100%;
  height: auto;
  display: block;
}

/* Animated pest scatter overlay — SVG critters scurry across the host
   image, fade out, then loop. Staggered delays keep it from looking like
   one synchronized burst. aria-hidden + pointer-events: none since this
   is pure decoration, not content. */
.pest-scatter {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.aphid {
  position: absolute;
  width: 5px;
  height: 2.5px;
}

/* Each aphid holds still at a spot, then darts almost instantly to the
   next one — the long flat stretches in each keyframe are the "sitting"
   part; the short gap between stops (e.g. 18% to 20%) is the "dart,"
   fast enough to read as a sudden skitter rather than a walk. Positions
   are percentages of the host container, so they cover the full block
   regardless of its actual rendered size. */
.aphid-1 {
  animation: aphid-path-1 7s linear infinite;
  animation-delay: 0s;
}
@keyframes aphid-path-1 {
  0%, 18%   { left: 8%;  top: 12%; opacity: 0.9; }
  20%, 38%  { left: 78%; top: 18%; opacity: 0.9; }
  40%, 58%  { left: 32%; top: 72%; opacity: 0.9; }
  60%, 78%  { left: 88%; top: 82%; opacity: 0.9; }
  80%, 98%  { left: 15%; top: 55%; opacity: 0.9; }
  99%, 100% { left: 8%;  top: 12%; opacity: 0.9; }
}

.aphid-2 {
  animation: aphid-path-2 6.5s linear infinite;
  animation-delay: 0.6s;
}
@keyframes aphid-path-2 {
  0%, 15%   { left: 90%; top: 15%; opacity: 0.9; }
  17%, 35%  { left: 22%; top: 38%; opacity: 0.9; }
  37%, 55%  { left: 62%; top: 88%; opacity: 0.9; }
  57%, 75%  { left: 12%; top: 62%; opacity: 0.9; }
  77%, 98%  { left: 85%; top: 45%; opacity: 0.9; }
  99%, 100% { left: 90%; top: 15%; opacity: 0.9; }
}

.aphid-3 {
  animation: aphid-path-3 7.5s linear infinite;
  animation-delay: 1.2s;
}
@keyframes aphid-path-3 {
  0%, 16%   { left: 50%; top: 5%;  opacity: 0.9; }
  18%, 36%  { left: 6%;  top: 48%; opacity: 0.9; }
  38%, 56%  { left: 82%; top: 60%; opacity: 0.9; }
  58%, 76%  { left: 40%; top: 92%; opacity: 0.9; }
  78%, 98%  { left: 68%; top: 25%; opacity: 0.9; }
  99%, 100% { left: 50%; top: 5%;  opacity: 0.9; }
}

.aphid-4 {
  animation: aphid-path-4 6.8s linear infinite;
  animation-delay: 1.8s;
}
@keyframes aphid-path-4 {
  0%, 17%   { left: 4%;  top: 82%; opacity: 0.9; }
  19%, 37%  { left: 58%; top: 10%; opacity: 0.9; }
  39%, 57%  { left: 92%; top: 52%; opacity: 0.9; }
  59%, 77%  { left: 28%; top: 30%; opacity: 0.9; }
  79%, 98%  { left: 45%; top: 75%; opacity: 0.9; }
  99%, 100% { left: 4%;  top: 82%; opacity: 0.9; }
}

.aphid-5 {
  animation: aphid-path-5 7.2s linear infinite;
  animation-delay: 2.4s;
}
@keyframes aphid-path-5 {
  0%, 16%   { left: 72%; top: 72%; opacity: 0.9; }
  18%, 36%  { left: 8%;  top: 20%; opacity: 0.9; }
  38%, 56%  { left: 48%; top: 48%; opacity: 0.9; }
  58%, 76%  { left: 88%; top: 12%; opacity: 0.9; }
  78%, 98%  { left: 20%; top: 88%; opacity: 0.9; }
  99%, 100% { left: 72%; top: 72%; opacity: 0.9; }
}

.aphid-6 {
  animation: aphid-path-6 6.2s linear infinite;
  animation-delay: 3s;
}
@keyframes aphid-path-6 {
  0%, 15%   { left: 25%; top: 90%; opacity: 0.9; }
  17%, 35%  { left: 80%; top: 32%; opacity: 0.9; }
  37%, 55%  { left: 15%; top: 15%; opacity: 0.9; }
  57%, 75%  { left: 62%; top: 62%; opacity: 0.9; }
  77%, 98%  { left: 40%; top: 8%;  opacity: 0.9; }
  99%, 100% { left: 25%; top: 90%; opacity: 0.9; }
}

.farmer-sign .sign-main {
  font-family: var(--font-headline);
  font-size: 30px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--ink-dark);
  margin: 0;
  line-height: 1.1;
}

.farmer-sign .sign-scrawl {
  font-family: var(--font-headline);
  font-size: 24px;
  font-weight: 900;
  text-transform: uppercase;
  color: #a11d1d;
  transform: rotate(-3deg);
  margin: 12px 0 0 0;
  letter-spacing: 1px;
}

/* Age of Bronze teaser — image-only link, no caption, no signature */
.ad-teaser {
  display: block;
  height: 100%;
  position: relative;
}

.ad-teaser img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.teaser-click-overlay {
  position: absolute;
  bottom: 10px;
  right: 10px;
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 28px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--flag-red);
  -webkit-text-stroke: 2px white;
  paint-order: stroke fill;
  transform: rotate(-4deg);
  pointer-events: none;
}

/* Issue 03 banner */
.page.issue-03 #banner-bar-1 {
  text-align: center;
  font-family: var(--font-condensed);
  font-size: 22px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 4px;
  padding: 10px 6px;
  background: linear-gradient(
    to bottom,
    var(--flag-red) 0%,
    var(--flag-red) 20%,
    var(--paper) 20%,
    var(--paper) 40%,
    var(--flag-red) 40%,
    var(--flag-red) 60%,
    var(--paper) 60%,
    var(--paper) 80%,
    var(--flag-red) 80%,
    var(--flag-red) 100%
  );
  color: var(--paper);
  text-shadow:
    -1px -1px 0 var(--ink-dark),
     1px -1px 0 var(--ink-dark),
    -1px  1px 0 var(--ink-dark),
     1px  1px 0 var(--ink-dark);
  width: 104%;
  margin: 10px -2%;
  transform: rotate(-1.5deg);
}

.page.issue-03 .issue-subheading {
  padding: 3px 14px;
  width: 104%;
  margin: 0 -2%;
  transform: rotate(1.5deg);
}

/* ============================================
   ARCHIVE PAGE
   ============================================ */
.archive-page {
  grid-template-columns: 1fr;
  max-width: 980px;
}

.archive-main {
  grid-column: 1 / -1;
  padding: 20px 30px;
  background-color: var(--paper);
}

.archive-hed {
  font-family: var(--font-condensed);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 4px;
  color: var(--ink-dark);
  border-bottom: 2px solid var(--ink-dark);
  padding-bottom: 6px;
  margin: 0 0 16px 0;
}

.archive-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-condensed);
  font-size: 12px;
}

.archive-table th {
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 9px;
  color: var(--ink-light);
  border-bottom: 1px solid var(--ink-dark);
  padding: 4px 8px 4px 0;
}

.archive-table td {
  padding: 8px 8px 8px 0;
  border-bottom: 1px solid var(--paper-dark);
  color: var(--ink-body);
  vertical-align: top;
}

.archive-table a {
  font-family: var(--font-condensed);
  font-weight: 600;
  color: var(--ink-dark);
  text-decoration: none;
  letter-spacing: 1px;
}

.archive-table a:hover {
  text-decoration: underline;
}

/* ============================================
   GENERAL RESPONSIVE BREAKPOINTS
   ============================================ */

/* --- TABLET --- */
@media screen and (max-width: 899px) {
  body { padding: 15px; }

  .page {
    grid-template-columns: 1fr 1fr;
    max-width: 100%;
  }

  [id^="ad-"] { grid-row: auto; }

  #ad-23, #ad-12, #ad-22 { grid-column: 1 / 3; }

  #ad-1, #ad-2, #ad-3, #ad-4, #ad-5,
  #ad-13, #ad-15, #ad-17, #ad-19, #ad-21 { grid-column: 1; }

  #ad-6, #ad-7, #ad-8, #ad-9, #ad-10, #ad-11,
  #ad-14, #ad-16, #ad-18, #ad-20 { grid-column: 2; }

  #ad-22 { column-count: 2; }
}

/* --- ISSUE 01 SINGLE COLUMN --- */
@media screen and (max-width: 699px) {
  .page.issue-01 { grid-template-columns: 1fr; }

  .i01-left,
  .i01-right {
    grid-column: 1;
    border-right: none;
  }
}

/* --- MOBILE --- */
@media screen and (max-width: 599px) {
  body { padding: 8px; }

  .page {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  [id^="ad-"] {
    grid-column: 1;
    grid-row: auto;
  }

  #ad-23 { font-size: 14px; letter-spacing: 1px; }
  #ad-22 { column-count: 1; }

  .ad h2            { font-size: 16px; }
  .ad p             { font-size: 12px; line-height: 1.5; }
  .ad em            { font-size: 10px; }
  .ad-feature h2    { font-size: 22px; }
  .ad-shout h2      { font-size: 18px; }
  .ad-classified h2 { font-size: 12px; }
  .ad-classified p  { font-size: 10px; }
  .ad-narrative p   { font-size: 11px; }

  .ad-character .char-body        { grid-template-columns: 1fr; }
  .ad-character .char-center      { order: -1; }
  .ad-character .char-name        { font-size: 28px; letter-spacing: 4px; }
  .ad-character .char-left p,
  .ad-character .char-right p     { font-size: 12px; text-align: center; }
  .ad-character .char-highlight   { font-size: 16px; }
  .ad-character .char-coupon p    { font-size: 11px; }
  .ad-character .char-coupon .coupon-bold { font-size: 15px; }
}

/* ============================================
   ISSUE 02 — RESPONSIVE OVERRIDES
   Must come after general breakpoints to win cascade
   ============================================ */

@media screen and (max-width: 899px) {
  .page.issue-02 {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "masthead     masthead"
      "subnav       subnav"
      "classifieds  classifieds"
      "totaste      captamerica"
      "totaste      article-body"
      "open4        weather"
      "open5        open5"
      "banner       banner"
      "aob          editor"
      "farmer       farmer";
  }

  #ad-classifieds { grid-template-columns: repeat(3, 1fr); }
  #ad-article-body { grid-template-columns: 1fr; }
  #ad-article-body .article-col-image { max-width: 180px; margin: 0 auto; }
}

@media screen and (max-width: 599px) {
  .page.issue-02 {
    grid-template-columns: 1fr;
    grid-template-areas:
      "masthead"
      "subnav"
      "classifieds"
      "totaste"
      "captamerica"
      "article-body"
      "open4"
      "weather"
      "open5"
      "banner"
      "aob"
      "editor"
      "farmer";
  }

  #ad-classifieds { grid-template-columns: 1fr; }
  #ad-article-body { grid-template-columns: 1fr; }
}

/* ============================================
   ISSUE 03 — narrow-width type adjustments only.
   Column count, row spans, and tilt/scale are now handled entirely by
   the min-width: 900px enhancement block earlier in the Issue 03
   section, so this block only needs to shrink the banner/nav type at
   true phone widths. Nothing here touches layout structure anymore.
   ============================================ */

@media screen and (max-width: 599px) {
  .farmer-sign .sign-main      { font-size: 24px; }
  .farmer-sign .sign-scrawl    { font-size: 19px; }
  .page.issue-03 #banner-bar-1 { font-size: 16px; letter-spacing: 2px; }
}

/* Safeguard: prevents any single oversized grid item (e.g. a large
   source image) from forcing the whole grid — and therefore the whole
   page — wider than the viewport. Grid items default to min-width:
   auto, which without this override lets intrinsic content size ignore
   the grid's own track sizing. */
.page.issue-03 > * {
  min-width: 0;
}

.page.issue-03 img,
.masthead-logo {
  max-width: 100%;
}

/* ============================================
   ISSUE 04 — BULLPEN BULLETINS FORMAT
   True CSS multi-column flow. Single column below
   900px (mobile-first default); 3-column flow at
   900px+. Editor's Box and Paris teaser are floated/
   break-avoided blocks INSIDE the flow, not fixed
   positions — their landing column depends on how
   much text precedes them (Farmer/Weather/Snowball
   copy length controls this; managed by hand, not by
   CSS, per production decision this issue).
   Must stay at the bottom of the file, after all
   general and Issue 01–03 breakpoints.
   ============================================ */

.page.issue-04 {
  grid-template-columns: 1fr;
  max-width: 980px;
}

/* Bulletin banner — repeated masthead strip */
.page.issue-04 #bulletin-banner {
  grid-column: 1 / -1;
  text-align: center;
  font-family: var(--font-condensed);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  background-color: var(--flag-red);
  color: var(--paper);
  padding: 6px 10px;
  border-top: 2px solid var(--ink-dark);
  border-bottom: 2px solid var(--ink-dark);
}

/* Bulletin headline — big bold line under the banner */
.page.issue-04 #bulletin-headline {
  grid-column: 1 / -1;
  font-family: var(--font-headline);
  font-size: 32px;
  font-weight: 900;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 1px;
  line-height: 1.1;
  margin: 10px 0;
  color: var(--ink-dark);
}

@media screen and (max-width: 599px) {
  .page.issue-04 #bulletin-headline {
    font-size: 22px;
  }
}

/* Bulletin body — the multi-column flow container */
.page.issue-04 .bulletin-body {
  grid-column: 1 / -1;
  column-count: 1;
  column-gap: 24px;
  padding: 10px 14px;
}

@media screen and (min-width: 900px) {
  .page.issue-04 .bulletin-body {
    column-count: 3;
    column-gap: 24px;
    column-rule: 1px solid var(--ink-light);
  }
}

/* Everything inside the flow — ITEM! blurbs, editor's box,
   Paris teaser, media recs, To Taste teaser — avoid breaking
   mid-element across a column boundary */
.page.issue-04 .bulletin-body .ad,
.page.issue-04 .bulletin-body .ad-teaser {
  break-inside: avoid;
  margin: 0 0 16px 0;
}

/* ITEM! blurbs — plain narrative style, no border, reads as
   running column text rather than a boxed ad */
.page.issue-04 .bulletin-body .ad-narrative {
  border: none;
  background: none;
  padding: 0;
  font-size: 12px;
  line-height: 1.5;
}

.page.issue-04 .bulletin-body .ad-narrative p {
  font-size: 12px;
  line-height: 1.5;
  text-align: left;
  margin: 0;
}

.page.issue-04 .bulletin-body .ad-narrative strong {
  font-family: var(--font-condensed);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Editor's Box — the only bordered/colored box in the flow,
   matches the Soapbox reference: distinct fill, clear border.
   Fill color is a placeholder — revisit once Color Dose palette
   for this issue is chosen, since theme-tied color may supersede
   this guess. */
.page.issue-04 .editors-box {
  border: 2px solid var(--ink-dark);
  background-color: #f2e4a0;
  padding: 10px 12px;
}

.page.issue-04 .editors-box h2 {
  font-family: var(--font-condensed);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: center;
  margin: 0 0 8px 0;
  color: var(--ink-dark);
}

.page.issue-04 .editors-box p {
  font-size: 11px;
  line-height: 1.5;
  margin: 0 0 8px 0;
  color: var(--ink-body);
}

.page.issue-04 .editors-box .ad-narrative-sig {
  text-align: right;
  font-style: italic;
  margin-bottom: 0;
}

/* Paris teaser inside the flow — reuse existing ad-teaser
   visual language, just sized to column width instead of
   full-bleed */
.page.issue-04 .bulletin-body .ad-teaser {
  display: block;
  position: relative;
  border: 1px solid #2b2b2b;
}

.page.issue-04 .bulletin-body .ad-teaser img {
  width: 100%;
  height: auto;
  display: block;
}

/* Media recs checklist — plain running text, sub-head only,
   no border, continues the column flow */
.page.issue-04 #ad-media-recs {
  border: none;
  background: none;
  padding: 0;
}

.page.issue-04 #ad-media-recs h2 {
  font-family: var(--font-condensed);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0 0 6px 0;
  color: var(--ink-dark);
}

.page.issue-04 #ad-media-recs p {
  font-size: 11px;
  line-height: 1.4;
  margin: 0 0 8px 0;
}

/* To Taste teaser inside the flow */
.page.issue-04 #ad-to-taste-teaser {
  padding: 0;
  border: 1px solid #2b2b2b;
  background-color: #ffffff;
}

.page.issue-04 #ad-to-taste-teaser img {
  width: 100%;
  height: auto;
  display: block;
}

/* Coupon inside the narrow bulletin column — the .coupon-inner flex
   layout (photo beside text) was built for the wide standalone
   character-ad page (640px). At bulletin-column width (~290px at
   900px+) that fixed 140px photo leaves too little room for the text,
   causing bad wraps. Stack instead, full column width. */
.page.issue-04 #ad-paris-coupon .coupon-inner {
  flex-direction: column;
}

.page.issue-04 #ad-paris-coupon .coupon-photo {
  width: 20%;
  margin: 0 0 8px auto;
}

/* Color Dose — full width, sits just above the footer */
.page.issue-04 #color-dose {
  grid-column: 1 / -1;
}

/* ============================================
   ISSUE 04 — narrow-width adjustments
   Must come after the block above.
   ============================================ */
@media screen and (max-width: 599px) {
  .page.issue-04 .bulletin-body .ad-narrative p,
  .page.issue-04 #ad-media-recs p {
    font-size: 13px;
  }
  .page.issue-04 .editors-box p {
    font-size: 12px;
  }
}

.page.issue-04 > * {
  min-width: 0;
}

.page.issue-04 img {
  max-width: 100%;
}:root {
  --ink-dark: #1a1612;
  --ink-body: #2e2a24;
  --ink-light: #4a443c;
  --paper: #f5f0e1;
  --paper-aged: #ede7d4;
  --paper-dark: #e8e3d5;
  --flag-red: #b31942;
  --font-headline: "Playfair Display", Georgia, serif;
  --font-body: "Lora", Georgia, serif;
  --font-condensed: "Oswald", Arial, sans-serif;
}

/* ============================================
   SKIP NAVIGATION LINK — accessibility
   ============================================ */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--ink-dark);
  color: var(--paper);
  padding: 8px 16px;
  z-index: 1000;
  font-family: var(--font-condensed);
  font-size: 13px;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.skip-link:focus {
  top: 0;
}

body {
  background-color: #a39177;
  color: var(--ink-body);
  font-family: var(--font-body);
  margin: 0;
  padding: 40px;
  overflow-x: hidden;
}

.page {
  display: grid;
  grid-template-columns: 2fr 2fr 1.5fr;
  grid-template-rows: auto;
  max-width: 900px;
  margin: 0 auto;
  border: 2px solid var(--ink-dark);
  box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.3);
}

.ad {
  border: 1px solid #2b2b2b;
  padding: 3px;
  font-size: 11px;
  line-height: 1.3;
  background-color: var(--box-color, var(--paper));
}

.centered {
  text-align: center;
}

.fine-print {
  font-family: "Courier New", Courier, monospace;
  font-size: 8px;
  line-height: 1.2;
  text-transform: uppercase;
  color: #444;
}

.clear {
  clear: both;
}

/* ============================================
   FULL-WIDTH SHARED ELEMENTS
   ============================================ */
.masthead,
.issue-subheading,
.color-dose,
.end-matter {
  grid-column: 1 / -1;
}

/* ============================================
   MASTHEAD
   ============================================ */
.masthead {
  text-align: center;
  background-color: var(--paper);
  color: var(--paper);
  border-bottom: 3px solid var(--ink-dark);
  padding: 0;
}

.masthead-logo {
  display: block;
  width: 100%;
  height: auto;
}

.masthead-title {
  font-family: var(--font-headline);
  font-size: 28px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 6px;
  margin: 0;
  color: var(--paper);
}

.masthead-tagline {
  display: block;
  font-family: var(--font-condensed);
  font-size: 11px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 3px;
  background-color: var(--ink-dark);
  color: var(--paper);
  text-align: right;
  padding: 5px 14px;
  margin: 0;
  box-sizing: border-box;
  width: 100%;
}

.masthead-date {
  display: block;
  font-family: var(--font-condensed);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 1px;
  color: var(--ink-body);
  text-align: left;
  padding: 5px 10px;
  margin: 0;
}

.masthead-date a {
  color: var(--ink-body);
  text-decoration: none;
}

.masthead-date a:hover {
  text-decoration: underline;
}

/* ============================================
   ISSUE SUBHEADING NAV BAR
   ============================================ */
.issue-subheading {
  background-color: var(--ink-dark);
  color: var(--paper);
  font-family: var(--font-condensed);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 4px;
  text-align: center;
  padding: 6px 14px;
  border-top: 1px solid var(--ink-light);
}

.issue-subheading a {
  color: var(--paper);
  text-decoration: none;
  letter-spacing: 4px;
}

.issue-subheading a:hover {
  text-decoration: underline;
}

.section-header {
  text-align: center;
  font-family: var(--font-condensed);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 4px;
  padding: 4px 10px;
  background-color: var(--paper);
  color: var(--ink-dark);
  border-bottom: 1px solid var(--ink-dark);
}

/* ============================================
   GRID AD POSITIONS (DESKTOP — base .page grid)
   ============================================ */
#ad-23 {
  grid-column: 1 / 4;
  grid-row: 1;
  text-align: center;
  font-family: var(--font-headline);
  font-size: 18px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 3px;
  padding: 6px;
  background-color: var(--ink-dark);
  color: var(--paper);
  border-bottom: 3px solid var(--ink-dark);
}

/* Left Column */
#ad-1 { grid-column: 1; grid-row: 2 / 5; }
#ad-2 { grid-column: 1; grid-row: 5; }
#ad-3 { grid-column: 1; grid-row: 6; }
#ad-4 { grid-column: 1; grid-row: 7; }
#ad-5 { grid-column: 1; grid-row: 8 / 11; }

/* Middle Column */
#ad-6  { grid-column: 2; grid-row: 2 / 5; }
#ad-7  { grid-column: 2; grid-row: 5 / 7; }
#ad-8  { grid-column: 2; grid-row: 7; }
#ad-9  { grid-column: 2; grid-row: 8; }
#ad-10 { text-align: center; grid-column: 2; grid-row: 9; }
#ad-11 { grid-column: 2; grid-row: 10; }

/* Right Column */
#ad-13 { grid-column: 3; grid-row: 2; }
#ad-14 { text-align: center; grid-column: 3; grid-row: 3; }
#ad-15 { grid-column: 3; grid-row: 4; }
#ad-16 { grid-column: 3; grid-row: 5; }
#ad-17 { grid-column: 3; grid-row: 6; }
#ad-18 { grid-column: 3; grid-row: 7 / 9; }
#ad-19 { grid-column: 3; grid-row: 9 / 11; }
#ad-20 { grid-column: 3; grid-row: 11 / 13; }
#ad-21 { grid-column: 3; grid-row: 13 / 15; }

/* Multi-Column Display Ads */
#ad-12 { grid-column: 1 / 3; grid-row: 11 / 14; }

#ad-22 {
  grid-column: 1 / 4;
  grid-row: 15;
  text-align: justify;
  padding: 15px;
  background-color: #e8e3d5;
  border-top: 4px double #2b2b2b;
  column-count: 3;
  column-gap: 20px;
  column-rule: 1px solid #ccc;
}

/* ============================================
   AD TYPOGRAPHY & ELEMENTS
   ============================================ */
.ad h2 {
  font-family: var(--font-headline);
  font-size: 14px;
  text-transform: uppercase;
  margin: 0 0 1px 0;
  letter-spacing: 1px;
  color: var(--ink-dark);
}

.ad p {
  font-family: var(--font-condensed);
  margin: 3px 0;
  font-size: 10px;
  line-height: 1.4;
  color: var(--ink-body);
}

.ad em {
  font-size: 9px;
  color: var(--ink-light);
}

.ad .reversed {
  background-color: var(--ink-dark);
  color: var(--paper);
  padding: 2px 4px;
  margin-left: -3px;
  margin-right: -3px;
}

.ad a {
  color: var(--ink-dark);
  text-decoration: underline;
}

.ad a:hover {
  color: var(--ink-light);
  text-decoration: none;
}

.reversed a {
  color: var(--paper);
  text-decoration: underline;
}

.reversed a:hover {
  color: var(--paper-aged);
  text-decoration: none;
}

/* ============================================
   AD FORMAT VARIATIONS
   ============================================ */

/* Classified */
.ad-classified h2 {
  font-family: var(--font-condensed);
  font-size: 8px;
  line-height: 1.3;
  margin: 1px 0;
  font-weight: 400;
}
.ad-classified p {
  font-size: 8px;
  line-height: 1.3;
  margin: 1px 0;
}
.ad-classified em {
  font-size: 7px;
}

/* Standard */
.ad-standard h2 {
  font-size: 14px;
  letter-spacing: 1px;
  margin-bottom: 4px;
}
.ad-standard p {
  font-size: 10px;
  line-height: 1.4;
  margin: 3px 0;
}

/* Editor's Snowball inset — full-width image below the text. The img
   needs its own width rule regardless of the wrapper's size, or it
   renders at full native resolution. */
.editor-inset-graphic {
  width: 100%;
  margin-top: 8px;
}

.editor-inset-graphic img {
  width: 100%;
  height: auto;
  display: block;
}

/* Feature */
.ad-feature h2 {
  font-size: 18px;
  letter-spacing: 2px;
  margin-bottom: 6px;
  line-height: 1.1;
}
.ad-feature p {
  font-size: 11px;
  line-height: 1.5;
  margin: 5px 0;
}

/* Shout */
.ad-shout h2 {
  font-family: var(--font-condensed);
  font-size: 16px;
  letter-spacing: 3px;
  text-transform: uppercase;
  line-height: 1.0;
  margin-bottom: 3px;
  font-weight: 700;
}
.ad-shout p {
  font-family: var(--font-condensed);
  font-size: 9px;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Quote */
.ad-quote {
  text-align: center;
  background-color: var(--paper-dark);
  border-width: 2px;
  padding: 12px 3px;
}
.ad-quote p {
  font-size: 11px;
  font-style: italic;
  line-height: 1.6;
}
.ad-quote strong {
  font-size: 14px;
  font-style: normal;
  letter-spacing: 1px;
}

/* Narrative */
.ad-narrative h2 {
  font-size: 16px;
  letter-spacing: 1px;
  margin-bottom: 6px;
  text-align: center;
}
.ad-narrative p {
  font-size: 9px;
  line-height: 1.5;
  margin: 4px 0;
  text-align: justify;
}
.ad-narrative em {
  font-size: 8px;
  display: block;
  margin-top: 6px;
  text-align: center;
}

/* ============================================
   GRAPHICS & IMAGES
   ============================================ */
.illustration-box {
  width: 94%;
  margin: auto;
  border: 1px dashed var(--ink-light);
  display: block;
  background-color: var(--paper-aged);
  padding: 6px;
  font-family: var(--font-condensed);
  font-size: 7px;
  color: var(--ink-light);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.illustration-box img {
  max-width: 100%;
  height: auto;
  display: block;
}

.farmer-photo {
  margin: 0 0 24px;
}

.farmer-photo img {
  display: block;
  width: 100%;
  height: auto;
}

.tilted   { transform: rotate(1deg); }
.tilted-1 { transform: rotate(-1deg); }

.float-right {
  float: right;
  width: 80%;
  margin: 0 0 10px 10px;
}

.float-left {
  float: left;
  width: 40%;
  margin: 0 10px 10px 0;
}

/* ============================================
   COUPON CTA BLOCK
   ============================================ */
.coupon-cta {
  background-color: var(--paper);
  border: 2px dashed var(--ink-dark);
  padding: 10px 14px 14px;
  font-family: var(--font-condensed);
}

.coupon-cutline {
  display: block;
  font-family: var(--font-condensed);
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--ink-light);
  margin-bottom: 8px;
  overflow: hidden;
  white-space: nowrap;
}

.coupon-cta p {
  font-family: var(--font-condensed);
  font-size: 12px;
  line-height: 1.5;
  text-transform: uppercase;
  margin: 4px 0;
  color: var(--ink-body);
}

.coupon-cta .cta-yes { font-size: 14px; font-weight: 700; }

.coupon-cta .cta-titles {
  font-family: var(--font-headline);
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 1px;
}

.coupon-cta .cta-price {
  font-family: var(--font-headline);
  font-size: 20px;
  font-weight: 900;
  color: var(--ink-dark);
}

.coupon-cta .cta-strike {
  text-decoration: line-through;
  color: var(--ink-light);
  font-weight: 400;
  font-size: 11px;
}

.coupon-cta .cta-exclusive {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  margin-top: 10px;
  text-align: center;
}

.coupon-cta .cta-link-line {
  text-align: center;
  margin-top: 6px;
}

.coupon-cta a {
  font-family: var(--font-condensed);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--ink-dark);
  text-decoration: underline;
}

.coupon-cta a:hover {
  color: var(--ink-light);
  text-decoration: none;
}

.coupon-inner {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.coupon-photo {
  flex: 0 0 auto;
  width: 140px;
  margin-top: 20px;
  border: 2px solid black;
}

.coupon-photo img {
  width: 100%;
  height: auto;
  display: block;
}

.coupon-text {
  flex: 1;
  text-align: center;
}

/* ============================================
   VISUALLY HIDDEN (screen reader only)
   ============================================ */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================
   ISSUE 01 — CHARLES ATLAS FORMAT
   ============================================ */
.page.issue-01 {
  grid-template-columns: 220px 1fr;
  max-width: 980px;
}

.i01-left {
  grid-column: 1;
  border-right: 1px solid var(--ink-dark);
}

.i01-right {
  grid-column: 2;
}

.i01-main-figure {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--ink-dark);
}

.i01-main-figure img {
  display: block;
  width: 100%;
  height: auto;
}

/* ============================================
   CHARACTER AD FORMAT
   ============================================ */
.ad-character {
  padding: 0;
  overflow: hidden;
}

.ad-character .char-header {
  background-color: var(--ink-dark);
  color: var(--paper);
  font-family: var(--font-condensed);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3px;
  text-align: center;
  padding: 4px;
}

.ad-character .char-eyebrow {
  text-align: center;
  font-family: var(--font-headline);
  font-style: italic;
  font-size: 14px;
  font-weight: 700;
  margin: 6px 4px;
}

.ad-character .char-name {
  font-family: var(--font-headline);
  font-size: 48px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 8px;
  text-align: center;
  line-height: 1;
  padding: 6px 0;
  margin: 0;
}

.ad-character .char-body {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 8px;
  padding: 8px;
}

.ad-character .char-left,
.ad-character .char-right {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  font-family: var(--font-condensed);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.2;
}

.ad-character .char-right { text-align: right; }

.ad-character .char-center img {
  max-width: 100%;
  height: auto;
  display: block;
}

.ad-character .char-yes {
  font-family: var(--font-headline);
  font-size: 24px;
  font-weight: 900;
  text-align: center;
  border: 2px solid var(--ink-dark);
  padding: 6px;
  margin: 8px 0 0;
}

.ad-character .char-highlight {
  font-family: var(--font-headline);
  font-size: 20px;
  font-weight: 900;
  text-transform: uppercase;
  background-color: var(--ink-dark);
  color: var(--paper);
  padding: 1px 4px;
  display: inline-block;
}

.ad-character .char-testimonial {
  border: 1px solid var(--ink-dark);
  padding: 4px 6px;
  font-size: 8px;
  font-style: italic;
  background-color: var(--paper-aged);
  font-family: var(--font-body);
  line-height: 1.3;
  margin: 6px 0;
}

.ad-character .char-coupon {
  border-top: 2px dashed var(--ink-dark);
  padding: 8px;
  margin: 0 8px 8px;
}

.ad-character .char-coupon p {
  font-family: var(--font-condensed);
  font-size: 11px;
  text-transform: uppercase;
  line-height: 1.4;
  margin: 3px 0;
}

.ad-character .char-coupon .coupon-bold {
  font-family: var(--font-headline);
  font-size: 15px;
  font-weight: 900;
  text-transform: uppercase;
  display: block;
  margin: 4px 0;
}

/* ============================================
   ISSUE 02 — CLASSIFIED GRID FORMAT
   ============================================ */
.page.issue-02 {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas:
    "masthead     masthead     masthead"
    "subnav       subnav       subnav"
    "classifieds  classifieds  classifieds"
    "totaste      captamerica  captamerica"
    "totaste      article-body article-body"
    "open4        weather      open5"
    "banner       banner       banner"
    "aob          editor       farmer";
  max-width: 980px;
}

.page.issue-02 .masthead           { grid-area: masthead; }
.page.issue-02 .issue-subheading   { grid-area: subnav; }
.page.issue-02 #ad-classifieds     { grid-area: classifieds; }
.page.issue-02 #ad-to-taste        { grid-area: totaste; }
.page.issue-02 #ad-captamerica     { grid-area: captamerica; }
.page.issue-02 #ad-article-body    { grid-area: article-body; }
.page.issue-02 #ad-open-4          { grid-area: open4; }
.page.issue-02 #ad-weather         { grid-area: weather; }
.page.issue-02 #ad-open-5          { grid-area: open5; }
.page.issue-02 #banner-bar-1       { grid-area: banner; }
.page.issue-02 #ad-great-american-pinup           { grid-area: aob; }
.page.issue-02 #ad-editor-feature  { grid-area: editor; }
.page.issue-02 #ad-farmer          { grid-area: farmer; }

/* Captain America article — 3-col inner grid */
#ad-article-body {
  display: grid;
  grid-template-columns: 1fr 180px 1fr;
  gap: 12px;
  align-items: start;
}

#ad-article-body .article-col-image img {
  width: 100%;
  height: auto;
  display: block;
}

#ad-article-body .article-col-left p,
#ad-article-body .article-col-right p {
  font-size: 13px;
  line-height: 1.5;
  margin: 0 0 6px 0;
}

/* Override .ad-narrative em for article body — ID beats class */
#ad-article-body em {
  font-size: inherit;
  display: inline;
  margin-top: 0;
  text-align: left;
  color: inherit;
}

/* Captain America headline */
#ad-captamerica h2 {
  font-family: var(--font-condensed);
  font-size: 22px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  background-color: var(--ink-dark);
  color: var(--paper);
  padding: 6px 10px;
  margin: 0;
  text-align: center;
}

/* Classifieds band — CSS Grid */
#ad-classifieds {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  padding: 8px 10px;
  background-color: var(--paper-aged);
  border-bottom: 2px solid var(--ink-dark);
}

#ad-classifieds .classified-entry {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#ad-classifieds .classified-entry img,
#ad-classifieds .classified-entry a img {
  width: 100%;
  height: auto;
  display: block;
}

#ad-classifieds .classified-entry p {
  font-family: var(--font-condensed);
  font-size: 8px;
  line-height: 1.4;
  margin: 0;
  color: var(--ink-body);
}

#ad-classifieds .classified-entry strong {
  font-size: 8px;
  font-family: var(--font-condensed);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ink-dark);
}

/* ============================================
   ISSUE 03 — AD-SPOT FORMAT (AUTO-FLOW)
   Mobile-first: single column, no tilt/scale by default. The
   multi-column "scrapbook" layout with box tilt/scale only turns on
   at 900px and up (see the min-width block near the end of this
   section), where neighboring boxes reliably exist to absorb the
   visual bleed. This is intentionally safe-by-default rather than
   tuned to any specific device's width, since box adjacency in the
   auto-fill grid was never guaranteed at every viewport size.
   ============================================ */
.page.issue-03 {
  grid-template-columns: 1fr;
  grid-auto-flow: dense;
  grid-auto-rows: minmax(90px, auto);
  max-width: 980px;
}

@media screen and (min-width: 900px) {
  .page.issue-03 {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  }
}

/* masthead, subnav, end-matter already get grid-column: 1 / -1 globally.
   These three also need full width but aren't in that global list. */
.page.issue-03 #banner-bar-1,
.page.issue-03 #ad-shipnote,
.page.issue-03 #ad-orderform {
  grid-column: 1 / -1;
}

/* Featured/taller boxes — double-height treatment only applies once
   the multi-column layout is active (900px+). Below that, everything
   is single column, so a span:2 would just leave dead empty space. */
@media screen and (min-width: 900px) {
  .page.issue-03 #ad-farmer,
  .page.issue-03 #ad-editor-feature,
  .page.issue-03 #ad-paris-teaser {
    grid-row: span 2;
  }
}

/* Optional hand-pasted tilt and/or oversize for individual ad boxes.
   Both unset by default — to alter a specific box, add lines to its ID
   rule below, next to its --box-color line, e.g.:
     .page.issue-03 #ad-diners {
       --box-color: #a8c8d8;
       --box-tilt: 0.5deg;
       --box-scale: 1.03;
       z-index: 2;
     }
   --box-scale takes a multiplier, not a percent: 1.03 = 103%. Since
   transform doesn't affect grid layout, a scaled-up box keeps its
   original cell for layout purposes but visually bleeds into whatever's
   next to it — that's the forced overlap. Same z-index note as before:
   add it if you want that box's overlap to sit on top of its neighbor
   rather than duck behind it. Leave all three off and the box is
   unchanged from today.
   Tilt/scale only render at 900px+ (see min-width block below) — below
   that, boxes stack single-column with no transform, so there's never
   a neighbor for the bleed to overlap into. */
.page.issue-03 .ad {
  position: relative;
}

@media screen and (min-width: 900px) {
  .page.issue-03 .ad {
    transform: rotate(var(--box-tilt, 0deg)) scale(var(--box-scale, 1));
  }
}

/* CLICKABLE-BOX PATTERN
   Any box meant to be an actual link uses this exact recipe, so the
   tilt/scale/color combination reads as a consistent "this one does
   something" signal to the reader, distinct from boxes tilted just for
   scrapbook texture. Established on the Paris teaser — copy these three
   values onto any other box you're turning into a link:
     --box-tilt: -0.5deg;
     --box-scale: 0.97;
     --box-color: #e8d34a;
   Don't vary these per box once a box is marked clickable — the whole
   point is that they all look identical so the pattern is recognizable. */

/* Top zone — 8 boxes, all filled */
.page.issue-03 #ad-diners           { --box-color: #a8c8d8; }
.page.issue-03 #ad-gas-station-memories       { --box-color: #e8b4c0; --box-scale: 0.95; }
.page.issue-03 #ad-farmer           { }
.page.issue-03 #ad-drive-in-deluxe   { --box-color: #a8c8a0; --box-tilt: -0.5deg; }
.page.issue-03 #ad-american-drive-in { --box-color: #b8b478; --box-tilt: 0.5deg; --box-scale: 1.03; }
.page.issue-03 #ad-googie           { --box-color: #d9a441; }
.page.issue-03 #ad-saucer-attack    { --box-color: #c4b8d8; }
.page.issue-03 #ad-american-state-fair       { --box-color: #9ec4d8; --box-scale: 0.95; }

/* Bottom zone — 10 boxes: 4 filled with locked content, 6 open */
.page.issue-03 #ad-editor-feature   { --box-color: #a8c8a0; }
.page.issue-03 #ad-paris-teaser     { --box-color: #e8d34a; --box-tilt: -0.5deg; --box-scale: 0.97; }
.page.issue-03 #ad-great-american-pinup            { --box-color: #e8b4c0; }
.page.issue-03 #ad-weather          { --box-color: #a8c8d8; --box-tilt: -0.5deg; }
.page.issue-03 #ad-witzel-mythologies      { --box-color: #d9a441; }
.page.issue-03 #ad-overground-railroad      { --box-color: #b8b478; --box-scale: 1.05; }
.page.issue-03 #ad-green-book-compendium     { --box-color: #9ec4d8; --box-scale: 1.05; }
.page.issue-03 #ad-to-taste-panel-1       { }
.page.issue-03 #ad-wooden-horse   { --box-color: #c4b8d8; --box-tilt: 1deg; }
.page.issue-03 #ad-to-taste-panel-2 { }

/* Open/unfilled ad box */
.ad-open {
  min-height: 90px;
}

/* Image-only ad box — the image is the entire box, no text, no
   multiply blend (that's specifically for book covers elsewhere),
   solid white background. */
.ad-image-fill {
  padding: 0;
  background-color: #ffffff;
}

.ad-image-fill img {
  width: 100%;
  height: auto;
  display: block;
}

/* Shipping/minimum-order disclaimer bar — plain, not a colored ad box */
#ad-shipnote {
  text-align: center;
  font-family: var(--font-condensed);
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 6px;
  min-height: 20px;
}

/* Ad-spot classifieds — small boxed items, text-forward */
.ad-spot {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ad-spot img {
  width: var(--img-width, 20%);
  height: auto;
  display: block;
  margin: 0 auto 8px;
  mix-blend-mode: multiply;
}

/* Image-left / image-right variants — image floats, text wraps beside it,
   matching the reference page's mix of left/right/centered illustrations.
   display: flow-root on the container properly wraps the box around the
   floated image without a separate clearfix. */
.ad-spot-img-left,
.ad-spot-img-right {
  display: flow-root;
}

.ad-spot-img-left img {
  float: left;
  width: var(--img-width, 32%);
  margin: 0 10px 6px 0;
}

.ad-spot-img-right img {
  float: right;
  width: var(--img-width, 32%);
  margin: 0 0 6px 10px;
}

/* Below 900px (phones and tablets, single-column layout), floated
   book-cover thumbnails read as too small at the default 32% — bump
   them up, and bump body copy up slightly for readability. Properly
   scoped this time: only applies below 900px, nowhere else. */
@media screen and (max-width: 899px) {
  .ad-spot-img-left img,
  .ad-spot-img-right img {
    width: 40%;
  }

  .page.issue-03 .ad p {
    font-size: 12px;
  }
}

.ad-spot h2 {
  font-family: var(--font-condensed);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0 0 2px 0;
  color: var(--ink-dark);
}

.ad-spot .ad-spot-credit {
  font-family: var(--font-condensed);
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ink-light);
  margin: 0 0 4px 0;
}

.ad-spot p {
  font-family: var(--font-condensed);
  font-size: 10px;
  line-height: 1.4;
  margin: 0;
  color: var(--ink-body);
}

/* Linked tagline — sits at the bottom of a book ad, points to further reading */
.ad-spot-link-line {
  margin-top: 6px !important;
  font-style: italic;
}

/* Title-only ad-spot — cover/typography carries it, no body copy */
.ad-spot-title-only h2 {
  font-family: var(--font-headline);
  font-size: 17px;
  font-weight: 900;
  letter-spacing: 1px;
  margin: 0 0 2px 0;
}

.ad-spot-title-only .ad-spot-subtitle {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 10px;
  line-height: 1.3;
  margin: 0 0 4px 0;
  color: var(--ink-body);
}

/* Farmer's sign — featured/spanning slot, no photo this issue */
.farmer-sign {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  padding: 20px 10px;
  box-sizing: border-box;
}

/* Inverted header bar — sits above the Farmer's illustration */
.farmer-header {
  background-color: var(--ink-dark);
  color: #ffffff !important; /* Forces the text to be white */
  font-family: var(--font-condensed);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.3;
  text-align: center;
  padding: 6px 8px;
  margin: 0;
}

/* "Know your enemy." — propaganda-poster tagline */
.farmer-tagline {
  font-family: var(--font-condensed);
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: center;
  color: var(--flag-red);
  margin: 6px 0;
}

/* Small factual caption under the diagram */
.farmer-factoid {
  font-family: var(--font-condensed);
  font-size: 9px;
  font-style: italic;
  text-align: center;
  color: var(--ink-light);
  margin: 4px 6px 0;
}

/* ============================================
   PEST-SCATTER COMPONENT — reusable across any box, any issue
   Not scoped to .page.issue-03 on purpose. This is a running gag that
   escalates over several issues (more aphids, spreading to more boxes,
   eventually a ladybug payoff), and each issue has its own layout, so
   nothing here should assume a specific grid, box, or set of dimensions.
   To add pest-scatter to a box in ANY issue: wrap its image in
   .pest-scatter-host, add a .pest-scatter div inside it (aria-hidden),
   and drop in however many .aphid SVGs you want from the aphid-path-N
   library below. Positions are percentages of the host container, so
   they always cover its full area regardless of actual size.
   Currently active: 2 aphids (Issue 3). Paths 3-6 are defined but unused
   — ready to reactivate for the next escalation without writing new CSS,
   just add the SVG markup back in the HTML.
   ============================================ */
.pest-scatter-host {
  position: relative;
  overflow: hidden;
}

.farmer-illustration {
  width: 100%;
  height: auto;
  display: block;
}

/* Animated pest scatter overlay — SVG critters scurry across the host
   image, fade out, then loop. Staggered delays keep it from looking like
   one synchronized burst. aria-hidden + pointer-events: none since this
   is pure decoration, not content. */
.pest-scatter {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.aphid {
  position: absolute;
  width: 5px;
  height: 2.5px;
}

/* Each aphid holds still at a spot, then darts almost instantly to the
   next one — the long flat stretches in each keyframe are the "sitting"
   part; the short gap between stops (e.g. 18% to 20%) is the "dart,"
   fast enough to read as a sudden skitter rather than a walk. Positions
   are percentages of the host container, so they cover the full block
   regardless of its actual rendered size. */
.aphid-1 {
  animation: aphid-path-1 7s linear infinite;
  animation-delay: 0s;
}
@keyframes aphid-path-1 {
  0%, 18%   { left: 8%;  top: 12%; opacity: 0.9; }
  20%, 38%  { left: 78%; top: 18%; opacity: 0.9; }
  40%, 58%  { left: 32%; top: 72%; opacity: 0.9; }
  60%, 78%  { left: 88%; top: 82%; opacity: 0.9; }
  80%, 98%  { left: 15%; top: 55%; opacity: 0.9; }
  99%, 100% { left: 8%;  top: 12%; opacity: 0.9; }
}

.aphid-2 {
  animation: aphid-path-2 6.5s linear infinite;
  animation-delay: 0.6s;
}
@keyframes aphid-path-2 {
  0%, 15%   { left: 90%; top: 15%; opacity: 0.9; }
  17%, 35%  { left: 22%; top: 38%; opacity: 0.9; }
  37%, 55%  { left: 62%; top: 88%; opacity: 0.9; }
  57%, 75%  { left: 12%; top: 62%; opacity: 0.9; }
  77%, 98%  { left: 85%; top: 45%; opacity: 0.9; }
  99%, 100% { left: 90%; top: 15%; opacity: 0.9; }
}

.aphid-3 {
  animation: aphid-path-3 7.5s linear infinite;
  animation-delay: 1.2s;
}
@keyframes aphid-path-3 {
  0%, 16%   { left: 50%; top: 5%;  opacity: 0.9; }
  18%, 36%  { left: 6%;  top: 48%; opacity: 0.9; }
  38%, 56%  { left: 82%; top: 60%; opacity: 0.9; }
  58%, 76%  { left: 40%; top: 92%; opacity: 0.9; }
  78%, 98%  { left: 68%; top: 25%; opacity: 0.9; }
  99%, 100% { left: 50%; top: 5%;  opacity: 0.9; }
}

.aphid-4 {
  animation: aphid-path-4 6.8s linear infinite;
  animation-delay: 1.8s;
}
@keyframes aphid-path-4 {
  0%, 17%   { left: 4%;  top: 82%; opacity: 0.9; }
  19%, 37%  { left: 58%; top: 10%; opacity: 0.9; }
  39%, 57%  { left: 92%; top: 52%; opacity: 0.9; }
  59%, 77%  { left: 28%; top: 30%; opacity: 0.9; }
  79%, 98%  { left: 45%; top: 75%; opacity: 0.9; }
  99%, 100% { left: 4%;  top: 82%; opacity: 0.9; }
}

.aphid-5 {
  animation: aphid-path-5 7.2s linear infinite;
  animation-delay: 2.4s;
}
@keyframes aphid-path-5 {
  0%, 16%   { left: 72%; top: 72%; opacity: 0.9; }
  18%, 36%  { left: 8%;  top: 20%; opacity: 0.9; }
  38%, 56%  { left: 48%; top: 48%; opacity: 0.9; }
  58%, 76%  { left: 88%; top: 12%; opacity: 0.9; }
  78%, 98%  { left: 20%; top: 88%; opacity: 0.9; }
  99%, 100% { left: 72%; top: 72%; opacity: 0.9; }
}

.aphid-6 {
  animation: aphid-path-6 6.2s linear infinite;
  animation-delay: 3s;
}
@keyframes aphid-path-6 {
  0%, 15%   { left: 25%; top: 90%; opacity: 0.9; }
  17%, 35%  { left: 80%; top: 32%; opacity: 0.9; }
  37%, 55%  { left: 15%; top: 15%; opacity: 0.9; }
  57%, 75%  { left: 62%; top: 62%; opacity: 0.9; }
  77%, 98%  { left: 40%; top: 8%;  opacity: 0.9; }
  99%, 100% { left: 25%; top: 90%; opacity: 0.9; }
}

.farmer-sign .sign-main {
  font-family: var(--font-headline);
  font-size: 30px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--ink-dark);
  margin: 0;
  line-height: 1.1;
}

.farmer-sign .sign-scrawl {
  font-family: var(--font-headline);
  font-size: 24px;
  font-weight: 900;
  text-transform: uppercase;
  color: #a11d1d;
  transform: rotate(-3deg);
  margin: 12px 0 0 0;
  letter-spacing: 1px;
}

/* Age of Bronze teaser — image-only link, no caption, no signature */
.ad-teaser {
  display: block;
  height: 100%;
  position: relative;
}

.ad-teaser img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.teaser-click-overlay {
  position: absolute;
  bottom: 10px;
  right: 10px;
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 28px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--flag-red);
  -webkit-text-stroke: 2px white;
  paint-order: stroke fill;
  transform: rotate(-4deg);
  pointer-events: none;
}

/* Issue 03 banner */
.page.issue-03 #banner-bar-1 {
  text-align: center;
  font-family: var(--font-condensed);
  font-size: 22px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 4px;
  padding: 10px 6px;
  background: linear-gradient(
    to bottom,
    var(--flag-red) 0%,
    var(--flag-red) 20%,
    var(--paper) 20%,
    var(--paper) 40%,
    var(--flag-red) 40%,
    var(--flag-red) 60%,
    var(--paper) 60%,
    var(--paper) 80%,
    var(--flag-red) 80%,
    var(--flag-red) 100%
  );
  color: var(--paper);
  text-shadow:
    -1px -1px 0 var(--ink-dark),
     1px -1px 0 var(--ink-dark),
    -1px  1px 0 var(--ink-dark),
     1px  1px 0 var(--ink-dark);
  width: 104%;
  margin: 10px -2%;
  transform: rotate(-1.5deg);
}

.page.issue-03 .issue-subheading {
  padding: 3px 14px;
  width: 104%;
  margin: 0 -2%;
  transform: rotate(1.5deg);
}

/* ============================================
   ARCHIVE PAGE
   ============================================ */
.archive-page {
  grid-template-columns: 1fr;
  max-width: 980px;
}

.archive-main {
  grid-column: 1 / -1;
  padding: 20px 30px;
  background-color: var(--paper);
}

.archive-hed {
  font-family: var(--font-condensed);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 4px;
  color: var(--ink-dark);
  border-bottom: 2px solid var(--ink-dark);
  padding-bottom: 6px;
  margin: 0 0 16px 0;
}

.archive-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-condensed);
  font-size: 12px;
}

.archive-table th {
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 9px;
  color: var(--ink-light);
  border-bottom: 1px solid var(--ink-dark);
  padding: 4px 8px 4px 0;
}

.archive-table td {
  padding: 8px 8px 8px 0;
  border-bottom: 1px solid var(--paper-dark);
  color: var(--ink-body);
  vertical-align: top;
}

.archive-table a {
  font-family: var(--font-condensed);
  font-weight: 600;
  color: var(--ink-dark);
  text-decoration: none;
  letter-spacing: 1px;
}

.archive-table a:hover {
  text-decoration: underline;
}

/* ============================================
   GENERAL RESPONSIVE BREAKPOINTS
   ============================================ */

/* --- TABLET --- */
@media screen and (max-width: 899px) {
  body { padding: 15px; }

  .page {
    grid-template-columns: 1fr 1fr;
    max-width: 100%;
  }

  [id^="ad-"] { grid-row: auto; }

  #ad-23, #ad-12, #ad-22 { grid-column: 1 / 3; }

  #ad-1, #ad-2, #ad-3, #ad-4, #ad-5,
  #ad-13, #ad-15, #ad-17, #ad-19, #ad-21 { grid-column: 1; }

  #ad-6, #ad-7, #ad-8, #ad-9, #ad-10, #ad-11,
  #ad-14, #ad-16, #ad-18, #ad-20 { grid-column: 2; }

  #ad-22 { column-count: 2; }
}

/* --- ISSUE 01 SINGLE COLUMN --- */
@media screen and (max-width: 699px) {
  .page.issue-01 { grid-template-columns: 1fr; }

  .i01-left,
  .i01-right {
    grid-column: 1;
    border-right: none;
  }
}

/* --- MOBILE --- */
@media screen and (max-width: 599px) {
  body { padding: 8px; }

  .page {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  [id^="ad-"] {
    grid-column: 1;
    grid-row: auto;
  }

  #ad-23 { font-size: 14px; letter-spacing: 1px; }
  #ad-22 { column-count: 1; }

  .ad h2            { font-size: 16px; }
  .ad p             { font-size: 12px; line-height: 1.5; }
  .ad em            { font-size: 10px; }
  .ad-feature h2    { font-size: 22px; }
  .ad-shout h2      { font-size: 18px; }
  .ad-classified h2 { font-size: 12px; }
  .ad-classified p  { font-size: 10px; }
  .ad-narrative p   { font-size: 11px; }

  .ad-character .char-body        { grid-template-columns: 1fr; }
  .ad-character .char-center      { order: -1; }
  .ad-character .char-name        { font-size: 28px; letter-spacing: 4px; }
  .ad-character .char-left p,
  .ad-character .char-right p     { font-size: 12px; text-align: center; }
  .ad-character .char-highlight   { font-size: 16px; }
  .ad-character .char-coupon p    { font-size: 11px; }
  .ad-character .char-coupon .coupon-bold { font-size: 15px; }
}

/* ============================================
   ISSUE 02 — RESPONSIVE OVERRIDES
   Must come after general breakpoints to win cascade
   ============================================ */

@media screen and (max-width: 899px) {
  .page.issue-02 {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "masthead     masthead"
      "subnav       subnav"
      "classifieds  classifieds"
      "totaste      captamerica"
      "totaste      article-body"
      "open4        weather"
      "open5        open5"
      "banner       banner"
      "aob          editor"
      "farmer       farmer";
  }

  #ad-classifieds { grid-template-columns: repeat(3, 1fr); }
  #ad-article-body { grid-template-columns: 1fr; }
  #ad-article-body .article-col-image { max-width: 180px; margin: 0 auto; }
}

@media screen and (max-width: 599px) {
  .page.issue-02 {
    grid-template-columns: 1fr;
    grid-template-areas:
      "masthead"
      "subnav"
      "classifieds"
      "totaste"
      "captamerica"
      "article-body"
      "open4"
      "weather"
      "open5"
      "banner"
      "aob"
      "editor"
      "farmer";
  }

  #ad-classifieds { grid-template-columns: 1fr; }
  #ad-article-body { grid-template-columns: 1fr; }
}

/* ============================================
   ISSUE 03 — narrow-width type adjustments only.
   Column count, row spans, and tilt/scale are now handled entirely by
   the min-width: 900px enhancement block earlier in the Issue 03
   section, so this block only needs to shrink the banner/nav type at
   true phone widths. Nothing here touches layout structure anymore.
   ============================================ */

@media screen and (max-width: 599px) {
  .farmer-sign .sign-main      { font-size: 24px; }
  .farmer-sign .sign-scrawl    { font-size: 19px; }
  .page.issue-03 #banner-bar-1 { font-size: 16px; letter-spacing: 2px; }
}

/* Safeguard: prevents any single oversized grid item (e.g. a large
   source image) from forcing the whole grid — and therefore the whole
   page — wider than the viewport. Grid items default to min-width:
   auto, which without this override lets intrinsic content size ignore
   the grid's own track sizing. */
.page.issue-03 > * {
  min-width: 0;
}

.page.issue-03 img,
.masthead-logo {
  max-width: 100%;
}