/* ============================================================
ShopConnect — editorial landing page
Brand: warm paper + ink, forest green, butter-marigold
Type: Newsreader (serif display) + Hanken Grotesk (sans)
============================================================ */
/* AUDIT FIX 2026-06-07 — @import removed; Google Fonts is now loaded via in
BaseLayout.astro with preconnect hints. @import blocks CSS parsing until the remote
stylesheet is fetched; a in lets the browser fetch it in parallel. */
:root {
--paper: #F6F1E1;
--paper-2: #FBF8EE;
--paper-sunk: #ECE4CE;
--ink: #1B1712;
--ink-soft: #5A534A;
/* A11Y FIX: #938B7D was 2.98:1 on --paper — fails WCAG AA (need ≥3:1 large, ≥4.5:1 small).
#6B6358 scores 5.23:1 on --paper — passes both thresholds. */
--ink-faint: #6B6358;
--line: rgba(27, 23, 18, 0.12);
--line-2: rgba(27, 23, 18, 0.22);
--panel: #15140F; /* warm near-black dark sections */
--panel-2: #211F18;
--panel-card: #26241B;
--panel-line: rgba(246, 241, 225, 0.16);
--green: #195139; /* forest band */
--green-deep: #123A29;
--green-bright: #45B07D;
/* A11Y FIX: #2E7D5B was 4.42:1 on --paper (fails WCAG AA). #22754C was 4.45:1 on
--paper-sunk (#ECE4CE, used as ing-chip background) — still fails AA (need ≥4.5:1).
#1E6B44 scores 5.11:1 on --paper-sunk, 5.73:1 on --paper, 6.10:1 on --paper-2.
Passes AA on every background it appears on. */
--green-soft: #1E6B44;
--butter: #F4C657; /* primary CTA / accents */
--butter-deep: #E8A11E; /* marigold annotations */
--clay: #C9744A;
--sc-navy: #15276B; /* ShopConnect mark — deep navy */
/* A11Y FIX: #4C79F0 scored 3.51:1 on --paper — fails WCAG AA at 4.5:1 threshold
when axe evaluates at mobile viewport (18px font, not guaranteed large-text).
#2563EB scores 4.57:1 on --paper and 4.86:1 on --paper-2 (nav bar bg). */
--sc-blue: #2563EB; /* ShopConnect mark — bright blue */
--r-lg: 30px;
--r-md: 18px;
--r-sm: 12px;
--maxw: 1240px;
--serif: 'Newsreader', Georgia, serif;
--sans: 'Hanken Grotesk', system-ui, sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html {
scroll-behavior: smooth;
/* Prevent horizontal scroll at the root level. overflow-x:hidden on body alone
is not sufficient — browsers allow horizontal scroll on body if html is not
also clipped. Both must be set to fully prevent the mobile overflow issue. */
overflow-x: hidden;
}
body {
background: var(--paper);
color: var(--ink);
font-family: var(--sans);
font-size: 17px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
::selection { background: var(--butter); color: var(--ink); }
a { color: inherit; text-decoration: none; }
/* Anchor-jump offset — nav links and in-page anchors scroll to section[id]
targets; land them below the fixed header rather than hidden underneath. */
section[id], [id].anchor-offset { scroll-margin-top: 90px; }
.serif { font-family: var(--serif); }
.italic { font-style: italic; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 40px; }
/* ───────────────────────── BUTTONS ───────────────────────── */
.btn {
display: inline-flex; align-items: center; gap: 10px;
font-family: var(--sans); font-weight: 700; font-size: 16px;
letter-spacing: -0.01em;
padding: 14px 24px; border-radius: 100px;
border: 1.5px solid transparent; cursor: pointer;
transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s, background .2s, color .2s, border-color .2s;
white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--butter); color: var(--ink); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(232,161,30,.32); }
.btn-ink { background: var(--ink); color: var(--paper); }
.btn-ink:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(27,23,18,.25); }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn-outline:hover { border-color: var(--ink); }
.btn-on-dark { background: transparent; color: var(--paper); border-color: var(--panel-line); }
.btn-on-dark:hover { border-color: var(--paper); }
.btn .ico { width: 18px; height: 18px; display: block; }
/* ───────────────────────── NAV ───────────────────────── */
/* Scoped to the fixed header only — a bare `nav` selector here leaked
display:flex / position:fixed / pointer-events:none into other