/*****************************************************************
 ** ARCANTYR theme -- Bold Typography design system for FluxCP.
 ** Poster design translated to web: type is the hero, black /
 ** white / one vermillion accent, zero radius, zero shadows.
 **
 ** Sections
 **   01  Tokens
 **   02  Base
 **   03  Type primitives
 **   04  Actions (buttons, links)
 **   05  Forms
 **   06  Masthead
 **   07  Site index (full-screen menu)
 **   08  Page shell (inner pages)
 **   09  Messages
 **   10  Tables
 **   11  Legacy Flux hooks (shop, cart, stats, ...)
 **   12  Home
 **   13  Colophon (footer)
 **   14  Motion
 **   15  Responsive
 *****************************************************************/

/* =========================================================
   01  Tokens
   ========================================================= */

:root {
	/* Color -- dark mode is the only mode */
	--bg:            #0A0A0A;
	--fg:            #FAFAFA;
	--muted:         #1A1A1A;
	--muted-fg:      #8A8A8A;  /* spec #737373 is 4.1:1 on bg; nudged to 5.7:1 for AA body text */
	--accent:        #FF3D00;
	--accent-fg:     #0A0A0A;
	--border:        #262626;
	--border-hover:  #404040;
	--input:         #1A1A1A;
	--card:          #0F0F0F;
	--ghost:         #141414;  /* decorative layered type, one step above bg */
	--ring:          #FF3D00;

	/* Type families */
	--font-sans:     "Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-display:  "Playfair Display", Georgia, "Times New Roman", serif;
	--font-mono:     "JetBrains Mono", "Fira Code", Consolas, Menlo, monospace;

	/* Type scale */
	--text-xs:   0.75rem;
	--text-sm:   0.875rem;
	--text-base: 1rem;
	--text-lg:   1.125rem;
	--text-xl:   1.25rem;
	--text-2xl:  1.5rem;
	--text-3xl:  2rem;
	--text-4xl:  2.5rem;
	--text-5xl:  3.5rem;
	--text-6xl:  4.5rem;
	--text-7xl:  6rem;
	--text-8xl:  8rem;
	--text-9xl:  10rem;

	/* Tracking */
	--track-tighter: -0.06em;
	--track-tight:   -0.04em;
	--track-normal:  -0.01em;
	--track-wide:     0.05em;
	--track-wider:    0.1em;
	--track-widest:   0.2em;

	/* Leading */
	--lead-none:    1;
	--lead-tight:   1.1;
	--lead-snug:    1.25;
	--lead-normal:  1.6;
	--lead-relaxed: 1.75;

	/* Layout */
	--content:  1200px;
	--gutter:   24px;
	--section:  80px;
	--masthead: 64px;

	/* Lines */
	--hair:  1px;
	--thick: 2px;

	/* Motion */
	--ease:     cubic-bezier(0.25, 0, 0, 1);
	--t-micro:  150ms;
	--t-std:    200ms;
	--t-slow:   500ms;
}

@media (min-width: 768px) {
	:root { --gutter: 48px; --section: 112px; }
}

@media (min-width: 1024px) {
	:root { --gutter: 64px; --section: 160px; }
}

/* =========================================================
   02  Base
   ========================================================= */

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

html {
	background: var(--bg);
	-webkit-text-size-adjust: 100%;
	scroll-padding-top: calc(var(--masthead) + 16px);
}

body {
	margin: 0;
	min-height: 100vh;
	font-family: var(--font-sans);
	font-size: var(--text-base);
	line-height: var(--lead-normal);
	letter-spacing: var(--track-normal);
	color: var(--fg);
	background-color: transparent; /* html paints --bg; lets the backdrop layer show */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

/* Backdrop: the key art as a dim, fixed layer behind everything.
   Dimmed + washed dark on the left (where text sits) so body copy
   keeps its contrast; the knight reads through on the right. */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image:
		linear-gradient(90deg, var(--bg) 0%, rgba(10, 10, 10, 0.85) 35%, rgba(10, 10, 10, 0.35) 75%, rgba(10, 10, 10, 0.55) 100%),
		linear-gradient(180deg, rgba(10, 10, 10, 0.6) 0%, transparent 25%, transparent 70%, var(--bg) 100%),
		url("../img/backdrop.jpg");
	background-image:
		linear-gradient(90deg, var(--bg) 0%, rgba(10, 10, 10, 0.85) 35%, rgba(10, 10, 10, 0.35) 75%, rgba(10, 10, 10, 0.55) 100%),
		linear-gradient(180deg, rgba(10, 10, 10, 0.6) 0%, transparent 25%, transparent 70%, var(--bg) 100%),
		image-set(url("../img/backdrop.webp") type("image/webp"), url("../img/backdrop.jpg") type("image/jpeg"));
	background-size: cover;
	background-position: center, center, 65% center;
	background-repeat: no-repeat;
	opacity: 0.35;
	filter: saturate(0.85);
}

/* Fractal-noise grain: tactile, barely there */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 9999;
	pointer-events: none;
	opacity: 0.035;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

body.is-locked { overflow: hidden; }

::selection { background: var(--accent); color: var(--accent-fg); }

img { max-width: 100%; }
a img { border: 0; }
table img { vertical-align: middle; }

hr {
	height: 0;
	margin: 48px 0;
	border: 0;
	border-top: var(--hair) solid var(--border);
}

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

.skip-link {
	position: absolute;
	left: 16px;
	top: -100px;
	z-index: 10000;
	padding: 12px 16px;
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: var(--track-wider);
	text-transform: uppercase;
	color: var(--accent-fg);
	background: var(--accent);
	text-decoration: none;
}

.skip-link:focus { top: 16px; }

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

.wrap {
	width: 100%;
	max-width: calc(var(--content) + var(--gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.center { text-align: center; }
.clear  { clear: both; }

/* =========================================================
   03  Type primitives
   ========================================================= */

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 0.5em;
	font-family: var(--font-sans);
	font-weight: 700;
	color: var(--fg);
}

h1 { font-size: var(--text-5xl); line-height: var(--lead-tight); letter-spacing: var(--track-tighter); font-weight: 800; }
h2 { font-size: var(--text-4xl); line-height: var(--lead-tight); letter-spacing: var(--track-tight);   margin-top: 1.4em; }
h3 { font-size: var(--text-2xl); line-height: var(--lead-snug);  letter-spacing: var(--track-tight);   margin-top: 1.6em; }
h4 { font-size: var(--text-xl);  line-height: var(--lead-snug);  letter-spacing: -0.02em; }
h5, h6 {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	font-weight: 500;
	letter-spacing: var(--track-wider);
	text-transform: uppercase;
	color: var(--muted-fg);
}

p { margin: 0 0 1em; max-width: 72ch; }

ul, ol { padding-left: 1.25em; }
li { margin-bottom: 0.35em; }
li::marker { color: var(--muted-fg); }

strong, b { font-weight: 700; color: var(--fg); }
em, i { font-style: italic; }
small { font-size: var(--text-sm); }

code, pre, kbd, samp { font-family: var(--font-mono); font-size: 0.9em; }

blockquote {
	margin: 32px 0;
	padding: 0 0 0 24px;
	border-left: var(--thick) solid var(--accent);
	font-family: var(--font-display);
	font-style: italic;
	font-size: var(--text-2xl);
	line-height: var(--lead-snug);
}

/* Mono label: the wide-tracked all-caps voice */
.eyebrow {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0 0 24px;
	max-width: none;
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	font-weight: 500;
	line-height: var(--lead-none);
	letter-spacing: var(--track-widest);
	text-transform: uppercase;
	color: var(--muted-fg);
}

.eyebrow__bar {
	flex: 0 0 auto;
	display: inline-block;
	width: 64px;
	height: 4px;
	background: var(--accent);
}

.eyebrow__sep { color: var(--border-hover); }

.label {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	font-weight: 500;
	letter-spacing: var(--track-wider);
	text-transform: uppercase;
	color: var(--muted-fg);
}

.serif {
	font-family: var(--font-display);
	font-style: italic;
	font-weight: 400;
	letter-spacing: 0;
}

/* =========================================================
   04  Actions
   ========================================================= */

/* Inline links: underline is the affordance */
a {
	color: var(--fg);
	text-decoration: underline;
	text-decoration-color: var(--border-hover);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	transition: color var(--t-micro) var(--ease), text-decoration-color var(--t-micro) var(--ease);
}

a:hover {
	color: var(--accent);
	text-decoration-color: var(--accent);
}

/* .cta -- the button component.
   <a class="cta cta--primary"><span>Label</span><svg/><span class="cta__line"></span></a> */
.cta {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	padding: 12px 0;
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	font-weight: 600;
	line-height: 1;
	letter-spacing: var(--track-wider);
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	color: var(--fg);
	background: none;
	border: 0;
	border-radius: 0;
	cursor: pointer;
	transition: all var(--t-micro) var(--ease);
}

.cta:hover { text-decoration: none; }
.cta:active { transform: translateY(1px); }
.cta[disabled], .cta.is-disabled { pointer-events: none; opacity: 0.5; }

.cta svg {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: square;
	transition: transform var(--t-micro) var(--ease);
}

.cta:hover svg { transform: translateX(3px); }

.cta__line {
	position: absolute;
	left: 0;
	bottom: 6px;
	width: 100%;
	height: 2px;
	background: currentColor;
	transform-origin: left center;
	transition: transform var(--t-micro) var(--ease);
}

.cta--sm { min-height: 44px; padding-block: 8px; gap: 8px; font-size: var(--text-xs); }
.cta--lg { min-height: 56px; padding-block: 16px; gap: 12px; font-size: var(--text-base); }

/* Primary: accent text, accent underline that overshoots on hover */
.cta--primary { color: var(--accent); }
.cta--primary:hover { color: var(--accent); }
.cta--primary .cta__line { background: var(--accent); }
.cta--primary:hover .cta__line { transform: scaleX(1.1); }

/* Outline: full inversion on hover */
.cta--outline {
	padding-inline: 24px;
	border: var(--hair) solid var(--fg);
}
.cta--outline:hover { color: var(--bg); background: var(--fg); }

/* Ghost: muted until hovered, hairline draws in */
.cta--ghost { padding-inline: 16px; color: var(--muted-fg); }
.cta--ghost .cta__line {
	left: 16px;
	width: calc(100% - 32px);
	height: 1px;
	transform: scaleX(0);
}
.cta--ghost:hover { color: var(--fg); }
.cta--ghost:hover .cta__line,
.cta--ghost[aria-current] .cta__line { transform: scaleX(1); }
.cta--ghost[aria-current] { color: var(--fg); }
.cta--flush { padding-inline: 0; }
.cta--flush .cta__line { left: 0; width: 100%; }

/* Native buttons emitted by stock Flux views */
:where(input[type=submit], button[type=submit], .submit_button, .btn, .button) {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	margin: 8px 24px 8px 0;
	padding: 12px 0;
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	font-weight: 600;
	line-height: 1;
	letter-spacing: var(--track-wider);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--accent);
	background: linear-gradient(var(--accent), var(--accent)) no-repeat left calc(100% - 6px) / 100% 2px;
	border: 0;
	border-radius: 0;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: all var(--t-micro) var(--ease);
}

:where(input[type=submit], button[type=submit], .submit_button, .btn, .button):hover {
	color: var(--fg);
	background-image: linear-gradient(var(--fg), var(--fg));
	text-decoration: none;
}

:where(input[type=button], input[type=reset], button:not([type]):not([class*="jodit"]), button[type=button]:not([class*="jodit"])) {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	margin: 8px 16px 8px 0;
	padding: 12px 20px;
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	font-weight: 600;
	line-height: 1;
	letter-spacing: var(--track-wider);
	text-transform: uppercase;
	color: var(--fg);
	background: transparent;
	border: var(--hair) solid var(--border-hover);
	border-radius: 0;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: all var(--t-micro) var(--ease);
}

:where(input[type=button], input[type=reset], button:not([type]):not([class*="jodit"]), button[type=button]:not([class*="jodit"])):hover {
	color: var(--bg);
	background: var(--fg);
	border-color: var(--fg);
}

:where(input[type=submit], input[type=button], input[type=reset], button:not([class*="jodit"])):active { transform: translateY(1px); }

input[disabled], button[disabled], select[disabled], textarea[disabled] {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}

/* =========================================================
   05  Forms
   ========================================================= */

label { cursor: pointer; }

input[type=text], input[type=password], input[type=email], input[type=number],
input[type=search], input[type=url], input[type=tel], input[type=date],
input[type=datetime-local], input[type=file], textarea, select {
	max-width: 100%;
	height: 48px;
	padding: 0 16px;
	font-family: var(--font-sans);
	font-size: var(--text-base); /* 16px: no iOS zoom */
	letter-spacing: var(--track-normal);
	color: var(--fg);
	background-color: var(--input);
	border: var(--hair) solid var(--border);
	border-radius: 0;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color var(--t-micro) var(--ease), background-color var(--t-micro) var(--ease);
}

input:hover:not(:focus), textarea:hover:not(:focus), select:hover:not(:focus) { border-color: var(--border-hover); }

input[type=text]:focus, input[type=password]:focus, input[type=email]:focus, input[type=number]:focus,
input[type=search]:focus, input[type=url]:focus, input[type=tel]:focus, input[type=date]:focus,
input[type=datetime-local]:focus, input[type=file]:focus, textarea:focus, select:focus {
	border-color: var(--accent);
	outline: none;
}

input::placeholder, textarea::placeholder { color: var(--muted-fg); opacity: 1; }

input[type=file] { height: auto; padding: 12px 16px; font-size: var(--text-sm); }
input[type=file]::file-selector-button {
	margin-right: 16px;
	padding: 8px 16px;
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: var(--track-wider);
	text-transform: uppercase;
	color: var(--fg);
	background: transparent;
	border: var(--hair) solid var(--fg);
	border-radius: 0;
	cursor: pointer;
}
input[type=file]::file-selector-button:hover { color: var(--bg); background: var(--fg); }

textarea {
	display: block;
	width: 100%;
	max-width: 42rem;
	height: auto;
	min-height: 160px;
	padding: 12px 16px;
	line-height: var(--lead-normal);
	resize: vertical;
}

select {
	padding-right: 44px;
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238A8A8A' stroke-width='1.5' stroke-linecap='square'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 16px 16px;
}

select[multiple], select[size] { height: auto; padding: 8px; background-image: none; }
select option { color: var(--fg); background: var(--muted); }

input[type=checkbox], input[type=radio] {
	width: 18px;
	height: 18px;
	margin: 0 8px 0 0;
	vertical-align: -3px;
	accent-color: var(--accent);
	cursor: pointer;
}

/* Stacked, editorial form layout for Flux's .generic-form tables */
.generic-form, .generic-form-div {
	margin: 32px 0;
	padding: 0;
	max-width: 42rem;
}

.generic-form-div {
	padding: 24px;
	border: var(--hair) solid var(--border);
}

.generic-form-table { width: 100%; border-collapse: collapse; }

.generic-form .generic-form-table,
.generic-form .generic-form-table > tbody,
.generic-form .generic-form-table > tbody > tr,
.generic-form .generic-form-table > tbody > tr > th,
.generic-form .generic-form-table > tbody > tr > td,
.generic-form .generic-form-table > tr,
.generic-form .generic-form-table > tr > th,
.generic-form .generic-form-table > tr > td {
	display: block;
	width: 100%;
}

.generic-form .generic-form-table > tbody > tr,
.generic-form .generic-form-table > tr { margin-bottom: 24px; }

.generic-form-table th {
	padding: 0 0 10px;
	text-align: left;
	vertical-align: top;
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	font-weight: 500;
	letter-spacing: var(--track-wider);
	text-transform: uppercase;
	color: var(--muted-fg);
}

.generic-form-table th label { display: block; padding: 0; }
.generic-form-table td { padding: 0; vertical-align: middle; color: var(--fg); }
.generic-form-table td div { padding: 4px 0; }
.generic-form-table td p { margin: 8px 0; font-size: var(--text-sm); color: var(--muted-fg); }
.generic-form-table td input[type=text],
.generic-form-table td input[type=password],
.generic-form-table td input[type=email],
.generic-form-table td input[type=number] { width: 100%; max-width: 28rem; }
.generic-form-table td input[type=checkbox] { margin-top: 4px; }
.generic-form-table td label { color: var(--fg); }

/* Non-generic-form usages of the table keep a 2-col layout */
:not(.generic-form) > .generic-form-table th { padding: 12px 24px 12px 0; }
:not(.generic-form) > .generic-form-table td { padding: 8px 0; }

.security-code { margin: 0 0 12px; width: 145px; height: 50px; }
.security-code img { display: block; }
.g-recaptcha, .no-recaptcha { margin: 8px 0; }
.multi-select { width: 100%; }
.short { width: 64px !important; }

/* Search forms (toggled open by .toggler) */
.toggler {
	margin: 24px 0 12px;
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	font-weight: 500;
	letter-spacing: var(--track-wider);
	text-transform: uppercase;
	color: var(--muted-fg);
}

.toggler a { color: var(--fg); text-decoration-color: var(--accent); text-decoration-thickness: 2px; }

.search-form { display: none; }

.search-form, .search-form2 {
	margin: 0 0 32px;
	padding: 16px 0 8px;
	border-top: var(--hair) solid var(--border);
	border-bottom: var(--hair) solid var(--border);
}

.search-form p, .search-form2 p {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	max-width: none;
	margin: 0 0 8px;
	color: var(--muted-fg);
}

.search-form label, .search-form2 label {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: var(--track-wide);
	text-transform: uppercase;
	color: var(--muted-fg);
}

.search-form input[type=text], .search-form2 input[type=text],
.search-form select, .search-form2 select {
	height: 40px;
	width: auto;
	min-width: 0;
	font-size: var(--text-sm);
}

.search-form input[type=text], .search-form2 input[type=text] { width: 110px; padding: 0 10px; }
.search-form select, .search-form2 select { padding-left: 10px; }

.search-form input[type=submit], .search-form2 input[type=submit],
.search-form input[type=button], .search-form2 input[type=button],
.search-form input[type=reset], .search-form2 input[type=reset] {
	min-height: 40px;
	margin: 0 12px 0 0;
	font-size: var(--text-xs);
}

.search-form input[type=button], .search-form2 input[type=button],
.search-form input[type=reset], .search-form2 input[type=reset] { padding: 8px 14px; }

/* WYSIWYG (Jodit, see themes/default/main/wysiwyg.php): its dark skin,
   re-pointed at our tokens. Header sets data-wysiwyg-theme="dark". */
.jodit_theme_dark {
	--jd-dark-background-color: var(--input);
	--jd-dark-background-ligher: var(--fg);
	--jd-dark-toolbar-color: var(--card);
	--jd-dark-text-color: var(--fg);
	--jd-dark-icon-color: var(--muted-fg);
	--jd-dark-border-color: var(--border);
	--jd-dark-toolbar-seperator-color1: var(--input);
	--jd-dark-toolbar-seperator-color2: var(--border);
	--jd-dark-toolbar-seperator-color3: var(--muted);
	--jd-color-border: var(--border);
	--jd-border-radius-default: 0;
	--jd-font-default: var(--font-sans);
	--jd-color-icon: var(--muted-fg);
}

.jodit-container.jodit_theme_dark:not(.jodit_inline) { border-color: var(--border); }
.jodit-container.jodit_theme_dark:not(.jodit_inline):focus-within { border-color: var(--accent); }
.jodit_theme_dark .jodit-wysiwyg { font-size: var(--text-base); line-height: var(--lead-normal); }
.jodit_theme_dark .jodit-wysiwyg a { color: var(--accent); }
.jodit_theme_dark .jodit-source__mirror { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--fg); background: var(--input); }
.generic-form:has(.jodit-container) { max-width: none; } /* editor needs the room */
.generic-form .jodit-container { width: 100%; }

/* Keep the theme's big form inputs out of Jodit's popups */
.jodit-popup-container input[type=text], .jodit-popup-container input[type=url],
.jodit-popup-container input[type=number], .jodit-popup-container select,
.jodit-container input[type=text], .jodit-container select {
	height: 32px;
	padding: 0 8px;
	font-size: var(--text-sm);
}

.jodit-popup-container input[type=checkbox] { width: 16px; height: 16px; }

/* =========================================================
   06  Masthead
   ========================================================= */

.masthead {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(10, 10, 10, 0.92);
	border-bottom: var(--hair) solid var(--border);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

.masthead__row {
	display: flex;
	align-items: center;
	gap: 8px;
	height: var(--masthead);
}

.wordmark {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-right: auto;
	font-size: var(--text-lg);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.01em;
	word-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	color: var(--fg);
}

.wordmark:hover { color: var(--fg); }

.wordmark__mark {
	display: inline-block;
	width: 10px;
	height: 10px;
	background: var(--accent);
	transition: transform var(--t-micro) var(--ease);
}

.wordmark:hover .wordmark__mark { transform: rotate(45deg); }

.masthead__quick,
.masthead__account {
	display: none;
	align-items: center;
}

.masthead__who {
	padding: 0 16px;
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: var(--track-wide);
	color: var(--muted-fg);
	white-space: nowrap;
}

.masthead__who b { color: var(--fg); font-weight: 500; }

.masthead__divider {
	width: 1px;
	height: 24px;
	margin: 0 16px;
	background: var(--border);
}

.index-toggle {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	min-height: 44px;
	margin: 0 0 0 8px;
	padding: 0;
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	font-weight: 500;
	letter-spacing: var(--track-widest);
	text-transform: uppercase;
	color: var(--fg);
	background: none;
	border: 0;
	cursor: pointer;
}

.index-toggle:hover { color: var(--accent); background: none; border: 0; }

.index-toggle__icon {
	position: relative;
	display: inline-block;
	width: 20px;
	height: 20px;
}

.index-toggle__icon::before,
.index-toggle__icon::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 2px;
	background: currentColor;
	transition: transform var(--t-micro) var(--ease);
}

.index-toggle__icon::before { top: 6px; }
.index-toggle__icon::after  { bottom: 6px; }
.index-toggle:hover .index-toggle__icon::after { transform: scaleX(0.6); transform-origin: right; }

/* =========================================================
   07  Site index -- the full-screen menu
   ========================================================= */

.site-index {
	position: fixed;
	inset: 0;
	z-index: 1000;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	color: var(--fg);
	background: var(--bg);
	border: 0;
}

.site-index:not([open]) { display: none; }
.site-index::backdrop { background: var(--bg); }

.site-index[open] { animation: index-in var(--t-std) var(--ease); }

@keyframes index-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.site-index__bar {
	position: sticky;
	top: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	height: var(--masthead);
	background: var(--bg);
	border-bottom: var(--hair) solid var(--border);
}

.site-index__close .index-toggle__icon::before { top: 9px; transform: rotate(45deg); }
.site-index__close .index-toggle__icon::after  { bottom: 9px; transform: rotate(-45deg); }
.site-index__close:hover .index-toggle__icon::after { transform: rotate(-45deg); }

.site-index__body {
	position: relative;
	padding-top: 48px;
	padding-bottom: 96px;
}

.site-index__ghost {
	position: absolute;
	right: calc(var(--gutter) * -0.5);
	bottom: 0;
	z-index: -1;
	font-size: var(--text-9xl);
	font-weight: 900;
	line-height: 0.8;
	letter-spacing: var(--track-tighter);
	text-transform: uppercase;
	color: var(--ghost);
	pointer-events: none;
	user-select: none;
}

.site-index__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 48px 32px;
}

.site-index__group { margin: 0; }

.site-index__label {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin: 0 0 16px;
	padding-bottom: 12px;
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	font-weight: 500;
	line-height: 1;
	letter-spacing: var(--track-widest);
	text-transform: uppercase;
	color: var(--muted-fg);
	border-bottom: var(--hair) solid var(--border);
}

.site-index__num { color: var(--accent); }

.site-index__list { margin: 0; padding: 0; list-style: none; }
.site-index__list li { margin: 0; }

.site-index__link {
	position: relative;
	display: inline-block;
	padding: 4px 0;
	font-size: var(--text-2xl);
	font-weight: 700;
	line-height: var(--lead-snug);
	letter-spacing: var(--track-tight);
	text-decoration: none;
	color: var(--fg);
}

.site-index__link::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 2px;
	width: 100%;
	height: 2px;
	background: var(--accent);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--t-micro) var(--ease);
}

.site-index__link:hover,
.site-index__link[aria-current] { color: var(--accent); }
.site-index__link:hover::after,
.site-index__link[aria-current]::after { transform: scaleX(1); }

.site-index__link--ext::before {
	content: "\2197";
	display: inline-block;
	margin-right: 8px;
	font-weight: 400;
	color: var(--muted-fg);
}

.site-index__group--staff .site-index__num,
.site-index__group--staff .site-index__label { color: var(--accent); }
.site-index__group--staff .site-index__link { font-size: var(--text-lg); font-weight: 600; letter-spacing: var(--track-normal); }

.site-index__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 32px;
	margin-top: 64px;
	padding-top: 24px;
	border-top: var(--hair) solid var(--border);
}

/* Stagger groups in when the index opens */
.site-index[open] .site-index__group {
	animation: rise var(--t-slow) var(--ease) both;
	animation-delay: calc(60ms + var(--i, 0) * 60ms);
}

@keyframes rise {
	from { opacity: 0; transform: translateY(20px); }
	to   { opacity: 1; transform: none; }
}

/* =========================================================
   08  Page shell -- inner pages
   ========================================================= */

.page {
	position: relative;
	isolation: isolate;
	overflow: hidden; /* contain the ghost word */
	min-height: 60vh;
}

.page__ghost {
	position: absolute;
	top: 24px;
	right: -0.04em;
	z-index: -1;
	display: none;
	font-size: var(--text-9xl);
	font-weight: 900;
	line-height: 1;
	letter-spacing: var(--track-tighter);
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--ghost);
	pointer-events: none;
	user-select: none;
}

.page__inner {
	padding-top: 64px;
	padding-bottom: var(--section);
}

.page--home .page__inner { padding: 0; }

/* The first h2 of every stock view becomes the poster headline */
.page__inner > h2:first-of-type {
	margin: 0 0 32px;
	max-width: 14ch;
	font-size: var(--text-5xl);
	font-weight: 800;
	line-height: var(--lead-none);
	letter-spacing: var(--track-tighter);
}

.page__inner > h2:first-of-type + h3 { margin-top: 0; }

.page__inner > h2:first-of-type + p {
	font-size: var(--text-lg);
	color: var(--muted-fg);
}

.page__inner > h3 {
	padding-top: 24px;
	border-top: var(--hair) solid var(--border);
}

/* Sub menu + page menu: a mono tab strip */
.tabs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 24px;
	margin: 0 0 40px;
	padding: 0;
	border-bottom: var(--hair) solid var(--border);
}

.tabs__label {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: var(--track-widest);
	text-transform: uppercase;
	color: var(--border-hover);
}

.tabs a {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	font-weight: 500;
	letter-spacing: var(--track-wider);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--muted-fg);
}

.tabs a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	background: var(--fg);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--t-micro) var(--ease);
}

.tabs a:hover { color: var(--fg); }
.tabs a:hover::after { transform: scaleX(1); }

.tabs a.current-sub-menu { color: var(--fg); }
.tabs a.current-sub-menu::after { background: var(--accent); transform: scaleX(1); }

.tabs--page { margin-top: -16px; border-bottom-style: dashed; }

/* Credit balance on donate / purchase */
.credit-balance {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin: 0 0 40px;
	padding: 20px 0;
	border-top: var(--thick) solid var(--accent);
	border-bottom: var(--hair) solid var(--border);
}

.credit-balance .balance-text {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: var(--track-wider);
	text-transform: uppercase;
	color: var(--muted-fg);
}

.credit-balance .balance-amount {
	font-size: var(--text-4xl);
	font-weight: 800;
	line-height: 1;
	letter-spacing: var(--track-tight);
	font-variant-numeric: tabular-nums;
}

/* =========================================================
   09  Messages
   ========================================================= */

/* Session flash: full inversion, the loudest thing on the page */
.message {
	display: block;
	max-width: none;
	margin: 0 0 40px;
	padding: 16px 20px;
	font-weight: 600;
	color: var(--bg);
	background: var(--fg);
}

p.red, div.red, p.green, div.green, .notice, .note {
	display: block;
	max-width: none;
	margin: 0 0 24px;
	padding: 14px 20px;
	font-size: var(--text-base);
	background: var(--muted);
	border-left: var(--thick) solid var(--border-hover);
}

.red { color: var(--accent); }
p.red, div.red { color: var(--fg); border-left-color: var(--accent); }
p.red::before, div.red::before {
	content: "Error";
	display: block;
	margin-bottom: 4px;
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: var(--track-widest);
	text-transform: uppercase;
	color: var(--accent);
}

.green { color: var(--fg); }
p.green, div.green { border-left-color: var(--fg); }

.notice { border-left-color: var(--accent); }
.note { color: var(--muted-fg); font-size: var(--text-sm); }

.important { font-size: var(--text-lg); }
.important .server-name, .server-name { font-weight: 700; color: var(--fg); }

.keyword, .hold-hours { color: var(--accent); font-style: normal; }

.module-name { font-weight: 700; font-size: var(--text-lg); }

.request, .fs-path {
	display: inline-block;
	padding: 2px 8px;
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	color: var(--muted-fg);
	background: var(--muted);
	border: var(--hair) solid var(--border);
}

.not-applicable { color: var(--muted-fg); font-style: normal; }

/* =========================================================
   10  Tables
   ========================================================= */

table { border-collapse: collapse; border-spacing: 0; font-size: 0.9375rem; }
th, td { text-align: left; vertical-align: top; }

.horizontal-table, .vertical-table, #server_status, .woe-table,
table.table, #ironman_tiers, .install_table {
	width: 100%;
	margin: 0 0 40px;
	font-variant-numeric: tabular-nums;
}

.vertical-table { width: auto; min-width: min(100%, 42rem); }

.horizontal-table tr, .vertical-table tr, .horizontal-table td, .vertical-table td { vertical-align: middle; }

/* Header cells: the mono label voice */
.horizontal-table th, .vertical-table th, .woe-table th, table.table th, .install_table th,
#server_status tr:first-child td {
	padding: 14px 16px 14px 0;
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	font-weight: 500;
	line-height: var(--lead-snug);
	letter-spacing: var(--track-wider);
	text-transform: uppercase;
	color: var(--muted-fg);
	vertical-align: bottom;
}

.horizontal-table tr:first-child th,
#server_status tr:first-child td { border-bottom: var(--hair) solid var(--fg); }

.horizontal-table td, .woe-table td, table.table td, .install_table td, #server_status td, #server_status th {
	padding: 14px 16px 14px 0;
	border-bottom: var(--hair) solid var(--border);
}

.horizontal-table tr:hover td { background: var(--card); }
.horizontal-table th a, .horizontal-table .sortable { color: var(--muted-fg); text-decoration: none; }
.horizontal-table th a:hover { color: var(--fg); }

/* Key/value tables */
.vertical-table th {
	width: 1%;
	padding: 14px 32px 14px 0;
	white-space: nowrap;
	vertical-align: top;
	border-bottom: var(--hair) solid var(--border);
}

.vertical-table td {
	padding: 12px 32px 12px 0;
	border-bottom: var(--hair) solid var(--border);
}

.vertical-table tr:first-child th, .vertical-table tr:first-child td { border-top: var(--hair) solid var(--border); }
.vertical-table label { display: block; }
.vertical-table form { margin: 0; }
.vertical-table .td-action { text-align: right; }

.td-checkbox { text-align: center; }
.td-action, .action { color: var(--border-hover); }
.action a, .action span.anchor { color: var(--fg); cursor: pointer; }
.action a:hover, .action span.anchor:hover { color: var(--accent); }

.block-link { display: block; padding: 4px 0; }
.button-action { padding: 8px 0; }

.sortable { text-decoration: underline; text-decoration-color: var(--border-hover); }

/* Server status */
#server_status th.server, #server_status .server { font-size: var(--text-lg); font-weight: 700; color: var(--fg); }
.status { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--track-wide); text-transform: uppercase; }

.up, .down {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	font-weight: 500;
	letter-spacing: var(--track-wider);
	text-transform: uppercase;
}
.up::before, .down::before { content: ""; width: 8px; height: 8px; }
.up { color: var(--fg); }
.up::before { background: var(--fg); }
.down { color: var(--accent); }
.down::before { border: var(--thick) solid var(--accent); }

.online { color: var(--fg); }
.offline { color: var(--muted-fg); }

/* WoE */
.woe-table .server { font-weight: 700; }
.woe-table .time { color: var(--muted-fg); }

/* Rankings */
.top-ranked td { color: var(--fg); background: rgba(255, 61, 0, 0.07); }
.top-ranked td:first-child { color: var(--accent); font-weight: 800; box-shadow: inset 2px 0 0 var(--accent); }
.empty-row { display: none; }

/* Pagination */
.pages {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 4px 8px;
	margin: 40px 0 0;
	padding-top: 24px;
	font-family: var(--font-mono);
	font-size: var(--text-sm);
	color: var(--muted-fg);
	border-top: var(--hair) solid var(--border);
}

.pages a { color: var(--muted-fg); text-decoration: none; }
.pages a:hover { color: var(--fg); }
.pages .page-num { display: inline-block; min-width: 32px; padding: 6px 4px; text-align: center; }
.pages .page-prev, .pages .page-next { color: var(--fg); letter-spacing: var(--track-wide); text-transform: uppercase; font-size: var(--text-xs); }
.pages .current-page {
	color: var(--accent);
	font-weight: 700;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}

.jump-to-page {
	margin-top: 16px;
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: var(--track-wide);
	text-transform: uppercase;
	text-align: center;
	color: var(--muted-fg);
}

.jump-to-page input[type=text] { width: 72px; height: 36px; margin: 0 8px; text-align: center; }

.info-text {
	margin: 0 0 16px;
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: var(--track-wide);
	text-transform: uppercase;
	color: var(--muted-fg);
}

.info-text-total, .info-text-results { color: var(--fg); font-weight: 700; }

/* =========================================================
   11  Legacy Flux hooks
   ========================================================= */

.account-state { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; letter-spacing: var(--track-wider); text-transform: uppercase; }
.state-pending, .state-unknown { color: var(--muted-fg); }
.state-banned, .state-permanently-banned { color: var(--accent); }
.state-permanently-banned { font-weight: 700; }

.identified.yes, .broken.no, .refineable.yes, .for-sale.yes { color: var(--fg); }
.refineable.no, .for-sale.no { color: var(--muted-fg); }
.identified.no, .broken.yes { color: var(--accent); }

.equipped td { background: var(--card); }
.normalslotted .equipped { color: var(--fg); }
.overslotted1 { color: #8FD694; }
.overslotted2 { color: #7CC4FF; }
.overslotted3 { color: #FFC266; }
.overslotted4 { color: #D69CFF; }

.item-drop-mvp td { box-shadow: inset 2px 0 0 var(--accent); }
.item-drop-card td { box-shadow: inset 2px 0 0 var(--fg); }

.mvp {
	margin-left: 4px;
	padding: 1px 5px;
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: var(--track-wider);
	vertical-align: middle;
	color: var(--accent-fg);
	background: var(--accent);
}

.monster-mode { margin: 0; padding: 0; list-style: none; }
.monster-mode li { margin: 0; padding: 4px 0; border-bottom: var(--hair) solid var(--border); }

.character-stats { border-collapse: collapse; }
.character-stats td { padding: 0 24px 8px 0; text-align: left; border: 0; }
.character-stats .stat-name { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--track-wider); text-transform: uppercase; color: var(--muted-fg); }
.character-stats .stat-value { font-size: var(--text-2xl); font-weight: 800; letter-spacing: var(--track-tight); }

.job-classes td { padding-right: 16px; border-right: var(--hair) solid var(--border); }

.emblem-server { margin: 0 0 8px; padding: 0 0 8px; font-size: var(--text-lg); border-bottom: var(--hair) solid var(--border); }
.emblem-server label { display: block; }

.block { display: block; width: 80%; height: 40px; }

.script, .script-line { font-family: var(--font-mono); font-size: var(--text-sm); }
.script-line-num { display: inline-block; margin: 0; padding: 4px 8px; color: var(--muted-fg); background: var(--card); border-right: var(--hair) solid var(--border); }
.script-line-code { display: inline-block; margin: 0; padding: 4px 8px; }

.raw-txn-log {
	width: 100%;
	padding: 16px;
	overflow: auto;
	font-family: var(--font-mono);
	font-size: var(--text-sm);
	color: var(--muted-fg);
	background: var(--card);
	border: var(--hair) solid var(--border);
}

.install_table td { text-align: center; }
.created { color: var(--fg); }
.missing { color: var(--accent); }

.loginbox-admin-menu { color: var(--muted-fg); }

/* Shops */
.shop-table { width: 100%; border-collapse: collapse; }
.shop-table td { padding: 24px 24px 24px 0; vertical-align: top; border-bottom: var(--hair) solid var(--border); }
.shop-item-image { width: 96px; text-align: center; }
.shop-item-name, .item_name {
	margin: 0 0 8px;
	font-size: var(--text-2xl);
	font-weight: 700;
	letter-spacing: var(--track-tight);
}
.shop-item-cost-qty, .shop-item-cost, .shop-item-qty { color: var(--muted-fg); }
.cost { font-size: var(--text-xl); font-weight: 800; color: var(--accent); letter-spacing: var(--track-tight); }
.qty { color: var(--fg); }
.shop-item-action { color: var(--border-hover); }
.shop-item-info { color: var(--muted-fg); }
.current-shop-category { font-weight: 700; color: var(--accent); }
.shop-server-name { color: var(--fg); }

/* Cart / donate / purchase */
.cart-items-text { margin: 0 0 16px; padding: 16px 0; border-bottom: var(--hair) solid var(--border); }
.cart-info-text, .cart-total-text { margin: 0; color: var(--muted-fg); }
.cart-item-count { font-size: var(--text-2xl); font-weight: 800; color: var(--fg); }
.cart-item-name, .cart-sub-total, .remaining-balance { color: var(--fg); font-weight: 600; }
.cart, .vertical-table.cart { width: 100%; }
.cart label { display: block; }
.cart h4 { margin: 12px 0 4px; }
.remove-from-cart { width: 100%; text-align: right; }

.checkout-text { font-size: var(--text-xl); font-weight: 700; }
.checkout-info-text { margin: 0 0 8px; color: var(--muted-fg); }

.enter-donation-amount { margin: 0 0 8px; font-size: var(--text-xl); }
.donation-amount-text { margin: 0; font-size: var(--text-3xl); font-weight: 800; letter-spacing: var(--track-tight); text-align: center; }
.credit-amount-text { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--track-wider); text-transform: uppercase; color: var(--muted-fg); text-align: center; }
.donation-amount { color: var(--fg); }
.credit-amount { color: var(--muted-fg); }
.reset-amount-text { margin: 0; font-size: var(--text-xs); color: var(--muted-fg); text-align: center; }
.exchange-rate { font-size: var(--text-xl); font-weight: 800; color: var(--accent); }

/* CMS news (news module + legacy markup) */
.newsDiv { margin: 0 0 40px; }
.newsCont { padding: 0 0 32px; margin-bottom: 32px; border-bottom: var(--hair) solid var(--border); }
.newsDate { display: block; margin-bottom: 12px; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--track-wider); text-transform: uppercase; color: var(--muted-fg); }
.newsDate small { font-size: inherit; }
.news_link { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--track-wider); text-transform: uppercase; color: var(--accent); text-decoration-color: var(--accent); }

/* =========================================================
   12  Home
   ========================================================= */

.section { padding-block: var(--section); }
.section + .section { border-top: var(--hair) solid var(--border); }

/* Hero */
.hero {
	position: relative;
	padding-top: 64px;
	padding-bottom: 80px;
}

.hero__title {
	position: relative;
	z-index: 0;
	margin: 0 0 40px;
	max-width: none;
	font-size: clamp(3.5rem, 15vw, var(--text-9xl));
	font-weight: 900;
	line-height: 0.88;
	letter-spacing: var(--track-tighter);
	word-spacing: 0.08em;
	text-transform: uppercase;
	overflow-wrap: anywhere;
}

/* Layered type: an offset duplicate in border color reads as depth */
.hero__title::before {
	content: attr(data-text);
	position: absolute;
	top: 0.035em;
	left: 0.035em;
	width: 100%; /* wrap exactly like the real title */
	z-index: -1;
	color: var(--border);
	pointer-events: none;
}

.hero__title .accent { color: var(--accent); }

.page__inner > h2:first-of-type,
.section-head__title,
.finale__title,
.dispatch__title,
.ledger__title,
.site-index__link { word-spacing: 0.08em; }

.hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 32px;
	align-items: end;
}

.hero__lede {
	margin: 0;
	max-width: 22ch;
	font-family: var(--font-display);
	font-style: italic;
	font-size: var(--text-3xl);
	font-weight: 400;
	line-height: var(--lead-tight);
	letter-spacing: -0.01em;
	color: var(--fg);
}

.hero__copy { margin: 0; max-width: 42ch; font-size: var(--text-lg); color: var(--muted-fg); }

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 32px;
	margin-top: 8px;
}

/* Stats strip */
.stats {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: var(--hair) solid var(--border);
	border-bottom: var(--hair) solid var(--border);
}

.stats__item {
	position: relative;
	margin: 0;
	padding: 32px 0;
	border-bottom: var(--hair) solid var(--border);
}

.stats__item:last-child { border-bottom: 0; }

.stats__label { display: block; margin-bottom: 16px; }

.stats__value {
	display: block;
	font-size: var(--text-6xl);
	font-weight: 800;
	line-height: var(--lead-none);
	letter-spacing: var(--track-tighter);
	font-variant-numeric: tabular-nums;
	transition: color var(--t-micro) var(--ease);
}

.stats__unit { color: var(--accent); font-weight: 400; margin-left: 0.04em; }

.stats__note {
	display: block;
	margin-top: 12px;
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: var(--track-wide);
	color: var(--muted-fg);
}

.stats__note .up, .stats__note .down { font-size: inherit; }

/* Section heading: huge, left, with a numbered mono index */
.section-head {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
	margin-bottom: 56px;
}

.section-head__title {
	margin: 0;
	font-size: clamp(var(--text-5xl), 9vw, var(--text-8xl));
	font-weight: 900;
	line-height: 0.9;
	letter-spacing: var(--track-tighter);
	text-transform: uppercase;
}

.section-head__aside { margin: 0; max-width: 36ch; color: var(--muted-fg); }

/* Dispatches (news) + ledgers (feeds): an asymmetric 7/5 */
.split {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 80px;
}

.dispatch { margin: 0; padding: 0; list-style: none; counter-reset: dispatch; }

.dispatch__item {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 8px;
	margin: 0;
	padding: 32px 0 40px;
	border-top: var(--hair) solid var(--border);
	transition: border-color var(--t-micro) var(--ease);
}

.dispatch__item:hover { border-top-color: var(--fg); }

.dispatch__num {
	font-family: var(--font-mono);
	font-size: var(--text-sm);
	font-weight: 500;
	color: var(--border-hover);
	transition: color var(--t-micro) var(--ease);
}

.dispatch__item:hover .dispatch__num { color: var(--accent); }

.dispatch__meta { margin: 0 0 8px; }

.dispatch__title {
	margin: 0 0 16px;
	font-size: var(--text-3xl);
	font-weight: 800;
	line-height: var(--lead-tight);
	letter-spacing: var(--track-tight);
}

.dispatch__body { color: var(--muted-fg); max-width: 60ch; overflow-wrap: anywhere; }
.dispatch__body p { margin-bottom: 0.8em; }
.dispatch__body a { color: var(--fg); }
.dispatch__body img { height: auto; }

.dispatch__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin-top: 8px; }

.ledger { margin: 0 0 64px; }
.ledger:last-child { margin-bottom: 0; }

.ledger__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding-bottom: 16px;
	border-bottom: var(--hair) solid var(--fg);
}

.ledger__title {
	margin: 0;
	font-size: var(--text-3xl);
	font-weight: 800;
	line-height: 1;
	letter-spacing: var(--track-tight);
}

.ledger__list { margin: 0; padding: 0; list-style: none; }

.ledger__item {
	display: grid;
	grid-template-columns: 16px 1fr;
	gap: 4px 12px;
	margin: 0;
	padding: 16px 0;
	border-bottom: var(--hair) solid var(--border);
}

.ledger__item::before {
	content: "";
	grid-row: 1 / span 2;
	width: 8px;
	height: 8px;
	margin-top: 7px;
	background: var(--fg);
}

.ledger--deaths .ledger__item::before { background: var(--accent); }
.ledger__item--empty { display: block; color: var(--muted-fg); }
.ledger__item--empty::before { display: none; }

.ledger__msg { font-size: var(--text-base); line-height: var(--lead-snug); overflow-wrap: anywhere; }
.ledger__time { grid-column: 2; }

/* Finale: the inverted closing slab */
.finale {
	position: relative;
	overflow: hidden;
	color: var(--bg);
	background: var(--fg);
}

.finale ::selection { background: var(--bg); color: var(--fg); }

.finale__inner {
	position: relative;
	padding-block: var(--section);
}

.finale__title {
	margin: 0 0 40px;
	max-width: 12ch;
	font-size: clamp(var(--text-5xl), 10vw, var(--text-8xl));
	font-weight: 900;
	line-height: 0.9;
	letter-spacing: var(--track-tighter);
	color: var(--bg);
}

.finale__title .serif { font-weight: 400; letter-spacing: -0.02em; }

.finale .eyebrow { color: #525252; }

.finale .cta { color: var(--bg); }
.finale .cta--primary .cta__line { background: var(--accent); }
.finale .cta--primary:hover { color: var(--bg); }
.finale .cta--outline { border-color: var(--bg); }
.finale .cta--outline:hover { color: var(--fg); background: var(--bg); }
.finale :focus-visible { outline-color: var(--bg); }

.finale__actions { display: flex; flex-wrap: wrap; gap: 8px 40px; align-items: center; }

.finale__ghost {
	position: absolute;
	right: -0.05em;
	bottom: -0.2em;
	display: none;
	font-size: var(--text-9xl);
	font-weight: 900;
	line-height: 1;
	letter-spacing: var(--track-tighter);
	color: #EDEDED;
	pointer-events: none;
	user-select: none;
}

/* =========================================================
   13  Colophon (footer)
   ========================================================= */

.colophon {
	position: relative;
	overflow: hidden;
	border-top: var(--hair) solid var(--border);
}

.colophon__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 40px 24px;
	padding-top: 80px;
	padding-bottom: 64px;
}

.colophon__brand { grid-column: 1 / -1; }

.colophon__statement {
	margin: 16px 0 0;
	max-width: 20ch;
	font-family: var(--font-display);
	font-style: italic;
	font-size: var(--text-2xl);
	line-height: var(--lead-snug);
	color: var(--fg);
}

.colophon__label { display: block; margin: 0 0 16px; }

.colophon__list { margin: 0; padding: 0; list-style: none; }
.colophon__list li { margin: 0; }

.colophon__list a {
	display: inline-block;
	padding: 6px 0;
	font-size: var(--text-sm);
	color: var(--muted-fg);
	text-decoration: none;
}

.colophon__list a:hover { color: var(--fg); text-decoration: underline; text-decoration-color: var(--accent); }

.colophon__wordmark {
	display: block;
	margin: 0 0 -0.12em calc(var(--gutter) - 0.04em);
	font-size: 22vw;
	font-weight: 900;
	line-height: 0.8;
	letter-spacing: var(--track-tighter);
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--ghost);
	user-select: none;
	pointer-events: none;
}

.colophon__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 32px;
	padding-top: 20px;
	padding-bottom: 20px;
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: var(--track-wide);
	color: var(--muted-fg);
	border-top: var(--hair) solid var(--border);
	position: relative;
	background: var(--bg);
}

.colophon__bar a { color: var(--muted-fg); }
.colophon__bar a:hover { color: var(--fg); }
.colophon__spacer { flex: 1 1 auto; }

.picker {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-transform: uppercase;
	letter-spacing: var(--track-wider);
}

.picker select {
	height: 36px;
	padding: 0 36px 0 12px;
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	background-position: right 10px center;
	background-color: transparent;
}

/* =========================================================
   14  Motion
   ========================================================= */

/* Hidden only when JS is present to reveal them */
.js [data-reveal] {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
	transition-delay: calc(100ms + var(--i, 0) * 80ms);
}

.js [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 1ms !important;
		animation-delay: 0ms !important;
		transition-duration: 1ms !important;
		transition-delay: 0ms !important;
	}
	.js [data-reveal] { opacity: 1; transform: none; }
}

/* =========================================================
   15  Responsive (mobile first)
   ========================================================= */

/* Wide data tables scroll inside themselves, never the page */
@media (max-width: 1023px) {
	.horizontal-table, .vertical-table, #server_status, .woe-table, .shop-table {
		display: block;
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.horizontal-table th, .horizontal-table td { white-space: nowrap; }
}

@media (min-width: 640px) {
	.stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.stats__item { padding: 40px 32px 40px 0; border-bottom: 0; }
	.stats__item:nth-child(n+3) { border-top: var(--hair) solid var(--border); }
	.stats__item:nth-child(2n) { padding-left: 32px; border-left: var(--hair) solid var(--border); }
	.site-index__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
	h1 { font-size: var(--text-6xl); }
	.page__inner > h2:first-of-type { font-size: var(--text-6xl); }
	.page__inner { padding-top: 96px; }
	.hero { padding-top: 96px; padding-bottom: 112px; }
	.hero__lede { font-size: var(--text-4xl); }
	.stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.stats__item,
	.stats__item:nth-child(2n) { padding: 48px 32px; border-top: 0; border-left: var(--hair) solid var(--border); }
	.stats__item:nth-child(n+3) { border-top: 0; }
	.stats__item:first-child { padding-left: 0; border-left: 0; }
	.stats__value { font-size: var(--text-7xl); }
	.stats__item:hover .stats__value { color: var(--accent); }
	.dispatch__item { grid-template-columns: 64px 1fr; gap: 24px; }
	.colophon__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.masthead__account { display: flex; }
}

@media (min-width: 1024px) {
	.page__ghost { display: block; }
	.page__inner > h2:first-of-type { font-size: var(--text-7xl); max-width: 16ch; }
	.hero__title { font-size: clamp(var(--text-8xl), 13vw, 12rem); }
	.hero__grid { grid-template-columns: 7fr 5fr; gap: 64px; }
	.hero__side { padding-bottom: 12px; }
	.split { grid-template-columns: 7fr 5fr; gap: 96px; }
	.split__aside { padding-top: 8px; }
	.section-head { grid-template-columns: 8fr 4fr; align-items: end; gap: 64px; }
	.finale__ghost { display: block; }
	.site-index__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 64px 48px; }
	.site-index__link { font-size: var(--text-3xl); }
	.colophon__grid { grid-template-columns: 2fr repeat(4, minmax(0, 1fr)); }
	.colophon__brand { grid-column: auto; }
	.masthead__quick { display: flex; }
	.generic-form-table td input[type=text],
	.generic-form-table td input[type=password],
	.generic-form-table td input[type=email] { height: 56px; }
}

@media (min-width: 1280px) {
	.site-index__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Stock views sometimes hard-code pixel widths; don't let them break mobile */
@media (max-width: 639px) {
	.page__inner > h2:first-of-type { overflow-wrap: anywhere; }
	.colophon__wordmark { font-size: 24vw; }
	input[type=text], input[type=password], input[type=email], select { max-width: 100%; }
	.generic-form-table td input[type=text],
	.generic-form-table td input[type=password],
	.generic-form-table td input[type=email] { max-width: none; }
}

/* Print: strip the chrome, keep the type */
@media print {
	body::before, body::after, .masthead, .site-index, .colophon, .page__ghost { display: none !important; }
	body { color: #000; background: #fff; }
}