/* The shell page: the template the colophon and the playground share (and any
   page set like them): the wrap, the masthead-style header, the intro (a mono
   eyebrow, the title in the blackletter, a mono line, an optional contents
   line), the section grid (the mono margin, then the column), the rules list,
   the footer, and the one breakpoint. Both pages load this and keep only their
   own parts, so they can't drift apart in spacing, type, or where they break. */
*, *::before, *::after { box-sizing: border-box; } /* as site.css: the wrap's 90rem includes its gutters */
body { margin: 0; background: var(--shell-bg); color: var(--shell-ink); font-family: var(--font-display); font-size: var(--t-body); line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
p { margin: 0; }
.mono { font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: 0.06em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.mute { color: var(--shell-mute); }
.live { color: var(--shell-accent); }
:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }
.wrap { padding-inline: var(--gutter); max-width: 90rem; margin-inline: auto; }

/* The header, set like the site's masthead. */
header.top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); padding-block: var(--edge) var(--s-3); border-bottom: 1px solid var(--shell-rule); }
header.top a { text-decoration: none; color: var(--shell-mute); transition: color var(--dur) var(--ease); }
header.top a:hover, header.top a:focus-visible { color: var(--shell-ink); }

/* The intro: the full wrap (a contents line runs across it); only the paragraph keeps a measure. */
.intro { display: grid; gap: var(--s-6); padding-block: clamp(4rem, 14vh, 9rem) clamp(3rem, 8vh, 5rem); }
.intro .live { color: var(--shell-mute); } /* the eyebrow: mono, muted */
h1 { margin: 0; font-weight: var(--w-head); font-size: var(--t-h2); line-height: 1.05; letter-spacing: -0.02em; text-wrap: balance; }
/* The title in the blackletter, as the darkroom's and Ghosty's world's wordmarks are; it
   sets larger because it's narrower, and at display size tracks and leads tighter (tokens.css). */
h1.metal { font-family: var(--font-metal); font-weight: 500; font-size: clamp(4rem, 2rem + 9vw, 9.5rem); letter-spacing: var(--track-metal); line-height: var(--lh-metal); transition: opacity var(--dur) var(--ease); }
/* The blackletter arrives from the web: until it has loaded the title is held back (the
   head script lifts `metal-wait`, or after a moment regardless), so it never flashes from
   the fallback serif into Grenze with a different width and fit. */
html.metal-wait h1.metal { opacity: 0; }
.intro p { font-family: var(--font-mono); font-size: var(--t-mono-l); line-height: var(--lh-mono); color: var(--shell-mute); max-width: 110ch; text-wrap: pretty; }
nav.toc { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
nav.toc a { text-decoration: none; color: var(--shell-mute); }
nav.toc a:hover, nav.toc a:focus-visible { color: var(--shell-ink); }

/* A section: the mono margin (number and name), then the column, full width so a list's
   rules run as far as the section's own; the text keeps a measure. */
section { display: grid; grid-template-columns: var(--aside) minmax(0, 1fr); gap: var(--s-6) var(--col-gap); padding-block: var(--s-8) clamp(3rem, 8vh, 5rem); border-top: 1px solid var(--shell-rule); }
section > .aside { display: grid; gap: var(--s-2); align-content: start; }
section > .aside .note { font-family: var(--font-mono); font-size: var(--t-mono); line-height: var(--lh-mono); color: var(--shell-mute); }
section > .body { display: grid; gap: var(--s-8); min-width: 0; }
h2 { margin: 0; font-weight: var(--w-head); font-size: var(--t-h3); line-height: 1.15; letter-spacing: -0.015em; }
h3 { margin: 0 0 var(--s-2); font-weight: var(--w-head); font-size: var(--t-title); letter-spacing: -0.01em; }
.lede { color: var(--shell-mute); max-width: 62ch; }
.lede, .rules li > div, .intro-measure, .t { max-width: var(--measure); }

/* Lists of principles: a number, then the title over its line, on the light rule. No closing
   rules (the next section's own rule is the divider: two rules a padding apart read as a
   double), and a list that opens a section sits right under the section's rule. */
ol.rules, ul.rules { list-style: none; margin: 0; padding: 0; }
.rules li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--s-4); align-items: first baseline; padding-block: var(--s-4); border-top: 1px solid var(--shell-rule); }
.body > .rules:first-child > li:first-child, .body > .stack:first-child > .spec:first-child { border-top: 0; padding-top: 0; }
.rules .n { color: var(--shell-mute); }

/* The footer. */
footer.end { padding-block: var(--s-8) var(--edge); border-top: 1px solid var(--shell-rule); display: flex; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; color: var(--shell-mute); }
footer.end a { color: inherit; text-decoration: none; }
footer.end a:hover { color: var(--shell-ink); }

/* One breakpoint, shared, so the two pages break in the same place. */
@media (max-width: 48rem) {
  section { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { h1.metal { transition: none; } }