/**
 * Étoile Morph -- design system.
 *
 * Faithful port of the prototype's index.css plus real CSS for everything the
 * prototype expressed as inline Tailwind utilities. Tailwind itself is not
 * shipped: a redistributable classic theme should not carry a build step or a
 * utility engine, and hand-written CSS lets the cascade stay legible.
 *
 * Palette, glass recipes, shimmer gradients and the silk/grain textures are
 * reproduced value-for-value from the prototype.
 */

/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
	/* Ground + ink */
	--em-abyss:        #07060a;  /* page ground, matches the shader's colAbyss */
	--em-abyss-deep:   #040306;  /* footer */
	--em-panel:        #09080c;
	--em-ink:          #f3f0e8;
	--em-ink-soft:     #d6d3cb;
	--em-ink-dim:      #a8a29e;  /* stone-400 */
	--em-ink-faint:    #78716c;  /* stone-500 */

	/* Metals */
	--em-gold:         #dfb15b;
	--em-gold-deep:    #c5963f;
	--em-gold-pale:    #f7e2ab;
	--em-crimson:      #f43f5e;
	--em-crimson-deep: #be123c;
	--em-emerald:      #34d399;

	/* Neutral scale (the prototype leaned on Tailwind's stone ramp) */
	--em-stone-700:    #44403c;
	--em-stone-800:    #292524;
	--em-stone-900:    #1c1917;
	--em-stone-950:    #0c0a09;

	/* Type -- one ratio (1.25, major third) off a 16px base, 7 steps */
	--em-t-xs:    0.64rem;   /* 10.24 */
	--em-t-sm:    0.8rem;    /* 12.8  */
	--em-t-base:  1rem;      /* 16    */
	--em-t-md:    1.25rem;   /* 20    */
	--em-t-lg:    1.563rem;  /* 25    */
	--em-t-xl:    1.953rem;  /* 31.25 */
	--em-t-2xl:   2.441rem;  /* 39    */
	--em-t-3xl:   3.052rem;  /* 48.8  */

	/* Spacing -- 4px base, every gap is a multiple */
	--em-s-1:  0.25rem;
	--em-s-2:  0.5rem;
	--em-s-3:  0.75rem;
	--em-s-4:  1rem;
	--em-s-6:  1.5rem;
	--em-s-8:  2rem;
	--em-s-12: 3rem;
	--em-s-16: 4rem;
	--em-s-20: 5rem;

	--em-radius:    1rem;
	--em-radius-lg: 1.5rem;
	--em-radius-xl: 1.75rem;

	--em-shell: 80rem;          /* max-w-7xl */
	--em-ease:  cubic-bezier(0.16, 1, 0.3, 1);

	/* Font stacks. Latin comes from the bundled faces; CJK resolves through the
	   system stack -- bundling a CJK webfont would cost megabytes. */
	--em-cjk: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei",
	          "Source Han Sans SC", "Noto Sans CJK SC", sans-serif;
	--em-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, var(--em-cjk);
	--em-editorial: "Playfair Display", Georgia, var(--em-cjk), serif;
	--em-couture: "Italiana", "Cinzel", var(--em-cjk), serif;
	--em-display: "Cinzel", "Playfair Display", var(--em-cjk), serif;
	--em-modern: "Syne", "Plus Jakarta Sans", var(--em-cjk), sans-serif;
	--em-mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ==========================================================================
   2. Reset + base
   ========================================================================== */

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

/**
 * The `hidden` attribute only carries the UA stylesheet's `display:none`, which
 * ANY author `display` declaration silently beats. A sibling theme in this
 * catalogue shipped three full-viewport overlays with `hidden` + `display:flex`
 * and painted 99.2% black over every page. This guard is not optional.
 */
[hidden] { display: none !important; }

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

@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;
	}
}

body {
	margin: 0;
	background-color: var(--em-abyss);
	color: var(--em-ink);
	font-family: var(--em-sans);
	font-size: var(--em-t-base);
	line-height: 1.6;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

::selection { background: var(--em-gold); color: #000; }

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

a { color: inherit; text-decoration: none; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--em-gold);
	outline-offset: 3px;
	border-radius: 4px;
}

h1, h2, h3, h4, h5 {
	margin: 0;
	font-family: var(--em-editorial);
	font-weight: 700;
	line-height: 1.15;
	text-wrap: balance;
}
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; }

.em-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: var(--em-s-3) var(--em-s-6);
	background: var(--em-gold);
	color: #000;
	font-weight: 700;
}
.em-skip-link:focus { left: var(--em-s-4); top: var(--em-s-4); }

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

/* Type roles */
.em-editorial { font-family: var(--em-editorial); }
.em-couture   { font-family: var(--em-couture); }
.em-display   { font-family: var(--em-display); }
.em-modern    { font-family: var(--em-modern); }
.em-mono      { font-family: var(--em-mono); }
.em-serif     { font-family: var(--em-editorial); }

/* ==========================================================================
   3. Shell + rhythm
   ========================================================================== */

.em-shell {
	width: 100%;
	max-width: var(--em-shell);
	margin-inline: auto;
	padding-inline: var(--em-s-4);
}
@media (min-width: 640px)  { .em-shell { padding-inline: var(--em-s-6); } }
@media (min-width: 1024px) { .em-shell { padding-inline: var(--em-s-8); } }

.em-section { padding-block: var(--em-s-16); }
@media (min-width: 1024px) { .em-section { padding-block: 7.5rem; } }

.em-measure { max-width: 68ch; }

.em-section-head {
	display: flex;
	flex-direction: column;
	gap: var(--em-s-6);
	padding-bottom: var(--em-s-6);
	border-bottom: 1px solid rgb(223 177 91 / 0.2);
}
@media (min-width: 768px) {
	.em-section-head { flex-direction: row; align-items: flex-end; justify-content: space-between; }
}
.em-kicker {
	display: flex; align-items: center; gap: var(--em-s-2);
	font-family: var(--em-mono);
	font-size: var(--em-t-sm);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--em-gold);
}
.em-kicker svg { width: 1rem; height: 1rem; flex-shrink: 0; }
.em-section-title {
	margin-top: var(--em-s-2);
	font-size: var(--em-t-xl);
	letter-spacing: -0.02em;
	color: #fff;
}
@media (min-width: 640px) { .em-section-title { font-size: var(--em-t-2xl); } }
.em-section-lede {
	margin-top: var(--em-s-2);
	max-width: 42rem;
	font-family: var(--em-editorial);
	font-size: var(--em-t-sm);
	color: var(--em-ink-dim);
	line-height: 1.7;
}

/* ==========================================================================
   4. Texture layers (ported verbatim)
   ========================================================================== */

.em-grain {
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100vh;
	pointer-events: none;
	z-index: 1;
	opacity: 0.22;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.em-mesh {
	background-image:
		linear-gradient(to right, rgb(223 177 91 / 0.04) 1px, transparent 1px),
		linear-gradient(to bottom, rgb(223 177 91 / 0.04) 1px, transparent 1px);
	background-size: 60px 60px;
}

#em-silk-canvas {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 0;
	opacity: 0.92;
}

/* ==========================================================================
   5. Glass + metal surfaces (ported verbatim)
   ========================================================================== */

.em-velvet {
	background: linear-gradient(145deg,
		rgb(255 255 255 / 0.04) 0%,
		rgb(18 15 23 / 0.85) 30%,
		rgb(9 7 13 / 0.95) 100%);
	backdrop-filter: blur(24px) saturate(160%);
	-webkit-backdrop-filter: blur(24px) saturate(160%);
	border: 1px solid rgb(223 177 91 / 0.18);
	box-shadow:
		0 24px 60px -15px rgb(0 0 0 / 0.85),
		0 0 1px 1px rgb(255 255 255 / 0.04),
		inset 0 1px 1px rgb(255 240 210 / 0.15);
	transition: border-color 0.45s var(--em-ease), box-shadow 0.45s var(--em-ease),
	            transform 0.45s var(--em-ease);
}
.em-velvet:hover,
.em-velvet.is-active {
	border-color: rgb(223 177 91 / 0.45);
	box-shadow:
		0 32px 70px -10px rgb(0 0 0 / 0.9),
		0 0 35px -5px rgb(223 177 91 / 0.22),
		inset 0 1px 2px rgb(255 240 210 / 0.3);
}

.em-champagne {
	background: linear-gradient(135deg, rgb(223 177 91 / 0.08) 0%, rgb(22 18 28 / 0.75) 100%);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border: 1px solid rgb(223 177 91 / 0.25);
	box-shadow: 0 20px 45px rgb(0 0 0 / 0.65), inset 0 1px 0 rgb(255 245 220 / 0.25);
}

.em-pill {
	display: inline-flex;
	align-items: center;
	gap: var(--em-s-2);
	padding: 0.25rem 0.75rem;
	border-radius: 999px;
	background: linear-gradient(135deg, rgb(223 177 91 / 0.12) 0%, rgb(30 24 38 / 0.8) 100%);
	backdrop-filter: blur(12px);
	border: 1px solid rgb(223 177 91 / 0.25);
	font-family: var(--em-mono);
	font-size: var(--em-t-xs);
	letter-spacing: 0.08em;
}

.em-gold-glow { box-shadow: 0 0 35px -5px rgb(223 177 91 / 0.35); }
.em-crimson-glow { box-shadow: 0 0 35px -5px rgb(225 29 72 / 0.4); }

.em-shimmer {
	background: linear-gradient(135deg, #fff 0%, var(--em-gold-pale) 30%, var(--em-gold) 60%, #e2c288 80%, #fff 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}
.em-shimmer-crimson {
	background: linear-gradient(135deg, #fff 0%, #fda4af 35%, var(--em-crimson) 65%, var(--em-crimson-deep) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

.em-iridescent { position: relative; }
.em-iridescent::after {
	content: '';
	position: absolute;
	inset: -1px;
	border-radius: inherit;
	padding: 1px;
	background: linear-gradient(135deg,
		rgb(255 255 255 / 0.4) 0%,
		rgb(223 177 91 / 0.6) 30%,
		rgb(244 63 94 / 0.5) 65%,
		rgb(168 85 247 / 0.4) 100%);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
}

/* ==========================================================================
   6. Motion
   --------------------------------------------------------------------------
   The prototype referenced `animate-[marquee_38s_linear_infinite]` and a pile
   of `animate-in fade-in / zoom-in` utilities. No `marquee` keyframe existed
   anywhere in the project and tailwindcss-animate was never installed, so the
   ticker never scrolled and none of the nine entrances animated. Both are real
   here.
   ========================================================================== */

@keyframes em-marquee {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}
@keyframes em-fade-in    { from { opacity: 0; } to { opacity: 1; } }
@keyframes em-rise-in    { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: none; } }
@keyframes em-zoom-in    { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes em-slide-right{ from { opacity: 0; transform: translate3d(24px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes em-ping {
	75%, 100% { transform: scale(2); opacity: 0; }
}
@keyframes em-spin { to { transform: rotate(360deg); } }
@keyframes em-silk-drape {
	0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
	50%      { transform: translateY(-8px) rotate(1deg) scale(1.02); }
}

.em-anim-fade  { animation: em-fade-in 500ms var(--em-ease) both; }
.em-anim-rise  { animation: em-rise-in 600ms var(--em-ease) both; }
.em-anim-zoom  { animation: em-zoom-in 320ms var(--em-ease) both; }
.em-anim-slide { animation: em-slide-right 420ms var(--em-ease) both; }
.em-drape      { animation: em-silk-drape 12s ease-in-out infinite; }

.em-ping {
	display: inline-block;
	width: 0.375rem; height: 0.375rem;
	border-radius: 999px;
	background: var(--em-gold);
	position: relative;
}
.em-ping::after {
	content: '';
	position: absolute; inset: 0;
	border-radius: inherit;
	background: inherit;
	animation: em-ping 1.6s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/* Scroll-reveal: content is present in the DOM and styled even with JS off --
   the class is only added by JS, so crawlers and no-JS visitors see everything. */
.em-reveal { opacity: 0; transform: translate3d(0, 18px, 0); }
.em-reveal.is-in {
	opacity: 1;
	transform: none;
	transition: opacity 700ms var(--em-ease), transform 700ms var(--em-ease);
}
@media (prefers-reduced-motion: reduce) {
	.em-reveal { opacity: 1; transform: none; }
	.em-ping::after, .em-drape { animation: none; }
}

/* ==========================================================================
   7. Masthead
   ========================================================================== */

.em-masthead {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 40;
	background: rgb(7 6 10 / 0.85);
	backdrop-filter: blur(32px);
	-webkit-backdrop-filter: blur(32px);
	border-bottom: 1px solid rgb(223 177 91 / 0.2);
}
.em-masthead-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--em-s-4);
	height: 5rem;
}
.em-logo { display: block; text-align: left; }
.em-logo-word {
	display: flex; align-items: center; gap: var(--em-s-2);
	font-family: var(--em-couture);
	font-size: var(--em-t-md);
	font-weight: 700;
	letter-spacing: 0.25em;
}
@media (min-width: 640px) { .em-logo-word { font-size: var(--em-t-lg); } }
.em-logo-sub {
	display: flex; align-items: center; gap: var(--em-s-2);
	font-family: var(--em-mono);
	font-size: var(--em-t-xs);
	letter-spacing: 0.3em;
	color: var(--em-ink-dim);
}
.em-logo-sub b { color: var(--em-gold); }

.em-nav {
	display: none;
	align-items: center;
	gap: 0.375rem;
	padding: 0.25rem;
	border-radius: 999px;
	background: rgb(28 25 23 / 0.8);
	border: 1px solid rgb(223 177 91 / 0.2);
	box-shadow: inset 0 2px 4px rgb(0 0 0 / 0.4);
}
@media (min-width: 1024px) { .em-nav { display: flex; } }
.em-nav a {
	display: flex; align-items: center; gap: 0.375rem;
	padding: 0.5rem 1rem;
	border-radius: 999px;
	font-size: var(--em-t-sm);
	letter-spacing: 0.05em;
	color: var(--em-ink-soft);
	transition: background 300ms var(--em-ease), color 300ms var(--em-ease);
	white-space: nowrap;
}
.em-nav a svg { width: 0.875rem; height: 0.875rem; }
.em-nav a:hover { color: #fff; background: rgb(41 37 36 / 0.6); }
.em-nav a[aria-current="page"] {
	background: linear-gradient(90deg, var(--em-gold), var(--em-gold-deep));
	color: #000;
	font-weight: 700;
	box-shadow: 0 0 20px rgb(223 177 91 / 0.4);
}

.em-tools { display: flex; align-items: center; gap: var(--em-s-2); }
@media (min-width: 640px) { .em-tools { gap: var(--em-s-3); } }
.em-tool {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--em-s-2);
	padding: 0.625rem;
	border-radius: 999px;
	background: rgb(28 25 23 / 0.6);
	border: 1px solid rgb(68 64 60 / 0.6);
	color: var(--em-ink-soft);
	transition: color 250ms, border-color 250ms, background 250ms;
}
.em-tool:hover { color: var(--em-gold); border-color: rgb(223 177 91 / 0.4); }
.em-tool svg { width: 1rem; height: 1rem; }
.em-tool--wide { padding: 0.375rem 0.75rem; font-family: var(--em-mono); font-size: var(--em-t-xs); }
.em-tool.is-on {
	background: rgb(223 177 91 / 0.2);
	border-color: var(--em-gold);
	color: var(--em-gold);
	box-shadow: 0 0 15px rgb(223 177 91 / 0.35);
}
.em-tool-count {
	position: absolute;
	top: -0.25rem; right: -0.25rem;
	min-width: 1rem; height: 1rem;
	padding-inline: 0.2rem;
	border-radius: 999px;
	background: var(--em-gold);
	color: #000;
	font-family: var(--em-mono);
	font-size: 0.5625rem;
	font-weight: 700;
	display: flex; align-items: center; justify-content: center;
}
.em-tool--badge { position: relative; }

.em-eq { display: inline-flex; align-items: flex-end; gap: 1px; height: 0.75rem; }
.em-eq i { width: 2px; background: var(--em-gold); animation: em-eq-bounce 1s ease-in-out infinite; }
.em-eq i:nth-child(1) { height: 100%; }
.em-eq i:nth-child(2) { height: 66%; animation-delay: 0.15s; }
.em-eq i:nth-child(3) { height: 80%; animation-delay: 0.3s; }
@keyframes em-eq-bounce { 0%, 100% { transform: scaleY(0.4); } 50% { transform: scaleY(1); } }

.em-nav-mobile {
	display: flex;
	align-items: center;
	justify-content: space-around;
	padding-block: var(--em-s-2);
	border-top: 1px solid rgb(41 37 36 / 0.8);
	font-family: var(--em-mono);
	font-size: var(--em-t-sm);
}
@media (min-width: 1024px) { .em-nav-mobile { display: none; } }
.em-nav-mobile a { padding: 0.25rem 0.5rem; color: var(--em-ink-dim); }
.em-nav-mobile a[aria-current="page"] { color: var(--em-gold); font-weight: 700; }

/* ==========================================================================
   8. Ticker
   ========================================================================== */

.em-ticker {
	position: relative;
	overflow: hidden;
	padding-block: 0.625rem;
	background: linear-gradient(90deg, var(--em-abyss), #16121d, var(--em-abyss));
	border-block: 1px solid rgb(223 177 91 / 0.2);
}
.em-ticker-inner { display: flex; align-items: center; gap: var(--em-s-3); }
.em-ticker-tag {
	flex-shrink: 0;
	display: flex; align-items: center; gap: 0.375rem;
	padding: 0.125rem 0.625rem;
	border-radius: 999px;
	background: rgb(223 177 91 / 0.15);
	border: 1px solid rgb(223 177 91 / 0.4);
	color: var(--em-gold);
	font-family: var(--em-mono);
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
.em-ticker-window { position: relative; overflow: hidden; width: 100%; }
.em-ticker-track {
	display: flex;
	align-items: center;
	gap: var(--em-s-12);
	white-space: nowrap;
	width: max-content;
	animation: em-marquee 38s linear infinite;
}
.em-ticker-window:hover .em-ticker-track,
.em-ticker-track:focus-within { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
	.em-ticker-track { animation: none; }
	.em-ticker-window { overflow-x: auto; }
}
.em-ticker-item {
	display: flex; align-items: center; gap: var(--em-s-3);
	font-family: var(--em-editorial);
	font-size: var(--em-t-sm);
	color: var(--em-ink-soft);
}
.em-ticker-item::after { content: '•'; color: rgb(223 177 91 / 0.4); font-family: var(--em-mono); }

/* ==========================================================================
   9. Buttons + chips
   ========================================================================== */

.em-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--em-s-2);
	padding: 0.75rem 1.5rem;
	border-radius: 999px;
	font-size: var(--em-t-sm);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	transition: filter 250ms, transform 250ms var(--em-ease), border-color 250ms, color 250ms;
}
.em-btn svg { width: 1rem; height: 1rem; }
.em-btn--gold {
	background: linear-gradient(90deg, var(--em-gold), var(--em-gold-deep));
	color: #000;
	box-shadow: 0 0 25px rgb(223 177 91 / 0.4);
}
.em-btn--gold:hover { filter: brightness(1.1); }
.em-btn--ghost {
	background: rgb(28 25 23 / 0.8);
	border: 1px solid rgb(223 177 91 / 0.4);
	color: var(--em-gold);
}
.em-btn--ghost:hover { color: #fff; border-color: var(--em-gold); }
.em-btn--block { width: 100%; }

.em-chip {
	display: inline-flex; align-items: center; gap: var(--em-s-2);
	padding: 0.5rem 1rem;
	border-radius: 999px;
	background: rgb(28 25 23 / 0.8);
	border: 1px solid var(--em-stone-800);
	color: var(--em-ink-soft);
	font-family: var(--em-mono);
	font-size: var(--em-t-sm);
	white-space: nowrap;
	transition: color 300ms, border-color 300ms, background 300ms;
}
.em-chip:hover { color: #fff; border-color: var(--em-stone-700); }
.em-chip[aria-pressed="true"], .em-chip.is-active {
	background: linear-gradient(90deg, var(--em-gold), var(--em-gold-deep));
	border-color: transparent;
	color: #000;
	font-weight: 700;
	box-shadow: 0 0 15px rgb(223 177 91 / 0.35);
}
.em-chip small { opacity: 0.6; font-size: var(--em-t-xs); }

.em-tag {
	display: inline-block;
	padding: 0.375rem 0.75rem;
	border-radius: 0.5rem;
	background: rgb(28 25 23 / 0.9);
	border: 1px solid rgb(68 64 60 / 0.8);
	font-family: var(--em-editorial);
	font-size: var(--em-t-sm);
	color: var(--em-ink-soft);
}
.em-tag--gold { border-color: rgb(223 177 91 / 0.3); color: var(--em-gold); }

.em-badge {
	display: inline-flex; align-items: center; gap: 0.375rem;
	padding: 0.25rem 0.875rem;
	border-radius: 999px;
	font-family: var(--em-mono);
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}
.em-badge--gold { background: var(--em-gold); color: #000; }
.em-badge--dark { background: rgb(41 37 36 / 0.8); border: 1px solid rgb(68 64 60 / 0.6); color: var(--em-ink-soft); }
.em-badge--crimson { background: rgb(76 5 25 / 0.8); border: 1px solid rgb(244 63 94 / 0.4); color: #fda4af; }

/* Swatches */
.em-swatch-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--em-s-3); }
.em-swatch {
	display: inline-flex; align-items: center; gap: var(--em-s-2);
	padding: 0.25rem 0.625rem;
	border-radius: 999px;
	background: rgb(28 25 23 / 0.9);
	border: 1px solid rgb(68 64 60 / 0.6);
	font-size: var(--em-t-sm);
	transition: border-color 250ms;
}
.em-swatch:hover { border-color: var(--em-gold); }
.em-swatch i {
	width: 0.875rem; height: 0.875rem;
	border-radius: 999px;
	border: 1px solid rgb(255 255 255 / 0.2);
	flex-shrink: 0;
}
.em-swatch b { font-family: var(--em-editorial); font-weight: 400; color: var(--em-ink-soft); }
.em-swatch code { font-family: var(--em-mono); font-size: var(--em-t-xs); color: var(--em-ink-dim); }

/* ==========================================================================
   10. Cards + grids
   ========================================================================== */

.em-grid { display: grid; gap: var(--em-s-8); }
.em-grid--2 { grid-template-columns: 1fr; }
.em-grid--3 { grid-template-columns: 1fr; }
@media (min-width: 768px)  { .em-grid--2 { grid-template-columns: repeat(2, 1fr); } .em-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .em-grid--3 { grid-template-columns: repeat(3, 1fr); } }

.em-split { display: grid; gap: var(--em-s-8); align-items: start; }
@media (min-width: 1024px) {
	.em-split { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--em-s-12); }
	.em-col-4 { grid-column: span 4; } .em-col-5 { grid-column: span 5; }
	.em-col-6 { grid-column: span 6; } .em-col-7 { grid-column: span 7; }
	.em-col-8 { grid-column: span 8; }
}

.em-card {
	border-radius: var(--em-radius-lg);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform 500ms var(--em-ease), border-color 500ms var(--em-ease), box-shadow 500ms var(--em-ease);
}
.em-card:hover { transform: translateY(-6px); }
.em-card-media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; }
.em-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--em-ease); }
.em-card:hover .em-card-media img { transform: scale(1.05); }
.em-card-scrim {
	position: absolute; inset: 0;
	background: linear-gradient(to top, rgb(0 0 0 / 0.8), rgb(0 0 0 / 0.2) 50%, transparent);
	pointer-events: none;
}
.em-card-body {
	padding: var(--em-s-6);
	display: flex; flex-direction: column; gap: var(--em-s-4);
	flex: 1;
}
.em-card-title {
	font-size: var(--em-t-md);
	line-height: 1.35;
	color: #fff;
	transition: color 250ms;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.em-card a:hover .em-card-title, .em-card:hover .em-card-title { color: var(--em-gold); }
.em-card-excerpt {
	font-family: var(--em-editorial);
	font-size: var(--em-t-sm);
	color: var(--em-ink-dim);
	line-height: 1.7;
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.em-card-foot {
	margin-top: auto;
	padding-top: var(--em-s-2);
	display: flex; align-items: center; justify-content: space-between; gap: var(--em-s-3);
}
.em-avatar { width: 1.75rem; height: 1.75rem; border-radius: 999px; object-fit: cover; border: 1px solid rgb(223 177 91 / 0.4); }
.em-avatar--lg { width: 2.75rem; height: 2.75rem; border-width: 2px; border-color: rgb(223 177 91 / 0.6); }

.em-meta {
	display: flex; align-items: center; gap: var(--em-s-4);
	font-family: var(--em-mono);
	font-size: var(--em-t-sm);
	color: var(--em-ink-dim);
}
.em-meta span { display: inline-flex; align-items: center; gap: 0.25rem; }
.em-meta svg { width: 0.875rem; height: 0.875rem; }

.em-empty {
	grid-column: 1 / -1;
	padding: var(--em-s-16) var(--em-s-6);
	text-align: center;
	border: 1px dashed rgb(223 177 91 / 0.25);
	border-radius: var(--em-radius-lg);
	background: rgb(12 10 9 / 0.5);
}
.em-empty h3 { font-size: var(--em-t-md); color: var(--em-ink-soft); margin-bottom: var(--em-s-2); }
.em-empty p { font-family: var(--em-editorial); font-size: var(--em-t-sm); color: var(--em-ink-faint); max-width: 34rem; margin-inline: auto; }

/* ==========================================================================
   11. Utility scraps used across sections
   ========================================================================== */

.em-stack   { display: flex; flex-direction: column; }
.em-stack-2 { gap: var(--em-s-2); } .em-stack-3 { gap: var(--em-s-3); }
.em-stack-4 { gap: var(--em-s-4); } .em-stack-6 { gap: var(--em-s-6); }
.em-stack-8 { gap: var(--em-s-8); }
.em-row     { display: flex; align-items: center; gap: var(--em-s-3); flex-wrap: wrap; }
.em-between { display: flex; align-items: center; justify-content: space-between; gap: var(--em-s-3); flex-wrap: wrap; }
.em-panel {
	padding: var(--em-s-4);
	border-radius: var(--em-radius);
	background: rgb(28 25 23 / 0.9);
	border: 1px solid var(--em-stone-800);
}
.em-panel--quiet { background: rgb(28 25 23 / 0.6); }
.em-hr { border: 0; border-top: 1px solid rgb(41 37 36 / 0.8); margin: 0; }
.em-scroll-x { display: flex; gap: var(--em-s-2); overflow-x: auto; padding-bottom: var(--em-s-3); scrollbar-width: none; }
.em-scroll-x::-webkit-scrollbar { display: none; }
.em-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.em-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.em-quiet { color: var(--em-ink-dim); }
.em-gold-text { color: var(--em-gold); }
.em-t-xs { font-size: var(--em-t-xs); } .em-t-sm { font-size: var(--em-t-sm); }

/* Aura blobs behind the hero */
.em-aura { position: absolute; width: 24rem; height: 24rem; border-radius: 999px; filter: blur(64px); pointer-events: none; }
.em-aura--gold { background: rgb(223 177 91 / 0.1); }
.em-aura--crimson { background: rgb(244 63 94 / 0.1); }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--em-abyss); }
::-webkit-scrollbar-thumb {
	background: #231c2c;
	border-radius: 999px;
	border: 1px solid rgb(223 177 91 / 0.25);
}
::-webkit-scrollbar-thumb:hover { background: var(--em-gold); box-shadow: 0 0 10px rgb(223 177 91 / 0.8); }