/* Newspaper layout (NYT-inspired): white page, centered serif masthead, section bar,
   lead story + columns separated by hairline rules, serif reading column on articles. */
:root {
  --paper: #FFFFFF;
  --ink: #121212;
  --muted: #5A5A5A;
  --rule: #DFDFDF;
  --rule-strong: #121212;
  --link: #326891;
  --ok: #1A7F4B;
  --partial: #B26B00;
  --no: #B3261E;
  --masthead: "Playfair Display", "Times New Roman", Georgia, serif;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: "Libre Franklin", "Franklin Gothic Medium", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.55 var(--serif); }
a { color: inherit; text-decoration: none; }
a:hover h2, a:hover h3, a:focus-visible h2, a:focus-visible h3 { color: #3a3a3a; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; }
img, video { max-width: 100%; display: block; }
.wrap { max-width: 1200px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }

/* ---------- top bar + masthead ---------- */
.topbar { font: 500 12px/1 var(--sans); color: var(--muted); }
.topbar .wrap { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-block: 12px; }
.topbar .date { }
.lang { display: flex; gap: 2px; }
.lang a { padding: 6px 9px; border-radius: 2px; font-weight: 600; letter-spacing: .04em; }
.lang a[aria-current="true"] { background: var(--ink); color: var(--paper); }
.lang a:not([aria-current="true"]):hover { background: #f1f1f1; }

.masthead { text-align: center; padding-block: 4px 14px; }
.masthead a { display: inline-block; }
.masthead .name { font: 900 clamp(40px, 7vw, 76px)/1 var(--masthead); letter-spacing: -.01em; }
.masthead .tagline { margin-top: 8px; font: italic 400 15px/1.3 var(--serif); color: var(--muted); }

.sections { border-top: 1px solid var(--rule-strong); border-bottom: 3px double var(--rule-strong); }
.sections .wrap { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 26px; padding-block: 10px; font: 600 13px/1.2 var(--sans); }
.sections a { padding: 4px 0; border-bottom: 2px solid transparent; }
.sections a:hover, .sections a[aria-current="page"] { border-bottom-color: var(--ink); }

/* ---------- shared bits ---------- */
.kicker { font: 700 12px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.status { font: 700 11px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 6px; }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.status.ok { color: var(--ok); } .status.partial { color: var(--partial); } .status.no { color: var(--no); }
.status.no::before { background: transparent; border: 1.5px solid currentColor; }
.time { font: 400 12px/1.3 var(--sans); color: var(--muted); }
.credit { font: 400 12px/1.4 var(--sans); color: var(--muted); }

/* ---------- home ---------- */
.front { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr); gap: 0; padding-block: 22px 40px; }
.front > * { min-width: 0; }
.main-col { padding-right: 24px; border-right: 1px solid var(--rule); }
.rail { padding-left: 24px; display: grid; gap: 22px; align-content: start; }

.lead { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--rule); }
.lead > div { min-width: 0; display: grid; gap: 10px; align-content: start; }
.lead h2 { margin: 0; font: 700 clamp(28px, 3.4vw, 40px)/1.12 var(--serif); letter-spacing: -.005em; text-wrap: balance; }
.lead p { margin: 0; font-size: 18px; color: #333; }
.lead figure { margin: 0; }
.thumb { aspect-ratio: 4 / 5; overflow: hidden; background: #eee; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }

.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding-top: 22px; }
.grid article { padding: 0 20px; border-left: 1px solid var(--rule); display: grid; gap: 8px; align-content: start; }
.grid article:first-child { padding-left: 0; border-left: 0; }
.grid h3 { margin: 0; font: 700 20px/1.22 var(--serif); text-wrap: balance; }
.grid p { margin: 0; font-size: 15px; line-height: 1.45; color: #444; }
.grid .thumb { aspect-ratio: 3 / 2; }

.rail h4 { margin: 0 0 8px; font: 700 13px/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase; padding-bottom: 8px; border-bottom: 1px solid var(--rule-strong); }
.rail ol { margin: 0; padding: 0; list-style: none; counter-reset: n; }
.rail ol li { counter-increment: n; display: grid; grid-template-columns: 28px 1fr; gap: 6px; padding-block: 10px; border-bottom: 1px solid var(--rule); font: 600 15px/1.3 var(--serif); }
.rail ol li::before { content: counter(n); font: 700 20px/1 var(--serif); color: #b5b5b5; }
.rail .box { font-size: 15px; line-height: 1.5; color: #333; }
.rail .box p { margin: 0 0 10px; }
.rail .legend { display: grid; gap: 8px; margin-top: 6px; }
.rail .legend div { display: grid; gap: 2px; font-size: 14px; }
.more { font: 600 13px var(--sans); color: var(--link); }

/* ---------- article ---------- */
.article { max-width: 720px; margin: 0 auto; padding-block: 30px 56px; }
.article header { display: grid; gap: 12px; margin-bottom: 22px; }
.article h1 { margin: 0; font: 700 clamp(32px, 4.6vw, 46px)/1.1 var(--serif); letter-spacing: -.01em; text-wrap: balance; }
.article .deck { margin: 0; font: 400 21px/1.45 var(--serif); color: #333; }
.byline { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; font: 400 13px/1.4 var(--sans); color: var(--muted); padding-block: 12px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.byline strong { color: var(--ink); font-weight: 600; }
.media { margin: 26px auto; max-width: 420px; }
.media video { width: 100%; aspect-ratio: 9 / 16; background: #000; }
.media figcaption { margin-top: 8px; }
.body h2 { font: 700 13px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; margin: 34px 0 12px; padding-top: 14px; border-top: 1px solid var(--rule-strong); }
.body p { font-size: 19px; line-height: 1.65; margin: 0 0 16px; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; margin: 0; padding: 16px 18px; background: #F7F7F5; font: 400 15px/1.5 var(--sans); }
.facts dt { font-weight: 700; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding-top: 2px; }
.facts dd { margin: 0; min-width: 0; }
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font: 400 16px/1.5 var(--sans); }
.checks li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; }
.checks .y { color: var(--ok); font-weight: 700; } .checks .n { color: var(--no); font-weight: 700; } .checks .q { color: var(--partial); font-weight: 700; }
.scale { display: flex; gap: 4px; margin-top: 14px; font: 600 11px/1 var(--sans); letter-spacing: .05em; text-transform: uppercase; }
.scale span { flex: 1; padding: 8px 6px; text-align: center; border-top: 4px solid var(--rule); color: #9a9a9a; }
.scale span.on.no { border-color: var(--no); color: var(--no); }
.scale span.on.partial { border-color: var(--partial); color: var(--partial); }
.scale span.on.ok { border-color: var(--ok); color: var(--ok); }
.source { font: 600 15px var(--sans); color: var(--link); }
.source:hover { text-decoration: underline; }
.back { font: 600 13px var(--sans); color: var(--link); }

/* ---------- method page ---------- */
.page { max-width: 720px; margin: 0 auto; padding-block: 30px 56px; }
.page h1 { font: 700 clamp(32px, 4.6vw, 44px)/1.1 var(--serif); margin: 10px 0 14px; }
.page .deck { font: 400 20px/1.5 var(--serif); color: #333; margin: 0 0 24px; }
.steps { list-style: none; padding: 0; margin: 0; counter-reset: s; display: grid; gap: 0; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 44px 1fr; gap: 10px; padding-block: 14px; border-top: 1px solid var(--rule); }
.steps li::before { content: counter(s); font: 700 26px/1 var(--serif); color: #b5b5b5; }
.steps b { font: 700 16px var(--sans); display: block; }
.steps span { font-size: 17px; color: #333; }
.levels { display: grid; gap: 14px; }
.levels div { display: grid; grid-template-columns: 150px 1fr; gap: 14px; font-size: 17px; }

footer.site { border-top: 3px double var(--rule-strong); margin-top: 10px; }
footer.site .wrap { padding-block: 22px 40px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font: 400 13px/1.5 var(--sans); color: var(--muted); }
footer.site .name { font: 900 22px/1 var(--masthead); color: var(--ink); }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .front { grid-template-columns: minmax(0, 1fr); }
  .main-col { padding-right: 0; border-right: 0; }
  .rail { padding-left: 0; padding-top: 26px; border-top: 3px double var(--rule-strong); margin-top: 10px; }
}
@media (max-width: 680px) {
  .lead { grid-template-columns: minmax(0, 1fr); }
  .lead figure { order: -1; }
  .lead .thumb { aspect-ratio: 4 / 3; }
  .grid { grid-template-columns: minmax(0, 1fr); }
  .grid article { padding: 18px 0; border-left: 0; border-top: 1px solid var(--rule); }
  .grid article:first-child { border-top: 0; padding-top: 0; }
  .levels div { grid-template-columns: 1fr; gap: 4px; }
  .sections .wrap { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; }
}

/* ---------- politics: Contradictomètre, flags, A/B statements ---------- */
:root { --r0: #2F6FD0; --r1: #6B7280; --r2: #C98A00; --r3: #E8590C; --r4: #A1130A; }
.rating { font: 700 11px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; padding: 4px 7px; color: #fff; display: inline-block; }
.rating.r0 { background: var(--r0); } .rating.r1 { background: var(--r1); } .rating.r2 { background: var(--r2); }
.rating.r3 { background: var(--r3); } .rating.r4 { background: var(--r4); }
.meter { display: grid; gap: 6px; margin: 4px 0 8px; max-width: 520px; }
.meter .bars { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; }
.meter .bars span { height: 8px; background: #E6E6E6; }
.meter .bars span.on.r0 { background: var(--r0); } .meter .bars span.on.r1 { background: var(--r1); }
.meter .bars span.on.r2 { background: var(--r2); } .meter .bars span.on.r3 { background: var(--r3); }
.meter .bars span.on.r4 { background: var(--r4); }
.meter .labels { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; font: 500 10px/1.2 var(--sans); color: #9a9a9a; text-transform: uppercase; letter-spacing: .03em; }
.meter .labels .current { color: var(--ink); font-weight: 700; }
.article .meter { max-width: none; margin: 4px 0 12px; }
.flags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.flags span { font: 600 12px/1 var(--sans); padding: 7px 10px; border: 1.5px solid var(--ink); }
.statements { display: grid; gap: 14px; margin: 8px 0 22px; }
.statement { margin: 0; display: grid; grid-template-columns: 40px 1fr; gap: 6px 14px; padding: 16px 18px; background: #F7F7F5; border-left: 4px solid var(--ink); }
.statement .tag { grid-row: span 2; font: 900 30px/1 var(--masthead); }
.statement blockquote { margin: 0; font: italic 400 20px/1.5 var(--serif); }
.statement figcaption { font: 400 13px/1.4 var(--sans); color: var(--muted); }
.statement figcaption a { color: var(--link); }
.statement figcaption strong { color: var(--ink); }
.media.wide { max-width: none; }
.media.wide iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; background: #000; display: block; }
.thumb.wide { aspect-ratio: 16 / 10; }
.block { margin-top: 30px; padding-top: 4px; border-top: 3px double var(--rule-strong); }
.block-title { margin: 10px 0 0; font: 700 13px/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase; }
.grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid.four h3 { font-size: 17px; }
.grid .card { padding: 0 20px; border-left: 1px solid var(--rule); display: grid; gap: 8px; align-content: start; }
.grid .card:first-child { padding-left: 0; border-left: 0; }
.rail .legend .rating { font-size: 11px; }
.section-page { padding-block: 26px 48px; }
.section-title { margin: 0 0 6px; font: 700 clamp(30px, 4vw, 42px)/1.1 var(--serif); padding-bottom: 12px; border-bottom: 1px solid var(--rule-strong); }
.section-page .grid { row-gap: 26px; }
@media (max-width: 960px) { .grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid.four .card:nth-child(3) { padding-left: 0; border-left: 0; } }
@media (max-width: 680px) {
  .grid.four { grid-template-columns: minmax(0, 1fr); }
  .grid .card { padding: 18px 0; border-left: 0; border-top: 1px solid var(--rule); }
  .grid .card:first-child { border-top: 0; padding-top: 0; }
  .meter .labels { font-size: 9px; }
}
.grid:not(.four) > .card:nth-child(3n+1) { padding-left: 0; border-left: 0; }
.grid.four > .card:nth-child(4n+1) { padding-left: 0; border-left: 0; }

/* ---------- who is responsible: municipal / provincial / federal ---------- */
.gov { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--rule); }
.gov section { padding: 12px 16px 4px; border-left: 1px solid var(--rule); min-width: 0; }
.gov section:first-child { border-left: 0; padding-left: 0; }
.gov h3 { margin: 0 0 8px; font: 700 12px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.gov-item { margin-bottom: 12px; }
.gov-item .branch { font: 400 13px/1.4 var(--sans); color: var(--muted); }
.gov-item .branch strong { color: var(--ink); }
.gov-item p { font-size: 16px !important; line-height: 1.5 !important; margin: 4px 0 0 !important; }
@media (max-width: 680px) { .gov { grid-template-columns: minmax(0, 1fr); } .gov section { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); } }
.assess { display: inline-block; margin-top: 4px; font: 700 10px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; padding: 4px 6px; border: 1.5px solid currentColor; }
.assess.good { color: var(--ok); } .assess.poor { color: var(--no); } .assess.unclear { color: var(--partial); }
.gov-item .src { font: 600 12px var(--sans); color: var(--link); margin-left: 4px; }