/*
Theme Name: Field Notes Dark
Theme URI: https://robburke.net/
Author: Rob Burke
Description: robburke.net as field notes: a near-black ground, warm off-white text, one quiet blue accent, and the photographs carrying the colour. Antonio for the masthead, headings and labels; Noto Sans for text. Prose at 68ch and 18px; images, grids and heroes use the full width. Built against the approved Field Notes Dark v2 mockup and the 2026-09-26 target state spec.
Version: 0.1.1
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: field-notes-dark
*/

/*
 * Tokens come from theme.json (palette, fonts, sizes). The short aliases below
 * keep this file readable. Content width is 700px because 68ch of Noto Sans at
 * 18px measures 700.1px in Chrome (tools/shoot.js has the check); wide is 1100px.
 */
body {
	--fnd-bg: var(--wp--preset--color--ground, #141412);
	--fnd-ink: var(--wp--preset--color--ink, #ecebe6);
	--fnd-muted: var(--wp--preset--color--muted, #a3a29b);
	--fnd-rule: var(--wp--preset--color--rule, #34332e);
	--fnd-well: var(--wp--preset--color--well, #1e1e1b);
	--fnd-accent: var(--wp--preset--color--accent, #9fb3e6);
	--fnd-display: var(--wp--preset--font-family--antonio, Antonio, "Arial Narrow", sans-serif);
	--fnd-text: var(--wp--preset--font-family--noto-sans, "Noto Sans", system-ui, sans-serif);
	--fnd-gutter: max(16px, 5.5vw);
	--fnd-inner: var(--wp--style--global--wide-size, 1100px);
	--fnd-measure: var(--wp--style--global--content-size, 700px);

	/*
	 * Above the fold (Rob, 2026-09-27: "always enough above the fold to entice the
	 * reader to read downward"). Heroes are capped by the viewport height as well as
	 * the width, so the first screen also shows the words that make a reader scroll.
	 * Each reserve is the height kept free below the top of the viewport for the
	 * masthead and those words; tools/check_fold.js measures the result.
	 *   home:  masthead (148px) + intro padding, the premise (2 lines) and the
	 *          invitation (3 lines) at desktop widths, + 8px slack
	 *   quest: masthead + meta line, a 2-line title, a 3-line dek and the first line
	 *          of body text (the longest today: Legend of the Greasepole), + 8px slack
	 * A longer intro or dek than that pushes words below the fold; re-run the check
	 * after changing the masthead, the intro copy or the quest head styles.
	 * The minimum keeps a hero from becoming a sliver on short screens.
	 */
	--fnd-fold-home: 360px;
	--fnd-fold-quest: 525px;
	--fnd-hero-min: 200px;

	/* rb-field-notes was written for Chaplin; feed it this theme's colours */
	--accent-color: var(--fnd-accent);
	--secondary-color: var(--fnd-muted);
	--border-color: var(--fnd-rule);
	--light-background-color: rgba(159, 179, 230, 0.08);
	--headings-font: var(--fnd-display);

	margin: 0;
	background: var(--fnd-bg);
	color: var(--fnd-ink);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

html {
	background: #141412;
}

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

:focus-visible {
	outline: 2px solid var(--fnd-accent);
	outline-offset: 2px;
}

h1, h2, h3, h4, h5, h6 {
	text-wrap: balance;
}

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

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

/* The page stack: header, main, footer sit flush. */
.wp-site-blocks > *,
body .fnd-main,
body .fnd-main > * {
	margin-block: 0;
}

/* The inner column: 1100px, centred, never closer than the gutter to the edge. */
.fnd-in {
	width: min(var(--fnd-inner), 100% - 2 * var(--fnd-gutter));
	margin-inline: auto;
}

body .fnd-in > *,
body .fnd-header > *,
body .fnd-art-head > *,
body .fnd-feat > *,
body .fnd-feat__text > *,
body .fnd-card > *,
body .fnd-sec > *,
body .fnd-st > *,
body .fnd-st__text > *,
body .fnd-coll > *,
body .fnd-coll__cap > *,
body .fnd-starts > *,
body .fnd-cols > *,
body .fnd-recent > *,
body .fnd-start > *,
body .fnd-photos > *,
body .fnd-footer > * {
	margin-block: 0;
}

/* ------------------------------------------------------------------ masthead */

.fnd-header {
	padding-top: 16px;
}

.fnd-mast {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: end;
	gap: 14px;
	border-bottom: 1px solid var(--fnd-ink);
}

.fnd-mast__label {
	margin: 8px 0 0;
	align-self: start;
	writing-mode: vertical-rl;
	font: 500 10.5px/1.2 var(--fnd-text);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--fnd-muted);
}

.fnd-mast__title {
	margin: 0;
	padding-bottom: 10px;
	font: 700 clamp(46px, 6.6vw, 78px) / 0.9 var(--fnd-display);
	letter-spacing: 0.005em;
	text-transform: uppercase;
}

.fnd-mast__title a {
	color: inherit;
	text-decoration: none;
}

.fnd-issue {
	display: grid;
	gap: 5px;
	justify-items: end;
	text-align: right;
	padding-bottom: 12px;
}

.fnd-issue p {
	margin: 0;
}

.fnd-issue__month {
	font: 600 13px/1 var(--fnd-display);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--fnd-accent);
}

.fnd-issue__tagline {
	max-width: 26ch;
	font-size: 13px;
	font-style: italic;
	line-height: 1.35;
	color: var(--fnd-muted);
}

.fnd-tabs ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0 22px;
	margin: 0;
	padding: 0;
	list-style: none;
	border-bottom: 1px solid var(--fnd-rule);
	font-size: 13.5px;
}

.fnd-tabs a {
	display: block;
	padding: 11px 0;
	color: var(--fnd-muted);
	text-decoration: none;
}

.fnd-tabs a:hover {
	color: var(--fnd-ink);
}

.fnd-tabs a.is-current {
	color: var(--fnd-ink);
	font-weight: 600;
	box-shadow: inset 0 -2px 0 var(--fnd-accent);
}

/* -------------------------------------------------------------- shared roles */

.fnd-meta {
	margin: 0;
	font-size: 12.5px;
	letter-spacing: 0.02em;
	color: var(--fnd-muted);
}

.fnd-meta a {
	color: inherit;
	text-decoration: none;
}

.fnd-meta a:hover {
	color: var(--fnd-ink);
	text-decoration: underline;
}

.fnd-meta__no {
	color: var(--fnd-accent);
}

body .fnd-main .fnd-sec {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 12px;
	margin: 0 0 14px;
	padding-bottom: 6px;
	border-bottom: 1px solid var(--fnd-ink);
}

body .fnd-sec .fnd-sec__title {
	margin: 0;
	font: 700 26px/1 var(--fnd-display);
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

.fnd-sec__link,
.fnd-sec__link a,
a.fnd-sec__link {
	margin: 0;
	font-size: 14px;
	color: var(--fnd-accent);
	text-decoration: none;
}

.fnd-sec__link a:hover,
a.fnd-sec__link:hover {
	text-decoration: underline;
}

/* A title link that makes its whole card clickable, one tab stop per card. */
.fnd-card,
.fnd-feat,
.fnd-st,
.fnd-coll {
	position: relative;
}

.fnd-card__title a::after,
.fnd-feat__title a::after,
.fnd-st__title a::after,
.fnd-coll__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* ---------------------------------------------------------------- homepage */

/* The frame has a fixed height before any image arrives (the homepage picks its
   hero in the browser), so nothing below it moves when the image is inserted. */
.fnd-hero {
	position: relative;
	margin: 0;
	overflow: hidden;
	background: var(--fnd-well);
	height: clamp(240px, min(40vw, 100vh - var(--wp-admin--admin-bar--height, 0px) - var(--fnd-fold-home)), 500px);
}

/* svh (the viewport with the phone's browser bars showing) where supported. Not a
   second declaration in the same rule: with var() inside, an unsupported unit makes
   the property unset at computed-value time instead of falling back to vh. */
@supports (height: 100svh) {
	.fnd-hero {
		height: clamp(240px, min(40vw, 100svh - var(--wp-admin--admin-bar--height, 0px) - var(--fnd-fold-home)), 500px);
	}
}

.fnd-hero__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%; /* centre unless the page sets fnd_hero_position */
}

.fnd-hero__caption {
	position: absolute;
	left: var(--fnd-gutter);
	right: max(var(--fnd-gutter), (100% - var(--fnd-inner)) / 2);
	bottom: 10px;
	margin: 0;
	text-align: right;
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.86);
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

.fnd-hero__caption a {
	color: inherit;
}

/* With JavaScript on, the caption waits until the picked image is in the frame, so a
   late pick (an optimiser moving the scripts to the end of the page) swaps no text a
   reader has already seen. Visibility only: nothing moves. Without JavaScript, or in
   a browser without the scripting media feature, the caption simply shows. */
@media (scripting: enabled) {
	.fnd-hero[data-fnd-hero]:not([data-fnd-hero="done"]) .fnd-hero__caption {
		visibility: hidden;
	}
}

.fnd-intro {
	max-width: 68ch;
	padding-block: 30px;
}

.fnd-intro p {
	margin: 0;
}

.fnd-intro__premise {
	margin-bottom: 14px !important;
	font-size: 1.45em;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: -0.005em;
}

.fnd-intro__invite {
	margin-bottom: 14px !important;
	font-size: 1.12em;
	line-height: 1.5;
}

.fnd-intro__role {
	line-height: 1.55;
	color: var(--fnd-muted);
}

.fnd-intro__jump {
	margin-top: 16px !important;
	font-size: 15px;
	font-weight: 600;
}

.fnd-intro__jump a {
	color: var(--fnd-accent);
	text-decoration: none;
}

.fnd-intro__jump a:hover {
	text-decoration: underline;
}

.wp-block-post-template.fnd-featured__list,
.wp-block-post-template.fnd-cards__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* WordPress's flow layout adds a block-gap top margin to every item after the
   first; in a grid that pushes items 2 and 3 down. The grid gap does the spacing. */
body .wp-block-post-template.fnd-featured__list > li,
body .wp-block-post-template.fnd-cards__list > li {
	margin: 0;
}

.fnd-feat {
	display: grid;
	grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
	gap: 30px;
	align-items: center;
	padding-bottom: 40px;
}

.fnd-feat__img,
.fnd-card__img {
	margin: 0;
	background: var(--fnd-well);
}

.fnd-feat__img img,
.fnd-card__img img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

body .fnd-feat .fnd-feat__title {
	margin: 8px 0 12px;
	font: 700 44px/1 var(--fnd-display);
}

.fnd-feat__title a,
.fnd-card__title a,
.fnd-st__title a,
.fnd-coll__title a {
	color: inherit;
	text-decoration: none;
}

.fnd-feat__title a:hover,
.fnd-card__title a:hover,
.fnd-st__title a:hover {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

body .fnd-feat .fnd-feat__standfirst {
	margin-bottom: 14px;
}

.wp-block-read-more.fnd-go {
	position: relative;
	z-index: 1;
	font-size: 15px;
	font-weight: 600;
	color: var(--fnd-accent);
	text-decoration: none;
}

.wp-block-read-more.fnd-go:hover {
	text-decoration: underline;
}

.fnd-recent {
	padding-bottom: 38px;
}

.wp-block-post-template.fnd-cards__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 26px 20px;
}

body .fnd-card .fnd-meta {
	margin-top: 10px;
}

body .fnd-card .fnd-card__title {
	margin: 4px 0 6px;
	font: 700 23px/1.05 var(--fnd-display);
}

.fnd-card__line {
	margin: 0;
	font-size: 0.92em;
	line-height: 1.5;
	color: var(--fnd-muted);
}

.fnd-start {
	padding-bottom: 38px;
}

.fnd-starts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}

.fnd-st {
	display: grid;
	grid-template-columns: 84px minmax(0, 1fr);
	gap: 12px;
	align-items: start;
}

.fnd-st__img {
	margin: 0;
}

.fnd-st__img img {
	display: block;
	width: 84px;
	height: 84px;
	object-fit: cover;
}

body .fnd-st .fnd-st__title {
	margin: 0 0 4px;
	font: 700 20px/1.05 var(--fnd-display);
}

.fnd-st__why {
	font-size: 0.9em;
	line-height: 1.45;
	color: var(--fnd-muted);
}

.fnd-photos {
	padding-bottom: 38px;
}

.fnd-cols {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
}

.fnd-coll {
	overflow: hidden;
	background: var(--fnd-well);
}

.fnd-coll__img {
	margin: 0;
}

.fnd-coll__img img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.fnd-coll:hover .fnd-coll__img img {
	transform: scale(1.02);
}

.fnd-coll__cap {
	position: absolute;
	inset: auto 0 0 0;
	padding: 34px 14px 12px;
	background: linear-gradient(transparent, rgba(0, 0, 0, 0.78));
}

.fnd-coll__cap p {
	margin: 0;
}

.fnd-coll__title {
	display: block;
	font: 700 24px/1 var(--fnd-display);
	text-transform: uppercase;
	color: #fff;
}

.fnd-coll__sub {
	font-size: 12.5px;
	color: #d9d8d2;
}

.fnd-coll--flickr {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
	border: 1px solid var(--fnd-rule);
	background: transparent;
}

.fnd-coll--flickr .fnd-coll__cap {
	position: static;
	padding: 0;
	text-align: center;
	background: none;
}

.fnd-coll--flickr .fnd-coll__title {
	color: var(--fnd-ink);
}

.fnd-coll--flickr .fnd-coll__sub {
	color: var(--fnd-muted);
}

.fnd-irl {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
	gap: 28px;
	align-items: start;
	padding: 30px 0 36px;
	border-top: 1px solid var(--fnd-rule);
}

.fnd-irl--no-image {
	grid-template-columns: minmax(0, 1fr);
}

.fnd-irl__media figure {
	margin: 0;
}

.fnd-irl__media img {
	display: block;
	width: 100%;
	height: auto;
}

.fnd-irl__text h2 {
	margin: 0 0 10px;
	font: 700 30px/1 var(--fnd-display);
}

.fnd-irl__text p {
	max-width: 62ch;
	margin: 0 0 10px;
}

/* ------------------------------------------------------------------ links */

.fnd-prose a,
.fnd-irl a,
.fnd-standfirst a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: var(--fnd-accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.fnd-prose a:hover,
.fnd-irl a:hover,
.fnd-standfirst a:hover {
	color: var(--fnd-accent);
}

/* ------------------------------------------------ quests, pages and the arc */

.fnd-art-hero {
	margin: 0;
}

.fnd-art-hero img {
	display: block;
	width: 100%;
	height: clamp(var(--fnd-hero-min), min(38vw, 100vh - var(--wp-admin--admin-bar--height, 0px) - var(--fnd-fold-quest)), 480px);
	object-fit: cover;
	object-position: 50% 50%; /* centre unless the page sets fnd_hero_position */
}

@supports (height: 100svh) {
	.fnd-art-hero img {
		height: clamp(var(--fnd-hero-min), min(38vw, 100svh - var(--wp-admin--admin-bar--height, 0px) - var(--fnd-fold-quest)), 480px);
	}
}

.fnd-art-head {
	max-width: var(--fnd-measure);
	padding-block: 28px 6px;
}

.fnd-page .fnd-art-head {
	padding-top: 34px;
}

/* Short laptop screens (1280x720, 1366x768): the hero is already at or near its
   minimum there, so the head gives back a little space to keep the fold margin. */
@media (min-width: 641px) and (max-height: 780px) {
	body .fnd-quest .fnd-art-head {
		padding-top: 18px;
	}
}

body .fnd-art-head .fnd-art-title {
	max-width: 20ch;
	margin: 8px 0 12px;
	font: 700 clamp(40px, 6.4vw, 68px) / 0.96 var(--fnd-display);
}

body .fnd-page .fnd-art-head .fnd-art-title {
	margin-top: 0;
}

body .fnd-art-head .fnd-standfirst,
body .fnd-404 .fnd-standfirst {
	margin: 0;
	font-size: 1.18em;
	line-height: 1.45;
	color: var(--fnd-muted);
}

body .fnd-page-banner {
	margin: 18px 0 0;
}

.fnd-page-banner img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
}

body .fnd-prose {
	padding-block: 22px 12px;
	font-size: 18px;
	line-height: 1.66;
	overflow-wrap: break-word;
}

body .fnd-prose::after {
	content: "";
	display: table;
	clear: both;
}

.fnd-prose h2,
.fnd-prose h3,
.fnd-prose h4 {
	margin-block-start: 1.5em;
	letter-spacing: 0.005em;
}

.fnd-prose h2 {
	font-size: 34px;
}

.fnd-prose h3 {
	font-size: 26px;
}

.fnd-prose h4 {
	font-size: 21px;
}

.fnd-prose ul,
.fnd-prose ol {
	padding-left: 1.25em;
}

.fnd-prose li + li {
	margin-top: 8px;
}

.fnd-prose strong {
	font-weight: 700;
}

.fnd-prose blockquote,
.fnd-prose .wp-block-quote {
	margin-inline: 0;
	padding-left: 1em;
	border-left: 3px solid var(--fnd-accent);
	font-style: italic;
}

.fnd-prose .wp-block-separator,
.fnd-prose hr {
	border: 0;
	border-top: 1px solid var(--fnd-rule);
	opacity: 1;
}

.fnd-prose figcaption,
.fnd-prose .wp-caption-text {
	margin-top: 8px;
	font-size: 14px;
	line-height: 1.45;
	color: var(--fnd-muted);
}

.fnd-prose table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	border-collapse: collapse;
}

.fnd-prose td,
.fnd-prose th {
	padding: 6px 10px;
	border-bottom: 1px solid var(--fnd-rule);
}

.fnd-prose iframe,
.fnd-prose video {
	max-width: 100%;
}

/* Read narrow, browse wide: images, grids and embeds break out of the 68ch column. */
body .fnd-prose > .wp-block-image:not(.alignleft):not(.alignright):not(.is-resized),
body .fnd-prose > .wp-block-gallery,
body .fnd-prose > .wp-block-columns,
body .fnd-prose > .wp-block-cover,
body .fnd-prose > .wp-block-group.is-layout-grid,
body .fnd-prose > .wp-block-embed,
body .fnd-prose > .wp-block-video,
body .fnd-prose > .alignwide {
	max-width: var(--fnd-inner);
}

body .fnd-prose > .wp-block-image:not(.alignleft):not(.alignright):not(.is-resized) {
	margin-block: 1.4em;
}

.fnd-prose > .wp-block-image img {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: 85vh;
	height: auto;
}

/* An in-body image at least as wide as a phone's column is capped at 2x on a DPR 3
   phone (functions.php, fnd_content_img): that phone is told a slot two thirds of
   the real one, which is also the width a srcset image reports as natural. Drawn at
   the column's width instead, it looks exactly as before; only the file is smaller.
   Where 85vh caps the height (a tall image, a foldable), contain keeps the image's
   shape and left-top keeps it where width: auto would have put it. A link to the
   original around the image is an inline-block that would shrink to the reported
   width, so it takes the column's width too. */
@media (max-width: 640px) and (min-resolution: 2.75dppx) {
	.fnd-prose > .wp-block-image img.fnd-img-fill {
		width: 100%;
		object-fit: contain;
		object-position: left top;
	}

	.fnd-prose > .wp-block-image a:has(> img.fnd-img-fill) {
		width: 100%;
	}
}

/* Classic (pre-block) content: floats and captions from the old pages. */
.fnd-prose .alignleft {
	float: left;
	max-width: 50%;
	margin: 0.3em 1.4em 1em 0 !important;
}

.fnd-prose .alignright {
	float: right;
	max-width: 50%;
	margin: 0.3em 0 1em 1.4em !important;
}

/* Classic centred images only. A block figure.aligncenter keeps core's display:table,
   which is what lets its figcaption sit under the image instead of beside it. */
.fnd-prose img.aligncenter,
.fnd-prose .wp-caption.aligncenter {
	display: block;
	margin-inline: auto;
}

/* Inline span colours from the light-theme era (e.g. maroon) fail contrast on the
   dark ground; the surrounding text colour takes over. Block-level colours are untouched. */
.fnd-prose span[style^="color"] {
	color: inherit !important; /* inline styles win otherwise */
}

.fnd-prose .wp-caption {
	max-width: 100%;
}

.fnd-prose .wp-caption img {
	display: block;
}

/* "Try it yourself" strip (rb-field-notes pattern and group style). */
body .fnd-prose .wp-block-group.receipts,
body .fnd-prose .wp-block-group.is-style-receipts {
	display: grid;
	gap: 8px;
	margin-block: 0 26px;
	padding: 12px 16px;
	border-left: 4px solid var(--fnd-accent);
	background: rgba(159, 179, 230, 0.08);
}

body .fnd-prose .wp-block-group.receipts > *,
body .fnd-prose .wp-block-group.is-style-receipts > * {
	margin: 0;
}

body .fnd-prose .wp-block-group.receipts h5,
body .fnd-prose .wp-block-group.is-style-receipts h5 {
	margin: 0;
	font: 600 12px/1 var(--fnd-display);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fnd-accent);
}

body .fnd-prose .wp-block-group.receipts ul,
body .fnd-prose .wp-block-group.is-style-receipts ul {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

body .fnd-prose .wp-block-group.receipts li,
body .fnd-prose .wp-block-group.is-style-receipts li {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.5;
}

body .fnd-prose .wp-block-group.receipts a,
body .fnd-prose .wp-block-group.is-style-receipts a {
	text-decoration-color: currentColor;
}

/* A copyable prompt in the strip: a preformatted or code block. Prompts are prose,
   so they wrap rather than scroll sideways. assets/copy.js adds the Copy button
   (none without JavaScript) and wraps the block in .fnd-copyable. */
body .fnd-prose .wp-block-group.receipts pre,
body .fnd-prose .wp-block-group.is-style-receipts pre {
	max-width: 100%;
	margin: 0;
	padding: 10px 12px;
	border: 1px solid var(--fnd-rule);
	border-radius: 3px;
	background: rgba(0, 0, 0, 0.3);
	color: var(--fnd-ink);
	font: 14px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	tab-size: 4;
}

body .fnd-prose .wp-block-group.receipts pre code,
body .fnd-prose .wp-block-group.is-style-receipts pre code {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
}

.fnd-copyable {
	position: relative;
}

body .fnd-prose .wp-block-group.receipts .fnd-copyable > pre,
body .fnd-prose .wp-block-group.is-style-receipts .fnd-copyable > pre {
	padding-right: 78px; /* room for the button; must outrank the pre rule above */
}

.fnd-copy {
	position: absolute;
	top: 6px;
	right: 6px;
	padding: 3px 10px;
	border: 1px solid var(--fnd-accent);
	border-radius: 3px;
	background: var(--fnd-bg);
	color: var(--fnd-accent);
	font: 600 12px/1.5 var(--fnd-text);
	letter-spacing: 0.04em;
	cursor: pointer;
}

.fnd-copy:hover {
	background: var(--fnd-accent);
	color: var(--fnd-bg);
}

/* The first block of a quest is usually the strip: sit it close under the standfirst. */
body .fnd-quest .fnd-prose > .receipts:first-child {
	margin-top: 0;
}

/* Rob's bracketed update notes, and the "grew into" line. */
body .fnd-prose .fnd-aside {
	padding: 4px 0 4px 14px;
	border-left: 3px solid var(--fnd-accent);
	font-size: 0.9em;
	color: var(--fnd-muted);
}

body .fnd-prose p.is-style-grew-into {
	font-size: 15px;
	font-style: normal;
	color: var(--fnd-muted);
	border-left-color: var(--fnd-accent);
}

/* Earlier / next side quest (appended by rb-field-notes). */
body .fnd-prose .rb-arc-nav {
	gap: 14px;
	margin: 34px 0 34px;
	padding-top: 16px;
	border-top: 1px solid var(--fnd-rule);
}

body .fnd-prose .rb-arc-nav a.rb-arc-nav__link {
	text-decoration: none;
	color: var(--fnd-ink);
}

body .fnd-prose .rb-arc-nav__label,
body .fnd-prose .rb-arc-nav__month {
	font-size: 14px;
	letter-spacing: normal;
	text-transform: none;
	color: var(--fnd-muted);
}

body .fnd-prose .rb-arc-nav__title {
	margin: 4px 0 0;
	font: 700 21px/1.1 var(--fnd-display);
	color: var(--fnd-ink);
}

body .fnd-prose .rb-arc-nav a.rb-arc-nav__link:hover .rb-arc-nav__title,
body .fnd-prose .rb-arc-nav a.rb-arc-nav__link:focus-visible .rb-arc-nav__title {
	color: var(--fnd-accent);
}

/* Side Quests index, treatment C: compact rows grouped by month. */
body .fnd-index .fnd-art-head {
	padding-bottom: 22px;
}

body .fnd-index .fnd-art-head .fnd-meta {
	margin: 0 0 10px;
}

body .fnd-index .fnd-art-head .fnd-art-title {
	margin-bottom: 8px;
	text-transform: uppercase;
	letter-spacing: 0.005em;
}

.fnd-rows {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--fnd-ink);
}

.fnd-rows__item {
	display: grid;
	grid-template-columns: 92px minmax(0, 1fr);
	gap: 0 18px;
	border-bottom: 1px solid var(--fnd-rule);
}

.fnd-rows__month {
	padding-top: 18px;
	font: 600 13px/1 var(--fnd-display);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--fnd-accent);
}

/* Thumbnails grow with the screen, 132px up to 200px (critic, 2026-09-27). */
.fnd-row {
	display: grid;
	grid-template-columns: clamp(132px, 16vw, 200px) minmax(0, 1fr);
	gap: 18px;
	align-items: center;
	padding: 12px 0;
	color: inherit;
	text-decoration: none;
}

.fnd-row__th {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	background: var(--fnd-well);
	transition: filter 0.15s;
}

.fnd-row:hover .fnd-row__th {
	filter: brightness(1.08);
}

.fnd-row__body {
	display: grid;
	gap: 2px;
	min-width: 0;
}

.fnd-row__title {
	font: 700 22px/1.08 var(--fnd-display);
}

.fnd-row__line {
	font-size: 0.9em;
	line-height: 1.45;
	color: var(--fnd-muted);
}

.fnd-row:hover .fnd-row__title,
.fnd-row:focus-visible .fnd-row__title {
	color: var(--fnd-accent);
}

/* The month sits in its own column on wide screens; readers still hear it per row. */
.fnd-row__mo {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Below the rows: the signpost line and The arc so far, from page 3552 itself. */
body .fnd-index .fnd-prose {
	padding-top: 8px;
}

body .fnd-index .fnd-prose > h3 {
	padding-bottom: 6px;
	border-bottom: 1px solid var(--fnd-ink);
	font: 700 26px/1 var(--fnd-display);
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

body .fnd-index .fnd-prose > ol {
	padding-left: 30px;
}

body .fnd-index .fnd-prose > ol li::marker {
	font: 600 15px var(--fnd-display);
	color: var(--fnd-accent);
}

body .fnd-index .fnd-prose > ol strong {
	font: 600 13px/1 var(--fnd-display);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--fnd-muted);
}

body .fnd-index .fnd-prose > ol a {
	font-weight: 600;
}

/* ------------------------------------------------------------------ footer */

.fnd-footer {
	margin-top: 8px;
}

body .fnd-foot {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	margin: 0;
	padding-block: 18px 26px;
	border-top: 1px solid var(--fnd-rule);
	font-size: 14px;
	color: var(--fnd-muted);
}

.fnd-foot strong {
	color: var(--fnd-ink);
	font-weight: 600;
}

.fnd-foot a {
	color: inherit;
	text-decoration: none;
}

.fnd-foot a:hover {
	color: var(--fnd-ink);
	text-decoration: underline;
}

.fnd-pagination {
	margin-top: 24px;
}

/* ------------------------------------------------------------ narrower screens */

@media (max-width: 980px) {
	.fnd-starts {
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
	}
}

@media (max-width: 640px) {
	body {
		--fnd-hero-min: 220px; /* phones have the height to spare; keeps today's phone hero */
	}

	.fnd-header {
		padding-top: 8px;
	}

	.fnd-issue__tagline {
		display: none;
	}

	.fnd-tabs ul {
		gap: 0 16px;
		font-size: 13px;
	}

	.fnd-intro {
		padding-block: 22px 24px;
	}

	.fnd-intro__premise {
		font-size: 1.28em;
	}

	.fnd-feat {
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
	}

	body .fnd-feat .fnd-feat__title {
		font-size: 36px;
	}

	.wp-block-post-template.fnd-cards__list {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Photographs two across on the phone (Rob, 2026-09-27: "2 across is punchy");
	   the Flickr card runs as a full-width strip beneath the photo cards. */
	.fnd-cols {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	.fnd-coll__cap {
		padding: 26px 10px 9px;
	}

	.fnd-coll__title {
		font-size: 19px;
	}

	.fnd-coll__sub {
		font-size: 11.5px;
		line-height: 1.35;
	}

	.fnd-coll--flickr {
		grid-column: 1 / -1;
		aspect-ratio: auto;
		padding: 14px 12px;
	}

	.fnd-irl {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}

	body .fnd-prose {
		font-size: 17px;
	}

	.fnd-prose .alignleft,
	.fnd-prose .alignright {
		float: none;
		max-width: 100%;
		margin: 1em 0 !important;
	}

	body .fnd-prose .rb-arc-nav {
		grid-template-columns: minmax(0, 1fr);
	}

	body .fnd-prose .rb-arc-nav a.rb-arc-nav__next {
		grid-column: 1;
		text-align: left;
	}

	.fnd-rows__item {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Month captions stay on the phone, above the first row of each month. */
	.fnd-rows__item .fnd-rows__month {
		display: none;
	}

	.fnd-rows__item.is-first .fnd-rows__month {
		display: block;
		padding: 16px 0 0;
	}

	.fnd-row {
		grid-template-columns: 96px minmax(0, 1fr);
		gap: 14px;
		align-items: start;
	}

	.fnd-row__th {
		width: 96px;
		aspect-ratio: 1 / 1;
	}

	.fnd-row__title {
		font-size: 19px;
	}

	.fnd-row__line {
		font-size: 0.86em;
	}

	body .fnd-index .fnd-prose > ol {
		padding-left: 24px;
	}
}

/* ------------------------------------------------------------- short screens */

/*
 * Real browser chrome leaves much less height than the screen: a maximised Chrome
 * on a 768-tall laptop gives about 1366x641, on a 720-tall one about 1280x600, and
 * iPhone Safari with its bars about 390x664. Below 710px (where the normal layout
 * can no longer fit the longest quest head) the first screen gets compact: a lower
 * hero floor (140px, a wide strip rather than a sliver), a smaller masthead and
 * tabs, a smaller quest title and dek, and tighter spacing. The reserves are
 * re-measured for this layout (tools/check_fold.js: 1366x641, 1280x600, 390x664).
 */
@media (max-height: 710px) {
	body {
		--fnd-hero-min: 140px;
		--fnd-fold-home: 320px;  /* compact masthead (113px) + premise and invitation (199px) + 8px */
		--fnd-fold-quest: 428px; /* compact masthead + Greasepole's head and first body line (306px) + 8px */
	}

	.fnd-header {
		padding-top: 8px;
	}

	.fnd-tabs a {
		padding: 8px 0;
	}

	/* Once the masthead title is smaller, the vertical "Field notes" label sets the
	   masthead's height. */
	.fnd-mast__label {
		margin-top: 4px;
		font-size: 9px;
		letter-spacing: 0.06em;
	}

	body .fnd-quest .fnd-art-head {
		padding-top: 14px;
	}

	body .fnd-quest .fnd-art-head .fnd-art-title {
		margin: 6px 0 8px;
		font-size: clamp(40px, 6.4vw, 54px);
	}

	body .fnd-quest .fnd-art-head .fnd-standfirst {
		font-size: 1.08em;
	}

	body .fnd-quest .fnd-prose {
		padding-top: 14px;
	}
}

@media (min-width: 641px) and (max-height: 710px) {
	.fnd-mast__title {
		font-size: 60px;
	}

	.fnd-issue__tagline {
		max-width: 46ch; /* two lines instead of three */
		text-wrap: balance;
	}
}

@media (max-width: 640px) and (max-height: 710px) {
	body {
		--fnd-fold-quest: 464px; /* phone: 112px masthead + Greasepole's 343px + 8px; 38vw usually caps first */
	}
}