/* blog.css — extracted from siliconai-blog-v184.html */

/* blog.css — extracted from siliconai-blog-v118.html */

  :root {
    /* v105 cool system */
    --cream: #fffdf7;
    --cream-2: #F1EFE9;
    --card: #ffffff;
    --ink: #0f1117;
    --ink-soft: #3b404b;
    --muted: #888e9c;
    --teal: #5a6cff;
    --teal-deep: #2940ff;
    --teal-text: #1b2ad1;
    --teal-tint: #e9ebff;
    --green: #CDF4E2;
    --i-mint: #00A86B;
    --sage: #4F8567;
    --rule: rgba(15,17,23,0.12);
    --rule-soft: rgba(15,17,23,0.07);
    --aside-bg: #F1EFE9;
    --measure: 48rem;
    --hero-h: 520px;
    --hero-pull: -380px;
    --reading-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  }

  * { box-sizing: border-box; }

  html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    font-size: 100%;
  }

  body {
    margin: 0;
    background-color: var(--cream);
    color: var(--ink);
    font-family: var(--reading-serif);
    font-weight: 400;
    font-size: 1.235rem;
    line-height: 1.75;
    letter-spacing: 0;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-feature-settings: "kern", "liga", "calt";
    overflow-x: clip;
  }

  /* full-page animated brand-grid background (paints its own cream + sprites) */
  #techgrid {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    pointer-events: none;
  }

  /* Reading progress hairline */
  .progress {
    position: fixed;
    top: 0; left: 0;
    height: 2px;
    width: 0%;
    background: var(--teal-deep);
    z-index: 50;
    transition: width 0.08s linear;
  }

  .wrap {
    max-width: var(--measure);
    margin: 0 auto;
    padding: 0 1.6rem;
    position: relative;
    z-index: 1;
  }

  /* ---- Masthead ---- */
  header.masthead {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255,253,247,0.82);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(15,17,23,0.10);
    margin-bottom: 4.5rem;
  }
  .masthead-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 clamp(20px, 5vw, 56px);
    height: 66px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }
  .masthead-inner .lock { transform: translateY(-2px); cursor: pointer; }
  .lock {
    font-family: "Funnel Display", sans-serif;
    font-weight: 700;
    font-size: 19px;
    letter-spacing: -0.02em;
    color: var(--ink);
  }
  .lock .dot { color: var(--teal); }
  .lock .by {
    font-family: "Geist Mono", monospace;
    font-size: 9.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
    margin-left: 9px;
  }
  .kicker-tag {
    font-family: "Geist Mono", monospace;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
  }

  /* ---- Title block ---- */
  .titleblock { margin-bottom: 1.8rem; }

  .eyebrow {
    font-family: "Geist Mono", monospace;
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--teal-text);
    margin-bottom: 1.6rem;
    display: flex;
    align-items: center;
    gap: 0.7rem;
  }
  .eyebrow::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--rule);
  }

  h1.title {
    font-family: "Funnel Display", sans-serif;
    font-weight: 700;
    font-size: clamp(2.7rem, 5.8vw, 4.8rem);
    line-height: 1.02;
    letter-spacing: -0.025em;
    margin: 0 0 1.5rem;
    color: var(--ink);
  }
  h1.title .dot { color: var(--teal); }
  h1.title .title-accent {
    font-family: "Instrument Serif", serif;
    font-style: italic;
    font-weight: 400;
    font-size: 1.06em;
    letter-spacing: 0;
    text-decoration: underline;
    text-decoration-color: var(--teal-deep);
    text-decoration-thickness: 2.5px;
    text-underline-offset: 5px;
  }

  .standfirst {
    font-family: "Instrument Serif", serif;
    font-size: clamp(1.45rem, 3.4vw, 1.9rem);
    line-height: 1.32;
    font-style: italic;
    color: var(--ink-soft);
    letter-spacing: 0;
    margin: 0 0 1.9rem;
    max-width: 34rem;
    border-left: 3px solid #CDF4E2;
    padding-left: 1.1rem;
  }
  .standfirst .mark { background: linear-gradient(transparent 58%, #CDF4E2 58%); padding: 0 0.04em; }

  .byline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 1.1rem;
    padding-top: 0;
    font-family: "Geist Mono", monospace;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    color: var(--muted);
    text-transform: uppercase;
  }
  .byline .sep { color: var(--rule); }
  .pdf-mini{ display:inline-flex; align-items:center; gap:0.4em; font:inherit;
    letter-spacing:inherit; text-transform:inherit; line-height:1; color:var(--muted);
    background:transparent; border:1px solid var(--rule); border-radius:999px;
    padding:0.2em 0.6em; margin-left:0.15em; cursor:pointer;
    transition:color .15s, border-color .15s, background .15s;
    -webkit-tap-highlight-color:transparent; }
  .pdf-mini svg{ width:1.05em; height:1.05em; display:block; }
  .pdf-mini:hover, .pdf-mini:focus-visible{ color:var(--teal-deep); border-color:var(--teal-deep); background:var(--teal-tint); }
  @media (max-width:520px){
    .pdf-mini .pdf-mini-label{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
    .pdf-mini{ padding:0.25em 0.35em; gap:0; }
  }

  /* ---- Article body ---- */
  article p {
    margin: 0 0 1.4rem;
    hyphens: manual;
    -webkit-hyphens: manual;
    overflow-wrap: normal;
    text-wrap: wrap;
  }

  article .lead {
    font-size: 1.32rem;
    line-height: 1.62;
    color: var(--ink);
  }
  article .lead::first-letter {
    font-family: "Funnel Display", sans-serif;
    font-weight: 700;
    font-size: 3.7rem;
    line-height: 0.74;
    float: left;
    margin: 0.42rem 0.7rem 0 0;
    color: var(--teal-deep);
  }

  /* Key term: periwinkle highlight wash for load-bearing ideas */
  article .key {
    background: linear-gradient(transparent 58%, #CDF4E2 58%);
    padding: 0 0.05em;
    font-weight: 500;
    color: var(--ink);
  }

  /* Section takeaway — one-line distillation under each heading */
  .takeaway {
    position: relative;
    text-align: left;
    font-family: 'Instrument Sans', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.66;
    color: var(--ink);
    margin: 2.4rem 0 2.7rem;
    letter-spacing: 0;
    background: #F2F4FF;
    border-radius: 12px;
    padding: 1.5rem 1.7rem 1.5rem 2.8rem;
  }
  .takeaway .tk-x {
    position: absolute; left: 0; top: 50%;
    transform: translate(-50%, -50%);
    width: 58px; height: 58px;
    color: var(--teal-deep); pointer-events: none;
  }
  @media (max-width: 600px) {
    .takeaway { padding-left: 2rem; }
    .takeaway .tk-x { width: 42px; height: 42px; }
  }
  .clead { color: #7FCBA6; font-weight: 700; margin-right: 0.3em; }
  .takeaway .tk-text { display: block; }
  .takeaway p { margin: 0; }
  .takeaway p + p { margin-top: 0.95rem; }
  .section-head + .takeaway { margin-top: 2.4rem; }
  /* v179: uniform icon + caption spacing under every chart */
  figure:has(.chartwrap) .chart-tools { float: right; margin: 0.9rem 0 0 1.2rem; }
  figure:has(.chartwrap) figcaption { margin-top: 0.9rem; }
  figure:has(.chartwrap) .chartwrap { padding-bottom: 0; }
  /* scroll reveal — matches the site: fade-up, plus a focus-pull (blur -> sharp) on one word per title */
  .blurw { display: inline; }
  .section-head h2 .blurw, .fold-sum h2 .blurw {
    font-family: "Instrument Serif", serif;
    font-style: italic;
    font-weight: 400;
    font-size: 1.08em;
    text-decoration: underline;
    text-decoration-color: var(--teal-deep);
    text-decoration-thickness: 2.5px;
    text-underline-offset: 5px;
  }
  @media (prefers-reduced-motion: no-preference) {
    .js-sr article > * { opacity: 0; transform: translateY(18px);
      transition: opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1); }
    .js-sr article > *.sr-in { opacity: 1; transform: none; }
    .js-sr .section-head h2 .blurw { filter: blur(7px); transition: filter 1.3s cubic-bezier(.22,1,.36,1) .15s; }
    .js-sr .section-head.sr-in h2 .blurw { filter: blur(0); }
  /* v178: remove focus treatment on main titles (uniform Funnel Display, no italic/underline/blur) */
  .section-head h2 .blurw, .section-head.sr-in h2 .blurw { font-family: inherit !important; font-style: normal !important; font-weight: inherit !important; font-size: inherit !important; text-decoration: none !important; -webkit-text-decoration: none !important; filter: none !important; transition: none !important; color: inherit !important; }
  }

  /* Section markers */
  .section-head {
    margin: 4rem 0 2rem;
    display: flex;
    align-items: baseline;
    gap: 1.1rem;
  }
  .section-head .num { display: none; }
  .section-head h2 {
    font-family: "Funnel Display", sans-serif;
    font-weight: 600;
    font-size: clamp(2.4rem, 5.7vw, 3.15rem);
    line-height: 1.12;
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--ink);
    max-width: 30rem;
    text-wrap: balance;
  }
  .brd { display: none; }
  @media (min-width: 1100px) { .brd { display: inline; } }
  @media (min-width: 1100px) { .section-head h2 { max-width: none; font-size: 2.9rem; } }
  .section-head h2::after { content: "."; color: #0f1117; }
  .section-head h2.is-q::after { content: none; }
  .section-head + p { margin-top: 0; }

  article strong {
    font-weight: 600;
    color: var(--ink);
  }

  a.x {
    color: var(--teal-text);
    text-decoration: none;
    border-bottom: 1px solid var(--teal);
    padding-bottom: 0.5px;
  }

  em { font-style: italic; }

  /* Pull quote */
  .pull .mark { background: linear-gradient(transparent 58%, #CDF4E2 58%); padding: 0 0.06em; }
  .codeblock { background: #0b0e16; border: 1px solid rgba(180,188,255,0.10); border-radius: 12px;
    padding: 1.15rem 1.35rem; margin: 1.7rem 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .codeblock code { display: block; white-space: pre; font-family: "Geist Mono", ui-monospace, monospace;
    font-size: 0.82rem; line-height: 1.7; color: #cfd3e6; }
  .codeblock .cm { color: #6b7280; }
  .codeblock .kw { color: #CDF4E2; }
  .codeblock .fl { color: #8f9bff; }
  .codeblock .vr { color: #eef0f8; }
  .pull {
    margin: 1.8rem -0.5rem 3rem;
    padding: 0 0 0 1.6rem;
    border-left: 3px solid var(--green);
    font-family: "Instrument Serif", serif;
    font-style: italic;
    font-size: clamp(1.5rem, 3.6vw, 1.95rem);
    line-height: 1.34;
    color: var(--ink);
    letter-spacing: 0;
  }

  /* Structured list device */
  .classes {
    margin: 2.4rem 0 2.8rem;
    border-top: 1px solid var(--rule);
  }
  .cls {
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--rule);
    display: grid;
    grid-template-columns: 2.6rem 1fr;
    gap: 0.4rem 1.1rem;
  }
  .cls .mk {
    font-family: "Geist Mono", monospace;
    font-size: 0.8rem;
    color: var(--teal-deep);
    font-weight: 500;
    grid-row: span 2;
  }
  .cls h3 {
    font-family: "Funnel Display", sans-serif;
    font-weight: 600;
    font-size: 1.18rem;
    letter-spacing: -0.01em;
    margin: 0;
    color: var(--ink);
  }
  .cls p {
    margin: 0;
    font-family: var(--reading-serif);
    font-size: 1.08rem;
    line-height: 1.62;
    color: var(--ink-soft);
  }
  .readnext { background: #2940ff; margin: 0.4rem 0 0; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
    width: 100vw; padding: clamp(2.4rem,5vw,3.4rem) clamp(1.2rem,5vw,2.6rem) clamp(6px,1.2vw,18px); box-sizing: border-box; }
  .rn-inner { max-width: 1120px; margin: 0 auto; }
  .rn-eyebrow { font-family: "Geist Mono", monospace; font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase;
    color: rgba(255,255,255,0.72); margin: 0 0 1.4rem; display: flex; align-items: baseline; gap: 0.45rem; }
  .rn-eyebrow .rgly { color: #CDF4E2; }
  .rn-grid { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 0.35rem; }
  .rn-grid::-webkit-scrollbar { display: none; }
  .rn-card { scroll-snap-align: start; flex: 0 0 84%; }
  @media (min-width: 760px) {
    .rn-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.3rem; overflow: visible; }
    .rn-card { flex: none; }
  }
  .rn-card { display: flex; flex-direction: column; background: #fff; border-radius: 18px; overflow: hidden; text-decoration: none;
    box-shadow: 0 12px 30px -18px rgba(10,14,40,0.5); transition: transform .18s ease, box-shadow .18s ease; }
  .rn-card:hover { transform: translateY(-3px); box-shadow: 0 22px 46px -20px rgba(10,14,40,0.6); }
  .rn-img { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #0b0e16; }
  .rn-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .rn-body { padding: 1.1rem 1.35rem 1.25rem; display: flex; flex-direction: column; flex: 1 1 auto; }
  .rn-title { font-family: "Funnel Display", system-ui, sans-serif; font-weight: 600; font-size: 1.24rem; line-height: 1.14; color: var(--ink); margin: 0 0 0.6rem;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-wrap: balance;
    min-height: calc(2 * 1.14em); }
  .rn-teaser { font-family: var(--reading-serif); font-style: italic; font-size: 1.02rem; line-height: 1.42; color: #5b606e; margin: 0 0 0.9rem; padding-left: 0.9rem; border-left: 2px solid #CDF4E2;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-wrap: balance;
    min-height: calc(2 * 1.42em); }
  .rn-teaser .mark { background: linear-gradient(transparent 58%, #CDF4E2 58%); padding: 0 0.04em; }
  .rn-cta { align-self: flex-end; margin-top: auto; display: inline-flex; align-items: center; gap: 0.5rem;
    background: #CDF4E2; color: #0d2c20; font-family: 'Instrument Sans',sans-serif; font-weight: 600; font-size: 0.9rem;
    padding: 0.5rem 1.05rem; border-radius: 14px; transition: background .15s ease; }
  .rn-card:hover .rn-cta { background: #bcefd6; }
  .rn-cta .rn-chev { font-family: "Geist Mono", monospace; font-size: 1.05em; }
  .rn-slider { display: none; }
  @media (max-width: 759px) {
    .rn-slider { display: block; position: relative; height: 3px; border-radius: 2px;
      background: rgba(255,255,255,0.16); margin: 1rem 1.1rem 0; overflow: hidden; }
    .rn-thumb { position: absolute; top: 0; left: 0; height: 100%; width: 50%;
      background: #CDF4E2; border-radius: 2px; }
  }
  .credit-end {
    margin: 2.4rem 0 0.5rem;
    font-family: "Geist Mono", monospace;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    color: var(--muted);
  }
  .credit-end .ce-label { text-transform: uppercase; letter-spacing: 0.18em; margin-right: 0.7rem; color: var(--muted); }
  .cls .who {
    font-family: "Geist Mono", monospace;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 0.4rem;
  }

  /* Aside / parenthetical block */
  .aside {
    margin: 2.6rem 0;
    padding: 1.5rem 1.7rem;
    background: var(--aside-bg);
    border-radius: 6px;
    font-size: 1.04rem;
    line-height: 1.62;
    color: var(--ink-soft);
  }
  .aside .label {
    font-family: "Geist Mono", monospace;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--teal-text);
    display: block;
    margin-bottom: 0.6rem;
  }
  .aside p { margin: 0; }

  /* ---- Image placeholders (to be generated in Higgsfield, labelled in Canva) ---- */
  figure.ph {
    margin-block: clamp(2.4rem, 5vw, 3.4rem);
  }
  /* placeholder = dark "lighting plate" previewing the house style:
     warm copper/gold glow upper-right, single periwinkle rim, fading to black lower-left */
  .ph-frame {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    border: 1.5px dashed rgba(90,108,255,0.5);
    background-color: #0a0c12;
    background-image:
      radial-gradient(135% 135% at 80% 22%, rgba(224,166,108,0.18), transparent 44%),
      radial-gradient(120% 120% at 84% 26%, rgba(90,108,255,0.16), transparent 48%),
      linear-gradient(150deg, #1b1f29 0%, #0c0e15 56%, #050609 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    text-align: center;
    padding: 1.6rem;
    overflow: hidden;
  }
  .ph-frame .ph-no {
    position: absolute;
    top: 11px; left: 13px;
    font-family: "Geist Mono", monospace;
    font-size: 0.66rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #aab4ff;
  }
  .ph-frame .ph-aspect {
    position: absolute;
    top: 11px; right: 13px;
    font-family: "Geist Mono", monospace;
    font-size: 0.66rem;
    letter-spacing: 0.08em;
    color: rgba(238,240,247,0.55);
  }
  .ph-frame .ico {
    width: 34px; height: 34px;
    border-radius: 50%;
    border: 1.5px solid rgba(224,166,108,0.7);
    display: flex; align-items: center; justify-content: center;
    color: #e6b87f;
    font-family: "Geist Mono", monospace;
    font-size: 1.05rem;
    box-shadow: 0 0 26px rgba(224,166,108,0.22);
  }
  .ph-frame .ph-title {
    font-family: "Geist Mono", monospace;
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(238,240,247,0.82);
  }
  figcaption {
    margin-top: 0.95rem;
    font-family: 'Instrument Sans',sans-serif;
    font-size: 0.95rem;
    line-height: 1.58;
    color: var(--ink-soft);
  }
  figcaption .cap-label {
    font-family: "Geist Mono", monospace;
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--teal-text);
    display: block;
    margin-bottom: 0.4rem;
  }
  figcaption .ph-prompt {
    display: block;
    margin-top: 0.7rem;
    font-family: "Geist Mono", monospace;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--muted);
    border-left: 2px solid var(--green);
    padding-left: 0.75rem;
  }

  /* Section divider */
  .div {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin: 3.5rem 0;
    color: #CDF4E2;
  }
  .div .dsym { width: 2rem; height: 2rem; fill: currentColor; display: block; }

  /* ===== v158 · Part 2 reading devices (brand palette only) ===== */
  /* B · Pull quote — no accent rule, big serif, oversized pale-mint quote mark */
  .pquote { margin: 3rem 0; padding: 0 0 0 1.6rem; border-left: 3px solid var(--green); max-width: 40rem; }
  .pquote .pq-txt {
    font-family: "Instrument Serif", serif; font-style: italic;
    font-size: clamp(1.5rem, 3.4vw, 1.95rem); line-height: 1.34;
    color: var(--ink); letter-spacing: 0;
  }
  /* D · Key-takeaway note box — NO left accent line, pale-mint card, brand-symbol icon */
  .keynote {
    display: flex; gap: 0.95rem; align-items: flex-start;
    background: rgba(205,244,226,0.32); border: 1px solid #CDF4E2;
    border-radius: 14px; padding: 1.25rem 1.45rem; margin: 2.8rem 0;
  }
  .keynote .kn-sym { flex: 0 0 auto; width: 1.9rem; height: 1.9rem; margin-top: 0.15rem; }
  .keynote .kn-sym svg { width: 100%; height: 100%; fill: var(--i-mint); display: block; }
  .keynote .kn-bd { font-size: 1rem; line-height: 1.56; color: var(--ink-soft); }
  .keynote .kn-lead {
    display: block; margin-bottom: 0.4rem;
    font-family: "Geist Mono", monospace; font-size: 0.7rem; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--i-mint);
  }
  .keynote .kn-bd strong { color: var(--ink); font-weight: 600; }
  @media (max-width: 560px) { .keynote { padding: 1.1rem 1.15rem; } }
  /* Collapsible fold (appendix / optional deep-dives) */
  .fold { margin: 4rem 0 2rem; }
  .fold-sum { list-style: none; cursor: pointer; display: flex; flex-direction: column;
    align-items: flex-start; gap: 0.7rem; padding: 1.5rem 0 0.4rem; }
  .fold-sum::-webkit-details-marker { display: none; }
  .fold-sum h2 { font-family: "Funnel Display", sans-serif; font-weight: 600;
    font-size: clamp(2.4rem, 5.7vw, 3.15rem); line-height: 1.12; letter-spacing: -0.02em;
    margin: 0; color: var(--ink); text-wrap: balance; }
  .fold-sum:hover h2 { color: var(--teal-deep); }
  .fold-toggle { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0.45rem;
    color: var(--teal-deep); font-family: "Geist Mono", monospace; font-size: 0.66rem;
    letter-spacing: 0.1em; text-transform: uppercase; }
  .fold-tlabel::after { content: "Show"; }
  .fold[open] .fold-tlabel::after { content: "Hide"; }
  .fold-chev { width: 0.95rem; height: 0.95rem; transition: transform .25s ease; }
  .fold[open] .fold-chev { transform: rotate(180deg); }
  .fold-body { padding-bottom: 0.6rem; }
  .fold-body p, .fold-body li { font-size: 0.86rem; color: #5c6377; }
  .appendix-body p, .appendix-body li { font-size: 0.86rem; color: #5c6377; }
  .subfold { display: block; margin: 0.3rem 0 0.15rem; }
  .subfold-sum { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.3rem;
    color: var(--teal-deep); font-family: "Geist Mono", monospace; font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; }
  .subfold-sum::-webkit-details-marker { display: none; }
  .sf-label::after { content: "Show"; }
  .subfold[open] .sf-label::after { content: "Hide"; }
  .sf-chev { width: 0.72rem; height: 0.72rem; transition: transform .2s ease; }
  .subfold[open] .sf-chev { transform: rotate(180deg); }
  .subfold > ul { margin-top: 0.4rem; }
  /* appendix collapse: whole title row is the summary; the section's left
     pointer-arrow (.section-head::before) is the affordance, rotating on open */
  .apx-fold { margin: 0; }
  .apx-sum { list-style: none; cursor: pointer; }
  .apx-sum::-webkit-details-marker { display: none; }
  .apx-sum .section-head { margin-bottom: 0; }
  .fold-body > *:first-child { margin-top: 0.6rem; }
  /* Image placeholder (art-direction notes; real images added later) */
  .imgph { margin: 2.8rem 0; border: 1.5px dashed #9fdcc0; border-radius: 16px;
    background: rgba(205,244,226,0.16); padding: 1.4rem 1.55rem; display: flex; gap: 1rem;
    align-items: flex-start; }
  .imgph .ip-tag { flex: 0 0 auto; font-family: "Geist Mono", monospace; font-size: 0.6rem;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--i-mint);
    border: 1px solid #9fdcc0; border-radius: 6px; padding: 0.35rem 0.5rem; margin-top: 0.15rem; }
  .imgph .ip-bd { font-size: 0.95rem; line-height: 1.55; color: var(--ink-soft); }
  .imgph .ip-bd b { display: block; margin-bottom: 0.28rem; color: var(--ink);
    font-family: "Funnel Display", sans-serif; font-weight: 600; font-size: 1rem; }
  .speed-row { display: flex; gap: 1.8rem; align-items: stretch; margin: 0 0 1.4rem; }
  .speed-row > p { flex: 1 1 auto; margin: 0; }
  .imgph--vert { flex: 0 0 auto; width: 15rem; flex-direction: column; align-items: flex-start;
    gap: 0.55rem; min-height: 21rem; margin: 0; }
  .speed-img { flex: 0 0 15rem; align-self: stretch; min-height: 21rem; margin: 0; border-radius: 16px; position: relative;
    overflow: hidden; background: #14151a; }
  .speed-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
  @media (max-width: 760px) { .speed-img { flex: none; width: 100%; align-self: stretch; min-height: 0; height: 11rem; } }
  @media (max-width: 760px) { .speed-row { flex-direction: column; } .imgph--vert { width: auto; min-height: 0; } }
  /* Edge-to-edge image band (placeholder) */
  .imgbleed { width: 100vw; margin: 3.4rem 0; margin-left: calc(50% - 50vw); position: relative; }
  .imgbleed .ib-inner { min-height: clamp(240px, 40vh, 420px); display: flex; align-items: center;
    justify-content: center; padding: 2.2rem 1.5rem;
    background: linear-gradient(180deg, rgba(205,244,226,0.30), rgba(205,244,226,0.10));
    border-top: 1px solid #CDF4E2; border-bottom: 1px solid #CDF4E2; }
  .imgbleed .ib-card { max-width: 44rem; text-align: center; border: 1.5px dashed #9fdcc0;
    border-radius: 16px; padding: 1.5rem 1.8rem; background: rgba(255,253,247,0.6); }
  .imgbleed .ib-tag { font-family: "Geist Mono", monospace; font-size: 0.6rem; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--i-mint); }
  .imgbleed .ib-title { font-family: "Funnel Display", sans-serif; font-weight: 600; font-size: 1.12rem;
    color: var(--ink); margin: 0.5rem 0 0.35rem; }
  .imgbleed .ib-desc { font-size: 0.92rem; line-height: 1.5; color: var(--ink-soft); margin: 0; }
  .imgbleed--photo img { display: block; width: 100%; height: clamp(260px, 44vh, 470px); object-fit: cover; object-position: center 42%; }
  @media (min-width: 1100px){ .imgbleed--photo { margin-top: 6rem; margin-bottom: 6rem; } }
  /* Pull-quote focus highlight — fuller mint underline for the larger serif */
  .pquote .mark { background: linear-gradient(transparent 46%, #CDF4E2 46%); padding: 0 0.05em; }
  /* End-of-article divider: clean hairline with generous space */
  .div--end { margin: 5.5rem 0; gap: 0; color: var(--rule); }
  .div--end::before { content: ""; height: 1px; background: var(--green); flex: 1 1 auto; }
  .rule-mint { height: 1px; background: var(--green); border: 0; margin: 4rem 0; }
  /* Citation links */
  .cite { color: var(--green); text-decoration: none; font-weight: 700; white-space: nowrap; }
  .cite .cn { color: var(--ink); font-weight: 600; }
  /* mint-green list markers */
  article ul li::marker { color: var(--teal-deep); }
  .references li::marker { color: var(--green); font-weight: 700; }
  /* blue font + green underline inline emphasis */
  .uline { color: var(--teal-deep); font-weight: 500;
    background: linear-gradient(transparent 46%, var(--green) 46%); padding: 0 0.05em; }
  .cite:hover { text-decoration: underline; }
  .references li { scroll-margin-top: 96px; }
  .references li:target { background: rgba(205,244,226,0.5); border-radius: 6px;
    box-shadow: 0 0 0 6px rgba(205,244,226,0.5); }
  /* Contributors credit list */
  .contribs { margin: 2.6rem 0 0; }
  .cx-label { display: block; margin-bottom: 0.55rem; font-family: "Geist Mono", monospace;
    font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
  .cx-label .rgly { color: var(--i-mint); margin-right: 0.4rem; }
  .cx-names { margin: 0; max-width: 42rem; font-family: "Instrument Sans", sans-serif;
    font-size: 1rem; line-height: 1.75; color: var(--ink-soft); }
  /* Jump-nav group dividers (below Summary, above Appendix) */
  .toc-div { align-self: stretch; height: 1px; border: 0; background: rgba(255,255,255,0.18);
    margin: 0.5rem 0.7rem; }
  @media (max-width: 1099px) {
    .toc-div { align-self: center; width: 1px; height: 1.4rem; margin: 0; flex: 0 0 auto;
      background: rgba(255,255,255,0.5); }
    .toc-div + .toc-link::before { display: none; }
  }

  /* End note */
  .endnote {
    margin: 4rem 0 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--rule);
    font-family: "Instrument Serif", serif;
    font-style: italic;
    font-size: 1.22rem;
    line-height: 1.5;
    color: var(--ink-soft);
  }

  footer.foot {
    background: var(--teal-deep);
    margin-top: 0;
    padding: 2rem 0 3.5rem;
    position: relative;
    z-index: 1;
  }
  .foot-inner {
    max-width: var(--measure);
    margin: 0 auto;
    padding: 0 1.6rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
    font-family: "Geist Mono", monospace;
    font-size: 0.74rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.85);
  }
  .foot-inner .dot {
    width: 0.45rem; height: 0.45rem;
    background: var(--green);
    border-radius: 50%;
    display: inline-block;
    margin-right: 0.5rem;
  }

  a:focus-visible {
    outline: 2px solid var(--teal-deep);
    outline-offset: 3px;
    border-radius: 2px;
  }

  @media (max-width: 740px) {
    body { font-size: 1.18rem; line-height: 1.72; }
  }

  @media (max-width: 520px) {
    :root { --measure: 33rem; }
    body { font-size: 1.12rem; line-height: 1.68; }
    .wrap { padding: 0 1.3rem; }
    .section-head { gap: 0.7rem; }
    .section-head .num { min-width: auto; }
    .pull { margin-left: 0; margin-right: 0; }
    article .lead { font-size: 1.2rem; }
    article .lead::first-letter { font-size: 3rem; }
.lead-rule{ border-left:3px solid var(--green); padding-left:1.6rem; }
  }

  @media (max-width: 600px) {
    .kicker-tag { display: none; }
  }

  @media (min-width: 1100px) {
    body { font-size: 1.27rem; }
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .progress { transition: none; }
  }

  /* ===== Full-width front matter (title, summary, edge-to-edge hero) ===== */
  .frontmatter { max-width: var(--measure); margin: 0 auto; padding: clamp(72px,9vw,128px) 1.6rem 0; }
  .frontmatter .titleblock { margin-top: 0; }

  /* ===== Layout shell: centred reading column + sticky jump-nav ===== */
  .shell { position: relative; }
  @media (min-width: 1100px) {
    .shell {
      display: grid;
      /* gutters hold the TOC (16rem) + its 2.3rem gap; trimmed edge room so the wider
         reading column reaches full --measure on laptop screens (~1300px+) */
      grid-template-columns: minmax(20rem, 1fr) minmax(0, var(--measure)) minmax(20rem, 1fr);
    }
    .shell > .wrap { grid-column: 2; max-width: none; margin: 0; padding: 0 1.6rem; }
    .toc { grid-column: 1; }
  }

  /* ===== Jump-nav / table of contents ===== */
  .toc { font-family: 'Instrument Sans',sans-serif; }
  .toc-scroll { display: none; }
  /* Voices in this piece — glyph-face identicons of the people the article weighs */
  .summary .voices {
    margin-top: 1.4rem; padding-top: 1.2rem;
    border-top: 1px solid rgba(255,255,255,0.22);
  }
  .v-label {
    font-family: "Geist Mono", monospace; font-size: 0.64rem; letter-spacing: 0.15em; font-weight: 500;
    text-transform: uppercase; color: rgba(255,255,255,0.72); display: block; margin-bottom: 0.4rem;
  }
  .summary .v-dek {
    font-family: "Funnel Display", sans-serif; font-weight: 600; font-size: 1.12rem;
    letter-spacing: -0.01em; line-height: 1.25; color: #fff; margin: 0 0 1.35rem;
  }
  .v-dek .dot { color: var(--green); }
  .v-list { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 0.5rem; }
  .voice {
    flex: 1 1 9rem; display: flex; align-items: center; gap: 0.62rem;
    background: rgba(11,16,36,0.34); border: 1px solid rgba(255,255,255,0.14);
    border-radius: 13px; padding: 0.55rem 0.72rem; cursor: pointer;
    font: inherit; text-align: left; color: inherit;
    transition: background .14s, border-color .14s, transform .12s;
  }
  .voice:hover { background: rgba(11,16,36,0.5); border-color: rgba(255,255,255,0.3); transform: translateY(-1px); }
  .voice:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
  .voice--static { cursor: default; }
  a.voice { text-decoration: none; color: inherit; }
  .voice--static:hover { transform: none; background: rgba(11,16,36,0.34); border-color: rgba(255,255,255,0.14); }
  .v-face {
    width: 38px; height: 38px; border-radius: 28%; background: #CDF4E2;
    position: relative; overflow: hidden; flex: 0 0 auto;
    box-shadow: 0 4px 12px -7px rgba(8,12,30,0.55);
  }
  .v-meta { display: flex; flex-direction: column; line-height: 1.12; min-width: 0; }
  .v-name { font-weight: 600; font-size: 0.78rem; color: #fff; white-space: nowrap; }
  .v-org { font-family: "Geist Mono", monospace; font-size: 0.58rem; letter-spacing: 0.09em; text-transform: uppercase; color: rgba(255,255,255,0.62); margin-top: 1px; }
  .v-org .li-ico { width: 1.05em; height: 1.05em; margin-right: 0.34em; vertical-align: -0.18em; fill: rgba(255,255,255,0.82); }
  .v-el { position: absolute; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
  @media (max-width: 560px) {
    .v-list { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .voice { flex: 1 1 auto; }
  }
  /* Voice popup */
  .v-modal-overlay {
    position: fixed; inset: 0; background: rgba(8,11,26,0.55);
    backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
    display: flex; align-items: center; justify-content: center;
    padding: 1.2rem; z-index: 100; opacity: 0; transition: opacity .18s ease;
  }
  .v-modal-overlay[hidden] { display: none; }
  .v-modal-overlay.open { opacity: 1; }
  .v-modal {
    background: #3d4cba; color: rgba(255,255,255,0.95);
    width: min(34rem, 100%); max-height: 86vh; overflow: auto;
    border-radius: 18px; padding: 1.6rem 1.6rem 1.7rem; position: relative;
    border: 1px solid rgba(255,255,255,0.2);
    box-shadow: 0 30px 90px -30px rgba(4,7,20,0.8);
    transform: translateY(8px) scale(0.985); transition: transform .18s ease;
    font-family: 'Instrument Sans',sans-serif;
  }
  .v-modal-overlay.open .v-modal { transform: none; }
  .vm-close {
    position: absolute; top: 0.9rem; right: 0.9rem; width: 32px; height: 32px;
    border: none; border-radius: 8px; background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.7); font-size: 1.15rem; line-height: 1; cursor: pointer;
  }
  .vm-close:hover { background: rgba(255,255,255,0.16); color: #fff; }
  .vm-head { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 1.15rem; padding-right: 2rem; }
  .vm-face { width: 54px; height: 54px; border-radius: 27%; background: #CDF4E2; position: relative; overflow: hidden; flex: 0 0 auto; }
  .vm-name { font-family: "Funnel Display", sans-serif; font-weight: 600; font-size: 1.25rem; letter-spacing: -0.01em; color: #fff; }
  .vm-org { font-family: "Geist Mono", monospace; font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; color: #9fb0ff; margin-top: 2px; }
  .vm-sec { margin-top: 1.25rem; }
  .vm-sec:first-of-type { margin-top: 0.2rem; }
  .vm-sec.bet { border: 1px solid rgba(0,240,160,0.4); background: rgba(0,240,160,0.06); border-radius: 12px; padding: 0.95rem 1.05rem; }
  .vm-seclabel { font-family: "Geist Mono", monospace; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; display: block; margin-bottom: 0.6rem; }
  .vm-sec.bet .vm-seclabel { color: #6ff0c2; }
  .vm-sec.why .vm-seclabel { color: #9fb0ff; }
  .vm-thesis { font-family: "Source Serif 4", Georgia, serif; font-size: 1.1rem; line-height: 1.45; color: #fff; margin: 0 0 0.7rem; }
  .vm-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
  .vm-list li { position: relative; padding-left: 1.15rem; font-size: 0.95rem; line-height: 1.5; color: rgba(255,255,255,0.78); }
  .vm-list li::before { content: "\25C6"; position: absolute; left: 0; top: 0.06rem; color: var(--teal-deep); font-size: 0.66rem; }
  .vm-sec.why .vm-list li::before { color: var(--teal); }
  .vm-foot { margin-top: 1.3rem; }
  .vm-link { font-family: "Geist Mono", monospace; font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; color: #9fb0ff; text-decoration: none; }
  .vm-link:hover { text-decoration: underline; }
  @media (min-width: 1100px) {
    .toc {
      justify-self: end;
      width: 16rem;
      margin-right: 2.3rem;
      padding: 1.25rem 1.25rem 1.35rem;
      position: sticky;
      top: 5.4rem;
      z-index: 40;
      align-self: start;
      background: rgba(11,16,36,0.9);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border-radius: 14px;
      box-shadow: 0 18px 40px -24px rgba(8,12,30,0.5);
    }
  }
  .toc-label {
    font-family: "Geist Mono", monospace;
    font-size: 0.66rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--teal-deep);
    margin: 0 0 0.9rem;
  }
  .toc-label .rgly { display: inline-block; width: 1em; text-align: center; color: var(--green); margin-right: 0.5rem; }
  /* dark/light chart toggle living inside the section navbar (dark + blue contexts) */
  .toc-nav .chart-theme { display: flex; align-items: center; justify-content: flex-start; gap: 0.35rem; flex: 0 0 auto; margin: 0; }
  .toc-nav .chart-theme .ctl-label { font-family: "Geist Mono", monospace; font-size: 0.58rem;
    letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-right: 0.1rem; }
  .toc-nav .chart-theme .ctl-btn { font-family: "Geist Mono", monospace; font-size: 0.68rem; letter-spacing: 0.02em;
    padding: 0.26rem 0.58rem; border: 1px solid rgba(255,255,255,0.28); background: transparent;
    color: rgba(255,255,255,0.72); border-radius: 7px; cursor: pointer;
    transition: background .15s, color .15s, border-color .15s; }
  .toc-nav .chart-theme .ctl-btn:hover { border-color: rgba(255,255,255,0.55); color: #fff; }
  .toc-nav .chart-theme .ctl-btn.is-on { background: #CDF4E2; color: #04231a; border-color: #CDF4E2; }
  .toc-nav { display: flex; flex-direction: column; gap: 0.15rem; }
  .toc-link {
    display: flex;
    gap: 0.55rem;
    align-items: baseline;
    text-decoration: none;
    color: var(--ink-soft);
    font-size: 0.92rem;
    line-height: 1.35;
    padding: 0.42rem 0.6rem;
    border-radius: 7px;
    border-left: 2px solid transparent;
    transition: color .15s, background .15s, border-color .15s;
  }
  .toc-link .toc-num {
    font-family: "Geist Mono", monospace;
    font-size: 0.72rem;
    color: var(--teal-deep);
    min-width: 1.35rem;
  }
  .toc-link:hover { color: var(--ink); background: var(--cream-2); }
  .toc-link.is-active {
    color: var(--teal-text);
    background: var(--teal-tint);
    border-left-color: var(--teal-deep);
    font-weight: 500;
  }
  .toc-link.is-active .toc-num { color: var(--teal-deep); }
  @media (min-width: 1100px) {
    .toc-nav .chart-theme { margin-top: 0.7rem; padding-top: 0.8rem; border-top: 1px solid rgba(255,255,255,0.14); }
  }

  /* dark navy card: light text on desktop only (mobile strip stays light) */
  @media (min-width: 1100px) {
    .toc-label { color: rgba(245,246,250,0.92); font-weight: 600; }
    .toc-link { color: rgba(247,249,255,0.95); }
    .toc-link .toc-num { color: rgba(255,255,255,0.72); }
    .toc-link:hover { color: #fff; background: rgba(255,255,255,0.07); }
    .toc-link.is-active { color: #fff; background: rgba(90,108,255,0.22); border-left-color: var(--teal); }
    .toc-link.is-active .toc-num { color: #dfe4ff; }
  }

  @media (max-width: 1099px) {
    .toc {
      width: 100vw;
      margin-left: calc(50% - 50vw);
      margin-right: calc(50% - 50vw);
      margin-top: 0;
      margin-bottom: 2.6rem;
      padding: 0.95rem clamp(16px, 5vw, 26px) 0.9rem;
      position: sticky;
      top: 66px;
      z-index: 30;
      background: #2940ff;
      border-bottom: 1px solid rgba(255,255,255,0.16);
    }
    .toc { transition: transform .28s ease, opacity .28s ease; }
    .toc.toc-hidden { transform: translateY(calc(-100% - 80px)); opacity: 0; pointer-events: none; }
    .ph.fig-bleed { margin-bottom: 0; }
    .toc-scroll {
      display: block; position: relative;
      height: 3px; margin: 0.55rem 0 0;
      background: rgba(255,255,255,0.24); border-radius: 3px;
    }
    .toc-thumb {
      position: absolute; top: 0; height: 3px; left: 0; width: 30%;
      border-radius: 3px; background: #CDF4E2; cursor: grab; touch-action: none;
    }
    .toc-thumb:active { cursor: grabbing; }
    .toc-label { display: none; }
    .toc-nav {
      flex-direction: row;
      align-items: center;
      gap: 0.9rem;
      overflow-x: auto;
      padding-bottom: 0;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
    }
    .toc-nav::-webkit-scrollbar { display: none; }
    .toc-link {
      flex: 0 0 auto;
      position: relative;
      white-space: nowrap;
      color: #fff;
      background: none;
      border: none;
      border-radius: 7px;
      padding: 0.32rem 0.7rem;
      font-size: 0.84rem;
      font-weight: 500;
    }
    .toc-link:not(:first-child)::before {
      content: ""; position: absolute; left: -0.45rem; top: 50%;
      transform: translateY(-50%); width: 1px; height: 1.05em; background: rgba(255,255,255,0.3);
    }
    .toc-link .toc-num { color: rgba(255,255,255,0.72); }
    .toc-link:hover { color: #fff; background: rgba(11,16,36,0.34); }
    .toc-link.is-active { color: #fff; font-weight: 600; background: rgba(11,16,36,0.55); }
    .toc-link.is-active .toc-num { color: #fff; }
    .toc-link:first-child .toc-num { display: none; }
  }

  /* ===== Summary / "in short" box ===== */
  .summary {
    background: linear-gradient(135deg, #2940ff 0%, #4a5cff 55%, #5a6cff 100%);
    color: #fff;
    border-radius: 16px;
    padding: 1.7rem 1.9rem 1.5rem;
    margin: 0 0 2.6rem;
    scroll-margin-top: 1.4rem;
    position: relative;
    z-index: 2;
    box-shadow: 0 18px 40px -22px rgba(41,64,255,0.6);
  }
  .summary .s-label {
    font-family: "Geist Mono", monospace;
    font-size: 0.64rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-weight: 500;
    color: rgba(255,255,255,0.72);
    display: flex; align-items: center; gap: 0;
    margin-bottom: 0.85rem;
  }
  /* Signature glitchy chevron (site-wide arrow replacement) */
  .rgly { font-family: "Geist Mono", monospace; font-size: 1.15em; line-height: 1; display: inline-block; }
  .s-label .rgly, .v-label .rgly { width: 1em; text-align: center; }
  .summary .rgly { color: var(--green); margin-right: 0.5rem; }
  .summary .s-takeaway .st-label .rgly { color: var(--green); }
  .summary p {
    font-family: 'Instrument Sans',sans-serif;
    font-size: 1.05rem;
    line-height: 1.55;
    margin: 0;
    color: rgba(255,255,255,0.95);
  }
  .summary p + p { margin-top: 0.7rem; }
  .summary .s-takeaway {
    background: #fff;
    color: var(--ink);
    border-radius: 12px;
    border-left: 3px solid var(--green);
    padding: 0.95rem 1.2rem;
    margin-top: 1.35rem;
    font-family: 'Instrument Sans',sans-serif;
    font-size: 1.02rem;
    line-height: 1.5;
    font-weight: 500;
    box-shadow: 0 10px 26px -18px rgba(8,12,30,0.55);
  }
  .summary .s-takeaway .st-label {
    display: block;
    font-family: 'Funnel Display', sans-serif;
    font-size: 1.5rem;
    letter-spacing: 0.01em;
    text-transform: none;
    color: #2940ff;
    margin-bottom: 0.7rem;
    font-weight: 700;
  }
  .summary .s-takeaway .mark {
    background: linear-gradient(transparent 58%, #CDF4E2 58%);
    padding: 0 0.05em;
    font-weight: 600;
  }

  .summary .bench-row {
    margin-top: 1.35rem;
    padding-top: 1.1rem;
    border-top: 1px solid rgba(255,255,255,0.22);
  }
  .summary .bench-row .br-label {
    font-family: "Geist Mono", monospace;
    font-size: 0.64rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-weight: 500;
    color: rgba(255,255,255,0.72);
    display: block;
    margin-bottom: 0.7rem;
  }

  /* ===== Benchmark labels (insight ↔ benchmark connective tissue) ===== */
  .btags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .btag {
    display: inline-flex; align-items: center; gap: 0.45rem;
    font-family: "Geist Mono", monospace;
    font-size: 0.74rem; letter-spacing: 0.01em;
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    text-decoration: none;
    border: 1px solid var(--teal);
    background: var(--teal-tint);
    color: var(--teal-text);
    transition: transform .12s, box-shadow .12s, background .12s;
  }
  .btag::before {
    content: ""; width: 0.5rem; height: 0.5rem;
    background: var(--green); flex: 0 0 auto; transform: rotate(45deg);
  }
  .btag:hover { transform: translateY(-1px); box-shadow: 0 6px 16px -8px rgba(41,64,255,0.5); }
  .btag--blue {
    border-color: rgba(255,255,255,0.42);
    background: rgba(255,255,255,0.10);
    color: #fff;
  }
  .btag--blue:hover { background: rgba(255,255,255,0.18); }

  /* inline "open this benchmark" callout */
  .bench-callout {
    display: flex; align-items: center; gap: 0.85rem;
    margin: 2.2rem 0;
    padding: 0.85rem 1.05rem;
    border: 1px solid rgba(10,155,106,0.45);
    border-radius: 12px;
    background: rgba(205,244,226,0.45);
    text-decoration: none;
    transition: box-shadow .15s, transform .12s;
  }
  .bench-callout:hover { transform: translateY(-1px); box-shadow: 0 12px 28px -16px rgba(10,155,106,0.55); }
  .bench-callout .bc-tick {
    flex: 0 0 auto; width: 2rem; height: 2rem; border-radius: 8px;
    background: #0b0e16;
    display: flex; align-items: center; justify-content: center;
  }
  .bc-bars { display: flex; align-items: flex-end; gap: 2px; height: 1.05rem; }
  .bc-bars b { width: 3px; border-radius: 1px; height: 40%;
    background: linear-gradient(180deg, #CDF4E2, rgba(205,244,226,0.35));
    animation: bcbar 1.4s ease-in-out infinite; }
  .bc-bars b:nth-child(1){ animation-delay: 0s; }
  .bc-bars b:nth-child(2){ animation-delay: .22s; }
  .bc-bars b:nth-child(3){ animation-delay: .44s; }
  .bc-bars b:nth-child(4){ animation-delay: .12s; }
  @keyframes bcbar { 0%,100%{ height: 26%; } 50%{ height: 92%; } }
  @media (prefers-reduced-motion: reduce){ .bc-bars b { animation: none; height: 62%; } }
  .bench-callout .bc-text {
    flex: 1; font-family: 'Instrument Sans',sans-serif;
    font-size: 0.95rem; line-height: 1.32; color: var(--ink-soft);
  }
  .bench-callout .bc-text .bc-kicker {
    font-family: "Geist Mono", monospace; font-size: 0.63rem;
    letter-spacing: 0.13em; text-transform: uppercase; color: #0a9b6a;
    display: block; margin-bottom: 0.18rem;
  }
  .bench-callout .bc-text strong { color: var(--ink); font-weight: 600; }
  .bench-callout .bc-arrow { color: #0a9b6a; font-size: 1.15rem; flex: 0 0 auto; }

  /* ===== Figure format variants ===== */
  article > figure, article figure { clear: both; }
  /* edge-to-edge hero */
  .ph.fig-bleed { width: 100vw; margin-left: calc(50% - 50vw); margin-top: var(--hero-pull, -220px); position: relative; z-index: 1; }
  .fig-bleed .ph-frame { border-radius: 0; aspect-ratio: auto; height: var(--hero-h, 520px); }
  .fig-bleed figcaption { max-width: var(--measure); margin: 0.95rem auto 0; padding: 0 1.6rem; }
  /* on smaller screens the summary is tall, so stack the hero normally instead of overlapping */
  @media (max-width: 760px) { :root { --hero-h: clamp(380px, 60vh, 560px); --hero-pull: -150px; } }

  /* wide contained band */
  .fig-wide { width: min(56rem, 92vw); margin-left: calc(50% - min(28rem, 46vw)); }
  @media (max-width: 1099px) { .fig-wide { width: 100%; margin-left: 0; } }

  /* inset image the text wraps around */
  .fig-float { margin: 0.3rem 0 1.4rem; }
  @media (min-width: 760px) {
    .fig-float {
      float: right;
      width: min(19rem, 46%);
      margin: 0.5rem 0 1rem 2rem;
    }
    .fig-float .ph-frame { aspect-ratio: 4 / 5; }
    .fig-float figcaption { font-size: 0.85rem; }
  }

  /* clear floats so they never spill past their section */
  .section-head, .pull, .div, .endnote, .summary { clear: both; }
  .section-head { scroll-margin-top: 1.4rem; }
  /* v177: clear the sticky navbar(s) when jumping to a section */
  @media (min-width: 1100px){ .section-head { scroll-margin-top: 5.6rem; } }
  @media (max-width: 1099px){ .section-head { scroll-margin-top: 9.5rem; } }
  /* v177: blue pointer arrow before each section title (desktop only) */
  @media (min-width: 1100px){
    .section-head { position: relative; }
    .section-head::before {
      content: "\203A"; position: absolute; left: -1.5em; top: 0.62rem;
      font-family: "Funnel Display", sans-serif; font-weight: 400; font-size: 1.55rem;
      line-height: 1; color: var(--teal-deep); pointer-events: none;
    }
    /* appendix: this arrow is the expand affordance — point down when open */
    .apx-fold .apx-sum .section-head::before { transition: transform .2s ease; transform-origin: 0.35em center; }
    .apx-fold[open] .apx-sum .section-head::before { transform: rotate(90deg); }
  }
  /* v177: mint divider between body text and a following section title */
  p:has(+ .section-head)::after {
    content: ""; display: block; height: 1px; background: var(--green);
    margin: 4rem 0 0;
  }
  p + .section-head { margin-top: 2.9rem; }
  /* v177: keynote ("gist") window uses the same font as the blue summary windows */
  .keynote .kn-bd, .kn-bd { font-family: 'Instrument Sans', sans-serif; }

  /* image-filled figure frames */
  .ph-frame.has-img { border: none; background: none; padding: 0; }
  .ph-frame.has-img .ph-img {
    display: block; width: 100%; height: 100%;
    object-fit: cover; object-position: center 30%;
  }
  /* ===== Article engagement: like / share / comment ===== */
  .engage {
    display: flex; align-items: center; justify-content: center; gap: 0.6rem; flex-wrap: wrap;
    margin: 3.2rem 0 1rem;
    padding: 0.4rem 0;
    font-family: 'Instrument Sans',sans-serif;
  }
  .eg-btn {
    display: inline-flex; align-items: center; gap: 0.5rem;
    background: var(--cream); border: 1px solid var(--teal);
    border-radius: 999px; padding: 0.5rem 0.95rem;
    font: inherit; font-size: 0.92rem; color: var(--ink-soft);
    cursor: pointer; text-decoration: none;
    transition: background .14s, border-color .14s, color .14s, transform .1s;
  }
  .eg-btn:hover { background: var(--teal-deep); border-color: var(--teal-deep); color: #fff; }
  .eg-btn:hover .eg-count { color: rgba(255,255,255,0.82); }
  .eg-btn:active { transform: scale(0.97); }
  .eg-btn svg { width: 18px; height: 18px; flex: 0 0 auto; }
  .eg-count { font-family: "Geist Mono", monospace; font-size: 0.82rem; color: var(--muted); }
  .eg-count[hidden] { display: none; }
  .like-btn svg { fill: none; stroke: currentColor; stroke-width: 1.8; }
  .like-btn.is-liked { border-color: var(--teal); background: var(--teal-tint); color: var(--teal-text); }
  .like-btn.is-liked .eg-count { color: var(--teal-text); }
  .like-btn.is-liked svg { fill: var(--teal-deep); stroke: var(--teal-deep); }
  .like-btn.is-liked:hover { background: var(--teal-deep); border-color: var(--teal-deep); color: #fff; }
  .like-btn.is-liked:hover svg { fill: #fff; stroke: #fff; }
  .like-btn.is-liked:hover .eg-count { color: rgba(255,255,255,0.82); }
  .like-pop { animation: likePop .32s ease; }
  @keyframes likePop { 0%{transform:scale(1)} 40%{transform:scale(1.28)} 100%{transform:scale(1)} }

  .eg-share { position: relative; }
  .share-pop {
    position: absolute; bottom: calc(100% + 8px); left: 0;
    background: var(--card); border: 1px solid var(--rule);
    border-radius: 12px; padding: 0.4rem; min-width: 12rem;
    box-shadow: 0 18px 40px -18px rgba(8,12,30,0.4); z-index: 30;
    display: flex; flex-direction: column; gap: 0.1rem;
  }
  .share-pop[hidden] { display: none; }
  .share-pop a, .share-pop button {
    display: flex; align-items: center; gap: 0.65rem;
    padding: 0.55rem 0.7rem; border-radius: 8px;
    background: none; border: none; font: inherit; font-size: 0.9rem;
    color: var(--ink-soft); text-align: left; cursor: pointer; text-decoration: none; width: 100%;
  }
  .share-pop a:hover, .share-pop button:hover { background: var(--cream-2); color: var(--ink); }
  .share-pop .sp-ico {
    width: 1.15rem; text-align: center; color: var(--teal-deep);
    font-family: "Geist Mono", monospace; font-size: 0.82rem; flex: 0 0 auto;
  }

  .btn-primary {
    display: inline-flex; align-items: center; gap: 0.5rem;
    background: var(--teal-deep); color: #fff; border: none;
    border-radius: 999px; padding: 0.6rem 1.2rem;
    font-family: 'Instrument Sans',sans-serif; font-size: 0.92rem; font-weight: 500;
    cursor: pointer; transition: background .14s, transform .1s;
  }
  .btn-primary:hover { background: #1f33e0; }
  .btn-primary:active { transform: scale(0.98); }

  /* ===== Join on LinkedIn CTA (centered) ===== */
  .li-cta {
    position: relative;
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: 1.15rem;
    background: #0b1024;
    border-radius: 22px; padding: 2.8rem 2.2rem 2.6rem;
  }
  /* full-bleed blue band rising behind the lower half of the card, into the footer */
  .li-cta::before {
    content: ''; position: absolute; left: 50%; transform: translateX(-50%);
    width: 100vw; top: 50%; bottom: -60px;
    background: var(--teal-deep); z-index: -1; pointer-events: none;
  }
  .li-logo { display: inline-flex; }
  .li-logo svg { width: 42px; height: 42px; color: #fff; display: block; }
  .li-title {
    font-family: "Funnel Display", sans-serif; font-weight: 600;
    font-size: clamp(1.8rem, 3.2vw, 2.3rem); line-height: 1.08;
    letter-spacing: -0.02em; color: var(--cream); margin: 0.2rem 0;
  }
  .li-rule { width: 34px; height: 3px; border-radius: 3px; background: var(--green); }
  .li-sub {
    color: rgba(245,246,250,0.72); font-size: 0.98rem; line-height: 1.55;
    max-width: 46ch; margin: 0;
  }
  .li-btn {
    display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0.3rem;
    border-radius: 14px; font-family: 'Instrument Sans',sans-serif; font-weight: 500;
    font-size: 0.95rem; text-decoration: none; padding: 0.72rem 1.3rem;
    cursor: pointer; transition: background .16s, transform .1s;
    background: var(--cream); color: var(--ink);
  }
  .li-btn:hover { background: #fff; transform: translateY(-1px); }
  .li-btn svg { width: 15px; height: 15px; }

  /* ===== Comments ===== */
  .comments { margin: 2.5rem 0 0; scroll-margin-top: 1.4rem; font-family: 'Instrument Sans',sans-serif; }
  .c-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.4rem; }
  .c-head h2 {
    font-family: "Funnel Display", sans-serif; font-weight: 600;
    font-size: 1.5rem; letter-spacing: -0.02em; margin: 0; color: var(--ink);
    display: flex; align-items: baseline; gap: 0.5rem;
  }
  .c-head .c-count { font-family: "Geist Mono", monospace; font-size: 0.95rem; color: var(--muted); font-weight: 400; }

  .avatar {
    width: 2.4rem; height: 2.4rem; flex: 0 0 auto; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: "Geist Mono", monospace; font-size: 0.68rem; font-weight: 500;
    color: #fff; background: var(--teal-deep); letter-spacing: 0.02em;
  }

  .gate {
    display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
    background: var(--aside-bg); border: 1px solid var(--rule);
    border-radius: 14px; padding: 1.3rem 1.5rem; margin-bottom: 1.7rem;
  }
  .gate .gate-ico {
    width: 2.7rem; height: 2.7rem; flex: 0 0 auto; border-radius: 11px;
    background: var(--teal-tint); color: var(--teal-deep);
    display: flex; align-items: center; justify-content: center;
  }
  .gate .gate-txt { flex: 1; min-width: 13rem; }
  .gate .gate-txt strong { display: block; color: var(--ink); font-size: 1.02rem; }
  .gate .gate-txt p { margin: 0.25rem 0 0; color: var(--ink-soft); font-size: 0.92rem; line-height: 1.45; }
  .gate .signin { background: none; border: none; padding: 0; font: inherit; color: var(--teal-text); cursor: pointer; text-decoration: underline; }

  .composer { display: flex; gap: 0.85rem; margin-bottom: 1.9rem; }
  .composer-main { flex: 1; }
  .composer textarea {
    width: 100%; box-sizing: border-box; resize: vertical; min-height: 4.6rem;
    border: 1px solid var(--rule); border-radius: 12px; padding: 0.8rem 0.95rem;
    font-family: 'Instrument Sans',sans-serif; font-size: 0.98rem; line-height: 1.5;
    color: var(--ink); background: var(--card);
  }
  .composer textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-tint); }
  .composer-actions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 0.7rem; flex-wrap: wrap; }
  .sub-badge { font-size: 0.82rem; color: var(--muted); display: inline-flex; align-items: center; gap: 0.4rem; }
  .sub-badge .tick { color: var(--green); font-weight: 700; }
  .sub-badge .demo-revert { background: none; border: none; padding: 0; font: inherit; font-size: 0.8rem; color: var(--muted); cursor: pointer; text-decoration: underline; }

  .c-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.5rem; }
  .comment { display: flex; gap: 0.85rem; }
  .comment .c-body { flex: 1; }
  .comment .c-meta { display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: 0.25rem; }
  .comment .c-name { font-weight: 600; color: var(--ink); font-size: 0.94rem; }
  .comment .c-time { font-family: "Geist Mono", monospace; font-size: 0.72rem; color: var(--muted); }
  .comment .c-body p { margin: 0; color: var(--ink-soft); font-size: 0.96rem; line-height: 1.55; }
  .c-empty { color: var(--muted); font-size: 0.95rem; padding: 0.4rem 0; }

  /* ===== chart components (dark instrument panels) ===== */
  .chartwrap{
    --ax:rgba(196,202,222,.34); --gr:rgba(196,202,222,.13);
    --tx:#eef0f8; --tx2:#bcc2d6; --tx3:#9298ad;
    --peri:#9CB0E6; --green:#CDF4E2; --ghi:#CDF4E2; --gfill:#d8efdf; --pfill:#d3e3fc;
    background:#0b0e16; border:1px solid rgba(180,188,255,.10);
    border-radius:14px; padding:18px 18px 12px; overflow:hidden;
  }
  .chartwrap svg{display:block;width:100%;height:auto;font-family:"Geist Mono",monospace}
  figcaption .illus{display:inline-block;margin-left:.5rem;font-family:"Geist Mono",monospace;
    font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
    border:1px solid var(--rule);border-radius:20px;padding:1px 8px;vertical-align:middle}
  .nextup{margin:2.2rem 0 0;font-family:'Instrument Sans',sans-serif;font-size:.9rem;
    color:var(--ink-soft);display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap}
  .nextup .nu-label{font-family:"Geist Mono",monospace;font-size:.6rem;letter-spacing:.1em;
    text-transform:uppercase;color:var(--muted);border:1px solid var(--rule);
    border-radius:20px;padding:1px 8px;flex:none}
  .runmeta{margin:-.6rem 0 1.6rem;font-family:"Geist Mono",monospace;font-size:.7rem;
    color:var(--muted);display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
  .runmeta .rm-label{font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;
    border:1px solid var(--rule);border-radius:20px;padding:1px 8px}
  .runmeta code{font-family:inherit;color:var(--ink-soft);word-break:break-all}
  figcaption .meas{display:inline-block;margin-left:.5rem;font-family:"Geist Mono",monospace;
    font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:#0d2c20;
    background:#CDF4E2;border:1px solid #CDF4E2;border-radius:20px;padding:1px 8px;vertical-align:middle}
  .lmeta{display:flex;flex-wrap:wrap;gap:.45rem .9rem;align-items:center;
    margin:-.4rem 0 1.5rem;font-family:"Geist Mono",monospace;font-size:.72rem}
  .lmeta .ax.up{color:#0a9b6a;font-weight:500}
  .lmeta .ax.dn{color:var(--muted)}
  .lmeta .m{color:var(--ink-soft)} .lmeta .m b{color:var(--ink);font-weight:600}
  .lmeta .sepd{color:var(--rule)}
  @keyframes c_grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
  @keyframes c_draw{to{stroke-dashoffset:0}}
  @keyframes c_pop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}
  @keyframes c_fade{from{opacity:0}to{opacity:1}}
  @keyframes c_march{to{stroke-dashoffset:-32}}
  .chartwrap .sweep{display:none}
  .chartwrap .gb{transform-box:fill-box;transform-origin:bottom;transform:scaleY(0)}
  .chartwrap .dl{stroke-dasharray:900;stroke-dashoffset:900}
  .chartwrap .dt{transform-box:fill-box;transform-origin:center;opacity:0}
  .chartwrap .af{opacity:0}
  .chartwrap .cl{opacity:0}
  .chartwrap.in-view .gb{animation:c_grow .7s cubic-bezier(.2,.7,.3,1) both}
  .chartwrap.in-view .dl{animation:c_draw 1.2s cubic-bezier(.22,1,.36,1) both}
  .chartwrap.in-view .dt{animation:c_pop .55s ease-out both}
  .chartwrap.in-view .af{animation:c_fade .9s ease-out both;animation-delay:.4s}
  .chartwrap.in-view .cl{animation:c_fade .5s ease-out both}
  .chartwrap .dash{stroke-dasharray:5 4;animation:c_march 1.7s linear infinite}
  /* ===== aistack chart system — two surfaces, identical spec ===== */
  /* Surface B — panel (chartwrap default). Light strokes bloom on dark -> ~12% thinner. */
  .chartwrap{
    --s-mint:#D8EFDF; --s-peri:#D3E3FC; --s-clay:#F4E0D6; --s-grey:rgba(238,240,247,.12);
    --i-mint:#D8EFDF; --i-peri:#D3E3FC; --i-clay:#E9A886; --i-grey:rgba(238,240,247,.5);
    --k-sage:#4F8567; --k-steel:#456F9F; --k-clay:#A9633F; --k-graphite:#5C6473;
    --c-axis:rgba(238,240,247,.44); --c-grid:rgba(238,240,247,.07);
    --c-label:#e4e8f3; --c-note:#ffffff; --c-val:#ffffff; --c-cat:#eef0f7; --c-halo:#0b0e16;
    --lw-data:1.4; --lw-model:1.05; --lw-ref:1; --r-hero:5.6; --sw-hero:1.8;
  }
  /* Surface A — paper. Canonical; this is what prints. */
  .charts-light .chartwrap{
    --s-grey:#E4E7EC;
    --i-mint:#00A86B; --i-peri:#2D6BFF; --i-clay:#FF5A2B; --i-grey:#6B7280;
    --c-axis:rgba(11,16,36,.50); --c-grid:rgba(11,16,36,.09);
    --c-label:#4b5265; --c-note:#5c6377; --c-val:#141a30; --c-cat:#3b404b; --c-halo:#ffffff;
    --lw-data:1.6; --lw-model:1.2; --lw-ref:1.1; --r-hero:6; --sw-hero:2;
  }
  /* language in one face, numerals in another — that's it */
  .chartwrap svg.cv{display:block;width:100%;height:auto;overflow:visible}
  .chartwrap svg.cv .tick{font-family:"Geist Mono",monospace;font-size:12px;fill:var(--c-label);font-variant-numeric:tabular-nums}
  .chartwrap svg.cv .axlab{font-family:'Instrument Sans',sans-serif;font-size:12.5px;fill:var(--c-label)}
  .chartwrap svg.cv .val{font-family:"Geist Mono",monospace;font-size:16px;font-weight:500;fill:var(--c-val);font-variant-numeric:tabular-nums}
  .chartwrap svg.cv .note{font-family:'Instrument Sans',sans-serif;font-style:italic;font-weight:500;font-size:13px;fill:var(--c-note)}
  .chartwrap svg.cv .onfill{fill:var(--k-sage)}
  .chartwrap svg.cv .cat{font-family:'Instrument Sans',sans-serif;font-size:13px;font-weight:500;fill:var(--c-val)}
  .chartwrap svg.cv .chiplab{font-family:'Instrument Sans',sans-serif;font-size:12px;font-weight:600}
  .chartwrap svg.cv .halo{paint-order:stroke;stroke:var(--c-halo);stroke-width:3.5px;stroke-linejoin:round;stroke-linecap:round}
  .chartwrap svg.cv .ln{stroke-width:var(--lw-data);fill:none;stroke-linejoin:round;stroke-linecap:round}
  .chartwrap svg.cv .ref{stroke-width:var(--lw-ref)}
  .chartwrap svg.cv .hero{stroke-width:var(--sw-hero);fill:none}
  /* Motion is a reveal, never a performance: the frame calibrates, then it measures. */
  .chartwrap svg.cv .axdraw,.chartwrap svg.cv .ln{stroke-dasharray:1;stroke-dashoffset:1}
  .chartwrap svg.cv .grid,.chartwrap svg.cv .tick,.chartwrap svg.cv .ref,
  .chartwrap svg.cv .fill,.chartwrap svg.cv .note,.chartwrap svg.cv .chip{opacity:0}
  .chartwrap svg.cv .bar{transform-box:fill-box;transform-origin:bottom;transform:scaleY(0)}
  .chartwrap svg.cv .dot,.chartwrap svg.cv .hero{transform-box:fill-box;transform-origin:center;opacity:0}
  .chartwrap.in-view svg.cv .axdraw{animation:c_draw .5s ease-out both;animation-delay:var(--d,0s)}
  .chartwrap.in-view svg.cv .grid{animation:c_fade .4s ease-out both;animation-delay:var(--d,.15s)}
  .chartwrap.in-view svg.cv .tick{animation:c_fade .5s ease-out both;animation-delay:.30s}
  .chartwrap.in-view svg.cv .axlab{animation:c_fade .5s ease-out both;animation-delay:.30s}
  .chartwrap.in-view svg.cv .ln{animation:c_draw 1.15s cubic-bezier(.22,1,.36,1) both;animation-delay:.42s}
  .chartwrap.in-view svg.cv .bar{animation:c_grow .7s cubic-bezier(.2,.7,.3,1) both;animation-delay:var(--d,.42s)}
  .chartwrap.in-view svg.cv .fill{animation:c_fade .6s ease-out both;animation-delay:.75s}
  .chartwrap.in-view svg.cv .ref{animation:c_fade .5s ease-out both;animation-delay:1.05s}
  .chartwrap.in-view svg.cv .dot,.chartwrap.in-view svg.cv .hero{animation:c_pop .5s ease-out both;animation-delay:var(--d,1.35s)}
  .chartwrap.in-view svg.cv .note,.chartwrap.in-view svg.cv .chip{animation:c_fade .5s ease-out both;animation-delay:1.50s}
  /* ---- chart-system additions (real-data charts) ---- */
  .chartwrap svg text.lang{font-family:'Instrument Sans',sans-serif}
  .chartwrap svg text.ann{font-style:italic}
  .chartwrap svg text.num{font-family:"Geist Mono",monospace;font-variant-numeric:tabular-nums}
  .chartwrap .dp{stroke-dasharray:1;stroke-dashoffset:1}
  .chartwrap.in-view .dp{animation:c_draw 1.2s cubic-bezier(.22,1,.36,1) both}
  @media(prefers-reduced-motion:reduce){
    .chartwrap svg.cv *,
    .chartwrap .gb,.chartwrap .dl,.chartwrap .dp,.chartwrap .dt,.chartwrap .af,.chartwrap .cl,.chartwrap .dash{
      animation:none!important;opacity:1!important;stroke-dashoffset:0!important;transform:none!important}
  }


  /* ---- light chart theme (toggle) ---- */
  .charts-light .chartwrap {
    background: #ffffff;
    border-color: rgba(15,17,23,0.10);
    --ax: rgba(15,17,23,0.40);
    --gr: rgba(15,17,23,0.09);
    --tx: #1a1d26;
    --tx2: #545a68;
    --tx3: #737a88;
    --green: #63A07C;
    --ghi: #63A07C;
    --peri: #5A88C0;
  }
  .chart-theme { display: flex; align-items: center; gap: 0.4rem; justify-content: flex-end;
    margin: 0 0 1.7rem; }
  .chart-theme .ctl-label { font-family: "Geist Mono", monospace; font-size: 0.6rem;
    letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-right: 0.15rem; }
  .chart-theme .ctl-btn { font-family: "Geist Mono", monospace; font-size: 0.66rem; letter-spacing: 0.03em;
    padding: 0.34rem 0.72rem; border: 1px solid var(--rule); background: transparent; color: var(--ink-soft);
    border-radius: 20px; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
  .chart-theme .ctl-btn:hover { border-color: var(--muted); }
  .chart-theme .ctl-btn.is-on { background: var(--ink); color: #fff; border-color: var(--ink); }

  /* chart figures fill the column (remove the UA figure inline margin so they align with the text) */
  .fig-open { margin-left: 0; margin-right: 0; }
  /* charts wider on desktop (extend into empty right gutter) */
  article figure.ph.chart-fig figcaption{ margin-left:0; }
  @media (min-width:1100px){
    article figure.ph.chart-fig{ width: calc(100% + 12rem); max-width:90vw; }
  }
  @media (min-width:761px) and (max-width:1099px){
    article figure.ph.chart-fig{ width: calc(100% + 5vw); }
  }
  .chartwrap .gl{ font-variant-numeric: tabular-nums; }

  .tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:1.7rem 0 2.1rem}
  .tier{background:var(--card);border:1px solid var(--rule);border-radius:12px;padding:15px 16px}
  .tier h3{font-family:"Funnel Display",sans-serif;font-weight:600;font-size:1.05rem;margin:0 0 2px}
  .tier .tsub{font-family:"Geist Mono",monospace;font-size:.62rem;letter-spacing:.09em;text-transform:uppercase;color:var(--teal-text);margin-bottom:11px;display:block}
  .tier dl{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;margin:0 0 11px}
  .tier dt{color:var(--muted);font-family:"Geist Mono",monospace;font-size:.72rem}
  .tier dd{margin:0;text-align:right;font-family:"Geist Mono",monospace;font-size:.78rem;color:var(--ink)}
  .tier .verdict{font-size:.86rem;line-height:1.45;color:var(--ink-soft);border-top:1px solid var(--rule-soft);padding-top:9px}
  .tier .verdict b{color:var(--ink);font-weight:600}

  /* ===== per-chart toolbar (like / download / share / enlarge) ===== */
  .chart-tools { display: flex; justify-content: flex-end; gap: 0.4rem; margin: 0.55rem 0 0; }
  .chart-tools button {
    width: 2rem; height: 2rem; padding: 0; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid rgba(15,17,23,0.13); background: transparent; color: #737a88;
    border-radius: 8px; transition: color .15s, border-color .15s, background .15s;
  }
  .chart-tools button:hover { color: #1a1d26; border-color: rgba(15,17,23,0.3); background: rgba(15,17,23,0.035); }
  .chart-tools button:active { transform: translateY(1px); }
  .chart-tools button svg { width: 1.05rem; height: 1.05rem; display: block; }
  .chart-tools button.liked { color: #e0507a; border-color: rgba(224,80,122,0.4); background: rgba(224,80,122,0.06); }
  .chartwrap svg { cursor: zoom-in; }

  /* ===== lightbox ===== */
  .glightbox {
    position: fixed; inset: 0; z-index: 200; display: none;
    align-items: center; justify-content: center;
    background: rgba(12,14,22,0.82); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    padding: clamp(1rem, 4vw, 3rem);
  }
  .glightbox.open { display: flex; }
  .glightbox .glb-inner {
    position: relative; background: #fff; border-radius: 16px;
    padding: clamp(1.1rem, 3vw, 2rem);
    width: 100%; max-width: min(1080px, 94vw); max-height: 92vh; overflow: auto;
    box-shadow: 0 30px 80px -20px rgba(0,0,0,0.55);
  }
  .glightbox .glb-stage .chartwrap { background: transparent; border: none; padding: 0; margin: 0; }
  .glightbox .glb-stage svg { width: 100%; height: auto; display: block; cursor: default; }
  .glightbox .glb-stage img { width: 100%; height: auto; display: block; cursor: default; border-radius: 10px; }
  .glightbox .glb-cap {
    margin-top: 0.9rem; font-family: "Source Serif 4", Georgia, serif;
    font-size: 0.95rem; line-height: 1.5; color: #545a68;
  }
  .glightbox .glb-close {
    position: absolute; top: 0.6rem; right: 0.6rem; width: 2.2rem; height: 2.2rem;
    border: none; background: rgba(15,17,23,0.06); color: #1a1d26; border-radius: 50%;
    cursor: pointer; font-size: 1.35rem; line-height: 1; display: flex; align-items: center; justify-content: center;
    transition: background .15s;
  }
  .glightbox .glb-close:hover { background: rgba(15,17,23,0.12); }

  /* ===== toast ===== */
  .g-toast {
    position: fixed; left: 50%; bottom: 1.6rem; transform: translateX(-50%) translateY(0.6rem);
    background: #1a1d26; color: #fff; font-family: 'Instrument Sans',sans-serif; font-size: 0.85rem;
    padding: 0.55rem 0.95rem; border-radius: 9px; z-index: 300; opacity: 0; pointer-events: none;
    transition: opacity .2s, transform .2s; box-shadow: 0 10px 30px -12px rgba(0,0,0,0.5);
  }
  .g-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

  /* ===== main nav + footer — ported 1:1 from the homepage (vars inlined; .wrap scoped so it doesn't hit the reading column) ===== */
  header, footer { font-family: 'Instrument Sans',sans-serif; line-height: 1.5; }
  header { position: sticky; top: 0; z-index: 50; background: rgba(255,253,247,0.82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(15,17,23,0.10); }
  header .wrap, footer .wrap { max-width: 1180px; margin: 0 auto; padding: 0 clamp(20px,5vw,56px); width: 100%; box-sizing: border-box; }
  header .nav { display: flex; align-items: center; justify-content: space-between; height: 66px; }
  header .nav .lock { transform: translateY(-2px); }
  header .lock img.logo-img { display: block; height: 54px; width: auto; }
  footer .lock img.logo-img { display: block; height: 64px; width: auto; }
  .logo-white { filter: brightness(0) invert(1); }
  .nlinks { display: flex; align-items: center; gap: 26px; }
  .nlinks a:not(.btn) { font-size: 14px; color: #3b404b; text-decoration: none; transition: color .18s; }
  .nlinks a:not(.btn):hover { color: #2940ff; }
  .nl-group { display: flex; align-items: center; gap: 26px; }
  .nlinks .btn { padding: 8px 16px; }
  header .btn { font-family: 'Instrument Sans',sans-serif; font-size: 14px; font-weight: 500; cursor: pointer; border-radius: 999px; padding: 11px 21px; border: 1px solid transparent; display: inline-flex; align-items: center; gap: 8px; transition: .18s; text-decoration: none; white-space: nowrap; }
  header .btn.b-ink { background: #0b1024; color: #fff; border-radius: 14px; }
  header .btn.b-ink:hover { transform: translateY(-1px); }
  .ham { display: none; background: none; border: 0; cursor: pointer; width: 34px; height: 34px; padding: 7px; margin-left: 4px; flex-direction: column; justify-content: space-between; }
  .ham span { display: block; height: 2px; width: 100%; background: #0f1117; border-radius: 2px; transition: transform .25s ease, opacity .2s ease; }
  .ham[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .ham[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .ham[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
  @media (max-width: 820px) {
    .nlinks { gap: 10px; }
    .nlinks .nl-group { display: none; }
    .ham { display: inline-flex; }
    header.menu-open .nl-group { display: flex; flex-direction: column; gap: 0; position: fixed; top: 66px; left: 0; right: 0; background: #fffdf7; border-bottom: 1px solid rgba(15,17,23,0.10); box-shadow: 0 18px 40px rgba(15,17,23,0.10); padding: 6px 22px 14px; z-index: 48; }
    header.menu-open .nl-group a { display: block; padding: 13px 2px; font-size: 16px; border-bottom: 1px solid rgba(15,17,23,0.10); }
    header.menu-open .nl-group a:last-child { border-bottom: 0; }
  }
  footer { position: relative; background: #2940FF; color: #fffdf7; padding: 28px 0 60px; }
  .frow2 { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
  .fmeta { font-family: 'Instrument Sans',sans-serif; font-weight: 500; font-size: 12.5px; color: rgba(245,246,250,0.55); line-height: 1.8; padding-left: 28px; }
  .flinks { display: flex; gap: 18px; flex-wrap: wrap; }
  .flinks a { font-family: 'Instrument Sans',sans-serif; font-weight: 500; font-size: 15px; color: rgba(245,246,250,0.55); text-decoration: none; }
  .flinks a:hover { color: #fffdf7; }

/* ===== merged: datatables + references + pending (v134) ===== */
.datatable-wrap{margin:2.2rem 0;overflow-x:auto}
.datatable{width:100%;border-collapse:collapse;font-size:.92rem;line-height:1.4}
.datatable caption{caption-side:top;text-align:left;font-family:'Instrument Sans',sans-serif;font-weight:600;font-size:.86rem;color:#141a30;margin-bottom:.6rem;letter-spacing:.01em}
.datatable th,.datatable td{padding:.62rem .8rem;border-bottom:1px solid rgba(11,16,36,.10);text-align:left;vertical-align:top}
.datatable thead th{font-family:"Geist Mono",monospace;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:#5c6377;font-weight:600;border-bottom:1.5px solid rgba(11,16,36,.28)}
.datatable tbody th[scope=row]{font-weight:600;color:#141a30}
.datatable td.num,.datatable th.num{font-family:"Geist Mono",monospace;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.datatable tbody tr:last-child th,.datatable tbody tr:last-child td{border-bottom:none}
.pending{display:inline-block;font-family:"Geist Mono",monospace;font-size:.66rem;text-transform:uppercase;letter-spacing:.04em;color:#A9633F;background:#F4E0D6;border-radius:4px;padding:1px 6px;vertical-align:1px}
.note-src{font-family:"Geist Mono",monospace;font-size:.7rem;color:#7a8194;margin-left:.5rem}
article .ref-note{font-size:.86rem;color:#5c6377;margin:.4rem 0 1rem}
ol.references{font-size:.86rem;line-height:1.55;color:#3b404b;padding-left:1.4rem}
ol.references li{margin:.5rem 0}
ol.references a{color:#456F9F;text-decoration:none;border-bottom:1px solid rgba(69,111,159,.3)}
article ul{margin:1.1rem 0;padding-left:1.3rem;line-height:1.6}
article ul li{margin:.45rem 0}

/* ===== v135: opaque paper surface behind reading content so the brand-grid stays in the margins, never behind text/charts/tables ===== */
article{background:var(--cream);padding:1rem 0;}
.datatable-wrap{background:var(--cream);}
.frontmatter .standfirst,
.frontmatter .byline{background:var(--cream);}

/* v138: "coming soon" treatment for read-next cards — matches homepage */
.rn-card.is-soon{cursor:default;pointer-events:none}
.rn-card.is-soon .rn-img{position:relative}
.rn-card.is-soon .rn-img img{filter:blur(3px) saturate(.9) brightness(.98)}
.rn-card.is-soon .rn-body{filter:blur(3px) saturate(.9) brightness(.98)}
.rn-card.is-soon .rn-img::after{content:'';position:absolute;inset:0;background:rgba(11,16,36,.24);z-index:1;pointer-events:none}
.rn-soon-tag{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:4;font-family:'Instrument Sans',sans-serif;font-weight:600;font-size:13px;line-height:1;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:#3D52FF;padding:13px 27px;border-radius:14px;box-shadow:0 10px 26px rgba(61,82,255,.55);white-space:nowrap}
.rn-card.is-soon .rn-cta{background:none;color:#0d2c20;opacity:.6;border:1px solid rgba(15,17,23,.22)}

/* v140: mobile carousel dots for read-next — same as homepage feed */
.readnext .rn-grid{overscroll-behavior-x:contain}
.rn-dots{display:none}
.rn-dot{width:7px;height:7px;border-radius:50%;border:0;padding:0;background:rgba(255,255,255,.42);cursor:pointer;transition:background .28s ease,width .28s ease}
.rn-dot.on{background:#fff;width:24px;border-radius:4px}
@media (max-width:759px){.rn-dots{display:flex;justify-content:center;gap:9px;margin-top:16px}}

/* v146: animated people portraits in "In this piece" (ported from About page) */
.voices .v-face{width:46px;height:46px}
.v-face--photo{background:#CDF4E2;overflow:hidden}
.v-face--photo .v-sym{display:none}
.v-face--photo .v-sym svg{width:72%;height:72%}
.v-face--photo .v-cut{position:absolute;left:50%;bottom:-8%;height:128%;width:auto;transform:translateX(-50%);animation:vCutIn .6s cubic-bezier(.22,1,.36,1) both;pointer-events:none}
@keyframes vSymDrift{0%,100%{transform:rotate(-6deg) scale(1)}50%{transform:rotate(6deg) scale(1.06)}}
@keyframes vCutIn{0%{transform:translateX(-50%) translateY(10px);opacity:0}100%{transform:translateX(-50%) translateY(0);opacity:1}}
@media (prefers-reduced-motion: reduce){.v-face--photo .v-sym{animation:none}.v-face--photo .v-cut{animation:none}}

/* v147: takeaway Cost/Quality as separate readable blocks */
.s-takeaway .st-part{display:block}
.s-takeaway .st-part + .st-part{margin-top:0.95rem}

/* placeholder chart images (to be replaced with rebuilt charts) */
.chartwrap .chart-illus{display:block;width:100%;height:auto;border-radius:6px}
/* ===== illustration/measured figure system (handover v11) ===== */
.fig{margin:clamp(2.4rem,5vw,3.4rem) 0}

.fig .cap-label{font-family:"Geist Mono",monospace;font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--teal-text);display:block;margin-bottom:.45rem}
/* figure title lives outside the SVG, per the system */
.fig-title{font-family:'Instrument Sans',sans-serif;font-weight:600;font-size:0.98rem;line-height:1.4;margin:.05rem 0 0;color:var(--ink-soft)}
.fig-sub{font-family:'Instrument Sans',sans-serif;font-size:.84rem;line-height:1.5;color:var(--muted);margin:.12rem 0 0}
  .fig .fig-cap{margin-top:.9rem}
  .fig .chart-tools{float:right;margin:.9rem 0 0 1.2rem}
  .fig .reg{clear:both;margin-top:.55rem}
  .chartwrap svg.cv .grid{stroke-width:1}
.reg{font-family:"Geist Mono",monospace;font-size:.58rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);display:block;margin-top:.55rem}
.reg b{color:#0A7F52;font-weight:500}

.chartwrap svg.cv{display:block;width:100%;height:auto;overflow:visible}
.chartwrap svg.cv .halo{paint-order:stroke;stroke:var(--c-halo);stroke-width:3.5px;
  stroke-linejoin:round;stroke-linecap:round}

/* ---------- illustrative register ---------- */
.chartwrap.ill svg.cv .ln{stroke:#5C6473;stroke-width:1.5;fill:none;stroke-linejoin:round;stroke-linecap:round}
.chartwrap.ill svg.cv .axdraw{stroke:#5C6473;stroke-width:1}
.chartwrap.ill svg.cv .ref{stroke:#5C6473;stroke-width:1;stroke-opacity:.55}
.chartwrap.ill svg.cv .hero{stroke-width:1.6;stroke-opacity:.85}
.chartwrap.ill svg.cv .axlab,.chartwrap.ill svg.cv .note,.chartwrap.ill svg.cv .leg{
  font-family:'Instrument Sans',sans-serif;font-style:italic;font-size:12.5px;font-weight:500;fill:#5C6473}
.chartwrap.ill svg.cv .axlab{font-weight:400}
.chartwrap.ill svg.cv .num{font-family:"Geist Mono",monospace;font-size:11.5px;font-style:normal;
  font-weight:400;fill:#5C6473;fill-opacity:.85;font-variant-numeric:tabular-nums}
.chartwrap.ill svg.cv .dot{opacity:0}
.chartwrap.ill.in-view svg.cv .dot{animation:c_fade .5s ease-out both;animation-delay:1.15s}

/* ---------- measured register ---------- */
.chartwrap.meas svg.cv .ln{stroke-width:1.5;fill:none;stroke-linejoin:round;stroke-linecap:round}
.chartwrap.meas svg.cv .ref{stroke-width:1.1}
.chartwrap.meas svg.cv .tick{font-family:"Geist Mono",monospace;font-size:12px;fill:#4b5265;
  font-variant-numeric:tabular-nums}
.chartwrap.meas svg.cv .axlab{font-family:'Instrument Sans',sans-serif;font-size:12.5px;fill:#4b5265}
.chartwrap.meas svg.cv .leg{font-family:'Instrument Sans',sans-serif;font-size:13px;font-weight:500}
.chartwrap.meas svg.cv .idlab{font-family:"Geist Mono",monospace;font-size:12px;font-weight:500}
.chartwrap.meas svg.cv .tick.hr{font-size:11px;fill:#6B7280}
.chartwrap.meas svg.cv .tick.day{font-size:11.5px;fill:#4b5265}
.chartwrap.meas svg.cv .dot{opacity:0}
.chartwrap.meas.in-view svg.cv .dot{animation:c_fade .5s ease-out both;animation-delay:1.15s}
.chartwrap.meas svg.cv .note{font-family:'Instrument Sans',sans-serif;font-style:italic;
  font-weight:500;font-size:13px}

/* ---------- motion ---------- */
@keyframes c_draw{to{stroke-dashoffset:0}}
@keyframes c_fade{from{opacity:0}to{opacity:1}}
@keyframes c_pop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}
.chartwrap svg.cv .axdraw,.chartwrap svg.cv .ln{stroke-dasharray:1;stroke-dashoffset:1}
.chartwrap svg.cv .fill,.chartwrap svg.cv .ref,.chartwrap svg.cv .grid,
.chartwrap svg.cv .note,.chartwrap svg.cv .axlab,.chartwrap svg.cv .num,
.chartwrap svg.cv .tick,.chartwrap svg.cv .leg,.chartwrap svg.cv .idlab{opacity:0}
.chartwrap svg.cv .hero{transform-box:fill-box;transform-origin:center;opacity:0}
.chartwrap.in-view svg.cv .axdraw{animation:c_draw .5s ease-out both}
.chartwrap.in-view svg.cv .grid{animation:c_fade .4s ease-out both;animation-delay:.15s}
.chartwrap.in-view svg.cv .tick,
.chartwrap.in-view svg.cv .axlab,
.chartwrap.in-view svg.cv .num{animation:c_fade .5s ease-out both;animation-delay:.30s}
.chartwrap.in-view svg.cv .ln{animation:c_draw 1.15s cubic-bezier(.22,1,.36,1) both;animation-delay:.42s}
.chartwrap.in-view svg.cv .fill{animation:c_fade .6s ease-out both;animation-delay:.75s}
.chartwrap.in-view svg.cv .ref{animation:c_fade .5s ease-out both;animation-delay:1.05s}
.chartwrap.in-view svg.cv .hero{animation:c_pop .5s ease-out both;animation-delay:1.35s}
.chartwrap.in-view svg.cv .note,
.chartwrap.in-view svg.cv .leg,
.chartwrap.in-view svg.cv .idlab{animation:c_fade .5s ease-out both;animation-delay:1.50s}
@media(prefers-reduced-motion:reduce){
  .chartwrap svg.cv *{animation:none!important;opacity:1!important;
    stroke-dashoffset:0!important;transform:none!important}
}
@media print{
  *{ -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; }
  @page{ margin:14mm; }
  body{ background:#fff; }
  /* print: reveal everything regardless of scroll position, and unblur headings */
  .js-sr article > *{ opacity:1 !important; transform:none !important; }
  .blurw{ filter:none !important; }
  header, #techgrid, #progress, .progress, .engage, .toc, .readnext, footer,
  .pdf-mini, .modebar, .chart-tools, .share-pop, .hamburger, .nav-toggle, #comments, .li-cta{ display:none !important; }
  .chartwrap svg.cv *{ animation:none!important; opacity:1!important; stroke-dashoffset:0!important }
  figure, .datatable-wrap, .takeaway, .pull, table, img, tr{ break-inside:avoid; page-break-inside:avoid; }
  h1,h2,h3{ break-after:avoid; page-break-after:avoid; }
  article a{ color:inherit; text-decoration:none; }
  /* drop the big edge-to-edge photos in print — decorative & space-eating */
  .ph.fig-bleed, .imgbleed{ display:none !important; }
}

article .mark{background:linear-gradient(transparent 58%, #CDF4E2 58%);padding:0 0.05em}

.pl-wrap{margin:0.2rem 0 0;width:100%}.pl-chart{width:100%}.pl-chart .modebar{padding-top:2px}.pl-chart:hover{cursor:crosshair}

/* ===== blog page — navbar + mobile fixes ===== */
@media (max-width:400px){
  header .logo-img{height:42px!important}
  header .btn{padding:9px 14px!important;font-size:14px!important}
}
@media (max-width:345px){
  header .logo-img{height:36px!important}
  header .btn{padding:8px 12px!important;font-size:13px!important}
}
@media (max-width:760px){
  /* first names only (set by the script below) need less room, but keep them inside the box */
  .v-name{font-size:0.72rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .v-meta{min-width:0}
  /* charts must never swallow a vertical swipe */
  .pl-chart, .pl-chart *{touch-action:pan-y!important}
}

/* The hero photo is positioned against the summary card by script. The card grows
   when the webfont lands, so the photo visibly jumps. Hold it until it is placed.
   The class is set by the inline script below, so with JS off nothing is hidden. */
.ph.fig-bleed{transition:opacity .25s ease}
html.hero-hold .ph.fig-bleed{opacity:0}

  main{padding-bottom:2rem}
  .b2fig .figimg{background:#fff;border:1px solid var(--rule);border-radius:14px;
     padding:clamp(16px,3.2vw,30px);display:flex;justify-content:center;align-items:center}
  .b2fig .figimg img{max-width:100%;height:auto;display:block}
  article h3.sub{font-family:"Funnel Display",sans-serif;font-weight:600;
     font-size:clamp(1.5rem,3vw,1.9rem);letter-spacing:-.015em;line-height:1.15;
     margin:3rem 0 1rem;color:var(--ink)}
  article h4.subsub{font-family:"Geist Mono",monospace;text-transform:uppercase;
     letter-spacing:.09em;font-size:.74rem;color:var(--teal-text);
     margin:2.2rem 0 .7rem;font-weight:500}
  .eqn{margin:1.7rem 0;overflow-x:auto;overflow-y:hidden}
  span.ph{background:#fff3c4;color:#7a5b00;border:1px dashed #d8b74a;border-radius:5px;
     padding:0 .4em;font-family:"Geist Mono",monospace;font-size:.82em;white-space:nowrap}
  .summary .st-label.tldr{text-transform:none;font-size:.95rem}
  /* mobile: let the solid nav bar overlap the full-bleed hero by 2px so the
     photo's cropped bottom edge doesn't show as a hairline seam (all blogs) */
  @media (max-width: 760px){  }
  /* prose citation links: brand periwinkle, not mint (mint is unreadable on cream) */
  .cite{ color: var(--teal); }
  /* like button removed — hidden-rule dropped */
  /* read-next cards: larger titles */
  .rn-title{ font-size: 1.7rem; line-height: 1.1; }
  .subhead{ font-family:"Funnel Display",sans-serif; font-weight:600; font-size:1.5rem; margin:2.4rem 0 .2rem; }
  .minihead{ margin:1.8rem 0 .1rem; } .minihead strong{ font-family:"Funnel Display",sans-serif; font-weight:600; font-size:1.12rem; }
  .plotph{ height:clamp(260px,42vh,420px); box-sizing:border-box; border:1.5px dashed rgba(90,108,255,.5); border-radius:16px; background:rgba(233,235,255,.4); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem; text-align:center; padding:1.4rem; margin:.4rem 0; }
  .plotph-tag{ font-family:"Geist Mono",monospace; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--teal-text); }
  .plotph-note{ font-family:"Instrument Sans",sans-serif; font-style:italic; font-size:.95rem; color:var(--muted); max-width:34rem; }
  /* Inside-the-Transformer: vertical placeholder image beside the intro paragraph,
     stretched to the text's height; stacks on mobile */
  .tf-figrow{ display:flex; gap:1.5rem; align-items:stretch; margin:1.6rem 0; }
  .tf-figrow .tf-text{ flex:1 1 auto; min-width:0; }
  .tf-figrow .tf-text p{ margin:0; }
  .tf-figrow .tf-vimg{ flex:0 0 150px; margin:0; }
  .tf-figrow .tf-vimg img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:14px; }
  .tf-figrow .vph{ height:100%; box-sizing:border-box; border:1.5px dashed rgba(90,108,255,.5); border-radius:14px; background:rgba(233,235,255,.4); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.35rem; text-align:center; padding:1rem; }
  .tf-figrow .vph-label{ font-family:'Geist Mono',monospace; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--teal-text); }
  .tf-figrow .vph-note{ font-family:'Instrument Sans',sans-serif; font-style:italic; font-size:.8rem; color:var(--muted); }
  @media(max-width:600px){ .tf-figrow{ flex-direction:column; } .tf-figrow .tf-vimg{ flex:0 0 auto; height:200px; } }
  /* edge-to-edge mid-article image band; height matches blog #1's mid-article
     .imgbleed--photo: clamp(260px,44vh,470px) — shorter than the hero, incl. on mobile */
  .mid-bleed{ width:100vw; margin-left:calc(50% - 50vw); margin-top:3rem; margin-bottom:3rem; position:relative; z-index:1; }
  .mid-bleed .mb-img{ display:block; width:100%; height:clamp(260px, 44vh, 470px); object-fit:cover; }
  .mid-bleed .mb-ph{ height:clamp(260px, 44vh, 470px); box-sizing:border-box; border-top:1.5px dashed rgba(90,108,255,.5); border-bottom:1.5px dashed rgba(90,108,255,.5); background:rgba(233,235,255,.4); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.4rem; text-align:center; padding:1rem; }
  .mid-bleed .mb-label{ font-family:'Geist Mono',monospace; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--teal-text); }
  .mid-bleed .mb-note{ font-family:'Instrument Sans',sans-serif; font-style:italic; font-size:.9rem; color:var(--muted); }

/* mobile: the fixed background canvas repaints continuously and is not visible on a
   phone anyway; the sticky header's backdrop blur has to re-sample everything under it
   on every scroll frame. Both off under 900px. Desktop untouched. */
@media (max-width:900px){
  #techgrid{display:none!important}
  header{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;
         background:rgba(255,253,247,0.97)!important}
}

/* the appendix summary had no marker, so it read as a plain heading and the body
   looked missing. It now starts open, and a chevron shows it can be folded away. */
/* (no marker on the appendix summary — the sub-folds carry their own) */

@media (max-width:760px){
  /* keep "aistack / 23 July 2026 / ~18 min read" on one line */
  .byline{flex-wrap:nowrap;gap:8px;font-size:11px;white-space:nowrap;justify-content:center}
  .byline .sep{opacity:.6}
  /* less air above the intro pull quote */
  .pull{margin-top:14px}
  /* equal whitespace above and below the like/share row (was 58 above, 47 below) */
  .engage{margin-top:40px!important}
}

/* the logo's ink centre sat 3px above the "Contact" label's ink centre (measured on a
   2x screenshot: 29.5 vs 32.5). Nudge it down so the two read as aligned. */
header .logo-img{position:relative;top:2px}