/* site.css — shared by every site built from this repo. Newsprint layout from design-reference.html. No colour or font is written here. They arrive as custom properties that build.py emits into from the site's config.yaml: palette --blue --blue-ink --orange --orange-deep --paper --paper-2 --rule --rule-2 --ink --ink-soft --white --blue-soft --blue-text --blue-rule --green --red --verdict-holds-up --verdict-undersold --verdict-true-but-hollow --verdict-overstated --verdict-wrong fonts --font-display (headlines, wordmark) --font-body (copy) --font-label (labels, tabs, navigation) --font-ui (small interface text) --font-mono Orange is reserved for the wordmark, rarity numbers (including the ledger score), verdict badges, claim-check chips and the newsletter button; everything structural is blue. Site-specific tweaks go in sites//static/custom.css. */ *, *::before, *::after { box-sizing: border-box; } [hidden] { display: none !important; } /* Body copy: 17px on phones, 18px from tablet up. Labels and interface text are set in px. */ :root { font-size: 17px; } @media (min-width: 48em) { :root { font-size: 18px; } } html { background: var(--paper); -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 1rem; line-height: 1.62; -webkit-font-smoothing: antialiased; } a { color: var(--blue); text-underline-offset: .12em; } a:hover { color: var(--ink); } :focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; } img { max-width: 100%; height: auto; } q { quotes: "\201C" "\201D" "\2018" "\2019"; } b, strong { font-weight: 600; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 100; padding: .5em 1em; background: var(--blue); color: var(--white); font-family: var(--font-label); text-transform: uppercase; letter-spacing: .1em; text-decoration: none; } .skip-link:focus { top: 1rem; } .wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 20px 60px; flex: 1 0 auto; display: flex; flex-direction: column; } @media (min-width: 48em) { .wrap { padding: 0 28px 100px; } } .main { flex: 1 0 auto; padding-top: 28px; } /* ---- type ---------------------------------------------------------------- */ .head { font-family: var(--font-display); font-size: clamp(34px, 5.2vw, 54px); line-height: 1.02; letter-spacing: -.02em; margin: 0 0 14px; color: var(--blue); max-width: 19ch; } .head--page { font-size: 38px; } .byline { display: flex; align-items: center; gap: 0; flex-wrap: wrap; font-family: var(--font-ui); font-size: 14.5px; color: var(--ink-soft); border-bottom: 1px solid var(--rule); padding-bottom: 16px; margin: 0; } .byline b { color: var(--ink); font-weight: 600; } .byline a { color: var(--blue); } .byline .who { color: var(--ink); font-weight: 600; } .byline .when { margin-left: 10px; } /* The verdict is a two-part unit: a label box joined to the badge. */ .vwrap { display: inline-flex; align-items: stretch; } .byline .vwrap { margin-left: 22px; padding-left: 22px; border-left: 1px solid var(--rule); } .byline .vwrap:first-child { margin-left: 0; padding-left: 0; border-left: 0; } .vlab { display: flex; align-items: center; padding: 7px 12px 6px; font-family: var(--font-label); font-weight: 700; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink); background: var(--paper-2); border: 1px solid var(--rule); border-right: 0; } @media (max-width: 47.49em) { /* On phones the unit wraps under the byline; drop the divider so it doesn't look indented. */ .byline .vwrap { flex-basis: 100%; margin: 10px 0 0; padding-left: 0; border-left: 0; } } /* Small-caps label: tabs, column heads, box titles, table heads, chips. 800 weight fills in at this size, so every small label is 700 / 12.5px / .26em. */ .label, .blocklabel, .colhead, .box h3, .cred h3, .filters h2, .k, .homekick__tag, .nightly-panel__lab, .nightly-panel__supp b, th { font-family: var(--font-label); font-weight: 700; font-size: 12.5px; letter-spacing: .26em; text-transform: uppercase; } /* ---- masthead --------------------------------------------------------------- */ .mast { border-bottom: 3px solid var(--blue); padding-top: 22px; } .mast__top { display: flex; align-items: center; flex-wrap: wrap; padding-bottom: 14px; } .logo { display: flex; align-items: center; gap: 12px; flex: none; font-family: var(--font-display); font-size: 38px; line-height: .9; letter-spacing: -.02em; text-transform: uppercase; color: var(--blue); text-decoration: none; } .logo:hover { color: var(--blue); } .logo em { font-style: normal; color: var(--orange); } .logo .chip { font-size: 22px; line-height: 1; letter-spacing: .02em; color: var(--white); background: var(--blue); padding: 8px 12px 7px; } .tagline { flex-basis: 100%; margin: 9px 0 0; line-height: 1.2; font-family: var(--font-label); font-weight: 600; font-size: 14px; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-soft); } .mast__date { flex-basis: 100%; margin: 5px 0 0; font-family: var(--font-ui); font-size: 13px; color: var(--ink-soft); } @media (min-width: 47.5em) { .tagline { flex-basis: auto; margin: 0 0 0 26px; padding-left: 26px; border-left: 1px solid var(--rule); align-self: center; } .mast__date { flex-basis: auto; margin: 0 0 0 auto; } } .nav { border-top: 1px solid var(--rule); } .nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; } .nav li { margin: 0; } .nav a { display: inline-block; padding: 11px 20px 11px 0; margin-right: 4px; font-family: var(--font-label); font-weight: 700; font-size: 15px; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); text-decoration: none; border-bottom: 3px solid transparent; } .nav a:hover { color: var(--ink); } .nav a[aria-current="page"] { border-bottom-color: var(--blue); } /* ---- footer ------------------------------------------------------------------ */ .foot { border-top: 3px solid var(--blue); margin-top: 60px; padding-top: 20px; font-family: var(--font-ui); font-size: 13px; color: var(--ink-soft); line-height: 1.6; } .foot p { margin: 0 0 8px; } .foot b { color: var(--blue); } /* ---- the bar that says what the page is ------------------------------------- */ .checkbar { display: flex; align-items: center; flex-wrap: wrap; margin: 0 0 20px; border-top: 3px solid var(--blue); } .checkbar__tag { font-family: var(--font-label); font-weight: 800; font-size: 15px; letter-spacing: .16em; text-transform: uppercase; color: var(--white); background: var(--blue); padding: 9px 16px 8px; } .checkbar__src { font-family: var(--font-label); font-weight: 700; font-size: 18px; letter-spacing: .02em; color: var(--blue); padding: 8px 0 8px 16px; } .checkbar__src b { color: var(--ink); font-weight: 700; } .checkbar__when { font-family: var(--font-ui); font-size: 14px; color: var(--ink-soft); padding: 10px 0 8px 16px; } @media (min-width: 43.75em) { .checkbar__when { margin-left: auto; padding-left: 0; } } /* Compact version used on the home page and in lists. */ .homekick { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 10px; } .homekick__tag { color: var(--white); background: var(--blue); padding: 4px 10px 3px; } .homekick__tag--claim { background: var(--orange); } .homekick__src { font-family: var(--font-label); font-weight: 700; font-size: 15px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); } /* ---- verdict badge ------------------------------------------------------------- */ .verdict { display: flex; align-items: center; padding: 7px 15px 6px; font-family: var(--font-label); font-weight: 800; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--white); background: var(--ink-soft); white-space: nowrap; } .verdict--small { display: inline-flex; padding: 3px 8px 2px; font-size: 11.5px; vertical-align: middle; } .verdict--holds-up { background: var(--verdict-holds-up); } .verdict--undersold { background: var(--verdict-undersold); } .verdict--true-but-hollow { background: var(--verdict-true-but-hollow); } .verdict--overstated { background: var(--verdict-overstated); } .verdict--wrong { background: var(--verdict-wrong); } /* ---- article layout: copy + sidebar ------------------------------------------- */ .layout { display: grid; gap: 30px; align-items: start; margin-top: 26px; } @media (min-width: 56.25em) { .layout { grid-template-columns: 1fr 300px; gap: 46px; } } .block { margin-bottom: 34px; } .blocklabel { display: inline-block; margin: 0 0 14px; padding: 4px 12px 3px; line-height: 1.4; color: var(--white); background: var(--blue); } .block--truth { background: var(--paper-2); border-top: 3px solid var(--orange); padding: 22px 26px 6px; } .block--truth .blocklabel { background: var(--orange); } .block--truth p:last-child { margin-bottom: 16px; } .said { margin: 0; padding: 0 0 0 22px; border-left: 4px solid var(--blue); font-size: 23px; line-height: 1.45; font-style: italic; color: var(--blue-ink); } .said p { margin: 0; } .said-src { margin-top: 12px; font-family: var(--font-ui); font-style: normal; font-size: 14px; color: var(--ink-soft); } .said-src a { color: var(--blue); } /* the number — the single loudest thing on the page */ .rarity { border-top: 3px solid var(--blue); border-bottom: 1px solid var(--rule); padding: 18px 0 20px; margin-bottom: 26px; } .rarity__lab { margin: 0 0 2px; font-family: var(--font-label); font-weight: 700; font-size: 12px; letter-spacing: .17em; text-transform: uppercase; color: var(--ink-soft); } .rarity__num { margin: 0; font-family: var(--font-display); font-size: 56px; line-height: .95; letter-spacing: -.03em; color: var(--orange); } .rarity__sub { margin: 8px 0 0; font-family: var(--font-ui); font-size: 14.5px; color: var(--ink-soft); } .box { border: 1px solid var(--rule); background: var(--white); padding: 18px 20px; margin-bottom: 18px; } .box h3 { margin: 0 0 12px; padding-bottom: 9px; border-bottom: 1px solid var(--rule-2); color: var(--blue); } .box dl { margin: 0; font-family: var(--font-ui); font-size: 14.5px; } .box dt { color: var(--ink-soft); margin-top: 9px; } .box dt:first-child { margin-top: 0; } .box dd { margin: 1px 0 0; font-weight: 600; } .box dd a { color: var(--blue); text-decoration: none; } .box dd a:hover { text-decoration: underline; } .box p { margin: 0; font-family: var(--font-ui); font-size: 14.5px; line-height: 1.5; color: var(--ink-soft); } /* ---- prose (markdown bodies) -------------------------------------------------- */ .prose > :first-child { margin-top: 0; } .prose p, .prose ul, .prose ol, .prose blockquote, .prose pre, .prose table, .prose figure { margin: 0 0 15px; } .prose ul, .prose ol { padding-left: 1.3em; } .prose li { margin-bottom: .3em; } /* Body headings start at # in markdown; the build shifts them under the page's own headings (h2 in essays and pages, h3 inside claim-check blocks), so style the whole run. */ .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 { font-family: var(--font-label); font-weight: 700; line-height: 1.2; color: var(--blue); margin: 1.5em 0 .45em; } .prose h2 { font-size: 24px; } .prose h3 { font-size: 21px; } .prose h4 { font-size: 18px; } .prose h5, .prose h6 { font-size: 16px; letter-spacing: .04em; text-transform: uppercase; } .prose blockquote { margin-left: 0; padding-left: 22px; border-left: 4px solid var(--blue); font-style: italic; color: var(--blue-ink); } .prose code, .prose pre { font-family: var(--font-mono); font-size: .88em; } .prose code { background: var(--paper-2); padding: .1em .35em; } .prose pre { background: var(--paper-2); border: 1px solid var(--rule); padding: 14px 16px; overflow-x: auto; line-height: 1.5; } .prose pre code { background: none; padding: 0; } .prose hr { border: 0; border-top: 1px solid var(--rule); margin: 2em 0; } .prose em { font-style: italic; } /* ---- home ------------------------------------------------------------------------ */ .lede { display: grid; gap: 30px; align-items: start; } .lede__rail { border-top: 1px solid var(--rule); padding-top: 26px; } @media (min-width: 56.25em) { .lede { grid-template-columns: 1.55fr 1fr; gap: 44px; } .lede__rail { border-top: 0; padding-top: 0; border-left: 1px solid var(--rule); padding-left: 34px; } } .lede__title { margin: 8px 0 12px; font-family: var(--font-display); font-size: clamp(28px, 4vw, 42px); line-height: 1.04; letter-spacing: -.02em; color: var(--blue); } .lede__title a { color: inherit; text-decoration: none; } .lede__title a:hover { color: var(--ink); } .lede__main p { margin: 0 0 14px; } .lede__verdict { margin: 0 0 14px; } .rail-more { margin: 0 0 18px; font-family: var(--font-ui); font-size: 13px; } .rail-more a { text-decoration: none; } .rail-more a:hover { text-decoration: underline; } .nightly-panel { background: var(--blue); color: var(--white); padding: 22px 26px; margin-bottom: 14px; } .nightly-panel__lab { margin: 0 0 9px; color: var(--blue-soft); } .nightly-panel__score { margin: 0 0 12px; font-family: var(--font-display); font-size: 26px; line-height: 1.1; } .nightly-panel__score a { color: inherit; text-decoration: none; } .nightly-panel__score a:hover { text-decoration: underline; } .nightly-panel__find { margin: 0 0 14px; font-size: 1rem; line-height: 1.45; } .nightly-panel__find strong { font-weight: 600; } .nightly-panel__supp { border-top: 1px solid var(--blue-rule); padding-top: 13px; font-family: var(--font-ui); font-size: 14px; line-height: 1.5; color: var(--blue-text); } .nightly-panel__supp b { display: block; margin-bottom: 8px; color: var(--white); } .stack { list-style: none; margin: 0; padding: 0; } .stack li { border-bottom: 1px solid var(--rule-2); padding: 15px 0; } .stack li:last-child { border-bottom: 0; } .k { display: inline-block; padding: 3px 8px 2px; color: var(--white); background: var(--blue); } .k--claim { background: var(--orange); } .stack h3 { margin: 4px 0 0; font-family: var(--font-label); font-weight: 700; font-size: 20px; line-height: 1.2; color: var(--blue); } .stack h3 a { color: inherit; text-decoration: none; } .stack h3 a:hover { color: var(--ink); } .two { display: grid; gap: 30px; margin-top: 38px; border-top: 2px solid var(--blue); padding-top: 26px; } @media (min-width: 56.25em) { .two { grid-template-columns: 1fr 1fr; gap: 44px; } } .colhead { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 14px; padding-bottom: 9px; border-bottom: 1px solid var(--rule); color: var(--blue); } .colhead a { color: var(--blue); text-decoration: none; font-size: 11px; letter-spacing: .12em; } .colhead a:hover { text-decoration: underline; } .feat { border-bottom: 1px solid var(--rule-2); padding-bottom: 18px; margin-bottom: 16px; } .feat:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; } .feat h3 { margin: 8px 0 9px; font-family: var(--font-display); font-size: 25px; line-height: 1.08; letter-spacing: -.02em; color: var(--blue); } .feat h3 a { color: inherit; text-decoration: none; } .feat h3 a:hover { color: var(--ink); } .feat p { margin: 0; font-size: 1rem; color: var(--ink); } .col-empty { margin: 0; font-family: var(--font-ui); font-size: 14.5px; color: var(--ink-soft); } /* ---- archive: filter rail + rows ---------------------------------------------- */ .arch { display: grid; gap: 30px; align-items: start; margin-top: 26px; } @media (min-width: 56.25em) { .arch { grid-template-columns: 238px 1fr; gap: 42px; } .filters { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; } } .filters h2 { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 10px; padding-bottom: 8px; border-bottom: 2px solid var(--blue); color: var(--blue); } .fgroup { margin-bottom: 22px; } .fgroup summary { display: flex; align-items: center; margin-bottom: 7px; cursor: pointer; list-style: none; font-family: var(--font-label); font-weight: 700; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); } .fgroup summary::-webkit-details-marker { display: none; } .fgroup summary::after { content: "+"; margin-left: auto; font-size: 14px; } .fgroup[open] summary::after { content: "\2013"; } .fgroup ul { list-style: none; margin: 0; padding: 0; max-height: 17rem; overflow-y: auto; } .fgroup li { margin: 0; } .fopt { display: flex; align-items: center; gap: 9px; padding: 4px 0; cursor: pointer; font-family: var(--font-ui); font-size: 14.5px; } .fopt input { flex: none; width: 15px; height: 15px; margin: 0; accent-color: var(--blue); } .fopt .ct { margin-left: auto; font-size: 12.5px; color: var(--ink-soft); font-variant-numeric: tabular-nums; } .fopt:has(input:checked) { font-weight: 600; color: var(--blue); } .fgroup li.is-empty .fopt { opacity: .45; } .btn-link { background: none; border: 0; padding: 0; margin: 0; color: var(--blue); font: inherit; text-decoration: underline; cursor: pointer; } .btn-link:hover { color: var(--ink); } .filters h2 .btn-link { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; } .result { margin: 0 0 6px; padding-bottom: 10px; border-bottom: 1px solid var(--rule); font-family: var(--font-ui); font-size: 14px; color: var(--ink-soft); } .rows { list-style: none; margin: 0; padding: 0; } .row { display: grid; gap: 5px; padding: 17px 0; border-bottom: 1px solid var(--rule-2); } @media (min-width: 56.25em) { .row { grid-template-columns: 76px 1fr auto; gap: 20px; align-items: baseline; } } .row__date { font-family: var(--font-label); font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); } .row__title { margin: 0 0 5px; font-family: var(--font-label); font-weight: 700; font-size: 21px; line-height: 1.22; color: var(--blue); } .row__title a { color: inherit; text-decoration: none; } .row__title a:hover { color: var(--ink); } .row__dek { margin: 0; font-family: var(--font-ui); font-size: 14.5px; color: var(--ink-soft); } .row__n { font-family: var(--font-display); font-size: 19px; color: var(--orange); white-space: nowrap; } .filter-empty { margin: 16px 0 0; padding: 16px 20px; border: 1px dashed var(--rule); font-family: var(--font-ui); font-size: 14.5px; } /* ---- tables and the ledger ---------------------------------------------------- */ table { width: 100%; border-collapse: collapse; font-family: var(--font-ui); font-size: 15px; } th { padding: 10px 13px; text-align: left; color: var(--white); background: var(--blue); } td { padding: 12px 13px; border-bottom: 1px solid var(--rule-2); vertical-align: top; } .table-wrap { overflow-x: auto; margin: 0 -20px; padding: 0 20px; } @media (min-width: 48em) { .table-wrap { margin: 0; padding: 0; } } .ledger-table { min-width: 40rem; } .ledger-table .col-date { width: 118px; } .ledger-table .col-family { width: 130px; } .ledger-table .col-score { width: 74px; } .ledger-table .col-status { width: 110px; } .ledger-table th button.sort { all: unset; cursor: pointer; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; } .ledger-table th button.sort:hover { color: var(--blue-soft); } .ledger-table th button.sort:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; } .ledger-table th[aria-sort="ascending"] button.sort::after { content: " \25B2"; font-size: .8em; } .ledger-table th[aria-sort="descending"] button.sort::after { content: " \25BC"; font-size: .8em; } .ledger-table td.date { white-space: nowrap; } .ledger-table td.sc { font-family: var(--font-display); font-size: 17px; color: var(--orange); font-variant-numeric: tabular-nums; } .ledger-table tr.is-withheld td { background: var(--paper-2); color: var(--ink-soft); } .ledger-table tr.is-withheld td.sc { color: var(--ink-soft); } .ledger-table .reason { display: block; margin-top: 3px; font-style: normal; font-size: 13.5px; color: var(--ink-soft); } .note { margin: 36px 0; padding: 20px 24px; background: var(--white); border: 1px solid var(--rule); border-left: 4px solid var(--blue); font-family: var(--font-ui); font-size: 15.5px; } .note p { margin: 0 0 10px; } .note p:last-child { margin-bottom: 0; } .note b, .note strong { color: var(--blue); font-weight: 700; } /* ---- newsletter: a plain form that posts to the provider; nothing touches this site ---- */ .signup { border-top: 3px solid var(--blue); border-bottom: 1px solid var(--rule); background: var(--paper-2); padding: 26px 30px; margin: 44px 0; } .signup h2 { margin: 0 0 7px; font-family: var(--font-display); font-size: 23px; line-height: 1.15; color: var(--blue); max-width: 24ch; } .signup p { margin: 0 0 16px; font-family: var(--font-ui); font-size: 15px; color: var(--ink-soft); max-width: 56ch; } .signup form { display: flex; flex-wrap: wrap; gap: 9px; align-items: stretch; } .signup input[type="email"] { flex: 1; min-width: 230px; padding: 12px 14px; font-family: var(--font-ui); font-size: 16px; color: var(--ink); border: 1px solid var(--rule); background: var(--white); } .signup input[type="email"]:focus { outline: 2px solid var(--blue); outline-offset: -1px; border-color: var(--blue); } .signup button { padding: 12px 26px; border: 0; cursor: pointer; font-family: var(--font-label); font-weight: 800; font-size: 15px; letter-spacing: .12em; text-transform: uppercase; color: var(--white); background: var(--orange); } .signup button:hover { background: var(--orange-deep); } .signup .fine { margin: 12px 0 0; font-size: 12.5px; } .signup .hp { position: absolute; left: -9999px; } /* honeypot: off-screen, empty for humans */ /* ---- static pages (About, Method) ------------------------------------------------ */ .about { display: grid; gap: 30px; align-items: start; margin-top: 28px; } @media (min-width: 56.25em) { .about--aside { grid-template-columns: 1fr 290px; gap: 46px; } } .cred { border: 1px solid var(--rule); background: var(--white); padding: 20px 22px; } .cred h3 { margin: 0 0 12px; padding-bottom: 9px; border-bottom: 1px solid var(--rule-2); color: var(--blue); } .cred ul { margin: 0; padding-left: 17px; font-family: var(--font-ui); font-size: 14.5px; line-height: 1.55; } .cred li { margin-bottom: 7px; } .cred__more { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--rule-2); font-family: var(--font-ui); font-size: 14px; } .standfirst{font-family:'Source Serif 4',Georgia,serif;font-size:clamp(18px,2.2vw,22px); line-height:1.45;color:var(--ink-soft,#575D69);margin:14px 0 22px;max-width:62ch;} /* ---- Article banner. Drawn from front matter; see the banner() macro in macros.html. ---- */ .banner{position:relative;overflow:hidden;margin:0 0 30px;padding:20px 24px 18px; border-top:9px solid var(--navy,#002D72);background-color:var(--paper,#FBFAF7); background-image:repeating-linear-gradient(to bottom,transparent 0 33px,var(--rule-faint,#E3DFD5) 33px 34px);} .banner__head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap; border-bottom:2px solid var(--navy,#002D72);padding-bottom:9px;} .banner__mark{font-family:'Archivo Black',sans-serif;font-size:21px;color:var(--navy,#002D72);} .banner__chip{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:13px;letter-spacing:.16em; color:var(--paper,#FBFAF7);background:var(--orange,#FF5910);padding:4px 9px 2px;text-transform:uppercase;} .banner__kick{margin-left:auto;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:13px; letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft,#575D69);} .banner__grid{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:26px;padding:4px 0;} .banner__num{display:flex;align-items:baseline;gap:14px;margin:0;} .banner__big{font-family:'Archivo Black',sans-serif;font-size:clamp(62px,13vw,132px);line-height:.78; color:var(--navy,#002D72);} .banner__rest{display:flex;flex-direction:column;gap:5px;} .banner__small{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:clamp(22px,4vw,34px); line-height:.9;letter-spacing:.04em;color:var(--ink,#15181D);} .banner__lab{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:11.5px;letter-spacing:.18em; text-transform:uppercase;color:var(--orange-deep,#D1430A);max-width:22ch;line-height:1.25;} .banner__art{width:auto;max-width:300px;} .banner__art svg{display:block;height:clamp(110px,16vw,170px);width:auto;max-width:100%;} .banner__dek{margin:0;border-top:1px solid var(--rule,#CFC9BC);padding-top:12px; font-family:'Source Serif 4',Georgia,serif;font-size:clamp(16px,2vw,19px);line-height:1.4;color:var(--ink,#15181D);} .banner__tally{display:flex;flex-wrap:wrap;align-items:flex-end;gap:7px 6px;} .banner__tally i{display:block;width:3px;height:24px;background:var(--rule,#CFC9BC);} .banner__tally i.on{width:5px;height:33px;background:var(--orange,#FF5910);} .banner__tallylab{display:block;margin-top:9px;font-family:'Barlow Condensed',sans-serif;font-weight:700; font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft,#575D69);} @media (max-width:640px){ .banner__grid{grid-template-columns:1fr;gap:14px;} .banner__art{width:auto;} .banner__kick{margin-left:0;width:100%;} } .banner svg,.banner img{max-width:100%;} .banner__tally i{height:20px;} .banner--compact{margin-bottom:22px;padding:14px 16px 12px;} .banner--compact .banner__big{font-size:clamp(48px,7vw,78px);} .banner--compact .banner__small{font-size:clamp(18px,2.4vw,24px);} .banner--compact .banner__art svg{height:clamp(84px,9vw,116px);} .lede__rail .nightly-panel__supp{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical; overflow:hidden;} .banner__note{margin:0;font-family:'Source Serif 4',Georgia,serif;font-size:clamp(14px,1.5vw,16.5px); line-height:1.45;color:var(--ink-soft,#575D69);max-width:46ch;} .banner--compact .banner__note{display:none;} @media (max-width:640px){.banner__grid{grid-template-columns:1fr;}.banner__note{max-width:none;}} .banner__art{grid-column:3;justify-self:end;} @media (max-width:640px){.banner__art{grid-column:auto;justify-self:start;}} @media (min-width:900px){ article > header{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,0.85fr); column-gap:36px;align-items:start;} article > header > .checkbar{grid-column:1/-1;} article > header > :not(.checkbar):not(.banner){grid-column:1;} article > header > .banner{grid-column:2;grid-row:2 / span 3;align-self:start;margin:0;} article > header > .banner .banner__grid{grid-template-columns:1fr;gap:16px;} article > header > .banner .banner__art{grid-column:auto;justify-self:start;} article > header > .banner .banner__note{max-width:none;} } @media (min-width:900px){article > header > .banner{border-top:0;padding-top:0;}}