/* ═══════════════════════════════════════════════════════════════════
   ELEMENTS BLOG STYLESHEET
   Inherits main-site design tokens, header, and footer CSS exactly.
   Adds blog-specific styles for hero, post cards, and article body.
   ═══════════════════════════════════════════════════════════════════ */

/* ───── Design tokens (matches main site) ───── */
:root{
  --dark:#1a1a18;
  --green-dark:#2b3f2c;
  --green:#5a6e5a;
  --green-light:#e8efe6;
  --warm-gray:#6b6b66;
  --border:#e8e6e0;
  --off-white:#fafaf7;
  --gold:#b8956a;
  --gold-light:#d4b378;
  --gold-bright:#e8c690;
  --red:#c44;

  /* Unified surface — used by header + footer for visual continuity.
     Deep forest green that fades to near-black, giving the chrome of the
     site a single distinctive identity. */
  --surface-dark-1:#1f3322;        /* mid forest */
  --surface-dark-2:#16241a;        /* deeper */
  --surface-dark-3:#0e1a12;        /* near-black edge */
  --surface-gold-line:rgba(184,149,106,.32);

  /* One canonical gold for CTAs and accents (header + footer must match) */
  --gold-primary:#c9a36a;
  --gold-primary-hover:#d8b27b;
  --gold-on-dark:#dcb784;          /* readable gold on the surface */
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{font-family:"Jost",sans-serif;color:var(--dark);background:#fff;line-height:1.5;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer;border:none;background:none}
a{color:inherit;text-decoration:none}

/* ═══════════════════════════════════════════════════════
   HEADER — UNIFIED NAV (REDESIGN #1)
   - Two-row layout on desktop: brand band + nav band
   - Single-row collapsed nav on mobile
   - Buyer's Guide treated as primary CTA (gold pill)
   - Scaffolded with placeholder structure for future Meet Matt + Blog
   ═══════════════════════════════════════════════════════ */

/* ───── Header (matches main site exactly) ───── */
.site-header{
  position:relative;
  z-index:1000;
  background:
    radial-gradient(ellipse 600px 280px at 15% 0%, rgba(220,183,132,.10) 0%, transparent 65%),
    radial-gradient(ellipse 700px 320px at 85% 100%, rgba(140,170,140,.22) 0%, transparent 60%),
    radial-gradient(ellipse 1100px 500px at 50% 50%, rgba(58,80,55,.4) 0%, transparent 70%),
    linear-gradient(168deg, #1f3322 0%, #16241a 50%, #0e1a12 100%);
  color:white;
  border-bottom:1px solid var(--surface-gold-line);
  box-shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 4px 24px rgba(0,0,0,.18);
}
/* Layer 1: subtle organic palm-frond pattern — very low opacity, large scale */
.site-header::before{
  content:"";position:absolute;inset:0;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600' width='600' height='600'><g fill='none' stroke='%23dcb784' stroke-width='1.2' stroke-linecap='round' opacity='0.5'><path d='M80 540 Q 140 380 220 280 Q 280 200 320 80'/><path d='M120 540 Q 170 400 230 320'/><path d='M160 540 Q 200 420 240 360'/><path d='M200 540 Q 230 440 250 400'/><path d='M70 480 Q 130 440 210 410'/><path d='M70 420 Q 130 370 220 340'/><path d='M70 360 Q 140 300 230 270'/><path d='M70 300 Q 150 230 240 200'/><path d='M70 240 Q 170 160 250 130'/></g><g fill='none' stroke='%23dcb784' stroke-width='1.2' stroke-linecap='round' opacity='0.4' transform='translate(380,60) rotate(160 100 100)'><path d='M80 540 Q 140 380 220 280 Q 280 200 320 80'/><path d='M120 540 Q 170 400 230 320'/><path d='M160 540 Q 200 420 240 360'/><path d='M70 480 Q 130 440 210 410'/><path d='M70 420 Q 130 370 220 340'/><path d='M70 360 Q 140 300 230 270'/></g></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.86 0 0 0 0 0.72 0 0 0 0 0.52 0 0 0 0.22 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size:600px 600px, 220px 220px;
  background-position:right -200px top -120px, 0 0;
  background-repeat:no-repeat, repeat;
  opacity:.55;
  mix-blend-mode:overlay;
  pointer-events:none;
}
.site-header::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg, transparent 0%, var(--surface-gold-line) 30%, var(--surface-gold-line) 70%, transparent 100%);
  z-index:1;
}
.header-inner{position:relative;z-index:2;max-width:1400px;margin:0 auto;padding:0 32px}

/* Top brand row */
.header-brand-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 0 14px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.brand-logos{display:flex;align-items:center;gap:18px}
.brand-logos img.logo-elements{height:46px;width:auto;cursor:pointer;filter:drop-shadow(0 1px 4px rgba(0,0,0,.4))}
.brand-logos .brand-divider{width:1px;height:30px;background:linear-gradient(to bottom,transparent 0%,rgba(184,149,106,.45) 50%,transparent 100%)}
.brand-logos img.logo-exp{height:34px;width:auto;filter:drop-shadow(0 1px 4px rgba(0,0,0,.4))}
.brand-meta{display:flex;align-items:center;gap:14px}

/* Canadian-Owned badge — small, refined, sits top-right and lines up
   above the CTA button. Replaces the previous oversized two-line pill. */
.canadian-pill{
  display:inline-flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(220,183,132,.28);
  border-radius:999px;
  padding:6px 14px 6px 10px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.canadian-pill .flags{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:14px;
  border-radius:2px;
  overflow:hidden;
  box-shadow:0 0 0 1px rgba(255,255,255,.15), 0 1px 2px rgba(0,0,0,.25);
  flex-shrink:0;
}
.canadian-pill .flags svg{display:block;width:100%;height:100%}
.canadian-pill .flags::after{display:none}
.canadian-pill .flag{display:none}
.canadian-pill span.txt{
  color:rgba(255,255,255,.82);
  font-size:10.5px;letter-spacing:.16em;line-height:1;font-weight:600;text-transform:uppercase;
  white-space:nowrap;
}
.canadian-pill span.txt br{display:none}
.canadian-pill span.txt strong{
  color:var(--gold-on-dark);
  font-weight:700;letter-spacing:.16em;
}

/* Nav row — hero photo bleeds up behind it through a heavy gradient,
   creating visual continuity with the hero below. Photo positioned to
   align with the hero so they read as one image. */
.header-nav-row{
  position:relative;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 0 16px;
  gap:18px;
  isolation:isolate;
  border-top:1px solid rgba(220,183,132,.18);
}
.header-nav-row::before{
  content:"";
  position:absolute;
  inset:0;
  /* Full viewport bleed */
  left:50%;margin-left:-50vw;width:100vw;
  /* Solid forest-green gradient matching the rest of the header surface.
     Slightly darker than the brand row above so the nav row reads as a distinct band. */
  background:
    radial-gradient(ellipse 900px 400px at 50% 50%, rgba(58,80,55,.30) 0%, transparent 70%),
    linear-gradient(180deg, #16241a 0%, #0e1a12 100%);
  z-index:-2;
}
.header-nav-row::after{
  content:"";
  position:absolute;inset:0;
  left:50%;margin-left:-50vw;width:100vw;
  /* Soft inner-shadow at top edge so the nav row blends into the brand row above */
  background:linear-gradient(180deg,
    rgba(0,0,0,.18) 0%,
    rgba(0,0,0,0) 18%,
    rgba(0,0,0,0) 82%,
    rgba(0,0,0,.12) 100%);
  z-index:-1;
}
.header-nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.nav-link{
  position:relative;
  color:rgba(255,255,255,.95);
  font-size:13px;letter-spacing:.10em;text-transform:uppercase;font-weight:500;
  padding:10px 18px;border-radius:4px;
  background:linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(0,0,0,.22) 100%);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 2px 6px rgba(0,0,0,.32);
  text-shadow:0 1px 2px rgba(0,0,0,.4);
  transition:color .18s, background .18s, border-color .18s, transform .18s, box-shadow .18s;
}
.nav-link:hover{
  color:white;
  background:linear-gradient(180deg, rgba(255,255,255,.12) 0%, rgba(0,0,0,.14) 100%);
  border-color:rgba(220,183,132,.42);
  transform:translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.10) inset,
    0 4px 12px rgba(0,0,0,.4);
}
.nav-link.active{
  color:white;
  background:linear-gradient(180deg, rgba(220,183,132,.16) 0%, rgba(0,0,0,.20) 100%);
  border-color:rgba(220,183,132,.5);
  box-shadow:
    0 1px 0 rgba(255,255,255,.10) inset,
    0 3px 10px rgba(0,0,0,.36);
}
.nav-link.active::after{
  content:"";position:absolute;left:18px;right:18px;bottom:5px;height:1.5px;
  background:var(--gold-on-dark);
  border-radius:1px;
}
.nav-link.coming{
  color:rgba(255,255,255,.4);cursor:not-allowed;
  background:linear-gradient(180deg, rgba(255,255,255,.02) 0%, rgba(0,0,0,.08) 100%);
  border-color:rgba(255,255,255,.04);
}
.nav-link.coming:hover{
  background:linear-gradient(180deg, rgba(255,255,255,.02) 0%, rgba(0,0,0,.08) 100%);
  color:rgba(255,255,255,.4);
  transform:none;
  border-color:rgba(255,255,255,.04);
  box-shadow:
    0 1px 0 rgba(255,255,255,.04) inset,
    0 1px 2px rgba(0,0,0,.18);
}
.nav-link.coming::before{
  content:"soon";
  position:absolute;top:-6px;right:4px;
  background:rgba(220,183,132,.22);color:var(--gold-on-dark);
  font-size:8px;letter-spacing:.1em;text-transform:uppercase;
  padding:2px 5px;border-radius:2px;font-weight:700;
}

.header-cta-group{display:flex;align-items:center;gap:10px}

/* Primary CTA: Buyer's Guide — premium brushed-gold treatment.
   Multi-stop gradient simulates light hitting metal; animated shimmer
   passes across to give it actual life. */
.cta-guide{
  position:relative;
  display:inline-flex;align-items:center;gap:10px;
  background:
    linear-gradient(180deg,
      #f0d29a 0%,
      #d8b27b 18%,
      #c9a36a 50%,
      #b89058 82%,
      #a07c4a 100%);
  color:#1a2a1c !important;
  border:1px solid rgba(255,255,255,.35);
  border-radius:5px;
  padding:13px 22px;
  font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;
  transition:transform .18s ease, box-shadow .25s ease, filter .25s ease;
  box-shadow:
    0 1px 0 rgba(255,255,255,.55) inset,
    0 -1px 0 rgba(0,0,0,.18) inset,
    0 0 0 1px rgba(0,0,0,.15),
    0 4px 12px rgba(0,0,0,.28),
    0 10px 30px rgba(184,144,80,.25);
  text-shadow:0 1px 0 rgba(255,255,255,.4);
  overflow:hidden;
  isolation:isolate;
}
/* Specular highlight strip — sits along the top edge */
.cta-guide::before{
  content:"";
  position:absolute;left:0;right:0;top:0;height:45%;
  background:linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 100%);
  border-radius:5px 5px 0 0;
  pointer-events:none;
  z-index:1;
}
/* Animated shimmer — diagonal light sweep across the surface */
.cta-guide::after{
  content:"";
  position:absolute;top:0;left:-75%;width:55%;height:100%;
  background:linear-gradient(115deg,
    transparent 0%,
    rgba(255,255,255,0) 35%,
    rgba(255,255,255,.55) 50%,
    rgba(255,255,255,0) 65%,
    transparent 100%);
  transform:skewX(-18deg);
  animation:cta-shimmer 5s ease-in-out infinite;
  animation-delay:1.2s;
  pointer-events:none;
  z-index:2;
  mix-blend-mode:overlay;
}
@keyframes cta-shimmer{
  0%   { left:-75%; }
  25%  { left:140%; }
  100% { left:140%; }
}
.cta-guide:hover{
  background:
    linear-gradient(180deg,
      #f5db9f 0%,
      #e0bb84 18%,
      #d2ad74 50%,
      #c19a62 82%,
      #aa8650 100%);
  transform:translateY(-1px);
  filter:brightness(1.04);
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 -1px 0 rgba(0,0,0,.18) inset,
    0 0 0 1px rgba(0,0,0,.15),
    0 6px 16px rgba(0,0,0,.32),
    0 14px 36px rgba(184,144,80,.32);
}
.cta-guide > *{position:relative;z-index:3}
.cta-guide:active{transform:translateY(0)}
.cta-guide .cta-guide-icon{width:14px;height:14px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;opacity:.85}
.cta-guide .cta-guide-icon svg{width:14px;height:14px;stroke-width:2.4}
.cta-guide-pulse{display:none}

/* Caption stack below CTA — single italic line, prominent */
.cta-guide-stack{display:inline-flex;flex-direction:column;align-items:flex-end;gap:8px}
.cta-guide-tagline{
  display:flex;flex-direction:column;align-items:flex-end;
  font-family:'Cormorant Garamond',serif;
  line-height:1.2;
  padding-right:4px;
}
.cta-guide-tagline-eyebrow{display:none}
.cta-guide-tagline-text{
  font-family:'Cormorant Garamond',serif;
  font-size:16px;font-style:italic;font-weight:500;
  color:var(--gold-on-dark);
  letter-spacing:.01em;
  text-shadow:0 1px 2px rgba(0,0,0,.4);
}
.cta-guide-flags{display:none}
@keyframes cta-pulse{
  0%{box-shadow:0 0 0 0 rgba(26,42,28,.6)}
  70%{box-shadow:0 0 0 8px rgba(26,42,28,0)}
  100%{box-shadow:0 0 0 0 rgba(26,42,28,0)}
}
.cta-guide .label-full{display:inline}
.cta-guide .label-short{display:none}

/* Secondary header link: Visit Main Site */




/* Back to Listings — appears in header only post-submit on guide page */
.cta-back-listings{
  display:inline-flex;align-items:center;gap:6px;
  color:rgba(255,255,255,.92);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  padding:8px 14px;border-radius:3px;
  border:1px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.06);
  text-decoration:none;
  transition:all .2s;
}
.cta-back-listings:hover{
  background:rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.6);
  color:white;
}
.cta-back-listings svg{width:13px;height:13px}
@media (max-width:900px){
  .cta-back-listings{padding:7px 10px;font-size:9.5px;letter-spacing:.08em;gap:4px}
  .cta-back-listings svg{width:11px;height:11px}
}

/* Mobile */
@media (max-width:900px){
  .header-inner{padding:0 16px}
  .header-brand-row{padding:12px 0 10px}
  .header-nav-row{padding:10px 0;gap:8px;flex-wrap:nowrap}
  .brand-logos img.logo-elements{height:34px}
  .brand-logos img.logo-exp{height:24px}
  .brand-logos{gap:10px}
  .brand-divider{display:none !important}
  /* Refined badge: hide full text, keep the maple-leaf disc + short label */
  .canadian-pill{padding:5px 10px 5px 7px;gap:7px}
  .canadian-pill .flags{width:18px;height:12px}
  .canadian-pill span.txt{font-size:9.5px;letter-spacing:.12em}
  .canadian-pill span.txt strong{letter-spacing:.12em}
  .header-nav{gap:0;flex:1;overflow-x:auto;scrollbar-width:none}
  .header-nav::-webkit-scrollbar{display:none}
  .nav-link{padding:8px 11px;font-size:11.5px;letter-spacing:.08em;white-space:nowrap}
  .nav-link.coming{display:none}
  .cta-guide{padding:9px 13px;font-size:10.5px;letter-spacing:.08em;gap:6px}
  .cta-guide svg{width:12px;height:12px}
  .cta-guide .label-full{display:none}
  .cta-guide .label-short{display:inline}
  .cta-guide-tagline{display:none}
}

/* ── HERO PHOTO GRID ── */

/* ───── Footer (matches main site exactly) ───── */
.site-footer{
  background:linear-gradient(180deg, #1a2818 0%, #0e1a12 100%);
  color:rgba(255,255,255,.78);
  padding:60px 24px 24px;
  position:relative;
}
.site-footer::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg, transparent 0%, rgba(184,149,106,.40) 25%, rgba(184,149,106,.40) 75%, transparent 100%);
}
.footer-inner{max-width:1240px;margin:0 auto}
.footer-grid{
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr 1.3fr 0.9fr;
  gap:40px;
  margin-bottom:42px
}
.footer-brand-name{
  /* Legacy text styling — kept in case it's referenced elsewhere.
     The footer now uses .footer-logo-elements (image) instead. */
  font-family:"Cormorant Garamond",serif;
  font-size:24px;
  font-weight:400;
  color:#fff;
  margin-bottom:10px;
  line-height:1.2;
}
.footer-brand-name em{font-style:italic;color:var(--gold,#c9a36a);font-weight:400}

/* Footer logo image — replaces the old text brand name */
.footer-brand-link{
  display:inline-block;
  margin-bottom:14px;
  text-decoration:none;
}
.footer-logo-elements{
  height:56px;
  width:auto;
  filter:drop-shadow(0 1px 4px rgba(0,0,0,0.4));
  cursor:pointer;
  transition:opacity 0.2s;
}
.footer-logo-elements:hover{opacity:0.85}
@media (max-width:760px){
  .footer-logo-elements{height:46px}
}
.footer-brand-tagline{
  font-size:13.5px;line-height:1.6;
  color:rgba(255,255,255,.62);
  max-width:280px;
  margin-bottom:18px;
}
.footer-brand-exp{
  display:inline-flex;align-items:center;gap:8px;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold,#c9a36a);font-weight:600;
  padding:6px 12px;
  background:rgba(184,149,106,.10);
  border:1px solid rgba(184,149,106,.25);
  border-radius:4px;
}
.footer-col h4{
  font-family:"Jost",sans-serif;
  font-size:11px;letter-spacing:.28em;text-transform:uppercase;
  color:#fff;font-weight:600;
  margin-bottom:18px;
}
.footer-col ul{list-style:none;padding:0;margin:0}
.footer-col li{margin-bottom:10px}
.footer-col a{
  color:rgba(255,255,255,.70);
  text-decoration:none;
  font-size:14px;
  transition:color .18s ease;
}
.footer-col a:hover{color:var(--gold,#c9a36a)}
.footer-contact-item{
  display:flex;align-items:flex-start;gap:10px;
  margin-bottom:14px;
  font-size:14px;
  color:rgba(255,255,255,.78);
}
.footer-contact-item svg{
  width:16px;height:16px;flex-shrink:0;
  color:var(--gold,#c9a36a);
  margin-top:2px;
}
.footer-contact-item a{color:inherit;text-decoration:none;transition:color .18s ease}
.footer-contact-item a:hover{color:var(--gold,#c9a36a)}
.footer-contact-item strong{display:block;font-weight:500;color:#fff;font-size:13px;margin-bottom:2px}

/* Actions column: gold CTA + back-to-top */
.footer-actions{
  display:flex;flex-direction:column;gap:12px;align-items:stretch;
  padding-top:4px;
}
.footer-cta{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:linear-gradient(180deg,
    #f0d29a 0%, #d8b27b 18%, #c9a36a 50%, #b89058 82%, #a07c4a 100%);
  color:#1a2a1c;
  padding:13px 18px;border-radius:5px;
  font-family:"Jost",sans-serif;
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;
  text-decoration:none;
  border:1px solid rgba(255,255,255,.35);
  transition:transform .18s ease, box-shadow .25s ease, filter .25s ease;
  cursor:pointer;white-space:nowrap;
  box-shadow:
    0 1px 0 rgba(255,255,255,.55) inset,
    0 -1px 0 rgba(0,0,0,.18) inset,
    0 0 0 1px rgba(0,0,0,.15),
    0 4px 12px rgba(0,0,0,.28),
    0 10px 30px rgba(184,144,80,.25);
  text-shadow:0 1px 0 rgba(255,255,255,.4);
  overflow:hidden;
}
.footer-cta::before{
  content:"";
  position:absolute;left:0;right:0;top:0;height:45%;
  background:linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 100%);
  border-radius:5px 5px 0 0;
  pointer-events:none;
}
.footer-cta:hover{
  transform:translateY(-1px);
  background:linear-gradient(180deg,
    #f5db9f 0%, #e0bb84 18%, #d2ad74 50%, #c19a62 82%, #aa8650 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.55) inset,
    0 -1px 0 rgba(0,0,0,.18) inset,
    0 0 0 1px rgba(0,0,0,.15),
    0 6px 16px rgba(0,0,0,.32),
    0 12px 36px rgba(184,144,80,.35);
}
.footer-cta > *{position:relative;z-index:1}
.footer-totop{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 18px;
  background:transparent;
  border:1px solid rgba(255,255,255,.18);
  border-radius:5px;
  color:rgba(255,255,255,.78);
  font-family:"Jost",sans-serif;
  font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;
  text-decoration:none;
  cursor:pointer;
  transition:all .18s ease;
}
.footer-totop:hover{
  color:#fff;
  border-color:rgba(184,149,106,.55);
}
.footer-totop svg{width:13px;height:13px}

.footer-divider{
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
  margin:0 0 22px;
}
.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;
  font-size:12px;color:rgba(255,255,255,.50);
  flex-wrap:wrap;gap:14px;
}
.footer-bottom a{color:rgba(255,255,255,.65);text-decoration:none;transition:color .18s ease}
.footer-bottom a:hover{color:var(--gold,#c9a36a)}
.footer-bottom-links{display:flex;gap:22px;flex-wrap:wrap}

@media (max-width:1100px){
  .footer-grid{grid-template-columns:1.3fr 1fr 1fr 1.3fr;gap:36px}
  .footer-actions{grid-column:1 / -1;flex-direction:row;justify-content:flex-start;flex-wrap:wrap;gap:12px;padding-top:8px}
  .footer-cta,.footer-totop{flex:0 0 auto}
}
@media (max-width:960px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:36px}
  .footer-actions{grid-column:1 / -1}
  .footer-bottom{flex-direction:column;align-items:flex-start}
}
@media (max-width:560px){
  .footer-grid{grid-template-columns:1fr;gap:32px}
  .site-footer{padding:48px 22px 22px}
  .footer-actions{flex-direction:column}
  .footer-cta,.footer-totop{width:100%}
}


/* ═══════════════════════════════════════════════════════════════════
   BLOG-SPECIFIC CONTENT STYLES
   Hero, post cards, article body, CTAs.
   ═══════════════════════════════════════════════════════════════════ */

/* ───── Blog index hero ───── */
.blog-hero{
  position:relative;
  background:linear-gradient(168deg, #1f3322 0%, #2b3f2c 100%);
  color:#fff;
  padding:100px 32px 120px;
  text-align:center;
  overflow:hidden;
  isolation:isolate;
}
.blog-hero-bg{
  position:absolute;inset:0;z-index:-2;
  background-image:url('https://images.unsplash.com/photo-1510097467424-192d713fd8b2?w=1920&h=1080&fit=crop&q=85');
  background-size:cover;
  background-position:center;
  opacity:.42;
  filter:saturate(.85);
}
.blog-hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(ellipse 1200px 600px at 50% 50%, rgba(31,51,34,.35) 0%, rgba(14,26,18,.75) 80%),
    linear-gradient(180deg, rgba(14,26,18,.55) 0%, rgba(14,26,18,.45) 50%, rgba(250,250,247,.6) 100%);
}
.blog-hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:120px;z-index:-1;
  background:linear-gradient(180deg, transparent 0%, var(--off-white, #fafaf7) 100%);
}
.blog-hero-inner{max-width:880px;margin:0 auto;position:relative;z-index:1}
.blog-hero-eyebrow{
  font-size:12px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--gold-on-dark);font-weight:600;margin-bottom:18px;
  text-shadow:0 1px 4px rgba(0,0,0,.4);
}
.blog-hero h1{
  font-family:"Cormorant Garamond",serif;
  font-size:72px;line-height:1.05;font-weight:400;
  margin-bottom:22px;letter-spacing:-.5px;
  text-shadow:0 2px 12px rgba(0,0,0,.35);
}
.blog-hero h1 em{color:var(--gold-on-dark);font-style:italic}
.blog-hero-sub{
  font-size:17px;line-height:1.65;color:rgba(255,255,255,.92);
  max-width:680px;margin:0 auto;
  text-shadow:0 1px 8px rgba(0,0,0,.35);
}

/* ───── Posts section ───── */
.blog-posts-section{
  max-width:1240px;margin:0 auto;
  padding:20px 32px 80px;
  background:var(--off-white, #fafaf7);
}
.blog-posts-title{
  font-family:"Cormorant Garamond",serif;
  font-size:42px;font-weight:500;color:var(--dark);
  text-align:center;margin:30px 0 42px;
  letter-spacing:-.3px;
}
.blog-posts{
  display:grid;grid-template-columns:repeat(3, 1fr);gap:32px;
}

/* ───── Post cards (matches screenshot reference) ───── */
.blog-post-card{
  background:#fff;
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 2px 8px rgba(26,40,24,.06), 0 1px 2px rgba(26,40,24,.04);
  transition:transform .25s ease, box-shadow .25s ease;
  display:flex;flex-direction:column;
}
.blog-post-card:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 40px rgba(26,40,24,.12), 0 4px 10px rgba(26,40,24,.06);
}
.blog-post-card a{color:inherit;text-decoration:none;display:flex;flex-direction:column;height:100%}
.blog-post-card-img{
  aspect-ratio:4/3;overflow:hidden;background:var(--green-light, #e8efe6);
  border-radius:10px 10px 0 0;
}
.blog-post-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.blog-post-card:hover .blog-post-card-img img{transform:scale(1.04)}
.blog-post-card-body{padding:24px 26px 28px;display:flex;flex-direction:column;flex:1}
.blog-post-card h2{
  font-family:"Cormorant Garamond",serif;
  font-size:24px;line-height:1.22;font-weight:500;color:var(--green-dark);
  margin-bottom:16px;flex:1;
}
.blog-post-card-meta{
  font-size:13px;color:var(--warm-gray);
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:auto;
}
.blog-post-card-meta time{color:var(--warm-gray)}
.blog-post-card-meta .meta-sep{color:var(--gold);opacity:.7}

@media (max-width:1024px){.blog-posts{grid-template-columns:repeat(2, 1fr)}}
@media (max-width:680px){
  .blog-hero{padding:70px 22px 90px}
  .blog-hero h1{font-size:48px}
  .blog-hero-sub{font-size:15.5px}
  .blog-posts-section{padding:10px 22px 60px}
  .blog-posts-title{font-size:32px;margin:20px 0 30px}
  .blog-posts{grid-template-columns:1fr;gap:24px}
  .blog-post-card h2{font-size:21px}
}

/* ═══════════════════════════════════════════════════════════════════
   BLOG POST — article layout
   ═══════════════════════════════════════════════════════════════════ */
.post-hero{
  position:relative;
  background:#0e1a12;
  color:#fff;
  min-height:520px;
  display:flex;align-items:flex-end;
  overflow:hidden;
}
.post-hero-img{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  z-index:1;
}
.post-hero-img::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(14,26,18,.35) 0%,
    rgba(14,26,18,.55) 40%,
    rgba(14,26,18,.92) 100%);
}
.post-hero-inner{
  position:relative;z-index:2;
  max-width:880px;margin:0 auto;
  padding:60px 32px 50px;width:100%;
}
.post-hero-cat{
  display:inline-block;
  font-size:11px;letter-spacing:.26em;text-transform:uppercase;font-weight:600;
  color:var(--gold-on-dark);
  padding:6px 14px;
  background:rgba(184,149,106,.12);
  border:1px solid rgba(184,149,106,.35);
  border-radius:4px;
  margin-bottom:20px;
}
.post-hero h1{
  font-family:"Cormorant Garamond",serif;
  font-size:54px;line-height:1.08;font-weight:400;
  letter-spacing:-.5px;margin-bottom:22px;color:#fff;
}
.post-hero h1 em{color:var(--gold-on-dark);font-style:italic}
.post-hero-meta{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  font-size:13.5px;color:rgba(255,255,255,.78);
}
.post-hero-meta .author{
  display:inline-flex;align-items:center;gap:10px;
  font-weight:600;color:#fff;
}
.post-hero-meta .author-avatar{
  width:32px;height:32px;border-radius:50%;
  background:linear-gradient(135deg,var(--gold-light),var(--gold));
  display:inline-flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;color:#1a2a1c;
}
.post-hero-meta .dot{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.5}

.post-body{
  max-width:760px;margin:0 auto;
  padding:60px 32px 80px;
  font-size:17px;line-height:1.78;color:#2a2a26;
  background:var(--off-white, #fafaf7);
}
.post-body > .lead{
  font-size:21px;line-height:1.6;color:var(--dark);font-weight:400;
  margin-bottom:36px;padding-bottom:32px;
  border-bottom:1px solid var(--border);
  font-family:"Cormorant Garamond",serif;font-style:italic;
}
.post-body h2{
  font-family:"Cormorant Garamond",serif;
  font-size:34px;line-height:1.18;font-weight:500;
  color:var(--dark);
  margin:46px 0 18px;letter-spacing:-.3px;
}
.post-body h2:first-child{margin-top:0}
.post-body h3{
  font-family:"Jost",sans-serif;
  font-size:20px;line-height:1.3;font-weight:600;
  color:var(--dark);
  margin:36px 0 14px;
}
.post-body p{margin-bottom:20px}
.post-body strong{color:var(--dark);font-weight:600}
.post-body em{font-style:italic}
.post-body a{
  color:var(--green-dark);text-decoration:underline;
  text-decoration-color:rgba(43,63,44,.3);
  text-underline-offset:3px;transition:all .2s ease;
}
.post-body a:hover{color:var(--gold);text-decoration-color:var(--gold)}

.post-body ul, .post-body ol{margin:0 0 24px 22px;padding:0}
.post-body li{margin-bottom:10px;padding-left:6px}
.post-body ul li::marker{color:var(--gold)}
.post-body ol li::marker{color:var(--gold);font-weight:700}

.post-body blockquote{
  margin:32px 0;padding:24px 28px;
  background:var(--green-light);
  border-left:3px solid var(--gold);
  border-radius:0 5px 5px 0;
  font-family:"Cormorant Garamond",serif;font-style:italic;
  font-size:20px;line-height:1.55;color:var(--green-dark);
}
.post-body blockquote p:last-child{margin-bottom:0}

.post-body .stat-grid{
  display:grid;grid-template-columns:repeat(3, 1fr);gap:14px;
  margin:32px 0;
}
.post-body .stat-card{
  background:#fff;border:1px solid var(--border);border-radius:6px;
  padding:22px 18px;text-align:center;
}
.post-body .stat-card .stat-value{
  font-family:"Cormorant Garamond",serif;
  font-size:38px;font-weight:500;color:var(--green-dark);line-height:1;
  margin-bottom:8px;
}
.post-body .stat-card .stat-label{
  font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--warm-gray);font-weight:600;
}

.post-body .callout{
  margin:36px 0;padding:28px 30px;
  background:linear-gradient(135deg, #1f3322 0%, #16241a 100%);
  color:#fff;border-radius:8px;
  border:1px solid var(--surface-gold-line);
  position:relative;overflow:hidden;
}
.post-body .callout::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--gold-on-dark),transparent);
}
.post-body .callout h3{color:var(--gold-on-dark);margin:0 0 10px;font-size:18px}
.post-body .callout p{color:rgba(255,255,255,.85);margin-bottom:0}
.post-body .callout p + p{margin-top:14px}

/* ───── Mid-article CTA ───── */
.post-cta{
  margin:50px 0;
  background:linear-gradient(135deg,#fafaf7 0%, #e8efe6 100%);
  border:1px solid var(--border);border-radius:10px;
  padding:36px 32px;text-align:center;
  position:relative;overflow:hidden;
}
.post-cta::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg, var(--gold-light), var(--gold), var(--gold-light));
}
.post-cta-eyebrow{
  font-size:11px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold);font-weight:700;margin-bottom:8px;
}
.post-cta h3{
  font-family:"Cormorant Garamond",serif;
  font-size:30px;line-height:1.2;font-weight:500;color:var(--dark);
  margin-bottom:12px;
}
.post-cta p{
  font-size:15.5px;color:var(--warm-gray);
  max-width:520px;margin:0 auto 22px;line-height:1.6;
}
.post-cta-buttons{display:inline-flex;gap:12px;flex-wrap:wrap;justify-content:center}
.btn-gold{
  display:inline-flex;align-items:center;gap:8px;
  background:linear-gradient(180deg, #f0d29a 0%, #d8b27b 18%, #c9a36a 50%, #b89058 82%, #a07c4a 100%);
  color:#1a2a1c;
  padding:13px 24px;border-radius:5px;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  text-decoration:none;
  border:1px solid rgba(255,255,255,.35);
  transition:transform .18s ease, box-shadow .25s ease;
  box-shadow:
    0 1px 0 rgba(255,255,255,.55) inset,
    0 -1px 0 rgba(0,0,0,.18) inset,
    0 4px 12px rgba(0,0,0,.20);
  text-shadow:0 1px 0 rgba(255,255,255,.4);
}
.btn-gold:hover{transform:translateY(-1px)}
.btn-outline{
  display:inline-flex;align-items:center;gap:8px;
  background:transparent;color:var(--green-dark);
  padding:13px 24px;border-radius:5px;
  border:1px solid var(--green-dark);
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  text-decoration:none;
  transition:all .18s ease;
}
.btn-outline:hover{background:var(--green-dark);color:#fff}

/* ───── Post footer: share + author bio ───── */
.post-footer{
  max-width:760px;margin:0 auto;
  padding:0 32px 60px;
  background:var(--off-white, #fafaf7);
}
.post-share{
  display:flex;align-items:center;gap:14px;
  padding:20px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  margin-bottom:30px;
}
.post-share-label{
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--warm-gray);font-weight:600;
}
.post-share-links{display:flex;gap:8px;margin-left:auto}
.post-share-links a{
  width:38px;height:38px;border-radius:50%;
  border:1px solid var(--border);
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--warm-gray);transition:all .2s ease;
}
.post-share-links a:hover{border-color:var(--gold);color:var(--gold)}
.post-share-links svg{width:16px;height:16px}

.author-bio{
  display:flex;gap:22px;align-items:flex-start;
  padding:30px 0;
}
.author-bio-avatar{
  width:72px;height:72px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--gold-light),var(--gold));
  display:inline-flex;align-items:center;justify-content:center;
  font-family:"Cormorant Garamond",serif;
  font-size:30px;font-weight:600;color:#1a2a1c;
}
.author-bio-body{flex:1}
.author-bio-name{
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);font-weight:700;margin-bottom:4px;
}
.author-bio-body h4{
  font-family:"Cormorant Garamond",serif;
  font-size:24px;font-weight:500;color:var(--dark);margin-bottom:10px;
}
.author-bio-body p{
  font-size:14.5px;color:var(--warm-gray);line-height:1.6;margin-bottom:12px;
}
.author-bio-link{
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  color:var(--green-dark);text-decoration:none;
}
.author-bio-link:hover{color:var(--gold)}

@media (max-width:680px){
  .post-hero{min-height:420px}
  .post-hero-inner{padding:40px 22px 36px}
  .post-hero h1{font-size:36px}
  .post-body{padding:40px 22px 60px;font-size:16px}
  .post-body h2{font-size:28px}
  .post-body h3{font-size:18px}
  .post-body .stat-grid{grid-template-columns:1fr;gap:10px}
  .post-cta{padding:28px 22px}
  .post-cta h3{font-size:24px}
  .post-footer{padding:0 22px 50px}
  .author-bio{flex-direction:column;gap:16px}
}

/* Markets dropdown menu — visible when toggled */
.nav-dropdown{position:relative}
.nav-dropdown-menu{
  display:none;
  position:absolute;top:100%;left:0;
  background:#1a2a1c;border:1px solid var(--surface-gold-line);
  border-radius:6px;padding:8px;
  min-width:280px;margin-top:6px;z-index:1001;
  box-shadow:0 12px 36px rgba(0,0,0,.4);
}
.nav-dropdown.open .nav-dropdown-menu{display:block}
.nav-dropdown-item{
  display:flex;flex-direction:column;gap:2px;
  padding:10px 14px;border-radius:4px;
  text-decoration:none;color:rgba(255,255,255,.85);
  transition:background .15s ease;
}
.nav-dropdown-item:hover{background:rgba(255,255,255,.06);color:#fff}
.nav-market-name{font-size:13.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.nav-market-tagline{font-size:11.5px;color:rgba(255,255,255,.55);letter-spacing:.04em}
.nav-chevron{width:11px;height:11px;margin-left:5px;vertical-align:middle}
