/* The AI Foundry: newsletter pages (/the-ai-foundry and each issue).
   A printed sheet read straight down one spine. Every block sits in the same
   centred column (.nl-col, ~700px, the comfortable reading measure); images,
   number bands and the masthead step out to .nl-wide (~960px). The left edge
   and the order of blocks never change, which is what makes it flow.

   Sits on top of tokens.css and site.css. Every value is a token: no raw hex,
   no px font-size, no font name (Rule 32 and the site rule). Every class
   starts nl- and is checked against site.css at build. */

/* ---------- the sheet ---------- */
body.nl-page { background: var(--color-paper-cream); color: var(--color-press-black); }
body.nl-page .bg-lines { display: none; }
.nl-grain {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.35;
  background-image: radial-gradient(var(--color-paper-shade) 0.6px, transparent 0.7px);
  background-size: 5px 5px; mix-blend-mode: multiply;
}
body.nl-page main, .nl-cta { position: relative; z-index: 1; }
/* The nav holds the menu panel, so it must sit above main: at an equal
   z-index main paints later and covers the open menu, and clicks on the
   menu land on the page underneath. */
body.nl-page .nav { position: relative; z-index: 3; }
.nl-page ::selection { background: var(--color-highlighter-green); color: var(--color-typesetter-ink); }

/* ---------- the spine ---------- */
.nl-col  { width: min(100% - var(--gutter) * 2, 44rem); margin-inline: auto; }
.nl-wide { width: min(100% - var(--gutter) * 2, 60rem); margin-inline: auto; }

/* body copy: one voice everywhere */
.nl-prose p {
  font-family: var(--font-body-serif); font-size: var(--text-lede); line-height: 1.6;
  color: var(--color-press-black); max-width: none; margin: 0 0 var(--spacing-20);
}
.nl-prose p:last-child { margin-bottom: 0; }

/* ---------- running head ---------- */
.nl-running {
  display: flex; align-items: center; gap: var(--spacing-15);
  color: var(--color-foundry-forest);
}
.nl-running-rule { flex: 1 1 auto; height: 1px; background: var(--color-foundry-forest); opacity: 0.4; }

/* ---------- masthead ---------- */
.nl-mast { padding-block: var(--spacing-10) var(--spacing-50); }
.nl-mast-title {
  margin: var(--spacing-15) 0 0; max-width: none;
  font-family: var(--font-ui); font-weight: var(--font-weight-bold);
  font-size: var(--text-mast); line-height: 0.86; letter-spacing: var(--tracking-display);
  text-transform: uppercase; color: var(--color-foundry-forest); white-space: nowrap;
}
.nl-mast-ai {
  display: inline-block; color: var(--color-foundry-forest);
  background: linear-gradient(var(--color-highlighter-green), var(--color-highlighter-green)) left center / 100% 100% no-repeat;
  padding-inline: 0.06em; margin-inline: 0.02em; transform: rotate(-1.5deg);
}
.nl-mast-rule { height: 3px; background: var(--color-foundry-forest); margin: var(--spacing-15) 0 var(--spacing-10); }
.nl-mast-meta { display: flex; justify-content: space-between; gap: var(--spacing-8) var(--spacing-20); flex-wrap: wrap; color: var(--color-foundry-forest); }
.nl-mast-meta span:last-child { color: var(--color-newsprint-gray); }

/* ---------- cover ---------- */
.nl-cover { padding-bottom: var(--spacing-30); }
.nl-eyebrow { display: block; color: var(--color-accent-edge); margin-bottom: var(--spacing-15); }
.nl-cover-title {
  width: auto; max-width: none; margin: 0 0 var(--spacing-20);
  font-family: var(--font-display); font-weight: var(--font-weight-regular);
  font-size: var(--text-heading-sm); line-height: 1.02; letter-spacing: var(--tracking-mid);
  color: var(--color-foundry-forest); text-wrap: balance;
}
.nl-dek { font-family: var(--font-body-serif); font-size: var(--text-lede); line-height: 1.45; color: var(--color-slate-verdant); max-width: none; margin: 0; }

/* ---------- figures: the printed plate ---------- */
.nl-fig { margin: 0; }
.nl-frame { position: relative; background: var(--color-paper-card); padding: var(--spacing-10); border: 1px solid var(--color-foundry-forest); }
.nl-frame img { display: block; width: 100%; height: auto; }
.nl-frame::before, .nl-frame::after {
  content: ""; position: absolute; width: var(--spacing-25); height: var(--spacing-25);
  background:
    linear-gradient(var(--color-foundry-forest), var(--color-foundry-forest)) center / 1px 100% no-repeat,
    linear-gradient(var(--color-foundry-forest), var(--color-foundry-forest)) center / 100% 1px no-repeat;
}
.nl-frame::before { top: calc(var(--spacing-15) * -1); left: calc(var(--spacing-15) * -1); }
.nl-frame::after { bottom: calc(var(--spacing-15) * -1); right: calc(var(--spacing-15) * -1); }
.nl-fig figcaption { margin-top: var(--spacing-10); color: var(--color-newsprint-gray); }

/* ---------- letter ---------- */
.nl-letter { padding-block: var(--spacing-50) var(--spacing-40); }
.nl-letter p:nth-child(2)::first-letter {
  float: left; font-family: var(--font-display); color: var(--color-foundry-forest);
  font-size: var(--text-figure); line-height: 0.8; padding: var(--spacing-8) var(--spacing-10) 0 0;
}

/* ---------- contents ---------- */
.nl-section-title {
  font-family: var(--font-display); font-weight: var(--font-weight-regular); font-size: var(--text-approach);
  line-height: 1.05; letter-spacing: var(--tracking-mid); color: var(--color-foundry-forest);
  max-width: none; margin: 0 0 var(--spacing-10);
}
.nl-toc { border-top: 3px solid var(--color-foundry-forest); padding-top: var(--spacing-25); }
.nl-toc-list { list-style: none; margin: 0; padding: 0; }
.nl-toc-list a {
  display: grid; grid-template-columns: var(--spacing-40) minmax(0, 1fr); gap: var(--spacing-10);
  padding-block: var(--spacing-15); border-top: 1px solid var(--color-paper-shade);
}
.nl-toc-list a:hover .nl-toc-title { color: var(--color-accent-edge); }
.nl-toc-num { font-family: var(--font-display); font-size: var(--text-note); color: var(--color-accent-edge); line-height: 1; }
.nl-toc-kicker { display: block; color: var(--color-newsprint-gray); margin-bottom: var(--spacing-4); }
.nl-toc-title { display: block; font-size: var(--text-body); line-height: 1.35; color: var(--color-press-black); transition: color 0.2s; }

/* ---------- label legend ---------- */
.nl-legend {
  margin-top: var(--spacing-25); padding: var(--spacing-20) var(--spacing-25);
  border: 1px dashed var(--color-foundry-forest); background: var(--color-paper-card);
  font-size: var(--text-body-sm); color: var(--color-slate-verdant);
}
.nl-legend-title { display: block; color: var(--color-foundry-forest); margin-bottom: var(--spacing-8); }
.nl-legend ul { list-style: none; margin: 0; padding: 0; }
.nl-legend li { margin-top: var(--spacing-8); }
.nl-tag {
  display: inline-block; vertical-align: 0.12em; white-space: nowrap;
  padding: 2px var(--spacing-8); border-radius: var(--radius-round); border: 1px solid transparent;
  font-family: var(--font-ui); font-size: var(--text-caption); font-weight: var(--font-weight-w550);
  letter-spacing: var(--tracking-wide); text-transform: uppercase; line-height: var(--leading-prose);
}
.nl-tag-measured    { background: var(--color-highlighter-green); color: var(--color-accent-ink); border-color: var(--color-accent-press); }
.nl-tag-vendor      { background: transparent; color: var(--color-slate-verdant); border-color: var(--color-newsprint-gray); }
.nl-tag-directional { background: var(--color-echo-green); color: var(--color-slate-verdant); border-color: var(--color-shadow-moss); }
.nl-tag-anecdotal   { background: var(--color-paper-shade); color: var(--color-slate-verdant); border-color: var(--color-paper-shade); }

/* ---------- a story: same order, same rhythm, every time ---------- */
.nl-story { padding-top: var(--spacing-60); }
.nl-story > * + * { margin-top: var(--spacing-25); }
.nl-story-head {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--spacing-20); align-items: start;
  border-top: 1px solid var(--color-foundry-forest); padding-top: var(--spacing-25);
}
.nl-num {
  font-family: var(--font-display); font-size: var(--text-figure); line-height: 0.85;
  color: var(--color-foundry-forest); min-width: 1.1em;
}
.nl-kicker { display: block; color: var(--color-accent-edge); margin: var(--spacing-4) 0 var(--spacing-8); }
.nl-story-title {
  font-family: var(--font-display); font-weight: var(--font-weight-regular);
  font-size: var(--text-story); line-height: 1.06; letter-spacing: var(--tracking-mid);
  color: var(--color-foundry-forest); max-width: none; margin: 0; text-wrap: balance;
}
.nl-story .nl-wide { margin-top: var(--spacing-30); margin-bottom: var(--spacing-10); }
.nl-result { font-weight: var(--font-weight-medium); }

/* ---------- stat block ---------- */
.nl-stat {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--spacing-25); align-items: center;
  background: var(--color-foundry-forest); color: var(--color-paper-cream);
  padding: var(--spacing-25) var(--spacing-30);
}
.nl-stat-value {
  display: block; font-family: var(--font-display); font-size: var(--text-stat); line-height: 0.85;
  color: var(--color-highlighter-green); letter-spacing: var(--tracking-tight); white-space: nowrap;
}
.nl-stat-unit { font-size: 0.4em; margin-left: 0.08em; }
.nl-stat-before {
  display: block; font-family: var(--font-ui); font-size: var(--text-body-sm); line-height: var(--leading-prose);
  letter-spacing: 0; color: var(--color-forest-mute); text-decoration: line-through; margin-bottom: var(--spacing-8);
}
.nl-stat-label { font-size: var(--text-body); line-height: 1.4; margin: 0 0 var(--spacing-8); max-width: none; color: var(--color-paper-cream); }
.nl-stat-note { color: var(--color-forest-mute); }
@media (max-width: 560px) { .nl-stat { grid-template-columns: minmax(0, 1fr); gap: var(--spacing-15); } }

/* the band: a story led by several numbers */
.nl-band {
  background: var(--color-foundry-forest); color: var(--color-paper-cream);
  padding: var(--spacing-40) var(--spacing-40) var(--spacing-30);
  display: grid; gap: var(--spacing-30) var(--spacing-40); grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 700px) { .nl-band { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.nl-band .nl-stat-value { font-size: var(--text-heading); margin-bottom: var(--spacing-8); }
.nl-band-sub { border-top: 1px solid var(--color-forest-mute); padding-top: var(--spacing-20); }
.nl-band-sub .nl-stat-value { font-size: var(--text-figure); }
.nl-band-foot { grid-column: 1 / -1; color: var(--color-forest-mute); }

/* ---------- charts ---------- */
.nl-chart { margin-inline: auto; background: var(--color-paper-card); border: 1px solid var(--color-paper-shade); padding: var(--spacing-20) var(--spacing-25); }
.nl-chart-title { display: block; color: var(--color-foundry-forest); margin-bottom: var(--spacing-15); }
.nl-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.nl-chart-note { display: block; margin-top: var(--spacing-10); color: var(--color-newsprint-gray); }
.nl-chart table { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.nl-chart .nl-mark { transition: opacity 0.2s; }
.nl-chart svg:hover .nl-mark { opacity: 0.55; }
.nl-chart svg .nl-mark:hover { opacity: 1; }

/* ---------- evidence + source ---------- */
.nl-meta { font-family: var(--font-ui); font-size: var(--text-body-sm); line-height: 1.55; color: var(--color-newsprint-gray); }
.nl-meta p { margin: 0 0 var(--spacing-4); max-width: none; }
.nl-source .link-t { font-family: var(--font-ui); color: var(--color-foundry-forest); }

/* ---------- watch block ---------- */
.nl-watch { background: var(--color-foundry-forest); color: var(--color-paper-cream); }
.nl-watch-link {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--spacing-20); align-items: center;
  padding: var(--spacing-20) var(--spacing-25); color: inherit;
}
.nl-watch-link:hover { color: inherit; }
.nl-play {
  width: var(--spacing-55); height: var(--spacing-55); border-radius: var(--radius-round);
  background: var(--color-highlighter-green); display: grid; place-items: center;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.nl-watch-link:hover .nl-play { transform: scale(1.08); }
.nl-play::before {
  content: ""; margin-left: 4px; border-style: solid; border-width: 10px 0 10px 16px;
  border-color: transparent transparent transparent var(--color-foundry-forest);
}
.nl-watch-kicker { display: block; color: var(--color-highlighter-green); margin-bottom: var(--spacing-4); }
.nl-watch-title { display: block; font-family: var(--font-display); font-size: var(--text-note); line-height: 1.15; }
.nl-watch-meta { display: block; font-size: var(--text-body-sm); color: var(--color-forest-mute); margin-top: var(--spacing-4); }
.nl-watch-frame { position: relative; aspect-ratio: 16 / 9; background: var(--color-forest-deep); }
.nl-watch-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- my take ---------- */
.nl-take {
  position: relative; margin: 0; padding: var(--spacing-25) var(--spacing-30) var(--spacing-25) var(--spacing-60);
  background: var(--color-paper-card); border-left: 4px solid var(--color-highlighter-green);
}
.nl-take::before {
  content: "\201C"; position: absolute; left: var(--spacing-15); top: var(--spacing-8);
  font-family: var(--font-display); font-size: var(--text-metric); line-height: 1; color: var(--color-foundry-forest);
}
.nl-take .micro { display: block; color: var(--color-foundry-forest); margin-bottom: var(--spacing-8); }
.nl-take p { margin: 0; max-width: none; font-family: var(--font-display); font-size: var(--text-note); line-height: 1.3; letter-spacing: var(--tracking-mid); color: var(--color-press-black); }

/* ---------- closing ---------- */
.nl-closing { margin-top: var(--spacing-120); background: var(--color-foundry-forest); color: var(--color-paper-cream); padding-block: var(--spacing-60); position: relative; z-index: 1; }
.nl-closing .nl-wide { margin-top: var(--spacing-40); }
.nl-closing .nl-eyebrow { color: var(--color-highlighter-green); }
.nl-closing-title { font-family: var(--font-display); font-size: var(--text-subheading); line-height: 1.04; letter-spacing: var(--tracking-mid); color: var(--color-paper-cream); max-width: none; margin: 0 0 var(--spacing-25); text-wrap: balance; }
.nl-closing .nl-prose p { color: var(--color-muted-sage); }
.nl-sign { margin: var(--spacing-25) 0 0; font-size: var(--text-body); color: var(--color-paper-cream); }
.nl-sign strong { font-weight: var(--font-weight-w550); }
.nl-sign span { font-size: var(--text-body-sm); color: var(--color-forest-mute); }
.nl-closing .nl-frame { border-color: var(--color-forest-mute); }
.nl-closing .nl-frame::before, .nl-closing .nl-frame::after {
  background:
    linear-gradient(var(--color-highlighter-green), var(--color-highlighter-green)) center / 1px 100% no-repeat,
    linear-gradient(var(--color-highlighter-green), var(--color-highlighter-green)) center / 100% 1px no-repeat;
}
.nl-closing .nl-fig figcaption { color: var(--color-forest-mute); }

/* ---------- the clip-out card ---------- */
.nl-cta { padding-block: var(--spacing-60) var(--spacing-30); }
.nl-ticket { background: var(--color-paper-card); border: 2px dashed var(--color-foundry-forest); padding: var(--spacing-40) var(--spacing-40); }
.nl-ticket h2 { font-family: var(--font-display); font-size: var(--text-approach); line-height: 1.05; color: var(--color-foundry-forest); max-width: none; margin: 0 0 var(--spacing-15); letter-spacing: var(--tracking-mid); }
.nl-ticket p { font-family: var(--font-body-serif); font-size: var(--text-body); margin-bottom: var(--spacing-20); max-width: none; }
.nl-subscribe { margin-top: var(--spacing-30); padding-top: var(--spacing-25); border-top: 1px solid var(--color-paper-shade); }
.nl-subscribe label { display: block; margin-bottom: var(--spacing-10); color: var(--color-foundry-forest); }
.nl-subscribe-row { display: flex; gap: var(--spacing-10); flex-wrap: wrap; }
.nl-subscribe input {
  flex: 1 1 12rem; min-width: 0; font: inherit; font-size: var(--text-body);
  padding: var(--spacing-15); background: var(--color-paper-cream); color: var(--color-typesetter-ink);
  border: 1px solid var(--color-foundry-forest); border-radius: var(--radius-buttons);
}
.nl-subscribe input:focus-visible { outline: 3px solid var(--color-highlighter-green); outline-offset: 2px; }
.nl-subscribe .btn { border: 0; font: inherit; cursor: pointer; }
.nl-subscribe-note { margin: var(--spacing-10) 0 0; color: var(--color-foundry-forest); font-weight: var(--font-weight-w550); }
.nl-subscribe-note.is-err { color: var(--color-error); }
.nl-back { text-align: center; margin: var(--spacing-30) 0 var(--spacing-40); max-width: none; }

/* ---------- the front page (/the-ai-foundry): a blog index ----------
   A few lines on AI, then every issue as a card to search, filter by stage
   and click into (LESSONS Rule 40). Cards step out to .nl-wide; the grid
   fills three across on a laptop and one on a phone. */
.nl-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nl-index-intro { padding-block: var(--spacing-10) var(--spacing-40); }
.nl-index-lead {
  font-family: var(--font-display); font-weight: var(--font-weight-regular);
  font-size: var(--text-story); line-height: 1.05; letter-spacing: var(--tracking-mid);
  color: var(--color-foundry-forest); max-width: 24ch; margin: 0 0 var(--spacing-15); text-wrap: balance;
}
.nl-index-dek { font-family: var(--font-body-serif); font-size: var(--text-lede); line-height: 1.5; color: var(--color-slate-verdant); max-width: 40rem; margin: 0 0 var(--spacing-10); }
/* the source: a small label, then one plain sentence-case line with only the publisher linked */
.nl-index-source {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--spacing-4) var(--spacing-10);
  margin: var(--spacing-15) 0 0; max-width: none;
  font-family: var(--font-ui); font-size: var(--text-body-sm); line-height: 1.5; color: var(--color-newsprint-gray);
}
.nl-index-source-label { color: var(--color-foundry-forest); }
.nl-index-source .link-t { font: inherit; color: var(--color-foundry-forest); }   /* .link-t is the serif link; here it reads as part of the line */
.nl-index { padding-block: 0 var(--spacing-40); }

/* the stakes: a revenue bar whose last share breaks up into halftone.
   It draws once as it arrives (the .is-in from the fade-in observer): the bar
   is whole, then the cover lifts and the dots drift off, staggered by --nl-delay (set per dot in the markup). */
.nl-stakes { margin: 0 auto var(--spacing-50); }
.nl-stakes-panel { background: var(--color-foundry-forest); color: var(--color-paper-cream); padding: var(--spacing-30) var(--spacing-40) var(--spacing-30); }
.nl-stakes-svg { display: block; width: 100%; height: auto; overflow: visible; }
.nl-stakes-scale { display: flex; justify-content: space-between; color: var(--color-forest-mute); margin-top: var(--spacing-4); }
.nl-stakes-scale span:last-child { color: var(--color-highlighter-green); }
.nl-stakes-read { display: flex; align-items: center; gap: var(--spacing-10) var(--spacing-30); flex-wrap: wrap; margin-top: var(--spacing-25); }
.nl-stakes-value { font-family: var(--font-display); font-size: var(--text-stat); line-height: 0.85; color: var(--color-highlighter-green); letter-spacing: var(--tracking-tight); white-space: nowrap; }
.nl-stakes-unit { font-size: 0.45em; margin-left: 0.04em; }
.nl-stakes-line { flex: 1 1 16rem; margin: 0; max-width: 30ch; text-wrap: balance; font-family: var(--font-display); font-size: var(--text-story); line-height: 1.15; letter-spacing: var(--tracking-mid); color: var(--color-paper-cream); }
.nl-stakes-meta { margin-top: var(--spacing-15); }
/* the comparison: two bars on one scale from zero. The shorter bar's missing
   length, up to the longer one, is drawn dashed: that outline is the gap. */
.nl-cmp { display: grid; gap: var(--spacing-15); }
.nl-cmp-row { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) 4.5rem; align-items: center; gap: var(--spacing-15); }
.nl-cmp-label { color: var(--color-muted-sage); }
.nl-cmp-lead .nl-cmp-label { color: var(--color-paper-cream); }
.nl-cmp-track { position: relative; height: var(--spacing-40); }
.nl-cmp-bar { position: absolute; inset: 0 auto 0 0; width: var(--nl-w); background: var(--color-forest-mute); transform-origin: left center; }
.nl-cmp-lead .nl-cmp-bar { background: var(--color-highlighter-green); }
.nl-cmp-gap { position: absolute; top: 0; bottom: 0; left: var(--nl-from); width: calc(var(--nl-to) - var(--nl-from)); border: 1px dashed var(--color-highlighter-green); border-left: 0; }
.nl-cmp-val { font-family: var(--font-display); font-size: var(--text-note); line-height: 1; color: var(--color-paper-cream); text-align: right; }
.nl-cmp-lead .nl-cmp-val { color: var(--color-highlighter-green); }
.nl-cmp-note { color: var(--color-forest-mute); margin: var(--spacing-4) 0 0; }
.nl-js .nl-cmp-bar { transform: scaleX(0); transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.2s; }
.nl-js .nl-cmp-lead .nl-cmp-bar { transition-delay: 0.05s; }
.nl-js .nl-cmp-gap { opacity: 0; transition: opacity 0.6s ease 1.2s; }
.nl-js .nl-stakes.is-in .nl-cmp-bar { transform: none; }
.nl-js .nl-stakes.is-in .nl-cmp-gap { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .nl-js .nl-cmp-bar { transform: none; transition: none; } .nl-js .nl-cmp-gap { opacity: 1; transition: none; } }
@media (max-width: 560px) {
  .nl-cmp-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label val" "track track"; gap: var(--spacing-8); }
  .nl-cmp-label { grid-area: label; } .nl-cmp-val { grid-area: val; } .nl-cmp-track { grid-area: track; height: var(--spacing-30); }
}
.nl-stakes-dots circle { transform-box: fill-box; transform-origin: center; }
.nl-js .nl-stakes-dots circle { opacity: 0; transform: translateX(-6px); transition: opacity 0.9s ease, transform 1.4s cubic-bezier(0.16, 1, 0.3, 1); transition-delay: var(--nl-delay); }
.nl-js .nl-stakes-cover { transition: opacity 0.8s ease 0.7s; }
.nl-js .nl-stakes.is-in .nl-stakes-dots circle { opacity: 1; transform: none; }
.nl-stakes-cover, .nl-js .nl-stakes.is-in .nl-stakes-cover { opacity: 0; }
.nl-js .nl-stakes:not(.is-in) .nl-stakes-cover { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .nl-js .nl-stakes-dots circle { opacity: 1; transform: none; transition: none; }
  .nl-js .nl-stakes:not(.is-in) .nl-stakes-cover { opacity: 0; }
}
@media (max-width: 560px) { .nl-stakes-panel { padding: var(--spacing-20); } }

/* search + tabs */
.nl-index-controls { border-top: 3px solid var(--color-foundry-forest); padding-top: var(--spacing-20); margin-bottom: var(--spacing-30); }
.nl-search input {
  width: 100%; font: inherit; font-family: var(--font-ui); font-size: var(--text-body);
  padding: var(--spacing-15) var(--spacing-20); background: var(--color-paper-card); color: var(--color-typesetter-ink);
  border: 1px solid var(--color-foundry-forest); border-radius: var(--radius-buttons);
}
.nl-search input::placeholder { color: var(--color-newsprint-gray); }
.nl-search input:focus-visible, .nl-tab:focus-visible { outline: 3px solid var(--color-highlighter-green); outline-offset: 2px; }
.nl-tabs { display: flex; flex-wrap: wrap; gap: var(--spacing-8) var(--spacing-20); margin-top: var(--spacing-20); }
.nl-tab {
  font-family: var(--font-ui); font-size: var(--text-body-sm); color: var(--color-slate-verdant);
  background: none; border: 0; border-bottom: 2px solid transparent; padding: var(--spacing-4) 0; cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.nl-tab:hover { color: var(--color-foundry-forest); }
.nl-tab[aria-pressed="true"] { color: var(--color-foundry-forest); font-weight: var(--font-weight-w550); border-bottom-color: var(--color-highlighter-green); }
.nl-index-count { color: var(--color-newsprint-gray); margin: var(--spacing-15) 0 0; }

/* the cards */
.nl-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--spacing-25); grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.nl-card { background: var(--color-paper-card); border: 1px solid var(--color-foundry-forest); }
.nl-card-link { display: flex; flex-direction: column; height: 100%; color: inherit; }
.nl-card-img { display: block; border-bottom: 1px solid var(--color-foundry-forest); overflow: hidden; }
.nl-card-img img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
.nl-card-link:hover .nl-card-img img { transform: scale(1.03); }
.nl-card-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: var(--spacing-20); }
.nl-card-meta { color: var(--color-accent-edge); margin-bottom: var(--spacing-10); }
.nl-card-title { font-family: var(--font-display); font-size: var(--text-note); line-height: 1.1; letter-spacing: var(--tracking-mid); color: var(--color-foundry-forest); margin-bottom: var(--spacing-10); transition: color 0.2s; }
.nl-card-link:hover .nl-card-title { color: var(--color-accent-edge); }
.nl-card-dek { font-family: var(--font-body-serif); font-size: var(--text-body-sm); line-height: 1.5; color: var(--color-slate-verdant); margin-bottom: var(--spacing-20); }
.nl-card-read { margin-top: auto; align-self: flex-start; color: var(--color-foundry-forest); border-bottom: 2px solid var(--color-highlighter-green); }
.nl-index-empty { font-family: var(--font-body-serif); font-size: var(--text-body); color: var(--color-slate-verdant); max-width: none; }
.nl-index-reset { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.nl-hub-foot { margin-top: var(--spacing-40); }

/* ---------- the entrance: the page prints itself in, once, on arrival ----------
   About a second and a half, in reading order: the running rule draws, the
   masthead eases up, the highlighter swipes across "AI", the heavy rule
   draws, then (on the front page) the intro lines follow. Pure CSS with
   fill "both", so every element ends visible even if no script runs; the
   blocks below wait for it in newsletter.js before they rise. */
@keyframes nl-in    { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes nl-fade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes nl-draw  { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes nl-swipe { from { background-size: 0% 100%; } to { background-size: 100% 100%; } }
.nl-js .nl-mast .nl-running > span:not(.nl-running-rule) { animation: nl-fade 0.8s ease 0.15s both; }
.nl-js .nl-mast .nl-running-rule { transform-origin: left center; animation: nl-draw 1.1s cubic-bezier(0.65, 0, 0.35, 1) 0s both; }
.nl-js .nl-mast-title { animation: nl-in 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both; }
.nl-js .nl-mast-ai { animation: nl-swipe 0.55s cubic-bezier(0.65, 0, 0.35, 1) 0.7s both; }
.nl-js .nl-mast-rule { transform-origin: left center; animation: nl-draw 1.1s cubic-bezier(0.65, 0, 0.35, 1) 0.35s both; }
.nl-js .nl-mast-meta { animation: nl-fade 0.8s ease 0.75s both; }
.nl-js .nl-index-lead   { animation: nl-in 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.9s both; }
.nl-js .nl-index-dek    { animation: nl-in 0.9s cubic-bezier(0.16, 1, 0.3, 1) 1.05s both; }
.nl-js .nl-index-source { animation: nl-in 0.9s cubic-bezier(0.16, 1, 0.3, 1) 1.2s both; }
.nl-js .nl-index-controls:not([hidden]) { animation: nl-fade 0.8s ease 1.5s both; }
.nl-cards .nl-rise { transition-delay: calc(var(--nl-i, 0) * 90ms); }
@media (prefers-reduced-motion: reduce) {
  .nl-js .nl-mast *, .nl-js .nl-mast-title, .nl-js .nl-index-lead, .nl-js .nl-index-dek,
  .nl-js .nl-index-source, .nl-js .nl-index-controls { animation: none; }
}

/* ---------- arrival: fades once, never tied to scroll position ---------- */
.nl-js .nl-rise { opacity: 0; transform: translateY(14px); transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
.nl-js .nl-rise.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .nl-js .nl-rise { opacity: 1; transform: none; transition: none; } }

/* ---------- phones: give the words the width ---------- */
@media (max-width: 560px) {
  .nl-take { padding: var(--spacing-20) var(--spacing-20) var(--spacing-20) var(--spacing-20); }
  .nl-take::before { position: static; display: block; height: 0.5em; margin-bottom: var(--spacing-8); }
  .nl-band { padding: var(--spacing-25) var(--spacing-20) var(--spacing-20); }
  .nl-band .nl-stat-value { font-size: var(--text-figure); }
  .nl-ticket { padding: var(--spacing-25) var(--spacing-20); }
  .nl-story-head { gap: var(--spacing-15); }
}