/* ─────────────────────────────────────────────────────────────────────
   North Berkshire — broadsheet front page.

   Deliberately plain: a nameplate, hairline rules, a lead story with a
   deck, and short columns underneath. Berkshire hill country reads
   colder and greyer than the Maine coast, so the palette is ink on
   newsprint with a single deep green pulled from the county's own
   signage, rather than anything decorative.

   Loaded only on the Newspaper Front template.
   ───────────────────────────────────────────────────────────────────── */

.nb-paper {
  --nb-ink:    #1b1d1c;
  --nb-soft:   #55605c;
  --nb-news:   #f6f5f1;   /* newsprint, warm grey */
  --nb-rule:   #c8c9c2;
  --nb-green:  #1f4534;   /* Berkshire county green */
  --nb-serif:  "Iowan Old Style", "Times New Roman", Times, Georgia, serif;
  --nb-sans:   "Helvetica Neue", Helvetica, Arial, sans-serif;

  max-width: 1180px;
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
  background: var(--nb-news);
  color: var(--nb-ink);
  font-family: var(--nb-serif);
}

/* ── Masthead ─────────────────────────────────────────────────────── */

.nb-masthead { text-align: center; }

.nb-masthead-rule { background: var(--nb-ink); }
.nb-rule-top    { height: 4px; }
.nb-rule-bottom { height: 2px; margin-top: 1rem; }

.nb-ears {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--nb-sans);
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--nb-soft);
  padding: .5rem .1rem 0;
}
.nb-ear-right { text-align: right; }

.nb-nameplate {
  font-family: var(--nb-serif);
  font-weight: 700;
  font-size: clamp(3rem, 9vw, 6.4rem);
  line-height: .95;
  letter-spacing: -.02em;
  margin: .25em 0 .1em;
  color: var(--nb-ink);
}

.nb-subplate {
  display: flex; align-items: center; justify-content: center;
  gap: 1rem; margin-bottom: .3rem;
}
.nb-hair { flex: 1; max-width: 220px; height: 1px; background: var(--nb-rule); }
.nb-state {
  font-family: var(--nb-sans);
  font-size: .8rem; letter-spacing: .38em; text-transform: uppercase;
  color: var(--nb-green); font-weight: 600;
}

/* ── Lead story ───────────────────────────────────────────────────── */

.nb-lead {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 2.4rem;
  padding: 2rem 0 1.6rem;
}
.nb-kicker {
  font-family: var(--nb-sans);
  font-size: .7rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--nb-green); font-weight: 700; margin-bottom: .7rem;
}
.nb-lead-head {
  font-size: clamp(1.9rem, 3.6vw, 3.1rem);
  line-height: 1.08; margin: 0 0 .5rem; font-weight: 700;
  text-wrap: balance;
}
.nb-lead-head a { color: var(--nb-ink); text-decoration: none; }
.nb-lead-head a:hover { color: var(--nb-green); }
.nb-byline {
  font-family: var(--nb-sans); font-size: .74rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--nb-soft); margin: 0 0 1rem;
}
.nb-lead-body p {
  font-size: 1.06rem; line-height: 1.62; margin: 0 0 .9em; color: var(--nb-ink);
}
/* A drop cap is the cheapest signal that this is a newspaper and not a blog. */
.nb-lead-body p:first-of-type::first-letter {
  float: left; font-size: 3.6em; line-height: .82;
  padding: .06em .1em 0 0; font-weight: 700;
}
.nb-more {
  font-family: var(--nb-sans); font-size: .78rem; letter-spacing: .06em;
  color: var(--nb-green); text-decoration: none; font-weight: 600;
}
.nb-more:hover { text-decoration: underline; }

.nb-lead-art { margin: 0; }
.nb-lead-art img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--nb-rule);
  filter: grayscale(.18) contrast(1.04);
}

/* ── Rules and lower columns ──────────────────────────────────────── */

.nb-rule { height: 1px; background: var(--nb-rule); margin: .4rem 0 0; }

.nb-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0;
  padding-top: 1.6rem;
}
/* Column gutters as hairlines, the way a broadsheet separates stories. */
.nb-story { padding: 0 1.5rem; border-left: 1px solid var(--nb-rule); }
.nb-story:first-child { border-left: 0; padding-left: 0; }
.nb-story:last-child { padding-right: 0; }

.nb-story-head {
  font-size: 1.2rem; line-height: 1.22; margin: 0 0 .55rem; font-weight: 700;
}
.nb-story-head a { color: var(--nb-ink); text-decoration: none; }
.nb-story-head a:hover { color: var(--nb-green); }
.nb-story-body {
  font-size: .96rem; line-height: 1.55; color: var(--nb-soft); margin: 0;
}

.nb-foot {
  margin-top: 1.6rem; padding-top: 1rem;
  font-family: var(--nb-sans); font-size: .78rem; color: var(--nb-soft);
  text-align: center;
}
.nb-foot p { margin: 0; }

@media (max-width: 820px) {
  .nb-lead { grid-template-columns: 1fr; gap: 1.4rem; }
  .nb-lead-art { order: -1; }
  .nb-story { border-left: 0; padding: 0 0 1.4rem; }
}