.Content .spell-catalog {
	display: grid;
	gap: 18px;
	color: var(--nx-ink);
}

.Content .spell-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(280px, .72fr);
	gap: 22px;
	align-items: center;
	padding: 24px;
	border: 1px solid #0c302d;
	border-radius: var(--nx-radius-md);
	background:
		radial-gradient(circle at 12% 10%, rgba(225, 193, 113, .13), transparent 34%),
		linear-gradient(135deg, #173f3b, #0d2c2b);
	box-shadow: inset 0 1px rgba(255, 255, 255, .08), var(--nx-shadow-sm);
}

.Content .spell-eyebrow {
	margin: 0 0 5px;
	color: var(--nx-gold-soft);
	font: 800 10px/1.3 var(--nx-font-ui);
	letter-spacing: .13em;
	text-transform: uppercase;
}

.Content .spell-hero h1 {
	margin: 0;
	color: #fff7e6;
	font: 700 clamp(28px, 4vw, 40px)/1.05 var(--nx-font-display);
	letter-spacing: -.025em;
	text-shadow: 0 2px 0 rgba(0, 0, 0, .28);
}

.Content .spell-hero__copy > p:last-child {
	max-width: 620px;
	margin: 10px 0 0;
	color: #d9e5df;
	font-size: 13px;
}

.Content .spell-hero__metrics {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	margin: 0;
}

.Content .spell-hero__metrics div {
	min-width: 0;
	padding: 12px 8px;
	border: 1px solid rgba(229, 199, 126, .3);
	border-radius: var(--nx-radius-sm);
	background: rgba(255, 255, 255, .055);
	text-align: center;
}

.Content .spell-hero__metrics dt {
	color: #c8d9d2;
	font: 700 9px/1.25 var(--nx-font-ui);
	letter-spacing: .04em;
	text-transform: uppercase;
}

.Content .spell-hero__metrics dd {
	margin: 4px 0 0;
	color: #fff3d5;
	font: 700 24px/1 var(--nx-font-display);
}

.Content .spell-guidance {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 12px;
	align-items: start;
	padding: 14px 16px;
	border: 1px solid #b99965;
	border-left: 4px solid var(--nx-gold);
	border-radius: var(--nx-radius-sm);
	background: #f4e3c3;
	box-shadow: var(--nx-shadow-sm);
}

.Content .spell-guidance__icon {
	display: grid;
	width: 28px;
	height: 28px;
	place-items: center;
	border-radius: 50%;
	background: var(--nx-green);
	color: #fff2cc;
	font-size: 15px;
}

.Content .spell-guidance strong {
	color: var(--nx-green-strong);
	font: 700 14px var(--nx-font-display);
}

.Content .spell-guidance p {
	margin: 3px 0 0;
	color: var(--nx-ink-soft);
	font-size: 12px;
}

.Content .spell-toolbar {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 12px;
	align-items: end;
	padding: 16px;
	border: 1px solid var(--nx-line);
	border-radius: var(--nx-radius-md);
	background: linear-gradient(180deg, #ead6b3, #dfc59c);
	box-shadow: var(--nx-shadow-sm);
}

.Content .spell-field {
	display: grid;
	grid-column: span 3;
	gap: 5px;
	min-width: 0;
}

.Content .spell-field--search {
	grid-column: span 6;
}

.Content .spell-field:nth-of-type(4),
.Content .spell-field:nth-of-type(5),
.Content .spell-filter-button {
	grid-column: span 4;
}

.Content .spell-field label {
	color: #4a3523;
	font: 800 10px/1.25 var(--nx-font-ui);
	letter-spacing: .035em;
	text-transform: uppercase;
}

.Content .spell-field input,
.Content .spell-field select {
	width: 100%;
	height: 42px;
	min-height: 42px;
	border-color: #9d7c52;
	background: #fff9ed;
}

.Content .spell-filter-button {
	height: 42px;
	min-height: 42px;
	padding: 9px 16px;
	border: 1px solid #123a36;
	border-radius: var(--nx-radius-sm);
	background: linear-gradient(#327067, #194942);
	box-shadow: inset 0 1px rgba(255, 255, 255, .14), 0 3px 8px rgba(17, 46, 42, .2);
	color: #fff8e9;
	font: 800 11px/1.2 var(--nx-font-ui);
	letter-spacing: .035em;
	text-transform: uppercase;
	cursor: pointer;
}

.Content .spell-filter-button:hover {
	background: linear-gradient(#3b7d72, #20574f);
}

.Content .spell-filter-button:focus-visible,
.Content .spell-field input:focus-visible,
.Content .spell-field select:focus-visible,
.Content .spell-details summary:focus-visible,
.Content .spell-pagination a:focus-visible {
	outline: 3px solid rgba(45, 130, 146, .42);
	outline-offset: 2px;
}

.Content .spell-results {
	display: flex;
	min-height: 42px;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 9px 13px;
	border: 1px solid var(--nx-line);
	border-radius: var(--nx-radius-sm);
	background: #f7ead3;
}

.Content .spell-results > div {
	display: flex;
	align-items: baseline;
	gap: 7px;
}

.Content .spell-results strong {
	color: var(--nx-green-strong);
	font: 700 20px/1 var(--nx-font-display);
}

.Content .spell-results span {
	color: var(--nx-ink-soft);
	font-size: 11px;
}

.Content .spell-results a {
	font-size: 11px;
}

.Content .spell-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

.Content .spell-card {
	position: relative;
	display: flex;
	min-width: 0;
	flex-direction: column;
	gap: 13px;
	padding: 16px;
	border: 1px solid #b99a70;
	border-left: 4px solid #316d65;
	border-radius: var(--nx-radius-md);
	background:
		linear-gradient(135deg, rgba(255, 255, 255, .38), transparent 46%),
		#f3e2c4;
	box-shadow: 0 5px 15px rgba(57, 36, 17, .13);
}

.Content .spell-card--conjure { border-left-color: #936b28; }
.Content .spell-card--rune { border-left-color: #6a477f; }

.Content .spell-card__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.Content .spell-card__header > div {
	display: flex;
	min-width: 0;
	flex-wrap: wrap;
	gap: 5px;
}

.Content .spell-type-badge,
.Content .spell-group-badge,
.Content .spell-premium-badge {
	display: inline-flex;
	min-height: 22px;
	align-items: center;
	padding: 4px 7px;
	border-radius: 999px;
	font: 800 9px/1 var(--nx-font-ui);
	letter-spacing: .045em;
	text-transform: uppercase;
}

.Content .spell-type-badge {
	background: #24564f;
	color: #fff8e9;
}

.Content .spell-card--conjure .spell-type-badge { background: #80591d; }
.Content .spell-card--rune .spell-type-badge { background: #68427b; }

.Content .spell-group-badge {
	border: 1px solid #b49a72;
	background: rgba(255, 255, 255, .42);
	color: #5b4631;
}

.Content .spell-premium-badge {
	flex: 0 0 auto;
	border: 1px solid #c39842;
	background: #f0d390;
	color: #5a3c11;
}

.Content .spell-card__identity h2 {
	margin: 0;
	color: #173f3b;
	font: 700 19px/1.15 var(--nx-font-display);
}

.Content .spell-card__identity code,
.Content .spell-rune-name {
	display: inline-block;
	max-width: 100%;
	margin-top: 7px;
	padding: 5px 8px;
	border: 1px solid rgba(110, 78, 42, .27);
	border-radius: 4px;
	background: rgba(255, 255, 255, .5);
	color: #623d1e;
	font: 700 12px/1.25 Consolas, "Courier New", monospace;
	overflow-wrap: anywhere;
}

.Content .spell-card__identity p {
	margin: 7px 0 0;
	color: var(--nx-ink-soft);
	font-size: 11px;
}

.Content .spell-card__stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 7px;
	margin: 0;
}

.Content .spell-card__stats div {
	min-width: 0;
	padding: 8px;
	border: 1px solid rgba(139, 103, 64, .28);
	border-radius: 5px;
	background: rgba(255, 249, 237, .62);
}

.Content .spell-card__stats dt {
	color: #745e46;
	font: 800 8px/1.2 var(--nx-font-ui);
	letter-spacing: .055em;
	text-transform: uppercase;
}

.Content .spell-card__stats dd {
	margin: 4px 0 0;
	color: #33271c;
	font: 700 12px/1.25 var(--nx-font-ui);
	overflow-wrap: anywhere;
}

.Content .spell-vocations,
.Content .spell-traits {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}

.Content .spell-vocations span,
.Content .spell-traits span {
	padding: 4px 7px;
	border: 1px solid rgba(54, 99, 89, .25);
	border-radius: 999px;
	background: rgba(39, 91, 82, .09);
	color: #285047;
	font: 700 9px/1.2 var(--nx-font-ui);
}

.Content .spell-special-fact {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 8px;
	align-items: baseline;
	padding: 9px 10px;
	border: 1px solid rgba(135, 94, 42, .28);
	border-radius: 5px;
	background: rgba(217, 180, 105, .16);
}

.Content .spell-special-fact strong {
	color: #6e4a1f;
	font-size: 10px;
	text-transform: uppercase;
}

.Content .spell-special-fact span {
	color: #4b3928;
	font-size: 11px;
}

.Content .spell-details {
	margin-top: auto;
	border-top: 1px solid rgba(126, 94, 61, .24);
}

.Content .spell-details summary {
	padding: 11px 2px 0;
	color: #145d70;
	font: 800 10px/1.3 var(--nx-font-ui);
	letter-spacing: .03em;
	cursor: pointer;
	text-transform: uppercase;
}

.Content .spell-details[open] summary {
	margin-bottom: 10px;
}

.Content .spell-details > dl {
	display: grid;
	gap: 7px;
	margin: 0 0 10px;
}

.Content .spell-details > dl div {
	display: grid;
	grid-template-columns: minmax(105px, .7fr) minmax(0, 1.3fr);
	gap: 8px;
	padding-bottom: 6px;
	border-bottom: 1px dashed rgba(114, 83, 51, .2);
}

.Content .spell-details dt {
	color: #756047;
	font: 800 9px/1.35 var(--nx-font-ui);
	text-transform: uppercase;
}

.Content .spell-details dd {
	margin: 0;
	color: #3f3023;
	font-size: 10px;
	text-align: right;
}

.Content .spell-empty {
	grid-column: 1 / -1;
	padding: 34px 20px;
	border: 1px dashed var(--nx-line);
	border-radius: var(--nx-radius-md);
	background: #f7ead3;
	text-align: center;
}

.Content .spell-empty strong {
	color: var(--nx-green-strong);
	font: 700 18px var(--nx-font-display);
}

.Content .spell-empty p {
	margin: 7px 0 10px;
	color: var(--nx-ink-soft);
}

.Content .spell-pagination {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 12px;
	align-items: center;
	padding: 11px 13px;
	border: 1px solid var(--nx-line);
	border-radius: var(--nx-radius-sm);
	background: #ead4b0;
}

.Content .spell-pagination > :last-child { justify-self: end; }
.Content .spell-pagination > span { color: var(--nx-ink-soft); font-size: 11px; }
.Content .spell-pagination a { font-size: 11px; }

.Content .spell-source-note {
	padding: 14px 16px;
	border: 1px solid rgba(68, 109, 98, .34);
	border-radius: var(--nx-radius-sm);
	background: rgba(32, 81, 73, .08);
}

.Content .spell-source-note strong {
	color: var(--nx-green-strong);
	font: 700 13px var(--nx-font-display);
}

.Content .spell-source-note p {
	margin: 4px 0 0;
	color: var(--nx-ink-soft);
	font-size: 11px;
}

@media (max-width: 980px) {
	.Content .spell-hero {
		grid-template-columns: minmax(0, 1fr);
	}

	.Content .spell-field,
	.Content .spell-field--search,
	.Content .spell-field:nth-of-type(4),
	.Content .spell-field:nth-of-type(5),
	.Content .spell-filter-button {
		grid-column: span 6;
	}
}

@media (max-width: 780px) {
	.Content .spell-catalog { gap: 14px; }
	.Content .spell-hero { padding: 18px; }
	.Content .spell-grid { grid-template-columns: minmax(0, 1fr); }
	.Content .spell-toolbar { grid-template-columns: minmax(0, 1fr); padding: 13px; }
	.Content .spell-field,
	.Content .spell-field--search,
	.Content .spell-field:nth-of-type(4),
	.Content .spell-field:nth-of-type(5),
	.Content .spell-filter-button { grid-column: 1; }
	.Content .spell-results { align-items: flex-start; flex-direction: column; }
	.Content .spell-card { padding: 14px; }
}

@media (max-width: 460px) {
	.Content .spell-hero__metrics { grid-template-columns: minmax(0, 1fr); }
	.Content .spell-card__stats { grid-template-columns: minmax(0, 1fr); }
	.Content .spell-details > dl div { grid-template-columns: minmax(0, 1fr); }
	.Content .spell-details dd { text-align: left; }
	.Content .spell-pagination { grid-template-columns: 1fr 1fr; }
	.Content .spell-pagination > span { grid-column: 1 / -1; grid-row: 1; text-align: center; }
	.Content .spell-pagination > a { grid-row: 2; }
}

@media (prefers-reduced-motion: reduce) {
	.Content .spell-catalog * { scroll-behavior: auto !important; }
}