/*
Theme Name: Digital Atelier
Description: The site's own theme. Nothing is inherited from a default theme;
             there is no parent. This sheet carries only what every request
             needs — base type and colour, the reading layout, and the 404 page.
             Page-specific work lives in assets/css/: logo-anim.css is the
             front page's stage, and it is enqueued there and nowhere else.
Version: 0.2.0
Requires at least: 6.5
Requires PHP: 8.1
License: proprietary
Text Domain: digital-atelier
*/

/*
 * Version history — the theme has one because there is no git here (§10.7 of
 * the blueprint keeps delete out of the sync for the same reason). Bump it when
 * the theme changes; it is read from this header at runtime by da_version().
 *
 *   0.1.0  2026-10-16  first install — header, footer, a fallback template
 *   0.2.0  2026-10-16  front-page.php (the logo hero), template-parts/,
 *                      assets/ (GSAP 3.15.0 vendored, logo animation, favicon
 *                      set), 404.php, and the fallback template rewritten
 */

/* Base — everything else the design brings arrives in assets/css/. */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
	line-height: 1.6;
	color: #1a1a1a;
	background: #fbfaf8;
}

.da-scaffold {
	max-width: 46rem;
	margin: 0 auto;
	padding: 5rem 1.5rem;
}

.da-scaffold h1 {
	font-size: clamp(2rem, 6vw, 3rem);
	line-height: 1.1;
	margin: 0 0 1rem;
	letter-spacing: -0.02em;
}

.da-scaffold p { margin: 0 0 1rem; }

.da-scaffold code {
	font-size: 0.9em;
	background: #efece7;
	padding: 0.15em 0.4em;
	border-radius: 3px;
}

/*
 * The 404 page.
 *
 * HERE AND NOT IN assets/css/ BECAUSE IT LOADS EVERYWHERE. `style.css` is the
 * one sheet every request gets, so putting these rules in it means the error
 * page costs no additional request — and it keeps `logo-anim.css` honest about
 * being the front page's sheet rather than a general one.
 *
 * Colours are the site's two, written as literals like the rest of this file:
 * #0d1117 is the ink (the logo's own colour), #fbfaf8 the ground. The 404
 * numeral is that ink at 14 % — a watermark rather than a heading, so the
 * sentence underneath is what gets read.
 *
 * Centred on the viewport like the hero, and for the same reason: on a site
 * that is one screen tall there is no content below to scroll to, so an error
 * at the top-left would look like a page that failed to finish loading.
 *
 * `100vh` before `100svh` on purpose — the second wins where it is understood
 * and the first is the fallback where it is not.
 */
.da-404 {
	box-sizing: border-box;
	min-height: 100vh;
	min-height: 100svh;
	display: grid;
	align-content: center;
	justify-items: center;
	text-align: center;
	padding: clamp(1rem, 4vw, 3rem);
}

.da-404__code {
	margin: 0 0 0.5rem;
	font-size: clamp(3.5rem, 16vw, 8rem);
	font-weight: 400;
	line-height: 1;
	letter-spacing: -0.04em;
	color: rgb(13 17 23 / 0.14);
}

.da-404__title {
	margin: 0 0 0.75rem;
	font-size: clamp(1.25rem, 3.4vw, 1.75rem);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -0.015em;
	color: #0d1117;
}

.da-404__lead {
	margin: 0 0 2rem;
	max-width: 32rem;
	font-size: clamp(0.9375rem, 1.6vw, 1.0625rem);
	color: rgb(13 17 23 / 0.6);
}

.da-404__action { margin: 0; }

.da-404__link {
	color: #0d1117;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25em;
}

.da-404__link:hover,
.da-404__link:focus-visible { text-decoration-thickness: 2px; }