/* ==========================================================================
   Base — reset, document defaults and typography
   --------------------------------------------------------------------------
   Element-level styles only (no classes except .container & friends at the
   end). Everything reads tokens from core/tokens.css. RTL-first: use logical
   properties (margin-inline-start, inset-inline-end…) everywhere.
   ========================================================================== */

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

* { margin: 0; }

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* Anchor jumps land below the sticky header / app bar */
    scroll-padding-top: calc(var(--header-h) + var(--space-4));
}

@media (max-width: 991.98px) {
    html { scroll-padding-top: calc(var(--appbar-h) + var(--space-4)); }
}

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

body {
    min-height: 100vh;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: var(--fs-base);
    line-height: var(--lh-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
    overflow-x: clip;   /* clip (unlike hidden) also blocks programmatic sideways scroll */
}

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

input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 0.25em; }
a:hover { color: var(--ink); }

p, li, figcaption { overflow-wrap: break-word; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
[hidden] { display: none !important; }   /* beats component display rules (e.g. .btn) */

/* ── Typography ──────────────────────────────────────────────────────────── */
h1, h2, h3, h4 {
    letter-spacing: 0;               /* never track Arabic */
    font-family: var(--font-display);
    font-weight: var(--fw-display);  /* thin, like the monoline mark */
    line-height: var(--lh-tight);
    color: var(--ink);
    text-wrap: balance;
}
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }

p { text-wrap: pretty; }
strong, b { font-weight: 700; }

/* ── Focus — always visible for keyboard users, never for mouse clicks ──── */
:focus { outline: none; }
:focus-visible {
    outline: 3px solid var(--second-strong);
    outline-offset: 3px;
    border-radius: 6px;
}

::selection { background: var(--second-tint-strong); color: var(--ink); }

/* ── Layout primitives ───────────────────────────────────────────────────── */
.container {
    width: 100%;
    max-width: calc(var(--container) + var(--gutter) * 2);
    margin-inline: auto;
    padding-inline: var(--gutter);
}
.container--narrow { max-width: calc(var(--container-narrow) + var(--gutter) * 2); }

.section { padding-block: var(--section-y); }
.section--band { background: var(--paper-deep); }

/* Page wrapper: leaves room for the mobile tab bar so nothing hides under it */
.site-main { display: block; min-height: 60vh; }

@media (max-width: 991.98px) {
    .site-main { padding-bottom: calc(var(--tabbar-h) + var(--safe-bottom) + var(--space-4)); }
}

/* ── Accessibility helpers ───────────────────────────────────────────────── */
.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}

.skip-link {
    position: absolute;
    inset-inline-start: var(--space-4);
    top: -100px;
    z-index: 1000;
    padding: var(--space-3) var(--space-5);
    border-radius: var(--r-pill);
    background: var(--ink);
    color: var(--paper);
    font-weight: 700;
    text-decoration: none;
    transition: top var(--dur) var(--ease-out);
}
.skip-link:focus { top: var(--space-4); color: var(--paper); }

/* Lock page scroll while a sheet / lightbox is open */
body.is-locked { overflow: hidden; }