/* FreshSpot overrides for the generated blog theme. Loaded through fontStylesheets, which the
   theme links BEFORE guide.css, so every rule here starts with "html" to win on specificity.
   Matches the home page (styles.css): 700-weight tight headlines, quiet header pill. */

/* M1: headline voice. Bold, tight, roman accent (colour stays --gold-br). */
html .masthead h1,
html .featured-copy h2,
html .post-head h1,
html .shelf-head h2,
html .related-head h2 { font-weight: 700; letter-spacing: -0.022em; }
html .masthead h1 em { font-style: normal; font-weight: 700; }

/* M3: header CTA as home's quiet surface pill. */
html .site-header .btn-gold {
  background: #ffffff; color: #10171a; min-height: 44px; padding: 0 16px;
  box-shadow: inset 0 0 0 1px #d2d9d9;
}
html .site-header .btn-gold:hover { background: #ffffff; box-shadow: inset 0 0 0 1px #4a5559; transform: none; }

/* M4: hero art. The art is cropped to fill a 3:1 band, which sawed the torsos off; scale it down so they clear. */
html .hero .plate > svg.art { transform: scale(0.66); }

@media (max-width: 760px) {
  html .hero .plate > svg.art { transform: scale(1); }
}

@media (max-width: 560px) {
  /* m3: size, not just width, separates the dek from the body. */
  html .post-head .dek,
  html .featured-copy .dek { font-size: 20px; line-height: 1.45; }
}

@media (prefers-color-scheme: dark) {
  html .site-header .btn-gold { background: #2b3232; color: #eff3f3; box-shadow: inset 0 0 0 1px #464f50; }
  html .site-header .btn-gold:hover { background: #2b3232; box-shadow: inset 0 0 0 1px #a8b2b3; }
}