@layer page {
/* ==========================================
       CSS CUSTOM PROPERTIES & THEME
       (mirrored from security.html — keep in sync)
       ========================================== */
    /* T7: spacing, type, transition and layout tokens now live in tokens.css */


    

    

    /* Reset & base */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    html {
      scroll-behavior: smooth;
      scroll-padding-top: calc(var(--nav-height) + 1rem);
      -webkit-text-size-adjust: 100%;
    }

    body {
      font-family: var(--font-body);
      font-size: var(--text-body);
      line-height: 1.6;
      color: var(--text);
      background: var(--bg);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      overflow-x: hidden;
    }

    img { max-width: 100%; height: auto; display: block; }
    a { color: var(--accent-link); text-decoration: none; transition: color var(--transition-fast); }
    a:hover { color: var(--accent-hover); }

    :focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 2px;
      border-radius: 2px;
    }

    .skip-link {
      position: absolute;
      top: -100%;
      left: var(--space-4);
      background: var(--accent);
      color: var(--bg);
      padding: var(--space-2) var(--space-4);
      border-radius: 4px;
      font-weight: 500;
      z-index: 1000;
      font-size: 14px;
    }
    .skip-link:focus { top: var(--space-2); color: var(--bg); }

    .hidden { display: none !important; }

    /* Container + sections */
    .container {
      max-width: var(--max-width);
      margin: 0 auto;
      padding: 0 var(--space-6);
    }

    /* Rebased to match the homepage. The original clamp paid up to 128px top
       AND bottom, so two adjacent sections put 256px between a closing line and
       the next label — a gap that reads as a missing section. */
    section {
      padding-block: clamp(var(--space-10), 4.5vw, var(--space-16));
    }

    /* Typography (mirrored from security.html) */
    h1, h2, h3 {
      font-family: var(--font-display);
      line-height: 1.15;
      letter-spacing: -0.02em;
    }

    h1 {
      font-size: clamp(2.5rem, 5vw, 4rem);
      font-weight: 500;
      margin-bottom: var(--space-6);
    }

    h2 {
      font-size: clamp(1.75rem, 3.5vw, 2.5rem);
      font-weight: 500;
      margin-top: var(--space-12);
      margin-bottom: var(--space-6);
    }

    h3 {
      font-size: clamp(1.15rem, 2vw, 1.35rem);
      font-weight: 500;
      margin-top: var(--space-8);
      margin-bottom: var(--space-3);
    }

    .lede {
      font-size: clamp(17px, 1.3vw, 19px);
      color: var(--text-muted);
      line-height: 1.7;
      max-width: var(--measure);
      margin-bottom: var(--space-12);
    }

    .prose {
      max-width: var(--measure);
      font-size: var(--text-body);   /* T2 */
      color: var(--text);
    }
    .prose p {
      color: var(--text);
      margin-bottom: var(--space-4);
      line-height: 1.7;
    }
    .prose ul, .prose ol {
      color: var(--text);
      margin: var(--space-4) 0 var(--space-6) var(--space-6);
      line-height: 1.7;
    }
    .prose li { margin-bottom: var(--space-2); }
    .prose li::marker { color: var(--text-muted); }

    /* Inline code + code blocks */
    code, pre {
      font-family: var(--font-mono);
      background: var(--code-bg);
      border: 1px solid var(--border);
    }
    code {
      padding: 0.1rem 0.45rem;
      border-radius: 4px;
      font-size: 0.88em;
    }
    pre {
      padding: var(--space-4) var(--space-6);
      border-radius: 8px;
      overflow-x: auto;
      margin: var(--space-4) 0 var(--space-6);
      font-size: 13px;
      line-height: 1.6;
    }
    pre code {
      background: transparent;
      border: none;
      padding: 0;
      font-size: inherit;
    }

    /* Navigation (mirrored from security.html) */
    .nav {
      position: sticky;
      top: 0;
      z-index: 100;
      background: transparent;
      transition: background var(--transition-normal), box-shadow var(--transition-normal);
      height: var(--nav-height);
    }
    .nav.scrolled {
      background: color-mix(in srgb, var(--bg) 85%, transparent);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      box-shadow: 0 1px 0 var(--border);
    }
    .nav-inner {
      max-width: var(--max-width);
      margin: 0 auto;
      padding: 0 var(--space-6);
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .nav-brand {
      display: flex;
      align-items: center;
      gap: var(--space-3);
      color: var(--text);
      font-family: var(--font-display);
      font-size: 18px;
      font-weight: 500;
      letter-spacing: -0.01em;
    }
    .nav-brand:hover { color: var(--text); }
    .nav-brand svg { width: 28px; height: 28px; flex-shrink: 0; }

    .nav-links {
      display: flex;
      align-items: center;
      gap: var(--space-6);
      list-style: none;
    }
    .nav-links a {
      font-size: 14px;
      color: var(--text-muted);
      transition: color var(--transition-fast);
      font-weight: 400;
      padding: var(--space-3) 8px;
      min-height: 44px;
      display: inline-flex;
      align-items: center;
    }
    .nav-links a:hover { color: var(--text); }
    .nav-links a[aria-current="page"] { color: var(--accent-link); }

    .nav-toggle-theme {
      background: none;
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: var(--space-2);
      cursor: pointer;
      color: var(--text-muted);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: color var(--transition-fast), border-color var(--transition-fast);
      width: 36px;
      height: 36px;
    }
    .nav-toggle-theme:hover { color: var(--text); border-color: var(--text-muted); }
    .nav-toggle-theme svg { width: 18px; height: 18px; }

    /* Sun / Moon — dark is the default, so the sun (switch to light) shows.
       Only an explicit light choice swaps it. */
    .icon-sun { display: block; }
    .icon-moon { display: none; }
    [data-theme="light"] .icon-sun { display: none; }
    [data-theme="light"] .icon-moon { display: block; }

    .nav-github {
      font-size: 14px;
      color: var(--text-muted);
      display: flex;
      align-items: center;
      gap: var(--space-2);
    }
    .nav-github:hover { color: var(--text); }
    .nav-github svg { width: 16px; height: 16px; }

    .hamburger {
      display: none;
      background: none;
      border: none;
      cursor: pointer;
      color: var(--text);
      padding: var(--space-2);
    }
    .hamburger svg { width: 24px; height: 24px; }

    .mobile-menu {
      display: none;
      position: fixed;
      inset: 0;
      background: var(--bg);
      z-index: 200;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: var(--space-8);
    }
    .mobile-menu.open { display: flex; }
    .mobile-menu a {
      font-family: var(--font-display);
      font-size: 1.5rem;
      color: var(--text);
    }
    .mobile-menu a[aria-current="page"] { color: var(--accent-link); }
    .mobile-menu-close {
      position: absolute;
      top: var(--space-4);
      right: var(--space-6);
      background: none;
      border: none;
      cursor: pointer;
      color: var(--text);
      padding: var(--space-2);
    }
    .mobile-menu-close svg { width: 28px; height: 28px; }

    /* N6: was 768px — seven links, a toggle and a GitHub label do not fit a
       1000px viewport, so the brand wrapped onto two lines. */
    /* superseded by the 900px rule in the nav block below */

    /* Footer (mirrored from security.html) */
    .footer {
      border-top: 1px solid var(--border);
      padding: var(--space-12) 0 var(--space-8);
    }
    .footer-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--space-8);
      margin-bottom: var(--space-10);
    }
    .footer-col h2 {
      font-family: var(--font-mono);
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--text-muted);
      margin-bottom: var(--space-4);
      font-weight: 500;
    }
    .footer-col ul {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: var(--space-2);
    }
    .footer-col a {
      font-size: 14px;
      color: var(--text-muted);
    }
    .footer-col a:hover { color: var(--text); }
    .footer-bottom {
      border-top: 1px solid var(--border);
      padding-top: var(--space-6);
      display: flex;
      flex-direction: column;
      gap: var(--space-2);
    }
    .footer-bottom p {
      font-size: 13px;
      color: var(--text-muted);
    }
    .footer-bottom .footer-tagline {
      font-family: var(--font-mono);
      font-size: var(--text-meta);
      color: var(--text-muted);
    }
    @media (max-width: 768px) {
      .footer-grid {
        grid-template-columns: 1fr;
        gap: var(--space-6);
      }
    }

    /* Reveal animations */
    .reveal {
      opacity: 1;
      animation: bwReveal 0.7s var(--ease-out) both;
    }
    @keyframes bwReveal {
      from { opacity: 0; transform: translateY(20px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .reveal.visible { opacity: 1; transform: translateY(0); }
    @media (prefers-reduced-motion: reduce) {
      .reveal { opacity: 1; transform: none; transition: none; animation: none; }
    }

    /* ==========================================
       BLOG-SPECIFIC STYLES
       ========================================== */

    /* Blog post prose — wider than security.html to accommodate tables */
    .blog-post {
      max-width: 52ch;
    }

    /* Post header */
    .post-header {
      margin-bottom: var(--space-12);
    }
    .post-meta {
      font-family: var(--font-mono);
      font-size: 12px;
      color: var(--text-muted);
      letter-spacing: 0.05em;
      text-transform: uppercase;
      margin-bottom: var(--space-4);
      display: flex;
      gap: var(--space-4);
      align-items: center;
      flex-wrap: wrap;
    }
    .post-tier-badge {
      display: inline-block;
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      padding: 0.2rem 0.5rem;
      border-radius: 4px;
      border: 1px solid var(--border);
      background: var(--surface-offset);
      color: var(--text-muted);
    }
    .post-tier-badge.flagship {
      background: rgba(184, 134, 11, 0.12);
      color: var(--accent);
      border-color: var(--accent);
    }
    .post-tier-badge.tutorial {
      background: var(--surface-offset);
      color: var(--text-muted);
      border-color: var(--border);
    }

    /* Back link */
    .back-link {
      display: inline-flex;
      align-items: center;
      gap: 0.4em;
      font-size: 14px;
      color: var(--text-muted);
      margin-bottom: var(--space-8);
      transition: color var(--transition-fast);
    }
    .back-link:hover { color: var(--accent); }

    /* Blog post title — H1 injected above the .blog-post div by the template.
       Visually identical to .blog-post h1 so the page looks the same whether
       the post body starts with its own H1 or relies on the injected one. */
    .blog-post-title {
      font-family: var(--font-display);
      font-size: clamp(2rem, 4vw, 3rem);
      font-weight: 500;
      letter-spacing: -0.02em;
      line-height: 1.15;
      margin-bottom: var(--space-6);
      color: var(--text);
    }

    /* Blog post body typography */
    .blog-post h1 {
      font-family: var(--font-display);
      font-size: clamp(2rem, 4vw, 3rem);
      font-weight: 500;
      letter-spacing: -0.02em;
      line-height: 1.15;
      margin-bottom: var(--space-4);
      color: var(--text);
    }
    .blog-post h2 {
      font-family: var(--font-display);
      font-size: clamp(1.5rem, 3vw, 2rem);
      font-weight: 500;
      margin-top: var(--space-12);
      margin-bottom: var(--space-4);
    }
    .blog-post h3 {
      font-family: var(--font-display);
      font-size: clamp(1.1rem, 1.8vw, 1.3rem);
      font-weight: 500;
      margin-top: var(--space-8);
      margin-bottom: var(--space-3);
    }
    .blog-post h4 {
      font-size: 1.05rem;
      font-weight: 600;
      margin-top: var(--space-6);
      margin-bottom: var(--space-2);
    }
    .blog-post p {
      color: var(--text);
      margin-bottom: var(--space-4);
      line-height: 1.75;
      font-size: 17px;
      text-align: left;
      hyphens: auto;
    }
    .blog-post ul, .blog-post ol {
      margin: var(--space-4) 0 var(--space-6) var(--space-6);
      line-height: 1.75;
      font-size: 17px;
    }
    .blog-post li {
      margin-bottom: var(--space-2);
      color: var(--text);
    }
    .blog-post li::marker { color: var(--text-muted); }
    .blog-post strong { font-weight: 600; }
    .blog-post em { font-style: italic; }
    .blog-post blockquote {
      border-left: 3px solid var(--accent);
      padding: var(--space-3) var(--space-6);
      margin: var(--space-6) 0;
      background: var(--surface);
      border-radius: 0 8px 8px 0;
      font-style: italic;
      color: var(--text-muted);
    }
    .blog-post blockquote p { margin-bottom: var(--space-2); color: var(--text-muted); }
    .blog-post hr {
      border: none;
      border-top: 1px solid var(--border);
      margin: var(--space-8) 0;
    }
    .blog-post a { color: var(--accent-link); }
    .blog-post a:hover { color: var(--accent-hover); text-decoration: underline; }

    /* Tables in blog posts — wider layout for the 4-col tables in posts */
    .blog-post .post-table {
      width: 100%;
      border-collapse: collapse;
      margin: var(--space-6) 0;
      font-size: 15px;
      overflow-x: auto;
      display: block;
    }
    .blog-post .post-table th,
    .blog-post .post-table td {
      padding: 0.5rem 0.75rem;
      border: 1px solid var(--border);
      text-align: left;
      vertical-align: top;
      line-height: 1.5;
    }
    .blog-post .post-table th {
      background: var(--surface-offset);
      font-family: var(--font-mono);
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--text-muted);
      font-weight: 500;
    }
    .blog-post .post-table tr:nth-child(even) td {
      background: var(--surface);
    }
    @media (max-width: 768px) {
      .blog-post .post-table { font-size: 13px; }
      .blog-post .post-table th, .blog-post .post-table td { padding: 0.4rem 0.5rem; }
    }

    /* Post footer (sign-off block) */
    .post-footer {
      margin-top: var(--space-12);
      padding-top: var(--space-8);
      border-top: 1px solid var(--border);
      color: var(--text-muted);
      font-size: 15px;
      line-height: 1.7;
    }
    .post-footer a { color: var(--accent); }
    .post-footer a:hover { color: var(--accent-hover); }
    .post-footer .back-to-blog {
      display: inline-flex;
      align-items: center;
      gap: 0.4em;
      margin-top: var(--space-6);
      font-size: 14px;
      color: var(--text-muted);
    }
    .post-footer .back-to-blog:hover { color: var(--accent); }

    /* Archive page styles */
    .post-list {
      list-style: none;
      margin-top: var(--space-8);
    }
    .post-list-item {
      padding: var(--space-6) 0;
      border-bottom: 1px solid var(--border);
    }
    .post-list-item:last-child { border-bottom: none; }
    .post-list-meta {
      font-family: var(--font-mono);
      font-size: 12px;
      color: var(--text-muted);
      letter-spacing: 0.05em;
      text-transform: uppercase;
      margin-bottom: var(--space-2);
      display: flex;
      gap: var(--space-3);
      align-items: center;
      flex-wrap: wrap;
    }
    .post-list-item h3 {
      font-family: var(--font-display);
      font-size: 1.25rem;
      font-weight: 500;
      margin-bottom: var(--space-2);
      letter-spacing: -0.01em;
    }
    .post-list-item h3 a { color: var(--text); }
    .post-list-item h3 a:hover { color: var(--accent); }
    .post-list-excerpt {
      color: var(--text-muted);
      font-size: 15px;
      line-height: 1.6;
      max-width: 46ch;
    }

    /* RSS link */
    .rss-link {
      display: inline-flex;
      align-items: center;
      gap: 0.4em;
      font-size: 14px;
      color: var(--text-muted);
      margin-top: var(--space-8);
      padding: var(--space-2) var(--space-4);
      border: 1px solid var(--border);
      border-radius: 6px;
      transition: color var(--transition-fast), border-color var(--transition-fast);
    }
    .rss-link:hover { color: var(--accent); border-color: var(--accent); }
    .rss-icon { color: #f26522; }
    
    .reading-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: var(--accent); z-index: 9999; transition: width 80ms linear; pointer-events: none; }
    @media (prefers-reduced-motion: reduce) { .reading-progress { transition: none; } }
    
    .blog-filter {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-2);
      margin-top: var(--space-8);
      margin-bottom: var(--space-10);
    }
    .blog-chip {
      font-family: var(--font-mono);
      font-size: 12px;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--text-muted);
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 999px;
      padding: 0.45rem 0.9rem;
      cursor: pointer;
      transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
      min-height: 36px;
    }
    .blog-chip:hover { color: var(--text); border-color: var(--text-muted); }
    .blog-chip.active {
      color: var(--bg);
      background: var(--accent);
      border-color: var(--accent);
    }
    .blog-noresults {
      font-family: var(--font-mono);
      font-size: 13px;
      color: var(--text-muted);
      margin-bottom: var(--space-8);
    }
    .blog-card {
      display: block;
      color: var(--text);
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: var(--space-6);
      transition: border-color var(--transition-fast), transform var(--transition-fast);
    }
    .blog-card:hover {
      color: var(--text);
      border-color: var(--accent);
      transform: translateY(-2px);
    }
    .blog-card-meta {
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: var(--text-muted);
      display: flex;
      flex-wrap: wrap;
      gap: 0.4em;
      align-items: center;
      margin-bottom: var(--space-3);
    }
    .blog-card-cat { color: var(--accent-link); }
    .blog-card-dot { color: var(--border); }
    .blog-card-title {
      font-family: var(--font-display);
      font-weight: 500;
      letter-spacing: -0.01em;
      line-height: 1.2;
      font-size: 1.2rem;
      margin-bottom: var(--space-2);
    }
    .blog-card:hover .blog-card-title { color: var(--accent); }
    .blog-card-excerpt {
      color: var(--text-muted);
      font-size: 15px;
      line-height: 1.6;
    }
    .blog-featured-wrap { margin-bottom: var(--space-10); }
    .blog-card.featured {
      padding: var(--space-10);
      background: var(--surface-offset);
    }
    .blog-card.featured .blog-card-title {
      font-size: clamp(1.6rem, 3.2vw, 2.4rem);
      margin-bottom: var(--space-3);
    }
    .blog-card.featured .blog-card-excerpt {
      font-size: 17px;
      max-width: 46ch;
    }
    .blog-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: var(--space-6);
    }
    .blog-card.filtered-out { display: none; }
    .blog-card.featured { padding: var(--space-6); }
    @media (max-width: 768px) {
      .blog-grid { grid-template-columns: 1fr; }
      .blog-card.featured { padding: var(--space-6); }
    }

}


@layer page {
  /* live count per topic, so the reader knows the shape of the archive */
  .chip-n {
    font-family: var(--font-mono);
    font-size: 10px;
    margin-left: 0.4em;
    opacity: 0.7;
    font-variant-numeric: tabular-nums;
  }
  .blog-card-meta time { font-variant-numeric: tabular-nums; }

  /* 60 cards rendered at once in 2.3, with no pagination and no sort */
  .blog-more-wrap { display: flex; justify-content: center; margin-top: var(--space-10); }
  .blog-more {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 12px 24px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    transition: border-color var(--transition-fast), color var(--transition-fast);
  }
  .blog-more:hover { border-color: var(--accent); color: var(--accent-link); }
  .blog-card[hidden] { display: none; }
}

/* capture block styles, shared with blog.css (F03) */
@layer page {

  .post-capture-section { padding-top: 0; }
  @media (max-width: 640px) {
    .post-capture { padding: var(--space-6); }
    .post-capture-form { flex-direction: column; }
    .post-capture .btn-primary { width: 100%; }
  }
}

/* ==========================================================================
   T5 — mono legibility floor
   Uppercase mono strips the ascender/descender cues that make a word
   recognisable at a glance, and mono strips the width variation too. Anything
   a reader must actually read is now 12–13px, with tracking raised to match.
   ========================================================================== */
@layer page {
  .power-tools-label, .tech-card-label, .code-block-header,
  .fit-legend, .arch-node-label, .workflow-number,
  .blog-card-cat, .blog-card-meta, .post-meta, .post-cat, .chip-n,
  .terminal-title, .footer-col h2 { font-size: var(--text-meta); }
  thead th, th[scope="col"],
  .arch-node-desc, .shot-placeholder, .shipping-badge,
  .form-consent, .form-consent a, .fine-print, .fine-print a,
  .report-card figcaption, figcaption, .faq-answer h3, .disclosure h3,
  .footer-bottom p, .footer-tagline { font-size: var(--text-meta); }
  .post-cat { letter-spacing: 0.06em; }
  .footer-col h2 { letter-spacing: 0.08em; }
}

/* ==========================================================================
   Nav: Product dropdown + waitlist CTA (P3)
   Five text items instead of nine, and the site's one conversion now lives in
   the chrome of every page rather than only on the homepage.
   ========================================================================== */
@layer chrome {
  .nav-dropdown { position: relative; }
  .nav-dropdown-trigger {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 14px;
    /* A <button> among <a>s: the UA's "font:" shorthand resets line-height and drops the
       inherited text-rendering, so "Product" drew with kerning/ligatures OFF and a 44px box
       while its six sibling links had optimizeLegibility and 46.4px. Same font, visibly
       different word. Restore both. (user report, 2026-09-08) */
    line-height: 1.6;
    text-rendering: optimizeLegibility;
    color: var(--text-muted);
    padding: var(--space-3) 8px;
    min-height: 44px;
    transition: color var(--transition-fast);
  }
  .nav-dropdown-trigger:hover,
  .nav-dropdown-trigger[aria-expanded="true"] { color: var(--text); }
  .nav-caret { width: 12px; height: 12px; transition: transform var(--transition-fast); }
  .nav-dropdown-trigger[aria-expanded="true"] .nav-caret { transform: rotate(180deg); }

  .nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 230px;
    list-style: none;
    margin: 0;
    padding: var(--space-2) 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    z-index: 120;
  }
  .nav-dropdown-menu[hidden] { display: none; }
  .nav-dropdown-menu a {
    display: block;
    padding: var(--space-3) 16px;
    font-size: 14px;
    color: var(--text);
    min-height: 0;
  }
  .nav-dropdown-menu a:hover { color: var(--accent-link); background: var(--surface-offset); }

  /* The theme toggle is the one nav control with no font declared, so it inherited the
     browser default (Arial 13.33px) instead of Satoshi. Icon-only today, wrong the moment
     it carries a label. (2026-09-08) */
  .nav-toggle-theme { font-family: var(--font-body); font-size: 14px; line-height: 1.6; text-rendering: optimizeLegibility; }

  .nav-cta {
    background: var(--accent);
    color: #141311;
    border-radius: var(--radius-md);
    padding: var(--space-3) 16px;
    font-size: 14px;
    font-weight: 500;
    min-height: 0;
    transition: background var(--transition-fast), transform var(--transition-fast);
  }
  .nav-cta:hover { background: var(--accent-hover); color: #141311; transform: translateY(-1px); }
  .nav-github svg { width: 18px; height: 18px; }

  /* N6: five items + toggle + mark + button fit to about 900px. */
  @media (max-width: 1024px) {
    .nav-links { display: none; }
    .hamburger { display: flex; }
  }
  /* the pinned bar costs 64px of a 667px phone viewport; 52px is the same
     benefit at a lower rent. Not hide-on-scroll — that would hide the CTA
     exactly while someone is reading. */
  @media (max-width: 768px) {
    :root { --nav-height: 52px; }
  }
  /* The CTA lives inside .nav-links, and `.nav-links a` (0,1,1) outranks `.nav-cta` (0,1,0), so the
     amber button rendered with muted-grey link text. Raise the button above its own container's
     link rule. (user report, 2026-09-08) */
  .nav-links a.nav-cta,
  .nav-links a.nav-cta:hover {
    color: #141311;
    padding: var(--space-3) 16px;
    font-weight: 500;
    min-height: 0;
  }
  .mobile-menu .nav-cta { font-family: var(--font-body); font-size: 1.1rem; padding: 12px 24px; color: #141311; }
  .mobile-menu .nav-cta:hover { color: #141311; }
}

/* ==========================================================================
   T5 (completed) — the 13px legibility floor, applied everywhere
   The first T5 pass named 16 selectors. Sixty more were still setting mono
   labels at 10–12px, which is the type this site asks a reader to trust:
   consent lines, table headers, captions, chips, meta rows. Uppercase mono
   strips the ascender and descender cues that make a word recognisable, so it
   needs more size than lowercase body text, not less.

   Deliberately exempt, and why:
     .claim-ref            a superscript marker inside 17px prose
     .tui *, .statusbar    terminal emulation — resizing breaks ASCII alignment
     .post-toc li::before  a numeral, not a word
   ========================================================================== */
@layer page {
  .footer-col h2,
  .footer-tagline,
  .post-tier-badge,
  .blog-chip,
  .blog-more,
  .post-list-meta,
  .blog-post .post-table th,
  .tier-badge,
  .arch-node-desc,
  .arch-node-label,
  .hardware-table th,
  .fit-table th,
  .spec-table th,
  .shipping-badge,
  .check-howto .check-label,
  .check-howto .check-fail-desc code,
  .form-consent,
  .isnt-col h3,
  .report-card figcaption,
  .shot-placeholder,
  .section-rail a > span,
  .preview-caption,
  .chip,
  .tui-back,
  .tui-hint,
  .entry-meta,
  .glossary-search-label,
  .glossary-count,
  .ty-label,
  .ty-next h2, .ty-more h2,
  .ty-steps .n,
  .related-cat,
  .post-cat,
  .chip-n,
  .blog-card-meta,
  .blog-card-cat,
  .post-meta,
  .section-label,
  /* tracking has to come down as the size comes up, or 13px uppercase mono
     sets too loose and stops reading as one word */
  .section-label, .footer-col h2, .act-break .act-num { letter-spacing: 0.07em; }
  .blog-card-cat, .related-cat, .post-cat, .chip-n { letter-spacing: 0.05em; }
}

/* ==========================================================================
   Adjacent-section spacing
   `section` pays clamp(--space-16, 8vw, --space-32) top AND bottom. Between two
   independent sections that rhythm is right; between a hero and the content it
   directly introduces it doubles into a ~300px hole. The hero keeps its top
   padding and hands off to the archive.
   ========================================================================== */
@layer page {
  .blog-hero { padding-bottom: var(--space-10); }
  .blog-hero .lede { margin-bottom: 0; }
  .blog-archive { padding-top: var(--space-8); }
  .post-capture-section { padding-top: 0; }
}

@layer page {
  /* The capture block sits outside .blog-post, so it never inherited a measure:
     its intro ran ~105 characters a line and the consent line ~130. */
  .post-capture > p { max-width: var(--measure); }
  .post-capture .form-consent { max-width: 46ch; }
}

@layer page {
  /* The featured card sits inside .blog-grid, which is two columns — without
     this it was squeezed into one, beside an unrelated card. The .blog-featured-wrap
     rule assumed it lived outside the grid; it never did. Spanning is the fix
     that keeps the filter JS working, which depends on DOM position. */
  .blog-card.featured {
    grid-column: 1 / -1;
    margin-bottom: var(--space-4);
  }
  .blog-card.featured .blog-card-excerpt { max-width: var(--measure); }
}

@layer page {
  /* The meta row packed its items at 5.2px while the word space inside
     "4 min read" is 7.8px — so two distinct values read as one string, and the
     date ran into the reading time with nothing between them. Separators
     restored (matching the post pages, which already used them) and the gap
     raised clear of the word space. */
  .blog-card-meta { column-gap: var(--space-2); }
  .meta-sep { color: var(--text-muted); opacity: 0.55; }
}

@layer page {
  /* .blog-chips carried no rule, so the filter row sat flush against the grid
     — the chips read as the first card's header rather than as a control. */
  .blog-chips { margin-bottom: var(--space-10); }
  .blog-grid  { row-gap: var(--space-8); }
}

/* T5 floor, in @layer utilities so container rules cannot beat it. tokens.css
   declares utilities after page; layer order beats specificity. Terminal type
   stays exempt by construction — nothing here targets .tui / .report-pre. */
@layer utilities {
  thead th, th[scope="col"], .arch-node-desc, .shot-placeholder, .shipping-badge,
  .form-consent, .form-consent a, .fine-print, .fine-print a,
  figcaption, .faq-answer h3, .disclosure h3, .report-card h3,
  .footer-bottom p, .footer-tagline { font-size: var(--text-meta); }
}