/* ═══ analysis/article.css — shared design-system layer for every article ═══
   Oct 10 2026. Linked by every /analysis/week-N.html and by
   build/article-template.html, right after /assets/nav.css and
   /assets/components.css, so it overrides the per-article <style> blocks
   (which have drifted into several variants) without touching them.

   What it sets
   - Body column: a 680px reading measure; prose 17px / 1.6 on desktop and
     phone alike (QA Oct 10: 15px read too dense on phones).
   - The per-film section (.movie-section) fits that column: a small poster
     beside the tag, title, meta and prediction, the prose full width below.
     The section is fully defined here, so an article built from the template
     gets it even though the template's own <style> has no .movie-section CSS.
   - Green only for page-level actions: the film tag, prediction and embed
     stats are ink, not green; the rank chip is .ds-rank (added to the markup).
   - Charts sit on the page (no tinted box); colours are --bow-data-* in each
     article's Chart.js config.
   Class names are read by the article gates (check-weekend-article.py,
   check-article-structure.py) and link-article-entities.py: keep them. */

/* ── Body column ── */
.article-body{box-sizing:content-box;max-width:680px;margin:0 auto;padding:var(--bow-space-6,32px) var(--bow-space-5,24px) var(--bow-space-7,48px)}
.article-prose p,.movie-prose p{font-size:var(--bow-fs-5,17px);line-height:1.6;color:var(--bow-ink-2,#B5B5B8);margin-bottom:var(--bow-space-4,16px)}
.article-intro{margin-bottom:var(--bow-space-7,48px);padding-bottom:var(--bow-space-6,32px);border-bottom:1px solid var(--bow-line,rgba(255,255,255,.1))}
.article-intro p{font-size:var(--bow-fs-5,17px);line-height:1.6;color:var(--bow-ink-2,#B5B5B8);margin-bottom:var(--bow-space-4,16px)}
.article-intro p:last-child,.movie-prose p:last-child{margin-bottom:0}
.prose-subhead{font-size:var(--bow-fs-1,11px);font-weight:var(--bow-fw-semi,600);letter-spacing:var(--bow-ls-caps,.08em);text-transform:uppercase;color:var(--bow-ink-3,#8C8C90);margin:var(--bow-space-5,24px) 0 var(--bow-space-2,8px)}
.prose-subhead:first-child{margin-top:0}
.pull-quote{border-left:2px solid var(--bow-ink-4,#5C5C60);padding-left:var(--bow-space-4,16px);margin:var(--bow-space-5,24px) 0;font-size:var(--bow-fs-5,17px);font-style:italic;line-height:1.6;color:var(--bow-ink-2,#B5B5B8)}

/* ── Per-film section ── */
.movie-section{display:grid;grid-template-columns:132px minmax(0,1fr);grid-template-rows:auto auto auto auto 1fr auto;column-gap:var(--bow-space-5,24px);row-gap:0;margin-bottom:var(--bow-space-7,48px);padding-bottom:var(--bow-space-7,48px);border-bottom:1px solid var(--bow-line,rgba(255,255,255,.1))}
.movie-section:last-child{border-bottom:0;padding-bottom:0;margin-bottom:0}
.movie-poster-block{position:relative;display:block;grid-column:1;grid-row:1 / 6;align-self:start;max-width:none;margin:0;text-decoration:none}
.movie-poster-block img{display:block;width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:var(--bow-r-md,8px);background:var(--bow-surface-1,#141416);box-shadow:none;border:0}
.movie-poster-block .rank-badge{position:absolute;top:6px;left:6px}
.movie-info-block{display:contents}
.movie-info-block > *{grid-column:2;min-width:0}
.movie-info-block .movie-tag{margin-bottom:var(--bow-space-2,8px);font-size:var(--bow-fs-1,11px);font-weight:var(--bow-fw-semi,600);line-height:var(--bow-lh-data,1.35);letter-spacing:var(--bow-ls-caps,.08em);text-transform:uppercase;color:var(--bow-ink-3,#8C8C90)}
.movie-info-block h2{margin:0 0 var(--bow-space-1,4px);font-size:var(--bow-fs-7,30px);font-weight:var(--bow-fw-heavy,800);line-height:var(--bow-lh-display,1.1);letter-spacing:var(--bow-ls-tight,-.02em);color:var(--bow-ink-1,#FFFFFF);text-wrap:balance}
.movie-info-block h2 a{color:inherit;text-decoration:none}
.movie-info-block h2 a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:var(--bow-ink-3,#8C8C90)}
.movie-info-block .movie-meta{margin-bottom:var(--bow-space-4,16px);font-size:var(--bow-fs-3,13px);line-height:var(--bow-lh-data,1.35);letter-spacing:0;color:var(--bow-ink-3,#8C8C90);text-wrap:balance}
/* Prediction: the one headline number of the section, on a hairline, no box */
.movie-prediction{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--bow-space-4,16px);align-items:center;margin:0;padding:var(--bow-space-3,12px) 0 0;border:0;border-top:1px solid var(--bow-line,rgba(255,255,255,.1));border-radius:0;background:none}
.movie-prediction-num{font-size:var(--bow-fs-7,30px);font-weight:var(--bow-fw-heavy,800);line-height:1;letter-spacing:var(--bow-ls-tight,-.02em);font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--bow-ink-1,#FFFFFF)}
.movie-prediction-lbl{margin-bottom:2px;font-size:var(--bow-fs-1,11px);font-weight:var(--bow-fw-semi,600);letter-spacing:var(--bow-ls-caps,.08em);text-transform:uppercase;color:var(--bow-ink-3,#8C8C90)}
.movie-prediction-sub{font-size:var(--bow-fs-3,13px);line-height:var(--bow-lh-data,1.35);color:var(--bow-ink-2,#B5B5B8);text-wrap:balance}
.movie-info-block > .movie-prose{grid-column:1 / -1;grid-row:6;margin-top:var(--bow-space-5,24px)}

/* ── Sentence case (QA Oct 10): tabs and stat labels. Eyebrows that carry
   names (film tag, embed tag, chart title, prose subhead) stay uppercase. ── */
.article-tab{text-transform:none;letter-spacing:0}
.movie-prediction-lbl,.movie-embed .movie-embed-stat-label{font-size:var(--bow-fs-2,12px);letter-spacing:0;text-transform:lowercase}
.movie-prediction-lbl::first-letter,.movie-embed .movie-embed-stat-label::first-letter{text-transform:uppercase}

/* ── Older embed card (weeks 14–21, template): figures in ink, not green ── */
.movie-embed .movie-embed-stat-val{color:var(--bow-ink-1,#FFFFFF)}
.article-prose a.movie-embed,.movie-prose a.movie-embed{text-decoration:none}

/* ── Charts: on the page, no tinted box; title is the eyebrow ── */
.chart-card{background:none;border:0;border-radius:0;padding:0;margin:var(--bow-space-6,32px) 0}
.chart-card-title{margin-bottom:var(--bow-space-3,12px);color:var(--bow-ink-3,#8C8C90)}

/* ── Predict the Weekend band: bleeds to the new body padding ── */
.ptw-band{margin:0 calc(-1 * var(--bow-space-5,24px))}
.ptw-band .ptw-body{padding:26px var(--bow-space-5,24px)}
.ptw-band .ptw-kicker{color:var(--bow-ink-2,#B5B5B8)}

@media(max-width:700px){
  .article-body{padding:var(--bow-space-5,24px) var(--bow-gutter,16px) var(--bow-space-7,48px)}
  .article-intro{margin-bottom:var(--bow-space-6,32px);padding-bottom:var(--bow-space-5,24px)}
  .movie-section{grid-template-columns:88px minmax(0,1fr);grid-template-rows:auto auto auto 1fr auto auto;column-gap:var(--bow-space-4,16px);margin-bottom:var(--bow-space-6,32px);padding-bottom:var(--bow-space-6,32px)}
  .movie-poster-block{grid-row:1 / 5}
  .movie-info-block h2{font-size:var(--bow-fs-6,22px)}
  .movie-info-block .movie-meta{margin-bottom:0}
  .movie-info-block > .movie-prediction{grid-column:1 / -1;grid-row:5;margin-top:var(--bow-space-4,16px)}
  .movie-prediction-num{font-size:var(--bow-fs-6,22px)}
  .movie-info-block > .movie-prose{grid-row:6;margin-top:var(--bow-space-4,16px)}
  .ptw-band{margin:0 calc(-1 * var(--bow-gutter,16px))}
  .ptw-band .ptw-body{padding:22px var(--bow-gutter,16px)}
}