/* ontheism.org: the Invitation reader. Vanilla CSS.

   The splash's palette, fonts and frosted black backing, over the same montage, fixed behind the
   page. Each section is a <details> panel; its summary is the header bar, tinted by group: slate
   for the meta pages, the logo's blue for the Invitation, the book's green for the Questions.
   Every colour that carries text is checked in reader_check.js (contrast), with the montage behind
   the translucent panels taken at its brightest. */

/* Libertinus Serif (OFL). The splash's regular and italic are shared; bold and bold italic are the
   reader's own (table heads; a term's first use). */
@font-face { font-family: "Libertinus Serif"; src: url("/fonts/LibertinusSerif-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Libertinus Serif"; src: url("/fonts/LibertinusSerif-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Libertinus Serif"; src: url("/invitation/fonts/LibertinusSerif-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Libertinus Serif"; src: url("/invitation/fonts/LibertinusSerif-BoldItalic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }
/* The splash's subset has no arrows. The Next link's is the reader's own, fetched only once a section holding one is open. */
@font-face { font-family: "Libertinus Serif"; src: url("/invitation/fonts/LibertinusSerif-Arrows.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+2190-2193; }

:root {
	--bg:      #05070c;
	--ink:     #e8edf8;                 /* body text */
	--muted:   #c3cce2;                 /* quieter text */
	--logo:    #e6ecff;
	--rule:    rgba(104, 122, 240, .32);
	--link:    #b9c6ff;
	--panel:   rgba(5, 7, 12, .84);     /* the splash's backing, a little denser for long reading */
	--pop:     #080b14;                 /* the menu and the popover are solid */

	/* Header bars: opaque, light text. The book's blue #1A237E and green #228B22, lifted for a dark page. */
	--meta-bar: #3b4559;  --meta-hi: #cdd5e8;  --meta-ink: #f3f6fc;
	--inv-bar:  #2b39b3;  --inv-hi:  #aab4ff;  --inv-ink:  #f7f8ff;
	--q-bar:    #17692a;  --q-hi:    #7bd88a;  --q-ink:    #f5fff7;

	--scale: 1;                         /* the viewer's text size, set by reader.js */
	--rs:    calc(clamp(17px, calc(11px + .85vw), 28px) * var(--scale));   /* reading size, grows with the viewport */
	--bar-h: 48px;
	--gut:   14px;
	--edge:  max(var(--gut), calc((100vw - min(92vw, 1400px)) / 2));   /* the page's left and right edge, so the bar lines up with the panels */
	--cl-h:  28px;
	--cl-b:  max(1.2vh, 10px, env(safe-area-inset-bottom, 0px));
}

* { box-sizing: border-box; }

html {
	background: var(--bg);
	font-synthesis: none;
	-webkit-text-size-adjust: 100%;
	scroll-padding-top: calc(var(--bar-h) + 10px);
}

body {
	margin: 0;
	min-height: 100vh;
	background: transparent;
	color: var(--ink);
	font-family: "Libertinus Serif", "Times New Roman", Times, serif;
	font-weight: 400;
	overflow-x: hidden;
	-webkit-tap-highlight-color: transparent;
}
[hidden] { display: none !important; }

/* ---------- the montage, fixed behind everything ---------- */

.stage { position: fixed; inset: 0; z-index: -1; background: var(--bg); overflow: hidden; pointer-events: none; }
.stage .bg { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; user-select: none; }
.shade { position: absolute; inset: 0; background: linear-gradient(rgba(5, 7, 12, .12), rgba(5, 7, 12, .12)); }
@media (orientation: portrait), (max-width: 820px) and (min-height: 501px) {
	.stage .bg { object-position: 50% 27%; }
}

/* ---------- the bar ---------- */

.skip { position: absolute; left: 8px; top: -60px; z-index: 60; padding: .5em .9em; background: #0a0e1a; color: var(--ink); border: 1px solid var(--rule); }
.skip:focus { top: 8px; }

.bar {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 40;
	height: var(--bar-h);
	display: flex;
	align-items: center;
	gap: 2px;
	padding: 0 max(var(--edge), env(safe-area-inset-right, 0px)) 0 max(var(--edge), env(safe-area-inset-left, 0px));
	background: rgba(5, 7, 12, .9);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--rule);
	font-size: 15px;
}
.bar .sp { flex: 1 1 auto; }
.grp { display: inline-flex; }
.b {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	min-width: 40px;
	height: 40px;
	padding: 0 .65em;
	font: inherit;
	line-height: 1;
	letter-spacing: .02em;
	color: var(--ink);
	text-decoration: none;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 0;
	cursor: pointer;
	transition: background .15s, border-color .15s;
}
.b:hover { background: rgba(65, 82, 245, .2); border-color: rgba(120, 138, 255, .42); }
.b[aria-expanded="true"] { background: rgba(65, 82, 245, .26); border-color: rgba(150, 168, 255, .6); }
.b:disabled { opacity: .45; cursor: default; background: transparent; border-color: transparent; }
/* A button's words are always in the page (they are its name), and shown once the bar has room. */
.b .lb { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.home .sym { display: block; height: 26px; width: calc(26px * 60.912 / 74.91); fill: var(--logo); overflow: visible; }
.ta { font-size: 1.15em; }
.ta small { font-size: .62em; margin-left: .06em; vertical-align: .22em; }
.ta.big { font-size: 1.4em; }
.ta.big small { font-size: .5em; }
#allbtn .i-co { display: none; }
#allbtn[data-state="collapse"] .i-ex { display: none; }
#allbtn[data-state="collapse"] .i-co { display: block; }
@media (min-width: 720px) {
	.b .lb { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
	.bar { gap: 6px; }
	.grp { margin: 0 .2em; }
}
:focus-visible { outline: 2px solid #9db0ff; outline-offset: 2px; }
html:not(.js) .bar button, html:not(.js) .totop { display: none; }

/* The contents menu: a sheet under the bar. */
.toc {
	position: fixed;
	z-index: 45;
	top: calc(var(--bar-h) + 6px);
	left: max(var(--edge), env(safe-area-inset-left, 0px));
	width: min(34em, calc(100vw - 2 * var(--gut)));
	max-height: calc(100vh - var(--bar-h) - 20px);
	max-height: calc(100dvh - var(--bar-h) - 20px);
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--pop);
	border: 1px solid rgba(143, 160, 255, .45);
	box-shadow: 0 1em 3em rgba(0, 0, 0, .55);
	font-size: 16.5px;
}
.toc ol { list-style: none; margin: 0; padding: .35em 0; }
.toc a {
	display: flex;
	align-items: flex-start;
	gap: .7em;
	padding: .5em .95em;
	color: var(--ink);
	text-decoration: none;
	line-height: 1.3;
	border-left: 3px solid transparent;
}
.toc a:hover, .toc a:focus-visible { background: rgba(65, 82, 245, .22); }
.toc a[data-open] { border-left-color: var(--hi); }
.toc .dot { flex: none; width: .72em; height: .72em; margin-top: .3em; background: var(--bar); }
.toc .tt { flex: 1 1 auto; min-width: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.toc [data-group="meta"], .fold[data-group="meta"] { --bar: var(--meta-bar); --hi: var(--meta-hi); --bar-ink: var(--meta-ink); }
.toc [data-group="inv"],  .fold[data-group="inv"]  { --bar: var(--inv-bar);  --hi: var(--inv-hi);  --bar-ink: var(--inv-ink); }
.toc [data-group="q"],    .fold[data-group="q"]    { --bar: var(--q-bar);    --hi: var(--q-hi);    --bar-ink: var(--q-ink); }

/* ---------- the page ---------- */

.wrap {
	width: min(92vw, 1400px);
	margin: 0 auto;
	padding: calc(var(--bar-h) + 22px) 0 28px;
	font-size: var(--rs);
	outline: 0;
}

.panel {
	position: relative;
	background: var(--panel);
	-webkit-backdrop-filter: blur(16px) saturate(.72);
	backdrop-filter: blur(16px) saturate(.72);
	border: 1px solid var(--rule);
	box-shadow: 0 1.2em 3.4em rgba(0, 0, 0, .32);
}

.hero { margin: 0 0 1.5em; padding: 2em 1.2em 1.7em; text-align: center; }
.hero .wm { margin: 0 0 .9em; padding-left: .38em; font-size: .78em; letter-spacing: .38em; text-transform: uppercase; color: var(--logo); }
.hero h1 { margin: 0; font-size: 2.3em; font-weight: 400; line-height: 1.15; letter-spacing: .01em; color: #fff; }

/* ---------- a fold ---------- */

.fold {
	position: relative;
	margin: 0 0 2px;                    /* bars sit nearly flush: with the 1px borders, 4px apart */
	background: var(--panel);
	-webkit-backdrop-filter: blur(16px) saturate(.72);
	backdrop-filter: blur(16px) saturate(.72);
	border: 1px solid var(--rule);
	border-left: 3px solid var(--hi);
	box-shadow: 0 1.2em 3.4em rgba(0, 0, 0, .3);
}
.fold.gstart { margin-top: 6px; }     /* a group starts 8px clear, still compact */

.fold > summary {
	position: sticky;
	top: var(--bar-h);
	z-index: 3;
	display: flex;
	align-items: center;
	gap: .75em;
	padding: .17em .45em .17em .95em;   /* the 40px link button sets a single-line bar's height */
	list-style: none;
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
	background: var(--bar);
	color: var(--bar-ink);
	transition: box-shadow .15s;
}
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary:hover { box-shadow: inset 0 -3px 0 var(--hi); }
.fold > summary:focus-visible { outline-offset: -4px; }
.fold > summary .n {
	flex: none;
	min-width: 2em;
	font-size: .82em;
	letter-spacing: .06em;
	font-variant-numeric: tabular-nums;
	color: var(--bar-ink);
	opacity: .92;
}
.fold > summary .t {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	font-size: 1.12em;
	font-weight: 400;
	line-height: 1.24;
	overflow-wrap: anywhere;
}
.fold > summary .car {
	flex: none;
	width: .55em;
	height: .55em;
	margin: 0 .5em 0 .1em;
	border-right: 2px solid var(--bar-ink);
	border-bottom: 2px solid var(--bar-ink);
	transform: translateY(-.12em) rotate(45deg);
	transition: transform .18s;
}
.fold[open] > summary .car { transform: translateY(.1em) rotate(-135deg); }

.cp {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5em;
	height: 2.5em;
	min-width: 40px;
	min-height: 40px;
	padding: 0;
	color: var(--bar-ink);
	background: transparent;
	border: 1px solid transparent;
	border-radius: 0;
	cursor: pointer;
}
.cp:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .5); }
.cp .ck { display: none; }
.cp.done .lk { display: none; }
.cp.done .ck { display: block; }
html:not(.js) .cp { display: none; }

.body { padding: 1.15em 1.2em 1.7em; }
.col { max-width: 38em; margin: 0 auto; }

/* ---------- the text ---------- */

.col p { margin: 0 0 1.05em; line-height: 1.6; text-wrap: pretty; overflow-wrap: break-word; }
.col a { color: var(--link); text-decoration-color: rgba(185, 198, 255, .45); text-underline-offset: .18em; }
.col a:hover { color: #fff; text-decoration-color: currentColor; }
.col em { font-style: italic; }
.col strong { font-weight: 700; }
.col math { font-family: "Libertinus Serif", math, serif; }

/* A glossary term: styled as in the PDF (bold italic at first use, plain after), with a quiet dotted
   underline so it can be found; it opens its definition. */
.col a.gt {
	color: inherit;
	text-decoration: underline dotted;
	text-decoration-color: rgba(160, 175, 255, .55);
	text-decoration-thickness: 1px;
	text-underline-offset: .2em;
	cursor: help;
}
.col a.gt:hover, .col a.gt:focus-visible, .col a.gt.on { color: #fff; text-decoration-style: solid; text-decoration-color: var(--hi); }

.col h3 {
	margin: 1.8em 0 .6em;
	font-size: 1.12em;
	font-weight: 400;
	letter-spacing: .03em;
	font-variant: small-caps;
	color: var(--hi);
	line-height: 1.3;
}
.col h3 .n { margin-right: .35em; font-variant-numeric: tabular-nums; opacity: .9; }
.col h3[id], .col figure[id], .col tr[id] { scroll-margin-top: 3.8em; }   /* clear of the sticky header bar, on top of the page's scroll-padding */

.al-right  { text-align: right; }
.al-center { text-align: center; }
.al-left   { text-align: left; }

/* The Einstein epigraph. */
.col figure.quote { margin: .3em 0 1.6em; padding: 0 0 0 1.1em; border-left: 2px solid var(--hi); }
.col figure.quote blockquote { margin: 0; font-style: italic; line-height: 1.6; text-wrap: pretty; }
.col figure.quote figcaption { margin: .8em 0 0; font-size: .92em; line-height: 1.5; color: var(--muted); }

/* Figures: the book's images are drawn for white paper, so each sits on a pale plate. */
.col figure { margin: 1.5em 0; }
.col .plate { padding: 1em .8em; background: #eef1f9; border-radius: 1px; }
.col .grid { display: flex; justify-content: center; align-items: center; gap: .6em; }
.col .grid .cell { flex: 1 1 0; min-width: 0; display: flex; justify-content: center; }
.col .plate img, .col .plate.grid img { display: block; width: min(var(--w), 100%); height: auto; margin: 0 auto; }
.col figcaption { margin-top: .7em; font-size: .9em; line-height: 1.5; color: var(--muted); text-wrap: pretty; }
.col figcaption a { color: var(--link); }

.col table { width: 100%; margin: 0; border-collapse: collapse; font-size: .86em; line-height: 1.45; }
.col .tw { max-width: 100%; overflow-x: auto; }   /* a table too wide for the page scrolls here, never the page */
.col figure > table { margin-top: .2em; }
.col th, .col td { padding: .55em .7em; text-align: left; vertical-align: top; border: 1px solid rgba(150, 170, 255, .24); }
.col thead th { background: rgba(110, 128, 255, .2); font-weight: 700; }
.col tbody td:first-child { font-weight: 400; color: var(--hi); }

/* The "Made with no AI" mark in the Information section, a link on a pale chip. */
.col .al-center .grid { justify-content: center; gap: .7em; }
.col .al-center .grid .cell { flex: 0 0 auto; }
.col .al-center .grid img { width: 3.3em; height: 3.3em; }   /* the no-AI mark: white strokes on the panel itself */
.col .al-center .plate { padding: 0; background: none; }
.fold[data-kind="info"] .col { text-align: center; font-size: .96em; }
.fold[data-kind="info"] .col p { text-align: center; }
.fold[data-kind="info"] .col p.nx { text-align: right; }
.fold[data-kind="info"] .col .al-center > div > p:nth-child(2) { font-size: .9em; color: var(--muted); }

/* The glossary: the PDF's table, three columns on a wide page, entries stacked on a narrow one. */
table.glossary { margin-top: 1em; font-size: .9em; table-layout: fixed; }
table.glossary th[scope="col"] { font-size: .92em; letter-spacing: .04em; }
table.glossary th[scope="col"]:nth-child(1) { width: 20%; }
table.glossary th[scope="col"]:nth-child(2) { width: 22%; }
table.glossary th[scope="row"] { font-weight: 400; text-align: left; background: none; color: var(--hi); overflow-wrap: anywhere; }
table.glossary td.pron { color: var(--muted); font-style: italic; overflow-wrap: anywhere; }
table.glossary tr:target th, table.glossary tr:target td, table.glossary tr.flash th, table.glossary tr.flash td { background: rgba(110, 128, 255, .22); }
.fold[data-kind="glossary"] .col { max-width: 54em; }
.fold[data-kind="glossary"] .col > em { display: block; margin-bottom: .2em; color: var(--muted); }

/* The step to the next section. */
.col p.nx { margin: 2em 0 0; padding-top: .9em; border-top: 1px solid rgba(255, 255, 255, .1); text-align: right; line-height: 1.35; }
.col .nx a { display: inline-flex; align-items: baseline; gap: .45em; max-width: 100%; padding: .55em .25em; color: var(--hi); text-decoration: none; text-align: left; }
.col .nx a:hover { color: #fff; }
.col .nx .lb { flex: none; opacity: .9; }
.col .nx .nt { min-width: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .3); text-underline-offset: .2em; }
.col .nx a:hover .nt { text-decoration-color: currentColor; }
.col .nx .ar { flex: none; }

/* ---------- the term popover ---------- */

.pop {
	position: fixed;
	z-index: 50;
	width: min(25em, calc(100vw - 24px));
	max-height: calc(100vh - 24px);
	overflow-y: auto;
	padding: .85em 1em 1em;
	background: var(--pop);
	color: var(--ink);
	border: 1px solid rgba(143, 160, 255, .55);
	box-shadow: 0 .8em 2.4em rgba(0, 0, 0, .6);
	font-size: calc(var(--rs) * .84);
	line-height: 1.5;
}
.pop p { margin: 0; }
.pop .pt { font-size: 1.15em; font-weight: 700; color: #fff; }
.pop .pp { margin-top: .1em; color: var(--muted); font-style: italic; }
.pop .pd { margin-top: .55em; }
.pop .pg { display: inline-block; margin-top: .75em; padding: .25em 0; color: var(--link); text-underline-offset: .18em; }
.pop .pg:hover { color: #fff; }

/* ---------- back to top, corner links ---------- */

.totop {
	position: fixed;
	z-index: 30;
	right: max(16px, env(safe-area-inset-right, 0px));
	bottom: var(--cl-b);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	color: var(--ink);
	background: rgba(5, 7, 12, .86);
	border: 1px solid rgba(120, 138, 255, .5);
	border-radius: 0;
	cursor: pointer;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}
.totop:hover { background: rgba(35, 48, 150, .9); border-color: rgba(160, 175, 255, .8); }

.foot {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
	padding: 1.5em max(16px, env(safe-area-inset-right, 0px)) var(--cl-b) max(16px, env(safe-area-inset-left, 0px));
}
.corner {
	display: inline-flex;
	align-items: center;
	gap: .6em;
	min-height: var(--cl-h);
	padding: 0 .7em;
	font-size: 13px;
	line-height: 1;
	letter-spacing: .04em;
	white-space: nowrap;
	color: rgba(224, 231, 247, .88);
	text-decoration: none;
	background: rgba(5, 7, 12, .8);
	border: 1px solid rgba(104, 122, 240, .24);
}
.corner:hover, .corner:focus-visible { color: #fff; }
.corner:hover { border-color: rgba(160, 175, 255, .6); }
.ai-link { margin-right: 62px; padding-left: 3px; }
.ai-link img { display: block; box-sizing: content-box; width: 18px; height: 18px; padding: 2px; background: rgba(230, 236, 255, .9); }

.live { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- phones ---------- */

@media (max-width: 719px) {
	:root { --bar-h: 52px; --cl-h: 36px; --edge: var(--gut); }
	.wrap { width: calc(100% - 2 * var(--gut)); padding-top: calc(var(--bar-h) + 14px); }
	.b { min-width: 44px; height: 44px; }
	.hero { padding: 1.5em .9em 1.3em; }
	.hero h1 { font-size: 2em; }
	.fold > summary { gap: .55em; min-height: 44px; padding-left: .75em; }
	.fold > summary .n { min-width: 1.6em; }
	.body { padding: .95em .85em 1.4em; }
	.col p, .col figcaption, .col td { -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 8 4 4; }
	.col .gt { -webkit-hyphens: manual; hyphens: manual; }	/* a glossary term is never split */
	.col .plate { padding: .7em .5em; }
	.col th, .col td { padding: .45em .5em; }

	table.glossary, table.glossary tbody, table.glossary tr, table.glossary th, table.glossary td { display: block; }
	table.glossary thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
	table.glossary tr { padding: .7em 0; border-bottom: 1px solid rgba(150, 170, 255, .2); }
	table.glossary th[scope="row"], table.glossary td { padding: 0; border: 0; background: none; }
	table.glossary th[scope="row"] { font-size: 1.08em; }
	table.glossary td.pron { margin: .05em 0 .35em; }
	table.glossary td.pron:empty { display: none; }
	table.glossary tr:target, table.glossary tr.flash { background: rgba(110, 128, 255, .2); }
	table.glossary tr:target th, table.glossary tr:target td, table.glossary tr.flash th, table.glossary tr.flash td { background: none; }
}

@media (max-width: 400px) {
	.b { min-width: 42px; }
	.col table { font-size: .8em; }
}

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}