/* News page. Builds on site.css; the page is generated by tools/build_news.py from content/news.html. */

.np-hero { position: relative; padding: calc(var(--nav-h) + clamp(48px, 8vw, 96px)) 0 clamp(28px, 4vw, 48px); overflow: clip; }
.np-hero .hero-bg { opacity: .85; }
.np-hero .wrap { position: relative; }
.np-hero h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); font-weight: 760; letter-spacing: -0.035em; margin: 14px 0 16px; max-width: 18ch; text-wrap: balance; }
.np-hero .lede { max-width: 60ch; }

.np-list { display: grid; gap: 0; padding-bottom: var(--sec-y); }
.np-item { display: grid; grid-template-columns: 190px minmax(0, 720px); gap: clamp(20px, 4vw, 56px); padding: 40px 0; border-top: 1px solid var(--border); scroll-margin-top: calc(var(--nav-h) + 16px); }
.np-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding-top: 6px; }
.np-meta time { font-size: 0.82rem; font-weight: 700; letter-spacing: .06em; color: var(--green-ink); font-variant-numeric: tabular-nums; }
.np-tag { font-size: 0.72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px;
  color: var(--tag-ink, var(--muted)); background: color-mix(in srgb, var(--tag-ink, var(--muted)) 13%, transparent); }
.np-tag.t-release { --tag-ink: var(--green-ink); }
.np-tag.t-feature { --tag-ink: var(--info); }
.np-tag.t-insight { --tag-ink: var(--purple); }
.np-tag.t-project { --tag-ink: var(--wait); }

.np-body { min-width: 0; color: var(--text); font-size: 1.05rem; line-height: 1.7; }
.np-body h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 740; letter-spacing: -0.02em; line-height: 1.25; margin-bottom: 14px; text-wrap: balance; }
.np-body h2 a { color: inherit; }
.np-body h2 a:hover { text-decoration: none; color: var(--green-ink); }
.np-body h3 { font-size: 1.15rem; margin: 22px 0 8px; }
.np-body p, .np-body ul, .np-body ol, .np-body blockquote, .np-body figure { margin: 0 0 14px; }
.np-body ul, .np-body ol { padding-left: 1.3em; }
.np-body li + li { margin-top: 4px; }
.np-body code { font-family: var(--mono); font-size: .9em; padding: 1px 6px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--border); }
.np-body blockquote { padding: 4px 0 4px 18px; border-left: 3px solid var(--green); color: var(--muted); font-style: italic; }
.np-body figure img { display: block; max-width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--border); box-shadow: var(--shadow); }
.np-body figcaption { margin-top: 8px; font-size: 0.88rem; color: var(--muted); }
.np-body > :last-child { margin-bottom: 0; }

@media (max-width: 760px) {
  .np-item { grid-template-columns: 1fr; gap: 12px; padding: 30px 0; }
  .np-meta { flex-direction: row; align-items: center; padding-top: 0; }
}

/* The Substack newsletter is a separate channel with its own articles: say so in the hero, as a quiet card. */
.np-newsletter { display: flex; gap: 14px; align-items: flex-start; max-width: 60ch; margin-top: 20px; padding: 14px 18px;
  border: 1px solid var(--border); border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 82%, transparent); color: var(--muted); font-size: 0.98rem; line-height: 1.6; }
/* Substack's own brand colour, as on the footer icon's hover. */
.np-nl-ic { width: 22px; height: 22px; flex: none; margin-top: 3px; fill: #ff6719; }
.np-newsletter b { color: var(--text); }
.np-newsletter a { font-weight: 700; white-space: nowrap; }
.np-newsletter a::after { content: " \2192"; }

/* The RSS feed stays discoverable (head link, this line) without competing with the newsletter up top. */
.np-feed { padding-top: 28px; border-top: 1px solid var(--border); font-size: 0.9rem; color: var(--faint); }