/* =============================================================================
   Homepage sections — newsletter reasons (four panels) and Field Notes
   (Blog lane + Stream lane). Approved design: vault
   1. Projects/courtneyr.dev/homepage-newsletter-field-notes (Newsletter B +
   Field Notes A, 2026-09-12). Loaded only when the queried content carries
   .cr-reasons or .cr-fieldnotes (inc/home-sections.php).

   Both sections sit on palette surfaces that the homepage keeps light in dark
   mode (components.css "Lock dark text inside any homepage palette-color
   surface"). Paper objects inside them therefore use the literal palette
   tokens, and the semantic --cr-* tokens are re-pinned to their light values
   inside the Field Notes lanes so the Stream cards and Blog chips stay
   readable in dark mode. Geometry comes from the approved prototype
   (newsletter.css .news-b branch, field.css .field-a branch, stream overrides).
   ============================================================================= */

/* ----------------------------------------------------------------------------
   Dark mode: nothing is re-pinned. tokens.css keeps --cr-surface ivory and
   --cr-ink russian violet in both schemes (paper stays paper), while body
   text follows --wp--preset--color--main and turns light. The sheets below
   therefore set their own ink instead of inheriting the band's text colour.
   ---------------------------------------------------------------------------- */


/* =============================================================================
   Newsletter reasons
   ============================================================================= */
.cr-reasons {
	--cr-reasons-ink: var(--cr-ink, #241c4a);
	--cr-reasons-paper: var(--cr-surface, #fbfaf5);
	--cr-chip-ink: var(--cr-ink, #241c4a);
	color: var(--cr-reasons-ink);
	padding-block: var(--cr-space-3xl) var(--cr-space-2xl);
}
.cr-reasons > * + * { margin-block-start: 0; }

/* Intro: title column + copy column */
.cr-reasons .cr-reasons__intro {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	gap: var(--cr-space-2xl) 3.625rem;
	align-items: center;
	margin-block-end: 2.8rem;
}
.cr-reasons .cr-reasons__intro-title { position: relative; }
.cr-reasons .cr-reasons__intro-title::before {
	/* registration cross, decorative */
	content: "";
	position: absolute;
	left: -1.625rem;
	top: 0.25rem;
	width: 1rem;
	height: 1rem;
	background:
		linear-gradient(var(--cr-reasons-ink), var(--cr-reasons-ink)) center / 100% 1px no-repeat,
		linear-gradient(var(--cr-reasons-ink), var(--cr-reasons-ink)) center / 1px 100% no-repeat;
}
.cr-reasons .cr-reasons__eyebrow {
	gap: 0.75rem 1.125rem;
	margin-block-end: 1.4rem;
	font-family: var(--cr-font-mono);
	font-size: max(var(--cr-text-floor, 0.7rem), 0.75rem);
	line-height: 1.6;
	text-transform: uppercase;
}
.cr-reasons .cr-reasons__edition,
.cr-reasons .cr-reasons__kicker {
	margin: 0;
	font: inherit;
	line-height: inherit;
}
.cr-reasons .cr-reasons__edition {
	font-weight: var(--cr-weight-bold);
	background: var(--cr-reasons-paper);
	border: 1px solid var(--cr-reasons-ink);
	box-shadow: 4px 4px 0 var(--cr-selective-yellow);
	transform: rotate(-1.2deg);
	padding: 0.25rem 0.625rem;
}
.cr-reasons .cr-reasons__title {
	font-family: var(--cr-font-accent);
	font-weight: var(--cr-weight-extrabold, 800);
	font-size: clamp(2.4375rem, 1.5rem + 3.2vw, 3.375rem);
	line-height: 1.06;
	max-width: 17ch;
	margin: 0;
	text-wrap: balance;
}
.cr-reasons .cr-reasons__title .cr-highlight {
	/* yellow band under the word, as approved: 59%–93% of the line box */
	background: linear-gradient(transparent 59%, var(--cr-selective-yellow) 59%, var(--cr-selective-yellow) 93%, transparent 93%);
	padding: 0;
	color: var(--cr-chip-ink);
}
.cr-reasons .cr-reasons__intro-copy { padding-block-start: 0.375rem; max-width: 49ch; }
.cr-reasons .cr-reasons__lede {
	margin: 0;
	font-size: var(--cr-text-md);
	line-height: 1.55;
}
.cr-reasons .cr-reasons__hand {
	display: block;
	margin: 1.125rem 0 0;
	font-family: var(--cr-font-display);
	font-size: 1rem;
	line-height: 1.8;
}

/* Four panels */
.cr-reasons .cr-reasons__panels {
	gap: 2.375rem 1.5rem;
	margin: 0;
}
.cr-reasons .cr-reasons__panel {
	position: relative;
	min-width: 0;
	margin: 0;
	padding: 0 1.5625rem 1.625rem;
	background: var(--cr-reasons-paper);
	color: var(--cr-reasons-ink);
	border: 2px solid var(--cr-reasons-ink);
	box-shadow: var(--cr-shadow-hard-2, 6px 6px 0 var(--cr-reasons-ink));
}
.cr-reasons .cr-reasons__audience {
	display: inline-flex;
	position: relative;
	gap: 0;
	margin: -1rem 0 1rem -0.5625rem;
	background: var(--cr-reasons-ink);
	color: var(--cr-ink-inverse, #fbfaf5);
	border: 2px solid var(--cr-reasons-ink);
	width: max-content;
	max-width: calc(100% + 0.5625rem);
}
.cr-reasons .cr-reasons__number,
.cr-reasons .cr-reasons__audience-name { margin: 0; }
.cr-reasons .cr-reasons__number {
	font-family: var(--cr-font-accent);
	font-weight: var(--cr-weight-extrabold, 800);
	font-size: 1.6875rem;
	line-height: 1.12;
	color: var(--cr-chip-ink);
	background: var(--cr-selective-yellow);
	padding: 0.3125rem 0.625rem;
}
.cr-reasons .cr-reasons__audience-name {
	font-family: var(--cr-font-mono);
	font-size: max(var(--cr-text-floor, 0.7rem), 0.8125rem);
	line-height: 1.3;
	text-transform: uppercase;
	padding: 0.5rem 1rem;
	align-self: center;
}
.cr-reasons .cr-reasons__panel-body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 4.75rem;
	gap: 0.9375rem;
	align-items: center;
}
.cr-reasons .cr-reasons__panel-title {
	font-family: var(--cr-font-accent);
	font-weight: var(--cr-weight-extrabold, 800);
	font-size: 1.875rem;
	line-height: 1.12;
	max-width: 22ch;
	margin: 0 0 0.875rem;
	text-wrap: balance;
}
.cr-reasons .cr-reasons__panel-text {
	margin: 0;
	font-size: var(--cr-text-md);
	line-height: 1.45;
	max-width: 40ch;
}
.cr-reasons .cr-reasons__drawing {
	display: block;
	width: 4.75rem;
	height: 5.375rem;
	stroke: var(--cr-reasons-ink);
	stroke-width: 2.3;
	stroke-linecap: round;
	stroke-linejoin: round;
	fill: none;
	overflow: visible;
}
.cr-reasons .cr-reasons__drawing .spot { fill: var(--cr-selective-yellow); stroke: none; }
.cr-reasons .cr-reasons__panel:nth-child(2) .cr-reasons__drawing .spot,
.cr-reasons .cr-reasons__panel:nth-child(3) .cr-reasons__drawing .spot { fill: var(--cr-sky-blue); }

/* Personalized guidance */
.cr-reasons .cr-reasons__contact {
	gap: 2.1875rem;
	margin-block-start: 2.125rem;
	padding-block-start: 1.625rem;
	border-top: 5px double var(--cr-reasons-ink);
}
.cr-reasons .cr-reasons__contact-copy { flex: 1 1 24rem; min-width: 0; }
.cr-reasons .cr-reasons__contact-title {
	font-family: var(--cr-font-accent);
	font-weight: var(--cr-weight-extrabold, 800);
	font-size: 1.4375rem;
	line-height: 1.12;
	margin: 0 0 0.4375rem;
}
.cr-reasons .cr-reasons__contact-text {
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.5;
	max-width: 74ch;
}
.cr-reasons .cr-reasons__contact-action { margin: 0; }
.cr-reasons .cr-reasons__contact-action .wp-block-button__link::after {
	content: "↗" / "";
	margin-inline-start: 0.6em;
	font-size: 1.35em;
	line-height: 0.8;
}

@media (min-width: 43.8125em) and (max-width: 62.5em) {
	.cr-reasons .cr-reasons__intro { gap: 1.875rem; }
	.cr-reasons .cr-reasons__panel { padding: 0 1.25rem 1.5rem; }
	.cr-reasons .cr-reasons__number { font-size: 1.5625rem; }
	.cr-reasons .cr-reasons__panel-body { grid-template-columns: minmax(0, 1fr) 3.25rem; gap: 0.75rem; }
	.cr-reasons .cr-reasons__drawing { width: 3.25rem; height: 4.0625rem; }
	.cr-reasons .cr-reasons__panel-title { font-size: 1.625rem; }
}
@media (max-width: 43.75em) {
	.cr-reasons { padding-block: 2.625rem 2.25rem; }
	.cr-reasons .cr-reasons__intro { display: block; margin-block-end: 2.625rem; }
	.cr-reasons .cr-reasons__intro-title::before { display: none; }
	.cr-reasons .cr-reasons__title { font-size: 2.4375rem; line-height: 1.12; }
	.cr-reasons .cr-reasons__eyebrow { font-size: max(var(--cr-text-floor, 0.7rem), 0.6875rem); gap: 0.625rem; margin-block-end: 1.125rem; }
	.cr-reasons .cr-reasons__intro-copy { margin-block-start: 1.375rem; }
	.cr-reasons .cr-reasons__hand { margin: 1.125rem 0 1.5rem; }
	.cr-reasons .cr-reasons__panels { gap: 2.25rem; grid-template-columns: minmax(0, 1fr); }
	.cr-reasons .cr-reasons__panel { padding: 0 1.25rem 1.5rem; }
	.cr-reasons .cr-reasons__audience { margin-left: -0.5rem; }
	.cr-reasons .cr-reasons__number { font-size: 1.5rem; }
	.cr-reasons .cr-reasons__audience-name { font-size: max(var(--cr-text-floor, 0.7rem), 0.75rem); padding: 0.5rem 0.875rem; }
	.cr-reasons .cr-reasons__panel-body { display: block; position: relative; }
	.cr-reasons .cr-reasons__panel-title { font-size: 1.75rem; max-width: none; padding-inline-end: 3.375rem; }
	.cr-reasons .cr-reasons__drawing { position: absolute; top: 0; right: 0; width: 2.6875rem; height: 3rem; }
	.cr-reasons .cr-reasons__contact { margin-block-start: 1.875rem; gap: 1.25rem; }
	.cr-reasons .cr-reasons__contact-title { font-size: 1.5rem; }
}

/* =============================================================================
   Field Notes
   ============================================================================= */
.cr-fieldnotes {
	--cr-fn-ink: var(--cr-ink, #241c4a);
	--cr-fn-paper: var(--cr-surface, #fbfaf5);
	--cr-chip-ink: var(--cr-ink, #241c4a);
	position: relative;
	color: var(--cr-fn-ink);
	padding-block: 3.1875rem 3.5rem;
}
.cr-fieldnotes::before,
.cr-fieldnotes::after {
	/* registration corners */
	content: "";
	position: absolute;
	width: 0.8125rem;
	height: 0.8125rem;
	pointer-events: none;
}
.cr-fieldnotes::before { top: 1.6875rem; left: -1.75rem; border-top: 1px solid var(--cr-fn-ink); border-left: 1px solid var(--cr-fn-ink); }
.cr-fieldnotes::after { bottom: 1.8125rem; right: -1.75rem; border-bottom: 1px solid var(--cr-fn-ink); border-right: 1px solid var(--cr-fn-ink); }

/* Masthead */
.cr-fieldnotes .cr-fieldnotes__masthead {
	gap: 1.5rem;
	padding-block-end: 1.75rem;
	margin-block-end: 1.9375rem;
	border-bottom: 6px solid var(--cr-fn-ink);
}
.cr-fieldnotes .cr-fieldnotes__title {
	position: relative;
	isolation: isolate;
	margin: 0;
	font-family: var(--cr-font-accent);
	font-weight: var(--cr-weight-extrabold, 800);
	font-size: clamp(2.875rem, 2rem + 4vw, 4.75rem);
	line-height: 1.08;
}
.cr-fieldnotes .cr-fieldnotes__title::after {
	content: "";
	position: absolute;
	z-index: -1;
	left: 0;
	right: 0;
	bottom: 0.04em;
	height: 0.3em;
	background: var(--cr-sky-blue);
}
.cr-fieldnotes .cr-fieldnotes__hand {
	margin: 0 0 0.3125rem;
	font-family: var(--cr-font-display);
	font-size: 1.0625rem;
	line-height: 1.65;
}

/* Lanes */
.cr-fieldnotes .cr-fieldnotes__lane { margin: 0; }
.cr-fieldnotes .cr-fieldnotes__lane--stream { margin-block-start: 2.5rem; }
.cr-fieldnotes .cr-fieldnotes__lane-head {
	gap: 1.0625rem;
	margin-block-end: 1.375rem;
}
.cr-fieldnotes .cr-fieldnotes__lane-head::after {
	content: "";
	flex: 1 1 auto;
	height: 2px;
	background: var(--cr-fn-ink);
}
.cr-fieldnotes .cr-fieldnotes__lane-title {
	margin: 0;
	padding: 0.375rem 0.75rem 0.5rem;
	background: var(--cr-ut-orange);
	color: var(--cr-chip-ink);
	font-family: var(--cr-font-accent);
	font-weight: var(--cr-weight-extrabold, 800);
	font-size: 1.4375rem;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
}
.cr-fieldnotes .cr-fieldnotes__lane-title--stream { background: var(--cr-sky-blue); }
/* The nav's 📰 / 🌊 lead the lane titles. The plain declaration renders
   everywhere; browsers that know the alt-text form take the second one and
   keep the emoji out of the accessible name. */
.cr-fieldnotes .cr-fieldnotes__lane-title--blog::before { content: "📰"; content: "📰" / ""; margin-inline-end: 0.4em; }
.cr-fieldnotes .cr-fieldnotes__lane-title--stream::before { content: "🌊"; content: "🌊" / ""; margin-inline-end: 0.4em; }
.cr-fieldnotes .cr-fieldnotes__caption {
	margin: -0.75rem 0 1.75rem;
	font-size: 1.0625rem;
	line-height: 1.4;
	max-width: 40ch;
}
.cr-fieldnotes .cr-fieldnotes__empty { margin: 0; font-style: italic; }

/* Blog row: featured card left, three supporting previews right */
.cr-fieldnotes .cr-fieldnotes__blog-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 1.5rem;
	align-items: start;
}
.cr-fieldnotes .cr-fieldnotes__lead-list,
.cr-fieldnotes .cr-fieldnotes__support-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.cr-fieldnotes .cr-fieldnotes__lead-list > li,
.cr-fieldnotes .cr-fieldnotes__support-list > li { margin: 0; padding: 0; }
.cr-fieldnotes .cr-fieldnotes__lead-list > li::before,
.cr-fieldnotes .cr-fieldnotes__support-list > li::before { content: none; }

.cr-fieldnotes .cr-home-story { margin: 0; }
.cr-fieldnotes .cr-home-story--lead {
	position: relative;
	padding: 1.3125rem 1.3125rem 1.5rem;
	background: var(--cr-fn-paper);
	border: 2px solid var(--cr-fn-ink);
	box-shadow: var(--cr-shadow-hard, 4px 4px 0 var(--cr-fn-ink));
}
.cr-fieldnotes .cr-home-story--lead::before {
	/* the /blog/ "★ Latest ★" masking-tape flag, in the approved yellow */
	content: "★ Latest ★";
	position: absolute;
	top: -0.625rem;
	left: 1.875rem;
	z-index: 1;
	padding: 0.1875rem 0.625rem;
	background: var(--cr-selective-yellow);
	color: var(--cr-chip-ink);
	border-top: 1px solid var(--cr-fn-ink);
	border-bottom: 1px solid var(--cr-fn-ink);
	font-family: var(--cr-font-mono);
	font-size: max(var(--cr-text-floor, 0.7rem), 0.7rem);
	font-weight: var(--cr-weight-bold);
	letter-spacing: var(--cr-tracking-wide);
	text-transform: uppercase;
	transform: rotate(-2.5deg);
}
.cr-fieldnotes .cr-home-story__image,
.cr-fieldnotes .cr-home-story__image figure { margin: 0 0 1.125rem; }
.cr-fieldnotes .cr-home-story__image img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--cr-fn-ink);
}
.cr-fieldnotes .cr-home-story__title-row {
	gap: 0.875rem;
	align-items: stretch;
}
.cr-fieldnotes .cr-home-story__title-row .media-glyph {
	flex: 0 0 2.5rem;
	width: 2.5rem;
	height: auto; /* the shared avatar class fixes 2.5rem; the panel must stretch to the title */
	min-height: 2.5rem;
	align-self: stretch;
	transform: none;
	box-shadow: none;
	display: grid;
	place-items: center;
	background: var(--cr-fn-ink);
	color: var(--cr-ink-inverse, #fbfaf5);
	border: 2px solid var(--cr-fn-ink);
}
.cr-fieldnotes .cr-home-story__title-row .media-glyph.cr-icon-avatar--outline {
	background: var(--cr-fn-paper);
	color: var(--type-color, var(--cr-fn-ink));
}
.cr-fieldnotes .cr-home-story__title-row .media-glyph svg {
	width: 1.25rem;
	height: 1.25rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.cr-fieldnotes .cr-home-story__title-row .media-glyph svg .cr-icon-fill { fill: currentColor; stroke: none; }
.cr-fieldnotes .cr-home-story__title {
	margin: 0;
	min-width: 0;
	font-family: var(--cr-font-accent);
	font-weight: var(--cr-weight-extrabold, 800);
	font-size: 1.5625rem;
	line-height: 1.15;
	overflow-wrap: anywhere;
}
.cr-fieldnotes .cr-home-story--lead .cr-home-story__title { font-size: 2.125rem; line-height: 1.12; }
.cr-fieldnotes .cr-home-story__title a { color: inherit; text-decoration: none; }
.cr-fieldnotes .cr-home-story__title a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.14em; }
.cr-fieldnotes .cr-home-story__chips {
	margin: 0.875rem 0 0 3.375rem; /* glyph width + gap: chips align with the title text */
}
.cr-fieldnotes .cr-home-story__excerpt {
	margin: 0.8125rem 0 0;
	font-size: var(--cr-text-md);
	line-height: 1.45;
}
.cr-fieldnotes .cr-home-story__excerpt p { margin: 0; }
.cr-fieldnotes .cr-fieldnotes__support-list {
	border-top: 1px solid var(--cr-fn-ink);
	padding-block-start: 1.375rem;
}
.cr-fieldnotes .cr-fieldnotes__support-list > li + li {
	border-top: 1px solid var(--cr-fn-ink);
	margin-block-start: 1.4375rem;
	padding-block-start: 1.375rem;
}

/* Lane links */
.cr-fieldnotes .cr-fieldnotes__lane-link { margin: 1.5625rem 0 0; }
.cr-fieldnotes .cr-fieldnotes__lane-link .wp-block-button__link::after {
	content: "→" / "";
	margin-inline-start: 0.7em;
	font-size: 1.4em;
	line-height: 0.8;
}
.cr-fieldnotes .cr-fieldnotes__lane-link--blog { display: flex; justify-content: flex-end; }

/* Stream lane: the /stream/ artifacts inside a homepage-sized collage */
.cr-fieldnotes .cr-home-stream .wp-block-post-template {
	columns: 4;
	column-gap: 2rem;
	max-width: none;
}
.cr-fieldnotes .cr-home-stream .wp-block-post-template > li { margin: 0.5rem 0 2rem; }
.cr-fieldnotes .cr-home-stream .pk-card.k-photo,
.cr-fieldnotes .cr-home-stream .pk-card--gallery { max-width: 13.75rem; margin-inline: auto; }
.cr-fieldnotes .cr-home-stream .pk-card--gallery .cr-booth { width: 10rem; max-width: 100%; margin-inline: auto; }
.cr-fieldnotes .cr-home-stream .pk-card--gallery .pk-title { font-size: 0.875rem; line-height: 1.5; }
.cr-fieldnotes .cr-home-stream .pk-card--gallery .cr-stamp--seal { width: 4.25rem; height: 4.25rem; }
.cr-fieldnotes .cr-home-stream .pk-card--gallery .cr-stamp--rect { width: 6.75rem; height: auto; }
.cr-fieldnotes .cr-home-stream .pk-card.k-read { max-width: 15.625rem; margin-inline: auto; }
.cr-fieldnotes .cr-home-stream .pk-card.k-read .pk-body { padding: 0.875rem 0.75rem 0.75rem; }
.cr-fieldnotes .cr-home-stream .pk-card.k-read .cr-book__hand { font-size: 0.875rem; }
.cr-fieldnotes .cr-home-stream .cr-note-artifact--stream { max-width: 15.625rem; margin-inline: auto; }

@media (max-width: 73.6875em) { .cr-fieldnotes .cr-home-stream .wp-block-post-template { columns: 3; } }
@media (max-width: 56.1875em) { .cr-fieldnotes .cr-home-stream .wp-block-post-template { columns: 2; } }
@media (max-width: 37.5em) {
	.cr-fieldnotes .cr-home-stream .wp-block-post-template { columns: 1; }
	.cr-fieldnotes .cr-home-stream .pk-card.k-photo,
	.cr-fieldnotes .cr-home-stream .pk-card--gallery,
	.cr-fieldnotes .cr-home-stream .pk-card.k-read,
	.cr-fieldnotes .cr-home-stream .cr-note-artifact--stream { margin-inline: auto; }
}

@media (max-width: 60em) {
	.cr-fieldnotes .cr-fieldnotes__title { font-size: clamp(2.875rem, 2rem + 4vw, 4.375rem); }
	.cr-fieldnotes .cr-home-story--lead { padding: 1.1875rem 1.125rem 1.375rem; }
	.cr-fieldnotes .cr-home-story--lead .cr-home-story__title { font-size: 1.9375rem; }
}
@media (max-width: 45em) {
	.cr-fieldnotes { padding-block: 2.125rem 2.5rem; }
	.cr-fieldnotes::before,
	.cr-fieldnotes::after { display: none; }
	.cr-fieldnotes .cr-fieldnotes__masthead { display: block; padding-block-end: 1.375rem; margin-block-end: 1.6875rem; }
	.cr-fieldnotes .cr-fieldnotes__title { display: inline-block; font-size: 2.75rem; }
	.cr-fieldnotes .cr-fieldnotes__hand { margin: 0.5rem 0 0; font-size: 1rem; }
	.cr-fieldnotes .cr-fieldnotes__lane-title { font-size: 1.375rem; }
	.cr-fieldnotes .cr-fieldnotes__blog-row { display: block; }
	.cr-fieldnotes .cr-fieldnotes__support-list { margin-block-start: 1.5rem; }
	.cr-fieldnotes .cr-home-story--lead { padding: 1.125rem 1rem 1.3125rem; }
	.cr-fieldnotes .cr-home-story--lead .cr-home-story__title { font-size: 1.8125rem; }
	.cr-fieldnotes .cr-home-story__title { font-size: 1.5rem; }
	.cr-fieldnotes .cr-fieldnotes__lane-link--blog { justify-content: flex-start; }
	.cr-fieldnotes .cr-fieldnotes__lane--stream { margin-block-start: 1.75rem; padding-block-start: 1.8125rem; border-top: 3px solid var(--cr-fn-ink); }
}

/* ---- Focus: two-tone ring ----
   tokens.css:610 gives every link a 3px selective-yellow ring. Measured on
   these sections it reads 1.67:1 against the ivory sheets and 1.30:1 against
   the blue band, under the 3:1 that WCAG 1.4.11 asks of a focus indicator.
   An ink halo outside the yellow ring puts a 3:1 boundary on both edges
   (yellow/ink 8.6:1). Scoped to the links this stylesheet owns; the stream
   cards keep the plugin and theme adapter treatment they have on /stream/. */
.cr-reasons :is(a, button):focus-visible,
.cr-fieldnotes :is(.cr-home-story a, .cr-fieldnotes__lane-link a):focus-visible {
	outline: 3px solid var(--cr-focus-ring, #ffb703);
	outline-offset: 2px;
	box-shadow: 0 0 0 7px var(--cr-ink, #241c4a);
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

/* ---- Paper sheets carry their own ink ----
   Measured in dark mode before this rule: panel text rgb(251,250,245) on a
   rgb(251,250,245) panel, lead-card title the same (axe color-contrast x5).
   The sheets are --cr-surface in both schemes, so their text is --cr-ink in
   both schemes; everything on the band keeps inheriting the body colour. */
.cr-reasons .cr-reasons__panel,
.cr-reasons .cr-reasons__edition,
.cr-fieldnotes .cr-home-story--lead {
	color: var(--cr-ink, #241c4a);
}

/* ---- Dark mode: the chips keep dark text ----
   tokens.css turns --cr-ink light in dark mode; the selective-yellow, orange
   and sky chips (panel numbers, lane titles, the Latest tape, the highlighted
   word) stay saturated, so their text takes the inverse ink there. The only
   dark-mode selectors in this file. */
:root[data-theme="dark"] .cr-reasons,
:root[data-theme="dark"] .cr-fieldnotes {
	--cr-chip-ink: var(--cr-ink-inverse, #241c4a);
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .cr-reasons,
	:root:not([data-theme="light"]) .cr-fieldnotes {
		--cr-chip-ink: var(--cr-ink-inverse, #241c4a);
	}
}

/* ---- Panels wiggle like the hero polaroid ----
   Same recipe as `body.home .wp-block-cover:has(img[src*="courtney-pirate"])`
   in components.css: a resting tilt, hover / focus-within straightens it and
   lifts the shadow, transform + shadow transition over 0.3s. The four resting
   angles are the ones the previous newsletter cards used (components.css
   v0.5.19), alternating direction so the grid does not read as one tilt.
   Reduced motion keeps the tilt and drops the transition. */
.cr-reasons .cr-reasons__panel {
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.cr-reasons .cr-reasons__panel:nth-child(1) { transform: rotate(-1.8deg); }
.cr-reasons .cr-reasons__panel:nth-child(2) { transform: rotate(1.2deg); }
.cr-reasons .cr-reasons__panel:nth-child(3) { transform: rotate(-0.7deg); }
.cr-reasons .cr-reasons__panel:nth-child(4) { transform: rotate(1.5deg); }
.cr-reasons .cr-reasons__panel:hover,
.cr-reasons .cr-reasons__panel:focus-within {
	transform: rotate(0deg);
	box-shadow: var(--cr-shadow-hard-2, 6px 6px 0 var(--cr-reasons-ink)), 0 14px 28px rgba(36, 28, 74, 0.18);
}
@media (prefers-reduced-motion: reduce) {
	.cr-reasons .cr-reasons__panel { transition: none; }
	.cr-reasons .cr-reasons__panel:hover,
	.cr-reasons .cr-reasons__panel:focus-within { transform: revert; box-shadow: revert; }
}