/* ==========================================================================
   ZANERA — MyAAC theme · stone & parchment dark medieval
   Ported from Zanera Project React prototype.
   ========================================================================== */

:root {
	--stone-900: oklch(0.14 0.015 60);
	--stone-800: oklch(0.18 0.02 60);
	--stone-700: oklch(0.22 0.022 60);
	--stone-600: oklch(0.28 0.025 60);
	--stone-500: oklch(0.36 0.025 60);
	--stone-400: oklch(0.48 0.025 65);
	--stone-300: oklch(0.62 0.022 70);

	--parch-50:  oklch(0.96 0.025 85);
	--parch-100: oklch(0.92 0.035 82);
	--parch-200: oklch(0.88 0.04 80);
	--parch-300: oklch(0.82 0.045 78);
	--parch-400: oklch(0.72 0.05 75);

	--ink-900: oklch(0.18 0.03 50);
	--ink-700: oklch(0.32 0.035 55);
	--ink-500: oklch(0.46 0.04 60);

	--cream-100: oklch(0.94 0.02 80);
	--cream-300: oklch(0.82 0.03 78);
	--cream-500: oklch(0.66 0.035 75);

	--emerald-600: oklch(0.48 0.13 155);
	--emerald-500: oklch(0.58 0.15 155);
	--emerald-400: oklch(0.68 0.14 155);
	--emerald-300: oklch(0.78 0.10 155);

	--gold-600: oklch(0.62 0.10 80);
	--gold-500: oklch(0.72 0.10 80);
	--gold-400: oklch(0.82 0.09 82);

	--blood-500: oklch(0.48 0.16 28);

	--display: "Cinzel", "Trajan Pro", "Times New Roman", serif;
	--body: "EB Garamond", "Garamond", Georgia, serif;
	--mono: "JetBrains Mono", "Consolas", monospace;
}

* { box-sizing: border-box; }

html, body {
	margin: 0;
	padding: 0;
	background: var(--stone-900);
	color: var(--cream-100);
	font-family: var(--body);
	font-size: 18px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

body {
	background-color: var(--stone-900);
	background-image:
		radial-gradient(ellipse at top, oklch(0.22 0.025 65) 0%, transparent 55%),
		radial-gradient(ellipse at 80% 60%, oklch(0.20 0.022 70) 0%, transparent 45%);
	min-height: 100vh;
}

a { color: var(--emerald-400); text-decoration: none; }
a:hover { color: var(--emerald-300); text-decoration: underline; text-underline-offset: 4px; }

h1, h2, h3, h4 {
	font-family: var(--display);
	font-weight: 600;
	letter-spacing: 0.04em;
	margin: 0;
}

p { margin: 0 0 12px; }

.container {
	width: 100%;
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 32px;
}

/* ============== TOPBAR ============== */
.topbar {
	position: sticky;
	top: 0;
	z-index: 50;
	background: linear-gradient(180deg, var(--stone-900) 0%, oklch(0.16 0.02 60 / 0.96) 100%);
	border-bottom: 1px solid var(--stone-700);
	backdrop-filter: blur(8px);
}
.topbar-inner {
	display: flex;
	align-items: center;
	gap: 28px;
	padding: 14px 32px;
	max-width: 1320px;
	margin: 0 auto;
}
.brand {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
}
.brand:hover { text-decoration: none; }
.brand-sigil { width: 38px; height: 38px; flex: none; }
.brand-name {
	font-family: var(--display);
	font-weight: 600;
	font-size: 18px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--cream-100);
	line-height: 1;
}
.brand-sub {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.25em;
	color: var(--cream-500);
	text-transform: uppercase;
	margin-top: 4px;
}

.nav { display: flex; gap: 4px; margin-left: 12px; flex-wrap: wrap; }
.nav a {
	font-family: var(--display);
	font-size: 12.5px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: var(--cream-300);
	padding: 8px 14px;
	border-radius: 2px;
	transition: color 0.15s, background 0.15s;
}
.nav a:hover {
	color: var(--cream-100);
	background: var(--stone-700);
	text-decoration: none;
}

.topbar-spacer { flex: 1; }

.btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	font-family: var(--display);
	font-size: 12.5px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	border: 1px solid var(--stone-500);
	border-radius: 2px;
	background: transparent;
	color: var(--cream-100);
	cursor: pointer;
	text-decoration: none;
	transition: all 0.15s;
}
.btn:hover { background: var(--stone-700); border-color: var(--cream-500); text-decoration: none; color: var(--cream-100); }
.btn.primary {
	background: var(--emerald-600);
	border-color: var(--emerald-500);
	color: var(--stone-900);
}
.btn.primary:hover { background: var(--emerald-500); color: var(--stone-900); }
.btn.gold { border-color: var(--gold-500); color: var(--gold-400); }
.btn.gold:hover { background: oklch(0.72 0.10 80 / 0.1); color: var(--gold-400); }
.btn.lg { padding: 14px 26px; font-size: 13px; }

/* ============== HERO ============== */
.hero {
	position: relative;
	padding: 80px 0 60px;
	border-bottom: 1px solid var(--stone-700);
	overflow: hidden;
}
.hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse at 20% 30%, oklch(0.58 0.15 155 / 0.06) 0%, transparent 40%),
		radial-gradient(ellipse at 80% 70%, oklch(0.48 0.16 28 / 0.05) 0%, transparent 45%);
	pointer-events: none;
}
.hero-inner {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 56px;
	align-items: center;
	position: relative;
}
.hero-eyebrow {
	font-family: var(--mono);
	font-size: 11.5px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--emerald-400);
	margin-bottom: 18px;
	display: flex;
	align-items: center;
	gap: 12px;
}
.hero-eyebrow::before {
	content: "";
	width: 32px;
	height: 1px;
	background: var(--emerald-500);
}
.hero h1 {
	font-size: clamp(54px, 8vw, 96px);
	line-height: 0.95;
	letter-spacing: 0.02em;
	color: var(--cream-100);
	text-shadow:
		0 1px 0 oklch(0.96 0.025 85 / 0.08),
		0 2px 8px oklch(0 0 0 / 0.5);
	margin-bottom: 22px;
}
.hero h1 .accent { color: var(--gold-400); font-style: italic; font-weight: 500; }

.hero-tagline {
	font-size: 22px;
	color: var(--cream-300);
	font-family: var(--body);
	font-style: italic;
	max-width: 560px;
	margin-bottom: 36px;
	line-height: 1.4;
}
.hero-cta-row {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 40px;
}
.hero-meta {
	display: flex;
	gap: 36px;
	font-family: var(--mono);
	font-size: 11.5px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--cream-500);
	flex-wrap: wrap;
}
.hero-meta strong { color: var(--cream-100); font-weight: 500; }

/* ============== PARCHMENT CARD (replaces countdown) ============== */
.parchment-card {
	background: linear-gradient(180deg, var(--parch-100) 0%, var(--parch-200) 100%);
	color: var(--ink-900);
	padding: 28px 30px 24px;
	border: 1px solid var(--gold-600);
	position: relative;
	box-shadow:
		0 0 0 1px var(--stone-900),
		0 20px 60px oklch(0 0 0 / 0.5),
		inset 0 0 60px oklch(0.72 0.05 75 / 0.4);
}
.parchment-card::before,
.parchment-card::after {
	content: "";
	position: absolute;
	width: 22px;
	height: 22px;
	border: 1px solid var(--gold-600);
	background: var(--parch-100);
}
.parchment-card::before { top: -11px; left: -11px; transform: rotate(45deg); }
.parchment-card::after { bottom: -11px; right: -11px; transform: rotate(45deg); }
.parchment-card.lg { padding: 40px 36px; min-height: 420px; display: flex; flex-direction: column; justify-content: space-between; }

.parchment-label {
	font-family: var(--display);
	text-transform: uppercase;
	letter-spacing: 0.3em;
	font-size: 11.5px;
	color: var(--ink-700);
	text-align: center;
	margin-bottom: 6px;
}
.parchment-title {
	font-family: var(--display);
	text-align: center;
	font-size: 20px;
	color: var(--ink-900);
	margin-bottom: 22px;
	letter-spacing: 0.06em;
}
.parchment-meta { display: flex; flex-direction: column; gap: 0; }
.parchment-meta .pm-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding: 12px 4px;
	border-bottom: 1px dashed oklch(0.72 0.05 75 / 0.5);
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink-500);
}
.parchment-meta .pm-row:last-child { border-bottom: 0; }
.parchment-meta .pm-row strong {
	font-family: var(--display);
	color: var(--ink-900);
	font-size: 18px;
	font-weight: 600;
	letter-spacing: 0.04em;
}
.parchment-meta .pm-row strong small {
	font-family: var(--mono);
	font-size: 12px;
	color: var(--ink-500);
	font-weight: 400;
	margin-left: 4px;
}
.parchment-meta-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid oklch(0.72 0.05 75 / 0.5);
}
.parchment-meta-grid > div {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.parchment-meta-grid span {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--ink-500);
}
.parchment-meta-grid strong {
	font-family: var(--display);
	font-size: 20px;
	color: var(--ink-900);
	letter-spacing: 0.04em;
}
.parchment-cta {
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid oklch(0.72 0.05 75 / 0.5);
	text-align: center;
}
.parchment-cta code {
	font-family: var(--mono);
	font-size: 13px;
	letter-spacing: 0.18em;
	color: var(--ink-900);
	background: oklch(0.82 0.045 78 / 0.6);
	padding: 6px 12px;
	border: 1px solid var(--gold-600);
	border-radius: 2px;
	display: inline-block;
}

/* ============== STATUS STRIP ============== */
.status-strip {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	border-top: 1px solid var(--stone-700);
	border-bottom: 1px solid var(--stone-700);
	background: oklch(0.16 0.02 60 / 0.6);
}
.status-cell {
	padding: 22px 28px;
	border-right: 1px solid var(--stone-700);
	display: flex;
	align-items: center;
	gap: 16px;
}
.status-cell:last-child { border-right: 0; }
.status-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--emerald-500);
	box-shadow: 0 0 0 4px oklch(0.58 0.15 155 / 0.15), 0 0 12px var(--emerald-500);
	animation: zn-pulse 2.2s ease-in-out infinite;
	flex: none;
}
.status-dot.off {
	background: var(--blood-500);
	box-shadow: 0 0 0 4px oklch(0.48 0.16 28 / 0.15), 0 0 12px var(--blood-500);
}
@keyframes zn-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.5; }
}
.status-cell .lbl {
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--cream-500);
	margin-bottom: 4px;
}
.status-cell .val {
	font-family: var(--display);
	font-size: 22px;
	color: var(--cream-100);
	font-weight: 600;
	letter-spacing: 0.04em;
}
.status-cell .val small {
	font-family: var(--mono);
	font-size: 11px;
	color: var(--cream-500);
	letter-spacing: 0.1em;
	margin-left: 6px;
	font-weight: 400;
}

/* ============== SECTION FRAMEWORK ============== */
section {
	padding: 80px 0;
	position: relative;
}
section + section { border-top: 1px solid var(--stone-700); }
.section-header {
	margin-bottom: 50px;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}
.section-eyebrow {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--gold-500);
	margin-bottom: 12px;
	display: flex;
	align-items: center;
	gap: 12px;
}
.section-eyebrow::before { content: "❖"; color: var(--gold-500); }
.section-title {
	font-size: 42px;
	letter-spacing: 0.04em;
	color: var(--cream-100);
}
.section-sub {
	font-family: var(--body);
	font-style: italic;
	color: var(--cream-500);
	font-size: 17px;
	max-width: 560px;
	margin-top: 12px;
}
.section-link {
	font-family: var(--mono);
	font-size: 11.5px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--emerald-400);
}

/* ============== ABOUT ============== */
.about-grid {
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: 56px;
	align-items: center;
}
.about-body h2 { font-size: 42px; margin-bottom: 20px; color: var(--cream-100); }
.about-body .lead {
	font-size: 22px;
	color: var(--cream-100);
	font-style: italic;
	margin-bottom: 20px;
	line-height: 1.4;
}
.about-body p {
	color: var(--cream-300);
	font-size: 17px;
	margin: 0 0 14px;
}
.about-quote {
	margin: 0;
	padding: 18px 22px;
	border-left: 3px solid var(--gold-500);
	background: oklch(0.82 0.045 78 / 0.4);
	font-family: var(--body);
	font-style: italic;
	font-size: 17px;
	color: var(--ink-900);
}
.about-quote cite {
	display: block;
	margin-top: 8px;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ink-700);
	font-style: normal;
}

/* ============== FEATURES ============== */
.feature-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: var(--stone-700);
	border: 1px solid var(--stone-700);
}
.feature {
	background: var(--stone-800);
	padding: 32px 28px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-height: 180px;
}
.feature-icon { width: 36px; height: 36px; color: var(--gold-500); }
.feature h3 {
	font-size: 17px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--cream-100);
}
.feature p {
	margin: 0;
	color: var(--cream-300);
	font-size: 16px;
	line-height: 1.55;
}

/* ============== NEWS ============== */
.news-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: 28px;
}
.news-card {
	background: var(--stone-800);
	border: 1px solid var(--stone-700);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.news-thumb {
	height: 220px;
	border-bottom: 1px solid var(--stone-700);
}
.news-card.featured .news-thumb { height: 280px; }
.news-card.small .news-thumb { height: 140px; }
.news-body { padding: 22px 24px; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.news-tag {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: var(--emerald-400);
	align-self: flex-start;
}
.news-card h3 {
	font-size: 22px;
	color: var(--cream-100);
	letter-spacing: 0.02em;
}
.news-card.small h3 { font-size: 17px; }
.news-card p {
	color: var(--cream-300);
	font-size: 16px;
	margin: 4px 0 0;
}
.news-card.small p { font-size: 14px; }
.news-meta {
	font-family: var(--mono);
	font-size: 11px;
	color: var(--cream-500);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-top: auto;
	padding-top: 12px;
	border-top: 1px dashed var(--stone-600);
}
.news-meta a { color: var(--emerald-400); }

/* ============== LIBRARY ============== */
.library-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}
.lib-card {
	background: linear-gradient(180deg, var(--parch-100) 0%, var(--parch-200) 100%);
	color: var(--ink-900);
	padding: 26px 26px 22px;
	border: 1px solid var(--gold-600);
	position: relative;
	box-shadow: 0 0 0 1px var(--stone-900), 0 12px 30px oklch(0 0 0 / 0.4);
}
.lib-card h3 {
	font-size: 22px;
	color: var(--ink-900);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	border-bottom: 1px solid var(--gold-600);
	padding-bottom: 12px;
	margin-bottom: 14px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.lib-card h3 small {
	font-family: var(--mono);
	font-size: 10px;
	color: var(--ink-500);
	letter-spacing: 0.2em;
	font-weight: 400;
}
.lib-entries { list-style: none; margin: 0; padding: 0; }
.lib-entry {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 0;
	border-bottom: 1px dashed oklch(0.72 0.05 75 / 0.6);
	font-size: 16px;
}
.lib-entry:last-child { border-bottom: 0; }
.lib-entry-icon {
	width: 28px;
	height: 28px;
	background: var(--parch-300);
	border: 1px solid var(--gold-600);
	flex: none;
	position: relative;
}
.lib-entry-icon::before {
	content: "❖";
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ink-700);
	font-size: 11px;
}
.lib-entry-name { flex: 1; color: var(--ink-900); font-weight: 500; }
.lib-entry-meta {
	font-family: var(--mono);
	font-size: 11px;
	color: var(--ink-500);
	letter-spacing: 0.08em;
}
.lib-footer {
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid var(--gold-600);
	text-align: center;
}
.lib-footer a {
	font-family: var(--display);
	text-transform: uppercase;
	letter-spacing: 0.2em;
	font-size: 11.5px;
	color: var(--ink-700);
}
.lib-footer a:hover { color: var(--emerald-600); }

/* ============== HIGHSCORES + ONLINE ============== */
.community-grid {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: 36px;
}
.scroll-panel {
	background: var(--stone-800);
	border: 1px solid var(--stone-700);
}
.scroll-head {
	padding: 18px 24px;
	border-bottom: 1px solid var(--stone-700);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}
.scroll-head h3 {
	font-size: 18px;
	color: var(--cream-100);
	text-transform: uppercase;
	letter-spacing: 0.16em;
}
.scroll-tabs {
	display: flex;
	gap: 2px;
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}
.scroll-tabs span {
	padding: 6px 10px;
	color: var(--cream-500);
	border: 1px solid var(--stone-600);
}
.scroll-tabs span.active {
	color: var(--cream-100);
	background: var(--stone-600);
	border-color: var(--cream-500);
}
.online-count {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.18em;
	color: var(--emerald-400);
	text-transform: uppercase;
}
.hi-table { width: 100%; border-collapse: collapse; font-family: var(--mono); }
.hi-table th, .hi-table td {
	padding: 10px 18px;
	text-align: left;
	font-size: 14px;
	border-bottom: 1px solid var(--stone-700);
}
.hi-table th {
	font-family: var(--display);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.22em;
	color: var(--cream-500);
	font-weight: 500;
	background: oklch(0.16 0.02 60 / 0.6);
}
.hi-table td.rank {
	font-family: var(--display);
	color: var(--gold-500);
	width: 60px;
	font-size: 16px;
}
.hi-table td.rank.r1 { color: var(--gold-400); }
.hi-table td.name { color: var(--cream-100); font-family: var(--body); font-size: 17px; font-weight: 500; }
.hi-table td.name a { color: var(--cream-100); }
.hi-table td.name a:hover { color: var(--gold-400); text-decoration: none; }
.hi-table td.vocation { color: var(--cream-500); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; }
.hi-table td.lvl { color: var(--emerald-400); font-weight: 600; }
.hi-table tr:hover td { background: oklch(0.22 0.022 60 / 0.6); }

.online-list { padding: 8px 0; }
.online-row {
	padding: 10px 24px;
	display: grid;
	grid-template-columns: 1fr auto auto;
	gap: 16px;
	align-items: center;
	font-size: 14px;
	border-bottom: 1px solid var(--stone-700);
}
.online-row:last-child { border-bottom: 0; }
.online-row .nm { color: var(--cream-100); font-family: var(--body); font-size: 16px; }
.online-row .nm a { color: var(--cream-100); }
.online-row .nm a:hover { color: var(--gold-400); text-decoration: none; }
.online-row .voc {
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: 0.16em;
	color: var(--cream-500);
	text-transform: uppercase;
}
.online-row .lv {
	font-family: var(--display);
	color: var(--emerald-400);
	font-size: 15px;
	font-weight: 600;
}

.empty-inline {
	padding: 32px;
	text-align: center;
	color: var(--cream-500);
	font-style: italic;
	font-family: var(--body);
	font-size: 15px;
}
.empty-state {
	padding: 36px;
	text-align: center;
}
.empty-state p { color: var(--ink-700); font-style: italic; margin: 0; }

/* ============== DOWNLOAD ============== */
.download {
	background:
		radial-gradient(ellipse at center, oklch(0.22 0.025 65) 0%, transparent 60%),
		linear-gradient(180deg, var(--stone-900), var(--stone-800));
	padding: 100px 0;
	text-align: center;
	border-top: 1px solid var(--stone-700);
}
.download h2 {
	font-size: 56px;
	margin-bottom: 18px;
	letter-spacing: 0.04em;
	color: var(--cream-100);
}
.download h2 .accent { color: var(--gold-400); font-style: italic; font-weight: 500; }
.download p {
	font-size: 19px;
	color: var(--cream-300);
	font-style: italic;
	max-width: 580px;
	margin: 0 auto 36px;
}
.download-row {
	display: flex;
	gap: 16px;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 30px;
}
.download-meta {
	font-family: var(--mono);
	font-size: 11.5px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--cream-500);
	display: flex;
	gap: 28px;
	justify-content: center;
	flex-wrap: wrap;
}
.download-meta span strong { color: var(--cream-100); font-weight: 500; }

/* ============== FOOTER ============== */
.footer {
	background: var(--stone-900);
	border-top: 1px solid var(--stone-700);
	padding: 60px 0 30px;
}
.footer-grid {
	display: grid;
	grid-template-columns: 1.4fr repeat(4, 1fr);
	gap: 36px;
	margin-bottom: 40px;
}
.footer-brand .brand-name { font-size: 22px; }
.footer-brand p {
	color: var(--cream-500);
	font-size: 15px;
	margin: 18px 0;
	max-width: 280px;
}
.footer-col h4 {
	font-size: 12px;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: var(--gold-500);
	margin-bottom: 16px;
	font-family: var(--display);
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-col a { color: var(--cream-300); font-size: 15px; }
.footer-col a:hover { color: var(--cream-100); text-decoration: none; }
.footer-bottom {
	border-top: 1px solid var(--stone-700);
	padding-top: 24px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--cream-500);
}

/* ============== PLACEHOLDER (news thumb pattern) ============== */
.placeholder {
	width: 100%;
	height: 100%;
	background:
		repeating-linear-gradient(
			45deg,
			oklch(0.24 0.025 60),
			oklch(0.24 0.025 60) 8px,
			oklch(0.20 0.022 60) 8px,
			oklch(0.20 0.022 60) 16px
		);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
	color: var(--cream-500);
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	text-align: center;
	padding: 16px;
	line-height: 1.6;
}
.placeholder::before {
	content: "❖";
	position: absolute;
	top: 12px;
	left: 12px;
	color: var(--gold-500);
	font-size: 14px;
}
.placeholder::after {
	content: attr(data-label);
	position: relative;
}

/* ============== INNER PAGE WRAPPER (non-home routes) ============== */
.inner-page {
	padding: 60px 0 100px;
	min-height: 60vh;
}
.inner-page-head {
	margin-bottom: 40px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--stone-700);
}
.inner-page-head .section-title { font-size: 36px; }
.inner-page-body {
	background: var(--stone-800);
	border: 1px solid var(--stone-700);
	padding: 32px 36px;
	color: var(--cream-100);
	font-family: var(--body);
	font-size: 17px;
}
.inner-page-body a { color: var(--emerald-400); }
.inner-page-body h1, .inner-page-body h2, .inner-page-body h3 {
	color: var(--cream-100);
	margin: 24px 0 12px;
}
.inner-page-body h1:first-child, .inner-page-body h2:first-child, .inner-page-body h3:first-child { margin-top: 0; }
.inner-page-body table {
	width: 100%;
	border-collapse: collapse;
	margin: 14px 0;
	font-family: var(--mono);
	font-size: 14px;
}
.inner-page-body table td, .inner-page-body table th {
	padding: 8px 14px;
	border: 1px solid var(--stone-700);
	text-align: left;
}
.inner-page-body table th {
	background: var(--stone-700);
	color: var(--cream-100);
	font-family: var(--display);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.16em;
}
.inner-page-body table tr:nth-child(even) td { background: oklch(0.20 0.02 60 / 0.5); }
.inner-page-body input[type="text"],
.inner-page-body input[type="password"],
.inner-page-body input[type="email"],
.inner-page-body input[type="number"],
.inner-page-body select,
.inner-page-body textarea {
	background: var(--stone-900);
	border: 1px solid var(--stone-600);
	color: var(--cream-100);
	padding: 10px 14px;
	font-family: var(--mono);
	font-size: 14px;
	border-radius: 2px;
}
.inner-page-body input[type="submit"],
.inner-page-body button {
	background: var(--emerald-600);
	border: 1px solid var(--emerald-500);
	color: var(--stone-900);
	padding: 10px 22px;
	font-family: var(--display);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	cursor: pointer;
	border-radius: 2px;
}
.inner-page-body input[type="submit"]:hover,
.inner-page-body button:hover { background: var(--emerald-500); }

/* TableHeading classes that MyAAC uses widely */
.TableContainer, .TableContainer table { width: 100%; }
.TableContainer .Border_1, .TableContainer .Border_2 { border: 0 !important; background: transparent !important; }
.CaptionContainer, .CaptionInnerContainer {
	background: var(--stone-700) !important;
	color: var(--cream-100) !important;
}
.CaptionContainer img, .CaptionInnerContainer img { display: none !important; }
.Text {
	color: var(--cream-100) !important;
	font-family: var(--display) !important;
	font-size: 14px !important;
	letter-spacing: 0.16em !important;
	text-transform: uppercase !important;
	padding: 12px 16px !important;
}
.ContentContainer, .ContentInnerContainer {
	background: var(--stone-800) !important;
	border: 1px solid var(--stone-700);
}
.TableContentContainer, .TableContent {
	background: transparent !important;
	color: var(--cream-100) !important;
}
.LabelV { color: var(--cream-500) !important; font-family: var(--mono) !important; font-size: 11px !important; letter-spacing: 0.16em !important; text-transform: uppercase !important; }
.PageNavigation a, .PageNavigation_active {
	color: var(--emerald-400);
	border: 1px solid var(--stone-600);
	padding: 4px 10px;
	margin: 0 2px;
	font-family: var(--mono);
	font-size: 12px;
}

/* news rendering inside inner pages (from MyAAC news_block) */
.NewsHeadline { background: transparent !important; padding: 0 !important; margin-bottom: 28px; }
.NewsHeadlineBackground { background: var(--stone-700) !important; color: var(--cream-100) !important; padding: 10px 16px; }
.NewsHeadlineText {
	color: var(--cream-100) !important;
	font-family: var(--display) !important;
	font-size: 18px !important;
	letter-spacing: 0.06em !important;
}
.NewsHeadlineDate, .NewsHeadlineDateBackground {
	color: var(--cream-500) !important;
	font-family: var(--mono) !important;
	font-size: 11px !important;
	letter-spacing: 0.18em !important;
}

/* ============== RESPONSIVE ============== */
@media (max-width: 1100px) {
	.hero-inner { grid-template-columns: 1fr; gap: 36px; }
	.feature-grid, .library-grid, .news-grid { grid-template-columns: repeat(2, 1fr); }
	.community-grid, .about-grid { grid-template-columns: 1fr; }
	.footer-grid { grid-template-columns: 1fr 1fr; }
	.nav { display: none; }
}
@media (max-width: 700px) {
	.feature-grid, .library-grid, .news-grid { grid-template-columns: 1fr; }
	.status-strip { grid-template-columns: 1fr 1fr; }
	.status-cell:nth-child(2) { border-right: 0; }
	.status-cell:nth-child(1), .status-cell:nth-child(2) { border-bottom: 1px solid var(--stone-700); }
	.footer-grid { grid-template-columns: 1fr; }
	.hero h1 { font-size: 56px; }
	.download h2 { font-size: 36px; }
	.section-title { font-size: 30px; }
	.topbar-inner { flex-wrap: wrap; gap: 12px; padding: 12px 16px; }
	.container { padding: 0 16px; }
	section { padding: 56px 0; }
}