/* Greenfield Bridging — News index and article pages.
   Loaded after css/site.css. Radius 0, no shadows, no icons, body copy 300.

   Article pages live in /news/, one level down, so their asset paths carry ../ —
   the generator writes those, not this sheet.

   The card grid here uses a real gap rather than the site's gap:1px-over-a-rule idiom.
   That idiom needs every row full, and a news list is whatever length it is — a
   part-filled last row would show the rule colour as grey blocks. Cards carry their
   own top rule instead. */

.site-header--solid .wordmark { opacity: 1; pointer-events: auto; }

/* ---------- Mastheads ---------- */
.nw-index-masthead,
.nw-masthead { background: var(--gf-teal-900); padding: calc(var(--header-h) + 64px) 0 0; }
.nw-index-masthead .wrap,
.nw-masthead .wrap { padding-bottom: 56px; }
.nw-masthead-eyebrow { margin-top: 22px; }
.nw-masthead-title {
  margin: 18px 0 0; max-width: 24ch;
  font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(31px, 3.4vw, 50px); line-height: 1.06; letter-spacing: -0.02em;
  color: #FFFFFF; text-wrap: pretty;
}
.nw-masthead-lead {
  margin: 22px 0 0; max-width: 62ch;
  font-weight: 300; font-size: 17.5px; line-height: 1.55; color: rgba(255,255,255,0.86);
}

/* ---------- Lead article ----------
   A teal tint band straight under the ink masthead, so the newest piece reads as the
   headline of the page rather than as the first of sixty-three equal cards. */
.nw-lead-band { background: var(--gf-teal-050); border-bottom: 2px solid var(--gf-teal-900); }
.nw-lead-band .wrap { padding-top: 48px; padding-bottom: 52px; }
.nw-lead-heading {
  margin: 0 0 24px; padding-bottom: 12px;
  border-bottom: 2px solid var(--gf-teal-900);
  font-family: var(--font-sans); font-weight: 600; font-size: 15px; line-height: 1.3;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--gf-teal-900);
}
.nw-lead { display: grid; grid-template-columns: 1.12fr 1fr; gap: 40px; align-items: start; color: inherit; }
.nw-lead-img {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 10;
  object-fit: cover; background: var(--gf-white);
  border-top: 5px solid var(--gf-teal-400);
  transition: opacity 120ms linear;
}
.nw-lead-img--none { aspect-ratio: 16 / 10; background: var(--gf-white); }
.nw-lead:hover .nw-lead-img { opacity: 0.88; }
.nw-lead-copy { display: flex; flex-direction: column; }
.nw-lead-date {
  display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--gf-teal-700);
}
.nw-lead-title {
  display: block; margin-top: 12px; max-width: 20ch;
  font-family: var(--font-serif); font-weight: 400; font-size: clamp(26px, 2.6vw, 36px);
  line-height: 1.12; letter-spacing: -0.02em; color: var(--gf-teal-900);
}
.nw-lead:hover .nw-lead-title { color: var(--gf-teal-700); }
.nw-lead-excerpt { display: block; margin-top: 16px; max-width: 48ch; font-weight: 300; font-size: 16.5px; line-height: 1.6; color: var(--gf-slate-700); }
.nw-lead-more {
  display: inline-block; margin-top: 26px; padding: 14px 24px;
  background: var(--gf-teal-400); color: var(--gf-teal-900);
  font-size: 14px; font-weight: 500; line-height: 1.2; align-self: flex-start;
  transition: background-color 120ms linear, color 120ms linear;
}
.nw-lead:hover .nw-lead-more { background: var(--gf-teal-600); color: #FFFFFF; }

/* ---------- Pager ---------- */
.nw-pager {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  margin-top: 52px; padding-top: 22px; border-top: 2px solid var(--gf-teal-900);
}
.nw-pager-nums { display: flex; flex-wrap: wrap; gap: 1px; background: var(--gf-line-200); }
.nw-pager-num {
  min-width: 42px; padding: 11px 8px; background: #FFFFFF; text-align: center;
  font-family: var(--font-serif); font-size: 17px; letter-spacing: -0.02em;
  color: var(--gf-teal-900); transition: background-color 120ms linear, color 120ms linear;
}
.nw-pager-num:hover { background: var(--gf-paper-sunk); color: var(--gf-teal-700); }
.nw-pager-num.is-current { background: var(--gf-teal-900); color: #FFFFFF; }
.nw-pager-step {
  flex: 0 0 auto; font-size: 12px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--gf-teal-700);
}
.nw-pager-step:hover { color: var(--gf-teal-400); }
.nw-pager-step.is-off { color: var(--gf-slate-300); }

/* ---------- Index grid ---------- */
.nw-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px 32px; margin-top: 36px; }
.nw-card {
  display: flex; flex-direction: column; color: inherit;
  border-top: 2px solid var(--gf-teal-900); padding-top: 18px;
}
.nw-card-img {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 10;
  object-fit: cover; background: var(--gf-teal-050);
  transition: opacity 120ms linear;
}
.nw-card-img--none { aspect-ratio: 16 / 10; background: var(--gf-teal-050); border-bottom: 2px solid var(--gf-teal-400); }
.nw-card:hover .nw-card-img { opacity: 0.86; }
.nw-card-date {
  display: block; margin-top: 18px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--gf-teal-700);
}
.nw-card-title {
  display: block; margin-top: 9px;
  font-family: var(--font-serif); font-weight: 400; font-size: 20px;
  letter-spacing: -0.02em; line-height: 1.24; color: var(--gf-teal-900);
}
.nw-card:hover .nw-card-title { color: var(--gf-teal-700); }
.nw-card-excerpt { display: block; margin-top: 11px; font-weight: 300; font-size: 15px; line-height: 1.55; color: var(--gf-slate-700); }
.nw-card-more {
  display: block; margin-top: auto; padding-top: 18px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--gf-teal-700);
}
.nw-card:hover .nw-card-more { color: var(--gf-teal-400); }

/* ---------- Article ---------- */
.nw-hero-wrap { padding-top: 0 !important; }
.nw-hero {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 8;
  object-fit: cover; margin-top: -40px; position: relative;
  border-bottom: 2px solid var(--gf-teal-400);
}

/* One measured column. Every element the sanitiser lets through is styled here, because
   the source markup carried its own colours and sizes and all of that was stripped. */
.nw-body { padding-top: 44px !important; padding-bottom: 8px; max-width: 860px; }
.nw-body > * { max-width: 68ch; }
.nw-body p { margin: 18px 0 0; font-weight: 300; font-size: 16.5px; line-height: 1.65; color: var(--gf-slate-700); }
.nw-body h2 {
  margin: 42px 0 0;
  font-family: var(--font-serif); font-weight: 400; font-size: 27px;
  letter-spacing: -0.02em; line-height: 1.18; color: var(--gf-teal-900);
}
.nw-body h3 {
  margin: 32px 0 0;
  font-family: var(--font-serif); font-weight: 400; font-size: 21px;
  letter-spacing: -0.02em; line-height: 1.2; color: var(--gf-teal-900);
}
.nw-body h4 {
  margin: 28px 0 0;
  font-family: var(--font-sans); font-weight: 600; font-size: 13px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--gf-teal-700);
}
.nw-body ul, .nw-body ol { margin: 18px 0 0; padding: 0; list-style: none; }
.nw-body ol { counter-reset: nw; }
.nw-body li {
  position: relative; padding: 12px 0 0 26px; margin-top: 12px;
  border-top: 1px solid var(--gf-line-300);
  font-weight: 300; font-size: 16.5px; line-height: 1.6; color: var(--gf-slate-700);
}
.nw-body ul li::before {
  content: ""; position: absolute; left: 0; top: 21px;
  width: 10px; height: 10px; background: var(--gf-teal-400);
}
.nw-body ol li { counter-increment: nw; }
.nw-body ol li::before {
  content: counter(nw); position: absolute; left: 0; top: 10px;
  font-family: var(--font-serif); font-size: 17px; color: var(--gf-teal-700);
}
.nw-body strong, .nw-body b { font-weight: 600; color: var(--gf-teal-900); }
.nw-body blockquote {
  margin: 26px 0 0; padding: 20px 24px;
  background: var(--gf-teal-050); border-top: 2px solid var(--gf-teal-900);
}
.nw-body blockquote p {
  margin: 0; font-family: var(--font-serif); font-size: 19px;
  line-height: 1.4; letter-spacing: -0.01em; color: var(--gf-teal-900);
}
.nw-body img { display: block; width: 100%; height: auto; margin: 30px 0 0; }
.nw-body hr { margin: 36px 0 0; border: 0; border-top: 1px solid var(--gf-line-300); }
.nw-body table { width: 100%; margin: 26px 0 0; border-top: 2px solid var(--gf-teal-900); }
.nw-body th, .nw-body td {
  padding: 12px 14px 12px 0; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--gf-line-300);
  font-weight: 300; font-size: 15.5px; line-height: 1.5; color: var(--gf-slate-700);
}
.nw-body th { font-weight: 600; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gf-teal-700); }

/* ---------- Editor's note on an archived post ---------- */
/* The archive is reproduced as published, so a post can quote terms that have since moved.
   Tint with the same 2px head rule the tables use, so it reads as an aside rather than as
   part of the article — an ink block here would fight the masthead above it. */
.nw-note {
  display: block; margin: 34px 0 0; padding: 22px 24px 24px;
  background: var(--gf-teal-050); border-top: 2px solid var(--gf-teal-900);
}
.nw-note-head {
  display: block;
  font-size: 11px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--gf-teal-700);
}
.nw-body .nw-note p { margin: 10px 0 0; font-size: 15px; line-height: 1.6; }

/* ---------- After the article ---------- */
.nw-after { padding-top: 48px !important; padding-bottom: 8px; }
.nw-move-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--gf-line-200); border-top: 2px solid var(--gf-teal-900); }
.nw-move {
  background: #FFFFFF; padding: 22px 24px 26px; color: inherit;
  display: flex; flex-direction: column; transition: background-color 120ms linear;
}
.nw-move:hover { background: var(--gf-paper-sunk); }
.nw-move--prev { text-align: right; }
.nw-move-kind { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gf-teal-700); }
.nw-move-title {
  margin-top: 9px; font-family: var(--font-serif); font-weight: 400; font-size: 18px;
  letter-spacing: -0.02em; line-height: 1.24; color: var(--gf-teal-900);
}
/* A lone neighbour (the newest and oldest articles have only one) keeps its own side. */
.nw-move-grid > .nw-move--prev:only-child { grid-column: 2; }
.nw-back { margin: 26px 0 0; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .nw-grid { grid-template-columns: repeat(2, 1fr); }
  .nw-lead { grid-template-columns: 1fr; gap: 26px; }
  .nw-lead-title { max-width: 26ch; }
}
@media (max-width: 900px) {
  .nw-index-masthead, .nw-masthead { padding: calc(var(--header-h) + 28px) 0 0; }
  .nw-index-masthead .wrap, .nw-masthead .wrap { padding-bottom: 44px; }
  .nw-hero { margin-top: -24px; aspect-ratio: 16 / 9; }
}
@media (max-width: 620px) {
  .nw-grid { grid-template-columns: 1fr; gap: 36px; }
  .nw-pager { flex-wrap: wrap; justify-content: center; gap: 16px; }
  /* width:100% is what breaks the numbers onto their own row, but it also stretches the
     strip past its cells — and the strip paints the rule colour that the 1px gaps show
     through, so the leftover width appeared as grey blocks either side of "1" and "7".
     Same hairlines, drawn on the cells instead, so there is nothing left to bleed. */
  .nw-pager-nums { order: -1; width: 100%; justify-content: center; background: none; gap: 0; }
  .nw-pager-num + .nw-pager-num { border-left: 1px solid var(--gf-line-200); }
  .nw-move-grid { grid-template-columns: 1fr; }
  /* Previous/Next were an 18px strip of uppercase text — the two controls a phone reader
     is most likely to reach for on an archive, and the hardest two to hit. */
  .nw-pager-step { display: inline-block; padding: 12px 0; }
  .nw-move--prev { text-align: left; }
  .nw-move-grid > .nw-move--prev:only-child { grid-column: 1; }
}

/* ---------- Phones ----------
   The masthead headline and lead are the tallest things on every page at this width:
   an 18px lead at 375px runs to ten lines and pushes the whole page down before a
   visitor has read a word of content. Appended last so it wins over the base rules
   above without having to raise specificity. */
@media (max-width: 620px) {
  .nw-masthead-title { font-size: 29px; }
  .nw-masthead-lead { font-size: 16.5px; }
}