/* Reset + typographic baseline. */

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

html {
	color-scheme: dark;
	background: var(--c-bg-deep);
	-webkit-text-size-adjust: 100%;
	font-size: 16px; /* base for rem math; adjust per-device with media queries if needed */
}

/* Suppress iOS / Android default tap-highlight flash on interactive elements.
 * `:focus-visible` outlines remain for keyboard users. */
button,
a,
[role='button'],
.chip,
.star,
.nav-tab {
	-webkit-tap-highlight-color: transparent;
}

body {
	margin: 0;
	min-height: 100vh;
	min-height: 100dvh;
	color: var(--c-fg);
	/* Vellum: the candlelight radial vignette baked into the body so the
	 * whole app inherits the "library at night" mood the icon promises.
	 * No animation, no overlay div — just a fixed-attached gradient. The
	 * 70% / 100% stops keep the vignette subtle; in normal viewing the
	 * eye barely registers it as a gradient. */
	background: radial-gradient(
		ellipse 80% 60% at 90% 0%,
		var(--c-bg-vignette) 0%,
		var(--c-bg) 55%,
		var(--c-bg-deep) 100%
	);
	background-attachment: fixed;
	font-family: var(--f-serif);
	font-size: var(--t-base);
	line-height: var(--lh-body);
	font-feature-settings: 'kern', 'liga', 'onum'; /* old-style numerals in body */
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4 {
	font-family: var(--f-serif);
	font-weight: var(--w-medium);
	line-height: var(--lh-tight);
	margin: 0;
	letter-spacing: -0.005em;
}

h1 {
	font-size: var(--t-xl);
}
h2 {
	font-size: var(--t-lg);
}
h3 {
	font-size: var(--t-md);
}

p {
	margin: 0;
}

/* Mono surfaces — metadata, IDs, dates, anything "system" — get the mono
 * family + tracking. Use the .mono class or wrap inline content in <code>. */
code,
.mono {
	font-family: var(--f-mono);
	font-size: 0.9em; /* mono optical-sized down a touch to match serif rhythm */
	letter-spacing: 0;
	font-variant-numeric: tabular-nums;
}

a {
	color: var(--c-accent);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition:
		border-color var(--motion-fast),
		color var(--motion-fast);
}
a:hover,
a:focus-visible {
	color: var(--c-accent-hover);
	border-bottom-color: currentColor;
}

button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

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

::selection {
	background: var(--c-accent-dim);
	color: var(--c-fg);
}

/* Hairline divider — used liberally, in place of card borders. */
.hr {
	border: 0;
	border-top: 1px solid var(--c-border);
	margin: var(--s-6) 0;
}

/* Screen-reader-only: visible to assistive tech, invisible visually.
 * Used to keep heading hierarchy on views whose visible title would
 * just duplicate the active nav tab label. */
.sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Skip-link — hidden off-screen unless the user Tab-focuses it. The first
 * focusable element in the document so keyboard users can jump past the
 * header/nav chrome straight to the main content (Phase 6.7 a11y).
 * The trick: position absolute + transform off-screen at rest, snap to
 * top-left on focus. Stays accessible to screen readers since it's still
 * in normal DOM flow, just visually hidden. */
.skip-link {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1000;
	padding: var(--s-2) var(--s-3);
	background: var(--c-accent);
	color: var(--c-bg);
	font-family: var(--f-mono);
	font-size: var(--t-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-radius: var(--r-1);
	transform: translateY(-150%);
	transition: transform var(--motion-fast);
}
.skip-link:focus,
.skip-link:focus-visible {
	transform: translateY(var(--s-2));
	margin-left: var(--s-2);
	outline: 2px solid var(--c-fg);
	outline-offset: 2px;
}