/*
	ΕΛΠΙΣ DNS - main stylesheet

	Dressed like Firefox: night-violet banners with a glow underneath,
	Mozilla Headline for the big words, violet pills for the buttons.
	Every colour is a token defined here, so the dark theme is a swap
	and not a second stylesheet.

	Light : white paper, violet ink
	Dark  : night violet, lavender ink
	Banners and the top bar are night violet in both, the way the
	Firefox "what's new" page is.
*/

:root{
	/* Mozilla's fonts carry no Greek, so ΕΛΠΙΣ falls through to the next
	   family. Roboto Condensed is loaded for exactly those five letters. */
	--font-display:"Mozilla Headline","Roboto Condensed","Arial Narrow",system-ui,sans-serif;
	--font-body:"Mozilla Text",system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
	--font-mono:"JetBrains Mono",ui-monospace,Consolas,"SF Mono",monospace;

	--radius-sm:8px;
	--radius:14px;
	--radius-lg:22px;
	--pill:999px;
	--speed:.18s;
	--wrap:1200px;
	--gutter:24px;

	/* Firefox brand colours. Fixed, never themed. */
	--night:#1d0b3d;
	--night-deep:#140728;
	--violet:#7542e5;
	--violet-dark:#592acb;
	--violet-light:#9059ff;
	--lavender:#cb9eff;
	--flame:linear-gradient(90deg,#ffbd4f 0%,#ff7139 28%,#ff3750 55%,#e31587 75%,#9059ff 100%);

	--primary:var(--violet);
	--on-primary:#ffffff;
}

/* ---------- light ---------- */

:root,
:root[data-theme="light"]{
	--bg:#ffffff;
	--bg-alt:#f9f9fb;
	--surface:#ffffff;
	--surface-alt:#f0f0f4;

	--text:#15141a;
	--text-soft:#52525e;
	--text-faint:#6f6d79;

	--line:#e0e0e6;
	--line-strong:#cfcfd8;

	--accent:#7542e5;
	--accent-strong:#592acb;
	--accent-soft:rgba(117,66,229,.09);
	--primary-hover:#592acb;

	--btn-bg:#f0f0f4;
	--btn-text:#2b2a33;
	--btn-dead-bg:#f9f9fb;
	--btn-dead-text:#a8a6b3;

	--warn:#b45309;
	--warn-soft:rgba(255,164,54,.12);

	--shadow:0 1px 2px rgba(21,20,26,.05),0 10px 30px -12px rgba(58,21,140,.18);

	--map-sea:#f4f0fe;
	--map-dots:rgba(117,66,229,.10);
	--map-land:#e2d9f8;
	--map-border:#ffffff;
	--map-city:#9059ff;
	--map-hub:#7542e5;
	--map-traffic:#ff6a3d;
	--map-label:#3b2a6e;
	--map-callout:rgba(255,255,255,.94);

	/* Size chart: the one bar the story is about, and the rest for scale.
	   Both checked for contrast and colour-blind separation on --surface. */
	--bar-hero:#7542e5;
	--bar-context:#8f8d9a;
}

/* ---------- dark ---------- */

:root[data-theme="dark"]{
	--bg:#140b26;
	--bg-alt:#1a0f31;
	--surface:#20143c;
	--surface-alt:#2a1b4d;

	--text:#fbfbfe;
	--text-soft:#cfc7e6;
	--text-faint:#a49cbf;

	--line:#33255a;
	--line-strong:#4a3a7c;

	--accent:#ab71ff;
	--accent-strong:#c689ff;
	--accent-soft:rgba(171,113,255,.14);
	--primary-hover:#9059ff;

	--btn-bg:#2a1b4d;
	--btn-text:#e7defe;
	--btn-dead-bg:#1c1236;
	--btn-dead-text:#62577f;

	--warn:#ffbd4f;
	--warn-soft:rgba(255,189,79,.10);

	--shadow:0 1px 2px rgba(0,0,0,.4),0 14px 36px -14px rgba(0,0,0,.6);

	--map-sea:#0f0822;
	--map-dots:rgba(203,158,255,.08);
	--map-land:#2a1c50;
	--map-border:#43327a;
	--map-city:#cb9eff;
	--map-hub:#ab71ff;
	--map-traffic:#ff9a5c;
	--map-label:#e7defe;
	--map-callout:rgba(29,11,61,.92);

	--bar-hero:#a06bff;
	--bar-context:#7d7299;
}

/* ---------- base ---------- */

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

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

:root[data-theme="dark"]{
	color-scheme:dark;
}

@media (prefers-reduced-motion: reduce){
	html{ scroll-behavior:auto }
}

body{
	margin:0;
	background:var(--bg);
	color:var(--text);
	font-family:var(--font-body);
	font-size:16px;
	line-height:1.6;
	-webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,p,ol,ul,figure{
	margin:0;
}

img,
svg{
	max-width:100%;
}

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

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

b,
strong{
	font-weight:650;
	color:var(--text);
}

code,
.inline-code{
	font-family:var(--font-mono);
	font-size:.92em;
	color:var(--accent);
}

::selection{
	background:var(--violet);
	color:#fff;
}

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

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

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

.skip-link{
	position:absolute;
	left:12px;
	top:-60px;
	z-index:50;
	padding:10px 16px;
	border-radius:var(--pill);
	background:var(--violet);
	color:#fff;
	font-weight:600;
}

.skip-link:focus{
	top:12px;
	color:#fff;
}

/* ---------- top bar ---------- */

/*
	Night violet on every page and in both themes, so it melts into the
	banner below it the way the Firefox page header does.
*/

.topbar{
	position:sticky;
	top:0;
	z-index:30;

	background:rgba(23,9,49,.86);
	-webkit-backdrop-filter:saturate(1.4) blur(14px);
	backdrop-filter:saturate(1.4) blur(14px);
	border-bottom:1px solid rgba(255,255,255,.07);
}

.topbar-inner{
	display:flex;
	align-items:center;
	gap:20px;
	min-height:64px;
}

.brand{
	display:inline-flex;
	align-items:center;
	gap:10px;
	color:#fff;
	text-decoration:none;
	flex-shrink:0;
}

.brand:hover{
	color:#fff;
	text-decoration:none;
}

.brand-mark{
	width:32px;
	height:32px;
}

.brand-name{
	font-family:var(--font-display);
	font-size:22px;
	font-weight:700;
	font-stretch:85%;
	letter-spacing:.06em;
}

.brand-dns{
	background:var(--flame);
	-webkit-background-clip:text;
	background-clip:text;
	color:transparent;
}

.nav{
	display:flex;
	align-items:center;
	gap:4px;
	margin-left:auto;
}

.nav a{
	padding:8px 14px;
	border-radius:var(--pill);

	color:rgba(255,255,255,.78);
	font-size:15px;
	font-weight:500;

	transition:var(--speed);
}

.nav a:hover{
	color:#fff;
	background:rgba(255,255,255,.08);
	text-decoration:none;
}

.nav a[aria-current="page"]{
	color:#fff;
	background:rgba(255,255,255,.12);
}

.topbar-tools{
	display:flex;
	align-items:center;
	gap:6px;
}

.icon-btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;

	width:38px;
	height:38px;
	padding:0;

	background:transparent;
	color:rgba(255,255,255,.8);
	border:1px solid rgba(255,255,255,.14);
	border-radius:var(--pill);

	font-size:17px;
	cursor:pointer;
	transition:var(--speed);
}

.icon-btn:hover{
	color:#fff;
	background:rgba(255,255,255,.10);
	border-color:rgba(255,255,255,.28);
	text-decoration:none;
}

.nav-toggle{
	display:none;
}

/*
	The ΕΛΠΙΣ Resolver mark, used like a Bootstrap icon: <i class="bi-resolver">.
	A mask rather than an <img>, so it takes the colour of the text around
	it in either theme, and sits on the same baseline as the bi-* glyphs.
*/
.bi-resolver{
	display:inline-block;
	width:1em;
	height:1em;
	vertical-align:-.125em;

	background-color:currentColor;
	-webkit-mask:url("img/resolver-mark.svg?hash=885d971e") center / contain no-repeat;
	mask:url("img/resolver-mark.svg?hash=885d971e") center / contain no-repeat;
}

/* ---------- buttons ---------- */

.btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:8px;

	padding:10px 20px;

	border:1px solid transparent;
	border-radius:var(--pill);

	font-family:var(--font-body);
	font-size:15px;
	font-weight:600;
	line-height:1.2;
	white-space:nowrap;

	cursor:pointer;
	transition:var(--speed);
}

.btn:hover{
	text-decoration:none;
}

.btn-sm{
	padding:7px 14px;
	font-size:13.5px;
}

.btn-lg{
	padding:14px 26px;
	font-size:16px;
}

.btn-elpis{
	background:var(--primary);
	color:var(--on-primary);
	box-shadow:0 6px 20px -8px rgba(117,66,229,.7);
}

.btn-elpis:hover{
	background:var(--primary-hover);
	color:var(--on-primary);
}

.btn-elpis-ghost{
	background:transparent;
	border-color:var(--line-strong);
	color:var(--text-soft);
}

.btn-elpis-ghost:hover{
	border-color:var(--accent);
	color:var(--accent);
	background:var(--accent-soft);
}

/* On the night-violet banners, whatever the page theme is. */
.on-night .btn-elpis:hover{
	background:var(--violet-light);
}

.btn-night-ghost{
	background:rgba(255,255,255,.06);
	border-color:rgba(255,255,255,.22);
	color:#fff;
}

.btn-night-ghost:hover{
	background:rgba(255,255,255,.14);
	border-color:rgba(255,255,255,.4);
	color:#fff;
}

.btn:disabled{
	opacity:.6;
	cursor:progress;
}

/* ---------- banners ---------- */

/*
	The front page banner and the smaller one that opens every other page
	share one recipe: night violet at the top, a violet glow rising from
	the bottom, the light mesh drifting behind, and big round corners
	where it meets the page.
*/

.hero,
.page-hero{
	position:relative;
	isolation:isolate;
	overflow:hidden;

	color:#fff;
	text-align:center;

	background:
		radial-gradient(70% 60% at 50% 108%, rgba(203,158,255,.55) 0%, rgba(144,89,255,.42) 32%, rgba(117,66,229,0) 72%),
		radial-gradient(45% 45% at 8% 0%, rgba(227,21,135,.16) 0%, rgba(227,21,135,0) 70%),
		radial-gradient(40% 40% at 96% 12%, rgba(255,113,57,.10) 0%, rgba(255,113,57,0) 70%),
		linear-gradient(180deg, var(--night-deep) 0%, var(--night) 45%, #2c1266 100%);

	border-radius:0 0 clamp(28px,6vw,96px) clamp(28px,6vw,96px);
}

.hero::before,
.page-hero::before{
	content:"";
	position:absolute;
	inset:0;
	z-index:-1;

	background:url("img/hero-mesh.svg?hash=cb467bac") center top / cover no-repeat;

	/* Busy at the edges, calm behind the words. */
	-webkit-mask-image:radial-gradient(60% 55% at 50% 32%, rgba(0,0,0,.25) 0%, #000 75%);
	mask-image:radial-gradient(60% 55% at 50% 32%, rgba(0,0,0,.25) 0%, #000 75%);
	opacity:.9;
	pointer-events:none;
}

.hero-inner{
	padding-top:clamp(40px,7vw,72px);
}

.hero-pill,
.page-pill{
	display:inline-flex;
	align-items:center;
	gap:8px;

	padding:10px 20px;
	border-radius:12px;

	background:rgba(29,11,61,.7);
	border:1px solid rgba(171,113,255,.55);
	box-shadow:0 0 0 4px rgba(117,66,229,.12),0 8px 30px -10px rgba(117,66,229,.8);

	color:#fff;
	font-size:14.5px;
	font-weight:600;
}

a.hero-pill:hover{
	color:#fff;
	text-decoration:none;
	border-color:var(--lavender);
}

.hero-pill i,
.page-pill i{
	color:var(--lavender);
}

.hero-eyebrow{
	margin-top:clamp(28px,5vw,52px);

	color:var(--lavender);
	font-size:12.5px;
	font-weight:600;
	letter-spacing:.14em;
	text-transform:uppercase;
}

.hero-title{
	margin-top:10px;

	font-family:var(--font-display);
	font-size:clamp(40px,7.4vw,84px);
	font-weight:700;
	font-stretch:80%;
	line-height:.98;
	letter-spacing:-.005em;
}

.hero-title .flame,
.page-title .flame{
	background:var(--flame);
	-webkit-background-clip:text;
	background-clip:text;
	color:transparent;
}

.hero-lead{
	max-width:640px;
	margin:18px auto 0;

	color:rgba(255,255,255,.86);
	font-size:clamp(15.5px,1.6vw,18px);
	line-height:1.6;
}

.hero-cta{
	display:flex;
	justify-content:center;
	flex-wrap:wrap;
	gap:12px;
	margin-top:30px;
}

.page-hero{
	padding:clamp(44px,7vw,80px) 0 clamp(56px,8vw,96px);
}

.page-title{
	margin-top:22px;

	font-family:var(--font-display);
	font-size:clamp(36px,6vw,68px);
	font-weight:700;
	font-stretch:80%;
	line-height:1;
}

.page-lead{
	max-width:680px;
	margin:16px auto 0;

	color:rgba(255,255,255,.86);
	font-size:clamp(15.5px,1.6vw,18px);
	line-height:1.65;
}

.page-lead b{
	color:#fff;
}

/* The latest release, one line under the lead. */
.release-chip{
	display:inline-flex;
	align-items:center;
	gap:10px;

	margin-top:24px;
	padding:6px 16px 6px 6px;
	border-radius:var(--pill);

	background:rgba(255,255,255,.07);
	border:1px solid rgba(255,255,255,.18);

	color:rgba(255,255,255,.82);
	font-size:14px;
	transition:var(--speed);
}

.release-chip:hover{
	background:rgba(255,255,255,.13);
	border-color:rgba(255,255,255,.34);
	color:#fff;
	text-decoration:none;
}

.release-ver{
	padding:3px 10px;
	border-radius:var(--pill);
	background:var(--violet);
	box-shadow:0 0 18px -2px rgba(255,113,57,.7);

	color:#fff;
	font-family:var(--font-mono);
	font-size:12.5px;
	font-weight:500;
}

.release-name{
	color:#fff;
	font-weight:650;
}

.release-chip i{
	color:var(--lavender);
	transition:transform var(--speed);
}

.release-chip:hover i{
	transform:translateX(3px);
}

/* ---------- the DNS flow, in a browser window ---------- */

/*
	A little browser window in the glow, like the ones on the Firefox
	page, with one DNS lookup playing inside it. The boxes are laid out
	by the grid below; js/app-flow.js measures them and draws the wires.
*/

.flow-window{
	position:relative;
	max-width:1040px;
	margin:clamp(36px,6vw,64px) auto 0;

	background:rgba(20,8,44,.78);
	-webkit-backdrop-filter:blur(10px);
	backdrop-filter:blur(10px);
	border:1px solid rgba(255,255,255,.14);
	border-bottom:0;
	border-radius:18px 18px 0 0;

	box-shadow:0 -10px 60px -20px rgba(144,89,255,.6);
	text-align:left;
}

.flow-bar{
	display:flex;
	align-items:center;
	gap:12px;
	padding:10px 14px;
	border-bottom:1px solid rgba(255,255,255,.08);
}

.flow-dots{
	display:flex;
	gap:6px;
}

.flow-dots i{
	width:10px;
	height:10px;
	border-radius:50%;
	background:#ff5f57;
}

.flow-dots i:nth-child(2){ background:#febc2e }
.flow-dots i:nth-child(3){ background:#28c840 }

.flow-url{
	flex:1;
	min-width:0;

	padding:6px 14px;
	border-radius:var(--pill);
	background:rgba(255,255,255,.07);

	color:rgba(255,255,255,.8);
	font-family:var(--font-mono);
	font-size:12.5px;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}

.flow-url i{
	color:#7ee2a8;
	margin-right:6px;
}

.flow-badge{
	display:inline-flex;
	align-items:center;
	gap:6px;

	padding:5px 11px;
	border-radius:var(--pill);
	background:rgba(126,226,168,.12);

	color:#7ee2a8;
	font-size:12px;
	font-weight:600;
	white-space:nowrap;
}

.flow{
	position:relative;

	display:grid;
	grid-template-columns:repeat(4,minmax(0,1fr));
	grid-template-areas:
		".   .   .        root"
		"you dns resolver tld"
		".   .   .        ns";
	align-items:center;
	column-gap:clamp(16px,6vw,80px);
	row-gap:14px;

	padding:30px clamp(14px,4vw,40px) 26px;
}

.flow-wires{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	overflow:visible;
	pointer-events:none;
}

.wire{
	fill:none;
	stroke:rgba(203,158,255,.22);
	stroke-width:1.5;
	stroke-dasharray:3 5;
}

.streak-tail,
.streak-core{
	fill:none;
	stroke-linecap:round;
}

.streak-tail{
	stroke:var(--violet-light);
	stroke-opacity:.6;
	stroke-width:5;
	filter:drop-shadow(0 0 6px rgba(144,89,255,.9));
}

.streak-core{
	stroke:#f4eaff;
	stroke-width:2.2;
}

.streak-head{
	fill:#fff;
	filter:drop-shadow(0 0 6px #ab71ff) drop-shadow(0 0 2px #fff);
}

.is-answer .streak-tail{
	stroke:#ff7139;
	filter:drop-shadow(0 0 6px rgba(255,113,57,.9));
}

.is-answer .streak-core{
	stroke:#ffe1c4;
}

.is-answer .streak-head{
	filter:drop-shadow(0 0 6px #ff7139) drop-shadow(0 0 2px #fff);
}

.flow-node{
	position:relative;
	z-index:1;

	display:flex;
	align-items:center;
	gap:10px;

	padding:10px 12px;
	border-radius:14px;

	background:rgba(43,22,90,.85);
	border:1px solid rgba(255,255,255,.12);

	transition:border-color .3s, box-shadow .3s, transform .3s;
}

.flow-node[data-node="you"]{ grid-area:you }
.flow-node[data-node="dns"]{ grid-area:dns }
.flow-node[data-node="resolver"]{ grid-area:resolver }
.flow-node[data-node="root"]{ grid-area:root }
.flow-node[data-node="tld"]{ grid-area:tld }
.flow-node[data-node="ns"]{ grid-area:ns }

/* The two boxes that are ours carry the Firefox flame on their edge. */
.flow-node.is-elpis{
	background:
		linear-gradient(rgba(43,22,90,.96),rgba(43,22,90,.96)) padding-box,
		var(--flame) border-box;
	border:1.5px solid transparent;
}

.flow-node.is-active{
	border-color:rgba(203,158,255,.7);
	box-shadow:0 0 0 4px rgba(144,89,255,.18),0 0 28px -4px rgba(144,89,255,.8);
}

.flow-node.is-elpis.is-active{
	border-color:transparent;
}

.fn-icon{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	flex-shrink:0;

	width:38px;
	height:38px;
	border-radius:11px;

	background:rgba(255,255,255,.08);
	color:var(--lavender);
	font-size:18px;
}

.fn-icon img{
	width:26px;
	height:26px;
}

.fn-glyph{
	font-family:var(--font-mono);
	font-size:14px;
	font-weight:500;
	color:#fff;
}

.fn-text{
	display:flex;
	flex-direction:column;
	min-width:0;
	line-height:1.25;
}

.fn-text b{
	color:#fff;
	font-size:14.5px;
	font-weight:650;
}

.fn-text small{
	color:rgba(255,255,255,.6);
	font-size:12px;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}

/* The words that ride along with the packet, and the notes that pop up
   above a box when it does something. */
.flow-chip,
.flow-note{
	position:absolute;
	left:0;
	top:0;
	z-index:3;

	padding:4px 10px;
	border-radius:var(--pill);

	font-family:var(--font-mono);
	font-size:12px;
	font-weight:500;
	white-space:nowrap;

	pointer-events:none;
	opacity:0;
	transition:opacity .2s;
}

.flow-chip{
	background:#f4eaff;
	color:#321c64;
	box-shadow:0 4px 18px -4px rgba(144,89,255,.9);
}

.flow-chip.is-answer{
	background:#ffe1c4;
	color:#7a2a07;
	box-shadow:0 4px 18px -4px rgba(255,113,57,.9);
}

.flow-note{
	background:rgba(126,226,168,.16);
	border:1px solid rgba(126,226,168,.5);
	color:#bff3d4;
	font-family:var(--font-body);
	font-weight:600;
}

.flow-chip.is-on,
.flow-note.is-on{
	opacity:1;
}

/* Six steps under the diagram. All of them read like a list without
   JavaScript; with it, the one playing is lit. */
.flow-steps{
	display:grid;
	grid-template-columns:repeat(6,minmax(0,1fr));
	gap:0;

	margin:0;
	padding:0;
	list-style:none;
	counter-reset:flow;

	border-top:1px solid rgba(255,255,255,.08);
}

.flow-steps li{
	counter-increment:flow;
	position:relative;

	padding:16px 14px 20px;

	color:rgba(255,255,255,.55);
	font-size:13px;
	line-height:1.45;

	border-right:1px solid rgba(255,255,255,.06);
	transition:color .3s, background .3s;
}

.flow-steps li:last-child{
	border-right:0;
}

.flow-steps li::before{
	content:counter(flow);

	display:flex;
	align-items:center;
	justify-content:center;

	width:22px;
	height:22px;
	margin-bottom:8px;
	border-radius:50%;

	background:rgba(255,255,255,.1);
	color:#fff;
	font-size:11.5px;
	font-weight:700;
}

.flow-steps li b{
	color:inherit;
}

.flow-steps li.is-on{
	color:#fff;
	background:linear-gradient(180deg,rgba(144,89,255,.2),rgba(144,89,255,0));
}

.flow-steps li.is-on::before{
	background:var(--violet-light);
}

.flow-steps li.is-done::before{
	background:rgba(144,89,255,.5);
}

.flow-steps li.is-on::after{
	content:"";
	position:absolute;
	left:0;
	right:0;
	top:-1px;
	height:2px;
	background:var(--flame);
}

/* ---------- sections ---------- */

.section{
	padding:clamp(56px,8vw,96px) 0;
}

.section-tight{
	padding-top:clamp(36px,5vw,56px);
}

/* Jump links land below the sticky top bar, not under it. */
[id]{
	scroll-margin-top:76px;
}

.section-alt{
	background:var(--bg-alt);
	border-top:1px solid var(--line);
	border-bottom:1px solid var(--line);
}

.section-head{
	max-width:720px;
	margin-bottom:clamp(28px,4vw,44px);
}

.section-head.center{
	margin-left:auto;
	margin-right:auto;
	text-align:center;
}

.eyebrow{
	color:var(--accent);
	font-size:12.5px;
	font-weight:700;
	letter-spacing:.14em;
	text-transform:uppercase;
}

.section-title{
	margin-top:8px;

	font-family:var(--font-display);
	font-size:clamp(32px,4.6vw,52px);
	font-weight:700;
	font-stretch:82%;
	line-height:1.02;
	color:var(--text);
}

.section-lead{
	margin-top:14px;
	color:var(--text-soft);
	font-size:17px;
	line-height:1.65;
}

.sub-title{
	margin:clamp(36px,5vw,52px) 0 16px;

	font-family:var(--font-display);
	font-size:clamp(24px,3vw,30px);
	font-weight:650;
	font-stretch:85%;
	line-height:1.1;
	color:var(--text);
}

.sub-lead{
	max-width:760px;
	margin:-6px 0 14px;
	color:var(--text-soft);
	font-size:16px;
	line-height:1.65;
}

.prose{
	max-width:760px;
	color:var(--text-soft);
	font-size:16px;
	line-height:1.75;
}

.prose p + p{
	margin-top:14px;
}

/* ---------- cards ---------- */

.cards{
	display:grid;
	grid-template-columns:repeat(3,minmax(0,1fr));
	gap:16px;
}

.cards-2{ grid-template-columns:repeat(2,minmax(0,1fr)) }
.cards-4{ grid-template-columns:repeat(4,minmax(0,1fr)) }

.card{
	position:relative;

	background:var(--surface);
	border:1px solid var(--line);
	border-radius:var(--radius-lg);
	padding:24px;

	/* A long line in a code block scrolls inside it instead of
	   stretching the card past a phone's edge. */
	min-width:0;

	transition:var(--speed);
}

.card:hover{
	border-color:var(--line-strong);
	box-shadow:var(--shadow);
}

.card-icon{
	display:inline-flex;
	align-items:center;
	justify-content:center;

	width:46px;
	height:46px;
	margin-bottom:16px;
	border-radius:14px;

	background:var(--accent-soft);
	color:var(--accent);
	font-size:21px;
}

.card-title{
	margin-bottom:6px;

	font-family:var(--font-display);
	font-size:22px;
	font-weight:650;
	font-stretch:88%;
	line-height:1.15;
	color:var(--text);
}

.card-text{
	color:var(--text-soft);
	font-size:15px;
	line-height:1.6;
}

.card-text code{
	font-size:13.5px;
}

/* A card that is a link all over. */
a.card{
	display:flex;
	flex-direction:column;
	color:var(--text);
	text-decoration:none;
}

a.card:hover{
	color:var(--text);
	text-decoration:none;
	transform:translateY(-3px);
	border-color:var(--accent);
}

.card-more{
	display:inline-flex;
	align-items:center;
	gap:4px;
	margin-top:auto;
	padding-top:16px;

	color:var(--accent);
	font-size:14.5px;
	font-weight:600;
}

.card-more i{
	transition:transform var(--speed);
}

a.card:hover .card-more i{
	transform:translateX(4px);
}

/* ---------- stats ---------- */

.stats{
	display:grid;
	grid-template-columns:repeat(4,minmax(0,1fr));
	gap:16px;
}

.stat{
	padding:22px 24px;
	border-radius:var(--radius-lg);
	background:var(--surface);
	border:1px solid var(--line);
}

.stat-num{
	font-family:var(--font-display);
	font-size:clamp(34px,4vw,46px);
	font-weight:700;
	font-stretch:80%;
	line-height:1;

	background:var(--flame);
	-webkit-background-clip:text;
	background-clip:text;
	color:transparent;
}

.stats + .section-head{
	margin-top:clamp(48px,7vw,80px);
}

.stat-text{
	margin-top:8px;
	color:var(--text-soft);
	font-size:14.5px;
	line-height:1.5;
}

/* ---------- endpoint picker ---------- */

.picker{
	background:var(--surface);
	border:1px solid var(--line);
	border-radius:var(--radius-lg);
	box-shadow:var(--shadow);
	overflow:hidden;
}

.pick-rows{
	padding:18px 22px 8px;
}

.pick-row{
	display:flex;
	align-items:flex-start;
	gap:16px;
	padding:6px 0;
}

.pick-label{
	flex:0 0 110px;
	padding-top:11px;

	color:var(--text-faint);
	font-size:13px;
	font-weight:700;
	letter-spacing:.08em;
	text-transform:uppercase;
}

.pick-options{
	flex:1;
	display:flex;
	flex-wrap:wrap;
	gap:6px;
	min-width:0;
}

.option-btn{
	flex:1 1 0;
	min-width:max-content;

	padding:10px 16px;

	background:var(--btn-bg);
	color:var(--btn-text);
	border:1px solid transparent;
	border-radius:12px;

	font-family:var(--font-body);
	font-size:14.5px;
	font-weight:550;

	cursor:pointer;
	transition:var(--speed);
}

.option-btn:hover:not(.disabled-option){
	border-color:var(--accent);
	color:var(--accent);
	background:var(--accent-soft);
}

.option-btn.active,
.option-btn.active:hover{
	background:var(--primary);
	border-color:var(--primary);
	color:var(--on-primary);
	font-weight:650;
	box-shadow:0 4px 14px -6px rgba(117,66,229,.8);
}

.disabled-option{
	background:var(--btn-dead-bg) !important;
	color:var(--btn-dead-text) !important;
	text-decoration:line-through;
	cursor:not-allowed;
}

.pick-result{
	margin-top:10px;
	padding:22px;

	background:var(--bg-alt);
	border-top:1px solid var(--line);
}

.result-label{
	color:var(--text-faint);
	font-size:13px;
	font-weight:700;
	letter-spacing:.08em;
	text-transform:uppercase;
	margin-bottom:8px;
}

.endpoint-line{
	display:flex;
	align-items:center;
	gap:10px;
	flex-wrap:wrap;
}

#endpoint{
	flex:1 1 320px;
	min-width:0;

	padding:12px 16px;
	border-radius:12px;
	background:var(--surface);
	border:1.5px solid var(--accent);

	color:var(--text);
	font-size:16px;
	white-space:nowrap;
	overflow-x:auto;
}

.result-actions{
	display:flex;
	flex-wrap:wrap;
	gap:8px;
}

.stamp-box{
	margin-top:14px;
}

.stamp-box > summary{
	display:inline-flex;
	align-items:center;
	gap:6px;

	color:var(--text-soft);
	font-size:14px;
	font-weight:600;
	cursor:pointer;
	list-style:none;
}

.stamp-box > summary::-webkit-details-marker{
	display:none;
}

.stamp-box > summary i{
	transition:transform var(--speed);
}

.stamp-box[open] > summary i{
	transform:rotate(90deg);
}

.stamp-box .endpoint-line{
	margin-top:10px;
}

#stamp{
	flex:1 1 320px;
	min-width:0;

	padding:10px 14px;
	border-radius:10px;
	background:var(--surface);
	border:1px solid var(--line);

	color:var(--text-soft);
	font-size:13px;
	white-space:nowrap;
	overflow-x:auto;
}

.hint{
	margin-top:8px;
	color:var(--text-faint);
	font-size:13.5px;
	line-height:1.6;
}

.selection-summary{
	margin-top:18px;
	color:var(--text-soft);
	font-size:15px;
}

.summary-chips{
	display:flex;
	flex-wrap:wrap;
	gap:6px;
}

.summary-chip{
	display:inline-flex;
	align-items:center;
	gap:6px;

	padding:4px 10px;
	border-radius:var(--pill);
	background:var(--surface);
	border:1px solid var(--line);

	font-size:13px;
}

.summary-chip b{
	color:var(--text);
	font-weight:600;
}

.summary-key{
	color:var(--text-faint);
	font-size:11px;
	font-weight:700;
	letter-spacing:.06em;
	text-transform:uppercase;
}

.summary-note{
	margin-top:10px;
	line-height:1.6;
	font-size:14.5px;
}

.summary-meta{
	margin-top:8px;
	font-size:13px;
	color:var(--text-faint);
}

.rotation{
	margin-top:16px;
}

.rotation-label{
	color:var(--text-faint);
	font-size:13px;
}

.server-list{
	display:flex;
	flex-wrap:wrap;
	gap:6px;
	margin-top:8px;
}

.server-badge{
	display:inline-block;

	padding:4px 10px;
	border-radius:var(--pill);
	background:var(--surface);
	border:1px solid var(--line);

	color:var(--text-soft);
	font-family:var(--font-mono);
	font-size:12.5px;
}

.picker-next{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:16px;
	flex-wrap:wrap;

	padding:16px 22px;
	border-top:1px solid var(--line);
	color:var(--text-soft);
	font-size:15px;
}

/* ---------- supporters ---------- */

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

.as-card{
	display:flex;
	flex-direction:column;
	gap:4px;

	padding:20px 22px;
	border-radius:var(--radius-lg);
	background:var(--surface);
	border:1px solid var(--line);

	color:var(--text);
	text-decoration:none;
	transition:var(--speed);
}

a.as-card:hover{
	color:var(--text);
	text-decoration:none;
	border-color:var(--accent);
	box-shadow:var(--shadow);
	transform:translateY(-2px);
}

.as-num{
	font-family:var(--font-mono);
	font-size:13px;
	font-weight:500;
	color:var(--accent);
}

.as-name{
	font-family:var(--font-display);
	font-size:23px;
	font-weight:650;
	font-stretch:88%;
	line-height:1.15;
}

.as-where{
	display:inline-flex;
	align-items:center;
	gap:5px;
	color:var(--text-faint);
	font-size:14px;
}

.as-role{
	margin-top:8px;
	color:var(--text-soft);
	font-size:14px;
	line-height:1.55;
}

.as-grid-3{
	grid-template-columns:repeat(3,minmax(0,1fr));
}

/* What a site is (Colo or VPS) and what it runs (DNS Guard, Resolver). */
.as-tags{
	display:flex;
	flex-wrap:wrap;
	gap:6px;
	margin-top:10px;
}

.as-tag{
	display:inline-flex;
	align-items:center;
	gap:5px;

	padding:3px 10px;
	border-radius:var(--pill);
	border:1px solid var(--line-strong);

	color:var(--text-soft);
	font-size:12.5px;
	font-weight:600;
}

.as-tag-run{
	border-color:color-mix(in srgb, var(--accent) 45%, transparent);
	background:var(--accent-soft);
	color:var(--accent);
}

.roles{
	display:flex;
	flex-wrap:wrap;
	gap:8px 20px;
	margin:-4px 0 20px;
	color:var(--text-soft);
	font-size:14.5px;
}

.roles span{
	display:inline-flex;
	align-items:center;
	gap:8px;
}

/* ---------- network map ---------- */

.map-card{
	position:relative;
	overflow:hidden;

	border:1px solid var(--line);
	border-radius:var(--radius-lg);
	background:var(--map-sea);
	box-shadow:var(--shadow);
}

.sea-map{
	display:block;
	width:100%;
	height:auto;
}

.map-sea{
	fill:var(--map-sea);
}

.map-land{
	fill:var(--map-land);
	stroke:var(--map-border);
	stroke-width:.8;
	stroke-linejoin:round;
}

.map-dots{
	fill:var(--map-dots);
}

.traffic{
	fill:none;
	stroke:var(--map-traffic);
	stroke-width:2.6;
	stroke-linecap:round;
	stroke-dasharray:0 9;
	opacity:.85;
	animation:traffic var(--dur,4s) linear infinite;
	animation-delay:var(--delay,0s);
}

@keyframes traffic{
	from{ stroke-dashoffset:0 }
	to{ stroke-dashoffset:-90 }
}

.city{
	fill:var(--map-city);
	stroke:var(--map-sea);
	stroke-width:1.5;
}

.city-label{
	fill:var(--map-label);
	font-family:var(--font-body);
	font-size:12px;
	font-weight:500;
	opacity:.7;
	paint-order:stroke;
	stroke:var(--map-sea);
	stroke-width:3px;
	stroke-linejoin:round;
}

.hub-core{
	fill:var(--map-hub);
	stroke:#fff;
	stroke-width:2.5;
}

.hub-ring{
	fill:none;
	stroke:var(--map-hub);
	stroke-width:2;
	transform-box:fill-box;
	transform-origin:center;
	animation:hub-pulse 2.4s ease-out infinite;
}

.hub-ring.late{
	animation-delay:1.2s;
}

@keyframes hub-pulse{
	from{ transform:scale(.6); opacity:.9 }
	to{ transform:scale(3.2); opacity:0 }
}

.callout-box{
	fill:var(--map-callout);
	stroke:var(--map-hub);
	stroke-width:1.2;
}

.callout-line{
	fill:none;
	stroke:var(--map-hub);
	stroke-width:1.2;
	stroke-dasharray:3 3;
}

.callout-asn{
	fill:var(--map-hub);
	font-family:var(--font-mono);
	font-size:13px;
	font-weight:500;
}

.callout-name{
	fill:var(--map-label);
	font-family:var(--font-body);
	font-size:14px;
	font-weight:650;
}

.callout-where{
	fill:var(--map-label);
	font-family:var(--font-body);
	font-size:12.5px;
	opacity:.7;
}

/* Top right: the Philippine Sea is empty, and the bottom left is where
   the Malaysian and Indonesian labels need the room. */
.map-legend{
	position:absolute;
	right:16px;
	top:16px;

	display:flex;
	flex-wrap:wrap;
	gap:6px 16px;

	padding:8px 14px;
	border-radius:var(--pill);
	background:var(--map-callout);
	border:1px solid var(--line);

	color:var(--text-soft);
	font-size:13px;
}

.map-legend span{
	display:inline-flex;
	align-items:center;
	gap:7px;
}

.legend-hub{
	width:11px;
	height:11px;
	border-radius:50%;
	background:var(--map-hub);
	box-shadow:0 0 0 2px #fff,0 0 0 4px var(--map-hub);
	transform:scale(.8);
}

.legend-traffic{
	width:26px;
	height:3px;
	background:radial-gradient(circle, var(--map-traffic) 1.4px, transparent 1.6px) 0 50% / 7px 3px repeat-x;
}

.legend-city{
	width:7px;
	height:7px;
	border-radius:50%;
	background:var(--map-city);
}

@media (prefers-reduced-motion: reduce){
	.traffic,
	.hub-ring{
		animation:none;
	}
}

/* ---------- address table ---------- */

.table-wrap{
	overflow-x:auto;
	border:1px solid var(--line);
	border-radius:var(--radius-lg);
	background:var(--surface);
}

.ip-table{
	width:100%;
	border-collapse:collapse;
	font-size:15px;
}

.ip-table th{
	padding:14px 18px;
	background:var(--bg-alt);
	border-bottom:1px solid var(--line);

	color:var(--text-faint);
	font-size:12.5px;
	font-weight:700;
	letter-spacing:.08em;
	text-align:left;
	text-transform:uppercase;
}

.ip-table td{
	padding:10px 18px;
	border-bottom:1px solid var(--line);
	vertical-align:middle;
	white-space:nowrap;
}

.ip-table tr:last-child td{
	border-bottom:0;
}

.ip-table tbody tr:hover{
	background:var(--accent-soft);
}

.srv-name{
	font-weight:650;
}

.srv-tag{
	display:inline-block;
	margin-left:8px;
	padding:1px 8px;
	border-radius:var(--pill);
	background:var(--warn-soft);
	color:var(--warn);
	font-size:11.5px;
	font-weight:700;
	vertical-align:1px;
}

.srv-tag-info{
	background:var(--accent-soft);
	color:var(--accent);
}

.ip-none{
	color:var(--text-faint);
	font-size:13.5px;
}

.ip-cell{
	display:inline-flex;
	align-items:center;
	gap:8px;
}

.ip-cell code{
	color:var(--text);
	font-size:14px;
}

.copy-mini{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:4px;

	height:28px;
	padding:0 9px;

	background:transparent;
	border:1px solid var(--line);
	border-radius:var(--pill);
	color:var(--text-faint);

	font-family:var(--font-body);
	font-size:12px;
	cursor:pointer;
	transition:var(--speed);
}

.copy-mini:hover{
	border-color:var(--accent);
	color:var(--accent);
	background:var(--accent-soft);
}

.table-actions{
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	margin-top:14px;
}

/* ---------- size chart ---------- */

/*
	A table that is also a bar chart: every value is printed, so the bars
	only carry the proportion. One axis, starting at zero, scaled to the
	largest signature. Thin bars, square at the baseline, 4px round at the
	data end.
*/

.size-table tbody th{
	padding:12px 18px;
	border-bottom:1px solid var(--line);
	background:none;

	color:var(--text);
	font-size:15px;
	font-weight:400;
	letter-spacing:0;
	text-transform:none;
	white-space:nowrap;
}

.size-table tr:last-child th{
	border-bottom:0;
}

.alg-num{
	margin-left:6px;
	color:var(--text-faint);
	font-family:var(--font-mono);
	font-size:12.5px;
}

.size-table td{
	color:var(--text-soft);
	font-family:var(--font-mono);
	font-size:14px;
}

.size-col{
	width:44%;
}

.size-cell{
	display:flex;
	align-items:center;
	gap:12px;
}

.size-bar{
	flex:1;
	display:block;
	height:14px;
}

.size-bar i{
	display:block;
	width:var(--w);
	min-width:3px;
	height:100%;

	background:var(--bar-context);
	border-radius:0 4px 4px 0;
}

.size-val{
	flex:0 0 64px;
	color:var(--text);
	text-align:right;
}

.size-table .is-hero{
	background:var(--accent-soft);
}

.size-table .is-hero .size-bar i{
	background:var(--bar-hero);
}

.size-table .is-hero .srv-name,
.size-table .is-hero .size-val{
	font-weight:650;
}

.safe-no,
.safe-yes{
	display:inline-flex;
	align-items:center;
	gap:6px;
	font-family:var(--font-body);
}

.safe-yes{
	color:var(--text);
	font-weight:600;
}

.safe-yes i{
	color:var(--accent);
}

/* ---------- notes and calls to action ---------- */

.note{
	display:flex;
	gap:12px;

	margin-top:16px;
	padding:14px 18px;
	border-radius:var(--radius);
	background:var(--accent-soft);
	border:1px solid color-mix(in srgb, var(--accent) 40%, transparent);

	color:var(--text-soft);
	font-size:15px;
	line-height:1.65;
}

.note > i{
	color:var(--accent);
	font-size:18px;
	line-height:1.4;
}

.note-warn{
	background:var(--warn-soft);
	border-color:color-mix(in srgb, var(--warn) 45%, transparent);
}

.note-warn > i{
	color:var(--warn);
}

.cta{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:24px;

	margin-top:clamp(36px,5vw,56px);
	padding:clamp(24px,4vw,36px);
	border-radius:var(--radius-lg);

	color:#fff;
	background:
		radial-gradient(60% 120% at 100% 100%, rgba(144,89,255,.55) 0%, rgba(144,89,255,0) 70%),
		radial-gradient(40% 80% at 0% 0%, rgba(227,21,135,.18) 0%, rgba(227,21,135,0) 70%),
		var(--night);
}

.cta-title{
	font-family:var(--font-display);
	font-size:clamp(24px,3vw,32px);
	font-weight:700;
	font-stretch:85%;
	line-height:1.1;
}

.cta-text{
	margin-top:6px;
	max-width:640px;
	color:rgba(255,255,255,.8);
	font-size:15.5px;
	line-height:1.6;
}

.cta-text b{
	color:#fff;
}

.cta-actions{
	display:flex;
	flex-wrap:wrap;
	gap:10px;
	flex-shrink:0;
}

/* ---------- jump list ---------- */

.jump{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:8px;
	margin-top:28px;
}

.jump a{
	display:inline-flex;
	align-items:center;
	gap:8px;

	padding:8px 16px;
	border-radius:var(--pill);
	background:rgba(255,255,255,.08);
	border:1px solid rgba(255,255,255,.16);

	color:#fff;
	font-size:14px;
	font-weight:500;
	transition:var(--speed);
}

.jump a:hover{
	background:rgba(255,255,255,.16);
	color:#fff;
	text-decoration:none;
}

.jump a i{
	color:var(--lavender);
}

/* ---------- block lists ---------- */

/*
	Each list is a native <details>: one line closed, the description and
	subscription URLs open. No JavaScript, keyboard accessible, and it
	survives having the scripts blocked.
*/

.blacklist{
	display:flex;
	flex-direction:column;
	gap:10px;
}

.bl-item{
	background:var(--surface);
	border:1px solid var(--line);
	border-radius:var(--radius);
	transition:var(--speed);
}

.bl-item:hover{
	border-color:var(--line-strong);
}

.bl-item[open]{
	border-color:var(--accent);
	box-shadow:var(--shadow);
}

.bl-item > summary{
	display:flex;
	align-items:center;
	gap:14px;

	padding:14px 18px;

	cursor:pointer;
	list-style:none;
	-webkit-user-select:none;
	user-select:none;
}

.bl-item > summary::-webkit-details-marker{
	display:none;
}

.bl-index{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	flex-shrink:0;

	width:30px;
	height:30px;
	border-radius:50%;

	background:var(--accent-soft);
	color:var(--accent);
	font-size:13px;
	font-weight:700;
}

.bl-name{
	flex:1;
	font-weight:650;
	color:var(--text);
}

.bl-tag{
	padding:2px 10px;
	border-radius:var(--pill);
	border:1px solid var(--line);

	color:var(--text-faint);
	font-size:11.5px;
	font-weight:700;
	letter-spacing:.05em;
	white-space:nowrap;
}

.bl-tag-ours{
	color:var(--accent);
	border-color:var(--accent);
	background:var(--accent-soft);
}

.bl-chev{
	color:var(--text-faint);
	transition:transform var(--speed);
}

.bl-item[open] .bl-chev{
	transform:rotate(180deg);
}

.bl-body{
	padding:0 18px 18px 62px;
	animation:bl-reveal .18s ease-out;
}

@keyframes bl-reveal{
	from{ opacity:0; transform:translateY(-4px) }
	to{ opacity:1; transform:none }
}

@media (prefers-reduced-motion: reduce){
	.bl-body{ animation:none }
}

.bl-text{
	color:var(--text-soft);
	font-size:15px;
	line-height:1.65;
	margin-bottom:10px;
}

.bl-url{
	display:flex;
	align-items:center;
	gap:10px;
	flex-wrap:wrap;

	margin-top:8px;
	padding:8px 8px 8px 14px;
	border-radius:12px;
	background:var(--bg-alt);
	border:1px solid var(--line);
}

.bl-url code{
	flex:1;
	min-width:0;
	color:var(--text-soft);
	font-size:12.5px;
	white-space:nowrap;
	overflow-x:auto;
}

.bl-note{
	color:var(--text-faint);
	font-size:12px;
	white-space:nowrap;
}

.bl-src{
	display:inline-flex;
	align-items:center;
	gap:6px;
	margin-top:12px;
	color:var(--text-faint);
	font-size:13.5px;
}

.bl-src:hover{
	color:var(--accent);
}

/* ---------- setup guide ---------- */

.picked-box{
	display:grid;
	grid-template-columns:auto 1fr;
	gap:8px 18px;

	padding:20px 22px;
	border-radius:var(--radius-lg);
	background:var(--surface);
	border:1.5px solid var(--accent);
	box-shadow:var(--shadow);
}

.picked-box dt{
	color:var(--text-faint);
	font-size:13px;
	font-weight:700;
	letter-spacing:.06em;
	text-transform:uppercase;
	padding-top:2px;
}

.picked-box dd{
	margin:0;
	min-width:0;
}

.picked{
	font-family:var(--font-mono);
	font-size:14.5px;
	color:var(--accent);
	word-break:break-all;
}

.doc-section{
	padding:clamp(22px,3vw,30px);
	margin-bottom:16px;

	background:var(--surface);
	border:1px solid var(--line);
	border-radius:var(--radius-lg);

	scroll-margin-top:84px;
}

.doc-title{
	display:flex;
	align-items:center;
	gap:12px;
	flex-wrap:wrap;
	margin-bottom:8px;

	font-family:var(--font-display);
	font-size:clamp(24px,3vw,30px);
	font-weight:650;
	font-stretch:85%;
	line-height:1.15;
	color:var(--text);
}

.doc-title i{
	display:inline-flex;
	align-items:center;
	justify-content:center;

	width:42px;
	height:42px;
	border-radius:12px;
	background:var(--accent-soft);
	color:var(--accent);
	font-size:20px;
}

.doc-tag{
	margin-left:auto;
	padding:3px 12px;
	border-radius:var(--pill);
	background:var(--accent-soft);
	color:var(--accent);

	font-family:var(--font-body);
	font-size:12px;
	font-weight:700;
	letter-spacing:.04em;
}

.doc-text{
	color:var(--text-soft);
	font-size:15.5px;
	line-height:1.7;
	margin-bottom:12px;
}

/* A list that carries on after a code block sets style="--start:3",
   because a CSS counter cannot read the start attribute. */
.doc-steps{
	counter-reset:step var(--start,0);
	list-style:none;
	padding-left:0;
	margin:0;
}

.doc-steps li{
	counter-increment:step;
	position:relative;

	padding-left:40px;
	padding-bottom:12px;

	color:var(--text-soft);
	font-size:15.5px;
	line-height:1.65;
}

.doc-steps li::before{
	content:counter(step);

	position:absolute;
	left:0;
	top:0;

	display:flex;
	align-items:center;
	justify-content:center;

	width:26px;
	height:26px;
	border-radius:50%;

	background:var(--primary);
	color:#fff;
	font-size:13px;
	font-weight:700;
}

.code-block{
	position:relative;

	margin:10px 0 16px;
	padding:16px 18px;
	border-radius:var(--radius);

	background:var(--bg-alt);
	border:1px solid var(--line);

	overflow-x:auto;
}

.code-block pre{
	margin:0;

	font-family:var(--font-mono);
	font-size:13.5px;
	line-height:1.7;
	color:var(--text);

	white-space:pre;
}

.copy-code{
	position:absolute;
	top:8px;
	right:8px;

	padding:4px 10px;
	border-radius:var(--pill);
	background:var(--surface);
	border:1px solid var(--line);
	color:var(--text-faint);

	font-family:var(--font-body);
	font-size:12px;

	cursor:pointer;
	opacity:0;
	transition:var(--speed);
}

.code-block:hover .copy-code,
.copy-code:focus{
	opacity:1;
}

.copy-code:hover{
	color:var(--accent);
	border-color:var(--accent);
}

/* Phones have no hover, so the button is always there. */
@media (hover: none){
	.copy-code{ opacity:1 }
}

/* ---------- the gate (2.5.0 Erdentempel) ---------- */

/*
	One question on its way in: the gate first, then either REFUSED or
	the usual walk from the cache to the name server. Side by side here,
	stacked on a phone.
*/

.gate{
	display:grid;
	grid-template-columns:auto 44px auto 44px minmax(0,1fr);
	align-items:center;

	margin:0 0 16px;
	padding:clamp(18px,3vw,28px);
	border-radius:var(--radius-lg);

	background:var(--surface);
	border:1px solid var(--line);
}

.gate-box{
	display:flex;
	align-items:center;
	gap:12px;

	padding:12px 16px 12px 12px;
	border-radius:var(--radius);
	background:var(--bg-alt);
	border:1px solid var(--line);
}

.gate-box i{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	flex-shrink:0;

	width:38px;
	height:38px;
	border-radius:11px;

	background:var(--accent-soft);
	color:var(--accent);
	font-size:18px;
}

.gate-box b,
.gate-way b{
	display:block;
	color:var(--text);
	font-size:15px;
	line-height:1.3;
}

.gate-box small,
.gate-way small{
	display:block;
	margin-top:2px;
	color:var(--text-faint);
	font-size:12.5px;
	line-height:1.4;
}

.gate-core{
	border-color:var(--accent);
	box-shadow:0 0 0 4px var(--accent-soft);
}

.gate-core i{
	background:var(--primary);
	color:var(--on-primary);
}

.gate-wire{
	position:relative;
	height:2px;
	margin:0 8px 0 4px;
	background:var(--line-strong);
}

.gate-wire::after{
	content:"";
	position:absolute;
	right:-6px;
	top:-4px;

	border-left:7px solid var(--line-strong);
	border-top:5px solid transparent;
	border-bottom:5px solid transparent;
}

.gate-ways{
	display:grid;
	gap:10px;
}

.gate-way{
	padding:10px 16px;
	border-radius:var(--radius);
	border:1px solid var(--line);
	border-left-width:3px;
}

.gate-way b{
	margin-top:2px;
	font-family:var(--font-mono);
	font-size:13.5px;
	font-weight:500;
}

.gate-tag{
	display:block;
	font-size:11.5px;
	font-weight:700;
	letter-spacing:.1em;
	text-transform:uppercase;
}

.gate-refused{
	background:var(--warn-soft);
	border-color:color-mix(in srgb, var(--warn) 40%, transparent);
	border-left-color:var(--warn);
}

.gate-refused .gate-tag{
	color:var(--warn);
}

.gate-pass{
	background:var(--accent-soft);
	border-color:color-mix(in srgb, var(--accent) 35%, transparent);
	border-left-color:var(--accent);
}

.gate-pass .gate-tag{
	color:var(--accent);
}

/* ---------- the road to 2.5.0 ---------- */

/*
	Night violet in both themes, like the banners, under a sky for the
	celestial releases that thins out toward the bottom, where the story
	comes back to earth and the glow turns to flame.

	The rail down the timeline fills with the flame as you scroll:
	js/app-journey.js sets --fill. Without it the rail is simply full.
*/

.journey{
	position:relative;
	isolation:isolate;
	overflow:hidden;

	color:#fff;
	background:
		radial-gradient(65% 30% at 50% 104%, rgba(255,113,57,.24) 0%, rgba(227,21,135,.14) 45%, rgba(227,21,135,0) 80%),
		radial-gradient(45% 30% at 92% 0%, rgba(144,89,255,.30) 0%, rgba(144,89,255,0) 70%),
		radial-gradient(35% 25% at 0% 30%, rgba(227,21,135,.12) 0%, rgba(227,21,135,0) 70%),
		linear-gradient(180deg, var(--night-deep) 0%, var(--night) 55%, #2a0f4f 100%);
}

.journey::before{
	content:"";
	position:absolute;
	inset:0;
	z-index:-1;

	background-image:
		radial-gradient(1.5px 1.5px at 24px 36px, #fff, transparent),
		radial-gradient(1px 1px at 150px 92px, rgba(255,255,255,.85), transparent),
		radial-gradient(1.5px 1.5px at 236px 210px, var(--lavender), transparent),
		radial-gradient(1px 1px at 96px 180px, rgba(255,255,255,.7), transparent),
		radial-gradient(1.5px 1.5px at 60px 120px, rgba(255,255,255,.6), transparent),
		radial-gradient(1px 1px at 330px 300px, var(--lavender), transparent),
		radial-gradient(2px 2px at 400px 60px, rgba(255,255,255,.9), transparent);
	background-size:
		320px 280px, 320px 280px, 320px 280px,
		470px 390px, 470px 390px, 470px 390px, 470px 390px;

	-webkit-mask-image:linear-gradient(180deg, #000 0%, #000 50%, transparent 92%);
	mask-image:linear-gradient(180deg, #000 0%, #000 50%, transparent 92%);
	opacity:.75;
	pointer-events:none;
}

.journey .eyebrow{
	color:var(--lavender);
}

.journey .section-title{
	color:#fff;
}

.journey .section-title .flame{
	background:var(--flame);
	-webkit-background-clip:text;
	background-clip:text;
	color:transparent;
}

.journey .section-lead{
	color:rgba(255,255,255,.78);
}

.journey b{
	color:#fff;
}

.timeline{
	--when:150px;
	--rail:48px;
	--fill:1;

	position:relative;
	display:grid;
	gap:22px;

	margin:0;
	padding:0;
	list-style:none;
}

/* The rail, and the flame climbing down it. It runs on past 2.5.0 and
   fades out: the road doesn't end there. */
.timeline::before,
.timeline::after{
	content:"";
	position:absolute;
	top:20px;
	bottom:0;
	left:calc(var(--when) + var(--rail) / 2 - 1px);

	width:2px;
	border-radius:2px;

	-webkit-mask-image:linear-gradient(180deg, #000 calc(100% - 160px), transparent);
	mask-image:linear-gradient(180deg, #000 calc(100% - 160px), transparent);
}

.timeline::before{
	background:rgba(255,255,255,.12);
}

.timeline::after{
	background:linear-gradient(180deg,
		rgba(203,158,255,.25) 0%,
		var(--lavender) 16%,
		var(--violet-light) 45%,
		#e31587 75%,
		#ff7139 90%,
		#ffbd4f 100%);
	box-shadow:0 0 14px rgba(144,89,255,.55);

	clip-path:inset(0 0 calc((1 - var(--fill)) * 100%) 0);
}

.tl{
	position:relative;
	display:grid;
	grid-template-columns:var(--when) var(--rail) minmax(0,1fr);
	align-items:start;
}

.tl-when{
	padding:16px 4px 0 0;
	text-align:right;
}

.tl-ver{
	display:block;

	font-family:var(--font-display);
	font-size:32px;
	font-weight:700;
	font-stretch:80%;
	line-height:1;
	color:#fff;
}

.tl-ver-range{
	font-size:22px;
	line-height:1.1;
}

.tl-date{
	display:block;
	margin-top:6px;

	color:rgba(255,255,255,.6);
	font-family:var(--font-mono);
	font-size:12.5px;
}

.tl-node{
	position:relative;
	z-index:1;
	justify-self:center;

	display:flex;
	align-items:center;
	justify-content:center;

	width:32px;
	height:32px;
	margin-top:16px;
	border-radius:50%;

	background:var(--night);
	border:2px solid var(--violet-light);
	box-shadow:0 0 0 5px rgba(20,7,40,.9);

	color:var(--lavender);
	font-size:13px;
}

.tl-card{
	min-width:0;
	padding:22px 26px;
	border-radius:var(--radius-lg);

	background:rgba(255,255,255,.045);
	border:1px solid rgba(255,255,255,.12);
}

.tl-kicker{
	color:var(--lavender);
	font-size:12px;
	font-weight:700;
	letter-spacing:.12em;
	text-transform:uppercase;
}

.tl-title{
	margin-top:6px;

	font-family:var(--font-display);
	font-size:clamp(23px,2.6vw,30px);
	font-weight:700;
	font-stretch:84%;
	line-height:1.08;
	color:#fff;
}

.tl-text{
	max-width:700px;
	margin-top:10px;

	color:rgba(255,255,255,.8);
	font-size:15.5px;
	line-height:1.65;
}

.tl-more{
	display:inline-flex;
	align-items:center;
	gap:4px;
	margin-top:14px;

	color:var(--lavender);
	font-size:14.5px;
	font-weight:600;
}

.tl-more:hover{
	color:#fff;
}

/* Before 1.0.0: drawn in dashes, not yet part of anything public. */
.tl-private .tl-ver{
	color:rgba(255,255,255,.55);
	font-size:26px;
}

.tl-private .tl-node{
	border-style:dashed;
	border-color:rgba(255,255,255,.4);
	color:rgba(255,255,255,.65);
}

.tl-private .tl-card{
	background:transparent;
	border-style:dashed;
	border-color:rgba(255,255,255,.2);
}

.tl-private .tl-text{
	color:rgba(255,255,255,.7);
}

/* 1.0.0 and 2.5.0, the two the story turns on: the flame round the
   edge, the version in flame, and a node that glows. */
.tl-major .tl-card{
	border:1px solid transparent;
	background:
		linear-gradient(rgba(34,14,70,.97), rgba(34,14,70,.97)) padding-box,
		var(--flame) border-box;
	box-shadow:0 24px 60px -28px rgba(227,21,135,.6);
}

.tl-major .tl-ver{
	font-size:46px;

	background:var(--flame);
	-webkit-background-clip:text;
	background-clip:text;
	color:transparent;
}

.tl-major .tl-node{
	width:42px;
	height:42px;
	margin-top:14px;

	background:linear-gradient(135deg, #ff7139 0%, #e31587 50%, #9059ff 100%);
	border:0;
	box-shadow:0 0 0 5px rgba(20,7,40,.9), 0 0 28px rgba(255,113,57,.55);

	color:#fff;
	font-size:17px;
}

.tl-badge{
	display:inline-flex;
	align-items:center;
	gap:7px;
	margin-top:12px;
	padding:5px 12px;
	border-radius:var(--pill);

	background:rgba(255,255,255,.08);
	border:1px solid rgba(255,189,79,.45);

	color:#ffd591;
	font-size:13.5px;
	font-weight:600;
}

.tl-chips{
	display:flex;
	flex-wrap:wrap;
	gap:6px;

	margin:16px 0 0;
	padding:0;
	list-style:none;
}

.tl-chips li{
	padding:4px 11px;
	border-radius:var(--pill);
	background:rgba(255,255,255,.06);
	border:1px solid rgba(255,255,255,.14);

	color:rgba(255,255,255,.86);
	font-size:13px;
}

.tl-figs{
	display:grid;
	grid-template-columns:repeat(3,minmax(0,1fr));
	gap:10px;
	margin-top:16px;
}

.tl-fig,
.tl-acts li{
	padding:14px 16px;
	border-radius:var(--radius);
	background:rgba(255,255,255,.05);
	border:1px solid rgba(255,255,255,.1);
}

.tl-fig b{
	display:block;

	font-family:var(--font-display);
	font-size:28px;
	font-weight:700;
	font-stretch:80%;
	line-height:1;
}

.tl-fig span{
	display:block;
	margin-top:6px;

	color:rgba(255,255,255,.66);
	font-size:13px;
	line-height:1.4;
}

/* The yardstick, not the result: drawn quieter. */
.tl-fig:last-child b{
	color:rgba(255,255,255,.6);
}

.tl-acts{
	display:grid;
	grid-template-columns:repeat(3,minmax(0,1fr));
	gap:10px;

	margin:16px 0 0;
	padding:0;
	list-style:none;
}

.tl-act-name{
	display:block;

	font-family:var(--font-display);
	font-size:20px;
	font-weight:650;
	font-stretch:85%;
	line-height:1.15;
	color:#fff;
}

.tl-act-meta{
	display:block;
	margin-top:4px;

	color:var(--lavender);
	font-family:var(--font-mono);
	font-size:12px;
}

.tl-acts p{
	margin-top:8px;
	color:rgba(255,255,255,.76);
	font-size:14px;
	line-height:1.55;
}

/* Resilience, precision, flow, protection: the last four names in a row. */
.tl-arc{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:6px;

	margin:16px 0 0;
	padding:0;
	list-style:none;
}

.tl-arc li{
	display:inline-flex;
	align-items:center;
	gap:6px;

	color:rgba(255,255,255,.62);
	font-size:13px;
	font-weight:600;
	letter-spacing:.06em;
	text-transform:uppercase;
}

.tl-arc li + li::before{
	content:"\2192";
	color:rgba(255,255,255,.3);
	letter-spacing:0;
}

.tl-arc li:last-child{
	background:var(--flame);
	-webkit-background-clip:text;
	background-clip:text;
	color:transparent;
}

.tl-arc li:last-child::before{
	color:rgba(255,255,255,.3);
	-webkit-text-fill-color:rgba(255,255,255,.3);
}

.tl-links{
	display:flex;
	flex-wrap:wrap;
	gap:10px;
	margin-top:20px;
}

/* Each release comes up as it reaches the screen, and the last node
   keeps breathing. Only once the script has started, and only for
   visitors who haven't asked for less motion. */
.timeline.journey-live .tl{
	opacity:0;
	transform:translateY(18px);
	transition:opacity .6s ease, transform .6s ease;
}

.timeline.journey-live .tl.is-in{
	opacity:1;
	transform:none;
}

.tl-finale .tl-node{
	animation:tl-glow 2.8s ease-in-out infinite;
}

@keyframes tl-glow{
	0%, 100%{ box-shadow:0 0 0 5px rgba(20,7,40,.9), 0 0 22px rgba(255,113,57,.45) }
	50%     { box-shadow:0 0 0 5px rgba(20,7,40,.9), 0 0 40px rgba(255,113,57,.85) }
}

@media (prefers-reduced-motion: reduce){

	.timeline.journey-live .tl{
		opacity:1;
		transform:none;
		transition:none;
	}

	.tl-finale .tl-node{
		animation:none;
	}
}

/* ---------- footer ---------- */

.footer{
	margin-top:clamp(56px,8vw,96px);
	padding:56px 0 28px;

	background:var(--bg-alt);
	border-top:1px solid var(--line);
}

.footer-grid{
	display:grid;
	grid-template-columns:1.5fr 1fr 1fr 1.3fr;
	gap:32px;
}

.footer .brand{
	color:var(--text);
}

.footer-slogan{
	margin-top:14px;

	font-family:var(--font-display);
	font-size:24px;
	font-weight:700;
	font-stretch:85%;
	line-height:1.1;
	color:var(--text);
}

.footer-text{
	margin-top:10px;
	max-width:340px;
	color:var(--text-soft);
	font-size:14.5px;
	line-height:1.65;
}

.footer-title{
	margin-bottom:12px;

	color:var(--text-faint);
	font-size:12.5px;
	font-weight:700;
	letter-spacing:.12em;
	text-transform:uppercase;
}

.footer-links{
	display:flex;
	flex-direction:column;
	gap:8px;
	margin:0;
	padding:0;
	list-style:none;
	font-size:15px;
}

.footer-links a{
	color:var(--text-soft);
}

.footer-links a:hover{
	color:var(--accent);
}

.footer-links .as-num{
	display:inline-block;
	min-width:78px;
	margin-right:4px;
}

.footer-title-more{
	margin-top:28px;
}

/*
	Violet Networks' wordmark is pastel, so it gets a night-violet tile in
	both themes, the way the banners do; on white paper it would vanish.
*/
.footer-sponsor{
	display:inline-block;
	padding:12px 16px;

	background:var(--night);
	border:1px solid var(--line);
	border-radius:var(--radius-sm);

	transition:border-color var(--speed);
}

.footer-sponsor:hover{
	border-color:var(--accent);
}

.footer-sponsor-logo{
	display:block;
	width:180px;
	height:auto;
}

.footer-bottom{
	margin-top:40px;
	padding-top:24px;
	border-top:1px solid var(--line);

	color:var(--text-faint);
	font-size:14px;
	text-align:center;
}

#footer-quote{
	max-width:720px;
	margin:0 auto 14px;

	color:var(--text-soft);
	font-size:15px;
	font-style:italic;

	cursor:pointer;
	transition:opacity .25s;
}

#footer-quote:hover{
	color:var(--text);
}

.quote-by{
	display:block;
	margin-top:6px;

	color:var(--accent);
	font-size:12.5px;
	font-style:normal;
	font-weight:700;
	letter-spacing:.1em;
	text-transform:uppercase;
}