/* Café chapter: a storefront, coffee making, then the benefit beyond the cup. */
.cafe-section { border-top: 0; }
.cafe-section .cafe-editorial-cover { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.5fr); gap: 64px; align-items: center; }
.cafe-section .cafe-editorial-heading { min-width: 0; }
.cafe-section .cafe-editorial-heading .eyebrow { margin-bottom: 24px; font-size: 14px; }
.cafe-section .cafe-editorial-heading h2 { color: var(--foreground); font-size: 48px; font-weight: 750; line-height: 1.35; }
.cafe-section .cafe-editorial-intro { margin-top: 24px; color: var(--secondary-foreground); font-size: 17px; line-height: 1.8; }
.cafe-section .cafe-editorial-alias { display: flex; flex-direction: column; gap: 4px; margin-top: 32px; color: var(--secondary-foreground); font-size: 12px; }
.cafe-section .cafe-editorial-alias strong { color: var(--brand-primary); font-size: 24px; font-weight: 850; line-height: 1.4; }
.cafe-section .cafe-editorial-heading > .text-link { margin-top: 24px; }
.cafe-section .cafe-editorial-street { min-width: 0; margin: 0; }
.cafe-section .cafe-editorial-street .image-frame { aspect-ratio: 3 / 2; }
.cafe-section .cafe-editorial-street img { object-fit: contain; }
.cafe-section .cafe-editorial-street figcaption { padding-top: 12px; gap: 8px 16px; font-size: 12px; }
.cafe-section .cafe-editorial-street figcaption > span:first-child { color: var(--secondary-foreground); font-weight: 400; }
.cafe-section .cafe-editorial-street .image-note { color: var(--muted-foreground); font-size: 11px; }
.cafe-section .cafe-editorial-experience { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 96px; align-items: center; margin-top: 128px; }
.cafe-section .cafe-editorial-roasting { min-width: 0; width: 100%; max-width: 480px; }
.cafe-section .cafe-editorial-roasting .image-frame { aspect-ratio: 4 / 5; }
.cafe-section .cafe-editorial-roasting figcaption { font-size: 12px; }
.cafe-section .cafe-editorial-story h3 { color: var(--foreground); font-size: 36px; line-height: 1.4; font-weight: 750; }
.cafe-section .cafe-editorial-moments { display: grid; gap: 24px; margin-top: 40px; }
.cafe-section .cafe-editorial-moments > div { display: flex; gap: 20px; align-items: baseline; }
.cafe-section .cafe-editorial-moments > div > span { color: var(--brand-primary); font-size: 12px; font-weight: 750; }
.cafe-section .cafe-editorial-moments p { color: var(--secondary-foreground); font-size: 15px; }
.cafe-section .cafe-editorial-moments strong { display: block; color: var(--foreground); font-size: 19px; font-weight: 700; margin-bottom: 4px; }
.cafe-section .cafe-editorial-benefit { display: flex; align-items: flex-start; gap: 20px; border-top: 1px solid var(--border); margin-top: 32px; padding-top: 24px; }
.cafe-section .cafe-editorial-benefit > span { display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; color: var(--brand-primary); background: var(--brand-accent); border-radius: var(--mobile-radius-control); font-size: 24px; line-height: 1; font-weight: 750; }
.cafe-section .cafe-editorial-benefit p { color: var(--secondary-foreground); font-size: 15px; line-height: 1.8; }
.cafe-section .cafe-editorial-benefit strong { display: block; color: var(--brand-primary); font-size: 17px; margin-bottom: 4px; }
.cafe-section .cafe-editorial-story > .text-link { margin-top: 24px; }
.cafe-section .cafe-editorial-equipment { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: 48px; align-items: center; margin-top: 96px; padding-top: 48px; border-top: 1px solid var(--border); }
.cafe-section .cafe-editorial-product .image-frame { aspect-ratio: 4 / 3; }
.cafe-section .cafe-editorial-product figcaption { justify-content: flex-end; padding-top: 8px; }
.cafe-section .cafe-editorial-product .image-note { color: var(--muted-foreground); font-size: 11px; font-weight: 400; }
.cafe-section .cafe-editorial-equipment .eyebrow { margin-bottom: 12px; }
.cafe-section .cafe-editorial-equipment h3 { color: var(--foreground); font-size: 24px; line-height: 1.4; }
.cafe-section .cafe-editorial-equipment h3 + p { margin-top: 12px; color: var(--secondary-foreground); font-size: 15px; line-height: 1.8; }
.cafe-section .cafe-editorial-equipment .text-link { margin-top: 16px; }
@media (max-width: 1099px) {
  .cafe-section .cafe-editorial-cover { gap: 40px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
  .cafe-section .cafe-editorial-heading h2 { font-size: 40px; }
  .cafe-section .cafe-editorial-experience { gap: 48px; margin-top: 96px; }
  .cafe-section .cafe-editorial-story h3 { font-size: 32px; }
}
@media (max-width: 749px) {
  .cafe-section .cafe-editorial-cover { grid-template-columns: 1fr; gap: 40px; }
  .cafe-section .cafe-editorial-heading h2 { font-size: 36px; }
  .cafe-section .cafe-editorial-heading .eyebrow { margin-bottom: 20px; }
  .cafe-section .cafe-editorial-intro { font-size: 16px; margin-top: 20px; }
  .cafe-section .cafe-editorial-alias { margin-top: 24px; }
  .cafe-section .cafe-editorial-heading > .text-link { margin-top: 16px; }
  .cafe-section .cafe-editorial-street figcaption { align-items: flex-start; gap: 4px; }
  .cafe-section .cafe-editorial-street figcaption > span:first-child { font-size: 11px; }
  .cafe-section .cafe-editorial-experience { grid-template-columns: 1fr; gap: 40px; margin-top: 80px; }
  .cafe-section .cafe-editorial-roasting { max-width: 100%; }
  .cafe-section .cafe-editorial-roasting .image-frame { aspect-ratio: 1 / 1; }
  .cafe-section .cafe-editorial-story h3 { font-size: 30px; }
  .cafe-section .cafe-editorial-moments { margin-top: 32px; }
  .cafe-section .cafe-editorial-equipment { grid-template-columns: 1fr; gap: 24px; padding-top: 40px; margin-top: 80px; }
  .cafe-section .cafe-editorial-product { width: min(100%, 320px); }
  .cafe-section .cafe-editorial-equipment h3 { font-size: 22px; }
}