/* Blog additions. Homepage rules apply only after a published post adds .hero-hybrid
   and this stylesheet. Blog and article pages use body.blog-page. */

.hero.hero-hybrid .hero-shell {
  width: min(100% - 32px, 1520px);
  grid-template-columns: minmax(300px, 1fr) 520px minmax(280px, 0.95fr);
  gap: clamp(16px, 2vw, 28px);
  align-items: center;
}
.hero.hero-hybrid .hero-copy { max-width: none; }
.hero.hero-hybrid .hero-visual { justify-content: center; }
.hero.hero-hybrid .hero-visual::before { right: auto; left: 11%; }
.hero.hero-hybrid .hero-visual img {
  width: 520px;
  max-width: 100%;
  max-height: min(48vh, 440px);
  object-position: center;
}
.hero.hero-hybrid .hero-blog {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  max-height: min(48vh, 440px);
  overflow: hidden;
  padding: 18px 16px 16px;
  border-radius: 22px;
  background: linear-gradient(165deg, #274840, var(--house-green) 62%, #152924);
  color: var(--on-dark);
  box-shadow: var(--shadow-soft);
}
.hero.hero-hybrid .hero-blog .eyebrow,
.hero.hero-hybrid .hero-blog h2,
.hero.hero-hybrid .hero-blog-more { flex-shrink: 0; }
.hero.hero-hybrid .hero-blog-list {
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overscroll-behavior: contain;
  scrollbar-color: rgba(255, 255, 255, 0.4) transparent;
}
.hero.hero-hybrid .hero-blog .eyebrow { color: var(--gold-bright); margin: 0; }
.hero.hero-hybrid .hero-blog h2 {
  margin: 0 0 4px;
  color: var(--on-dark);
  font-family: Fraunces, Georgia, serif;
  font-size: 26px;
  letter-spacing: -0.03em;
  line-height: 1.15;
}
.hero.hero-hybrid .hero-blog-item {
  display: block;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: inherit;
  text-decoration: none;
}
.hero.hero-hybrid .hero-blog-item .meta {
  display: block;
  margin-bottom: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-bright);
}
.hero.hero-hybrid .hero-blog-item strong {
  display: block;
  font-size: 14px;
  line-height: 1.3;
  font-weight: 650;
}
.hero.hero-hybrid .hero-blog-more {
  flex-shrink: 0;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-height: 64px;
  margin-top: 2px;
  padding: 16px 22px;
  border-radius: 16px;
  background: linear-gradient(145deg, var(--gold-bright), var(--gold) 55%, #b89045);
  color: var(--house-green);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 16px 32px rgba(30, 57, 50, 0.28);
}
.hero.hero-hybrid .hero-blog-more:hover,
.hero.hero-hybrid .hero-blog-more:focus-visible {
  color: var(--house-green);
  transform: translateY(-2px);
}
@media (max-width: 1180px) {
  .hero.hero-hybrid .hero-shell { grid-template-columns: 1fr; }
  .hero.hero-hybrid .hero-visual { order: 0; justify-content: center; }
  .hero.hero-hybrid .hero-blog { order: 1; max-height: min(48vh, 440px); }
  .hero.hero-hybrid .hero-visual img {
    width: min(100%, 520px);
    max-height: min(48vh, 440px);
  }
}
@media (max-width: 820px) {
  .nav a.nav-keep { display: inline-flex; }
}

body.blog-page {
  margin: 0;
  font-family: "Plus Jakarta Sans", "Helvetica Neue", sans-serif;
  color: var(--text, rgba(30, 57, 50, 0.92));
  background: var(--cream, #F2F0EB);
  line-height: 1.5;
  letter-spacing: -0.015em;
}
body.blog-page :root, body.blog-page {
  --house-green: #1E3932;
  --starbucks-green: #006241;
  --accent-green: #00754A;
  --cream: #F2F0EB;
  --ceramic: #EDEBE9;
  --card: #FFFFFF;
  --gold: #CBA258;
  --gold-bright: #E8C46A;
  --gold-wash: #FAF6EE;
  --ink: #1E3932;
  --text: rgba(30, 57, 50, 0.92);
  --text-soft: rgba(30, 57, 50, 0.62);
  --text-faint: rgba(30, 57, 50, 0.42);
  --on-dark: #FFFFFF;
  --radius-pill: 999px;
  --shadow-soft: 0 10px 30px rgba(30, 57, 50, 0.10);
  --shadow-lift: 0 18px 40px rgba(30, 57, 50, 0.14);
  --max: 1120px;
  --header-h: 64px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}
body.blog-page img { max-width: 100%; display: block; }
body.blog-page a { color: inherit; text-decoration: none; }
body.blog-page .site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  height: var(--header-h);
  display: flex; align-items: center;
  background: rgba(242, 240, 235, 0.88);
  border-bottom: 1px solid rgba(30, 57, 50, 0.08);
}
body.blog-page .site-header-inner {
  width: min(100% - 40px, var(--max));
  margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
body.blog-page .logo-link { display: flex; align-items: center; gap: 10px; }
body.blog-page .logo-link img.wordmark { height: 28px; width: auto; }
body.blog-page .logo-link img.mark { width: 36px; height: 36px; border-radius: 10px; }
body.blog-page .nav { display: flex; align-items: center; gap: 6px; }
body.blog-page .nav a {
  font-size: 13px; font-weight: 600;
  padding: 8px 12px; border-radius: var(--radius-pill);
  color: var(--text-soft);
}
body.blog-page .nav a.is-current { color: var(--ink); }
body.blog-page .nav .nav-cta {
  background: linear-gradient(135deg, var(--starbucks-green), var(--accent-green));
  color: var(--on-dark);
  padding: 10px 16px;
}
body.blog-page .page-hero {
  width: min(100% - 40px, var(--max));
  margin: 0 auto;
  padding: calc(var(--header-h) + 28px) 0 12px;
}
body.blog-page .page-hero h1 {
  margin: 0 0 10px;
  font-family: Fraunces, Georgia, serif;
  font-size: clamp(32px, 5vw, 48px);
  letter-spacing: -0.03em;
  color: var(--ink);
  max-width: 18ch;
}
body.blog-page .page-hero p {
  margin: 0;
  max-width: 46ch;
  color: var(--text-soft);
  font-size: 16px;
}
body.blog-page .eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--starbucks-green);
  margin-bottom: 6px;
}
body.blog-page .eyebrow .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold);
}
body.blog-page .section {
  width: min(100% - 40px, var(--max));
  margin: 0 auto 28px;
}
body.blog-page .split-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  gap: 16px;
  align-items: start;
}
body.blog-page .split-layout.single { grid-template-columns: 1fr; }
body.blog-page .lead-story {
  border-radius: 24px;
  overflow: hidden;
  position: sticky;
  top: calc(var(--header-h) + 12px);
  min-height: 520px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: var(--on-dark);
  background:
    linear-gradient(180deg, rgba(30, 57, 50, 0.05) 10%, rgba(30, 57, 50, 0.88) 100%),
    var(--lead-image, none) center / cover no-repeat,
    linear-gradient(165deg, #274840, var(--house-green));
  box-shadow: var(--shadow-soft);
}
body.blog-page .lead-story .post-body { padding: 28px; }
body.blog-page .lead-story h3,
body.blog-page .lead-story .post-meta { color: var(--on-dark); }
body.blog-page .lead-story p { color: rgba(255, 255, 255, 0.78); }
body.blog-page .feed {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(30, 57, 50, 0.10);
  border-radius: 22px;
  overflow: hidden;
}
body.blog-page .feed-item {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(30, 57, 50, 0.08);
  color: inherit;
}
body.blog-page .feed-item:last-child { border-bottom: 0; }
body.blog-page .feed-item:hover { background: var(--gold-wash); }
body.blog-page .feed-item .thumb {
  width: 92px; height: 72px; border-radius: 12px;
}
body.blog-page .thumb.mint { background: linear-gradient(160deg, #d4e9e2, #006241); }
body.blog-page .thumb.garden { background: linear-gradient(160deg, #e7f2df, #2f6b45); }
body.blog-page .thumb.gold { background: linear-gradient(160deg, #faf6ee, #cba258); }
body.blog-page .thumb.night { background: linear-gradient(165deg, #274840, #152924); }
body.blog-page .thumb.forest { background: linear-gradient(165deg, #2a4d44, #1e3932); }
body.blog-page .post-meta {
  display: flex; flex-wrap: wrap; gap: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--starbucks-green);
}
body.blog-page .post-meta .dot-sep { color: var(--gold); }
body.blog-page .feed-item h3,
body.blog-page .post-card h3 {
  margin: 0 0 4px;
  font-size: 16px;
  letter-spacing: -0.02em;
  color: var(--ink);
}
body.blog-page .lead-story h3 {
  margin: 0;
  font-family: Fraunces, Georgia, serif;
  font-size: clamp(28px, 3.4vw, 38px);
  letter-spacing: -0.03em;
  line-height: 1.15;
}
body.blog-page .feed-item p,
body.blog-page .post-card p { margin: 0; font-size: 13px; color: var(--text-soft); }
body.blog-page .post-byline { margin-top: 8px; font-size: 12px; font-weight: 600; color: var(--text-faint); }
body.blog-page .article-wrap {
  width: min(100% - 40px, 720px);
  margin: 0 auto;
  padding: calc(var(--header-h) + 32px) 0 48px;
}
body.blog-page .article-kicker {
  display: flex; flex-wrap: wrap; gap: 8px 12px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--starbucks-green);
  margin-bottom: 12px;
}
body.blog-page .article-wrap h1 {
  margin: 0 0 12px;
  font-family: Fraunces, Georgia, serif;
  font-size: clamp(32px, 5vw, 48px);
  letter-spacing: -0.03em;
  line-height: 1.12;
  color: var(--ink);
}
body.blog-page .byline-row {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 24px;
  color: var(--text-soft);
  font-size: 14px;
}
body.blog-page .prose { font-size: 17px; line-height: 1.7; color: var(--text); }
body.blog-page .prose p { margin: 0 0 18px; }
body.blog-page .prose h2 {
  font-family: Fraunces, Georgia, serif;
  font-size: 26px;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 32px 0 12px;
}
body.blog-page .prose figure { margin: 28px 0; }
body.blog-page .prose figcaption { font-size: 13px; color: var(--text-faint); }
body.blog-page .related { margin-top: 36px; }
body.blog-page .related h2 {
  font-family: Fraunces, Georgia, serif;
  font-size: 26px;
  color: var(--ink);
}
body.blog-page .card-grid { display: grid; gap: 14px; }
body.blog-page .post-card {
  display: block;
  padding: 16px;
  background: var(--card);
  border-radius: 18px;
  box-shadow: var(--shadow-soft);
}
body.blog-page .download {
  width: min(100% - 40px, var(--max));
  margin: 12px auto 28px;
  padding: 28px;
  border-radius: 24px;
  background: var(--house-green);
  color: var(--on-dark);
}
body.blog-page .download h2 { margin: 0 0 8px; font-family: Fraunces, Georgia, serif; }
body.blog-page .download p { margin: 0 0 16px; color: rgba(255, 255, 255, 0.78); }
body.blog-page .store-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 16px; border-radius: 14px;
  background: linear-gradient(145deg, var(--gold-bright), var(--gold));
  color: var(--house-green); font-weight: 800;
}
body.blog-page .site-footer {
  border-top: 1px solid rgba(30, 57, 50, 0.08);
  padding: 28px 0 40px;
}
body.blog-page .footer-inner,
body.blog-page .footer-links {
  width: min(100% - 40px, var(--max));
  margin: 0 auto;
}
body.blog-page .footer-links {
  display: flex; flex-wrap: wrap; gap: 8px 16px;
  font-size: 13px; font-weight: 600;
}
body.blog-page .footer-brand img { height: 28px; width: auto; margin-bottom: 12px; }
@media (max-width: 900px) {
  body.blog-page .split-layout { grid-template-columns: 1fr; }
  body.blog-page .lead-story { position: static; min-height: 320px; }
  body.blog-page .feed-item { grid-template-columns: 72px minmax(0, 1fr); }
}