/* --------------------------------------------------------------------------
   Base layout.

   This started as a <style> block inside components/head-common.html. That
   partial is fetched by component-loader.js, and the block never actually
   reached the page: inspecting the matched CSS rules on the previous build
   shows no `p { color }` rule applying at all. It was dormant code.

   The layout half of it still matters. Linking it here, before first paint,
   is what takes the worst page from 0.205 to 0.000 Cumulative Layout Shift:
   the box-sizing reset and the base margins no longer change after the
   document has already been laid out.

   Two things are deliberately NOT here.

   Colour. Reviving `p { color: var(--text-secondary) }` and
   `h1-h6 { color: var(--text-primary) }` changed the design, because an
   element selector beats an inherited value. That overrode the white the
   gradient headers and the dark journey panel pass down to their children,
   and the roadmap subtitles turned dark slate on purple. Colour cannot move
   a box, so dropping it keeps the whole layout-shift win with none of the
   visual change.

   Component styling. The old block also styled .btn, .cta-button, footer,
   .social-link and the theme swatches. Those were dormant too, and every
   page already styles its own, so reviving them would silently restyle
   buttons and footers site-wide for no measurable benefit.

   Rule of thumb for anything added to this file: if it cannot move a box on
   first paint, it does not belong here.
   -------------------------------------------------------------------------- */

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

body {
    font-family: 'Inter', 'Inter Fallback', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.7;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    line-height: 1.3;
    margin-bottom: 1rem;
}

p {
    margin-bottom: 1rem;
}

/*
 * Link colour genuinely was live in the old inline block, unlike the p and
 * heading colour rules next to it, so removing it turned every in-content
 * link from the theme purple to default browser blue. It is restored here.
 *
 * It is safe as a bare element selector because everything that needs a
 * different colour already sets one with a class, which outranks it:
 * .back-link is white on the gradient headers, .nextlinks a and the footer
 * link groups set their own, and card links inherit from their container.
 */
a {
    color: var(--primary);
    text-decoration: none;
}

a:hover {
    color: var(--secondary);
}

@media (max-width: 768px) {
    .container {
        padding: 0 1rem;
    }
}