:root {
    --ink: #13231f;
    --muted: #60706a;
    --paper: #f6f5ef;
    --white: #fffefa;
    --forest: #071b19;
    --teal: #0f776c;
    --accent: #62e8e5;
    --accent-rgb: 98, 232, 229;
    --accent-soft: rgba(var(--accent-rgb), .18);
    --accent-faint: rgba(var(--accent-rgb), .06);
    --lime: var(--accent);
    --orange: #ff8c5a;
    --line: rgba(19, 35, 31, .13);
    --shadow: 0 24px 60px rgba(7, 27, 25, .12);
    --radius: 24px;
    --nav-height: 74px;
}

:root[data-wander-accent="coral"] { --accent: #ff8f7a; --accent-rgb: 255, 143, 122; }
:root[data-wander-accent="gold"] { --accent: #ffd166; --accent-rgb: 255, 209, 102; }
:root[data-wander-accent="violet"] { --accent: #c4a7ff; --accent-rgb: 196, 167, 255; }
:root[data-wander-accent="lime"] { --accent: #d9ff6f; --accent-rgb: 217, 255, 111; }

:root[data-wander-text="compact"] { font-size: 15px; }
:root[data-wander-text="standard"] { font-size: 16px; }
:root[data-wander-text="large"] { font-size: 18px; }

html.wander-reduce-motion { scroll-behavior: auto; }
html.wander-reduce-motion *,
html.wander-reduce-motion *::before,
html.wander-reduce-motion *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
}

*, *::before, *::after { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; }
body {
    min-height: 100%;
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
}
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }

.app-shell {
    min-height: 100dvh;
    padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom) + 24px);
}

.site-header {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
    padding: calc(18px + env(safe-area-inset-top)) 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 1.1rem; font-weight: 800; letter-spacing: -.03em; }
.brand-mark {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--forest);
    color: var(--lime);
    font: 700 1.45rem/1 Georgia, serif;
    font-style: italic;
}
.header-action { padding: 9px 14px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: .84rem; font-weight: 700; }

main { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
.eyebrow { margin: 0 0 9px; color: var(--teal); font-size: .72rem; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }

@media (max-width: 640px) {
    .site-header, main { width: min(100% - 28px, 1180px); }
    .header-action { font-size: 0; }
    .header-action::after { content: "⚙"; font-size: 1rem; }
}