/* ============================================================
   BASE — resets, typography, and primitives.
   ============================================================ */

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

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    margin: 0;
    background: var(--bg-page);
    color: var(--color-on-bg);
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    font-weight: 400;
    line-height: var(--lh-normal);
    overflow-x: clip;
}

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

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--d-fast) var(--ease-out), opacity var(--d-fast) var(--ease-out);
}
a:hover { opacity: 0.7; }

button {
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

input, textarea, select {
    font: inherit;
    color: inherit;
}

::selection {
    background: var(--c-olive);
    color: var(--c-cream-bg);
}

/* Headings — serif, tight tracking, hairline weight for the editorial feel */
h1, h2, h3, h4, h5, h6,
.heading {
    font-family: var(--font-serif);
    font-weight: 400;
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-tight);
    margin: 0;
    color: var(--color-on-bg);
}

h1, .h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
h2, .h2 { font-size: var(--fs-h2); line-height: var(--lh-tight); }
h3, .h3 { font-size: var(--fs-h3); }
h4, .h4 { font-size: var(--fs-h4); }
h5, .h5 { font-size: var(--fs-h5); }
h6, .h6 { font-size: var(--fs-h6); }

p { margin: 0; }
p + p { margin-top: 1em; }

/* The eyebrow — recurring micro-typography across sections (Inter, refined) */
.eyebrow {
    font-family: var(--font-ui);
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--color-eyebrow);
    line-height: 1;
}

/* Bracket motif — square brackets [ TEXT + ] echoing the logo's [ ] frame */
.bracket-link {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5em;
    font-family: var(--font-ui);
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--color-on-bg);
    transition: opacity var(--d-base) var(--ease-out), letter-spacing var(--d-base) var(--ease-out);
}
.bracket-link::before { content: '['; padding-right: 0.1em; }
.bracket-link::after  { content: ']'; padding-left: 0.1em; }
.bracket-link::before,
.bracket-link::after {
    font-family: var(--font-ui);
    font-size: 1.15em;
    font-weight: 400;
    line-height: 1;
    color: currentColor;
    opacity: 0.85;
}
.bracket-link__inner {
    display: inline-flex;
    align-items: baseline;
    gap: 0.7em;
}
.bracket-link__inner::after {
    content: '+';
    font-weight: 400;
    font-size: 1em;
    line-height: 1;
    opacity: 0.85;
}
.bracket-link:hover { letter-spacing: 0.5em; opacity: 1; }

/* Containers */
.container {
    width: 100%;
    max-width: var(--w-content);
    margin-inline: auto;
    padding-inline: var(--section-x);
}
.container--wide  { max-width: var(--w-wide); }
.container--prose { max-width: var(--w-prose); }
.container--bleed { max-width: 100%; padding-inline: 0; }

/* Sections */
.section {
    padding-block: var(--section-y);
}
.section--cream { background: var(--bg-page); }
.section--olive { background: var(--bg-footer); color: var(--color-on-footer); }
.section--olive .eyebrow { color: var(--c-cream-soft); opacity: 0.7; }

/* Hidden but accessible */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Skip link */
.skip-link {
    position: absolute;
    top: -100px;
    left: var(--sp-4);
    background: var(--c-olive);
    color: var(--c-cream-bg);
    padding: var(--sp-3) var(--sp-5);
    z-index: 1000;
    transition: top var(--d-base) var(--ease-out);
}
.skip-link:focus { top: var(--sp-4); }