/* The complete layer order, declared once, at the top, before anything else.
   This single statement is the isolation guarantee for the whole site.

   Two reasons it must be here and must be complete:
   1. Layer order is set by FIRST APPEARANCE. A stylesheet that names a layer
      not listed here gets appended at the END, which is maximum priority.
      Naming every layer up front makes a stray sheet inert.
   2. Unlayered styles beat EVERY layered style at any specificity, so nothing
      in this file is allowed to sit outside a layer.

   The order, argued rather than asserted:
     guard      only !important declarations. `!important` inverts layer order,
                so a guard rule beats every later layer. It does NOT beat an
                inline `style="... !important"` or an !important inside a shadow
                root, because Element-Attached Styles and Context both sort
                ABOVE Layers. Strong against stylesheets, weak against scripts.
     reset      normalisation
     tokens     replaceable by a theme
     base       bare element styling
     prose      long-form text, must lose to anything class-based
     layout     structural
     components
     shell      window chrome. Replaceable by a theme. Composes components, so
                it comes after them, and precedes projects so window chrome
                never outranks window content.
     utilities
     projects   frozen copy-pasted third-party work, last so nothing the site
                declares can reach in and change how a project looks.
*/
@layer guard, reset, tokens, base, prose, layout, components, shell, utilities, projects;

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

	body {
		margin: 0;
	}

	/* Stops a long URL or code sample forcing a horizontal scrollbar on the page,
	   which is the single commonest small-screen defect. */
	img,
	iframe {
		max-width: 100%;
	}
}

@layer tokens {
	/* Every token is declared HERE and ONLY on :root.

	   This is not tidiness, it is correctness. `tokens` is an EARLIER layer than
	   `components`, and for normal declarations an earlier layer LOSES. So a
	   component that declares its own default for a token on its own element
	   silently beats the theme, every time. Measured, not assumed.

	   The rule that follows: components READ tokens with a fallback,
	   `var(--rule, #222)`, and never DECLARE them. */
	:root {
		/* `dark` alone, not `dark light`. The normative algorithm checks the
		   user's own preference against the list FIRST and only falls back to
		   the first item when their preference is absent from it, so
		   `dark light` hands a light-preferring visitor LIGHT. */
		color-scheme: dark;

		--ground: #0e0f10;
		--surface: #16181a;
		--ink: #e8e6e3;
		--ink-dim: #9a9895;
		--ink-faint: #6b6967;
		--rule: #2a2c2e;
		--accent: #c8873f;

		--measure: 68ch;
		--step: 1.5rem;

		--face: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
			"Helvetica Neue", Arial, sans-serif;
		--mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas,
			monospace;
	}
}

@layer base {
	html {
		background: var(--ground, #0e0f10);
	}

	body {
		background: var(--ground, #0e0f10);
		color: var(--ink, #e8e6e3);
		font-family: var(--face);
		font-weight: 300;
		font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
		line-height: 1.6;
		-webkit-text-size-adjust: 100%;
	}

	a {
		color: var(--ink, #e8e6e3);
		text-decoration-color: var(--rule, #2a2c2e);
		text-underline-offset: 0.25em;
	}

	a:hover,
	a:focus-visible {
		text-decoration-color: var(--accent, #c8873f);
	}

	/* Visible focus is not optional and must not be removed by anything later.
	   It is not in the guard layer because nothing here is fighting it yet;
	   if a pasted project ever removes it, that override goes in guard. */
	:focus-visible {
		outline: 2px solid var(--accent, #c8873f);
		outline-offset: 2px;
	}

	h1,
	h2 {
		font-weight: 100;
		letter-spacing: 0.02em;
		line-height: 1.15;
		margin: 0;
	}

	h1 {
		font-size: clamp(2.5rem, 1.5rem + 5vw, 5rem);
	}

	h2 {
		font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.75rem);
		font-weight: 200;
	}

	hr {
		border: 0;
		border-top: 1px solid var(--rule, #2a2c2e);
		margin: var(--step, 1.5rem) 0;
	}
}

@layer prose {
	p {
		max-width: var(--measure, 68ch);
		margin: 0 0 var(--step, 1.5rem);
		color: var(--ink-dim, #9a9895);
	}
}

@layer layout {
	.page {
		max-width: 62rem;
		margin: 0 auto;
		padding: clamp(1.5rem, 5vw, 5rem) clamp(1.25rem, 4vw, 3rem);
	}

	.stack > * + * {
		margin-top: var(--step, 1.5rem);
	}
}

@layer components {
	/* Monospace metadata treated as designed content rather than as debug output. */
	.meta {
		font-family: var(--mono);
		font-size: 0.75rem;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--ink-faint, #6b6967);
	}

	.accent-rule {
		border: 0;
		border-top: 1px solid var(--accent, #c8873f);
		width: 4rem;
		margin: var(--step, 1.5rem) 0;
	}

	.links {
		list-style: none;
		padding: 0;
		margin: 0;
		border-top: 1px solid var(--rule, #2a2c2e);
	}

	.links li {
		border-bottom: 1px solid var(--rule, #2a2c2e);
	}

	.links a {
		display: block;
		padding: 0.9rem 0;
		text-decoration: none;
		letter-spacing: 0.04em;
	}

	/* The step-D window frame. Deliberately inert: no dragging, no resizing, no
	   stacking, no focus management, no script. It exists to make the framed
	   rendering of a real page visible and testable, not to be a window manager. */
	.frame {
		border: 1px solid var(--rule, #2a2c2e);
		background: var(--surface, #16181a);
		/* Elevation from tonal contrast rather than a drop shadow. */
	}

	.frame__bar {
		display: flex;
		align-items: center;
		gap: 0.75rem;
		padding: 0.5rem 0.75rem;
		border-bottom: 1px solid var(--rule, #2a2c2e);
		border-left: 2px solid var(--accent, #c8873f);
	}

	.frame__body {
		display: block;
		width: 100%;
		height: 30rem;
		border: 0;
	}
}