/* Cut-paper titles (0.7.67; own file since 0.7.68, loaded wherever a cut-paper
   title can render). inc/archives.php rebuilds the archive
   h1 as one screen-reader-only copy of the exact title plus an aria-hidden
   layer with one torn-paper tile per grapheme. Tile paper/ink pairs are
   palette tokens measured at AA or better for text of any size (lowest:
   blue-green/russian violet 4.99:1); glaucous fails both inks and is left
   out. Tiles are paper objects, so they look the same in dark mode; only the
   hard shadow follows the theme through --cr-shadow-hard. Style indexes are
   deterministic (title crc32 + position), set on the server. */
.cr-cutout {
	--cr-cutout-min: 1.5rem;
	--cr-cutout-max: 4.25rem;
	container-type: inline-size;
	letter-spacing: 0;
}

.cr-cutout__text {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.cr-cutout__tiles {
	display: block;
	font-size: clamp(var(--cr-cutout-min), calc(100cqi / (var(--cr-cutout-longest, 8) * 1.18)), var(--cr-cutout-max));
	line-height: 1.5;
	padding-block: 0.05em 0.2em;
	-webkit-user-select: none;
	user-select: none;
}

.cr-cutout__word {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.14em 0.07em;
	vertical-align: middle;
}

.cr-cutout__gap { word-spacing: 0.3em; }

.cr-cutout__tile {
	--cr-cutout-paper: var(--cr-printer-ivory);
	--cr-cutout-ink: var(--cr-russian-violet);
	--cr-cutout-voice: var(--cr-font-accent);
	--cr-cutout-weight: 800;
	--cr-cutout-scale: 1;
	--cr-cutout-tilt: var(--cr-rotate-1);
	--cr-cutout-edge: polygon(0 4%, 22% 0, 48% 5%, 76% 0, 100% 3%, 97% 30%, 100% 62%, 96% 100%, 70% 95%, 41% 100%, 14% 96%, 0 100%, 3% 66%, 0 34%);
	position: relative;
	isolation: isolate;
	display: inline-grid;
	place-items: center;
	min-inline-size: 0.95em;
	padding: 0.08em 0.17em 0.12em;
	color: var(--cr-cutout-ink);
	font-family: var(--cr-cutout-voice);
	font-weight: var(--cr-cutout-weight);
	font-size: calc(1em * var(--cr-cutout-scale));
	font-style: normal;
	line-height: 1.1;
	text-transform: none;
	transform: rotate(var(--cr-cutout-tilt));
}

/* The paper carries the hard-shadow token as a drop shadow, so the shadow
   follows the torn edge its ::before is cut to. */
.cr-cutout__paper {
	position: absolute;
	inset: 0;
	z-index: -1;
	filter: drop-shadow(var(--cr-shadow-hard));
}

.cr-cutout__paper::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--cr-cutout-paper);
	clip-path: var(--cr-cutout-edge);
}

.cr-cutout__tile.is-punct {
	--cr-cutout-scale: 0.62;
	min-inline-size: 0.7em;
	align-self: center;
}

/* Paper/ink pairs (contrast measured with the WCAG formula). */
.cr-cutout__tile.is-p0 { --cr-cutout-paper: var(--cr-selective-yellow); --cr-cutout-ink: var(--cr-russian-violet); } /* 8.98 */
.cr-cutout__tile.is-p1 { --cr-cutout-paper: var(--cr-cerulean); --cr-cutout-ink: var(--cr-printer-ivory); } /* 6.11 */
.cr-cutout__tile.is-p2 { --cr-cutout-paper: var(--cr-light-orange); --cr-cutout-ink: var(--cr-prussian-blue); } /* 11.13 */
.cr-cutout__tile.is-p3 { --cr-cutout-paper: var(--cr-periwinkle); --cr-cutout-ink: var(--cr-russian-violet); } /* 8.10 */
.cr-cutout__tile.is-p4 { --cr-cutout-paper: var(--cr-ut-orange); --cr-cutout-ink: var(--cr-russian-violet); } /* 6.31 */
.cr-cutout__tile.is-p5 { --cr-cutout-paper: var(--cr-prussian-blue); --cr-cutout-ink: var(--cr-printer-ivory); } /* 13.25 */
.cr-cutout__tile.is-p6 { --cr-cutout-paper: var(--cr-sky-blue); --cr-cutout-ink: var(--cr-prussian-blue); } /* 7.74 */
.cr-cutout__tile.is-p7 { --cr-cutout-paper: var(--cr-printer-ivory); --cr-cutout-ink: var(--cr-russian-violet); } /* 15.00 */
.cr-cutout__tile.is-p8 { --cr-cutout-paper: var(--cr-blue-green); --cr-cutout-ink: var(--cr-russian-violet); } /* 4.99 */
.cr-cutout__tile.is-p9 { --cr-cutout-paper: var(--cr-russian-violet); --cr-cutout-ink: var(--cr-printer-ivory); } /* 15.00 */
.cr-cutout__tile.is-p10 { --cr-cutout-paper: var(--cr-light-gray); --cr-cutout-ink: var(--cr-prussian-blue); } /* 11.62 */

/* Four voices: Rock Salt (display accent), Roboto Slab, Barlow, mono. */
.cr-cutout__tile.is-v0 { --cr-cutout-voice: var(--cr-font-display); --cr-cutout-weight: 400; --cr-cutout-scale: 0.8; }

.cr-cutout__tile.is-v0.is-punct { --cr-cutout-scale: 0.5; }

.cr-cutout__tile.is-v1 { --cr-cutout-voice: var(--cr-font-accent); --cr-cutout-weight: 800; }

.cr-cutout__tile.is-v2 { --cr-cutout-voice: var(--cr-font-body); --cr-cutout-weight: 700; }

.cr-cutout__tile.is-v3 { --cr-cutout-voice: var(--cr-font-mono); --cr-cutout-weight: 700; --cr-cutout-scale: 0.92; }

.cr-cutout__tile.is-v3.is-punct { --cr-cutout-scale: 0.58; }

/* The four house rotations. */
.cr-cutout__tile.is-r0 { --cr-cutout-tilt: var(--cr-rotate-1); }

.cr-cutout__tile.is-r1 { --cr-cutout-tilt: var(--cr-rotate-2); }

.cr-cutout__tile.is-r2 { --cr-cutout-tilt: var(--cr-rotate-neg); }

.cr-cutout__tile.is-r3 { --cr-cutout-tilt: var(--cr-rotate-neg2); }

/* Five torn edges. */
.cr-cutout__tile.is-e1 { --cr-cutout-edge: polygon(3% 0, 30% 4%, 58% 0, 86% 5%, 100% 0, 98% 36%, 100% 70%, 97% 97%, 64% 100%, 36% 95%, 8% 100%, 0 95%, 2% 58%, 0 22%); }

.cr-cutout__tile.is-e2 { --cr-cutout-edge: polygon(0 0, 35% 3%, 64% 0, 100% 4%, 96% 26%, 100% 50%, 97% 78%, 100% 100%, 76% 96%, 50% 100%, 22% 95%, 2% 100%, 0 72%, 4% 44%, 0 18%); }

.cr-cutout__tile.is-e3 { --cr-cutout-edge: polygon(5% 3%, 40% 0, 72% 4%, 97% 0, 100% 40%, 96% 72%, 100% 96%, 60% 100%, 28% 96%, 0 100%, 3% 70%, 0 38%); }

.cr-cutout__tile.is-e4 { --cr-cutout-edge: polygon(0 6%, 18% 0, 44% 3%, 67% 0, 100% 5%, 97% 45%, 100% 82%, 94% 100%, 72% 97%, 46% 100%, 20% 96%, 0 100%, 2% 50%); }

/* The flank sparkles stay in the margins but leave the heading's name: its
   accessible name is exactly the archive title. */
@media (min-width: 900px) {

	.cr-flank.cr-cutout::before { content: "✺" / "" !important; }

	.cr-flank.cr-cutout::after { content: "✦" / "" !important; }
}

/* Forced colours: papers and shadows drop out; each tile keeps a border. */
@media (forced-colors: active) {

	.cr-cutout__tile { border: 1px solid CanvasText; }

	.cr-cutout__paper { display: none; }
}

/* Front page Field notes heading (0.7.68): a flex item, inline-block on
   phones, so it sizes its tiles from the viewport instead of a container, and
   its sky-blue highlighter strip gives way to the per-letter tiles. */
.cr-fieldnotes .cr-fieldnotes__title.cr-cutout {
	container-type: normal;
}

.cr-fieldnotes .cr-fieldnotes__title.cr-cutout::after {
	content: none;
}

.cr-fieldnotes .cr-fieldnotes__title.cr-cutout .cr-cutout__tiles {
	font-size: clamp(2rem, 1.4rem + 2.6vw, 3.5rem);
}