/*
Theme Name: Tradium
Theme URI: https://tradiumtrades.com
Author: Tradium
Description: Custom hand-built theme for Tradium Trades. All site copy and links are edited in content.php. No page builder required.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: Proprietary
Text Domain: tradium
*/

/* ==========================================================================
   TRADIUM STYLESHEET

   CONTENTS
     1.  Design tokens  (colours, type, spacing — change things here)
     2.  Reset & base
     3.  Layout (wrap, section, section headings)
     4.  Buttons
     5.  Element tiles  (the recurring box motif from the logo)
     6.  Site header & navigation
     7.  Home — hero
     8.  Cards grid
     9.  Feature row (symbol tiles)
     10. Lists & prose
     11. FAQ accordion
     12. Links page
     13. Contact page
     14. Media placeholders & screenshot grids
     15. Legal pages
     16. 404
     17. Site footer
     18. Accessibility & motion
   ========================================================================== */


/* ==========================================================================
   1. DESIGN TOKENS
   Change a value here and it updates everywhere on the site.
   --accent is deliberately white. If you ever adopt a brand colour, set it
   here and every button, hover state and highlight follows automatically.
   ========================================================================== */
:root {

	/* ---- Colour ---- */
	--ink:          #000000;   /* page background — exactly matches the logo's own black */
	--surface:      #0a0a0a;   /* raised panels */
	--surface-2:    #121212;   /* hover state for panels */
	--paper:        #ffffff;   /* primary text */
	--muted:        #909090;   /* secondary text */
	--faint:        #5f5f5f;   /* captions, meta */
	--rule:         rgba(255,255,255,0.14);
	--rule-strong:  rgba(255,255,255,0.32);
	--accent:       #ffffff;
	--accent-ink:   #000000;   /* text sitting on top of --accent */
	--warn-rule:    rgba(255,255,255,0.30);

	/* ---- Type ---- */
	--font-body:    "Helvetica Neue", Helvetica, Arial, "Segoe UI", system-ui, sans-serif;
	--font-display: "Helvetica Neue", Helvetica, Arial, "Segoe UI", system-ui, sans-serif;
	--font-mono:    ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

	--fs-hero:   clamp(2.15rem, 6.2vw, 4rem);
	--fs-h2:     clamp(1.6rem, 3.6vw, 2.35rem);
	--fs-h3:     clamp(1.1rem, 2.1vw, 1.3rem);
	--fs-lede:   clamp(1.02rem, 1.7vw, 1.18rem);
	--fs-body:   1rem;
	--fs-small:  0.875rem;
	--fs-label:  0.68rem;

	--lh-tight:  1.06;
	--lh-snug:   1.32;
	--lh-body:   1.68;

	--track-display: -0.028em;
	--track-label:    0.19em;

	/* ---- Space & shape ---- */
	--wrap:      1120px;
	--gutter:    clamp(20px, 5vw, 40px);
	--sec-pad:   clamp(56px, 8.5vw, 104px);
	--gap:       clamp(14px, 2vw, 20px);
	--radius:    2px;          /* near-square, matching the element tile */
	--header-h:  64px;
}


/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

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

body {
	margin: 0;
	background: var(--ink);
	color: var(--paper);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

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

a { color: var(--paper); text-decoration: none; }

h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: 700;
	letter-spacing: var(--track-display);
	line-height: var(--lh-tight);
	margin: 0;
	text-wrap: balance;
}

p { margin: 0; }

ul, ol { margin: 0; padding: 0; }

hr { border: 0; border-top: 1px solid var(--rule); margin: 0; }

::selection { background: var(--paper); color: var(--ink); }


/* ==========================================================================
   3. LAYOUT
   ========================================================================== */
.wrap {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.section { padding-block: var(--sec-pad); }

.section--ruled { border-top: 1px solid var(--rule); }

.section--tight { padding-block: clamp(38px, 5.5vw, 64px); }

/* Section heading block. The small label above the title is set in mono and
   mirrors the label band on the logo tile. */
.sec-head { margin-bottom: clamp(26px, 4vw, 44px); max-width: 62ch; }

.sec-label {
	display: inline-block;
	font-family: var(--font-mono);
	font-size: var(--fs-label);
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	color: var(--muted);
	border: 1px solid var(--rule);
	padding: 5px 9px 4px;
	margin-bottom: 18px;
	border-radius: var(--radius);
}

.sec-title { font-size: var(--fs-h2); }

.sec-lede {
	margin-top: 16px;
	color: var(--muted);
	font-size: var(--fs-lede);
	max-width: 60ch;
}


/* ==========================================================================
   4. BUTTONS
   ========================================================================== */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--font-mono);
	font-size: var(--fs-small);
	letter-spacing: 0.09em;
	text-transform: uppercase;
	padding: 15px 22px;
	border: 1px solid var(--accent);
	border-radius: var(--radius);
	transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
	white-space: nowrap;
}

.btn--primary { background: var(--accent); color: var(--accent-ink); }

.btn--primary:hover,
.btn--primary:focus-visible { background: transparent; color: var(--accent); }

.btn--ghost { background: transparent; color: var(--paper); border-color: var(--rule-strong); }

.btn--ghost:hover,
.btn--ghost:focus-visible { border-color: var(--accent); background: var(--surface-2); }

.btn-arrow { transition: transform .18s ease; }

.btn:hover .btn-arrow { transform: translateX(4px); }

.btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: clamp(26px, 3.6vw, 38px);
}

@media (max-width: 519px) {
	.btn-row .btn { width: 100%; justify-content: center; }
}

/* Small text link with a hairline underline that draws in on hover. */
.tlink {
	font-family: var(--font-mono);
	font-size: var(--fs-small);
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--muted);
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: color .18s ease;
}

.tlink:hover { color: var(--paper); }

.tlink .btn-arrow { transition: transform .18s ease; }

.tlink:hover .btn-arrow { transform: translateX(4px); }


/* ==========================================================================
   5. ELEMENT TILES
   The signature motif: a hairline box with a labelled band across the top,
   taken directly from the logo. The band always carries real information —
   a symbol, a category, a count — never decoration.
   ========================================================================== */
.tile {
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	background: var(--surface);
	display: flex;
	flex-direction: column;
	transition: border-color .2s ease, background-color .2s ease;
}

.tile-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 11px 16px 10px;
	border-bottom: 1px solid var(--rule);
	font-family: var(--font-mono);
	font-size: var(--fs-label);
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	color: var(--muted);
	min-height: 38px;
}

.tile-body { padding: clamp(20px, 2.6vw, 28px); flex: 1; }

.tile-title { font-size: var(--fs-h3); margin-bottom: 10px; }

.tile-text { color: var(--muted); font-size: var(--fs-small); }

.tile-foot { padding: 0 clamp(20px, 2.6vw, 28px) clamp(20px, 2.6vw, 28px); }

a.tile:hover,
a.tile:focus-visible { border-color: var(--rule-strong); background: var(--surface-2); }


/* ==========================================================================
   6. SITE HEADER & NAVIGATION
   Header background is pure black so the logo's own black background
   blends into it with no visible edge.
   ========================================================================== */
.site-header {
	position: sticky;
	top: 0;
	z-index: 60;
	background: var(--ink);
	border-bottom: 1px solid var(--rule);
}

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	min-height: var(--header-h);
}

.brand { display: inline-flex; align-items: center; gap: 11px; }

.brand-mark { width: 40px; height: 40px; border-radius: var(--radius); }

.brand-word {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.06rem;
	letter-spacing: -0.02em;
}

.nav--desktop { display: none; }

.nav-list { list-style: none; display: flex; align-items: center; gap: 4px; }

.nav-item { position: relative; }

.nav-link {
	display: inline-block;
	font-family: var(--font-mono);
	font-size: var(--fs-label);
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	color: var(--muted);
	padding: 10px 12px;
	border-bottom: 1px solid transparent;
	transition: color .18s ease, border-color .18s ease;
}

.nav-link:hover,
.nav-link:focus-visible { color: var(--paper); border-bottom-color: var(--rule-strong); }

.nav-link.is-current { color: var(--paper); border-bottom-color: var(--accent); }

/* Dropdown — built now, used the moment a nav item is given children. */
.nav-sub {
	list-style: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 190px;
	background: var(--surface);
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	padding: 6px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity .16s ease, transform .16s ease, visibility .16s;
}

.nav-item--has-children:hover .nav-sub,
.nav-item--has-children:focus-within .nav-sub {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.nav-sub-link {
	display: block;
	font-family: var(--font-mono);
	font-size: var(--fs-label);
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	color: var(--muted);
	padding: 10px 12px;
	border-radius: var(--radius);
}

.nav-sub-link:hover,
.nav-sub-link.is-current { color: var(--paper); background: var(--surface-2); }

.nav-toggle-sub { display: none; }

/* Mobile burger */
.nav-burger {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 0 10px;
	background: none;
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	cursor: pointer;
}

.burger-bar {
	display: block;
	height: 1px;
	width: 100%;
	background: var(--paper);
	transition: transform .22s ease, opacity .18s ease;
}

.nav-burger[aria-expanded="true"] .burger-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-burger[aria-expanded="true"] .burger-bar:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] .burger-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.nav--mobile {
	border-top: 1px solid var(--rule);
	background: var(--ink);
	padding-block: 10px 22px;
}

.nav-list--mobile { flex-direction: column; align-items: stretch; gap: 0; }

.nav-list--mobile .nav-item { border-bottom: 1px solid var(--rule); }

.nav-list--mobile .nav-link {
	display: block;
	padding: 16px 2px;
	border-bottom: none;
	font-size: 0.78rem;
}

.nav-list--mobile .nav-sub {
	position: static;
	opacity: 1;
	visibility: visible;
	transform: none;
	border: none;
	background: none;
	padding: 0 0 8px 14px;
	display: none;
}

.nav-list--mobile .nav-item--has-children.is-open .nav-sub { display: block; }

.nav-list--mobile .nav-item--has-children { position: relative; }

.nav-list--mobile .nav-toggle-sub {
	display: block;
	position: absolute;
	top: 6px;
	right: 0;
	width: 42px;
	height: 42px;
	background: none;
	border: 0;
	cursor: pointer;
}

.nav-list--mobile .chev {
	display: block;
	width: 7px;
	height: 7px;
	margin: 0 auto;
	border-right: 1px solid var(--muted);
	border-bottom: 1px solid var(--muted);
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform .2s ease;
}

.nav-list--mobile .is-open .chev { transform: rotate(225deg) translate(-2px, -2px); }

.nav-mobile-cta { margin-top: 20px; }

.nav-mobile-cta .btn { width: 100%; justify-content: center; }

@media (min-width: 900px) {
	.nav--desktop { display: block; }
	.nav-burger,
	.nav--mobile { display: none !important; }
}


/* ==========================================================================
   7. HOME — HERO
   The hero is itself one large element tile: the whole page opens as a
   scaled-up version of the logo.
   ========================================================================== */
.hero { padding-block: clamp(34px, 5vw, 64px) clamp(48px, 7vw, 88px); }

.hero-tile { border: 1px solid var(--rule-strong); border-radius: var(--radius); background: var(--surface); }

.hero-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	padding: 13px 18px 12px;
	border-bottom: 1px solid var(--rule-strong);
	font-family: var(--font-mono);
	font-size: var(--fs-label);
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	color: var(--muted);
}

.hero-head strong { color: var(--paper); font-weight: 400; }

.hero-body { padding: clamp(30px, 5.5vw, 68px) clamp(22px, 5vw, 62px) clamp(36px, 5.5vw, 66px); }

.hero-logo {
	width: clamp(88px, 13vw, 124px);
	height: auto;
	border-radius: var(--radius);
	margin-bottom: clamp(24px, 3.4vw, 34px);
}

.hero-title { font-size: var(--fs-hero); max-width: 17ch; }

.hero-intro {
	margin-top: clamp(20px, 2.6vw, 28px);
	color: var(--muted);
	font-size: var(--fs-lede);
	max-width: 58ch;
}


/* ==========================================================================
   8. CARDS GRID
   ========================================================================== */
.grid {
	display: grid;
	gap: var(--gap);
	grid-template-columns: 1fr;
}

@media (min-width: 640px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } }

@media (min-width: 860px) {
	.grid--3 { grid-template-columns: repeat(3, 1fr); }
	.grid--2 { grid-template-columns: repeat(2, 1fr); }
}

.card-symbol {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.05rem;
	letter-spacing: -0.02em;
	color: var(--paper);
	text-transform: none;
}


/* ==========================================================================
   9. FEATURE ROW — the indicator's capabilities as element symbols
   ========================================================================== */
.feature-grid { display: grid; gap: var(--gap); grid-template-columns: 1fr; }

@media (min-width: 620px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }

@media (min-width: 1000px) { .feature-grid { grid-template-columns: repeat(3, 1fr); } }

.feature-symbol {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(1.7rem, 3.4vw, 2.15rem);
	letter-spacing: -0.03em;
	line-height: 1;
	display: block;
	margin-bottom: 16px;
}

.feature-name { font-size: 1.02rem; margin-bottom: 8px; }

.feature-text { color: var(--muted); font-size: var(--fs-small); }


/* ==========================================================================
   10. LISTS & PROSE
   ========================================================================== */
.checklist { list-style: none; display: grid; gap: 2px; }

.checklist li {
	position: relative;
	padding: 16px 0 16px 30px;
	border-bottom: 1px solid var(--rule);
	color: var(--muted);
}

.checklist li:first-child { border-top: 1px solid var(--rule); }

.checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 27px;
	width: 12px;
	height: 1px;
	background: var(--rule-strong);
}

.prose { max-width: 66ch; color: var(--muted); font-size: var(--fs-lede); }

.prose p + p { margin-top: 1.1em; }

.prose strong { color: var(--paper); font-weight: 700; }

.prose em { color: var(--paper); font-style: italic; }

.prose a { color: var(--paper); border-bottom: 1px solid var(--rule-strong); }

.prose a:hover { border-bottom-color: var(--accent); }

.note-box {
	border: 1px solid var(--warn-rule);
	border-left-width: 3px;
	border-radius: var(--radius);
	background: var(--surface);
	padding: clamp(18px, 2.4vw, 24px);
	color: var(--muted);
	font-size: var(--fs-small);
}

.note-box strong { color: var(--paper); }

.note-label {
	display: block;
	font-family: var(--font-mono);
	font-size: var(--fs-label);
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	color: var(--paper);
	margin-bottom: 8px;
}


/* ==========================================================================
   11. FAQ ACCORDION
   Built on native <details>, so it works with zero JavaScript.
   ========================================================================== */
.faq { display: grid; gap: 10px; max-width: 860px; }

.faq-item {
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	background: var(--surface);
	transition: border-color .2s ease;
}

.faq-item[open] { border-color: var(--rule-strong); }

.faq-q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 20px clamp(18px, 2.4vw, 24px);
	cursor: pointer;
	list-style: none;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1rem;
	letter-spacing: -0.015em;
	line-height: var(--lh-snug);
}

.faq-q::-webkit-details-marker { display: none; }

.faq-q:hover { color: var(--paper); }

.faq-chev {
	flex: none;
	width: 9px;
	height: 9px;
	border-right: 1.5px solid var(--muted);
	border-bottom: 1.5px solid var(--muted);
	transform: rotate(45deg);
	transition: transform .22s ease, border-color .22s ease;
	margin-right: 4px;
}

.faq-item[open] .faq-chev { transform: rotate(225deg); border-color: var(--paper); }

.faq-a {
	padding: 0 clamp(18px, 2.4vw, 24px) 22px;
	color: var(--muted);
	font-size: var(--fs-small);
	border-top: 1px solid var(--rule);
	padding-top: 20px;
	margin-top: 0;
}

.faq-a a { color: var(--paper); border-bottom: 1px solid var(--rule-strong); }

.faq-a a:hover { border-bottom-color: var(--accent); }

.faq-list { list-style: none; display: grid; gap: 8px; margin-top: 4px; }

.faq-list li { padding-left: 20px; position: relative; }

.faq-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 13px;
	width: 11px;
	height: 1px;
	background: var(--rule-strong);
}


/* ==========================================================================
   12. LINKS PAGE
   ========================================================================== */
.link-group { margin-top: clamp(34px, 5vw, 52px); }

.link-group:first-of-type { margin-top: 0; }

.link-group-head {
	display: flex;
	align-items: baseline;
	gap: 14px;
	padding-bottom: 14px;
	margin-bottom: var(--gap);
	border-bottom: 1px solid var(--rule);
}

.link-group-title {
	font-family: var(--font-mono);
	font-size: var(--fs-label);
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	color: var(--paper);
	font-weight: 400;
}

.link-group-count { font-family: var(--font-mono); font-size: var(--fs-label); color: var(--faint); }

.link-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: clamp(18px, 2.4vw, 24px);
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	background: var(--surface);
	margin-bottom: 10px;
	transition: border-color .2s ease, background-color .2s ease, transform .2s ease;
}

.link-row:hover { border-color: var(--rule-strong); background: var(--surface-2); }

.link-row-main { display: block; }

.link-row-label { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; letter-spacing: -0.015em; }

.link-row-text { display: block; color: var(--muted); font-size: var(--fs-small); margin-top: 5px; max-width: 54ch; }

.link-row-arrow { flex: none; color: var(--muted); font-size: 1.05rem; transition: transform .2s ease, color .2s ease; }

.link-row:hover .link-row-arrow { transform: translateX(5px); color: var(--paper); }

.aff-tag {
	display: inline-block;
	font-family: var(--font-mono);
	font-size: 0.62rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--faint);
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	padding: 2px 6px;
	margin-left: 9px;
	vertical-align: 2px;
}


/* ==========================================================================
   13. CONTACT PAGE
   ========================================================================== */
.contact-grid { display: grid; gap: var(--gap); grid-template-columns: 1fr; }

@media (min-width: 900px) { .contact-grid { grid-template-columns: repeat(3, 1fr); } }

.contact-card { display: flex; flex-direction: column; }

/* Body is a column so the email button can be pinned to the bottom of every
   card, keeping the three buttons on one line regardless of text length. */
.contact-card .tile-body { display: flex; flex-direction: column; }

.contact-text { color: var(--muted); font-size: var(--fs-small); margin-bottom: 20px; }

.contact-note {
	border-top: 1px solid var(--rule);
	padding-top: 16px;
	margin-bottom: 20px;
	color: var(--muted);
	font-size: 0.8rem;
}

.contact-note a { color: var(--paper); border-bottom: 1px solid var(--rule-strong); }

.contact-note strong { color: var(--paper); font-weight: 400; font-family: var(--font-mono); font-size: 0.76rem; }

.btn--mail { width: 100%; justify-content: center; margin-top: auto; font-size: 0.76rem; letter-spacing: 0.05em; text-transform: none; }


/* ==========================================================================
   14. MEDIA PLACEHOLDERS & SCREENSHOT GRIDS
   Simple geometric stand-ins until real screenshots are dropped in.
   ========================================================================== */
.shot-grid { display: grid; gap: var(--gap); grid-template-columns: 1fr; }

@media (min-width: 760px) { .shot-grid--2 { grid-template-columns: repeat(2, 1fr); } }

@media (min-width: 900px) { .shot-grid--3 { grid-template-columns: repeat(3, 1fr); } }

.shot { border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; background: var(--surface); }

.placeholder {
	position: relative;
	border: 1px dashed var(--rule-strong);
	border-radius: var(--radius);
	background:
		linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0) 62%),
		repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 46px),
		repeating-linear-gradient(0deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 40px),
		var(--surface);
	min-height: 220px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 26px;
}

.placeholder-text {
	font-family: var(--font-mono);
	font-size: var(--fs-label);
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	color: var(--faint);
	max-width: 34ch;
	line-height: 1.9;
}

.caption { color: var(--faint); font-size: 0.8rem; margin-top: 14px; }

.widget-embed { border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; max-width: 350px; }

.widget-embed iframe { display: block; border: 0; }


/* ==========================================================================
   15. LEGAL PAGES
   ========================================================================== */
.legal { max-width: 74ch; }

.legal h2 {
	font-size: 1.12rem;
	margin-top: 2.4em;
	margin-bottom: 0.7em;
	padding-top: 1.6em;
	border-top: 1px solid var(--rule);
}

.legal h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 2em; }

.legal p { color: var(--muted); }

.legal p + p { margin-top: 1.05em; }

.legal ul { margin: 1.1em 0; padding-left: 0; list-style: none; }

.legal ul li { position: relative; padding: 0 0 0 22px; margin-bottom: 0.85em; color: var(--muted); }

.legal ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 14px;
	width: 11px;
	height: 1px;
	background: var(--rule-strong);
}

.legal strong { color: var(--paper); }

.legal a { color: var(--paper); border-bottom: 1px solid var(--rule-strong); }

.legal a:hover { border-bottom-color: var(--accent); }

.legal-updated { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--faint); margin-bottom: 2em; }

.legal-lede { font-size: var(--fs-lede); color: var(--paper) !important; }

.legal-review {
	margin-bottom: clamp(30px, 4vw, 44px);
}


/* ==========================================================================
   16. 404
   ========================================================================== */
.err { min-height: 52vh; display: flex; align-items: center; }

.err-tile { max-width: 620px; margin-inline: auto; text-align: center; }

.err-symbol {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(3.4rem, 12vw, 5.6rem);
	letter-spacing: -0.05em;
	line-height: 1;
	display: block;
	margin-bottom: 22px;
}

.err-text { color: var(--muted); margin-top: 14px; }

.err .btn-row { justify-content: center; }


/* ==========================================================================
   17. SITE FOOTER
   ========================================================================== */
.site-footer {
	border-top: 1px solid var(--rule);
	padding-block: clamp(40px, 5vw, 60px) clamp(30px, 4vw, 44px);
}

.footer-top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 22px;
	padding-bottom: 26px;
	border-bottom: 1px solid var(--rule);
}

.footer-brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: -0.02em; }

.footer-brand img { border-radius: var(--radius); }

.footer-nav { display: flex; flex-wrap: wrap; gap: 6px 22px; }

.footer-nav a {
	font-family: var(--font-mono);
	font-size: var(--fs-label);
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	color: var(--muted);
	transition: color .18s ease;
}

.footer-nav a:hover { color: var(--paper); }

.footer-risk { margin-top: 26px; color: var(--faint); font-size: 0.78rem; max-width: 72ch; line-height: 1.7; }

.footer-copy { margin-top: 18px; color: var(--faint); font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.1em; text-transform: uppercase; }


/* ==========================================================================
   18. ACCESSIBILITY & MOTION
   ========================================================================== */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	background: var(--paper);
	color: var(--ink);
	padding: 12px 18px;
	font-family: var(--font-mono);
	font-size: var(--fs-small);
}

.skip-link:focus { left: 0; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px,1px,1px,1px);
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}