/* ==========================================================================
   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;
}

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

.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; }

/* --------------------------------------------------------------------------
   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;
}

.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; }

.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; gap: 8px; }

.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%; }

/* --------------------------------------------------------------------------
   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; }
}