/* cathero.css — full-bleed category hero band: themed photo + dark scrim + HTML text overlay.
   Text is real HTML (indexable, crisp, theme-agnostic — the band is dark in both themes). */
.cathero { position: relative; width: 100%; min-height: 340px; display: flex; align-items: flex-end; background-color: #1b1712; background-size: cover; background-position: center; }
.cathero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,17,13,0.88) 0%, rgba(20,17,13,0.5) 40%, rgba(20,17,13,0.12) 74%, rgba(20,17,13,0.04) 100%); }
.cathero .cathero-inner { position: relative; z-index: 1; width: 100%; max-width: 1180px; margin: 0 auto; padding: 40px 20px 34px; }
.cathero .cathero-crumb { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; color: #e7d8c4; margin: 0 0 14px; }
.cathero .cathero-crumb a { color: #f0b659; }
.cathero .cathero-crumb a:hover { color: #fff; }
.cathero .cathero-kicker { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: #f0b659; margin: 0 0 8px; }
.cathero .cathero-title { color: #fff; font-size: 38px; letter-spacing: -0.01em; margin: 0 0 12px; text-shadow: 0 2px 18px rgba(0,0,0,0.5); }
.cathero .cathero-intro { max-width: 62ch; color: #f3ece0; font-size: 16px; line-height: 1.6; margin: 0; text-shadow: 0 1px 8px rgba(0,0,0,0.45); }

.cat-databar { max-width: 1180px; margin: 0 auto; padding: 26px 20px 0; }
.cat-databar .cat-data { max-width: 74ch; color: #43392f; font-size: 16px; line-height: 1.65; margin: 0; }

@media (min-width: 768px) {
  .cathero { min-height: 440px; }
  .cathero .cathero-title { font-size: 52px; }
  .cathero .cathero-intro { font-size: 17px; }
}