/* Metric-matched fallbacks — eliminate font-swap layout shift */
@font-face{font-family:'DM Sans Fallback';src:local('Arial');size-adjust:100.06%;ascent-override:97.65%;descent-override:24.39%;line-gap-override:0%}
@font-face{font-family:'Playfair Fallback';src:local('Georgia');size-adjust:105%;ascent-override:108.67%;descent-override:42.76%;line-gap-override:0%}

/* ==========================================================================
   blog.css — styles for /blog/ (index + articles)
   The site inlines its global CSS per page, so the shared chrome (root vars,
   util bar, nav, footer, buttons) is reproduced here verbatim from index.html
   so blog pages match the rest of the site. Blog-specific styles follow.
   Linked only from the two blog templates. Not build output — safe to edit.
   ========================================================================== */

/* ---- shared: design tokens (from index.html) ---- */
:root {
  --navy: #1B2A35;
  --navy-soft: #2A3D4A;
  --teal: #2E6B6A;
  --teal-light: #3D8584;
  --rust: #B5541B;
  --rust-light: #D06F30;
  --sand: #F5F0E8;
  --sand-dim: #EBE5D8;
  --warm-white: #FDFCFA;
  --ink: #1B2A35;
  --ink-soft: #5A6670;
  --rule: rgba(27, 42, 53, 0.10);
  --rule-strong: rgba(27, 42, 53, 0.18);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'DM Sans', 'DM Sans Fallback', -apple-system, sans-serif;
  background: var(--sand);
  color: var(--ink);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
.display { font-family: 'Playfair Display', 'Playfair Fallback', Georgia, serif; font-weight: 500; letter-spacing: -0.01em; line-height: 1.05; }
.label { font-family: 'DM Sans', 'DM Sans Fallback', sans-serif; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500; color: var(--teal); }

/* ---- shared: top utility bar ---- */
.util-bar { background: var(--navy); color: var(--warm-white); font-size: 14px; }
.util-inner { max-width: 1440px; margin: 0 auto; padding: 12px 60px; display: flex; justify-content: center; align-items: center; gap: 28px; flex-wrap: wrap; }
.util-bar strong { font-weight: 500; }
.util-bar .sep { color: rgba(253, 252, 250, 0.4); }
.util-bar a { color: var(--warm-white); text-decoration: none; border-bottom: 0.5px solid rgba(253, 252, 250, 0.3); padding-bottom: 1px; transition: border-color 0.2s; }
.util-bar a:hover { border-color: var(--rust-light); }
.util-bar .phone { display: flex; align-items: center; gap: 6px; border: none; }
.util-bar .phone svg { width: 13px; height: 13px; }

/* ---- shared: main nav ---- */
nav.main-nav { background: var(--warm-white); border-bottom: 0.5px solid var(--rule); position: sticky; top: 0; z-index: 100; }
.nav-inner { max-width: 1440px; margin: 0 auto; padding: 22px 60px; display: flex; justify-content: space-between; align-items: center; }
.logo { display: flex; align-items: center; }
.logo-svg { height: 44px; width: auto; display: block; }
.logo-svg .lg-serif { font-family: 'Playfair Display', 'Playfair Fallback', serif; font-weight: 500; }
.logo-svg .lg-sans { font-family: 'DM Sans', 'DM Sans Fallback', sans-serif; font-weight: 500; letter-spacing: 0.18em; }
.nav-menu { display: flex; gap: 4px; align-items: center; }
.nav-menu > a, .nav-menu .nav-link {
  color: var(--navy); text-decoration: none; font-size: 14px; font-weight: 400;
  padding: 10px 14px; border-radius: 4px; transition: background 0.2s, color 0.2s;
  cursor: pointer; display: inline-flex; align-items: center; gap: 4px;
  background: none; border: none; font-family: inherit;
}
.nav-menu > a:hover, .nav-menu .nav-link:hover { background: var(--sand); color: var(--teal); }
.nav-link svg { width: 12px; height: 12px; opacity: 0.6; }

/* ---- shared: primary/secondary buttons ---- */
.btn-primary {
  background: var(--teal); color: var(--warm-white); padding: 20px 36px; border-radius: 6px;
  font-size: 15px; font-weight: 500; border: none; cursor: pointer; display: inline-flex;
  align-items: center; gap: 12px; transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
  font-family: inherit; text-decoration: none; box-shadow: 0 6px 20px rgba(46, 107, 106, 0.20); letter-spacing: 0.01em;
}
.btn-primary:hover { background: var(--teal-light); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(46, 107, 106, 0.28); }
.btn-primary svg { width: 16px; height: 16px; transition: transform 0.2s; }
.btn-primary:hover svg { transform: translateX(4px); }
.btn-secondary {
  background: var(--warm-white); color: var(--navy); padding: 20px 36px; border-radius: 6px;
  font-size: 15px; font-weight: 500; border: 1px solid var(--navy); cursor: pointer; display: inline-flex;
  align-items: center; gap: 12px; transition: all 0.2s; font-family: inherit; text-decoration: none; letter-spacing: 0.01em;
}
.btn-secondary:hover { background: var(--navy); color: var(--warm-white); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(27, 42, 53, 0.20); }
.btn-secondary svg { width: 16px; height: 16px; transition: transform 0.2s; }
.btn-secondary:hover svg { transform: translateX(4px); }

/* ---- shared: responsive (hide desktop nav) ---- */
@media (max-width: 980px) {
  .util-bar { font-size: 12px; }
  .util-inner { padding: 8px 20px; gap: 14px; }
  .util-bar .sep { display: none; }
  .nav-inner { padding: 14px 20px; }
  .nav-menu { display: none; }
}
@media (max-width: 560px) {
  .btn-primary, .btn-secondary { justify-content: center; }
}

/* ---- shared: canonical site footer (from index.html) ---- */
.site-footer { background: #1B2A35; color: rgba(253, 252, 250, 0.9); padding: 64px 0 32px; font-family: 'DM Sans', 'DM Sans Fallback', sans-serif; }
.site-footer .container { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
.site-footer .footer-grid { display: grid; grid-template-columns: 1.2fr 0.8fr 1.6fr 1fr; gap: 48px; padding-bottom: 48px; border-bottom: 1px solid rgba(253, 252, 250, 0.1); }
.site-footer .footer-brand .footer-logo { height: 36px; margin-bottom: 20px; width: auto; }
.site-footer .footer-tagline { font-size: 14px; line-height: 1.6; color: rgba(253, 252, 250, 0.7); max-width: 320px; margin: 0; }
.site-footer .footer-col-heading { font-family: 'DM Sans', 'DM Sans Fallback', sans-serif; font-weight: 500; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: #3D8584; margin: 0 0 20px 0; }
.site-footer .footer-link, .site-footer .footer-text { display: block; font-size: 14px; color: rgba(253, 252, 250, 0.9); text-decoration: none; margin-bottom: 10px; transition: color 200ms ease; }
.site-footer .footer-link:hover { color: #FDFCFA; }
.site-footer .footer-text { color: rgba(253, 252, 250, 0.75); }
.site-footer .footer-text-small { font-size: 13px; color: rgba(253, 252, 250, 0.6); margin-top: 4px; }
.site-footer .footer-locations { display: flex; flex-direction: column; gap: 22px; }
.site-footer .footer-primary-phone { line-height: 1.2; }
.site-footer .footer-phone-primary { display: block; font-family: 'Playfair Display', 'Playfair Fallback', Georgia, serif; font-size: 22px; color: #FDFCFA; text-decoration: none; line-height: 1.2; transition: color 200ms ease; }
.site-footer .footer-phone-primary:hover { color: #3D8584; }
.site-footer .footer-phone-label { display: block; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: #3D8584; margin-top: 4px; }
.site-footer .footer-location-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.site-footer .footer-location-title { font-family: 'DM Sans', 'DM Sans Fallback', sans-serif; font-weight: 500; font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: #3D8584; margin: 0 0 6px 0; }
.site-footer .footer-location address { font-style: normal; font-size: 13px; line-height: 1.5; color: rgba(253, 252, 250, 0.75); margin-bottom: 6px; }
.site-footer .footer-location .footer-link { font-size: 13px; margin-bottom: 0; }
.site-footer .footer-mail { display: inline-block; margin-top: 0; }
.site-footer .footer-social { list-style: none; display: flex; align-items: center; gap: 8px; margin: 24px 0 0; padding: 0; }
.site-footer .footer-social li { display: inline-flex; }
.site-footer .footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: rgba(253, 252, 250, 0.75); border-radius: 8px; transition: color 150ms ease, background-color 150ms ease; }
.site-footer .footer-social a:hover { color: #FDFCFA; background: rgba(253, 252, 250, 0.08); }
.site-footer .footer-social a:focus-visible { outline: 2px solid #3D8584; outline-offset: 2px; }
.site-footer .footer-social svg { width: 22px; height: 22px; display: block; }
.site-footer .footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; padding-top: 32px; font-size: 13px; color: rgba(253, 252, 250, 0.6); }
.site-footer .footer-copyright, .site-footer .footer-fair-housing, .site-footer .footer-legal { margin: 0; }
.site-footer .footer-fair-housing { display: flex; align-items: center; gap: 8px; color: rgba(253, 252, 250, 0.6); }
.site-footer .footer-fair-housing svg { flex-shrink: 0; }
.site-footer .footer-legal a { color: rgba(253, 252, 250, 0.6); text-decoration: none; transition: color 200ms ease; }
.site-footer .footer-legal a:hover { color: #FDFCFA; }
@media (max-width: 900px) {
  .site-footer .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px 32px; }
  .site-footer .footer-location-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .site-footer .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .site-footer .footer-location-grid { grid-template-columns: 1fr; }
  .site-footer .footer-bottom { flex-direction: column; align-items: flex-start; text-align: left; }
}

/* ==========================================================================
   Blog-specific
   ========================================================================== */
.blog-main { max-width: 1280px; margin: 0 auto; padding: 0 32px; }

/* breadcrumb */
.blog-breadcrumb { max-width: 1280px; margin: 0 auto; padding: 24px 32px 0; font-size: 13px; color: var(--ink-soft); }
.blog-breadcrumb a { color: var(--teal); text-decoration: none; }
.blog-breadcrumb a:hover { color: var(--navy); text-decoration: underline; }
.blog-breadcrumb span[aria-current] { color: var(--ink-soft); }

/* ---- blog index / listing ---- */
.blog-hero { max-width: 1280px; margin: 0 auto; padding: 40px 32px 8px; }
.blog-hero h1 { font-family: 'Playfair Display', 'Playfair Fallback', Georgia, serif; font-weight: 500; font-size: 44px; line-height: 1.08; color: var(--navy); letter-spacing: -0.01em; }
.blog-hero p { margin-top: 14px; font-size: 17px; line-height: 1.7; color: var(--ink-soft); max-width: 68ch; }
.blog-hero p a { color: var(--teal); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(46,107,106,0.4); }
.blog-hero p a:hover { color: var(--navy); text-decoration-color: var(--navy); }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; padding: 36px 32px 64px; max-width: 1280px; margin: 0 auto; }
.blog-card { background: var(--warm-white); border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; transition: transform 0.2s, box-shadow 0.2s; }
.blog-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(27, 42, 53, 0.10); }
.blog-card a.blog-card-link { text-decoration: none; color: inherit; display: flex; flex-direction: column; height: 100%; }
.blog-card-thumb { aspect-ratio: 16 / 10; background: var(--sand-dim); overflow: hidden; }
.blog-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-card-body { padding: 22px 22px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.blog-card-date { font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--teal); }
.blog-card-title { font-family: 'Playfair Display', 'Playfair Fallback', Georgia, serif; font-weight: 600; font-size: 20px; line-height: 1.28; color: var(--navy); }
.blog-card-desc { font-size: 14.5px; color: var(--ink-soft); line-height: 1.6; }
.blog-card-more { margin-top: auto; font-size: 14px; font-weight: 500; color: var(--rust); }
.blog-empty { padding: 60px 32px; text-align: center; color: var(--ink-soft); max-width: 1280px; margin: 0 auto; }
@media (max-width: 900px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } .blog-hero h1 { font-size: 36px; } }
@media (max-width: 600px) { .blog-grid { grid-template-columns: 1fr; } }

/* pagination */
.blog-pagination { display: flex; justify-content: center; align-items: center; gap: 8px; padding: 0 32px 72px; }
.blog-pagination a, .blog-pagination span { min-width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; border-radius: 6px; font-size: 14px; text-decoration: none; color: var(--navy); border: 1px solid var(--rule-strong); }
.blog-pagination a:hover { background: var(--sand); color: var(--teal); }
.blog-pagination .current { background: var(--navy); color: var(--warm-white); border-color: var(--navy); }
.blog-pagination .disabled { opacity: 0.4; pointer-events: none; }

/* ---- single article ---- */
.article-wrap { max-width: 760px; margin: 0 auto; padding: 8px 32px 24px; }
.article-header h1 { font-family: 'Playfair Display', 'Playfair Fallback', Georgia, serif; font-weight: 500; font-size: 40px; line-height: 1.12; color: var(--navy); letter-spacing: -0.01em; margin-bottom: 14px; }
.article-meta { font-size: 13px; color: var(--ink-soft); letter-spacing: 0.03em; text-transform: uppercase; margin-bottom: 10px; }
.article-byline { font-family: 'DM Sans', 'DM Sans Fallback', sans-serif; font-size: 14px; color: var(--ink-soft); margin-bottom: 24px; }
.article-byline a { color: var(--teal); text-decoration: none; }
.article-byline a:hover { color: var(--navy); text-decoration: underline; }
.article-hero { margin: 8px 0 32px; border-radius: 12px; overflow: hidden; background: var(--sand-dim); }
.article-hero img { width: 100%; height: auto; display: block; }
.article-body { font-size: 17.5px; line-height: 1.75; color: #26333c; max-width: 72ch; }
.article-body > * + * { margin-top: 1.15em; }
.article-body h2 { font-family: 'Playfair Display', 'Playfair Fallback', Georgia, serif; font-weight: 600; font-size: 28px; line-height: 1.2; color: var(--navy); margin-top: 1.7em; }
.article-body h3 { font-family: 'Playfair Display', 'Playfair Fallback', Georgia, serif; font-weight: 600; font-size: 22px; line-height: 1.25; color: var(--navy); margin-top: 1.5em; }
.article-body h4 { font-weight: 600; font-size: 18px; color: var(--navy); margin-top: 1.4em; }
.article-body a { color: var(--teal); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(46,107,106,0.4); }
.article-body a:hover { color: var(--navy); text-decoration-color: var(--navy); }
.article-body ul, .article-body ol { padding-left: 1.4em; }
.article-body li + li { margin-top: 0.4em; }
.article-body img { max-width: 100%; height: auto; border-radius: 8px; display: block; margin: 1.4em 0; }
.article-body blockquote { border-left: 3px solid var(--rust); padding: 4px 0 4px 20px; margin-left: 0; color: var(--ink-soft); font-style: italic; }
.article-body code { background: var(--sand-dim); padding: 2px 6px; border-radius: 4px; font-size: 0.9em; }
.article-body pre { background: var(--navy); color: var(--warm-white); padding: 18px; border-radius: 8px; overflow-x: auto; }
.article-body pre code { background: none; padding: 0; }
.article-body table { width: 100%; border-collapse: collapse; font-size: 15px; overflow-x: auto; display: block; }
.article-body th, .article-body td { border: 1px solid var(--rule-strong); padding: 10px 14px; text-align: left; }
.article-body th { background: var(--sand); font-weight: 600; }
.article-body hr { border: none; border-top: 1px solid var(--rule-strong); margin: 2em 0; }

/* article CTA block */
.article-cta { max-width: 760px; margin: 48px auto 8px; background: var(--navy); border-radius: 12px; padding: 44px 40px; text-align: center; color: var(--warm-white); }
.article-cta h2 { font-family: 'Playfair Display', 'Playfair Fallback', Georgia, serif; font-weight: 500; font-size: 28px; line-height: 1.2; color: var(--warm-white); margin-bottom: 12px; }
.article-cta p { color: rgba(253, 252, 250, 0.75); font-size: 16px; max-width: 48ch; margin: 0 auto 26px; }
.article-cta .article-cta-actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
@media (max-width: 560px) {
  .article-header h1 { font-size: 30px; }
  .article-cta { padding: 34px 22px; }
  .article-cta .article-cta-actions { flex-direction: column; align-items: stretch; }
}