/* ═══ 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.
   Oct 12 2026 (second pass, scripts/_ds-articles-oct12.py for the markup):
   - Preview/Recap tabs are a .ds-seg (classes added beside .article-tab);
     only their spacing lives here, the component draws them.
   - The hero takes the .ds-hero type styles (kicker eyebrow in ink-2, 44px /
     30px heavy title, scrim of 60%+ under the text), centred, on its own
     markup: build.js reads class="hero-bg"><img src= and .hero-tag.
   - .prose-subhead is a section-title-sized subhead (17px semi, ink-1).
   - The old .movie-embed cards (weeks 14-21) sit between hairlines, no box.
   - The page paints surface-0 instead of #111.
   Class names are read by the article gates (check-weekend-article.py,
   check-article-structure.py) and link-article-entities.py: keep them. */

/* ── Page surface (README rule: pages paint surface-0). Light theme is
   opt-in and keeps its own --bg. ── */
:root:not([data-theme="light"]){--bg:var(--bow-surface-0,#0A0A0B)}

/* ── Hero: .ds-hero type styles on the article's own markup. The scrim is
   surface-0 (10,10,11) at 60% where the text starts, 85% under it, then the
   page colour, so text never sits on less than 60% black. ── */
.article-hero .hero-content{display:flex;flex-direction:column;align-items:center;text-align:center;padding:120px 40px var(--bow-space-7,48px);background:linear-gradient(to bottom,rgba(10,10,11,0) 0,rgba(10,10,11,.6) 96px,rgba(10,10,11,.85) 72%,var(--bg,#0A0A0B) 100%)}
.article-hero .hero-tag{margin:0 0 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-2,#B5B5B8)}
.article-hero .hero-content h1{max-width:920px;margin:0;font-size:var(--bow-fs-8,44px);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;text-shadow:none}
.article-hero .hero-meta{margin:var(--bow-space-3,12px) 0 0;font-size:var(--bow-fs-4,15px);line-height:var(--bow-lh-body,1.5);color:var(--bow-ink-2,#B5B5B8)}

/* ── Preview/Recap tabs: .article-tabs.ds-seg; the component draws the
   track, options and the green active option. Spacing only. ── */
.article-tabs{margin:0 0 var(--bow-space-6,32px)}

/* ── 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-5,17px);font-weight:var(--bow-fw-semi,600);line-height:var(--bow-lh-title,1.3);letter-spacing:0;text-transform:none;color:var(--bow-ink-1,#FFFFFF);text-wrap:balance;margin:var(--bow-space-6,32px) 0 var(--bow-space-3,12px)}
.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): stat labels. Eyebrows that carry names
   (film tag, embed tag, chart title) stay uppercase. ── */
.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): no box. Hairlines above and below
   (one shared line between back-to-back cards), poster flush left, figures
   in ink, not green. Markup and class names unchanged. ── */
.movie-embed{min-height:0;margin:var(--bow-space-5,24px) 0;border:0;border-top:1px solid var(--bow-line,rgba(255,255,255,.1));border-bottom:1px solid var(--bow-line,rgba(255,255,255,.1));border-radius:0;background:none}
.movie-embed + .movie-embed{margin-top:calc(-1 * var(--bow-space-5,24px));border-top:0}
.movie-embed:hover{background:none;border-color:var(--bow-line,rgba(255,255,255,.1))}
.movie-embed:hover .movie-embed-title{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:var(--bow-ink-3,#8C8C90)}
.movie-embed .movie-embed-poster{margin:var(--bow-space-4,16px) 0;border:0;box-shadow:none}
.movie-embed .movie-embed-info{padding:var(--bow-space-4,16px) var(--bow-space-5,24px)}
.movie-embed .movie-embed-right{padding:var(--bow-space-4,16px) 0 var(--bow-space-4,16px) var(--bow-space-5,24px);border-left:1px solid var(--bow-line,rgba(255,255,255,.1))}
.movie-embed .movie-embed-stat + .movie-embed-stat{border-top:1px solid var(--bow-line,rgba(255,255,255,.1))}
.movie-embed .movie-embed-tag{color:var(--bow-ink-3,#8C8C90)}
.movie-embed .movie-embed-title{color:var(--bow-ink-1,#FFFFFF)}
.movie-embed .movie-embed-meta{color:var(--bow-ink-3,#8C8C90)}
.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-hero .hero-content{padding:80px var(--bow-gutter,16px) var(--bow-space-5,24px);background:linear-gradient(to bottom,rgba(10,10,11,0) 0,rgba(10,10,11,.6) 64px,rgba(10,10,11,.85) 72%,var(--bg,#0A0A0B) 100%)}
  .article-hero .hero-content h1{font-size:var(--bow-fs-7,30px)}
  .article-hero .hero-meta{margin-top:var(--bow-space-2,8px);font-size:var(--bow-fs-3,13px);line-height:var(--bow-lh-data,1.35)}
  .prose-subhead{margin-top:var(--bow-space-5,24px)}
  .movie-embed .movie-embed-info{padding:var(--bow-space-4,16px)}
  .movie-embed .movie-embed-right{padding:var(--bow-space-4,16px) 0 var(--bow-space-4,16px) var(--bow-space-4,16px)}
  .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)}
}