/* ==========================================================================
   The Signal article — layout and reading furniture.

   Loaded only on /signal/<slug>/ pages, after the four shared sheets, and
   every rule is scoped to main.gn-post (written by scripts/article-shell.cjs),
   so nothing here can reach another template.

   Measured before this sheet (2026-09-28, 1440px): 176px of padding above the
   breadcrumb, a 128px empty band between the intro and the first paragraph,
   body text at 568px beside headings at 872px and panels at 532px, all
   left-aligned in a 1000px box with ~560px of nothing on the right.

   Now: one reading column (68ch), one right rail with the section list, one
   width for everything that sits in the column, and the section map as the
   page's one visual — the article drawn to scale, which fills as you read.
   Tokens are the homepage's (css/gn.css): --ink, --line, --ac, --fd.
   ========================================================================== */

html.gn main.gn-post {
  --col: 43rem;          /* 688px: ~68ch of body copy at 17px */
  --rail: 16.5rem;
  --gap: clamp(2.5rem, 4vw, 4.5rem);
  --r: 12px;
  display: grid;
  grid-template-columns: minmax(0, var(--col));
  justify-content: center;
  column-gap: var(--gap);
  max-width: none;
  margin: 0;
  padding: clamp(20px, 3vw, 40px) var(--gut) 0;   /* the nav is sticky and in flow */
}
@media (min-width: 1080px) {
  html.gn main.gn-post { grid-template-columns: minmax(0, var(--col)) var(--rail); }
}

/* ── Header ──────────────────────────────────────────────────────────────── */
html.gn main.gn-post > header {
  grid-column: 1 / -1;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  text-align: left;
  background: none;
}
html.gn main.gn-post > header .breadcrumb {
  margin: 0 0 clamp(14px, 2vw, 22px);
  font-size: 13px;
  color: var(--ink3);
}
html.gn main.gn-post > header .breadcrumb a { color: var(--ink2); }
html.gn main.gn-post .article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin: 0 0 clamp(14px, 1.8vw, 20px);
  font-family: var(--mo);
  font-size: 12px;
  letter-spacing: .02em;
  color: var(--ink3);
}
html.gn main.gn-post .article-meta .article-category {
  order: -1;
  padding: 4px 10px;
  border: 1px solid var(--line2);
  border-radius: 999px;
  font: 600 12px/1.2 var(--f);
  letter-spacing: 0;
  text-transform: none;
  background: var(--bg);
}
html.gn main.gn-post .article-meta .article-author { font: inherit !important; color: var(--ink2) !important; }
html.gn main.gn-post .article-meta .article-author a { color: var(--ink) !important; font-weight: 500; }
/* Author links sit inside a line of text, so they carry an underline, not colour alone. */
html.gn main.gn-post > header .article-author a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}
html.gn main.gn-post :is(.article-title, .hero-title) {
  max-width: 24ch;
  margin: 0;
  font: 600 clamp(2.15rem, 1.35rem + 3.1vw, 3.75rem)/1.04 var(--fd);
  letter-spacing: -.028em;
  color: var(--ink);
  text-wrap: balance;
}
html.gn main.gn-post :is(.article-subtitle, .hero-desc) {
  max-width: 58ch;
  margin: clamp(14px, 1.8vw, 22px) 0 0;
  font-size: clamp(1.06rem, 1rem + .35vw, 1.24rem);
  line-height: 1.55;
  color: var(--ink2);
  text-wrap: pretty;
}

/* ── Section map ─────────────────────────────────────────────────────────── */
/* Every section of the article as a segment, sized by its length. It sits
   under the intro, then sticks below the nav bar and fills as you read, so
   it is the article's shape at rest and its progress in motion. */
html.gn main.gn-post .gn-map {
  grid-column: 1 / -1;
  position: sticky;
  top: var(--bar);
  z-index: 5;
  display: flex;
  gap: 3px;
  margin: clamp(22px, 3vw, 34px) 0 0;
  padding: 12px 0;
}
/* The band behind the map spans the viewport, not the column, so text
   scrolling under it never shows at the sides. */
html.gn main.gn-post .gn-map::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease;
  pointer-events: none;
}
html.gn main.gn-post .gn-map.is-stuck::before { border-bottom-color: var(--line); }
html.gn main.gn-post .gn-map-seg {
  --p: 0;
  position: relative;
  flex-basis: 0;
  min-width: 6px;
  height: 8px;
  border-radius: 4px;
  background: #DDE0E6;   /* reads as a shape at rest; the fill is --ac */
  overflow: hidden;
}
html.gn main.gn-post .gn-map-seg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ac);
  transform: scaleX(var(--p));
  transform-origin: left;
}
html.gn main.gn-post a.gn-map-seg { cursor: pointer; }
html.gn main.gn-post a.gn-map-seg:hover { box-shadow: inset 0 0 0 1px var(--ac); }
html.gn main.gn-post a.gn-map-seg:focus-visible { outline: 2px solid var(--ac); outline-offset: 3px; }
html.gn main.gn-post .gn-map-seg.is-active { box-shadow: inset 0 0 0 1px var(--ac); }

/* ── On this page ────────────────────────────────────────────────────────── */
html.gn main.gn-post .gn-toc { grid-column: 1; margin: 18px 0 0; min-width: 0; }
html.gn main.gn-post .gn-toc-box {
  border: 1px solid var(--line2);
  border-radius: var(--r);
  background: var(--bg);
}
html.gn main.gn-post .gn-toc-box > summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  cursor: pointer;
  list-style: none;
}
html.gn main.gn-post .gn-toc-box > summary::-webkit-details-marker { display: none; }
html.gn main.gn-post .gn-toc-box > summary::after {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-left: auto;
  border-right: 1.5px solid var(--ink2);
  border-bottom: 1.5px solid var(--ink2);
  transform: translateY(-2px) rotate(45deg);
  transition: transform .2s ease;
}
html.gn main.gn-post .gn-toc-box[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
html.gn main.gn-post .gn-toc-box > summary:focus-visible { outline: 2px solid var(--ac); outline-offset: 2px; border-radius: var(--r); }
html.gn main.gn-post .gn-toc-h { font-weight: 600; font-size: 14px; color: var(--ink); }
html.gn main.gn-post .gn-toc-n { font-family: var(--mo); font-size: 12px; color: var(--ink3); }
html.gn main.gn-post .gn-toc-list {
  list-style: none;
  margin: 0;
  padding: 4px 8px 10px;
  border-top: 1px solid var(--line);
  counter-reset: none;
}
html.gn main.gn-post .gn-toc-list li { margin: 0; padding: 0; }
html.gn main.gn-post .gn-toc-list li::before { content: none; }
html.gn main.gn-post .gn-toc-list a {
  display: grid;
  gap: 6px;
  padding: 9px 8px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.35;
  color: var(--ink2);
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}
html.gn main.gn-post .gn-toc-list a:hover { background: var(--bg2); color: var(--ink); }
html.gn main.gn-post .gn-toc-list a:focus-visible { outline: 2px solid var(--ac); outline-offset: -2px; }
html.gn main.gn-post .gn-toc-list a.is-active { color: var(--ink); background: var(--actint); }
html.gn main.gn-post .gn-toc-len {
  display: block;
  width: calc(var(--len) * 100%);
  min-width: 10px;
  height: 3px;
  border-radius: 2px;
  background: var(--line2);
}
html.gn main.gn-post .gn-toc-list a.is-active .gn-toc-len { background: var(--ac); }

@media (min-width: 1080px) {
  html.gn main.gn-post .gn-toc {
    grid-column: 2;
    grid-row: span 2;
    align-self: start;
    position: sticky;
    top: calc(var(--bar) + 30px + 36px);
    margin: clamp(26px, 3vw, 40px) 0 0;
    max-height: calc(100vh - var(--bar) - 100px);
    overflow: auto;
  }
  html.gn main.gn-post .gn-toc-box { border: 0; background: none; }
  html.gn main.gn-post .gn-toc-box > summary { padding: 0 8px 12px; cursor: default; pointer-events: none; }
  html.gn main.gn-post .gn-toc-box > summary::after { display: none; }
  html.gn main.gn-post .gn-toc-list { padding: 8px 0 0; }
}

/* ── Body ────────────────────────────────────────────────────────────────── */
html.gn main.gn-post > article {
  grid-column: 1;
  min-width: 0;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: clamp(26px, 3vw, 40px) 0 clamp(48px, 6vw, 80px);
}
html.gn main.gn-post > article > :is(p, ul, ol, h2, h3, h4, blockquote, figure, .callout, .table-scroll, table,
  .article-cta, .author-box, .gn-cta-scan, .related-posts, .post-nav, section, div) { max-width: none; }
html.gn main.gn-post > article :is(p, li) {
  font-size: 1.0625rem;
  line-height: 1.72;
  color: #33363C;   /* 12.4:1 on white — between --ink and --ink2 for long reading */
}
html.gn main.gn-post > article p { margin: 0 0 1.15em; }
html.gn main.gn-post > article > p:first-of-type {
  font-size: 1.14rem;
  color: var(--ink);
}
html.gn main.gn-post > article h2 {
  margin: 1.9em 0 .5em;
  font: 600 clamp(1.5rem, 1.25rem + .9vw, 1.95rem)/1.18 var(--fd);
  letter-spacing: -.018em;
  color: var(--ink);
  text-wrap: balance;
  scroll-margin-top: calc(var(--bar) + 48px);
}
html.gn main.gn-post > article :is(h3, h4):not(.related-posts *, .article-cta *, .gn-cta-scan *) {
  margin: 1.8em 0 .45em;
  font: 600 1.18rem/1.3 var(--f);
  letter-spacing: -.01em;
  color: var(--ink);
}
html.gn main.gn-post > article :is(ul, ol):not(.gn-toc-list) { margin: .4em 0 1.3em; padding-left: 1.35em; }
html.gn main.gn-post > article li { margin: 0 0 .5em; padding-left: .2em; }
html.gn main.gn-post > article li::marker { color: var(--ink3); }
html.gn main.gn-post > article ol > li::marker { font: 600 .95em var(--mo); color: var(--ac); }
html.gn main.gn-post > article strong { color: var(--ink); font-weight: 650; }
html.gn main.gn-post > article a:not([class]) {
  color: var(--ac);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  text-decoration-color: color-mix(in srgb, var(--ac) 40%, transparent);
}
html.gn main.gn-post > article a:not([class]):hover { text-decoration-color: currentColor; }
html.gn main.gn-post > article blockquote {
  margin: 1.6em 0;
  padding: 0;
  border: 0;
  font: 500 1.35rem/1.4 var(--fd);
  color: var(--ink);
}

/* Callouts: a panel with a drawn marker, no side bar. */
html.gn main.gn-post .callout {
  position: relative;
  margin: 1.8em 0;
  padding: 18px 20px 18px 50px;
  border: 1px solid var(--line2);
  border-radius: var(--r);
  background: var(--bg2);
  box-shadow: none;
}
html.gn main.gn-post .callout::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 21px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--ac);
  background: radial-gradient(circle, var(--ac) 0 3px, transparent 3.5px);
}
html.gn main.gn-post .callout.insight { background: color-mix(in srgb, var(--ac) 5%, var(--bg)); border-color: color-mix(in srgb, var(--ac) 22%, var(--line)); }
html.gn main.gn-post .callout.warning { background: color-mix(in srgb, var(--warn) 6%, var(--bg)); border-color: color-mix(in srgb, var(--warn) 26%, var(--line)); }
html.gn main.gn-post .callout.warning::before {
  border-radius: 3px;
  border-color: var(--warn);
  background: linear-gradient(var(--warn), var(--warn)) center 3px / 1.5px 6px no-repeat,
              linear-gradient(var(--warn), var(--warn)) center 11px / 1.5px 1.5px no-repeat;
}
html.gn main.gn-post .callout-label {
  display: block;
  margin: 0 0 6px;
  font: 600 13px/1.3 var(--f);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ac);
}
html.gn main.gn-post .callout.warning .callout-label { color: var(--warn); }
html.gn main.gn-post .callout p { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--ink); }
html.gn main.gn-post .callout p + p { margin-top: .7em; }

/* Tables: a ruled panel, header in the homepage's label face. */
html.gn main.gn-post .table-scroll {
  margin: 1.8em 0;
  border: 1px solid var(--line2);
  border-radius: var(--r);
  overflow-x: auto;
  background: var(--bg);
}
html.gn main.gn-post .table-scroll table { width: 100%; margin: 0; border: 0; border-collapse: collapse; font-size: .95rem; }
html.gn main.gn-post .table-scroll :is(th, td) {
  padding: 12px 14px;
  border: 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  line-height: 1.45;
  color: var(--ink2);
}
html.gn main.gn-post .table-scroll th {
  background: var(--bg2);
  font: 600 11.5px/1.3 var(--mo);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink2);
  opacity: 1;   /* gn-pages.css dims thead th to .74, which fails AA on --bg2 */
}
html.gn main.gn-post .table-scroll:focus-visible { outline: 2px solid var(--ac); outline-offset: 2px; }
html.gn main.gn-post .table-scroll td:first-child { color: var(--ink); font-weight: 600; }
html.gn main.gn-post .table-scroll tr:last-child td { border-bottom: 0; }

/* ── End matter: one width, one rhythm ──────────────────────────────────── */
html.gn main.gn-post .article-cta,
html.gn main.gn-post .cta-box {
  display: grid;
  gap: 10px;
  justify-items: start;
  margin: clamp(40px, 5vw, 56px) 0 0;
  padding: clamp(22px, 3vw, 30px);
  border: 1px solid var(--line2);
  border-radius: calc(var(--r) + 4px);
  background: var(--bg2);
  text-align: left;
}
html.gn main.gn-post .article-cta h3 { margin: 0; font: 600 clamp(1.35rem, 1.2rem + .5vw, 1.6rem)/1.2 var(--fd); letter-spacing: -.015em; color: var(--ink); }
html.gn main.gn-post .article-cta p { margin: 0 0 6px; max-width: 54ch; font-size: 1rem; color: var(--ink2); }
html.gn main.gn-post .article-cta a.btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  background: var(--ink);
  border: 1px solid var(--ink);
  color: #fff;
  font: 600 15px/1 var(--f);
  text-decoration: none;
}
html.gn main.gn-post .article-cta a.btn:hover { background: var(--ac); border-color: var(--ac); }

html.gn main.gn-post .author-box {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 22px 0 0;
  padding: 18px 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: none;
}
html.gn main.gn-post .author-avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font: 600 14px var(--f);
}
html.gn main.gn-post .author-name { font-weight: 600; color: var(--ink); }
html.gn main.gn-post .author-role { font-size: 14px; color: var(--ink2); }

html.gn main.gn-post .gn-cta-scan { margin: clamp(28px, 4vw, 40px) 0 0; max-width: none; }

html.gn main.gn-post .related-posts { margin: clamp(40px, 5vw, 56px) 0 0; padding: 0; border: 0; }
html.gn main.gn-post .related-posts > h3 { margin: 0 0 14px; font: 600 1.35rem/1.2 var(--fd); color: var(--ink); }
html.gn main.gn-post .related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr));
  gap: 12px;
}
html.gn main.gn-post .related-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line2);
  border-radius: var(--r);
  background: var(--bg);
  text-decoration: none;
  transition: border-color .2s ease, transform .2s ease;
}
html.gn main.gn-post .related-card:hover { border-color: var(--ink); transform: translateY(-2px); }
html.gn main.gn-post .related-card :is(h3, h4) { margin: 0; font: 600 1rem/1.35 var(--f); color: var(--ink); }
html.gn main.gn-post .related-card .related-category { order: -1; font: 600 12px var(--f); letter-spacing: 0; text-transform: none; }
html.gn main.gn-post .related-card .related-read { margin-top: auto; font: 600 13px var(--f); letter-spacing: 0; text-transform: none; color: var(--ac); }

html.gn main.gn-post .post-nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 12px;
  margin: clamp(28px, 4vw, 40px) 0 0;
  padding: 0;
  border: 0;
}
html.gn main.gn-post .post-nav a {
  display: grid;
  gap: 6px;
  padding: 16px 18px;
  border: 1px solid var(--line2);
  border-radius: var(--r);
  text-decoration: none;
  transition: border-color .2s ease;
}
html.gn main.gn-post .post-nav a:hover { border-color: var(--ink); }
html.gn main.gn-post .post-nav a.next-post { text-align: right; }
html.gn main.gn-post .post-nav a.next-post:only-child { grid-column: -2; }
html.gn main.gn-post .post-nav-dir { font: 500 12px var(--mo); letter-spacing: .04em; color: var(--ink3); }
html.gn main.gn-post .post-nav-title { font: 600 15px/1.35 var(--f); color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  html.gn main.gn-post *, html.gn main.gn-post *::after { transition: none !important; }
}