:root {
	/* The story column (FC-40): the hero's text block and the article below
	   it share these, so the body starts exactly under the title. */
	--fc-col: 62rem;
	--fc-gutter: 1.5rem;
	--fc-bg: #0d1310;        /* Deep Forest Pine */
	--fc-panel: #1a1512;     /* Ember Ash — warm. Replaced #141414, which sat
	                            1.02:1 from the background and never read as
	                            a separate surface. Separation comes from
	                            --fc-line, not from this fill. */
	--fc-text: #d6cdc2;      /* Aged Bone White — 11.96:1 */
	--fc-accent: #8b3a2b;    /* Crimson Rust — FILL ONLY. 2.45:1 on the bg, so
	                            never text and never a small mark. */
	--fc-ember: #c9622f;     /* Ember — 4.72:1. Every small bright mark: pins,
	                            focus rings, active flags. */
	--fc-amber: #d4a373;     /* Lantern Amber — 8.31:1 */
	--fc-line: rgba(214, 205, 194, .18);

	/* The archive paper kit (FC-35) — header and map page. */
	--fc-red-text: #dd5a44;  /* 4.97:1 — red that may be text or a small
	                            mark, which --fc-accent may not. */
	--fc-red-fill: #8f2618;  /* worn stamp red, fills only */
	--fc-edge: rgba(176, 72, 52, .55);   /* the thin red-brown border */
	--fc-sheet: #1c1511;     /* panel paper, darkest */
	--fc-sheet-2: #251c16;   /* panel paper, lifted */
	--fc-paper: #b8a07a;     /* old paper, for the one light strip */
	/* The client's dark paper. Every dark surface on the header and map page
	   is cut from it at the same scale, so they read as one sheet. */
	--fc-tex: url("img/paper-dark.webp") center / 1400px auto repeat;
	/* Warm speckle, tiled: grain without an image request. */
	--fc-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .62 0 0 0 0 .5 0 0 0 0 .38 0 0 0 .2 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

.fc-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

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

/* The class is doubled to reach specificity (0,2,0). Themes commonly style
   links as `.theme-class a` (0,1,1), which beats a single class and would
   render this button's label in the theme's link colour. Self-contained on
   purpose — no theme class name is hardcoded. Applies to the rules below too. */
.fc-btn.fc-btn {
	display: inline-block;
	padding: .7em 1.4em;
	border: 1px solid var(--fc-accent);
	background: var(--fc-accent);
	color: #f5efe8;
	font: inherit;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
}

.fc-btn.fc-btn:hover,
.fc-btn.fc-btn:focus-visible { background: #a04532; }

/* Doubled to match .fc-btn.fc-btn above, which would otherwise win on padding. */
.fc-btn--sm.fc-btn--sm { padding: .5em 1em; font-size: .85em; }

.fc-notice {
	margin: 0 0 1.5rem;
	padding: 1rem 1.2rem;
	border-left: 3px solid var(--fc-amber);
	background: var(--fc-panel);
	color: var(--fc-text);
}

.fc-notice--err { border-left-color: var(--fc-accent); }

/* ---------- submission form ---------- */

.fc-form { color: var(--fc-text); max-width: 46rem; }
.fc-form p { margin: 0 0 1.4rem; }
.fc-form label { display: block; margin-bottom: .4rem; letter-spacing: .04em; }
.fc-form small { display: block; margin-top: .35rem; opacity: .6; }
.fc-req { color: var(--fc-accent); }

.fc-form input[type=text],
.fc-form input[type=email],
.fc-form input[type=url],
.fc-form textarea,
.fc-form select {
	width: 100%;
	padding: .7em .8em;
	border: 1px solid var(--fc-line);
	background: var(--fc-panel);
	color: var(--fc-text);
	font: inherit;
}

.fc-form input:focus,
.fc-form textarea:focus,
.fc-form select:focus {
	outline: 2px solid var(--fc-amber);
	outline-offset: 1px;
}

/* ---------- location picker (FC-30) ---------- */

/* Matches the .fc-form p rhythm; the picker is a div because it holds a map. */
.fc-pick { position: relative; margin: 0 0 1.4rem; }

.fc-pick__results {
	position: absolute;
	/* Above Leaflet's control panes, which sit at 1000. At 500 the zoom
	   buttons showed through the results list. */
	z-index: 1100;
	left: 0;
	right: 0;
	margin: 0;
	padding: 0;
	border: 1px solid var(--fc-line);
	background: var(--fc-panel);
	box-shadow: 0 10px 28px rgba(0, 0, 0, .45);
	list-style: none;
}

.fc-pick__hit {
	display: block;
	width: 100%;
	padding: .6em .8em;
	border: 0;
	border-bottom: 1px solid var(--fc-line);
	background: transparent;
	color: var(--fc-text);
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.fc-pick__results li:last-child .fc-pick__hit { border-bottom: 0; }

.fc-pick__hit:hover,
.fc-pick__hit:focus-visible {
	background: rgba(212, 163, 115, .12);
	color: var(--fc-amber);
	outline: 0;
}

/* Empty most of the time — it must not reserve a line of space when silent. */
.fc-pick__note { margin: .4rem 0 0; color: var(--fc-amber); font-size: .9em; }
.fc-pick__note:empty { display: none; }

/* Fixed height, because the map is the thing being pointed at. The stage class
   is shared with the atlas, which brings the tile grading and pin palette. */
.fc-pick__stage { height: 320px; margin-top: .6rem; border: 1px solid var(--fc-line); }

/* Grab, not pointer: the whole affordance is that this thing moves. */
.fc-pin--pick { cursor: grab; }
.fc-pin--pick:active { cursor: grabbing; }
.fc-pin--pick span { background: var(--fc-ember); }

.fc-consent label { display: flex; gap: .6rem; align-items: flex-start; line-height: 1.5; }
.fc-consent input { margin-top: .25rem; flex: none; }

/* Honeypot: off-screen, not display:none — bots skip hidden fields. */
.fc-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------- likes ---------- */

.fc-like {
	display: inline-flex;
	gap: .45em;
	align-items: center;
	padding: .45em .9em;
	border: 1px solid var(--fc-line);
	background: transparent;
	color: var(--fc-text);
	font: inherit;
	cursor: pointer;
}

.fc-like:hover:not(:disabled) { border-color: var(--fc-amber); }
.fc-like__mark { color: var(--fc-line); transition: color .2s; }
.fc-like.is-liked .fc-like__mark { color: var(--fc-accent); }
.fc-like:disabled { cursor: default; }

/* ---------- map ---------- */

/* width:100% because Breakdance renders its Code Block wrapper as a flex
   container — without it the atlas shrinks to content width. */
.fc-atlas { width: 100%; }
.fc-map-stage { position: relative; width: 100%; min-height: 320px; }
.fc-map { width: 100%; height: 100%; background: var(--fc-bg); }

/* The whole "weathered atlas" look, in one line.
   invert + hue-rotate(185deg) turns the bright OSM basemap dark while keeping
   water blue-ish; sepia/saturate then push it toward aged pine. */
.fc-map-stage.grade-invert .leaflet-tile-pane {
	filter: invert(1) hue-rotate(185deg) brightness(.68) contrast(1.15) sepia(.6) saturate(1.6);
}

/* Stamen Terrain is already parchment-toned — just age it slightly. */
.fc-map-stage.grade-age .leaflet-tile-pane {
	filter: sepia(.35) saturate(.85) contrast(1.05) brightness(.97);
}

/* Stamen terrain relief aged to dark paper (FC-36, retuned FC-44): forest goes
   near-black olive, dry country stays warm tan, water slate. Brightness and
   contrast pull against each other here — contrast above ~1.5 crushes the
   forest to flat black and the ridges vanish; below ~1.3 the map turns to
   mustard. Sepia stays low so it reads charcoal, not brown. */
.fc-map-stage.grade-paper .leaflet-tile-pane {
	filter: sepia(.6) saturate(.8) hue-rotate(4deg) brightness(.58) contrast(1.4);
}

/* Stamen's names are black with a white halo; inverted they become light with
   a dark halo — legible on the darkened relief — and sepia warms the white to
   the cream of the rest of the page. */
.fc-map-stage .leaflet-fc-labels-pane {
	filter: grayscale(1) invert(1) sepia(.7) saturate(1.4) brightness(.92);
	opacity: .95;
}

.fc-map-stage.grade-paper::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 405;
	pointer-events: none;
	background: var(--fc-tex);
	mix-blend-mode: soft-light;
	opacity: .95;
}

/* Burnt edges and a red-brown keyline. Above the map pane (400), below the
   legend (440) and Leaflet's controls (1000) — edge-only, so a pin near the
   rim is dimmed a little rather than hidden. */
.fc-map-stage.grade-paper::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 410;
	pointer-events: none;
	background: radial-gradient(ellipse at center, transparent 52%, rgba(22, 13, 8, .72) 100%);
	box-shadow: inset 0 0 0 1px var(--fc-edge), inset 0 0 80px rgba(0, 0, 0, .55);
}

.fc-map .leaflet-control-attribution {
	background: rgba(13, 19, 16, .8);
	color: var(--fc-text);
}

.fc-map .leaflet-control-attribution a { color: var(--fc-amber); }

/* Ember glass (FC-43): pins and clusters are lit from inside rather than
   solid discs, so the terrain shows through and the ring reads as a glow. */
:root {
	--fc-glass: radial-gradient(circle at 50% 42%, rgba(52, 12, 8, .72), rgba(34, 7, 4, .86) 72%);
	--fc-glass-ring: rgba(255, 96, 66, .92);
	--fc-glass-glow: 0 0 6px rgba(255, 84, 52, .85), 0 0 22px rgba(214, 48, 26, .55), inset 0 0 14px rgba(255, 78, 48, .5);
}

.fc-pin span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	margin: 2px;
	border: 2px solid var(--fc-glass-ring);
	border-radius: 50%;
	background: var(--fc-glass);
	/* Frosts map labels behind the count so they don't read through it. */
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	box-shadow: var(--fc-glass-glow);
	color: var(--fc-ink);
	text-shadow: 0 0 6px rgba(255, 84, 52, .9);
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
}

.fc-pin--active span { animation: fc-pulse 2.2s ease-out infinite; }

@keyframes fc-pulse {
	0%   { box-shadow: var(--fc-glass-glow), 0 0 0 0 rgba(214, 48, 26, .55); }
	70%  { box-shadow: var(--fc-glass-glow), 0 0 0 18px rgba(214, 48, 26, 0); }
	100% { box-shadow: var(--fc-glass-glow), 0 0 0 0 rgba(214, 48, 26, 0); }
}

/* A pin wearing the icons filed at its place. Two fit side by side; a third
   would shrink them past reading, which is what the fan is for. */
.fc-pin__art {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1px;
	box-sizing: border-box;
	min-width: 34px;
	height: 34px;
	padding: 0 6px;
	margin: 2px auto 0;
	border: 2px solid var(--fc-glass-ring);
	border-radius: 999px;
	background: var(--fc-glass);
	/* Frosts map labels behind the count so they don't read through it. */
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	box-shadow: var(--fc-glass-glow);
}

/* The icon art is drawn in dark rust, which sinks into the red glass; lift it
   to an ember so it reads. */
.fc-pin__art img,
.fc-cluster span img { filter: brightness(1.9) saturate(1.2) drop-shadow(0 0 3px rgba(255, 84, 52, .85)); }

.fc-pin__art img { width: 19px; height: 19px; object-fit: contain; display: block; }

/* The tally hangs below the circle, the way a case count would be pencilled
   under a marker on a board. */
.fc-pin__tally {
	display: block;
	width: 17px;
	height: 17px;
	margin: -3px auto 0;
	border: 1px solid var(--fc-glass-ring);
	border-radius: 50%;
	background: rgba(60, 10, 6, .82);
	box-shadow: 0 0 8px rgba(255, 84, 52, .6);
	color: var(--fc-ink);
	font-size: 10px;
	font-style: normal;
	font-weight: 700;
	line-height: 15px;
	text-align: center;
}

.fc-pin--active .fc-pin__art { animation: fc-pulse 2.2s ease-out infinite; }

/* The fan: a place holding several icons offers them before the panel opens. */
.fc-fan {
	position: absolute;
	z-index: 600;
	display: flex;
	gap: .4rem;
	padding: .4rem;
	border: 1.5px solid var(--fc-glass-ring);
	border-radius: 999px;
	background: rgba(26, 12, 8, .9);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	box-shadow: var(--fc-glass-glow), 0 10px 28px rgba(0, 0, 0, .6);
	/* Anchored on the pin, sitting just above it. */
	transform: translate(-50%, calc(-100% - 16px));
}

.fc-fan[hidden] { display: none; }

.fc-fan__item {
	position: relative;
	width: 42px;
	height: 42px;
	padding: 4px;
	border: 1.5px solid var(--fc-edge);
	border-radius: 50%;
	background: var(--fc-glass);
	cursor: pointer;
}

.fc-fan__item:hover,
.fc-fan__item:focus-visible { border-color: var(--fc-glass-ring); box-shadow: 0 0 12px rgba(255, 84, 52, .6); outline: none; }
.fc-fan__item--active { border-color: var(--fc-glass-ring); }
/* Same lift as the map icons: the art is dark rust and sinks into the glass. */
.fc-fan__item img { width: 100%; height: 100%; object-fit: contain; filter: brightness(1.9) saturate(1.2) drop-shadow(0 0 3px rgba(255, 84, 52, .85)); }

.fc-fan__item i {
	display: block;
	width: 11px;
	height: 11px;
	margin: auto;
	border-radius: 50%;
	background: var(--fc-amber);
}

.fc-fan__count {
	position: absolute;
	right: -2px;
	bottom: -2px;
	min-width: 16px;
	padding: 0 3px;
	border-radius: 999px;
	background: var(--fc-red-fill);
	color: #f1e4d6;
	font-size: 10px;
	font-weight: 700;
	line-height: 16px;
}

.fc-fan__item--active .fc-fan__count { background: #b83a28; }

/* Heading shown when the panel is narrowed to one icon. */
.fc-file__filter {
	display: flex;
	gap: .5rem;
	align-items: center;
	margin: 0 0 .9rem;
	font-family: 'Special Elite', 'Courier New', monospace;
	font-size: .75rem;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.fc-file__filter img { width: 22px; height: 22px; object-fit: contain; filter: brightness(1.9) saturate(1.2); }
.fc-file__filter span { flex-grow: 1; color: var(--fc-paper); }

.fc-file__filter button {
	padding: .25em .6em;
	border: 1.5px solid var(--fc-edge);
	border-radius: 3px;
	background: transparent;
	color: var(--fc-text);
	font: inherit;
	cursor: pointer;
}

.fc-file__filter button:hover { border-color: var(--fc-glass-ring); }

/* Clusters. Styled here rather than loading MarkerCluster.Default.css, whose
   blue bubbles fight the palette. Bigger than a pin so the collapse reads as
   "several places", and amber/ember to match the pins it stands in for. */
.fc-cluster span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 2px;
	border: 2px solid var(--fc-glass-ring);
	border-radius: 50%;
	background: var(--fc-glass);
	/* Frosts map labels behind the count so they don't read through it. */
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	box-shadow: var(--fc-glass-glow), 0 0 30px rgba(214, 48, 26, .35);
	color: var(--fc-ink);
	text-shadow: 0 0 8px rgba(255, 84, 52, .95);
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
}

.fc-cluster--active span { animation: fc-pulse 2.2s ease-out infinite; }

.fc-cluster--art span {
	gap: 6px;
	width: auto;
	min-width: 76px;
	height: 40px;
	padding: 0 10px;
	box-sizing: border-box;
	border-radius: 999px;
}

.fc-cluster span b { font-size: 18px; font-weight: 700; }
.fc-cluster span img { width: 18px; height: 18px; object-fit: contain; display: block; }

.fc-legend {
	display: flex;
	gap: 1.2rem;
	padding: .7rem 1rem;
	background: var(--fc-panel);
	color: var(--fc-text);
	font-size: .8rem;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.fc-dot {
	display: inline-block;
	width: 9px;
	height: 9px;
	margin-right: .35em;
	border-radius: 50%;
}

.fc-dot--standard { background: var(--fc-amber); }
.fc-dot--active { background: var(--fc-ember); }

/* ---------- case file panel ---------- */

/* Dark paper like the rest of the atlas (FC-45): the texture under a warm
   wash, a red-brown keyline, and a scorched inner edge. */
.fc-file {
	position: absolute;
	z-index: 500;
	isolation: isolate;
	/* Mobile: a bottom sheet that stops above Leaflet's attribution line, which
	   wraps to two lines at phone width and would otherwise print over the card. */
	inset: auto 0 2.7rem 0;
	max-height: 70%;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	padding: 1.5rem 1rem 1.3rem 1.3rem;
	color: var(--fc-text);
}

/* The sheet itself is the torn paper (FC-46): fill and border live on ::before,
   through #fc-worn, so the edge goes ragged while the text stays crisp. The
   scrolling therefore moves to the body — a scrolling host would drag its own
   ::before up with the content. */
.fc-file::before {
	border: 2px solid rgba(160, 66, 46, .5);
	border-radius: 3px;
	background: linear-gradient(180deg, rgba(255, 236, 214, .04), rgba(0, 0, 0, .18)), var(--fc-tex), var(--fc-sheet);
	box-shadow:
		inset 0 0 40px rgba(110, 36, 20, .4),
		inset 0 0 4px rgba(0, 0, 0, .8),
		0 8px 20px rgba(0, 0, 0, .6);
}

.fc-file__body {
	flex: 1;
	min-height: 0;
	padding-right: .3rem;
	overflow-y: auto;
	scrollbar-color: #5a4636 transparent;
	scrollbar-width: thin;
}

.fc-file[hidden] { display: none; }

/* Same ember-glass ring as the pins, so it reads as part of the map. */
.fc-file .fc-file__close {
	position: absolute;
	top: .8rem;
	right: .8rem;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 1.5px solid var(--fc-glass-ring);
	border-radius: 50%;
	background: var(--fc-glass);
	box-shadow: 0 0 10px rgba(255, 84, 52, .45);
	color: #f1e4d6;
	font-size: 1.15rem;
	line-height: 1;
	cursor: pointer;
}

.fc-file .fc-file__close:hover,
.fc-file .fc-file__close:focus-visible { box-shadow: 0 0 16px rgba(255, 84, 52, .8); }

.fc-file__sketch {
	width: 100%;
	max-height: 200px;
	object-fit: cover;
	filter: sepia(.55) contrast(1.08) brightness(.88);
}

/* Double-scoped deliberately: Breakdance ships `.breakdance h1..h6 {color}`
   at specificity (0,1,1), which beats a lone class and would render this
   near-black on the dark panel. Do not flatten this selector. */
.fc-file .fc-file__title {
	margin: 0 2.2rem .35rem 0;
	color: #efe5d8;
	font-family: 'Special Elite', 'Courier New', monospace;
	font-size: 1.35rem;
	font-weight: 400;
	line-height: 1.2;
}

.fc-file__loc {
	margin: 0 0 .8rem;
	color: var(--fc-paper);
	font-family: 'Special Elite', 'Courier New', monospace;
	font-size: .78rem;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.fc-file__tags { margin: 0 0 .8rem; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }

/* The filled red stamp, as on the cards — red is the fill, the words stay light. */
.fc-file__stamp {
	display: inline-block;
	margin: 0 0 .9rem;
	padding: .2em .7em;
	border-radius: 2px;
	background: var(--fc-red-fill);
	color: #f1e4d6;
	font-family: 'Special Elite', 'Courier New', monospace;
	font-size: .7rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	transform: rotate(-2deg);
	box-shadow: 0 0 12px rgba(221, 90, 68, .35);
}

.fc-file__excerpt { margin: 0 0 1rem; line-height: 1.6; }
.fc-audio { width: 100%; margin-bottom: 1rem; }

/* The place's own history, before the accounts filed there. */
.fc-file__history {
	margin: 0 0 1.2rem;
	padding-bottom: 1.2rem;
	border-bottom: 1px solid var(--fc-edge);
	font-family: 'Lora', Georgia, serif;
	font-size: .95rem;
	line-height: 1.7;
	color: #d8cdbd;
}

.fc-file__stories { display: grid; gap: .7rem; margin: 0 0 1.2rem; padding: 0; list-style: none; }

/* Each account is a small card in the sidebar's style: a scorched, red-edged
   slip of paper. The title link is stretched across it (::after), so the whole
   card is the target; the "Read" line is decoration. */
.fc-story {
	display: flex;
	gap: .8rem;
	padding: .7rem;
}

.fc-story.is-bare { padding-left: .85rem; }

.fc-story__plate {
	flex-shrink: 0;
	width: 70px;
	height: 70px;
	border: 1px solid rgba(214, 205, 194, .14);
	border-radius: 2px;
	background: var(--fc-tex);
	overflow: hidden;
}

/* Two classes: Breakdance's `.breakdance img{height:auto}` loads after us. */
.fc-story .fc-story__plate img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: sepia(.55) contrast(1.08) brightness(.88);
}

.fc-story__body { display: grid; align-content: start; gap: .3rem; flex: 1; min-width: 0; padding-bottom: 1rem; }

.fc-story__case {
	justify-self: start;
	padding: .14em .6em;
	border-radius: 2px;
	background: var(--fc-red-fill);
	color: #f1e4d6;
	font-family: 'Special Elite', 'Courier New', monospace;
	font-size: .6rem;
	letter-spacing: .12em;
	text-transform: uppercase;
}

/* Doubled: a theme's `.theme a` rule would otherwise win. */
.fc-story .fc-story__link {
	color: #efe5d8;
	font-family: 'Lora', Georgia, serif;
	font-size: 1.02rem;
	line-height: 1.25;
	text-decoration: none;
}

.fc-story .fc-story__link::after { content: ''; position: absolute; inset: 0; }

.fc-story .fc-story__link:hover,
.fc-story .fc-story__link:focus-visible { color: #fff; }

/* One meta row per story, so every item in the list is the same shape.
   An active threat is flagged by a chip here, never by changing the row's
   geometry — that read as two different components. */
.fc-story__meta {
	display: flex;
	flex-wrap: wrap;
	gap: .45rem;
	align-items: center;
}

.fc-story__tag,
.fc-story__audio,
.fc-story__flag {
	font-size: .66rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	opacity: .65;
}

.fc-story__audio { color: var(--fc-paper); opacity: .9; }

.fc-story__flag {
	padding: .05em .5em;
	border: 1px solid var(--fc-edge);
	border-radius: 2px;
	color: var(--fc-red-text);
	opacity: 1;
}

.fc-story__excerpt {
	font-family: 'Lora', Georgia, serif;
	font-size: .84rem;
	line-height: 1.55;
	color: #cfc4b4;
	opacity: .8;
}

.fc-story__open {
	position: absolute;
	right: .7rem;
	bottom: .45rem;
	font-family: 'Special Elite', 'Courier New', monospace;
	font-size: .66rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	opacity: .85;
}

.fc-story:hover .fc-story__open { color: var(--fc-red-text); opacity: 1; }

.fc-map-list ul ul { margin: .3rem 0 .6rem 1.1rem; }

.fc-file .fc-btn.fc-btn {
	position: relative;
	isolation: isolate;
	padding: .75em 1.4em;
	border: 0;
	background: none;
	color: #f6ece2;
	font-family: 'Special Elite', 'Courier New', monospace;
	font-size: .78rem;
	letter-spacing: .14em;
	text-shadow: 0 1px 0 rgba(0, 0, 0, .45);
	transition: filter .15s ease;
}

.fc-file .fc-btn.fc-btn::before {
	border: 1px solid rgba(240, 200, 180, .28);
	border-radius: 2px;
	background:
		var(--fc-grain),
		radial-gradient(140% 120% at 50% 0%, #b8382a, var(--fc-red-fill) 70%, #5c150d);
	box-shadow: inset 0 0 0 3px rgba(0, 0, 0, .18), 0 0 20px rgba(184, 56, 42, .35);
}

.fc-file .fc-btn.fc-btn:hover,
.fc-file .fc-btn.fc-btn:focus-visible { background: none; filter: brightness(1.15); color: #fff; }

@media (min-width: 782px) {
	.fc-file {
		inset: 1rem 1rem auto auto;   /* desktop: right-hand drawer, as tall as its content */
		width: 23rem;
		max-height: calc(100% - 2rem);
	}
}

/* ---------- accessible fallback list ---------- */

.fc-map-list {
	padding: .8rem 1rem;
	background: var(--fc-panel);
	color: var(--fc-text);
}

.fc-map-list summary { cursor: pointer; letter-spacing: .06em; text-transform: uppercase; font-size: .8rem; }
/* `li a` rather than `a`: a bare `.fc-map-list a` only ties with a theme's
   `.theme a` rule, leaving the winner to source order. */
.fc-map-list li a { color: var(--fc-amber); }

@media (prefers-reduced-motion: reduce) {
	.fc-pin--active span { animation: none; }
}

/* =========================================================================
   The atlas: category bar + filter sidebar + full-bleed map
   ====================================================================== */

.fc-atlas {
	display: flex;
	flex-direction: column;
	width: 100%;
	background: var(--fc-bg);
	color: var(--fc-text);
}

/* Full viewport. The negative margins break out of a page builder's
   centred container, which would otherwise cap the map at the content width. */
.fc-atlas.is-screen {
	position: relative;
	left: 50%;
	width: 100vw;
	max-width: 100vw;
	margin-left: -50vw;
	height: 100vh;
	height: 100dvh;   /* dvh so mobile browser chrome doesn't crop the map */
}

.fc-atlas.is-screen .fc-atlas__body { flex: 1; min-height: 0; }
.fc-atlas.is-screen .fc-map-stage { height: 100%; }
/* ---------- category bar ---------- */

.fc-cats {
	display: flex;
	flex-shrink: 0;
	gap: .55rem;
	padding: .7rem 1rem;
	overflow-x: auto;
	border-bottom: 1px solid var(--fc-edge);
	background: var(--fc-tex), var(--fc-sheet);
	scrollbar-width: thin;
}

/* Secondary buttons: outlined, a subtle red border, nothing filled until on. */
.fc-cat {
	display: inline-flex;
	flex-shrink: 0;
	gap: .55em;
	align-items: center;
	padding: .42em 1.05em;
	border: 0;
	background: none;
	color: var(--fc-text);
	font-family: 'Lora', Georgia, serif;
	font-size: .82rem;
	cursor: pointer;
}

.fc-cat::before {
	border: 2px solid rgba(160, 66, 46, .5);
	border-radius: 999px;
	background: linear-gradient(rgba(8, 5, 4, .45), rgba(8, 5, 4, .45)), var(--fc-tex);
	box-shadow: inset 0 0 8px rgba(120, 40, 24, .35), inset 0 1px 0 rgba(255, 230, 200, .05);
	transition: border-color .15s ease, box-shadow .15s ease;
}

.fc-cat:hover::before { border-color: rgba(221, 90, 68, .75); }

.fc-cat__n {
	min-width: 1.35em;
	padding: .05em .35em;
	border-radius: 999px;
	background: rgba(214, 205, 194, .1);
	font-size: .78em;
	text-align: center;
}

/* On: a darker stamp red with a glow, not a bright fill — it should look
   pressed into the paper, not lit from behind. */
.fc-cat.is-on { color: #f4e9dd; }

.fc-cat.is-on::before {
	border-color: rgba(221, 90, 68, .85);
	background: var(--fc-grain), radial-gradient(circle at 50% 40%, #7a2015, #4a120c);
	box-shadow: 0 0 14px rgba(221, 90, 68, .45), inset 0 0 10px rgba(0, 0, 0, .55);
}

.fc-cat.is-on .fc-cat__n { background: rgba(0, 0, 0, .35); }

/* ---------- body ---------- */

.fc-atlas__body { display: flex; min-height: 0; }

/* Scroll / panel: dark sheet, grain, and a vignette that darkens the edges. */
.fc-side {
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	width: 350px;
	border-right: 1px solid var(--fc-edge);
	background:
		radial-gradient(130% 90% at 50% 30%, transparent 55%, rgba(0, 0, 0, .5)),
		var(--fc-tex),
		var(--fc-sheet);
}

.fc-side__head { padding: .9rem .9rem .5rem; }

/* ---- worn surfaces --------------------------------------------------------
   One pattern for every torn-paper edge: the element is transparent and its
   ::before carries the fill and border through the #fc-worn filter, so the
   outline goes ragged while the text inside stays sharp. `isolation` keeps
   the z-index:-1 layer above the panel behind it. */
.fc-head .fc-head__cta,
.fc-cat,
.fc-side__search,
.fc-entry,
.fc-story,
.fc-side__foot {
	position: relative;
	isolation: isolate;
}

.fc-head .fc-head__cta::before,
.fc-cat::before,
.fc-side__search::before,
.fc-entry::before,
.fc-story::before,
.fc-file::before,
.fc-file .fc-btn.fc-btn::before,
.fc-side__foot::before,
.fc-atlas .fc-legend::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	filter: url(#fc-worn);
	pointer-events: none;
}

/* Input: dark field, thin red border, worn edge, muted placeholder. */
.fc-side__search { display: block; }

.fc-side__search::before {
	/* 2px, translucent: thick enough that the fray never breaks it into
	   dashes, faint enough that it still reads as a thin edge. */
	border: 2px solid rgba(160, 66, 46, .5);
	border-radius: 3px;
	background: linear-gradient(rgba(6, 4, 3, .55), rgba(6, 4, 3, .55)), var(--fc-tex);
	box-shadow:
		inset 0 3px 10px rgba(0, 0, 0, .7),
		inset 0 0 14px rgba(120, 40, 24, .3),
		0 1px 0 rgba(255, 230, 200, .05);
}

.fc-side__search:focus-within::before { border-color: rgba(221, 90, 68, .85); }

.fc-side__glass {
	position: absolute;
	left: .8rem;
	top: 50%;
	width: 16px;
	height: 16px;
	margin-top: -8px;
	color: var(--fc-text);
	opacity: .55;
	pointer-events: none;
}

.fc-side__search input {
	width: 100%;
	box-sizing: border-box;
	padding: .68em .9em .68em 2.5em;
	border: 0;
	background: transparent;
	color: var(--fc-text);
	font-family: 'Special Elite', 'Courier New', monospace;
	font-size: .84rem;
	letter-spacing: .03em;
}

.fc-side__search input::placeholder { color: var(--fc-text); opacity: .45; }
.fc-side__search input:focus { outline: none; }

/* "3 KNOWN ACCOUNTS ————" — the rule runs on to the panel edge. */
.fc-side__count {
	display: flex;
	align-items: center;
	gap: .8rem;
	margin: .85rem 0 0;
	font-family: 'Special Elite', 'Courier New', monospace;
	font-size: .74rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--fc-text);
}

.fc-side__count::after {
	content: '';
	flex: 1;
	height: 1px;
	background: linear-gradient(90deg, var(--fc-edge), transparent);
}

.fc-side__list {
	flex: 1;
	min-height: 0;
	margin: 0;
	padding: .35rem .9rem .9rem;
	overflow-y: auto;
	list-style: none;
	display: grid;
	gap: .65rem;
	/* Grid rows stretch to fill the column by default, which turned three
	   cards into three 190px slabs of mostly nothing. Start packs them. */
	align-content: start;
	scrollbar-width: thin;
	scrollbar-color: var(--fc-edge) transparent;
}

/* Border / container: torn-paper card. */
.fc-entry::before,
.fc-story::before {
	border: 2px solid rgba(160, 66, 46, .48);
	border-radius: 3px;
	background: linear-gradient(180deg, rgba(255, 236, 214, .05), rgba(0, 0, 0, .12)), var(--fc-tex), var(--fc-sheet-2);
	/* The burn: a warm darkening inward from the rim, the way a sheet scorches
	   at its edge before anywhere else. A soft gradient survives the filter;
	   a hard line would not. */
	box-shadow:
		inset 0 0 18px rgba(110, 36, 20, .38),
		inset 0 0 3px rgba(0, 0, 0, .8),
		inset 0 1px 0 rgba(255, 230, 200, .06),
		0 6px 16px rgba(0, 0, 0, .55);
	transition: border-color .15s ease, box-shadow .15s ease;
}

.fc-entry:hover::before,
.fc-entry.is-on::before,
.fc-story:hover::before,
.fc-story:focus-within::before {
	border-color: rgba(221, 90, 68, .8);
	box-shadow:
		inset 0 0 18px rgba(130, 40, 22, .45),
		inset 0 0 3px rgba(0, 0, 0, .8),
		0 6px 16px rgba(0, 0, 0, .55),
		0 0 16px rgba(221, 90, 68, .28);
}

.fc-entry__btn {
	display: flex;
	gap: .8rem;
	width: 100%;
	padding: .55rem;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.fc-entry__plate {
	position: relative;
	flex-shrink: 0;
	width: 82px;
	height: 76px;
	border: 1px solid rgba(214, 205, 194, .14);
	border-radius: 2px;
	background: linear-gradient(140deg, rgba(90, 66, 46, .25), rgba(0, 0, 0, .35)), var(--fc-tex);
}

.fc-entry .fc-entry__plate img {
	/* Two classes: Breakdance's `.breakdance img{height:auto}` loads after us. */
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	filter: sepia(.55) contrast(1.08) brightness(.88);
}

/* The creature mark overlaps the plate's corner, the way a stamp would. */
.fc-entry__mark {
	position: absolute;
	right: -8px;
	bottom: -6px;
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border: 1px solid var(--fc-red-text);
	border-radius: 50%;
	background: rgba(12, 8, 6, .95);
	box-shadow: 0 0 10px rgba(221, 90, 68, .55);
}

.fc-entry__mark img { width: 16px; height: 16px; object-fit: contain; display: block; }

/* Case number and, on a card with no plate, the creature mark beside it. */
.fc-entry__tags { display: flex; align-items: center; gap: .45rem; }

.fc-entry__mark--inline {
	position: static;
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	box-shadow: 0 0 8px rgba(221, 90, 68, .45);
}

.fc-entry__mark--inline img { width: 14px; height: 14px; }

/* No plate: the text takes the card's full width, with a little more air on
   the left so it does not sit on the torn edge. */
.fc-entry.is-bare .fc-entry__btn { padding-left: .85rem; }

.fc-entry__meta {
	display: grid;
	align-content: start;
	gap: .22rem;
	min-width: 0;
	/* Room on the last line for the Read link, which sits over this corner. */
	padding-bottom: 1.1rem;
}

/* A filled red stamp, light text — the one place red carries words, so it is
   the fill that is red, not the type. */
.fc-entry__case {
	justify-self: start;
	padding: .14em .6em;
	border-radius: 2px;
	background: var(--fc-red-fill);
	color: #f1e4d6;
	font-family: 'Special Elite', 'Courier New', monospace;
	font-size: .62rem;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.fc-entry__title {
	font-family: 'Lora', Georgia, serif;
	font-size: 1.02rem;
	line-height: 1.22;
	color: #efe5d8;
}

.fc-entry__place {
	display: flex;
	align-items: center;
	gap: .3em;
	font-size: .74rem;
	color: var(--fc-text);
	opacity: .7;
}

.fc-entry__place svg { flex-shrink: 0; width: 11px; height: 11px; color: var(--fc-red-text); }

/* Over the card's bottom-right corner instead of on a row of its own — that
   extra row was most of the height each card wasted. */
.fc-entry__open {
	position: absolute;
	right: .7rem;
	bottom: .5rem;
	color: var(--fc-text);
	font-family: 'Special Elite', 'Courier New', monospace;
	font-size: .68rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	text-decoration: none;
}

.fc-entry__open:hover { color: var(--fc-red-text); }

.fc-side__empty { padding: 1rem; opacity: .6; font-size: .85rem; }

/* The strip the panel ends on: old paper, torn top and bottom. */
.fc-side__foot {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .7em;
	margin: .4rem .5rem .7rem;
	padding: 1rem .8rem;
	color: rgba(48, 32, 20, .78);
	font-family: 'Special Elite', 'Courier New', monospace;
	font-size: .72rem;
	letter-spacing: .2em;
	text-transform: uppercase;
}

.fc-side__foot::before {
	filter: url(#fc-torn);
	background:
		var(--fc-grain),
		radial-gradient(120% 140% at 50% 50%, transparent 40%, rgba(70, 48, 28, .55)),
		var(--fc-paper);
	box-shadow: 0 6px 16px rgba(0, 0, 0, .55);
}

.fc-side__foot svg { width: 16px; height: 16px; color: rgba(48, 32, 20, .75); }

/* ---------- locate control ---------- */

.fc-locate {
	position: absolute;
	/* Under Leaflet's zoom pair, top-left — bottom-right is the compass. */
	left: 10px;
	top: 86px;
	z-index: 450;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 1px solid var(--fc-edge);
	border-radius: 3px;
	background: var(--fc-tex), var(--fc-sheet);
	color: var(--fc-text);
	box-shadow: 0 4px 18px rgba(0, 0, 0, .55);
	cursor: pointer;
}

.fc-locate:hover { color: var(--fc-red-text); }
/* ---------- legend and compass sit over the map ---------- */

.fc-atlas .fc-legend {
	position: absolute;
	left: 14px;
	bottom: 14px;
	z-index: 440;
	display: flex;
	align-items: center;
	gap: .85rem;
	padding: .65rem 1.05rem;
}

/* Same worn-sheet treatment as the cards; the ::before geometry is shared. */
.fc-atlas .fc-legend::before {
	border: 1px solid var(--fc-edge);
	border-radius: 3px;
	background: linear-gradient(180deg, rgba(255, 236, 214, .05), rgba(0, 0, 0, .15)), var(--fc-tex), var(--fc-sheet-2);
	box-shadow: 0 8px 26px rgba(0, 0, 0, .6);
}

.fc-legend__mark svg { display: block; width: 24px; height: 24px; color: var(--fc-red-text); }

.fc-legend__text { display: grid; gap: .15rem; }

.fc-legend__text b {
	font-family: 'Lora', Georgia, serif;
	font-size: .95rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #efe5d8;
	font-weight: 600;
}

.fc-legend__text small { font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; opacity: .6; }

.fc-legend__live {
	display: flex;
	align-items: center;
	gap: .45em;
	padding-left: .95rem;
	border-left: 1px solid var(--fc-edge);
	color: var(--fc-red-text);
	font-size: .64rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	opacity: .75;
}

/* Below this the legend reaches across to the compass and clips its own last
   word. The compass is decoration; the legend is information — it yields. */
@media (max-width: 1180px) {
	.fc-rose { display: none; }
}

.fc-legend__live .fc-dot {
	background: var(--fc-red-text);
	box-shadow: 0 0 8px rgba(221, 90, 68, .9);
}

/* Orientation, and the one piece of furniture that says "atlas". */
.fc-rose {
	position: absolute;
	right: 16px;
	bottom: 34px;
	z-index: 440;
	width: 78px;
	height: 78px;
	padding: 4px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(13, 19, 16, .72) 55%, transparent 72%);
	opacity: .9;
	pointer-events: none;
	color: var(--fc-ink);
	filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .8));
}

.fc-rose__ring { fill: none; stroke: currentColor; stroke-width: 1; opacity: .5; }
.fc-rose__star { fill: currentColor; opacity: .75; }
.fc-rose__star--minor { opacity: .45; }

.fc-rose__n {
	fill: currentColor;
	font-size: 10px;
	letter-spacing: .08em;
	text-anchor: middle;
	opacity: .85;
}

/* Leaflet ships its own control skin and its stylesheet is enqueued after
   ours, so at equal specificity it wins. One extra class settles it without
   reaching for !important. */
.fc-map-stage .fc-map .leaflet-bar a,
.fc-map-stage .fc-map .leaflet-bar a:hover {
	width: 32px;
	height: 32px;
	line-height: 32px;
	border-bottom-color: var(--fc-edge);
	background: var(--fc-tex), var(--fc-sheet);
	color: #efe5d8;
	font-weight: 400;
}

.fc-map-stage .fc-map .leaflet-bar {
	border: 1px solid var(--fc-edge);
	border-radius: 3px;
	box-shadow: 0 4px 18px rgba(0, 0, 0, .55);
}

.fc-map-stage .fc-map .leaflet-bar a:hover { color: var(--fc-red-text); }

/* Credit stays legible and stops being a white bar across the bottom. */
.fc-map-stage .fc-map .leaflet-control-attribution {
	padding: 2px 8px;
	border-top-left-radius: 3px;
	background: rgba(13, 19, 16, .82);
	color: rgba(214, 205, 194, .65);
	font-size: 10px;
}

.fc-map-stage .fc-map .leaflet-control-attribution a { color: var(--fc-amber); }

/* On a phone the map is a band, not a page: the compass has nowhere to sit
   without landing on a pin, and the full breakdown wraps to three lines. Keep
   the plate and the live dot, drop the rest. */
@media (max-width: 781px) {
	.fc-rose { display: none; }

	.fc-atlas .fc-legend {
		left: 10px;
		right: 10px;
		bottom: 28px;
		gap: .6rem;
		padding: .45rem .7rem;
	}

	.fc-legend__text small { display: none; }
	.fc-legend__live { margin-left: auto; padding-left: .6rem; }
}

/* ---------- mobile: sidebar becomes a sheet under the map ---------- */

@media (max-width: 781px) {
	.fc-atlas__body { flex-direction: column; }

	.fc-side {
		order: 2;
		width: auto;
		max-height: 45%;
		border-right: 0;
		border-top: 1px solid var(--fc-line);
	}

	.fc-atlas.is-screen .fc-map-stage { flex: 1; height: auto; min-height: 45%; }
}

/* =========================================================================
   Light basemap overrides (Stamen Terrain)

   The palette inverts on parchment. Measured against the graded terrain
   (~#DED6BE): Lantern Amber 1.56:1 and Ember 2.74:1 both FAIL the 3:1 floor
   for non-text UI, while Crimson Rust — unusable on the dark map — reaches
   5.28:1. So the pin roles swap: Pine for a sighting (12.94:1), Rust for an
   active threat (5.28:1). Those two differ in lightness, not hue alone, and
   active still carries the pulse as a second, non-colour cue.
   ====================================================================== */

.fc-map-stage.tone-light .fc-pin span,
.fc-map-stage.tone-light .fc-cluster span {
	background: var(--fc-bg);
	color: var(--fc-text);
	border-color: rgba(255, 255, 255, .45);
	box-shadow: 0 0 0 3px rgba(13, 19, 16, .18);
}

.fc-map-stage.tone-light .fc-cluster span { box-shadow: 0 0 0 5px rgba(13, 19, 16, .16); }

.fc-map-stage.tone-light .fc-pin--active span,
.fc-map-stage.tone-light .fc-cluster--active span {
	background: var(--fc-accent);
	color: #f5efe8;
	box-shadow: 0 0 0 4px rgba(139, 58, 43, .22);
}

@keyframes fc-pulse-light {
	0%   { box-shadow: 0 0 0 0 rgba(139, 58, 43, .55); }
	70%  { box-shadow: 0 0 0 14px rgba(139, 58, 43, 0); }
	100% { box-shadow: 0 0 0 0 rgba(139, 58, 43, 0); }
}

.fc-map-stage.tone-light .fc-pin--active span { animation: fc-pulse-light 2.2s ease-out infinite; }

.fc-map-stage.tone-light .fc-pin__art {
	background: #f5efe8;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .3), 0 0 0 3px rgba(13, 19, 16, .18);
}

/* The legend sits over the map, so it flips too — a pine dot on a dark
   panel would be invisible. */
.fc-map-stage.tone-light .fc-legend {
	background: rgba(245, 239, 232, .92);
	border-color: rgba(13, 19, 16, .25);
	color: var(--fc-bg);
}

.fc-map-stage.tone-light .fc-dot--standard { background: var(--fc-bg); }
.fc-map-stage.tone-light .fc-dot--active { background: var(--fc-accent); }

.fc-map-stage.tone-light .fc-locate {
	background: rgba(245, 239, 232, .92);
	border-color: rgba(13, 19, 16, .25);
	color: var(--fc-bg);
}

.fc-map-stage.tone-light .fc-locate:hover { color: var(--fc-accent); border-color: var(--fc-accent); }

.fc-map-stage.tone-light .leaflet-control-attribution {
	background: rgba(245, 239, 232, .85);
	color: #3a352c;
}

.fc-map-stage.tone-light .leaflet-control-attribution a { color: #7a4b2a; }

@media (prefers-reduced-motion: reduce) {
	.fc-map-stage.tone-light .fc-pin--active span { animation: none; }
}

/* Full-bleed: neutralise the page builder's section padding on the map page.

   Scoped by :has() to the one or two ancestors that directly wrap a
   full-screen atlas, so it cannot reach anything else on the site, and it
   only ever applies on a page that contains one.

   The cleaner fix is still to set that section's padding to 0 in Breakdance —
   this exists so the page is right even if nobody remembers to. */
:is(div, section, main):has(> .fc-atlas.is-screen),
:is(div, section, main):has(> * > .fc-atlas.is-screen) {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* An already-dark basemap (alidade_smooth_dark, satellite) needs no inversion —
   just a touch of warmth so it sits with the palette. */
.fc-map-stage.grade-none .leaflet-tile-pane {
	filter: sepia(.3) saturate(.9) brightness(.92) contrast(1.05);
}

/* =========================================================================
   Case file (single) and archive templates — FC-9
   ====================================================================== */

.fc-case {
	max-width: var(--fc-col);
	margin: 0 auto;
	padding: 3rem var(--fc-gutter) 4rem;
	box-sizing: border-box;
	color: var(--fc-text);
}

/* ---------- cinematic hero (FC-32) ----------

   The title sits inside the media. Full-bleed, because a letterboxed plate
   inside a 46rem column is a thumbnail, not a plate. Same escape as the atlas:
   out of the column, across the viewport, without a horizontal scrollbar. */

/* The plate meets the site header. The article's own top padding is the gap
   that was showing as a band above the video. */
.fc-case.has-plate { padding-top: 0; }

/* 100vw counts the scrollbar, so a full-bleed child overflows the body by its
   width — 8px here, enough to let the whole page slide sideways. `clip` stops
   that without creating a scroll container, so `position: sticky` elsewhere on
   the page keeps working (which `hidden` would break). Scoped by :has() to
   pages that actually have a plate. */
body:has(.fc-cine),
body:has(.fc-atlas.is-screen) { overflow-x: clip; }

/* ---- Story pages on the client's paper (FC-37) ------------------------------
   Only <body> paints these pages — the Breakdance-built ones too, whose
   sections are transparent — so one layer covers both templates.

   A fixed pseudo-element, not a body background: the image is not seamless,
   and tiled down a long story it would show a join every screen or so. Fixed
   to the viewport there is only ever one sheet. And it has to be a layer of
   its own, because iOS Safari ignores `background-attachment: fixed` and
   scales a body `cover` image to the whole document height instead. */
/* Every page that is a story or a list of them: the case file, the archive,
   and the archive filtered by creature, place, region or threat. */
body:is(.single-story, .post-type-archive-story, .tax-creature, .tax-place, .tax-region, .tax-threat) {
	background-color: var(--fc-sheet);
}

body:is(.single-story, .post-type-archive-story, .tax-creature, .tax-place, .tax-region, .tax-threat)::before {
	content: '';
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(0, 0, 0, .45)),
		url("img/paper-dark.webp") center / cover no-repeat;
}

.fc-cine {
	position: relative;
	left: 50%;
	width: 100vw;
	margin-left: -50vw;
	/* Tall enough to be a plate, never taller than the screen it is read on. */
	height: clamp(380px, 72vh, 760px);
	margin-bottom: 2.4rem;
	overflow: hidden;
	isolation: isolate;
}

.fc-cine__media {
	position: absolute;
	inset: 0;
	background-position: center;
	background-size: cover;
	filter: sepia(.32) contrast(1.06) saturate(.92);
	-webkit-mask-image: linear-gradient(to bottom, #000 50%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 50%, transparent 100%);
}

/* object-fit does the cropping for image and video. An iframe cannot be
   cropped that way, so it is oversized instead — see below. */
.fc-cine__layer {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
}

/* A 16:9 iframe in a container of another ratio letterboxes, and the provider
   paints those bars black. Scaling it to whichever axis is short and centring
   it crops instead — the same result object-fit gives the other two. */
.fc-cine__media iframe.fc-cine__layer {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 177.78vh;      /* 16/9 of the height */
	min-width: 100%;
	height: 56.25vw;      /* 9/16 of the width  */
	min-height: 100%;
	transform: translate(-50%, -50%);
	pointer-events: none; /* it is scenery, not a player */
}

/* The scrim. Two stops, because one gradient cannot both lift the text off a
   bright sky and keep the middle of the picture visible. The bottom stop is
   opaque enough that Aged Bone White clears 7:1 over any frame. */
.fc-cine__veil {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to top, transparent 0, rgba(18, 12, 9, .78) 22%, rgba(18, 12, 9, .3) 58%, rgba(18, 12, 9, .55) 100%),
		radial-gradient(120% 80% at 50% 10%, transparent 40%, rgba(18, 12, 9, .5) 100%);
}

.fc-cine__inner {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	max-width: var(--fc-col);
	margin: 0 auto;
	padding: 0 var(--fc-gutter) 2.4rem;
	box-sizing: border-box;
}

.fc-cine__eyebrow {
	margin: 0 0 .7rem;
	color: var(--fc-amber);
	font-family: "Special Elite", ui-monospace, monospace;
	font-size: .76rem;
	letter-spacing: .22em;
	text-transform: uppercase;
}

.fc-cine__eyebrow span { opacity: .45; }

/* Doubled for specificity: themes and page builders both style bare h1. */
.fc-cine__title.fc-cine__title {
	margin: 0 0 1.1rem;
	color: #f5efe8;
	font-size: clamp(2.1rem, 6.2vw, 4.4rem);
	line-height: 1.02;
	letter-spacing: -.01em;
	/* Not a decoration: it is what holds the letterforms together where the
	   picture behind them is busiest. */
	text-shadow: 0 2px 28px rgba(0, 0, 0, .75);
	text-wrap: balance;
}

.fc-cine__slip {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem .9rem;
	align-items: center;
	padding-top: 1rem;
	border-top: 1px solid rgba(214, 205, 194, .22);
}

.fc-cine__filed {
	color: var(--fc-text);
	font-size: .9rem;
	opacity: .85;
}

.fc-cine__filed a { color: var(--fc-amber); }

@media (max-width: 600px) {
	:root { --fc-gutter: 1rem; }
	.fc-cine { height: clamp(320px, 58vh, 460px); margin-bottom: 1.8rem; }
	.fc-cine__inner { padding-bottom: 1.6rem; }
	.fc-cine__slip { padding-top: .8rem; }
}

/* An autoplaying loop is motion the reader did not ask for. The video is
   paused by script; an iframe cannot be reached, so it is hidden and the
   poster behind it stands in. */
@media (prefers-reduced-motion: reduce) {
	.fc-cine__media iframe.fc-cine__layer { display: none; }
}

.fc-hero { margin: 0 0 1.8rem; }
.fc-hero__media { width: 100%; height: auto; display: block; filter: sepia(.4) contrast(1.05); }
.fc-hero__embed { position: relative; padding-bottom: 56.25%; }
.fc-hero__embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.fc-case__chips {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	align-items: center;
	margin: 0 0 1rem;
}

.fc-chip {
	display: inline-block;
	padding: .3em .7em;
	font-size: .7rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	text-decoration: none;
}

.fc-chip--file { background: var(--fc-amber); color: var(--fc-bg); }
.fc-chip--threat { border: 1px solid var(--fc-ember); color: var(--fc-ember); }
.fc-chip--era { color: var(--fc-text); opacity: .6; }

/* Doubled: a theme's `.theme a` rule would otherwise take the colour. */
.fc-case .fc-chip--place { border: 1px solid var(--fc-line); color: var(--fc-amber); }
.fc-case .fc-chip--place:hover { border-color: var(--fc-amber); }

.fc-case .fc-case__title {
	margin: 0 0 .7rem;
	color: var(--fc-text);
	font-size: clamp(2rem, 5vw, 3.1rem);
	line-height: 1.12;
}

.fc-case__byline {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	align-items: center;
	margin: 0 0 2rem;
	font-size: .9rem;
	font-style: italic;
	opacity: .65;
}

.fc-case__icon { width: 26px; height: 26px; object-fit: contain; }

.fc-case__audio {
	margin: 0 0 2rem;
	padding: 1rem 1.1rem;
	border: 1px solid var(--fc-line);
	background: var(--fc-panel);
}

.fc-case__audiolabel {
	margin: 0 0 .6rem;
	color: var(--fc-amber);
	font-size: .7rem;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.fc-case__audio audio { width: 100%; }

/* ---------- the field recorder ----------

   Native audio chrome is shadow DOM and cannot be styled, so folklore.js hides
   it and we draw the deck ourselves. Everything below only applies once the
   script has run; without it the rule above leaves the native player at full
   width, which is the correct fallback. */

.fc-rec[data-fc-rec] audio { display: none; }

/* The tape deck: two reels joined by a stretch of tape. */
.fc-rec__deck {
	display: flex;
	gap: .9rem;
	align-items: center;
	justify-content: center;
	margin: 0 0 1rem;
	padding: 1.1rem .9rem;
	border: 1px solid var(--fc-line);
	border-radius: 2px;
	background:
		radial-gradient(ellipse at 50% 0, rgba(212, 163, 115, .07), transparent 62%),
		rgba(0, 0, 0, .28);
}

.fc-rec__reel {
	position: relative;
	flex: none;
	width: 54px;
	height: 54px;
	border: 1px solid var(--fc-line);
	border-radius: 50%;
	background: radial-gradient(circle, var(--fc-panel) 0 24%, #2b211a 24% 46%, var(--fc-panel) 46%);
}

/* Three spokes, drawn as one repeating conic sweep rather than six elements. */
.fc-rec__reel::before {
	position: absolute;
	content: "";
	inset: 7px;
	border-radius: 50%;
	background: conic-gradient(
		from 0deg,
		rgba(214, 205, 194, .32) 0 6deg, transparent 6deg 120deg,
		rgba(214, 205, 194, .32) 120deg 126deg, transparent 126deg 240deg,
		rgba(214, 205, 194, .32) 240deg 246deg, transparent 246deg
	);
	-webkit-mask: radial-gradient(circle, transparent 0 24%, #000 24%);
	mask: radial-gradient(circle, transparent 0 24%, #000 24%);
}

/* The hub, so a still reel still reads as a reel. */
.fc-rec__reel::after {
	position: absolute;
	content: "";
	inset: 22px;
	border-radius: 50%;
	background: var(--fc-amber);
	opacity: .55;
}

.fc-rec__tape {
	flex: 1;
	height: 2px;
	max-width: 190px;
	background: linear-gradient(90deg, var(--fc-line), rgba(212, 163, 115, .4), var(--fc-line));
}

@keyframes fc-reel {
	to { transform: rotate(360deg); }
}

.fc-rec.is-playing .fc-rec__reel { animation: fc-reel 3.2s linear infinite; }

/* The take-up reel pulls slightly faster than the supply reel — the small
   asymmetry is what stops it reading as two spinning circles. */
.fc-rec.is-playing .fc-rec__reel:last-of-type { animation-duration: 2.3s; }

.fc-rec__transport {
	display: flex;
	gap: .9rem;
	align-items: center;
}

.fc-rec__play {
	display: grid;
	flex: none;
	place-items: center;
	/* 44px: the smallest comfortable touch target, same floor as the burger. */
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--fc-ember);
	border-radius: 50%;
	background: transparent;
	color: var(--fc-ember);
	cursor: pointer;
}

.fc-rec__play:hover,
.fc-rec__play:focus-visible {
	background: var(--fc-ember);
	color: var(--fc-bg);
	outline: none;
}

.fc-rec__play:focus-visible { box-shadow: 0 0 0 3px rgba(201, 98, 47, .35); }

.fc-rec__play svg { width: 20px; height: 20px; fill: currentColor; }

/* One button, two glyphs: whichever the state is not, is hidden. */
.fc-rec__icon-pause,
.fc-rec.is-playing .fc-rec__icon-play { display: none; }
.fc-rec.is-playing .fc-rec__icon-pause { display: block; }

/* --p is the played fraction, written by the script. Both vendor tracks read
   it, so the fill cannot drift from the thumb. */
.fc-rec__seek {
	flex: 1;
	min-width: 0;
	height: 22px;
	margin: 0;
	padding: 0;
	background: transparent;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

.fc-rec__seek::-webkit-slider-runnable-track {
	height: 4px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--fc-ember) var(--p, 0%), rgba(214, 205, 194, .2) var(--p, 0%));
}

.fc-rec__seek::-moz-range-track {
	height: 4px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--fc-ember) var(--p, 0%), rgba(214, 205, 194, .2) var(--p, 0%));
}

.fc-rec__seek::-webkit-slider-thumb {
	width: 14px;
	height: 14px;
	margin-top: -5px;
	border: 0;
	border-radius: 50%;
	background: var(--fc-amber);
	-webkit-appearance: none;
	appearance: none;
}

.fc-rec__seek::-moz-range-thumb {
	width: 14px;
	height: 14px;
	border: 0;
	border-radius: 50%;
	background: var(--fc-amber);
}

.fc-rec__seek:focus-visible { outline: 2px solid var(--fc-amber); outline-offset: 3px; }

/* Tabular figures: the counter must not jolt sideways every tick. */
.fc-rec__time {
	flex: none;
	color: var(--fc-amber);
	font-family: "Special Elite", ui-monospace, monospace;
	font-size: .82rem;
	font-variant-numeric: tabular-nums;
	letter-spacing: .04em;
}

.fc-rec__time b { font-weight: 400; }
.fc-rec__time i { margin: 0 .35em; font-style: normal; opacity: .4; }

@media (max-width: 420px) {
	.fc-rec__reel { width: 42px; height: 42px; }
	.fc-rec__reel::after { inset: 17px; }
	.fc-rec__deck { gap: .6rem; padding: .9rem .6rem; }
}

@media (prefers-reduced-motion: reduce) {
	.fc-rec.is-playing .fc-rec__reel { animation: none; }
}

.fc-case__body { font-size: 1.12rem; line-height: 1.78; }
.fc-case__body > :first-child { margin-top: 0; }
.fc-case__body img { max-width: 100%; height: auto; }
.fc-case__body figure { margin: 2rem 0; }
.fc-case__body figcaption { margin-top: .6rem; font-size: .85rem; font-style: italic; opacity: .6; }

.fc-case__body blockquote {
	margin: 2rem 0;
	padding: 1.2rem 1.5rem;
	border-left: 3px solid var(--fc-ember);
	background: var(--fc-panel);
	font-style: italic;
}

.fc-case__foot {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: center;
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--fc-line);
}

.fc-case__sibling { margin-left: auto; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; opacity: .5; }
.fc-case__comments { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--fc-line); }

/* ---------- archive ---------- */

.fc-archive { max-width: 72rem; margin: 0 auto; padding: 3rem 1.25rem 4rem; color: var(--fc-text); }

.fc-archive__kicker {
	margin: 0 0 .5rem;
	color: var(--fc-amber);
	font-size: .72rem;
	letter-spacing: .26em;
	text-transform: uppercase;
}

.fc-archive .fc-archive__title { margin: 0 0 1rem; color: var(--fc-text); font-size: clamp(2rem, 5vw, 3rem); }
.fc-archive__photo { margin: 0 0 1.2rem; }
.fc-archive__photo img { width: 100%; max-height: 300px; object-fit: cover; filter: sepia(.4) contrast(1.05); }
.fc-archive__history { max-width: 46rem; margin: 0 0 1rem; line-height: 1.7; opacity: .8; }
.fc-archive__count { margin: 0 0 2.5rem; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; opacity: .6; }
.fc-archive__empty { padding: 3rem 0; font-size: 1.05rem; opacity: .75; }

.fc-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 1.5rem;
}

.fc-card { border: 1px solid var(--fc-line); background: var(--fc-panel); }

.fc-card .fc-card__link {
	display: flex;
	flex-direction: column;
	gap: .45rem;
	height: 100%;
	padding: 1rem 1.1rem 1.3rem;
	color: var(--fc-text);
	text-decoration: none;
}

.fc-card:hover { border-color: var(--fc-amber); }

/* One fixed plate height for every card, whatever is inside it, so titles and
   excerpts line up across the grid instead of stepping. */
.fc-card__plate {
	position: relative;
	display: block;
	height: 170px;
	margin: -1rem -1.1rem .9rem;
	overflow: hidden;
	background: var(--fc-bg);
}

/* No photograph and no icon: a plain plate still gets rendered so the stamp
   has somewhere to sit and every card in the grid starts at the same height. */
.fc-card__plate--bare {
	background:
		repeating-linear-gradient(135deg, rgba(214,205,194,.035) 0 10px, transparent 10px 20px),
		linear-gradient(170deg, #241c16 0%, #14100d 70%, var(--fc-bg) 100%);
}

.fc-card__plate img { width: 100%; height: 100%; object-fit: cover; display: block; filter: sepia(.45) contrast(1.05); }
.fc-card__icon { object-fit: contain; padding: 1.9rem; box-sizing: border-box; filter: none; }

.fc-card__stamp {
	position: absolute;
	right: .6rem;
	bottom: .6rem;
	padding: .2em .55em;
	border: 1px solid var(--fc-ember);
	background: rgba(13, 19, 16, .82);
	color: var(--fc-ember);
	font-size: .62rem;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.fc-card__file { color: var(--fc-amber); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; }
.fc-card__title { font-size: 1.12rem; line-height: 1.28; }
.fc-card__place { font-size: .78rem; opacity: .6; }
.fc-card__excerpt { margin-top: .3rem; font-size: .88rem; line-height: 1.55; opacity: .7; }

.fc-archive .pagination,
.fc-archive .nav-links { display: flex; gap: .8rem; justify-content: center; margin-top: 2.5rem; }
.fc-archive .nav-links a,
.fc-archive .nav-links span { padding: .5em .9em; border: 1px solid var(--fc-line); color: var(--fc-text); text-decoration: none; font-size: .8rem; }
.fc-archive .nav-links a:hover { border-color: var(--fc-amber); color: var(--fc-amber); }

/* =========================================================================
   Site header and mobile drawer — FC-8
   ====================================================================== */

:root { --fc-header-h: 76px; }
@media (max-width: 781px) { :root { --fc-header-h: 58px; } }

html.fc-locked, html.fc-locked body { overflow: hidden; }

/* Aged board rather than a flat bar: two gradients and a hairline of light
   along the bottom edge, so the header reads as a surface the rest of the
   site is pinned to. */
.fc-head {
	position: relative;
	z-index: 900;
	display: flex;
	align-items: center;
	gap: 2.25rem;
	height: var(--fc-header-h);
	box-sizing: border-box;
	padding: 0 1.5rem;
	border-bottom: 1px solid var(--fc-line);
	border-bottom-color: var(--fc-edge);
	background:
		radial-gradient(120% 180% at 12% 0%, rgba(110, 84, 60, .22), transparent 60%),
		linear-gradient(180deg, transparent, rgba(0, 0, 0, .35)),
		var(--fc-tex),
		var(--fc-sheet);
	box-shadow: inset 0 -1px 0 rgba(245, 239, 232, .04), 0 6px 20px rgba(0, 0, 0, .45);
}

.fc-head .fc-head__brand {
	display: flex;
	align-items: center;
	gap: .7rem;
	flex-shrink: 0;
	color: var(--fc-ink);
	text-decoration: none;
}

.fc-head__brand img { max-height: calc(var(--fc-header-h) - 26px); width: auto; display: block; }

.fc-head__sigil svg { display: block; width: 30px; height: 30px; color: var(--fc-ink); opacity: .9; }

/* "The" rides above the name rather than beside it, which is what makes the
   lockup read as a masthead instead of a sentence. */
.fc-head__words { display: grid; gap: .1rem; line-height: 1; }

.fc-head__words small {
	font-family: 'Special Elite', 'Courier New', monospace;
	font-size: .58rem;
	letter-spacing: .3em;
	text-transform: uppercase;
	opacity: .6;
}

.fc-head__words strong {
	font-family: 'Special Elite', 'Courier New', monospace;
	font-size: 1.12rem;
	font-weight: 400;
	letter-spacing: .13em;
	text-transform: uppercase;
	white-space: nowrap;
}

.fc-nav { flex-grow: 1; }

.fc-nav__list {
	display: flex;
	gap: 2rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fc-nav .fc-nav__list a {
	position: relative;
	display: block;
	padding-bottom: 6px;
	color: rgba(214, 205, 194, .72);
	font-family: 'Special Elite', 'Courier New', monospace;
	font-size: .8rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	text-decoration: none;
	transition: color .15s ease;
}

/* The rule under the current page is drawn, not a border: a border would move
   the text, and this one glows. */
.fc-nav .fc-nav__list a::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: var(--fc-red-text);
	box-shadow: 0 0 10px rgba(221, 90, 68, .8);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .18s ease;
}

.fc-nav .fc-nav__list a:hover { color: var(--fc-ink); }
.fc-nav .fc-nav__list a:hover::after { transform: scaleX(1); }

.fc-nav .fc-nav__list .current-menu-item > a,
.fc-nav .fc-nav__list a[aria-current="page"] { color: var(--fc-red-text); }

.fc-nav .fc-nav__list .current-menu-item > a::after,
.fc-nav .fc-nav__list a[aria-current="page"]::after { transform: scaleX(1); }

/* Primary button: solid stamp red, grain pressed into it, worn edges. The
   fill and frame live on ::before through #fc-worn (shared rule above), so the
   lettering stays sharp while the outline goes ragged. */
.fc-head .fc-head__cta {
	flex-shrink: 0;
	padding: .75em 1.4em;
	color: #f6ece2;
	font-family: 'Special Elite', 'Courier New', monospace;
	font-size: .78rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	text-decoration: none;
	text-shadow: 0 1px 0 rgba(0, 0, 0, .45);
	transition: filter .15s ease;
}

.fc-head .fc-head__cta::before {
	border: 1px solid rgba(240, 200, 180, .28);
	border-radius: 2px;
	background:
		var(--fc-grain),
		radial-gradient(140% 120% at 50% 0%, #b8382a, var(--fc-red-fill) 70%, #5c150d);
	box-shadow: inset 0 0 0 3px rgba(0, 0, 0, .18), 0 0 20px rgba(184, 56, 42, .35);
}

.fc-head .fc-head__cta:hover { filter: brightness(1.15); color: #fff; }

@media (max-width: 781px) {
	.fc-head { gap: 1rem; padding: 0 1rem; }
	.fc-head__sigil svg { width: 24px; height: 24px; }
	.fc-head__words strong { font-size: .92rem; letter-spacing: .1em; }
	.fc-head__words small { font-size: .52rem; }
}

/* ---------- burger ---------- */

.fc-burger {
	display: none;
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	margin-right: -10px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
}

.fc-burger span {
	display: block;
	width: 22px;
	height: 1px;
	background: var(--fc-text);
	transition: transform .2s, opacity .2s;
}

.fc-burger.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.fc-burger.is-open span:nth-child(2) { opacity: 0; }
.fc-burger.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- drawer ---------- */

.fc-drawer {
	position: fixed;
	z-index: 890;
	inset: var(--fc-header-h) 0 0 0;
	padding: 1.5rem 1.25rem 2rem;
	background: var(--fc-bg);
	overflow-y: auto;
}

.fc-drawer[hidden] { display: none; }
.fc-drawer__nav { display: flex; flex-direction: column; }
.fc-drawer .fc-nav__list { flex-direction: column; gap: 0; }

.fc-drawer .fc-nav__list a {
	display: block;
	padding: 1rem 0;
	border-bottom: 1px solid var(--fc-line);
	color: var(--fc-text);
	font-size: 1rem;
	letter-spacing: .1em;
}

.fc-drawer .fc-drawer__cta {
	margin-top: 1.5rem;
	padding: 1em;
	background: var(--fc-accent);
	color: #f5efe8;
	font-family: 'Special Elite', 'Courier New', monospace;
	font-size: .85rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	border-radius: 2px;
}

@media (max-width: 781px) {
	.fc-head { gap: .75rem; }
	.fc-nav,
	.fc-head__cta { display: none; }
	.fc-burger { display: flex; }
	.fc-head__brand { flex-grow: 1; font-size: .85rem; }
}

@media (min-width: 782px) {
	.fc-drawer { display: none; }
}

/* The atlas is full-screen MINUS the header, or the page scrolls by exactly
   the header's height — which is how the gap came back the first time.

   And minus WordPress's admin bar, which pushes <html> down for anyone logged
   in: 32px on desktop, 46px at 782px and below (WordPress's own breakpoint,
   one pixel off ours). Logged out it is zero, which is why the page fitted for
   visitors and overflowed for the client. */
body.admin-bar { --fc-adminbar-h: 32px; }

@media screen and (max-width: 782px) {
	body.admin-bar { --fc-adminbar-h: 46px; }
}

.fc-atlas.is-screen {
	height: calc(100vh - var(--fc-header-h) - var(--fc-adminbar-h, 0px));
	height: calc(100dvh - var(--fc-header-h) - var(--fc-adminbar-h, 0px));
}

@media (prefers-reduced-motion: reduce) {
	.fc-burger span { transition: none; }
}

/* =========================================================================
   Comments — FC-10/11

   WordPress renders its comment textarea with cols="45", which computes to
   ~460px and overflowed a 375px screen, scrolling every story page sideways.
   Constraining the fields is the fix; the rest is making the form match.
   ====================================================================== */

.fc-case__comments { color: var(--fc-text); }

.fc-case__comments .comment-reply-title,
.fc-case__comments .comments-title {
	margin: 0 0 1rem;
	color: var(--fc-text);
	font-size: 1.3rem;
}

.fc-case__comments .comment-notes,
.fc-case__comments .comment-form-cookies-consent label,
.fc-case__comments .logged-in-as {
	font-size: .85rem;
	opacity: .6;
}

.fc-case__comments label {
	display: block;
	margin-bottom: .35rem;
	font-size: .78rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	opacity: .75;
}

.fc-case__comments input[type="text"],
.fc-case__comments input[type="email"],
.fc-case__comments input[type="url"],
.fc-case__comments textarea {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	padding: .7em .8em;
	border: 1px solid var(--fc-line);
	background: var(--fc-panel);
	color: var(--fc-text);
	font: inherit;
	font-size: 1rem;
	border-radius: 2px;
}

.fc-case__comments textarea { min-height: 9rem; resize: vertical; }

.fc-case__comments input:focus,
.fc-case__comments textarea:focus {
	outline: 2px solid var(--fc-amber);
	outline-offset: 1px;
}

.fc-case__comments .comment-form-cookies-consent {
	display: flex;
	gap: .6rem;
	align-items: flex-start;
}

.fc-case__comments .comment-form-cookies-consent input { width: auto; margin-top: .3rem; }
.fc-case__comments .comment-form-cookies-consent label { text-transform: none; letter-spacing: 0; }

.fc-case__comments .submit {
	padding: .75em 1.5em;
	border: 1px solid var(--fc-accent);
	background: var(--fc-accent);
	color: #f5efe8;
	font-family: 'Special Elite', 'Courier New', monospace;
	font-size: .8rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	cursor: pointer;
	border-radius: 2px;
}

.fc-case__comments .submit:hover { background: #a04532; }

.fc-case__comments .comment-list {
	margin: 0 0 2.5rem;
	padding: 0;
	list-style: none;
}

.fc-case__comments .comment-list li {
	padding: 1.1rem 0;
	border-bottom: 1px solid var(--fc-line);
}

.fc-case__comments .comment-list .children { margin: 1rem 0 0 1.2rem; padding: 0; list-style: none; }
.fc-case__comments .comment-author { font-size: .95rem; }
.fc-case__comments .comment-author .says { opacity: .5; }
.fc-case__comments .comment-metadata { font-size: .75rem; opacity: .5; }
.fc-case__comments .comment-awaiting-moderation { color: var(--fc-amber); font-size: .85rem; font-style: italic; }
.fc-case__comments .avatar { border-radius: 50%; vertical-align: middle; margin-right: .5rem; }

/* Doubled: a theme's `.theme a` rule would otherwise take the colour. */
.fc-case__comments .comment-list a,
.fc-case__comments .comment-metadata a { color: var(--fc-amber); }

/* Last line of defence: nothing in a story may scroll the page sideways. */
.fc-case,
.fc-case__comments { overflow-wrap: break-word; }

/* ---- The haunt (FC-2) ------------------------------------------------- */

/* The figure that stands beside the story while you read. Fixed to the
   viewport and printed in the footer, so she belongs to no column and no
   template has to leave a gap for her. `pointer-events: none` because she is
   scenery: she must never eat a click meant for the story underneath. */
.fc-haunt {
	/* The story column, so she can be placed against the text rather than
	   against the window. Override this one value if the column changes. */
	--fc-haunt-column: calc(var(--fc-col) - 2 * var(--fc-gutter));
	/* Sized to the gutter beside the column, not to the window: with the wide
	   story column a laptop leaves her ~210px, and a fixed 22vw put her over
	   the last hundred pixels of every line. */
	--fc-haunt-w: clamp(150px, min(22vw, calc((100vw - var(--fc-haunt-column)) / 2 + var(--fc-haunt-overlap) - 12px)), 330px);
	/* How far she dips behind the text. Her edge is transparent, so a little
	   overlap reads as depth rather than as a collision. */
	--fc-haunt-overlap: 1.25rem;

	position: fixed;
	/* Sit her just outside the column; when the gutter is too narrow for her,
	   max() parks her at the window edge instead of pushing her off it. The
	   percentage resolves against the viewport without the scrollbar, which
	   100vw would wrongly include. */
	right: max(0px, calc((100% - var(--fc-haunt-column)) / 2 - var(--fc-haunt-w) + var(--fc-haunt-overlap)));
	/* Below the fold by a hair, so the float never lifts her off the bottom
	   edge and reveals a gap under her feet. */
	bottom: -18px;
	/* Under the site header (900) and the mobile drawer, over the story. */
	z-index: 300;
	margin: 0;
	pointer-events: none;
}

/* Two classes deep on purpose. Breakdance ships `.breakdance img { max-width:
   100%; height: auto }`, which is (0,1,1) and outranks a single-class rule —
   a plugin stylesheet on a builder site has to clear the builder's reset. */
.fc-haunt .fc-haunt__frame {
	display: block;
	width: var(--fc-haunt-w);
	height: auto;
	max-height: 78vh;
	object-fit: contain;
	object-position: right bottom;
	/* Sits her into the page instead of on top of it. */
	filter: drop-shadow(0 0 28px rgba(13, 19, 16, .85));
	/* Slow enough that you notice it only once you have stopped reading. The
	   drift is on the image, not the container, so it cannot fight the
	   positioning above. */
	animation: fc-haunt-float 9s ease-in-out infinite;
	will-change: transform;
}

@keyframes fc-haunt-float {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	50%      { transform: translateY(-14px) rotate(-.6deg); }
}

/* On a phone the column is the whole screen, so she cannot stand beside it —
   she stands in front of the bottom corner instead, small enough to leave the
   line of text she overlaps still readable. */
@media (max-width: 781px) {
	.fc-haunt {
		/* A third of a narrow screen. Wider than this and she stops being a
		   figure at the edge and starts being a thing covering the paragraph. */
		--fc-haunt-w: min(34vw, 130px);
		--fc-haunt-overlap: 0px;
	}

	.fc-haunt .fc-haunt__frame { max-height: 34vh; }

}

@media (prefers-reduced-motion: reduce) {
	.fc-haunt .fc-haunt__frame { animation: none; }
}

/* Scenery has no caption and no label, but a reader who finds her distracting
   needs a way to stop her — so the one control takes clicks back. */
.fc-haunt .fc-haunt__hold {
	position: absolute;
	right: .5rem;
	bottom: 1.5rem;
	pointer-events: auto;
	padding: .3rem .6rem;
	border: 1px solid var(--fc-line);
	border-radius: 3px;
	background: rgba(13, 19, 16, .82);
	color: var(--fc-ink);
	font: inherit;
	font-size: .72rem;
	line-height: 1.2;
	letter-spacing: .04em;
	cursor: pointer;
	opacity: 0;
	transition: opacity .18s ease;
}

.fc-haunt:hover .fc-haunt__hold,
.fc-haunt__hold:focus-visible { opacity: 1; }

/* A phone has no hover, so the one way to stop her would otherwise never
   appear. Dim rather than hidden: there when looked for, quiet when not.
   Keyed to width rather than `hover: none`, which a desktop browser in device
   emulation does not report — and placed after the base rule, because both are
   (0,2,0) and at equal specificity the later one wins. */
@media (max-width: 781px) {
	.fc-haunt .fc-haunt__hold {
		opacity: .45;
		right: .25rem;
		bottom: 1rem;
		padding: .2rem .4rem;
		font-size: .62rem;
	}
}