/* Auto Draft Years — article pages.
 *
 * Shared by every page under /blog/<slug>/. This used to live in a <style>
 * block copied into each article, which is how the two published pieces drifted
 * apart. Loaded after blog.css, which supplies the theme variables and the
 * shared header/tabs/footer chrome.
 *
 * A new article needs no CSS of its own: link blog.css then article.css.
 */

#readingProgress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 60; background: var(--brand-grad); transition: width .1s linear; }

main.articleMain { width: min(100%, var(--max)); margin: 0 auto; padding: 18px 24px 40px; }
.breadcrumb { display: flex; align-items: center; gap: 8px; margin: 4px 0 14px; color: var(--color-text-muted); font: 600 11px/1 var(--font-mono); letter-spacing: .06em; }
.breadcrumb a { color: var(--color-accent-strong); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

/* min-width:0 because a grid item's automatic minimum is its min-content size:
   without it the wide data table inflates the column past the viewport and
   scrolls the whole page sideways on phones. */
.artGrid { display: grid; grid-template-columns: minmax(0,1fr) 250px; gap: 42px; align-items: stretch; }
.artColumn { align-self: start; max-width: 760px; min-width: 0; }

.artHero { border: 1px solid var(--color-border); border-radius: 14px; padding: clamp(24px,4vw,42px); background: linear-gradient(135deg, color-mix(in srgb, var(--color-surface-elevated) 82%, transparent), color-mix(in srgb, var(--color-surface) 95%, transparent)); box-shadow: 0 12px 34px rgba(0,0,0,.22); position: relative; overflow: hidden; }
.artHero::after { content: "ADY"; position: absolute; right: -18px; bottom: -60px; color: color-mix(in srgb, var(--color-accent) 6%, transparent); font: 900 190px/1 var(--font-display); letter-spacing: -.08em; pointer-events: none; }
.artKicker { position: relative; z-index: 1; margin: 0 0 14px; color: var(--color-accent-strong); font: 600 11px/1.3 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }
.artHero h1 { position: relative; z-index: 1; margin: 0 0 16px; color: var(--color-text-strong); font: 800 clamp(30px,5vw,52px)/1.04 var(--font-display); letter-spacing: -.035em; }
.artDek { position: relative; z-index: 1; max-width: 640px; margin: 0; color: var(--color-text-muted); font-size: clamp(16px,2vw,19px); line-height: 1.6; }
.artByline { position: relative; z-index: 1; display: flex; align-items: center; gap: 13px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--color-border); flex-wrap: wrap; }
.artAvatar { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--brand-grad); color: #07101d; font: 800 13px/1 var(--font-display); letter-spacing: .06em; }
.artByline .who { color: var(--color-text-strong); font: 700 13px/1.2 var(--font-display); }
.artByline .meta { color: var(--color-text-subtle); font-size: 12px; }
.shareRow { margin-left: auto; display: flex; gap: 7px; }
.shareRow button { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-muted); cursor: pointer; display: grid; place-items: center; font-size: 14px; transition: .15s; }
.shareRow button:hover { border-color: var(--color-accent); color: var(--color-accent-strong); transform: translateY(-1px); }

.statCards { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin: 16px 0; }
.statCard { position: relative; overflow: hidden; padding: 15px 14px; border: 1px solid var(--color-border); border-radius: 11px; background: color-mix(in srgb, var(--color-surface-subtle) 82%, transparent); }
.statCard::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--color-accent); }
.statCard.warn::before { background: #f87171; }
.statCard .num { font: 800 26px/1 var(--font-display); letter-spacing: -.02em; color: var(--color-text-strong); }
.statCard.warn .num { color: #fca5a5; }
.statCard .lab { margin-top: 5px; color: var(--color-text-subtle); font-size: 11px; line-height: 1.35; }

.artBody { font-size: 17px; color: var(--color-text); line-height: 1.72; }
.artBody > p { margin: 20px 0; }
.artBody h2 { margin: 46px 0 6px; scroll-margin-top: 84px; color: var(--color-text-strong); font: 700 clamp(23px,3vw,31px)/1.12 var(--font-display); letter-spacing: -.02em; }
.artBody strong { color: var(--color-text-strong); }
.artBody em { color: var(--color-accent-strong); font-style: normal; }
.artBody a { color: var(--color-accent-strong); }
.dropLede::first-letter { float: left; margin: 8px 12px 0 0; color: var(--color-accent-strong); font: 800 58px/.8 var(--font-display); }

.pullQuote { margin: 34px 0; padding: 6px 0 6px 22px; border-left: 3px solid var(--color-accent); color: var(--color-text-strong); font: 600 clamp(20px,2.6vw,25px)/1.4 var(--font-display); letter-spacing: -.01em; }

figure.viz { margin: 30px 0; padding: 20px 20px 14px; border: 1px solid var(--color-border); border-radius: 14px; background: color-mix(in srgb, var(--color-surface) 92%, transparent); box-shadow: 0 10px 26px rgba(0,0,0,.16); }
figure.viz .vk { color: var(--color-accent-strong); font: 600 10px/1.3 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
figure.viz .vt { margin: 4px 0 3px; color: var(--color-text-strong); font: 700 18px/1.2 var(--font-display); letter-spacing: -.01em; }
figure.viz .vs { color: var(--color-text-muted); font-size: 12.5px; line-height: 1.45; }
.chartBox { position: relative; height: 300px; max-width: 100%; margin-top: 14px; }
.chartBox.tall { height: 340px; }
.chartBox.staticChart { height: auto; }
.chartBox.staticChart img { display: block; width: 100%; height: auto; border-radius: 8px; }
.chartBox.staticChart a { display: block; }
.chartBox.staticChart a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; }
figure.viz figcaption { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--color-border); color: var(--color-text-subtle); font-size: 11.5px; }
.vizLegend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; color: var(--color-text-muted); font-size: 12px; }
.vizLegend span { display: inline-flex; align-items: center; gap: 6px; }
.vizLegend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
/* Was painted by a per-page script; as a variable it now follows the theme. */
.vizLegend i.wrSwatch { background: var(--color-accent); }

.ctShare { display: flex; align-items: center; gap: 16px; margin: 28px 0; padding: 18px 20px; border: 1px solid color-mix(in srgb, var(--color-accent) 28%, transparent); border-radius: 13px; background: color-mix(in srgb, var(--color-accent) 8%, transparent); }
.ctShare .big { flex-shrink: 0; color: var(--color-accent-strong); font: 800 32px/1 var(--font-display); letter-spacing: -.02em; }
.ctShare .txt { color: var(--color-text-muted); font-size: 14px; }
.ctShare button { margin-left: auto; flex-shrink: 0; border: 1px solid color-mix(in srgb, var(--color-accent) 45%, transparent); border-radius: 9px; padding: 9px 13px; background: color-mix(in srgb, var(--color-accent) 15%, var(--color-surface)); color: var(--color-accent-strong); font: 700 12px/1 var(--font-sans); cursor: pointer; white-space: nowrap; }

/* ---- data table ---- */
.tableWrap { margin: 28px 0; max-width: 100%; overflow-x: auto; border: 1px solid var(--color-border); border-radius: 12px; background: color-mix(in srgb, var(--color-surface) 92%, transparent); }
.dataTable { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 13.5px; }
.dataTable th { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--color-border-strong); color: var(--color-text-subtle); font: 600 10px/1.35 var(--font-mono); letter-spacing: .09em; text-transform: uppercase; white-space: nowrap; }
.dataTable td { padding: 11px 14px; border-bottom: 1px solid var(--color-border); color: var(--color-text); font-variant-numeric: tabular-nums; }
.dataTable tbody tr:last-child td { border-bottom: 0; }
.dataTable td:first-child { color: var(--color-text-muted); white-space: nowrap; }
.dataTable td.good { color: #34d399; font-weight: 700; }
.dataTable td.bad { color: #f87171; font-weight: 700; }

/* ---- draft runway table ----
   The availability bands from the app's Draft Plan, rendered inside the shared
   .dataTable so the series needs no second table style. Names stay in body
   colour; only the percentage carries the band's tone, because a whole cell of
   red player names reads as an error state rather than a timing signal. */
.dataTable .rw { margin-bottom: 9px; }
.dataTable .rw:last-child { margin-bottom: 0; }
.dataTable .rw b { font-weight: 600; }
.dataTable .tiny { display: block; font-size: .78em; font-weight: 600; letter-spacing: .02em; color: var(--color-text-subtle); font-variant-numeric: tabular-nums; }
.dataTable .tiny.gone { color: #f87171; }
.dataTable .tiny.coin { color: #fbbf24; }
.dataTable .tiny.safe { color: #34d399; }
.dataTable td.runway { min-width: 168px; vertical-align: top; }

/* ---- the short version ----
   Sits above the prose as a direct child of .artColumn, so a reader who only
   reads one box has read the findings. */
.tldr { margin: 42px 0; padding: 24px 26px; border: 1px solid var(--color-border-strong); border-radius: 14px; background: color-mix(in srgb, var(--color-surface-elevated) 60%, transparent); }
.artColumn > .tldr { margin: 0 0 16px; border-color: color-mix(in srgb, var(--color-accent) 34%, var(--color-border)); }
.tldr h3 { margin: 0 0 14px; color: var(--color-accent-strong); font: 600 11px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.tldr ul { margin: 0; padding-left: 20px; }
.tldr li { margin: 9px 0; color: var(--color-text); font-size: 14.5px; line-height: 1.5; }

.newsletter { margin: 42px 0; padding: 28px; border: 1px solid var(--color-border); border-radius: 14px; text-align: center; background: linear-gradient(135deg, color-mix(in srgb, var(--color-accent) 10%, var(--color-surface)), var(--color-surface-subtle)); }
.newsletter h3 { margin: 0 0 6px; color: var(--color-text-strong); font: 700 22px/1.2 var(--font-display); letter-spacing: -.02em; }
.newsletter p { margin: 0 auto 16px; max-width: 430px; color: var(--color-text-muted); font-size: 14px; }
.newsletter form { display: flex; gap: 8px; max-width: 400px; margin: 0 auto; }
.newsletter input { flex: 1; min-width: 0; padding: 11px 14px; border: 1px solid var(--color-border-strong); border-radius: 9px; background: var(--color-surface-subtle); color: var(--color-text); font-size: 14px; }
.newsletter .subBtn { border: 1px solid color-mix(in srgb, var(--color-accent) 45%, transparent); border-radius: 9px; padding: 11px 18px; background: color-mix(in srgb, var(--color-accent) 18%, var(--color-surface)); color: var(--color-accent-strong); font: 700 13px/1 var(--font-sans); cursor: pointer; }

.reactRow { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; margin: 36px 0; padding: 18px; border: 1px solid var(--color-border); border-radius: 13px; background: color-mix(in srgb, var(--color-surface-subtle) 70%, transparent); }
.reactRow .q { color: var(--color-text-strong); font: 700 14px/1 var(--font-display); }
.reactRow button { border: 1px solid var(--color-border); border-radius: 999px; padding: 7px 14px; background: var(--color-surface); color: var(--color-text-muted); font-size: 13px; cursor: pointer; transition: .15s; }
.reactRow button:hover { border-color: var(--color-accent); color: var(--color-accent-strong); }
.reactRow button.on { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 16%, var(--color-surface)); color: var(--color-accent-strong); }

/* ---- reaction row + support block --------------------------------------
   The donation prompt shares the row with "Was this useful?" because that is
   the one moment a reader has just decided the piece was worth something. */
.reactAsk { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
.supportBlock { display: flex; align-items: center; gap: 14px; margin-left: auto; padding-left: 18px; border-left: 1px solid var(--color-border); }
.supportQr { flex: 0 0 auto; display: block; padding: 6px; border-radius: 10px; background: #fff; line-height: 0; transition: transform .15s ease; }
.supportQr:hover { transform: translateY(-2px); }
.supportQr img { display: block; width: 92px; height: 92px; }
.supportCopy { display: grid; gap: 3px; max-width: 30ch; }
.supportCopy strong { color: var(--color-text-strong); font: 700 13.5px/1.25 var(--font-display); }
.supportCopy span { color: var(--color-text-muted); font-size: 12px; line-height: 1.45; }
.supportLink { margin-top: 2px; color: var(--color-accent-strong); font-size: 12px; font-weight: 750; text-decoration: none; }
.supportLink:hover { text-decoration: underline; }
.supportQr:focus-visible, .supportLink:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }

/* ---- comments ----------------------------------------------------------
   Removed entirely by comments.js when the API is not configured, so an
   unconfigured deploy shows no empty shell. */
.commentsSection { margin: 46px 0 0; padding: clamp(20px, 3vw, 28px); border: 1px solid var(--color-border); border-radius: 14px; background: color-mix(in srgb, var(--color-surface) 92%, transparent); }
.commentsHead { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--color-border); }
.commentsHead h2 { margin: 0; color: var(--color-text-strong); font: 750 20px/1.2 var(--font-display); letter-spacing: -.02em; }
.commentsCount { margin: 0; color: var(--color-text-subtle); font: 600 10px/1.3 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.commentList { display: grid; gap: 2px; }
.comment { padding: 15px 0; border-bottom: 1px solid var(--color-border); }
.commentHead { display: flex; align-items: baseline; gap: 10px; margin-bottom: 5px; }
.commentAuthor { color: var(--color-text-strong); font: 700 13.5px/1.2 var(--font-display); }
.commentWhen { color: var(--color-text-subtle); font: 600 10px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.commentBody { margin: 0; color: var(--color-text); font-size: 14.5px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.commentEmpty { margin: 16px 0; color: var(--color-text-muted); font-size: 13.5px; }

.commentForm { margin-top: 18px; display: grid; gap: 12px; }
.commentField { display: grid; gap: 5px; }
.commentField > span { color: var(--color-text-subtle); font: 600 10px/1.3 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.commentField input, .commentField textarea { width: 100%; padding: 11px 13px; border: 1px solid var(--color-border-strong); border-radius: 9px; background: var(--color-surface-subtle); color: var(--color-text); font: 400 14.5px/1.5 var(--font-sans); resize: vertical; }
.commentField input:focus-visible, .commentField textarea:focus-visible { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent) 20%, transparent); }
/* Honeypot: off-screen rather than display:none, which some bots skip. */
.commentHp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.commentActions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.commentSubmit { min-height: 42px; padding: 10px 20px; border: 1px solid color-mix(in srgb, var(--color-accent) 45%, transparent); border-radius: 10px; background: color-mix(in srgb, var(--color-accent) 18%, var(--color-surface)); color: var(--color-accent-strong); font: 750 13.5px/1 var(--font-sans); cursor: pointer; }
.commentSubmit:hover:not(:disabled) { border-color: var(--color-accent); }
.commentSubmit:disabled { opacity: .6; cursor: default; }
.commentSubmit:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.commentNote { margin: 0; color: var(--color-text-subtle); font-size: 12px; }
.commentStatus { margin: 0; min-height: 1em; color: var(--color-accent-strong); font-size: 13px; }
.commentStatus.isError { color: #fca5a5; }

.relatedWrap { margin: 46px 0 10px; }
.relatedWrap .rl { margin: 0 0 12px; color: var(--color-text-subtle); font: 600 11px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.relGrid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.relCard { display: block; padding: 16px; border: 1px solid var(--color-border); border-radius: 11px; background: color-mix(in srgb, var(--color-surface-subtle) 82%, transparent); text-decoration: none; transition: .15s; }
.relCard:hover { border-color: var(--color-accent); transform: translateY(-2px); }
.relCard .rk { color: var(--color-accent-strong); font: 600 9.5px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.relCard .rt { margin: 7px 0 4px; color: var(--color-text-strong); font: 700 15px/1.2 var(--font-display); letter-spacing: -.01em; }
.relCard .rd { color: var(--color-text-muted); font-size: 12px; }

.sourcesNote { margin-top: 36px; padding-top: 16px; border-top: 1px solid var(--color-border); color: var(--color-text-subtle); font-size: 12.5px; line-height: 1.5; }
.sourcesNote a { color: var(--color-accent-strong); }
/* Caption under a data table. Not a <figcaption>: the table sits in a scroll
   wrapper rather than a <figure>, and the caption must not scroll with it. */
.tableNote { margin: -18px 0 28px; color: var(--color-text-subtle); font-size: 12px; line-height: 1.5; }
.tableNote a { color: var(--color-accent-strong); }

/* The grid row is as tall as the article, which gives the contents box room to
   follow the reader. Keeping the entire aside sticky made long TOCs plus the
   stat card taller than the viewport, so browsers correctly refused to pin it. */
aside.artSide { position: relative; min-width: 0; }
.tocBox { position: sticky; top: 132px; max-height: calc(100vh - 154px); overflow-y: auto; padding: 16px; border: 1px solid var(--color-border); border-radius: 12px; background: color-mix(in srgb, var(--color-surface-subtle) 94%, transparent); box-shadow: 0 14px 32px rgba(0,0,0,.2); scrollbar-width: thin; scrollbar-color: var(--color-border-strong) transparent; }
.tocBox .tl { margin-bottom: 10px; color: var(--color-text-subtle); font: 600 10px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.tocBox a { display: block; margin: 1px 0; padding: 6px 9px; overflow: hidden; border-left: 2px solid transparent; border-radius: 7px; color: var(--color-text-muted); font-size: 13px; line-height: 1.3; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.tocBox a:hover { color: var(--color-accent-strong); background: rgba(255,255,255,.03); }
.tocBox a.active { color: var(--color-accent-strong); border-left-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.sideStat { margin-top: 14px; padding: 16px; border: 1px solid var(--color-border-strong); border-radius: 12px; background: color-mix(in srgb, var(--color-accent) 10%, var(--color-surface)); }
.sideStat .sl { color: var(--color-accent-strong); font: 600 9.5px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.sideStat .sv { margin: 6px 0 2px; color: var(--color-text-strong); font: 800 32px/1 var(--font-display); letter-spacing: -.02em; }
.sideStat .sd { color: var(--color-text-muted); font-size: 12px; }

.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(18px); z-index: 70; padding: 11px 20px; border-radius: 10px; background: var(--color-surface-elevated); border: 1px solid var(--color-border-strong); color: var(--color-text-strong); font-size: 13.5px; opacity: 0; pointer-events: none; transition: .25s; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Contents list for narrow screens, built by each page's inline script: the
   sticky sidebar is hidden under 1000px, which otherwise leaves long pieces
   with no section navigation at all. */
.tocMobile { display: none; }

/* ===== Responsive ====================================================== */

@media (max-width: 1000px) {
  .artGrid { grid-template-columns: 1fr; }
  aside.artSide { display: none; }

  .tocMobile { display: block; margin: 16px 0 0; padding: 12px 14px; border: 1px solid var(--color-border); border-radius: 12px; background: color-mix(in srgb, var(--color-surface-subtle) 78%, transparent); }
  .tocMobile summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; list-style: none; cursor: pointer; color: var(--color-text-subtle); font: 600 10px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
  .tocMobile summary::-webkit-details-marker { display: none; }
  .tocMobile summary::after { content: "▾"; color: var(--color-text-muted); font-size: 12px; transition: transform .15s ease; }
  .tocMobile[open] summary::after { transform: rotate(180deg); }
  .tocMobile summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; border-radius: 6px; }
  .tocMobileList { display: grid; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--color-border); }
  .tocMobileList a { display: block; min-height: 44px; padding: 12px 8px; border-radius: 8px; color: var(--color-text-muted); font-size: 14px; line-height: 1.35; text-decoration: none; }
  .tocMobileList a:hover { color: var(--color-accent-strong); background: rgba(255,255,255,.03); }
}

@media (max-width: 760px) {
  main.articleMain { padding: 14px 14px 32px; padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }
  .artHero { padding: 22px 18px; border-radius: 12px; }
  .artHero h1 { font-size: clamp(26px, 7.4vw, 34px); }
  .artDek { font-size: 16px; }
  .artByline { gap: 10px; }
  /* The share buttons take their own line rather than squeezing the byline. */
  .shareRow { margin-left: 0; flex: 1 1 100%; }
  .shareRow button { width: 40px; height: 40px; }
  .artBody { font-size: 16.5px; }
  figure.viz { padding: 16px 14px 12px; }
  .chartBox { height: 260px; }
  .chartBox.tall { height: 300px; }
  /* series.js stretches its canvases to fill the box, so rotated category
     labels eat into the plot; these get extra headroom. Boxes on the older
     hand-written pages keep their own aspect ratio and are left alone. */
  .chartBox.chartFill { height: 300px; }
  .chartBox.chartFill.tall { height: 340px; }
  /* Fade the right edge so the table reads as scrollable, not cut off. */
  .tableWrap { position: relative; mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent 100%); }
  .tldr, .newsletter { padding: 20px 16px; }
  .newsletter form { flex-direction: column; max-width: none; }
  .newsletter input, .newsletter .subBtn { width: 100%; min-height: 46px; font-size: 16px; }
  .ctShare { flex-wrap: wrap; gap: 12px; padding: 16px; }
  .ctShare button { margin-left: 0; width: 100%; min-height: 44px; }
  .reactRow { flex-direction: column; align-items: stretch; gap: 16px; }
  .reactRow button { min-height: 40px; }
  /* Stacked, the support block sits under a rule rather than beside one. */
  .supportBlock { margin-left: 0; padding: 16px 0 0; border-left: 0; border-top: 1px solid var(--color-border); }
  .supportCopy { max-width: none; }
  .commentsSection { padding: 18px 16px; }
  .commentField input, .commentField textarea { font-size: 16px; }
  .commentSubmit { width: 100%; min-height: 46px; }
  .pullQuote { margin: 26px 0; padding-left: 16px; }
  .relGrid { grid-template-columns: 1fr; }
  /* An 11px-tall text link is not a tap target. */
  .breadcrumb { flex-wrap: wrap; margin: 0 0 8px; }
  .breadcrumb a { display: inline-flex; align-items: center; min-height: 40px; }
}

@media (max-width: 620px) {
  .statCards { grid-template-columns: repeat(2,1fr); }
}

/* Touch browsers zoom the page when a focused control is under 16px. */
@media (pointer: coarse) {
  .newsletter input { font-size: 16px; }
}

/* ===== Rankings pages ==================================================
   Single-column: a rankings table is the page, so it gets the full width
   rather than sharing it with a sidebar. */

.rankMain { max-width: 1000px; }
.rankMain .artHero { margin-bottom: 16px; }
.rankMain .tableWrap { margin: 0 0 8px; }
.rankMain .dataTable { min-width: 640px; }
.rankMain .dataTable td:nth-child(2) { color: var(--color-text-strong); font-weight: 650; white-space: nowrap; }

.rankChips { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 18px; }
.rankChips .chip { padding: 8px 14px; border: 1px solid var(--color-border); border-radius: 999px; background: transparent; color: var(--color-text-muted); font-size: 12.5px; font-weight: 700; text-decoration: none; }
.rankChips .chip:hover { border-color: var(--color-accent); color: var(--color-accent-strong); }

.rankGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin: 18px 0 28px; }
.rankCard { display: block; padding: 18px; border: 1px solid var(--color-border); border-radius: 12px; background: color-mix(in srgb, var(--color-surface-subtle) 82%, transparent); text-decoration: none; transition: border-color .15s ease, transform .15s ease; }
.rankCard:hover { border-color: var(--color-accent); transform: translateY(-2px); }
.rankCard .rk { color: var(--color-accent-strong); font: 600 10px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.rankCard .rt { margin: 8px 0 5px; color: var(--color-text-strong); font: 750 17px/1.2 var(--font-display); letter-spacing: -.02em; }
.rankCard .rd { color: var(--color-text-muted); font-size: 12.5px; line-height: 1.45; }

/* FAQ: real <details> so the answers are in the HTML for crawlers and for
   readers with scripting off, rather than injected later. */
.faqSection { margin: 34px 0; padding: clamp(20px, 3vw, 28px); border: 1px solid var(--color-border); border-radius: 14px; background: color-mix(in srgb, var(--color-surface) 92%, transparent); }
.faqSection h2 { margin: 0 0 14px; color: var(--color-text-strong); font: 750 20px/1.2 var(--font-display); letter-spacing: -.02em; }
.faqSection > p { margin: 0 0 12px; color: var(--color-text-muted); font-size: 14.5px; line-height: 1.65; }
.faqSection > p a { color: var(--color-accent-strong); }
.faqItem { border-top: 1px solid var(--color-border); }
.faqItem summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; list-style: none; cursor: pointer; color: var(--color-text-strong); font: 700 14.5px/1.35 var(--font-display); }
.faqItem summary::-webkit-details-marker { display: none; }
.faqItem summary::after { content: "+"; flex: 0 0 auto; color: var(--color-accent); font: 400 18px/1 var(--font-sans); }
.faqItem[open] summary::after { content: "−"; }
.faqItem summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: 6px; }
.faqItem p { margin: 0 0 16px; color: var(--color-text-muted); font-size: 14px; line-height: 1.6; }

@media (max-width: 760px) {
  .rankChips .chip { min-height: 38px; display: inline-flex; align-items: center; }
  .faqSection { padding: 18px 16px; }
  .faqItem summary { font-size: 14px; }
}

/* ===== Player pages ====================================================
   One page per player under /blog/players/. Sections are plain prose blocks
   rather than cards so the page reads as a briefing, not a dashboard. */

.playerSection { margin: 26px 0; }
.playerSection h2 { margin: 0 0 10px; color: var(--color-text-strong); font: 750 20px/1.2 var(--font-display); letter-spacing: -.02em; }
.playerSection > p { margin: 0 0 12px; color: var(--color-text); font-size: 15px; line-height: 1.65; }
.playerSection .tableWrap { margin-top: 14px; }
.playerSection .rankChips { margin-top: 4px; }
.playerDraftSummary { padding: 20px; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface); }
.playerDraftSummary ul { margin: 0; padding-left: 20px; }
.playerDraftSummary li { margin: 0 0 10px; color: var(--color-text); font-size: 15px; line-height: 1.65; }
.playerDraftSummary .playerNextStep { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--color-border); }
.playerDraftSummary a { color: var(--color-accent-strong); text-underline-offset: 3px; }
.playerComparisonLinks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.playerComparison { display: grid; gap: 7px; padding: 16px; border: 1px solid var(--color-border); border-radius: 10px; color: var(--color-text-strong); background: var(--color-surface); text-decoration: none; }
.playerComparison span { color: var(--color-text-muted); font-size: 13px; line-height: 1.5; }
.playerComparison:hover { border-color: var(--color-accent); }
.playerComparison:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.playerPriceVerdict { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; margin: 18px 0 14px; padding: 12px 16px; border: 1px solid var(--color-border); border-radius: 9px; background: var(--color-surface); }
.playerPriceVerdict > span { color: var(--color-text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.playerPriceVerdict > strong { color: var(--color-text-strong); font-size: 17px; }
.playerPriceVerdict[data-verdict="value"] { border-left: 4px solid #58cba3; }
.playerPriceVerdict[data-verdict="fair"] { border-left: 4px solid var(--color-accent); }
.playerPriceVerdict[data-verdict="pass"] { border-left: 4px solid #f29a89; }
.playerVerdictMethod { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--color-border); font-size: 13px; color: var(--color-text-muted); line-height: 1.65; }
.playerNextLinks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 12px; }
.playerNextLinks > a { display: grid; gap: 8px; padding: 16px; border: 1px solid var(--color-border); border-radius: 10px; color: var(--color-text-strong); text-decoration: none; background: var(--color-surface); }
.playerNextLinks span { color: var(--color-text-muted); font-size: 13px; line-height: 1.5; }
.playerNextLinks > a:hover { border-color: var(--color-accent); }
.playerNextLinks > a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.riskReason { margin: 12px 0 0; padding: 14px 16px; border-left: 3px solid var(--color-accent); border-radius: 0 8px 8px 0; background: color-mix(in srgb, var(--color-surface-subtle) 70%, transparent); color: var(--color-text-muted); font-size: 13.5px; line-height: 1.55; }
.riskReason strong { color: var(--color-text-strong); }
.playerSection .dataTable td:first-child { color: var(--color-text); }
.playerSection .dataTable a { color: var(--color-accent-strong); text-decoration: none; font-weight: 650; }
.playerSection .dataTable a:hover { text-decoration: underline; }

/* ===== Flagship guide landing page =====================================
   /blog/guide-to-the-markets/ — a downloadable publication rather than a
   read-through article, so it leads with the cover and the download. */

.guideMain { max-width: 1080px; }

.guideHero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(240px, 0.75fr); gap: clamp(24px, 4vw, 48px); align-items: center; padding: clamp(24px, 4vw, 44px); border: 1px solid color-mix(in srgb, var(--color-accent) 28%, var(--color-border)); border-radius: 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--color-surface-elevated) 86%, transparent), color-mix(in srgb, var(--color-surface) 96%, transparent)); box-shadow: 0 14px 40px rgba(0,0,0,.24); }
.guideHero h1 { margin: 0 0 14px; color: var(--color-text-strong); font: 800 clamp(30px, 4.4vw, 52px)/1.03 var(--font-display); letter-spacing: -.035em; }
.guideHero .artDek { max-width: 52ch; }
.guideHero .artByline { margin-top: 22px; }

.guideActions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.guideDownload { display: inline-flex; flex-direction: column; gap: 2px; padding: 12px 20px; border: 1px solid color-mix(in srgb, var(--color-accent) 50%, transparent); border-radius: 11px; background: color-mix(in srgb, var(--color-accent) 20%, var(--color-surface)); color: var(--color-accent-strong); text-decoration: none; transition: border-color .15s ease, transform .15s ease; }
.guideDownload:hover { border-color: var(--color-accent); transform: translateY(-1px); }
.guideDownload .gdMain { font: 800 15px/1.2 var(--font-display); letter-spacing: -.01em; }
.guideDownload .gdMeta { color: var(--color-text-muted); font: 600 10.5px/1.2 var(--font-mono); letter-spacing: .07em; text-transform: uppercase; }
.guideSecondary { padding: 12px 16px; border: 1px solid var(--color-border); border-radius: 11px; color: var(--color-text); font-size: 13px; font-weight: 750; text-decoration: none; }
.guideSecondary:hover { border-color: var(--color-accent); color: var(--color-accent-strong); }

.guideCover { display: block; border-radius: 10px; overflow: hidden; border: 1px solid var(--color-border-strong); box-shadow: 0 20px 50px rgba(0,0,0,.42); transition: transform .18s ease; }
.guideCover:hover { transform: translateY(-3px); }
.guideCover img { display: block; width: 100%; height: auto; }

.guideMain .statCards { grid-template-columns: repeat(4, 1fr); margin: 16px 0; }

.guideFindings, .guideContents, .guideGallery { margin: 30px 0; padding: clamp(20px, 3vw, 30px); border: 1px solid var(--color-border); border-radius: 14px; background: color-mix(in srgb, var(--color-surface) 92%, transparent); }
.guideFindings h2, .guideContents h2, .guideGallery h2, .guideFooterCta h2 { margin: 0 0 6px; color: var(--color-text-strong); font: 750 clamp(20px, 2.4vw, 26px)/1.15 var(--font-display); letter-spacing: -.02em; }
.contentsNote { margin: 0 0 18px; color: var(--color-text-muted); font-size: 13.5px; line-height: 1.55; }

.findingList { display: grid; gap: 14px; margin-top: 18px; }
.finding { padding-left: 16px; border-left: 3px solid var(--color-accent); }
.finding strong { display: block; margin-bottom: 4px; color: var(--color-text-strong); font: 700 15px/1.35 var(--font-display); }
.finding span { color: var(--color-text-muted); font-size: 13.5px; line-height: 1.55; }

.tocSections { display: grid; gap: 20px; margin: 0; padding: 0; list-style: none; }
.tocSection h3 { margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--color-border); color: var(--color-accent-strong); font: 600 10px/1.3 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }
.tocSection ul { margin: 0; padding: 0; list-style: none; }
.tocSection li { display: flex; gap: 14px; padding: 8px 0; color: var(--color-text); font-size: 14.5px; line-height: 1.45; }
.pgNo { flex: 0 0 26px; color: var(--color-text-subtle); font: 600 11px/1.6 var(--font-mono); font-variant-numeric: tabular-nums; }
.pgTitle { flex: 1; }

.pageGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.pagePreview { position: relative; display: block; border: 1px solid var(--color-border); border-radius: 8px; overflow: hidden; background: var(--color-surface-subtle); transition: border-color .15s ease, transform .15s ease; }
.pagePreview:hover { border-color: var(--color-accent); transform: translateY(-2px); }
.pagePreview img { display: block; width: 100%; height: auto; }
.pagePreview span { position: absolute; right: 6px; bottom: 6px; min-width: 20px; padding: 2px 6px; border-radius: 5px; background: rgba(4, 10, 20, .82); color: var(--color-text-muted); font: 600 10px/1.5 var(--font-mono); text-align: center; }
.pagePreview:focus-visible, .guideCover:focus-visible, .guideDownload:focus-visible, .guideSecondary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }

.guideFooterCta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px; margin: 30px 0; padding: clamp(20px, 3vw, 28px); border: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent); border-radius: 14px; background: color-mix(in srgb, var(--color-accent) 9%, transparent); }
.guideFooterCta p { margin: 4px 0 0; color: var(--color-text-muted); font-size: 13.5px; }

/* ===== Top 250 one-page draft sheet ===================================== */
.cheatSheetMain { max-width: 1180px; }
.cheatSheetHero { grid-template-columns: minmax(320px, .8fr) minmax(460px, 1.2fr); }
.cheatSheetCover { background: #070f1c; }
.cheatSheetCover img { aspect-ratio: 16 / 9; object-fit: cover; }
.cheatSheetKey { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sheetConfigurator { display: grid; gap: 12px; margin-top: 22px; padding: 14px; border: 1px solid var(--color-border); border-radius: 13px; background: color-mix(in srgb, var(--color-surface-subtle) 78%, transparent); }
.sheetOptionGroup { display: grid; grid-template-columns: 62px minmax(0, 1fr); align-items: center; gap: 10px; }
.sheetOptionLabel { color: var(--color-text-subtle); font: 650 9.5px/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.sheetChoices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.sheetChoice { min-height: 36px; padding: 7px 9px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface); color: var(--color-text-muted); font: 700 11px/1.2 var(--font-sans); cursor: pointer; }
.sheetChoice:hover { border-color: color-mix(in srgb, var(--color-accent) 56%, var(--color-border)); color: var(--color-text); }
.sheetChoice[aria-pressed="true"] { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 17%, var(--color-surface)); color: var(--color-accent-strong); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent) 18%, transparent); }
.sheetChoice:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.sheetDownloadRow { display: flex; align-items: stretch; flex-wrap: wrap; gap: 8px; }
.sheetDownloadRow .guideDownload { flex: 1 1 220px; justify-content: center; }
.sheetDownloadRow .guideSecondary { display: inline-flex; align-items: center; justify-content: center; }
.sheetMethodNote { margin: -2px 0 0; color: var(--color-text-subtle); font-size: 10.5px; line-height: 1.45; }
.sheetPreviewPages { display: grid; gap: 24px; }
.sheetPreviewPages figure { min-width: 0; margin: 0; }
.sheetPreviewPages[data-layout="mobile"] figure { width: 100%; max-width: 680px; margin-inline: auto; }
.sheetPreviewLink { display: block; overflow: hidden; border: 1px solid var(--color-border-strong); border-radius: 10px; background: #070f1c; box-shadow: 0 20px 48px rgba(0,0,0,.32); cursor: zoom-in; }
.sheetPreviewLink img { display: block; width: 100%; height: auto; }
.sheetPreviewLink:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; }
.sheetPreviewPages figcaption { margin-top: 10px; color: var(--color-text-muted); font: 500 11px/1.5 var(--font-mono); text-align: center; }

@media (max-width: 900px) {
  .guideHero { grid-template-columns: 1fr; }
  /* Cover first on narrow screens: it is the thing being offered. */
  .guideCover { order: -1; max-width: 260px; }
  .guideMain .statCards { grid-template-columns: repeat(2, 1fr); }
  .cheatSheetCover { order: -1; max-width: none; }
}

@media (max-width: 760px) {
  .guideActions { gap: 8px; }
  .guideActions .guideDownload, .guideActions .guideSecondary { flex: 1 1 100%; text-align: center; align-items: center; min-height: 48px; justify-content: center; }
  .guideFooterCta .guideDownload { flex: 1 1 100%; align-items: center; min-height: 48px; justify-content: center; }
  .pageGrid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
  .tocSection li { font-size: 14px; gap: 10px; }
  .cheatSheetKey { grid-template-columns: 1fr; }
  .sheetOptionGroup { grid-template-columns: 1fr; gap: 6px; }
  .sheetChoices { gap: 6px; }
  .sheetChoice { min-height: 42px; font-size: 11.5px; }
  .sheetDownloadRow .guideDownload, .sheetDownloadRow .guideSecondary { flex: 1 1 100%; }
}

/* Series navigation for the twelve draft-slot guides.
   The guides are a series but had no way to move between them: eight of the
   twelve were reachable only from the blog index. Written by
   scripts/apply_series_nav.py, which takes each headline from that guide's
   own H1 so the nav cannot disagree with the page it points at. */
.slotSeries { margin: 46px 0 10px; padding-top: 26px; border-top: 1px solid var(--color-border); }
.slotSeriesLabel { margin: 0 0 12px; color: var(--color-text-subtle); font: 600 11px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.slotSeriesList { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 20px; padding: 0; list-style: none; }
.slotSeriesList a,
.slotSeriesList span { display: block; padding: 6px 11px; border: 1px solid var(--color-border); border-radius: 8px; font: 600 12px/1.1 var(--font-mono); letter-spacing: .01em; text-decoration: none; white-space: nowrap; }
.slotSeriesList a { color: var(--color-text-subtle); transition: .15s; }
.slotSeriesList a:hover,
.slotSeriesList a:focus-visible { border-color: var(--color-accent); color: var(--color-text-strong); }
.slotSeriesList span[aria-current] { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 13%, transparent); color: var(--color-text-strong); }
.slotSeriesEnds { display: grid; gap: 10px; }
@media (min-width: 620px) { .slotSeriesEnds { grid-template-columns: 1fr 1fr; } }
.slotSeriesEnds a { display: block; padding: 14px 16px; border: 1px solid var(--color-border); border-radius: 11px; background: color-mix(in srgb, var(--color-surface-subtle) 82%, transparent); color: var(--color-text-strong); font: 700 15px/1.25 var(--font-display); letter-spacing: -.01em; text-decoration: none; transition: .15s; }
.slotSeriesEnds a:hover,
.slotSeriesEnds a:focus-visible { border-color: var(--color-accent); transform: translateY(-2px); }
.slotSeriesEnds span { display: block; margin-bottom: 7px; color: var(--color-accent-strong); font: 600 9.5px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
@media (min-width: 620px) { .slotSeriesNext { text-align: right; } }
@media (prefers-reduced-motion: reduce) { .slotSeriesEnds a:hover { transform: none; } }