/* ═══════════════════════════════════════════════════════════════
   BLOG.CSS — /blog (index + article pages) page-scoped redesign
   layer, loaded after styles.min.css. Brings the blog into the same
   visual language as the rest of the redesign: Big Shoulders Display
   type, orange accent, black atmosphere + grain. Component layout
   (cards, featured post, article body) stays in each page's own
   inline <style> — this layer only resets the typographic/atmosphere
   foundation underneath it, matching the work.css pattern.
   ═══════════════════════════════════════════════════════════════ */

body {
  --cream: #F3ECDF;
  --accent: var(--orange);
  --ink: #0c0a08;
  --display: 'Big Shoulders Display', Impact, sans-serif;
  --mono: 'Space Mono', 'Space Grotesk', monospace;
  --max: 100%;
  background: #000 !important;
  background-image: none !important;
  color: var(--cream);
}
body::after {
  display: block !important; content: ''; position: fixed; inset: 0; z-index: -1;
  pointer-events: none; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 140px 140px;
}
body::before {
  content: '';
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(ellipse 55% 40% at 10% 8%, rgba(247,147,30,.16), transparent),
    radial-gradient(ellipse 50% 38% at 92% 14%, rgba(233,30,99,.14), transparent),
    radial-gradient(ellipse 55% 42% at 50% 88%, rgba(47,167,167,.12), transparent);
}
main, .footer { color: var(--cream); }
main p { color: rgba(243,236,223,.62); }

/* Shared --max (1140px) caps this page's sections — uncap so it matches
   the full-width redesigned pages elsewhere on the site. */
.wrap { max-width: 100%; }

main h1, main h2 {
  font-family: var(--display); font-weight: 900; text-transform: uppercase;
  letter-spacing: 0; color: var(--cream);
}
.eyebrow { color: var(--accent); }

/* ── NAV / FOOTER: match the new palette (mirrors web-design-calgary.css) ── */
.nav { background: transparent; border-bottom: 1px solid transparent; height: 96px; }
.nav.scrolled { background: rgba(0,0,0,.9); backdrop-filter: blur(16px); border-color: rgba(243,236,223,.1); }
.nav-inner { height: 96px; align-items: center; padding-left: clamp(12px, 2vw, 20px); }
.nav-brand img { height: 44px; width: 44px; }
.nav-brand-word { background: none; -webkit-text-fill-color: currentColor; color: var(--cream); font-family: var(--display); font-weight: 900; letter-spacing: .04em; }
.nav-links { gap: clamp(1rem, 3vw, 2.4rem); }
.nav-links a {
  display: flex; flex-direction: column; line-height: 1.05;
  font-family: var(--display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(.85rem, 1.3vw, 1.05rem);
  color: rgba(243,236,223,.55);
}
.nav-links a span:first-child { color: rgba(243,236,223,.35); font-size: .8em; }
.nav-links a:hover, .nav-links a.active { color: var(--cream); }
.nav-links a:hover span:first-child, .nav-links a.active span:first-child { color: var(--accent); }
.nav-links a::after { display: none; }
.nav-cta { background: var(--accent); border: 1px solid var(--accent); padding: .6rem 1.2rem; font-family: var(--mono); text-transform: uppercase; font-size: .7rem; font-weight: 700; letter-spacing: .08em; color: var(--ink); transition: background .2s ease, color .2s ease; }
.nav-cta:hover { background: transparent; color: var(--cream); }
.footer { border-color: rgba(243,236,223,.1) !important; }
.footer-col-heading { font-family: var(--mono) !important; color: rgba(243,236,223,.5); }

/* ── ARTICLE PAGES: title/headings upgraded to the new display face ── */
.article-title {
  font-family: var(--display); font-weight: 900; text-transform: uppercase; letter-spacing: 0;
  line-height: .96;
}
.article-body h2, .article-body h3 { font-family: var(--display); font-weight: 900; text-transform: uppercase; letter-spacing: 0; }