/*
 * Historical Badass — integrated stylesheet
 *
 * Loaded only on HB-relevant pages (single profile, archive, timeline,
 * map) by hb_enqueue_assets() in historical-badass.php. Inherits all
 * global AJ nav / footer chrome; scopes HB-specific styles to the HB
 * page containers.
 *
 * Design notes:
 *  - Uses AJ Typekit stack (acumin-pro-extra-condensed, chaparral-pro,
 *    proxima-nova, proxima-nova-condensed) rather than HB's standalone
 *    font stack (Bebas Neue / Barlow / Lora).
 *  - Uses AJ color tokens (cream, dark, orange = #DE761C) rather than
 *    HB's standalone palette. AJ orange is warmer and closer to the
 *    rest of the site than HB's original #F77F00.
 *  - Preserves the 9-color activity palette — it's load-bearing
 *    semantics for timeline lanes + map pins + swatches. Tuned
 *    slightly so saturations feel at home against cream rather than
 *    black.
 *  - Story hero is 70vh instead of 85vh, with a smaller title so the
 *    HB profile reads as an AJ department rather than a standalone
 *    site. Magazine features already own the 100vh hero treatment.
 */

/* ════════════════════════════════════
   VARIABLES (scoped to HB pages)
   ════════════════════════════════════ */
.single-historical_badass,
.post-type-archive-historical_badass,
.page-template-page-historical-badass,
.page-template-page-historical-badass-all,
.page-template-page-timeline,
.page-template-page-map {
  --hb-cream:        #F5F0E8;
  --hb-cream-warm:   #FBF6F0;
  --hb-cream-band:   #EFE8DA;
  --hb-cream-dark:   #EDE7D9;
  --hb-dark:         #1C1C1A;
  --hb-dark-soft:    #2A2925;
  --hb-orange:       #DE761C;
  --hb-orange-dark:  #BF4C20;
  --hb-text:         #2A2925;
  --hb-text-mid:     #5A5750;
  --hb-text-light:   #8A8780;
  --hb-rule:         rgba(42, 36, 32, 0.12);
  --hb-rule-soft:    rgba(42, 36, 32, 0.06);

  /* Activity palette — tuned to read on cream without losing identity.
     These are the same hues HB used standalone (climbing red, aviation
     purple, culture yellow, etc.) but balanced slightly toward AJ warmth.
     Tested against cream (#F5F0E8) and dark (#1C1C1A) surfaces. */
  --act-climbing:     #D23A28;  /* red */
  --act-culture:      #E8C235;  /* yellow */
  --act-cycling:      #6BA4C9;  /* light blue */
  --act-earth:        #B89968;  /* tan/ochre */
  --act-exploration:  #8FA876;  /* sage green */
  --act-outdoor_rec:  #D89022;  /* burnt orange */
  --act-snow_sports:  #E56A9A;  /* pink */
  --act-water_sports: #2277BE;  /* deep blue */
  --act-neutral:      rgba(42, 36, 32, 0.3);

  /* Place category palette — quieter than activities since places are
     reference pins, not editorial content. Tested against cream and
     against the muted gray map background so categories read at a glance
     without competing with story (orange) or event (activity) pins. */
  --place-natural-history-museums: #5B7B8A;  /* slate teal — institutional */
  --place-dark-sky:                #2C2D5C;  /* deep indigo — night sky */
  --place-cultural-centers:        #E8B547;  /* honey amber — warm/human */
  --place-film-festivals:          #8FA876;  /* sage green — gathering/community */
  --place-raptors-sites:           #A6633A;  /* warm sepia — raptor plumage */
  --place-land-art:                #8B7BA8;  /* muted lavender — art without preciousness */
  --place-state-highpoints:        #3D6B8C;  /* steel blue — alpine */
  --place-fire-lookouts-rentable:  #A8534A;  /* muted brick — fire watch */
  --place-cryptid-hotspots:        #7DA3C7;  /* soft sky blue — whimsy & fun */
}

/* ════════════════════════════════════
   ACTIVITY SWATCH CLASSES
   Shared by filter chips, mobile feed pills, timeline dots, map pins.
   Kept at the top of the file so subsequent rules can layer on.
   ════════════════════════════════════ */
.swatch-climbing     { background-color: var(--act-climbing); }
.swatch-culture      { background-color: var(--act-culture); }
.swatch-cycling      { background-color: var(--act-cycling); }
.swatch-earth        { background-color: var(--act-earth); }
.swatch-exploration  { background-color: var(--act-exploration); }
.swatch-outdoor_rec  { background-color: var(--act-outdoor_rec); }
.swatch-snow_sports  { background-color: var(--act-snow_sports); }
.swatch-water_sports { background-color: var(--act-water_sports); }


/* ════════════════════════════════════
   SINGLE PROFILE — v2.2.0
   Contained band + unified grid. The band is shaped by the image
   (flex-based, image is the dominant element, band height follows).
   No full-bleed hero — HB never competes with feature stories.
     - Cream-band background subtly articulates the hero zone
     - Image auto-sizes by aspect via .is-vertical / .is-horizontal /
       .is-square classes set by the template (based on image width/height)
     - Dates anchor to the top of the body column, beside paragraph one
     - Same 1200px container + same 48px inner padding top-to-bottom
       so hero and body read as one composition
     - Sequoia end bug: 20px, dark, centered
   AJ photo dimension system preserved inside the body:
     - figure / img by default breaks out past column (size-full)
     - .aj-inline class constrains to column width
   Cream variant is shared with body so there's no "slapped on" break.
   ════════════════════════════════════ */

.hb-single {
  background: var(--hb-cream);
}

/* ── PROFILE SHELL — unified container, 1200px ────────────── */
.hb-profile {
  max-width: 1200px;
  margin: 40px auto 0;
}

/* ── HERO BAND — shaped by image ──────────────────────────
   Flex, baseline-aligned. The image is the dominant element;
   band height follows. No orphan rectangles because there's
   no empty container — the band IS sized to its contents. */
.hb-single-band {
  background: var(--hb-cream-band);
  padding: 40px 48px;
}

.hb-single-band-inner {
  display: flex;
  align-items: flex-end;
  gap: 48px;
}

.hb-single-band-text {
  flex: 1 1 auto;
  min-width: 0;
  padding-bottom: 12px;
}

/* Vertical variant: constrain the text column so the image pulls left
   into balance. Without this, flex gives the text column all the
   remaining room and the image feels pinned to the far right edge. */
.hb-single-band.is-vertical .hb-single-band-text {
  max-width: 520px;
}

.hb-single-band-image {
  flex: 0 0 auto;
  line-height: 0;
}

.hb-single-band-image img {
  display: block;
  height: auto;
  filter: saturate(0.88) contrast(1.02);
}

/* Aspect-driven widths. Template auto-detects image aspect and
   adds one of these classes to .hb-single-band. Each class sets
   the image column width; the band height follows naturally
   from the image's intrinsic height at that width. */
.hb-single-band.is-vertical   .hb-single-band-image img { width: 340px; }
.hb-single-band.is-horizontal .hb-single-band-image img { width: 680px; }
.hb-single-band.is-square     .hb-single-band-image img { width: 420px; }

/* Hero typography */
.hb-single-eyebrow {
  font-family: proxima-nova-condensed, sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--hb-orange);
  margin: 0 0 16px;
}

.hb-single-title {
  font-family: acumin-pro-extra-condensed, sans-serif;
  font-weight: 700;
  font-size: clamp(44px, 5vw, 64px);
  line-height: 0.98;
  letter-spacing: 0.01em;
  color: var(--hb-text);
  text-transform: uppercase;
  margin: 0;
}

.hb-single-oneliner {
  font-family: chaparral-pro, Georgia, serif;
  font-style: italic;
  font-size: 20px;
  line-height: 1.35;
  color: var(--hb-orange);
  max-width: 520px;
  margin: 14px 0 0;
}

.hb-single-subtitle {
  font-family: chaparral-pro, Georgia, serif;
  font-style: italic;
  font-size: 17px;
  line-height: 1.4;
  color: var(--hb-text-mid);
  max-width: 540px;
  margin: 12px 0 0;
}

.hb-single-meta {
  font-family: proxima-nova-condensed, sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hb-text-light);
  margin: 20px 0 0;
}

/* ── ARTICLE BODY — continuous with hero band ─────────────
   Same 1200px container, same 48px inner padding. Body starts
   immediately below the band; dates sit at the top of the body
   column, beside paragraph one. */
.hb-single-article-wrap {
  background: var(--hb-cream);
  position: relative;
}

.hb-single-article {
  padding: 48px;
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 48px;
}

/* Dates rail — editorial context, anchored to lead paragraph */
.hb-single-dates {
  font-family: proxima-nova-condensed, sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hb-text-light);
  line-height: 1.3;
}

.hb-single-dates-label {
  display: block;
  margin-top: 4px;
}
.hb-single-dates-label:first-child { margin-top: 0; }

.hb-single-dates-year {
  font-family: chaparral-pro, Georgia, serif;
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--hb-orange);
  margin: 2px 0 12px;
  display: block;
}
.hb-single-dates-year:last-child { margin-bottom: 0; }

/* No-op stubs for legacy markup */
.hb-single-dates-dash { display: none; }
.hb-single-dark-to-light,
.hb-single-light-to-dark { height: 0; background: transparent; }

/* ── BODY COPY ────────────────────────────────────────── */
.hb-single-body {
  max-width: 680px;
  font-family: chaparral-pro, Georgia, serif;
}

.hb-single-body p {
  font-size: 20px;
  line-height: 1.72;
  color: var(--hb-text);
  margin: 0 0 22px;
}

/* Drop cap on the first prose paragraph. Excludes the map label and any
   paragraph inside the [hbd_map] shortcode wrapper, which would otherwise
   "win" first-of-type when the map sits at the top of the body. */
.hb-single-body p:first-of-type::first-letter {
  font-family: acumin-pro-extra-condensed, sans-serif;
  font-weight: 700;
  font-size: 76px;
  float: left;
  line-height: 0.78;
  padding: 6px 12px 0 0;
  color: var(--hb-orange);
}

/* Kill the drop cap on any paragraph that's inside the map block.
   ::first-letter creates a separate render box that can inherit
   small-caps, text-transform, or other properties from elsewhere
   in the cascade — so we explicitly reset every visual property
   that could affect the first letter's appearance. */
.hb-single-body .hbd-map p:first-of-type::first-letter,
.hb-single-body p.hbd-map-label::first-letter {
  font-family: chaparral-pro, serif !important;
  font-weight: normal !important;
  font-size: inherit !important;
  font-style: italic !important;
  font-variant: normal !important;
  font-variant-caps: normal !important;
  font-feature-settings: "smcp" 0, "c2sc" 0 !important;
  text-transform: none !important;
  float: none !important;
  line-height: inherit !important;
  padding: 0 !important;
  margin: 0 !important;
  color: inherit !important;
}

.hb-single-body p strong { color: var(--hb-text); font-weight: 700; }

.hb-single-body a {
  color: var(--hb-orange);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.hb-single-body a:hover { color: var(--hb-orange-dark); }

/* ── PULL QUOTES ──────────────────────────────────────── */
.hb-single-body blockquote {
  margin: 48px 0;
  padding: 0;
  border: none;
}

.hb-single-body blockquote p:first-of-type::first-letter {
  font-family: acumin-pro-extra-condensed, sans-serif;
  font-size: 32px !important;
  font-weight: 600;
  float: none;
  padding: 0;
  line-height: 1.15 !important;
  color: var(--hb-text) !important;
}

.hb-single-body blockquote p {
  font-family: acumin-pro-extra-condensed, sans-serif;
  font-weight: 600;
  font-size: 32px !important;
  line-height: 1.2 !important;
  letter-spacing: 0.01em;
  color: var(--hb-text) !important;
  margin-bottom: 0 !important;
  text-transform: none;
}

/* ── INLINE IMAGES ────────────────────────────────────── */
/* Unaligned figures and captions get the editorial breakout treatment —
   wider than the text column, shifted left to balance the eye. This is
   for full-bleed editorial photos inserted without alignment. */
.hb-single-body .wp-caption:not(.alignleft):not(.aligncenter):not(.alignright):not(.alignnone),
.hb-single-body figure:not(.alignleft):not(.aligncenter):not(.alignright):not(.alignnone),
.hb-single-body .wp-block-image:not(.alignleft):not(.aligncenter):not(.alignright):not(.alignnone) {
  width: 130%;
  max-width: 130%;
  margin: 48px 0 12px -15%;
  padding: 0;
}

/* Sized media-library insertions: when the editor chose a specific size
   (Large, Medium, etc.) and an alignment, respect both. The image renders
   at its inline-styled width with WordPress's default alignment behavior:
   aligncenter centers within the column, alignleft floats left, alignright
   floats right. No breakout treatment — those are for unaligned images
   only. */
.hb-single-body .wp-caption.aligncenter,
.hb-single-body figure.aligncenter,
.hb-single-body .wp-block-image.aligncenter {
  margin-left: auto;
  margin-right: auto;
  margin-top: 32px;
  margin-bottom: 24px;
}

.hb-single-body .wp-caption.alignleft,
.hb-single-body figure.alignleft,
.hb-single-body .wp-block-image.alignleft {
  float: left;
  margin: 8px 24px 16px 0;
}

.hb-single-body .wp-caption.alignright,
.hb-single-body figure.alignright,
.hb-single-body .wp-block-image.alignright {
  float: right;
  margin: 8px 0 16px 24px;
}

.hb-single-body .aj-inline,
.hb-single-body figure.aj-inline,
.hb-single-body .wp-block-image.aj-inline {
  width: 100%;
  max-width: 100%;
  margin: 40px 0 12px 0;
}

.hb-single-body .wp-caption img,
.hb-single-body figure img,
.hb-single-body .wp-block-image img {
  width: 100%;
  height: auto;
  display: block;
  filter: saturate(0.9) contrast(1.02);
  margin: 0;
}

.hb-single-body > p > img,
.hb-single-body > img {
  display: block;
  width: 130%;
  max-width: 130%;
  margin: 48px 0 12px -15%;
  height: auto;
  filter: saturate(0.9) contrast(1.02);
}

/* ── CAPTIONS ─────────────────────────────────────────── */
.hb-single-body .wp-caption-text,
.hb-single-body figcaption,
.hb-single-body .aj-img-caption {
  font-family: proxima-nova, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: var(--hb-text-mid);
  font-style: italic;
  letter-spacing: 0;
  margin-top: 14px;
  margin-bottom: 40px;
  text-align: left;
}

/* ── PHOTO CREDIT ─────────────────────────────────────── */
.hb-single-credit {
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid var(--hb-rule);
  font-family: proxima-nova-condensed, sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--hb-text-light);
}

/* ── SEQUOIA END BUG ──────────────────────────────────────
   20px dark sequoia, flanked horizontally by thin hairline rules.
   Matches the feature story .aj-end-bug pattern so the AJ end mark
   is consistent across all long-form formats. */
.hb-single-end-bug {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin: 72px 0 0;
}

.hb-single-end-bug::before,
.hb-single-end-bug::after {
  content: "";
  display: block;
  width: 140px;
  height: 1px;
  background: var(--hb-rule);
  opacity: 0.7;
}

.hb-single-end-bug svg,
.hb-single-end-bug img {
  width: 22px;
  height: auto;
  display: block;
  opacity: 0.85;
}

.hb-single-end-bug svg path,
.hb-single-end-bug svg { fill: var(--hb-dark); }

/* ── NEXT PROFILE PANEL ──────────────────────────────────
   Column-constrained, cream-dark panel sitting on the page cream
   (no full-width band). Matches the Editor's Pick visual language
   on the HB landing so the reader recognizes it as HB UI rather
   than a bolted-on banner. Square thumbnail (not circular) keeps
   the portrait treatment consistent with the rest of the system.
   The whole panel is the link — no arrow, hover lifts the card. */
.hb-single-next-wrap {
  background: transparent;
  padding: 56px 32px 80px;
  max-width: 760px;
  margin: 0 auto;
}

.hb-single-next {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 28px 32px;
  background: var(--hb-cream-dark);
  border-radius: 2px;
  text-decoration: none;
  color: var(--hb-text);
  transition: background 0.2s ease, transform 0.2s ease;
}

.hb-single-next:hover {
  background: #E5DFD0;
  transform: translateY(-1px);
}

.hb-single-next-thumb {
  width: 88px;
  height: 88px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 2px;
  background: var(--hb-rule);
}

.hb-single-next-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hb-single-next-body {
  flex: 1;
  min-width: 0;
}

.hb-single-next-label {
  font-family: proxima-nova-condensed, sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--hb-orange);
  margin-bottom: 8px;
}

.hb-single-next-name {
  font-family: acumin-pro-extra-condensed, sans-serif;
  font-weight: 700;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--hb-text);
  margin-bottom: 6px;
}

.hb-single-next-oneliner {
  font-family: chaparral-pro, Georgia, serif;
  font-style: italic;
  font-size: 16px;
  color: var(--hb-text-mid);
  line-height: 1.4;
}


/* ════════════════════════════════════
   LANDING — ROW CATALOG
   Vertical scroll of profile rows, grouped by era (birth-year bucket).
   Register matches the single profile page: cream, chaparral body,
   acumin-condensed titles. Portraits carry the energy — the page
   gets out of the way.
   Mobile is the same layout at reduced scale, not a different design.
   ════════════════════════════════════ */

/* ── PAGE HEADER / MASTHEAD ─────────────────────────────────
   Mirrors the Magazine masthead pattern for visual consistency
   across AJ landing pages. Orange eyebrow, two-col title+stats,
   orange rule, description. Same container width (960px), same
   typography stack. */
.hb-page-header {
  max-width: 960px;
  margin: 0 auto;
  padding: 56px 40px 0;
}
.hb-page-eyebrow {
  font-family: proxima-nova-condensed, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--hb-orange);
  margin-bottom: 14px;
}
.hb-page-header-top {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 56px;
  align-items: end;
  padding-bottom: 24px;
}
.hb-page-title {
  font-family: acumin-pro-extra-condensed, sans-serif;
  font-size: clamp(36px, 4.5vw, 54px);
  font-weight: 700;
  color: var(--hb-text);
  line-height: 1.0;
  letter-spacing: -0.018em;
  margin: 0;
}
.hb-page-header-stats {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 190px;
  padding-bottom: 2px;
}
.hb-page-stat {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 9px 0;
  border-top: 1px solid var(--hb-rule);
}
.hb-page-stat:last-child { border-bottom: 1px solid var(--hb-rule); }
.hb-page-stat strong {
  font-family: acumin-pro-extra-condensed, sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: var(--hb-text);
  line-height: 1;
  letter-spacing: -0.02em;
}
.hb-page-stat span {
  font-family: proxima-nova-condensed, sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hb-text-light);
  white-space: nowrap;
}
.hb-page-header-rule {
  height: 3px;
  background: var(--hb-orange);
  margin-bottom: 22px;
}
.hb-page-desc {
  font-family: proxima-nova, sans-serif;
  font-size: 16px;
  color: var(--hb-text-mid);
  line-height: 1.7;
  max-width: 680px;
  padding-bottom: 52px;
  border-bottom: 1px solid var(--hb-rule);
  margin: 0;
}

/* ── EDITOR'S PICK ──────────────────────────────────────────
   Featured profile at the top of the landing page. Random per
   page-load via PHP. Echoes The Magazine landing's lead-card:
   photo on the left, text panel on the right with a cream-dark
   background. Slightly smaller than the full feature card so it
   reads as introduction rather than the page's main payload. */
.hb-landing-pick {
  max-width: 960px;
  margin: 40px auto 0;
  padding: 0 40px;
}

.hb-pick-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  text-decoration: none;
  color: inherit;
  background: var(--hb-cream-dark);
  overflow: hidden;
  transition: background 0.18s;
}

.hb-pick-card:hover .hb-pick-img img { transform: scale(1.03); }

.hb-pick-img {
  position: relative;
  overflow: hidden;
  background: var(--hb-cream-dark);
  aspect-ratio: 1/1;
}

.hb-pick-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  filter: saturate(0.88) contrast(1.02);
  transition: transform 0.5s;
}

.hb-pick-text {
  padding: 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hb-pick-eyebrow {
  font-family: proxima-nova-condensed, sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hb-orange);
  margin-bottom: 14px;
}

.hb-pick-name {
  font-family: acumin-pro-extra-condensed, sans-serif;
  font-weight: 700;
  font-size: clamp(32px, 3vw, 40px);
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--hb-text);
  margin: 0 0 8px;
  letter-spacing: 0.01em;
}

.hb-pick-dates {
  font-family: proxima-nova-condensed, sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hb-text-light);
  margin: 0 0 16px;
}

.hb-pick-oneliner {
  font-family: chaparral-pro, Georgia, serif;
  font-style: italic;
  font-size: 19px;
  line-height: 1.4;
  color: var(--hb-orange);
  margin: 0;
}

/* ── DISCOVER SECTION HEADER ────────────────────────────────
   "Discover" eyebrow + extending rule + "Surprise Me" button
   to the right. The button is the only solid-fill orange button
   on the page — it carries the action the section header
   promises. */
.hb-landing-discover {
  max-width: 960px;
  margin: 64px auto 0;
  padding: 0 40px;
}

.hb-discover-head {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 8px;
}

.hb-discover-label {
  font-family: proxima-nova-condensed, sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--hb-orange);
  white-space: nowrap;
}

.hb-discover-rule {
  flex: 1;
  height: 1px;
  background: var(--hb-rule);
}

.hb-surprise-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--hb-orange);
  color: var(--hb-cream);
  border: none;
  padding: 11px 20px;
  font-family: proxima-nova-condensed, sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.18s;
  white-space: nowrap;
}

.hb-surprise-btn:hover { background: var(--hb-orange-dark); color: var(--hb-cream); }
.hb-surprise-arrow { font-size: 13px; }

/* ── COMPACT TWO-COLUMN LIST ────────────────────────────────
   Echoes Issue 39's TOC density without copying it. Thumbnail
   left, name + dates + dek right. Thin rules between rows.
   This is browse-mode; the Editor's Pick above is read-mode. */
.hb-landing-list {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 48px;
}

.hb-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 28px;
  padding: 32px 0;
  position: relative;
  text-decoration: none;
  color: var(--hb-text);
  align-items: flex-start;
  transition: background 0.15s;
}

.hb-row::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--hb-rule);
}

.hb-row:hover { background: transparent; }
.hb-row:hover .hb-row-name { color: var(--hb-orange); }

.hb-row-portrait {
  flex: 0 0 auto;
  width: 140px;
  height: 140px;
  overflow: hidden;
  background: var(--hb-cream-dark);
  position: relative;
}

.hb-row-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.88) contrast(1.02);
}

.hb-row-placeholder {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  font-family: acumin-pro-extra-condensed, sans-serif;
  font-weight: 700;
  font-size: 28px;
  color: var(--hb-cream);
}

.hb-row-text {
  min-width: 0;
  padding-top: 0;
}

.hb-row-name {
  font-family: acumin-pro-extra-condensed, sans-serif;
  font-weight: 700;
  font-size: 26px;
  line-height: 1.05;
  letter-spacing: 0;
  color: var(--hb-text);
  margin: 0 0 8px;
  transition: color 0.18s;
}

.hb-row-dates {
  font-family: proxima-nova-condensed, sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hb-text-light);
  margin: 0 0 10px;
}

.hb-row-oneliner {
  font-family: chaparral-pro, Georgia, serif;
  font-style: italic;
  font-size: 15px;
  line-height: 1.4;
  color: var(--hb-text-mid);
  margin: 0;
}

/* ── ALL-PROFILES PAGE ───────────────────────────────────────
   Directory-specific header — distinct from the landing-page
   masthead. No stats grid, no orange rule, no required intro
   paragraph. Just back-link + title + count + one-line desc. */
.hb-all-header {
  max-width: 960px;
  margin: 0 auto;
  padding: 56px 40px 48px;
  border-bottom: 1px solid var(--hb-rule);
}

.hb-all-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: proxima-nova-condensed, sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hb-orange);
  text-decoration: none;
  margin-bottom: 28px;
  transition: color 0.18s;
}

.hb-all-back:hover { color: var(--hb-orange-dark); }
.hb-all-back-arrow { font-size: 14px; }

.hb-all-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.hb-all-title {
  font-family: acumin-pro-extra-condensed, sans-serif;
  font-weight: 700;
  font-size: clamp(36px, 4.5vw, 54px);
  color: var(--hb-text);
  line-height: 1;
  letter-spacing: -0.018em;
  text-transform: uppercase;
  margin: 0;
}

.hb-all-count {
  font-family: acumin-pro-extra-condensed, sans-serif;
  font-weight: 700;
  font-size: 32px;
  color: var(--hb-text);
  letter-spacing: -0.02em;
  line-height: 1;
}

.hb-all-count span {
  font-family: proxima-nova-condensed, sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hb-text-light);
  margin-left: 8px;
}

.hb-all-desc {
  font-family: chaparral-pro, Georgia, serif;
  font-style: italic;
  font-size: 17px;
  line-height: 1.5;
  color: var(--hb-text-mid);
  margin: 0;
  max-width: 600px;
}

.hb-all-list-wrap { padding: 32px 0 0; }

/* Column-flow variant of the list. The default .hb-landing-list uses
   grid-template-columns: 1fr 1fr which fills row-by-row (left, right,
   left, right). For an alphabetical directory readers expect to scan
   top-to-bottom in column 1, then continue at the top of column 2.
   CSS columns gives us that flow naturally; grid-auto-flow: column
   would require us to hard-set the row count.

   Inside CSS columns, display:grid on child elements breaks the column
   constraint — children render at intrinsic width. Override .hb-row
   to use flex inside .hb-list-alpha so the portrait stays at 140px. */
.hb-list-alpha {
  display: block;
  column-count: 2;
  column-gap: 48px;
}
.hb-list-alpha .hb-row {
  display: flex;
  gap: 24px;
  break-inside: avoid;
  width: 100%;
}
.hb-list-alpha .hb-row-portrait {
  flex: 0 0 140px;
}
.hb-list-alpha .hb-row-text {
  flex: 1 1 auto;
  min-width: 0;
}

/* ── VIEW ALL LINK ──────────────────────────────────────────
   At the bottom of the landing, two quiet text links: Surprise
   Me on the left, View All Profiles on the right. Both styled
   as editorial "more" cues rather than primary actions. */
.hb-landing-viewall {
  max-width: 960px;
  margin: 56px auto 0;
  padding: 28px 40px 60px;
  border-top: 1px solid var(--hb-rule);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}

.hb-viewall-link {
  font-family: proxima-nova-condensed, sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hb-orange);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: color 0.18s;
}

.hb-viewall-link:hover { color: var(--hb-orange-dark); }
.hb-viewall-arrow { font-size: 14px; }

/* Bottom back-link variant on the all-profiles page — left-align so
   it sits in the same x-position as the top back link, giving the
   page top + bottom symmetry. */
.hb-viewall-back { justify-content: flex-start; }

/* ════════════════════════════════════
   TIMELINE + MAP — shared intro blocks
   Both pages lead with a small intro band: eyebrow + title + deck.
   Same structural rhythm as the archive intro but compressed since the
   interactive surface below needs most of the viewport.
   ════════════════════════════════════ */
.hb-timeline-intro,
.hb-map-intro {
  background: var(--hb-cream);
  padding: 48px 32px 32px;
  text-align: center;
  border-bottom: 1px solid var(--hb-rule);
}

.hb-timeline-intro-inner,
.hb-map-intro-inner {
  max-width: 760px;
  margin: 0 auto;
}

.hb-timeline-eyebrow,
.hb-map-eyebrow {
  font-family: proxima-nova-condensed, sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--hb-orange);
  display: block;
  margin-bottom: 12px;
}

.hb-timeline-title,
.hb-map-title {
  font-family: acumin-pro-extra-condensed, sans-serif;
  font-weight: 700;
  font-size: clamp(36px, 5vw, 56px);
  line-height: 0.98;
  color: var(--hb-text);
  text-transform: uppercase;
  margin: 0 0 12px;
  letter-spacing: 0.01em;
}

.hb-timeline-deck,
.hb-map-deck {
  font-family: chaparral-pro, Georgia, serif;
  font-style: italic;
  font-size: 16px;
  line-height: 1.4;
  color: var(--hb-text-mid);
  margin: 0;
}


/* ════════════════════════════════════
   TIMELINE PAGE — DESKTOP
   vis-timeline with 9 activity lanes; dots only (no inline labels).
   Event detail lives in the hover/tap popover shared with the map.
   ════════════════════════════════════ */
.timeline-page {
  background: var(--hb-cream);
  color: var(--hb-text);
  min-height: 100vh;
  /* 24px breathing room between the dark nav and the filter row. */
  padding-top: 24px;
}

.timeline-page .timeline-controls {
  padding-top: 0;
  padding-bottom: 16px;
  margin: 0;
}

/* Controls row (filter chips + fullscreen button) */
.timeline-controls,
.map-controls {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  max-width: 1400px;
  margin: 0 auto;
  /* Sit above the Leaflet map panes (tile 200 … popup 700). Without this the
     fullscreen toggle (and chips) can be covered where the map meets the row —
     "close button behind the map." Below the site nav (z 100000). (v3.10.12) */
  position: relative;
  z-index: 1000;
  /* No bottom padding — the map sits flush against the filter row.
     Previously had `0 32px 20px`, which produced a thin cream stripe
     between the filter chips and the map canvas. */
  padding: 0 32px 16px;
}

.timeline-filters,
.map-filters {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: center;
}

.timeline-filters .filter-label,
.map-filters .filter-label,
.timeline-eras .filter-label {
  font-family: proxima-nova-condensed, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hb-text-light);
  margin-right: 4px;
}

/* Filter chip — shared base. Active state gets the activity color
   (tinted per chip) so the filter visually reinforces the lane it
   controls. All chips use AJ condensed sans at consistent weight. */
.filter-chip,
.map-filter-chip {
  font-family: proxima-nova-condensed, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 8px 14px;
  border: 1px solid var(--hb-rule);
  background: var(--hb-cream-warm);
  color: var(--hb-text-mid);
  cursor: pointer;
  transition: all 0.18s ease;
  outline: none;
  line-height: 1;
}

.filter-chip:focus,
.filter-chip:focus-visible,
.map-filter-chip:focus,
.map-filter-chip:focus-visible { outline: none; }

.filter-chip:hover,
.map-filter-chip:hover {
  border-color: var(--hb-orange);
  color: var(--hb-orange);
}

.filter-chip.is-active,
.map-filter-chip.is-active {
  background: var(--hb-orange);
  border-color: var(--hb-orange);
  color: var(--hb-cream);
}

/* Per-activity active states. The filter tints to the activity's own
   color when active — reinforces the "this chip controls that lane"
   relationship. Culture yellow keeps dark text for contrast. */
.filter-chip.chip-climbing.is-active,     .map-filter-chip.chip-climbing.is-active     { background: var(--act-climbing);     border-color: var(--act-climbing);     color: var(--hb-cream); }
.filter-chip.chip-culture.is-active,      .map-filter-chip.chip-culture.is-active      { background: var(--act-culture);      border-color: var(--act-culture);      color: var(--hb-text); }
.filter-chip.chip-cycling.is-active,      .map-filter-chip.chip-cycling.is-active      { background: var(--act-cycling);      border-color: var(--act-cycling);      color: var(--hb-cream); }
.filter-chip.chip-earth.is-active,        .map-filter-chip.chip-earth.is-active        { background: var(--act-earth);        border-color: var(--act-earth);        color: var(--hb-cream); }
.filter-chip.chip-exploration.is-active,  .map-filter-chip.chip-exploration.is-active  { background: var(--act-exploration);  border-color: var(--act-exploration);  color: var(--hb-cream); }
.filter-chip.chip-outdoor_rec.is-active,  .map-filter-chip.chip-outdoor_rec.is-active  { background: var(--act-outdoor_rec);  border-color: var(--act-outdoor_rec);  color: var(--hb-cream); }
.filter-chip.chip-snow_sports.is-active,  .map-filter-chip.chip-snow_sports.is-active  { background: var(--act-snow_sports);  border-color: var(--act-snow_sports);  color: var(--hb-cream); }
.filter-chip.chip-water_sports.is-active, .map-filter-chip.chip-water_sports.is-active { background: var(--act-water_sports); border-color: var(--act-water_sports); color: var(--hb-cream); }

/* Story chip (Features + Profiles + Books with location meta) — orange */
.map-filter-chip.chip-story.is-active { background: var(--hb-orange); border-color: var(--hb-orange); color: var(--hb-cream); }

/* Place chips — when active, each takes on its dot color so the chip
   visually matches the pin it controls. Falls back to gray for any
   category that doesn't have an explicit rule below. */
.map-filter-chip.chip-place.is-active { background: #6b7080; border-color: #6b7080; color: var(--hb-cream); }
.map-filter-chip.chip-place-natural-history-museums.is-active { background: var(--place-natural-history-museums); border-color: var(--place-natural-history-museums); color: var(--hb-cream); }
.map-filter-chip.chip-place-dark-sky.is-active                { background: var(--place-dark-sky);                border-color: var(--place-dark-sky);                color: var(--hb-cream); }
.map-filter-chip.chip-place-cultural-centers.is-active        { background: var(--place-cultural-centers);        border-color: var(--place-cultural-centers);        color: var(--hb-text); }
.map-filter-chip.chip-place-film-festivals.is-active          { background: var(--place-film-festivals);          border-color: var(--place-film-festivals);          color: var(--hb-cream); }
.map-filter-chip.chip-place-raptors-sites.is-active           { background: var(--place-raptors-sites);           border-color: var(--place-raptors-sites);           color: var(--hb-cream); }
.map-filter-chip.chip-place-land-art.is-active                { background: var(--place-land-art);                border-color: var(--place-land-art);                color: var(--hb-cream); }
.map-filter-chip.chip-place-state-highpoints.is-active        { background: var(--place-state-highpoints);        border-color: var(--place-state-highpoints);        color: var(--hb-cream); }
.map-filter-chip.chip-place-fire-lookouts-rentable.is-active  { background: var(--place-fire-lookouts-rentable);  border-color: var(--place-fire-lookouts-rentable);  color: var(--hb-cream); }
.map-filter-chip.chip-place-cryptid-hotspots.is-active        { background: var(--place-cryptid-hotspots);        border-color: var(--place-cryptid-hotspots);        color: var(--hb-text); }

/* ── TWO-LAYER FILTER UI ──────────────────────────────────────
   Top tier toggle (single-select radio): All / Stories / Events / Places
   Visually larger and bolder than sub-chips so the hierarchy reads.
   Each tier carries its own active color (matches the pin color it
   controls): Stories orange, Events dark (neutral umbrella), Places gray. */
.map-filters-tier {
  padding-bottom: 0;
}
.map-filters-sub  { padding-top: 0; }
.map-filters-sub[hidden] { display: none !important; }

.map-tier-chip {
  font-family: proxima-nova-condensed, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 11px 20px;
  border: 1.5px solid var(--hb-rule);
  background: var(--hb-cream-warm);
  color: var(--hb-text);
  cursor: pointer;
  transition: all 0.18s ease;
  outline: none;
  line-height: 1;
}
.map-tier-chip:focus,
.map-tier-chip:focus-visible { outline: none; }
.map-tier-chip:hover {
  border-color: var(--hb-text);
  color: var(--hb-text);
}
.map-tier-chip.is-active {
  background: var(--hb-text);
  border-color: var(--hb-text);
  color: var(--hb-cream);
}
.map-tier-chip[data-tier="story"].is-active {
  background: var(--hb-orange);
  border-color: var(--hb-orange);
}
.map-tier-chip[data-tier="place"].is-active {
  background: #6b7080;
  border-color: #6b7080;
}

/* Era + decade rows. Same chip visual as filter chips, muted active
   state (just orange — these aren't activity-tied). */
.timeline-eras {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: center;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 32px 12px;
}

.era-chip,
.decade-chip {
  font-family: proxima-nova-condensed, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 8px 14px;
  border: 1px solid var(--hb-rule);
  background: var(--hb-cream-warm);
  color: var(--hb-text-mid);
  cursor: pointer;
  transition: all 0.18s ease;
  outline: none;
  line-height: 1;
}

.era-chip:focus, .era-chip:focus-visible,
.decade-chip:focus, .decade-chip:focus-visible { outline: none; }

.era-chip:hover,
.decade-chip:hover {
  border-color: var(--hb-orange);
  color: var(--hb-orange);
}

.era-chip.is-active,
.decade-chip.is-active {
  background: var(--hb-orange);
  border-color: var(--hb-orange);
  color: var(--hb-cream);
}

.timeline-decades {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 32px 16px;
}

.decade-chip {
  font-size: 11px;
  padding: 6px 12px;
}

/* Fullscreen toggle */
.fullscreen-toggle {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  /* Solid contrast against the cream filter row — was --hb-cream-warm
     which is so close to the page background it appeared invisible. */
  background: var(--hb-cream);
  border: 1.5px solid var(--hb-text-mid);
  color: var(--hb-text-mid);
  cursor: pointer;
  transition: all 0.18s ease;
  margin-left: 4px;
  padding: 0;
  position: relative;
  z-index: 10;
  gap: 6px;
}

/* Defensive: ensure the SVG always renders. Browsers/print stylesheets
   can sometimes hide unsized inline SVGs in a flex context. Fixing the
   width/height/stroke explicitly prevents that. */
.fullscreen-toggle svg {
  display: block !important;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
.fullscreen-toggle svg path {
  /* Inline stroke attribute on the path was matching the cream button
     background. Force currentColor inheritance via !important so the
     button's color cascade actually paints the icon. */
  stroke: currentColor !important;
  fill: none !important;
}

/* Close icon and label hidden in default (non-fullscreen) state. The
   button shows only the four-corner expand glyph in the filter row. */
.fullscreen-toggle .fs-icon-close,
.fullscreen-toggle .fs-label {
  display: none !important;
}

.fullscreen-toggle:hover {
  background: var(--hb-orange);
  border-color: var(--hb-orange);
  color: var(--hb-cream);
}

body.hb-fullscreen-timeline nav,
body.hb-fullscreen-timeline footer,
body.hb-fullscreen-map nav,
body.hb-fullscreen-map footer,
body.hb-fullscreen-timeline .hb-timeline-intro,
body.hb-fullscreen-map .hb-map-intro {
  display: none !important;
}

/* The fullscreen Close button is nested inside .map-controls/.timeline-controls,
   so two things have to be true: (a) the wrapper can't be display:none (that
   hides the button too — a descendant can't escape an ancestor's display:none),
   and (b) the button must anchor to the VISIBLE map/timeline box, not the
   viewport. position:fixed pins it to the viewport top, which on mobile sits
   behind the Safari URL bar (and behind the WP admin bar when logged in), so
   the button rendered as a hidden sliver at the very top with no way to tap it.
   Fix: collapse the controls in place (un-positioned, zero-height), hide only
   the filter UI, make the page wrapper the positioning context, and float the
   button absolutely at the content's top-right — the same on-screen zone as the
   Leaflet zoom controls, which clears the browser/admin chrome automatically. */
body.hb-fullscreen-map .map-page,
body.hb-fullscreen-timeline .timeline-page {
  position: relative;
}
body.hb-fullscreen-map .map-controls,
body.hb-fullscreen-timeline .timeline-controls {
  position: static !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: visible !important;
  background: transparent !important;
}
/* Hide every control except the Close button itself. */
body.hb-fullscreen-map .map-controls .filter-label,
body.hb-fullscreen-map .map-controls .map-tier-chip,
body.hb-fullscreen-map .map-controls .map-filters-sub,
body.hb-fullscreen-timeline .timeline-controls .filter-label,
body.hb-fullscreen-timeline .timeline-controls .filter-chip,
body.hb-fullscreen-timeline .timeline-controls .tm-filter-trigger,
body.hb-fullscreen-timeline .timeline-eras,
body.hb-fullscreen-timeline .timeline-decades {
  display: none !important;
}
/* The row still holding the Close button: strip its box so nothing shows. */
body.hb-fullscreen-map .map-filters-tier,
body.hb-fullscreen-timeline .timeline-filters {
  display: block !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: none !important;
}

/* In fullscreen, swap to the close icon + visible "Close" label so it
   reads as a clear exit affordance. The button grows to a pill, sits
   top-right with a stronger shadow, and uses orange so it's
   unmistakable against any underlying map tile or timeline color. */
body.hb-fullscreen-timeline .fullscreen-toggle,
body.hb-fullscreen-map .fullscreen-toggle {
  display: inline-flex !important;
  position: absolute !important;
  top: 12px;
  right: 12px;
  z-index: 9999;
  width: auto;
  height: 40px;
  padding: 0 16px 0 12px;
  background: var(--hb-orange);
  border-color: var(--hb-orange);
  color: var(--hb-cream);
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
}
body.hb-fullscreen-timeline .fullscreen-toggle:hover,
body.hb-fullscreen-map .fullscreen-toggle:hover {
  background: var(--hb-orange-dark, #BF4C20);
  border-color: var(--hb-orange-dark, #BF4C20);
}
body.hb-fullscreen-timeline .fullscreen-toggle .fs-icon-expand,
body.hb-fullscreen-map .fullscreen-toggle .fs-icon-expand {
  display: none !important;
}
body.hb-fullscreen-timeline .fullscreen-toggle .fs-icon-close,
body.hb-fullscreen-map .fullscreen-toggle .fs-icon-close {
  display: block !important;
}
body.hb-fullscreen-timeline .fullscreen-toggle .fs-label,
body.hb-fullscreen-map .fullscreen-toggle .fs-label {
  display: inline-block !important;
  font-family: 'proxima-nova-condensed', 'Helvetica Neue', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
}

body.hb-fullscreen-timeline #hb-timeline { height: 100vh; }
body.hb-fullscreen-map #hb-map            { height: 100vh; }

body.hb-fullscreen-timeline,
body.hb-fullscreen-map { overflow: hidden; }

#hb-timeline {
  /* Match .timeline-page background so there's no visible seam. The
     vis-timeline component fills this container; the background only
     shows during initial render. */
  background: var(--hb-cream);
  padding: 0 32px;
  height: calc(100vh - 320px);
  min-height: 560px;
  margin-bottom: 24px;
}

/* vis-timeline overrides — all !important because vis-timeline's
   default stylesheet uses inline-style-level specificity. */
.vis-timeline {
  border: 1px solid var(--hb-rule) !important;
  background: var(--hb-cream-warm);
  font-family: proxima-nova, sans-serif;
}

.vis-panel.vis-center,
.vis-panel.vis-left,
.vis-panel.vis-right,
.vis-panel.vis-top {
  border-color: var(--hb-rule-soft) !important;
}

.vis-time-axis .vis-text {
  color: var(--hb-text-light) !important;
  font-family: proxima-nova-condensed, sans-serif !important;
  font-size: 11px !important;
  letter-spacing: 0.12em;
  font-weight: 500;
}

.vis-time-axis .vis-grid.vis-minor {
  border-color: var(--hb-rule-soft) !important;
}

.vis-time-axis .vis-grid.vis-major {
  border-color: var(--hb-rule) !important;
}

.vis-item {
  border: none !important;
  background: transparent !important;
  color: var(--hb-text) !important;
  border-radius: 0 !important;
}

.vis-item.vis-selected { background: transparent !important; }

.vis-item .vis-item-content {
  padding: 0 !important;
  width: auto !important;
}

.vis-item.vis-box {
  border: none !important;
  background: transparent !important;
}

/* Lane label column */
.vis-panel.vis-left {
  display: block !important;
  background: var(--hb-cream-warm);
  border-right: 1px solid var(--hb-rule-soft) !important;
}

.vis-labelset { display: block !important; }

.vis-labelset .vis-label {
  font-family: proxima-nova-condensed, sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hb-text-light);
  padding: 10px 14px !important;
  border-color: var(--hb-rule-soft) !important;
  background: var(--hb-cream-warm);
  display: flex;
  align-items: center;
}

.vis-labelset .vis-label .vis-inner { padding: 0 !important; }

/* Lane dividers */
.vis-foreground .vis-group {
  border-color: var(--hb-rule-soft) !important;
}

/* Point items — dots only. The hit area is a min-height; content is
   an empty node so the dot anchors properly. */
.vis-item.vis-point {
  border: none !important;
  background: transparent !important;
  min-height: 44px !important;
}

.vis-item .vis-item-dot {
  border-color: var(--act-neutral) !important;
  background: var(--act-neutral) !important;
}

.vis-item.vis-point .vis-dot {
  border-color: var(--act-neutral) !important;
  background-color: var(--act-neutral) !important;
  border-width: 3px !important;
  border-style: solid !important;
  border-radius: 50% !important;
  width: 14px !important;
  height: 14px !important;
  box-sizing: border-box !important;
}

/* Activity-colored dots per category. */
.vis-item.vis-point.has-activity-climbing     .vis-dot { background-color: var(--act-climbing)     !important; border-color: var(--act-climbing)     !important; }
.vis-item.vis-point.has-activity-culture      .vis-dot { background-color: var(--act-culture)      !important; border-color: var(--act-culture)      !important; }
.vis-item.vis-point.has-activity-cycling      .vis-dot { background-color: var(--act-cycling)      !important; border-color: var(--act-cycling)      !important; }
.vis-item.vis-point.has-activity-earth        .vis-dot { background-color: var(--act-earth)        !important; border-color: var(--act-earth)        !important; }
.vis-item.vis-point.has-activity-exploration  .vis-dot { background-color: var(--act-exploration)  !important; border-color: var(--act-exploration)  !important; }
.vis-item.vis-point.has-activity-outdoor_rec  .vis-dot { background-color: var(--act-outdoor_rec)  !important; border-color: var(--act-outdoor_rec)  !important; }
.vis-item.vis-point.has-activity-snow_sports  .vis-dot { background-color: var(--act-snow_sports)  !important; border-color: var(--act-snow_sports)  !important; }
.vis-item.vis-point.has-activity-water_sports .vis-dot { background-color: var(--act-water_sports) !important; border-color: var(--act-water_sports) !important; }

.tl-node {
  padding: 4px 6px;
  min-width: 0;
  max-width: 240px;
  line-height: 1.2;
  cursor: pointer;
  background: transparent;
}

.timeline-empty-state {
  text-align: center;
  padding: 40px 32px;
  color: var(--hb-text-light);
  font-family: chaparral-pro, Georgia, serif;
  font-style: italic;
}


/* ════════════════════════════════════
   POPOVER (shared by timeline + map)
   Floats over the interactive surface. Image bleeds flush; text content
   is padded together as .pop-body.
   ════════════════════════════════════ */
.hb-timeline-popover {
  position: absolute;
  z-index: 9100;
  width: 340px;
  background: var(--hb-cream);
  color: var(--hb-text);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
  font-family: chaparral-pro, Georgia, serif;
  pointer-events: auto;
  overflow: hidden;
}

.hb-timeline-popover .pop-event-thumb {
  display: block;
  width: 100%;
  height: auto;
}

.hb-timeline-popover .pop-body { padding: 18px 20px 18px; }

.hb-timeline-popover .pop-title {
  font-family: acumin-pro-extra-condensed, sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.01em;
  line-height: 1.08;
  color: var(--hb-text);
  margin: 0 0 6px;
  text-transform: uppercase;
}

.hb-timeline-popover .pop-date {
  font-family: proxima-nova-condensed, sans-serif;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hb-text-light);
  margin-bottom: 10px;
}

.hb-timeline-popover .pop-location {
  font-family: proxima-nova-condensed, sans-serif;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hb-text-light);
  margin-top: -4px;
  margin-bottom: 10px;
}

.hb-timeline-popover .pop-desc {
  font-family: chaparral-pro, Georgia, serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--hb-text);
  margin-bottom: 0;
}

.hb-timeline-popover .pop-people {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--hb-rule);
}

.hb-timeline-popover .pop-person-link {
  font-family: proxima-nova-condensed, sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hb-orange);
  text-decoration: none;
  padding: 4px 0;
}

.hb-timeline-popover .pop-person-link:hover { color: var(--hb-orange-dark); }

/* Place / story popover — eyebrow above title, link at bottom.
   Same popover container, different content arrangement. The eyebrow
   carries the category (Land Art, Cultural Centers) for places or the
   issue/section (AJ40 / FEATURE) for stories — important context, so
   weighted to read clearly above the title. */
.hb-timeline-popover .pop-eyebrow {
  font-family: proxima-nova-condensed, sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--hb-text);
  margin-bottom: 10px;
}

.hb-timeline-popover .pop-place-link {
  display: inline-block;
  font-family: proxima-nova-condensed, sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hb-orange);
  text-decoration: none;
  margin-top: 12px;
  padding: 4px 0;
}

.hb-timeline-popover .pop-place-link:hover { color: var(--hb-orange-dark); }


/* ════════════════════════════════════
   MAP PAGE
   ════════════════════════════════════ */
.map-page {
  background: var(--hb-cream);
  color: var(--hb-text);
  /* 24px breathing room between the dark nav and the filter row, then
     the filter row's own padding adds to the total before the map. The
     stripe between filters and map was the issue — that's fixed by the
     #hb-map background match below, not by stripping this padding. */
  padding-top: 24px;
}

.map-page .map-controls {
  padding-top: 0;
  padding-bottom: 16px;
  margin: 0 auto;
}

#hb-map {
  width: 100%;
  /* Filter row + padding ≈ 120px. The map fills the remaining viewport
     down to the footer. No intro band — page goes nav → filters → map. */
  height: calc(100vh - 120px);
  min-height: 480px;
  /* Match .map-page so there's no visible color seam if tiles delay
     loading or briefly white-flash. Was --hb-cream-warm, which created
     a faint two-tone stripe above the map. */
  background: var(--hb-cream);
  margin: 0;
  display: block;
}

/* Marker styling */
.hb-marker {
  background: transparent;
  border: none;
}

.hb-marker .hb-marker-dot {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--hb-orange);
  border: 2px solid var(--hb-cream);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s ease;
}

.hb-marker.is-event .hb-marker-dot {
  background: var(--hb-text-mid);
  opacity: 0.85;
}

/* Story pins — features, profiles, books with location meta */
.hb-marker.is-story .hb-marker-dot {
  background: var(--hb-orange);
  opacity: 1;
}

/* Place pins — institutions, fire lookouts, archives, etc. Default is a
   neutral gray; specific categories get their own muted hue from the
   --place-* palette. New categories without a CSS rule fall back to gray. */
.hb-marker.is-place .hb-marker-dot {
  background: #6b7080;
  opacity: 1;
}

.hb-marker.is-place.has-place-cat-natural-history-museums .hb-marker-dot { background: var(--place-natural-history-museums); }
.hb-marker.is-place.has-place-cat-dark-sky                .hb-marker-dot { background: var(--place-dark-sky); }
.hb-marker.is-place.has-place-cat-cultural-centers        .hb-marker-dot { background: var(--place-cultural-centers); }
.hb-marker.is-place.has-place-cat-film-festivals          .hb-marker-dot { background: var(--place-film-festivals); }
.hb-marker.is-place.has-place-cat-raptors-sites           .hb-marker-dot { background: var(--place-raptors-sites); }
.hb-marker.is-place.has-place-cat-land-art                .hb-marker-dot { background: var(--place-land-art); }
.hb-marker.is-place.has-place-cat-state-highpoints        .hb-marker-dot { background: var(--place-state-highpoints); }
.hb-marker.is-place.has-place-cat-fire-lookouts-rentable  .hb-marker-dot { background: var(--place-fire-lookouts-rentable); }
.hb-marker.is-place.has-place-cat-cryptid-hotspots        .hb-marker-dot { background: var(--place-cryptid-hotspots); }

.hb-marker.is-event.has-activity-climbing     .hb-marker-dot { background: var(--act-climbing);     opacity: 1; }
.hb-marker.is-event.has-activity-culture      .hb-marker-dot { background: var(--act-culture);      opacity: 1; }
.hb-marker.is-event.has-activity-cycling      .hb-marker-dot { background: var(--act-cycling);      opacity: 1; }
.hb-marker.is-event.has-activity-earth        .hb-marker-dot { background: var(--act-earth);        opacity: 1; }
.hb-marker.is-event.has-activity-exploration  .hb-marker-dot { background: var(--act-exploration);  opacity: 1; }
.hb-marker.is-event.has-activity-outdoor_rec  .hb-marker-dot { background: var(--act-outdoor_rec);  opacity: 1; }
.hb-marker.is-event.has-activity-snow_sports  .hb-marker-dot { background: var(--act-snow_sports);  opacity: 1; }
.hb-marker.is-event.has-activity-water_sports .hb-marker-dot { background: var(--act-water_sports); opacity: 1; }

.hb-marker:hover .hb-marker-dot { transform: scale(1.25); }

.hb-cluster-wrap {
  background: transparent;
  border: none;
}

.hb-cluster {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--hb-orange);
  color: var(--hb-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: proxima-nova-condensed, sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  border: 2px solid var(--hb-cream);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.leaflet-control-zoom a {
  background: var(--hb-cream) !important;
  color: var(--hb-text) !important;
  border-color: var(--hb-rule) !important;
}

.leaflet-control-zoom a:hover {
  background: var(--hb-orange) !important;
  color: var(--hb-cream) !important;
}

.leaflet-control-attribution {
  font-family: proxima-nova, sans-serif !important;
  font-size: 10px !important;
}


/* ════════════════════════════════════
   MOBILE TIMELINE FEED
   Hidden on desktop; shown below 768px via the breakpoint at end.
   ════════════════════════════════════ */
.timeline-mobile { display: none; }

.tm-filter-bar {
  position: sticky;
  top: 56px; /* sits below AJ's 56px sticky nav */
  z-index: 20;
  background: var(--hb-cream);
  padding: 10px 16px;
  border-bottom: 1px solid var(--hb-rule);
}

.tm-filter-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 14px;
  background: var(--hb-cream-warm);
  border: 1px solid var(--hb-rule);
  cursor: pointer;
  font-family: proxima-nova, sans-serif;
  text-align: left;
  color: var(--hb-text);
  -webkit-appearance: none;
  appearance: none;
}

.tm-filter-trigger-label {
  font-family: proxima-nova-condensed, sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hb-text-light);
  flex-shrink: 0;
}

.tm-filter-trigger-value {
  flex: 1;
  font-size: 15px;
  font-weight: 500;
  color: var(--hb-text);
}

.tm-filter-trigger-chevron {
  flex-shrink: 0;
  transition: transform 0.2s ease;
  color: var(--hb-text-light);
}

.tm-filter-open .tm-filter-trigger-chevron { transform: rotate(180deg); }

.tm-filter-panel {
  position: absolute;
  left: 16px;
  right: 16px;
  top: calc(100% - 2px);
  background: var(--hb-cream);
  border: 1px solid var(--hb-rule);
  border-top: none;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  max-height: 60vh;
  overflow-y: auto;
  padding: 4px 0;
}

.tm-filter-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  cursor: pointer;
  font-family: proxima-nova, sans-serif;
  font-size: 15px;
  color: var(--hb-text);
  -webkit-tap-highlight-color: transparent;
}

.tm-filter-option:active { background: rgba(42, 36, 32, 0.05); }

.tm-filter-option input[type="checkbox"] {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  accent-color: var(--hb-orange);
  margin: 0;
}

.tm-filter-option.is-all {
  border-bottom: 1px solid var(--hb-rule);
  font-weight: 600;
}

.tm-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.tm-feed { padding-bottom: 48px; }

.tm-decade { position: relative; }

.tm-decade-header {
  position: sticky;
  top: calc(56px + 62px); /* AJ nav + tm-filter-bar */
  z-index: 10;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 8px 16px;
  background: var(--hb-cream);
  border-bottom: 1px solid var(--hb-rule);
}

.tm-decade-label {
  font-family: acumin-pro-extra-condensed, sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.04em;
  color: var(--hb-text);
  line-height: 1.2;
  text-transform: uppercase;
}

.tm-decade-count {
  font-family: proxima-nova-condensed, sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hb-text-light);
}

.tm-decade-events { padding: 4px 0; }

.tm-event {
  border-bottom: 1px solid var(--hb-rule-soft);
}

.tm-event:last-child { border-bottom: none; }

.tm-event-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
  padding: 14px 16px;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  appearance: none;
}

.tm-event-card:disabled { cursor: default; }

.tm-event-card:not(:disabled):active {
  background: rgba(42, 36, 32, 0.04);
}

.tm-event-thumb {
  display: block;
  width: 96px;
  height: 96px;
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
  background-color: rgba(42, 36, 32, 0.08);
}

.tm-event-thumb-placeholder { opacity: 0.6; }

.tm-event-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.tm-event-pill {
  align-self: flex-start;
  font-family: proxima-nova-condensed, sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hb-cream);
  padding: 3px 8px;
  line-height: 1.4;
}

.tm-event-pill.swatch-culture { color: var(--hb-text); }

.tm-event-title {
  font-family: acumin-pro-extra-condensed, sans-serif;
  font-weight: 600;
  font-size: 20px;
  letter-spacing: 0.02em;
  line-height: 1.15;
  color: var(--hb-text);
  white-space: normal;
  overflow-wrap: break-word;
}

.tm-event-date {
  font-family: proxima-nova, sans-serif;
  font-size: 13px;
  color: var(--hb-text-light);
  line-height: 1.3;
}

.tm-event.is-expanded {
  background: var(--hb-cream-warm);
}
.tm-event.is-expanded .tm-event-card {
  background: transparent;
}

.tm-event-detail {
  padding: 0;
  background: transparent;
}

.tm-event-banner {
  display: block;
  width: 100%;
  height: auto;
}

.tm-event-detail-body {
  padding: 18px 16px 20px;
}

.tm-event-description {
  font-family: chaparral-pro, Georgia, serif;
  font-size: 18px;
  line-height: 1.55;
  color: var(--hb-text);
  margin: 0 0 16px;
}

.tm-event-profiles {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--hb-rule);
  padding-top: 14px;
}

.tm-event-profiles-label {
  font-family: proxima-nova-condensed, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hb-text-light);
  width: 100%;
  margin-bottom: 10px;
}

.tm-event-profile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  text-decoration: none;
  color: var(--hb-text);
}
.tm-event-profile::after {
  content: '';
  margin-left: auto;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--hb-text-light);
  border-bottom: 2px solid var(--hb-text-light);
  transform: rotate(-45deg);
  flex-shrink: 0;
}

.tm-event-profile:hover .tm-event-profile-name,
.tm-event-profile:active .tm-event-profile-name { color: var(--hb-orange); }

.tm-event-profile-thumb {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-color: rgba(42, 36, 32, 0.1);
  flex-shrink: 0;
}

.tm-event-profile-name {
  font-family: proxima-nova, sans-serif;
  font-size: 14px;
  font-weight: 500;
  transition: color 0.15s ease;
}

.tm-empty,
.tm-empty-initial {
  padding: 48px 16px;
  text-align: center;
  color: var(--hb-text-light);
  font-family: chaparral-pro, Georgia, serif;
  font-style: italic;
}


/* ════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════ */
@media (max-width: 1100px) {
  /* Landing intro/list pad in a bit on medium screens */
  .hb-page-header,
  .hb-landing-pick,
  .hb-landing-discover,
  .hb-landing-list,
  .hb-landing-viewall { padding-left: 32px; padding-right: 32px; }
}

@media (max-width: 768px) {
  /* ── LANDING — mobile scale ─────────────────────────── */
  .hb-page-header {
    padding: 40px 20px 0;
  }
  .hb-page-header-top {
    grid-template-columns: 1fr;
    gap: 24px;
    padding-bottom: 20px;
  }
  .hb-page-title { font-size: 40px; }
  .hb-page-header-stats { min-width: 0; max-width: 240px; }
  /* Was justify-content:space-between inside a full-width column, which
     flung "68" to the far left and "Profiles" to the far right. Pack them
     together so the number reads with its label. (v3.10.12) */
  .hb-page-stat { justify-content: flex-start; gap: 14px; }
  .hb-page-desc {
    font-size: 17px;
    padding-bottom: 40px;
  }

  /* Editor's Pick — stack vertically on mobile */
  .hb-landing-pick { padding: 0 20px; margin-top: 32px; }
  .hb-pick-card { grid-template-columns: 1fr; }
  .hb-pick-img { aspect-ratio: 4/3; }
  .hb-pick-text { padding: 32px 28px; }
  .hb-pick-name { font-size: 30px; }
  .hb-pick-oneliner { font-size: 17px; }
  .hb-pick-eyebrow, .hb-pick-dates { font-size: 12px; }

  /* Discover header — keep layout, tighter spacing */
  .hb-landing-discover { padding: 0 20px; margin-top: 48px; }
  .hb-discover-head { gap: 14px; flex-wrap: wrap; }
  .hb-surprise-btn { padding: 10px 16px; font-size: 10px; letter-spacing: 0.14em; }

  /* List — single column on mobile */
  .hb-landing-list {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0 20px;
    margin: 16px auto 0;
  }
  .hb-row {
    grid-template-columns: 110px 1fr;
    gap: 18px;
    padding: 20px 0;
  }
  .hb-row-portrait {
    width: 110px;
    height: 110px;
  }
  .hb-row-name {
    font-size: 22px;
    margin-bottom: 6px;
  }
  .hb-row-dates {
    font-size: 12px;
    margin-bottom: 8px;
  }
  .hb-row-oneliner {
    font-size: 16px;
    line-height: 1.35;
  }
  .hb-row-placeholder {
    font-size: 36px;
  }

  /* View all — stack the two links centered on mobile */
  .hb-landing-viewall {
    padding: 24px 20px 48px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 18px;
  }

  /* All-profiles page — mobile scale */
  .hb-all-header { padding: 40px 20px 32px; }
  .hb-all-back { margin-bottom: 20px; }
  .hb-all-title-row { gap: 16px; margin-bottom: 12px; }
  .hb-all-title { font-size: 36px; }
  .hb-all-count { font-size: 26px; }
  .hb-all-desc { font-size: 15px; }
  .hb-all-list-wrap { padding: 16px 20px 0; }
  .hb-list-alpha { column-count: 1; column-gap: 0; }

  /* Single profile — v2.2.0 responsive.
     Stack the band (image below text) and the article grid (dates row
     above body) on narrow viewports. Image fills container width. */
  .hb-single-band {
    padding: 32px 24px;
  }
  .hb-single-band-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
  }
  .hb-single-band-text { padding-bottom: 0; }
  .hb-single-title { font-size: clamp(40px, 10vw, 56px); }
  .hb-single-oneliner { font-size: 18px; }
  .hb-single-subtitle { font-size: 16px; }

  /* Image column always full width on mobile */
  .hb-single-band.is-vertical   .hb-single-band-image img,
  .hb-single-band.is-horizontal .hb-single-band-image img,
  .hb-single-band.is-square     .hb-single-band-image img {
    width: 100%;
    max-width: 100%;
  }

  .hb-single-article {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 32px 24px;
  }
  /* v3.10.19 — Born/Died no longer wrap-flow into a broken row on mobile (the
     Died date was dropping to its own line, misaligned). Two fixed columns,
     each with its LABEL stacked above the date, so Born and Died sit side by
     side and aligned. grid-auto-flow:column fills Born label+year down column 1
     and Died label+year down column 2; a living person (no Died) just fills
     column 1 and leaves column 2 empty. */
  .hb-single-dates {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    column-gap: 32px;
    row-gap: 4px;
    padding: 0 0 20px;
    border-bottom: 1px solid var(--hb-rule);
  }
  .hb-single-dates-label { margin: 0; }
  .hb-single-dates-year { margin: 0; font-size: 16px; }

  .hb-single-body p { font-size: 19px; line-height: 1.68; }
  .hb-single-body p:first-of-type::first-letter { font-size: 64px; }

  .hb-single-end-bug { gap: 18px; margin: 56px 0 0; }
  .hb-single-end-bug::before,
  .hb-single-end-bug::after { width: 90px; }

  /* Profile shell loses its top margin on mobile — no negative space over band */
  .hb-profile { margin-top: 24px; }

  /* Next Profile */
  .hb-single-next-wrap { padding: 40px 20px 56px; }
  .hb-single-next { gap: 18px; padding: 22px 22px; }
  .hb-single-next-thumb { width: 72px; height: 72px; }
  .hb-single-next-label { font-size: 10px; letter-spacing: 0.18em; }
  .hb-single-next-name { font-size: 22px; }
  .hb-single-next-oneliner { font-size: 14px; }


  /* Intro blocks */
  .hb-timeline-intro, .hb-map-intro { padding: 32px 20px 24px; }

  /* Hide desktop timeline entirely; show mobile feed */
  .timeline-page .timeline-controls,
  .timeline-page .timeline-eras,
  .timeline-page .timeline-decades,
  .timeline-page #hb-timeline,
  .timeline-page .timeline-empty-state { display: none !important; }

  .timeline-mobile { display: block; }

  .timeline-page { padding-top: 0; }

  /* Map tweaks */
  .map-controls { padding: 0 16px 14px; gap: 10px; }

  /* Tier row: fullscreen button pinned right; row may wrap if cramped */
  .map-filters-tier {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px;
  }
  .map-filters-tier .filter-label { display: none; }
  .map-filters-tier .fullscreen-toggle { margin-left: auto; flex-shrink: 0; order: 0; }

  /* Sub-filter pills — bigger, more tappable (was 10px / 6px padding) */
  .map-filters { gap: 8px; }
  .map-filter-chip { font-size: 13px; padding: 9px 14px; letter-spacing: 0.1em; }
  .map-tier-chip { font-size: 14px; padding: 11px 18px; letter-spacing: 0.12em; }

  #hb-map { height: calc(100vh - 180px); min-height: 360px; }

  /* Popup card — bigger text, tighter meta rows */
  .hb-timeline-popover { width: calc(100vw - 48px); max-width: 360px; }
  .hb-timeline-popover .pop-body { padding: 20px 22px; }
  .hb-timeline-popover .pop-title { font-size: 26px; margin-bottom: 8px; }
  .hb-timeline-popover .pop-date { font-size: 13px; margin-bottom: 4px; }
  .hb-timeline-popover .pop-location { font-size: 13px; margin-top: 0; margin-bottom: 12px; }
  .hb-timeline-popover .pop-desc { font-size: 16px; line-height: 1.55; }
}

/* ════════════════════════════════════════════════════════════════════
   HBD MAP — single-profile shortcode-rendered map
   ════════════════════════════════════════════════════════════════════
   Embedded via [hbd_map] shortcode in HB profile bodies. Single dot,
   monochrome CartoDB Positron tiles, italic chaparral label below.
   Renders inline at column width — does NOT use the breakout treatment
   that figures and unaligned images get. ════════════════════════════ */

.hbd-map {
  margin: 40px 0;
  background: var(--hb-cream);
}

.hbd-map-canvas {
  width: 100%;
  height: 360px;
  background: var(--hb-cream);
  border: 1px solid var(--hb-rule);
  position: relative;
  z-index: 1;
}

/* Leaflet uses high z-index on its panes and controls which lets the
   map ride over the site nav on scroll. Constrain everything inside
   an .hbd-map to very low z-indexes. Scoped tightly so the global
   Map page (#hb-map) and the fullscreen modes are unaffected. */
.hbd-map .leaflet-pane,
.hbd-map .leaflet-top,
.hbd-map .leaflet-bottom {
  z-index: 1 !important;
}
.hbd-map .leaflet-control {
  z-index: 2 !important;
}

.hbd-map-label {
  font-family: chaparral-pro, serif;
  font-style: italic;
  font-variant: normal;
  font-variant-caps: normal;
  font-feature-settings: "smcp" 0, "c2sc" 0;
  text-transform: none;
  font-size: 14px;
  line-height: 1.5;
  color: var(--hb-text-mid);
  text-align: center;
  margin: 0;
  padding: 12px 16px 14px;
  background: transparent;
}

/* Brand-orange dot. divIcon wraps a span; we style the span. */
.hbd-map-pin {
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--hb-orange);
  border: 2px solid var(--hb-cream);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* Leaflet adds inline width/height to the divIcon wrapper. We need the
   wrapper transparent so just the dot reads. */
.hbd-map-pin-wrap {
  background: transparent !important;
  border: none !important;
}

@media (max-width: 768px) {
  .hbd-map-canvas { height: 280px; }
}