/* ============================================================
 *  Etim — frontend
 *  All selectors are scoped to body.etim-page or .etim-app
 *  to avoid leaking into the host theme.
 * ============================================================ */

body.etim-page {
	--etim-bg: #efe5cb;
	--etim-bg-warm: #f5ecd5;
	--etim-bg-deep: #e2d4b3;
	--etim-ink: #1c1610;
	--etim-ink-soft: rgba(28, 22, 16, 0.55);
	--etim-ink-faint: rgba(28, 22, 16, 0.30);
	--etim-ink-ghost: rgba(28, 22, 16, 0.08);
	--etim-accent: #7c2d2a;
	--etim-accent-soft: rgba(124, 45, 42, 0.85);
	--etim-sepia: #8a7350;
	--etim-gilt: #a47b3c;

	margin: 0;
	padding: 0;
	height: 100%;
	min-height: 100vh;
	overflow: hidden;
	overscroll-behavior: none;
	background: var(--etim-bg);
	color: var(--etim-ink);
	font-family: 'Cormorant Garamond', Garamond, 'Times New Roman', serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	font-feature-settings: "liga" 1, "kern" 1, "onum" 1;
}

body.etim-page,
body.etim-page::before,
body.etim-page::after {
	box-sizing: border-box;
}

html:has(body.etim-page) {
	height: 100%;
	overflow: hidden;
	overscroll-behavior: none;
}

/* Aged-paper base — softly warmer than the original cream, with
 * very gentle uneven aging. Sits between current and the heavy
 * amber version; readable, not dirty. */
body.etim-page {
	background:
		radial-gradient(ellipse 115% 78% at 22% 16%, rgba(255, 249, 226, 0.78) 0%, transparent 55%),
		radial-gradient(ellipse 55% 45% at 75% 30%, rgba(170, 128, 70, 0.10) 0%, transparent 65%),
		radial-gradient(ellipse 50% 42% at 25% 78%, rgba(150, 110, 56, 0.08) 0%, transparent 70%),
		radial-gradient(ellipse at center, var(--etim-bg-warm) 0%, var(--etim-bg) 60%, var(--etim-bg-deep) 100%);
	position: relative;
}

/* paper grain — slightly denser than current for more "fiber" feel,
 * but well short of the heavy aged texture. */
body.etim-page::before {
	content: "";
	position: fixed;
	inset: 0;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='280' height='280'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.05' numOctaves='2' stitchTiles='stitch' seed='5'/><feColorMatrix values='0 0 0 0 0.14 0 0 0 0 0.10 0 0 0 0 0.05 0 0 0 0.22 0'/></filter><rect width='280' height='280' filter='url(%23n)'/></svg>");
	opacity: 0.58;
	mix-blend-mode: multiply;
	pointer-events: none;
	z-index: 0;
}

/* vignette — even edge softening, slightly stronger than current */
body.etim-page::after {
	content: "";
	position: fixed;
	inset: 0;
	background: radial-gradient(ellipse 100% 85% at center, transparent 45%, rgba(50, 32, 12, 0.18) 100%);
	pointer-events: none;
	z-index: 1;
}

/* App container */
.etim-app {
	position: fixed;
	inset: 0;
	z-index: 2;
}

.etim-app * {
	box-sizing: border-box;
}

/* Header */
.etim-app .etim-header {
	position: fixed;
	top: 0; left: 0; right: 0;
	text-align: center;
	padding: 30px 16px 6px;
	z-index: 10;
	pointer-events: none;
	transition: opacity 0.6s ease;
}

.etim-app .etim-header h1 {
	font-family: 'Pinyon Script', cursive;
	font-size: clamp(3.2rem, 7vw, 5.8rem);
	font-weight: 400;
	color: var(--etim-ink);
	line-height: 0.9;
	letter-spacing: 1px;
	margin: 0;
	text-shadow: 0 1px 0 rgba(255, 250, 230, 0.4);
}

.etim-app .etim-header .sub {
	font-family: 'Cormorant Garamond', serif;
	font-style: italic;
	font-weight: 300;
	font-size: 0.95rem;
	color: var(--etim-ink-soft);
	margin-top: 2px;
	letter-spacing: 1.2px;
}

.etim-app.focused .etim-header {
	opacity: 0.35;
}

/* Constellation */
.etim-app .etim-constellation {
	position: fixed;
	top: 130px;
	bottom: 32px;
	left: 0; right: 0;
	z-index: 2;
	overflow: hidden;
}

@media (max-width: 720px) {
	.etim-app .etim-constellation {
		top: 100px;
		bottom: 28px;
	}
}

/* Word */
.etim-app .word {
	position: absolute;
	font-family: 'Cormorant Garamond', serif;
	font-weight: 500;
	color: var(--etim-ink);
	cursor: pointer;
	user-select: none;
	white-space: nowrap;
	padding: 4px 10px;
	opacity: 0;
	transition:
		opacity 1.6s cubic-bezier(0.2, 0.8, 0.3, 1),
		color 0.5s ease;
	text-decoration-line: none;
	text-underline-offset: 6px;
	text-decoration-thickness: 1px;
	font-feature-settings: "liga" 1, "dlig" 1, "onum" 1;
	letter-spacing: 0.2px;
	-webkit-tap-highlight-color: transparent;
	transform: translate(-50%, -50%);
}

.etim-app .word .inner {
	display: inline-block;
	transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.3, 1);
	animation: etim-drift var(--etim-dur, 18s) ease-in-out infinite alternate;
	animation-delay: var(--etim-delay, 0s);
	will-change: transform;
}

.etim-app .word.italic {
	font-style: italic;
}

.etim-app .word.in {
	opacity: var(--etim-target-opacity, 0.92);
}

@keyframes etim-drift {
	0%   { transform: translate(0, 0)        rotate(0deg); }
	20%  { transform: translate(7px, -8px)   rotate(-0.3deg); }
	45%  { transform: translate(-5px, 6px)   rotate(0.4deg); }
	70%  { transform: translate(9px, 5px)    rotate(-0.2deg); }
	100% { transform: translate(-4px, -7px)  rotate(0.3deg); }
}

.etim-app .word:hover {
	color: var(--etim-accent);
	text-decoration-line: underline;
	text-decoration-color: rgba(164, 123, 60, 0.55);
}

.etim-app .word:hover .inner {
	transform: scale(1.10);
	animation-play-state: paused;
}

.etim-app.focused .word:not(.is-active) {
	opacity: 0.10 !important;
	color: var(--etim-ink-soft);
}

.etim-app.focused .word:not(.is-active) .inner {
	animation-play-state: paused;
}

.etim-app .word.is-active {
	color: var(--etim-accent);
	text-decoration-line: underline;
	text-decoration-color: var(--etim-gilt);
	z-index: 5;
}

.etim-app .word.is-active .inner {
	transform: scale(1.12);
	animation-play-state: paused;
}

/* PRO locked — the server sends a glitched string (random alphanumerics
 * + block chars) standing in for the real word. We layer chromatic
 * aberration onto the serif type, like a CRT misalignment bleeding into
 * the medieval GUI. The hover-scramble JS reinforces the "decryption
 * attempt that won't resolve" feel — pure FOMO. */
.etim-app .word.is-pro-locked {
	font-style: normal;
}
.etim-app .word.is-pro-locked .inner {
	color: rgba(28, 22, 16, 0.78);
	letter-spacing: 1.5px;
	text-shadow:
		0.7px 0 0 rgba(212, 80, 80, 0.45),
		-0.7px 0 0 rgba(80, 180, 212, 0.45),
		0 0 14px rgba(164, 123, 60, 0.20);
	transition:
		transform 0.45s cubic-bezier(0.2, 0.8, 0.3, 1),
		color 0.4s ease,
		text-shadow 0.3s ease,
		letter-spacing 0.3s ease;
}

.etim-app .word.is-pro-locked:hover .inner,
.etim-app .word.is-pro-locked.is-active .inner {
	color: rgba(28, 22, 16, 0.95);
	letter-spacing: 2.5px;
	text-shadow:
		1.6px 0 0 rgba(212, 80, 80, 0.60),
		-1.6px 0 0 rgba(80, 180, 212, 0.60),
		0 0 22px rgba(164, 123, 60, 0.35);
}

.etim-app .word.is-pro-locked:hover,
.etim-app .word.is-pro-locked.is-active {
	text-decoration: none;
}

/* Subtle scanline overlay across glitched text — the futuristic intervention */
.etim-app .word.is-pro-locked .inner::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		repeating-linear-gradient(0deg,
			transparent 0,
			transparent 2px,
			rgba(28, 22, 16, 0.04) 2px,
			rgba(28, 22, 16, 0.04) 3px);
	pointer-events: none;
	mix-blend-mode: multiply;
	opacity: 0;
	transition: opacity 0.35s ease;
}
.etim-app .word.is-pro-locked .inner {
	position: relative;
}
.etim-app .word.is-pro-locked:hover .inner::before,
.etim-app .word.is-pro-locked.is-active .inner::before {
	opacity: 1;
}

/* Card — a leaf lifted off the page. A touch warmer/lighter than
 * the page so it reads as raised, with a faint inner grain that
 * picks up the same fiber feel without looking aged. */
.etim-app .etim-card {
	position: fixed;
	top: 50%;
	right: 44px;
	transform: translateY(-50%) translateX(24px);
	width: clamp(340px, 34vw, 480px);
	max-height: 78vh;
	height: 78vh;
	background:
		linear-gradient(180deg, rgba(253, 246, 224, 0.98) 0%, rgba(244, 232, 200, 0.97) 100%);
	border: 1px solid rgba(60, 42, 18, 0.12);
	box-shadow:
		0 1px 0 rgba(255, 250, 230, 0.7) inset,
		0 36px 80px rgba(60, 40, 20, 0.18),
		0 6px 22px rgba(60, 40, 20, 0.10);
	border-radius: 2px;
	opacity: 0;
	pointer-events: none;
	transition:
		opacity 0.45s ease,
		transform 0.55s cubic-bezier(0.2, 0.8, 0.3, 1);
	z-index: 30;
	overflow: hidden;
}

/* Card grain — very faint micro-texture so it shares the page's
 * fiber feel without competing with the text. */
.etim-app .etim-card::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='280' height='280'><filter id='cn'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch' seed='9'/><feColorMatrix values='0 0 0 0 0.14 0 0 0 0 0.10 0 0 0 0 0.05 0 0 0 0.14 0'/></filter><rect width='280' height='280' filter='url(%23cn)'/></svg>");
	mix-blend-mode: multiply;
	opacity: 0.5;
	pointer-events: none;
	z-index: 0;
	border-radius: inherit;
}

/* Keep card chrome above the grain */
.etim-app .etim-card > * {
	position: relative;
	z-index: 1;
}

/* The scrollable inner — frame and chrome stay anchored to the card,
 * the content scrolls inside this. Solves the frame-line-mid-text bug. */
.etim-app .etim-card .card-scroll {
	position: absolute;
	inset: 0;
	padding: 40px 44px 36px;
	/* `auto` so the scrollbar (and its gilt track) only appears when the
	 * entry actually overflows. With `scroll` the empty groove renders
	 * on every short entry — looks broken. */
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: #b08847 transparent;
}

/* ============================================================
 *  Medieval scrollbar — slim gilt cord embedded in a faint
 *  parchment groove. The frame's right border is omitted so this
 *  scrollbar visually closes the card on the right edge instead
 *  of overlapping a separate frame line.
 * ============================================================ */
.etim-app .etim-card .card-scroll::-webkit-scrollbar {
	width: 9px;
}

.etim-app .etim-card .card-scroll::-webkit-scrollbar-track {
	/* Faint parchment-darker groove — a soft vertical channel that reads
	 * as "tooling" rather than a separate UI element. */
	background:
		linear-gradient(90deg,
			transparent 0%,
			rgba(122, 90, 40, 0.12) 30%,
			rgba(122, 90, 40, 0.18) 50%,
			rgba(122, 90, 40, 0.12) 70%,
			transparent 100%);
	box-shadow:
		inset 1px 0 0 rgba(80, 55, 20, 0.10);
}

.etim-app .etim-card .card-scroll::-webkit-scrollbar-thumb {
	/* Gilt cord — subtle vertical bevel, gilt center, dark edges. The
	 * inset border keeps the thumb visually "inside" the groove rather
	 * than floating on top of the parchment. */
	background:
		linear-gradient(90deg,
			#6b4f20 0%,
			#a07a35 28%,
			#d2ad5e 50%,
			#a07a35 72%,
			#5a4319 100%);
	border-radius: 5px;
	border-top:    1px solid rgba(255, 235, 190, 0.20);
	border-bottom: 1px solid rgba(40, 25, 5, 0.50);
	box-shadow:
		inset 0  1px 0 rgba(255, 235, 190, 0.45),
		inset 0 -1px 0 rgba(40, 25, 5, 0.40);
	min-height: 40px;
	background-clip: padding-box;
}

.etim-app .etim-card .card-scroll::-webkit-scrollbar-thumb:hover {
	filter: brightness(1.06) saturate(1.05);
}

.etim-app .etim-card .card-scroll::-webkit-scrollbar-thumb:active {
	filter: brightness(0.94);
}

.etim-app .etim-card .card-scroll::-webkit-scrollbar-button {
	display: none;
}

.etim-app .etim-card .card-scroll::-webkit-scrollbar-corner {
	background: transparent;
}

.etim-app .etim-card.visible {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(-50%) translateX(0);
}

.etim-app .etim-card .frame {
	position: absolute;
	inset: 8px;
	border: 0.5px solid rgba(28, 22, 16, 0.18);
	pointer-events: none;
}

/* PRO badge (shown only when card is open for an unlocked PRO entry) */
.etim-app .etim-card .pro-badge {
	position: absolute;
	top: 14px;
	left: 18px;
	font-family: 'Cormorant Garamond', serif;
	font-size: 0.66rem;
	letter-spacing: 3px;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--etim-gilt);
	border: 1px solid var(--etim-gilt);
	padding: 2px 7px 1px;
	border-radius: 2px;
	background: rgba(253, 246, 224, 0.65);
	display: none;
	z-index: 3;
}
.etim-app .etim-card.is-pro-unlocked .pro-badge { display: block; }

/* Locked variant — same family, slightly more saturated */
.etim-app .etim-card.is-locked {
	background:
		linear-gradient(180deg, rgba(253, 246, 222, 0.98) 0%, rgba(241, 226, 192, 0.97) 100%);
}
.etim-app .etim-card.is-locked .frame {
	border-color: rgba(164, 123, 60, 0.30);
}

.etim-app .etim-card .card-body { /* base card body */ }
.etim-app .etim-card .card-locked {
	text-align: center;
}

/* The locked card's "word" is the glitched string. Same CRT-misaligned
 * treatment as the constellation entries, scaled up for the larger type. */
.etim-app .etim-card.is-locked .word-display {
	color: rgba(28, 22, 16, 0.85);
	font-style: normal;
	letter-spacing: 3px;
	text-shadow:
		1.5px 0 0 rgba(212, 80, 80, 0.50),
		-1.5px 0 0 rgba(80, 180, 212, 0.50),
		0 0 26px rgba(164, 123, 60, 0.20);
}

.etim-app .etim-card .lock-mark {
	color: var(--etim-gilt);
	margin: 8px auto 14px;
	display: inline-block;
	opacity: 0.85;
}

.etim-app .etim-card .locked-eyebrow {
	font-family: 'Cormorant Garamond', serif;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--etim-gilt);
	margin-bottom: 14px;
}

.etim-app .etim-card .teaser {
	font-family: 'Cormorant Garamond', serif;
	font-style: italic;
	font-size: 1.15rem;
	line-height: 1.55;
	color: var(--etim-ink-soft);
	margin: 0 0 20px;
	text-align: center;
	padding: 0 8px;
}

.etim-app .etim-card .teaser:empty::before {
	content: "An etymology lies hidden here.";
	color: var(--etim-ink-faint);
}

.etim-app .etim-card .cta {
	margin-top: 18px;
}
.etim-app .etim-card .cta a {
	display: inline-block;
	font-family: 'Cormorant Garamond', serif;
	font-size: 1.08rem;
	font-style: italic;
	color: var(--etim-accent);
	background: linear-gradient(180deg, #fefae8, #faf0d4);
	border: 1px solid rgba(164, 123, 60, 0.35);
	padding: 10px 22px;
	border-radius: 2px;
	text-decoration: none;
	transition: all 0.3s ease;
	box-shadow: 0 4px 14px rgba(164, 123, 60, 0.12);
}
.etim-app .etim-card .cta a:hover {
	background: linear-gradient(180deg, #faf0d4, #f3e2b8);
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(164, 123, 60, 0.20);
}

.etim-app .etim-card .cta-sub {
	font-family: 'Cormorant Garamond', serif;
	font-style: italic;
	font-size: 0.88rem;
	color: var(--etim-sepia);
	margin-top: 10px;
}

.etim-app .etim-card .close {
	position: absolute;
	top: 10px;
	right: 12px;
	background: none;
	border: none;
	width: 36px;
	height: 36px;
	font-size: 1.6rem;
	line-height: 1;
	color: var(--etim-ink-soft);
	cursor: pointer;
	font-family: 'Cormorant Garamond', serif;
	transition: color 0.3s, transform 0.3s;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	-webkit-tap-highlight-color: transparent;
}

.etim-app .etim-card .close:hover {
	color: var(--etim-accent);
	transform: rotate(90deg);
}

.etim-app .etim-card .word-display {
	font-family: 'Cormorant Garamond', serif;
	font-size: clamp(2.4rem, 3.6vw, 3.4rem);
	font-weight: 400;
	font-style: italic;
	color: var(--etim-ink);
	line-height: 1;
	margin: 0 0 6px;
	text-align: center;
	letter-spacing: 0.5px;
	text-transform: lowercase;
}

.etim-app .etim-card .ornament {
	text-align: center;
	color: var(--etim-gilt);
	font-size: 0.95rem;
	letter-spacing: 12px;
	margin: 4px 0 8px;
	user-select: none;
	padding-left: 12px;
	opacity: 0.75;
}

/* Etymology block — citation (chain) and gloss (literal) live here as
 * one logical unit. Hierarchy by *type*: rungs are the citation (small-
 * caps language label + italic foreign form), literal is the gloss
 * (smaller, in guillemets, deferential sepia). A small ↓ between them
 * shows the "which means…" relationship — only renders when both sides
 * are populated. The whole block collapses when neither exists.
 */
/* Etymology block — rubricated 2-column entry. MEANING is the punchline
 * (large italic dark ink), FROM is the supporting derivation (smaller
 * italic muted). Labels are tracked small-caps in the left column; values
 * sit in the right. A second chain step stacks under FROM with an empty
 * label so column alignment holds without re-labelling.
 */
.etim-app .etim-card .etymology {
	display: grid;
	grid-template-columns: max-content max-content;
	column-gap: 18px;
	row-gap: 8px;
	align-items: baseline;
	justify-content: center;
	margin: 4px 0 6px;
	max-width: 100%;
}

.etim-app .etim-card .etymology:empty {
	display: none;
	margin: 0;
}

.etim-app .etim-card .etym-label {
	justify-self: end;
	align-self: baseline;
	font-family: 'Cormorant Garamond', serif;
	font-size: 0.62rem;
	font-style: normal;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--etim-sepia);
	opacity: 0.78;
	padding-top: 0.35em;
	white-space: nowrap;
}

.etim-app .etim-card .etym-label-empty {
	min-width: 1px;
}

.etim-app .etim-card .etym-value {
	justify-self: start;
	font-family: 'Cormorant Garamond', serif;
	font-style: italic;
	text-align: left;
	line-height: 1.25;
	max-width: 28ch;
	overflow-wrap: anywhere;
}

.etim-app .etim-card .etym-meaning {
	font-size: 1.25rem;
	font-weight: 500;
	color: var(--etim-ink);
}

.etim-app .etim-card .etym-chain {
	font-size: 0.92rem;
	font-weight: 400;
	color: var(--etim-ink-soft);
	opacity: 0.92;
}

/* Meaning-only case: no language chain set in the backend for this entry,
 * just the literal meaning. Stack the value on top with "MEANING" rendered
 * as a small caption underneath, centered — more poster-like than the
 * default rubricated two-column layout. */
.etim-app .etim-card .etymology.is-meaning-only {
	display: flex;
	flex-direction: column;
	align-items: center;
	row-gap: 4px;
}
.etim-app .etim-card .etymology.is-meaning-only .etym-label {
	align-self: center;
	padding-top: 0;
	font-size: 0.58rem;
	letter-spacing: 0.28em;
	opacity: 0.62;
}
.etim-app .etim-card .etymology.is-meaning-only .etym-value {
	align-self: center;
	text-align: center;
	max-width: 32ch;
}

.etim-app .etim-card .downshift {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin: 14px auto 18px;
	color: var(--etim-gilt);
	font-size: 1rem;
	line-height: 1;
	user-select: none;
}

.etim-app .etim-card .downshift::before,
.etim-app .etim-card .downshift::after {
	content: '';
	width: 70px;
	height: 1px;
	background: linear-gradient(to right, transparent, currentColor 35%, currentColor 65%, transparent);
	opacity: 0.55;
}

.etim-app .etim-card .rule {
	width: 60px;
	height: 1px;
	background: var(--etim-ink-faint);
	margin: 0 auto 22px;
}

.etim-app .etim-card .note {
	font-family: 'Cormorant Garamond', serif;
	font-size: 1.10rem;
	line-height: 1.65;
	color: var(--etim-ink);
	text-align: justify;
	hyphens: auto;
	font-weight: 400;
}

.etim-app .etim-card .note p {
	margin: 0 0 0.9em;
}

.etim-app .etim-card .note p:last-child {
	margin-bottom: 0;
}

.etim-app .etim-card .note a {
	color: var(--etim-accent);
	text-decoration: underline;
	text-decoration-color: rgba(124, 45, 42, 0.4);
	text-underline-offset: 3px;
}

.etim-app .etim-card .note a:hover {
	text-decoration-color: var(--etim-accent);
}

/* Aaron's interpretation — subjective notes highlighted gilt */
.etim-app .etim-card .note mark.aaron {
	background:
		linear-gradient(180deg,
			transparent 0%,
			transparent 55%,
			rgba(164, 123, 60, 0.18) 55%,
			rgba(164, 123, 60, 0.18) 92%,
			transparent 92%);
	color: inherit;
	padding: 0 2px;
	border-bottom: 1px dotted rgba(164, 123, 60, 0.55);
	cursor: help;
	transition: background 0.3s ease;
	border-radius: 0;
}

.etim-app .etim-card .note mark.aaron:hover,
.etim-app .etim-card .note mark.aaron:focus {
	background:
		linear-gradient(180deg,
			transparent 0%,
			transparent 50%,
			rgba(164, 123, 60, 0.32) 50%,
			rgba(164, 123, 60, 0.32) 95%,
			transparent 95%);
	border-bottom-color: rgba(164, 123, 60, 0.85);
	outline: none;
}

/* Plain <mark> (no .aaron) — strip default yellow */
.etim-app .etim-card .note mark:not(.aaron) {
	background: transparent;
	color: inherit;
}

/* ============================================================
 *  Aaron tooltip — a small parchment label with gilt border
 * ============================================================ */
.etim-app .aaron-tooltip {
	position: fixed;
	transform: translate(-50%, -100%) translateY(-10px);
	pointer-events: none;
	background:
		linear-gradient(180deg, #fbf6e9 0%, #f0e6cf 100%);
	border: 1px solid rgba(164, 123, 60, 0.55);
	box-shadow:
		0 1px 0 rgba(255, 252, 240, 0.7) inset,
		0 8px 20px rgba(60, 40, 20, 0.18),
		0 2px 6px rgba(60, 40, 20, 0.10);
	padding: 7px 14px 6px 11px;
	font-family: 'Cormorant Garamond', Garamond, serif;
	font-style: italic;
	font-size: 0.92rem;
	color: var(--etim-ink);
	white-space: nowrap;
	border-radius: 2px;
	letter-spacing: 0.3px;
	opacity: 0;
	transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.2, 0.85, 0.3, 1);
	z-index: 50;
	max-width: 88vw;
}

.etim-app .aaron-tooltip.visible {
	opacity: 1;
	transform: translate(-50%, -100%) translateY(-4px);
}

.etim-app .aaron-tooltip.below {
	transform: translate(-50%, 0) translateY(10px);
}
.etim-app .aaron-tooltip.below.visible {
	transform: translate(-50%, 0) translateY(4px);
}

/* Inner gilt frame, like the bubble */
.etim-app .aaron-tooltip::before {
	content: "";
	position: absolute;
	inset: 3px;
	border: 0.5px solid rgba(164, 123, 60, 0.30);
	pointer-events: none;
}

/* Pointer — small triangle */
.etim-app .aaron-tooltip::after {
	content: "";
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: 0; height: 0;
	border: 6px solid transparent;
	bottom: -6px;
	border-bottom: 0;
	border-top-color: rgba(164, 123, 60, 0.55);
}
.etim-app .aaron-tooltip.below::after {
	bottom: auto;
	top: -6px;
	border-top: 0;
	border-bottom: 6px solid rgba(164, 123, 60, 0.55);
}

.etim-app .aaron-tooltip .orn {
	color: var(--etim-gilt);
	margin-right: 6px;
	font-style: normal;
	font-size: 0.85em;
	vertical-align: 0.05em;
}

.etim-app .etim-card .note .firstcap {
	font-size: 2.6em;
	float: left;
	line-height: 0.85;
	padding: 6px 10px 0 0;
	font-weight: 500;
	color: var(--etim-accent);
	font-family: 'Cormorant Garamond', serif;
	font-style: normal;
}

/* Sources list at the foot of the card */
.etim-app .etim-card .sources-list {
	margin-top: 24px;
	padding-top: 16px;
	border-top: 1px solid var(--etim-ink-faint);
	font-family: 'Cormorant Garamond', serif;
	font-size: 0.78rem;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--etim-sepia);
	text-align: center;
	clear: both;
}

.etim-app .etim-card .sources-list:empty {
	display: none;
}

.etim-app .etim-card .sources-list .label {
	display: block;
	font-size: 0.72rem;
	letter-spacing: 3px;
	margin-bottom: 8px;
	color: var(--etim-ink-soft);
	font-weight: 500;
}

.etim-app .etim-card .sources-list a,
.etim-app .etim-card .sources-list .src-text {
	color: var(--etim-accent);
	text-decoration: none;
	margin: 0 6px;
	font-style: italic;
	text-transform: none;
	font-size: 0.95rem;
	letter-spacing: 0.5px;
	border-bottom: 1px solid rgba(124, 45, 42, 0.3);
	transition: border-color 0.3s ease;
}

.etim-app .etim-card .sources-list a:hover {
	border-bottom-color: var(--etim-accent);
}

/* Mobile: bottom-sheet card */
@media (max-width: 720px) {
	.etim-app .etim-card {
		top: auto;
		bottom: 0;
		right: 0;
		left: 0;
		width: 100%;
		max-height: 76vh;
		height: auto; /* let max-height handle it */
		transform: translateY(100%);
		border-radius: 18px 18px 0 0;
	}

	.etim-app .etim-card .card-scroll {
		padding: 30px 24px 32px;
	}

	/* Slimmer medieval scrollbar on touch */
	.etim-app .etim-card .card-scroll::-webkit-scrollbar { width: 8px; }

	.etim-app .etim-card.visible {
		transform: translateY(0);
	}

	.etim-app .etim-card .frame {
		inset: 6px;
		border-radius: 14px 14px 0 0;
	}

	.etim-app .etim-card .word-display {
		font-size: 2.3rem;
	}

	.etim-app .etim-card .etym-meaning {
		font-size: 1.1rem;
	}
	.etim-app .etim-card .etym-chain {
		font-size: 0.85rem;
	}

	.etim-app .etim-card .note {
		font-size: 1.02rem;
		text-align: left;
	}

	.etim-app .etim-card .note .firstcap {
		font-size: 2.4em;
		padding: 4px 8px 0 0;
	}

	/* Drag handle indicator at top of bottom sheet */
	.etim-app .etim-card::before {
		content: "";
		position: absolute;
		top: 8px;
		left: 50%;
		transform: translateX(-50%);
		width: 40px;
		height: 4px;
		background: rgba(28, 22, 16, 0.20);
		border-radius: 2px;
		z-index: 3;
	}

	/* Bigger tap target for the close button on mobile */
	.etim-app .etim-card .close {
		top: 14px;
		right: 14px;
		width: 44px;
		height: 44px;
		font-size: 1.8rem;
	}
}

/* Footer */
.etim-app .etim-footer {
	position: fixed;
	bottom: 14px;
	left: 0; right: 0;
	text-align: center;
	font-family: 'Cormorant Garamond', serif;
	font-style: italic;
	font-size: 0.78rem;
	color: var(--etim-ink-soft);
	z-index: 10;
	pointer-events: none;
	letter-spacing: 2px;
	transition: opacity 0.5s ease;
}

.etim-app .etim-footer .pulse {
	display: inline-block;
	animation: etim-pulse 2.4s ease-in-out infinite;
}

@keyframes etim-pulse {
	0%, 100% { opacity: 0.4; }
	50%      { opacity: 0.95; }
}

.etim-app.focused .etim-footer {
	opacity: 0;
}

/* Backdrop (mobile only) */
.etim-app .etim-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(28, 22, 16, 0.30);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.4s ease;
	z-index: 25;
}

.etim-app .etim-backdrop.visible {
	opacity: 1;
	pointer-events: auto;
}

@media (min-width: 721px) {
	.etim-app .etim-backdrop { display: none; }
}

/* Empty state */
.etim-app .etim-empty {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 4;
	pointer-events: none;
	padding: 24px;
	text-align: center;
}

.etim-app .etim-empty .empty-inner {
	pointer-events: auto;
}

.etim-app .etim-empty .empty-mark {
	color: var(--etim-gilt);
	font-size: 2rem;
	margin-bottom: 18px;
	letter-spacing: 1px;
	opacity: 0.7;
}

.etim-app .etim-empty .empty-title {
	font-size: clamp(1.4rem, 2.4vw, 1.8rem);
	color: var(--etim-ink);
	margin: 0 0 8px;
	font-weight: 400;
}

.etim-app .etim-empty .empty-sub {
	font-family: 'Cormorant Garamond', serif;
	font-style: italic;
	font-size: 1rem;
	color: var(--etim-ink-soft);
	margin: 0 0 20px;
}

.etim-app .etim-empty .empty-cta a {
	font-family: 'Cormorant Garamond', serif;
	font-style: italic;
	font-size: 1.05rem;
	color: var(--etim-accent);
	text-decoration: none;
	border-bottom: 1px solid rgba(124, 45, 42, 0.3);
	padding-bottom: 2px;
	transition: border-color 0.3s;
}

.etim-app .etim-empty .empty-cta a:hover {
	border-bottom-color: var(--etim-accent);
}

/* Reduce motion: gentler drift, no pulses */
@media (prefers-reduced-motion: reduce) {
	.etim-app .word .inner,
	.etim-app .etim-footer .pulse {
		animation: none !important;
	}
	.etim-app .etim-card,
	.etim-app .word {
		transition-duration: 0.2s !important;
	}
}

/* Hide host theme bits that may have leaked in */
body.etim-page .wp-site-blocks > *,
body.etim-page > header.site-header,
body.etim-page > footer.site-footer {
	/* Belt-and-braces: most themes won't render these because we use a custom
	 * page template, but if they do (via wp_body_open or hooks), they shouldn't
	 * show through the constellation. */
	position: relative;
	z-index: 0;
}

/* ============================================================
 *  Medieval music toast — bottom centre, PRESS M to MUTE
 * ============================================================ */
.etim-music-toast {
	position: fixed;
	left: 50%;
	bottom: 28px;
	transform: translate(-50%, 18px);
	z-index: 9999;

	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 22px;

	font-family: 'Cormorant Garamond', Garamond, 'Times New Roman', serif;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #2a1d0c;

	background:
		linear-gradient(180deg, rgba(255, 246, 222, 0.96) 0%, rgba(232, 214, 175, 0.96) 100%);
	border: 1px solid rgba(164, 123, 60, 0.55);
	border-radius: 2px;
	box-shadow:
		0 1px 0 rgba(255, 246, 222, 0.85) inset,
		0 0 0 1px rgba(60, 42, 18, 0.08),
		0 8px 24px rgba(28, 22, 16, 0.28),
		0 2px 6px rgba(28, 22, 16, 0.18);

	opacity: 0;
	pointer-events: none;
	transition: opacity 600ms ease, transform 600ms ease, filter 240ms ease;
	cursor: pointer;
	user-select: none;
	white-space: nowrap;
}

.etim-music-toast::before,
.etim-music-toast::after {
	content: '';
	position: absolute;
	left: 6px;
	right: 6px;
	height: 1px;
	background: linear-gradient(90deg, transparent 0%, rgba(164, 123, 60, 0.55) 20%, rgba(164, 123, 60, 0.55) 80%, transparent 100%);
	pointer-events: none;
}
.etim-music-toast::before { top: 3px; }
.etim-music-toast::after  { bottom: 3px; }

.etim-music-toast.is-visible {
	opacity: 1;
	transform: translate(-50%, 0);
	pointer-events: auto;
}

.etim-music-toast__ornament {
	color: #a47b3c;
	font-size: 13px;
	line-height: 1;
	text-shadow: 0 1px 0 rgba(255, 246, 222, 0.6);
}

.etim-music-toast__key {
	display: inline-block;
	min-width: 22px;
	padding: 2px 8px;
	font-family: 'Cormorant Garamond', Garamond, serif;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0;
	color: #f3e6c4;
	text-align: center;
	background: linear-gradient(180deg, #3a2818 0%, #1c1308 100%);
	border: 1px solid #a47b3c;
	border-radius: 2px;
	box-shadow:
		0 1px 0 rgba(255, 235, 190, 0.25) inset,
		0 -1px 0 rgba(0, 0, 0, 0.45) inset,
		0 1px 2px rgba(28, 22, 16, 0.35);
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
}

.etim-music-toast__text {
	color: #2a1d0c;
}

.etim-music-toast.is-muted {
	filter: saturate(0.55);
	opacity: 0.82;
}
.etim-music-toast.is-muted .etim-music-toast__key {
	background: linear-gradient(180deg, #6a4d28 0%, #3a2814 100%);
}

.etim-music-toast.is-flash {
	filter: brightness(1.18);
}

@media (max-width: 899px), (hover: none), (pointer: coarse) {
	.etim-music-toast { display: none; }
}