/* Roadside design language: shared tokens + chrome for subpages.
   Spec: docs/superpowers/specs/2026-06-11-roadside-design-language-and-landing-redesign-design.md */

:root, [data-theme="day"] {
  --sky:#eaf5e6; --paper:#f6faf3;
  --hill-1:#cfe9c8; --hill-2:#a8d8a4; --hill-3:#7cc183; --hill-4:#55a866;
  --road:#4d5a50; --road-line:#f2f8ef;
  --ink:#243528; --ink-dim:#5d705f; --ink-faint:#76887a;
  --brand:#2e7d44; --brand-bright:#30D158; --annot:#3c7a4e;
  --ev:#1c6fbf; --warm:#ffd96b;
  --tier-mid:#b35c00; --tier-high:#c23b2e;
  --shadow: 0 30px 60px -25px rgba(36,53,40,.35);
}
[data-theme="night"] {
  --sky:#0c1712; --paper:#101c15;
  --hill-1:#13251a; --hill-2:#1a3424; --hill-3:#224530; --hill-4:#2a5239;
  --road:#11201a; --road-line:#5d7a64;
  --ink:#e8f1e9; --ink-dim:#9fb6a4; --ink-faint:#5d7a64;
  --brand:#3fe06c; --brand-bright:#30D158; --annot:#7fb98c;
  --ev:#57b1ff; --warm:#f4ecd2;
  --tier-mid:#ffb340; --tier-high:#ff6b5e;
  --shadow: 0 30px 70px -25px rgba(0,0,0,.65);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background:var(--paper); color:var(--ink);
  font-family:'Karla',sans-serif; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  transition:background .25s, color .25s;
}
.mono { font-family:'Geist Mono',ui-monospace,monospace; font-variant-numeric:tabular-nums; }
.annot { font-family:'Caveat',cursive; color:var(--annot); }
.serif { font-family:'Fraunces',serif; }
.container { max-width:1120px; margin:0 auto; padding:0 28px; }
a { color:inherit; text-decoration:none; }

/* nav */
nav.site { position:sticky; top:0; z-index:60; background:color-mix(in srgb, var(--paper) 86%, transparent); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); transition:background .25s; }
@supports not (background: color-mix(in srgb, red 50%, blue)) { nav.site { background:var(--paper); } }
.nav-inner { display:flex; justify-content:space-between; align-items:center; padding-top:22px; padding-bottom:22px; }
.wordmark { font-family:'Fraunces',serif; font-weight:600; font-size:1.55rem; color:var(--ink); letter-spacing:-.02em; }
.nav-right { display:flex; gap:26px; align-items:center; font-weight:600; font-size:.92rem; color:var(--ink-dim); }
.nav-right a:hover { color:var(--ink); }
.pill { background:var(--brand-bright); color:#10301c; font-weight:700; padding:9px 20px; border-radius:999px; font-size:.9rem; box-shadow:0 3px 0 rgba(36,53,40,.18); }
.pill:active { transform:translateY(1px); box-shadow:0 2px 0 rgba(36,53,40,.18); }
.theme-toggle { width:38px; height:38px; border-radius:50%; border:none; cursor:pointer; background:transparent; color:var(--ink-dim); display:grid; place-items:center; }
.theme-toggle:hover { color:var(--ink); }
.theme-toggle svg { width:21px; height:21px; }
.day-only { display:initial; } .night-only { display:none; }
[data-theme="night"] .day-only { display:none; }
[data-theme="night"] .night-only { display:initial; }

.skip-link { position:absolute; top:-100%; left:16px; z-index:200; background:var(--brand-bright); color:#10301c; padding:10px 20px; border-radius:999px; font-weight:700; font-size:.875rem; }
.skip-link:focus { top:12px; }

/* content pages */
main.prose { background:var(--paper); padding:64px 0 96px; transition:background .25s; }
main.prose h1 { font-family:'Fraunces',serif; font-weight:500; font-size:clamp(2rem,4vw,2.8rem); letter-spacing:-.015em; margin-bottom:8px; }
main.prose h2 { font-family:'Fraunces',serif; font-weight:500; font-size:clamp(1.2rem,2.2vw,1.5rem); letter-spacing:-.01em; margin:36px 0 10px; }
main.prose h3 { font-size:1.05rem; margin:24px 0 8px; }
main.prose p, main.prose li { color:var(--ink-dim); max-width:640px; }
main.prose p { margin-bottom:12px; }
main.prose ul, main.prose ol { padding-left:22px; margin-bottom:12px; }
main.prose strong { color:var(--ink); font-weight:600; }
main.prose a { color:var(--brand); text-decoration:underline; text-decoration-style:wavy; text-decoration-thickness:1px; text-underline-offset:3px; }
main.prose a.btn-contact, main.prose a.contact-email { color:#10301c; text-decoration:none; }
.page-kick { font-family:'Caveat',cursive; font-size:1.5rem; color:var(--annot); display:block; margin-bottom:6px; transform:rotate(-1.2deg); }

/* footer */
.hill-foot { display:block; width:100%; }
footer.site { background:var(--paper); padding:34px 0 46px; transition:background .25s; }
.foot-row { display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; align-items:baseline; }
.foot-links { display:flex; gap:22px; color:var(--ink-dim); font-weight:600; font-size:.9rem; align-items:center; }
.foot-div { width:1px; height:18px; background:var(--ink-faint); opacity:.6; display:inline-block; }
.x-link svg { width:15px; height:15px; display:block; }
.x-link:hover { color:var(--ink); }
.legal { font-size:.72rem; color:var(--ink-faint); margin-top:16px; max-width:540px; line-height:1.6; }

@media (max-width:900px) {
  .nav-right .nav-link { display:none; }
}