/*
 * davidbass.com — one page, no build step, no dependencies.
 *
 * Font: Atkinson Hyperlegible Next (Braille Institute, SIL Open Font License 1.1),
 * self-hosted from /fonts/ with its OFL.txt. One variable woff2 covers weights 200-800.
 * Nothing loads from a third party.
 */

@font-face {
	font-family: "Atkinson Hyperlegible Next";
	src: url("./fonts/AtkinsonHyperlegibleNext.woff2") format("woff2");
	font-weight: 200 800;
	font-style: normal;
	font-display: swap;
}

:root {
	--paper: #f4f3f0;
	--letter: #ebeae6;          /* a shade darker than the paper, so the pressed face reads */
	--ink: #111;
	--tab: #b8500f;             /* burnt-orange tab on the bio panel; 5.0:1 with white text */
	/* Page background contours. Swap by changing this one line:
	   topo-baker.svg (Mt. Baker, 40 m) or topo-bellingham.svg (Bellingham, 30 m).
	   Both tile seamlessly; built by tools/topo/tile.py from USGS 3DEP (public domain). */
	--topo: url("./topo-baker.svg");
	--sans: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

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

html, body { margin: 0; }

body {
	/* Faint contour lines (see --topo) over the paper texture. */
	background: var(--topo) repeat, var(--paper) url("./paper.svg");
	color: var(--ink);
	font-family: var(--sans);
	-webkit-font-smoothing: antialiased;
}

.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Everything is sized off this container's width (cqi), so the headline always
   spans the photo exactly, from phone to a wide monitor. */
.page {
	container-type: inline-size;
	max-width: 1600px;
	margin: 0 auto;
}

.masthead {
	display: flow-root;
	/* Header strip: empty for now (the page's topo shows through) until a new header
	   image is chosen. */
	padding-top: max(22cqi, 140px);
	margin-bottom: 3cqi;         /* room for the About tab above the panel */
}

/* Hidden visually for now, but still the page's <h1> for screen readers and search
   engines. (display: none would remove it from both.) The v1 debossed styling is in
   git tag v1; the #deboss filters in index.html are unused until it comes back. */
.name {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Photo and bio side by side, all in cqi so the layout scales with the page instead of
   drifting at other widths: 14 inset + 25 photo + 1.4 gap + 50 bio + 9.6 right = 100. */
.hero {
	display: flex;
	align-items: flex-start;
	gap: 1.4cqi;
	margin: 0;
	padding: 0 9.6cqi 3cqi 14cqi;   /* bottom room so the panel's shadow isn't cut off */
}

.photo {
	display: block;
	flex: 0 0 25cqi;
	width: 25cqi;
	height: auto;
}

.bio {
	position: relative;          /* anchors the tab */
	flex: 0 0 50cqi;
	width: 50cqi;
	margin: 0;
	font-size: max(0.8rem, 1.0cqi);
	line-height: 1.3;
	color: var(--ink);
	/* Translucent paper panel: keeps the text readable where it runs over the dark shirt. */
	padding: 1.2cqi 1.5cqi;
	background: rgb(244 243 240 / 0.86);
	border-radius: 0.6cqi;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	box-shadow: 3px 5px 10px 2px rgba(0, 0, 0, 0.3);
}

/* "About Me" heading, drawn as an orange tab sticking up from the panel's top-right corner.
   White text on --tab: 5.0:1 contrast (WCAG AA). A lighter orange drops below 4.5:1. */
.bio-tab {
	position: absolute;
	bottom: 100%;
	right: 1.5cqi;
	margin: 0;
	padding: 0.35em 0.9em 0.25em;
	font-size: 1em;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.02em;
	white-space: nowrap;
	color: #fff;
	background: var(--tab);
	border-radius: 0.6cqi 0.6cqi 0 0;
	box-shadow: 2px -1px 4px rgba(0, 0, 0, 0.2);
}

.bio p { margin: 0 0 1em; }
.bio p:last-child { margin-bottom: 0; }
.bio ul { margin: 0 0 1em; padding-left: 1.2em; }

/* Narrow screens: the bio would cover the face, so it moves under the photo. */
@media (max-width: 760px) {
	.masthead { margin-bottom: 0; }
	.hero { display: block; padding: 0; }
	.photo { width: 100%; }
	.bio {
		position: static;
		width: auto;
		padding: 1.5rem 16px 3rem;
		background: none;
		border-radius: 0;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		font-size: 1.05rem;
		line-height: 1.5;
	}
	/* No panel on phones, so the tab becomes a plain heading above the text. */
	.bio-tab {
		position: static;
		margin: 0 0 0.75rem;
		padding: 0;
		font-size: 1.25rem;
		color: var(--ink);
		background: none;
		border-radius: 0;
		box-shadow: none;
	}
}

/* Debossed text is low-contrast by design. Anyone who asks their system for more
   contrast, or uses Windows high-contrast mode, gets plain solid lettering. */
@media (prefers-contrast: more) {
	.name { filter: none; color: var(--ink); }
}
@media (forced-colors: active) {
	.name { filter: none; color: CanvasText; }
}