/* ====== v2 BASE ======
   Fonts, reset, and element defaults. Loaded on every page.

   ⚠️ This file is GLOBAL. Page-specific styles go in assets/css/pages/<page>.css.
   Overwriting the global stylesheet with a page's CSS is what took the v1 site
   down in July 2026 — see docs/PROJECT-HANDOFF.md.
*/

/* ── Fonts ────────────────────────────────────────────────────────
   Only the weights actually used are shipped. v1 carried 52 MB of font files
   of which ~48 MB was never referenced; v2 ships 3.1 MB.
   font-display:swap so text is readable before the font arrives.          */

/* Galano ships THREE weights, as WOFF2.
   Six were declared; a grep of every font-weight in v2 found only 400 and 500
   in use, and 600 for <strong> in article copy (see the b/strong rule below).
   Light, Bold and ExtraBold could not be requested by any rule — three files
   and ~139 KB that every first visit was offered and never needed.
   OTF is not a web container: the same glyphs as WOFF2 are ~45% smaller.
   Together: 275 KB of Galano became 75 KB (2026-09-28).                      */
@font-face {
    font-family: 'Galano Grotesque';
    src: url('../fonts/galano-grotesque/galano-regular.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Galano Grotesque';
    src: url('../fonts/galano-grotesque/galano-medium.woff2') format('woff2');
    font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Galano Grotesque';
    src: url('../fonts/galano-grotesque/galano-semibold.woff2') format('woff2');
    font-weight: 600; font-style: normal; font-display: swap;
}

@font-face {
    font-family: 'Iosevka';
    src: url('../fonts/iosevka/iosevka-latin-400-normal.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Iosevka';
    src: url('../fonts/iosevka/iosevka-latin-500-normal.woff2') format('woff2');
    font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Iosevka';
    src: url('../fonts/iosevka/iosevka-latin-600-normal.woff2') format('woff2');
    font-weight: 600; font-style: normal; font-display: swap;
}

/* The browser's default for <b>/<strong> is 700, which Galano no longer ships —
   the 19 article bodies that use <strong> would be synthetically emboldened.
   600 is a real file, and semibold reads better than bold inside body copy in
   a type system whose headings are Regular and Medium.                      */
b, strong { font-weight: var(--fw-semibold); }

/* ── Reset ───────────────────────────────────────────────────────── */

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

/* The HTML `hidden` attribute must always win.
   Without this, any author rule that sets `display` on an element — including a
   media query revealing the mobile menu — silently overrides the UA stylesheet's
   [hidden]{display:none} and the element renders open. That is precisely how the
   July 2026 mobile outage happened on v1 (docs/PROJECT-HANDOFF.md §3), and this
   build reproduced it before the guard was added. Do not remove. */
[hidden] { display: none !important; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* Anchor links must clear the sticky navbar. */
    scroll-padding-top: calc(var(--nav-height) + var(--space-4));
    /* Scroll-reveal elements wait at translateX(±50px), which is wider than
       the 20px mobile gutter, so the document is briefly wider than the
       viewport. body{overflow-x:hidden} clips that visually but iOS still
       lets you pan into it. `clip` on the root does not create a scroll
       container and iOS honours it; `hidden` is the fallback.            */
    overflow-x: hidden;
    overflow-x: clip;
    /* The canvas colour — what shows in over-scroll bounce and while a phone's
       toolbar collapses. Without this it inherits body's teal-black, which
       reads as green against the black footer. Black matches the footer,
       where people actually over-scroll; the top bounce meets the near-black
       purple nav, close enough not to read as a colour change.             */
    background-color: var(--c-neutral-darkbg);
}

body {
    margin: 0;
    background-color: var(--c-bg);
    color: var(--c-text);
    font-family: var(--font-primary);
    font-size: var(--t-p2);
    font-weight: var(--fw-regular);
    line-height: var(--lh-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    overflow-x: clip;
}

/* Scroll-reveal elements wait at translateX(±50px). html/body clip that, but
   Android Chrome still lets a finger pan into the clipped area; clipping on
   main (the reveals' nearest full-width ancestor) closes that on every
   browser. clip, not hidden: no scroll container, sticky children unaffected. */
main { overflow-x: hidden; overflow-x: clip; }   /* hidden is the fallback for browsers without clip */

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: none; padding: 0; cursor: pointer; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--c-link-hover); }

/* Visible keyboard focus everywhere — the v1 site has none in places. */
:focus-visible {
    outline: 2px solid var(--c-accent-cyan);
    outline-offset: 3px;
    border-radius: 2px;
}

/* ── Typography defaults ─────────────────────────────────────────── */

h1 { font-size: var(--t-h1); line-height: var(--lh-tight);   letter-spacing: var(--ls-display); font-weight: var(--fw-regular); }
h2 { font-size: var(--t-h2); line-height: var(--lh-heading); font-weight: var(--fw-regular); }
h3 { font-size: var(--t-h3); line-height: var(--lh-heading); font-weight: var(--fw-medium); }   /* Figma H3 is Galano Medium 500 */
h4 { font-size: var(--t-h4); line-height: var(--lh-heading); font-weight: var(--fw-regular); }
h5 { font-size: var(--t-h5); line-height: var(--lh-heading); font-weight: var(--fw-regular); }

.t-display-1 { font-size: var(--t-display-1); line-height: var(--lh-tight); letter-spacing: var(--ls-display); }
.t-p1        { font-size: var(--t-p1); line-height: var(--lh-body); }
.t-p3        { font-size: var(--t-p3); line-height: var(--lh-body); }
.t-muted     { color: var(--c-text-muted); }

/* ── Layout helpers ──────────────────────────────────────────────── */

.container {
    width: 100%;
    max-width: var(--page-max);
    margin-inline: auto;
    padding-inline: var(--page-gutter);
}

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

/* Skip link — first focusable element on every page. */
/* Visually hidden, still read aloud — for a glyph's meaning in words. */
.u-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: calc(var(--z-mobile-menu) + 1);
    padding: var(--space-3) var(--space-5);
    background: var(--c-accent-cyan);
    color: var(--c-primary-dark);
    font-family: var(--font-secondary);
    font-size: var(--t-p3);
    text-transform: uppercase;
}
.skip-link:focus { left: var(--space-4); top: var(--space-4); }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;   /* an infinite loop at 0.01ms would flash */
        transition-duration: 0.01ms !important;
    }
}