/* ==========================================================================
   Trunk. Learn pages. Loads AFTER nt.css; learn/ pages only.

   Rewritten 2026-08-12 on the /natural design system (nt.css): Haas Recast
   only, 11/12/13/14px scale (one 18px display size for the article H1),
   ink/gray palette, --line strokes, 16/10/6px radii, natural-green chips.
   Two layers with a hard boundary, same as before:
     STRUCTURE: load-bearing grid, sticky TOC, table scroller. Remove a rule
       and something overflows or unsticks.
     DESIGN: the nt-language skin on the article components.
   Tokens, header, footer, modal and CTA components come from nt.css. Do not
   redeclare them here.
   ========================================================================== */

/* ---------- STRUCTURE ---------- */

/* the fixed nt-header sits above the flow; every learn page starts below it */
body.learn main { padding-top:var(--nt-header-h); }

.container { max-width:72rem; margin-inline:auto; padding-inline:20px; }

/* main.css is gone; the no-italics rule survives it (journal names in the
   reference list are the one place cite appears at any volume) */
body.learn cite, body.learn em, body.learn i { font-style:normal; }

.skip-link {
  position:fixed; top:-48px; left:16px; z-index:50;
  background:#fff; border:1px solid var(--line); border-radius:6px;
  padding:8px 12px; font-size:12px; transition:top .15s ease;
}
.skip-link:focus { top:12px; }

/* breadcrumb */
.crumbs ol { display:flex; flex-wrap:wrap; gap:.4rem; margin:0; padding:0; list-style:none; }
.crumbs li { display:flex; align-items:center; gap:.4rem; }

/* hero copy sits on the same centred measure as the article body; on
   desktop the copy itself centres too (mobile stays left-aligned) */
.hero-inner { margin-inline:auto; max-width:44rem; }
@media (min-width:64em) {
  .hero-inner { text-align:center; }
  .hero-inner .crumbs ol { justify-content:center; }
  .hero-inner .art-dek { margin-inline:auto; }
}

/* lead image: straddles the hero boundary and breaks out of the measure to
   the same 64rem the inline images use. Half its height (the image is
   1200x640, so 26.67% of its rendered width, capped at the 64rem breakout)
   is reserved as extra grey below the listen bar, and the image is pulled up
   through it plus the 2rem art-layout top padding. */
body.learn { --img-pull:min(17.07rem, 26.67vw - 11px); }
/* legal pages (/terms, /privacy) run the article shell with no lead image,
   so the hero reserves no pull-up space */
body.learn.legal { --img-pull:0rem; }
.art-media {
  --fig-w:min(64rem, calc(100vw - 40px));
  width:var(--fig-w);
  margin:calc(-1 * (var(--img-pull) + 2rem)) calc((100% - var(--fig-w)) / 2) 0;
}
.art-media img { display:block; width:100%; height:auto; }

/* byline: one small card per fact (author, reviewer, published, updated,
   read time); the row wraps on phones */
.byline { display:flex; flex-wrap:wrap; }
.byline .b-card { display:grid; align-content:start; }
.byline .b-k,
.byline .b-v { display:block; }

/* page history: real revision log stamped from git (scripts/stamp-history.mjs) */
.page-history summary { cursor:pointer; }
.page-history ol { display:grid; }

/* layout: one centred measure-width column (the TOC sidebar is gone) */
.art-layout { display:grid; grid-template-columns:minmax(0, 1fr); }

/* Grid items default to min-width:auto, so the table's min-content width
   (nowrap header cells) would blow the column past the viewport. min-width:0
   pins the track to the container and lets .evd-scroll do the scrolling
   instead. Do not remove. */
.art-body { min-width:0; }

/* the measure */
.art-body { max-width:44rem; width:100%; margin-inline:auto; }

/* a jumped-to heading must clear the fixed header instead of hiding under it */
.art-body h2 { scroll-margin-top:calc(var(--nt-header-h) + 1.25rem); }

/* evidence table: the wrapper scrolls, the page never does */
.evd-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.evd { width:100%; min-width:34rem; border-collapse:collapse; }
.evd caption { text-align:left; }
.evd th, .evd td { text-align:left; vertical-align:top; }

/* references */
.art-refs { margin:0; padding:0; list-style:none; }
.art-refs li { display:flex; gap:.7rem; scroll-margin-top:calc(var(--nt-header-h) + 1.25rem); }
.art-refs .n { flex:none; }

/* author box */
.authorbox .a-links { display:flex; flex-wrap:wrap; gap:1.25rem; }

/* hub index + related list */
.hub-list, .related { margin:0; padding:0; list-style:none; }
.hub-list li, .related li { display:block; }

/* ---------- DESIGN ---------- */

/* Atacama Trial Condensed Light: the large-display serif across the editorial
   surface. Body copy stays Haas Recast. */
@font-face {
  font-family: 'Atacama Trial';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/assets/fonts/AtacamaTrial-CondensedLight.woff2') format('woff2');
}

/* ---------- article header: the learn-surface nav variant ----------
   Full-width natural-green bar, white type. Category links left, logo
   dead-centre, review chip + white CTA right. Cart/account do not exist on
   learn pages (nt.js null-guards them); the burger serves the category menu
   on mobile. The green survives the scroll (is-solid) and menu-open states,
   which nt.css paints white on the shop header. */
.nt-header.ah,
.nt-header.ah.is-solid,
.nt-header.ah.menu-open { padding:0; background:#37A733; }
.ah-in {
  position:relative;
  width:100%; height:100%;
  padding-inline:18px;
  display:flex; align-items:center; gap:26px;
  color:#fff;
}
.ah-logo { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); }
.ah-logo img { display:block; height:17px; width:auto; }
.ah-right { margin-left:auto; display:flex; align-items:center; gap:18px; }
.ah-rev { display:flex; align-items:center; gap:7px; font-size:12px; }
.ah-rev-t { font-weight:500; white-space:nowrap; }
.ah-stars { display:flex; gap:2px; }
.ah-stars svg { width:12px; height:12px; fill:#fff; }
.ah-cta {
  background:#fff; color:#20471A;
  font-size:12px; font-weight:500; line-height:1;
  padding:8px 14px; border-radius:999px;
  transition:opacity .15s ease;
}
.ah-cta:hover { opacity:.85; }
@media (max-width:64em) {
  /* mobile: category links collapse into the shared nt-menu behind the
     burger; logo stays centred, CTA stays right */
  .nt-header.ah { padding:0; }
  .ah .nt-burger { margin-right:0; }
}
@media (max-width:44em) {
  .ah-in { gap:12px; }
  .ah-logo img { height:15px; }
}


/* ---------- article progress header ----------
   White bar BELOW the green header (z 19 vs 20), so the green header always
   slides over it when the two cross: current section left,
   dark logo centre (desktop), compact listen right, green progress stroke
   as its bottom edge. .is-on is driven by the article's inline script. */
.prog {
  position:fixed; top:0; left:0; right:0; z-index:19;
  background:#fff;
  transform:translateY(-100%); transition:transform .25s ease;
}
.prog.is-on { transform:translateY(0); }
.prog-in {
  position:relative; height:var(--nt-header-h);
  display:flex; align-items:center; gap:16px; padding:0 18px;
}
.prog-sec {
  font-size:12px; font-weight:500;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  flex:1; min-width:0;
}
.prog-logo { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); }
.prog-logo img { display:block; height:17px; width:auto; }
.prog-listen {
  flex:none; display:inline-flex; align-items:center; gap:8px;
  font-size:12px; font-weight:500; color:var(--ink);
  transition:opacity .15s ease;
}
.prog-listen:hover { opacity:.7; }
.prog-play {
  width:26px; height:26px; border-radius:50%;
  background:#37A733; color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.prog-play svg { width:10px; height:10px; fill:currentColor; margin-left:1px; }
.prog-bar { height:3px; background:var(--pill); }
.prog-bar span { display:block; height:100%; width:0; background:#37A733; }
@media (max-width:64em) {
  .prog-logo { display:none; }
}

h2 { margin:0; font-size:14px; font-weight:650; letter-spacing:0; }

.crumbs { padding-block:1.25rem .25rem; font-size:11px; color:var(--gray); }
.crumbs a { transition:opacity .15s ease; }
.crumbs a:hover { opacity:.55; }
.crumbs .sep { color:var(--gray-lt); }
.crumbs [aria-current="page"] { color:var(--ink); }

.eyebrow { display:block; font-size:11px; font-weight:500; color:var(--gray); }

/* hero band: the card grey, full width, ink type; crumbs keep their
   standard light-surface colors from the base rules above */
.art-hero { --hero-pad:clamp(1.75rem, 2.5vw, 2.5rem); background:var(--pill); color:var(--ink); padding-block:clamp(1.5rem, 4vw, 4rem) calc(var(--hero-pad) + var(--img-pull, 0rem)); border-bottom:1px solid var(--line); }
.art-hero .crumbs { padding-block:0; margin-bottom:1rem; }

/* byline strip: quick provenance between the lead image and the provenance
   card (names, updated date, shared .nt-chip) */
.hero-by { margin-block:1rem; display:flex; flex-wrap:wrap; align-items:center; gap:.85rem 14px; font-size:13px; letter-spacing:.01em; }
/* the reviewer tile: a natural green fill until a real, consenting
   reviewer's headshot exists */
.hb-ava { flex:none; width:56px; height:56px; background:#37A733; }
.hb-ava img { display:block; width:100%; height:auto; }
.hero-by a {
  color:var(--ink); font-weight:500;
  text-decoration:underline dotted #9A9A9A; text-underline-offset:3px;
}
.hb-t { display:grid; gap:.5rem; justify-items:start; }
.hb-upd { margin-left:auto; align-self:flex-start; color:var(--gray); }
@media (max-width:44em) {
  /* mobile: row 1 photo + reviewed-by, row 2 updated date then the chip,
     indented to the text column (hb-t dissolves via display:contents) */
  .hero-by { display:grid; grid-template-columns:72px 1fr; align-items:center; column-gap:14px; row-gap:.25rem; }
  .hb-t { display:contents; }
  /* the photo spans all three text rows so the lines sit tight beside it */
  .hb-ava { grid-area:1 / 1 / 4 / 2; width:72px; height:72px; align-self:center; }
  .hb-t > span:first-child { grid-area:1 / 2; align-self:end; }
  .hb-upd { grid-area:2 / 2; margin-left:0; align-self:center; }
  .hb-chip { grid-area:3 / 2; justify-self:start; }
}
.hb-upd time { color:var(--ink); font-weight:500; }
.hb-chip { display:inline-flex; align-items:center; gap:5px; }
.hb-chip svg { width:12px; height:12px; color:#37A733; }

/* listen/share bar: white pill card at the bottom of the hero */
.listen {
  margin-top:1.5rem;
  /* the bar straddles the lead image's top edge: pulled down through the
     hero-pad gap plus half its own 52px height, painted above the image */
  position:relative; z-index:2;
  margin-bottom:calc(-1 * var(--hero-pad, 0rem) - 26px);
  display:flex; align-items:center; gap:14px;
  background:#fff; border:1px solid var(--line); border-radius:999px;
  padding:8px; font-size:13px; letter-spacing:.01em;
}
.ls-play {
  flex:none; width:36px; height:36px; border-radius:50%;
  background:#37A733; color:#fff;
  display:flex; align-items:center; justify-content:center;
  transition:opacity .15s ease;
}
.ls-play:hover { opacity:.85; }
.ls-play svg { width:15px; height:15px; fill:currentColor; margin-left:2px; }
.ls-t { font-weight:500; }
.ls-sep { width:1px; height:16px; background:var(--line); }
.ls-d { color:var(--gray); }
/* the pill and its expanded four-button state swap in place: the pill keeps
   the row's width (it only fades), the buttons overlay from the right */
.ls-ai-wrap { margin-left:auto; position:relative; display:flex; align-items:center; }
.ls-ai {
  display:inline-flex; align-items:center; gap:6px;
  /* gradient stroke: natural green at the ends, 25% green mid, on 45deg;
     painted on the border-box behind a pill-grey padding-box fill */
  border:1px solid transparent;
  background:
    linear-gradient(var(--pill), var(--pill)) padding-box,
    linear-gradient(45deg, #37A733, rgba(55,167,51,.25), #37A733) border-box;
  border-radius:999px; height:36px; padding:0 14px;
  font-size:12px; font-weight:500; line-height:1; color:var(--ink);
  transition:opacity .2s ease, transform .2s ease;
}
.ls-ai:hover { opacity:.7; }
.ls-ai-wrap.is-open .ls-ai { opacity:0; transform:scale(.92); pointer-events:none; }
.ls-ai-set {
  position:absolute; right:0; top:50%; transform:translateY(-50%);
  display:flex; gap:8px;
  /* the overlay must not eat clicks meant for the pill beneath it; the
     buttons re-enable their own pointer-events when open */
  pointer-events:none;
}
.ls-ai-btn {
  width:36px; height:36px; border-radius:50%;
  background:var(--pill); color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transform:scale(.4); pointer-events:none;
  transition:opacity .25s ease, transform .25s cubic-bezier(.3,1.4,.6,1);
}
.ls-ai-btn svg { width:15px; height:15px; fill:currentColor; }
.ls-ai-btn:hover { background:#ECECEC; }
.ls-ai-wrap.is-open .ls-ai-btn { opacity:1; transform:scale(1); pointer-events:auto; }
/* cascade: buttons pop in right to left, toward the reader's thumb */
.ls-ai-wrap.is-open .ls-ai-btn:nth-child(3) { transition-delay:.04s; }
.ls-ai-wrap.is-open .ls-ai-btn:nth-child(2) { transition-delay:.08s; }
.ls-ai-wrap.is-open .ls-ai-btn:nth-child(1) { transition-delay:.12s; }
@media (max-width:44em) {
  .listen { gap:8px; }
  .ls-sep, .ls-d { display:none; }
}
/* the icon cycles through AI marks (OpenAI, Claude, Gemini, X), a slow
   cross-fade loop; reduced-motion pins the first mark */
.ls-ai-ic { position:relative; width:13px; height:13px; }
.ls-ai-ic svg {
  position:absolute; inset:0; width:13px; height:13px; fill:currentColor;
  opacity:0; animation:ai-cycle 8s linear infinite;
}
.ls-ai-ic svg:nth-child(2) { animation-delay:2s; }
.ls-ai-ic svg:nth-child(3) { animation-delay:4s; }
.ls-ai-ic svg:nth-child(4) { animation-delay:6s; }
@keyframes ai-cycle {
  0% { opacity:0; }
  6% { opacity:1; }
  25% { opacity:1; }
  31% { opacity:0; }
  100% { opacity:0; }
}
@media (prefers-reduced-motion:reduce) {
  .ls-ai-ic svg { animation:none; }
  .ls-ai-ic svg:first-child { opacity:1; }
}
.art-hero h1 {
  margin-top:.6rem; max-width:44rem; color:#20471A;
  font-family:'Atacama Trial', Georgia, serif;
  font-size:clamp(36px, 3.8vw, 45px); font-weight:300; line-height:1.1; letter-spacing:-0.03em;
}
.hub-head h1 {
  margin-top:.5rem; max-width:46rem;
  font-size:18px; font-weight:650; line-height:1.25; letter-spacing:0;
}
.lede { margin-top:.75rem; font-size:13px; letter-spacing:.01em; line-height:1.6; color:#4A4A4A; }
.art-dek { margin-top:.75rem; max-width:30rem; }
/* 6px: images take the smallest radius tier (see the gate forest).
   The stroke is translucent white: --line disappears into the image's own
   light greens on this band. */

/* the provenance card: one grey card at the top of the article body holding
   the byline facts and the page-history toggle */
.byline {
  margin-bottom:1rem; gap:.85rem 2.25rem; font-size:11px;
  background:var(--pill); border:1px solid var(--line); border-radius:10px;
  padding:14px 16px;
}
.byline .b-card { gap:.3rem; }
.byline .b-k { color:var(--gray); }
.byline .b-v { color:var(--ink); font-weight:500; }
/* byline links get the shared dotted-underline treatment from nt.css */

.page-history { font-size:11px; color:var(--gray); }
.page-history summary { font-weight:500; }
.page-history ol { gap:.3rem; margin:.5rem 0 0; padding:0; list-style:none; }
.page-history time { font-weight:500; margin-right:.5rem; color:var(--ink); }
.byline .page-history { width:100%; padding-top:.8rem; border-top:1px solid var(--line); }

.art-layout { padding-block:2rem clamp(3rem, 6vw, 5rem); }

/* the one article-paragraph style: body paragraphs and the hero dek */
.art-body > p, .art-dek { margin-top:1rem; font-size:16px; line-height:1.6; color:#4A4A4A; }
/* section headings share the title's serif voice at reading scale */
.art-body h2 {
  margin-top:4.5rem; color:#20471A;
  font-family:'Atacama Trial', Georgia, serif;
  font-size:29px; font-weight:300; line-height:1.2; letter-spacing:-0.03em;
}
.art-body h2 + p { margin-top:.8rem; }

/* prose lists (the legal pages; any article that needs one): the paragraph
   voice with green markers. Unclassed lists only, so .art-refs and other
   component lists keep their own layouts. */
.art-body > ul:not([class]), .art-body > ol:not([class]) {
  margin:1rem 0 0; padding-left:1.4rem;
  font-size:16px; line-height:1.6; color:#4A4A4A;
}
.art-body > ul:not([class]) li, .art-body > ol:not([class]) li { margin-top:.5rem; }
.art-body > ul:not([class]) li::marker, .art-body > ol:not([class]) li::marker { color:#20471A; }

/* highlighter: a real-marker swipe in the brand lime. Pure CSS (no
   plugin): the gradient fakes ink pooling at the swipe's ends, the uneven
   radii fake the nib, and clone repeats the swipe per wrapped line.
   Use on <mark class="hl">. */
mark.hl {
  color:inherit;
  background-color:transparent; /* kill the UA's default mark yellow */
  /* one swipe riding low over the text, hard ink pooling at both ends;
     the inline script coin-flips .hl-2 onto some marks for a second pass */
  background-image:linear-gradient(100deg,
    rgba(153,255,139,0) 1.5%,
    rgba(153,255,139,.95) 4.5%,
    rgba(153,255,139,.45) 10%,
    rgba(153,255,139,.28) 88%,
    rgba(153,255,139,.9) 94.5%,
    rgba(153,255,139,0) 98%);
  background-size:100% 80%;
  background-position:0 70%;
  background-repeat:no-repeat;
  margin-inline:-12px -9px; padding-inline:12px 9px;
  border-radius:12px 3px 14px 5px;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}
/* the second pass: a weaker, narrower stroke sitting lower */
mark.hl.hl-2 {
  background-image:
    linear-gradient(100deg,
      rgba(153,255,139,0) 1.5%,
      rgba(153,255,139,.95) 4.5%,
      rgba(153,255,139,.45) 10%,
      rgba(153,255,139,.28) 88%,
      rgba(153,255,139,.9) 94.5%,
      rgba(153,255,139,0) 98%),
    linear-gradient(96deg,
      rgba(153,255,139,0) 2%,
      rgba(153,255,139,.55) 12%,
      rgba(153,255,139,.4) 86%,
      rgba(153,255,139,0) 96%);
  background-size:100% 80%, 94% 58%;
  background-position:0 70%, 5% 96%;
}

/* images default to the 6px radius tier on this surface */
.art-media img, .art-fig img, .hb-ava img, .authorbox .a-photo { border-radius:0; }

/* mid-article figures: small grey caption */
.art-fig { margin:2rem 0 0; }
.art-fig img { display:block; width:100%; height:auto; }
.art-fig figcaption { margin-top:.5rem; font-size:11px; color:var(--gray); line-height:1.5; }
/* inline images break out of the 44rem measure up to 56rem, centred; the
   caption stays on the measure. Collapses to no-op on small screens where
   the available width is the measure anyway. Graphs are full-bleed already. */
.art-fig:not(.graph) {
  --fig-w:min(64rem, calc(100vw - 40px));
  width:var(--fig-w);
  margin-block:3.5rem;
  margin-inline:calc((100% - var(--fig-w)) / 2);
}
.art-fig:not(.graph) figcaption { max-width:44rem; margin-inline:auto; }

/* footnote references */
.fn {
  font-size:10px; color:#37A733; font-weight:500; vertical-align:super; line-height:1;
  margin-left:2px; transition:color .15s ease;
}
.fn:hover { color:#20471A; }

.note {
  margin-top:1.25rem; background:var(--pill);
  border:1px solid var(--line); border-radius:10px;
  padding:16px 18px; font-size:13px; letter-spacing:.01em; line-height:1.6; color:#4A4A4A;
}
.note strong { color:var(--ink); font-weight:500; }
/* a headed card: heading on its own line, no full stop, never a bold run-in */
.note p { margin:0; }
.note p + p { margin-top:.6rem; }
.note .note-t { margin:0 0 .6rem; font-weight:650; color:var(--ink); }

/* the tip card: a bare washed-lime block, square edged and strokeless.
   No heading, no line breaks: a tip is a sentence or two at most. */
.tip {
  margin-top:1.25rem;
  background:rgba(153,255,139,.2);
  border:1px solid rgba(55,167,51,.15);
  padding:14px 20px; font-size:16px; line-height:1.6; color:#20471A;
}
.tip p { margin:0; }
/* attribution row: small photo tile plus a name line */
.tip .tip-by { margin-top:12px; display:flex; align-items:center; gap:8px; font-size:13px; letter-spacing:.01em; }
.tip .tip-by img { display:block; width:24px; height:24px; object-fit:cover; }
.tip .tip-by strong { font-weight:500; }
.tip .tip-by .tip-tile { flex:none; width:24px; height:24px; background:#37A733; }

/* text links: dotted-underline treatment comes from nt.css */
.textlink {
  display:inline-flex; align-items:center; gap:3px;
  color:var(--ink); font-weight:500;
  transition:opacity .15s ease;
}
.textlink:hover { opacity:.55; }
.textlink .chev { width:12px; height:12px; }

/* evidence table */
.evd-scroll { margin-top:1.25rem; border:1px solid var(--line); border-radius:10px; }
.evd { font-size:13px; letter-spacing:.01em; min-width:36rem; }
/* the caption stays in the markup for screen readers and passage retrieval;
   visually the grey header row is the table's top */
.evd caption {
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}
.evd th, .evd td { padding:10px 14px; border-bottom:1px solid var(--line); line-height:1.5; }
.evd tbody tr:last-child th, .evd tbody tr:last-child td { border-bottom:0; }
.evd thead th { font-size:11px; font-weight:500; color:var(--gray); background:var(--pill); }
/* the grey row's top corners follow the 10px wrapper radius */
.evd thead th:first-child { border-top-left-radius:9px; }
.evd thead th:last-child { border-top-right-radius:9px; }
.evd tbody th { font-weight:500; }
.evd td { color:#4A4A4A; }

/* evidence chips are the shared .nt-chip (nt.css); table density variant only */
.evd .nt-chip { display:inline-block; font-size:10px; padding:4px 6px; white-space:nowrap; }

/* FAQ: card rows, plus flips to minus when open */
.faq { margin-top:1rem; display:flex; flex-direction:column; gap:8px; }
.faq details { background:var(--pill); border:1px solid var(--line); border-radius:10px; padding:0 16px; }
.faq summary {
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:13px 0; font-size:16px; font-weight:400;
}
.faq summary::-webkit-details-marker { display:none; }
.faq .fx { flex:none; font-size:16px; line-height:1; color:var(--ink); }
.faq .fx::before { content:"+"; }
.faq details[open] .fx::before { content:"\2212"; }
.faq-a { padding-bottom:14px; }
.faq-a p { margin-top:.5rem; font-size:13px; letter-spacing:.01em; line-height:1.6; color:#4A4A4A; }
.faq-a p:first-child { margin-top:0; }

/* open/close animation via the details-content pseudo (Chrome 129+ and
   friends); older engines simply snap, which is the native behaviour */
.faq details { interpolate-size:allow-keywords; }
.faq details::details-content {
  opacity:0; block-size:0; overflow-y:clip;
  transition:content-visibility .28s allow-discrete, opacity .28s ease, block-size .28s ease;
}
.faq details[open]::details-content { opacity:1; block-size:auto; }
@media (prefers-reduced-motion:reduce) {
  .faq details::details-content { transition:none; }
}

.authorbox {
  margin-top:2.5rem; border:1px solid var(--line); border-radius:16px;
  padding:16px 18px; font-size:12px;
  display:flex; align-items:flex-start; gap:16px;
}
.authorbox .a-photo { flex:none; width:56px; height:56px; }
.authorbox .a-name { font-size:13px; letter-spacing:.01em; font-weight:650; }
.authorbox .a-role { color:var(--gray); margin-top:.15rem; }
.authorbox .a-bio { margin-top:.6rem; line-height:1.6; color:#4A4A4A; }
.authorbox .a-bio strong { color:var(--ink); font-weight:500; }
.authorbox .a-links { margin-top:.8rem; font-size:12px; }

.micro { margin-top:.75rem; font-size:11px; color:var(--gray); line-height:1.5; }
.art-refs { margin-top:.9rem; font-size:11px; color:var(--gray); }
.art-refs li { padding-block:.25rem; line-height:1.5; }
.art-disc { margin-top:1.75rem; font-size:11px; color:var(--gray); line-height:1.5; }

/* related row ("Keep reading"): constrained to the article measure */
.section { padding-block:0 3rem; }
.section .container { max-width:calc(44rem + 40px); }
.section-head { margin-bottom:.75rem; }
.related { display:grid; gap:8px; }
.related li a {
  display:block; padding:13px 16px;
  background:var(--pill); border:1px solid var(--line); border-radius:10px;
  font-size:13px; letter-spacing:.01em; font-weight:500;
  transition:background-color .15s ease;
}
.related li a:hover { background-color:#ECECEC; }

/* ---------- hub index ---------- */

/* hub content sits on the article measure, not the 72rem container */
.hub-section { max-width:calc(44rem + 40px); padding-block:1.75rem 0; }
.hub-section:last-child { padding-bottom:3rem; }
.hub-list { margin-top:.75rem; display:grid; gap:10px; }
.hub-list li a {
  display:block; padding:14px 16px 12px;
  background:var(--pill); border:1px solid var(--line); border-radius:16px;
  font-size:13px; letter-spacing:.01em; font-weight:500;
  transition:background-color .15s ease;
}
.hub-list li a:hover { background-color:#ECECEC; }
.hub-list li time { display:block; font-size:11px; font-weight:400; color:var(--gray); margin-top:.2rem; }

/* ---------- popup audio player (assets/js/listen.js) ----------
   Injected DOM: .lp-backdrop + .lp-card appended to body, hidden by default.
   z 60/61 must clear both sticky headers (z 19/20) and the floating CTA
   (z 25). Mobile is a bottom sheet; at 44em and up the card centres. */

.lp-backdrop {
  position:fixed; inset:0; z-index:60;
  background:rgba(11,11,11,.4);
  opacity:0; transition:opacity .2s ease;
}
.lp-backdrop.is-open { opacity:1; }

.lp-card {
  position:fixed; left:0; right:0; bottom:0; z-index:61;
  background:#fff; border:1px solid var(--line);
  border-radius:16px 16px 0 0;
  padding:24px 24px calc(24px + env(safe-area-inset-bottom, 0px));
  text-align:center;
  transform:translateY(100%);
  transition:transform .26s cubic-bezier(.32,.72,0,1);
}
.lp-card.is-open { transform:translateY(0); }
@media (min-width:44em) {
  .lp-card {
    left:50%; right:auto; top:50%; bottom:auto;
    width:min(400px, calc(100vw - 2rem));
    border-radius:16px;
    padding-bottom:24px;
    opacity:0;
    transform:translate(-50%,-50%) scale(.96);
    transition:transform .26s cubic-bezier(.32,.72,0,1), opacity .2s ease;
  }
  .lp-card.is-open { opacity:1; transform:translate(-50%,-50%) scale(1); }
}

.lp-close {
  position:absolute; top:12px; right:12px;
  width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--ink);
  transition:background-color .15s ease;
}
.lp-close:hover { background-color:var(--pill); }
.lp-close svg { width:16px; height:16px; }

/* the orb: flat natural-green disc; JS scales it from real audio amplitude
   while playing, the breathe keyframes cover paused */
.lp-orb { position:relative; width:140px; height:140px; margin:20px auto 0; }
.lp-core {
  position:absolute; inset:0; display:block; border-radius:50%;
  will-change:transform; background:#37A733;
}
@keyframes lp-breathe {
  0%, 100% { transform:scale(1); }
  50% { transform:scale(1.02); }
}
.lp-core.is-breathing { animation:lp-breathe 4s ease-in-out infinite; }
@media (prefers-reduced-motion:reduce) {
  .lp-core.is-breathing { animation:none; }
  .lp-backdrop, .lp-card { transition:none; }
}

.lp-title {
  margin-top:20px;
  font-size:16px; font-weight:650; line-height:1.35;
  color:var(--ink);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.lp-meta { margin-top:6px; font-size:13px; letter-spacing:.01em; color:var(--gray); }
.lp-note { margin-top:14px; font-size:11px; color:var(--gray); line-height:1.5; }

.lp-scrub { margin-top:18px; display:flex; align-items:center; gap:10px; }
.lp-cur, .lp-total {
  flex:none; min-width:30px;
  font-size:11px; color:var(--gray); font-variant-numeric:tabular-nums;
}
.lp-cur { text-align:left; }
.lp-total { text-align:right; }
.lp-range {
  --lp-p:0%;
  flex:1; min-width:0; height:16px; margin:0; padding:0;
  -webkit-appearance:none; appearance:none;
  background:transparent; cursor:pointer;
}
.lp-range::-webkit-slider-runnable-track {
  height:4px; border-radius:2px;
  background:linear-gradient(to right, #37A733 var(--lp-p), var(--line) var(--lp-p));
}
.lp-range::-webkit-slider-thumb {
  -webkit-appearance:none; appearance:none;
  width:12px; height:12px; margin-top:-4px; border:0; border-radius:50%;
  background:#37A733;
}
.lp-range::-moz-range-track { height:4px; border-radius:2px; background:var(--line); }
.lp-range::-moz-range-progress { height:4px; border-radius:2px; background:#37A733; }
.lp-range::-moz-range-thumb { width:12px; height:12px; border:0; border-radius:50%; background:#37A733; }

.lp-controls { margin-top:14px; display:flex; align-items:center; justify-content:center; gap:14px; }
.lp-back, .lp-fwd {
  width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--ink);
  transition:background-color .15s ease;
}
.lp-back:hover, .lp-fwd:hover { background-color:var(--pill); }
.lp-back svg, .lp-fwd svg { width:26px; height:26px; }
.lp-toggle {
  width:56px; height:56px; border-radius:50%;
  background:#37A733; color:#fff;
  display:flex; align-items:center; justify-content:center;
  transition:opacity .15s ease;
}
.lp-toggle:hover { opacity:.85; }
.lp-toggle svg { width:20px; height:20px; fill:currentColor; }
/* the play triangle needs the same optical nudge as .ls-play */
.lp-toggle:not(.is-on) svg { margin-left:2px; }
.lp-rate {
  height:32px; padding:0 12px; border-radius:999px;
  background:var(--pill);
  font-size:13px; letter-spacing:.01em; font-weight:500; line-height:1;
  transition:background-color .15s ease;
}
.lp-rate:hover { background-color:#ECECEC; }
.lp-chap {
  height:32px; padding:0 10px; border-radius:999px;
  background:var(--pill); color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  transition:background-color .15s ease;
}
.lp-chap[hidden] { display:none; }
.lp-chap:hover, .lp-chap.is-open { background-color:#ECECEC; }
.lp-chap svg { width:15px; height:15px; }

/* chapter list: subheading rows, timestamp right, current chapter marked */
.lp-chapters {
  margin-top:16px; max-height:176px; overflow:auto;
  border:1px solid var(--line); border-radius:10px;
  text-align:left;
}
.lp-ch {
  width:100%;
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:10px 12px;
  font-size:13px; letter-spacing:.01em; text-align:left; color:var(--ink);
  transition:background-color .15s ease;
}
.lp-ch + .lp-ch { border-top:1px solid var(--line); }
.lp-ch:hover, .lp-ch.is-active { background-color:var(--pill); }
.lp-ch-s { flex:none; font-size:11px; color:var(--gray); font-variant-numeric:tabular-nums; }
.lp-ch.is-active .lp-ch-s { color:#37A733; }

/* no manifest entry yet: controls stay visible but inert */
.lp-card.is-off .lp-scrub, .lp-card.is-off .lp-controls { opacity:.4; pointer-events:none; }

/* while playing, the bar buttons swap to a pause glyph; the play triangle's
   optical nudge must not follow it */
.ls-play.is-playing svg { margin-left:0; }
.prog-listen.is-playing .prog-play svg { margin-left:0; }

/* ---------- inline line graph (assets/js/graph.js) ----------
   figure.graph is an .art-fig variant: figure margin and figcaption style
   come from .art-fig. graph.js injects the legend, SVG and tooltip; series
   color tokens live here, never as inline attributes. */

/* the 3.5rem matches the air after an image figure (which precedes an h2);
   it collapses with a following h2's own margin, so the rhythm holds.
   Every graph sits in its own full-bleed grey band, hero style: the figure
   breaks out of the measure to viewport width, .gr-wrap (injected by
   graph.js) pulls the chart back onto the 44rem measure. */
.art-fig.graph {
  width:100vw; margin-left:calc(50% - 50vw);
  margin-top:3.5rem; margin-bottom:4.5rem;
  background:var(--pill);
  border-block:1px solid var(--line);
  padding:2.5rem 20px;
}
.graph .gr-wrap { position:relative; max-width:44rem; margin-inline:auto; }
/* 100vw includes the scrollbar on platforms that reserve one; clip the sliver */
body.learn { overflow-x:clip; }
.graph .gr-svg { display:block; width:100%; }

/* series strokes: the brand pair, then the muted slot for any extras.
   is-mute is the isolation state: the not-clicked series drop to grey */
.graph .gr-line { fill:none; stroke-width:3.5; stroke-linecap:round; stroke-linejoin:round; transition:stroke .25s ease; }
.graph .gr-s0 { stroke:#37A733; }
.graph .gr-s1 { stroke:#99FF8B; }
.graph .gr-sx { stroke:var(--gray-lt); }
.graph .gr-line.is-mute { stroke:var(--gray-lt); }
/* draw-in: graph.js primes stroke-dashoffset and staggers via --gr-delay;
   the heavy expo ease-out lands fast then settles long */
.graph .gr-line.is-draw { transition:stroke-dashoffset 1.4s cubic-bezier(.19,1,.22,1) var(--gr-delay, 0s), stroke .25s ease; }

.graph .gr-axis { stroke:var(--gray-lt); stroke-width:1; }
.graph .gr-grid { stroke:var(--line); stroke-width:1; }
.graph .gr-tick, .graph .gr-label { font-size:11px; fill:var(--gray); }
.graph .gr-tick { font-variant-numeric:tabular-nums; }

/* hover layer: crosshair, snapped dots, transparent capture rect */
.graph .gr-cross { stroke:var(--gray-lt); stroke-width:1; }
.graph .gr-dot { stroke:#fff; stroke-width:1.5; transition:fill .25s ease; }
.graph .gr-d0 { fill:#37A733; }
.graph .gr-d1 { fill:#99FF8B; }
.graph .gr-dx { fill:var(--gray-lt); }
.graph .gr-dot.is-mute { fill:var(--gray-lt); }
/* pan-y keeps vertical page scroll native while horizontal drags scrub */
.graph .gr-hit { fill:none; pointer-events:all; touch-action:pan-y; cursor:crosshair; }

/* legend: swatch button + name; clicking a key (or the line itself)
   isolates that series and greys the rest, clicking again restores */
.graph .gr-legend { display:flex; flex-wrap:wrap; align-items:center; gap:6px 16px; margin-bottom:10px; font-size:12px; font-weight:500; color:#4A4A4A; }
.graph .gr-key { display:inline-flex; align-items:center; gap:6px; background:none; border:0; padding:0; font:inherit; color:inherit; cursor:pointer; }
.graph .gr-key.is-mute { color:var(--gray-lt); }
.graph .gr-key.is-mute .gr-sw { background:var(--gray-lt); }
.graph .gr-sw { flex:none; width:8px; height:8px; border-radius:50%; transition:background-color .25s ease; }
.graph .gr-c0 { background:#37A733; }
.graph .gr-c1 { background:#99FF8B; }
.graph .gr-cx { background:var(--gray-lt); }

/* tooltip: absolutely positioned inside the figure, clamped by graph.js */
.graph .gr-tip { position:absolute; left:0; top:0; z-index:2; background:#fff; border:1px solid var(--line); border-radius:10px; padding:8px 10px; font-size:11px; line-height:1.4; color:var(--gray); pointer-events:none; white-space:nowrap; }
.graph .gr-tx { font-weight:500; color:#4A4A4A; }
.graph .gr-tr { display:flex; align-items:center; gap:6px; margin-top:4px; }
.graph .gr-tr .gr-sw { width:6px; height:6px; }
.graph .gr-tv { margin-left:auto; padding-left:10px; color:#4A4A4A; font-variant-numeric:tabular-nums; }
.graph .gr-tr.is-mute, .graph .gr-tr.is-mute .gr-tv { color:var(--gray-lt); }
.graph .gr-tr.is-mute .gr-sw { background:var(--gray-lt); }

/* bar variant: solid brand bars, values in the bars, categories under the
   axis, grey note block and dashed callout arrow (type:"bar" in the JSON) */
.graph .gr-bar { transform-box:fill-box; transform-origin:50% 100%; }
.graph .gr-b0 { fill:#37A733; }
.graph .gr-b1 { fill:#99FF8B; }
.graph .gr-bx { fill:var(--gray-lt); }
.graph .gr-bar.is-draw { transition:transform 1.4s cubic-bezier(.19,1,.22,1) var(--gr-delay, 0s); }
/* values ride each bar's top left corner in the OTHER bar's colour:
   lime on the green bar, green on the lime bar */
.graph .gr-val { font-family:'Atacama Trial', Georgia, serif; font-size:44px; font-weight:300; letter-spacing:-0.03em; }
.graph .gr-val .gr-val-u { font-size:.5em; }
.graph .gr-v0 { fill:#99FF8B; }
.graph .gr-v1, .graph .gr-v1.is-out { fill:#37A733; }
.graph .gr-vx { fill:#4A4A4A; }
.graph .gr-v0.is-out { fill:#37A733; }
.graph .gr-vx.is-out { fill:var(--gray); }
.graph .gr-cat { font-size:12px; font-weight:500; fill:#4A4A4A; }
.graph .gr-ax-head { fill:none; stroke:var(--gray-lt); stroke-width:1; stroke-linecap:round; stroke-linejoin:round; }
.graph .gr-co-line { stroke:var(--gray-lt); stroke-width:1.5; }
.graph .gr-co-head { fill:none; stroke:var(--gray-lt); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
/* the callout label is HTML so it rides the article's mark.hl highlighter */
.graph .gr-co-label { position:absolute; z-index:1; font-size:13px; letter-spacing:.01em; font-weight:500; color:#4A4A4A; white-space:nowrap; }
/* in flow under the chart on phones, floated into the plot's corner on wide */
.graph .gr-note { margin-top:10px; font-size:13px; letter-spacing:.01em; line-height:1.5; color:var(--gray); }
@media (min-width:44em) {
  /* only bar notes float into the plot corner; line plots keep theirs in flow */
  .graph .gr-note.is-float { position:absolute; z-index:1; margin:0; }
  .graph .gr-val { font-size:62px; }
}
/* draw-in reveal for labels, note and callout; delay via --gr-delay */
.graph .gr-fade { transition:opacity .6s ease var(--gr-delay, 0s); }

@media (prefers-reduced-motion:reduce) {
  .graph .gr-line.is-draw, .graph .gr-bar.is-draw, .graph .gr-fade { transition:none; }
}

/* ---------- article footer (the Article Header's counterpart) ----------
   White signup band with the minimal underline field, then the dark green
   footer grid: small full-opacity mark left, link columns right, disclaimer
   small print across the bottom. */
.af { margin-top:4.5rem; }

.af-signup { background:#fff; padding:4.5rem 20px; text-align:center; }
.af-h {
  margin:0; font-family:'Atacama Trial', Georgia, serif;
  font-size:29px; font-weight:300; line-height:1.15; letter-spacing:-0.03em;
  color:#20471A;
}
.af-form { margin:2.25rem auto 0; max-width:24rem; }
/* Google preferred-source button (publisher.js renders into the div);
   empty until the domain is eligible in Google's source tool, so no
   reserved height: the band simply grows when the button appears */
.af-pref { margin:1.5rem auto 0; display:flex; justify-content:center; }
.af-in {
  display:block; width:100%; border:0; border-bottom:1px solid var(--line);
  background:none; outline:none; text-align:center;
  padding:0 0 14px; font:inherit; font-size:18px; color:var(--ink);
  border-radius:0; transition:border-color .15s ease;
}
.af-in::placeholder { color:var(--gray-lt); }
.af-in:focus { border-bottom-color:var(--gray); }
.af-note { margin-top:.75rem; font-size:.8125rem; color:var(--gray); text-align:center; }

.af-main { background:#20471A; color:#fff; padding:3.5rem 20px 2rem; }
.af-cols { max-width:72rem; margin-inline:auto; display:grid; gap:2.5rem; }
.af-logo { display:block; width:auto; height:32px; }
.af-col-t { margin:0 0 .8rem; font-size:11px; font-weight:500; color:rgba(255,255,255,.55); }
.af-col a {
  display:block; margin-top:.55rem;
  font-size:13px; letter-spacing:.01em; color:#fff; opacity:.85;
  transition:opacity .15s ease;
}
.af-col a:hover { opacity:1; }
.af-disc {
  max-width:72rem; margin:3.5rem auto 0;
  font-size:11px; line-height:1.6; color:rgba(255,255,255,.5);
}
@media (min-width:44em) {
  .af-cols { grid-template-columns:1fr auto auto; gap:2rem 6rem; }
}
@media (max-width:44em) {
  .af-signup { padding:3.5rem 20px; }
  .af-h { font-size:25px; }
}

/* ---- in-prose article links (cluster wiring, 2026-08-18) ----
   The site's dotted-underline text link, applied to body prose, FAQ answers
   and table cells; .fn superscripts keep their own treatment. */
.art-body > p a:not(.fn),
.faq-a a,
.art-body .evd td a:not(.fn) {
  text-decoration: underline dotted #9A9A9A;
  text-underline-offset: 3px;
}
.art-body > p a:not(.fn):hover,
.faq-a a:hover { color: #20471A; }