/*!
 * Archivo del Desierto — el mapa de la campaña
 *
 * Loaded only on /mapa/. Everything here dresses one inline SVG: there is no mapping library,
 * so the "map style" is a stylesheet like any other, and the sheet can be themed, animated and
 * printed with the same tools as the rest of the site.
 */

@layer pages {

	.atlas {
		--sheet-h: min(78vh, 46rem);
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		gap: clamp(1.5rem, 4vw, 3rem);
		max-width: var(--width-full);
		margin-inline: auto;
		padding-inline: var(--space-gutter);
		padding-block: clamp(2rem, 6vw, 4rem);
	}

	/* ── The sheet ──────────────────────────────────────────────────────── */

	.atlas__map-col {
		position: sticky;
		top: calc(var(--header-height) + 1rem);
		flex: 1 1 min(34rem, 100%);
		min-width: 0;
	}

	/*
	 * The sheet is meant to read as a real map sheet: stock that has been folded, handled and
	 * left in a drawer for sixty years. All of it is generated — fractal noise for the fibre,
	 * large-scale noise for the foxing, gradients for the corner staining and for the crease,
	 * and a displaced rectangle as a mask for the deckle edge. No texture is downloaded: this
	 * site makes no third-party image requests, and a JPEG of paper would be heavier than the
	 * map it sits under.
	 *
	 * The torn edge replaces the generic .tx-paper-edge scallops, which were cutting little
	 * half-moons out of the coastline along the bottom of the frame.
	 */
	.atlas__sheet {
		position: relative;
		height: var(--sheet-h);
		max-height: 78vh;
		width: 100%;
		overflow: clip;
		background-color: #e7dcc4;

		/* A deckle edge, drawn once as a displaced rectangle and stretched over the sheet. */
		-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='900' preserveAspectRatio='none'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.013 0.021' numOctaves='4' seed='11' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='22' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Crect x='13' y='13' width='1174' height='874' fill='%23fff' filter='url(%23t)'/%3E%3C/svg%3E");
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='900' preserveAspectRatio='none'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.013 0.021' numOctaves='4' seed='11' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='22' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Crect x='13' y='13' width='1174' height='874' fill='%23fff' filter='url(%23t)'/%3E%3C/svg%3E");
		-webkit-mask-size: 100% 100%;
		mask-size: 100% 100%;
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;

		filter: drop-shadow(0 2px 3px rgb(28 22 12 / 0.18)) drop-shadow(0 18px 30px rgb(28 22 12 / 0.22));
	}

	/* Ageing, over the map: fibre, foxing, one soft fold and a burnt-in vignette. */
	.atlas__sheet::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 3;
		pointer-events: none;
		background-image:
			/* corner staining */
			radial-gradient(58% 44% at 0% 0%, rgb(120 88 40 / 0.13), transparent 72%),
			radial-gradient(52% 40% at 100% 12%, rgb(120 88 40 / 0.09), transparent 72%),
			radial-gradient(64% 48% at 96% 100%, rgb(104 74 32 / 0.14), transparent 74%),
			radial-gradient(50% 40% at 4% 96%, rgb(104 74 32 / 0.10), transparent 72%),
			/* the vertical fold of a sheet that lived folded in four */
			linear-gradient(90deg, transparent 49.2%, rgb(90 70 36 / 0.13) 49.9%, rgb(255 250 235 / 0.28) 50.2%, transparent 51%),
			linear-gradient(0deg, transparent 49.2%, rgb(90 70 36 / 0.10) 49.9%, rgb(255 250 235 / 0.22) 50.2%, transparent 51%),
			/* foxing: slow, blotchy noise */
			url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.009' numOctaves='3' seed='5'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.44 0 0 0 0 0.31 0 0 0 0 0.11 0 0 0 -1.45 0.62'/%3E%3C/filter%3E%3Crect width='420' height='420' filter='url(%23f)'/%3E%3C/svg%3E"),
			/* fibre */
			url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)' opacity='0.55'/%3E%3C/svg%3E");
		background-size: auto, auto, auto, auto, 100% 100%, 100% 100%, 620px 620px, 200px 200px;
		mix-blend-mode: multiply;
		opacity: 0.42;
	}

	/* The neatline: the double rule a printed sheet carries inside its margin. */
	.atlas__sheet::before {
		content: "";
		position: absolute;
		inset: clamp(7px, 1.2vw, 12px);
		z-index: 2;
		pointer-events: none;
		border: 1px solid rgb(96 72 38 / 0.5);
		box-shadow:
			inset 0 0 0 3px rgb(231 220 196 / 0.35),
			inset 0 0 0 4px rgb(96 72 38 / 0.28),
			inset 0 0 60px 10px rgb(86 62 26 / 0.13);
	}

	.atlas__svg {
		display: block;
		width: 100%;
		height: 100%;
	}

	/*
	 * Every stroke on the map is declared non-scaling. Without it the coastline turns into a
	 * smear at the wide frame and a hairline at the close one, because the viewBox — not a
	 * transform — is what zooms.
	 */
	.atlas__svg :where(path, line, circle, rect) {
		vector-effect: non-scaling-stroke;
	}

	.atlas__water { fill: #d7e2e0; }

	/*
	 * La retícula es una referencia, no un dibujo. Va en `multiply` y con muy poca opacidad
	 * para que tiña el papel en vez de posarse encima —sobre la tierra clara era donde más
	 * cantaba—, con el trazo punteado fino con que se imprime una carta.
	 */
	.atlas__graticule {
		color: #a9b5b1;
		opacity: 0.32;
		mix-blend-mode: multiply;
	}

	.atlas__shore {
		fill: #f2ead7;
		stroke: #9a8a68;
		stroke-width: 1.1;
		stroke-linejoin: round;
	}

	/* ── Routes ─────────────────────────────────────────────────────────── */

	/*
	 * Default state is "visible". Everything that hides a layer until an act calls for it is
	 * scoped under .js — the class the header sets before first paint — so a reader with no
	 * JavaScript gets the whole map at once rather than a blank sheet. Same rule as the
	 * reveals on the rest of the site, and for the same reason.
	 */
	.atlas__leg {
		stroke: var(--color-oxidized-brass);
		stroke-width: 2;
		stroke-linecap: round;
		opacity: 0.95;
		transition: opacity var(--motion-normal) var(--ease-standard);
	}

	.js .atlas__leg { opacity: 0; }

	.atlas__leg--sea { stroke-dasharray: 1 9; stroke-width: 3; }
	.atlas__leg--rail { stroke-dasharray: 10 5; }
	.atlas__leg--air { stroke-dasharray: 14 6 2 6; stroke: var(--color-rust); }
	.atlas__leg--track { stroke-dasharray: 5 7; stroke: var(--color-olive); }

	.atlas__leg.is-on { opacity: 0.95; }

	/*
	 * The draw-in. The dash pattern that dresses each mode has to survive the animation, so
	 * the line is revealed by a mask-like second copy rather than by animating its own
	 * dasharray: `--draw` scales the visible portion via stroke-dashoffset on a plain overlay.
	 */
	.atlas__leg.is-drawing {
		animation: atlas-draw 1100ms var(--ease-cinematic) both;
	}

	.atlas__leg--rtl.is-drawing {
		animation-name: atlas-draw-rtl;
	}

	@keyframes atlas-draw {
		from { clip-path: inset(0 100% 0 0); }
		to { clip-path: inset(0 0 0 0); }
	}

	@keyframes atlas-draw-rtl {
		from { clip-path: inset(0 0 0 100%); }
		to { clip-path: inset(0 0 0 0); }
	}

	/* ── The mark that travels the leg ──────────────────────────────────── */

	.atlas__runner {
		display: none;
		r: calc(3.2 * var(--atlas-u, 1) * 1px);
		fill: var(--color-rust);
		stroke: #f2ead8;
		stroke-width: 1.2;
		opacity: 0;
		offset-distance: 0%;
		offset-rotate: 0deg;
	}

	.js .atlas__runner { display: inline; }

	.atlas__runner.is-on {
		opacity: 0.9;
		animation: atlas-run 7s linear infinite;
	}

	.atlas__runner--rail { fill: var(--color-oxidized-brass); }
	.atlas__runner--track { fill: var(--color-olive); }

	@keyframes atlas-run {
		from { offset-distance: 0%; }
		to { offset-distance: 100%; }
	}

	@media (prefers-reduced-motion: reduce) {
		.atlas__runner.is-on { animation: none; offset-distance: 100%; }
	}

	/* ── The defensive perimeter ────────────────────────────────────────── */

	.atlas__ring {
		opacity: 1;
		transition: opacity var(--motion-slow) var(--ease-standard);
	}

	.js .atlas__ring { opacity: 0; }

	.atlas__ring.is-on { opacity: 1; }

	.atlas__ring circle {
		fill: color-mix(in oklab, var(--color-rust) 7%, transparent);
		stroke: var(--color-rust);
		stroke-width: 1.4;
		stroke-dasharray: 6 5;
	}

	.atlas__ring text {
		font-family: var(--font-mono);
		font-size: calc(11 * var(--atlas-u, 1) * 1px);
		letter-spacing: 0.08em;
		text-transform: uppercase;
		fill: var(--color-blood-earth);
		paint-order: stroke;
		stroke: #f2ead8;
		stroke-width: 3px;
		stroke-linejoin: round;
	}

	/* ── Pins ───────────────────────────────────────────────────────────── */

	.atlas__pin {
		cursor: pointer;
		opacity: 1;
		transition: opacity var(--motion-normal) var(--ease-standard);
	}

	.js .atlas__pin { opacity: 0.25; }

	.atlas__pin.is-on { opacity: 1; }

	/*
	 * Everything a reader has to read is sized in --atlas-u, the number of SVG user units that
	 * currently fit in one CSS pixel. The script keeps it up to date on every frame of the fly,
	 * so a marker stays the same size on screen whether the frame spans three degrees or
	 * twenty. Without it, zooming the viewBox inflates the type with the geography and the
	 * closest views become unreadable — which is the classic failure of a hand-rolled SVG map.
	 */
	.atlas__dot {
		r: calc(4.5 * var(--atlas-u, 1) * 1px);
		fill: var(--color-ink);
		stroke: #fff;
		stroke-width: 1.5;
	}

	/* An open circle says "we do not know exactly where this was". The legend says so too. */
	.atlas__pin--aprox .atlas__dot {
		fill: #fff;
		stroke: var(--color-ink);
		stroke-dasharray: 2 2;
	}

	.atlas__halo {
		r: calc(16 * var(--atlas-u, 1) * 1px);
		fill: var(--color-rust);
		opacity: 0;
		transition: opacity var(--motion-normal) var(--ease-standard);
	}

	.atlas__pin.is-active .atlas__halo { opacity: 0.18; }
	.atlas__pin.is-active .atlas__dot { fill: var(--color-rust); }

	.atlas__label {
		font-family: var(--font-mono);
		font-size: calc(13 * var(--atlas-u, 1) * 1px);
		translate: calc(var(--dir, 1) * 12 * var(--atlas-u, 1) * 1px) calc((4 + var(--ly, 0) * 15) * var(--atlas-u, 1) * 1px);
		letter-spacing: 0.04em;
		fill: var(--color-ink);
		/* The halo is painted behind the glyphs, so a label stays legible over the coastline. */
		paint-order: stroke;
		stroke: #f2ead8;
		stroke-width: 3px;
		stroke-linejoin: round;
		pointer-events: none;
	}

	.atlas__pin.is-active .atlas__label { font-weight: 600; }

	/* ── Sheet furniture ────────────────────────────────────────────────── */

	.atlas__rose {
		position: absolute;
		inset-block-start: 0.9rem;
		inset-inline-end: 0.9rem;
		width: clamp(3rem, 7vw, 4rem);
		opacity: 0.55;
		mix-blend-mode: multiply;
	}

	.atlas__rose-g {
		fill: var(--color-ink);
		stroke: var(--color-ink);
	}

	.atlas__rose-g circle {
		fill: none;
		stroke-width: 1.5;
	}

	.atlas__rose-n { fill: var(--color-rust); }

	.atlas__rose-g text {
		font-family: var(--font-mono);
		font-size: 13px;
		stroke: none;
	}

	.atlas__note {
		display: flex;
		flex-wrap: wrap;
		gap: 0.35rem 1.25rem;
		margin-top: 0.85rem;
		font-family: var(--font-mono);
		font-size: 0.625rem;
		line-height: 1.5;
		letter-spacing: var(--tracking-wide);
		text-transform: uppercase;
		color: var(--color-muted);
	}

	.atlas__note-key {
		display: inline-flex;
		align-items: center;
		gap: 0.4rem;
	}

	.atlas__note-key svg {
		width: 0.9rem;
		height: 0.9rem;
	}

	.atlas__key-open {
		fill: #fff;
		stroke: var(--color-ink);
		stroke-width: 1.4;
		stroke-dasharray: 2 2;
	}

	/* ── The act rail ───────────────────────────────────────────────────── */

	.atlas__acts {
		display: flex;
		flex-wrap: wrap;
		gap: 0.4rem;
		margin-top: var(--space-m);
	}

	.atlas__act {
		display: inline-flex;
		align-items: baseline;
		gap: 0.5rem;
		padding: 0.5rem 0.9rem;
		text-decoration: none;
		border: 1px solid var(--color-border-strong);
		border-radius: var(--radius-pill);
		transition: border-color var(--motion-fast) var(--ease-standard),
			background-color var(--motion-fast) var(--ease-standard);
	}

	.atlas__act:hover,
	.atlas__act:focus-visible {
		border-color: var(--accent);
	}

	.atlas__act.is-current {
		background-color: var(--accent-deep);
		border-color: var(--accent-deep);
	}

	.atlas__act-roman {
		font-family: var(--font-mono);
		font-size: 0.625rem;
		letter-spacing: var(--tracking-wider);
		color: var(--accent-text);
	}

	.atlas__act-label {
		font-size: var(--text-sm);
		color: var(--color-ink);
	}

	.atlas__act.is-current .atlas__act-roman,
	.atlas__act.is-current .atlas__act-label {
		color: #fff;
	}

	/* ── The column of stops ────────────────────────────────────────────── */

	.atlas__list-col {
		flex: 1 1 min(24rem, 100%);
		min-width: 0;
	}

	.act + .act {
		margin-top: clamp(3rem, 9vw, 6rem);
	}

	/*
	 * A ghost numeral, but not so ghostly that it fails: this one is wayfinding — it pairs
	 * with the numeral on the act rail — so it is mixed from the text tone rather than from
	 * the decorative one, and clears 3:1 for large text.
	 */
	.act__roman {
		font-family: var(--font-display);
		font-size: var(--text-3xl);
		line-height: 1;
		color: color-mix(in oklab, var(--accent-text) 80%, transparent);
	}

	.act__title {
		margin-top: var(--space-xs);
		font-size: var(--text-2xl);
	}

	.act__text {
		max-width: var(--measure);
		margin-top: var(--space-s);
		font-size: var(--text-lg);
		line-height: var(--leading-relaxed);
		color: var(--color-charcoal);
	}

	.stop {
		margin-top: var(--space-xl);
		padding-top: var(--space-l);
		border-top: 1px solid var(--color-border);
	}

	.stop.is-active {
		border-top-color: var(--accent);
	}

	.stop__meta {
		display: flex;
		flex-wrap: wrap;
		gap: 0.4rem 1rem;
		font-family: var(--font-mono);
		font-size: 0.625rem;
		letter-spacing: var(--tracking-wider);
		text-transform: uppercase;
	}

	.stop__kind { color: var(--accent-text); }
	.stop__when { color: var(--color-muted); }

	.stop__name {
		margin-top: 0.35rem;
		font-size: var(--text-xl);
	}

	/*
	 * The place name is a button, because pressing it moves the map — and a control that does
	 * something has to be reachable by keyboard and announced as a control. It is styled to
	 * look like the heading it sits inside rather than like a form element.
	 */
	.stop__focus {
		padding: 0;
		font: inherit;
		color: inherit;
		text-align: start;
		background: none;
		border: 0;
		cursor: pointer;
		background-image: linear-gradient(currentColor, currentColor);
		background-size: 0 1px;
		background-position: 0 100%;
		background-repeat: no-repeat;
		transition: background-size var(--motion-normal) var(--ease-standard);
	}

	.stop__focus:hover,
	.stop__focus:focus-visible {
		background-size: 100% 1px;
	}

	.stop__fix {
		margin-top: var(--space-xs);
		padding-inline-start: 0.75rem;
		border-inline-start: 2px solid var(--color-sand-dark);
		font-size: var(--text-sm);
		color: var(--color-muted);
	}

	.stop__text {
		max-width: var(--measure);
		margin-top: var(--space-s);
		line-height: var(--leading-relaxed);
		color: var(--color-charcoal);
	}

	.stop__plates {
		display: flex;
		flex-wrap: wrap;
		gap: 0.75rem;
		margin: var(--space-m) 0 0;
		padding: 0;
		list-style: none;
	}

	.stop__plates a {
		display: block;
		width: 6.5rem;
		text-decoration: none;
	}

	.stop__plates img {
		display: block;
		width: 100%;
		height: 4.5rem;
		object-fit: cover;
		filter: grayscale(1) contrast(1.05);
		border: 1px solid var(--color-border);
		background-color: var(--surface-alt);
		transition: filter var(--motion-normal) var(--ease-standard);
	}

	.stop__plates a:hover img,
	.stop__plates a:focus-visible img {
		filter: grayscale(0.2) contrast(1.05);
	}

	.stop__plates span {
		display: block;
		margin-top: 0.35rem;
		font-family: var(--font-mono);
		font-size: 0.5625rem;
		line-height: 1.4;
		letter-spacing: var(--tracking-wide);
		text-transform: uppercase;
		color: var(--color-muted);
	}

	.stop__book {
		margin-top: var(--space-m);
	}

	/* ── El croquis ─────────────────────────────────────────────────────── */

	.croquis__body {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: clamp(2rem, 5vw, 4rem);
		margin-top: var(--space-xl);
	}

	.croquis__sheet {
		flex: 1 1 min(26rem, 100%);
		min-width: 0;
	}

	/*
	 * No overflow: the viewBox is wide enough to hold the labels. It used to be square with
	 * `overflow: visible`, which pushed "Sidi Mohamed Bendaud" straight into the column of
	 * text beside it.
	 */
	.croquis__svg {
		display: block;
		width: 100%;
		height: auto;
	}

	.croquis__ring {
		fill: none;
		stroke: color-mix(in oklab, var(--color-paper) 34%, transparent);
		stroke-width: 1;
		stroke-dasharray: 3 6;
	}

	.croquis__ring--outer {
		stroke-dasharray: 1 10;
		opacity: 0.6;
	}

	.croquis__ocean {
		font-family: var(--font-mono);
		font-size: 11px;
		letter-spacing: 0.2em;
		text-transform: uppercase;
		fill: color-mix(in oklab, var(--color-paper) 46%, transparent);
		writing-mode: vertical-rl;
	}

	.croquis__town circle {
		fill: var(--color-brass);
		stroke: color-mix(in oklab, var(--color-paper) 60%, transparent);
		stroke-width: 1.5;
	}

	.croquis__town text {
		font-family: var(--font-display);
		font-size: 19px;
		fill: var(--color-paper);
	}

	.croquis__spoke {
		stroke: color-mix(in oklab, var(--color-paper) 26%, transparent);
		stroke-width: 1;
	}

	.croquis__mark {
		fill: none;
		stroke: var(--color-brass);
		stroke-width: 2;
	}

	.croquis__post {
		cursor: pointer;
	}

	.croquis__post text {
		font-family: var(--font-mono);
		font-size: 13px;
		letter-spacing: 0.06em;
		fill: color-mix(in oklab, var(--color-paper) 86%, transparent);
		transition: fill var(--motion-fast) var(--ease-standard);
	}

	/* Two-way highlight: the sketch and the list are the same eight things. */
	.croquis__post.is-active .croquis__mark {
		fill: var(--color-brass);
		stroke: var(--color-paper);
	}

	.croquis__post.is-active .croquis__spoke {
		stroke: var(--color-brass);
		stroke-width: 1.6;
	}

	.croquis__post.is-active text {
		fill: #fff;
	}

	.croquis__mark,
	.croquis__spoke {
		transition: fill var(--motion-fast) var(--ease-standard),
			stroke var(--motion-fast) var(--ease-standard),
			stroke-width var(--motion-fast) var(--ease-standard);
	}

	.croquis__caveat {
		font-family: var(--font-mono);
		font-size: 10px;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		fill: color-mix(in oklab, var(--color-paper) 50%, transparent);
	}

	/* The posts draw themselves in sequence, once, when the croquis comes into view. */
	.js .croquis__post {
		opacity: 0;
	}

	.js .croquis.is-visible .croquis__post {
		animation: croquis-in 600ms var(--ease-cinematic) both;
		animation-delay: calc(var(--i) * 90ms);
	}

	@keyframes croquis-in {
		from { opacity: 0; transform: scale(0.94); }
		to { opacity: 1; transform: none; }
	}

	.croquis__index {
		flex: 1 1 min(20rem, 100%);
		min-width: 0;
	}

	.croquis__list {
		margin: var(--space-l) 0 0;
		padding: 0;
		list-style: none;
	}

	.croquis__item {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 0.75rem;
		padding-block: 0.7rem;
		border-top: 1px solid var(--color-border-on-dark);
	}

	.croquis__item:last-child {
		border-bottom: 1px solid var(--color-border-on-dark);
	}

	.croquis__name {
		padding: 0;
		font: inherit;
		font-size: var(--text-base);
		text-align: start;
		color: var(--color-paper);
		background: none;
		border: 0;
		cursor: pointer;
		background-image: linear-gradient(var(--color-brass), var(--color-brass));
		background-size: 0 1px;
		background-position: 0 100%;
		background-repeat: no-repeat;
		transition: background-size var(--motion-normal) var(--ease-standard);
	}

	.croquis__name:hover,
	.croquis__name:focus-visible,
	.croquis__item.is-active .croquis__name {
		background-size: 100% 1px;
	}

	.croquis__item.is-active {
		background-color: rgb(255 255 255 / 0.04);
	}

	.croquis__item.is-active .croquis__thumbs img {
		filter: grayscale(0.15);
		border-color: color-mix(in oklab, var(--color-brass) 70%, transparent);
	}

	.croquis__thumbs {
		display: flex;
		gap: 0.4rem;
	}

	.croquis__thumbs img {
		display: block;
		width: 3rem;
		height: 2.2rem;
		object-fit: cover;
		filter: grayscale(1);
		border: 1px solid color-mix(in oklab, var(--color-paper) 24%, transparent);
	}

	.croquis__nophoto {
		font-family: var(--font-mono);
		font-size: 0.5625rem;
		letter-spacing: var(--tracking-wide);
		text-transform: uppercase;
		color: var(--on-dark-muted);
	}

	/* ── Small screens ──────────────────────────────────────────────────── */

	@media (max-width: 61.99em) {
		.atlas__map-col {
			position: sticky;
			top: var(--header-height);
			z-index: 2;
			flex-basis: 100%;
			padding-block: 0.5rem;
			background-color: var(--surface);
		}

		.atlas__sheet {
			height: min(40vh, 19rem);
			aspect-ratio: auto;
		}

		.atlas__note { display: none; }
		.atlas__rose { width: 2.5rem; }
		.atlas__label { font-size: calc(12 * var(--atlas-u, 1) * 1px); }

		/*
		 * One scrolling row rather than three wrapped ones. The rail is pinned to the top of
		 * the screen along with the map, and three rows of it would leave a phone with more
		 * navigation than story.
		 */
		.atlas__acts {
			flex-wrap: nowrap;
			overflow-x: auto;
			margin-top: 0.6rem;
			padding-bottom: 0.4rem;
			scroll-snap-type: x proximity;
			scrollbar-width: none;
		}

		.atlas__acts::-webkit-scrollbar { display: none; }

		.atlas__act {
			flex: 0 0 auto;
			scroll-snap-align: start;
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.atlas__leg.is-drawing { animation: none; }
		.js .croquis__post { opacity: 1; }
		.js .croquis.is-visible .croquis__post { animation: none; }
	}
}