/* Self-hosted subsets built by tools/subset-fonts.py: Gentium Book (renamed, as its license
   requires for a subset) and Inter. SemiBold is the site's bold; there is no 700 on purpose. */
@font-face {
	font-family: "Moneytheism Serif";
	src: url("/fonts/serif-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Moneytheism Serif";
	src: url("/fonts/serif-400-italic.woff2") format("woff2");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Moneytheism Serif";
	src: url("/fonts/serif-600.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: Inter;
	src: url("/fonts/sans-400.woff2") format("woff2");
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: Inter;
	src: url("/fonts/sans-600.woff2") format("woff2");
	font-weight: 600;
	font-display: swap;
}

:root {
	--bg: #0d0d0f;
	--fg: #ededee;
	--muted: #9c9ca6;
	--line: #26262b;
	--btc: #f7931a;
	--brown: #9b6a3f;
	--accent: var(--btc);
	--serif: "Moneytheism Serif", Georgia, Cambria, "Times New Roman", serif;
	--sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	color-scheme: dark;
}
/* Pages about the wrong faith and the 404 page (body class) swap the orange accent for brown */
.alt, .accent-brown { --accent: var(--brown); }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
::selection { background: var(--accent); color: #000; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--bg);
	color: var(--fg);
	font: 1.0625rem/1.6 var(--serif);
}
main {
	max-width: 42rem;
	margin: 0 auto;
	padding: clamp(3rem, 14vh, 9rem) 1.25rem 4rem;
}
p, ul, h1, h2 { margin: 0; }
b, strong { font-weight: 600; }
a {
	color: inherit;
	text-decoration-color: var(--muted);
	text-decoration-thickness: .06em;
	text-underline-offset: .18em;
}
a:hover { text-decoration-color: currentColor; }
.btc { color: var(--btc); }
.brown { color: var(--brown); }
/* "← Return to …": underline in the link's own colour; the arrow sits outside the underline */
.back { text-decoration-color: currentColor; }
.back::before {
	content: "←";
	content: "←" / "";
	display: inline-block;
	margin-right: .4em;
}

/* Small sans-serif labels */
.kicker, .label, .code, .pron b, footer {
	font-family: var(--sans);
}
.kicker, .label {
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
}
.kicker { color: var(--muted); }
.label { color: var(--accent); }

/* Headword */
h1 {
	font: 600 clamp(2.75rem, 13vw, 5.75rem)/1.05 var(--serif);
	letter-spacing: -.025em;
	white-space: nowrap;
	min-height: 1.05em;
	margin: .2em 0 .3em;
}
h1.long {
	font-size: clamp(1.9rem, 9.6vw, 4.5rem);
	white-space: normal;
	overflow-wrap: anywhere;
}
.m { color: var(--accent); }
/* The caret takes up no width, so letters stay put as it moves through the word */
.caret {
	display: inline-block;
	height: .8em;
	margin: 0 -.03em;
	border-left: .06em solid var(--accent);
	vertical-align: -.06em;
	animation: blink 1s steps(1) infinite;
}
.sel { background: #3f638b; border-radius: .04em; }
.js:not(.on) #typed { visibility: hidden; }

/* Grammar and pronunciation */
.gram { font-size: 1.125rem; }
.code { font-size: .8125rem; color: var(--muted); margin-left: .35em; }
.pron {
	display: flex;
	flex-wrap: wrap;
	gap: .1rem 1.25rem;
	margin-top: .25rem;
	color: var(--muted);
}
.pron b { font-size: .75rem; letter-spacing: .08em; }
.say {
	all: unset;
	display: inline-grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	color: var(--accent);
	vertical-align: middle;
	cursor: pointer;
}
.say:hover { background: #ffffff14; }
.say svg { width: 1.05rem; height: 1.05rem; fill: currentColor; }

/* Definition */
.label { margin-top: 2.25rem; }
.def {
	font-size: clamp(1.3rem, 4.6vw, 1.6rem);
	font-weight: 600;
	line-height: 1.35;
	margin-top: .35rem;
}
.ex {
	list-style: none;
	padding: 0 0 0 1rem;
	margin-top: 1.1rem;
	border-left: 2px solid var(--line);
	color: var(--muted);
	font-style: italic;
}
.ex li + li { margin-top: .4rem; }
.count { margin-top: .75rem; color: var(--muted); font-size: .9375rem; }
.count b { color: var(--fg); font-variant-numeric: tabular-nums; }
/* Odometer digit: a one-line window onto a rolling strip of numbers */
.digit {
	display: inline-block;
	height: 1.6em;
	overflow: hidden;
	vertical-align: top;
	mask-image: linear-gradient(transparent, #000 20%, #000 80%, transparent);
}
.digit > span {
	display: block;
	line-height: 1.6;
	transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}
.sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Opposite */
.opp {
	margin-top: 2.75rem;
	padding: 1.5rem 1.25rem;
	border: 1px solid var(--line);
	border-radius: .75rem;
}
.opp .label { margin-top: 0; color: var(--muted); }
h2 {
	font: 600 clamp(1.5rem, 6.8vw, 2.1rem)/1.2 var(--serif);
	letter-spacing: -.015em;
	margin: .3rem 0 .15rem;
	overflow-wrap: anywhere;
}
.opp .def { font-size: 1.1875rem; font-weight: 400; margin-top: .75rem; }

/* Encyclopedia */
.ency {
	margin-top: 3.25rem;
	padding-top: 2rem;
	border-top: 1px solid var(--line);
}
.ency p + p { margin-top: .75rem; line-height: 1.7; }
.ency b { color: var(--accent); }

/* Video: a local thumbnail until clicked, then the YouTube player */
.video { margin-top: 2.75rem; }
.yt {
	display: block;
	position: relative;
	aspect-ratio: 16 / 9;
	margin-top: .75rem;
	border-radius: .75rem;
	overflow: hidden;
	background: #000;
}
.yt img, .yt iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
}
.yt svg {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 4rem;
	height: 4rem;
	transition: transform .2s;
}
.yt circle { fill: var(--accent); }
.yt path { fill: var(--bg); }
.yt:hover svg { transform: scale(1.08); }
.credit { margin-top: .6rem; font: .8125rem/1.5 var(--sans); color: var(--muted); }

footer {
	margin-top: 3.5rem;
	font-size: .8125rem;
	color: var(--muted);
}
footer p:first-child { color: var(--fg); }

/* The eyebrow above the headword fades in as the intro starts. An animation, not a transition:
   the intro can start before the first paint, and a transition would then have nothing to run from. */
.js:not(.on) main > .kicker { opacity: 0; }
.js.on:not(.done) main > .kicker { animation: fade .6s ease backwards; }

/* Entry appears once the headword has been typed */
.js .r { opacity: 0; transform: translateY(.5rem); }
.js.done .r {
	opacity: 1;
	transform: none;
	transition: opacity .6s ease, transform .6s ease;
	transition-delay: calc(var(--i, 0) * 80ms);
}

@keyframes blink { 50% { opacity: 0; } }
@keyframes fade { from { opacity: 0; } }