@layer components {
	/* Page frame. */
	.site-main {
		padding-block: 2rem 4rem;
	}

	@media (min-width: 64rem) {
		.site-main {
			padding-block: 2.75rem 5rem;
		}
	}

	.page-header {
		margin-bottom: 2rem;
	}

	.page-header > * + * {
		margin-top: 0.6rem;
	}

	.page-header .typography {
		color: var(--color-muted);
	}

	.reading {
		max-width: var(--measure);
	}

	.reading-center {
		max-width: var(--measure);
		margin-inline: auto;
	}

	/* Pages with a sidebar use a narrower page, so the sidebar sits close to the text. */
	.container-narrow {
		max-width: var(--container-narrow);
	}

	.layout-sidebar {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: 3rem;
	}

	@media (min-width: 64rem) {
		.layout-sidebar {
			grid-template-columns: minmax(0, 1fr) 20rem;
			gap: 3.5rem;
		}
	}

	/* The news page: the title with a search box beside it. */
	.page-header-search {
		display: flex;
		flex-wrap: wrap;
		align-items: end;
		justify-content: space-between;
		gap: 1rem 2rem;
	}

	.page-header-search > * + * {
		margin-top: 0;
	}

	.page-header-search .meta {
		margin-top: 0.4rem;
	}

	.page-header-search .search-form {
		max-width: 20rem;
	}

	.stack > * + * {
		margin-top: 2.5rem;
	}

	.section {
		margin-top: 3.5rem;
	}

	/* Image frames: one fixed shape so rows and grids line up whatever the photo. */
	.frame {
		position: relative;
		display: block;
		overflow: hidden;
		background: var(--color-panel);
		aspect-ratio: 3 / 2;
	}

	.frame img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition: transform 0.4s ease;
	}

	a.frame:hover img,
	.card:hover .frame img,
	.story-row:hover .frame img {
		transform: scale(1.03);
	}

	.frame-empty {
		display: flex;
		align-items: center;
		justify-content: center;
		color: var(--color-rule);
	}

	.frame-empty .icon {
		width: 30%;
		height: 30%;
	}

	/* Home page banner: photos that fade behind one fixed panel with the call to action. */
	.hero {
		position: relative;
		background: var(--color-black);
	}

	.hero-viewport {
		overflow: hidden;
	}

	.hero-track {
		display: flex;
	}

	.hero-slide {
		flex: 0 0 100%;
		min-width: 0;
	}

	.hero-image {
		display: block;
		width: 100%;
		height: 13rem;
		object-fit: cover;
	}

	.hero-panel {
		background: var(--color-paper);
		padding-block: 1.25rem 1.75rem;
	}

	.hero-title {
		font-size: var(--text-h2);
		line-height: 1.12;
	}

	.hero-text {
		margin-top: 0.5rem;
		font-size: var(--text-body);
		line-height: 1.5;
	}

	.hero-actions {
		display: flex;
		flex-wrap: wrap;
		gap: 0.6rem;
		margin-top: 1rem;
	}

	@media (min-width: 48rem) {
		.hero-image {
			height: clamp(18rem, 30vw, 26rem);
		}

		.hero-panel {
			position: absolute;
			inset: 0;
			display: flex;
			align-items: center;
			background: none;
			padding: 0;
			pointer-events: none;
		}

		.hero-panel .container {
			width: 100%;
		}

		.hero-panel-inner {
			max-width: 30rem;
			background: var(--color-paper);
			padding: 1.5rem 1.75rem 1.6rem;
			pointer-events: auto;
		}
	}

	/* Ticker: a black strip with slowly scrolling text. */
	.ticker {
		background: var(--color-black);
		color: var(--color-white);
	}

	.ticker-inner {
		display: flex;
		align-items: center;
		gap: 1rem;
		min-height: 2.6rem;
	}

	.ticker-viewport {
		flex: 1;
		min-width: 0;
		overflow: hidden;
		mask-image: linear-gradient(to right, transparent, #000 2rem, #000 calc(100% - 2rem), transparent);
	}

	.ticker-track {
		display: flex;
	}

	.ticker-item {
		flex: none;
		display: flex;
		align-items: center;
		gap: 1.5rem;
		padding-right: 1.5rem;
		font-size: var(--text-small);
		line-height: 1.4;
		white-space: nowrap;
	}

	/* A small square between copies of the text. */
	.ticker-item::after {
		content: "";
		width: 0.3rem;
		height: 0.3rem;
		background: currentColor;
	}

	/* Without scrolling (no JavaScript, or reduced motion), show the text once and let it wrap. */
	.no-js .ticker-item + .ticker-item {
		display: none;
	}

	.no-js .ticker-item {
		white-space: normal;
		padding-block: 0.5rem;
	}

	.no-js .ticker-item::after {
		content: none;
	}

	.no-js .ticker-viewport {
		mask-image: none;
	}

	@media (prefers-reduced-motion: reduce) {
		.ticker-item + .ticker-item {
			display: none;
		}

		.ticker-item {
			white-space: normal;
			padding-block: 0.5rem;
		}

		.ticker-item::after {
			content: none;
		}

		.ticker-viewport {
			mask-image: none;
		}
	}

	/* Home page: the welcome text beside the latest news. */
	.home-columns {
		display: grid;
		gap: 3rem;
	}

	@media (min-width: 64rem) {
		.home-columns {
			grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
			gap: 4rem;
		}
	}

	.home-news .lead-story {
		margin-bottom: 1.25rem;
		border-bottom: 1px solid var(--color-rule);
		padding-bottom: 1.25rem;
	}

	.lead-story .frame {
		margin-bottom: 1rem;
	}

	.lead-title {
		margin-top: 0.4rem;
		font-size: var(--text-h2);
		line-height: 1.12;
		letter-spacing: -0.01em;
	}

	.lead-story p:last-child {
		margin-top: 0.6rem;
		color: var(--color-muted);
	}

	:is(.lead-title, .card-title, .story-title) a {
		text-decoration: none;
	}

	:is(.lead-title, .card-title, .story-title) a:hover {
		text-decoration: underline;
		text-decoration-thickness: 2px;
	}

	/* A story as a row: small image on the left. */
	.story-list > li + li {
		margin-top: 1.1rem;
		border-top: 1px solid var(--color-rule);
		padding-top: 1.1rem;
	}

	.story-row {
		display: grid;
		grid-template-columns: 7rem minmax(0, 1fr);
		gap: 1rem;
		align-items: start;
	}

	.story-title {
		margin-top: 0.25rem;
		font-size: var(--text-body);
		line-height: 1.25;
	}

	/* In the narrow sidebar: a smaller photo and title, so titles take fewer lines. */
	aside .story-row {
		grid-template-columns: 5.5rem minmax(0, 1fr);
		gap: 0.85rem;
	}

	aside .story-title {
		font-size: var(--text-small);
	}

	.meta {
		color: var(--color-muted);
		font-family: var(--font-sans);
		font-size: var(--text-label);
		font-weight: 600;
		letter-spacing: 0.02em;
	}

	/* Card grid: the news page and "More news". */
	.card-grid {
		display: grid;
		gap: 2.5rem 2rem;
	}

	@media (min-width: 40rem) {
		.card-grid {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
	}

	@media (min-width: 64rem) {
		.card-grid {
			grid-template-columns: repeat(3, minmax(0, 1fr));
		}
	}

	.card .frame {
		margin-bottom: 0.85rem;
	}

	.card-title {
		margin-top: 0.3rem;
		font-size: var(--text-h3);
		line-height: 1.2;
	}

	.card-excerpt {
		margin-top: 0.5rem;
		color: var(--color-muted);
		font-size: var(--text-small);
		line-height: 1.5;
	}

	/* Image tiles: Advertise / About us / News on the home page, ways to book on Advertise. */
	.tile-grid {
		display: grid;
		gap: 1.25rem;
	}

	@media (min-width: 40rem) {
		.tile-grid {
			grid-template-columns: repeat(3, minmax(0, 1fr));
			gap: 1.5rem;
		}
	}

	.tile {
		display: grid;
		grid-template-columns: 6.5rem minmax(0, 1fr);
		gap: 1rem;
		align-items: center;
		text-decoration: none;
	}

	.tile + .tile {
		border-top: 1px solid var(--color-rule);
		padding-top: 1.25rem;
	}

	.tile-title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 0.5rem;
		font-size: var(--text-h3);
		font-weight: 700;
		line-height: 1.2;
	}

	.tile-title .icon {
		width: 0.9rem;
		height: 0.9rem;
		transition: transform 0.15s;
	}

	.tile:hover .tile-title {
		text-decoration: underline;
		text-decoration-thickness: 2px;
		text-underline-offset: 0.18em;
	}

	.tile:hover .tile-title .icon {
		transform: translateX(3px);
	}

	.tile-text {
		display: block;
		margin-top: 0.3rem;
		color: var(--color-muted);
		font-size: var(--text-small);
		line-height: 1.45;
	}

	@media (min-width: 40rem) {
		.tile {
			grid-template-columns: 1fr;
			align-content: start;
			align-items: start;
			gap: 0.85rem;
		}

		.tile + .tile {
			border-top: 0;
			padding-top: 0;
		}

		.tile .frame {
			order: -1;
		}
	}

	/* "Since 1892": figures from the paper's history. */
	.facts {
		border-top: 1px solid var(--color-ink);
		padding-top: 1.25rem;
	}

	.facts-list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.5rem 1.25rem;
	}

	.fact-figure {
		font-size: var(--text-h1);
		font-weight: 700;
		line-height: 1;
		letter-spacing: -0.01em;
	}

	.fact-label {
		margin-top: 0.35rem;
	}

	.fact-text {
		margin-top: 0.3rem;
		color: var(--color-muted);
		font-size: var(--text-small);
		line-height: 1.45;
	}

	/* On the home page the figures sit under the "where to buy" card without a rule. */
	.page-home .facts {
		border-top: 0;
		padding-top: 0;
	}

	@media (min-width: 48rem) {
		.facts-wide .facts-list {
			grid-template-columns: repeat(var(--facts, 4), minmax(0, 1fr));
			column-gap: 2rem;
		}
	}

	/* A boxed panel: sidebars, the "buy the paper" note, price summaries. */
	.panel {
		align-self: start;
		border-top: 1px solid var(--color-ink);
		background: var(--color-panel);
		padding: 1.25rem 1.25rem 1.4rem;
	}

	.panel > * + * {
		margin-top: 0.75rem;
	}

	.panel-title {
		font-size: var(--text-h3);
		line-height: 1.2;
	}

	.panel p,
	.panel li {
		font-size: var(--text-small);
		line-height: 1.5;
	}

	.panel :is(.icon-list, .meta) {
		font-family: var(--font-sans);
	}

	.panel .meta {
		font-weight: 400;
		letter-spacing: 0;
	}

	.panel .icon-list li {
		display: flex;
		gap: 0.6rem;
	}

	.panel .icon-list li + li {
		margin-top: 0.5rem;
	}

	.icon-list .icon {
		width: 1rem;
		height: 1rem;
		margin-top: 0.3rem;
	}

	/* "Where to buy" card on the home page. */
	.where-strip {
		display: grid;
		gap: 1rem 2rem;
		align-items: center;
		border: 1px solid var(--color-ink);
		padding: 1.5rem;
	}

	.where-strip h2 {
		font-size: var(--text-h2);
	}

	.where-strip p {
		margin-top: 0.35rem;
		color: var(--color-muted);
	}

	@media (min-width: 48rem) {
		.where-strip {
			grid-template-columns: minmax(0, 1fr) auto;
		}
	}

	/* News post. */
	.article-header {
		margin-bottom: 1.5rem;
	}

	.article-header .page-title {
		margin-top: 0.4rem;
	}

	.article-meta {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem 1.5rem;
		margin-top: 1rem;
		border-block: 1px solid var(--color-rule);
		padding-block: 0.6rem;
	}

	.article-image {
		margin-bottom: 1.75rem;
	}

	.article-image img {
		display: block;
		width: auto;
		max-width: 100%;
		max-height: 36rem;
		margin-inline: auto;
	}

	.buy-note {
		display: flex;
		gap: 1rem;
		align-items: flex-start;
		margin-top: 2rem;
	}

	.buy-note .icon {
		width: 1.75rem;
		height: 1.75rem;
		margin-top: 0.15rem;
	}

	.buy-note p {
		margin-top: 0;
	}

	.post-nav {
		display: grid;
		gap: 1rem;
		margin-top: 2.5rem;
		border-top: 1px solid var(--color-ink);
		padding-top: 1.25rem;
	}

	.post-nav a {
		display: block;
		text-decoration: none;
	}

	.post-nav a:hover .post-nav-title {
		text-decoration: underline;
	}

	.post-nav-title {
		display: block;
		margin-top: 0.25rem;
		font-weight: 700;
		line-height: 1.3;
	}

	@media (min-width: 40rem) {
		.post-nav {
			grid-template-columns: 1fr 1fr;
		}

		.post-nav-next {
			grid-column: 2;
			text-align: right;
		}
	}

	/* Pagination and month links. */
	.nav-links {
		display: flex;
		flex-wrap: wrap;
		gap: 0.4rem;
		margin-top: 3rem;
		font-family: var(--font-sans);
		font-size: var(--text-small);
	}

	.nav-links .page-numbers {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 2.5rem;
		min-height: 2.5rem;
		padding-inline: 0.75rem;
		border: 1px solid var(--color-rule);
		text-decoration: none;
	}

	.nav-links a.page-numbers:hover {
		border-color: var(--color-ink);
	}

	.nav-links .current {
		border-color: var(--color-ink);
		background: var(--color-ink);
		color: var(--color-paper);
	}

	.nav-links .dots {
		border-color: transparent;
	}

	.month-nav {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		gap: 1rem;
		margin-top: 3rem;
		border-top: 1px solid var(--color-ink);
		padding-top: 1rem;
	}

	/* News Archive: each year with its months. */
	.archive-year + .archive-year {
		margin-top: 2.5rem;
	}

	.archive-year h2 {
		border-top: 1px solid var(--color-ink);
		padding-top: 0.5rem;
		font-size: var(--text-h2);
	}

	.archive-months {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.5rem;
		margin-top: 1rem;
	}

	@media (min-width: 40rem) {
		.archive-months {
			grid-template-columns: repeat(4, minmax(0, 1fr));
		}
	}

	@media (min-width: 64rem) {
		.archive-months {
			grid-template-columns: repeat(6, minmax(0, 1fr));
		}
	}

	.archive-months a {
		display: block;
		border: 1px solid var(--color-rule);
		background: var(--color-white);
		padding: 0.6rem 0.75rem;
		text-decoration: none;
	}

	.archive-months a:hover {
		border-color: var(--color-ink);
	}

	.archive-month-name {
		display: block;
		font-weight: 700;
		line-height: 1.25;
	}

	.archive-months .meta {
		display: block;
		margin-top: 0.15rem;
	}

	/* Sellers list on "Where to buy", in two columns that never split an entry. */
	.page-where .typography ul {
		columns: 2 16rem;
		column-gap: 2.5rem;
	}

	.page-where .typography li {
		break-inside: avoid;
	}

	/* Regular Advertisers: each advertiser's logo and details in a grid. */
	.typography .advertisers {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: 1.5rem;
	}

	/* The grid needs the full width, so this page has no sidebar. */
	.page-advertisers .layout-sidebar > aside {
		display: none;
	}

	@media (min-width: 40rem) {
		.typography .advertisers {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
	}

	@media (min-width: 64rem) {
		.page-advertisers .layout-sidebar {
			grid-template-columns: 1fr;
		}

		.page-advertisers .reading {
			max-width: none;
		}

		.typography .advertisers {
			grid-template-columns: repeat(3, minmax(0, 1fr));
			gap: 2rem;
		}
	}

	.typography .advertisers > * {
		margin-top: 0;
	}

	.advertiser {
		border-top: 1px solid var(--color-ink);
		padding-top: 1rem;
	}

	.typography .advertiser img {
		display: block;
		width: auto;
		max-width: 11rem;
		height: 4rem;
		object-fit: contain;
		object-position: left center;
		margin: 0 0 0.75rem;
	}

	.advertiser p {
		font-family: var(--font-sans);
		font-size: var(--text-small);
		line-height: 1.5;
		overflow-wrap: anywhere;
	}

	.advertiser strong {
		font-family: var(--font-serif);
	}

	/* Contact page. */
	.contact-grid {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: 3rem;
	}

	@media (min-width: 64rem) {
		.contact-grid {
			grid-template-columns: minmax(0, 1fr) 20rem;
			gap: 3.5rem;
		}
	}

	.contact-aside {
		align-self: start;
	}

	.contact-form {
		margin-top: 2rem;
		border-top: 1px solid var(--color-rule);
		padding-top: 1.5rem;
	}

	.contact-form-title {
		margin-bottom: 1rem;
		font-size: var(--text-body);
		line-height: 1.4;
	}

	.map {
		position: relative;
		aspect-ratio: 4 / 3;
		margin-top: 1.25rem;
		border: 1px solid var(--color-rule);
	}

	.map iframe {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		border: 0;
	}

	/* Booking options: cards for each kind of advert on Book Online. */
	.option-grid {
		display: grid;
		gap: 1.5rem;
	}

	@media (min-width: 48rem) {
		.option-grid {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
	}

	.option-card {
		display: flex;
		flex-direction: column;
		border: 1px solid var(--color-ink);
		background: var(--color-white);
		padding: 1.5rem;
	}

	.option-card > * + * {
		margin-top: 0.75rem;
	}

	.option-card h2 {
		font-size: var(--text-h2);
	}

	.option-card p {
		font-size: var(--text-small);
		line-height: 1.5;
	}

	.option-card .icon-list {
		font-family: var(--font-sans);
		font-size: var(--text-small);
	}

	.option-card .icon-list li {
		display: flex;
		gap: 0.6rem;
	}

	.option-card .icon-list li + li {
		margin-top: 0.4rem;
	}

	.option-card .button {
		align-self: flex-start;
		margin-top: auto;
	}

	.option-card .icon-list {
		margin-bottom: 1.25rem;
	}

	.pull-quote {
		border-top: 1px solid var(--color-ink);
		padding-top: 1.25rem;
		font-size: var(--text-h3);
		font-weight: 600;
		line-height: 1.3;
		text-align: center;
		text-wrap: balance;
	}

	.pull-quote p::before {
		content: "\201C";
	}

	.pull-quote p::after {
		content: "\201D";
	}
}