/*
Theme Name: Between the Bills
Theme URI: https://betweenthebills.com
Author: Between the Bills
Author URI: https://betweenthebills.com
Description: Editorial theme for Between the Bills, an independent publication covering federal legislation. Every review sits on its bill's route through Congress: a lead story drawn on that route, an editorial front page, a reading layout with a section rail, a searchable archive, live read counts, newsletter sign-up and contact form.
Version: 7.5.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: between-the-bills
Tags: news, blog, custom-menu, featured-images, threaded-comments, translation-ready, widgets
*/

/* =============================================================
   Contents
   1. Fonts and tokens
   2. Base and browser surfaces
   3. Shared pieces: meta, headings, links, buttons, forms, photos
   4. Masthead and navigation
   5. Front page
   6. Pages, archives, search
   7. Article
   8. Authors and contact
   9. Newsletter, footer, back to top
   10. WordPress and plugin output
   11. Motion
   12. Responsive
   13. Print and reduced motion

   The world: a paper ground and ink type, a graphite chamber for the
   official record, ultramarine for action and distance travelled, civic
   yellow for the current station. Libre Caslon Display sets headlines,
   Source Serif 4 the reading, Schibsted Grotesk labels and numbers.
   Square corners; ink rules are structural, never ornament.
============================================================= */

/* 1. Fonts and tokens
------------------------------------------------------------- */
@font-face {
	font-family: "Libre Caslon Display";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/libre-caslon-display-latin-400-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Libre Caslon Display";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/libre-caslon-display-latin-ext-400-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Source Serif 4";
	font-style: normal;
	font-weight: 200 900;
	font-display: swap;
	src: url("fonts/source-serif-4-latin-opsz-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Source Serif 4";
	font-style: normal;
	font-weight: 200 900;
	font-display: swap;
	src: url("fonts/source-serif-4-latin-ext-opsz-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Source Serif 4";
	font-style: italic;
	font-weight: 200 900;
	font-display: swap;
	src: url("fonts/source-serif-4-latin-opsz-italic.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Schibsted Grotesk";
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url("fonts/schibsted-grotesk-latin-wght-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Schibsted Grotesk";
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url("fonts/schibsted-grotesk-latin-ext-wght-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Schibsted Grotesk";
	font-style: italic;
	font-weight: 400 900;
	font-display: swap;
	src: url("fonts/schibsted-grotesk-latin-wght-italic.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	/* Ground and ink */
	--paper: #FCFCFA;
	--paper-2: #F1F1EB;
	--ink: #101114;
	--ink-2: #393B41;
	--muted: #5B5E66;
	--rule: #DCDCD5;
	--line: #85888F;          /* field borders: 3:1 against paper */

	/* The chamber: graphite field for the official record */
	--graphite: #121317;
	--graphite-2: #1B1C22;
	--g-rule: #30323A;
	--on-g: #F2F2EE;
	--on-g-2: #B0B2BA;

	/* Accents */
	--blue: #2B44FF;          /* action, distance travelled */
	--blue-deep: #1C30D4;
	--blue-light: #A3ADFF;    /* the same accent on graphite */
	--yellow: #FFC21A;        /* the current station; never text on paper */

	--blue-tint: #E3E7FF;     /* Tools hover and yea chips */
	--white: #FFFFFF;         /* text and fields on ultramarine */
	--g-line: #6E717A;        /* lines and nay bars inside graphite: 3.8:1 */

	/* Status: form results and recorded votes */
	--ok: #1B6537;
	--ok-wash: #EEF7F1;
	--err: #A11C12;
	--err-wash: #FCEFEE;

	/* Surfaces that keep their meaning in either theme */
	--blue-fill: #2B44FF;     /* ultramarine behind white text */
	--on-yellow: #101114;     /* text and rings on civic yellow */
	--field: #FFFFFF;         /* form fields */
	--nav-bg: rgba(252, 252, 250, .94);
	--newsletter: #2B44FF;
	--logo-filter: none;
	--chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23101114' stroke-width='1.8'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	color-scheme: light;

	--display: "Libre Caslon Display", "Libre Caslon Text", "Times New Roman", serif;
	--serif: "Source Serif 4", Georgia, "Times New Roman", serif;
	--sans: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
	--mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

	--wrap: 1280px;
	--gutter: clamp(20px, 3.2vw, 44px);
	--measure: 680px;
	--radius: 0;
	--ease-out: cubic-bezier(.16, 1, .3, 1);
	--ease-in-out: cubic-bezier(.65, 0, .35, 1);
	--nav-h: 52px;

	/* Names kept for the Legislative Tracker plugin */
	--navy: var(--blue);
	--navy-deep: var(--blue-deep);
	--parchment: var(--paper-2);
	--gold: var(--yellow);
	--gold-ink: var(--ink);
	--ink-soft: var(--ink-2);
	--rule-dark: var(--line);
}

/* Dark theme: the reader's system setting, or the toggle in the masthead.
   A low-glare ink-blue ground, warm off-white type, and the same accents
   lifted for contrast; the chamber sinks a step darker than the page. */
:root[data-theme="dark"] {
	--paper: #131418;
	--paper-2: #1C1D23;
	--ink: #ECEBE6;
	--ink-2: #C5C6CC;
	--muted: #9B9EA7;
	--rule: #2C2E36;
	--line: #767983;
	--graphite: #0B0C0F;
	--graphite-2: #15161B;
	--g-rule: #272930;
	--blue: #93A0FF;
	--blue-deep: #BAC2FF;
	--blue-tint: #20264D;
	--ok: #7DD3A0;
	--ok-wash: #12261A;
	--err: #FF948A;
	--err-wash: #2C1513;
	--field: #1A1B21;
	--nav-bg: rgba(19, 20, 24, .92);
	--newsletter: #1D2BA6;
	--logo-filter: invert(1) hue-rotate(180deg) brightness(.92);
	--chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ECEBE6' stroke-width='1.8'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--paper: #131418;
		--paper-2: #1C1D23;
		--ink: #ECEBE6;
		--ink-2: #C5C6CC;
		--muted: #9B9EA7;
		--rule: #2C2E36;
		--line: #767983;
		--graphite: #0B0C0F;
		--graphite-2: #15161B;
		--g-rule: #272930;
		--blue: #93A0FF;
		--blue-deep: #BAC2FF;
		--blue-tint: #20264D;
		--ok: #7DD3A0;
		--ok-wash: #12261A;
		--err: #FF948A;
		--err-wash: #2C1513;
		--field: #1A1B21;
		--nav-bg: rgba(19, 20, 24, .92);
		--newsletter: #1D2BA6;
		--logo-filter: invert(1) hue-rotate(180deg) brightness(.92);
		--chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ECEBE6' stroke-width='1.8'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
		color-scheme: dark;
	}
}

/* 2. Base and browser surfaces
------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-top: calc(var(--nav-h) + 24px);
	background: var(--paper);
	scrollbar-color: var(--ink-2) var(--paper-2);
	scrollbar-width: thin;
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--serif);
	font-size: 18px;
	line-height: 1.55;
	font-optical-sizing: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	caret-color: var(--blue);
	overflow-x: clip;
}

::selection { background: var(--yellow); color: var(--on-yellow); }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--paper-2); }
::-webkit-scrollbar-thumb { background: var(--ink-2); border: 3px solid var(--paper-2); }
::-webkit-scrollbar-thumb:hover { background: var(--ink); }

[hidden] { display: none !important; }

img, video, iframe { max-width: 100%; }
img { height: auto; display: block; }
svg.icon { width: 1.1em; height: 1.1em; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: square; stroke-linejoin: miter; }

a {
	color: var(--blue);
	text-decoration-line: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .2em;
	transition: color .2s ease, text-decoration-thickness .2s ease;
}
a:hover { color: var(--blue-deep); text-decoration-thickness: 2px; }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

h1, h2, h3, h4, h5, h6 { font-family: var(--display); font-weight: 400; line-height: 1.08; margin: 0; color: var(--ink); text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; }
button { font: inherit; color: inherit; }

.wrap {
	width: 100%;
	max-width: calc(var(--wrap) + var(--gutter) * 2);
	margin: 0 auto;
	padding: 0 var(--gutter);
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.skip-link:focus {
	position: fixed !important;
	top: 8px; left: 8px;
	width: auto; height: auto;
	clip: auto;
	z-index: 1000;
	padding: 12px 18px;
	background: var(--ink);
	color: var(--paper);
	font: 600 15px/1 var(--sans);
}
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

/* 3. Shared pieces
------------------------------------------------------------- */
.meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 0;
	margin: 12px 0 0;
	font: 400 13.5px/1.45 var(--sans);
	color: var(--muted);
}
.meta > * + *::before { content: ""; display: inline-block; width: 3px; height: 3px; margin: 0 .65em; background: currentColor; opacity: .55; vertical-align: .2em; }
.meta strong { font-weight: 600; color: var(--ink-2); }
.meta-section { font-weight: 600; color: var(--ink); text-decoration: none; }
a.meta-section:hover { color: var(--blue); text-decoration: underline; text-decoration-thickness: 1px; }
.meta-byline { display: inline-flex; align-items: center; gap: 10px; color: var(--ink-2); }

/* Section heads: a display title on a structural ink rule */
.section-head {
	position: relative;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px 24px;
	flex-wrap: wrap;
	margin-bottom: 36px;
	padding-top: 18px;
	border-top: 1px solid var(--ink);
}
.section-title {
	font-size: clamp(34px, 3.8vw, 54px);
	line-height: 1;
	letter-spacing: -.02em;
}
.section-label,
.rail-title {
	font: 400 28px/1.1 var(--display);
	letter-spacing: -.01em;
	color: var(--ink);
}
.section-more,
.link-action {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	font: 600 15px/1.2 var(--sans);
	color: var(--blue);
	text-decoration: none;
	white-space: nowrap;
}
.section-more .icon,
.link-action .icon { transition: translate .45s var(--ease-out); }
.section-more:hover,
.link-action:hover { color: var(--blue-deep); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; }
.section-more:hover .icon,
.link-action:hover .icon { translate: 4px 0; }
.link-action .icon-bell { width: 1.15em; height: 1.15em; }
.link-action:hover .icon-bell { translate: 0 0; animation: btb-ring .6s var(--ease-out); }
@keyframes btb-ring { 20% { rotate: 14deg; } 45% { rotate: -10deg; } 70% { rotate: 5deg; } }

/* Headline links: ink with an underline that draws on hover */
.hero-title a,
.feature-title a,
.column-title a,
.index-title,
.rank-title,
.archive-row-title a,
.team-name a {
	color: inherit;
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0% 1px;
	transition: background-size .6s var(--ease-out), color .25s ease;
}
.hero-title a { background-size: 0% 2px; }
.hero-title a:hover,
.feature-title a:hover,
.column-title a:hover,
.index-title:hover,
.rank-title:hover,
.archive-row-title a:hover,
.team-name a:hover { background-size: 100% 1px; color: var(--ink); }
.hero-title a:hover { background-size: 100% 2px; }
.hero-title a:focus-visible,
.feature-title a:focus-visible,
.column-title a:focus-visible,
.archive-row-title a:focus-visible { background-size: 100% 1px; }

/* Buttons */
.button,
.wp-block-button__link,
input[type="submit"],
.comment-form .submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	padding: 0 22px;
	border: 1px solid var(--ink);
	border-radius: 0;
	background: var(--ink);
	color: var(--paper);
	font: 600 15px/1 var(--sans);
	text-decoration: none;
	cursor: pointer;
	transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
.button .icon { transition: translate .45s var(--ease-out); }
.button:hover,
.wp-block-button__link:hover,
input[type="submit"]:hover,
.comment-form .submit:hover { background: var(--blue-fill); border-color: var(--blue-fill); color: var(--white); text-decoration: none; }
.button:hover .icon { translate: 4px 0; }
.button:active { translate: 0 1px; }
.button-outline { background: transparent; color: var(--ink); }
.button-outline:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.button-signal { background: var(--yellow); border-color: var(--yellow); color: var(--on-yellow); }
.button-signal:hover { background: var(--white); border-color: var(--white); color: var(--on-yellow); }
.button[disabled],
.button:disabled { opacity: .45; cursor: not-allowed; }

.link-button {
	padding: 0;
	border: 0;
	background: none;
	color: var(--blue);
	font: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .2em;
	cursor: pointer;
}
.link-button:hover { color: var(--blue-deep); text-decoration-thickness: 2px; }

/* Forms */
label { font: 600 13.5px/1.3 var(--sans); color: var(--ink); }
input[type="text"],
input[type="email"],
input[type="search"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="password"],
select,
textarea {
	width: 100%;
	min-height: 48px;
	padding: 10px 14px;
	border: 1px solid var(--line);
	border-radius: 0;
	background: var(--field);
	color: var(--ink);
	font: 400 16px/1.4 var(--sans);
	transition: border-color .2s ease, box-shadow .2s ease;
	-webkit-appearance: none;
	appearance: none;
}
select {
	padding-right: 40px;
	background-image: var(--chevron);
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 18px;
}
textarea { min-height: 160px; resize: vertical; }
input::placeholder,
textarea::placeholder { color: var(--muted); opacity: 1; }
input:hover,
select:hover,
textarea:hover { border-color: var(--ink-2); }
input:focus-visible,
select:focus-visible,
textarea:focus-visible { outline: 2px solid var(--blue); outline-offset: 0; border-color: var(--blue); }

.field { display: grid; gap: 8px; }
.field + .field,
.field-row + .field,
.field + .field-row { margin-top: 18px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field-row > .field { margin-top: 0; }

.form-message {
	margin-bottom: 18px;
	padding: 14px 16px;
	border: 1px solid currentColor;
	font: 500 15px/1.45 var(--sans);
}
.form-message.is-success { color: var(--ok); background: var(--ok-wash); }
.form-message.is-error { color: var(--err); background: var(--err-wash); }

/* Photos with initials beneath, for missing or slow images */
.team-photo,
.byline-photo,
.author-intro-photo,
.face {
	position: relative;
	display: block;
	overflow: hidden;
	flex: 0 0 auto;
	background: var(--paper-2);
}
.team-photo::before,
.byline-photo::before,
.author-intro-photo::before,
.face::before {
	content: attr(data-initials);
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font: 400 1em/1 var(--display);
	color: var(--muted);
}
.team-photo img,
.byline-photo img,
.author-intro-photo img,
.face img { position: relative; width: 100%; height: 100%; object-fit: cover; }

.faces { display: inline-flex; }
.face { width: 30px; height: 30px; border-radius: 50%; font-size: 12px; box-shadow: 0 0 0 2px var(--paper); }
.face + .face { margin-left: -9px; }

/* 4. Masthead and navigation
------------------------------------------------------------- */
.masthead { position: relative; z-index: 60; background: var(--paper); }
.masthead-bar {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 38px;
	font: 400 13px/1.3 var(--sans);
	color: var(--muted);
}
.masthead-bar::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 100vw; height: 1px; background: var(--rule); translate: -50% 0; }
.masthead-edition { display: flex; flex-wrap: wrap; gap: 0; }
.masthead-edition > * + *::before { content: ""; display: inline-block; width: 3px; height: 3px; margin: 0 .7em; background: currentColor; opacity: .6; vertical-align: .22em; }
.masthead-edition time { color: var(--ink-2); }
.masthead-actions { display: flex; align-items: center; gap: 18px; }
.masthead-subscribe {
	font: 600 13.5px/1 var(--sans);
	color: var(--ink);
	text-decoration: none;
	padding: 9px 2px;
	background-image: linear-gradient(var(--yellow), var(--yellow));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 100% 3px;
	transition: background-size .35s var(--ease-out);
}
.masthead-subscribe:hover { color: var(--on-yellow); background-size: 100% 100%; text-decoration: none; }

.theme-toggle {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 32px;
	padding: 0 2px;
	border: 0;
	background: none;
	color: var(--ink-2);
	font: 500 13px/1 var(--sans);
	cursor: pointer;
	transition: color .2s ease;
}
.theme-toggle .icon { width: 17px; height: 17px; stroke-width: 1.6; transition: rotate .6s var(--ease-out); }
.theme-toggle:hover { color: var(--ink); }
.theme-toggle:hover .icon { rotate: -20deg; }
.theme-toggle .icon-sun,
.theme-toggle[data-mode="dark"] .icon-moon { display: none; }
.theme-toggle[data-mode="dark"] .icon-sun { display: block; }
/* The cross-fade carries the change; nothing else should lag behind it */
.is-theming *,
.is-theming *::before,
.is-theming *::after { transition: none !important; }
/* The theme switch cross-fades the whole page, briefly */
.is-theming::view-transition-old(root),
.is-theming::view-transition-new(root) { animation-duration: .35s; animation-timing-function: ease; animation-name: btb-fade-out; }
.is-theming::view-transition-new(root) { animation-name: btb-fade; }

.masthead-language { display: flex; align-items: center; }
.masthead-language .gtranslate_wrapper { display: flex; align-items: center; }
.masthead-language select,
.masthead-language .gt_selector {
	width: auto !important;
	max-width: 150px;
	min-height: 32px !important;
	height: 32px !important;
	margin: 0 !important;
	padding: 0 28px 0 8px !important;
	border: 1px solid var(--rule) !important;
	border-radius: 0 !important;
	background-color: transparent !important;
	background-position: right 6px center !important;
	background-size: 14px !important;
	color: var(--ink-2) !important;
	font: 500 13px/1 var(--sans) !important;
	box-shadow: none !important;
}

.masthead-main {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas: "brand lookup" "tagline lookup";
	align-items: end;
	gap: 6px 40px;
	padding-top: 22px;
	padding-bottom: 22px;
}
.masthead-brand { grid-area: brand; display: flex; align-items: center; gap: 14px; min-width: 0; }
.masthead-logo { display: block; flex: 0 0 auto; }
.masthead-logo img,
.masthead-logo .custom-logo { width: auto; height: 46px; filter: var(--logo-filter); }
.masthead-title {
	font: 400 clamp(30px, 3.4vw, 42px)/1 var(--display);
	letter-spacing: -.015em;
	white-space: nowrap;
}
.masthead-title a { color: var(--ink); text-decoration: none; }
.masthead-tagline {
	grid-area: tagline;
	font: italic 400 15.5px/1.35 var(--serif);
	color: var(--ink-2);
}
.masthead.is-front .masthead-main { padding-top: 20px; padding-bottom: 18px; }
.masthead.is-front .masthead-logo img,
.masthead.is-front .masthead-logo .custom-logo { height: clamp(48px, 4.6vw, 64px); }
.masthead.is-front .masthead-title { font-size: clamp(42px, 5.2vw, 74px); letter-spacing: -.025em; }
.masthead.is-front .masthead-tagline { font-size: 17px; }

.masthead-lookup { grid-area: lookup; display: grid; gap: 7px; width: min(360px, 34vw); }
.masthead-lookup label { font: 600 13px/1 var(--sans); }
.masthead-lookup-field { display: flex; }
.masthead-lookup input,
.hero-lookup input {
	min-height: 46px;
	border-color: var(--ink);
	border-right: 0;
	font-size: 15px;
}
.masthead-lookup button,
.hero-lookup button {
	display: grid;
	place-items: center;
	width: 50px;
	min-height: 46px;
	border: 1px solid var(--ink);
	background: var(--ink);
	color: var(--paper);
	cursor: pointer;
	transition: background-color .25s ease, border-color .25s ease;
}
.masthead-lookup button .icon,
.hero-lookup button .icon { width: 20px; height: 20px; transition: translate .45s var(--ease-out); }
.masthead-lookup button:hover { background: var(--blue-fill); border-color: var(--blue-fill); }
.masthead-lookup button:hover .icon { translate: 3px 0; }

.masthead-sentinel { height: 1px; }

/* Section bar: sticks once the masthead scrolls away */
.site-nav {
	position: sticky;
	top: 0;
	z-index: 80;
	border-top: 1px solid var(--ink);
	border-bottom: 1px solid var(--rule);
	/* Opaque on purpose: a backdrop blur on a sticky bar re-renders everything
	   scrolling beneath it on every frame. */
	background: var(--paper);
	transition: border-color .3s ease;
}
body.admin-bar .site-nav { top: 32px; }
.site-nav-inner { display: flex; align-items: center; gap: 28px; min-height: var(--nav-h); }
.site-nav-brand {
	display: none;
	font: 400 22px/1 var(--display);
	letter-spacing: -.01em;
	color: var(--ink);
	text-decoration: none;
	white-space: nowrap;
}
.site-nav.is-stuck .site-nav-brand { display: block; animation: btb-slide-in .5s var(--ease-out) both; }
@keyframes btb-slide-in { from { opacity: 0; translate: -10px 0; } }
.site-nav-list {
	display: flex;
	align-items: center;
	gap: clamp(18px, 2.4vw, 34px);
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scrollbar-width: none;
}
.site-nav-list::-webkit-scrollbar { display: none; }
.site-nav-list a {
	position: relative;
	display: block;
	padding: 15px 0 14px;
	font: 600 14.5px/1.2 var(--sans);
	color: var(--ink);
	text-decoration: none;
	white-space: nowrap;
}
.site-nav-list a::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 8px;
	height: 2px;
	background: var(--ink);
	transform: scaleX(0);
	transform-origin: 100% 50%;
	transition: transform .45s var(--ease-out);
}
.site-nav-list a:hover::after { transform: scaleX(1); transform-origin: 0 50%; }
.site-nav-list .current-menu-item > a::after,
.site-nav-list a[aria-current="page"]::after { height: 4px; bottom: 7px; background: var(--yellow); transform: scaleX(1); }
.site-nav-subscribe {
	display: none;
	margin-left: auto;
	padding: 8px 14px;
	background: var(--yellow);
	color: var(--on-yellow);
	font: 600 13.5px/1 var(--sans);
	text-decoration: none;
	white-space: nowrap;
}
.site-nav-subscribe:hover { background: var(--ink); color: var(--paper); text-decoration: none; }
.site-nav.is-stuck .site-nav-subscribe { display: block; animation: btb-slide-in .5s var(--ease-out) both; }

.reading-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; }
.reading-progress span { display: block; height: 100%; background: var(--blue); transform: scaleX(0); transform-origin: 0 50%; }

/* 5. Front page
------------------------------------------------------------- */
.front-empty { padding: 120px 0; font: 400 18px/1.5 var(--sans); color: var(--muted); }

/* Hero: the lead review on its bill's route */
.hero { padding: clamp(24px, 2.6vw, 40px) 0 0; }
.hero-grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 0 clamp(20px, 2.6vw, 40px);
	align-items: stretch;
}
.hero-copy { grid-column: 1 / span 9; display: flex; flex-direction: column; padding-bottom: clamp(22px, 2.4vw, 32px); }
.hero-title {
	font-size: clamp(44px, 5.8vw, 86px);
	line-height: .98;
	letter-spacing: -.024em;
	text-wrap: pretty;
}
.hero-dek {
	max-width: 52ch;
	margin-top: clamp(16px, 1.6vw, 22px);
	font: 400 clamp(18px, 1.45vw, 21px)/1.45 var(--serif);
	color: var(--ink-2);
}
.hero-meta { margin-top: 18px; }
/* The image takes the height of the copy beside it and ends on the route rule */
.hero-media {
	grid-column: 10 / span 3;
	position: relative;
	display: block;
	overflow: hidden;
	min-height: 300px;
	background: var(--paper-2);
}
.hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; scale: 1.06; }
.hero-foot {
	position: relative;
	padding-top: 20px;
	background: linear-gradient(var(--ink), var(--ink)) no-repeat var(--gutter) 0 / calc(100% - var(--gutter) * 2) 1px;
}
.hero-foot > .btbt-route .btbt-route-latest { padding-right: 440px; min-height: 64px; }
.hero-foot.has-route .hero-actions { position: absolute; right: var(--gutter); bottom: 0; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px 26px; }
.hero-foot:not(.has-route) .hero-actions { justify-content: flex-start; }
.hero-lookup { display: none; gap: 7px; margin-top: 22px; }
.hero-lookup label { font: 600 13px/1 var(--sans); }

.flag-new {
	display: inline-flex;
	align-items: center;
	padding: 4px 7px;
	background: var(--yellow);
	color: var(--on-yellow);
	font: 700 11.5px/1 var(--sans);
	letter-spacing: .04em;
}
.meta > .flag-new::before { display: none; }
.meta > .flag-new { margin-left: 12px; }

/* Latest reviews: the newest review after the lead as a large feature,
   the next few stacked beside it, then a ruled list beside Most read. */
.latest { padding: clamp(64px, 7vw, 104px) 0 clamp(56px, 6vw, 88px); }
.latest-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.latest-top.has-stack { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 0; }
.latest-top.has-stack .feature { padding-right: clamp(24px, 3vw, 48px); }
.feature {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 0 clamp(20px, 2.6vw, 40px);
	align-items: end;
}
.feature-media {
	grid-column: 1 / span 7;
	grid-row: 1;
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 3 / 2;
	background: var(--paper-2);
}
.feature-copy { grid-column: 7 / span 6; grid-row: 1; align-self: center; position: relative; z-index: 1; padding: 30px 0 30px clamp(20px, 2.4vw, 36px); background: var(--paper); }
.has-stack .feature { display: block; }
.has-stack .feature-media { aspect-ratio: 2 / 1; }
.has-stack .feature-copy { padding: 22px 0 0; background: none; }
.has-stack .feature-title { font-size: clamp(32px, 3.3vw, 50px); }
.feature-media img,
.archive-row-image img { width: 100%; height: 100%; object-fit: cover; transition: scale 1.2s var(--ease-out), filter .6s ease; }
.feature-title {
	font-size: clamp(34px, 3.9vw, 58px);
	line-height: 1.02;
	letter-spacing: -.02em;
}
.feature-dek { max-width: 52ch; margin-top: 16px; font: 400 18.5px/1.5 var(--serif); color: var(--ink-2); }
.has-stack .feature-dek { font-size: 17.5px; }
.feature .btbt-route-mini { margin-top: 16px; }

/* Also new: compact cards down the right of the feature */
.latest-stack { padding-left: clamp(24px, 3vw, 48px); border-left: 1px solid var(--rule); }
.stack-head { font: 400 28px/1.1 var(--display); letter-spacing: -.01em; color: var(--ink); }
.stack-list { margin: 14px 0 0; padding: 0; list-style: none; }
.stack-item { border-top: 1px solid var(--rule); }
.stack-link {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 92px;
	gap: 16px;
	align-items: start;
	padding: 16px 0;
	color: inherit;
	text-decoration: none;
}
.stack-copy { display: grid; gap: 6px; min-width: 0; }
.stack-kicker { font: 650 11.5px/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--blue); }
.stack-title {
	font: 600 17px/1.28 var(--serif);
	color: var(--ink);
	text-wrap: pretty;
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0% 1px;
	transition: background-size .6s var(--ease-out);
}
.stack-link:hover .stack-title,
.stack-link:focus-visible .stack-title { background-size: 100% 1px; }
.stack-date { font: 400 12.5px/1.3 var(--sans); color: var(--muted); }
.stack-media { display: block; aspect-ratio: 1; overflow: hidden; background: var(--paper-2); }
.stack-media img { width: 100%; height: 100%; object-fit: cover; transition: scale 1s var(--ease-out); }
.stack-link:hover .stack-media img { scale: 1.06; }

.latest-body {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 48px;
	margin-top: clamp(48px, 5vw, 72px);
	padding-top: 28px;
	border-top: 1px solid var(--ink);
}
.latest-body.has-rail { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 0; }
.latest-body.has-rail .latest-main { padding-right: clamp(24px, 3vw, 48px); }
.latest-body.is-rail-only { grid-template-columns: minmax(0, 1fr); }
.is-rail-only .most-read { padding-left: 0; border-left: 0; }
.is-rail-only .rank-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 clamp(24px, 3vw, 40px); }

.wide-story {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 16px clamp(20px, 2.6vw, 40px);
	padding-bottom: 28px;
}
.wide-title { font-size: clamp(28px, 2.6vw, 38px); line-height: 1.05; letter-spacing: -.016em; }
.wide-title a { color: inherit; text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 1px; transition: background-size .6s var(--ease-out); }
.wide-title a:hover,
.wide-title a:focus-visible { background-size: 100% 1px; }
.wide-dek { font: 400 17px/1.5 var(--serif); color: var(--ink-2); }
.wide-copy .meta { margin-top: 10px; }
.wide-story .btbt-route-mini { margin-top: 14px; }

.index-list { margin: 0; padding: 0; list-style: none; }
.index-item {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr) auto;
	align-items: baseline;
	gap: 4px 24px;
	padding: 16px 0;
	border-top: 1px solid var(--rule);
}
.index-item time { font: 500 13px/1.3 var(--sans); color: var(--muted); }
.index-title { font: 600 18px/1.3 var(--serif); justify-self: start; }
.index-item .btbt-route-mini { justify-self: end; }

.most-read {
	padding-left: clamp(24px, 3vw, 48px);
	border-left: 1px solid var(--rule);
}
.rank-list { margin: 14px 0 0; padding: 0; list-style: none; counter-reset: rank; }
.rank-list li {
	position: relative;
	display: grid;
	grid-template-columns: 46px minmax(0, 1fr);
	grid-template-areas: "n title" "n bar" "n count";
	padding: 16px 0;
	border-top: 1px solid var(--rule);
	counter-increment: rank;
}
.rank-list li::before {
	content: counter(rank);
	grid-area: n;
	font: 400 34px/.9 var(--display);
	color: var(--ink);
	font-variant-numeric: lining-nums;
	transition: color .3s ease;
}
.rank-list li:hover::before { color: var(--blue); }
.rank-title { grid-area: title; font: 600 17px/1.3 var(--serif); }
.rank-bar { grid-area: bar; position: relative; display: block; height: 2px; margin-top: 12px; background: var(--rule); }
.rank-bar::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--blue);
	transform-origin: 0 50%;
	transform: scaleX(var(--share, 0));
	transition: transform 1.4s var(--ease-out);
	transition-delay: calc(var(--i, 0) * 90ms + 150ms);
}
.rank-count { grid-area: count; margin-top: 8px; font: 400 13px/1 var(--sans); color: var(--muted); }

/* Readership, in the graphite chamber */
.readers {
	position: relative;
	padding: clamp(64px, 7vw, 104px) 0 clamp(48px, 5vw, 72px);
	background: var(--graphite);
	color: var(--on-g);
	overflow: hidden;
}
.readers-inner {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 28px clamp(20px, 2.6vw, 40px);
	align-items: end;
}
.readers-statement {
	grid-column: 1 / span 8;
	font-size: clamp(34px, 4.4vw, 64px);
	line-height: 1.08;
	letter-spacing: -.02em;
	color: var(--on-g);
	/* pretty, not balance: balance re-flowed the whole statement on every
	   count-up frame and shifted the lines (measured CLS 0.04). */
	text-wrap: pretty;
}
.readers-statement .num {
	color: var(--yellow);
	font-variant-numeric: lining-nums;
	white-space: nowrap;
}
.readers-side { grid-column: 9 / span 4; padding-bottom: 8px; }
.readers-copy { font: 400 15.5px/1.55 var(--sans); color: var(--on-g-2); }
.readers-copy .live-dot { margin-right: 10px; }
.readers-more { margin-top: 14px; font: 400 15.5px/1.55 var(--sans); color: var(--on-g-2); }
.readers-more .num { color: var(--on-g); font-weight: 600; }

/* Countries with readers: a still, wrapped list in the order Jetpack reports */
.flag-list {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 28px;
	margin: clamp(40px, 4vw, 56px) 0 0;
	padding: 22px 0 0;
	list-style: none;
	border-top: 1px solid var(--g-rule);
}
.flag-card { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.flag-card img { width: 28px; height: 21px; object-fit: cover; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12); }
.flag-card span { font: 500 14.5px/1 var(--sans); color: var(--on-g-2); }

/* Live indicator */
.live-dot {
	position: relative;
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--yellow);
	vertical-align: .08em;
}
.live-dot::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--yellow);
	animation: btb-pulse 2.4s var(--ease-out) 4;
}
@keyframes btb-pulse { 0% { transform: scale(1); opacity: .6; } 80%, 100% { transform: scale(3); opacity: 0; } }
.live-count .live-dot { margin-right: 6px; background: var(--blue); }
.live-count .live-dot::after { background: var(--blue); }

/* About */
.about { padding: clamp(72px, 8vw, 120px) 0; }
.about-grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	grid-template-areas:
		"title title title title title . text text text text text text"
		"media media media media media . text text text text text text";
	gap: 28px clamp(20px, 2.6vw, 40px);
	align-items: start;
}
.about-title { grid-area: title; font-size: clamp(36px, 4vw, 58px); line-height: 1.02; letter-spacing: -.02em; }
.about-media { grid-area: media; margin: 0; overflow: hidden; aspect-ratio: 4 / 3; background: var(--paper-2); }
.about-media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.35); }
.about-statement { grid-area: text; padding-top: 6px; }
.about-statement p { font: 400 clamp(19px, 1.5vw, 22px)/1.55 var(--serif); color: var(--ink); }
.about-statement p:first-child::first-line { font-weight: 600; }
.about-statement p + p { margin-top: 18px; }
.about-signoff { font-style: italic; color: var(--ink-2) !important; }
.about-links { display: flex; flex-wrap: wrap; gap: 4px 28px; margin-top: 26px !important; padding-top: 14px; border-top: 1px solid var(--rule); }

/* Congress in figures (optional) */
.civic { padding: 0 0 clamp(64px, 7vw, 96px); }
.civic-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.civic-item { margin: 0; padding: 0 28px; }
.civic-item:first-child { padding-left: 0; }
.civic-item + .civic-item { border-left: 1px solid var(--rule); }
.civic-number { font: 400 clamp(48px, 5vw, 76px)/1 var(--display); letter-spacing: -.02em; }
.civic-item figcaption p { margin-top: 12px; font: 400 16px/1.5 var(--serif); color: var(--ink-2); }
.civic-source { font: 400 13px/1.4 var(--sans) !important; color: var(--muted) !important; }

/* 6. Pages, archives, search
------------------------------------------------------------- */
.page-intro { padding: clamp(40px, 5vw, 72px) 0 clamp(28px, 3vw, 40px); }
.page-intro .wrap { position: relative; }
.page-intro h1 {
	max-width: 16ch;
	font-size: clamp(46px, 6.4vw, 96px);
	line-height: .98;
	letter-spacing: -.026em;
}
.page-intro p {
	max-width: 56ch;
	margin-top: 18px;
	font: 400 clamp(18px, 1.5vw, 21px)/1.5 var(--serif);
	color: var(--ink-2);
}
/* A rule across the content column, inside the gutters */
.page-intro + .archive,
.page-intro + .team,
.page-intro + .contact,
.tools-wrap,
.basic-page .article-body {
	background-image: linear-gradient(var(--ink), var(--ink));
	background-repeat: no-repeat;
	background-size: calc(100% - var(--gutter) * 2) 1px;
	background-position: var(--gutter) 0;
}

.archive { padding-top: 28px; padding-bottom: clamp(64px, 7vw, 104px); }
.archive-tools {
	display: grid;
	grid-template-columns: minmax(0, 1fr) repeat(2, minmax(150px, 210px)) auto;
	align-items: end;
	gap: 14px;
	margin-bottom: 18px;
}
.archive-tools:not(:has(.archive-filter + .archive-filter)) { grid-template-columns: minmax(0, 1fr) minmax(150px, 210px) auto; }
.archive-search,
.archive-filter { display: grid; gap: 8px; }
.archive-tools.is-loading { opacity: .7; }
.archive-tools.is-loading .archive-search input { background-image: linear-gradient(90deg, transparent 0 40%, rgba(43, 68, 255, .12) 50%, transparent 60%); background-size: 200% 100%; animation: btb-scan 1s linear infinite; }
@keyframes btb-scan { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.archive-status { margin-bottom: 12px; font: 500 13.5px/1.4 var(--sans); color: var(--muted); }

.archive-list { border-bottom: 1px solid var(--rule); }
.archive-row {
	position: relative;
	display: grid;
	grid-template-columns: 116px minmax(0, 1fr) 240px;
	gap: 0 clamp(20px, 3vw, 44px);
	padding: 30px 0;
	border-top: 1px solid var(--rule);
}
.archive-row:first-child { border-top-color: var(--ink); }
.archive-row-date { padding-top: 8px; font: 500 13.5px/1.3 var(--sans); color: var(--muted); }
.archive-row-title { font-size: clamp(26px, 2.4vw, 34px); line-height: 1.08; letter-spacing: -.014em; }
.archive-row-dek { max-width: 62ch; margin-top: 10px; font: 400 17px/1.5 var(--serif); color: var(--ink-2); }
.archive-row-route { margin-top: 14px; }
.archive-row-image { display: block; overflow: hidden; aspect-ratio: 3 / 2; align-self: start; background: var(--paper-2); }
.archive-row-page { grid-template-columns: 116px minmax(0, 1fr); }
@media (hover: hover) {
	.archive-row:hover .archive-row-image img,
	.feature:hover .feature-media img { scale: 1.045; }
}

.no-results { padding: 40px 0; font: 400 18px/1.5 var(--serif); color: var(--ink-2); }
#btb-load-more { margin-top: 32px; }

.pagination { margin-top: 36px; font: 600 14.5px/1 var(--sans); }
.pagination .nav-links,
.pagination { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pagination .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 12px;
	border: 1px solid var(--rule);
	color: var(--ink);
	text-decoration: none;
}
.pagination .page-numbers:hover { border-color: var(--ink); }
.pagination .page-numbers.current { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.search-form { display: flex; max-width: 640px; }
.search-form input { border-color: var(--ink); border-right: 0; }
.search-form .button { flex: 0 0 auto; }
.not-found-links { display: flex; gap: 28px; margin-top: 28px; font: 600 15px/1.3 var(--sans); }

.basic-page .article-body { padding-top: 32px; padding-bottom: 80px; }

/* 7. Article
------------------------------------------------------------- */
.article-header { padding-top: clamp(36px, 4.4vw, 64px); padding-bottom: 28px; }
.article-title {
	max-width: 18ch;
	font-size: clamp(40px, 5.6vw, 84px);
	line-height: 1;
	letter-spacing: -.024em;
}
.article-dek {
	max-width: 52ch;
	margin-top: clamp(18px, 2vw, 26px);
	font: 400 clamp(19px, 1.7vw, 24px)/1.45 var(--serif);
	color: var(--ink-2);
}
.article-byline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 28px;
	margin-top: 28px;
	padding-top: 16px;
	border-top: 1px solid var(--ink);
}
.byline-authors { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; padding: 0; list-style: none; }
.byline-person {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	color: var(--ink);
	text-decoration: none;
	font: 600 15.5px/1.2 var(--sans);
}
.byline-person:hover { color: var(--ink); text-decoration: none; }
.byline-person:hover .byline-name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; }
.byline-photo { width: 40px; height: 40px; border-radius: 50%; font-size: 14px; }
img.byline-photo { object-fit: cover; }
.article-byline .meta { margin-top: 0; }

/* The bill's route, between the byline and the article */
.btbt-strip { max-width: calc(var(--wrap) + var(--gutter) * 2); margin: 0 auto 36px; padding: 0 var(--gutter); }

.article-hero { max-width: calc(var(--wrap) + var(--gutter) * 2); margin: 0 auto 48px; padding: 0 var(--gutter); }
.article-hero-media { overflow: hidden; background: var(--paper-2); }
.article-hero img { width: 100%; }
.article-hero figcaption { max-width: 72ch; margin-top: 10px; font: 400 13.5px/1.45 var(--sans); color: var(--muted); }

.article-body {
	max-width: calc(var(--measure) + var(--gutter) * 2);
	margin: 0 auto;
	padding: 0 var(--gutter);
	font-size: 20px;
	line-height: 1.68;
	color: var(--ink);
	hanging-punctuation: first;
}
.article-body > * { margin-top: 0; margin-bottom: 0; }
.article-body > * + * { margin-top: 1.15em; }
.article-body a { color: var(--blue); text-decoration-color: color-mix(in srgb, var(--blue) 45%, transparent); }
.article-body a:hover { text-decoration-color: currentColor; }
.article-body h2 { margin-top: 2em; font-size: clamp(30px, 2.6vw, 38px); line-height: 1.08; letter-spacing: -.015em; }
.article-body h3 { margin-top: 1.8em; font: 600 24px/1.25 var(--serif); letter-spacing: -.008em; }
.article-body h4,
.article-body h5,
.article-body h6 { margin-top: 1.6em; font: 700 16px/1.3 var(--sans); }
.article-body h2 + *,
.article-body h3 + *,
.article-body h4 + * { margin-top: .6em; }
.article-body strong { font-weight: 650; }
.article-body ul,
.article-body ol { padding-left: 1.3em; }
.article-body li + li { margin-top: .45em; }
.article-body li::marker { color: var(--blue); }
.article-body ol li::marker { font: 600 .85em var(--sans); }

@supports (initial-letter: 3) or (-webkit-initial-letter: 3) {
	.article .article-body > p:first-child::first-letter {
		-webkit-initial-letter: 3;
		initial-letter: 3;
		margin-right: .12em;
		font-family: var(--display);
		color: var(--ink);
	}
}

.article-body blockquote,
.article-body .wp-block-quote {
	margin: 1.8em 0;
	padding: 20px 0 0;
	border-top: 1px solid var(--ink);
	font: italic 400 24px/1.45 var(--serif);
	color: var(--ink);
}
.article-body blockquote p + p { margin-top: .7em; }
.article-body blockquote cite,
.article-body .wp-block-quote cite {
	display: block;
	margin-top: 12px;
	font: normal 500 13.5px/1.4 var(--sans);
	color: var(--muted);
}
.article-body .wp-block-pullquote {
	margin: 2.2em 0;
	padding: 26px 0 22px;
	border-top: 1px solid var(--ink);
	border-bottom: 1px solid var(--ink);
	text-align: left;
}
.article-body .wp-block-pullquote blockquote { margin: 0; padding: 0; border: 0; }
.article-body .wp-block-pullquote p { font: 400 clamp(30px, 3vw, 40px)/1.12 var(--display); font-style: normal; letter-spacing: -.015em; color: var(--ink); }

.article-body figure { margin-left: 0; margin-right: 0; }
.article-body .wp-block-image,
.article-body figure.wp-caption { margin-top: 2em; margin-bottom: 2em; }
.article-body .wp-block-image img,
.article-body figure img { width: 100%; }
.article-body figcaption,
.article-body .wp-caption-text,
.article-body .wp-element-caption { margin-top: 10px; font: 400 13.5px/1.45 var(--sans); color: var(--muted); text-align: left; }
.article-body > img { margin: 2em 0; }
.article-body .alignwide { width: min(1040px, 100vw - var(--gutter) * 2); max-width: none; margin-left: 50%; transform: translateX(-50%); }
.article-body .alignfull { width: 100vw; max-width: none; margin-left: 50%; transform: translateX(-50%); }
.article-body .alignleft { float: left; max-width: 50%; margin: .3em 1.4em 1em 0; }
.article-body .alignright { float: right; max-width: 50%; margin: .3em 0 1em 1.4em; }
.article-body .aligncenter { margin-left: auto; margin-right: auto; }
.article-body hr,
.article-body .wp-block-separator { margin: 2.6em 0; border: 0; border-top: 1px solid var(--ink); width: 64px; }
.article-body table,
.article-body .wp-block-table table { width: 100%; border-collapse: collapse; font: 400 15px/1.45 var(--sans); font-variant-numeric: tabular-nums; }
.article-body .wp-block-table { overflow-x: auto; }
.article-body th,
.article-body td { padding: 11px 12px 11px 0; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.article-body thead th { border-bottom: 1px solid var(--ink); font-weight: 700; }
.article-body code { padding: .1em .3em; background: var(--paper-2); font-family: var(--mono); font-size: .82em; }
.article-body pre { overflow-x: auto; padding: 16px; background: var(--paper-2); font-size: 15px; line-height: 1.5; }
.article-body pre code { padding: 0; background: none; }
.article-body iframe,
.article-body .wp-block-embed { max-width: 100%; }
.article-body .wp-block-embed__wrapper iframe { width: 100%; }
.article-body .wp-block-columns { gap: 24px; }
.article-body .wp-block-buttons { margin-top: 1.4em; }
.article-body::after { content: ""; display: table; clear: both; }
.page-links { margin-top: 2em; font: 600 14px/1.4 var(--sans); }

/* Jump targets clear the sticky bar */
.article-body :is(h2, h3, h4)[id],
#legislative-tracker,
.btbt-strip { scroll-margin-top: calc(var(--nav-h) + 32px); }
body.admin-bar .article-body :is(h2, h3, h4)[id],
body.admin-bar #legislative-tracker { scroll-margin-top: calc(var(--nav-h) + 64px); }
@media (prefers-reduced-motion: no-preference) {
	html:has(.article-toc) { scroll-behavior: smooth; }
}

/* Main column: the article, then the detailed tracker, then sharing */
.article-main > .article-body,
.article-main > .btbt,
.article-main > .article-footer,
.article-main > .article-comments {
	max-width: calc(var(--measure) + var(--gutter) * 2);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--gutter);
	padding-right: var(--gutter);
}

.article-footer { margin-top: 56px; }
.article-tags { margin-bottom: 18px; font: 400 14.5px/1.5 var(--sans); color: var(--muted); }
.article-tags span { font-weight: 600; color: var(--ink); margin-right: 4px; }
.article-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0;
	border-top: 1px solid var(--ink);
	border-bottom: 1px solid var(--rule);
	font: 600 14.5px/1.3 var(--sans);
}
.article-share > * { display: inline-flex; align-items: center; min-height: 52px; padding: 0 18px; }
.article-share-label { padding-left: 0 !important; font-weight: 400; color: var(--muted); }
.article-share a,
.article-share .link-button { position: relative; color: var(--ink); text-decoration: none; font-weight: 600; }
.article-share a + a::before,
.article-share .link-button + a::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 1px; background: var(--rule); }
.article-share a:hover,
.article-share .link-button:hover { color: var(--blue); text-decoration: underline; text-decoration-thickness: 1px; }
.article-correction { margin: 18px 0 0; font: 400 14.5px/1.5 var(--sans); color: var(--muted); }
.article-correction a { font-weight: 600; }

/* Section rail: a route drawn down the margin. The line fills to the
   section you are reading; the yellow station marks it. */
.article-toc {
	max-width: calc(var(--measure) + var(--gutter) * 2);
	margin: 0 auto 36px;
	padding: 0 var(--gutter);
	font-family: var(--sans);
}
.toc-box { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); }
.toc-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 52px;
	padding: 12px 0;
	cursor: pointer;
	list-style: none;
	font: 600 14.5px/1.2 var(--sans);
	color: var(--ink);
}
.toc-title::-webkit-details-marker { display: none; }
.toc-count { display: inline-flex; align-items: center; gap: 10px; font-weight: 400; font-size: 13px; color: var(--muted); }
.toc-count::after {
	content: "";
	width: 7px;
	height: 7px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	rotate: 45deg;
	translate: 0 -2px;
	transition: rotate .3s var(--ease-out), translate .3s var(--ease-out);
}
.toc-box[open] .toc-count::after { rotate: 225deg; translate: 0 2px; }
.toc-list {
	position: relative;
	margin: 0;
	padding: 4px 0 16px;
	list-style: none;
	--toc-y: 0px;
}
.toc-list::before,
.toc-list::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 18px;
	width: 1px;
}
.toc-list::before { bottom: 30px; background: var(--rule); }
.toc-list::after { height: var(--toc-y); width: 2px; left: 4.5px; background: var(--blue); transition: height .6s var(--ease-out); }
.toc-item { position: relative; }
.toc-item a {
	position: relative;
	display: block;
	padding: 7px 0 7px 26px;
	color: var(--ink-2);
	text-decoration: none;
	font: 500 14.5px/1.4 var(--sans);
	transition: color .2s ease;
}
.toc-item a::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 14px;
	z-index: 1;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--paper);
	box-shadow: inset 0 0 0 1px var(--line);
	transition: background-color .3s ease, box-shadow .3s ease, scale .45s var(--ease-out);
}
.toc-item.is-passed a::before { background: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
.toc-item.depth-1 a { padding-left: 38px; font-size: 13.5px; color: var(--muted); }
.toc-item.depth-1 a::before { left: 3px; width: 5px; height: 5px; top: 15px; }
.toc-item.is-extra a { margin-top: 6px; font-weight: 600; color: var(--blue); }
.toc-item a:hover { color: var(--ink); }
.toc-item a[aria-current] { color: var(--ink); font-weight: 650; }
.toc-item a[aria-current]::before { background: var(--yellow); box-shadow: inset 0 0 0 1.5px var(--on-yellow); scale: 1.6; }

@media (min-width: 1240px) {
	.article-layout.has-toc {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, calc(var(--measure) + var(--gutter) * 2)) minmax(0, 1fr);
		align-items: start;
	}
	.article-layout.has-toc .article-main { grid-column: 2; grid-row: 1; min-width: 0; }
	/* The rail starts on the page margin, the same line as the masthead */
	.article-layout.has-toc .article-toc {
		grid-column: 1;
		grid-row: 1;
		justify-self: stretch;
		position: sticky;
		top: calc(var(--nav-h) + 32px);
		width: auto;
		max-width: 280px;
		max-height: calc(100vh - var(--nav-h) - 64px);
		margin: 6px 32px 0 max(var(--gutter), calc((100vw - var(--wrap)) / 2));
		padding: 0;
		overflow-y: auto;
		scrollbar-width: thin;
	}
	body.admin-bar .article-layout.has-toc .article-toc { top: calc(var(--nav-h) + 64px); }
	.article-layout.has-toc .toc-box { border-bottom: 0; }
	.article-layout.has-toc .toc-title { cursor: default; min-height: 0; padding: 14px 0 10px; }
	.article-layout.has-toc .toc-count::after { display: none; }
	.article-layout.has-toc .toc-list { padding-bottom: 0; }
}


.article-comments { margin-top: 56px; }
.comments-area { padding-top: 24px; border-top: 1px solid var(--ink); font-family: var(--sans); }
.comments-title,
.comment-reply-title { font: 400 30px/1.1 var(--display); }
.comment-list { margin: 20px 0 0; padding: 0; list-style: none; }
.comment-list .comment { padding: 18px 0; border-top: 1px solid var(--rule); }
.comment-list .children { margin-left: 24px; padding: 0; list-style: none; }
.comment-meta { font: 400 13.5px/1.4 var(--sans); color: var(--muted); }
.comment-content { margin-top: 10px; font: 400 17px/1.6 var(--serif); }
.comment-respond { margin-top: 28px; }
.comment-form { display: grid; gap: 16px; margin-top: 16px; }

.related { padding: clamp(56px, 6vw, 88px) 0 clamp(64px, 7vw, 96px); }
.related .archive-row:first-child { border-top-color: var(--rule); }

/* 8. Authors and contact
------------------------------------------------------------- */
.team { padding-top: 0; padding-bottom: clamp(64px, 7vw, 104px); }
.team-member {
	display: grid;
	grid-template-columns: 168px minmax(0, 1fr);
	gap: clamp(20px, 3vw, 44px);
	padding: 32px 0;
	border-top: 1px solid var(--rule);
}
.team-member:first-child { border-top: 0; }
.team-member.is-lead { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); padding: 40px 0 48px; }
.team-member.is-lead .team-photo-link { max-width: 440px; }
.team-photo-link { display: block; align-self: start; overflow: hidden; }
.team-photo { aspect-ratio: 4 / 5; font-size: 54px; }
.team-member.is-lead .team-photo { font-size: 96px; }
.team-photo img { filter: grayscale(.2); transition: scale 1.2s var(--ease-out), filter .6s ease; }
@media (hover: hover) {
	.team-member:hover .team-photo img { scale: 1.04; filter: none; }
}
.team-name { font-size: clamp(28px, 2.4vw, 36px); line-height: 1.04; letter-spacing: -.016em; }
.team-member.is-lead .team-name { font-size: clamp(40px, 4.4vw, 64px); }
.team-title { margin-top: 10px; font: 600 14.5px/1.3 var(--sans); color: var(--ink-2); }
.team-bio { margin-top: 16px; max-width: 62ch; }
.team-bio p { font-size: 18.5px; line-height: 1.6; color: var(--ink-2); }
.team-bio p + p { margin-top: 12px; }
.team-member.is-lead .team-bio p { font-size: 20px; }
.team-meta { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 18px; font: 600 14.5px/1.4 var(--sans); }
.team-join { padding-top: 22px; border-top: 1px solid var(--ink); font: 400 15.5px/1.5 var(--sans); color: var(--muted); }

.author-intro .wrap { display: flex; align-items: center; gap: 32px; }
.author-intro h1 { font-size: clamp(42px, 5vw, 76px); }
.author-intro-photo { width: 132px; height: 132px; border-radius: 50%; font-size: 44px; }
.author-intro-title { margin-top: 10px !important; font: 600 15px/1.3 var(--sans) !important; color: var(--ink-2) !important; }
.author-intro-links { display: flex; gap: 20px; margin-top: 12px !important; font: 600 14.5px/1.4 var(--sans) !important; }

.contact {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(32px, 5vw, 80px);
	padding-top: 36px;
	padding-bottom: clamp(64px, 7vw, 104px);
}
.contact-topics { margin: 0; }
.contact-topics > div { padding: 18px 0; border-top: 1px solid var(--rule); }
.contact-topics > div:first-child { border-top: 0; padding-top: 0; }
.contact-topics dt { font: 400 26px/1.1 var(--display); }
.contact-topics dd { margin: 8px 0 0; font: 400 16.5px/1.5 var(--serif); color: var(--ink-2); }
.contact-details { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--ink); font: 400 15.5px/1.5 var(--sans); }
.contact-details p + p { margin-top: 8px; }
.contact-details span { display: inline-block; min-width: 64px; font-weight: 600; }
.contact-form-wrap h2 { margin-bottom: 22px; font-size: clamp(30px, 2.8vw, 40px); }
.contact-form .button { margin-top: 22px; }

/* 9. Newsletter, footer, back to top
------------------------------------------------------------- */
.newsletter { padding: clamp(64px, 7vw, 104px) 0; background: var(--newsletter); color: var(--white); }
.newsletter-inner {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 28px clamp(20px, 2.6vw, 40px);
	align-items: end;
}
.newsletter-title { grid-column: 1 / span 6; font-size: clamp(40px, 5vw, 72px); line-height: .98; letter-spacing: -.024em; color: var(--white); }
.newsletter-body { grid-column: 8 / span 5; }
.newsletter-copy { max-width: 44ch; font: 400 17px/1.5 var(--serif); color: rgba(255, 255, 255, .92); }
.newsletter-form { display: grid; gap: 8px; margin-top: 22px; }
.newsletter-form label { color: var(--white); }
.newsletter-field { display: flex; }
.newsletter-field input { min-height: 54px; border-color: var(--white); border-right: 0; font-size: 16px; }
.newsletter-field input:focus-visible { outline: 2px solid var(--yellow); outline-offset: 0; border-color: var(--white); }
.newsletter-field .button { min-height: 54px; flex: 0 0 auto; }
.newsletter :focus-visible { outline-color: var(--yellow); }
.newsletter .form-message { background: var(--white); }

.site-footer { padding: clamp(56px, 6vw, 88px) 0 28px; background: var(--graphite); color: var(--on-g-2); font: 400 15px/1.55 var(--sans); }
.site-footer :focus-visible { outline-color: var(--yellow); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr); gap: 32px clamp(24px, 4vw, 64px); }
.footer-about { max-width: 38ch; font: 400 19px/1.5 var(--serif); color: var(--on-g); }
.footer-heading { margin-bottom: 12px; font: 600 14px/1.2 var(--sans); color: var(--on-g); }
.footer-links { margin: 0; padding: 0; list-style: none; }
.footer-links li + li { margin-top: 2px; }
.footer-links a { display: inline-block; padding: 4px 0; }
.footer-links a,
.site-footer .widget a { color: var(--on-g-2); text-decoration: none; }
.footer-links a:hover,
.site-footer .widget a:hover { color: var(--white); text-decoration: underline; text-decoration-thickness: 1px; }
.site-footer .widget-title,
.site-footer .wp-block-heading { margin: 0 0 12px; font: 600 14px/1.2 var(--sans); color: var(--on-g); }
.site-footer .widget ul { margin: 0; padding: 0; list-style: none; }
.site-footer .widget li + li { margin-top: 6px; }
.site-footer .widget + .widget { margin-top: 26px; }
.footer-wordmark {
	margin: clamp(48px, 6vw, 96px) 0 0;
	padding-bottom: .04em;
	font: 400 min(calc((100vw - var(--gutter) * 2) / 5.9), 216px)/.86 var(--display);
	letter-spacing: -.035em;
	color: var(--on-g);
	white-space: nowrap;
	overflow: hidden;
	user-select: none;
}
.colophon {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 28px;
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid var(--g-rule);
	font-size: 13px;
	color: var(--on-g-2);
}
.colophon span:last-child { margin-left: auto; }

.to-top {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 70;
	display: grid;
	place-items: center;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: var(--nav-bg);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	box-shadow: 0 6px 20px rgba(16, 17, 20, .12);
	color: var(--ink);
	opacity: 0;
	translate: 0 14px;
	pointer-events: none;
	transition: opacity .35s ease, translate .6s var(--ease-out);
}
.to-top.is-visible { opacity: 1; translate: 0 0; pointer-events: auto; }
.to-top svg { width: 50px; height: 50px; }
.to-top circle { fill: none; stroke-width: 1.6; }
.to-top-track { stroke: var(--rule); }
.to-top-ring { stroke: var(--blue); stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p, 0) * 100); transform: rotate(-90deg); transform-origin: 50% 50%; }
.to-top path { stroke: var(--ink); stroke-width: 1.8; stroke-linecap: square; transition: translate .4s var(--ease-out); }
.to-top:hover path { translate: 0 -3px; }

/* 10. WordPress and plugin output
------------------------------------------------------------- */
.widget-band { padding: 40px 0; border-top: 1px solid var(--rule); }
.widget-band .widget + .widget { margin-top: 24px; }
.widget-band .wp-block-image img { width: 100%; }
.sidebar .widget + .widget { margin-top: 28px; }
.widget-title { font: 600 14px/1.2 var(--sans); }
.wp-block-search__inside-wrapper { display: flex; }
.wp-block-search__button { min-height: 48px; padding: 0 18px; border: 1px solid var(--ink); border-radius: 0; background: var(--ink); color: var(--paper); font: 600 15px/1 var(--sans); }
.sticky, .bypostauthor, .gallery-caption { display: block; }

.sharedaddy,
.sd-sharing-enabled .sd-sharing,
.sd-block,
.sd-like-wrapper,
.jetpack-sharing-buttons,
.likes-widget-placeholder,
.jetpack-likes-widget-wrapper,
[id^="like-post-wrapper-"],
#jp-relatedposts,
.jp-relatedposts { display: none !important; }

.article-body .wp-block-jetpack-subscriptions {
	margin-top: 2.4em;
	padding: 20px 0;
	border-top: 1px solid var(--ink);
	border-bottom: 1px solid var(--rule);
	font-family: var(--sans);
	font-size: 15px;
}

.elementor-location-popup,
.elementor-popup-modal,
.e-floating-bars,
[data-elementor-type="popup"],
[data-elementor-type="floating-buttons"],
[data-elementor-type="floating-bars"] { display: none !important; }

.count { font-variant-numeric: lining-nums; }
@keyframes btb-flash { 0% { color: var(--blue); } 100% { color: inherit; } }
.count.is-updated { animation: btb-flash 2s ease-out; }
.readers .count.is-updated { animation: none; }

.tools-wrap { padding-top: 32px; padding-bottom: 64px; }

/* 11. Motion
   One language throughout: exponential ease-out, from an already visible
   default. Load moments are CSS gated on .js, which the head sets, so a
   page without scripts never hides anything. Scroll reveals are added by
   main.js only to elements that start below the screen.
------------------------------------------------------------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: btb-page-out .32s var(--ease-in-out) both; }
::view-transition-new(root) { animation: btb-page-in .6s var(--ease-out) both; }
::view-transition-group(*) { animation-duration: .7s; animation-timing-function: var(--ease-out); }
@keyframes btb-page-out { to { opacity: 0; translate: 0 -12px; filter: blur(2px); } }
@keyframes btb-page-in { from { opacity: 0; translate: 0 18px; } }

@keyframes btb-word { from { transform: translateY(108%); } }
@keyframes btb-rise { from { opacity: 0; translate: 0 18px; filter: blur(4px); } }
@keyframes btb-fade { from { opacity: 0; } }
@keyframes btb-unveil { from { clip-path: inset(0 0 100% 0); } }
@keyframes btb-settle { from { scale: 1.22; } }

/* Headlines arrive word by word, each from behind its own baseline */
.w { display: inline-block; overflow: clip; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.w > span { display: inline-block; }
.js .hero-title .w > span,
.js .article-title .w > span { animation: btb-word 1s calc(.08s + var(--w, 0) * 42ms) var(--ease-out) backwards; }

.js .masthead-brand,
.js .masthead-lookup { animation: btb-fade .8s var(--ease-out) backwards; }
.js .masthead-lookup { animation-delay: .1s; }
.js .hero-dek { animation: btb-rise 1s .42s var(--ease-out) backwards; }
.js .hero-meta { animation: btb-rise 1s .52s var(--ease-out) backwards; }
.js .hero-media { animation: btb-unveil 1.4s .1s var(--ease-out) backwards; }
.js .hero-media img { animation: btb-settle 2s .1s var(--ease-out) backwards; }
.js .hero-actions { animation: btb-rise 1s .95s var(--ease-out) backwards; }

.js .page-intro h1 { animation: btb-rise 1s .04s var(--ease-out) backwards; }
.js .page-intro p { animation: btb-rise 1s .14s var(--ease-out) backwards; }
.js .archive-tools { animation: btb-fade 1s .24s var(--ease-out) backwards; }

.js .article-dek { animation: btb-rise 1s .4s var(--ease-out) backwards; }
.js .article-byline { animation: btb-rise 1s .5s var(--ease-out) backwards; }
.js .article-hero-media { animation: btb-unveil 1.4s .3s var(--ease-out) backwards; }
.js .article-hero img { animation: btb-settle 2.2s .3s var(--ease-out) backwards; }

/* Scroll-linked image depth, where the browser supports it */
@supports (animation-timeline: view()) {
	@keyframes btb-drift { from { translate: 0 -4%; } to { translate: 0 4%; } }
	@keyframes btb-recede { to { scale: 1.16; filter: saturate(.7); } }
	.hero-media img { animation: btb-settle 2s .1s var(--ease-out) backwards, btb-recede linear both; animation-timeline: auto, view(); animation-range: normal, exit 0% exit 100%; }
	.js .hero-media img { animation: btb-settle 2s .1s var(--ease-out) backwards, btb-recede linear both; animation-timeline: auto, view(); animation-range: normal, exit 0% exit 100%; }
	.article-hero img { scale: 1.08; }
	.js .article-hero img { animation: btb-settle 2.2s .3s var(--ease-out) backwards, btb-drift linear both; animation-timeline: auto, view(); animation-range: normal, cover; }
	.about-media img,
	.rv.rv-in.about-media img { scale: 1.12; animation: btb-drift linear both; animation-timeline: view(); animation-range: cover; }

	/* The chamber opens as it enters: graphite fields widen to full bleed */
	@keyframes btb-chamber { from { clip-path: inset(0 clamp(12px, 3vw, 44px)); } }
	.readers,
	.btbt-brief { animation: btb-chamber linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
}

/* Scroll reveals */
/* Fade and rise on transform and opacity only: a `translate` reveal was
   counted as layout shift (CLS 0.04 on the homepage), and a blur filter on
   large headings repainted every frame while the page scrolled. */
[data-reveal] {
	transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
	transition-delay: calc(var(--i, 0) * 90ms);
}
.rv[data-reveal="up"] { opacity: 0; transform: translate3d(0, 30px, 0); }
/* The image is clipped, never the observed element, so it still registers on screen */
.rv[data-reveal="image"] img { clip-path: inset(0 0 100% 0); scale: 1.2; transition: clip-path 1.4s var(--ease-out), scale 1.8s var(--ease-out); }
.rv.rv-in[data-reveal] { opacity: 1; transform: none; }
.rv.rv-in[data-reveal="image"] img { clip-path: inset(0); }
.rv.rv-in[data-reveal="image"] img { scale: 1; }
[data-reveal="rule"]::before {
	content: "";
	position: absolute;
	top: -1px; left: 0; right: 0;
	height: 1px;
	background: var(--ink);
	transform-origin: 0 50%;
	transition: transform 1.3s var(--ease-out);
}
.rv[data-reveal="rule"] { border-top-color: transparent; }
.rv[data-reveal="rule"]::before { transform: scaleX(0); }
.rv.rv-in[data-reveal="rule"]::before { transform: scaleX(1); }
.rv[data-reveal="rule"] > * { opacity: 0; translate: 0 14px; transition: opacity .9s .25s var(--ease-out), translate .9s .25s var(--ease-out); }
.rv.rv-in[data-reveal="rule"] > * { opacity: 1; translate: 0 0; }
.rv-prep, .rv-prep * { transition: none !important; }

/* Bars and routes wait below the screen, then draw */
.is-waiting .rank-bar::after { transform: scaleX(0); }

/* 12. Responsive
------------------------------------------------------------- */
@media (max-width: 1100px) {
	.hero-copy { grid-column: 1 / span 8; }
	.hero-media { grid-column: 9 / span 4; }
	.latest-body.has-rail { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
	.latest-top.has-stack { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
	.hero-foot > .btbt-route .btbt-route-latest { padding-right: 0; min-height: 0; }
	.hero-foot.has-route .hero-actions { position: static; justify-content: flex-start; margin-top: 18px; }
	.archive-row { grid-template-columns: 100px minmax(0, 1fr) 200px; }
}

@media (max-width: 900px) {
	.masthead-main,
	.masthead.is-front .masthead-main {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "brand" "tagline" "lookup";
		gap: 8px;
	}
	.masthead-lookup { width: 100%; max-width: 520px; margin-top: 14px; }

	.hero-grid { grid-template-columns: minmax(0, 1fr); }
	.hero-copy,
	.hero-media { grid-column: 1; }
	.hero-media { order: -1; min-height: 0; aspect-ratio: 2 / 1; margin-bottom: 22px; }
	.hero-copy { padding-bottom: 20px; }
	/* On phones the actions come before the stations so both reach the first screen */
	.hero-foot.has-route { display: flex; flex-direction: column; }
	.hero-foot.has-route .hero-actions { order: -1; margin: 0 0 18px; }

	.feature { grid-template-columns: minmax(0, 1fr); }
	.feature-media,
	.feature-copy { grid-column: 1; grid-row: auto; }
	.feature-copy { padding: 22px 0 0; }
	.latest-body.has-rail { grid-template-columns: minmax(0, 1fr); gap: 48px; }
	.latest-top.has-stack { grid-template-columns: minmax(0, 1fr); gap: 40px; }
	.latest-top.has-stack .feature { padding-right: 0; }
	.latest-stack { padding-left: 0; border-left: 0; }
	.latest-body.has-rail .latest-main { padding-right: 0; }
	.most-read { padding-left: 0; border-left: 0; }
	.wide-story { grid-template-columns: minmax(0, 1fr); }
	.index-item { grid-template-columns: 56px minmax(0, 1fr); }
	.index-item .btbt-route-mini { grid-column: 2; justify-self: start; }

	.readers-inner { grid-template-columns: minmax(0, 1fr); }
	.readers-statement,
	.readers-side { grid-column: 1; }

	.about-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "media" "text"; }

	.newsletter-inner { grid-template-columns: minmax(0, 1fr); }
	.newsletter-title,
	.newsletter-body { grid-column: 1; }

	.footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.footer-col-about { grid-column: 1 / -1; }

	.archive-tools,
	.archive-tools:not(:has(.archive-filter + .archive-filter)) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.archive-search { grid-column: 1 / -1; }
	.archive-tools .button { grid-column: 1 / -1; }
	.archive-row { grid-template-columns: minmax(0, 1fr) 160px; }
	.archive-row-date { grid-column: 1 / -1; padding: 0 0 8px; }

	.team-member.is-lead { grid-template-columns: minmax(0, 1fr); }
	.team-member.is-lead .team-photo-link { max-width: 420px; }
	.contact { grid-template-columns: minmax(0, 1fr); }
	.civic-grid { grid-template-columns: minmax(0, 1fr); }
	.civic-item,
	.civic-item:first-child { padding: 18px 0; }
	.civic-item + .civic-item { border-left: 0; border-top: 1px solid var(--rule); }
}

@media (max-width: 640px) {
	body { font-size: 17px; }
	.masthead-bar { font-size: 12.5px; }
	.masthead-edition span { display: none; }
	.theme-toggle-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
	.theme-toggle { min-width: 32px; justify-content: center; }
	.masthead-main { padding-top: 16px; padding-bottom: 18px; }
	.masthead.is-front .masthead-main { padding-top: 22px; padding-bottom: 22px; }
	.masthead-logo img,
	.masthead-logo .custom-logo { height: 38px; }
	.masthead-title { font-size: 30px; white-space: normal; }
	.masthead.is-front .masthead-title { font-size: clamp(38px, 11.4vw, 56px); }
	.masthead-tagline { font-size: 14.5px; }
	.masthead.is-front .masthead-tagline { font-size: 15px; }
	.masthead-language select,
	.masthead-language .gt_selector { max-width: 110px; font-size: 12px !important; }
	/* Inside pages keep the reading close to the top; the bar and the Tools page carry lookup */
	/* On phones the lookup moves out of the masthead to sit under the lead's actions */
	.masthead-lookup,
	.masthead:not(.is-front) .masthead-tagline { display: none; }
	.hero-lookup { display: grid; }
	.masthead.is-front .masthead-main { padding-top: 14px; padding-bottom: 14px; }

	.site-nav-inner { gap: 18px; }
	.site-nav.is-stuck .site-nav-brand { display: none; }
	.site-nav-list { gap: 20px; }

	.hero-title { font-size: clamp(38px, 10.6vw, 52px); }
	.hero-media { margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); }
	.hero-dek { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
	.hero-foot .btbt-route-title { display: none; }
	.hero-actions { gap: 10px 18px; }
	.hero-actions .button { padding: 0 16px; }

	.archive-row { grid-template-columns: minmax(0, 1fr) 96px; gap: 0 16px; padding: 22px 0; }
	.archive-row-title { font-size: 24px; }
	.archive-row-dek { font-size: 16px; }
	.archive-row-image { aspect-ratio: 1; }

	.article-title { font-size: clamp(36px, 10vw, 50px); }
	.article-byline { display: block; }
	.article-byline .meta { margin-top: 8px; }
	.article-body { font-size: 18.5px; line-height: 1.66; }
	.article-hero { padding: 0; }
	.article-hero figcaption { padding: 0 var(--gutter); }
	.article-share > * { padding: 0 12px; }

	.team-member { grid-template-columns: 96px minmax(0, 1fr); }
	.field-row { grid-template-columns: minmax(0, 1fr); }
	.footer-grid { grid-template-columns: minmax(0, 1fr); }
	.colophon span:last-child { margin-left: 0; }
	.to-top { right: 14px; bottom: 14px; }
	.search-form { flex-direction: column; }
	.search-form input { border-right: 1px solid var(--ink); }
}

/* 13. Print and reduced motion
------------------------------------------------------------- */
@media print {
	.masthead-bar,
	.masthead-lookup,
	.site-nav,
	.newsletter,
	.site-footer,
	.to-top,
	.article-share,
	.article-toc,
	.article-correction,
	.related,
	.btbt-strip-links { display: none !important; }
	body { background: #fff; font-size: 12pt; }
	.article-body a { color: inherit; }
	.article-body a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}

/* Reduced motion: nothing travels, scales or draws. State changes stay
   visible as colour and opacity, and pages cross-fade instead of sliding. */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto !important; }
	*,
	*::before,
	*::after { transition-property: color, background-color, border-color, opacity, text-decoration-color, box-shadow !important; }
	.js .hero-title .w > span,
	.js .article-title .w > span,
	.js .masthead-brand,
	.js .masthead-lookup,
	.js .hero-dek,
	.js .hero-meta,
	.js .hero-media,
	.js .hero-media img,
	.js .hero-actions,
	.js .page-intro h1,
	.js .page-intro p,
	.js .archive-tools,
	.js .article-dek,
	.js .article-byline,
	.js .article-hero-media,
	.js .article-hero img,
	.hero-media img,
	.about-media img,
	.readers,
	.btbt-brief,
	.site-nav.is-stuck .site-nav-brand,
	.site-nav.is-stuck .site-nav-subscribe,
	.link-action:hover .icon-bell,
	.archive-tools.is-loading .archive-search input { animation: none !important; }
	.hero-media img,
	.article-hero img,
	.about-media img { scale: 1 !important; translate: none !important; }
	::view-transition-group(*) { animation: none !important; }
	::view-transition-old(root) { animation: btb-fade-out .2s ease both !important; }
	::view-transition-new(root) { animation: btb-fade .2s ease both !important; }
	.live-dot::after { display: none; }
}
@keyframes btb-fade-out { to { opacity: 0; } }

/* About dropdown (site nav) */
.site-nav-list .sub-menu{list-style:none;margin:0;padding:0}
@media (min-width:761px){
.site-nav-list{overflow:visible}
.site-nav-list>li{position:relative}
.site-nav-list .menu-item-has-children>a{display:inline-flex;align-items:center;gap:6px}
.site-nav-list .sub-menu{position:absolute;top:calc(100% - 4px);left:-12px;min-width:190px;padding:6px;background:var(--paper);border:1px solid var(--rule);border-radius:10px;box-shadow:0 14px 34px rgba(0,0,0,.16);opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .16s ease,transform .16s ease,visibility 0s linear .16s;z-index:90}
.site-nav-list li:hover>.sub-menu,.site-nav-list li:focus-within>.sub-menu{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.site-nav-list .sub-menu a{display:block;padding:10px 12px;border-radius:6px;white-space:nowrap}
.site-nav-list .sub-menu a:hover{background:var(--paper-2)}
}
@media (max-width:760px){.site-nav-list .menu-item-has-children,.site-nav-list .sub-menu{display:contents}}

/* ==========================================================
   Refinement layer (7.3.0): type craft, hero balance, texture
   ========================================================== */
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
body{font-kerning:normal;font-variant-ligatures:common-ligatures contextual}
h1,h2,h3,.hero-title,.section-title{text-wrap:balance}
p,li,blockquote{text-wrap:pretty}
.readers-statement{font-variant-numeric:tabular-nums lining-nums}
::selection{background:var(--yellow);color:var(--on-yellow)}

/* Hero: give the image real weight */
@media (min-width:1000px){
  .hero-copy{grid-column:1/span 6;justify-content:center}
  .hero-media{grid-column:7/span 6}
  .hero-title{font-size:clamp(46px,4.7vw,76px)}
}
.hero-media{position:relative;overflow:hidden;isolation:isolate}
.hero-media img{width:100%;height:100%;object-fit:cover;transform:scale(1.001);transition:transform 1.4s var(--ease-out,cubic-bezier(.16,1,.3,1))}
.hero-media:hover img,.hero-media:focus-visible img{transform:scale(1.035)}
.hero-media::after,.article-body figure img{box-shadow:inset 0 0 0 1px rgba(16,17,20,.08)}
.hero-media::after{content:"";position:absolute;inset:0;pointer-events:none}

/* Calmer section rhythm */
.section-head{margin-bottom:clamp(28px,3vw,44px)}

/* Footer wordmark: always fits the column */
.footer-wordmark{font-size:clamp(46px,13.8vw,200px)!important;white-space:nowrap;line-height:.9}

/* Article craft: drop cap + reading progress */
.single-post .article-body>p:first-of-type::first-letter{float:left;font-family:var(--display);font-size:4.6em;line-height:.82;padding:.06em .1em 0 0;margin-top:.04em;color:var(--ink)}
.article-body a:not([class]){text-decoration-thickness:1px;text-underline-offset:.18em;text-decoration-color:color-mix(in srgb,currentColor 40%,transparent);transition:text-decoration-color .2s}
.article-body a:not([class]):hover{text-decoration-color:currentColor}
@supports (animation-timeline:scroll()){
  body.single-post::before{content:"";position:fixed;top:0;left:0;right:0;height:3px;z-index:200;background:var(--yellow);transform-origin:0 50%;transform:scaleX(0);animation:btb-progress linear both;animation-timeline:scroll(root)}
  @keyframes btb-progress{to{transform:scaleX(1)}}
}

/* Paper grain: barely there, gives the page tooth */
body::after{content:"";position:fixed;inset:0;z-index:2147483000;pointer-events:none;opacity:.045;mix-blend-mode:multiply;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
:root[data-theme="dark"] body::after{mix-blend-mode:screen;opacity:.035;filter:invert(1)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) body::after{mix-blend-mode:screen;opacity:.035;filter:invert(1)}}
/* Small screens: keep the top bar on one line */
@media (max-width:600px){
  .masthead-edition{display:none}
  .masthead-bar{justify-content:flex-end}
  .masthead-actions{min-width:0;flex-wrap:nowrap;gap:10px}
  .masthead-language{max-width:118px;overflow:hidden}
  .masthead-language select{max-width:118px}
}
@media print{body::after,body.single-post::before{display:none}}
@media (prefers-reduced-motion:reduce){.hero-media img{transition:none}}

/* ==========================================================
   7.4.0 cleanup layer: calmer chrome, visible focus, mobile bar
   ========================================================== */
body::after{display:none!important}               /* full-screen grain overlay removed: decoration with a paint cost */
.hero-media:hover img,.hero-media:focus-visible img{transform:none} /* no hover zoom on the lead image */
.colophon-links{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:14px;padding-top:14px;border-top:1px solid var(--rule);font:600 14px/1.4 var(--sans,inherit)}
.colophon-links a{color:inherit;text-underline-offset:.2em}
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:3px solid var(--blue,#1F36C9);outline-offset:3px;border-radius:2px}
@media (max-width:600px){
  .site-nav.is-stuck .site-nav-subscribe{display:none}   /* the masthead already carries Subscribe; the stuck bar overflowed at 390px */
  .site-nav-list{overflow-x:auto;scrollbar-width:none}
}

/* Count-up numbers reserve their final width (js/main.js), so counting never
   re-wraps the sentence around them. */
.count.is-sized { position: relative; display: inline-block; white-space: nowrap; }
.count.is-sized .count-sizer { visibility: hidden; }
.count.is-sized .count-val { position: absolute; top: 0; right: 0; font-variant-numeric: lining-nums tabular-nums; }

/* 7.5.0: Explore investigations in the Articles list, marked with a tag */
.archive-list-inv[hidden], .archive-row-inv[hidden] { display: none; }
.inv-tag { display: inline-block; padding: 4px 8px 3px; border: 1.5px solid var(--ink); background: #FFC21A; color: #101114; font: 600 12px/1.2 var(--sans); letter-spacing: .01em; }
.archive-row-inv .archive-row-image { background: var(--paper-2); }
.archive-row-inv .archive-row-image img { filter: grayscale(1) contrast(1.1); }