/* f2d36563b3 */
/*
 * The same nine self-hosted skin fonts as the portal's
 * apps/core/app/assets/css/main.css, copied into fonts/ by
 * scripts/sync-fonts.sh so a shell never talks to Google's font servers at
 * request time. Latin subset only (unicode-range copied from Google's own
 * latin block, identical across every face here) -- a shell never renders
 * latin-ext text.
 *
 * Load this before tokens.css: tokens.css's --font-display/--font-body
 * name these families, so the @font-face rules need to exist first.
 */
@font-face {
	font-family: 'Cinzel';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('/a/f/f2d36563b3-cinzel-500.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Cinzel';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('/a/f/f2d36563b3-cinzel-700.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Spectral SC';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('/a/f/f2d36563b3-spectral-sc-500.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Spectral SC';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('/a/f/f2d36563b3-spectral-sc-700.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Roboto Condensed';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('/a/f/f2d36563b3-roboto-condensed-400.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Roboto Condensed';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('/a/f/f2d36563b3-roboto-condensed-700.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Source Sans 3';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('/a/f/f2d36563b3-source-sans-3-400.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Source Sans 3';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('/a/f/f2d36563b3-source-sans-3-600.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Source Sans 3';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('/a/f/f2d36563b3-source-sans-3-700.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
 * The five custom properties every shell-kit component and every shell's own
 * CSS is written against. These are the RiFT defaults, copied from the RiFT
 * brand palette so a shell looks right even before any brand-specific
 * override runs.
 *
 * A shell overrides them per its own brand two ways: statically, by
 * redeclaring the ones it wants under `:root` in its own stylesheet loaded
 * after this file; or at runtime, by shipping a local `brand.json` with a
 * `theme` object and calling `applyTheme(json)` from js/brand.js, which sets
 * these same properties on `document.documentElement.style`.
 *
 * --font-display and --font-body are the same idea, one level simpler: a
 * shell's own brand.json carries a `fonts` key and
 * apps/brand-rift/scripts/stamp-brand.mjs writes these two values in
 * straight from it, no runtime JS involved. The defaults below are RiFT's
 * own stacks (the portal's ember skin), same reasoning as the colors above:
 * a shell with no `fonts` key in its brand.json still renders with a real
 * typeface rather than a bare system fallback.
 */

:root {
	--portal-primary: #4A6078;
	--portal-surface: #E9E7DF;
	--portal-text: #2B2B2B;
	--portal-muted: #6A665C;
	--portal-accent: #B9863B;
	/* Text on top of --portal-primary (buttons). Kept separate from
	   --portal-text and --portal-surface, which describe the page, not the
	   button: a dark page surface on a saturated red made the label unreadable. */
	--portal-on-primary: #F2F0E9;
	--font-display: "Cinzel", Georgia, serif;
	--font-body: "Source Sans 3", Verdana, sans-serif;
}

/*
 * Base layout and components for a brand shell. Loaded after tokens.css.
 * Every color here is one of the five --portal-* variables -- nothing in
 * this file names a color directly, so a shell can restyle itself entirely
 * by overriding tokens.css.
 */

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var(--portal-surface);
	color: var(--portal-text);
	font-family: var(--font-body);
	line-height: 1.5;
}

a {
	color: var(--portal-accent);
}

h1,
h2,
h3 {
	font-family: var(--font-display);
}

.bf2d-shell {
	max-width: 960px;
	margin: 0 auto;
	padding: 0 1.5rem;
}

/* Header nav */

/* The frame: header pinned at the top, footer at the bottom, and only the
   middle (banner plus content, or the centred auth card) scrolls. */
body {
	height: 100svh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

header,
footer {
	flex: none;
}

.bf2d-page-scroll,
.bf2d-auth-page .bf2d-auth-main {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
}

header {
	border-bottom: 1px solid color-mix(in oklch, var(--portal-text) 12%, transparent);
}

header .bf2d-shell {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 1rem;
}

header nav {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	width: 100%;
}

/* Links marked side: right in brand.json (Register, Sign in) sit at the far
   edge; the first of them takes the slack after the left group. */
header nav a.bf2d-nav-left + a.bf2d-nav-right {
	margin-left: auto;
}

header nav a {
	color: var(--portal-text);
	font-family: var(--font-display);
	text-decoration: none;
	opacity: 0.75;
}

header nav a:hover {
	opacity: 1;
}

header nav a[aria-current='page'] {
	opacity: 1;
	color: var(--portal-accent);
	font-weight: 600;
}

/* Buttons */

.bf2d-btn {
	display: inline-block;
	padding: 0.6rem 1.2rem;
	border-radius: 0.4rem;
	border: 1px solid color-mix(in oklch, var(--portal-text) 25%, transparent);
	color: var(--portal-text);
	font-family: var(--font-display);
	text-decoration: none;
	font-weight: 600;
}

.bf2d-btn-primary {
	background: var(--portal-primary);
	border-color: var(--portal-primary);
	color: var(--portal-on-primary);
}

/* Cards */

.bf2d-card {
	background: color-mix(in oklch, var(--portal-text) 6%, var(--portal-surface));
	border: 1px solid color-mix(in oklch, var(--portal-text) 12%, transparent);
	border-radius: 0.5rem;
	padding: 1.25rem;
}

/* Hero */

.bf2d-hero-image {
	min-height: 320px;
	padding: 0;
	background: var(--brand-hero, none) center / cover no-repeat;
	border-radius: 6px;
}

/* Image-only banner: no overlay at all. Written with both classes so it
   outranks .bf2d-hero::before below, which is declared later. */
.bf2d-hero.bf2d-hero-image::before {
	content: none;
}

.bf2d-hero {
	position: relative;
	overflow: hidden;
	background: var(--brand-hero, none) center / cover no-repeat;
	min-height: 320px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.bf2d-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgb(0 0 0 / 0.35), rgb(0 0 0 / 0.6));
}

.bf2d-hero > * {
	position: relative;
}

/* Auth forms (login/register) */

/* A card that wraps a .bf2d-form caps at a comfortable reading width and centers
   in whatever wider column its page puts it in, rather than stretching to
   main.bf2d-shell's full width the way a plain .bf2d-card does. */
.bf2d-card:has(> .bf2d-form) {
	max-width: 28rem;
	margin-inline: auto;
}

/* An auth-only page (login, register): the body itself is the whole layout,
   set by templates/<template>/auth.html, no header/nav/hero/footer at all --
   just the one .bf2d-card, centred. */
.bf2d-auth-page .bf2d-auth-main {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
}

.bf2d-form {
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
}

.bf2d-field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.bf2d-field label {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 0.9rem;
}

.bf2d-field input,
.bf2d-field select {
	width: 100%;
	padding: 0.6rem 0.75rem;
	border-radius: 0.4rem;
	border: 1px solid color-mix(in oklch, var(--portal-text) 25%, transparent);
	background: var(--portal-surface);
	color: var(--portal-text);
	font-family: var(--font-body);
	font-size: 1rem;
}

.bf2d-field input:focus,
.bf2d-field select:focus {
	outline: 2px solid var(--portal-accent);
	outline-offset: 1px;
}

.bf2d-form button[type='submit'] {
	width: 100%;
}

/* Error slots stay in the DOM empty (no `hidden`, so a screen reader's
   aria-describedby reference always resolves) until auth.js writes a
   message into their textContent; visibility here tracks :not(:empty)
   rather than an attribute auth.js would have to toggle. A fixed red, not
   one of the five --portal-* tokens: an error has to read as a problem
   regardless of a brand's own accent hue (the same reasoning as
   .bf2d-hero::before's fixed black overlay above). */
.bf2d-field .bf2d-error,
.bf2d-form .bf2d-error-form {
	display: none;
	margin: 0;
	color: oklch(0.65 0.2 25);
	font-size: 0.85rem;
}

.bf2d-field .bf2d-error:not(:empty),
.bf2d-form .bf2d-error-form:not(:empty) {
	display: block;
}

.bf2d-form .bf2d-error-form:not(:empty) {
	font-weight: 600;
}

/* Status */

.bf2d-status {
	color: var(--portal-muted);
}

.bf2d-status .bf2d-is-up {
	color: var(--portal-accent);
}

.bf2d-status .bf2d-is-down {
	color: var(--portal-muted);
	opacity: 0.7;
}

@media (max-width: 640px) {
	header .bf2d-shell {
		flex-direction: column;
		align-items: flex-start;
	}

	header nav {
		gap: 0.75rem;
	}

	.bf2d-hero {
		min-height: 220px;
	}
}

/*
 * glass template: the brand image fixed behind the whole page, everything on
 * it in frosted panels. Text is fixed near-white and panels are translucent
 * white, since they sit on a picture rather than on --portal-surface; the
 * accent and primary tokens still colour links, buttons and the lights.
 */
:root {
	--t-line: rgb(255 255 255 / 0.18);
	--t-muted: rgb(255 255 255 / 0.7);
}
body.bf2d-t-glass {
	background: linear-gradient(180deg, rgb(0 0 0 / 0.55), rgb(0 0 0 / 0.82)), var(--brand-hero, none) center / cover fixed no-repeat, color-mix(in oklch, var(--portal-primary) 30%, black);
	color: rgb(255 255 255 / 0.92);
}
.bf2d-t-glass a {
	color: var(--portal-accent);
}
.bf2d-glass {
	background: rgb(0 0 0 / 0.38);
	border: 1px solid var(--t-line);
	border-radius: 14px;
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	box-shadow: 0 10px 40px rgb(0 0 0 / 0.35);
}
.bf2d-t-glass header {
	border-bottom: 0;
}
.bf2d-t-glass header .bf2d-shell {
	padding-block: 0.75rem;
}
.bf2d-glass-nav {
	width: 100%;
	padding: 0.7rem 1.1rem;
}
.bf2d-t-glass header nav a {
	color: rgb(255 255 255 / 0.9);
}
.bf2d-glass-intro {
	text-align: center;
	padding-block: clamp(2rem, 9vh, 6rem) 1.5rem;
}
.bf2d-glass-name {
	font-size: clamp(2.6rem, 7vw, 5rem);
	margin: 0;
	letter-spacing: 0.05em;
	text-shadow: 0 4px 30px rgb(0 0 0 / 0.6);
}
.bf2d-glass-tag {
	color: var(--t-muted);
	font-size: 1.15rem;
	margin: 0.6rem auto 1.6rem;
	max-width: 44ch;
}
.bf2d-glass-intro .bf2d-btn-row {
	justify-content: center;
}
.bf2d-t-glass .bf2d-btn {
	color: rgb(255 255 255 / 0.92);
	border-color: var(--t-line);
	background: rgb(0 0 0 / 0.35);
	border-radius: 999px;
}
.bf2d-t-glass .bf2d-btn-primary {
	background: var(--portal-accent);
	border-color: var(--portal-accent);
	color: var(--portal-text);
}
.bf2d-glass-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 1rem;
	margin-top: 2rem;
}
.bf2d-glass-tiles .bf2d-glass {
	padding: 0.9rem 1rem;
}
.bf2d-glass-tiles b {
	display: block;
	font-family: var(--font-display);
	font-size: 1.6rem;
	color: var(--portal-accent);
}
.bf2d-glass-tiles small {
	color: var(--t-muted);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-size: 0.7rem;
}
.bf2d-glass-tiles .bf2d-status-lights {
	justify-content: center;
	padding-top: 0.5rem;
}
.bf2d-t-glass .bf2d-status .bf2d-is-down {
	color: rgb(255 255 255 / 0.45);
}
.bf2d-t-glass main.bf2d-shell {
	padding-block: 1.5rem 3rem;
}
.bf2d-glass-prose {
	padding: 1.25rem 1.5rem;
}
.bf2d-glass-prose > :first-child {
	margin-top: 0;
}
.bf2d-t-glass .bf2d-card {
	background: rgb(0 0 0 / 0.38);
	border-color: var(--t-line);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}
.bf2d-t-glass .bf2d-field input,
.bf2d-t-glass .bf2d-field select {
	background: rgb(0 0 0 / 0.3);
	color: white;
	border-color: var(--t-line);
}
.bf2d-t-glass footer {
	padding-block: 1.25rem;
	color: var(--t-muted);
	font-size: 0.85rem;
	text-align: center;
}

/* ---- prose: shared by every page rendered from content/*.md ---- */
main.bf2d-shell h2 {
	margin: 1.75rem 0 0.5rem;
}
main.bf2d-shell table {
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
	margin-block: 1rem;
}
main.bf2d-shell table th:first-child,
main.bf2d-shell table td:first-child {
	width: 30%;
}
main.bf2d-shell table thead {
	display: none;
}
main.bf2d-shell table th,
main.bf2d-shell table td {
	text-align: left;
	padding: 0.5rem 0.75rem;
	border-bottom: 1px solid var(--t-line);
}
main.bf2d-shell blockquote {
	margin: 2rem 0 0;
	padding: 0.85rem 1.25rem 0.95rem 1.1rem;
	border-left: 4px solid var(--portal-accent);
	border-radius: 0 0.4rem 0.4rem 0;
	background: color-mix(in oklch, var(--portal-accent) 12%, transparent);
	font-size: 0.95rem;
	line-height: 1.55;
}
main.bf2d-shell blockquote::before {
	content: "Note";
	display: block;
	margin-bottom: 0.3rem;
	font-family: var(--font-display);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--portal-accent);
}
main.bf2d-shell blockquote p {
	margin: 0;
}
.bf2d-btn-row {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
}
/* Status lights: text colour comes from the kit (.bf2d-is-up accent, .bf2d-is-down muted); the dot borrows it. */
.bf2d-status-lights {
	display: inline-flex;
	gap: 1.2rem;
	flex-wrap: wrap;
	font-size: 0.9rem;
}
.bf2d-status-lights [data-status]::before {
	content: "";
	display: inline-block;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: currentColor;
	margin-right: 0.35rem;
	vertical-align: middle;
}
.bf2d-rates {
	display: flex;
	gap: 2rem;
	flex-wrap: wrap;
}
.bf2d-rates b {
	display: block;
	font-family: var(--font-display);
	font-size: 1.6rem;
	line-height: 1.1;
}
.bf2d-rates small {
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--t-muted);
}
/* Only the home page shows the brand intro inside the hero; other hero pages show their title. */
.bf2d-home-only {
	display: none;
}
.bf2d-page-home .bf2d-home-only {
	display: revert;
}
.bf2d-page-home .bf2d-not-home {
	display: none;
}