/* ============================================================================
   BASE & SITE-WIDE
   ============================================================================ */

@layer base {

/* Keyboard focus. The previous rule here was `*:focus { outline: 0 }`, which
   removed every focus indicator on the site — only form inputs styled one back.
   :focus-visible keeps the ring off mouse clicks (which is presumably what the
   blanket reset was reaching for) while keeping it for keyboard users. */
:focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: 2px;
	border-radius: 2px;
}

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

/* In-page anchor scrolling, entirely in CSS. Together these two replace the
   jQuery scroll animation that used to do this: scroll-behavior does the
   easing and goes inert on its own when reduced motion is asked for, and
   scroll-padding-top keeps the target clear of the fixed nav instead of
   landing underneath it — which is what that script subtracted by hand. */
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}
html { scroll-padding-top: calc(var(--nav-height) + var(--space-s)); }

html, body {
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
}

/* Baseline body background, so mobile overscroll (and any gap around <main>,
   which paints its own --color-surface) matches the token exactly instead of
   the browser's approximate UA default for the active color-scheme. A hero
   that puts the page on a different surface overrides this with a
   `body:has(...)` rule next to its own definition — see .homeHero in
   09-pages.css and .csThemeRestrained in 08-case-study.css — rather than
   this file trying to enumerate every theme's colour up front.

   Do NOT point this at --nav-surface. It is tempting — the nav's ground is
   the current band's colour and this is the page's — but navTheme *reads* the
   page to produce that value, so pointing the page at it closes a loop: the
   bar measures a body painted from its own last answer and stops responding.
   It buys nothing either. Overscroll only happens at the top and bottom of a
   document, where the band is the page's first one or the footer, which is
   exactly what these static rules already say. Everywhere in between, <main>
   covers this and nobody ever sees it. */
body { background: var(--color-surface); }

.pointer { cursor: pointer; }

img, video { max-width: 100%; }

.stdLink {
	color: var(--color-text-1);
	text-decoration-line: underline;
	cursor: pointer;
}

/* The site's standard measure. The project detail pages put their body
   elements on the same measure, so they join the rule rather than repeat it. */
.partialSiteWidth,
.projectDetailPage h1,
.projectDetailPage h2,
.projectDetailPage h3,
.projectDetailPage p,
.projectDetailPage .roleTagsContainer,
.projectDetailPage .statsContainer,
.projectDetailPage .scrollWithMaxWidth {
	max-width: 1000px;
	width: 90%;
	margin: 0 auto;
}

/* --- Full-viewport section, used by the project detail pages --------------- */

.landingSection {
	min-height: 100vh;
	justify-content: center;
	display: flex;
	flex-direction: column;
}

} /* @layer base */