/* Standard Trade guides, v5 (Oct 11, 2026): a news-site frame.
   Reference: Vox's article page. Checked against Practical Typography and the impeccable skill (Read mode).

   The frame carries the brand: a white masthead with a large wordmark, bold sans headlines, a numbered rail.
   The reading column stays calm: Source Serif 4 at 20px, about 70 characters, dark grey on white.
   Two families with fixed jobs: General Sans for the frame, headings, labels, tables and charts; Source Serif 4 for reading.
   Brass marks the brand and one thing at a time: the masthead, footnote numbers, the highlighted bar, list numbers. */

/* Tokens, fonts, base, masthead and footer come from /site.css, loaded first. */

/* ---------- Page: article column and a rail ---------- */
main.wrap.story { display: block; max-width: none; padding: 3rem var(--gutter) 6rem; }
#subscribe, .story-body h2, .notes li { scroll-margin-top: 5.5rem; }
main.story.layout { display: grid; grid-template-columns: minmax(0, var(--col)) var(--side); column-gap: 5rem; justify-content: center; align-items: start; max-width: calc(var(--shell) + 2 * var(--gutter)); margin: 0 auto; }
main.story:not(.layout) { max-width: calc(var(--shell) + 2 * var(--gutter)); margin: 0 auto; }
main.story:not(.layout) > * { max-width: var(--col); margin-left: 0; margin-right: 0; }

/* ---------- Head: headline, dek, byline ---------- */
.story-title { font-family: var(--sans); font-weight: 700; font-size: clamp(2.125rem, 1.5rem + 2vw, 3rem); line-height: 1.08; letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; }
.dek { margin-top: 0.85rem; font-family: var(--sans); font-size: 1.3125rem; line-height: 1.45; color: var(--text); text-wrap: pretty; }
.byline { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.5rem; }
.byline p { font-size: 0.9375rem; line-height: 1.4; color: var(--text); }
.byline .author { font-weight: 700; color: var(--ink); text-decoration: none; }
.byline .author:hover { color: var(--brass); text-decoration: underline; text-underline-offset: 0.2em; }
.byline .when { margin-top: 0.15rem; font-size: 0.8125rem; color: var(--muted); }

/* Share buttons */
.share { display: flex; gap: 0.4rem; flex-shrink: 0; }
.share a, .share button { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border: 1px solid var(--rule-strong); border-radius: 50%; color: var(--ink); background: var(--paper); cursor: pointer; padding: 0; font: inherit; text-decoration: none; transition: border-color .15s, color .15s; }
.share a:hover, .share button:hover, .share .done { border-color: var(--brass); color: var(--brass); }
.share svg { width: 0.95rem; height: 0.95rem; fill: currentColor; }

/* Lead image */
.hero-img { margin-top: 1.75rem; }
.hero-img img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--tint); }
.hero-img figcaption { margin-top: 0.5rem; font-size: 0.75rem; color: var(--muted); }

/* ---------- Reading column ---------- */
.story-body { margin-top: 2.25rem; font-family: var(--serif); font-size: 1.25rem; line-height: 1.65; color: var(--text); font-optical-sizing: auto; }
.story-body > * + * { margin-top: 1.15em; }
.story-body p { text-wrap: pretty; }
.story-body strong { font-weight: 650; color: var(--ink); }
.story-body a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; text-decoration-color: color-mix(in srgb, var(--brass) 60%, transparent); }
.story-body a:hover { color: var(--brass); }
.story-body h2 { margin-top: 2.75rem; font-family: var(--sans); font-weight: 700; font-size: 1.625rem; line-height: 1.22; letter-spacing: -0.015em; color: var(--ink); text-wrap: balance; scroll-margin-top: 5rem; }
.story-body h2 + * { margin-top: 0.75rem; }
.story-body h3 { margin-top: 2rem; font-family: var(--sans); font-weight: 700; font-size: 1.125rem; line-height: 1.4; color: var(--ink); }
.story-body ul, .story-body ol { padding-left: 1.3em; }
.story-body li + li { margin-top: 0.45em; }
.story-body li::marker { color: var(--brass); font-family: var(--sans); font-weight: 700; }
.story-body sup { font-family: var(--sans); font-size: 0.62em; font-weight: 700; line-height: 0; vertical-align: 0.6em; }
.story-body sup a { color: var(--brass); text-decoration: none; padding: 0 0.05em; }
.story-body sup.sep { color: var(--muted); }
.story-body .notice { padding: 1rem 1.25rem; background: var(--tint); font-family: var(--sans); font-size: 0.9375rem; line-height: 1.55; color: var(--text); }

/* The guide's key figure: a sentence led by the number */
.story-body .keystat { margin: 2.25rem 0; padding: 1.1rem 0 0; border-top: 3px solid var(--brass); font-family: var(--sans); }
.story-body .keystat p { font-size: 1.5rem; line-height: 1.32; font-weight: 500; letter-spacing: -0.012em; color: var(--ink); text-wrap: pretty; }
.story-body .keystat strong { font-weight: 700; color: var(--brass-deep); }
.story-body .keystat p.s { margin-top: 0.5rem; font-size: 0.875rem; font-weight: 400; letter-spacing: 0; color: var(--muted); }

/* ---------- Exhibits: label and title, figure, source ---------- */
.story-body > .table-wrap, .story-body > figure { margin-top: 2.5rem; font-family: var(--sans); }
.story-body .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ex { display: block; margin-bottom: 0.25rem; font-family: var(--sans); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brass); }
.story-body caption, .story-body .chart-title { caption-side: top; text-align: left; margin: 0 0 1rem; font-family: var(--sans); font-size: 1.0625rem; font-weight: 700; line-height: 1.35; color: var(--ink); }
.story-body p.source, .story-body .chart-source, .story-body .chart-note, .story-body .ref-lab {
  margin-top: 0.75rem; font-family: var(--sans); font-size: 0.8125rem; font-style: normal; line-height: 1.5; color: var(--muted);
}
.story-body p.source sup a, .story-body .chart-source sup a { color: var(--muted); }
.story-body > p.source + *, .story-body > figure + :not(p.source) { margin-top: 2.25rem; }

/* Tables */
.story-body table { width: 100%; border-collapse: collapse; font-family: var(--sans); font-size: 0.9375rem; line-height: 1.45; font-variant-numeric: tabular-nums lining-nums; color: var(--text); }
.story-body th { text-align: left; vertical-align: bottom; padding: 0 1.25rem 0.55rem 0; font-size: 0.8125rem; font-weight: 700; color: var(--ink); border-bottom: 2px solid var(--ink); }
.story-body td { vertical-align: top; padding: 0.65rem 1.25rem 0.65rem 0; border-bottom: 1px solid var(--rule); }
.story-body th:last-child, .story-body td:last-child { padding-right: 0; }
.story-body td:first-child { font-weight: 600; color: var(--ink); }
.story-body td.num, .story-body th.num { white-space: nowrap; }
.story-body table:has(th:nth-child(3)):not(:has(th.num)) { table-layout: fixed; }
.story-body table:has(th:nth-child(3)):not(:has(th.num)) th:first-child { width: 28%; }
.story-body td.num, .story-body th.num { text-align: right; }

/* Bar charts */
.hbars { list-style: none; padding: 0 !important; margin: 0 !important; display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content; column-gap: 1rem; }
.hbars li { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; margin: 0 !important; padding: 0.38rem 0; font-size: 0.9375rem; line-height: 1.3; }
.story-body .hbars li::marker { content: none; }
.hbars .k { color: var(--text); white-space: nowrap; }
.hbars li.grp { padding: 0.9rem 0 0.15rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.hbars li.grp:first-child { padding-top: 0; }
.hbars li.grp span { grid-column: 1 / -1; }
.hbars .track { position: relative; height: 1.25rem; }
.hbars .fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--bar); }
.hbars:not(.steps) li.hl .fill, .hbars.steps .fill.to { background: var(--brass); }
.hbars .v { display: flex; align-items: baseline; justify-content: flex-end; gap: 0.6rem; min-width: 6.5rem; color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hbars .cnt { font-size: 0.75rem; font-weight: 400; color: var(--muted); min-width: 3.5rem; text-align: right; }
.hbars .probe { display: inline-block; width: 0.55em; height: 0.55em; border: 1.25px solid var(--ink); border-radius: 50%; }
.hbars.has-ref .track::after { content: ""; position: absolute; left: var(--ref); top: -0.4rem; bottom: -0.4rem; border-left: 1px dashed var(--ink); }
.story-body .legend { display: flex; align-items: center; gap: 0.45rem; margin: 0 0 0.75rem !important; font-size: 0.8125rem; color: var(--muted); }
.story-body .legend .sw { display: inline-block; width: 0.8em; height: 0.8em; background: var(--bar); }
.story-body .legend .sw.to { background: var(--brass); margin-left: 0.9rem; }

/* Drawn figures */
.doc-svg { display: block; width: 100%; height: auto; font-family: var(--sans); }
.doc-svg .paper { fill: var(--paper); stroke: var(--rule-strong); }
.doc-svg .rule { stroke: var(--rule-strong); stroke-width: 1; }
.doc-svg .rule.dash { stroke-dasharray: 4 4; }
.doc-svg text { fill: var(--text); font-size: 15px; }
.doc-svg .hd, .doc-svg .col { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; fill: var(--muted); }
.doc-svg .sm, .doc-svg .note { font-size: 13px; fill: var(--muted); }
.doc-svg .mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 15px; fill: var(--ink); }
.doc-svg .cn { font-family: "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", sans-serif; font-size: 15px; fill: var(--muted); }
.doc-svg .cn.tx { fill: var(--ink); }
.doc-svg .cn.big { font-size: 24px; fill: var(--ink); letter-spacing: 0.3em; }
.doc-svg .strong { font-weight: 700; fill: var(--ink); }
.doc-svg .hl { fill: var(--brass); font-weight: 700; }
.doc-svg .hl-box { fill: none; stroke: var(--brass); stroke-width: 1.5; }
.doc-svg .box { fill: var(--tint); stroke: var(--rule-strong); }
.doc-svg .box.q { fill: var(--paper); stroke: var(--ink); }
.doc-svg .box.ok { fill: var(--paper); stroke: var(--brass); stroke-width: 1.5; }
.doc-svg .link { stroke: var(--muted); stroke-width: 1.25; }
.doc-svg .arrowhead { fill: var(--muted); }

/* Common questions: numbered */
.story-body .faq { list-style: none; padding: 0; margin-top: 1rem; counter-reset: q; }
.story-body .faq li { counter-increment: q; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); column-gap: 0.75rem; padding: 1.25rem 0; border-top: 1px dotted var(--rule-strong); margin: 0; }
.story-body .faq li::before { content: counter(q) "."; grid-row: 1 / span 2; font-family: var(--sans); font-size: 1.125rem; font-weight: 700; line-height: 1.4; color: var(--brass); }
.story-body .faq h3 { margin: 0; font-size: 1.125rem; }
.story-body .faq p { margin-top: 0.35rem; font-size: 1.125rem; line-height: 1.6; }

/* ---------- Lead form, end matter ---------- */
.lead { margin-top: 3.5rem; padding: 2rem; background: var(--brass-tint); font-family: var(--sans); }
.lead h2 { font-weight: 700; font-size: 1.5rem; line-height: 1.2; letter-spacing: -0.02em; color: var(--ink); }
.lead > p { margin-top: 0.5rem; font-size: 1rem; line-height: 1.55; color: var(--text); max-width: 36em; }
.lead-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 0.75rem; align-items: end; margin-top: 1.4rem; }
.lead-form label { display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.8125rem; font-weight: 700; color: var(--ink); }
.lead-form input { font: inherit; font-weight: 400; font-size: 1rem; padding: 0.7rem 0.8rem; border: 1px solid #8a8a8a; border-radius: 0; background: var(--paper); color: var(--ink); min-width: 0; }
.lead-form input:focus { outline: 2px solid var(--brass); outline-offset: -1px; border-color: transparent; }
.lead-form button { font: inherit; font-size: 1rem; font-weight: 700; padding: 0.72rem 1.4rem; border: 0; background: var(--ink); color: #fff; cursor: pointer; }
.lead-form button:hover { background: var(--brass); }
.lead-form button[disabled] { opacity: 0.5; cursor: default; }
.lead-status { grid-column: 1 / -1; font-size: 0.875rem; color: var(--text); }
.lead-status:empty { display: none; }
.lead-status.ok { color: var(--brass-deep); font-weight: 600; }
.lead .lead-alt { margin-top: 0.85rem; font-size: 0.875rem; color: var(--muted); }
.lead-alt a, .lead-status a { color: var(--ink); text-decoration: underline; text-underline-offset: 0.2em; }
.story-end { margin-top: 2.5rem; font-size: 0.8125rem; line-height: 1.55; color: var(--muted); }
.notes { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 2px solid var(--ink); font-family: var(--sans); }
.notes h2 { margin-bottom: 0.85rem; font-size: 1.125rem; font-weight: 700; color: var(--ink); }
.notes ol, .story-body p.source, .story-body .chart-source, .story-body .chart-note, .cite-this, .story-end { max-width: 34em; }
.notes summary { list-style: none; pointer-events: none; margin-bottom: 0.85rem; font-size: 1.125rem; font-weight: 700; color: var(--ink); }
.notes summary::-webkit-details-marker { display: none; }
.notes summary::after { content: none !important; }
.notes ol { padding-left: 1.5rem; font-size: 0.875rem; line-height: 1.55; color: var(--text); }
.notes li { padding-left: 0.25rem; scroll-margin-top: 5rem; }
.notes li + li { margin-top: 0.5rem; }
.notes li::marker { color: var(--brass); font-weight: 700; }
.notes li:target { background: var(--brass-tint); }
.notes a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: 0.18em; }
.notes a:hover { color: var(--brass); }
.cite-this { margin-top: 1.5rem; padding: 1.1rem 1.25rem; background: var(--tint); font-size: 0.875rem; line-height: 1.55; color: var(--text); }
.cite-this h3 { margin-bottom: 0.4rem; font-size: 0.875rem; font-weight: 700; color: var(--ink); }
.cite-this button { margin-top: 0.75rem; font: inherit; font-weight: 700; padding: 0.4rem 0.85rem; border: 1px solid var(--rule-strong); background: var(--paper); color: var(--ink); cursor: pointer; }
.cite-this button:hover { border-color: var(--brass); color: var(--brass); }
.end-share { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--rule); font-size: 0.9375rem; font-weight: 700; color: var(--ink); }

/* ---------- Rail ---------- */
.side { position: sticky; top: calc(var(--mast-h) + 1.5rem); padding-top: 0.25rem; font-family: var(--sans); }
.side-block + .side-block { margin-top: 2.5rem; }
.side h2 { padding-bottom: 0.6rem; font-size: 0.875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); border-bottom: 2px solid var(--ink); }
.side-list { list-style: none; padding: 0; counter-reset: s; }
.side-list li { counter-increment: s; display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); column-gap: 0.75rem; padding: 0.9rem 0; border-bottom: 1px dotted var(--rule-strong); }
.side-list li::before { content: counter(s); display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--brass); color: #fff; font-size: 0.75rem; font-weight: 700; margin-top: 0.15rem; }
.side-list a { font-family: var(--serif); font-size: 1.0625rem; line-height: 1.32; color: var(--ink); text-decoration: none; }
.side-list a:hover { color: var(--brass); }
.side-alert { padding: 1.25rem; background: var(--brass-tint); }
.side-alert h2 { border: 0; padding: 0; text-transform: none; letter-spacing: -0.01em; font-size: 1.0625rem; }
.side-alert > p { margin-top: 0.4rem; font-size: 0.875rem; line-height: 1.5; color: var(--text); }
.lead-form.compact { grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem; margin-top: 0.9rem; }
.lead-form.compact input { font-size: 0.9375rem; padding: 0.6rem 0.7rem; }
.lead-form.compact button { font-size: 0.875rem; padding: 0.62rem 0.9rem; }

/* Citation hover card */
.cite-pop { position: absolute; z-index: 30; max-width: 24rem; padding: 0.85rem 1rem; background: var(--paper); border: 1px solid var(--rule-strong); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12); font-family: var(--sans); font-size: 0.875rem; line-height: 1.5; color: var(--text); }
.cite-pop b { font-weight: 700; margin-right: 0.4em; color: var(--brass); }
.cite-pop a { color: var(--ink); }

/* ---------- Index ---------- */
.index-head .story-title { font-size: clamp(2.25rem, 1.6rem + 2vw, 3.25rem); }
.index-intro { margin-top: 0.85rem; font-size: 1.3125rem; line-height: 1.45; color: var(--text); }
main.story > .hero-img { margin-top: 2rem; }
.index-grid { list-style: none; padding: 0; margin-top: 2.5rem; border-top: 2px solid var(--ink); }
.index-grid li { border-bottom: 1px dotted var(--rule-strong); }
.index-grid a { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 1.5rem; align-items: start; padding: 1.5rem 0; text-decoration: none; color: inherit; }
.index-grid .m { display: block; font-size: 0.8125rem; color: var(--muted); }
.index-grid .t { display: block; margin-top: 0.3rem; font-weight: 700; font-size: 1.375rem; line-height: 1.3; letter-spacing: -0.02em; color: var(--ink); }
.index-grid a:hover .t { color: var(--brass); }
.index-grid .d { display: block; margin-top: 0.45rem; font-family: var(--serif); font-size: 1.0625rem; line-height: 1.5; color: var(--text); }
.thumb { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--tint); }
main.story:not(.layout) > .lead { margin-top: 3.5rem; }

.site-footer { font-size: 0.8125rem; color: var(--muted); }

/* ---------- Narrower screens: the rail drops below the article ---------- */
@media (max-width: 1080px) {
  main.story.layout { grid-template-columns: minmax(0, var(--col)); }
  .side { position: static; margin-top: 3.5rem; }
}
@media (max-width: 720px) {
  main.wrap.story { padding-top: 1.75rem; }
  .dek { font-size: 1.125rem; }
  .byline { align-items: flex-start; flex-direction: column; }
  .story-body { font-size: 1.125rem; line-height: 1.6; }
  .story-body h2 { font-size: 1.375rem; }
  .story-body .keystat p { font-size: 1.25rem; }
  .hbars { grid-template-columns: minmax(0, 1fr) max-content; }
  .hbars li { grid-template-columns: subgrid; row-gap: 0.3rem; }
  .hbars .k { grid-column: 1 / -1; white-space: normal; }
  .hbars .v { min-width: 0; }
  .hbars .cnt { display: none; }
  .story-body td:not(:last-child), .story-body th:not(:last-child) { white-space: normal; }
  .story-body table:has(th:nth-child(4)) { min-width: 36rem; }
  .story-body figure.doc { overflow-x: auto; }
  .doc-svg { min-width: 34rem; }
  .lead { padding: 1.5rem 1.25rem; margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); }
  .lead-form { grid-template-columns: 1fr; }
  .lead-form button { justify-self: start; }
  .index-grid a { grid-template-columns: 1fr; gap: 0.85rem; }
}

/* Email-only sign-up */
.lead-form.solo { grid-template-columns: minmax(0, 26rem) auto; justify-content: start; }
@media (max-width: 720px) { .lead-form.solo { grid-template-columns: 1fr; } }

/* Drawn figures: a wide version and a phone version; scroll regions reachable by keyboard */
.doc-art.narrow { display: none; }
figure.doc .doc-art { margin-top: 0.25rem; }
.story-body .pitch-cta { font-family: var(--sans); font-size: 1rem; font-weight: 600; color: var(--ink); }
.side-all { display: inline-block; margin-top: 0.85rem; font-size: 0.875rem; font-weight: 700; color: var(--ink); text-decoration: none; }
.side-all::after { content: " →"; color: var(--brass); }
.side-all:hover { color: var(--brass); }
.side-alert { transition: opacity .3s ease; }
.side-alert.dim { opacity: 0; pointer-events: none; }
@media (max-width: 1080px) {
  .side-alert { display: none; }
}
@media (max-width: 720px) {
  figure.doc.has-narrow .doc-art.wide { display: none; }
  figure.doc.has-narrow .doc-art.narrow { display: block; }
  figure.doc.has-narrow .doc-svg { min-width: 0; }
  .hbars.has-ref .track::after { top: 0; bottom: 0; }
  .hbars .cnt { display: inline; min-width: 0; }
  .share a, .share button { width: 2.75rem; height: 2.75rem; }
  .story-body sup a { padding: 0.25em 0.3em; }
}

/* Figures in data: General Sans has no tabular figures, so numeric cells and bar values use Source Serif 4's. */
.story-body td.num, .hbars .v, .hbars .cnt { font-family: var(--serif); font-variant-numeric: lining-nums tabular-nums; }
.hbars .v { font-weight: 700; }
@media (max-width: 720px) {
  .hbars .cnt { min-width: 3.5rem; }
  .index-intro { font-size: 1.125rem; }
}