/* ===================================================================== Hilary Kilgore — Site-wide Stylesheet Brand: Cormorant Garamond + Work Sans · Deep Teal / Cream / Sage Loaded by every page. Pair with /assets/css/neighborhoods.css on /neighborhoods/* pages and /assets/css/article.css on blog posts. ===================================================================== */ :root { --hk-ink: #1b504e; --hk-paper: #e3ded2; --hk-accent: #2c7d7b; --hk-sage: #759967; --hk-lime: #c1f9aa; --hk-lavender: #dabdf9; --hk-black: #000000; --hk-white: #ffffff; --hk-paper-soft: #ece7da; --hk-paper-deep: #d9d3c3; --hk-ink-08: rgba(27, 80, 78, 0.08); --hk-ink-12: rgba(27, 80, 78, 0.12); --hk-ink-16: rgba(27, 80, 78, 0.16); --hk-ink-32: rgba(27, 80, 78, 0.32); --hk-ink-64: rgba(27, 80, 78, 0.64); --display: 'Cormorant Garamond', Garamond, 'Times New Roman', serif; --body: 'Work Sans', 'Helvetica Neue', Arial, sans-serif; --shadow-sm: 0 2px 8px rgba(27, 80, 78, 0.08); --shadow-md: 0 8px 24px rgba(27, 80, 78, 0.12); --shadow-lg: 0 16px 48px rgba(27, 80, 78, 0.18); --radius: 4px; --radius-lg: 6px; } /* ─── RESET / BASE ─── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--body); background: var(--hk-paper); color: var(--hk-ink); line-height: 1.65; font-size: 16px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; display: block; } a { color: var(--hk-accent); text-decoration: none; transition: color 0.15s; } a:hover { color: var(--hk-ink); } /* ─── LAYOUT ─── */ .wrap { max-width: 1240px; margin: 0 auto; padding: 0 32px; } /* Nav styles live in /assets/js/site-nav.js (injected by ). The placeholder-height rules below MUST live in this stylesheet (inlined into ) so they're applied before site-nav.js runs. Otherwise the JS-injected brokerage band + nav appear from nowhere and shift everything below them down. */ site-nav { display: block; min-height: 134px; /* 60 band + 74 nav at desktop */ } @media (max-width: 980px) { site-nav { min-height: 124px; } } @media (max-width: 720px) { /* brokerage-band stacks to two rows on mobile (name above meta) */ site-nav { min-height: 170px; } } /* ─── BUTTONS ─── */ .btn { display: inline-block; font-family: var(--body); font-size: 13px; font-weight: 600; letter-spacing: 0.06em; padding: 14px 28px; border-radius: 2px; transition: all 0.2s; border: 1.5px solid transparent; cursor: pointer; text-decoration: none; } .btn-primary { background: var(--hk-accent); color: var(--hk-paper); border-color: var(--hk-accent); } .btn-primary:hover { background: var(--hk-ink); border-color: var(--hk-ink); color: var(--hk-paper); } .btn-outline { background: transparent; color: var(--hk-ink); border-color: var(--hk-ink); } .btn-outline:hover { background: var(--hk-ink); color: var(--hk-paper); } .btn-light { background: var(--hk-paper); color: var(--hk-ink); border-color: var(--hk-paper); } .btn-light:hover { background: var(--hk-lime); border-color: var(--hk-lime); color: var(--hk-ink); } .btn-outline-light { background: transparent; color: var(--hk-paper); border-color: rgba(227, 222, 210, 0.5); } .btn-outline-light:hover { background: rgba(227, 222, 210, 0.12); border-color: var(--hk-paper); color: var(--hk-paper); } /* ───────────────────────────────────────────────────────────────────── FOOTER — Three variants .footer → full multi-column footer (home, about, blog, posts, 404, mortgage calculator). The