/* ————————————————————————————————————————————————————————————————
   THE PERIODICAL ROOM · design system
   Warm reading-room paper, ink, stamp red. Fraunces display,
   Libre Franklin UI, mono call numbers.
   ———————————————————————————————————————————————————————————————— */

:root {
	--paper: #f6f0e2;
	--paper-deep: #efe6d0;
	--ink: #211d17;
	--ink-soft: #5c5347;
	--ink-faint: #8d8270;
	--line: #d8cdb4;
	--stamp: #b23a1d; /* date-stamp red */
	--leaf: #3f6f53; /* available green */
	--amber: #b97f24;
	--card: #fffdf6;
	--shadow: 0 1px 2px rgba(60, 48, 30, 0.12), 0 6px 18px -8px rgba(60, 48, 30, 0.25);
	--shadow-lift: 0 2px 4px rgba(60, 48, 30, 0.14), 0 18px 32px -12px rgba(60, 48, 30, 0.38);
	--serif: 'Fraunces', 'Iowan Old Style', Georgia, serif;
	--sans: 'Libre Franklin', 'Franklin Gothic Medium', 'Helvetica Neue', sans-serif;
	--mono: 'Spline Sans Mono', 'SF Mono', Menlo, monospace;
	--rail-h: 230px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--sans);
	font-size: 15px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

/* paper grain over everything */
body::before {
	content: '';
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 4000;
	opacity: 0.5;
	mix-blend-mode: multiply;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.40 0 0 0 0 0.32 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--stamp); outline-offset: 3px; border-radius: 2px; }

/* ————————————————————————————— masthead ————————————————————————— */

.masthead {
	text-align: center;
	padding: 34px 20px 0;
	animation: settle 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.masthead .overline {
	font-size: 11px;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--ink-soft);
	display: flex;
	align-items: center;
	gap: 14px;
	justify-content: center;
}
.masthead .overline::before,
.masthead .overline::after {
	content: '';
	height: 1px;
	width: 90px;
	background: var(--ink-faint);
}

.masthead h1 {
	font-family: var(--serif);
	font-weight: 900;
	font-size: clamp(44px, 8vw, 92px);
	letter-spacing: -0.015em;
	line-height: 0.95;
	margin: 10px 0 6px;
	font-variation-settings: 'opsz' 144;
}
.masthead h1 .amp {
	color: var(--stamp);
	font-style: italic;
	font-weight: 600;
}

.masthead .dateline {
	font-size: 12.5px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-soft);
	border-top: 1px solid var(--ink);
	border-bottom: 1px solid var(--ink);
	display: inline-flex;
	gap: 18px;
	padding: 6px 18px;
	margin-top: 12px;
}
.masthead .dateline b { color: var(--stamp); font-weight: 600; }

.masthead .double-rule {
	margin: 0 auto;
	margin-top: -3px;
	width: min(1060px, 92vw);
	border-top: 3px solid var(--ink);
	border-bottom: 1px solid var(--ink);
	height: 5px;
}

/* ————————————————————————————— controls ————————————————————————— */

.desk {
	position: sticky;
	top: 0;
	z-index: 100;
	background: linear-gradient(var(--paper) 86%, rgba(246, 240, 226, 0));
	padding: 14px 0 18px;
}
.desk-inner {
	width: min(1240px, 94vw);
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

.search-wrap {
	flex: 1 1 260px;
	position: relative;
}
.search-wrap input {
	width: 100%;
	padding: 11px 38px 11px 40px;
	border: 1.5px solid var(--ink);
	border-radius: 999px;
	background: var(--card);
	font: 500 15px var(--sans);
	color: var(--ink);
	box-shadow: var(--shadow);
	outline-offset: 2px;
}
.search-wrap input::placeholder { color: var(--ink-faint); }
.search-wrap .mag-glass {
	position: absolute;
	left: 16px;
	top: 50%;
	translate: 0 -50%;
	font-size: 15px;
	pointer-events: none;
}
.search-wrap kbd {
	position: absolute;
	right: 14px;
	top: 50%;
	translate: 0 -50%;
	font: 600 10.5px var(--mono);
	border: 1px solid var(--line);
	border-bottom-width: 2px;
	border-radius: 4px;
	padding: 1px 6px;
	color: var(--ink-faint);
	background: var(--paper);
}

.pill {
	border: 1.5px solid var(--ink);
	background: var(--card);
	border-radius: 999px;
	padding: 10px 16px;
	font-weight: 600;
	font-size: 13.5px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	box-shadow: var(--shadow);
	transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
	white-space: nowrap;
}
.pill:hover { transform: translateY(-1px); box-shadow: var(--shadow-lift); }
.pill[aria-pressed='true'], .pill.active {
	background: var(--ink);
	color: var(--paper);
}
.pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--stamp); }
.pill.home-pill .dot { background: var(--leaf); }

.catbar {
	width: min(1240px, 94vw);
	margin: 2px auto 0;
	display: flex;
	gap: 8px;
	overflow-x: auto;
	padding: 8px 2px 12px;
	scrollbar-width: none;
}
.catbar::-webkit-scrollbar { display: none; }
.chip {
	border: 1px solid var(--ink-faint);
	background: transparent;
	border-radius: 999px;
	padding: 6px 13px;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.02em;
	white-space: nowrap;
	transition: all 0.15s;
	color: var(--ink-soft);
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip.active {
	background: var(--stamp);
	border-color: var(--stamp);
	color: #fdf6e9;
}
.chip .n { opacity: 0.55; font-weight: 500; margin-left: 4px; font-size: 11px; }

/* ————————————————————————————— stats strip ——————————————————————— */

.stats-strip {
	width: min(1240px, 94vw);
	margin: 6px auto 4px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 26px;
	font-size: 13px;
	color: var(--ink-soft);
	align-items: baseline;
}
.stats-strip b { font-family: var(--serif); font-size: 19px; color: var(--ink); font-weight: 700; }
.stats-strip .spacer { flex: 1; }
.btn-surprise {
	border: none;
	background: none;
	font-weight: 700;
	font-size: 13.5px;
	color: var(--stamp);
	display: inline-flex;
	gap: 7px;
	align-items: center;
	padding: 6px 2px;
}
.btn-surprise .die { display: inline-block; font-size: 17px; transition: transform 0.4s cubic-bezier(0.3, 1.6, 0.4, 1); }
.btn-surprise:hover .die { transform: rotate(360deg) scale(1.25); }
.btn-surprise:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ————————————————————————————— shelves —————————————————————————— */

main { width: min(1240px, 94vw); margin: 0 auto 90px; }

.shelf { margin-top: 34px; }
.shelf-head {
	display: flex;
	align-items: baseline;
	gap: 14px;
	border-bottom: 2px solid var(--ink);
	padding-bottom: 6px;
	margin-bottom: 16px;
}
.shelf-head h2 {
	font-family: var(--serif);
	font-size: 27px;
	font-weight: 800;
	margin: 0;
	letter-spacing: -0.01em;
}
.shelf-head .count { color: var(--ink-faint); font-size: 13px; font-weight: 600; }
.shelf-head .see-all {
	margin-left: auto;
	background: none;
	border: none;
	font-weight: 700;
	font-size: 13px;
	color: var(--stamp);
	letter-spacing: 0.02em;
}
.shelf-head .see-all:hover { text-decoration: underline; text-underline-offset: 3px; }

.rail {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 150px;
	gap: 18px;
	overflow-x: auto;
	padding: 6px 4px 22px;
	scroll-snap-type: x proximity;
	/* shelf edge */
	background:
		linear-gradient(to top, rgba(60, 45, 25, 0.16), rgba(60, 45, 25, 0.05) 5px, transparent 6px) bottom / 100% 14px no-repeat;
}
.rail::-webkit-scrollbar { height: 8px; }
.rail::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }

/* grid view (category page & archive results) */
.grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 22px 18px;
	padding: 6px 2px 30px;
}

/* ————————————————————————————— mag card ————————————————————————— */

.mag {
	display: flex;
	flex-direction: column;
	gap: 8px;
	border: none;
	background: none;
	padding: 0;
	text-align: left;
	scroll-snap-align: start;
	animation: rise 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.mag:focus-visible { outline: 2px solid var(--stamp); outline-offset: 4px; border-radius: 4px; }

.cover-stack { position: relative; transition: transform 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.3); }
.mag:hover .cover-stack { transform: translateY(-5px) rotate(-1deg); }
.mag:hover .cover { box-shadow: var(--shadow-lift); }

.mag-meta { display: flex; flex-direction: column; gap: 2px; }
.mag-title {
	font-weight: 700;
	font-size: 13.5px;
	line-height: 1.25;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.mag-sub { font-size: 11.5px; color: var(--ink-faint); }

/* freshness / status badges */
.badge {
	font: 700 9.5px/1 var(--sans);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 3px 7px;
	border-radius: 3px;
	display: inline-flex;
	gap: 5px;
	align-items: center;
	width: fit-content;
}
.badge.fresh { background: var(--stamp); color: #fdf3e4; }
.badge.aging { background: transparent; color: var(--amber); box-shadow: inset 0 0 0 1px var(--amber); }
.badge.archive { background: transparent; color: var(--ink-faint); box-shadow: inset 0 0 0 1px var(--ink-faint); }
.badge.here { background: var(--leaf); color: #eef5ea; }

/* ————————————————————————————— covers ——————————————————————————— */

.cover {
	aspect-ratio: 3 / 4;
	background: var(--c-bg);
	color: var(--c-ink);
	border-radius: 2px 6px 6px 2px;
	box-shadow: var(--shadow), inset 0 0 36px rgba(50, 35, 15, 0.1);
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	padding: 9% 8%;
	container-type: inline-size;
}
/* page edges on the right */
.cover::after {
	content: '';
	position: absolute;
	right: 0;
	top: 2%;
	bottom: 2%;
	width: 3px;
	background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.5) 0 2px, rgba(0, 0, 0, 0.12) 2px 3px);
	opacity: 0.6;
}
/* spine shading on the left */
.cover::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 7%;
	background: linear-gradient(to right, rgba(0, 0, 0, 0.18), transparent);
	pointer-events: none;
}

.cover-masthead { position: relative; z-index: 2; }
.cover-title {
	font-family: var(--serif);
	font-weight: 850;
	line-height: 0.98;
	letter-spacing: -0.01em;
	display: block;
	overflow-wrap: break-word;
}
.sz-1 .cover-title { font-size: 22cqw; }
.sz-2 .cover-title { font-size: 15.5cqw; }
.sz-3 .cover-title { font-size: 12.5cqw; }
.sz-4 .cover-title { font-size: 10cqw; }

/* variant: classic — masthead top + giant glyph */
.v-classic .cover-masthead {
	border-bottom: 2px solid currentColor;
	padding-bottom: 5%;
}
.v-classic .cover-ornament {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}
.v-classic .cover-glyph {
	font-family: var(--serif);
	font-style: italic;
	font-weight: 600;
	font-size: 58cqw;
	color: var(--c-acc);
	transform: rotate(var(--c-tilt));
	line-height: 1;
	opacity: 0.92;
}

/* variant: stacked — words fill the cover */
.v-stacked .cover-masthead {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 1cqw;
}
.v-stacked .cover-word {
	font-family: var(--serif);
	font-weight: 900;
	font-size: 16cqw;
	line-height: 0.92;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	overflow-wrap: break-word;
}
.v-stacked .cover-word:nth-child(2n) { color: var(--c-acc); }
.sz-1.v-stacked .cover-word { font-size: 26cqw; }
.sz-4.v-stacked .cover-word { font-size: 12cqw; }

/* variant: banner — diagonal accent band behind title */
.v-banner .cover-masthead {
	flex: 1;
	display: flex;
	align-items: center;
}
.v-banner .cover-band {
	position: absolute;
	inset: 38% -20% auto;
	height: 30%;
	background: var(--c-acc);
	transform: rotate(-7deg);
	opacity: 0.9;
}
.v-banner .cover-title { position: relative; z-index: 2; }

/* variant: frame — literary journal double border */
.v-frame { padding: 7%; }
.v-frame .cover-masthead {
	flex: 1;
	border: 2px solid currentColor;
	outline: 1px solid currentColor;
	outline-offset: 3px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 8%;
	margin-bottom: 7%;
}
.v-frame .cover-title { font-weight: 650; font-style: italic; letter-spacing: 0; }

/* variant: modern — giant initial */
.v-modern .cover-masthead {
	flex: 1;
	display: flex;
	flex-direction: column;
}
.v-modern .cover-initial {
	font-family: var(--serif);
	font-weight: 900;
	font-size: 72cqw;
	line-height: 0.85;
	color: var(--c-acc);
	align-self: center;
	margin: auto;
}
.v-modern .cover-small-title {
	font-size: 7.5cqw;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	text-align: center;
}

.cover-foot {
	position: relative;
	z-index: 2;
	margin-top: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 6.5cqw;
}
.cover-cat {
	font-weight: 800;
	letter-spacing: 0.18em;
	font-size: 6cqw;
	opacity: 0.75;
}
.cover-barcode {
	width: 22%;
	height: 7cqw;
	background: repeating-linear-gradient(to right, currentColor 0 2px, transparent 2px 4px, currentColor 4px 5px, transparent 5px 8px);
	opacity: 0.7;
}

/* ————————————————————————————— drawer ——————————————————————————— */

.scrim {
	position: fixed;
	inset: 0;
	background: rgba(35, 26, 14, 0.45);
	z-index: 900;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s;
}
.scrim.open { opacity: 1; pointer-events: auto; }

.drawer {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(480px, 96vw);
	background: var(--card);
	z-index: 1000;
	transform: translateX(105%);
	transition: transform 0.32s cubic-bezier(0.25, 0.9, 0.3, 1);
	box-shadow: -18px 0 50px rgba(40, 28, 10, 0.3);
	overflow-y: auto;
	border-left: 1px solid var(--line);
}
.drawer.open { transform: translateX(0); }

.drawer-close {
	position: absolute;
	top: 14px;
	right: 14px;
	border: 1.5px solid var(--ink);
	background: var(--card);
	border-radius: 50%;
	width: 34px;
	height: 34px;
	font-size: 16px;
	line-height: 1;
	z-index: 5;
}
.drawer-close:hover { background: var(--ink); color: var(--paper); }

.drawer-hero {
	display: flex;
	gap: 20px;
	padding: 26px 26px 0;
	align-items: flex-start;
}
.drawer-hero .cover { width: 124px; flex: none; }
.drawer-headline h2 {
	font-family: var(--serif);
	font-size: 28px;
	line-height: 1.04;
	margin: 4px 0 6px;
	font-weight: 850;
	padding-right: 30px;
}
.drawer-headline .sub { color: var(--ink-soft); font-size: 13px; }
.drawer-headline .badge { margin-top: 9px; font-size: 10.5px; }

.stamp {
	display: inline-block;
	animation: stamp 0.45s cubic-bezier(0.2, 1.4, 0.4, 1) both;
	transform-origin: center;
}

.drawer-body { padding: 18px 26px 40px; }
.drawer-desc {
	font-family: var(--serif);
	font-size: 15.5px;
	line-height: 1.55;
	color: var(--ink-soft);
	margin: 8px 0 4px;
	font-weight: 450;
}
.drawer-facts {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	font-size: 12.5px;
	color: var(--ink-soft);
	margin: 12px 0 4px;
}
.drawer-facts .mono { font-family: var(--mono); font-size: 11.5px; }

.drawer-section-title {
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ink-soft);
	border-bottom: 1.5px solid var(--ink);
	padding-bottom: 5px;
	margin: 24px 0 4px;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
}
.drawer-section-title .hint { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink-faint); }

.holding {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 3px 12px;
	padding: 11px 2px;
	border-bottom: 1px dashed var(--line);
	align-items: baseline;
}
.holding .b-name { font-weight: 700; font-size: 14px; display: flex; gap: 8px; align-items: center; }
.holding .b-name .you {
	font-size: 9px;
	font-weight: 800;
	letter-spacing: 0.1em;
	background: var(--leaf);
	color: #eef5ea;
	border-radius: 3px;
	padding: 2px 5px;
}
.holding .b-dist { color: var(--ink-faint); font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; }
.holding .b-issue { grid-column: 1 / -1; font-size: 12.5px; color: var(--ink-soft); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.holding .b-issue .mono { font-family: var(--mono); font-size: 11px; }
.holding .a-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--leaf); flex: none; }
.holding .a-dot.none { background: var(--ink-faint); opacity: 0.5; }
.holding .disp-tag { color: var(--stamp); font-weight: 700; font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; }

.drawer-actions { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.btn {
	border: 1.5px solid var(--ink);
	background: var(--ink);
	color: var(--paper);
	padding: 10px 18px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 13.5px;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: transform 0.15s, box-shadow 0.15s;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-lift); }
.btn.ghost { background: transparent; color: var(--ink); }

/* ————————————————————————————— branch modal ————————————————————— */

.modal {
	position: fixed;
	inset: 0;
	z-index: 1100;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.modal.open { display: flex; }
.modal .scrim { z-index: 1; }
.modal-card {
	background: var(--card);
	border: 1.5px solid var(--ink);
	border-radius: 14px;
	width: min(880px, 96vw);
	max-height: 88vh;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: 0 30px 80px rgba(40, 28, 10, 0.4);
	animation: settle 0.35s cubic-bezier(0.2, 0.9, 0.3, 1) both;
	position: relative;
	z-index: 2;
}
.modal-head {
	padding: 20px 26px 12px;
	display: flex;
	align-items: baseline;
	gap: 14px;
	border-bottom: 2px solid var(--ink);
}
.modal-head h2 { font-family: var(--serif); font-size: 26px; margin: 0; font-weight: 850; }
.modal-head .hint { color: var(--ink-faint); font-size: 12.5px; }
.modal-head .drawer-close { position: static; margin-left: auto; }
.modal-body { display: grid; grid-template-columns: 1.1fr 1fr; overflow: hidden; flex: 1; }
.branch-map { padding: 10px; border-right: 1px solid var(--line); display: flex; align-items: center; }
.branch-map svg { width: 100%; height: auto; }
.branch-map .b-dot { fill: var(--ink-soft); cursor: pointer; transition: r 0.15s, fill 0.15s; }
.branch-map .b-dot:hover { fill: var(--stamp); }
.branch-map .b-dot.home { fill: var(--leaf); }
.branch-map text { font: 600 8.5px var(--sans); fill: var(--ink-soft); pointer-events: none; }
.branch-list { overflow-y: auto; padding: 8px 0; }
.branch-row {
	display: flex;
	width: 100%;
	background: none;
	border: none;
	border-bottom: 1px dashed var(--line);
	padding: 10px 20px;
	gap: 12px;
	align-items: baseline;
	font-size: 14px;
}
.branch-row:hover { background: var(--paper-deep); }
.branch-row b { font-weight: 700; }
.branch-row .area { color: var(--ink-faint); font-size: 12px; }
.branch-row .nmags { margin-left: auto; font-family: var(--mono); font-size: 11.5px; color: var(--ink-soft); white-space: nowrap; }
.branch-row.home b { color: var(--leaf); }
.branch-row.home::before { content: '📍'; }

/* ————————————————————————————— archive view ————————————————————— */

.archive-note {
	font-family: var(--serif);
	font-size: 17px;
	color: var(--ink-soft);
	margin: 18px 0 6px;
	max-width: 720px;
}
.arch-row {
	display: grid;
	grid-template-columns: 1fr auto auto;
	gap: 4px 16px;
	width: 100%;
	text-align: left;
	background: none;
	border: none;
	border-bottom: 1px solid var(--line);
	padding: 12px 6px;
	align-items: baseline;
	transition: background 0.12s;
}
.arch-row:hover { background: var(--paper-deep); }
.arch-row .t { font-weight: 700; font-size: 15px; font-family: var(--serif); }
.arch-row .t .sub { font-weight: 500; color: var(--ink-faint); font-family: var(--sans); font-size: 12px; margin-left: 8px; }
.arch-row .span { font-family: var(--mono); font-size: 12px; color: var(--ink-soft); white-space: nowrap; }
.arch-row .cat-tag { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); white-space: nowrap; }

.load-more {
	margin: 18px auto;
	display: block;
}

/* ————————————————————————————— misc ————————————————————————————— */

.empty {
	text-align: center;
	padding: 70px 20px;
	color: var(--ink-soft);
	font-family: var(--serif);
	font-size: 19px;
}
.empty .big { font-size: 44px; display: block; margin-bottom: 10px; }

.backlink {
	background: none;
	border: none;
	font-weight: 700;
	color: var(--stamp);
	font-size: 13.5px;
	padding: 0;
	margin: 26px 0 -14px;
	display: inline-flex;
	gap: 6px;
}
.backlink:hover { text-decoration: underline; text-underline-offset: 3px; }

footer {
	border-top: 3px double var(--ink);
	margin-top: 60px;
	padding: 26px 0 60px;
	text-align: center;
	color: var(--ink-soft);
	font-size: 12.5px;
}
footer .colophon { font-family: var(--serif); font-style: italic; font-size: 14px; margin-bottom: 6px; }
footer a { color: var(--stamp); }

@keyframes rise {
	from { opacity: 0; transform: translateY(14px); }
	to { opacity: 1; transform: none; }
}
@keyframes settle {
	from { opacity: 0; transform: translateY(-10px); }
	to { opacity: 1; transform: none; }
}
@keyframes stamp {
	0% { opacity: 0; transform: scale(1.7) rotate(-9deg); }
	60% { opacity: 1; transform: scale(0.94) rotate(2deg); }
	100% { transform: scale(1) rotate(-2deg); }
}

@media (max-width: 760px) {
	.modal-body { grid-template-columns: 1fr; }
	.branch-map { display: none; }
	.rail { grid-auto-columns: 124px; }
	.grid { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
	.drawer-hero { flex-direction: row; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
	html { scroll-behavior: auto; }
}