/* ============================================================
   HIGH BROW SOCIETY — Guide / article pages (.guide-)
   Reuses header.css, base.css, treatment-page.css (det-band +
   det-intro__quote), faq.css, legal-page.css (lp-hero, lp-body,
   lp-prose), final.css and footer.css. This sheet only adds the
   breadcrumb, the hero lead, and the related-links block.
   ============================================================ */

/* --- Breadcrumb (sits above the masthead) --- */
.guide-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: var(--space-md);
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-charcoal-mute);
}
.guide-breadcrumb a {
  color: var(--color-charcoal-mute);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.guide-breadcrumb a:hover { color: var(--color-champagne-deep); }
.guide-breadcrumb [aria-current="page"] { color: var(--color-charcoal-soft); }
.guide-breadcrumb__sep { color: var(--color-line); }

/* --- Hero: a shade deeper so the specs strip below reads one shade lighter --- */
.guide-hero { background: var(--color-ivory-deep); padding-bottom: var(--space-xl); }

/* --- At-a-glance specs: trim the top so it balances the hero above --- */
.guide-specs { padding-top: var(--space-xl); }

/* --- Hero lead, beneath lp-hero__title --- */
.guide-hero__lead {
  font-family: var(--font-sans);
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--color-charcoal-soft);
  max-width: 56ch;
  margin-top: var(--space-md);
}

/* --- Pull-quote breathing room when used inside the prose --- */
.lp-prose .det-intro__quote { margin-block: var(--space-lg); }

/* --- Guide image band crop. Each band sets --band-y (mobile) and
   --band-y-lg (desktop) inline; the defaults below suit the removal guide. --- */
.guide-band__img { object-position: center var(--band-y, 40%); }
@media (min-width: 880px) {
  .guide-band__img { object-position: center var(--band-y-lg, 70%); }
}

/* --- Related links --- */
.guide-related {
  background: var(--color-cream);
  padding-block: var(--space-2xl);
}
.guide-related__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: 1.1;
  letter-spacing: var(--ls-tight);
  color: var(--color-charcoal);
  margin-top: var(--space-sm);
  margin-bottom: var(--space-lg);
}
.guide-related__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}
.guide-related__card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space-lg);
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-med) var(--ease-out);
}
.guide-related__card:hover {
  border-color: var(--color-charcoal);
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
}
.guide-related__eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-champagne-deep);
}
.guide-related__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: 1.1;
  letter-spacing: var(--ls-tight);
  color: var(--color-charcoal);
  margin-top: 0.4rem;
}
.guide-related__text {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-charcoal-soft);
  margin-top: 0.55rem;
}
.guide-related__cta {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 0.45rem;
  margin-top: auto;
  padding-top: var(--space-md);
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-champagne-deep);
}
.guide-related__cta span { transition: transform var(--dur-fast) var(--ease-out); }
.guide-related__card:hover .guide-related__cta span { transform: translateX(4px); }

@media (min-width: 760px) {
  .guide-related__grid { grid-template-columns: 1fr 1fr; }
}