/* ==========================================================================
   Tampa Bay Reporter
   Tokens lifted from the prototype. Identity changed? Change it here, only here.
   ========================================================================== */

:root {
	/* House blue */
	--c-blue:       #0b3b9b;
	--c-blue-dark:  #072a72;
	--c-blue-light: #93b4ea;

	/* Navy: masthead, footer and dark panels */
	--c-navy:       #0c1c33;
	--c-navy-panel: #16294a;
	--c-navy-line:  #2a4370;
	--c-navy-rule:  #1b3055;

	/* Text */
	--c-copy:  #242a33;   /* story body */
	--c-text:  #3c4553;
	--c-slate: #48505c;
	--c-muted: #5c6674;

	/* Rules */
	--c-line:      #e3e6eb;
	--c-soft-line: #eceef1;
	--c-hairline:  #f2f4f6;

	/* Surfaces */
	--c-paper:    #ffffff;
	--c-page:     #f4f5f7;
	--c-masthead: #fbfcfe;
	--c-chip:     #dfe3e8;

	/* Advertising */
	--c-ad-bg:   #f9fafb;
	--c-ad-dash: #cfd5dd;

	/* Breaking news */
	--c-ticker-bg:   #eef3fb;
	--c-ticker-line: #d7e2f4;
	--c-ticker-ink:  #0d2a5e;

	/* On a dark background */
	--c-dark-text:  #b6bdc7;
	--c-dark-faint: #9aa3af;
	--c-dark-input: #8d97a4;
	--c-utility:    #c9ced6;
	--c-numeral:    #d3d8de;

	/* Typography */
	--font-sans:    'Libre Franklin', system-ui, -apple-system, sans-serif;
	--font-serif:   'Source Serif 4', Georgia, serif;
	--font-display: 'Playfair Display', Georgia, serif;

	/* Layout */
	--container: 1200px;
	--masthead:  1080px;
	--gutter:    24px;

	/* Height of the sticky navigation, used by the sticky elements. */
	--nav-height: 48px;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

body {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 16px;
	line-height: 1.5;
	color: var(--c-navy);
	background: var(--c-page);
	-webkit-font-smoothing: antialiased;
}

/* The page is a white sheet over the grey behind it. */
.site-main,
.site-header-wrap { background: var(--c-paper); }

a { color: var(--c-blue); text-decoration: none; }
a:hover { color: var(--c-blue-dark); }

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 { letter-spacing: -.01em; }

.container {
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.skip-link {
	position: absolute;
	left: -9999px;
	z-index: 999;
	padding: 12px 20px;
	background: var(--c-navy);
	color: #fff;
}
.skip-link:focus { left: 8px; top: 8px; }

.screen-reader-text {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

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

/* Missing image: a gradient in place of the hole. A card with no photo
   breaks the grid, and an empty grey square reads as a defect. */
.placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #31404f, #8695a3);
}

/* The lead uses a deeper gradient, to carry the weight of an opening. */
.hero__media .placeholder,
.archive-lead__media .placeholder {
	background: linear-gradient(135deg, #22303e 0%, #3f566b 48%, #93a4b2 100%);
}

/* --------------------------------------------------------------------------
   Utility bar
   -------------------------------------------------------------------------- */

.utility-bar {
	background: var(--c-navy);
	color: var(--c-utility);
	font-size: 11px;
	letter-spacing: .09em;
	text-transform: uppercase;
}

.utility-bar__inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	padding-block: 8px;
}

.utility-bar__links {
	display: flex;
	align-items: center;
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.utility-bar__links a { color: var(--c-utility); }
.utility-bar__links a:hover { color: #fff; }

/*
 * The subscribe call stands out. Matched by its target rather than by
 * position: while the newsletter is off the link is gone, and "last item"
 * would promote whatever happened to come before it.
 */
.utility-bar__links a[href$="#newsletter"] { color: #fff; font-weight: 600; }

/* --------------------------------------------------------------------------
   Masthead
   -------------------------------------------------------------------------- */

.masthead {
	background: var(--c-masthead);
	border-bottom: 2px solid var(--c-blue);
}

.masthead__inner {
	max-width: var(--masthead);
	margin-inline: auto;
	padding: 16px var(--gutter) 14px;
	display: flex;
	justify-content: center;
}

.masthead__title { margin: 0; line-height: 1; }

.masthead__banner {
	width: 100%;
	max-width: 760px;
	max-height: 104px;
	object-fit: contain;
}

/* No banner on disk: the paper's name set in the display face. */
.masthead__wordmark {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(30px, 6vw, 46px);
	letter-spacing: -.02em;
	color: var(--c-navy);
	text-align: center;
}

.masthead__tagline {
	display: block;
	margin-top: 6px;
	font-family: var(--font-sans);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--c-blue);
}

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */

.site-nav {
	position: sticky;
	top: 0;
	z-index: 60;
	background: var(--c-paper);
	border-bottom: 1px solid var(--c-line);
}

.site-nav__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: 12px;
}

.site-nav__list {
	grid-column: 2;
	justify-self: center;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 30px;
	margin: 0;
	padding: 0;
	list-style: none;
	min-width: 0;
}

.site-nav__list a {
	display: block;
	padding-block: 13px;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .01em;
	color: var(--c-text);
	white-space: nowrap;
	border-bottom: 3px solid transparent;
}

.site-nav__list a:hover,
.site-nav__list .current-menu-item > a,
.site-nav__list .current-menu-parent > a {
	color: var(--c-blue);
	border-bottom-color: var(--c-blue);
}

.site-nav__actions {
	grid-column: 3;
	justify-self: end;
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
}

.site-nav__search {
	display: flex;
	align-items: center;
	border: 0;
	background: none;
	padding: 4px;
	font: inherit;
	font-size: 17px;
	color: var(--c-text);
	cursor: pointer;
}
.site-nav__search:hover { color: var(--c-blue); }

.site-nav__cta {
	background: var(--c-blue);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	padding: 7px 14px;
	white-space: nowrap;
}
.site-nav__cta:hover { background: var(--c-blue-dark); color: #fff; }

/* Menu button: appears only when the links stop fitting side by side. */
.site-nav__toggle {
	grid-column: 1;
	justify-self: start;
	display: none;
	align-items: center;
	gap: 8px;
	border: 1px solid var(--c-chip);
	background: none;
	padding: 6px 10px;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	color: var(--c-text);
	cursor: pointer;
}

.site-nav__search-panel {
	border-top: 1px solid var(--c-soft-line);
	padding-block: 16px;
}

/* --------------------------------------------------------------------------
   Breaking news
   -------------------------------------------------------------------------- */

.ticker {
	background: var(--c-ticker-bg);
	border-bottom: 1px solid var(--c-ticker-line);
	overflow: hidden;
}

.ticker__inner {
	display: flex;
	align-items: center;
	gap: 16px;
}

.ticker__label {
	flex: none;
	background: var(--c-blue);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	padding: 6px 10px;
}

.ticker__viewport {
	overflow: hidden;
	flex: 1;
	min-width: 0;
	padding-block: 9px;
}

.ticker__track {
	display: flex;
	gap: 40px;
	width: max-content;
	animation: tampabay-ticker var(--ticker-duration, 42s) linear infinite;
}

.ticker__track a {
	font-size: 13px;
	color: var(--c-ticker-ink);
	white-space: nowrap;
}
.ticker__track a:hover { color: var(--c-blue); }

@keyframes tampabay-ticker {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* Pausing on hover and on focus is an accessibility requirement: text
   that moves on its own cannot be the only way to reach the content. */
.ticker:hover .ticker__track,
.ticker:focus-within .ticker__track { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
	.ticker__track { animation: none; }
	.ticker__viewport { overflow-x: auto; }
	/* With no animation, the second copy would be repetition for the reader. */
	.ticker__track > .ticker__dup { display: none; }
}

/* --------------------------------------------------------------------------
   Shared editorial elements
   -------------------------------------------------------------------------- */

.kicker {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--c-blue);
}

.kicker--sub {
	font-weight: 400;
	letter-spacing: .08em;
	color: var(--c-slate);
}

.dot {
	width: 4px;
	height: 4px;
	background: var(--c-numeral);
	border-radius: 50%;
	flex: none;
}

.entry-meta {
	margin: 0;
	font-size: 12px;
	color: var(--c-muted);
}
.entry-meta a { color: var(--c-navy); font-weight: 600; }

/* Short blue rule: it opens every section and is the paper's visual signature. */
.section-head { margin-bottom: 22px; }

.section-head__rule {
	width: 34px;
	height: 3px;
	background: var(--c-blue);
	margin-bottom: 8px;
}

.section-head__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
}

.section-head__title {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 26px;
	letter-spacing: -.01em;
	color: var(--c-navy);
}
.section-head__title a { color: inherit; }
.section-head__title a:hover { color: var(--c-blue); }

.section-head__more {
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Home
   -------------------------------------------------------------------------- */

.home-top {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
	padding-block: 32px 8px;
}

/* Two lead stories, stacked, beside the secondaries. */
.home-leads {
	min-width: 0;
	flex: 4 1 420px;
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.hero { min-width: 0; }
.hero + .hero { padding-top: 32px; border-top: 1px solid var(--c-soft-line); }

.hero__media {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; }

.hero__taxonomy {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 18px 0 10px;
}

.hero__title {
	margin: 0;
	font-size: 41px;
	line-height: 1.1;
	letter-spacing: -.02em;
	font-weight: 800;
	text-wrap: pretty;
}
.hero__title a { color: var(--c-navy); }
.hero__title a:hover { color: var(--c-blue); }

.hero__deck {
	margin: 14px 0 0;
	font-family: var(--font-serif);
	font-size: 18px;
	line-height: 1.55;
	color: var(--c-slate);
	max-width: 60ch;
	text-wrap: pretty;
}

.hero .entry-meta { margin-top: 14px; font-size: 13px; }

/* Sidebar ---------------------------------------------------------------- */

.rail {
	min-width: 0;
	flex: 2 1 280px;
	display: flex;
	flex-direction: column;
	gap: 22px;
}

/* Away from the homepage the column breathes more. */
.rail--page { gap: 28px; padding-block: 0 48px; }

/* Secondary story: text on the left, thumbnail on the right. */
.mini-card {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 104px;
	gap: 14px;
	padding-bottom: 22px;
	border-bottom: 1px solid var(--c-soft-line);
}

.mini-card__body { min-width: 0; }

.mini-card__kicker { font-size: 10px; }

.mini-card__title {
	margin: 7px 0 0;
	font-size: 17px;
	line-height: 1.25;
	font-weight: 700;
	letter-spacing: -.01em;
	text-wrap: pretty;
}
.mini-card__title a { color: var(--c-navy); }
.mini-card__title a:hover { color: var(--c-blue); }

.mini-card .entry-meta { margin-top: 8px; }

.mini-card__media {
	display: block;
	width: 104px;
	height: 78px;
	overflow: hidden;
}
.mini-card__media img { width: 100%; height: 100%; object-fit: cover; }

/* The excerpt, capped so a long one can't stretch the column past the
   second lead; the cap tightens where the column is narrow. */
.mini-card__deck {
	margin: 6px 0 0;
	font-family: var(--font-serif);
	font-size: 14px;
	line-height: 1.5;
	color: var(--c-slate);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
}

/* With two leads on the left, the column is tall enough for bigger
   secondaries: at full width they reach down to the second lead. */
@media (min-width: 1200px) {
	.mini-card { grid-template-columns: minmax(0, 1fr) 150px; gap: 16px; }
	.mini-card__media { width: 150px; height: 113px; }
	.mini-card__title { font-size: 19px; }
	.mini-card__deck { font-size: 15px; -webkit-line-clamp: 5; line-clamp: 5; }
}

/* --------------------------------------------------------------------------
   Advertising
   -------------------------------------------------------------------------- */

.ad--boxed {
	border: 1px solid var(--c-line);
	background: var(--c-ad-bg);
	padding: 14px;
}

/* Sticks below the navigation, the only fixed element on the page. */
.ad--sidebar-mrec,
.ad--sidebar-half {
	position: sticky;
	top: calc(var(--nav-height) + 16px);
}

.ad--band {
	border-block: 1px solid var(--c-soft-line);
	padding-block: 18px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

.ad--in-article {
	margin: 34px 0 6px;
	max-width: 66ch;
}

.ad__label {
	margin: 0;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--c-muted);
	text-align: center;
}

.ad--boxed .ad__label { margin-bottom: 10px; }

.ad__slot { display: flex; justify-content: center; }
.ad--band .ad__slot { width: 100%; }

/* Image ads: both sizes auto, so the slot's box (--ad-width and
   --ad-height, set per slot) scales the image without distorting it. */
.ad__link { display: block; }
.ad__image {
	width: auto;
	height: auto;
	max-width: min(100%, var(--ad-width, 100%));
	max-height: var(--ad-height, none);
	margin-inline: auto;
}

/* On a phone the picture swaps to its mobile image, which the strip's
   height limit would shrink to a thumbnail. */
@media (max-width: 600px) {
	.ad__picture .ad__image { max-height: none; }
}

/* A slot with no campaign: shows the measure the ad will take, so the
   hole in the layout shows up in development and not on opening day. */
.ad__placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	width: 100%;
	border: 1px dashed var(--c-ad-dash);
	background: var(--c-paper);
	text-align: center;
	padding: 12px;
}

.ad--band .ad__placeholder,
.ad--in-article .ad__placeholder { background: var(--c-ad-bg); }

.ad--billboard .ad__placeholder { max-width: 970px; }

.ad__size {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .1em;
	color: var(--c-slate);
}

.ad__format {
	font-size: 10px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--c-muted);
}

/* --------------------------------------------------------------------------
   Story grids
   -------------------------------------------------------------------------- */

/* It carries its own vertical padding, but needs the same box as the
   other strips: without the max-width the blue rule on "Latest" would
   align to the window edge while the sections below sit centred at 1200px. */
.latest {
	max-width: var(--container);
	margin-inline: auto;
	padding: 26px var(--gutter) 40px;
}

.card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 28px;
}

/* "Latest" holds four stories at most (front-page.php), so it never goes
   to three columns: that would leave the fourth card alone on a row. The
   breakpoints keep the other grids' 230px minimum card width. */
.latest .card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1060px) {
	.latest .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
	.latest .card-grid { grid-template-columns: minmax(0, 1fr); }
}

.card { min-width: 0; }

.card__media {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	overflow: hidden;
}
.card__media img { width: 100%; height: 100%; object-fit: cover; }

.card__kicker { display: block; margin-top: 11px; font-size: 10px; }

.card__title {
	margin: 7px 0 0;
	font-size: 17px;
	line-height: 1.28;
	font-weight: 700;
	letter-spacing: -.01em;
	text-wrap: pretty;
}
.card__title a { color: var(--c-navy); }
.card__title a:hover { color: var(--c-blue); }

.card .entry-meta { margin-top: 8px; }

/* Section blocks --------------------------------------------------------- */

.section-block {
	padding-block: 40px;
	border-bottom: 1px solid var(--c-soft-line);
}

.section-block__body { display: flex; flex-wrap: wrap; gap: 40px; }

/* "All stories" at the end of the homepage, while "Latest" is hidden. */
.home-more {
	margin: 0;
	padding-block: 24px 48px;
	text-align: right;
}

.section-block__lead { min-width: 0; flex: 3 1 340px; }

.section-block__lead .card__media { aspect-ratio: 16 / 9; }

.section-block__lead-title {
	margin: 14px 0 0;
	font-size: 24px;
	line-height: 1.2;
	font-weight: 800;
	letter-spacing: -.015em;
	text-wrap: pretty;
}
.section-block__lead-title a { color: var(--c-navy); }
.section-block__lead-title a:hover { color: var(--c-blue); }

.section-block__deck {
	margin: 10px 0 0;
	font-family: var(--font-serif);
	font-size: 16px;
	line-height: 1.5;
	color: var(--c-slate);
	max-width: 56ch;
	text-wrap: pretty;
}

.section-block__lead .entry-meta { margin-top: 10px; }

.section-block__list {
	min-width: 0;
	flex: 2 1 280px;
	display: flex;
	flex-direction: column;
}

.list-story {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	padding-block: 14px;
	border-top: 1px solid var(--c-soft-line);
}

.list-story__media {
	display: block;
	width: 86px;
	height: 64px;
	flex: none;
	overflow: hidden;
}
.list-story__media img { width: 100%; height: 100%; object-fit: cover; }

.list-story__text { min-width: 0; }

.list-story__title {
	margin: 0;
	font-size: 15px;
	line-height: 1.3;
	font-weight: 700;
	letter-spacing: -.01em;
	text-wrap: pretty;
}
.list-story__title a { color: var(--c-navy); }
.list-story__title a:hover { color: var(--c-blue); }

.list-story .entry-meta { margin-top: 6px; }

/* --------------------------------------------------------------------------
   Section, search and index
   -------------------------------------------------------------------------- */

.archive { padding-block: 34px 48px; }

.archive__header {
	border-bottom: 1px solid var(--c-line);
	padding-bottom: 18px;
	margin-bottom: 28px;
}

.archive__title {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(30px, 5vw, 44px);
	line-height: 1.05;
	letter-spacing: -.02em;
	color: var(--c-navy);
}

.archive__blurb {
	margin: 8px 0 0;
	font-family: var(--font-serif);
	font-size: 17px;
	color: var(--c-muted);
	max-width: 62ch;
}

.archive__body { display: flex; flex-wrap: wrap; gap: 40px; }

.archive__main { min-width: 0; flex: 4 1 420px; }

.archive-lead {
	padding-bottom: 28px;
	border-bottom: 1px solid var(--c-soft-line);
}

.archive-lead__media {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}
.archive-lead__media img { width: 100%; height: 100%; object-fit: cover; }

.archive-lead__title {
	margin: 14px 0 0;
	font-size: 32px;
	line-height: 1.15;
	font-weight: 800;
	letter-spacing: -.02em;
	text-wrap: pretty;
}
.archive-lead__title a { color: var(--c-navy); }
.archive-lead__title a:hover { color: var(--c-blue); }

.archive-lead__deck {
	margin: 10px 0 0;
	font-family: var(--font-serif);
	font-size: 17px;
	line-height: 1.55;
	color: var(--c-slate);
	max-width: 60ch;
	text-wrap: pretty;
}

.archive-lead .entry-meta { margin-top: 10px; }

.archive__grid { padding-top: 28px; }

.archive__empty { padding-block: 40px; color: var(--c-muted); }

/* Pagination drawn as the prototype's "Load more stories" button. */
.pagination {
	display: flex;
	justify-content: center;
	margin-top: 36px;
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}

.pagination .page-numbers {
	display: inline-block;
	border: 1px solid var(--c-navy);
	padding: 12px 22px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--c-navy);
}

.pagination a.page-numbers:hover { background: var(--c-navy); color: #fff; }
.pagination .current { background: var(--c-navy); color: #fff; }
.pagination .dots { border-color: transparent; }

/* --------------------------------------------------------------------------
   Story
   -------------------------------------------------------------------------- */

.breadcrumbs {
	padding: 26px var(--gutter) 0;
	font-size: 12px;
	color: var(--c-muted);
	display: flex;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
}
.breadcrumbs a { color: var(--c-muted); }
.breadcrumbs a:hover { color: var(--c-blue); }
.breadcrumbs__current { color: var(--c-blue); font-weight: 600; }

.article-layout {
	display: flex;
	flex-wrap: wrap;
	gap: 48px;
	padding-block: 18px 48px;
}

.article { min-width: 0; flex: 4 1 440px; }

.article__title {
	margin: 0;
	font-size: clamp(30px, 5vw, 44px);
	line-height: 1.08;
	letter-spacing: -.028em;
	font-weight: 800;
	text-wrap: pretty;
	max-width: 20ch;
}

.article__deck {
	margin: 16px 0 0;
	font-family: var(--font-serif);
	font-size: 20px;
	line-height: 1.5;
	color: var(--c-slate);
	max-width: 58ch;
	text-wrap: pretty;
}

.article__byline {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin: 22px 0;
	padding-block: 16px;
	border-block: 1px solid var(--c-soft-line);
}

.article__avatar { flex: none; border-radius: 50%; }

.article__identity { min-width: 0; }

.article__author { font-size: 14px; font-weight: 700; color: var(--c-navy); }
.article__author a { color: inherit; }

.article__byline-meta { font-size: 12px; color: var(--c-muted); }

.article__actions {
	margin-left: auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

/* Square versions of the chips beside them, so the row reads as one set. */
.share-links {
	display: flex;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.share-links a {
	width: 34px;
	height: 34px;
	border: 1px solid var(--c-chip);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--c-text);
}
.share-links a:hover { border-color: var(--c-blue); color: var(--c-blue); }

.chip {
	border: 1px solid var(--c-chip);
	background: none;
	padding: 7px 14px;
	font: inherit;
	font-size: 12px;
	font-weight: 600;
	color: var(--c-text);
	cursor: pointer;
}
.chip:hover { border-color: var(--c-blue); color: var(--c-blue); }
.chip.is-active { border-color: var(--c-blue); color: var(--c-blue); }

.article__figure { margin: 0; }

.article__figure img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

.article__caption {
	font-size: 12px;
	color: var(--c-muted);
	margin-top: 8px;
	padding-bottom: 6px;
	border-bottom: 1px solid var(--c-soft-line);
	display: flex;
	flex-wrap: wrap;
	gap: 4px 8px;
}

.article__credit { color: var(--c-muted); }

.article__body {
	font-family: var(--font-serif);
	font-size: 19px;
	line-height: 1.68;
	color: var(--c-copy);
	max-width: 66ch;
}

.article__body p { margin: 22px 0 0; text-wrap: pretty; }

.article__body h2,
.article__body h3 {
	font-family: var(--font-sans);
	color: var(--c-navy);
	line-height: 1.25;
}
.article__body h2 { font-size: 25px; margin: 1.8em 0 .5em; }
.article__body h3 { font-size: 20px; margin: 1.5em 0 .4em; }

.article__body img,
.article__body figure { margin-block: 28px; }

.article__body figcaption {
	font-family: var(--font-sans);
	font-size: 12px;
	color: var(--c-muted);
	margin-top: 8px;
}

/* Pull quote: the blue rule is the same one that opens a section. */
.article__body blockquote {
	margin: 32px 0;
	padding: 6px 0 6px 22px;
	border-left: 4px solid var(--c-blue);
	font-family: var(--font-serif);
	font-size: 24px;
	line-height: 1.35;
	font-weight: 600;
	letter-spacing: -.01em;
	color: var(--c-navy);
	text-wrap: pretty;
}

.article__body blockquote p { margin: 0 0 10px; font-size: inherit; }
.article__body blockquote p:last-child { margin-bottom: 0; }

.article__body blockquote cite {
	display: block;
	margin-top: 12px;
	font-family: var(--font-sans);
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--c-muted);
}

.article__tags {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 32px;
	padding: 0;
	list-style: none;
}

.article__tags a {
	display: inline-block;
	background: var(--c-page);
	color: var(--c-text);
	font-size: 12px;
	font-weight: 600;
	padding: 7px 13px;
}
.article__tags a:hover { background: var(--c-blue); color: #fff; }

.article__pages { margin-top: 24px; font-size: 14px; color: var(--c-muted); }

.related { margin-top: 44px; }

.related .card-grid { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 24px; }
.related .card__title { font-size: 16px; }

.author-box {
	display: flex;
	gap: 16px;
	margin-top: 36px;
	padding: 20px;
	background: var(--c-page);
	max-width: 66ch;
}

.author-box__avatar { flex: none; border-radius: 50%; }
.author-box__text p { margin: 0; }
.author-box__name { font-size: 15px; font-weight: 700; color: var(--c-navy); }
.author-box__bio { margin-top: 6px !important; font-size: 14px; color: var(--c-muted); }

/* --------------------------------------------------------------------------
   Most read
   -------------------------------------------------------------------------- */

.popular { border: 1px solid var(--c-line); padding: 20px; }

.popular__title {
	margin: 0;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--c-slate);
	border-bottom: 1px solid var(--c-soft-line);
	padding-bottom: 10px;
}

.popular__list {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: popular;
}

.popular__item {
	display: flex;
	gap: 12px;
	padding-block: 13px;
	border-bottom: 1px solid var(--c-hairline);
	counter-increment: popular;
}
.popular__item:last-child { border-bottom: 0; padding-bottom: 0; }

/* The numeral is ornament: it lives in ::before so it is not read aloud
   before every headline. */
.popular__item::before {
	content: counter( popular );
	flex: none;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 19px;
	line-height: 1;
	color: var(--c-numeral);
}

.popular__item a {
	font-size: 14px;
	line-height: 1.32;
	font-weight: 600;
	color: var(--c-navy);
	text-wrap: pretty;
}
.popular__item a:hover { color: var(--c-blue); }

/* --------------------------------------------------------------------------
   Widgets
   -------------------------------------------------------------------------- */

/* WordPress fills the first registered widget area with Search, Recent
   Posts and Recent Comments on install. They need to come up in the same
   box as "Most read", or the sidebar opens with three undesigned blocks. */
.widget { border: 1px solid var(--c-line); padding: 20px; }

.widget__title,
.widget .wp-block-heading {
	margin: 0 0 10px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--c-slate);
	border-bottom: 1px solid var(--c-soft-line);
	padding-bottom: 10px;
	font-family: var(--font-sans);
}

.widget ul,
.widget ol {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
	line-height: 1.35;
}

.widget li + li {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--c-hairline);
}

.widget li a { color: var(--c-navy); font-weight: 600; }
.widget li a:hover { color: var(--c-blue); }

.widget .search-form { max-width: none; }

/* The WordPress Search widget is a block with its own markup, which does
   not go through the theme's searchform.php. */
.widget .wp-block-search__label {
	display: block;
	margin: 0 0 10px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--c-slate);
	border-bottom: 1px solid var(--c-soft-line);
	padding-bottom: 10px;
}

.widget .wp-block-search__inside-wrapper { display: flex; gap: 8px; }

.widget .wp-block-search__input {
	flex: 1;
	min-width: 0;
	border: 1px solid var(--c-line);
	padding: 11px 14px;
	font: inherit;
	font-size: 15px;
}

.widget .wp-block-search__button {
	flex: none;
	margin: 0;
	border: 0;
	background: var(--c-blue);
	color: #fff;
	padding: 11px 18px;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}
.widget .wp-block-search__button:hover { background: var(--c-blue-dark); }

/* --------------------------------------------------------------------------
   Newsletter
   -------------------------------------------------------------------------- */

.newsletter-panel {
	background: var(--c-navy);
	color: #fff;
	padding: 22px;
}

.newsletter-panel__kicker {
	margin: 0;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--c-blue-light);
}

.newsletter-panel__title {
	margin: 10px 0 0;
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -.01em;
	line-height: 1.2;
}

.newsletter-form { margin-top: 14px; }

.newsletter-form input[type="email"] {
	display: block;
	width: 100%;
	background: var(--c-navy-panel);
	border: 1px solid var(--c-navy-line);
	padding: 12px 14px;
	font: inherit;
	font-size: 13px;
	color: #fff;
}
.newsletter-form input[type="email"]::placeholder { color: var(--c-dark-input); }

.newsletter-form button {
	display: block;
	width: 100%;
	margin-top: 8px;
	background: var(--c-blue);
	border: 0;
	color: #fff;
	padding: 12px;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}
.newsletter-form button:hover { background: var(--c-blue-dark); }

.newsletter-form__note { margin: 10px 0 0; font-size: 12px; color: var(--c-dark-faint); }

/* Wide strip above the footer. */
.newsletter-band { background: var(--c-navy); color: #fff; }

.newsletter-band__inner {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 32px;
	align-items: center;
	padding-block: 44px;
}

.newsletter-band__title {
	margin: 10px 0 8px;
	font-size: 30px;
	line-height: 1.15;
	letter-spacing: -.02em;
	font-weight: 800;
}

.newsletter-band__text {
	margin: 0;
	font-family: var(--font-serif);
	font-size: 16px;
	line-height: 1.5;
	color: var(--c-dark-text);
}

/* In the strip the form runs side by side, not stacked. */
.newsletter-band .newsletter-form { margin-top: 0; display: flex; gap: 10px; flex-wrap: wrap; }
.newsletter-band .newsletter-form input[type="email"] { flex: 1; min-width: 180px; width: auto; padding: 14px 16px; font-size: 14px; }
.newsletter-band .newsletter-form button { width: auto; margin-top: 0; padding: 14px 26px; font-size: 14px; }
.newsletter-band .newsletter-form__note { width: 100%; }

/*
 * The official MailerLite plugin's form, printed through the shortcode in
 * Customize → Publication. Its own stylesheet only lays out structure, so
 * on the navy panels it came out as bare browser controls; this dresses it
 * like the theme's form above. Scoped to the two newsletter containers so
 * a form pasted into a story keeps the plugin's look.
 */
.newsletter-panel .mailerlite-form { margin-top: 14px; }

/* The panels already say what the field is for; the label stays for screen readers. */
.newsletter-band .mailerlite-form-field label,
.newsletter-panel .mailerlite-form-field label {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.newsletter-band .mailerlite-form-field,
.newsletter-panel .mailerlite-form-field { margin-bottom: 0; }

.newsletter-band .mailerlite-form input[type="email"],
.newsletter-panel .mailerlite-form input[type="email"] {
	display: block;
	width: 100%;
	background: var(--c-navy-panel);
	border: 1px solid var(--c-navy-line);
	padding: 12px 14px;
	font: inherit;
	font-size: 13px;
	color: #fff;
}
.newsletter-band .mailerlite-form input[type="email"]::placeholder,
.newsletter-panel .mailerlite-form input[type="email"]::placeholder { color: var(--c-dark-input); }

.newsletter-band .mailerlite-subscribe-button-container,
.newsletter-panel .mailerlite-subscribe-button-container { text-align: left; }

.newsletter-band .mailerlite-subscribe-submit,
.newsletter-panel .mailerlite-subscribe-submit {
	display: block;
	width: 100%;
	margin-top: 8px;
	background: var(--c-blue);
	border: 0;
	color: #fff;
	padding: 12px;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}
.newsletter-band .mailerlite-subscribe-submit:hover,
.newsletter-panel .mailerlite-subscribe-submit:hover { background: var(--c-blue-dark); }
/* The plugin keeps the button disabled until it has fetched a fresh nonce. */
.newsletter-band .mailerlite-subscribe-submit:disabled,
.newsletter-panel .mailerlite-subscribe-submit:disabled { opacity: .6; cursor: wait; }

/* The plugin's red is unreadable on navy. */
.newsletter-band .mailerlite-form-error,
.newsletter-panel .mailerlite-form-error {
	margin-top: 6px;
	font-size: 12px;
	color: #ffb4b4;
}

.newsletter-band .mailerlite-form-loader,
.newsletter-panel .mailerlite-form-loader {
	margin: 8px 0 0;
	text-align: left;
	font-size: 13px;
	font-weight: 600;
	color: var(--c-dark-text);
}

/* The success message arrives wrapped in <h4><p>. */
.newsletter-band .mailerlite-form-response,
.newsletter-panel .mailerlite-form-response {
	margin-top: 0;
	text-align: left;
	color: #fff;
}
.newsletter-band .mailerlite-form-response :is(h4, p),
.newsletter-panel .mailerlite-form-response :is(h4, p) { margin: 0; font-size: 15px; font-weight: 700; }

/* In the strip, field and button side by side like the theme's form. */
.newsletter-band .mailerlite-form-inputs { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
.newsletter-band .mailerlite-form-field { flex: 1; min-width: 180px; }
.newsletter-band .mailerlite-form input[type="email"] { padding: 14px 16px; font-size: 14px; }
.newsletter-band .mailerlite-subscribe-submit { width: auto; margin-top: 0; padding: 14px 26px; font-size: 14px; }
.newsletter-band .mailerlite-form-loader { margin: 0; padding-block: 14px; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer { background: var(--c-navy); color: var(--c-dark-text); }

.site-footer__top {
	display: flex;
	flex-wrap: wrap;
	gap: 36px;
	padding: 48px var(--gutter) 28px;
}

.site-footer__brand { min-width: 0; flex: 2 1 260px; }

.site-footer__logo { width: 100%; max-width: 300px; }

.site-footer__title {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 26px;
	color: #fff;
}
.site-footer__title a { color: inherit; }

.site-footer__blurb {
	margin: 14px 0 0;
	font-family: var(--font-serif);
	font-size: 15px;
	line-height: 1.55;
	max-width: 34ch;
}

.social-links {
	display: flex;
	gap: 10px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

.social-links a {
	width: 32px;
	height: 32px;
	border: 1px solid var(--c-navy-line);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--c-dark-text);
}
.social-links a:hover { border-color: var(--c-blue); color: #fff; }

.site-footer__col { min-width: 0; flex: 1 1 150px; }

.site-footer__col-title {
	margin: 0;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #fff;
}

.site-footer__links {
	display: flex;
	flex-direction: column;
	gap: 9px;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
}
.site-footer__links a { color: var(--c-dark-text); }
.site-footer__links a:hover { color: #fff; }

.site-footer__legal { border-top: 1px solid var(--c-navy-rule); }

.site-footer__legal-inner {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding-block: 18px;
	font-size: 12px;
	color: var(--c-dark-faint);
}

.site-footer__legal-links {
	display: flex;
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.site-footer__legal-links a { color: var(--c-dark-faint); }
.site-footer__legal-links a:hover { color: #fff; }

/* --------------------------------------------------------------------------
   Search form and 404
   -------------------------------------------------------------------------- */

.search-form { display: flex; flex-wrap: wrap; gap: 8px; max-width: 32rem; }

.search-form .search-field {
	flex: 1 1 200px;
	min-width: 0;
	padding: 11px 14px;
	border: 1px solid var(--c-line);
	font: inherit;
	font-size: 15px;
}

.search-form .search-submit {
	border: 0;
	background: var(--c-blue);
	color: #fff;
	padding: 11px 22px;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}
.search-form .search-submit:hover { background: var(--c-blue-dark); }

.error-404 { padding-block: 64px 48px; max-width: 46rem; }
.error-404__search { margin-top: 20px; }

/* Static page ------------------------------------------------------------ */

.page-content { padding-block: 34px 56px; }

.page-content__title {
	margin: 0 0 24px;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(30px, 5vw, 44px);
	letter-spacing: -.02em;
	color: var(--c-navy);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
	.hero__title { font-size: clamp(28px, 6vw, 41px); }
	.newsletter-band__title { font-size: 26px; }
}

@media (max-width: 780px) {
	/* Below this the section links stop fitting on one line; they become a
	   drawer opened by the button, instead of a row that scrolls itself. */
	.site-nav__toggle { display: flex; }

	.site-nav__list {
		grid-column: 1 / -1;
		grid-row: 2;
		display: none;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding-bottom: 8px;
	}

	.site-nav.is-open .site-nav__list { display: flex; }

	.site-nav__list a {
		padding: 11px 0;
		border-bottom: 1px solid var(--c-soft-line);
	}
	.site-nav__list a:hover,
	.site-nav__list .current-menu-item > a { border-bottom-color: var(--c-soft-line); }

	.article__byline { gap: 12px; }
	.article__actions { margin-left: 0; width: 100%; }
}

@media (max-width: 560px) {
	.utility-bar__date { display: none; }
	.mini-card { grid-template-columns: minmax(0, 1fr) 84px; }
	.mini-card__media { width: 84px; height: 63px; }
	.article__title { max-width: none; }
}

@media print {
	.site-nav, .ticker, .utility-bar, .rail, .ad, .newsletter-band, .site-footer { display: none; }
}