/* ══════════════════════════════════════════════════════════════════════════
   Organic — design-system tokens + components for Outdoor Power Stations.
   Source of truth for the redesign's look. Retune here and every section
   follows. Fonts load via Google Fonts <link> in the HTML head.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --color-bg: #f5ead8;
  --color-surface: #ebddc5;
  --color-text: #201e1d;
  --color-accent: #c67139;
  --color-accent-2: #7a8a5e;
  --color-divider: color-mix(in srgb, #201e1d 16%, transparent);

  /* Tonal ramps — OKLCH, one shared lightness scale. */
  --color-neutral-100: #f9f4ed;
  --color-neutral-200: #eee7db;
  --color-neutral-300: #dcd3c4;
  --color-neutral-400: #c0b6a5;
  --color-neutral-500: #a19786;
  --color-neutral-600: #82796a;
  --color-neutral-700: #645c50;
  --color-neutral-800: #474238;
  --color-neutral-900: #2e2b25;

  --color-accent-100: #fff2eb;
  --color-accent-200: #ffe1d0;
  --color-accent-300: #ffc6a5;
  --color-accent-400: #f6a06b;
  --color-accent-500: #d67f48;
  --color-accent-600: #b2622d;
  --color-accent-700: #8c491a;
  --color-accent-800: #643312;
  --color-accent-900: #402310;

  --color-accent-2-100: #f0fae1;
  --color-accent-2-200: #e1eecc;
  --color-accent-2-300: #ccdbb2;
  --color-accent-2-400: #aebf92;
  --color-accent-2-500: #8fa073;
  --color-accent-2-600: #728157;
  --color-accent-2-700: #56633f;
  --color-accent-2-800: #3d472b;
  --color-accent-2-900: #272e1b;

  --font-heading: "Caprasimo", system-ui, sans-serif;
  --font-heading-weight: 400;
  --font-body: "Figtree", system-ui, sans-serif;

  --space-1: 4.4px;
  --space-2: 8.8px;
  --space-3: 13.2px;
  --space-4: 17.6px;
  --space-6: 26.4px;
  --space-8: 35.2px;

  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;

  --shadow-sm: 0 1px 2px color-mix(in srgb, #2e2b25 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2e2b25 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2e2b25 22%, transparent);
}

/* ── base ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent); text-underline-offset: 3px; }
img { display: block; max-width: 100%; }
figure { margin: 0; }
figcaption { font-size: 11px; margin-top: var(--space-1); color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

.hr { height: 1px; border: 0; margin: var(--space-4) 0; background: var(--color-divider); }

/* ── buttons ──────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; line-height: 1.2; color: var(--color-text);
  background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: var(--radius-md);
}
.btn svg { display: block; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); color: var(--color-bg); }
.btn-primary:hover { background: var(--color-accent-600); }
.btn-primary:active { background: var(--color-accent-700); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-icon { width: 36px; height: 36px; padding: 0; }
.btn-block { width: 100%; margin-top: var(--space-2); }

/* ── forms ────────────────────────────────────────────────────────────── */
.field > label { display: block; font-size: 12px; margin-bottom: 5px; color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.input {
  width: 100%; min-height: 36px; padding: 6px 10px; font: inherit; font-size: 14px;
  color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 90px; resize: vertical; }

/* ── cards ────────────────────────────────────────────────────────────── */
.card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface); }
.card-kicker { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }
.card-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 17px; line-height: 1.2; }
.card-body { margin: 0; font-size: 13px; opacity: 0.8; flex: 1; }
.card-meta { display: flex; align-items: center; gap: 6px; font-size: 11px; color: color-mix(in srgb, var(--color-text) 50%, transparent); }
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }

/* ── tags ─────────────────────────────────────────────────────────────── */
.tag { display: inline-flex; align-items: center; font-size: 11px; letter-spacing: 0.02em; padding: 3px 10px; border-radius: calc(var(--radius-md) * 0.75); }
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }

/* ── rounded frame overrides (the "Organic" soft pill look) ───────────── */
.card, .dialog { border-radius: calc(var(--radius-lg) * 1.15); }
.btn, .tag, .seg, .input { border-radius: 999px; }
.input { padding-inline: 14px; }

/* ══════════════════════════════════════════════════════════════════════════
   Scene — the animated day/night campground. Parallax layers read CSS vars
   set from JS on scroll; static artwork (mountains, van, tent, fire, family,
   mascot) lives in the HTML with inline styles.
   ══════════════════════════════════════════════════════════════════════════ */
.scene { position: fixed; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
.scene .sky { position: absolute; inset: 0; background: linear-gradient(180deg, #cfe4ee 0%, #e6eee0 34%, #f7edda 68%, #f2e4cd 100%); }

/* night sky: stars + moon */
.scene-night { position: absolute; inset: 0; opacity: var(--night-opacity, 0); transition: opacity 0.12s linear; }
.scene-night .moon { position: absolute; right: 12vw; top: 9vh; width: 118px; height: 118px; border-radius: 999px; background: radial-gradient(circle at 38% 34%, #fdf6e4, #e6dcc0 62%, #cdc3a6 100%); box-shadow: 0 0 90px 34px rgba(226,232,214,0.32); }

/* sun */
.scene-sun { position: absolute; right: 15vw; top: 11vh; width: 148px; height: 148px; transform: translateY(var(--sun-y, 0vh)); opacity: var(--sun-opacity, 1); }
.scene-sun .glow { position: absolute; inset: -60%; border-radius: 999px; background: radial-gradient(circle, rgba(255,214,150,0.6), rgba(255,214,150,0) 68%); animation: pulseGlow 9s ease-in-out infinite; }
.scene-sun .disc { position: absolute; inset: 0; border-radius: 999px; background: radial-gradient(circle at 40% 36%, #fff6e0, #ffd79a 58%, #f6a06b 100%); }

/* clouds */
.scene-clouds { position: absolute; left: 0; right: 0; top: 0; height: 60vh; transform: translateY(var(--cloud-y, 0vh)); opacity: var(--cloud-opacity, 1); }

/* mountain layers — static SVG in HTML, parallax via CSS vars */
.scene-mfar { position: absolute; left: -4vw; width: 108vw; height: 32vh; top: 86vh; transform: translateY(var(--mfar-y, 0vh)); opacity: 0.42; }
.scene-mnear { position: absolute; left: -3vw; width: 106vw; height: 30vh; top: 102vh; transform: translateY(var(--mnear-y, 0vh)); opacity: 0.72; }
.scene-tfar { position: absolute; left: 0; width: 100%; height: 34vh; top: 118vh; transform: translateY(var(--tfar-y, 0vh)); opacity: 0.5; }
.scene-tmid { position: absolute; left: 0; width: 100%; height: 30vh; top: 128vh; transform: translateY(var(--tmid-y, 0vh)); opacity: 0.8; }
.scene-tnear { position: absolute; left: 0; width: 100%; height: 26vh; top: 138vh; transform: translateY(var(--tnear-y, 0vh)); }
.scene-trunks { position: absolute; left: 0; right: 0; height: 20vh; top: 146vh; transform: translateY(var(--trunk-y, 0vh)); }
.scene-ground { position: absolute; left: 0; right: 0; height: 46vh; top: 152vh; transform: translateY(var(--ground-y, 0vh)); background: linear-gradient(180deg, #3d472b 0%, #2e2b25 70%); }
.scene-ground::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 26px; border-radius: 999px 999px 0 0; background: #56633f; }

/* campground — static artwork in HTML, parallax + fade via CSS vars */
.scene-camp { position: absolute; left: 0; right: 0; height: 40vh; top: 150vh; transform: translateY(var(--camp-y, 0vh)); opacity: var(--camp-opacity, 0); }
.scene-camp-inner { position: absolute; left: 50%; bottom: 8vh; width: 1120px; margin-left: -560px; height: 260px; transform: scale(var(--camp-scale, 1)); transform-origin: bottom center; }

/* floating leaves + fireflies */
.scene-leaves { position: absolute; inset: 0; overflow: hidden; opacity: var(--leaf-opacity, 0); }
.scene-fireflies { position: absolute; inset: 0; overflow: hidden; opacity: var(--firefly-opacity, 0); }

/* night veil (multiply darkening) */
.scene-veil { position: absolute; inset: 0; background: linear-gradient(180deg, #101a2c 0%, #16281f 46%, #1b1a17 100%); opacity: var(--night-veil, 0); mix-blend-mode: multiply; }

/* ══════════════════════════════════════════════════════════════════════════
   Trail — the scroll-snap single-page column. On desktop this is a normal
   vertical page; each <section> is a full viewport stop.
   ══════════════════════════════════════════════════════════════════════════ */
.trail { position: relative; z-index: 10; height: 100vh; overflow-y: auto; scroll-snap-type: y proximity; scroll-behavior: auto; }
.trail::-webkit-scrollbar { width: 0; height: 0; }
.trail section { position: relative; box-sizing: border-box; min-height: 100dvh; scroll-snap-align: start; padding: var(--sec-pad, 84px 6vw 104px); }

.gearscroll::-webkit-scrollbar { width: 8px; }
.gearscroll::-webkit-scrollbar-thumb { background: var(--color-neutral-400); border-radius: 999px; }

/* header */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: var(--head-gap, 26.4px); padding: var(--head-pad, 15px 4vw); color: var(--chrome-color, var(--color-text)); }
.site-header .brand { display: flex; align-items: center; gap: 13.2px; color: inherit; text-decoration: none; flex: 0 0 auto; }
.site-header .brand img { width: var(--logo-w, 40px); height: auto; filter: drop-shadow(0 3px 8px rgba(46,43,37,0.28)); }
.site-header .brand span { display: var(--brand-text, block); font-family: var(--font-heading); font-size: 18px; line-height: 1.05; letter-spacing: -0.01em; white-space: nowrap; }
.site-header nav { display: flex; align-items: center; gap: 7px; min-width: 0; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.site-header nav::-webkit-scrollbar { display: none; }
.nav-dot { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; border: 0; cursor: pointer; padding: var(--nav-pill-pad, 7px 14px); border-radius: 999px; font-family: var(--font-body); font-size: var(--nav-pill-size, 12px); font-weight: 700; letter-spacing: 0.02em; }
.nav-dot i { width: 6px; height: 6px; border-radius: 999px; font-style: normal; }

/* companion mascot */
.companion { position: fixed; right: 3vw; bottom: 3vh; z-index: 45; display: flex; flex-direction: row-reverse; align-items: flex-end; gap: 13.2px; pointer-events: none; }
.companion .mascot { position: relative; width: var(--companion-w, 68px); aspect-ratio: 372 / 343; pointer-events: auto; cursor: pointer; }
.companion .mascot .glow { position: absolute; inset: -16%; border-radius: 999px; background: radial-gradient(circle, rgba(255,206,150,0.4), rgba(255,206,150,0) 70%); animation: pulseGlow 5s ease-in-out infinite; }
.companion .mascot .body { position: absolute; inset: 0; animation: bob 4.5s ease-in-out infinite; transform-origin: bottom center; }
.companion .mascot .body img { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 10px 16px rgba(46,43,37,0.3)); }
.companion .mascot .progress { position: absolute; left: 8%; right: 8%; bottom: -12px; height: 8px; border-radius: 999px; background: var(--color-neutral-300); overflow: hidden; box-shadow: var(--shadow-sm); }
.companion .mascot .progress i { display: block; height: 100%; width: var(--progress-pct, 0%); background: linear-gradient(90deg, var(--color-accent-2-500), var(--color-accent-400)); }
.companion .bubble { max-width: 210px; opacity: 0; margin-bottom: 16px; padding: 11px 15px; border-radius: 28px 28px 8px 28px; overflow: hidden; background: var(--bubble-bg, var(--color-neutral-100)); color: var(--bubble-fg, var(--color-neutral-900)); box-shadow: var(--shadow-md); font-size: 13.5px; font-weight: 600; line-height: 1.4; text-wrap: pretty; transition: opacity 0.25s ease; }
.companion .bubble.show { opacity: 1; }

/* ══════════════════════════════════════════════════════════════════════════
   Keyframes
   ══════════════════════════════════════════════════════════════════════════ */
@keyframes leafFall { 0% { transform: translate3d(-2.5vw, -12vh, 0) rotate(0deg); opacity: 0; } 10% { opacity: 0.85; } 50% { transform: translate3d(2.5vw, 45vh, 0) rotate(180deg); } 90% { opacity: 0.7; } 100% { transform: translate3d(-2vw, 112vh, 0) rotate(400deg); opacity: 0; } }
@keyframes bob { 0%,100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-7px) rotate(1.5deg); } }
@keyframes sway { 0%,100% { transform: rotate(-1.2deg); } 50% { transform: rotate(1.2deg); } }
@keyframes twinkle { 0%,100% { opacity: 0.15; transform: scale(0.7); } 50% { opacity: 1; transform: scale(1.2); } }
@keyframes starTwinkle { 0%,100% { opacity: 0.25; } 50% { opacity: 1; } }
@keyframes pulseGlow { 0%,100% { opacity: 0.35; transform: scale(0.94); } 50% { opacity: 0.7; transform: scale(1.06); } }
@keyframes cueDrop { 0%,100% { transform: translateX(-50%) translateY(0); opacity: 0.5; } 50% { transform: translateX(-50%) translateY(8px); opacity: 1; } }
@keyframes cloudDrift { 0% { transform: translateX(-3vw); } 100% { transform: translateX(4vw); } }
@keyframes talk { 0%, 44%, 100% { height: 8%; opacity: 0.55; } 10% { height: 62%; opacity: 1; } 22% { height: 22%; opacity: 0.9; } 34% { height: 74%; opacity: 1; } }
@keyframes screenLit { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
@keyframes scanline { 0% { transform: translateY(-120%); } 100% { transform: translateY(320%); } }
@keyframes ledBlink { 0%, 78%, 100% { opacity: 0.35; } 84%, 94% { opacity: 1; } }
@keyframes flameA { 0%,100% { transform: translateX(-50%) scale(1) skewX(-2deg); } 35% { transform: translateX(-50%) scale(1.16, 0.9) skewX(5deg); } 68% { transform: translateX(-50%) scale(0.9, 1.18) skewX(-6deg); } }
@keyframes flameB { 0%,100% { transform: translateX(-50%) scale(0.94, 1.1) skewX(4deg); opacity: 0.9; } 45% { transform: translateX(-50%) scale(1.12, 0.88) skewX(-7deg); opacity: 1; } }
@keyframes emberUp { 0% { transform: translate(0,0) scale(1); opacity: 0; } 15% { opacity: 0.95; } 100% { transform: translate(var(--dx, 10px), -140px) scale(0.3); opacity: 0; } }
@keyframes fireGlow { 0%,100% { opacity: 0.4; transform: translateX(-50%) scale(0.94); } 50% { opacity: 0.85; transform: translateX(-50%) scale(1.1); } }
@keyframes rvWindow { 0%,100% { opacity: 0.75; } 50% { opacity: 1; } }

/* ══════════════════════════════════════════════════════════════════════════
   Responsive layout — values adapt to viewport width via CSS vars so the
   static page stacks cleanly on mobile (mirrors the JS-driven layout).
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  --head-gap: 26.4px;
  --head-pad: 15px 4vw;
  --logo-w: 40px;
  --brand-text: block;
  --nav-pill-pad: 7px 14px;
  --nav-pill-size: 12px;
  --sec-pad: 84px 6vw 104px;
  --sec-pad-tall: 84px 6vw 44vh;
  --card-cols: repeat(auto-fill, minmax(238px, 1fr));
  --guide-cols: repeat(auto-fill, minmax(300px, 1fr));
  --gear-cols: repeat(auto-fill, minmax(252px, 1fr));
  --uc-cols: minmax(0, 1.05fr) minmax(0, 0.62fr);
  --calc-cols: minmax(0, 1.25fr) minmax(0, 0.75fr);
  --device-cols: minmax(0, 1fr) minmax(0, 1fr);
  --sel-cols: minmax(0, 1fr) minmax(0, 1fr);
  --pane-h: 52vh;
  --companion-w: 68px;
  --hours-slider-w: 58px;
  --watts-display: inline;
  --step-btn: 22px;
  --cmp-pad: 17.6px 26.4px;
  --cmp-name-size: 22px;
  --cmp-val-size: 16px;
  --cmp-label-size: 11.5px;
}

@media (max-width: 900px) {
  :root { --device-cols: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  :root {
    --head-gap: 10px;
    --head-pad: 11px 4vw;
    --logo-w: 32px;
    --nav-pill-pad: 6px 11px;
    --nav-pill-size: 11.5px;
    --sec-pad: 72px 5vw 92px;
    --sec-pad-tall: 72px 5vw 40vh;
    --card-cols: minmax(0, 1fr);
    --guide-cols: minmax(0, 1fr);
    --gear-cols: minmax(0, 1fr);
    --uc-cols: minmax(0, 1fr);
    --calc-cols: minmax(0, 1fr);
    --sel-cols: minmax(0, 1fr);
    --pane-h: 54vh;
    --companion-w: 52px;
    --hours-slider-w: 86px;
    --step-btn: 28px;
    --cmp-pad: 15px 17.6px;
    --cmp-name-size: 17px;
    --cmp-val-size: 14px;
    --cmp-label-size: 10px;
  }
}
@media (max-width: 560px) {
  :root { --brand-text: none; }
}
@media (max-width: 420px) {
  :root { --watts-display: none; }
}