/* Explorator: "Night Chart"
   A navigator's chart read at night: sea-chart navy, one brass accent, the
   map as the only thing that glows. Barlow Condensed (built from wayfinding
   signage) for display, Barlow for text, IBM Plex Mono for coordinates and data.

   Rules: one accent (brass) for action and focus; flat surfaces; hairlines and
   whitespace carry structure; the map plate stays night in both themes.
   Contrast checked: body text 15.6:1+, brass 6.1:1+, control borders 3.4:1+. */

:root,
:root[data-theme="dark"] {
	--ground: #07111d;
	--raised: #0c1929;
	--raised-2: #122237;
	--line: #1c2d44;
	--line-strong: #526b8e;
	--text: #e9eef4;
	--text-2: #a9b6c8;
	--text-3: #8394ab;
	--brass: #e0b25a;
	--brass-hover: #eec77a;
	--on-brass: #1a1204;
	color-scheme: dark;
}
:root[data-theme="light"] {
	--ground: #eef2f5;
	--raised: #e2e8ee;
	--raised-2: #d6dee6;
	--line: #c5d0da;
	--line-strong: #6a7d93;
	--text: #0b1a2b;
	--text-2: #34485f;
	--text-3: #4f637a;
	--brass: #7a520f;
	--brass-hover: #5f3f08;
	--on-brass: #fff8ea;
	color-scheme: light;
}
:root {
	--display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
	--sans: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
	--mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
	--wrap: 1200px;
	--gutter: clamp(20px, 5vw, 64px);
	--r: 3px;
	/* The chart plate is always night, whatever the page theme. */
	--chart-ground: #07111d;
	--chart-line: #1c2d44;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--ground);
	color: var(--text);
	font: 400 17px/1.6 var(--sans);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: inherit; text-decoration: underline; text-decoration-color: var(--brass); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--brass); }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; border-radius: 1px; }

.skip { position: absolute; left: -9999px; top: 8px; background: var(--brass); color: var(--on-brass); padding: 10px 14px; z-index: 10; }
.skip:focus { left: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- type ---------- */
.eyebrow, .kicker, .mono, .caption, .spec dt, .nav-a, .theme-btn, .foot {
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.eyebrow { color: var(--brass); }
.eyebrow span { color: var(--text-3); }
h1 {
	font: 600 clamp(46px, 7.2vw, 96px)/0.94 var(--display);
	letter-spacing: -0.012em;
	max-width: 13ch;
	margin-top: 22px;
}
h2 {
	font: 600 clamp(32px, 4.2vw, 54px)/1 var(--display);
	letter-spacing: -0.005em;
	max-width: 20ch;
}
h3 { font: 600 19px/1.3 var(--sans); }
.lead { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.55; color: var(--text-2); max-width: 58ch; }
.lead strong, .body strong { color: var(--text); font-weight: 600; }
.body { color: var(--text-2); max-width: 64ch; }
code, .code {
	font-family: var(--mono);
	font-size: 0.88em;
	color: var(--text);
	background: var(--raised);
	border: 1px solid var(--line);
	padding: 1px 6px;
	border-radius: var(--r);
	/* wraps only at spaces (never inside [explorator]), so long examples fit a phone */
	overflow-wrap: break-word;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* ---------- header ---------- */
.site-header { border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); }
.brand svg { width: 26px; height: 26px; flex: none; color: var(--text-2); } /* flex: none, or narrow headers squeeze it to nothing */
.brand b { font: 600 25px/1 var(--display); letter-spacing: 0.02em; }
.site-nav { display: flex; align-items: center; gap: 4px; }
.nav-a { color: var(--text-2); text-decoration: none; padding: 10px 12px; }
.nav-a:hover, .nav-a[aria-current="page"] { color: var(--brass); }
.theme-btn {
	margin-left: 8px;
	background: none;
	color: var(--text-2);
	border: 1px solid var(--line-strong);
	border-radius: var(--r);
	padding: 7px 10px;
	cursor: pointer;
}
.theme-btn:hover { color: var(--text); border-color: var(--text-2); }

/* ---------- buttons ---------- */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 32px; }
.btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font: 600 16px/1 var(--sans);
	text-decoration: none;
	padding: 15px 22px;
	border-radius: var(--r);
	border: 1px solid transparent;
	cursor: pointer;
}
.btn-primary { background: var(--brass); color: var(--on-brass); }
.btn-primary:hover { background: var(--brass-hover); color: var(--on-brass); }
.btn-quiet { color: var(--text); border-color: var(--line-strong); }
.btn-quiet:hover { color: var(--brass); border-color: var(--brass); }
.fine { margin-top: 14px; color: var(--text-3); font-size: 14px; }

/* ---------- hero ---------- */
.hero { padding: clamp(44px, 7vw, 96px) 0 0; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 48px; align-items: end; }
.hero .lead { margin-top: 22px; }

/* ---------- the chart plate (the live map) ---------- */
.chart { margin-top: clamp(40px, 5vw, 64px); border: 1px solid var(--line); background: var(--chart-ground); }
.chart .expl-root {
	--expl-bg: #07111d;
	--expl-bg2: #0c1a2c;
	--expl-land: #1d3048;
	--expl-land-glow: #2b4a6b;
	--expl-pin: #e8b75c;
	--expl-pin-core: #fff6e0;
	--expl-ripple: #e8b75c;
	--expl-arc: #7fb6d9;
	--expl-text: #e9eef4;
	--expl-text-dim: #8394ab;
	--expl-grid: #0e1b2c;
	--expl-radius: 0px;
	--expl-font: var(--sans);
	box-shadow: none;
}
.caption {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px 24px;
	padding: 12px 16px;
	border-top: 1px solid var(--chart-line);
	color: #8394ab;
	font-size: 11px;
}
.caption b { color: #e0b25a; font-weight: 500; }

/* ---------- sections ---------- */
.section { padding: clamp(72px, 9vw, 128px) 0; border-top: 1px solid var(--line); }
.section.tight { padding: clamp(48px, 6vw, 80px) 0; }
.kicker { display: flex; align-items: center; gap: 14px; color: var(--brass); margin-bottom: 20px; }
.kicker::after {
	/* a scale bar: a hairline with tick marks, as on a chart */
	content: "";
	flex: 1;
	height: 7px;
	border-bottom: 1px solid var(--line);
	background: repeating-linear-gradient(90deg, var(--line-strong) 0 1px, transparent 1px 28px) bottom / 100% 5px no-repeat;
	opacity: 0.8;
}
.section h2 + .lead, .section h2 + .body { margin-top: 20px; }

/* three ways in */
.ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 48px; border-top: 1px solid var(--line); }
.way { padding: 28px 28px 30px 0; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.way + .way { padding-left: 28px; }
.way:last-child { border-right: 0; padding-right: 0; }
.way .mono { color: var(--brass); }
.way p { color: var(--text-2); flex: 1; }
.way a.go { font-weight: 600; text-decoration: none; color: var(--text); }
.way a.go::after { content: " \2192"; color: var(--brass); }
.way a.go:hover { color: var(--brass); }

/* ruled feature list */
.ruled { margin-top: 44px; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; }
.ruled li { padding: 22px 0; border-bottom: 1px solid var(--line); }
.ruled h3 { margin-bottom: 6px; }
.ruled p { color: var(--text-2); }

/* two-up comparison */
.pair { margin-top: 44px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.pair > div { padding: 30px 36px 32px 0; }
.pair > div + div { padding: 30px 0 32px 36px; border-left: 1px solid var(--line); }
.pair .mono { color: var(--text-3); margin: 6px 0 16px; }
.pair li { padding: 10px 0 10px 22px; border-top: 1px solid var(--line); color: var(--text-2); position: relative; }
.pair li:first-child { border-top: 0; }
.pair li::before { position: absolute; left: 0; font-family: var(--mono); color: var(--brass); }
.pair .plus li::before { content: "+"; }
.pair .minus li::before { content: "\2212"; color: var(--text-3); }

/* figures */
.figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.figures div { padding: 30px 20px 30px 0; }
.figures div + div { padding-left: 20px; border-left: 1px solid var(--line); }
.figures b { display: block; font: 600 clamp(44px, 5.4vw, 72px)/0.9 var(--display); font-variant-numeric: tabular-nums; }
.figures span { display: block; margin-top: 12px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }

/* promises */
.promises { margin-top: 40px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; }
.promises p { padding: 20px 0; border-top: 1px solid var(--line); color: var(--text-2); }
.promises strong { color: var(--text); }

/* download: spec sheet */
.spec { margin-top: 40px; display: grid; grid-template-columns: 200px minmax(0, 1fr); border-top: 1px solid var(--line); }
.spec dt, .spec dd { padding: 16px 0; border-bottom: 1px solid var(--line); }
.spec dt { color: var(--text-3); padding-right: 20px; }
.spec dd { color: var(--text-2); }
.spec dd strong { color: var(--text); }
.hash { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hash code { white-space: normal; word-break: break-all; font-size: 13px; }
.copy { font: 500 12px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; background: none; color: var(--text-2); border: 1px solid var(--line-strong); border-radius: var(--r); padding: 7px 10px; cursor: pointer; }
.copy:hover { color: var(--brass); border-color: var(--brass); }

/* numbered steps */
.steps { margin-top: 40px; counter-reset: s; border-top: 1px solid var(--line); }
.steps li { counter-increment: s; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 20px; padding: 26px 0; border-bottom: 1px solid var(--line); }
.steps li::before { content: counter(s, decimal-leading-zero); font: 600 32px/1 var(--display); color: var(--brass); }
.steps p { color: var(--text-2); margin-top: 6px; max-width: 62ch; }

/* demo controls */
.controls { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 28px; }
.controls label { display: inline-flex; align-items: center; gap: 10px; color: var(--text-2); font-size: 15px; }
.controls select, .swatches button {
	font: 500 14px/1 var(--sans);
	color: var(--text);
	background: var(--raised);
	border: 1px solid var(--line-strong);
	border-radius: var(--r);
	padding: 9px 12px;
}
.swatches { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.swatches button { cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.swatches button i { width: 12px; height: 12px; border-radius: 50%; display: block; border: 1px solid rgba(255,255,255,0.25); }
.swatches button[aria-pressed="true"] { border-color: var(--brass); color: var(--brass); }
.try { margin-top: 36px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; }
.try li { padding: 16px 0; border-top: 1px solid var(--line); color: var(--text-2); }
.try b { color: var(--text); font-weight: 600; }

/* closing call to action */
.closing { text-align: left; }
.closing h2 { max-width: 16ch; }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding: 36px 0 44px; }
.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px 32px; }
.foot { color: var(--text-3); font-size: 11px; line-height: 1.9; text-transform: none; letter-spacing: 0.04em; max-width: 70ch; }
.foot-links { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.foot-links a { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2); text-decoration: none; }
.foot-links a:hover { color: var(--brass); }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
	.hero-grid, .ways, .ruled, .pair, .promises, .try { grid-template-columns: 1fr; }
	.way, .way + .way { padding: 24px 0; border-right: 0; border-bottom: 1px solid var(--line); }
	.pair > div, .pair > div + div { padding: 26px 0; border-left: 0; }
	.pair > div + div { border-top: 1px solid var(--line); }
	.figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.figures div:nth-child(3) { padding-left: 0; border-left: 0; }
	.figures div:nth-child(n+3) { border-top: 1px solid var(--line); }
	.spec { grid-template-columns: 1fr; }
	.spec dt { border-bottom: 0; padding-bottom: 0; }
}
@media (max-width: 560px) {
	body { font-size: 16px; }
	.site-nav .nav-a.opt { display: none; }
	.brand { gap: 8px; }
	.brand b { font-size: 22px; }
	.nav-a { padding: 10px 7px; }
	.theme-btn { margin-left: 4px; }
	.btn { width: 100%; justify-content: center; }
	.steps li { grid-template-columns: 44px minmax(0, 1fr); gap: 14px; }
	.steps li::before { font-size: 26px; }
}
@media (max-width: 420px) {
	/* the smallest phones: nav drops to its own line instead of overflowing */
	.site-header .wrap { flex-wrap: wrap; row-gap: 0; padding-top: 8px; padding-bottom: 6px; }
	.site-nav { margin-left: -7px; }
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
	.btn-primary { border: 1px solid ButtonText; }
	.kicker::after { background: none; }
}