/* =========================================================
   ROAM COLORADO — STYLES
   Organized by: Tokens, Base, Layout Helpers, Header/Nav,
   Hero, Feature Strip, About, Properties, Guides, Journal,
   CTA, Footer, Responsive Overrides
   ========================================================= */

/* ---------- Design Tokens ----------
   Palette locked to the Roam UI Refresh Kit reference
   (roam-palette-reference.css). These are the canonical
   brand values — do not drift from them.
   ------------------------------------ */
:root {
  /* Forest — navigation, footer, primary text, dark sections */
  --color-dark: #25362e;
  --color-dark-2: #17251f;
  /* Sage — guide categories, icons, subtle backgrounds, map elements */
  --color-sage: #7d8e68;
  /* Terracotta — primary calls to action, links, editorial highlights */
  --color-accent: #c76f52;
  --color-accent-dark: #a85b41;
  /* Ochre — metadata, small accents, badge warmth */
  --color-ochre: #c9963a;
  /* Teal — alternate panel colour, water/recreation motifs */
  --color-teal: #4a7775;
  /* Peach Skin — soft accent blocks, hover states, lifestyle details */
  --color-peach: #e6b99f;
  /* Cream — primary page background */
  --color-cream: #f1eadf;
  /* Warm White — raised editorial surfaces on cream */
  --color-warm-white: #faf7f0;
  /* Warm Parchment — cards, dividers, alternating sections */
  --color-parchment: #e6ddcf;
  /* Plum Preserve — premium property badges, wine features, selective accents */
  --color-plum: #633747;
  /* Ink — headlines and strong contrast */
  --color-charred: #302c27;
  --color-white: #ffffff;

  --color-text: #25362e;
  --color-text-light: #f1eadf;
  --color-text-muted: #6f7a63;
  --color-border-light: rgba(241, 234, 223, 0.25);
  --color-border-dark: rgba(37, 54, 46, 0.15);

  --font-heading: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Jost", "Helvetica Neue", Arial, sans-serif;

  --content-width: 1240px;
  --gutter: 24px;

  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 48px;
  --space-xl: 80px;
  --space-2xl: 120px;

  --radius-sm: 4px;
  --radius-md: 8px;
  /* Editorial panel radii — confident rounded surfaces, not SaaS chips */
  --radius-lg: 18px;
  --radius-xl: 28px;
  --radius-2xl: 36px;
  --radius-pill: 999px;

  --shadow-card: 0 12px 30px rgba(37, 54, 46, 0.15);
  --shadow-panel: 0 18px 44px rgba(23, 37, 31, 0.18);
  --transition: 0.25s ease;
}

/* ---------- Reset / Base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-white);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

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

ul { list-style: none; margin: 0; padding: 0; }

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 500;
  line-height: 1.15;
  margin: 0;
}

p { margin: 0; }

button {
  font-family: inherit;
  cursor: pointer;
  background: none;
  border: none;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
  background: var(--color-white);
  color: var(--color-text);
  padding: 12px 20px;
  z-index: 999;
}
.skip-link:focus {
  left: 12px;
  top: 12px;
}

/* ---------- Layout Helpers ---------- */
.container {
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
  font-weight: 500;
  margin-bottom: var(--space-xs);
}
.eyebrow-light { color: var(--color-accent); }

.script-line {
  font-family: var(--font-heading);
  font-style: italic;
  color: var(--color-accent);
  font-size: 1.15rem;
  margin-bottom: var(--space-xs);
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent);
  white-space: nowrap;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition);
}
.link-arrow:hover,
.link-arrow:focus-visible { border-color: currentColor; }
.link-arrow img { filter: none; }
.link-arrow-mobile { display: none; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 15px 32px;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }

.btn-primary {
  background: var(--color-accent);
  color: var(--color-white);
  border-color: var(--color-accent);
}
.btn-primary:hover,
.btn-primary:focus-visible {
  background: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
}

.btn-outline {
  background: transparent;
  border-color: var(--color-text);
  color: var(--color-text);
}
.btn-outline:hover,
.btn-outline:focus-visible {
  background: var(--color-text);
  color: var(--color-white);
}

.btn-outline-light {
  background: transparent;
  border-color: var(--color-text-light);
  color: var(--color-text-light);
}
.btn-outline-light:hover,
.btn-outline-light:focus-visible {
  background: var(--color-text-light);
  color: var(--color-dark);
}

.btn-nav {
  padding: 11px 24px;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-dark);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: 20px;
  color: var(--color-text-light);
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.logo-mark { color: var(--color-text-light); width: 40px; height: auto; }
.logo-text { display: flex; flex-direction: column; line-height: 1.1; }
.logo-title {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  letter-spacing: 0.08em;
}
.logo-sub {
  /* Nudged up from 0.55rem (8.8px), which was below a comfortable
     reading size on phones. Kept small enough that the wordmark
     lockup is unchanged in proportion. */
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  color: var(--color-accent);
}

.primary-nav ul {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}
.primary-nav a:not(.btn) {
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding-bottom: 6px;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition), color var(--transition);
}
.primary-nav a:not(.btn):hover,
.primary-nav a:not(.btn):focus-visible,
.primary-nav a.is-active {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.nav-toggle {
  display: none;
  color: var(--color-text-light);
  padding: 4px;
}
.nav-toggle .icon-menu-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-menu-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-menu-close { display: block; }

.mobile-nav[hidden] {
  display: none;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  color: var(--color-text-light);
  min-height: 92vh;
  display: flex;
  align-items: flex-end;
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% center;
}

.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(36, 52, 44, 0.55) 0%, rgba(36, 52, 44, 0.15) 35%, rgba(36, 52, 44, 0.65) 100%);
}

.hero-content {
  padding-block: var(--space-2xl) var(--space-xl);
  max-width: 640px;
}

.hero-heading {
  font-size: clamp(2.4rem, 4.2vw, 3.4rem);
  margin-bottom: var(--space-md);
}
.hero-heading em { color: var(--color-accent); font-style: italic; }

.hero-copy {
  max-width: 480px;
  margin-bottom: var(--space-lg);
  font-weight: 300;
}

.hero-actions {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

/* ---------- Feature Strip ---------- */
.feature-strip {
  background: var(--color-dark);
  color: var(--color-text-light);
  padding-block: var(--space-lg);
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}

/* Anchors, not divs — each one navigates to the section it names.
   The lift and icon nudge on hover are the only cue that they're
   clickable, since the panels carry no button or arrow. */
.feature-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-md) var(--space-sm);
  border-radius: var(--radius-lg, 18px);
  color: inherit;
  text-decoration: none;
  transition: background var(--transition), transform var(--transition);
}
.feature-item:hover,
.feature-item:focus-visible {
  background: rgba(241, 234, 223, 0.07);
  transform: translateY(-3px);
}
.feature-item:hover h2 { color: var(--color-accent); }

.feature-item img {
  color: var(--color-accent);
  margin-bottom: var(--space-md);
  width: 80px;
  height: 80px;
  object-fit: cover;
  transition: transform var(--transition);
}
.feature-item:hover img { transform: scale(1.06); }
.feature-item h2 { transition: color var(--transition); }

@media (prefers-reduced-motion: reduce) {
  .feature-item,
  .feature-item img { transition: none; }
  .feature-item:hover,
  .feature-item:focus-visible { transform: none; }
  .feature-item:hover img { transform: none; }
}
.feature-item h2,
.feature-item h3 {
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.feature-item p {
  font-size: 0.85rem;
  color: rgba(245, 239, 228, 0.75);
  font-weight: 300;
  line-height: 1.4;
}

/* ---------- About / Shelley ---------- */
.about {
  background: var(--color-cream);
  padding-block: var(--space-2xl);
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-lg);
}

.about-copy h1,
.about-copy h2 {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  margin-bottom: var(--space-md);
  color: var(--color-charred);
}
.about-copy p {
  color: var(--color-text-muted);
  margin-bottom: var(--space-sm);
  max-width: 440px;
}
.about-copy p + p {
  margin-bottom: var(--space-lg);
}
.about-copy strong { color: var(--color-text); }

/* Reusable polaroid-style photo frame (About section, Explore page CTA, etc.) */
.polaroid {
  position: relative;
  justify-self: center;
  background: var(--color-parchment);
  padding: 14px 14px 44px;
  box-shadow: var(--shadow-card);
  transform: rotate(-2deg);
  width: 260px;
}
.polaroid img {
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 11;
  object-fit: cover;
}
.polaroid-caption {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--color-accent);
}

.about-highlight {
  padding-left: var(--space-lg);
  border-left: 1px solid var(--color-border-dark);
}
.about-highlight-label {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-sm);
}
.about-highlight-text {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  line-height: 1.35;
  color: var(--color-charred);
  max-width: 260px;
}

/* ---------- Carousels (shared: properties / guides / journal) ---------- */
.carousel {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.carousel-track {
  display: flex;
  gap: var(--space-md);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  flex: 1;
}
.carousel-track::-webkit-scrollbar { display: none; }

.carousel-btn {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--color-border-light);
  display: none;
  align-items: center;
  justify-content: center;
  color: inherit;
  transition: background var(--transition);
}
.carousel-btn:hover,
.carousel-btn:focus-visible { background: rgba(230, 185, 159, 0.18); border-color: var(--color-peach); }

.carousel-dots {
  display: none;
  justify-content: center;
  gap: 0;               /* spacing comes from each dot's tap padding */
  margin-top: var(--space-md);
}
/* The dot stays 8px visually, but the button itself is a 36px touch
   target — an 8px tap target is unusable on a phone. The visible dot is
   drawn with a pseudo-element so the hit area can be larger than the mark. */
.carousel-dots button {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: none;
  padding: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.carousel-dots button::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-border-dark);
  transition: background var(--transition), transform var(--transition);
}
.carousel-dots button.is-active::before {
  background: var(--color-accent);
  transform: scale(1.15);
}
.carousel-dots button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -6px; }

@media (prefers-reduced-motion: reduce) {
  .carousel-dots button::before { transition: none; }
}

/* ---------- Featured Property ---------- */
.properties {
  background: var(--color-dark);
  color: var(--color-text-light);
  padding-block: var(--space-2xl);
}

.featured-property {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--space-lg);
  align-items: center;
}

.property-media {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.property-media > img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
/* Reusable absolutely-positioned category/location badge. Works inside any
   position:relative media wrapper (.property-media, .featured-guide-media). */
.tag {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--color-plum);
  color: var(--color-text-light);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
}

.property-info .price {
  font-family: var(--font-heading);
  font-size: 2rem;
  margin-bottom: 4px;
}
.property-info .specs {
  font-size: 0.85rem;
  color: rgba(245, 239, 228, 0.75);
  margin-bottom: 4px;
}
.property-info .address {
  font-size: 0.85rem;
  color: rgba(245, 239, 228, 0.55);
}
.property-info .description {
  font-size: 0.95rem;
  color: rgba(245, 239, 228, 0.85);
  font-weight: 300;
  margin: var(--space-md) 0 var(--space-lg);
  max-width: 400px;
}

/* ---------- Guides (More Than a Home) ---------- */
.guides {
  background: var(--color-cream);
  padding-block: var(--space-2xl);
}
.guides .eyebrow { color: var(--color-accent); }
.guides .section-head h2 { color: var(--color-charred); }

.guide-card {
  position: relative;
  flex: 0 0 clamp(250px, 74vw, 300px);
  border-radius: var(--radius-md);
  overflow: hidden;
  scroll-snap-align: start;
  aspect-ratio: 3 / 4;
}
/* Desktop: bigger cards, evenly spread across the row (not a scroll strip) */
@media (min-width: 861px) {
  .guides-track {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-lg);
    overflow: visible;
  }
  .guides-track .guide-card { flex: initial; width: auto; }
}
.guides-track .guide-info { padding: 14px 16px; }
.guides-track .guide-info h3 { font-size: 1.25rem; }
.guides-track .guide-info p { font-size: 0.875rem; }
/* The guides CTA is a long sentence — let it wrap instead of forcing
   horizontal overflow on narrow screens. */
.guides .section-head .link-arrow { white-space: normal; max-width: 100%; }
.guides .section-head .link-arrow img { flex: 0 0 auto; }
.guide-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.guide-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(36,52,44,0) 55%, rgba(36,52,44,0.35) 100%);
}
.guide-info {
  position: absolute;
  left: var(--space-sm);
  right: var(--space-sm);
  bottom: var(--space-sm);
  padding: 12px 14px;
  color: var(--color-text-light);
  z-index: 1;
  /* Soft green-tinted glass panel so title + subtitle stay legible
     over any photo. Uses palette --color-dark (#24342c). */
  background: rgba(36, 52, 44, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(245, 239, 228, 0.18);
  border-radius: var(--radius-sm, 8px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
.guide-info h3 { font-size: 1.1rem; margin-bottom: 4px; text-shadow: 0 1px 2px rgba(0,0,0,0.35); }
.guide-info p { font-size: 0.8rem; color: rgba(245,239,228,0.92); }

/* Full-card clickable link for the guides carousel */
.guide-card-link {
  position: absolute;
  inset: 0;
  display: block;
  text-decoration: none;
  color: inherit;
}
.guide-card-link img { transition: transform 0.5s ease; }
.guide-card:hover .guide-card-link img { transform: scale(1.05); }
/* "Read more" cue — matches the .link-arrow ("View All Articles") style:
   same size, letter-spacing, and small arrow. */
.card-link-cue {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-peach);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
/* Keep the arrow icon small. The selector is scoped per-context so it
   beats the broad `.journal-card img` / `.guide-card img` rules that
   would otherwise stretch it to full width. */
.journal-card .card-link-cue img,
.guide-card .card-link-cue img,
.journal-featured .card-link-cue img,
.story-detail .card-link-cue img,
.card-link-cue img {
  position: static;
  inset: auto;
  width: 18px;
  height: 18px;
  aspect-ratio: auto;
  margin: 0;
  flex-shrink: 0;
}
.guide-card:hover .card-link-cue { opacity: 1; transform: translateY(0); }

/* ---------- Journal ---------- */
.journal {
  background: var(--color-parchment);
  padding-block: var(--space-2xl);
}
.journal .section-head h2 { color: var(--color-charred); }

.journal-card {
  /* Enlarged so three cards fill the same overall width as the
     four guide cards above, and centered in the row via the
     .journal-track rule below. */
  flex: 0 0 340px;
  scroll-snap-align: start;
}
/* Center the three journal cards within the carousel track so the
   row visually lines up with the guides row above. Falls back to
   normal left-aligned scrolling when there isn't room. */
.journal-track {
  justify-content: center;
}
@media (max-width: 900px) {
  .journal-track { justify-content: flex-start; }
}
.journal-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-sm);
}
.journal-date {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 6px;
}
.journal-card h3 {
  font-size: 1.15rem;
  margin-bottom: 6px;
  color: var(--color-charred);
}
.journal-card p:last-child {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}
/* Full-card clickable link for the journal teaser carousel */
.journal-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.journal-card-link img { transition: transform 0.5s ease, box-shadow 0.3s ease; }
.journal-card:hover .journal-card-link img {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
}
.journal-card .card-link-cue {
  color: var(--color-accent-dark);
  opacity: 1;
  transform: none;
  margin-top: 10px;
}
.journal-card:hover .card-link-cue { gap: 10px; }

/* ---------- CTA ---------- */
.cta {
  position: relative;
  color: var(--color-text-light);
  padding-block: var(--space-2xl);
  overflow: hidden;
}
.cta-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.cta-scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(36,52,44,0.85) 0%, rgba(36,52,44,0.5) 60%, rgba(36,52,44,0.3) 100%);
}
.cta-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-lg);
  flex-wrap: wrap;
}
.cta-copy h2 {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  margin-bottom: var(--space-sm);
}
.cta-script { display: none; }

.cta-details { min-width: 260px; }
.contact-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
}
.contact-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
}
.contact-list img { flex-shrink: 0; }

.social-links {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}
.social-links a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--color-border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition);
}
.social-links a:hover,
.social-links a:focus-visible { background: rgba(230, 185, 159, 0.2); border-color: var(--color-peach); }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--color-dark);
  color: rgba(245,239,228,0.75);
  padding-block: var(--space-lg);
}
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
}
.logo-footer .logo-mark { color: var(--color-text-light); }
.footer-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  font-size: 0.8rem;
}
.footer-nav a:hover,
.footer-nav a:focus-visible { color: var(--color-accent); }
.footer-copy { font-size: 0.75rem; }
.footer-copy a:hover,
.footer-copy a:focus-visible { color: var(--color-accent); }

/* =========================================================
   RESPONSIVE OVERRIDES
   ========================================================= */

/* ----- Laptop / narrower desktop ----- */
@media (max-width: 1180px) {
  .primary-nav ul { gap: var(--space-sm); }
  :root { --content-width: 960px; }
}

/* ----- Tablet ----- */
@media (max-width: 1024px) {
  .about-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "photo copy"
      "stats stats";
  }
  .about-grid .polaroid { grid-area: photo; }
  .about-grid .about-copy { grid-area: copy; }
  .about-highlight {
    grid-area: stats;
    border-left: none;
    border-top: 1px solid var(--color-border-dark);
    padding-left: 0;
    padding-top: var(--space-lg);
    margin-top: var(--space-lg);
  }
  .about-highlight-text { max-width: 480px; }
  .feature-grid { gap: var(--space-lg) var(--space-sm); }
}

/* ----- Tablet / Mobile nav breakpoint ----- */
@media (max-width: 900px) {
  .primary-nav { display: none; }
  .nav-toggle { display: flex; }

  .mobile-nav {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0;
    top: 0;
    z-index: 99;
    background: var(--color-dark);
    color: var(--color-text-light);
    padding: 110px var(--gutter) var(--space-lg);
    overflow-y: auto;
  }
  .mobile-nav[hidden] { display: none; }
  .mobile-nav ul { display: flex; flex-direction: column; }
  .mobile-nav a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    border-bottom: 1px solid var(--color-border-light);
    font-size: 1rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .mobile-nav a.is-active { color: var(--color-accent); }
  .mobile-nav-footer {
    margin-top: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
  }
  .mobile-nav-copy { font-size: 0.75rem; color: rgba(245,239,228,0.6); }

  .carousel-btn { display: flex; }
}

/* ----- Small tablet / large phone ----- */
@media (max-width: 767px) {
  :root { --space-2xl: 72px; --space-xl: 56px; }

  .container { padding-inline: 20px; }

  .header-inner { padding-block: 16px; }
  .logo-title { font-size: 1.25rem; }

  .hero { min-height: 100vh; align-items: flex-end; }
  .hero-media img { object-position: 78% center; }
  .hero-content { padding-block: 0 var(--space-xl); max-width: none; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { justify-content: center; }

  .feature-grid { grid-template-columns: repeat(2, 1fr); }

  .about-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "copy"
      "photo"
      "stats";
    gap: var(--space-lg);
  }
  .about-grid .polaroid {
    justify-self: start;
    transform: rotate(0deg);
    width: 100%;
    max-width: 320px;
  }
  .about-highlight-text { max-width: none; }

  .section-head { flex-direction: column; align-items: flex-start; gap: var(--space-sm); }
  .link-arrow-desktop { display: none; }
  .link-arrow-mobile { display: inline-flex; margin-top: var(--space-md); }

  .carousel-btn { display: none; }
  .carousel-dots { display: flex; }

  .guide-card,
  .journal-card { flex-basis: 78vw; }

  .featured-property {
    grid-template-columns: 1fr;
  }
  .property-info .description { max-width: none; }

  .cta-content { flex-direction: column; align-items: flex-start; }
  .cta-script { display: block; }

  .footer-inner { flex-direction: column; align-items: flex-start; gap: var(--space-lg); }
  .footer-nav ul { flex-direction: column; gap: var(--space-sm); width: 100%; }
  .footer-nav a {
    display: flex;
    justify-content: space-between;
    padding-block: 6px;
  }
}

/* ----- Small mobile ----- */
@media (max-width: 360px) {
  .hero-heading { font-size: 2rem; }
}

/* =========================================================
   EXPLORE PAGE (/explore)
   Reuses shared tokens, buttons, carousel, and section
   patterns defined above. Only page-specific layout rules
   live here.
   ========================================================= */

/* ---------- Compact Hero ---------- */
.hero-compact {
  min-height: 56vh;
}

/* ---------- Featured Guide ---------- */
.featured-guide-section {
  background: var(--color-dark);
  color: var(--color-text-light);
  padding-block: var(--space-2xl);
}
.featured-guide {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--space-lg);
  align-items: center;
}
.featured-guide-media {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.featured-guide-media img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.featured-guide-copy .eyebrow { color: var(--color-accent); }
.featured-guide-copy h2 {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  margin-bottom: var(--space-md);
}
.featured-guide-copy p {
  color: rgba(245, 239, 228, 0.85);
  font-weight: 300;
  margin-bottom: var(--space-lg);
  max-width: 400px;
}

/* =========================================================
   BLOCK GRAPHICS
   Decorative artwork tucked into the tan/parchment sections to
   keep them from feeling flat. Placement is opt-in per section
   via `.has-block-graphic` — the parent gets `position: relative`
   and `overflow: hidden` so the artwork can be positioned in
   absolute space without escaping the block.

   Two visual roles:
     .block-graphic--corner  a portrait-oriented flourish tucked
                             into a corner (--top-right,
                             --bottom-left, etc.)
     .block-graphic--band    a horizontal graphic that runs along
                             the bottom edge like an editorial rule

   Graphics are pointer-events off + aria-hidden so they never
   interrupt tab order or block clicks on real content beneath.
   Their opacity is intentionally low so the tan block still
   reads as a background, not as artwork.
   ========================================================= */
.has-block-graphic {
  position: relative;
  overflow: hidden;
}
.has-block-graphic > .container { position: relative; z-index: 1; }

.block-graphic {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  opacity: 0.35;
  /* Blend the artwork into the parchment ground so it stops looking
     like a pasted sticker and starts looking like part of the paper. */
  mix-blend-mode: multiply;
}

/* Corner flourishes — portrait art (native ratio ≈ 4:5). Sized
   generous enough to fill the corner but pulled slightly off-canvas
   so they read as decorative bleed, not as icons. */
.block-graphic--corner {
  width: clamp(220px, 26vw, 360px);
  height: auto;
  aspect-ratio: 1122 / 1402;
}
.block-graphic--top-right {
  top: -40px;
  right: -40px;
}
.block-graphic--top-left {
  top: -40px;
  left: -40px;
}
.block-graphic--bottom-left {
  bottom: -40px;
  left: -40px;
}
.block-graphic--bottom-right {
  bottom: -40px;
  right: -40px;
}

/* Horizontal band — runs the full width along the bottom edge of a
   section as an editorial rule.

   This is now a masked line-art layer rather than an <img>, so the
   artwork takes the section's own ink colour instead of shipping a
   ~700KB PNG with its own palette. Set --art-src inline. */
.block-graphic--band {
  left: 50%;
  bottom: -6%;
  transform: translateX(-50%);
  width: min(1600px, 108%);
  aspect-ratio: 16 / 5;
  opacity: 0.28;
  background-color: var(--color-dark);
  -webkit-mask: var(--art-src) no-repeat center / contain;
          mask: var(--art-src) no-repeat center / contain;
}

/* Tablet / mobile — shrink graphics so they don't dominate the block
   at narrow widths. */
@media (max-width: 767px) {
  .block-graphic--corner {
    width: clamp(160px, 44vw, 220px);
  }
  .block-graphic--top-right,
  .block-graphic--top-left { top: -20px; }
  .block-graphic--bottom-left,
  .block-graphic--bottom-right { bottom: -20px; }
  .block-graphic--top-right,
  .block-graphic--bottom-right { right: -30px; }
  .block-graphic--top-left,
  .block-graphic--bottom-left { left: -30px; }
  .block-graphic--band { bottom: -4%; opacity: 0.22; }
}

/* ---------- Explore by Interest ---------- */
.interests {
  background: var(--color-parchment);
  padding-block: var(--space-xl);
}
.interests h2 {
  color: var(--color-charred);
  margin-bottom: var(--space-lg);
}
.interest-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
}

/* Color cards. Each tile paints from three tone variables set by its
   .interest-tile--<tone> modifier below:
     --tile-from / --tile-to  the diagonal card gradient
     --tile-ink               label, blurb, and icon color
   The badge and its long shadow are derived from --tile-ink, so a new
   tone only needs those three values. */
.interest-tile {
  --tile-from: var(--color-sage);
  --tile-to: var(--color-sage);
  --tile-ink: var(--color-text-light);

  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 28px 26px 30px;
  border-radius: 20px;
  background-image: linear-gradient(150deg, var(--tile-from), var(--tile-to));
  color: var(--tile-ink);
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 14px 32px rgba(36, 52, 44, 0.18);
  transition: transform var(--transition), box-shadow var(--transition);
}
/* Inner top highlight, the soft "lit from above" edge in the reference. */
.interest-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(245, 239, 228, 0.22);
  pointer-events: none;
}
.interest-tile:hover,
.interest-tile:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 22px 44px rgba(36, 52, 44, 0.26);
}

.interest-tile-badge {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  margin-bottom: 4px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--tile-ink) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--tile-ink) 20%, transparent);
  overflow: hidden;
  /* The long, soft cast shadow the reference cards use. */
  box-shadow: 14px 14px 26px color-mix(in srgb, var(--color-charred) 22%, transparent);
}
.interest-tile-badge img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.interest-tile-badge svg {
  width: 34px;
  height: 34px;
  display: block;
}

.interest-tile-label {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  line-height: 1.2;
}
.interest-tile-blurb {
  font-size: 0.9rem;
  font-weight: 300;
  line-height: 1.5;
  color: color-mix(in srgb, var(--tile-ink) 82%, transparent);
}
/* Small status flag (e.g. "This week", "3 guides") marking an active section */
.interest-tile-flag {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  font-family: var(--font-body);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-charred);
  background: rgba(245, 239, 228, 0.94);
  padding: 5px 11px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(36, 52, 44, 0.18);
}

/* ----- Tones (Roam Colorado palette) ----- */
.interest-tile--sage {
  --tile-from: #8a9779;
  --tile-to: var(--color-sage);
}
.interest-tile--accent {
  --tile-from: #d18a6b;
  --tile-to: var(--color-accent-dark);
}
.interest-tile--plum {
  --tile-from: #7a4557;
  --tile-to: var(--color-plum);
}
.interest-tile--dark {
  --tile-from: var(--color-dark);
  --tile-to: var(--color-dark-2);
}
.interest-tile--peach {
  --tile-from: #f0cdb6;
  --tile-to: var(--color-peach);
  --tile-ink: var(--color-charred);
}
.interest-tile--parchment {
  --tile-from: #f1e9dd;
  --tile-to: var(--color-parchment);
  --tile-ink: var(--color-charred);
}
/* Light tones need a darker hairline than the cream one above. */
.interest-tile--peach::before,
.interest-tile--parchment::before {
  border-color: rgba(43, 37, 33, 0.12);
}

/* ---------- Shelley CTA (Explore page) ---------- */
.shelley-cta {
  background: var(--color-cream);
  padding-block: var(--space-2xl);
}
.shelley-cta-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-lg);
}
.shelley-cta-copy h2 {
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  color: var(--color-charred);
  margin-bottom: var(--space-md);
  max-width: 480px;
}
.shelley-cta-copy p {
  color: var(--color-text-muted);
  margin-bottom: var(--space-lg);
  max-width: 460px;
}

/* ----- Explore page / tablet ----- */
@media (max-width: 1024px) {
  .featured-guide { gap: var(--space-md); }

  .interest-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .feature-item img { width: 70px; height: 70px; }
}

/* ----- Explore page / mobile ----- */
@media (max-width: 767px) {
  .hero-compact { min-height: 62vh; }

  .destination-card { flex-basis: 78vw; }

  .featured-guide { grid-template-columns: 1fr; }
  .featured-guide-copy p { max-width: none; }

  .interest-grid {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }

  .feature-grid { grid-template-columns: 1fr; }
  .feature-item img { width: 60px; height: 60px; margin-bottom: var(--space-sm); }

  .shelley-cta-grid {
    grid-template-columns: 1fr;
    justify-items: start;
  }
  .shelley-cta-copy h2,
  .shelley-cta-copy p { max-width: none; }
}

/* =========================================================
   MEET SHELLEY PAGE (/meet-shelley)
   Reuses shared tokens, buttons, carousel, eyebrow/link-arrow,
   .about-copy, .polaroid, .featured-guide, and .feature-grid
   patterns defined above. Only page-specific layout rules
   live here.
   ========================================================= */

/* ---------- Hero ---------- */
.bio-hero {
  background: var(--color-cream);
  padding-block: var(--space-2xl);
}
.bio-hero-grid {
  display: grid;
  grid-template-columns: 1.2fr auto;
  align-items: center;
  gap: var(--space-lg);
}
.bio-hero-copy p { max-width: 480px; }
.bio-hero-actions {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
  margin-top: var(--space-md);
}

/* ---------- Personal Story ---------- */
.story {
  background: var(--color-parchment);
  padding-block: var(--space-2xl);
}

/* ---------- How I Help ---------- */
.services {
  background: var(--color-cream);
  padding-block: var(--space-2xl);
}
.services h2 {
  color: var(--color-charred);
  max-width: 640px;
  margin-bottom: var(--space-lg);
}
.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg) var(--space-xl);
}
.service-block h3 {
  font-size: 1.15rem;
  color: var(--color-charred);
  margin-bottom: 8px;
}
.service-block p {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin-bottom: var(--space-sm);
  max-width: 360px;
}

/* ---------- My Approach ---------- */
.approach {
  background: var(--color-dark);
  color: var(--color-text-light);
  padding-block: var(--space-2xl);
}
.approach h2 {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  max-width: 620px;
  margin-bottom: var(--space-lg);
}
.approach-grid {
  grid-template-columns: repeat(3, 1fr);
}
.approach .feature-item p { max-width: 320px; }

/* ---------- Around the Valley ---------- */
.valley {
  background: var(--color-parchment);
  padding-block: var(--space-2xl);
}
.valley h2 {
  color: var(--color-charred);
  margin-bottom: var(--space-lg);
}
.valley-card {
  flex: 0 0 300px;
  scroll-snap-align: start;
}
.valley-card > img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-sm);
}
.valley-card p {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

/* ---------- Professional Affiliation ---------- */
.affiliation {
  background: var(--color-cream);
  padding-block: var(--space-xl);
  border-top: 1px solid var(--color-border-dark);
}
.affiliation-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-lg);
  align-items: start;
}
.affiliation-logo { width: 160px; }
.affiliation-copy h2 {
  color: var(--color-charred);
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  margin-bottom: var(--space-sm);
  max-width: 560px;
}
.affiliation-copy > p {
  color: var(--color-text-muted);
  max-width: 560px;
  margin-bottom: var(--space-md);
}
.affiliation-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm) var(--space-lg);
}
.affiliation-details dt {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 2px;
}
.affiliation-details dd {
  margin: 0;
  font-size: 0.9rem;
  font-style: italic;
  color: var(--color-text-muted);
}

/* ---------- Final CTA ---------- */
.bio-cta {
  background: var(--color-dark);
  color: var(--color-text-light);
  padding-block: var(--space-2xl);
  text-align: center;
}
.bio-cta-inner {
  max-width: 520px;
  margin-inline: auto;
}
.bio-cta h2 {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  margin-bottom: var(--space-sm);
}
.bio-cta p {
  color: rgba(245, 239, 228, 0.85);
  font-weight: 300;
  margin-bottom: var(--space-lg);
}

/* ----- Meet Shelley page / tablet ----- */
@media (max-width: 1024px) {
  .bio-hero-grid { grid-template-columns: 1fr; }
  .bio-hero-grid .polaroid { justify-self: start; }
  .bio-hero-copy p { max-width: 560px; }

  .affiliation-grid { grid-template-columns: 1fr; }
}

/* ----- Meet Shelley page / mobile ----- */
@media (max-width: 767px) {
  .bio-hero-grid .polaroid {
    transform: rotate(0deg);
    width: 100%;
    max-width: 320px;
  }

  .services-grid { grid-template-columns: 1fr; gap: var(--space-lg); }

  .approach-grid { grid-template-columns: 1fr; }

  .valley-card { flex-basis: 78vw; }

  .affiliation-details { grid-template-columns: 1fr; }
}

/* =========================================================
   JOURNAL PAGE (/journal)
   Reuses shared tokens, buttons, carousel, eyebrow/link-arrow,
   .hero/.hero-compact, .featured-guide, .tag, .interests, and
   .shelley-cta/.polaroid patterns defined above. Only
   page-specific layout rules live here.
   ========================================================= */

/* ---------- Archive header (Journal + Interest/Location pages) ---------- */
/* The small centered title used at the top of /journal and every
   /explore/<slug>/ archive page — the only thing above the grid. */
.archive-header {
  background: var(--color-parchment);
  padding-block: var(--space-xl) var(--space-lg);
  text-align: center;
}
.archive-header .eyebrow { color: var(--color-accent); }
.archive-header h1 {
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  color: var(--color-charred);
}

/* ---------- Story grid (Journal + every Interest/Location page) ---------- */
.stories {
  background: var(--color-cream);
  padding-block: var(--space-lg) var(--space-2xl);
}
.stories-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg) var(--space-md);
  list-style: none;
}

.story-card {
  position: relative;
  display: block;
  color: inherit;
}
.story-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-sm);
  transition: opacity var(--transition);
}
.story-card:hover img,
.story-card:focus-visible img { opacity: 0.9; }
.story-card h3 {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  text-align: center;
  color: var(--color-charred);
}
.story-card .story-meta {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  color: var(--color-text-muted);
  margin-bottom: 6px;
}

/* ---------- Newsletter ---------- */
.newsletter {
  background: var(--color-cream);
  padding-block: var(--space-2xl);
  text-align: center;
}
.newsletter-inner {
  max-width: 480px;
  margin-inline: auto;
}
.newsletter h2 {
  color: var(--color-charred);
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  margin-bottom: var(--space-sm);
}
.newsletter p {
  color: var(--color-text-muted);
  margin-bottom: var(--space-lg);
}
.newsletter-form {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-end;
  justify-content: center;
  flex-wrap: wrap;
}
.newsletter-field {
  text-align: left;
  flex: 1 1 260px;
}
.newsletter-field label {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 6px;
}
.newsletter-field input {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  color: var(--color-text);
  font-family: inherit;
  font-size: 0.9rem;
}
.newsletter-field input:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.newsletter-form .btn { flex: 0 0 auto; }

/* ----- Journal / archive pages / tablet ----- */
@media (max-width: 1024px) {
  .stories-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ----- Journal / archive pages / mobile ----- */
@media (max-width: 767px) {
  .stories-grid { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }

  .newsletter-form { flex-direction: column; align-items: stretch; }
  .newsletter-form .btn { flex: 1 1 auto; justify-content: center; }
}

/* ----- Placeholder content ----- */
/* Applied to a Featured Property / Featured Guide / Featured Story slot
   (or an individual card) when no real content has been marked featured
   yet. Uses the same layout, dimensions, and typography as real content
   so the page never looks broken — just clearly unfinished. */
.is-placeholder {
  position: relative;
}
.is-placeholder img { opacity: 0.55; }
.is-placeholder::before {
  content: "Placeholder";
  position: absolute;
  top: var(--space-sm, 12px);
  left: var(--space-sm, 12px);
  z-index: 2;
  padding: 0.3em 0.75em;
  border-radius: var(--radius-sm, 4px);
  background: var(--color-charred);
  color: var(--color-text-light);
  font-family: var(--font-sans, inherit);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.is-placeholder .price,
.is-placeholder .specs,
.is-placeholder .address { display: none; }

/* ----- Contact modal ----- */
/* Opened by any element with [data-open-contact] (see js/contact-modal.js).
   Uses the native <dialog> element for backdrop, focus trap, and Esc-to-close. */
.contact-modal {
  width: min(520px, calc(100vw - 48px));
  max-height: min(680px, calc(100vh - 48px));
  padding: 0;
  border: none;
  border-radius: var(--radius-md);
  background: var(--color-white);
  box-shadow: var(--shadow-card);
}
.contact-modal::backdrop {
  background: rgba(36, 52, 44, 0.55);
}
.contact-modal-inner {
  position: relative;
  padding: var(--space-lg) var(--space-md) var(--space-md);
  overflow-y: auto;
  max-height: inherit;
}
.contact-modal-close {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.contact-modal-close:hover,
.contact-modal-close:focus-visible {
  background: var(--color-parchment);
  color: var(--color-text);
}
.contact-modal-inner .eyebrow { color: var(--color-accent); }
.contact-modal-inner h2 {
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  color: var(--color-charred);
  margin-bottom: var(--space-xs, 8px);
}
.contact-modal-inner > p {
  color: var(--color-text-muted);
  margin-bottom: var(--space-lg);
}
.contact-modal-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.contact-modal-field label {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 6px;
}
.contact-modal-field input,
.contact-modal-field select,
.contact-modal-field textarea {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  color: var(--color-text);
  font-family: inherit;
  font-size: 0.9rem;
}
.contact-modal-field textarea {
  resize: vertical;
  min-height: 100px;
}
.contact-modal-field input:focus-visible,
.contact-modal-field select:focus-visible,
.contact-modal-field textarea:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.contact-modal-form .btn {
  margin-top: var(--space-xs, 8px);
  justify-content: center;
}
.contact-modal-note {
  margin-top: var(--space-sm);
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

/* =========================================================
   STORY DETAIL — individual article pages at /journal/<slug>/
   ========================================================= */

.story-detail-hero {
  position: relative;
  height: 62vh;
  min-height: 460px;
  max-height: 720px;
  overflow: hidden;
}
.story-detail-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.story-detail-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(28, 41, 33, 0.15) 0%,
    rgba(28, 41, 33, 0.0) 30%,
    rgba(28, 41, 33, 0.55) 100%
  );
}
/* Pin the hero's .container to the bottom so its max-width + gutter
   padding still apply (keeps the title/tags off the screen edge). */
.story-detail-hero .container {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}
.story-detail-hero-copy {
  padding: var(--space-xl) 0;
  color: var(--color-text-light);
}
.story-detail-hero-copy .eyebrow {
  color: var(--color-peach);
  margin-bottom: var(--space-sm);
}
.story-detail-dek {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  line-height: 1.4;
  color: var(--color-text-light);
  max-width: 680px;
  margin: 0 0 var(--space-md);
  text-shadow: 0 1px 12px rgba(28, 41, 33, 0.5);
}
.story-detail-hero-copy h1 {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 5vw, 3.75rem);
  line-height: 1.05;
  margin: 0 0 var(--space-md);
  max-width: 820px;
  color: var(--color-text-light);
}
.story-detail-meta {
  font-family: var(--font-body);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-peach);
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
  align-items: center;
}
.story-detail-meta span::after {
  content: "•";
  margin-left: var(--space-md);
  opacity: 0.6;
}
.story-detail-meta span:last-child::after { content: none; }

.story-detail {
  padding: var(--space-2xl) 0;
  background: var(--color-cream);
}
.story-detail-body {
  max-width: 720px;
  margin: 0 auto;
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.75;
  color: var(--color-text);
}
.story-detail-body > p:first-of-type::first-letter {
  font-family: var(--font-heading);
  font-size: 4.5rem;
  line-height: 0.9;
  float: left;
  margin: 0.08em 0.12em 0 -0.05em;
  color: var(--color-accent);
}
.story-detail-body p { margin: 0 0 1.4em; }
.story-detail-body h2 {
  font-family: var(--font-heading);
  font-size: 1.85rem;
  line-height: 1.2;
  margin: 2.4em 0 0.8em;
  color: var(--color-charred);
}
.story-detail-body h3 {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  margin: 2em 0 0.5em;
  color: var(--color-charred);
}
.story-detail-body a {
  color: var(--color-accent-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.story-detail-body a:hover { color: var(--color-plum); }
.story-detail-body blockquote {
  border-left: 3px solid var(--color-accent);
  padding: 0.4em 0 0.4em 1.4em;
  margin: 2em 0;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.35rem;
  line-height: 1.4;
  color: var(--color-plum);
}
.story-detail-body figure {
  margin: 2.4em 0;
}
/* Body images stay within the reading column so they don't overwhelm
   the article. (Previously .wide broke out full-bleed edge-to-edge.) */
.story-detail-body figure.wide {
  margin-left: 0;
  margin-right: 0;
  max-width: 100%;
}
.story-detail-body figure img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-md);
}
.story-detail-body figure.wide img { border-radius: var(--radius-md); }
.story-detail-body figcaption {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--color-text-muted);
  padding: 0.6em 0 0;
  font-style: italic;
}
.story-detail-body .callout {
  background: var(--color-parchment);
  border-left: 4px solid var(--color-plum);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-sm);
  margin: 2em 0;
}
.story-detail-body .callout p { margin: 0 0 0.6em; }
.story-detail-body .callout p:last-child { margin: 0; }
.story-detail-body .callout strong {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  color: var(--color-plum);
  letter-spacing: 0.02em;
}
.story-detail-body .placeholder-note {
  display: inline;
  background: rgba(200, 121, 89, 0.14);
  color: var(--color-accent-dark);
  padding: 0.05em 0.4em;
  border-radius: 3px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.95em;
  border-bottom: 1px dashed var(--color-accent);
}

.story-detail-footer {
  max-width: 720px;
  margin: var(--space-2xl) auto 0;
  padding-top: var(--space-xl);
  border-top: 1px solid var(--color-border-dark);
}
.story-detail-footer .eyebrow { color: var(--color-text-muted); }
.story-detail-footer .back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-body);
  color: var(--color-accent-dark);
  text-decoration: none;
  font-weight: 500;
  margin-top: var(--space-md);
}
.story-detail-footer .back-link:hover { color: var(--color-plum); }

@media (max-width: 720px) {
  .story-detail-hero { height: 52vh; min-height: 380px; }
  .story-detail-hero-copy { padding: var(--space-lg) 0; }
  .story-detail-body { font-size: 1.05rem; line-height: 1.7; }
  .story-detail-body > p:first-of-type::first-letter {
    font-size: 3.5rem;
  }
}

/* =========================================================
   CURRENTLY SHOWING — full listings grid
   ========================================================= */
/* ---------- Homepage: This Week (Arts & Events) ----------
   Three towns of equal standing, so unlike the Explore landing (lead +
   pair) this grid is symmetrical. Cards stretch to a shared height and
   pin their CTA to the bottom, so a three-line Grand Junction headline
   doesn't leave the Fruita card's link floating mid-panel. */
.home-arts {
  padding: var(--space-2xl) 0;
  background: var(--color-warm-white, #faf7f0);
}
.home-arts-grid {
  list-style: none;
  padding: 0;
  margin: var(--space-xl) 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
  align-items: stretch;
}
.home-arts-grid > li { display: flex; }

.home-arts-card {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  border-radius: var(--radius-lg, 18px);
  text-decoration: none;
  color: var(--color-cream);
  box-shadow: var(--shadow-card);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.home-arts-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 46px rgba(36, 52, 44, 0.24);
}
.home-arts-card--forest { background: var(--color-dark); }
.home-arts-card--terracotta { background: var(--color-accent); }
.home-arts-card--teal { background: var(--color-teal); }

.home-arts-card__media {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}
.home-arts-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.home-arts-card:hover .home-arts-card__media img { transform: scale(1.04); }

/* flex-grow on the body is what equalises the cards: the summary takes the
   slack and the cue sits on the baseline in all three. */
.home-arts-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: var(--space-md);
  flex: 1;
}
.home-arts-card__head { display: flex; align-items: center; gap: 12px; }
.home-arts-card__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 12px;
  background: rgba(241, 234, 223, 0.12);
}
.home-arts-card__badge img { width: 30px; height: 30px; }
.home-arts-card__meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.home-arts-card__town {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.9;
}
.home-arts-card__date {
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.72;
}
.home-arts-card__title {
  font-family: var(--font-heading);
  font-size: 1.24rem;
  line-height: 1.22;
}
.home-arts-card__summary {
  font-size: 0.86rem;
  line-height: 1.55;
  opacity: 0.86;
  flex: 1;
}
.home-arts-card__cue {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.home-arts-card__cue svg { transition: transform var(--transition); }
.home-arts-card:hover .home-arts-card__cue svg { transform: translateX(4px); }

@media (max-width: 900px) {
  .home-arts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .home-arts-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .home-arts-card,
  .home-arts-card__media img,
  .home-arts-card__cue svg { transition: none; }
  .home-arts-card:hover { transform: none; }
  .home-arts-card:hover .home-arts-card__media img { transform: none; }
  .home-arts-card:hover .home-arts-card__cue svg { transform: none; }
}

/* Two outbound links now share the listings header (BHGRE + Instagram),
   since the Instagram strip that used to carry the second one is gone. */
.section-head-links {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}
.section-foot-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.listings {
  padding: var(--space-2xl) 0;
  background: var(--color-cream);
}
.listings-grid {
  list-style: none;
  padding: 0;
  margin: var(--space-xl) 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-lg);
}
.listing-card {
  background: var(--color-white);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform var(--transition), box-shadow var(--transition);
}
.listing-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 44px rgba(36, 52, 44, 0.20);
}
.listing-card a {
  color: inherit;
  text-decoration: none;
  display: block;
}
.listing-card-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.listing-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition);
}
.listing-card:hover .listing-card-media img {
  transform: scale(1.03);
}
.listing-card-media .tag {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
  background: var(--color-cream);
  color: var(--color-dark);
  padding: 6px 12px;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
}
.listing-card-body {
  padding: var(--space-md) var(--space-lg) var(--space-lg);
}
.listing-card-headline {
  font-family: var(--font-heading);
  font-style: italic;
  color: var(--color-plum);
  font-size: 1.1rem;
  margin: 0 0 var(--space-xs);
}
.listing-card-price {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.85rem;
  color: var(--color-charred);
  margin: 0 0 6px;
  line-height: 1;
}
.listing-card-specs {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-sm);
}
.listing-card-address {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-text);
  margin: 0;
}

/* Featured property — headline treatment above price */
.property-headline {
  font-family: var(--font-heading);
  font-style: italic;
  color: var(--color-plum);
  font-size: 1.35rem;
  margin: 0 0 var(--space-sm);
  line-height: 1.2;
}


/* BHG affiliation ribbon — very small accent at bottom of hero */
.bhg-ribbon {
  position: absolute;
  bottom: var(--space-md);
  right: var(--space-lg);
  z-index: 2;
  font-family: var(--font-body);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(245, 239, 228, 0.7);
  padding: 4px 10px;
  border-left: 2px solid #339933;
}

/* =========================================================
   JOURNAL INDEX — featured + sidebar + grid (magazine layout)
   ========================================================= */
.journal-index-header .archive-intro {
  max-width: 620px;
  margin: var(--space-sm) auto 0;
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}
.journal-index {
  padding: var(--space-2xl) 0;
  background: var(--color-cream);
}
.journal-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--space-2xl);
  align-items: start;
}

/* ---- Featured (most recent) ---- */
.journal-featured { margin-bottom: var(--space-2xl); }
.journal-featured-link {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  background: var(--color-white);
  border-radius: var(--radius-lg, 18px);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.journal-featured-link:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 50px rgba(36, 52, 44, 0.22);
}
.journal-featured-media {
  position: relative;
  min-height: 340px;
  overflow: hidden;
}
.journal-featured-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.journal-featured-link:hover .journal-featured-media img { transform: scale(1.05); }
.journal-featured-media .tag {
  position: absolute;
  top: var(--space-md);
  left: var(--space-md);
  z-index: 1;
  background: var(--color-plum);
  color: var(--color-text-light);
  padding: 6px 14px;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
}
.journal-featured-body {
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.journal-featured-kicker {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-sm);
}
.journal-featured-body h2 {
  font-family: var(--font-heading);
  font-size: 2.4rem;
  line-height: 1.08;
  color: var(--color-charred);
  margin-bottom: var(--space-sm);
}
.journal-featured-meta {
  font-family: var(--font-body);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-md);
}
.journal-featured-summary {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--color-text);
  margin-bottom: var(--space-md);
}
.journal-featured-body .card-link-cue {
  color: var(--color-accent-dark);
  opacity: 1;
  transform: none;
}
.journal-featured-link:hover .card-link-cue { gap: 10px; }

/* ---- "More from the Journal" ---- */
.journal-more-head {
  border-top: 1px solid var(--color-line, rgba(36,52,44,0.14));
  padding-top: var(--space-lg);
  margin-bottom: var(--space-lg);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
}
.journal-more-head h2 {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  color: var(--color-charred);
}
.journal-more-count {
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-top: 2px;
}
.journal-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* ---- Sort toggle: Latest / Most Read ----
   Reorders the mosaic; never filters it. The active pill is filled so
   the current ordering is readable at a glance rather than inferred. */
.journal-sort {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: rgba(36, 52, 44, 0.06);
  border-radius: var(--radius-pill, 999px);
}
.sort-pill {
  display: inline-block;
  padding: 7px 16px;
  border-radius: var(--radius-pill, 999px);
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-text-muted);
  white-space: nowrap;
  transition: background var(--transition), color var(--transition);
}
.sort-pill:hover { color: var(--color-charred); }
.sort-pill.is-active {
  background: var(--color-dark);
  color: var(--color-cream);
}

/* ---- Journal mosaic ----
   Six-column bed so cards can claim 2, 3 or 4 columns and still land
   flush. Widths come from a fixed cycle in journal-render.js, so the
   irregular rhythm is deliberate and identical on every load. `dense`
   backfills the gap a short final page would otherwise leave. */
.journal-mosaic {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-flow: row dense;
  gap: var(--space-lg) var(--space-md);
  list-style: none;
}
.mosaic-item { display: block; }
.mosaic-item--2 { grid-column: span 2; }
.mosaic-item--3 { grid-column: span 3; }
.mosaic-item--4 { grid-column: span 4; }

/* Crop follows width, so a wide card reads as a different card rather
   than the same one stretched. */
.mosaic-item--portrait .story-card img { aspect-ratio: 4 / 5; }
.mosaic-item--square   .story-card img { aspect-ratio: 1 / 1; }
.mosaic-item--wide     .story-card img { aspect-ratio: 16 / 9; }

/* Headline scales with the card so wide features carry more weight. */
.mosaic-item--3 .story-card h3 { font-size: 1.3rem; }
.mosaic-item--4 .story-card h3 { font-size: 1.5rem; }

.journal-mosaic .story-card h3,
.journal-mosaic .story-card .story-meta { text-align: left; }
.journal-mosaic .story-card .tag {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  background: var(--color-dark);
  color: var(--color-cream);
  padding: 5px 11px;
  border-radius: var(--radius-pill, 999px);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Collapse to a simpler rhythm before the narrowest cards get unreadable. */
@media (max-width: 900px) {
  .mosaic-item--2,
  .mosaic-item--3,
  .mosaic-item--4 { grid-column: span 3; }
  .mosaic-item--portrait .story-card img,
  .mosaic-item--square .story-card img,
  .mosaic-item--wide .story-card img { aspect-ratio: 4 / 3; }
  .mosaic-item--3 .story-card h3,
  .mosaic-item--4 .story-card h3 { font-size: 1.15rem; }
}
@media (max-width: 560px) {
  .journal-mosaic { grid-template-columns: 1fr; }
  .mosaic-item--2,
  .mosaic-item--3,
  .mosaic-item--4 { grid-column: span 1; }
}

/* ---- Pagination ---- */
.journal-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-line, rgba(36,52,44,0.14));
}
.page-numbers { display: inline-flex; gap: 4px; }
.page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  padding: 0 12px;
  border-radius: var(--radius-pill, 999px);
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--color-charred);
  transition: background var(--transition), color var(--transition);
}
.page-btn:hover { background: rgba(36, 52, 44, 0.08); }
.page-btn.is-current {
  background: var(--color-accent);
  color: var(--color-cream);
}
.page-btn--nav { letter-spacing: 0.04em; }
.page-btn.is-disabled {
  opacity: 0.32;
  pointer-events: none;
}

/* ---- Sidebar ---- */
.journal-sidebar {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}
.author-card {
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  text-align: center;
  box-shadow: var(--shadow-card);
}
.author-card-photo {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto var(--space-sm);
  border: 3px solid var(--color-parchment);
}
.author-card-name {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  color: var(--color-charred);
}
.author-card-role {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-sm);
}
.author-card-bio {
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin-bottom: var(--space-md);
}
.btn-sm { padding: 0.5em 1.2em; font-size: 0.8rem; }
.author-card-social {
  display: flex;
  justify-content: center;
  gap: var(--space-md);
  margin-top: var(--space-md);
}
.author-card-social a { opacity: 0.7; transition: opacity 0.2s ease; }
.author-card-social a:hover { opacity: 1; }

/* ---- Category panel (dark rows with counts) ---- */
.category-panel {
  background: var(--color-charred);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
}
.category-panel-title {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-peach);
  margin-bottom: var(--space-md);
}
.category-list { list-style: none; margin: 0; padding: 0; }
.category-list li { margin-bottom: 8px; }
.category-list li:last-child { margin-bottom: 0; }
.category-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: rgba(245, 239, 228, 0.06);
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}
.category-row:hover {
  background: var(--color-plum);
  transform: translateX(3px);
}
.category-row-label {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-text-light);
}
.category-row-count {
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--color-peach);
}

/* ---- Responsive ---- */
@media (max-width: 960px) {
  .journal-layout { grid-template-columns: 1fr; }
  .journal-sidebar { position: static; flex-direction: row; flex-wrap: wrap; }
  .author-card, .category-panel { flex: 1 1 280px; }
}
@media (max-width: 700px) {
  .journal-featured-link { grid-template-columns: 1fr; }
  .journal-featured-media { min-height: 240px; }
  .journal-featured-body h2 { font-size: 1.8rem; }
  .journal-grid { grid-template-columns: 1fr; }
  .journal-sidebar { flex-direction: column; }
}

/* =========================================================
   ARTICLE TAG CHIPS (in story hero, link to explore archives)
   ========================================================= */
.article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: var(--space-md);
}
.article-tag {
  display: inline-flex;
  align-items: center;
  padding: 7px 16px;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-light);
  background: rgba(245, 239, 228, 0.14);
  border: 1px solid rgba(245, 239, 228, 0.35);
  border-radius: 100px;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.article-tag:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  transform: translateY(-1px);
}
.article-tag-place {
  background: transparent;
}
.article-tag-place:hover {
  background: var(--color-plum);
  border-color: var(--color-plum);
}

/* =========================================================
   TRAIL / LINK EMBED CARD (e.g. AllTrails) — Roam-styled
   ========================================================= */
.story-detail-body .trail-embed {
  display: flex;
  margin: 2.6em 0;
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-white);
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-card);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.story-detail-body .trail-embed:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 42px rgba(36, 52, 44, 0.20);
}
.trail-embed-media {
  flex: 0 0 210px;
  position: relative;
  overflow: hidden;
}
.trail-embed-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.story-detail-body .trail-embed:hover .trail-embed-media img { transform: scale(1.05); }
.trail-embed-body {
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.trail-embed-source {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-sage);
  margin-bottom: 8px;
}
.trail-embed-source .dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: #428813;               /* AllTrails green — small nod, not their logo */
  box-shadow: 0 0 0 3px rgba(66,136,19,0.15);
}
.trail-embed-title {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  line-height: 1.15;
  color: var(--color-charred);
  margin-bottom: 6px;
}
.trail-embed-desc {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--color-text-muted);
  margin-bottom: 14px;
}
.trail-embed-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-dark);
}
.story-detail-body .trail-embed:hover .trail-embed-cta { gap: 10px; }
@media (max-width: 600px) {
  .story-detail-body .trail-embed { flex-direction: column; }
  .trail-embed-media { flex-basis: 190px; height: 190px; }
}