/* ==========================================================================
   THE EMPIRE CITY TIMES — NEWSPAPER STYLES
   ==========================================================================
   No font family is named in this file. Type comes from the role tokens in
   fonts.css (--font-masthead / --font-headline-banner / --font-headline /
   --font-body) and from that file's optical-tuning tokens. To change a font,
   edit fonts.css. See docs/fonts.md.

   Mobile-first. Enhanced upward with min-width queries.
   ========================================================================== */


/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {
	/* Newsprint palette — see docs/design-spec.md */
	--paper: #f4f1e8;
	--paper-aged: #ece7d9;
	--ink: #141210;
	--ink-soft: #4a463f;
	--rule: #1a1815;
	--accent: #8c1c13;

	--measure-max: 1180px;
	--gutter: 1.15rem;
	--rule-hair: 1px;
	--rule-heavy: 3px;
}


/* ==========================================================================
   2. RESET / BASE
   ========================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	padding: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: calc(1rem * var(--body-scale, 1));
	line-height: var(--body-leading, 1.5);
	/* Very subtle newsprint grain. CSS-generated, no image, well under the
	   contrast threshold for body text. */
	background-image: repeating-linear-gradient(
		0deg,
		rgba(20, 18, 16, 0.014) 0 1px,
		transparent 1px 3px
	);
}

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

a {
	color: inherit;
	text-decoration: none;
	border-bottom: var(--rule-hair) solid rgba(20, 18, 16, 0.35);
}

a:hover {
	border-bottom-color: var(--ink);
}

a:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
	border-bottom-color: transparent;
}

/* Screen-reader-only, for structural headings the layout doesn't show */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}


/* ==========================================================================
   3. PAGE SHELL
   ========================================================================== */

.paper {
	max-width: var(--measure-max);
	margin: 0 auto;
	padding: 0.75rem var(--gutter) 2rem;
}

@media (min-width: 700px) {
	.paper {
		padding: 1.5rem 2rem 3rem;
		border-left: var(--rule-hair) solid rgba(20, 18, 16, 0.18);
		border-right: var(--rule-hair) solid rgba(20, 18, 16, 0.18);
	}
}


/* ==========================================================================
   4. MASTHEAD
   ========================================================================== */

.masthead {
	border-bottom: var(--rule-heavy) solid var(--rule);
	padding-bottom: 0.35rem;
	margin-bottom: 0;
}

/* Weather box (left) and edition badge (right) flank the masthead on desktop,
   and stack above it on mobile. */
.masthead__ears {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.5rem;
	align-items: start;
	font-family: var(--font-headline);
	font-size: 0.66rem;
	line-height: 1.35;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--ink-soft);
}

@media (min-width: 820px) {
	.masthead__ears {
		grid-template-columns: 1fr auto 1fr;
		gap: 1rem;
	}
	.masthead__ear--right {
		justify-self: end;
		text-align: right;
	}
}

.masthead__ear {
	border: var(--rule-hair) solid var(--rule);
	padding: 0.3rem 0.45rem;
	max-width: 15rem;
}

.masthead__ear dt {
	font-weight: 700;
	letter-spacing: 0.1em;
	margin: 0 0 0.15rem;
	border-bottom: var(--rule-hair) solid rgba(20, 18, 16, 0.3);
}

.masthead__ear dd {
	margin: 0;
	display: flex;
	justify-content: space-between;
	gap: 0.5rem;
}

.masthead__badge {
	border: 2px solid var(--rule);
	padding: 0.35rem 0.7rem;
	text-align: center;
	font-weight: 700;
	letter-spacing: 0.14em;
	color: var(--ink);
	align-self: start;
	max-width: 15rem;
}

.masthead__badge span {
	display: block;
	font-size: 0.58rem;
	letter-spacing: 0.1em;
	color: var(--ink-soft);
}

/* The paper's name. The one place blackletter is used. */
.masthead__title {
	font-family: var(--font-masthead);
	font-weight: var(--masthead-weight, 400);
	font-size: calc(clamp(2.2rem, 8.5vw, 5.5rem) * var(--masthead-scale, 1));
	letter-spacing: var(--masthead-tracking, 0.01em);
	text-transform: var(--masthead-transform, none);
	line-height: 1;
	text-align: center;
	margin: 0.5rem 0 0.15rem;
	padding: 0 0.25rem;
	/* Blackletter faces sit low in the em box; the pack tunes this. */
	transform: translateY(var(--masthead-optical-lift, 0));
}

/* On inner pages the masthead links home; it must not pick up the link underline. */
.masthead__title a {
	border-bottom: 0;
}

.masthead__title a:hover {
	color: var(--accent);
}

.masthead__motto {
	font-family: var(--font-headline);
	font-size: 0.68rem;
	text-transform: uppercase;
	letter-spacing: 0.22em;
	text-align: center;
	color: var(--ink-soft);
	margin: 0 0 0.4rem;
}

/* Folio strip: volume, date, price, page. Smallest type on the page. */
.folio {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.3rem 1rem;
	border-top: var(--rule-hair) solid var(--rule);
	border-bottom: var(--rule-hair) solid var(--rule);
	padding: 0.28rem 0.1rem;
	margin-bottom: 1.1rem;
	font-family: var(--font-headline);
	font-size: 0.64rem;
	text-transform: uppercase;
	letter-spacing: 0.11em;
	color: var(--ink-soft);
}


/* ==========================================================================
   5. SHARED ARTICLE TYPE
   ========================================================================== */

.kicker {
	font-family: var(--font-headline);
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--accent);
	margin: 0 0 0.3rem;
}

.headline {
	font-family: var(--font-headline);
	font-weight: var(--headline-weight, 700);
	font-size: calc(clamp(1.5rem, 3.4vw, 2.4rem) * var(--headline-scale, 1));
	letter-spacing: var(--headline-tracking, 0.03em);
	line-height: 1;
	text-transform: uppercase;
	margin: 0 0 0.4rem;
}

.headline a {
	border-bottom: none;
}

.headline a:hover {
	border-bottom: 2px solid var(--ink);
}

.deck {
	font-family: var(--font-headline);
	font-weight: 700;
	font-size: calc(clamp(1rem, 1.9vw, 1.35rem) * var(--headline-scale, 1));
	letter-spacing: var(--headline-tracking, 0.03em);
	line-height: 1.2;
	margin: 0 0 0.55rem;
	padding-bottom: 0.45rem;
	border-bottom: var(--rule-hair) solid var(--rule);
}

.byline {
	font-family: var(--font-headline);
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--ink-soft);
	margin: 0 0 0.7rem;
}

.byline strong {
	color: var(--ink);
	letter-spacing: 0.14em;
}

.article-body p {
	margin: 0 0 0.65rem;
	hyphens: auto;
	overflow-wrap: break-word;
}

.article-body .dateline {
	font-family: var(--font-headline);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.jump {
	font-family: var(--font-headline);
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--ink-soft);
	font-style: italic;
	margin: 0.4rem 0 0;
}

figure {
	margin: 0 0 0.9rem;
}

figcaption {
	font-size: 0.82rem;
	font-style: italic;
	color: var(--ink-soft);
	border-top: var(--rule-hair) solid var(--rule);
	padding-top: 0.3rem;
	margin-top: 0.3rem;
}

/* Photographs get a halftone-ish treatment via CSS so source files stay reusable. */
.halftone {
	filter: grayscale(1) contrast(1.18) brightness(0.98);
	border: var(--rule-hair) solid var(--rule);
}

/* Stand-in for the photograph the Times has never managed to obtain. */
.no-photo {
	border: var(--rule-hair) solid var(--rule);
	background: var(--paper-aged);
	background-image: repeating-linear-gradient(
		45deg,
		rgba(20, 18, 16, 0.07) 0 6px,
		transparent 6px 12px
	);
	min-height: 11rem;
	display: grid;
	place-content: center;
	text-align: center;
	padding: 1.25rem;
	font-family: var(--font-headline);
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--ink-soft);
	line-height: 1.5;
}


/* ==========================================================================
   6. FRONT PAGE — ABOVE THE FOLD
   ========================================================================== */

.lead {
	margin-bottom: 1.25rem;
}

.lead__banner {
	font-family: var(--font-headline-banner);
	font-weight: var(--banner-weight, 400);
	font-size: calc(clamp(2.4rem, 9vw, 5.5rem) * var(--banner-scale, 1));
	letter-spacing: var(--banner-tracking, 0.022em);
	line-height: var(--banner-leading, 0.94);
	text-transform: uppercase;
	margin: 0 0 0.5rem;
}

.lead__deck {
	font-family: var(--font-headline);
	font-weight: 700;
	font-size: calc(clamp(1.15rem, 3vw, 1.95rem) * var(--headline-scale, 1));
	letter-spacing: var(--headline-tracking, 0.03em);
	line-height: 1.16;
	margin: 0 0 0.6rem;
	padding-bottom: 0.5rem;
	border-bottom: var(--rule-heavy) solid var(--rule);
}

/* The reward call-out: loudest element after the banner.
   container-type lets the address below size itself against THIS box's width
   rather than the viewport's, which is what keeps it on one line inside the
   narrow sidebar column. */
.reward {
	border: 3px double var(--rule);
	background: var(--paper-aged);
	padding: 0.9rem 1rem;
	margin: 0 0 1rem;
	text-align: center;
	container-type: inline-size;
}

/* Deliberately NOT a figure. The paper is offering "money" in the way a
   cartoon offers money. See docs/decisions.md entry 021. */
.reward__amount {
	font-family: var(--font-headline-banner);
	font-weight: var(--banner-weight, 400);
	font-size: calc(clamp(2.6rem, 15cqi, 4.2rem) * var(--banner-scale, 1));
	line-height: 0.9;
	letter-spacing: 0.06em;
	color: var(--accent);
	margin: 0 0 0.1rem;
	/* The dollar signs are decoration, not a quantity. Keep them off one
	   another so they read as a motif rather than a number. */
	word-spacing: 0.05em;
}

.reward__label {
	font-family: var(--font-headline);
	font-weight: 700;
	font-size: 0.92rem;
	text-transform: uppercase;
	letter-spacing: var(--microcaps-tracking, 0.15em);
	line-height: 1.25;
	margin: 0 0 0.45rem;
}

.reward__terms {
	font-family: var(--font-headline);
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: var(--microcaps-tracking, 0.15em);
	color: var(--ink-soft);
	line-height: 1.4;
	margin: 0 0 0.5rem;
}

/* Display-only address. Deliberately NOT a link and NOT wired to anything.
   See docs/decisions.md entries 007, 008, 022 and 030.

   SET IN THE BODY SERIF, NOT THE HEADLINE FACE. An email address is a string
   of unfamiliar characters that has to be read letter by letter, and an
   ultra-bold condensed face is the worst possible choice for that - the
   headline family exists to be scanned as word-shapes, which is exactly what
   an address is not. The serif has open counters and real letterforms, and
   the dollar signs above already carry the shouting.

   MUST STAY ON ONE LINE. cqi is a percentage of .reward's inline size, so
   this shrinks to fit the box at any viewport width instead of wrapping.
   The plain font-size on the line above is the fallback for anything without
   container query support; it is small enough to fit unaided.

   TUNING: if it wraps, lower the cqi coefficient. If it looks cramped, raise
   --address-tracking (and lower the coefficient to pay for the extra width). */
.reward__address {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 0.8rem;
	font-size: clamp(0.6rem, 4.6cqi, 1.2rem);
	letter-spacing: var(--address-tracking, 0.045em);
	white-space: nowrap;
	overflow-wrap: normal;
	word-break: normal;
	border-top: var(--rule-hair) solid var(--rule);
	border-bottom: var(--rule-hair) solid var(--rule);
	padding: 0.45rem 0;
	margin: 0;
	/* User-selectable so a reader can copy it; it is text, nothing more. */
	user-select: all;
}

.reward__smallprint {
	font-size: 0.72rem;
	font-style: italic;
	color: var(--ink-soft);
	margin: 0.5rem 0 0;
	line-height: 1.4;
}

/* The site speaking, not the fictional newspaper.
   DELIBERATELY NOT in the paper's voice and NOT styled like the joke around
   it: upright rather than italic, full-strength --ink rather than the muted
   --ink-soft used for in-fiction small print, and set in the headline face so
   it reads as a notice rather than as more copy. A disclaimer that looks like
   part of the gag does not work as a disclaimer.
   Required by tools/check-site.sh on any page showing the address. */
.parody-notice {
	border-top: 2px solid var(--rule);
	margin: 0.7rem 0 0;
	padding-top: 0.5rem;
	font-family: var(--font-headline);
	font-size: 0.76rem;
	line-height: 1.45;
	letter-spacing: 0.015em;
	font-style: normal;
	color: var(--ink);
	text-align: left;
}

.parody-notice strong {
	display: block;
	text-transform: uppercase;
	letter-spacing: var(--microcaps-tracking, 0.15em);
	color: var(--accent);
	margin-bottom: 0.15rem;
}

/* Standalone (article body) rather than inside the boxed call-out. */
.article-body .parody-notice {
	border: 2px solid var(--rule);
	background: var(--paper-aged);
	padding: 0.7rem 0.85rem;
	margin: 1rem 0;
}

.lead__aside {
	border: var(--rule-hair) solid var(--rule);
	padding: 0.7rem 0.8rem;
	background: var(--paper-aged);
	margin: 0 0 1rem;
}

.lead__aside h3 {
	font-family: var(--font-headline);
	font-weight: 700;
	font-size: 1.05rem;
	text-transform: uppercase;
	line-height: 1.1;
	letter-spacing: var(--headline-tracking, 0.03em);
	margin: 0 0 0.4rem;
	padding-bottom: 0.3rem;
	border-bottom: var(--rule-hair) solid var(--rule);
}

.lead__aside p {
	margin: 0;
	font-size: 0.85rem;
}

/* The fold */
.fold {
	border: 0;
	border-top: 5px double var(--rule);
	margin: 1.5rem 0;
}


/* ==========================================================================
   7. LAYOUT — COLUMNS
   Single column on mobile, always. Newspaper columns are unreadable on a
   phone. Multi-column only from 700px up.
   ========================================================================== */

.cols-2,
.cols-3 {
	column-gap: 1.6rem;
	column-rule: var(--rule-hair) solid rgba(20, 18, 16, 0.35);
}

@media (min-width: 700px) {
	.cols-2 { column-count: 2; }
	.cols-3 { column-count: 2; }
	.article-body { text-align: justify; }
}

@media (min-width: 1000px) {
	.cols-3 { column-count: 3; }
}

/* Drop cap — hero body only */
.dropcap::first-letter {
	font-family: var(--font-headline-banner);
	font-weight: var(--banner-weight, 400);
	float: left;
	font-size: 3.4em;
	line-height: 0.78;
	padding: 0.06em 0.1em 0 0;
}

/* Page-level grid: lead block, then the secondary stories beside furniture. */
.grid-lead {
	display: grid;
	gap: 1.25rem;
}

@media (min-width: 900px) {
	.grid-lead {
		grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr);
		align-items: start;
	}
}

.grid-main {
	display: grid;
	gap: 1.5rem;
}

@media (min-width: 900px) {
	.grid-main {
		grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr);
		align-items: start;
	}
}

.stories {
	display: grid;
	gap: 1.4rem;
}

.story {
	border-top: var(--rule-hair) solid var(--rule);
	padding-top: 0.7rem;
}

.story--minor .headline {
	font-size: calc(clamp(1.15rem, 2.2vw, 1.5rem) * var(--headline-scale, 1));
}


/* ==========================================================================
   8. FURNITURE — teasers, weather, classifieds, ads, corrections
   ========================================================================== */

.sidebar {
	display: grid;
	gap: 1.25rem;
	align-content: start;
}

.box {
	border: var(--rule-hair) solid var(--rule);
	padding: 0.75rem 0.85rem;
}

.box--filled {
	background: var(--paper-aged);
}

.box__title {
	font-family: var(--font-headline);
	font-weight: 700;
	font-size: 0.9rem;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	text-align: center;
	margin: 0 0 0.55rem;
	padding-bottom: 0.35rem;
	border-bottom: 2px solid var(--rule);
}

/* Teaser strip across the page */
.teasers {
	display: grid;
	gap: 0.85rem;
	border-top: 2px solid var(--rule);
	border-bottom: 2px solid var(--rule);
	padding: 0.8rem 0;
	margin: 1.5rem 0;
}

@media (min-width: 700px) {
	.teasers { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; }
	.teasers > * + * {
		border-left: var(--rule-hair) solid rgba(20, 18, 16, 0.35);
		padding-left: 1.4rem;
	}
}

.teaser h3 {
	font-family: var(--font-headline);
	font-weight: 700;
	font-size: 1.05rem;
	letter-spacing: var(--headline-tracking, 0.03em);
	line-height: 1.12;
	text-transform: uppercase;
	margin: 0 0 0.3rem;
}

.teaser p {
	margin: 0;
	font-size: 0.85rem;
}

/* Weather */
.weather__reading {
	font-family: var(--font-headline-banner);
	font-weight: var(--banner-weight, 400);
	font-size: 2.6rem;
	letter-spacing: var(--banner-tracking, 0.022em);
	line-height: 1;
	text-align: center;
	margin: 0 0 0.2rem;
}

.weather__reading .unit {
	font-size: 0.5em;
	letter-spacing: var(--microcaps-tracking, 0.15em);
	vertical-align: 0.28em;
}

.weather__summary {
	font-size: 0.84rem;
	margin: 0 0 0.5rem;
	text-align: center;
	font-style: italic;
	color: var(--ink-soft);
}

.weather__table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--font-headline);
	font-size: 0.74rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.weather__table th,
.weather__table td {
	text-align: left;
	padding: 0.22rem 0;
	border-bottom: var(--rule-hair) solid rgba(20, 18, 16, 0.25);
}

.weather__table td:last-child {
	text-align: right;
	font-weight: 700;
	white-space: nowrap;
}

.weather__note {
	font-size: 0.72rem;
	font-style: italic;
	color: var(--ink-soft);
	line-height: 1.4;
	margin: 0.5rem 0 0;
}

/* Classifieds */
.classifieds dl {
	margin: 0;
	font-size: 0.8rem;
	line-height: 1.42;
}

.classifieds dt {
	font-family: var(--font-headline);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 0.72rem;
	margin-top: 0.6rem;
	color: var(--ink-soft);
}

.classifieds dt:first-child {
	margin-top: 0;
}

.classifieds dd {
	margin: 0.15rem 0 0;
	padding-bottom: 0.4rem;
	border-bottom: var(--rule-hair) dotted rgba(20, 18, 16, 0.4);
}

/* In-paper advertisement */
.ad {
	border: 3px double var(--rule);
	padding: 0.85rem;
	text-align: center;
	background: var(--paper-aged);
}

.ad__name {
	font-family: var(--font-headline-banner);
	font-weight: var(--banner-weight, 400);
	font-size: clamp(1.3rem, 4vw, 1.85rem);
	letter-spacing: var(--banner-tracking, 0.022em);
	line-height: 1.02;
	text-transform: uppercase;
	margin: 0 0 0.3rem;
}

.ad__copy {
	font-size: 0.82rem;
	margin: 0;
	line-height: 1.4;
}

.ad__flag {
	font-family: var(--font-headline);
	font-size: 0.66rem;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--ink-soft);
	margin: 0.45rem 0 0;
	border-top: var(--rule-hair) solid var(--rule);
	padding-top: 0.3rem;
}

/* Corrections */
.corrections p {
	font-size: 0.8rem;
	margin: 0 0 0.55rem;
	line-height: 1.45;
}

.corrections p:last-child {
	margin-bottom: 0;
}


/* ==========================================================================
   9. ARTICLE PAGES
   ========================================================================== */

.article-page {
	max-width: 46rem;
	margin: 0 auto;
}

.article-page .lead__banner,
.article-page .headline--article {
	font-family: var(--font-headline-banner);
	font-weight: var(--banner-weight, 400);
	font-size: calc(clamp(2rem, 7vw, 3.6rem) * var(--banner-scale, 1));
	letter-spacing: var(--banner-tracking, 0.022em);
	line-height: var(--banner-leading, 0.94);
	text-transform: uppercase;
	margin: 0 0 0.5rem;
}

.crumbs {
	font-family: var(--font-headline);
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	margin: 0 0 1rem;
	color: var(--ink-soft);
}

.article-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.5rem;
	justify-content: space-between;
	border-top: 2px solid var(--rule);
	padding-top: 0.8rem;
	margin-top: 1.75rem;
	font-family: var(--font-headline);
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

/* Generous touch targets in furniture and nav */
.article-nav a,
.crumbs a,
.teaser h3 a {
	display: inline-block;
	padding: 0.35rem 0;
}


/* ==========================================================================
   10. COLOPHON / FOOTER
   ========================================================================== */

.colophon {
	border-top: 5px double var(--rule);
	margin-top: 2rem;
	padding-top: 0.9rem;
	font-size: 0.78rem;
	color: var(--ink-soft);
	line-height: 1.5;
}

.colophon__grid {
	display: grid;
	gap: 0.9rem;
	margin-bottom: 0.9rem;
}

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

.colophon h2 {
	font-family: var(--font-headline);
	font-size: 0.74rem;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	margin: 0 0 0.3rem;
	color: var(--ink);
}

.colophon p {
	margin: 0 0 0.35rem;
}

/* Required on every page. Plain text, always visible, never styled away. */
.disclaimer {
	border: var(--rule-hair) solid var(--rule);
	background: var(--paper-aged);
	padding: 0.7rem 0.85rem;
	font-size: 0.8rem;
	line-height: 1.5;
	color: var(--ink);
}

.disclaimer strong {
	font-family: var(--font-headline);
	text-transform: uppercase;
	letter-spacing: 0.1em;
}


/* ==========================================================================
   11. PREFERENCES
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}


/* ==========================================================================
   12. PRINT
   A newspaper that prints badly is a missed joke.
   ========================================================================== */

@media print {
	:root {
		--paper: #fff;
		--paper-aged: #fff;
		--ink: #000;
		--ink-soft: #333;
	}

	body {
		background-image: none;
		font-size: 9.5pt;
	}

	.paper {
		max-width: none;
		border: 0;
		padding: 0;
	}

	.article-nav,
	.crumbs {
		display: none;
	}

	.story,
	.teaser,
	.box,
	.ad {
		break-inside: avoid;
	}

	a {
		border-bottom: 0;
	}

	.halftone {
		filter: grayscale(1) contrast(1.3);
	}
}