/*
Theme Name: Pcheen Counterfoil
Theme URI: https://pcheen.com/
Description: The theme of pcheen.com: security-paper pages, violet rubber-stamp niche labels and a reading sheet with an outline rail.
Version: 1.0.3
Requires at least: 6.6
Requires PHP: 8.2
License: GPL-2.0-or-later
Text Domain: pcheen-counterfoil
*/

/* ── Fonts (shipped with the theme, SIL Open Font License) ── */

@font-face {
	font-family: "Archivo";
	src: url("assets/fonts/archivo-var.woff2") format("woff2");
	font-weight: 500 800;
	font-stretch: 62% 100%;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Atkinson Hyperlegible Next";
	src: url("assets/fonts/atkinson-next-var.woff2") format("woff2");
	font-weight: 400 800;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Atkinson Hyperlegible Next";
	src: url("assets/fonts/atkinson-next-italic-var.woff2") format("woff2");
	font-weight: 400 700;
	font-style: italic;
	font-display: swap;
}

/* ── Tokens ── */

:root {
	--ground: #eef2ec;
	--sheet: #ffffff;
	--ink: #1d2445;
	--violet: #5a2d8e;
	--violet-deep: #47236f;
	--violet-tint: #e9e1f3;
	--green: #2d6e56;
	--green-tint: #dce8e0;
	--muted: #5b6371;
	--line: #c5d3c9;
	--highlight: #f4e07a;

	--heading: "Archivo", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
	--body: "Atkinson Hyperlegible Next", "Segoe UI", "Helvetica Neue", Arial, sans-serif;

	--step--1: 0.875rem;
	--step-0: 1.125rem;
	--step-1: 1.40625rem;
	--step-2: 1.7578rem;
	--step-3: 2.1973rem;

	--measure: 40rem;
	--wide: 76rem;
	--gutter: clamp(1.25rem, 4vw, 2.5rem);
	--corner: 3px;

	--engraving: url("assets/img/security-ground.svg");
	--strip: url("assets/img/security-strip.svg");
}

/* ── Base ── */

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--ground);
	color: var(--ink);
	font-family: var(--body);
	font-size: var(--step-0);
	line-height: 1.6;
	font-variant-numeric: lining-nums slashed-zero;
	text-rendering: optimizeLegibility;
}

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

a {
	color: var(--violet);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

a:hover {
	text-decoration-thickness: 2px;
}

:focus-visible {
	outline: 3px solid var(--violet);
	outline-offset: 3px;
	border-radius: 2px;
}

h1,
h2,
h3,
h4 {
	font-family: var(--heading);
	font-stretch: 78%;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.005em;
	text-wrap: balance;
	margin: 0;
}

p {
	margin: 0;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.skip-link:focus {
	position: fixed;
	z-index: 1000;
	top: 0.75rem;
	left: 0.75rem;
	width: auto;
	height: auto;
	clip-path: none;
	padding: 0.6rem 1rem;
	background: var(--sheet);
	color: var(--ink);
	font-weight: 700;
}

.wrap {
	width: min(100% - 2 * var(--gutter), var(--wide));
	margin-inline: auto;
}

/* ── Security paper: the signature ── */

.strip {
	height: 24px;
	background: var(--strip) repeat-x center / auto 24px, var(--ground);
	border-bottom: 1px solid var(--line);
}

.ground {
	background: var(--engraving) repeat 0 0 / 288px 144px, var(--ground);
}

/* The niche label, pressed onto the page by hand */
.stamp {
	display: inline-block;
	padding: 0.3rem 0.75rem 0.32rem;
	border: 2px solid var(--violet);
	outline: 1px solid var(--violet);
	outline-offset: 3px;
	border-radius: 2px;
	color: var(--violet);
	background: color-mix(in srgb, var(--sheet) 55%, transparent);
	font-family: var(--heading);
	font-stretch: 70%;
	font-weight: 750;
	font-size: 1rem;
	line-height: 1.15;
	letter-spacing: 0.01em;
	text-decoration: none;
	transform: rotate(-2.5deg);
	transform-origin: left center;
}

a.stamp:hover {
	background: var(--violet-tint);
}

/* ── Header ── */

.topline {
	background: var(--ground);
}

.topline__row {
	display: flex;
	align-items: center;
	gap: 1rem 2rem;
	padding-block: 1.1rem;
}

.wordmark {
	display: block;
	margin-right: auto;
	line-height: 0;
}

.wordmark img {
	height: 2.75rem;
	width: auto;
}

.fold {
	display: none;
}

.sections ul,
.codes ul,
.foot__pages ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sections ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.75rem;
}

.sections a {
	display: block;
	padding-block: 0.35rem;
	color: var(--ink);
	font-weight: 600;
	font-size: 1.0625rem;
	text-decoration: none;
	border-bottom: 3px solid transparent;
}

.sections a:hover {
	border-bottom-color: var(--line);
}

.sections .current-menu-item > a,
.sections .current-menu-parent > a,
.sections .current-post-ancestor > a,
.sections a[aria-current="page"] {
	border-bottom-color: var(--violet);
}

.codes ul {
	display: flex;
	gap: 0.25rem;
}

.codes a {
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	color: var(--muted);
	font-family: var(--heading);
	font-stretch: 85%;
	font-weight: 650;
	font-size: 0.95rem;
	text-decoration: none;
}

.codes a:hover {
	color: var(--ink);
	background: var(--green-tint);
}

.codes [aria-current="true"] {
	color: var(--violet);
	border: 2px solid var(--violet);
	box-shadow: inset 0 0 0 2px var(--ground), inset 0 0 0 3px var(--violet);
}

@media (max-width: 760px) {
	.topline__row {
		flex-wrap: wrap;
	}

	.wordmark img {
		height: 2.25rem;
	}

	.fold {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		min-height: 2.5rem;
		padding: 0.4rem 0.8rem;
		border: 2px solid var(--ink);
		border-radius: var(--corner);
		background: var(--sheet);
		color: var(--ink);
		font: 600 1rem/1 var(--body);
		cursor: pointer;
	}

	.fold__lines {
		width: 1rem;
		height: 2px;
		background: currentColor;
		box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor;
	}

	.js .sections {
		display: none;
	}

	.js .topline.is-open .sections {
		display: block;
	}

	.sections {
		order: 3;
		flex-basis: 100%;
	}

	.sections ul {
		flex-direction: column;
		gap: 0;
		border-top: 1px solid var(--line);
	}

	.sections li {
		border-bottom: 1px solid var(--line);
	}

	.sections a {
		padding-block: 0.8rem;
		border-bottom: 0;
	}

	.sections .current-menu-item > a,
	.sections a[aria-current="page"] {
		color: var(--violet);
	}

	.topline .codes {
		order: 2;
	}
}

/* ── Front page ── */

.front {
	position: relative;
	overflow: hidden;
	border-bottom: 1px solid var(--line);
}

.front__inner {
	position: relative;
	padding-block: clamp(3rem, 8vw, 6.5rem) clamp(3rem, 7vw, 5.5rem);
}

.front__rosette {
	position: absolute;
	z-index: 0;
	top: 50%;
	right: max(-12rem, -18vw);
	width: min(44rem, 80vw);
	transform: translateY(-50%);
	pointer-events: none;
}

.front__tagline {
	position: relative;
	max-width: 11ch;
	font-size: clamp(3.5rem, 1.6rem + 7.4vw, 8.25rem);
	font-stretch: 64%;
	font-weight: 780;
	line-height: 0.9;
	letter-spacing: -0.015em;
}

@media (max-width: 700px) {
	.front__rosette {
		top: -5rem;
		right: -9rem;
		width: 19rem;
		transform: none;
		opacity: 0.7;
	}
}

/* The ruled starting line: a wheel on a level line */
.front__level {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0;
	max-width: 34rem;
	margin-top: clamp(1.75rem, 4vw, 2.75rem);
	color: var(--violet);
}

.front__level svg {
	flex: none;
	width: 1.75rem;
	height: 1.75rem;
}

.front__level::before,
.front__level::after {
	content: "";
	height: 3px;
	background: var(--ink);
	border-radius: 2px;
}

.front__level::before {
	order: -1;
	width: 1.25rem;
	margin-right: 0.45rem;
}

.front__level::after {
	flex: 1;
	margin-left: 0.45rem;
}

.front__lede {
	position: relative;
	max-width: 34rem;
	margin-top: 1.25rem;
	font-size: var(--step-1);
	line-height: 1.5;
}

/* The niche's file: a white sheet with its stamp and its notes */
.dossier {
	position: relative;
	display: grid;
	gap: 1.75rem clamp(2rem, 4vw, 3.5rem);
	margin-block: clamp(3rem, 7vw, 5rem) clamp(2.5rem, 6vw, 4rem);
	padding: 2.5rem clamp(1.25rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.5rem);
	background: var(--sheet);
	border: 1px solid var(--line);
	border-radius: var(--corner);
}

@media (min-width: 900px) {
	.dossier {
		grid-template-columns: 16rem minmax(0, 1fr);
		align-items: start;
	}
}

.dossier__tab > .stamp {
	position: absolute;
	top: -1.05rem;
	left: clamp(1rem, 2.6vw, 1.75rem);
}

.dossier__desc {
	color: var(--muted);
	font-size: 1rem;
	line-height: 1.5;
}

.dossier__count {
	margin-top: 1rem;
	padding-top: 0.75rem;
	border-top: 1px solid var(--line);
	font-family: var(--heading);
	font-stretch: 80%;
	font-weight: 700;
	font-size: 0.95rem;
}

.dossier__more {
	display: inline-block;
	margin-top: 0.5rem;
	font-weight: 600;
	font-size: 1rem;
}

.dossier__notes {
	list-style: none;
	margin: 0;
	padding: 0;
}

.dossier__notes > li + li {
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--line);
}

/* A note as a card */
.card__drawing {
	display: block;
	margin-bottom: 1rem;
	line-height: 0;
}

.card__drawing img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	background: var(--ground);
	border: 1px solid var(--line);
	border-radius: var(--corner);
}

@media (min-width: 640px) {
	.dossier__notes .card {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
		gap: 1.75rem;
		align-items: center;
	}

	.dossier__notes .card__drawing {
		margin-bottom: 0;
	}
}

.card__title {
	font-size: var(--step-2);
	font-stretch: 74%;
}

.card__title a {
	color: var(--ink);
	text-decoration: none;
}

.card__title a:hover {
	color: var(--violet);
	text-decoration: underline;
	text-decoration-thickness: 2px;
}

.card__excerpt {
	margin-top: 0.6rem;
	font-size: 1rem;
	line-height: 1.55;
}

.card__date {
	margin-top: 0.75rem;
	color: var(--muted);
	font-size: var(--step--1);
}

.front-note {
	padding-block: clamp(2.5rem, 6vw, 4rem) clamp(3rem, 7vw, 5rem);
	border-top: 1px solid var(--line);
}

.front-note__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.5rem 3rem;
}

.front-note__mark {
	width: 4.5rem;
	height: 4.5rem;
}

@media (min-width: 900px) {
	.front-note__inner {
		grid-template-columns: 10rem minmax(0, var(--measure));
	}
}

/* ── Advertising (the slot and its label are printed by the runtime under these names) ── */

.slot-band {
	padding-block: 1.25rem;
	border-top: 2px dotted var(--line);
	border-bottom: 2px dotted var(--line);
	background: var(--ground);
}

.counterfoil {
	margin: 0;
	max-width: 100%;
}

.counterfoil-tag {
	display: block;
	margin-bottom: 0.4rem;
	color: var(--muted);
	font-size: 0.8125rem;
	letter-spacing: 0.02em;
}

.counterfoil iframe {
	display: block;
	max-width: 100%;
	border: 0;
}

.prose .counterfoil {
	margin-block: 2.5rem;
	padding-block: 1rem;
	border-top: 2px dotted var(--line);
	border-bottom: 2px dotted var(--line);
}

/* A slot the runtime adds at the end of a page sits on the same dotted band. */
body > .counterfoil {
	width: min(100% - 2 * var(--gutter), var(--wide));
	margin: 0 auto;
	padding-block: 1.25rem;
	border-top: 2px dotted var(--line);
}

/* ── A note (the article) ── */

.note-head {
	border-bottom: 1px solid var(--line);
}

.note-head__inner {
	display: grid;
	gap: 2rem 3.5rem;
	padding-block: clamp(2rem, 5vw, 3.75rem);
	align-items: center;
}

@media (min-width: 980px) {
	.note-head__inner {
		grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	}
}

.note-head__title {
	margin-top: 1.4rem;
	font-size: clamp(2.25rem, 1.3rem + 3.4vw, 3.75rem);
	font-stretch: 70%;
	font-weight: 760;
	line-height: 1.02;
	hyphens: manual;
}

.note-head__dek {
	max-width: 36rem;
	margin-top: 1rem;
	font-size: var(--step-1);
	line-height: 1.45;
}

/* The record of byline and dates, set like the fields of a form */
.record {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin: 1.75rem 0 0;
	border: 1px solid var(--line);
	border-radius: var(--corner);
	background: var(--sheet);
	width: fit-content;
	max-width: 100%;
}

.record > div {
	padding: 0.55rem 1rem 0.6rem;
	border-right: 1px solid var(--line);
}

.record > div:last-child {
	border-right: 0;
}

@media (max-width: 520px) {
	.record {
		display: grid;
		width: 100%;
	}

	.record > div {
		border-right: 0;
		border-bottom: 1px solid var(--line);
	}

	.record > div:last-child {
		border-bottom: 0;
	}
}

.record dt {
	color: var(--muted);
	font-size: 0.8125rem;
	line-height: 1.3;
}

.record dd {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	margin: 0.15rem 0 0;
	font-weight: 600;
	font-size: 0.9375rem;
	line-height: 1.3;
}

.record dd img {
	width: 1.35rem;
	height: 1.35rem;
}

.note-head__drawing {
	margin: 0;
	line-height: 0;
}

.note-head__drawing img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	background: var(--sheet);
	border: 1px solid var(--ink);
	border-radius: var(--corner);
	box-shadow: 8px 8px 0 var(--green-tint);
}

.note-layout {
	display: grid;
	gap: 0 clamp(2rem, 4vw, 4rem);
	padding-block: clamp(2rem, 5vw, 3.5rem);
}

@media (min-width: 1100px) {
	.note-layout {
		grid-template-columns: minmax(0, calc(var(--measure) + 9rem)) 20.5rem;
		justify-content: center;
		align-items: start;
	}
}

@media (max-width: 700px) {
	.note-layout {
		width: 100%;
		padding-top: 0;
	}

	.note-layout .sheet {
		border-inline: 0;
		border-top: 0;
		border-radius: 0;
	}

	.rail {
		padding-inline: var(--gutter);
	}
}

.sheet {
	min-width: 0;
	padding: clamp(1.5rem, 4vw, 3.25rem) clamp(1.25rem, 5vw, 4rem) clamp(2rem, 5vw, 3.5rem);
	background: var(--sheet);
	border: 1px solid var(--line);
	border-radius: var(--corner);
}

.outline-fold {
	margin-bottom: 2rem;
	border: 1px solid var(--line);
	border-radius: var(--corner);
	background: var(--ground);
}

.outline-fold summary {
	padding: 0.75rem 1rem;
	font-weight: 700;
	cursor: pointer;
}

.outline-fold ol {
	margin: 0;
	padding: 0 1rem 1rem 2.25rem;
}

.outline-fold li + li {
	margin-top: 0.35rem;
}

@media (min-width: 1100px) {
	.outline-fold {
		display: none;
	}
}

.rail {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	margin-top: 2rem;
}

/* On wide screens the advertising space sits at the head of the rail and the outline follows the reader below it. */
@media (min-width: 1100px) {
	.rail {
		align-self: stretch;
		margin-top: 0;
	}

	.rail__slot {
		order: -1;
	}

	.rail .outline {
		position: sticky;
		top: 1.5rem;
	}
}

.outline {
	display: none;
	padding: 1.25rem 1.25rem 1.4rem;
	border-top: 3px solid var(--ink);
	background: var(--sheet);
	border-radius: 0 0 var(--corner) var(--corner);
}

@media (min-width: 1100px) {
	.outline {
		display: block;
	}
}

.outline__title {
	font-family: var(--heading);
	font-stretch: 80%;
	font-weight: 700;
	font-size: 1.0625rem;
}

.outline ol {
	list-style: none;
	margin: 0.75rem 0 0;
	padding: 0;
}

.outline li + li {
	border-top: 1px solid var(--line);
}

.outline a {
	display: block;
	padding: 0.5rem 0 0.5rem 0.9rem;
	border-left: 3px solid transparent;
	color: var(--ink);
	font-size: 0.9375rem;
	line-height: 1.35;
	text-decoration: none;
}

.outline a:hover {
	color: var(--violet);
}

.outline a[aria-current="true"] {
	border-left-color: var(--violet);
	color: var(--violet);
	font-weight: 650;
}

.sheet__slot {
	max-width: var(--measure);
	margin-top: 2.5rem;
	padding-block: 1rem;
	border-top: 2px dotted var(--line);
	border-bottom: 2px dotted var(--line);
}

.rail__slot .counterfoil {
	padding: 0.75rem;
	background: var(--sheet);
	border: 2px dotted var(--line);
}

/* Closing note on who wrote the page */
.team-note {
	display: grid;
	grid-template-columns: 4rem minmax(0, 1fr);
	gap: 1.25rem;
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 3px double var(--line);
}

.team-note img {
	width: 4rem;
	height: 4rem;
}

.team-note__name {
	font-family: var(--heading);
	font-stretch: 78%;
	font-weight: 700;
	font-size: var(--step-1);
	line-height: 1.2;
}

.team-note__role {
	color: var(--muted);
	font-size: var(--step--1);
}

.team-note__bio {
	margin-top: 0.6rem;
	font-size: 1rem;
	line-height: 1.55;
}

.more {
	padding-block: clamp(2rem, 5vw, 3.5rem) clamp(3rem, 6vw, 4.5rem);
	border-top: 1px solid var(--line);
}

.more__title {
	font-size: var(--step-2);
	margin-bottom: 1.5rem;
}

.more__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
	gap: 2rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.more__list .card__title {
	font-size: var(--step-1);
}

/* ── The text: every element of a body ── */

.prose {
	max-width: var(--measure);
	font-size: var(--step-0);
	line-height: 1.62;
	overflow-wrap: break-word;
}

.prose > * + * {
	margin-top: 1.15em;
}

.prose > :first-child {
	margin-top: 0;
}

.prose > p:first-of-type {
	font-size: 1.25rem;
	line-height: 1.55;
}

.prose h2 {
	margin-top: 2.6em;
	padding-top: 0.2em;
	font-size: var(--step-2);
	font-stretch: 76%;
	scroll-margin-top: 1.5rem;
}

.prose h3 {
	margin-top: 2em;
	font-size: var(--step-1);
	font-stretch: 84%;
	scroll-margin-top: 1.5rem;
}

.prose h2 + *,
.prose h3 + * {
	margin-top: 0.7em;
}

.prose strong {
	font-weight: 700;
}

/* The one figure to take away, marked in highlighter */
.prose mark {
	padding: 0 0.2em;
	background: linear-gradient(176deg, transparent 8%, var(--highlight) 10%, var(--highlight) 90%, transparent 92%);
	color: inherit;
	border-radius: 2px;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

/* Lists */
.prose ul {
	padding-left: 1.4em;
	list-style: none;
}

.prose ul > li {
	position: relative;
}

.prose ul > li::before {
	content: "";
	position: absolute;
	top: 0.62em;
	left: -1.05em;
	width: 0.42em;
	height: 0.42em;
	background: var(--violet);
	border-radius: 1px;
	transform: rotate(45deg);
}

.prose li + li {
	margin-top: 0.45em;
}

/* Ordered lists are steps, numbered in a double stamp ring */
.prose ol {
	list-style: none;
	padding-left: 0;
	counter-reset: step;
}

.prose ol > li {
	position: relative;
	min-height: 2.2rem;
	padding: 0.15rem 0 0.35rem 3.1rem;
	counter-increment: step;
}

.prose ol > li + li {
	margin-top: 0.85rem;
}

.prose ol > li::before {
	content: counter(step);
	position: absolute;
	top: 0;
	left: 0;
	display: grid;
	place-items: center;
	width: 2.1rem;
	height: 2.1rem;
	border: 2px solid var(--violet);
	border-radius: 50%;
	box-shadow: inset 0 0 0 2px var(--sheet), inset 0 0 0 3px var(--violet);
	color: var(--violet);
	font-family: var(--heading);
	font-stretch: 80%;
	font-weight: 750;
	font-size: 1rem;
	line-height: 1;
}

.prose ol > li:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 2.35rem;
	bottom: -0.75rem;
	left: 1.04rem;
	border-left: 2px dotted var(--line);
}

/* Figures */
.prose figure {
	margin: 2.25em 0;
}

.prose figure img {
	display: block;
	width: 100%;
	background: var(--sheet);
	border: 1px solid var(--line);
	border-radius: var(--corner);
}

.prose figcaption {
	position: relative;
	margin-top: 0.75rem;
	padding-left: 1.45rem;
	color: var(--muted);
	font-size: 0.9375rem;
	line-height: 1.5;
}

.prose figcaption::before {
	content: "";
	position: absolute;
	top: 0.7em;
	left: 0;
	width: 0.85rem;
	height: 2px;
	background: var(--green);
}

.prose figcaption strong {
	color: var(--ink);
}

@media (min-width: 1100px) {
	.prose figure:has(img) {
		margin-inline: -2rem;
	}

	.prose figure:has(img) figcaption {
		margin-inline: 2rem;
	}
}

/* Tables: a ledger that scrolls on small screens (the region is added by the theme) */
.ledger {
	margin-block: 2em;
	overflow-x: auto;
	border: 1px solid var(--line);
	border-radius: var(--corner);
	background: var(--sheet);
	-webkit-overflow-scrolling: touch;
}

.prose > .ledger {
	margin-top: 2em;
}

.ledger:focus-visible {
	outline-offset: 2px;
}

.prose table {
	width: 100%;
	min-width: 26rem;
	border-collapse: collapse;
	font-size: 1rem;
	line-height: 1.45;
	font-variant-numeric: tabular-nums slashed-zero;
}

.prose th,
.prose td {
	padding: 0.7rem 0.9rem;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--line);
}

.prose th[align="right"],
.prose td[align="right"] {
	text-align: right;
}

.prose th[align="center"],
.prose td[align="center"] {
	text-align: center;
}

.prose thead th {
	background: var(--green-tint);
	font-family: var(--heading);
	font-stretch: 84%;
	font-weight: 700;
	font-size: 0.9375rem;
	border-bottom: 2px solid var(--ink);
}

.prose tbody th,
.prose tbody td:first-child {
	font-weight: 600;
}

.prose tbody tr:last-child > * {
	border-bottom: 0;
}

.prose tbody tr:nth-child(even) {
	background: color-mix(in srgb, var(--ground) 55%, var(--sheet));
}

@media (max-width: 640px) {
	.prose table {
		min-width: 0;
		font-size: 0.9375rem;
	}

	/* Four columns and more do not fit a phone: they keep their width and scroll. */
	.prose table:has(tr > :nth-child(4)) {
		min-width: 34rem;
	}

	.prose th,
	.prose td {
		padding: 0.55rem 0.6rem;
	}

	.ledger {
		margin-inline: -0.25rem;
	}
}

/* Asides: a slip of security paper carrying the stamp */
.prose aside {
	position: relative;
	margin: 2.25em 0;
	padding: 1.5rem 1.5rem 1.5rem 4.75rem;
	background: var(--engraving) repeat 0 0 / 288px 144px, var(--violet-tint);
	border: 1px solid color-mix(in srgb, var(--violet) 35%, transparent);
	border-radius: var(--corner);
}

.prose aside::before {
	content: "";
	position: absolute;
	top: 1.4rem;
	left: 1.35rem;
	width: 2.25rem;
	height: 2.25rem;
	background: url("assets/brand/mark.svg") center / contain no-repeat;
}

.prose aside > * + * {
	margin-top: 0.75em;
}

.prose aside > :first-child {
	margin-top: 0;
}

@media (max-width: 520px) {
	.prose aside {
		padding: 4rem 1.25rem 1.25rem;
	}

	.prose aside::before {
		top: 1.1rem;
		left: 1.25rem;
	}
}

/* Questions and answers */
.prose details {
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}

.prose details + details {
	margin-top: 0;
	border-top: 0;
}

.prose summary {
	position: relative;
	padding: 1rem 2.75rem 1rem 0;
	font-family: var(--heading);
	font-stretch: 84%;
	font-weight: 700;
	font-size: 1.1875rem;
	line-height: 1.3;
	list-style: none;
	cursor: pointer;
}

.prose summary::-webkit-details-marker {
	display: none;
}

.prose summary::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 0.4rem;
	width: 1.4rem;
	height: 1.4rem;
	margin-top: -0.7rem;
	border: 2px solid var(--violet);
	border-radius: 50%;
	background:
		linear-gradient(var(--violet), var(--violet)) center / 0.7rem 2px no-repeat,
		linear-gradient(var(--violet), var(--violet)) center / 2px 0.7rem no-repeat;
}

.prose details[open] > summary::after {
	background: linear-gradient(var(--violet), var(--violet)) center / 0.7rem 2px no-repeat;
}

.prose summary:hover {
	color: var(--violet);
}

.prose details > :not(summary) {
	margin: 0 0 1.1rem;
	padding-left: 1rem;
	border-left: 2px solid var(--green-tint);
}

.prose details > :not(summary) + :not(summary) {
	margin-top: -0.4rem;
}

/* Terms, set like the fields of a form */
.prose dl {
	margin: 2em 0;
	border-top: 2px solid var(--ink);
}

.prose dt {
	padding-top: 0.85rem;
	font-family: var(--heading);
	font-stretch: 84%;
	font-weight: 700;
	font-size: 1.0625rem;
	line-height: 1.3;
}

.prose dd {
	margin: 0.2rem 0 0;
	padding-bottom: 0.85rem;
	border-bottom: 1px solid var(--line);
	font-size: 1rem;
	line-height: 1.55;
}

@media (min-width: 640px) {
	.prose dl {
		display: grid;
		grid-template-columns: minmax(8rem, 13rem) minmax(0, 1fr);
	}

	.prose dt {
		padding: 0.85rem 1.25rem 0.85rem 0;
		border-bottom: 1px solid var(--line);
	}

	.prose dd {
		margin: 0;
		padding-top: 0.85rem;
	}
}

/* Quotes and takeaways: a guilloche-green rule at the edge */
.prose blockquote {
	margin: 2.25em 0;
	padding: 0.25rem 0 0.25rem 1.6rem;
	border-left: 8px solid transparent;
	border-image: repeating-linear-gradient(180deg, var(--green) 0 2px, transparent 2px 5px) 8;
	font-family: var(--heading);
	font-stretch: 86%;
	font-weight: 600;
	font-size: 1.375rem;
	line-height: 1.35;
}

.prose blockquote > * + * {
	margin-top: 0.6em;
}

.prose blockquote p:last-child:not(:first-child) {
	font-family: var(--body);
	font-weight: 400;
	font-size: 1rem;
	color: var(--muted);
}

.prose hr {
	height: 14px;
	margin: 3em 0;
	border: 0;
	background: var(--strip) repeat-x center / auto 14px;
	opacity: 0.8;
}

.prose code {
	padding: 0.05em 0.3em;
	background: var(--ground);
	border-radius: 2px;
	font-size: 0.92em;
}

/* ── Cookie choice and notice (printed by the runtime under these names) ── */

.stub-choice {
	margin: 2em 0;
	padding: 1.25rem 1.5rem;
	border: 2px solid var(--ink);
	border-radius: var(--corner);
	background: var(--ground);
}

.stub-choice p + p {
	margin-top: 0.5rem;
}

.stub-status {
	color: var(--green);
	font-weight: 700;
}

.stub-choice button,
.tearline button {
	min-height: 2.6rem;
	margin: 0.75rem 0.5rem 0 0;
	padding: 0.5rem 1.15rem;
	border: 2px solid var(--violet);
	border-radius: var(--corner);
	background: var(--sheet);
	color: var(--violet);
	font: 700 1rem/1.2 var(--body);
	cursor: pointer;
}

/* Accepting and declining look the same: neither choice is pushed. */
.stub-choice button:hover,
.tearline button:hover {
	background: var(--violet-tint);
}

.tearline a {
	color: var(--violet);
	font-weight: 600;
	white-space: nowrap;
}

.tearline {
	position: fixed;
	inset: auto 0 0 0;
	z-index: 1000;
	padding: 1rem var(--gutter) 1.1rem;
	background: var(--sheet);
	color: var(--ink);
	border-top: 3px solid var(--violet);
	box-shadow: 0 -6px 0 var(--ground);
	font-size: 1rem;
}

.tearline p {
	max-width: 52rem;
}

/* ── A niche's file and search: the register ── */

.file-head {
	border-bottom: 1px solid var(--line);
}

.file-head__inner {
	padding-block: clamp(2.25rem, 6vw, 4rem);
}

.file-head .stamp {
	font-size: 1.125rem;
}

.file-head__title {
	margin-top: 1.5rem;
	font-size: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
	font-stretch: 66%;
	font-weight: 780;
	line-height: 0.98;
}

.file-head__title:first-child {
	margin-top: 0;
}

.file-head__desc {
	max-width: 38rem;
	margin-top: 1rem;
	font-size: var(--step-1);
	line-height: 1.45;
}

.register {
	list-style: none;
	margin: 0;
	padding: clamp(1.5rem, 4vw, 2.5rem) 0 clamp(3rem, 6vw, 4.5rem);
}

.register > li {
	border-bottom: 1px solid var(--line);
}

.register > li:first-child {
	border-top: 3px solid var(--ink);
}

.line {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.75rem 2rem;
	padding-block: 1.75rem;
}

@media (min-width: 760px) {
	.line {
		grid-template-columns: 7.5rem 13rem minmax(0, 1fr);
		align-items: start;
	}
}

.line__date {
	color: var(--muted);
	font-family: var(--heading);
	font-stretch: 80%;
	font-weight: 650;
	font-size: 0.95rem;
	line-height: 1.3;
	padding-top: 0.3rem;
}

.line__drawing {
	display: block;
	line-height: 0;
}

.line__drawing img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	background: var(--sheet);
	border: 1px solid var(--line);
	border-radius: var(--corner);
}

span.line__drawing {
	aspect-ratio: 3 / 2;
	background: var(--engraving) repeat 0 0 / 288px 144px, var(--ground);
	border: 1px solid var(--line);
	border-radius: var(--corner);
}

@media (max-width: 759px) {
	span.line__drawing,
	.line__date:empty {
		display: none;
	}
}

.line__title {
	font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
	font-stretch: 72%;
	font-weight: 740;
	line-height: 1.08;
}

.line__title a {
	color: var(--ink);
	text-decoration: none;
}

.line__title a:hover {
	color: var(--violet);
	text-decoration: underline;
	text-decoration-thickness: 2px;
}

.line__excerpt {
	max-width: 36rem;
	margin-top: 0.6rem;
	font-size: 1.0625rem;
	line-height: 1.55;
}

.line__niche {
	margin-top: 0.8rem;
	font-size: var(--step--1);
	color: var(--muted);
}

.line__niche a {
	color: var(--muted);
}

.empty {
	padding-block: 2rem 4rem;
	max-width: var(--measure);
}

.empty .stamps {
	margin-top: 1.5rem;
}

.nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	padding-bottom: 3rem;
}

.nav-links .page-numbers {
	display: grid;
	place-items: center;
	min-width: 2.6rem;
	min-height: 2.6rem;
	padding: 0 0.75rem;
	border: 1px solid var(--line);
	border-radius: var(--corner);
	background: var(--sheet);
	color: var(--ink);
	font-weight: 600;
	text-decoration: none;
}

.nav-links .page-numbers.current {
	border: 2px solid var(--violet);
	color: var(--violet);
}

/* ── Leaves: about, contact and the policy pages ── */

.leaf-head {
	border-bottom: 1px solid var(--line);
}

.leaf-head__inner {
	display: grid;
	gap: 1.5rem 2.5rem;
	align-items: end;
	padding-block: clamp(2.25rem, 6vw, 4rem);
}

@media (min-width: 760px) {
	.leaf--about .leaf-head__inner,
	.leaf--contact .leaf-head__inner {
		grid-template-columns: minmax(0, 1fr) auto;
	}
}

.leaf-head__title {
	font-size: clamp(2.25rem, 1.4rem + 3.4vw, 3.75rem);
	font-stretch: 68%;
	font-weight: 770;
	line-height: 1;
}

.leaf-head__dek {
	max-width: 38rem;
	margin-top: 0.9rem;
	font-size: var(--step-1);
	line-height: 1.45;
}

.leaf-head__mark {
	width: clamp(6rem, 14vw, 9rem);
	height: auto;
}

.leaf-head__revised {
	margin-top: 1.25rem;
	color: var(--muted);
	font-size: var(--step--1);
}

.leaf-body {
	display: grid;
	gap: 2rem 3rem;
	padding-block: clamp(2rem, 5vw, 3.5rem) clamp(3rem, 6vw, 4.5rem);
}

@media (min-width: 1100px) {
	.leaf-body--outlined {
		grid-template-columns: 15rem minmax(0, 1fr);
		align-items: start;
	}

	.leaf-body--outlined .outline {
		position: sticky;
		top: 1.5rem;
	}
}

.leaf-body .sheet {
	max-width: calc(var(--measure) + 8rem);
}

/* ── Search form ── */

.lookup {
	display: flex;
	gap: 0.5rem;
	max-width: 32rem;
	margin-top: 1.5rem;
}

.lookup input[type="search"] {
	flex: 1;
	min-width: 0;
	min-height: 2.9rem;
	padding: 0.55rem 0.9rem;
	border: 2px solid var(--ink);
	border-radius: var(--corner);
	background: var(--sheet);
	color: var(--ink);
	font: 400 1.0625rem/1.3 var(--body);
}

.lookup button {
	min-height: 2.9rem;
	padding: 0.55rem 1.2rem;
	border: 2px solid var(--violet);
	border-radius: var(--corner);
	background: var(--violet);
	color: var(--sheet);
	font: 700 1rem/1 var(--body);
	cursor: pointer;
}

.lookup button:hover {
	background: var(--violet-deep);
}

/* ── The missing page ── */

.missing {
	padding-block: clamp(3rem, 8vw, 6rem);
}

.missing__title {
	max-width: 14ch;
	font-size: clamp(2.75rem, 1.5rem + 5vw, 5.5rem);
	font-stretch: 64%;
	font-weight: 780;
	line-height: 0.95;
}

.missing__text {
	max-width: 34rem;
	margin-top: 1.25rem;
	font-size: var(--step-1);
	line-height: 1.5;
}

.stamps {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.5rem;
	margin: 2rem 0 0;
	padding: 0.4rem 0 0;
	list-style: none;
}

.stamps__home {
	font-weight: 600;
}

/* ── Footer ── */

.foot {
	margin-top: auto;
	background: var(--ground);
}

.foot__inner {
	display: grid;
	gap: 2rem 3rem;
	padding-block: 2.5rem 3rem;
}

@media (min-width: 860px) {
	.foot__inner {
		grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto;
	}
}

.foot__who {
	display: grid;
	grid-template-columns: 3.25rem minmax(0, 1fr);
	gap: 1rem;
	align-items: start;
}

.foot__who img {
	width: 3.25rem;
	height: 3.25rem;
}

.foot__name {
	font-family: var(--heading);
	font-stretch: 78%;
	font-weight: 700;
	font-size: 1.125rem;
}

.foot__line {
	margin-top: 0.35rem;
	color: var(--muted);
	font-size: 0.9375rem;
	line-height: 1.5;
}

.foot__pages ul {
	display: grid;
	gap: 0.4rem;
}

.foot__pages a {
	color: var(--ink);
	font-size: 0.9375rem;
	text-decoration-color: var(--line);
}

.foot__pages a:hover {
	color: var(--violet);
	text-decoration-color: currentColor;
}

.foot .codes {
	align-self: start;
}

/* ── Motion ── */

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}

	.outline a,
	.sections a {
		transition: color 0.15s ease, border-color 0.15s ease;
	}
}

@media print {
	.strip,
	.topline,
	.rail,
	.slot-band,
	.sheet__slot,
	.counterfoil,
	.tearline,
	.foot,
	.more {
		display: none !important;
	}

	body,
	.ground {
		background: #fff;
	}
}


@media screen {
	.tearline {
		left: 0.5rem;
		right: 0.5rem;
		bottom: max(0.5rem, env(safe-area-inset-bottom));
		width: auto;
		max-width: 35rem;
		margin: 0 auto;
		transform: none;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.5rem;
		padding: 0.75rem;
		border: 1px solid var(--line);
		border-radius: 3px;
		background: var(--sheet);
		color: var(--muted);
		box-shadow: none;
		font: 400 0.875rem/1.4 var(--body);
	}
	.tearline::before,
	.tearline::after { display: none; }
	.tearline p {
		grid-column: 1 / -1;
		margin: 0;
		max-width: none;
		font: inherit;
	}
	.tearline a {
		color: var(--violet-deep);
		font-weight: 400;
		white-space: normal;
		text-decoration: underline;
	}
	.tearline button {
		min-width: 0;
		min-height: 44px;
		width: 100%;
		margin: 0;
		padding: 0.4rem 0.5rem;
		border: 1px solid var(--line);
		border-radius: 3px;
		background: var(--sheet);
		color: var(--muted);
		box-shadow: none;
		font: 500 0.875rem/1.25 var(--body);
		font-stretch: normal;
		letter-spacing: normal;
		text-transform: none;
		cursor: pointer;
	}
	.tearline button:hover { background: var(--ground); }
	.tearline :focus-visible { outline: 2px solid var(--violet-deep); outline-offset: 2px; }
	body:has(.tearline) { padding-bottom: 10rem; }
}
@media screen and (max-width: 620px) {
	body:has(.tearline) { padding-bottom: 12rem; }
}