/* ==========================================================================
   base.css — reset, page canvas, container, primitives
   ========================================================================== */

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--header-h);
    -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

body {
    margin: 0;
    font-family: var(--f-en);
    font-weight: 400;
    font-size: var(--fs-body);
    line-height: 1.55;
    color: var(--text);
    /* §3 — page background is icefield, NEVER pure white. The blue cast is brand. */
    background: var(--icefield);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

/* §6.2 — architectural-grid texture on the page canvas. 40px tiles, cerulean
   hairlines at ~5% opacity. Faint engineering-paper feel. Canvas only. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><g stroke='%233374BA' stroke-width='0.4'><line x1='0' y1='0' x2='40' y2='0'/><line x1='0' y1='0' x2='0' y2='40'/></g></svg>");
    background-size: 40px 40px;
    background-repeat: repeat;
    opacity: 0.05;
}

/* Everything sits above the texture */
.site-header, main, .site-footer { position: relative; z-index: 1; }

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

:focus-visible {
    outline: 2px solid var(--cerulean);
    outline-offset: 3px;
}

/* ---- Layout primitives ---- */
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--pad-x);
}
.container--narrow { max-width: var(--container-narrow); }

@media (max-width: 768px) {
    .container { padding-inline: var(--pad-x-mobile); }
}

.section { padding-block: var(--section-y); }

/* Utility: visually hidden but available to screen readers */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---- Brand wordmark in running text (M[A]N[A]GE with cerulean A's) ----
   §4 — only for inline text references; headers/footers use the real image. */
.a-ins { color: var(--cerulean); }
.ltr-brand { direction: ltr; unicode-bidi: isolate; }