/*
	vilhelmcarlstrom.com — the holding page.

	Ground and text are the two ends of batlowK, the field's colour map, so the page
	and the field it sits on are one system. The map itself is Crameri's, not ours —
	identity belongs in the interface, not in the data ramp. See
	Strategic/Outreach/assets/colourmap.py for the diagnostics.
*/

:root {
	--ground: #04050a;
	--text: #f3ece6;
	--body: #cfd3cc;
	--muted: #8d968f;
	--faint: #5f6a64;
	--rule: #20384e;
	--link: #e8a266;
	--link-hover: #fcb3af;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }

body {
	margin: 0;
	background: var(--ground);
	color: var(--text);
	font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
	-webkit-font-smoothing: antialiased;
}

#field { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }

#scrim {
	position: fixed; inset: 0; z-index: 1; pointer-events: none;
	background:
		linear-gradient(100deg, rgba(4,5,10,0.94) 0%, rgba(4,5,10,0.87) 30%, rgba(4,5,10,0.34) 62%, rgba(4,5,10,0.06) 100%),
		radial-gradient(70% 55% at 100% 100%, rgba(4,5,10,0.72) 0%, rgba(4,5,10,0) 70%),
		radial-gradient(120% 90% at 8% 40%, rgba(4,5,10,0.55) 0%, rgba(4,5,10,0) 60%);
}

main {
	position: relative; z-index: 2;
	min-height: 100%;
	display: flex; align-items: center;
	padding: 64px clamp(20px, 7vw, 108px);
	pointer-events: none;			/* the field stays reachable behind the text */
}
main a { pointer-events: auto; }

.block { display: flex; flex-direction: column; gap: 30px; max-width: 640px; }
header { display: flex; flex-direction: column; gap: 14px; }

h1 {
	margin: 0;
	font-family: Newsreader, Georgia, 'Times New Roman', serif; font-weight: 300;
	font-size: clamp(38px, 6.2vw, 62px); line-height: 1.02; letter-spacing: -0.015em;
	color: var(--text);
}

.role { margin: 0; font-size: 12px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--muted); line-height: 1.85; }

.sentence {
	margin: 0; font-family: Newsreader, Georgia, 'Times New Roman', serif;
	font-size: clamp(18px, 2.2vw, 23px); line-height: 1.5; color: var(--body);
	max-width: 30em; text-wrap: pretty;
}

.rule { height: 1px; width: 120px; background: var(--rule); }

.record { display: flex; flex-direction: column; gap: 11px; margin: 0; font-size: 13px; line-height: 1.55; }
.row { display: flex; gap: 18px; }
.row dt { color: var(--faint); width: 96px; flex-shrink: 0; }
.row dd { margin: 0; color: #b9beb7; text-wrap: pretty; }
.row dd b { font-weight: 500; color: var(--text); }

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

/* The whole citation is the link. Colouring all of it like a link would make the
   row shout; it takes the link colour only on hover, and keeps the underline
   affordance where the pointer is. */
.row dd a.cite { color: inherit; }
.row dd a.cite:hover, .row dd a.cite:focus-visible { color: var(--link-hover); }
a:hover, a:focus-visible { color: var(--link-hover); text-decoration: underline; text-underline-offset: 3px; }
em { font-family: Newsreader, Georgia, serif; font-style: italic; }

/* The caption explains the background; it is not what anyone came for, so it
   lives behind the "?" and the corner holds two small controls instead. */
footer {
	position: fixed; z-index: 3; right: clamp(16px, 3vw, 34px); bottom: clamp(14px, 2.4vw, 26px);
	display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
	font-size: 11px; line-height: 1.6; letter-spacing: 0.04em;
	color: rgba(243,236,230,0.62); text-align: right;
}
/* An author `display` beats the UA rule for [hidden], so the attribute alone does
   not hide this. Same trap as `canvas[hidden]`. */
#about[hidden] { display: none; }
#about {
	display: flex; flex-direction: column; align-items: flex-end; gap: 9px;
	background: rgba(4,5,10,0.72); backdrop-filter: blur(7px); padding: 11px 13px;
	max-width: min(38ch, calc(100vw - 2 * clamp(16px, 3vw, 34px)));
}
#about p { margin: 0; }
#bar { display: flex; gap: 8px; }

footer button {
	font: inherit; letter-spacing: 0.04em; color: rgba(243,236,230,0.62);
	background: rgba(4,5,10,0.66); backdrop-filter: blur(7px);
	border: 1px solid rgba(243,236,230,0.22);
	padding: 6px 10px; cursor: pointer; white-space: nowrap;
}
#help, #toggle { width: 34px; height: 30px; padding: 0; display: inline-flex;
	align-items: center; justify-content: center; }
#toggle svg { width: 13px; height: 13px; display: block; fill: currentColor; }
footer button:hover, footer button:focus-visible { color: var(--text); border-color: rgba(243,236,230,0.5); }

@media (max-width: 720px) {
	main { align-items: flex-end; padding-bottom: 190px; }
	#scrim { background: linear-gradient(180deg, rgba(4,5,10,0.30) 0%, rgba(4,5,10,0.86) 42%, rgba(4,5,10,0.97) 100%); }
	footer { left: auto; }
	.row { flex-direction: column; gap: 3px; }
	.row dt { width: auto; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; }
}