/* post-style.css — brutalist editorial design overlay for blog post pages
   Loaded via: <link rel="stylesheet" href="../post-style.css">
   Overrides nav/header/footer only. Post body (.post-body) untouched. */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Playfair+Display:ital,wght@0,700;0,900;1,700&family=Inter:wght@300;400;500;600&display=swap');

:root {
  --ps-bg:          #f4f4f0;
  --ps-surface-2:   #ebebeb;
  --ps-accent:      #f97316;
  --ps-accent-dim:  #ea6c0a;
  --ps-text:        #0a0a0a;
  --ps-text-dim:    #555;
  --ps-text-mute:   #d8d8d4;
  --ps-rule:        1px solid #1a1a1a;
  --ps-rule-thick:  3px solid #0a0a0a;
  --ps-font-display: 'Bebas Neue', sans-serif;
  --ps-font-serif:   'Playfair Display', Georgia, serif;
  --ps-font-sans:    'Inter', system-ui, sans-serif;
}

body {
  background: var(--ps-bg) !important;
}

/* ── Nav ── */
.blog-nav {
  position: fixed !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  z-index: 100 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 1.1rem 2.5rem !important;
  background: rgba(244,244,240,0.96) !important;
  backdrop-filter: blur(12px) !important;
  border-bottom: var(--ps-rule-thick) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.blog-nav .logo,
.blog-nav a.logo {
  font-family: var(--ps-font-display) !important;
  font-size: 1.4rem !important;
  letter-spacing: 0.06em !important;
  color: var(--ps-text) !important;
  text-decoration: none !important;
  font-weight: 400 !important;
  background: none !important;
}

.blog-nav .back,
.blog-nav a.back {
  font-family: var(--ps-font-sans) !important;
  font-size: 0.68rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--ps-text-dim) !important;
  text-decoration: none !important;
  transition: color 0.2s !important;
  background: none !important;
}

.blog-nav .back:hover,
.blog-nav a.back:hover {
  color: var(--ps-accent) !important;
}

/* ── Blog wrap — push down past fixed nav ── */
.blog-wrap {
  max-width: 760px !important;
  margin: 0 auto !important;
  padding-top: 100px !important;
  padding-left: 2rem !important;
  padding-right: 2rem !important;
  padding-bottom: 6rem !important;
}

/* ── Post header ── */
.post-header,
header.post-header {
  margin-bottom: 3rem !important;
  padding-bottom: 2.5rem !important;
  border-bottom: var(--ps-rule-thick) !important;
}

.post-header .post-meta,
header.post-header .post-meta {
  font-family: var(--ps-font-sans) !important;
  font-size: 0.65rem !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--ps-accent) !important;
  margin-bottom: 1.25rem !important;
}

.post-header h1,
header.post-header h1 {
  font-family: var(--ps-font-serif) !important;
  font-size: clamp(1.8rem, 4vw, 2.8rem) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  color: var(--ps-text) !important;
  letter-spacing: -0.01em !important;
}

.post-hero {
  width: 100% !important;
  max-height: 460px !important;
  object-fit: cover !important;
  display: block !important;
  margin-bottom: 2.5rem !important;
  border: var(--ps-rule-thick) !important;
}

@media (max-width: 640px) {
  .blog-nav { padding: 1rem 1.25rem !important; }
  .blog-wrap { padding: 80px 1.25rem 4rem !important; }
}