/* Thiệp Nhanh — one stylesheet, one set of tokens.
   Dark "desk at night" is the default; light is "paper on a table". */

:root {
	--bg: #1c1916;
	--bg-raised: #241f1a;
	--surface: #2a241e;
	--surface-2: #332c25;
	--paper: #f3ead8;
	--paper-2: #e8dcc5;
	--paper-ink: #1f1a15;
	--paper-soft: #5a4f44;
	--text: #f4efe6;
	--text-soft: #bfb3a1;
	--line: #463d34;
	--line-strong: #6c6052;
	--accent: #d7b56a;
	--accent-ink: #1a1612;
	--accent-hover: #e4c47d;
	--brass: #c9a65a;
	--green: #1f4a3a;
	--seal: #8c2f24;
	--seal-2: #a63a2d;
	--danger: #f0a08e;
	--danger-bg: #3a201b;
	--ok: #9fd3b5;
	--ok-bg: #1c2f26;
	--focus: #e8c77a;
	--shadow-ink: #0d0b09;
	--shadow-paper: 0 1px 0 rgb(0 0 0 / 0.3), 5px 6px 0 var(--shadow-ink);
	--shadow-soft: 0 10px 30px rgb(0 0 0 / 0.35);

	--font: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", "Songti SC", "PingFang SC", "Noto Serif CJK SC", "Nirmala UI", "Noto Serif Devanagari", "Noto Sans Devanagari", "Noto Serif Bengali", "Noto Sans Bengali", "Noto Naskh Arabic", "Noto Nastaliq Urdu", Georgia, "Noto Serif", "Times New Roman", serif;
	--fs-xs: 0.8rem;
	--fs-sm: 0.92rem;
	--fs-md: 1.05rem;
	--fs-lg: 1.25rem;
	--fs-xl: clamp(1.45rem, 2.6vw, 1.85rem);
	--fs-2xl: clamp(1.9rem, 4.6vw, 3rem);

	--s1: 0.25rem;
	--s2: 0.5rem;
	--s3: 0.75rem;
	--s4: 1rem;
	--s5: 1.5rem;
	--s6: 2rem;
	--s7: 3rem;
	--s8: 4.5rem;

	--radius: 3px;
	--radius-lg: 6px;
	--tap: 44px;
	--measure: 68ch;
	--wrap: 76rem;
	--ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	color-scheme: dark;
}

html[data-theme="light"] {
	--bg: #efe6d4;
	--bg-raised: #f6efe2;
	--surface: #fffaf3;
	--surface-2: #f6eee0;
	--paper: #fffdf8;
	--paper-2: #f1e8d8;
	--text: #1a1612;
	--text-soft: #5a4f44;
	--line: #d3c6b2;
	--line-strong: #8f8170;
	--accent: #1f4a3a;
	--accent-ink: #fffaf3;
	--accent-hover: #285c48;
	--brass: #7a5c26;
	--danger: #9b2c1f;
	--danger-bg: #fbe9e4;
	--ok: #1f5a3f;
	--ok-bg: #e5f1e9;
	--focus: #7a5c26;
	--shadow-ink: #d6c9b3;
	--shadow-paper: 0 1px 0 rgb(60 40 20 / 0.12), 5px 6px 0 var(--shadow-ink);
	--shadow-soft: 0 10px 30px rgb(60 40 20 / 0.16);
	color-scheme: light;
}

/* ---------- Base ---------- */

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

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

body {
	margin: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background: var(--bg);
	color: var(--text);
	font-family: var(--font);
	font-size: var(--fs-md);
	line-height: 1.55;
	text-rendering: optimizeLegibility;
}

main { flex: 1 0 auto; }

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

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }

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

h1, h2, h3 { line-height: 1.18; font-weight: 650; text-wrap: balance; }
h1 { font-size: var(--fs-2xl); margin: 0.2rem 0 var(--s3); letter-spacing: -0.01em; }
h2 { font-size: var(--fs-xl); margin: 0 0 var(--s3); }
h3 { font-size: var(--fs-lg); margin: var(--s4) 0 var(--s2); }
p { margin: 0 0 var(--s3); }
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] .mark, html[dir="rtl"] .eyebrow, html[dir="rtl"] .sheet-kicker { letter-spacing: 0; }

.sr-only {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;
}

.icon { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; }

.skip {
	position: absolute;
	inset-inline-start: var(--s4);
	top: -5rem;
	z-index: 60;
	background: var(--paper);
	color: var(--paper-ink);
	padding: var(--s2) var(--s3);
	border-radius: var(--radius);
}
.skip:focus { top: var(--s3); }

.wrap { width: min(var(--wrap), calc(100% - 2rem)); margin-inline: auto; }

.eyebrow, .sheet-kicker {
	margin: 0 0 var(--s1);
	color: var(--brass);
	font-size: var(--fs-xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 650;
}
.lede { font-size: 1.12rem; max-width: 46rem; color: var(--text); }
.hint, figcaption, .soft { color: var(--text-soft); font-size: var(--fs-sm); }
.mono { font-variant-numeric: tabular-nums; }
.url-ltr, input[dir="ltr"] { direction: ltr; unicode-bidi: isolate; }
input[dir="auto"], textarea[dir="auto"] { unicode-bidi: plaintext; text-align: start; }
.url-ltr { overflow-wrap: anywhere; }
html[dir="rtl"] .url-ltr { text-align: end; }

/* ---------- Header ---------- */

.top {
	position: relative;
	z-index: 10;
	border-bottom: 1px solid var(--line);
	background: var(--bg);
}
.top-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s2) var(--s5);
	min-height: 4rem;
	padding-block: var(--s2);
}
.mark {
	display: inline-flex;
	align-items: center;
	gap: var(--s2);
	min-height: var(--tap);
	color: var(--text);
	text-decoration: none;
	font-weight: 700;
	font-size: 1.12rem;
	letter-spacing: 0.04em;
}
.mark svg { width: 1.9rem; height: 1.9rem; }
.nav-main {
	display: flex;
	gap: var(--s1);
	align-items: center;
	margin-inline-end: auto;
}
.nav-main a, .nav-main button.linkish {
	display: inline-flex;
	align-items: center;
	min-height: var(--tap);
	padding: 0 var(--s3);
	border-radius: var(--radius);
	text-decoration: none;
	color: var(--text);
	white-space: nowrap;
}
.nav-main a:hover, .nav-main button.linkish:hover { background: var(--surface); }
.nav-main a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--brass); }
.nav-main .nav-quick { color: var(--brass); font-weight: 650; }
.logout { margin: 0; display: inline-flex; }
.top-tools { display: flex; align-items: center; gap: var(--s2); }
.theme-toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--s2);
	min-height: var(--tap);
	min-width: var(--tap);
	justify-content: center;
	padding: 0 var(--s3);
	background: transparent;
	color: var(--text);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	cursor: pointer;
	font: inherit;
	font-size: var(--fs-sm);
}
.theme-toggle:hover { border-color: var(--line-strong); }
.theme-toggle .icon-sun { display: none; }
html[data-theme="light"] .theme-toggle .icon-sun { display: inline; }
html[data-theme="light"] .theme-toggle .icon-moon { display: none; }
.lang { display: flex; align-items: center; gap: var(--s2); margin: 0; }
.lang label { font-size: var(--fs-sm); color: var(--text-soft); font-weight: 400; }
.lang select { width: auto; min-width: 8rem; min-height: var(--tap); padding-block: 0; }
.lang button { min-height: var(--tap); padding: 0 var(--s3); }

/* ---------- Buttons ---------- */

.button, button { font: inherit; }
.button, button, .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--s2);
	min-height: var(--tap);
	padding: 0.6rem 1.05rem;
	border: 1px solid var(--accent);
	border-radius: var(--radius);
	background: var(--accent);
	color: var(--accent-ink);
	font-weight: 650;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
	-webkit-tap-highlight-color: transparent;
}
.button:hover, button:hover, .btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.button.secondary, button.secondary {
	background: transparent;
	color: var(--text);
	border-color: var(--line-strong);
}
.button.secondary:hover, button.secondary:hover { background: var(--surface); border-color: var(--text-soft); }
button.ghost, .button.ghost {
	background: transparent;
	color: var(--text);
	border-color: transparent;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}
button.ghost:hover, .button.ghost:hover { background: var(--surface); border-color: transparent; }
button.linkish {
	min-height: var(--tap);
	padding: 0 var(--s2);
	background: transparent;
	color: inherit;
	border: 0;
	font-weight: 400;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}
button.linkish:hover { background: transparent; text-decoration-thickness: 2px; }
.btn-lg { min-height: 3.3rem; padding: 0.8rem 1.4rem; font-size: 1.1rem; }
.btn-block { width: 100%; }
button:disabled, .button[aria-disabled="true"] { opacity: 0.55; cursor: progress; }
button[aria-busy="true"] .icon { animation: spin 1s linear infinite; }

/* ---------- Forms ---------- */

label { font-weight: 650; }
.field { display: grid; gap: 0.4rem; margin-bottom: var(--s4); }
.field-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); }
input, textarea, select {
	width: 100%;
	font: inherit;
	background: var(--paper);
	color: var(--paper-ink);
	border: 1px solid var(--line-strong);
	border-radius: var(--radius);
	padding: 0.65rem 0.75rem;
	min-height: 48px;
}
input::placeholder, textarea::placeholder { color: var(--paper-soft); opacity: 1; }
input:hover, textarea:hover, select:hover { border-color: var(--text-soft); }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger); }
input[type="checkbox"], input[type="radio"] { width: 1.25rem; height: 1.25rem; min-height: 0; padding: 0; accent-color: var(--green); }
input[type="file"] { padding: 0.5rem; }
textarea { resize: vertical; min-height: 7rem; line-height: 1.5; }
textarea.compact { min-height: 4.5rem; }
.counter { font-size: var(--fs-sm); color: var(--text-soft); font-variant-numeric: tabular-nums; }
.counter.is-near { color: var(--danger); }
.check { display: flex; gap: var(--s2); align-items: center; min-height: var(--tap); }
fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s3) var(--s4); margin: 0 0 var(--s4); }
legend { font-weight: 650; padding: 0 var(--s1); }

/* Alerts: errors and confirmations that stay in the page. */
.alert, .notice {
	display: flex;
	gap: var(--s3);
	align-items: flex-start;
	margin: var(--s3) 0 var(--s4);
	padding: var(--s3) var(--s4);
	border-radius: var(--radius);
	border: 1px solid currentColor;
	border-inline-start-width: 4px;
	font-size: var(--fs-md);
}
.alert { color: var(--danger); background: var(--danger-bg); }
.notice { color: var(--ok); background: var(--ok-bg); }
.alert p, .notice p { margin: 0; color: var(--text); }
.alert .icon, .notice .icon { margin-top: 0.15em; }

/* ---------- Surfaces ---------- */

.panel {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: var(--s5);
}
.sheet-paper, .auth {
	background: var(--paper);
	color: var(--paper-ink);
	border: 1px solid var(--paper-2);
	border-radius: var(--radius);
	box-shadow: var(--shadow-paper);
	position: relative;
}
.sheet-paper::before, .auth::before {
	content: "";
	position: absolute;
	inset: 0.55rem;
	border: 1px solid var(--brass);
	opacity: 0.55;
	pointer-events: none;
}
.sheet-paper a, .auth a { color: var(--paper-ink); }
.sheet-paper .hint, .auth .hint { color: var(--paper-soft); }
.auth .alert p { color: var(--paper-ink); }

.empty {
	padding: var(--s5);
	border: 1px dashed var(--line-strong);
	border-radius: var(--radius-lg);
	color: var(--text-soft);
	text-align: center;
}

details.more { border-top: 1px solid var(--line); margin-top: var(--s4); }
details.more > summary {
	display: flex;
	align-items: center;
	gap: var(--s2);
	min-height: var(--tap);
	cursor: pointer;
	font-weight: 650;
	list-style: none;
}
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary::before {
	content: "";
	width: 0.55rem; height: 0.55rem;
	border-inline-end: 2px solid currentColor;
	border-block-end: 2px solid currentColor;
	transform: rotate(-45deg);
	transition: transform 0.15s ease;
}
html[dir="rtl"] details.more > summary::before { transform: rotate(135deg); }
details.more[open] > summary::before { transform: rotate(45deg); }
details.more > :not(summary) { margin-top: var(--s2); }

/* ---------- Page shells ---------- */

.page { padding-block: var(--s5) var(--s7); }
.prose { max-width: var(--measure); padding-block: var(--s5) var(--s7); }
.prose p, .prose li { line-height: 1.7; }
.prose h2 { margin-top: var(--s6); }
.prose h2:first-child { margin-top: 0; }
.page-head { margin-bottom: var(--s5); max-width: 52rem; }
.page-head .lede { color: var(--text-soft); }
.section { margin-block: var(--s7); }
.section-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s4); }
.section-head h2 { margin: 0; }

/* ---------- Home ---------- */

/* First viewport must paint with real content — never wait on JS/GSAP. */
.hero,
.hero h1,
.hero .lede,
.hero-actions,
.hero .eyebrow {
	opacity: 1;
	visibility: visible;
}

.hero {
	display: grid;
	gap: var(--s6);
	align-items: center;
	padding-block: var(--s6) var(--s5);
}
.hero h1 { max-width: 16ch; }
.hero .lede { color: var(--text-soft); max-width: 36rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); }
.hero-quick-note { margin-top: var(--s2); font-size: var(--fs-sm); color: var(--text-soft); }
.hero-art { display: none; }

.occasions { margin-block: var(--s5) var(--s6); }
.occasion-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr));
	gap: var(--s2);
}
.chip {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s2);
	width: 100%;
	min-height: 3.1rem;
	padding: var(--s2) var(--s3);
	background: var(--surface);
	color: var(--text);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	font-weight: 600;
	text-align: start;
	text-decoration: none;
	cursor: pointer;
}
.chip:hover { background: var(--surface-2); border-color: var(--line-strong); }
.chip .chip-count { font-size: var(--fs-xs); color: var(--text-soft); font-variant-numeric: tabular-nums; font-weight: 400; }
.chip[aria-pressed="true"], .chip[aria-current="true"] {
	background: var(--paper);
	color: var(--paper-ink);
	border-color: var(--paper);
	box-shadow: inset 0 0 0 2px var(--brass);
}
.chip[aria-pressed="true"] .chip-count, .chip[aria-current="true"] .chip-count { color: var(--paper-soft); }
.chip[aria-pressed="true"]::after, .chip[aria-current="true"]::after {
	content: "";
	flex: none;
	width: 0.45rem; height: 0.8rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	margin-inline-start: var(--s1);
}

.steps {
	list-style: none;
	counter-reset: step;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--s3);
}
.steps li {
	counter-increment: step;
	display: grid;
	grid-template-columns: 2.4rem 1fr;
	gap: var(--s3);
	align-items: start;
	padding: var(--s4);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	line-height: 1.6;
}
.steps li::before {
	content: counter(step);
	display: grid;
	place-items: center;
	width: 2.4rem; height: 2.4rem;
	border-radius: 50%;
	background: var(--paper);
	color: var(--paper-ink);
	font-weight: 700;
}
.home-notes { max-width: var(--measure); color: var(--text-soft); }
.home-notes p { line-height: 1.7; }

/* Finder: search + template grid */
.finder { display: grid; gap: var(--s3); margin-bottom: var(--s4); }
.find { display: grid; gap: var(--s1); max-width: 26rem; margin: 0; }
.find input { padding-inline-start: 2.6rem; background-repeat: no-repeat; }
.find-box { position: relative; }
.find-box .icon { position: absolute; inset-inline-start: 0.8rem; top: 50%; transform: translateY(-50%); color: var(--paper-soft); pointer-events: none; }
.find-count { margin: 0; font-size: var(--fs-sm); color: var(--text-soft); }

.grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--s4) var(--s3);
}
.tile { min-width: 0; }
.tile[hidden] { display: none; }

/* Mild CSS stagger: tiles stay fully opaque (no opacity:0 / no GSAP on home). */
@media (prefers-reduced-motion: no-preference) {
	@keyframes tile-rise {
		from { transform: translateY(10px); }
		to { transform: none; }
	}
	[data-grid] > li:nth-child(-n+12) {
		animation: tile-rise 0.45s var(--ease) both;
	}
	[data-grid] > li:nth-child(1) { animation-delay: 0ms; }
	[data-grid] > li:nth-child(2) { animation-delay: 40ms; }
	[data-grid] > li:nth-child(3) { animation-delay: 80ms; }
	[data-grid] > li:nth-child(4) { animation-delay: 120ms; }
	[data-grid] > li:nth-child(5) { animation-delay: 160ms; }
	[data-grid] > li:nth-child(6) { animation-delay: 200ms; }
	[data-grid] > li:nth-child(7) { animation-delay: 240ms; }
	[data-grid] > li:nth-child(8) { animation-delay: 280ms; }
	[data-grid] > li:nth-child(9) { animation-delay: 320ms; }
	[data-grid] > li:nth-child(10) { animation-delay: 360ms; }
	[data-grid] > li:nth-child(11) { animation-delay: 400ms; }
	[data-grid] > li:nth-child(12) { animation-delay: 440ms; }
}
.tile-link {
	display: grid;
	gap: var(--s2);
	text-decoration: none;
	color: var(--text);
	border-radius: var(--radius);
}
.tile-paper {
	position: relative;
	display: block;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--surface);
	border: 1px solid var(--line);
	transition: transform 0.2s var(--ease), border-color 0.2s var(--ease);
}
.tile-paper::after {
	content: attr(data-title);
	position: absolute;
	inset: auto 0 42% 0;
	text-align: center;
	color: var(--text-soft);
	font-size: var(--fs-sm);
	padding: 0 var(--s3);
	z-index: 0;
}
.tile-paper img {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity 0.3s ease;
}
.tile-paper img.is-missing { display: none; }
.tile-link:hover .tile-paper { transform: translateY(-3px); border-color: var(--brass); }
.tile-link:focus-visible { outline-offset: 4px; }
.tile-title { font-weight: 650; line-height: 1.3; overflow-wrap: anywhere; }
.tile-meta { font-size: var(--fs-sm); color: var(--text-soft); margin-top: -0.3rem; }
.grid-empty[hidden] { display: none; }

@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Editor ---------- */

.studio { display: grid; gap: var(--s5); align-items: start; }
.stage {
	margin: 0;
	position: sticky;
	top: 0;
	z-index: 4;
	padding-block: var(--s2);
	background: var(--bg);
}
.frame {
	position: relative;
	display: grid;
	place-items: center;
	margin-inline: auto;
	width: min(100%, calc(min(30svh, 17rem) * 0.75));
	aspect-ratio: 3 / 4;
	border-radius: var(--radius);
	background: var(--surface);
	border: 1px solid var(--line);
	overflow: hidden;
}
.frame img, .frame video {
	grid-area: 1 / 1;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.frame::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0;
	background: linear-gradient(100deg, transparent 30%, rgb(255 255 255 / 0.12) 50%, transparent 70%) var(--surface-2);
	background-size: 250% 100%;
	transition: opacity 0.2s ease;
}
.frame.is-busy:not(.has-image)::after { opacity: 1; animation: shimmer 1.4s linear infinite; }
.frame.is-busy.has-image::after { opacity: 0.4; background: var(--surface); }
.frame.is-error { box-shadow: inset 0 0 0 3px var(--danger); }
.frame-badge {
	position: absolute;
	inset-block-end: var(--s2);
	inset-inline-start: 50%;
	transform: translateX(-50%);
	z-index: 2;
	display: none;
	align-items: center;
	gap: var(--s2);
	padding: 0.3rem 0.7rem;
	border-radius: 999px;
	background: rgb(26 22 18 / 0.86);
	color: #f4efe6;
	font-size: var(--fs-xs);
	white-space: nowrap;
}
html[dir="rtl"] .frame-badge { transform: translateX(50%); }
.frame.is-busy .frame-badge { display: inline-flex; }
.frame-badge .icon { animation: spin 1s linear infinite; }
.stage figcaption { text-align: center; margin-top: var(--s2); }
#clip { width: 100%; margin-top: var(--s3); background: var(--paper); border-radius: var(--radius); }
#clip[hidden] { display: none; }
@keyframes shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }

.tools { min-width: 0; }
.tools form { margin: 0; }
.suggest { margin: calc(-1 * var(--s2)) 0 var(--s4); }
.suggest-label { font-size: var(--fs-sm); color: var(--text-soft); margin-bottom: var(--s2); }
.suggest-list { display: flex; flex-wrap: wrap; gap: var(--s2); }
.suggest-list button {
	justify-content: flex-start;
	text-align: start;
	font-weight: 400;
	font-size: var(--fs-sm);
	background: var(--surface);
	color: var(--text);
	border-color: var(--line);
	max-width: 100%;
}
.suggest-list button:hover { background: var(--surface-2); border-color: var(--line-strong); }
.actions { display: grid; gap: var(--s2); margin-top: var(--s4); }
.actions-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.status {
	min-height: 1.6em;
	margin: var(--s3) 0 0;
	font-size: var(--fs-sm);
	color: var(--text-soft);
}
.status.is-error { color: var(--danger); }
.status.is-ok { color: var(--ok); }
.downloads { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }
.downloads a { min-height: var(--tap); display: inline-flex; align-items: center; }
.aside-card {
	display: flex;
	gap: var(--s3);
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-top: var(--s5);
	padding: var(--s4);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--bg-raised);
}
.aside-card p { margin: 0; }
a.aside-card { color: var(--text); text-decoration: none; font-weight: 650; min-height: var(--tap); }
a.aside-card:hover { border-color: var(--line-strong); background: var(--surface); }
html[dir="rtl"] .icon-dir { transform: scaleX(-1); }
.aside-link { margin-top: var(--s3); }

.article { margin-top: var(--s7); }
.article h3 { font-size: 1.12rem; margin: var(--s5) 0 var(--s2); }
.wishes { display: grid; gap: var(--s2); }
.wish {
	display: block;
	width: 100%;
	text-align: start;
	background: transparent;
	color: var(--text);
	border: 1px solid var(--line);
	padding: var(--s3) var(--s4);
	font-weight: 400;
	line-height: 1.6;
}
.wish:hover { background: var(--surface); border-color: var(--line-strong); }
.wish-label { display: block; color: var(--brass); font-size: var(--fs-xs); letter-spacing: 0.04em; font-weight: 650; margin-bottom: var(--s1); }
blockquote { margin: var(--s3) 0 var(--s4); padding-inline-start: var(--s4); border-inline-start: 3px solid var(--brass); }

/* ---------- Quick mode ---------- */

.quick-form { max-width: 40rem; }
.quick-step { display: grid; grid-template-columns: 2.2rem 1fr; gap: var(--s3); margin-bottom: var(--s4); }
.quick-step > .num {
	display: grid; place-items: center;
	width: 2.2rem; height: 2.2rem;
	border-radius: 50%;
	border: 1px solid var(--brass);
	color: var(--brass);
	font-weight: 700;
}
.quick-step .field { margin-bottom: 0; }
.radio-chips { display: flex; flex-wrap: wrap; gap: var(--s2); border: 0; padding: 0; margin: 0; }
.radio-chips legend { padding: 0; margin-bottom: var(--s2); }
.radio-chips label {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: var(--tap);
	padding: 0 var(--s3);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
	font-weight: 600;
	cursor: pointer;
}
.radio-chips input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.radio-chips label:has(input:checked) { background: var(--paper); color: var(--paper-ink); border-color: var(--paper); box-shadow: inset 0 0 0 2px var(--brass); }
.radio-chips label:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.results-head { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; justify-content: space-between; margin-bottom: var(--s4); }
/* minmax(0,1fr) keeps each card inside its track so choose/PNG/MP4 never spill into neighbors. */
.quick-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--s5) var(--s3);
}
.quick-card {
	display: grid;
	gap: var(--s3);
	align-content: start;
	min-width: 0;
}
.quick-card .tile-title { margin: 0; }
.quick-card .card-actions {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--s2);
}
.quick-card .card-actions .button {
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
	white-space: normal;
	padding-inline: 0.65rem;
}
.quick-card .card-actions .button:first-child { grid-column: 1 / -1; }

/* ---------- Auth / small forms ---------- */

.auth-wrap { display: grid; place-items: start center; padding-block: var(--s6) var(--s7); }
.auth { width: min(28rem, 100%); padding: var(--s6) var(--s5) var(--s5); }
.auth h1 { font-size: var(--fs-xl); }
.auth input, .auth textarea { background: #fffdf8; }
.auth .button, .auth button { width: 100%; }
.sheet-paper button:not(.secondary), .auth button:not(.secondary), .sheet-paper .button:not(.secondary) { background: var(--green); border-color: var(--green); color: #fffaf3; }
.sheet-paper button:not(.secondary):hover, .auth button:not(.secondary):hover { background: #285c48; border-color: #285c48; }
.sheet-paper input, .auth input, .auth textarea { border-color: #8f8170; }
html[data-theme="light"] .auth { background: var(--surface); }
.auth-switch { margin: var(--s4) 0 0; text-align: center; }

/* ---------- Share & mine ---------- */

.pick-strip {
	list-style: none;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 5.2rem;
	gap: var(--s2);
	margin: 0 0 var(--s4);
	padding: var(--s1) var(--s1) var(--s3);
	overflow-x: auto;
	scroll-snap-type: x proximity;
	overscroll-behavior-x: contain;
}
.pick-strip li { scroll-snap-align: start; }
.pick {
	display: grid;
	gap: var(--s1);
	width: 100%;
	padding: var(--s1);
	background: transparent;
	color: var(--text);
	border: 1px solid var(--line);
	font-weight: 400;
	font-size: var(--fs-xs);
	line-height: 1.25;
	align-content: start;
}
.pick:hover { background: var(--surface); border-color: var(--line-strong); }
.pick[aria-pressed="true"] { border-color: var(--brass); box-shadow: inset 0 0 0 2px var(--brass); background: var(--surface); }
.pick img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 2px; }

.mine-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s4); }
.mine-card {
	display: grid;
	grid-template-columns: 5.5rem minmax(0, 1fr);
	gap: var(--s4);
	align-items: start;
	padding: var(--s4);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
}
.mine-card > img, .mine-thumb {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	background: var(--bg-raised);
	border-radius: var(--radius);
}
.mine-card h2 { font-size: 1.15rem; margin: 0 0 var(--s1); }
.mine-card p { margin: 0 0 var(--s1); }
.mine-card .share-row { margin-top: var(--s3); }
.stats { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); font-size: var(--fs-sm); color: var(--text-soft); margin: var(--s2) 0; }
.tag {
	display: inline-block;
	margin: 0 var(--s1) var(--s1) 0;
	padding: 0.15rem 0.5rem;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius);
	line-height: 1.4;
	font-size: var(--fs-xs);
	color: var(--text-soft);
}
.more-grid { display: grid; gap: var(--s4); padding-block: var(--s2) var(--s3); }
.more-grid form { margin: 0; }
.toolbar { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s4) 0; }
.download-row, .share-row, .filters { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; margin: var(--s3) 0; }
.share-row form, .download-row form { margin: 0; display: inline-flex; }
.card-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s4); }
.card-list > li { padding: var(--s4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.photo-form { max-width: 28rem; }
.unlock-form { display: grid; gap: var(--s2); max-width: 22rem; }
.qr { width: 8.5rem; background: #fffdf8; padding: 0.4rem; border-radius: var(--radius); }
.qr svg { display: block; width: 100%; height: auto; }
.activity { padding: 0; list-style: none; display: grid; gap: var(--s2); }
.activity-row { padding: var(--s3) var(--s4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }

/* ---------- Recipient: envelope ---------- */

.recipient { padding-block: var(--s5) var(--s7); }
.recipient-head { position: relative; z-index: 5; text-align: center; margin-bottom: var(--s5); }
.recipient-head h1 { margin-inline: auto; }
.letter { width: min(24rem, 100%); margin: 0 auto var(--s6); }
.envelope {
	position: relative;
	aspect-ratio: 4 / 3;
	perspective: 900px;
	margin-top: 5.5rem;
}
.envelope-back, .envelope-front, .envelope-flap, .envelope-card { position: absolute; }
.envelope-back {
	inset: 0;
	background: #b9a47c;
	border-radius: var(--radius);
	box-shadow: var(--shadow-paper);
}
.envelope-card {
	inset: 8% 7% 12%;
	background: var(--paper);
	border-radius: 2px;
	box-shadow: 0 1px 2px rgb(0 0 0 / 0.2);
	background-image: linear-gradient(var(--paper-2) 1px, transparent 1px);
	background-size: 100% 1.6rem;
	background-position: 0 2.2rem;
}
.envelope-front {
	inset: 0;
	border-radius: var(--radius);
	background: #d3bf95;
	clip-path: polygon(0 0, 50% 56%, 100% 0, 100% 100%, 0 100%);
}
.envelope-front::before, .envelope-front::after {
	content: "";
	position: absolute;
	inset: 0;
}
.envelope-front::before { background: #c9b488; clip-path: polygon(0 0, 50% 56%, 0 100%); }
.envelope-front::after { background: #c4ae81; clip-path: polygon(100% 0, 50% 56%, 100% 100%); }
.envelope-flap {
	inset: 0 0 auto 0;
	height: 58%;
	background: #c4ae82;
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	transform-origin: 50% 0;
	z-index: 2;
	filter: drop-shadow(0 2px 0 rgb(0 0 0 / 0.08));
}
.envelope-to {
	position: absolute;
	inset: auto 0 12% 0;
	z-index: 3;
	margin: 0;
	text-align: center;
	color: #3b2f22;
	font-style: italic;
	font-size: 1.15rem;
}
.seal {
	position: absolute;
	top: 58%;
	left: 50%;
	z-index: 4;
	transform: translate(-50%, -50%);
	display: grid;
	place-items: center;
	gap: 0;
	min-width: 6.5rem;
	min-height: 6.5rem;
	padding: var(--s2);
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, var(--seal-2), var(--seal) 65%);
	border: 3px solid #6f241b;
	color: #fbeee0;
	font-weight: 700;
	font-size: 0.98rem;
	line-height: 1.15;
	box-shadow: 0 3px 0 #5a1d16, 0 8px 18px rgb(0 0 0 / 0.35);
}
.seal:hover { background: radial-gradient(circle at 35% 30%, #b8473a, var(--seal-2) 65%); border-color: #6f241b; }
.seal:focus-visible { outline-offset: 5px; }
.opened { margin-top: 0; }
.opened[hidden] { display: none; }
.opened-name { font-size: var(--fs-xl); font-weight: 650; text-align: center; margin: 0 0 var(--s2); }
.opened blockquote { font-size: 1.12rem; }
.card-frame {
	margin: var(--s4) auto;
	width: min(100%, 26rem);
	border-radius: var(--radius);
	overflow: hidden;
}
.card-frame img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: contain; }
.card-frame:fullscreen { display: grid; place-items: center; background: #0d0b09; }
.card-frame:fullscreen img { width: auto; height: 100vh; }
.opened .actions-row { margin-top: var(--s3); }
.opened .download-row { justify-content: center; }
.recipient-more { max-width: 38rem; margin-inline: auto; }
.gate { width: min(28rem, 100%); margin: var(--s5) auto; padding: var(--s6) var(--s5) var(--s5); }
.gate .lock { display: grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: var(--s3); border-radius: 50%; background: var(--paper-2); color: var(--paper-ink); }

/* ---------- Birthday ---------- */

.bday-hero { display: grid; gap: var(--s5); align-items: start; padding-block: var(--s5); }
.counts { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s3) 0; padding: 0; list-style: none; }
.counts li { padding: var(--s2) var(--s3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); font-size: var(--fs-sm); }
.film { padding: var(--s4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.film-still { display: block; width: min(100%, 18rem); height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius); margin: var(--s3) 0; }
.gifts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: var(--s3); }
.gift { padding: var(--s4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.gift p:first-child { font-weight: 650; }
.gift img, .gift video { width: 100%; height: auto; background: var(--paper); border-radius: var(--radius); }
.gift audio { width: 100%; }
.gift-photo img { aspect-ratio: 4 / 3; object-fit: cover; cursor: zoom-in; }
.tabs { display: flex; gap: var(--s1); overflow-x: auto; border-bottom: 1px solid var(--line); margin-bottom: var(--s4); }
.tabs [role="tab"] {
	background: transparent;
	color: var(--text-soft);
	border: 0;
	border-bottom: 3px solid transparent;
	border-radius: 0;
	padding: 0 var(--s4);
	white-space: nowrap;
}
.tabs [role="tab"]:hover { background: var(--surface); color: var(--text); }
.tabs [role="tab"][aria-selected="true"] { color: var(--text); border-bottom-color: var(--brass); }
.tab-panels > form { padding: var(--s4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); margin-bottom: var(--s4); }
.tab-panels > form h3 { margin-top: 0; }
.tab-panels > form[hidden] { display: none; }
.prompt { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0 0 var(--s4); }
.prompt label { display: inline-flex; gap: var(--s2); align-items: center; min-height: var(--tap); padding: 0 var(--s3); border: 1px solid var(--line); border-radius: var(--radius); font-weight: 600; }
.prompt label:has(input:checked) { border-color: var(--brass); box-shadow: inset 0 0 0 1px var(--brass); }
.field.consent label { display: flex; gap: var(--s2); align-items: flex-start; font-weight: 400; }
.field.consent input { margin-top: 0.2rem; flex: none; }
.form-actions { display: flex; flex-wrap: wrap; gap: var(--s2); }

/* ---------- Content pages ---------- */

.status-page { text-align: center; margin-inline: auto; padding-block: var(--s8); }
.mark-block { font-size: var(--fs-sm); letter-spacing: 0.12em; text-transform: uppercase; color: var(--brass); }
.pay { display: grid; gap: var(--s3); margin: var(--s4) 0; padding: var(--s4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.pay div { border-bottom: 1px solid var(--line); padding-bottom: var(--s2); }
.pay div:last-child { border-bottom: 0; padding-bottom: 0; }
.pay dt { color: var(--text-soft); font-size: var(--fs-xs); letter-spacing: 0.06em; text-transform: uppercase; }
.pay dd { margin: 0; font-weight: 650; }
.report, .reply { margin-top: var(--s5); }

/* ---------- Admin ---------- */

.admin-toc { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s4) 0; }
.admin-toc a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--s3); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; }
.admin-list { display: grid; gap: var(--s4); }
.admin-card { padding: var(--s5); margin: var(--s4) 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.admin-list .admin-card { margin: 0; }
.admin-card h2 { margin-top: 0; font-size: var(--fs-lg); }
.admin-card form { margin: var(--s2) 0; }
.article-fields { border: 1px solid var(--line); padding: var(--s3) var(--s4); }

/* ---------- Footer ---------- */

.foot {
	margin-top: var(--s7);
	padding-block: var(--s6) var(--s6);
	border-top: 1px solid var(--line);
	color: var(--text-soft);
	font-size: var(--fs-sm);
}
.foot-grid { display: grid; gap: var(--s5); }
.foot nav { display: flex; flex-wrap: wrap; gap: 0 var(--s4); }
.foot nav a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--text); }
.foot .shortcuts summary { min-height: var(--tap); display: inline-flex; align-items: center; cursor: pointer; }

/* ---------- Cookie notice & consent dialog ---------- */

.cookie {
	position: sticky;
	bottom: 0;
	z-index: 30;
	display: flex;
	flex-wrap: wrap;
	gap: var(--s2) var(--s4);
	align-items: center;
	justify-content: space-between;
	margin: 0;
	padding: var(--s3) var(--s4);
	background: var(--paper);
	color: var(--paper-ink);
	border-top: 1px solid var(--paper-2);
	font-size: var(--fs-sm);
}
.cookie p { margin: 0; max-width: 52rem; flex: 1 1 18rem; }
.cookie a { color: var(--paper-ink); }
.cookie form { margin: 0; }
.cookie button { background: var(--green); border-color: var(--green); color: #fffaf3; }
dialog.consent {
	position: fixed;
	z-index: 40;
	inset-inline: 0;
	inset-block: auto 0;
	width: min(40rem, 100%);
	max-height: min(92vh, 38rem);
	margin-block: 0;
	margin-inline: auto;
	padding: var(--s4) var(--s5) var(--s5);
	border: 0;
	border-block-start: 1px solid var(--paper-2);
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
	background: var(--paper);
	color: var(--paper-ink);
	text-align: start;
	overflow: auto;
	box-shadow: var(--shadow-soft);
}
dialog.consent h2 { margin: 0 0 var(--s2); font-size: var(--fs-lg); }
dialog.consent p { margin: var(--s2) 0; }
dialog.consent a { color: var(--paper-ink); }
dialog.consent fieldset { margin: var(--s3) 0; padding: var(--s3) var(--s4); border: 1px solid #cdbfa9; display: grid; gap: var(--s1); }
dialog.consent label { display: flex; gap: var(--s2); align-items: flex-start; text-align: start; min-height: var(--tap); }
dialog.consent input { margin-block-start: 0.25rem; flex: none; }
dialog.consent input:disabled { cursor: not-allowed; opacity: 1; }
dialog.consent .hint { color: #5a4f44; margin: 0; padding-inline-start: 1.85rem; }
.consent-actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }
dialog.consent button { background: var(--green); border-color: var(--green); color: #fffaf3; }
dialog.consent button.secondary { background: transparent; color: var(--paper-ink); border-color: #8f8170; }

/* ---------- Toast & lightbox ---------- */

.toast-region {
	position: fixed;
	inset-inline: 0;
	bottom: var(--s4);
	z-index: 50;
	display: grid;
	justify-items: center;
	pointer-events: none;
	padding-inline: var(--s4);
}
.toast {
	display: inline-flex;
	align-items: center;
	gap: var(--s3);
	max-width: min(30rem, 100%);
	padding: var(--s3) var(--s4);
	background: var(--paper);
	color: var(--paper-ink);
	border: 1px solid var(--paper-2);
	border-inline-start: 4px solid var(--green);
	border-radius: var(--radius);
	box-shadow: var(--shadow-soft);
	font-weight: 600;
	pointer-events: auto;
}
.toast.is-error { border-inline-start-color: var(--seal); }
.toast svg { width: 1.6rem; height: 1.6rem; flex: none; color: var(--green); }
.toast.is-error svg { color: var(--seal); }

.lightbox {
	position: fixed;
	inset: 0;
	background: rgb(8 6 4 / 0.9);
	display: grid;
	place-items: center;
	z-index: 55;
	padding: var(--s4);
}
.lightbox[hidden] { display: none; }
.lightbox img { max-width: min(96vw, 52rem); max-height: 90vh; width: auto; height: auto; }
.lightbox button { position: absolute; inset-block-start: var(--s4); inset-inline-end: var(--s4); min-width: var(--tap); }

/* ---------- Responsive ---------- */

@media (max-width: 759px) {
	.top-inner { gap: 0 var(--s2); padding-block: var(--s1) 0; }
	.mark { order: 1; }
	.top-tools { order: 2; margin-inline-start: auto; }
	.nav-main {
		order: 3;
		flex-basis: 100%;
		margin-inline: -0.5rem;
		overflow-x: auto;
		scrollbar-width: none;
		padding-bottom: var(--s1);
	}
	.nav-main::-webkit-scrollbar { display: none; }
	.theme-toggle .theme-label, .lang label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.lang select { min-width: 0; max-width: 8.5rem; }
	.hero { padding-block: var(--s5) var(--s3); }
	.hero-actions .button { flex: 1 1 100%; }
	.mine-card { grid-template-columns: 4rem minmax(0, 1fr); gap: var(--s3); padding: var(--s3); }
	.cookie { padding: var(--s2) var(--s3); flex-wrap: nowrap; }
	.cookie p { flex-basis: 0; }
	.nav-main { -webkit-mask-image: linear-gradient(to right, #000 82%, transparent); mask-image: linear-gradient(to right, #000 82%, transparent); padding-inline-end: var(--s5); }
	html[dir="rtl"] .nav-main { -webkit-mask-image: linear-gradient(to left, #000 82%, transparent); mask-image: linear-gradient(to left, #000 82%, transparent); }
	.cookie p { font-size: var(--fs-xs); line-height: 1.45; }
	.auth, .gate { padding: var(--s5) var(--s4) var(--s4); }
}

@media (min-width: 560px) {
	.grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.quick-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 760px) {
	.steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.foot-grid { grid-template-columns: 1.2fr 2fr; }
	.actions { grid-template-columns: 1fr; }
}

@media (min-width: 900px) {
	.hero { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); padding-block: var(--s7) var(--s5); }
	.hero-art { display: block; }
	.grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s5) var(--s4); }
	.quick-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s5) var(--s4); }
	.studio { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: var(--s6); }
	.stage { top: var(--s4); padding: 0; background: transparent; }
	.frame { width: min(100%, 30rem); }
	.bday-hero { grid-template-columns: 1.2fr 0.8fr; }
	.admin-list { grid-template-columns: 1fr 1fr; align-items: start; }
}

@media (min-width: 1200px) {
	.grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.quick-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* Hero art: a card leaning on its envelope, drawn in CSS so it costs no request. */
.hero-art { position: relative; aspect-ratio: 1 / 1; max-width: 26rem; justify-self: center; width: 100%; }
.hero-art .art-env {
	position: absolute;
	inset: 34% 4% 6% 4%;
	background: #b9a47c;
	border-radius: var(--radius);
	box-shadow: var(--shadow-paper);
}
.hero-art .art-env::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--radius);
	background:
		linear-gradient(to top right, #cdb98f 49.6%, transparent 50%) left bottom / 50.5% 100% no-repeat,
		linear-gradient(to top left, #c7b287 49.6%, transparent 50%) right bottom / 50.5% 100% no-repeat;
}
.hero-art .art-card {
	position: absolute;
	inset: 4% 22% 22% 22%;
	transform: rotate(-4deg);
	background: var(--paper);
	border: 1px solid var(--paper-2);
	border-radius: 2px;
	box-shadow: 0 2px 0 rgb(0 0 0 / 0.15), 6px 8px 0 var(--shadow-ink);
	display: grid;
	align-content: center;
	justify-items: center;
	gap: 0.7rem;
	padding: 1.2rem;
	color: var(--paper-ink);
	text-align: center;
}
html[dir="rtl"] .hero-art .art-card { transform: rotate(4deg); }
.hero-art .art-card::before {
	content: "";
	position: absolute;
	inset: 0.5rem;
	border: 1px solid var(--brass);
	opacity: 0.6;
}
.hero-art .art-rule { width: 55%; height: 1px; background: #8a6a32; }
.hero-art .art-name { font-size: clamp(1.6rem, 2.6vw, 2.2rem); font-weight: 650; }
.hero-art .art-line { width: 70%; height: 0.45rem; border-radius: 2px; background: var(--paper-2); }
.hero-art .art-line.short { width: 48%; }
.hero-art .art-seal {
	position: absolute;
	width: 3.6rem; height: 3.6rem;
	inset-inline-end: 14%;
	bottom: 12%;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, var(--seal-2), var(--seal) 65%);
	border: 2px solid #6f241b;
	box-shadow: 0 3px 0 #5a1d16;
}

/* ---------- Print & motion ---------- */

@media print {
	.top, .foot, .cookie, dialog.consent, .report, .reply, .download-row, .actions-row, .theme-toggle, .shortcuts, nav, .envelope, .toast-region, .recipient-more { display: none !important; }
	[data-opened] { display: block !important; }
	body { background: #fff; color: #111; }
	.card-print img { max-width: 100%; height: auto; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
	}
	.tile-paper, .tile-link:hover .tile-paper { transform: none; transition: none; }
	[data-grid] > li { animation: none !important; }
	.frame.is-busy:not(.has-image)::after { animation: none; }
	.frame-badge .icon, button[aria-busy="true"] .icon { animation: none; }
}