:root {
  --font-body: 'Satoshi', system-ui, sans-serif;
  --font-serif: 'Instrument Serif', Georgia, serif;
  --text-xs: .75rem;
  --text-sm: .875rem;
  --text-base: clamp(1rem, .96rem + .2vw, 1.125rem);
  --text-lg: clamp(1.25rem, 1.1rem + .4vw, 1.5rem);
  --text-xl: clamp(1.8rem, 1.25rem + 1.8vw, 3rem);
  --text-hero: clamp(3.5rem, 2rem + 4.1vw, 6rem);
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;
  --radius-sm: 8px; --radius-md: 16px; --radius-lg: 24px; --radius-full: 999px;
  --accent: #c6ff3d; --blue: #096bd9;
  --bg: #f5f3ec; --surface: #ebe9e1; --ink: #181a17; --muted: #5e6259;
  --rule: #d4d5cc; --paper: #fffef8;
  color-scheme: light;
}
html[data-city="socal"] { --bg:#f7f2e6; --surface:#eee7d8; --paper:#fffcf5; }
html[data-city="phoenix"] { --bg:#f6eee2; --surface:#eae0d2; --paper:#fffaf3; }
html[data-theme="dark"] {
  --bg:#1a1c18; --surface:#262921; --ink:#f5f3ea; --muted:#babeb0;
  --rule:#41453b; --paper:#23261f; color-scheme:dark;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:100px; }
body { margin:0; font-family:var(--font-body); color:var(--ink); background:var(--bg); font-size:var(--text-base); line-height:1.55; -webkit-font-smoothing:antialiased; }
h1,h2,h3,p,figure { margin:0; }
h1,h2,h3 { line-height:1.06; font-weight:900; }
a { color:inherit; }
button,input { font:inherit; }
button,a,input,summary { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
button:disabled { cursor:wait; opacity:.65; }
a { text-decoration:none; }
img { display:block; max-width:100%; height:auto; }
em { font-family:var(--font-serif); font-weight:400; }
:focus-visible { outline:3px solid var(--blue); outline-offset:5px; }
[hidden] { display:none !important; }
.skip-link { position:fixed; top:-100px; left:16px; z-index:100; padding:12px 20px; background:var(--accent); color:#181a17; }
.skip-link:focus { top:8px; }
.wrap { width:min(1280px, calc(100% - 96px)); margin-inline:auto; }
.fine { font-size:var(--text-xs); line-height:1.5; color:var(--muted); }
@media(max-width:760px) { .wrap { width:calc(100% - 40px); } }
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation:none!important; transition:none!important; }
}