/* Black Bear Lodge — shared styles */

:root {
  /* Lights — bone family */
  --cream: #fbf8f2;
  --bone: #f5f1ea;
  --bone-2: #ebe4d6;
  --line-soft: #e5ddcb;
  --line: #d9d1bf;

  /* Mid warms */
  --sand: #d6cbb4;
  --wheat: #c9b590;
  --stone: #bfb198;
  --tobacco: #8b7a5a;
  --walnut: #6e5c3f;

  /* Earth darks */
  --bark: #3d2f24;
  --olive: #3a3a2e;
  --forest: #2a3328;
  --forest-deep: #1e241c;

  /* Tans */
  --tan: #b38a5c;
  --tan-soft: #d8b889;

  /* Ink */
  --ink: #1c1f1a;
  --ink-soft: #3d3a33;
  --muted: #6e6859;

  --shadow: 0 1px 2px rgba(28, 31, 26, 0.04), 0 8px 24px rgba(28, 31, 26, 0.06);
  --shadow-lg: 0 2px 4px rgba(28, 31, 26, 0.05), 0 20px 48px rgba(28, 31, 26, 0.1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--bone);
  color: var(--ink);
  font-family: 'Manrope', -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Leave room for the mobile sticky CTA bar */
  padding-bottom: 0;
}

/* StickyCTA was removed in iteration 3 — no bottom-bar padding needed.
   Nav now carries the persistent booking CTAs on mobile. */

/* Prevent horizontal page scroll on mobile from full-bleed sections (e.g.,
   reviews-strip's negative-margin bleed) overflowing the viewport. Scoped
   to mobile because overflow-x:hidden on html/body creates a new scroll
   container that breaks position:sticky on desktop (homepage hero pin). */
@media (max-width: 820px) {
  html, body { overflow-x: hidden; }
}

.display, h1, h2, h3 {
  font-family: 'Tenor Sans', Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.05;
}

/* Subpage brand crumb — establishes site identity for second-page arrivals */
.page-brand {
  display: inline-block;
  font-family: 'Manrope', sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--walnut);
  margin-bottom: 16px;
}

h1 { font-size: clamp(48px, 6vw, 96px); }
h2 { font-size: clamp(36px, 4vw, 64px); }
h3 { font-size: clamp(24px, 2.5vw, 36px); }

.eyebrow {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}

a { color: inherit; text-decoration: none; }

img { display: block; max-width: 100%; }

.container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 32px;
}

.container-narrow {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 32px;
}

/* ---------- Navigation ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--bone);
  border-bottom: 1px solid var(--line-soft);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 32px;
  max-width: 1320px;
  margin: 0 auto;
}
.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ink-soft);
  text-decoration: none;
  font-family: 'Manrope', -apple-system, sans-serif;
}
.nav-brand:hover { color: var(--ink); }
.nav-brand .mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--tan);
  flex-shrink: 0;
}
.nav-links {
  display: flex;
  gap: 34px;
  font-size: 14px;
  color: var(--ink-soft);
}
.nav-links a {
  position: relative;
  padding: 6px 0;
  transition: color .2s;
}
.nav-links a:hover { color: var(--ink); }
.nav-links a.active { color: var(--ink); }
.nav-links a.active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--tan);
}
.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
  letter-spacing: 0.02em;
  font-weight: 500;
  transition: border-color .2s, color .2s, background .2s;
}
.nav-cta:hover { border-color: var(--ink); }
.nav-cta-group { display: inline-flex; gap: 16px; align-items: center; }

/* ---------- Mobile hamburger menu (hidden on desktop) ---------- */
.nav-menu-toggle {
  display: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  border-radius: 8px;
  transition: background-color .15s, color .15s;
}
.nav-menu-toggle:hover { background: var(--bone-2); }
.nav-mobile-menu { display: none; }

/* Paired booking buttons — Airbnb + VRBO side by side */
.booking-cta-pair {
  display: flex;
  gap: 20px 32px;
  flex-wrap: wrap;
  align-items: center;
}
/* Bulletproof fallback in case flex gap is overridden anywhere */
.booking-cta-pair > * + * { margin-left: 0; }
.nav-cta-group > * + * { margin-left: 0; }

/* ---------- Mobile sticky bottom CTA ---------- */
.sticky-cta {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 50;
  background: var(--forest-deep);
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(245, 241, 234, 0.12);
}
.sticky-dismiss {
  position: absolute;
  top: 2px;
  right: 6px;
  background: transparent;
  border: 0;
  color: rgba(245, 241, 234, 0.6);
  font-size: 22px;
  line-height: 1;
  /* WCAG 2.5.5 target size — 44x44 minimum */
  width: 44px;
  height: 44px;
  cursor: pointer;
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: color .15s, background .15s;
}
.sticky-dismiss:hover { color: var(--bone); background: rgba(245, 241, 234, 0.08); }
.sticky-cta a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px;
  background: var(--tan);
  color: var(--forest-deep);
  border-radius: 999px;
  font-weight: 500;
  font-size: 15px;
}
.sticky-cta-actions {
  display: flex;
  gap: 16px;
  width: 100%;
}
.sticky-cta-actions a {
  width: auto;
  flex: 1;
  /* 14px font + 30px vertical padding = 44px floor (WCAG 2.5.5) */
  padding: 15px 12px;
  font-size: 14px;
  min-height: 44px;
}
.sticky-cta .small {
  display: block;
  text-align: center;
  font-size: 11px;
  color: rgba(245, 241, 234, 0.6);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
@media (max-width: 720px) {
  .sticky-cta { display: block; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all .2s;
  font-family: inherit;
}
.btn-primary { background: var(--forest); color: var(--bone); }
.btn-primary:hover { background: var(--forest-deep); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-ember { background: var(--bark); color: var(--bone); }
.btn-ember:hover { background: #2a1f17; }
.btn-walnut { background: var(--walnut); color: var(--bone); }
.btn-walnut:hover { background: var(--bark); }
.btn-tan { background: var(--tan); color: var(--forest-deep); }
.btn-tan:hover { background: var(--tan-soft); }

/* ---------- Image utility (real photos) ---------- */
.photo {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  background: var(--stone);
}
.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.photo-cap {
  position: absolute;
  left: 14px; bottom: 12px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(28, 31, 26, 0.65);
  background: rgba(251, 248, 242, 0.78);
  padding: 4px 10px;
  border-radius: 2px;
  backdrop-filter: blur(6px);
}
.photo.dark .photo-cap { color: rgba(245, 241, 234, 0.85); background: rgba(20, 26, 20, 0.55); }

/* ---------- Image placeholders (palette-driven, fallback when no photo) ---------- */
.ph {
  background: linear-gradient(135deg, var(--sand) 0%, var(--stone) 100%);
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}
.ph::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(42, 51, 40, 0.18), transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(61, 47, 36, 0.14), transparent 50%);
}
.ph::after {
  content: attr(data-caption);
  position: absolute;
  left: 14px;
  bottom: 12px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(28, 31, 26, 0.55);
  background: rgba(251, 248, 242, 0.7);
  padding: 4px 10px;
  border-radius: 2px;
  backdrop-filter: blur(6px);
}
.ph.dark { background: linear-gradient(135deg, var(--olive) 0%, var(--forest-deep) 100%); }
.ph.dark::after { color: rgba(245, 241, 234, 0.7); background: rgba(20, 26, 20, 0.55); }
.ph.tan { background: linear-gradient(135deg, var(--tan-soft) 0%, var(--walnut) 100%); }
.ph.tan::after { color: rgba(28, 20, 10, 0.65); background: rgba(245, 230, 205, 0.7); }
.ph.scene {
  background:
    radial-gradient(ellipse 60% 40% at 50% 100%, var(--tobacco) 0%, transparent 70%),
    linear-gradient(180deg, #e8dfc9 0%, var(--wheat) 40%, var(--walnut) 75%, var(--olive) 100%);
}
.ph.scene::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top right, transparent 48%, rgba(42, 51, 40, 0.8) 48%, rgba(42, 51, 40, 0.8) 52%, transparent 52%) no-repeat 0 100% / 55% 40%,
    linear-gradient(to top left, transparent 48%, rgba(26, 34, 26, 0.9) 48%, rgba(26, 34, 26, 0.9) 52%, transparent 52%) no-repeat 100% 100% / 60% 50%;
}

/* ---------- Video embed ---------- */
.video-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  background: var(--forest-deep);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.video-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------- Reviews carousel ---------- */
.reviews-strip {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 8px 32px 32px;
  margin: 0 -32px;
  /* Fade right edge so users can see there's more to scroll */
  -webkit-mask-image: linear-gradient(to right, black 0%, black calc(100% - 80px), transparent 100%);
          mask-image: linear-gradient(to right, black 0%, black calc(100% - 80px), transparent 100%);
  scrollbar-color: var(--line) transparent;
  scrollbar-width: thin;
}
@media (max-width: 820px) {
  /* Match container's mobile padding (20px) so the strip aligns to viewport
     edges instead of overflowing past them. */
  .reviews-strip {
    padding: 8px 20px 32px;
    margin: 0 -20px;
  }
}
@media (max-width: 720px) {
  .reviews-strip {
    -webkit-mask-image: linear-gradient(to right, black 0%, black calc(100% - 28px), transparent 100%);
            mask-image: linear-gradient(to right, black 0%, black calc(100% - 28px), transparent 100%);
  }
}
.reviews-strip::-webkit-scrollbar { height: 6px; }
.reviews-strip::-webkit-scrollbar-track { background: transparent; }
.reviews-strip::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
.reviews-strip::-webkit-scrollbar-thumb:hover { background: var(--tobacco); }
.review-card {
  flex: 0 0 380px;
  scroll-snap-align: start;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.review-stars { color: var(--tan); letter-spacing: 3px; font-size: 14px; }
.review-text {
  font-family: 'Tenor Sans', serif;
  font-size: 19px;
  line-height: 1.45;
  color: var(--ink);
  flex: 1;
}
.review-meta {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.review-meta .name { color: var(--ink-soft); font-weight: 500; }
.review-meta .source { color: var(--tobacco); }
@media (max-width: 720px) {
  .review-card { flex: 0 0 85%; }
}

/* ---------- Footer ---------- */
.footer {
  margin-top: 120px;
  background: var(--forest-deep);
  color: rgba(245, 241, 234, 0.78);
  padding: 80px 0 40px;
}
.footer a { color: rgba(245, 241, 234, 0.78); }
.footer a:hover { color: var(--bone); }
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(245, 241, 234, 0.12);
}
.footer h4 {
  font-family: 'Tenor Sans', serif;
  font-size: 14px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bone);
  margin-bottom: 20px;
}
.footer ul { list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: 'Tenor Sans', serif;
  font-size: 28px;
  color: var(--bone);
  margin-bottom: 16px;
}
.footer-brand .mark {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: rgba(245, 241, 234, 0.12);
  border: 1px solid rgba(245, 241, 234, 0.25);
  border-radius: 50%;
  flex-shrink: 0;
}
.footer-tag { font-size: 14px; line-height: 1.6; max-width: 320px; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding-top: 32px;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(245, 241, 234, 0.5);
}

/* ---------- utility ---------- */
.section { padding: 72px 0; }
.section-sm { padding: 48px 0; }
.section-xs { padding: 32px 0; }
.divider-mark {
  display: flex; align-items: center; gap: 14px;
  color: var(--muted); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
}
.divider-mark::before, .divider-mark::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.tag {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--bone-2);
  color: var(--ink-soft);
  font-size: 12px;
  letter-spacing: 0.05em;
}

/* Background variants */
.bg-sand { background: var(--sand); }
.bg-stone { background: var(--stone); }
.bg-wheat { background: var(--wheat); }
.bg-walnut { background: var(--walnut); color: var(--bone); }
.bg-olive { background: var(--olive); color: var(--bone); }
.bg-cream { background: var(--cream); }

.accent-tobacco { color: var(--tobacco); }

@media (max-width: 820px) {
  .nav-links { display: none; }
  /* StickyCTA gone — restore booking pills in the nav. The nav is now the
     persistent booking surface on mobile. */
  .nav-cta-group { gap: 8px; }
  .nav-cta { padding: 7px 12px; font-size: 12px; gap: 5px; letter-spacing: 0.01em; }
  /* Hide nav-brand TEXT on mobile (always, not just over hero). The map-pin
     icon stays as a quiet anchor / home link. With nav booking pills present,
     the long location label would overflow. */
  .nav-brand span:not(.mark) { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .container, .container-narrow { padding: 0 20px; }
  .section { padding: 56px 0; }
  .section-sm { padding: 40px 0; }
  .section-xs { padding: 24px 0; }
  /* Tighten nav padding for compact mobile bookmark-style header */
  .nav-inner { padding: 12px 16px; gap: 8px; }
  /* Hamburger toggle becomes visible on mobile, sits on the right after the
     booking pills. nav-cta-group pushes left with margin-left:auto so brand
     and pills are spaced appropriately. */
  .nav-menu-toggle { display: inline-flex; }
  .nav-cta-group { margin-left: auto; }
  /* Slide-down drawer below the nav-inner. Inherits nav background — opaque
     on subpages, transparent-becoming-forest on hero overlay state. */
  .nav-mobile-menu {
    display: flex;
    flex-direction: column;
    background: inherit;
    border-top: 1px solid var(--line-soft);
    padding: 4px 16px 12px;
  }
  .nav-mobile-menu a {
    padding: 14px 4px;
    font-size: 16px;
    color: var(--ink);
    border-bottom: 1px solid var(--line-soft);
    text-decoration: none;
  }
  .nav-mobile-menu a:last-child { border-bottom: 0; }
  .nav-mobile-menu a.active {
    color: var(--bark);
    font-weight: 500;
  }
  /* When nav is in transparent-over-hero state, the drawer needs its own
     opaque background so links are readable against the hero photo. */
  .nav.nav-top .nav-mobile-menu {
    background: var(--forest-deep);
    border-top-color: rgba(245, 241, 234, 0.12);
  }
  .nav.nav-top .nav-mobile-menu a {
    color: rgba(245, 241, 234, 0.88);
    border-bottom-color: rgba(245, 241, 234, 0.1);
  }
  .nav.nav-top .nav-mobile-menu a.active {
    color: var(--tan-soft);
  }
  /* When the menu is open, force the nav itself to opaque so the drawer
     anchors visually to a solid bar. */
  .nav.nav-menu-open {
    background: var(--bone) !important;
  }
  .nav.nav-menu-open.nav-top {
    background: var(--forest-deep) !important;
  }
  /* Footer brand was wrapping to 3 lines in a half-width column — shrink the
     wordmark and icon proportionally so it stays on one line. */
  .footer-brand { font-size: 22px; gap: 10px; }
  .footer-brand .mark { width: 30px; height: 30px; }
}

/* Single-column footer at very narrow widths — three cells in a 1fr 1fr grid
   left an orphan third row at @820. */
@media (max-width: 540px) {
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* Touch-device: kill hover-only motion on coarse pointer (saves jitter on tap-then-scroll) */
@media (hover: none) {
  .mosaic-item:hover { transform: none; }
  .mosaic-item:hover img { transform: none; }
  .preview-card:hover { transform: none; }
  .btn-primary:hover { transform: none; }
  .video-poster:hover .play-icon { transform: none; }
  /* Explore page: lift + scale effects shouldn't fire on touch */
  .attr:hover { transform: none; }
  .attr:hover .ph img { transform: none; }
  .fav-card:hover .ph-img img { transform: none; }
}

/* ---------- Keyboard focus (WCAG 2.4.7) ----------
   Single, consistent ring across every interactive element on the site.
   Uses :focus-visible so mouse users don't see the ring on click,
   only keyboard users tabbing through. */
:where(
  a,
  button,
  .btn,
  .nav-cta,
  .nav-brand,
  .nav-links a,
  .hero-link,
  .hero-brand,
  .sticky-cta a,
  .sticky-dismiss,
  .preview-card,
  .video-poster,
  .review-meta a,
  .footer a,
  .more,
  .mosaic-item,
  [role="button"],
  [tabindex]:not([tabindex="-1"])
):focus-visible {
  outline: 2px solid var(--tan-soft);
  outline-offset: 3px;
  border-radius: 4px;
}
/* Pill-shaped CTAs need a matching round outline */
.btn:focus-visible,
.nav-cta:focus-visible,
.sticky-cta a:focus-visible {
  border-radius: 999px;
}
/* Sticky-dismiss is round */
.sticky-dismiss:focus-visible {
  border-radius: 50%;
}

/* ---------- Reduced motion (WCAG 2.3.3) ----------
   Honor the user's OS-level "reduce motion" preference globally.
   Neutralizes every transition/animation/transform on the site. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Long-text safety net ----------
   If a guest's name, a venue title, or a piece of pasted copy contains
   an unbroken run of characters longer than its container, allow the
   browser to break the word so it doesn't blow out the layout. Targeted
   to copy containers, not navigation or button labels. */
.intro-split-body,
.hosts-body,
.review-text,
.gather-body p,
.cta-band p,
.cta-quote p,
.hero-content .lede,
.video-split-body .lede,
.preview-card p {
  overflow-wrap: anywhere;
}

/* ---------- FAQ — accordion section that mirrors FAQPage schema ----------
   Renders the same questions and answers as the JSON-LD on the page so
   Google's FAQ rich result eligibility holds (visible content required).
   Uses native <details>/<summary> for keyboard a11y + zero JS. The chevron
   is a CSS-rotated SVG that flips on [open]. Styled to match the rest of
   the site: Tenor Sans questions, Manrope answers, walnut/tobacco accent. */
.faq-section {
  padding: 96px 0 88px;
  border-top: 1px solid var(--line);
}
.faq-section .container {
  max-width: 880px;
}
.faq-section .eyebrow {
  color: var(--tobacco);
  margin-bottom: 16px;
}
.faq-section h2 {
  font-size: clamp(32px, 3.4vw, 48px);
  margin: 0 0 12px;
  line-height: 1.08;
}
.faq-section .lede {
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 1.6;
  margin: 0 0 40px;
  max-width: 640px;
}
.faq {
  list-style: none;
  margin: 0;
  padding: 0;
}
.faq-item {
  border-top: 1px solid var(--line);
}
.faq-item:last-child {
  border-bottom: 1px solid var(--line);
}
.faq-item > summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 36px 22px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  font-family: 'Tenor Sans', Georgia, serif;
  font-size: clamp(18px, 1.6vw, 22px);
  letter-spacing: -0.005em;
  color: var(--ink);
  transition: color .15s ease;
  position: relative;
  min-height: 44px; /* WCAG 2.5.5 touch target */
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary:hover { color: var(--walnut); }
.faq-item > summary:focus-visible {
  outline: 2px solid var(--walnut);
  outline-offset: 4px;
  border-radius: 4px;
}
.faq-item > summary::after {
  content: '';
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%236b4f2a' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M3 5.5l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: transform .25s ease;
}
.faq-item[open] > summary::after { transform: rotate(180deg); }
.faq-item[open] > summary { color: var(--walnut); }
.faq-answer {
  padding: 0 36px 28px 0;
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.65;
  max-width: 720px;
  overflow-wrap: anywhere;
}
.faq-answer p { margin: 0; }
.faq-answer p + p { margin-top: 14px; }

@media (max-width: 720px) {
  .faq-section { padding: 64px 0 56px; }
  .faq-section h2 { font-size: clamp(28px, 7vw, 36px); }
  .faq-section .lede { font-size: 16px; margin-bottom: 28px; }
  .faq-item > summary { padding: 20px 32px 20px 0; font-size: 17px; }
  .faq-item > summary::after { width: 12px; height: 12px; }
  .faq-answer { padding: 0 0 24px 0; font-size: 15px; }
}

/* ---------- Guides grid (homepage) — internal-link surface for /guides/* ---------- */
.guides-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
.guide-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px;
  text-decoration: none;
  color: inherit;
  background: transparent;
  transition: background-color .15s ease;
  border-right: 1px solid var(--line);
}
.guide-card:last-child { border-right: none; }
.guide-card:hover { background: rgba(238, 234, 226, 0.4); }
.guide-eyebrow {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tobacco);
}
.guide-title {
  font-family: 'Tenor Sans', Georgia, serif;
  font-size: clamp(20px, 2vw, 26px);
  margin: 0;
  line-height: 1.18;
  color: var(--ink);
  text-wrap: balance;
}
.guide-blurb {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.guide-cta-link {
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--walnut);
  margin-top: 4px;
}
@media (max-width: 720px) {
  .guides-grid { grid-template-columns: 1fr; }
  .guide-card { border-right: none; border-bottom: 1px solid var(--line); padding: 24px; }
  .guide-card:last-child { border-bottom: none; }
}