:root {
  --ink: #102b42;
  --ink-soft: #405b6f;
  --paper: #f7f0df;
  --paper-deep: #ece0c7;
  --rust: #b6472f;
  --rust-deep: #873421;
  --gold: #d99a43;
  --field: #5c7350;
  --line: rgba(16, 43, 66, 0.27);
  --shadow: 0 14px 36px rgba(16, 43, 66, 0.12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  min-width: 320px;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 8% 2%, rgba(217, 154, 67, 0.14), transparent 27rem),
    linear-gradient(115deg, rgba(16, 43, 66, 0.028) 1px, transparent 1px),
    var(--paper);
  background-size: auto, 20px 20px, auto;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 16px;
  line-height: 1.48;
}

button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
button { font: inherit; }
h1, h2, h3, p { overflow-wrap: break-word; }

.paper-shell {
  width: min(100%, 1420px);
  margin: 0 auto;
  padding: 0 28px 48px;
}

.utility-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 42px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.utility-line p { margin: 0; }
.utility-line a { text-underline-offset: 3px; }

.masthead {
  padding: 24px 0 16px;
  border-bottom: 4px double var(--ink);
  text-align: center;
}

.masthead-kicker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 0 5px;
  color: var(--rust);
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(0.62rem, 1.6vw, 0.76rem);
  font-weight: 900;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.masthead-kicker::before,
.masthead-kicker::after {
  width: 30px;
  height: 1px;
  content: '';
  background: currentColor;
}

.masthead-title {
  display: inline-block;
  color: var(--ink);
  font-size: clamp(3rem, 9.3vw, 7.2rem);
  font-weight: 900;
  letter-spacing: -0.08em;
  line-height: 0.79;
  text-decoration: none;
  text-transform: uppercase;
}

.masthead-title:hover, .masthead-title:focus-visible { color: var(--rust); }

.masthead-subtitle {
  max-width: 780px;
  margin: 13px auto 0;
  color: var(--ink-soft);
  font-size: clamp(0.95rem, 1.9vw, 1.12rem);
  font-style: italic;
}

.section-nav {
  display: flex;
  justify-content: center;
  gap: clamp(13px, 3.8vw, 42px);
  overflow-x: auto;
  padding: 12px 1px;
  border-bottom: 1px solid var(--line);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.section-nav a { text-decoration: none; }
.section-nav a:hover,
.section-nav a:focus-visible,
.section-nav a[aria-current='page'] {
  color: var(--rust);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.breaking-line {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 15px;
  align-items: center;
  margin: 20px 0 28px;
  padding: 9px 13px;
  color: var(--paper);
  background: var(--ink);
  box-shadow: 4px 4px 0 var(--rust);
}

.breaking-line strong {
  color: var(--gold);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.breaking-line span { font-size: 0.98rem; font-style: italic; }

.eyebrow {
  margin: 0 0 9px;
  color: var(--rust);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.front-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.32fr) minmax(290px, 0.82fr);
  gap: 30px;
  align-items: stretch;
  padding-bottom: 28px;
  border-bottom: 4px double var(--ink);
}

.feature-story {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-right: 28px;
  border-right: 1px solid var(--line);
}

.feature-story h1,
.feature-story h2 {
  max-width: 840px;
  margin: 0;
  font-size: clamp(2.5rem, 5.2vw, 5.15rem);
  letter-spacing: -0.068em;
  line-height: 0.9;
}

.deck {
  max-width: 760px;
  margin: 17px 0 0;
  color: var(--ink-soft);
  font-size: clamp(1.08rem, 1.9vw, 1.38rem);
  line-height: 1.37;
}

.byline {
  margin: 17px 0 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.lead-report {
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
}

.article-body {
  column-count: 2;
  column-gap: 36px;
  column-rule: 1px solid var(--line);
  font-size: 1.0625rem;
  line-height: 1.65;
}

.article-body p { margin: 0 0 1em; }
.article-body p:first-child::first-letter { float: left; padding: 0.08em 0.1em 0 0; font-size: 3.5em; line-height: 0.8; font-weight: 900; color: var(--rust); }

.masthead-art {
  position: relative;
  min-height: 390px;
  margin: 0;
  overflow: hidden;
  background: var(--ink);
  box-shadow: var(--shadow);
}

.masthead-art img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 390px;
  object-fit: cover;
  object-position: 50% 25%;
}

.masthead-art figcaption {
  position: absolute;
  bottom: 20px;
  left: 20px;
  max-width: 280px;
  margin: 0;
  padding: 11px 13px;
  color: var(--ink);
  background: var(--paper);
  box-shadow: 4px 4px 0 var(--rust);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.83rem;
  font-weight: 700;
  line-height: 1.35;
}

.story-rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  padding: 29px 0;
  border-bottom: 1px solid var(--line);
}

.story-card { min-width: 0; }
.story-card + .story-card { padding-left: 22px; border-left: 1px solid var(--line); }
.story-card h2, .story-card h3 { margin: 0; font-size: clamp(1.23rem, 2.2vw, 1.68rem); line-height: 1.04; }
.story-card p { margin: 10px 0 0; color: var(--ink-soft); font-size: 1rem; }

.story-link {
  display: inline-block;
  margin-top: 13px;
  color: var(--rust);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.71rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-decoration: none;
  text-transform: uppercase;
}

.story-link:hover, .story-link:focus-visible { color: var(--rust-deep); text-decoration: underline; text-underline-offset: 4px; }

.page-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(245px, 0.8fr);
  gap: 30px;
  align-items: end;
  padding: 28px 0;
  border-bottom: 4px double var(--ink);
}

.page-heading h1 {
  margin: 0;
  font-size: clamp(3rem, 7vw, 6rem);
  letter-spacing: -0.076em;
  line-height: 0.86;
}

.page-heading .deck { margin-bottom: 2px; }

.newspaper-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(280px, 0.72fr);
  gap: 30px;
  padding-top: 29px;
}

.column-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 15px;
  margin: 0 0 12px;
  padding-bottom: 9px;
  border-bottom: 3px solid var(--ink);
}

.column-heading h2 { margin: 0; font-size: clamp(1.52rem, 3vw, 2.25rem); line-height: 1; }
.column-heading span { color: var(--rust); font-family: Arial, Helvetica, sans-serif; font-size: 0.66rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; }

.story-stack { margin: 0; padding: 0; list-style: none; }
.story-stack li { display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: 17px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.story-stack time { color: var(--rust); font-family: Arial, Helvetica, sans-serif; font-size: 0.68rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }
.story-stack strong { display: block; font-size: 1.22rem; line-height: 1.13; }
.story-stack p { margin: 5px 0 0; color: var(--ink-soft); font-size: 0.99rem; }
.story-stack h3 { margin: 0; font-size: 1.35rem; line-height: 1.15; }
.story-stack .feature-dispatch h3 { font-size: clamp(1.55rem, 2.8vw, 2rem); letter-spacing: -0.025em; }
.story-stack .feature-dispatch p { font-size: 1.0625rem; line-height: 1.65; margin-top: 0.9em; }
.story-stack .story-byline { color: var(--rust); font-family: Arial, Helvetica, sans-serif; font-size: 0.78rem; letter-spacing: 0.07em; font-weight: 700; text-transform: uppercase; }
.story-stack .feature-dispatch .story-byline { font-size: 0.78rem; line-height: 1.4; margin-top: 0.65em; }

.story-photo { margin: 18px 0 22px; }
.story-photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.story-photo figcaption { padding: 9px 0; border-bottom: 1px solid var(--line); color: var(--ink-soft); font-family: Arial, Helvetica, sans-serif; font-size: 0.875rem; line-height: 1.5; }

.desk-column {
  margin-top: 30px;
  padding: 22px 0;
  border-top: 4px double var(--ink);
  border-bottom: 1px solid var(--line);
}

.desk-column h2 { margin: 0; font-size: 1.85rem; line-height: 1.1; letter-spacing: -0.025em; }
.desk-column p { margin: 0.8em 0 0; font-size: 1.0625rem; line-height: 1.65; }
.desk-column .eyebrow { margin: 0 0 9px; font-size: 0.78rem; line-height: 1.4; }
.classified-column { max-width: 76ch; margin-top: 32px; }
.classified-list p { line-height: 1.6; }

.ad {
  position: relative;
  overflow: hidden;
  padding: 24px;
  border: 2px solid var(--ink);
  background: var(--paper-deep);
  box-shadow: 6px 6px 0 var(--gold);
}

.ad + .ad { margin-top: 28px; }
.ad .ad-category { margin: 0 0 7px; color: var(--rust); font-family: Arial, Helvetica, sans-serif; font-size: 0.67rem; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; }
.ad h2, .ad h3 { max-width: 275px; margin: 0; font-size: clamp(1.9rem, 4vw, 3.1rem); letter-spacing: -0.055em; line-height: 0.92; }
.ad p { max-width: 325px; margin: 13px 0 0; color: var(--ink-soft); font-size: 1.04rem; }
.ad .ad-tag { display: inline-block; margin-top: 18px; padding-top: 8px; border-top: 1px solid var(--line); font-family: Arial, Helvetica, sans-serif; font-size: 0.7rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }

.ad.navy { color: var(--paper); background: var(--ink); box-shadow-color: var(--rust); }
.ad.navy::before, .ad.navy .ad-category { color: var(--gold); }
.ad.navy p { color: #d9e2e6; }
.ad.navy .ad-tag { border-color: rgba(247, 240, 223, 0.4); }
.ad.rust { color: var(--paper); background: var(--rust); box-shadow-color: var(--ink); }
.ad.rust::before, .ad.rust .ad-category { color: #ffdaa6; }
.ad.rust p { color: #ffebd2; }
.ad.rust .ad-tag { border-color: rgba(255, 235, 210, 0.5); }

.retro-ad {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 248px;
  padding: 0;
  isolation: isolate;
}

.retro-ad .ad-art {
  width: 100%;
  min-height: 188px;
  aspect-ratio: 5 / 4;
  background: var(--ad-art) 50% 53% / cover no-repeat;
  border-bottom: 2px solid var(--ink);
}

.retro-ad .ad-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 23px 22px 20px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.1), transparent 46%),
    var(--paper-deep);
}

.retro-ad h2,
.retro-ad h3 {
  max-width: none;
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  font-size: clamp(1.85rem, 3.3vw, 2.85rem);
  font-weight: 900;
  letter-spacing: 0.015em;
  line-height: 0.86;
  text-transform: uppercase;
}

.retro-ad .ad-category {
  margin-bottom: 10px;
  letter-spacing: 0.14em;
}

.retro-ad p { max-width: none; }
.retro-ad .ad-tag { margin-top: auto; }

.retro-ad.navy .ad-copy { color: var(--paper); background: var(--ink); }
.retro-ad.navy .ad-copy p { color: #d9e2e6; }
.retro-ad.rust .ad-copy { color: var(--paper); background: var(--rust); }
.retro-ad.rust .ad-copy p { color: #ffebd2; }
.retro-ad.navy .ad-art { border-bottom-color: var(--gold); }
.retro-ad.rust .ad-art { border-bottom-color: #ffdaa6; }

.ad--hinge .ad-art { --ad-art: url('../images/ads/hinge-hose-hope-photo.jpg'); }
.ad--one-more .ad-art { --ad-art: url('../images/ads/one-more-thing-bakehouse-photo.jpg'); }
.ad--two-scoops .ad-art { --ad-art: url('../images/ads/two-scoops-then-home-photo.jpg'); }
.ad--crumb .ad-art { --ad-art: url('../images/ads/crumb-compass-cafe-photo.jpg'); }
.ad--backseat .ad-art { --ad-art: url('../images/ads/backseat-bookmark-shop-photo.jpg'); }
.ad--puddle .ad-art { --ad-art: url('../images/ads/puddle-polish-photo.jpg'); }
.ad--reroute .ad-art { --ad-art: url('../images/ads/reroute-roller-arcade-photo.jpg'); }
.ad--paws .ad-art { --ad-art: url('../images/ads/porchlight-paws-photo.jpg'); }
.ad--second-lap .ad-art { --ad-art: url('../images/ads/second-lap-threads-photo.jpg'); }
.ad--squeak .ad-art { --ad-art: url('../images/ads/squeak-spoke-fixery-photo.jpg'); }
.ad--pavilion .ad-art { --ad-art: url('../images/ads/pavilion-picnic-supply-photo.jpg'); }
.ad--schedule .ad-art { --ad-art: url('../images/ads/porchlight-schedule-photo.jpg'); }

.mini-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin-top: 28px;
}

.mini-grid .ad { min-height: 250px; }

.notice-board {
  margin-top: 28px;
  padding: 21px;
  border: 1px solid var(--ink);
  background: rgba(247, 240, 223, 0.78);
}

.notice-board h2 { margin: 0; font-size: 1.45rem; }
.notice-board p { margin: 5px 0 0; color: var(--ink-soft); }

.classified-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 23px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.classified-list li { padding: 16px 0; border-bottom: 1px solid var(--line); }
.classified-list h2, .classified-list h3 { margin: 0; font-size: 1.14rem; line-height: 1.1; }
.classified-list p { margin: 6px 0 0; color: var(--ink-soft); font-size: 0.98rem; }
.classified-list .classified-label { margin: 0 0 5px; color: var(--rust); font-family: Arial, Helvetica, sans-serif; font-size: 0.64rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; }

.community-box {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: start;
  margin-top: 28px;
  padding: 18px 20px;
  border: 1px solid var(--ink);
  background: rgba(247, 240, 223, 0.7);
}

.community-box .star { color: var(--rust); font-size: 2rem; line-height: 1; }
.community-box h2 { margin: 0; font-size: 1.3rem; }
.community-box p { margin: 4px 0 0; color: var(--ink-soft); }

footer {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-top: 30px;
  padding-top: 18px;
  border-top: 4px double var(--ink);
  color: var(--ink-soft);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.74rem;
  line-height: 1.48;
}

footer p { max-width: 760px; margin: 0; }
footer strong { color: var(--ink); }

@media (max-width: 1060px) and (min-width: 821px) {
  .story-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .story-card:nth-child(3) { padding-left: 0; border-left: 0; }
  .story-card:nth-child(n + 3) { padding-top: 18px; border-top: 1px solid var(--line); }
}

@media (max-width: 820px) {
  .paper-shell { padding: 0 16px 34px; }
  .utility-line { align-items: flex-start; flex-direction: column; gap: 4px; padding: 9px 0; }
  .masthead { padding-top: 18px; }
  .section-nav { justify-content: flex-start; }
  .breaking-line { grid-template-columns: 1fr; gap: 3px; }
  .front-grid, .page-heading, .newspaper-grid { grid-template-columns: 1fr; gap: 24px; }
  .feature-story { padding-right: 0; border-right: 0; }
  .article-body { column-count: 1; }
  .story-stack li { grid-template-columns: 1fr; gap: 7px; }
  .masthead-art, .masthead-art img { min-height: 295px; }
  .story-rail { grid-template-columns: 1fr; gap: 18px; }
  .story-card + .story-card { padding-top: 18px; padding-left: 0; border-top: 1px solid var(--line); border-left: 0; }
  .page-heading { padding: 24px 0; }
  .mini-grid, .classified-list { grid-template-columns: 1fr; }
  .retro-ad { grid-template-columns: 1fr; }
  .retro-ad .ad-art { min-height: 188px; border-right: 0; border-bottom: 2px solid var(--ink); }
  .retro-ad.navy .ad-art { border-bottom-color: var(--gold); }
  .retro-ad.rust .ad-art { border-bottom-color: #ffdaa6; }
  footer { flex-direction: column; gap: 8px; }
}

@media print {
  body { background: white; }
  .paper-shell { width: 100%; max-width: none; padding: 0; }
  .section-nav { justify-content: flex-start; }
  .ad { box-shadow: none; }
}