/*
Theme Name: WhatsHer@ Darkroom
Theme URI: https://whatsherat.org/
Author: WhatsHer@
Description: A photo-darkroom theme for WhatsHer@'s image & link search, in light and dark mode: pink safelight glow, on-site grouped results, contact-sheet guide listings, a search tool whose photos "develop" on screen, and articles printed on paper for easy reading. Includes the upload tool with automatic deletion, ad slots and self-hosted fonts.
Version: 1.2.0
Requires at least: 6.2
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: whatsherat
Tags: dark, one-column, custom-logo, custom-menu, featured-images, blog, photography
*/

/* ==========================================================================
   Fonts (self-hosted — no calls to Google)
   ========================================================================== */
@font-face {
	font-family: "Bricolage";
	src: url("assets/fonts/bricolage.woff") format("woff");
	font-weight: 400 800;
	font-stretch: 75% 100%;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "JetBrains Mono";
	src: url("assets/fonts/jetbrains-mono.woff") format("woff");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Caveat";
	src: url("assets/fonts/caveat.woff") format("woff");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

/* ==========================================================================
   Tokens
   ========================================================================== */
:root {
	--ink: #100b0e;
	--ink-2: #181116;
	--ink-3: #21171e;
	--film: #080506;
	--line: rgba(255, 205, 225, 0.11);
	--line-2: rgba(255, 205, 225, 0.2);
	--text: #f6edf1;
	--muted: #c3aeb9;
	--dim: #917c88;

	--safe: #ff3d8b;
	--safe-2: #ff7fb3;
	--safe-deep: #c2185b;
	--safe-ink: #1f0612;
	--glow: 0 0 0 1px rgba(255, 61, 139, 0.45), 0 10px 34px -8px rgba(255, 61, 139, 0.55);

	--paper: #f6f0e7;
	--paper-edge: #fcfaf6;
	--paper-ink: #1d1519;
	--paper-text: #30262b;
	--paper-muted: #6d5c64;
	--paper-line: #e0d4c7;

	--f-sans: "Bricolage", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--f-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	--f-hand: "Caveat", "Segoe Print", "Bradley Hand", cursive;

	--text-strong: #fff;
	--pink-text: var(--pink-text);
	--error: #ffb3cb;
	--tint: rgba(255, 255, 255, 0.03);
	--tint-2: rgba(255, 255, 255, 0.05);
	--tint-3: rgba(255, 255, 255, 0.07);
	--grid: var(--grid);
	--header-bg: rgba(16, 11, 14, 0.74);
	--header-solid: rgba(16, 11, 14, 0.92);
	--menu-bg: var(--menu-bg);
	--well: var(--well);
	--well-2: #0c0809;
	--well-3: #0b0709;
	--easel-a: #1e151b;
	--easel-b: #140e12;
	--panel-a: #1d1219;
	--panel-b: #1a1116;
	--surface-2: #1f161c;
	--surface-3: #2a1a23;
	--drag: #1a0f15;
	--sink: rgba(0, 0, 0, 0.23);
	--glow-1: rgba(255, 61, 139, 0.42);
	--glow-2: rgba(255, 61, 139, 0.13);
	--shadow-lg: 0 34px 80px -34px rgba(0, 0, 0, 0.95);
	--shadow-md: 0 26px 50px -22px rgba(0, 0, 0, 0.9);
	--grain: 0.55;
	--mark: rgba(255, 61, 139, 0.38);

	--sprocket: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='14'%3E%3Crect x='6' y='3' width='10' height='8' rx='2' fill='%23f6edf1' fill-opacity='.34'/%3E%3C/svg%3E");
	--header-h: 64px;
}


/* ==========================================================================
   Light mode — follows the visitor's device setting.
   "Lights on in the darkroom": paper-white page, prints and ink, pink kept.
   Film strips and the footer stay dark, like the black film edges on a
   printed contact sheet.
   ========================================================================== */
@media (prefers-color-scheme: light) {
	:root {
		--ink: #f4eee6;
		--ink-2: #fffcf8;
		--ink-3: #ffffff;
		--line: rgba(70, 25, 45, 0.12);
		--line-2: rgba(70, 25, 45, 0.22);
		--text: #1d1519;
		--muted: #5a4952;
		--dim: #7a6771;
		--text-strong: #000;
		--safe-2: #c2185b;
		--safe-deep: #a3124d;
		--pink-text: #a3124d;
		--error: #b0123f;
		--tint: rgba(70, 25, 45, 0.035);
		--tint-2: rgba(70, 25, 45, 0.06);
		--tint-3: rgba(70, 25, 45, 0.1);
		--grid: rgba(70, 25, 45, 0.06);
		--header-bg: rgba(244, 238, 230, 0.78);
		--header-solid: rgba(244, 238, 230, 0.95);
		--menu-bg: #fbf7f1;
		--well: #fbf8f4;
		--well-2: #ece4da;
		--well-3: #efe7de;
		--easel-a: #ffffff;
		--easel-b: #fbf6f0;
		--panel-a: #fff3f8;
		--panel-b: #fff8fb;
		--surface-2: #fbf6f1;
		--surface-3: #fff0f6;
		--drag: #fff0f6;
		--sink: rgba(255, 255, 255, 0.72);
		--glow-1: rgba(255, 61, 139, 0.2);
		--glow-2: rgba(255, 61, 139, 0.07);
		--shadow-lg: 0 30px 70px -38px rgba(80, 20, 45, 0.45);
		--shadow-md: 0 22px 44px -24px rgba(80, 20, 45, 0.42);
		--grain: 0.22;
		--mark: rgba(255, 61, 139, 0.28);
		--paper: #fffdf9;
		--paper-edge: #ffffff;
		--sprocket: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='14'%3E%3Crect x='6' y='3' width='10' height='8' rx='2' fill='%23f4eee6' fill-opacity='.85'/%3E%3C/svg%3E");
	}

	/* dark islands */
	.filmstrip,
	.strip,
	.sheet,
	.site-footer {
		--ink-2: #181116;
		--line: rgba(255, 205, 225, 0.11);
		--line-2: rgba(255, 205, 225, 0.2);
		--text: #f6edf1;
		--muted: #c3aeb9;
		--dim: #917c88;
		--text-strong: #fff;
		--safe-2: #ff7fb3;
		--pink-text: var(--pink-text);
		--tint: rgba(255, 255, 255, 0.03);
		--tint-2: rgba(255, 255, 255, 0.05);
		--grid: var(--grid);
		--well-3: #0b0709;
		color: var(--text);
	}
	.site-footer .film-edge { --sprocket: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='14'%3E%3Crect x='6' y='3' width='10' height='8' rx='2' fill='%23f4eee6' fill-opacity='.85'/%3E%3C/svg%3E"); }
	.print { box-shadow: inset 0 0 0 9px var(--paper-edge), inset 0 0 0 10px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(70, 25, 45, 0.12), var(--shadow-lg); }
	.hero__amp { text-shadow: none; }
	.frame__link { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04); }
}

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-h) + 20px);
	background: var(--ink);
	color-scheme: light dark;
}

body {
	margin: 0;
	min-height: 100vh;
	background: var(--ink);
	color: var(--text);
	font-family: var(--f-sans);
	font-size: 1.0625rem;
	line-height: 1.6;
	font-optical-sizing: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

/* film grain over everything, including the paper prints */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 100;
	pointer-events: none;
	background: url("assets/img/grain.png") repeat;
	opacity: var(--grain);
}

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

a { color: var(--safe-2); }

h1, h2, h3, h4 { font-family: var(--f-sans); text-wrap: balance; }

::selection { background: var(--safe); color: var(--safe-ink); }

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

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.skip-link:focus {
	position: fixed !important;
	top: 10px;
	left: 10px;
	z-index: 1000;
	width: auto;
	height: auto;
	clip: auto;
	margin: 0;
	padding: 12px 18px;
	background: var(--safe);
	color: var(--safe-ink);
	border-radius: 10px;
	font-weight: 700;
	text-decoration: none;
}

.icon { width: 20px; height: 20px; flex: 0 0 auto; }

.wrap {
	width: min(100% - 32px, 1180px);
	margin-inline: auto;
}
.wrap--narrow { width: min(100% - 32px, 820px); }
.wrap--bleed { width: 100%; }
@media (min-width: 1000px) {
	.wrap--bleed { width: min(100% - 32px, 1180px); }
}

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

/* ==========================================================================
   Small parts: kicker, eyebrow, bulb, buttons, chips, scribble
   ========================================================================== */
.kicker {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 14px;
	font-family: var(--f-mono);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--safe-2);
}
.kicker::before {
	content: "";
	width: 18px;
	height: 1px;
	background: currentColor;
}

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 18px;
	padding: 6px 13px 6px 11px;
	border: 1px solid rgba(255, 61, 139, 0.38);
	border-radius: 999px;
	background: rgba(255, 61, 139, 0.08);
	font-family: var(--f-mono);
	font-size: 0.74rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--pink-text);
}

.bulb {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--safe);
	box-shadow: 0 0 10px 2px rgba(255, 61, 139, 0.75);
	animation: safelight 3.6s ease-in-out infinite;
}
.kicker .bulb { margin-right: -2px; }
.kicker:has(.bulb)::before { display: none; }

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-height: 46px;
	padding: 0 20px;
	border: 1px solid transparent;
	border-radius: 999px;
	font-family: var(--f-sans);
	font-size: 0.98rem;
	font-weight: 700;
	line-height: 1.1;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.btn .icon { width: 18px; height: 18px; }
.btn--safe {
	background: var(--safe);
	color: var(--safe-ink);
	box-shadow: 0 10px 30px -12px rgba(255, 61, 139, 0.9);
}
.btn--safe:hover { background: var(--safe-2); transform: translateY(-1px); }
.btn--ghost {
	background: var(--tint);
	border-color: var(--line-2);
	color: var(--text);
}
.btn--ghost:hover { border-color: var(--safe); color: var(--text-strong); }
.btn--lg { min-height: 54px; padding: 0 26px; font-size: 1.05rem; }

.btn-link {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 14px auto 2px;
	padding: 8px 12px;
	border: 0;
	border-radius: 999px;
	background: none;
	color: var(--muted);
	font: 600 0.92rem/1 var(--f-sans);
	cursor: pointer;
}
.btn-link .icon { width: 16px; height: 16px; }
.btn-link:hover { color: var(--text); background: var(--tint-2); }

.chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 38px;
	padding: 0 14px;
	border: 1px solid var(--line-2);
	border-radius: 999px;
	background: var(--tint);
	color: var(--text);
	font: 600 0.9rem/1 var(--f-sans);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}
.chip .icon { width: 16px; height: 16px; }
.chip:hover { border-color: var(--safe); }
.chip.is-active { background: var(--safe); border-color: var(--safe); color: var(--safe-ink); }
.chip__n { font-family: var(--f-mono); font-size: 0.7rem; opacity: 0.7; }

.scribble {
	font-family: var(--f-hand);
	font-weight: 600;
	color: var(--safe-2);
	line-height: 1;
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
	position: sticky;
	top: 0;
	z-index: 60;
	background: var(--header-bg);
	-webkit-backdrop-filter: saturate(150%) blur(14px);
	backdrop-filter: saturate(150%) blur(14px);
	border-bottom: 1px solid transparent;
	transition: border-color 0.25s, background-color 0.25s;
}
.site-header.is-scrolled { border-bottom-color: var(--line); background: var(--header-solid); }
.site-header:not(.is-scrolled):not(:has([aria-expanded="true"])) {
	background: transparent;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}
/* the first dark band on every page slides up under the header so its glow reaches the top */
.hero,
.entry-hero,
.listing-hero,
.lost { margin-top: calc(-1 * var(--header-h)); }
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
@media (max-width: 600px) { .admin-bar .site-header { top: 0; } }

.site-header__inner {
	display: flex;
	align-items: center;
	gap: 14px;
	height: var(--header-h);
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-right: auto;
	color: var(--text);
	text-decoration: none;
}
.brand--custom img { display: block; max-height: 40px; width: auto; }
.brand__mark {
	position: relative;
	display: grid;
	place-items: center;
	width: 35px;
	height: 35px;
	border: 1px solid var(--line-2);
	border-radius: 10px;
	background: linear-gradient(160deg, #2c1e27, #130d11);
	color: #f6edf1;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.brand__w {
	font-size: 1.2rem;
	font-weight: 800;
	font-stretch: 75%;
	line-height: 1;
	transform: translateY(1px);
}
.brand__bulb {
	position: absolute;
	top: 5px;
	right: 5px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--safe);
	box-shadow: 0 0 8px 2px rgba(255, 61, 139, 0.7);
	animation: safelight 3.6s ease-in-out infinite;
}
.brand__name {
	font-size: 1.28rem;
	font-weight: 780;
	font-stretch: 84%;
	letter-spacing: -0.01em;
}
.brand__at { color: var(--safe); }

.site-nav__list { list-style: none; margin: 0; padding: 0; }
.site-nav__list a {
	display: block;
	color: var(--muted);
	font-weight: 600;
	text-decoration: none;
	transition: color 0.2s, background-color 0.2s;
}
.site-nav__list a:hover,
.site-nav__list .current-menu-item > a,
.site-nav__list .current_page_parent > a { color: var(--text); }

.site-nav__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: 1px solid rgba(255, 61, 139, 0.45);
	border-radius: 999px;
	background: rgba(255, 61, 139, 0.12);
	color: var(--pink-text);
	font-weight: 650;
	text-decoration: none;
	transition: background-color 0.2s, color 0.2s;
}
.site-nav__cta .icon { width: 17px; height: 17px; }
.site-nav__cta:hover { background: var(--safe); color: var(--safe-ink); }

.site-header__actions { display: flex; gap: 8px; }
.icon-btn {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: var(--tint);
	color: var(--text);
	cursor: pointer;
	transition: border-color 0.2s, color 0.2s;
}
.icon-btn:hover,
.icon-btn[aria-expanded="true"] { border-color: var(--safe); color: var(--safe-2); }
.icon-btn .when-open { display: none; }
.icon-btn[aria-expanded="true"] .when-open { display: block; }
.icon-btn[aria-expanded="true"] .when-closed { display: none; }

@media (max-width: 899px) {
	.site-nav {
		position: absolute;
		top: var(--header-h);
		left: 0;
		right: 0;
		display: none;
		flex-direction: column;
		padding: 6px 16px 20px;
		background: var(--menu-bg);
		border-bottom: 1px solid var(--line);
		box-shadow: 0 30px 50px -20px rgba(0, 0, 0, 0.8);
	}
	.site-nav.is-open { display: flex; }
	.site-nav__list a {
		padding: 15px 4px;
		border-bottom: 1px solid var(--line);
		font-size: 1.12rem;
		color: var(--text);
	}
	.site-nav__cta { margin-top: 16px; min-height: 50px; font-size: 1rem; }
}
@media (min-width: 900px) {
	.icon-btn--menu { display: none; }
	.site-nav { display: flex; align-items: center; gap: 6px; }
	.site-nav__list { display: flex; gap: 2px; }
	.site-nav__list a { padding: 8px 13px; border-radius: 999px; font-size: 0.96rem; }
	.site-nav__list a:hover { background: var(--tint-2); }
	.site-nav__cta { margin-left: 8px; padding: 9px 15px; font-size: 0.92rem; }
}

.site-search {
	padding: 14px 0 16px;
	background: var(--menu-bg);
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}

.read-progress {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	pointer-events: none;
}
.read-progress span {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, var(--safe), var(--safe-2));
	box-shadow: 0 0 10px var(--safe);
	transform: scaleX(0);
	transform-origin: left center;
}

/* ==========================================================================
   Search form
   ========================================================================== */
.search-form { display: flex; gap: 8px; }
.search-form__field { position: relative; flex: 1; min-width: 0; }
.search-form__field .icon {
	position: absolute;
	left: 14px;
	top: 50%;
	width: 18px;
	height: 18px;
	transform: translateY(-50%);
	color: var(--dim);
	pointer-events: none;
}
.search-form input[type="search"] {
	width: 100%;
	min-height: 48px;
	padding: 0 14px 0 42px;
	border: 1px solid var(--line-2);
	border-radius: 14px;
	background: var(--well);
	color: var(--text);
	font: 400 1rem var(--f-sans);
	-webkit-appearance: none;
	appearance: none;
}
.search-form input[type="search"]:focus {
	outline: none;
	border-color: var(--safe);
	box-shadow: 0 0 0 3px rgba(255, 61, 139, 0.22);
}
.search-form .btn { min-height: 48px; border-radius: 14px; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
	position: relative;
	padding: calc(34px + var(--header-h)) 0 48px;
	overflow: hidden;
}
.hero__glow {
	position: absolute;
	left: 50%;
	top: -380px;
	width: 1150px;
	height: 760px;
	transform: translateX(-50%);
	background: radial-gradient(closest-side, var(--glow-1), var(--glow-2) 48%, transparent 76%);
	pointer-events: none;
}
.hero__glow--soft { opacity: 0.6; top: -460px; }

.hero__grid {
	position: relative;
	display: grid;
	gap: 26px;
	grid-template-areas: "copy" "tool" "trust";
}
.hero__copy { grid-area: copy; }
.hero__tool { grid-area: tool; position: relative; }
.hero__trust { grid-area: trust; }

.hero__title {
	margin: 0 0 16px;
	font-size: clamp(3.1rem, 14vw, 6.6rem);
	font-weight: 800;
	font-stretch: 75%;
	line-height: 0.9;
	letter-spacing: -0.015em;
}
.hero__amp {
	display: inline-block;
	margin: 0 0.02em;
	font-family: var(--f-hand);
	font-weight: 600;
	font-size: 1.08em;
	color: var(--safe);
	transform: rotate(-9deg) translateY(0.05em);
	text-shadow: 0 0 28px rgba(255, 61, 139, 0.55);
}
.hero__lede {
	max-width: 34ch;
	margin: 0;
	font-size: clamp(1.1rem, 2.6vw, 1.3rem);
	line-height: 1.5;
	color: var(--muted);
	text-wrap: pretty;
}

.trust {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.trust li {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 11px 7px 9px;
	border: 1px solid var(--line-2);
	border-radius: 8px;
	background: var(--tint);
	font-family: var(--f-mono);
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text);
}
.trust .icon { width: 14px; height: 14px; color: var(--safe); stroke-width: 2.6; }

.scribble--start { display: none; }

@media (min-width: 960px) {
	.hero { padding: calc(56px + var(--header-h)) 0 56px; }
	.hero__glow { left: 64%; }
	.hero__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 540px);
		grid-template-areas: "copy tool" "trust tool";
		column-gap: 64px;
		row-gap: 30px;
	}
	.hero__copy { align-self: end; }
	.hero__trust { align-self: start; }
	.scribble--start {
		display: block;
		position: absolute;
		top: -44px;
		left: -70px;
		font-size: 1.75rem;
		transform: rotate(-7deg);
	}
	.scribble--start svg {
		display: inline-block;
		width: 46px;
		height: 34px;
		margin-left: 2px;
		vertical-align: -20px;
	}
}

/* ==========================================================================
   The tool — "easel"
   ========================================================================== */
.easel {
	position: relative;
	padding: 12px;
	border: 1px solid var(--line-2);
	border-radius: 22px;
	background: linear-gradient(180deg, var(--easel-a), var(--easel-b));
	box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255, 61, 139, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.05);
	scroll-margin-top: calc(var(--header-h) + 24px);
}
@media (min-width: 640px) { .easel { padding: 16px; } }

.easel__bar {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	padding: 2px 6px 12px;
	font-family: var(--f-mono);
	font-size: 0.66rem;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--dim);
}
.easel__lamp { display: inline-flex; align-items: center; gap: 8px; color: var(--pink-text); }
.easel__lamp i {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--safe);
	box-shadow: 0 0 8px 2px rgba(255, 61, 139, 0.7);
	animation: safelight 3.6s ease-in-out infinite;
}
.easel[data-state="working"] .easel__lamp i { animation-duration: 0.9s; }
.easel[data-state="error"] .easel__lamp i { background: var(--error); box-shadow: none; animation: none; }

.easel__tabs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px;
	margin-bottom: 12px;
	padding: 4px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--well-2);
}
.easel__tab {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-height: 44px;
	padding: 0 8px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--muted);
	font: 650 0.94rem/1.1 var(--f-sans);
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}
@media (max-width: 420px) {
	.easel__tab { gap: 6px; padding: 0 4px; font-size: 0.86rem; }
	.easel__tab .icon { width: 15px; height: 15px; }
}
.easel__tab .icon { width: 17px; height: 17px; }
.easel__tab:hover { color: var(--text); }
.easel__tab.is-active {
	background: var(--safe);
	color: var(--safe-ink);
	box-shadow: 0 8px 24px -10px rgba(255, 61, 139, 0.9);
}

/* drop zone with viewfinder corners */
.drop {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	min-height: 232px;
	padding: 30px 22px;
	border: 1px solid var(--line);
	border-radius: 16px;
	background:
		radial-gradient(ellipse at 50% 42%, rgba(255, 61, 139, 0.16), transparent 64%),
		linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 100% 24px,
		linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / 24px 100%,
		var(--well);
	text-align: center;
	cursor: pointer;
	transition: border-color 0.2s, background-color 0.2s;
}
@media (min-width: 960px) { .drop { min-height: 262px; } }
.drop__corners i {
	position: absolute;
	width: 26px;
	height: 26px;
	border: 0 solid var(--safe);
	transition: transform 0.25s ease;
}
.drop__corners i:nth-child(1) { top: 12px; left: 12px; border-top-width: 2.5px; border-left-width: 2.5px; border-top-left-radius: 8px; }
.drop__corners i:nth-child(2) { top: 12px; right: 12px; border-top-width: 2.5px; border-right-width: 2.5px; border-top-right-radius: 8px; }
.drop__corners i:nth-child(3) { bottom: 12px; left: 12px; border-bottom-width: 2.5px; border-left-width: 2.5px; border-bottom-left-radius: 8px; }
.drop__corners i:nth-child(4) { bottom: 12px; right: 12px; border-bottom-width: 2.5px; border-right-width: 2.5px; border-bottom-right-radius: 8px; }
.drop:hover .drop__corners i:nth-child(1),
.drop.is-drag .drop__corners i:nth-child(1) { transform: translate(6px, 6px); }
.drop:hover .drop__corners i:nth-child(2),
.drop.is-drag .drop__corners i:nth-child(2) { transform: translate(-6px, 6px); }
.drop:hover .drop__corners i:nth-child(3),
.drop.is-drag .drop__corners i:nth-child(3) { transform: translate(6px, -6px); }
.drop:hover .drop__corners i:nth-child(4),
.drop.is-drag .drop__corners i:nth-child(4) { transform: translate(-6px, -6px); }
.drop.is-drag { border-color: var(--safe); background-color: var(--drag); }
.drop:focus-within { outline: 2px solid var(--safe-2); outline-offset: 3px; }

.drop__icon {
	display: grid;
	place-items: center;
	width: 60px;
	height: 60px;
	border: 1.5px solid rgba(255, 61, 139, 0.6);
	border-radius: 50%;
	background: rgba(255, 61, 139, 0.1);
	color: var(--safe-2);
	box-shadow: 0 0 34px rgba(255, 61, 139, 0.3);
	transition: transform 0.25s;
}
.drop__icon .icon { width: 26px; height: 26px; }
.drop:hover .drop__icon { transform: translateY(-3px); }
.drop__text { max-width: 22ch; font-size: 1.06rem; font-weight: 650; line-height: 1.35; }
.drop__input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	overflow: hidden;
}

.easel__hint {
	margin: 12px 6px 2px;
	font-size: 0.84rem;
	line-height: 1.5;
	text-align: center;
	color: var(--dim);
}

/* link search */
.urlform { display: grid; gap: 10px; }
.urlform__field { position: relative; }
.urlform__field .icon {
	position: absolute;
	left: 15px;
	top: 50%;
	width: 18px;
	height: 18px;
	transform: translateY(-50%);
	color: var(--dim);
	pointer-events: none;
}
.urlform input {
	width: 100%;
	min-height: 54px;
	padding: 0 14px 0 44px;
	border: 1px solid var(--line-2);
	border-radius: 14px;
	background: var(--well);
	color: var(--text);
	font: 400 1rem var(--f-sans);
	-webkit-appearance: none;
	appearance: none;
}
.urlform input:focus { outline: none; border-color: var(--safe); box-shadow: 0 0 0 3px rgba(255, 61, 139, 0.22); }
.urlform .btn { min-height: 52px; border-radius: 14px; }
@media (min-width: 640px) { .urlform { grid-template-columns: 1fr auto; } }

.easel__status {
	margin: 12px 6px 0;
	font-size: 0.9rem;
	line-height: 1.45;
	color: var(--muted);
}
.easel__status:empty { display: none; }
.easel__status.is-error { color: var(--error); }
.easel__status.is-quiet {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

/* result: the tray, with a retro scanner running over the photo */
.easel__result { padding: 2px 0 0; }
.tray {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 200px;
	margin: 0 0 14px;
	padding: 24px 18px 44px;
	border: 1px solid var(--line);
	border-radius: 16px;
	background: radial-gradient(ellipse at 50% 45%, rgba(255, 61, 139, 0.12), transparent 70%), var(--well-3);
	overflow: hidden;
}
.tray__img {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: 250px;
	padding: 7px;
	border-radius: 2px;
	background: var(--paper-edge);
	box-shadow: 0 16px 34px -12px rgba(0, 0, 0, 0.9);
	transform: rotate(-1.4deg);
	opacity: 0;
}
.tray__img.is-developed { animation: develop 1.6s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; }
.tray__img.is-broken { display: none; }
.tray:has(.is-broken)::before {
	content: "Preview unavailable";
	font-family: var(--f-mono);
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--dim);
}

.scanner { position: absolute; inset: 0; pointer-events: none; }
.scanner__lines,
.scanner__beam,
.scanner__corners { opacity: 0; transition: opacity 0.35s; }
.easel[data-state="working"] .scanner__lines,
.easel[data-state="working"] .scanner__beam,
.easel[data-state="working"] .scanner__corners { opacity: 1; }
.scanner__lines {
	position: absolute;
	inset: 0;
	background:
		repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0 1px, transparent 1px 4px),
		rgba(255, 61, 139, 0.05);
}
.easel[data-state="working"] .scanner__lines { animation: flicker 3.2s steps(1) infinite; }
.scanner__beam {
	position: absolute;
	left: 0;
	right: 0;
	top: -30%;
	height: 30%;
	background: linear-gradient(to bottom, transparent, rgba(255, 61, 139, 0.12) 55%, rgba(255, 61, 139, 0.35) 92%, transparent);
	animation: scan 2.4s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}
.scanner__beam::after {
	content: "";
	position: absolute;
	left: 4%;
	right: 4%;
	bottom: 6%;
	height: 2px;
	border-radius: 2px;
	background: #ffc2dc;
	box-shadow: 0 0 6px 1px #ff3d8b, 0 0 22px 6px rgba(255, 61, 139, 0.55);
}
.scanner__corners i {
	position: absolute;
	width: 18px;
	height: 18px;
	border: 0 solid var(--safe);
	animation: blink 1.2s steps(1) infinite;
}
.scanner__corners i:nth-child(1) { top: 10px; left: 10px; border-top-width: 2px; border-left-width: 2px; }
.scanner__corners i:nth-child(2) { top: 10px; right: 10px; border-top-width: 2px; border-right-width: 2px; }
.scanner__corners i:nth-child(3) { bottom: 10px; left: 10px; border-bottom-width: 2px; border-left-width: 2px; }
.scanner__corners i:nth-child(4) { bottom: 10px; right: 10px; border-bottom-width: 2px; border-right-width: 2px; }
.scanner__readout {
	position: absolute;
	left: 12px;
	bottom: 10px;
	display: inline-flex;
	align-items: center;
	max-width: calc(100% - 24px);
	padding: 5px 9px;
	border: 1px solid rgba(255, 61, 139, 0.45);
	border-radius: 6px;
	background: rgba(10, 6, 8, 0.82);
	font-family: var(--f-mono);
	font-size: 0.66rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	white-space: nowrap;
	overflow: hidden;
	color: #ffd3e4;
	text-shadow: 0 0 6px rgba(255, 61, 139, 0.6);
}
.scanner__cursor {
	display: inline-block;
	width: 0.6em;
	height: 1.05em;
	margin-left: 5px;
	background: currentColor;
	animation: blink 1s steps(1) infinite;
}
.easel[data-state="ready"] .scanner__readout { border-color: rgba(255, 61, 139, 0.7); }
.easel[data-state="ready"] .scanner__cursor { animation: none; opacity: 0; width: 0; margin: 0; }

/* try-again box */
.retry {
	display: grid;
	justify-items: center;
	gap: 12px;
	margin: 0 0 12px;
	padding: 16px;
	border: 1px dashed rgba(255, 61, 139, 0.5);
	border-radius: 14px;
	background: rgba(255, 61, 139, 0.06);
	text-align: center;
}
.retry[hidden] { display: none; }
.retry__msg { margin: 0; line-height: 1.5; color: var(--text); }
.retry .btn[hidden] { display: none; }

/* a photo is on screen: the inputs become compact and sit above it */
.easel.has-result .easel__panel { margin-bottom: 12px; }
.easel.has-result .drop { flex-direction: row; min-height: 0; padding: 14px 16px; gap: 12px; }
.easel.has-result .drop__corners { display: none; }
.easel.has-result .drop__icon { width: 40px; height: 40px; box-shadow: none; }
.easel.has-result .drop__icon .icon { width: 20px; height: 20px; }
.easel.has-result .drop__text { max-width: none; font-size: 0.98rem; }
.easel.has-result .easel__hint { margin-top: 8px; }

/* ==========================================================================
   Sections
   ========================================================================== */
.section {
	position: relative;
	padding-block: clamp(48px, 7vw, 84px);
}
.section__head { margin-bottom: 34px; }
.section__title {
	margin: 0 0 20px;
	font-size: clamp(2.1rem, 5.6vw, 3.5rem);
	font-weight: 780;
	font-stretch: 78%;
	line-height: 1;
	letter-spacing: -0.01em;
}
.section__head .section__title { margin-bottom: 0; }
.lead {
	margin: 0;
	font-size: clamp(1.15rem, 2.3vw, 1.42rem);
	line-height: 1.58;
	color: var(--text);
}

/* How it works — film strip */
.filmstrip {
	position: relative;
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 32px 14px;
	list-style: none;
	border-radius: 18px;
	background:
		var(--sprocket) repeat-x 0 9px / 22px 14px,
		var(--sprocket) repeat-x 0 calc(100% - 9px) / 22px 14px,
		var(--film);
}
.filmstrip__frame {
	position: relative;
	padding: 22px 20px 24px;
	border-radius: 7px;
	background: linear-gradient(160deg, #241a21, #161014);
}
.filmstrip__num {
	display: block;
	margin-bottom: 16px;
	font-size: 4.6rem;
	font-weight: 800;
	font-stretch: 75%;
	line-height: 0.85;
	color: transparent;
	-webkit-text-stroke: 1.5px var(--safe);
}
.filmstrip__frame h3 { margin: 0 0 8px; font-size: 1.36rem; font-weight: 720; line-height: 1.2; }
.filmstrip__frame p { margin: 0; color: var(--muted); }
@media (min-width: 800px) {
	.filmstrip { grid-template-columns: repeat(3, 1fr); padding: 36px 18px; gap: 14px; }
	.filmstrip__frame { min-height: 230px; }
	.filmstrip__frame:not(:last-child)::after {
		content: "";
		position: absolute;
		top: 38px;
		right: -13px;
		width: 12px;
		height: 12px;
		border-top: 2px solid var(--safe);
		border-right: 2px solid var(--safe);
		transform: rotate(45deg);
		z-index: 1;
		opacity: 0.7;
	}
}

/* What is / phone */
.explain__grid { display: grid; gap: 30px; }
@media (min-width: 960px) {
	.explain__grid { grid-template-columns: 1.1fr 0.9fr; gap: 64px; align-items: start; }
}
.panel {
	padding: clamp(22px, 4vw, 34px);
	border: 1px solid var(--line);
	border-radius: 22px;
	background: var(--ink-2);
}
.panel__icon {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 13px;
	background: rgba(255, 61, 139, 0.1);
	color: var(--safe-2);
}
.panel__icon .icon { width: 22px; height: 22px; }
.panel__title {
	margin: 18px 0 12px;
	font-size: 1.6rem;
	font-weight: 740;
	font-stretch: 84%;
	line-height: 1.12;
}
.panel p { margin: 0 0 14px; color: var(--muted); }
.panel p:last-child { margin-bottom: 0; }
.panel strong { color: var(--text); font-weight: 700; }

/* What it can find */
.finds__grid {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 640px) { .finds__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .finds__grid { grid-template-columns: repeat(3, 1fr); } }
.find {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 20px;
	border: 1px solid var(--line);
	border-radius: 16px;
	background: linear-gradient(180deg, var(--tint), transparent);
	transition: border-color 0.2s;
}
.find:hover { border-color: var(--line-2); }
.find__icon {
	display: grid;
	flex: 0 0 44px;
	place-items: center;
	height: 44px;
	border-radius: 12px;
	background: rgba(255, 61, 139, 0.1);
	color: var(--safe-2);
}
.find__icon .icon { width: 21px; height: 21px; }
.find p { margin: 0; color: var(--muted); line-height: 1.5; }
.find strong { color: var(--text); font-size: 1.08rem; font-weight: 720; }

/* Who / tips */
.duo__grid { display: grid; gap: 56px; }
@media (min-width: 960px) { .duo__grid { grid-template-columns: 1fr 1fr; gap: 72px; } }

.pinned {
	position: relative;
	max-width: 520px;
	margin-top: 12px;
	padding: 36px 26px 28px;
	border-radius: 3px;
	background: var(--paper);
	color: var(--paper-ink);
	box-shadow: inset 0 0 0 8px var(--paper-edge), inset 0 0 0 9px rgba(0, 0, 0, 0.06), var(--shadow-md);
	transform: rotate(-1.3deg);
}
.pinned__tape {
	position: absolute;
	top: -13px;
	left: 50%;
	width: 116px;
	height: 28px;
	background: rgba(255, 170, 205, 0.62);
	transform: translateX(-50%) rotate(2.5deg);
	clip-path: polygon(3% 0, 97% 0, 100% 20%, 97% 40%, 100% 60%, 97% 80%, 100% 100%, 3% 100%, 0 80%, 3% 60%, 0 40%, 3% 20%, 0 0);
}
.pinned__icon { color: var(--safe-deep); }
.pinned__icon .icon { width: 28px; height: 28px; }
.pinned h3 { margin: 10px 0 8px; font-size: 1.5rem; font-weight: 760; font-stretch: 84%; line-height: 1.15; }
.pinned p { margin: 0; color: var(--paper-text); line-height: 1.65; }

.tips { margin: 0; padding: 0; list-style: none; counter-reset: tip; }
.tips li {
	position: relative;
	padding: 16px 0 16px 56px;
	border-bottom: 1px dashed var(--line-2);
	color: var(--muted);
	counter-increment: tip;
}
.tips li:first-child { padding-top: 4px; }
.tips li::before {
	content: counter(tip, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 16px;
	padding: 3px 7px;
	border: 1px solid rgba(255, 61, 139, 0.45);
	border-radius: 6px;
	font-family: var(--f-mono);
	font-size: 0.76rem;
	color: var(--safe-2);
}
.tips li:first-child::before { top: 4px; }
.tips strong { color: var(--text); font-weight: 700; }

/* Privacy — lit by the safelight */
.safe-panel {
	position: relative;
	display: grid;
	gap: 32px;
	padding: clamp(24px, 5vw, 60px);
	border: 1px solid rgba(255, 61, 139, 0.32);
	border-radius: 28px;
	background:
		radial-gradient(120% 90% at 0% 0%, rgba(255, 61, 139, 0.24), transparent 55%),
		linear-gradient(180deg, var(--panel-a), var(--easel-b));
	overflow: hidden;
}
@media (min-width: 960px) { .safe-panel { grid-template-columns: 0.9fr 1.1fr; gap: 60px; } }
.safe-panel .lead { color: var(--muted); }
.note {
	margin: 26px 0 0;
	padding: 14px 16px;
	border: 1px dashed rgba(255, 61, 139, 0.45);
	border-radius: 12px;
	background: var(--sink);
	font-family: var(--f-mono);
	font-size: 0.8rem;
	line-height: 1.65;
	color: var(--muted);
}
.safe-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.safe-list li {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 16px;
	border: 1px solid var(--line);
	border-radius: 14px;
	background: var(--sink);
}
.safe-list p { margin: 0; color: var(--muted); line-height: 1.55; }
.safe-list strong { color: var(--text); font-weight: 700; }
.safe-list__icon {
	display: grid;
	flex: 0 0 38px;
	place-items: center;
	height: 38px;
	border-radius: 10px;
	background: rgba(255, 61, 139, 0.12);
	color: var(--safe-2);
}
.safe-list__icon .icon { width: 19px; height: 19px; }

/* FAQ */
.faq__grid { display: grid; gap: 30px; }
@media (min-width: 960px) {
	.faq__grid { grid-template-columns: 0.8fr 1.2fr; gap: 72px; }
	.faq__aside { position: sticky; top: calc(var(--header-h) + 30px); align-self: start; }
}
.faq__aside .muted { margin: 0; max-width: 40ch; }
.ask {
	margin-top: 26px;
	padding: 20px;
	border: 1px solid var(--line-2);
	border-radius: 16px;
	background: var(--ink-2);
}
.ask p { margin: 0 0 14px; color: var(--muted); }
.ask strong { display: block; color: var(--text); font-size: 1.08rem; }
.faq__ask--aside { display: none; }
@media (min-width: 960px) {
	.faq__ask--aside { display: block; }
	.faq__ask--end { display: none; }
}

.qa { border-bottom: 1px solid var(--line); }
.qa:first-of-type { border-top: 1px solid var(--line); }
.qa summary {
	display: grid;
	grid-template-columns: 30px 1fr auto;
	align-items: center;
	gap: 12px;
	padding: 19px 2px;
	font-size: 1.07rem;
	font-weight: 650;
	line-height: 1.35;
	list-style: none;
	cursor: pointer;
}
.qa summary::-webkit-details-marker { display: none; }
.qa__no { font-family: var(--f-mono); font-size: 0.72rem; color: var(--dim); }
.qa__toggle {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border: 1px solid var(--line-2);
	border-radius: 50%;
	color: var(--muted);
	transition: transform 0.25s, border-color 0.2s, color 0.2s;
}
.qa__toggle .icon { width: 16px; height: 16px; }
.qa[open] .qa__toggle { transform: rotate(45deg); border-color: var(--safe); color: var(--safe-2); }
.qa summary:hover .qa__q { color: var(--text-strong); }
.qa__a { padding: 0 44px 22px 42px; }
.qa__a p { margin: 0; color: var(--muted); }
@media (max-width: 480px) { .qa__a { padding-right: 4px; } }

/* Why people use our tools — f-stops */
.why__grid { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .why__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .why__grid { grid-template-columns: repeat(4, 1fr); } }
.stop {
	position: relative;
	padding: 24px 20px 24px;
	border: 1px solid var(--line);
	border-radius: 18px;
	background: var(--ink-2);
}
.stop__f {
	position: absolute;
	top: 18px;
	right: 18px;
	font-family: var(--f-mono);
	font-size: 0.72rem;
	color: var(--dim);
}
.stop__icon {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	margin-bottom: 18px;
	border: 1.5px solid rgba(255, 61, 139, 0.5);
	border-radius: 50%;
	color: var(--safe-2);
	box-shadow: 0 0 26px rgba(255, 61, 139, 0.2);
}
.stop__icon .icon { width: 22px; height: 22px; }
.stop h3 { margin: 0 0 6px; font-size: 1.22rem; font-weight: 720; line-height: 1.2; }
.stop p { margin: 0; font-size: 0.97rem; color: var(--muted); }

/* ==========================================================================
   Contact-sheet rails and frames
   ========================================================================== */
.rail { padding-block: clamp(40px, 6vw, 72px); }
.rail + .rail { padding-top: 8px; }
.rail__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 20px;
}
.rail__head .kicker { margin-bottom: 10px; }
.rail__title {
	margin: 0;
	font-size: clamp(1.85rem, 4.6vw, 2.7rem);
	font-weight: 780;
	font-stretch: 78%;
	line-height: 1;
}
.rail__title a { color: inherit; text-decoration: none; }
.rail__title a:hover { color: var(--safe-2); }
.rail__all {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding-bottom: 4px;
	color: var(--safe-2);
	font-size: 0.93rem;
	font-weight: 650;
	text-decoration: none;
	white-space: nowrap;
	transition: gap 0.2s;
}
.rail__all .icon { width: 16px; height: 16px; }
.rail__all:hover { gap: 10px; }

.strip {
	position: relative;
	padding: 32px 0;
	background:
		var(--sprocket) repeat-x 0 9px / 22px 14px,
		var(--sprocket) repeat-x 0 calc(100% - 9px) / 22px 14px,
		var(--film);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: 16px;
	scrollbar-width: none;
	cursor: grab;
}
.strip::-webkit-scrollbar { display: none; }
.strip.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.strip__track { display: flex; gap: 12px; padding-inline: 16px; width: max-content; }
.strip .frame { flex: 0 0 min(78vw, 300px); scroll-snap-align: start; }
@media (min-width: 1000px) {
	.strip { padding: 34px 18px; border-radius: 18px; overflow: visible; cursor: default; }
	.strip__track { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; padding: 0; width: auto; }
	.strip .frame { flex: none; }
}

.frame { position: relative; min-width: 0; }
.frame--blank { display: none; }
@media (min-width: 1000px) {
	.frame--blank {
		display: block;
		min-height: 300px;
		border: 1px dashed rgba(255, 205, 225, 0.08);
		border-radius: 7px;
		background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.018) 0 2px, transparent 2px 10px);
	}
}
.frame__link {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	border-radius: 7px;
	background: #1b1418;
	color: var(--text);
	text-decoration: none;
}
.frame__link:focus-visible { outline: 2px solid var(--safe); outline-offset: 4px; }
.frame__img {
	position: relative;
	aspect-ratio: 3 / 2;
	border-radius: 7px 7px 0 0;
	background: #120c10;
	overflow: hidden;
}
.frame__img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(0.9);
	transition: filter 0.35s, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.frame__neg {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	background:
		radial-gradient(circle at 30% 18%, rgba(255, 61, 139, 0.3), transparent 60%),
		repeating-linear-gradient(135deg, var(--grid) 0 2px, transparent 2px 9px),
		#1b1016;
	color: rgba(255, 105, 165, 0.9);
}
.frame__neg .icon { width: 46px; height: 46px; stroke-width: 1.3; filter: drop-shadow(0 0 14px rgba(255, 61, 139, 0.55)); }
.frame__no {
	position: absolute;
	top: 8px;
	left: 8px;
	padding: 3px 6px;
	border-radius: 4px;
	background: rgba(0, 0, 0, 0.55);
	font-family: var(--f-mono);
	font-size: 0.64rem;
	letter-spacing: 0.1em;
	color: var(--pink-text);
}
.frame__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 6px;
	padding: 14px 14px 16px;
}
.frame__cat {
	font-family: var(--f-mono);
	font-size: 0.64rem;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--safe-2);
}
.frame__title {
	margin: 0;
	font-size: 1.08rem;
	font-weight: 700;
	font-stretch: 92%;
	line-height: 1.25;
	text-wrap: pretty;
}
.frame__ex {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	font-size: 0.9rem;
	line-height: 1.5;
	color: var(--muted);
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}
.frame__meta {
	margin-top: auto;
	padding-top: 6px;
	font-family: var(--f-mono);
	font-size: 0.64rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--dim);
}

/* grease-pencil loop drawn on hover */
.grease {
	position: absolute;
	top: -9px;
	left: -11px;
	width: calc(100% + 22px);
	height: auto;
	aspect-ratio: 300 / 214;
	overflow: visible;
	pointer-events: none;
}
.grease path {
	fill: none;
	stroke: var(--safe);
	stroke-width: 3;
	stroke-linecap: round;
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	opacity: 0;
	filter: drop-shadow(0 0 4px rgba(255, 61, 139, 0.6));
	transition: stroke-dashoffset 0.6s cubic-bezier(0.4, 0.1, 0.2, 1), opacity 0.15s;
}
.frame__link:hover .grease path,
.frame__link:focus-visible .grease path { stroke-dashoffset: 0; opacity: 1; }
.frame__link:hover .frame__img img { filter: saturate(1.1) brightness(1.06); transform: scale(1.04); }
.frame__link:hover .frame__title { color: #fff; }

/* full contact sheet on listing pages */
.sheet {
	margin-bottom: 40px;
	padding: 34px 14px;
	border-radius: 18px;
	background:
		var(--sprocket) repeat-x 0 9px / 22px 14px,
		var(--sprocket) repeat-x 0 calc(100% - 9px) / 22px 14px,
		var(--film);
}
.sheet__grid { display: grid; gap: 24px 14px; }
@media (min-width: 560px) { .sheet__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .sheet { padding: 38px 20px; } .sheet__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 16px; } }

/* ==========================================================================
   Call to action
   ========================================================================== */
.cta { padding-block: clamp(40px, 6vw, 72px); }
.cta__panel {
	display: grid;
	gap: 22px;
	align-items: center;
	padding: clamp(24px, 5vw, 48px);
	border: 1px solid rgba(255, 61, 139, 0.32);
	border-radius: 26px;
	background: radial-gradient(90% 140% at 100% 0%, rgba(255, 61, 139, 0.3), transparent 55%), var(--panel-b);
}
@media (min-width: 860px) { .cta__panel { grid-template-columns: 1fr auto; gap: 40px; } }
.cta__title {
	margin: 0 0 10px;
	font-size: clamp(2rem, 5vw, 3.2rem);
	font-weight: 800;
	font-stretch: 78%;
	line-height: 1;
}
.cta__copy p { margin: 0; max-width: 46ch; color: var(--muted); }
.cta__copy .kicker { margin-bottom: 14px; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { margin-top: 32px; background: var(--well-3); }
.film-edge {
	overflow: hidden;
	padding: 28px 0 10px;
	background: var(--sprocket) repeat-x 0 7px / 22px 14px, var(--film);
	font-family: var(--f-mono);
	font-size: 0.68rem;
	letter-spacing: 0.24em;
	color: rgba(255, 61, 139, 0.6);
	white-space: nowrap;
}
.film-edge span { display: inline-block; padding-left: 16px; }
.site-footer__inner {
	display: grid;
	gap: 28px;
	padding-block: 44px 30px;
}
@media (min-width: 860px) {
	.site-footer__inner { grid-template-columns: 1.1fr 2fr auto; align-items: start; }
}
.site-footer__brand p { max-width: 34ch; margin: 14px 0 0; font-size: 0.95rem; color: var(--muted); }
.footer-menu {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.footer-menu a { color: var(--text); font-weight: 600; text-decoration: none; }
.footer-menu a:hover { color: var(--safe-2); }
.site-footer__rss {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border: 1px solid var(--line-2);
	border-radius: 50%;
	color: var(--muted);
}
.site-footer__rss:hover { border-color: var(--safe); color: var(--safe-2); }
.site-footer__base {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px 20px;
	padding-block: 18px 30px;
	border-top: 1px solid var(--line);
	font-size: 0.86rem;
	color: var(--dim);
}
.site-footer__base p { margin: 0; }
.site-footer__base a { color: var(--muted); text-decoration: none; }
.site-footer__stamp { font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; }

/* ==========================================================================
   Articles & pages — the developed print
   ========================================================================== */
.entry-hero {
	position: relative;
	padding: calc(30px + var(--header-h)) 0 112px;
	overflow: hidden;
}
@media (min-width: 800px) { .entry-hero { padding: calc(52px + var(--header-h)) 0 144px; } }
.entry-hero .wrap { position: relative; }

.crumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 22px;
	padding: 0;
	list-style: none;
	font-family: var(--f-mono);
	font-size: 0.7rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--dim);
}
.crumbs li + li::before { content: "/"; margin-right: 6px; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--safe-2); }

.entry-cat {
	display: inline-block;
	margin-bottom: 16px;
	padding: 5px 10px;
	border-radius: 6px;
	background: var(--safe);
	color: var(--safe-ink);
	font-family: var(--f-mono);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	text-decoration: none;
}
.entry-title {
	margin: 0 0 18px;
	font-size: clamp(2.2rem, 6.4vw, 4.1rem);
	font-weight: 800;
	font-stretch: 78%;
	line-height: 0.98;
	letter-spacing: -0.01em;
}
.entry-dek {
	max-width: 56ch;
	margin: 0 0 22px;
	font-size: clamp(1.08rem, 2.2vw, 1.28rem);
	line-height: 1.5;
	color: var(--muted);
}
.entry-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	margin: 0;
	font-family: var(--f-mono);
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--dim);
}
.entry-meta span:not(:last-child)::after {
	content: "";
	display: inline-block;
	width: 5px;
	height: 5px;
	margin-left: 12px;
	border-radius: 50%;
	background: var(--safe);
	vertical-align: 2px;
}
.entry-hero--page { padding-bottom: 100px; }

.print-wrap { position: relative; margin-top: -84px; padding-inline: 8px; }
@media (min-width: 800px) { .print-wrap { margin-top: -104px; padding-inline: 16px; } }
.print {
	position: relative;
	max-width: 820px;
	margin: 0 auto;
	padding: clamp(26px, 6vw, 66px) clamp(20px, 6vw, 70px) clamp(24px, 5vw, 46px);
	border-radius: 3px;
	background: var(--paper);
	color: var(--paper-text);
	box-shadow:
		inset 0 0 0 9px var(--paper-edge),
		inset 0 0 0 10px rgba(0, 0, 0, 0.07),
		0 0 0 1px rgba(0, 0, 0, 0.45),
		0 44px 90px -34px rgba(0, 0, 0, 0.95);
}
.print__photo { margin: 0 0 30px; }
.print__photo img { display: block; width: 100%; height: auto; border-radius: 3px; }

.toc {
	margin: 0 0 34px;
	padding: 18px 20px 18px;
	border: 1px solid #e2d5c7;
	border-radius: 14px;
	background: #efe7dc;
}
.toc__label {
	margin: 0 0 10px;
	font-family: var(--f-mono);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--safe-deep);
}
.toc ol { margin: 0; padding-left: 1.4em; }
.toc li { margin: 0.35em 0; }
.toc li::marker { font-family: var(--f-mono); font-size: 0.8em; color: var(--paper-muted); }
.toc a { color: var(--paper-ink); font-weight: 600; text-decoration: none; }
.toc a:hover { color: var(--safe-deep); text-decoration: underline; }

.print__foot {
	display: grid;
	gap: 18px;
	margin-top: 40px;
	padding-top: 22px;
	border-top: 1px dashed var(--paper-line);
}
.print__stamp {
	margin: 0;
	font-family: var(--f-mono);
	font-size: 0.66rem;
	letter-spacing: 0.22em;
	text-align: right;
	color: #a9969f;
}
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tags a {
	display: inline-block;
	padding: 5px 11px;
	border: 1px solid var(--paper-line);
	border-radius: 999px;
	font-family: var(--f-mono);
	font-size: 0.72rem;
	color: var(--paper-muted);
	text-decoration: none;
}
.tags a::before { content: "#"; }
.tags a:hover { border-color: var(--safe-deep); color: var(--safe-deep); }

.share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.share__label {
	margin-right: 4px;
	font-family: var(--f-mono);
	font-size: 0.68rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--paper-muted);
}
.print .chip { border-color: #d8cabd; background: #fffdf9; color: var(--paper-ink); }
.print .chip:hover { border-color: var(--safe-deep); color: var(--safe-deep); }
.print .chip.is-done { background: var(--safe-deep); border-color: var(--safe-deep); color: #fff; }

/* prose on paper */
.prose { font-size: 1.1rem; line-height: 1.75; color: var(--paper-text); overflow-wrap: break-word; }
.prose > :first-child { margin-top: 0; }
.prose p { margin: 0 0 1.15em; }
.prose h2,
.prose h3,
.prose h4 { color: var(--paper-ink); scroll-margin-top: calc(var(--header-h) + 24px); }
.prose h2 {
	margin: 2em 0 0.6em;
	font-size: clamp(1.6rem, 3.8vw, 2.1rem);
	font-weight: 780;
	font-stretch: 82%;
	line-height: 1.1;
}
.prose h3 { margin: 1.7em 0 0.5em; font-size: 1.32rem; font-weight: 730; line-height: 1.25; }
.prose h4 { margin: 1.5em 0 0.4em; font-size: 1.1rem; font-weight: 720; }
.prose a {
	color: var(--safe-deep);
	text-decoration: underline;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 3px;
}
.prose a:hover { color: #8e0f42; background: rgba(255, 61, 139, 0.1); }
.prose strong { color: var(--paper-ink); font-weight: 700; }
.prose ul,
.prose ol { margin: 0 0 1.2em; padding-left: 1.35em; }
.prose li { margin: 0.4em 0; padding-left: 0.2em; }
.prose li::marker { color: var(--safe-deep); }
.prose ol > li::marker { font-family: var(--f-mono); font-weight: 700; font-size: 0.88em; }
.prose blockquote {
	margin: 1.6em 0;
	padding: 4px 0 4px 20px;
	border-left: 3px solid var(--safe);
	font-size: 1.12em;
	color: var(--paper-ink);
}
.prose blockquote p:last-child { margin-bottom: 0; }
.prose figure { margin: 1.8em 0; }
.prose img { border-radius: 4px; }
.prose figcaption,
.prose .wp-element-caption {
	margin-top: 8px;
	font-family: var(--f-mono);
	font-size: 0.76rem;
	line-height: 1.5;
	color: var(--paper-muted);
}
.prose hr,
.prose .wp-block-separator {
	height: 1px;
	margin: 2.4em 0;
	border: 0;
	background: repeating-linear-gradient(90deg, var(--paper-line) 0 6px, transparent 6px 12px);
}
.prose table { width: 100%; margin: 1.6em 0; border-collapse: collapse; font-size: 0.95rem; }
.prose .wp-block-table { overflow-x: auto; margin: 1.6em 0; }
.prose .wp-block-table table { margin: 0; }
.prose th {
	padding: 10px;
	border-bottom: 2px solid var(--paper-ink);
	font-family: var(--f-mono);
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-align: left;
	text-transform: uppercase;
	color: var(--paper-ink);
}
.prose td { padding: 10px; border-bottom: 1px solid var(--paper-line); vertical-align: top; }
.prose code { padding: 0.12em 0.35em; border-radius: 4px; background: #ebe2d6; font-family: var(--f-mono); font-size: 0.86em; }
.prose pre { margin: 1.6em 0; padding: 16px; border-radius: 10px; background: #1d1519; color: #f5ecf0; overflow-x: auto; }
.prose pre code { padding: 0; background: none; color: inherit; }
.prose .wp-block-button__link,
.prose .wp-element-button {
	display: inline-block;
	padding: 0.8em 1.4em;
	border-radius: 999px;
	background: var(--safe-deep);
	color: #fff;
	font-weight: 700;
	text-decoration: none;
}
.prose .wp-block-button__link:hover { background: #9d1049; color: #fff; }
.prose .alignwide { margin-inline: calc(-1 * clamp(0px, 3vw, 40px)); }
.prose .alignfull { margin-inline: calc(-1 * clamp(20px, 6vw, 70px)); max-width: none; }
.prose .aligncenter { margin-inline: auto; text-align: center; }
@media (min-width: 700px) {
	.prose .alignleft { float: left; margin: 0.3em 1.4em 1em 0; max-width: 50%; }
	.prose .alignright { float: right; margin: 0.3em 0 1em 1.4em; max-width: 50%; }
}
.prose .wp-block-details { margin: 1em 0; padding: 12px 16px; border: 1px solid var(--paper-line); border-radius: 12px; }
.prose .wp-block-details summary { font-weight: 700; cursor: pointer; color: var(--paper-ink); }
.prose .rank-math-question { margin: 1.3em 0 0.3em; font-size: 1.15rem; font-weight: 720; color: var(--paper-ink); }
.prose .has-background { padding: 1em 1.2em; border-radius: 10px; }
.prose .has-large-font-size { font-size: clamp(1.2rem, 2.4vw, 1.38rem); line-height: 1.55; color: var(--paper-ink); }
.prose .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin: 1.4em 0 1.8em; }

/* forms on paper (contact page plugins) */
.print label { display: block; margin-bottom: 6px; font-weight: 650; color: var(--paper-ink); }
.print input[type="text"],
.print input[type="email"],
.print input[type="url"],
.print input[type="tel"],
.print input[type="number"],
.print input[type="search"],
.print select,
.print textarea {
	width: 100%;
	max-width: 100%;
	padding: 12px 14px;
	border: 1px solid #d4c6b9;
	border-radius: 10px;
	background: #fffdf9;
	color: var(--paper-ink);
	font: 400 1rem var(--f-sans);
}
.print textarea { min-height: 150px; }
.print input:focus,
.print select:focus,
.print textarea:focus { outline: none; border-color: var(--safe-deep); box-shadow: 0 0 0 3px rgba(194, 24, 91, 0.16); }
.print input[type="submit"],
.print button[type="submit"]:not(.btn) {
	padding: 13px 24px;
	border: 0;
	border-radius: 999px;
	background: var(--safe-deep);
	color: #fff;
	font: 700 1rem var(--f-sans);
	cursor: pointer;
}
.print input[type="submit"]:hover,
.print button[type="submit"]:not(.btn):hover { background: #9d1049; }

.page-links { margin-top: 24px; font-family: var(--f-mono); font-size: 0.85rem; }

/* ==========================================================================
   Listing pages
   ========================================================================== */
.listing-hero { position: relative; padding: calc(36px + var(--header-h)) 0 30px; overflow: hidden; }
@media (min-width: 800px) { .listing-hero { padding: calc(60px + var(--header-h)) 0 42px; } }
.listing-hero .wrap { position: relative; }
.listing-hero__title {
	margin: 0 0 14px;
	font-size: clamp(2.7rem, 9vw, 5.2rem);
	font-weight: 800;
	font-stretch: 76%;
	line-height: 0.95;
}
.listing-hero__desc { max-width: 60ch; margin: 0; font-size: 1.1rem; color: var(--muted); }
.listing-hero__search { max-width: 620px; margin-top: 22px; }
.chips {
	display: flex;
	gap: 8px;
	margin: 24px -16px 0;
	padding: 2px 16px 6px;
	overflow-x: auto;
	scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }
@media (min-width: 700px) { .chips { flex-wrap: wrap; margin-inline: 0; padding-inline: 0; overflow: visible; } }

.pagination { margin: 0 0 56px; }
.pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 44px;
	height: 44px;
	padding: 0 10px;
	border: 1px solid var(--line-2);
	border-radius: 10px;
	color: var(--text);
	font-family: var(--f-mono);
	font-size: 0.85rem;
	text-decoration: none;
}
.pagination .page-numbers.current { background: var(--safe); border-color: var(--safe); color: var(--safe-ink); }
.pagination .page-numbers.dots { border: 0; }
.pagination a.page-numbers:hover { border-color: var(--safe); }
.pagination .icon { width: 18px; height: 18px; }

.empty {
	margin-bottom: 48px;
	padding: 56px 20px;
	border: 1px dashed var(--line-2);
	border-radius: 18px;
	text-align: center;
}
.empty__title { margin: 0 0 8px; font-size: 1.6rem; font-weight: 750; font-stretch: 84%; }
.empty p { color: var(--muted); }

/* ==========================================================================
   404
   ========================================================================== */
.lost { position: relative; padding: calc(56px + var(--header-h)) 0 90px; overflow: hidden; text-align: center; }
.lost__inner { position: relative; }
.lost__frame {
	display: grid;
	place-items: center;
	width: 190px;
	margin: 0 auto 30px;
	aspect-ratio: 3 / 2;
	border-radius: 8px;
	background: radial-gradient(circle, #fff 0%, #ffe6f0 38%, #ff93c0 82%);
	box-shadow: 0 0 90px rgba(255, 61, 139, 0.55), inset 0 0 30px rgba(255, 255, 255, 0.7);
	transform: rotate(-2deg);
}
.lost__frame span { font-size: 3.2rem; font-weight: 800; font-stretch: 75%; color: rgba(255, 255, 255, 0.75); }
.lost__title { margin: 0 0 14px; font-size: clamp(2.3rem, 7vw, 4rem); font-weight: 800; font-stretch: 78%; line-height: 1; }
.lost__text { max-width: 46ch; margin: 0 auto 26px; color: var(--muted); }
.lost__search { max-width: 540px; margin: 0 auto 20px; }
.lost__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

/* ==========================================================================
   Comments
   ========================================================================== */
.comments-wrap { padding-block: 32px 48px; }
.comments__title { font-size: 1.6rem; font-weight: 760; font-stretch: 84%; }
.comments__list { margin: 0 0 32px; padding: 0; list-style: none; }
.comments__list .comment-body { padding: 18px 0; border-bottom: 1px solid var(--line); }
.comments__list .children { list-style: none; padding-left: 24px; }
.comment-meta { font-size: 0.85rem; color: var(--dim); }
.comment-meta a { color: var(--muted); text-decoration: none; }
.comment-meta img { float: left; margin-right: 12px; border-radius: 50%; }
.comment-form label { display: block; margin-bottom: 6px; font-weight: 600; }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--line-2);
	border-radius: 12px;
	background: var(--well);
	color: var(--text);
	font: 400 1rem var(--f-sans);
}

/* ==========================================================================
   Ad slots
   ========================================================================== */
.ad-slot { margin-block: 28px; text-align: center; }
.ad-slot__label {
	display: block;
	margin-bottom: 8px;
	font-family: var(--f-mono);
	font-size: 0.62rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--dim);
}
.ad-slot--inline { margin: 2em 0; }
.print .ad-slot__label { color: #a9969f; }


/* ==========================================================================
   On-site results — a marked-up contact sheet
   ========================================================================== */
.easel__jump {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 12px 0 2px;
	padding: 12px 16px;
	border: 1px dashed rgba(255, 61, 139, 0.55);
	border-radius: 14px;
	background: rgba(255, 61, 139, 0.08);
	color: var(--pink-text);
	font-weight: 700;
	text-decoration: none;
}
.easel__jump::after { content: "↓"; font-family: var(--f-mono); }
.easel__jump:hover { background: rgba(255, 61, 139, 0.16); }
.easel__jump[hidden] { display: none; }

.results {
	position: relative;
	padding-block: 12px clamp(40px, 6vw, 72px);
	scroll-margin-top: calc(var(--header-h) + 12px);
}
.results:focus { outline: none; }
.results[hidden] { display: none; }

.results__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 18px 32px;
	padding-top: 28px;
	border-top: 1px dashed var(--line-2);
	margin-bottom: 22px;
}
.results__title {
	margin: 0;
	font-size: clamp(1.9rem, 4.6vw, 2.9rem);
	font-weight: 800;
	font-stretch: 78%;
	line-height: 1;
}

.looks { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 0; }
.looks__label {
	font-family: var(--f-mono);
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--dim);
}
.looks__tag {
	padding: 4px 11px;
	border: 1px dashed var(--line-2);
	border-radius: 999px;
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--muted);
}
.looks__tag.is-main {
	padding: 0 6px;
	border: 0;
	font-family: var(--f-hand);
	font-size: 1.55rem;
	font-weight: 600;
	line-height: 1.1;
	color: var(--safe-2);
	transform: rotate(-2deg);
}

.tally { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tally li {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 92px;
	padding: 10px 14px;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: var(--ink-2);
	font-family: var(--f-mono);
	font-size: 0.66rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--dim);
}
.tally b {
	font-family: var(--f-sans);
	font-size: 1.7rem;
	font-weight: 800;
	font-stretch: 78%;
	letter-spacing: 0;
	line-height: 1;
	color: var(--text);
}
.tally li:first-child b { color: var(--safe-2); }

.rnotes { display: grid; gap: 8px; margin: 0 0 22px; padding: 0; list-style: none; }
@media (min-width: 900px) { .rnotes { grid-template-columns: repeat(2, 1fr); } }
.rnote {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 16px;
	border: 1px solid var(--line);
	border-left: 3px solid var(--safe);
	border-radius: 12px;
	background: var(--ink-2);
}
.rnote p { margin: 0; font-size: 0.95rem; line-height: 1.5; color: var(--muted); }
.rnote__icon { flex: 0 0 auto; color: var(--safe-2); }
.rnote__icon .icon { width: 20px; height: 20px; }
.rnote--eye { border-left-color: var(--dim); }

/* closest match */
.best { margin: 0 0 30px; }
.best__link {
	position: relative;
	display: grid;
	gap: 18px;
	padding: 16px;
	border: 1px solid rgba(255, 61, 139, 0.4);
	border-radius: 22px;
	background:
		radial-gradient(90% 120% at 0% 0%, rgba(255, 61, 139, 0.16), transparent 60%),
		var(--ink-2);
	color: var(--text);
	text-decoration: none;
	transition: border-color 0.2s, box-shadow 0.2s;
}
.best__link:hover { border-color: var(--safe); box-shadow: var(--glow); }
@media (min-width: 760px) {
	.best__link { grid-template-columns: minmax(0, 340px) 1fr; gap: 30px; padding: 20px; align-items: center; }
}
.best__img { position: relative; display: block; padding: 10px; }
.best__img .rthumb {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	border-radius: 10px;
}
.best__img .rthumb img { object-fit: contain; background: var(--well); }
.grease--best {
	top: -4px;
	left: -6px;
	width: calc(100% + 12px);
	height: calc(100% + 8px);
	aspect-ratio: auto;
}
.grease--best path { opacity: 1; animation: draw 1.1s 0.25s cubic-bezier(0.4, 0.1, 0.2, 1) forwards; }
.best__body { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.best__label .scribble { display: inline-block; font-size: 1.9rem; transform: rotate(-3deg); }
.best__badges { display: flex; flex-wrap: wrap; gap: 6px; }
.best__title {
	font-size: clamp(1.25rem, 2.6vw, 1.6rem);
	font-weight: 750;
	font-stretch: 90%;
	line-height: 1.2;
	overflow-wrap: anywhere;
}
.best__site {
	display: flex;
	flex-wrap: wrap;
	gap: 0 2px;
	font-family: var(--f-mono);
	font-size: 0.8rem;
	color: var(--safe-2);
	overflow-wrap: anywhere;
}
.best__path { color: var(--dim); }
.best__price { font-weight: 750; }
.best__why { font-size: 0.95rem; color: var(--muted); }
.best__cta { margin-top: 6px; pointer-events: none; }

.badge {
	display: inline-block;
	padding: 3px 8px;
	border: 1px solid var(--safe);
	border-radius: 6px;
	font-family: var(--f-mono);
	font-size: 0.64rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--safe-2);
}
.badge--exact { background: var(--safe); color: var(--safe-ink); }
.badge--similar { border-color: var(--line-2); color: var(--muted); }
.kind {
	display: inline-block;
	padding: 3px 8px;
	border-radius: 6px;
	background: var(--tint-3);
	font-family: var(--f-mono);
	font-size: 0.62rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
	white-space: nowrap;
}
.kind--stock { background: rgba(255, 176, 32, 0.16); color: #d98a00; }
.kind--social { background: rgba(80, 140, 255, 0.15); color: #5b8def; }
.kind--shop { background: rgba(40, 190, 120, 0.15); color: #1f9a62; }
.kind--news { background: rgba(160, 120, 255, 0.16); color: #8b6be8; }

mark {
	padding: 0 1px;
	background: linear-gradient(transparent 52%, var(--mark) 52%);
	color: inherit;
}

/* filters */
.rfilters { display: grid; gap: 10px; margin-bottom: 26px; }
.rfilters__row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 -16px;
	padding: 2px 16px 4px;
	overflow-x: auto;
	scrollbar-width: none;
}
.rfilters__row::-webkit-scrollbar { display: none; }
@media (min-width: 700px) { .rfilters__row { flex-wrap: wrap; margin: 0; padding: 0; overflow: visible; } }
.rfilters__label {
	margin-right: 2px;
	font-family: var(--f-mono);
	font-size: 0.68rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--dim);
	white-space: nowrap;
}
.chip--kind.is-active { background: var(--text); border-color: var(--text); color: var(--ink); }

/* groups */
.rgroup { margin-bottom: 34px; }
.rgroup[hidden] { display: none; }
.rgroup__head { margin-bottom: 14px; }
.rgroup__head h3 {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 4px;
	font-size: 1.45rem;
	font-weight: 760;
	font-stretch: 84%;
}
.rgroup__n {
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--safe);
	font-family: var(--f-mono);
	font-size: 0.72rem;
	font-weight: 700;
	color: var(--safe-ink);
}
.rgroup--similar .rgroup__n { background: var(--tint-3); color: var(--muted); }
.rgroup__head p { margin: 0; font-size: 0.93rem; color: var(--muted); }

.rsites { display: grid; gap: 12px; }
@media (min-width: 820px) { .rsites { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.rsite {
	border: 1px solid var(--line);
	border-radius: 16px;
	background: var(--ink-2);
	overflow: hidden;
}
.rsite[hidden] { display: none; }
.rsite__head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	border-bottom: 1px solid var(--line);
}
.rsite__initial {
	display: grid;
	flex: 0 0 28px;
	place-items: center;
	height: 28px;
	border-radius: 8px;
	background: var(--tint-3);
	font-weight: 800;
	font-size: 0.85rem;
}
.rsite__name { min-width: 0; overflow: hidden; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.rsite__count {
	margin-left: auto;
	font-family: var(--f-mono);
	font-size: 0.66rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--dim);
	white-space: nowrap;
}
.rsite__list { margin: 0; padding: 4px; list-style: none; }
.rrow.is-extra { display: none; }
.rsite.is-open .rrow.is-extra { display: block; }
.rrow a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 10px;
	border-radius: 10px;
	color: var(--text);
	text-decoration: none;
	transition: background-color 0.15s;
}
.rrow a:hover { background: var(--tint-2); }
.rrow a > .icon { width: 16px; height: 16px; margin-left: auto; color: var(--dim); flex: 0 0 auto; }
.rrow.is-best a { background: rgba(255, 61, 139, 0.1); box-shadow: inset 3px 0 0 var(--safe); }
.rrow__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rrow__title {
	display: -webkit-box;
	overflow: hidden;
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.3;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow-wrap: anywhere;
}
.rrow__path {
	overflow: hidden;
	font-family: var(--f-mono);
	font-size: 0.7rem;
	color: var(--dim);
	text-overflow: ellipsis;
	white-space: nowrap;
}
.rrow__price { font-size: 0.85rem; font-weight: 700; color: var(--safe-2); }
.rsite__more {
	display: block;
	width: calc(100% - 8px);
	margin: 0 4px 4px;
	padding: 9px;
	border: 0;
	border-radius: 10px;
	background: var(--tint);
	color: var(--safe-2);
	font: 650 0.88rem var(--f-sans);
	cursor: pointer;
}
.rsite__more:hover { background: var(--tint-2); }

.rthumb {
	position: relative;
	display: grid;
	flex: 0 0 56px;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 9px;
	background: var(--well);
	overflow: hidden;
	color: var(--dim);
}
.rthumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rthumb--empty .icon { width: 22px; height: 22px; }
.rthumb--empty small {
	display: block;
	margin-top: 4px;
	font-family: var(--f-mono);
	font-size: 0.56rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.best__img .rthumb--empty { display: flex; flex-direction: column; align-items: center; justify-content: center; }

.rtiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 1000px) { .rtiles { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); } }
.rtile[hidden] { display: none; }
.rtile a {
	display: flex;
	flex-direction: column;
	gap: 6px;
	height: 100%;
	padding: 6px 6px 10px;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: var(--ink-2);
	color: var(--text);
	text-decoration: none;
	transition: border-color 0.15s;
}
.rtile a:hover { border-color: var(--safe); }
.rtile .rthumb { flex: none; width: 100%; height: auto; aspect-ratio: 1; border-radius: 8px; }
.rtile__site {
	overflow: hidden;
	padding: 0 4px;
	font-family: var(--f-mono);
	font-size: 0.68rem;
	color: var(--safe-2);
	text-overflow: ellipsis;
	white-space: nowrap;
}
.rtile__title {
	display: -webkit-box;
	overflow: hidden;
	padding: 0 4px;
	font-size: 0.82rem;
	line-height: 1.3;
	color: var(--muted);
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.rempty { padding: 30px; border: 1px dashed var(--line-2); border-radius: 14px; text-align: center; color: var(--muted); }

.rmore {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px 24px;
	margin-top: 10px;
	padding: 20px 22px;
	border: 1px dashed var(--line-2);
	border-radius: 18px;
}
.rmore p { margin: 0; color: var(--muted); }
.rmore__title { margin-bottom: 4px !important; font-weight: 750; color: var(--text) !important; }
.rmore .btn .icon { width: 17px; height: 17px; }

/* loading: film frames being scanned */
.rscan__text { margin: 10px 0 0; color: var(--muted); }
.rscan {
	padding: 30px 14px 16px;
	border-radius: 18px;
	background:
		var(--sprocket) repeat-x 0 8px / 22px 14px,
		var(--film);
}
.rscan__frames { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.rscan__frame {
	position: relative;
	aspect-ratio: 3 / 2;
	border-radius: 6px;
	background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 4px), #1b1418;
	overflow: hidden;
}
.rscan__beam {
	position: absolute;
	left: 0;
	right: 0;
	top: -45%;
	height: 45%;
	background: linear-gradient(to bottom, transparent, rgba(255, 61, 139, 0.18) 70%, rgba(255, 190, 215, 0.9) 97%, transparent);
	animation: scan 2.4s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
	animation-delay: calc(var(--i, 0) * 0.28s);
}
.rscan__no {
	position: absolute;
	top: 6px;
	left: 7px;
	font-family: var(--f-mono);
	font-size: 0.6rem;
	letter-spacing: 0.1em;
	color: rgba(255, 211, 228, 0.55);
}
.rscan__readout {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 14px 4px 0;
	font-family: var(--f-mono);
	font-size: 0.72rem;
	letter-spacing: 0.18em;
	color: #ffd3e4;
}
.rscan__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--safe);
	box-shadow: 0 0 8px 2px rgba(255, 61, 139, 0.7);
	animation: blink 1s steps(1) infinite;
}
.rscan__dots i { font-style: normal; animation: blink 1.2s steps(1) infinite; }
.rscan__dots i:nth-child(2) { animation-delay: 0.2s; }
.rscan__dots i:nth-child(3) { animation-delay: 0.4s; }

@keyframes draw { to { stroke-dashoffset: 0; } }

/* ==========================================================================
   Motion
   ========================================================================== */
@keyframes safelight {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.45; }
}
@keyframes develop {
	0% { opacity: 0.2; filter: brightness(2.7) contrast(0.3) saturate(0) blur(2px); }
	45% { opacity: 0.85; filter: brightness(1.5) contrast(0.7) saturate(0.35) blur(0.6px); }
	100% { opacity: 1; filter: none; }
}
@keyframes scan {
	from { transform: translateY(0); }
	to { transform: translateY(440%); }
}
@keyframes blink {
	0%, 100% { opacity: 1; }
	50% { opacity: 0; }
}
@keyframes flicker {
	0%, 100% { opacity: 1; }
	47% { opacity: 0.82; }
	49% { opacity: 1; }
	73% { opacity: 0.9; }
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}