/* Generated from blog.css; do not edit. */
@scope ([data-page-content]) {
/*
 * blog.css — the Nori blog on the Nori design language.
 * Self-contained on the token chain: load fonts.css → design-tokens.css → blog.css.
 * Long-form reading in a proportional sans body (readability), with a single
 * Newsreader-italic display h1 and IBM Plex Mono for chrome/labels/meta/code;
 * hairlines instead of shadows, one green accent, dark-only. Covers both post
 * templates (essays: main/article/.dek/.byline; dev-logs: .layout/.content/.sidebar/.toc)
 * and the listing page (newsletter.html).
 */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* Scale the site up on tablet/desktop for a warmer, more confident feel.
   Held off below 769px: CSS zoom scales content but not the responsive
   breakpoints, so zooming a phone layout pushes full-width elements off-screen. */
@media (min-width: 769px) { html { zoom: 1.25; } }

:scope {
  /* Proportional face for long-form reading — a deliberate blog-only exception to
     the mono-body design law; mono stays on nav, labels, meta, and code.

     Now an alias of --sans (see the site theme overrides at the foot of this
     file) rather than its own stack: long-form prose and body copy were two
     spellings of "the proportional face", and they drifted apart the moment
     one of them was aligned with the homepage. One definition, one face. */
  --read: var(--sans);
}

body {
  background: var(--deep);
  color: var(--text);
  font-family: var(--read);
  font-size: 16.5px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--selection); }

a { color: var(--green); text-decoration: none; }
a:hover { color: var(--green-bright); text-decoration: none; }

/* ============ nav + footer (listing page chrome; self-contained) ============ */
.nav { border-bottom: var(--hair); background: var(--deep); font-family: var(--mono); }
.nav-inner {
  max-width: 1120px; margin: 0 auto; padding: 16px 32px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.nav-logo { display: inline-flex; align-items: center; gap: 8px; color: var(--fg); font-weight: 600; font-size: 15px; }
.nav-logo .prompt { color: var(--green); }
.nav-links { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.nav-links a { color: var(--comment); font-size: 13.5px; }
.nav-links a:hover { color: var(--fg); }
.nav-links a[aria-current="page"] { color: var(--fg); }
.nav-cta { color: var(--green) !important; }
.nav-dropdown { position: relative; }
.nav-dropdown::after {
  content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 10px;
}
.nav-dropdown-toggle {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--comment); font-family: var(--mono); font-size: 13.5px;
}
.nav-dropdown-toggle:hover { color: var(--fg); }
.nav-dropdown-menu {
  position: absolute; top: calc(100% + 10px); left: -16px; min-width: 210px;
  background: var(--surface); border: var(--hair);
  display: none; flex-direction: column; padding: 6px 0;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu { display: flex; }
.nav-dropdown-menu a { color: var(--text); padding: 8px 16px; font-size: 13.5px; }
.nav-dropdown-menu a:hover { background: var(--overlay); color: var(--fg); }
.nav-toggle, .nav-burger { display: none; }  /* burger menu appears only on mobile */

.footer { border-top: var(--hair); margin-top: 80px; font-family: var(--mono); }
.footer-inner {
  max-width: 1120px; margin: 0 auto; padding: 32px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.footer-left { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.footer-logo { display: inline-flex; align-items: center; gap: 7px; color: var(--fg); font-weight: 600; }
.footer-copy { color: var(--muted); font-size: 12.5px; }
.footer-links { display: flex; gap: 18px; flex-wrap: wrap; }
.footer-links a { color: var(--comment); font-size: 12.5px; }
.footer-links a:hover { color: var(--fg); }
.footer-colophon { max-width: 1120px; margin: 0 auto; padding: 0 32px 28px; }
.footer-exit { color: var(--muted); font-size: 12px; }
.footer-exit .ps { color: var(--green); }

/* ============ shared reading column ============ */
main, .layout, .listing {
  max-width: 720px;
  margin: 0 auto;
  padding: 56px 32px 24px;
}
.layout { max-width: 1080px; }

/* display h1 — the single serif thought per page, sentence case, period */
h1 {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: clamp(34px, 5vw, 52px); line-height: 1.06; letter-spacing: -0.01em;
  color: var(--fg); margin-bottom: 20px;
}

/* standfirst / dek / summary / subtitle — mono, muted, larger measure */
.dek, .summary, .subtitle, .content .summary {
  font-size: 16px; color: var(--comment); line-height: 1.65; margin-bottom: 18px; max-width: 62ch;
}
.subtitle a { color: var(--green); }

/* byline / date / signoff name — small meta */
.byline, .post-meta, .content .date, .date, .signoff .name, .name {
  font-family: var(--mono); font-size: 12.5px; color: var(--muted); letter-spacing: 0.02em;
}
.byline .author { color: var(--comment); }
.byline { margin-bottom: 28px; }
.signoff { margin-top: 40px; padding-top: 20px; border-top: var(--hair); color: var(--comment); }
.signoff .name { color: var(--comment); }

/* "originally published" source label + back link */
.source-label { font-size: 12px; color: var(--muted); margin-bottom: 14px; }
.source-label a { color: var(--comment); }
.source-label a:hover { color: var(--fg); }
.back {
  display: inline-block; font-size: 12.5px; color: var(--comment); margin-bottom: 32px;
}
.back:hover { color: var(--green-bright); }

/* ============ article body ============ */
article { color: var(--text); }
article p { margin: 0 0 20px; max-width: 62ch; }
article strong { color: var(--fg); font-weight: 600; }
article em { font-style: italic; color: var(--text); }
/* prose body links (essays, dev-logs, legal) share one underlined treatment so
   affordance stays consistent across the reading surface. The dev-log ".back"
   chrome link lives inside .content, so exclude it (essays keep .back outside
   <article>). */
article a, .content a:not(.back), .legal-content a { color: var(--green); border-bottom: 1px solid color-mix(in srgb, var(--green) 28%, transparent); }
article a:hover, .content a:not(.back):hover, .legal-content a:hover { color: var(--green-bright); border-bottom-color: color-mix(in srgb, var(--green) 55%, transparent); }

article h2 {
  font-weight: 700; font-size: 21px; color: var(--fg);
  letter-spacing: -0.01em; margin: 44px 0 14px; line-height: 1.3;
}
article h3 { font-weight: 700; font-size: 17px; color: var(--fg); margin: 32px 0 10px; }
.section-label {
  font-family: var(--mono); font-weight: 600; font-size: 12px; color: var(--green);
  letter-spacing: 0.08em; text-transform: uppercase; margin: 44px 0 16px; line-height: 1.35;
}

article ul, article ol { margin: 0 0 20px; padding-left: 1.4em; max-width: 62ch; }
article li { margin-bottom: 8px; }
article li::marker { color: var(--comment); }

article blockquote {
  border-left: 2px solid var(--green); background: var(--base);
  padding: 14px 20px; margin: 0 0 24px; color: var(--comment); max-width: 62ch;
}
article blockquote p { margin-bottom: 12px; }
article blockquote p:last-child { margin-bottom: 0; }

article code, code {
  font-family: var(--mono); font-size: 0.9em; color: var(--green-bright);
  background: var(--surface); border: var(--hair); border-radius: 3px; padding: 1px 5px;
}
article pre { background: var(--base); border: var(--hair); padding: 16px 18px; overflow-x: auto; margin: 0 0 24px; }
article pre code { background: none; border: none; color: var(--text); padding: 0; }

article hr { border: none; border-top: var(--hair); margin: 40px 0; }

/* ============ figures / media ============ */
article figure, figure { margin: 0 0 28px; }
article figure img, figure img { display: block; width: 100%; height: auto; border: var(--hair); }
article figure a:hover img, figure a:hover img { border-color: var(--subtle); }
article figcaption, figcaption {
  margin-top: 10px; font-size: 12.5px; color: var(--muted); text-align: center; line-height: 1.5;
}
.figure-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 0 0 28px; }
.figure-row figure { margin: 0; }
.figure-stack { display: flex; flex-direction: column; gap: 16px; margin: 0 0 28px; }

/* responsive video embeds (16:9) */
.video-embed { position: relative; padding-bottom: 56.25%; height: 0; margin: 0 0 28px; border: var(--hair); }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }
article figure video, figure video { display: block; width: 100%; height: auto; border: var(--hair); }

/* tables */
.table-wrap { overflow-x: auto; margin: 0 0 28px; }
table { width: 100%; border-collapse: collapse; border: var(--hair); font-size: 13.5px; }
th, td { border: var(--hair); padding: 10px 14px; text-align: left; vertical-align: top; }
th { color: var(--fg); font-weight: 600; }
td { color: var(--comment); }

/* footnotes */
.footnotes { margin-top: 48px; padding-top: 20px; border-top: var(--hair); font-size: 13px; color: var(--comment); }
.footnotes ol { padding-left: 1.4em; }
.footnotes li { margin-bottom: 8px; }
.footnote-ref { color: var(--green); font-size: 0.8em; vertical-align: super; }
.footnote-ref:hover { color: var(--green-bright); }

/* editor's note callout */
.editors-note {
  border: var(--hair); border-left: 2px solid var(--green); background: var(--base);
  padding: 14px 18px; margin: 0 0 28px; color: var(--comment); font-size: 14px;
}

/* post nav/footer links at the bottom of essays */
/* .nav-footer is a dim row of nav links, separated by a top rule */
.nav-footer {
  margin-top: 44px; padding-top: 22px; border-top: var(--hair);
  font-size: 13px; color: var(--muted); display: flex; gap: 18px; flex-wrap: wrap;
}
.nav-footer a { color: var(--comment); }
.nav-footer a:hover { color: var(--green-bright); }
/* .post-footer is the essay sign-off — a distinct panel (bright body copy, green
   links, green left accent) so it reads as its own section, not dim footer chrome */
.post-footer {
  margin-top: 44px; padding: 18px 20px;
  border: var(--hair-nested); border-left: 2px solid var(--green);
  background: var(--base); color: var(--text); line-height: 1.7; max-width: 62ch;
}

/* ============ dev-log layout with TOC sidebar ============ */
/* Single column by default: the TOC renders as a bordered block ABOVE the content
   (order:1) so it is never buried at the bottom. On wide screens it becomes a
   sticky right rail. */
.layout { display: grid; grid-template-columns: 1fr; gap: 28px; }
.content { min-width: 0; order: 2; }
.sidebar {
  order: 1; font-size: 12.5px;
  border: var(--hair); background: var(--base); padding: 16px 18px;
}
.toc-label { font-family: var(--mono); color: var(--green); font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase; margin-bottom: 10px; }
.toc-section, .sidebar a { display: block; font-family: var(--mono); font-size: 12.5px; color: var(--comment); padding: 5px 0; text-decoration: none; }
.toc-section + .toc-section, .sidebar a + a { border-top: var(--hair); }
.toc-section:hover, .sidebar a:hover { color: var(--green-bright); }

@media (min-width: 860px) {
  .layout { grid-template-columns: minmax(0, 1fr) 220px; gap: 48px; align-items: start; }
  .content { order: 1; }
  .sidebar {
    order: 2; position: sticky; top: 24px; align-self: start;
    border: none; border-left: var(--hair); background: none; padding: 2px 0 2px 22px;
  }
  .toc-section, .sidebar a { padding: 4px 0; }
  .toc-section + .toc-section, .sidebar a + a { border-top: none; }
}

/* ============ listing page (newsletter.html) ============ */
/* subscribe.js gives the widget no bottom margin; keep it clear of the filter bar. */
#newsletter-subscribe-top { display: block; margin-bottom: 2.5rem; }
.filter-bar { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 28px; }
.filter-btn {
  font-family: var(--mono); font-size: 12px; color: var(--comment);
  background: transparent; border: var(--hair); border-radius: var(--radius-tag, 4px);
  padding: 5px 12px; cursor: pointer; letter-spacing: 0.03em;
}
.filter-btn:hover { color: var(--fg); border-color: var(--subtle); }
.filter-btn.active, .filter-btn[aria-pressed="true"] { color: var(--deep); background: var(--green); border-color: var(--green); }

/* Rows bleed 18px into the column gutter (negative margin offsets the link
   padding) so the hover highlight + dividers frame the text instead of jamming
   against it, while the title/desc text stays aligned with the heading above. */
.post-list { list-style: none; border-top: var(--hair); margin: 0 -18px; }
.post-list li { border-bottom: var(--hair); }
.post-list a { display: block; padding: 18px 18px; }
.post-list a:hover { background: var(--surface); }
.post-title { color: var(--fg); font-size: 15px; font-weight: 600; margin-bottom: 5px; }
.post-list a:hover .post-title { color: var(--green-bright); }
.post-desc { color: var(--comment); font-size: 13.5px; line-height: 1.6; max-width: 70ch; }
.post-date { font-family: var(--mono); color: var(--muted); font-size: 12px; margin-top: 6px; letter-spacing: 0.02em; }

.hidden { display: none !important; }

/* ============ dev-log .content prose shares the essay styling ============ */
.content p, main > p { margin: 0 0 20px; max-width: 62ch; }
.content h2 { font-weight: 700; font-size: 21px; color: var(--fg); letter-spacing: -0.01em; margin: 44px 0 14px; line-height: 1.3; }
.content h3 { font-weight: 700; font-size: 17px; color: var(--fg); margin: 32px 0 10px; }
.content ul, .content ol { margin: 0 0 20px; padding-left: 1.4em; max-width: 62ch; }
.content li { margin-bottom: 8px; }
.content li::marker { color: var(--comment); }
.content strong { color: var(--fg); font-weight: 600; }
.content em { font-style: italic; }
.content blockquote { border-left: 2px solid var(--green); background: var(--base); padding: 14px 20px; margin: 0 0 24px; color: var(--comment); max-width: 62ch; }
.content figure { margin: 0 0 28px; }
.content figure img { display: block; width: 100%; height: auto; border: var(--hair); }
.content hr { border: none; border-top: var(--hair); margin: 40px 0; }

/* ============ per-post niche classes (comparison guides, hero images) ============ */
.hero-image { margin: 0 0 28px; }
.hero-image img { display: block; width: 100%; height: auto; border: var(--hair); }
.lead-note {
  border: var(--hair); border-left: 2px solid var(--green); background: var(--base);
  padding: 14px 18px; margin: 0 0 28px; color: var(--comment); font-size: 14px;
}
/* comparison-table status words — functional colors as product evidence */
td.yes, .yes { color: var(--green); }
td.no, .no { color: var(--red); }
td.partial, .partial { color: var(--yellow); }
.row-nori, tr.row-nori td { background: color-mix(in srgb, var(--green) 8%, transparent); }
.row-nori td:first-child, .tool { color: var(--fg); font-weight: 600; }
.table-note { margin-top: 10px; font-size: 12.5px; color: var(--muted); }

@media (max-width: 640px) {
  main, .layout, .listing, .legal-inner, .welcome-inner { padding: 40px 20px 20px; }
  h1 { font-size: clamp(28px, 8vw, 38px); }
  /* smaller gutter bleed so the row highlight clears the narrower screen edge */
  .post-list { margin: 0 -12px; }
  .post-list a { padding: 18px 12px; }
  /* top bar collapses to a burger: logo + ☰ on one row, links drop into a panel when opened */
  .nav-inner { flex-wrap: wrap; align-items: center; gap: 0; padding: 12px 20px; }
  .nav-logo { margin-right: auto; }
  .nav-burger { display: flex; flex-direction: column; gap: 4px; cursor: pointer; padding: 8px; margin: -8px -8px -8px 0; }
  .nav-burger span { display: block; width: 22px; height: 2px; background: var(--comment); transition: background var(--t-hover); }
  .nav-burger:hover span { background: var(--fg); }
  .nav-links { display: none; flex-basis: 100%; width: 100%; flex-direction: column; align-items: stretch; gap: 0; padding-top: 8px; }
  .nav-toggle:checked ~ .nav-links { display: flex; }
  .nav-links a { padding: 11px 2px; font-size: 14px; border-top: var(--hair); }
  .nav-links a.nav-cta { color: var(--green); }
  .nav-dropdown { position: static; width: 100%; border-top: var(--hair); }
  .nav-dropdown::after { display: none; }
  .nav-dropdown-toggle { width: 100%; text-align: left; padding: 11px 2px; font-size: 14px; }
  .nav-dropdown-menu {
    display: flex; position: static; top: auto; left: auto; min-width: 0;
    border: none; background: none; padding: 0 0 6px;
  }
  .nav-dropdown-menu a { padding: 8px 2px 8px 16px; font-size: 13.5px; }
  /* bottom bar: compact 2-column grid, drop the decorative colophon line */
  .footer-inner { flex-direction: column; align-items: flex-start; gap: 16px; padding: 28px 20px; }
  .footer-links { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; width: 100%; }
  .footer-colophon { display: none; }
}

/* ============ legal pages (privacy, terms) ============ */
.legal-inner { max-width: 760px; margin: 0 auto; padding: 56px 32px 24px; }
.legal-header { margin-bottom: 32px; padding-bottom: 20px; border-bottom: var(--hair); }
.legal-updated { font-family: var(--mono); font-size: 12.5px; color: var(--muted); margin-top: 10px; }
.legal-content p { margin: 0 0 18px; max-width: 68ch; }
.legal-content h2 { font-weight: 700; font-size: 21px; color: var(--fg); margin: 40px 0 14px; letter-spacing: -0.01em; }
.legal-content h3 { font-weight: 700; font-size: 16.5px; color: var(--fg); margin: 28px 0 10px; }
.legal-content ul { margin: 0 0 18px; padding-left: 1.4em; max-width: 68ch; }
.legal-content li { margin-bottom: 8px; }
.legal-content li::marker { color: var(--comment); }
.legal-content strong { color: var(--fg); font-weight: 600; }
.legal-content code { font-family: var(--mono); font-size: 0.9em; color: var(--green-bright); background: var(--surface); border: var(--hair); border-radius: 3px; padding: 1px 5px; }
.legal-callout { border: var(--hair); border-left: 2px solid var(--green); background: var(--base); padding: 16px 20px; margin: 0 0 20px; max-width: 68ch; }
.legal-callout p { margin-bottom: 12px; }
.legal-callout p:last-child { margin-bottom: 0; }

/* ============ agentics heatmap (blog post footer) ============ */
.agentics-heatmap {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.agentics-heatmap__grid {
  display: grid;
  gap: 5px;
  padding: 5px;
}
.agentics-heatmap__cell { aspect-ratio: 1; border-radius: 5px; }
.agentics-heatmap__fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    var(--deep) 0%,
    rgba(14, 14, 14, 0.85) 15%,
    rgba(14, 14, 14, 0.5) 40%,
    rgba(14, 14, 14, 0.15) 70%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* ============================================================
   SITE THEME OVERRIDES  --  keep byte-identical with the copy in
   the sibling stylesheet (style.css <-> blog.css). Every page on
   this site loads exactly one of the two, and together they cover
   all 84 pages that load design-tokens.css; test-design-language.sh
   fails if the two blocks drift apart.

   These three values align the shared pages with the redesigned
   homepage, so a visitor moving from "/" to any other page does not
   see the ground, the reading face and the wordmark all change under
   them (Martin, 2026-09-08).

   They live here and not in design-tokens.css on purpose. That file
   is a copy of the canonical v3.1 token sheet owned by the
   nori-design skill -- "copy this file into the site, do not
   hotlink" -- and test-design-tokens.py pins its SHA-256 precisely
   so a site cannot fork the design system by editing its local
   copy. Overriding downstream of it is the supported way to do this;
   editing it in place would have meant bumping that hash and
   silently forking the shared tokens for every repo that vendors
   them. If these values should become the design system's, they
   belong upstream in the skill, and then this block goes away.
   ============================================================ */
:scope {
  /* re-grounded on the homepage canvas; was the v3.1 ramp's own deep step */
  --deep: #121212;
  /* General Sans is the homepage's running-text face. Mono still leads
     on nav, labels, meta and code, exactly as the design law says --
     this is the body voice only. fonts.css explains why it arrives
     from Fontshare rather than being self-hosted. */
  --sans: 'General Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
}
body { font-family: var(--sans); }
/* The nav mark is "nori" with no trailing prompt caret: the homepage
   dropped it in the redesign and two marks cannot coexist in one site.
   Hidden rather than deleted from 84 files by hand, so restoring it is
   this one rule. */
.wordmark .prompt,
.nav-logo .prompt { display: none; }
/* ==================== end site theme overrides ==================== */

}