/* Pure Amino — reset + primitives shared across every page.
   Tokens come from colors_and_type.css (enqueued first). */

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

html { scroll-behavior: smooth; }

html, body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    overflow-x: hidden;
}

body { cursor: default; }

/* Lock background scroll while the mobile menu or cart drawer is open. */
body.pa-menu-open,
body.pa-drawer-open { overflow: hidden; }

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

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

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

/* ---------- Primitives ---------- */
.cap { font-weight: 500; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink); }
.cap-sm { font-weight: 500; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; }
.mono { font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; }

.axis { display: flex; align-items: center; gap: 12px; font-weight: 500; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; }
.axis::before, .axis::after { content: ''; flex: 1; height: 1px; background: currentColor; opacity: .55; }
.axis .d { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.axis-left { display: flex; align-items: center; gap: 12px; font-weight: 500; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; }
.axis-left::after { content: ''; flex: 1; height: 1px; background: currentColor; opacity: .55; }
.axis-left .d { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.dot-trail { display: inline-flex; gap: 10px; align-items: center; }
.dot-trail i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; display: block; }

.display { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: -.03em; line-height: .92; }
.body-wide { font-weight: 500; font-size: 12px; line-height: 1.75; letter-spacing: .22em; text-transform: uppercase; text-align: justify; }

.btn {
    font-weight: 500; font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
    padding: 15px 24px;
    background: var(--ink); color: var(--paper);
    display: inline-flex; align-items: center; gap: 12px;
    transition: background .22s var(--ease-standard);
    border: 1px solid var(--ink);
}
.btn:hover { background: #000; }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { background: var(--ink); color: var(--paper); }
.btn .arr { display: inline-block; transition: transform .22s var(--ease-standard); }
.btn:hover .arr { transform: translateX(4px); }

/* Reveal */
[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
[data-reveal].in { opacity: 1; transform: none; }
[data-reveal-stagger] > * { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
[data-reveal-stagger].in > * { opacity: 1; transform: none; }
[data-reveal-stagger].in > *:nth-child(1) { transition-delay: 0ms; }
[data-reveal-stagger].in > *:nth-child(2) { transition-delay: 60ms; }
[data-reveal-stagger].in > *:nth-child(3) { transition-delay: 120ms; }
[data-reveal-stagger].in > *:nth-child(4) { transition-delay: 180ms; }
[data-reveal-stagger].in > *:nth-child(5) { transition-delay: 240ms; }
[data-reveal-stagger].in > *:nth-child(6) { transition-delay: 300ms; }