/* ========================================================================
   Parity Homepage — matches thejoshuatreehouse.com (live Aesthetic/Brizy)
   Phase 1: header/nav, hero, booking bar.
   Tokens sourced from computed styles captured off the live site,
   Sep 11, 2026 (see the "Live Site Tokens" reference doc).
   ======================================================================== */

/* Windsor's @font-face lives in site-chrome.css (loaded sitewide, including
   here) — do not redeclare it here. Rich caught a real bug this caused:
   with the exact same @font-face rule declared twice across two stylesheets
   both loaded on this page, Chrome ended up resolving Windsor Bold
   inconsistently between two nearly-identical elements (the Arrival vs.
   Departure placeholder), rendering one in the real Windsor and the other
   in a fallback — despite both computing the identical font-family in
   devtools. Not a CSS specificity bug (verified: both placeholders'
   computed style already matched), and not a loading-order bug (verified:
   document.fonts reported the face already "loaded" for both) — genuinely
   a duplicate-@font-face resolution quirk. */

.jth-parity-page {
  --jth-ink: #1D130F;
  --jth-sand: #D3C2B5;
  --jth-sand-light: #EDE4D6;
  --jth-clay: #8E5E3B;
  --jth-clay-dark: #6E4A2E;
}

/* Kadence's real header/footer now render site-wide (see site-chrome.css) —
   just reset the content wrapper so full-bleed sections touch the edges. */
.jth-parity-page .content-area,
.jth-parity-page .content-container,
.jth-parity-page .entry-content-wrap,
.jth-parity-page .entry-content {
  margin: 0 !important;
  padding: 0 !important;
  max-width: 100% !important;
}

.jth-parity-content {
  font-family: "Windsor", Georgia, "Times New Roman", serif;
  color: var(--jth-ink);
}
/* Defensive reset — Kadence's entry-content defaults (borders, list
   style, blockquote padding) otherwise bleed into this hand-built markup. */
.jth-parity-content h1,
.jth-parity-content h2,
.jth-parity-content h3,
.jth-parity-content p,
.jth-parity-content blockquote,
.jth-parity-content ul {
  border: none;
  box-shadow: none;
  list-style: none;
  padding: 0;
}

/* ── HERO ────────────────────────────────────────────────────────── */
.jth-parity-hero {
  position: relative;
  min-height: 620px;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  background-color: var(--jth-clay-dark);
  overflow: hidden;
}
.jth-parity-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(20,12,7,0.55) 0%, rgba(20,12,7,0.08) 45%, transparent 70%);
  pointer-events: none;
}
.jth-parity-hero__body {
  position: relative;
  z-index: 1;
  padding: 0 48px;
  max-width: 720px;
}
.jth-parity-hero__headline {
  font-family: "Windsor", Georgia, serif;
  font-weight: 400;
  font-size: 42px;
  line-height: 1.15;
  letter-spacing: 0.02em;
  color: var(--jth-sand);
  margin: 0 0 14px;
}
.jth-parity-hero__locations {
  margin: 0 0 22px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--jth-sand);
}
.jth-parity-hero__locations a {
  color: var(--jth-sand);
  text-decoration: none;
}
.jth-parity-hero__locations a:hover { opacity: 0.75; }
.jth-parity-hero__locations span {
  margin: 0 10px;
  opacity: 0.5;
}
.jth-parity-hero__cta {
  display: inline-block;
  padding: 14px 26px;
  background: var(--jth-clay);
  color: var(--jth-sand-light);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
  transition: background 0.2s ease;
}
.jth-parity-hero__cta:hover {
  background: var(--jth-clay-dark);
}

/* ── BOOKING BAR (real Lodgify widget) ───────────────────────────── */
/* Lodgify's script renders and styles #lodgify-search-bar itself — this
   wrapper only sets the surrounding background/border so the section
   reads consistently with the rest of the page, same as every other
   section boundary here. */
/* Every value below was sampled directly off production's actual
   rendered widget (Sep 15 2026) — not guessed. The outer band is
   .fw-container's real background (rgb(142,94,59) = our existing
   --jth-clay); the field boxes are .ui.selection.dropdown's real
   background (rgb(237,230,224), effectively --jth-sand-light); the
   Search button is rgb(162,126,74) = --jth-gold with WHITE text,
   uppercase, bold; labels (LOCATION/ARRIVAL/GUEST) are uppercase, bold,
   and a muted brown-grey (rgb(102,84,82)) that doesn't match any
   existing token, so it's inlined here rather than invented as one. */
.jth-parity-booking {
  background: var(--jth-clay);
  /* Live embeds the widget with a fixed 30px gutter on each side (measured
     at both 1024px and 1440px, so it's a fixed value, not a percentage) —
     matching that matters beyond just cosmetics: Lodgify computes its
     internal field-width layout once at mount from the container it's
     given, and giving it the same effective width live does turned out to
     be what makes it choose the same (near-full-width) field proportions
     live gets, instead of the much narrower ones it was choosing for our
     edge-to-edge 0-padding container. Rich then fine-tuned the vertical
     values by hand against live (10px top / 11px bottom vs. flat 0) to
     get the field row's vertical centering to line up exactly. */
  padding: 10px 30px 11px;
}
.jth-parity-booking .ui.selection.dropdown,
.jth-parity-booking .DateRangePickerInput {
  background-color: var(--jth-sand-light) !important;
}
/* The actual <input> elements (and their DateInput wrapper) are
   transparent on production — the cream box lives one level up, on
   .DateRangePickerInput, so the whole Arrival→Departure group reads as
   ONE continuous box like Location/Guest. Styling the inputs directly
   (an earlier attempt) gave each date its own separate cream rectangle
   with a visible seam between them instead. */
.jth-parity-booking input {
  background-color: transparent !important;
}
/* The widget itself renders in the regular DOM (no shadow root), so unlike
   its colors — which only reach through the --lodgify-ui-* custom
   properties — its markup and classes ARE directly selectable. Its Search
   button carries Semantic UI's "circular" class (border-radius: 500rem,
   i.e. a full pill), which doesn't match the sharp 2px corners used on
   every other button on the site. Semantic UI's own selector is fairly
   specific, so match it plus !important rather than fight the cascade. */
.jth-parity-booking .ui.circular.button,
.jth-parity-booking .ui.button {
  border-radius: 2px !important;
  background-color: var(--jth-gold) !important;
  color: #ffffff !important;
  font-family: "Windsor", Georgia, serif !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
}
/* Live hides the magnifying-glass icon Lodgify puts inside the Search
   button (display:none in its own CSS) and shows the "Search" label on
   its own — confirmed identical markup on both domains, live just hides
   it. Match that. */
.jth-parity-booking .button-container .ui.button .icon {
  display: none !important;
}
.jth-parity-booking .ui.circular.button:hover,
.jth-parity-booking .ui.button:hover {
  background-color: var(--jth-gold-dark) !important;
}
/* Every other input/select/label inside the widget, direct-selected the
   same way — confirmed there's no shadow root, so this reaches them. */
.jth-parity-booking .ui.form input,
.jth-parity-booking .ui.form .dropdown-container,
.jth-parity-booking .ui.selection.dropdown {
  font-family: "Windsor", Georgia, serif !important;
  color: var(--jth-ink) !important;
}
/* Location's pin icon and "LOCATION" text sat with a big disconnected gap
   between them — Lodgify's own default padding-left on this dropdown is
   45.7px (meant for a wider default icon layout live doesn't use here).
   Live's real computed padding measures 7px 0 0 10px; matched it directly
   rather than guessing at where the extra space was coming from. */
.jth-parity-booking .location-input-container .ui.selection.dropdown {
  padding: 7px 0 0 10px !important;
}
/* "Arrival"/"Departure" are input placeholder text (not plain text nodes),
   and "Guest" is a bare <span> styled by its ancestor rather than its own
   class — narrow guesses at container/title classes kept missing these.
   Broadened to every label-shaped text inside the widget: */
.jth-parity-booking .ui.form label,
.jth-parity-booking .ui.selection.dropdown .text,
.jth-parity-booking .ui.selection.dropdown span,
.jth-parity-booking input::placeholder,
.jth-parity-booking input {
  font-family: "Windsor", Georgia, serif !important;
  font-weight: 700 !important;
  font-style: normal !important;
  text-transform: uppercase !important;
  color: #665452 !important;
}
/* Rich caught that "Arrival" and "Departure" render in two visibly
   different fonts — took three passes to actually nail down:
   1) the unprefixed `::placeholder` rule alone doesn't reach an empty
      field's native placeholder, needed the vendor-prefixed variants too.
   2) Windsor's @font-face was accidentally declared twice (once here,
      once in site-chrome.css), and the duplicate registration made Chrome
      resolve Windsor Bold inconsistently between the two nearly-identical
      placeholders — removed the redundant declaration.
   3) The actual remaining cause: react-dates' own base CSS gives a
      disabled date field `font-style: italic` (Departure genuinely IS
      disabled until Arrival is picked — normal date-range-picker UX, not
      a bug), and neither of our rules ever set `font-style`, so it fell
      through to whatever italic "Windsor" face happens to be registered
      elsewhere on the site (unrelated to this widget, and visually
      nothing like the real Windsor). Live's placeholders compute
      `font-style: italic` too — Rich just has a non-slanted face
      assigned to that italic style slot there, so it happens to look
      identical to normal. We don't have that, so force it off instead of
      chasing which face live's italic slot points to. */
.jth-parity-booking input::-webkit-input-placeholder,
.jth-parity-booking input::-moz-placeholder,
.jth-parity-booking input:-ms-input-placeholder {
  font-family: "Windsor", Georgia, serif !important;
  font-weight: 700 !important;
  font-style: normal !important;
  text-transform: uppercase !important;
  color: #665452 !important;
  opacity: 1 !important;
}
/* Selected date display ("24 SEPT 2026") was wrapping to two lines and
   inheriting a plain sans font — give it Windsor and enough width to sit
   on one line, matching Arrival/Departure. */
.jth-parity-booking .DateInput,
.jth-parity-booking .DateInput_input {
  font-family: "Windsor", Georgia, serif !important;
  white-space: nowrap !important;
}

/* Location dropdown: Rich wants only the two actual cities shown, not
   the "United States" / state-level entries above them in Lodgify's
   country → state → city hierarchy. Verified directly (opened the real
   dropdown, both on live and on .local) that each level carries a depth
   class: country items get "indent-1", states "indent-3", cities
   (Tucson, Joshua Tree) "indent-5". Hiding everything above city-level
   leaves exactly the two real locations, confirmed via screenshot. */
.jth-parity-booking .ui.selection.dropdown .menu .item.indent-1,
.jth-parity-booking .ui.selection.dropdown .menu .item.indent-2,
.jth-parity-booking .ui.selection.dropdown .menu .item.indent-3,
.jth-parity-booking .ui.selection.dropdown .menu .item.indent-4 {
  display: none !important;
}

/* Calendar — defensive spacing in case the weekday header row and the
   first day-number row collapse into each other (reported on a real
   date-picker open; not reproducible in this headless testing setup,
   so this is insurance against a font-metric mismatch rather than a
   confirmed-and-verified fix). */
.jth-parity-booking .DayPicker_weekHeader {
  margin-bottom: 6px;
}
.jth-parity-booking .DayPicker_weekHeader_li {
  line-height: normal !important;
}
.jth-parity-booking .CalendarMonth_table {
  margin-top: 4px;
}

/* The thin underline Lodgify shows on the active date field should be
   our clay/terracotta, not its own default near-black. */
.jth-parity-booking .DateRangePickerInput,
.jth-parity-booking .DateRangePickerInput__withBorder {
  border-color: var(--jth-clay) !important;
}

/* CORRECTION #2 (Rich caught this too — both previous comments here were
   wrong, and it's worth recording how, since the same trap will bite the
   next headless-Chrome check on this widget):

   1. Location genuinely renders on both .local and live in a real browser.
      It only ever looked absent in this build's testing because every
      automated check so far used headless Chrome, and headless Chrome
      sets `navigator.webdriver = true` plus a "HeadlessChrome" user
      agent — Lodgify's script was quietly dropping the Location field for
      detected bot traffic. Confirmed by re-testing with a headless
      session that spoofs a normal UA and hides navigator.webdriver:
      Location renders fine everywhere, same as Rich's own screenshot
      showed the whole time.

   2. With Location actually rendering, the real difference from live
      isn't spacing at all — it's that live's own (huge, site-authored)
      stylesheet carries a hand-written override for this exact widget
      that our rebuild never copied:

        #lodgify-search-bar .search-bar-container.with-locations
          .search-bar .ui.form .inputs-container {
          grid-template-columns: 20% 40% 25% 15% !important;
        }

      (plus a tablet-width variant). Lodgify's own default CSS gives the
      four fields fixed, narrow pixel widths (220px/350px/130px/auto) that
      don't fill a wide bar — live's original developer overrode that
      directly. Confirmed by diffing live's actual loaded stylesheets
      against .local's: this rule exists only in live's site-wide CSS,
      not in Lodgify's CDN CSS (which is identical, same version, on both
      domains). Reproducing that same override below is what actually
      fixes the width match — not a `justify-content` tweak on our side. */
.jth-parity-booking .inputs-container {
  grid-template-rows: 42px !important;
}
@media (min-width: 825px) {
  .jth-parity-booking .inputs-container {
    grid-template-columns: 20% 40% 25% 15% !important;
  }
}
@media (min-width: 600px) and (max-width: 824px) {
  .jth-parity-booking .inputs-container {
    grid-template-rows: 42px 42px !important;
    grid-template-columns: 50% 30% 20% !important;
    grid-template-areas: 'location location location' 'dates guests cta';
  }
}

/* ── RESPONSIVE ──────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .jth-parity-nav { padding: 16px 24px; }
  .jth-parity-nav__links { gap: 18px; }
  .jth-parity-hero__body { padding: 0 24px 32px; }
  .jth-parity-hero__headline { font-size: 30px; }
  .jth-parity-fullinn__body h2 { font-size: 28px; }
  .jth-parity-conservation { padding: 48px 24px; }
  .jth-parity-conservation h2 { font-size: 24px; }
  .jth-parity-story__body h2 { font-size: 24px; }
  .jth-parity-shop__head h2 { font-size: 22px; }
}

@media (max-width: 560px) {
  .jth-parity-hero__headline { font-size: 24px; }
  .jth-parity-fullinn { padding-left: 8px; padding-right: 8px; }
  .jth-parity-fullinn__body { padding: 0 16px; }
  .jth-parity-fullinn__body h2 { font-size: 22px; }
}

/* ── ROOM CAROUSEL ───────────────────────────────────────────────── */
.jth-parity-rooms {
  position: relative;
  background: var(--jth-sand-light, #EDE4D6);
  padding: 32px 0 40px;
}
.jth-parity-rooms__track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: 0 48px;
  scrollbar-width: none;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}
.jth-parity-rooms__track::-webkit-scrollbar { display: none; }
.jth-parity-rooms__track.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
}
.jth-parity-rooms__track.is-dragging .jth-parity-room {
  pointer-events: none;
}
.jth-parity-room {
  flex: 0 0 auto;
  width: 220px;
  scroll-snap-align: start;
  text-decoration: none;
  color: var(--jth-ink);
}
.jth-parity-room__img {
  aspect-ratio: 4 / 5;
  border-radius: 2px;
  overflow: hidden;
  background: var(--jth-clay-dark);
  margin-bottom: 12px;
}
.jth-parity-room__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.jth-parity-room:hover .jth-parity-room__img img {
  transform: scale(1.04);
}
.jth-parity-room__loc {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--jth-clay);
  margin: 0 0 4px;
}
.jth-parity-room__name {
  font-family: "Windsor", Georgia, serif;
  font-size: 17px;
  margin: 0;
}
.jth-parity-rooms__nav {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 16px 48px 0;
}
.jth-parity-rooms__prev,
.jth-parity-rooms__next {
  width: 36px;
  height: 36px;
  border: 1px solid var(--jth-ink);
  background: transparent;
  color: var(--jth-ink);
  font-size: 14px;
  cursor: pointer;
  border-radius: 50%;
}
.jth-parity-rooms__prev:hover,
.jth-parity-rooms__next:hover {
  background: var(--jth-ink);
  color: var(--jth-sand-light);
}

/* ── BOOK THE ENTIRE INN ─────────────────────────────────────────── */
.jth-parity-fullinn {
  position: relative;
  min-height: 380px;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  background-color: var(--jth-clay-dark);
}
.jth-parity-fullinn__overlay {
  position: absolute;
  inset: 0;
  background: rgba(15,9,5,0.68);
}
.jth-parity-fullinn__body {
  position: relative;
  z-index: 1;
  max-width: 660px;
  margin: 0 auto;
  text-align: center;
  padding: 0 24px;
  color: var(--jth-sand-light);
}
.jth-parity-fullinn__body h2 {
  font-family: "Windsor", Georgia, serif;
  font-weight: 700;
  font-size: 36px;
  line-height: 1.15;
  margin: 0 0 16px;
  color: var(--jth-sand-light) !important;
  text-shadow: 0 1px 12px rgba(0,0,0,0.4);
}
.jth-parity-fullinn__body p {
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--jth-sand-light) !important;
}
.jth-parity-fullinn__body a {
  color: var(--jth-sand-light) !important;
  text-decoration: none;
  font-size: 13px;
  font-family: Georgia, serif;
  font-style: italic;
  border-bottom: 1px solid var(--jth-sand-light);
  padding-bottom: 2px;
}

/* ── DESERT CONSERVATION ─────────────────────────────────────────── */
.jth-parity-conservation {
  display: flex;
  align-items: center;
  gap: 32px;
  max-width: 760px;
  margin: 0 auto;
  padding: 64px 24px;
  text-align: left;
}
.jth-parity-conservation__icon {
  width: 88px;
  height: 88px;
  flex: 0 0 auto;
}
.jth-parity-conservation h2 {
  font-family: "Windsor", Georgia, serif;
  font-weight: 700;
  font-size: 28px;
  line-height: 1.2;
  margin: 0 0 10px;
}
.jth-parity-conservation p {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: rgba(29,19,15,0.75);
}

/* ── FOUNDER STORY ───────────────────────────────────────────────── */
.jth-parity-story {
  background: var(--jth-sand);
  padding: 72px 24px;
}
.jth-parity-story__body {
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
}
.jth-parity-story__body h2 {
  font-family: "Windsor", Georgia, serif;
  font-weight: 700;
  font-size: 30px;
  line-height: 1.2;
  margin: 0 0 22px;
}
.jth-parity-story__body p {
  font-size: 16px;
  line-height: 1.8;
  margin: 0 0 20px;
}
.jth-parity-story__sig {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 17px !important;
}
.jth-parity-story__link {
  display: inline-block;
  margin-top: 4px;
  color: var(--jth-ink);
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--jth-clay);
  padding-bottom: 2px;
}

/* ── PRESS CAROUSEL ──────────────────────────────────────────────── */
.jth-parity-press {
  padding: 56px 0;
}
.jth-parity-press__track {
  display: flex;
  gap: 40px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0 48px;
  scrollbar-width: none;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}
.jth-parity-press__track::-webkit-scrollbar { display: none; }
.jth-parity-press__track.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
}
.jth-parity-press blockquote {
  flex: 0 0 auto;
  width: min(560px, 85vw);
  scroll-snap-align: start;
  margin: 0;
  padding: 0;
  border: none !important;
  text-align: center;
}
.jth-parity-press cite {
  display: block;
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--jth-clay);
  margin-bottom: 12px;
}
.jth-parity-press p {
  font-family: "Windsor", Georgia, serif;
  font-size: 18px;
  line-height: 1.5;
  margin: 0;
}

/* ── JOURNAL TEASER ──────────────────────────────────────────────── */
.jth-parity-journal {
  padding: 24px 48px 56px;
}
.jth-parity-journal__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.jth-parity-journal__card {
  text-decoration: none;
  color: var(--jth-ink);
}
.jth-parity-journal__card img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: 2px;
  margin-bottom: 10px;
  display: block;
}
.jth-parity-journal__card p {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0;
}

/* ── SHOP TEASER ─────────────────────────────────────────────────────
   Live runs this as a title+link sidebar (fixed ~278px) next to a
   horizontal product carousel (Slick on live; reusing this build's own
   .jl-carousel component here) — was a plain static 6-card grid with a
   header row above it. Section itself sits transparent on the page
   background, not the sand-light box it had before. */
.jth-parity-shop {
  background: transparent;
  max-width: 1220px;
  margin: 0 auto;
  padding: 56px 24px;
  display: flex;
  align-items: center;
  gap: 40px;
}
.jth-parity-shop__head {
  flex: 0 0 260px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}
.jth-parity-shop__head h2 {
  font-family: "Windsor", Georgia, serif;
  font-weight: 700;
  font-size: 32px;
  margin: 0;
  text-align: left;
}
.jth-parity-shop__head a {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #4F5E79;
  text-decoration: none;
  border: 1px solid #4F5E79;
  padding: 10px 20px;
}
.jth-parity-shop__head a:hover { background: #4F5E79; color: #fff !important; }
.jth-parity-shop__carousel { flex: 1; min-width: 0; }
.jth-parity-shop__card {
  display: block;
  text-decoration: none;
  color: var(--jth-ink);
  padding: 0 10px;
  box-sizing: border-box;
}
.jth-parity-shop__img {
  aspect-ratio: 1/1;
  background: var(--jth-sand);
  overflow: hidden;
  margin-bottom: 14px;
}
.jth-parity-shop__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
}
.jth-parity-shop__name {
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  color: #4F5E79;
  margin: 0 0 6px;
  line-height: 1.3;
}
.jth-parity-shop__price {
  font-size: 16px;
  font-weight: 400;
  color: var(--jth-ink);
  margin: 0;
}
@media (max-width: 900px) {
  .jth-parity-shop { flex-direction: column; align-items: stretch; gap: 24px; }
  .jth-parity-shop__head { flex: none; flex-direction: row; align-items: center; justify-content: space-between; }
}

/* New Moon Playlist (Sep 23, 2026): dark starry-night section between the
   shop teaser and the footer. Measured against live directly — no dots
   carousel involved despite it looking like one at a glance; the row of
   5 icons above the title is one static image (moon-phases-playlist.png),
   and the section is a single fixed block, not a slider. */
.jth-parity-moon {
  position: relative;
  background-size: cover;
  background-position: center;
  padding: 60px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 453px;
  text-align: center;
}
.jth-parity-moon__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.15);
}
.jth-parity-moon__body {
  position: relative;
  z-index: 1;
  max-width: 560px;
}
.jth-parity-moon__phases {
  display: block;
  width: 140px;
  height: 22px;
  margin: 0 auto 20px;
}
.jth-parity-moon h2 {
  font-family: "Windsor", Georgia, serif;
  font-weight: 700;
  font-size: 36px;
  color: #fff;
  margin: 0;
}
.jth-parity-moon p {
  font-size: 16px;
  line-height: 24px;
  color: #fff;
  margin: 0;
}
.jth-parity-moon .jh-btn-o--light {
  margin-top: 16px;
  border-color: #fff;
  color: #fff !important;
  padding: 13px 50px;
  letter-spacing: 1px;
}
.jth-parity-moon .jh-btn-o--light:hover {
  background: #fff;
  color: var(--jth-ink) !important;
}

/* Footer styling now lives in site-chrome.css (site-wide). */

/* ── RESPONSIVE (rest of page) ───────────────────────────────────── */
@media (max-width: 900px) {
  .jth-parity-journal__grid { grid-template-columns: 1fr; }
  .jth-parity-conservation { flex-direction: column; text-align: center; }
}

/* ── Live-matched lower sections (Sep 21 2026) ───────────────────────── */
.jh-rooms { padding: 40px 15px 30px; background: transparent; }
.jh-rooms .jl-room__loc { font-size: 12px; }
.jh-box { max-width: 1170px; margin: 0 auto; }
.jh-buyout, .jh-about, .jh-conservation { padding: 0 15px; }
.jh-buyout__box { border: 1px solid #A27E4A; padding: 30px 15px; display: grid; grid-template-columns: 1fr 2fr; gap: 30px; align-items: start; }
.jh-buyout__box img { width: 100%; height: 190px; object-fit: cover; display: block; }
.jh-buyout__box h3 { margin: 8px 0 10px; font-size: 21px; text-transform: uppercase; }
.jh-buyout__box h3 a { color: #4E5D7A; text-decoration: none; }
.jh-buyout__box p { margin: 0 0 14px; }
.jh-link { color: #4E5D7A; text-decoration: underline; }
.jh-conservation { max-width: 650px; margin: 0 auto; padding: 60px 15px 100px; display: flex; align-items: center; gap: 30px; }
.jh-conservation img { flex: 0 0 155px; height: 155px; }
.jh-conservation h3 { margin: 0 0 8px; font-size: 21px; text-transform: uppercase; color: #767260; }
.jh-conservation p { margin: 0; }
.jh-about__box { border: 1px solid #9D9488; display: grid; grid-template-columns: 1fr 1fr; }
.jh-about__text { padding: 110px 50px 20px; }
.jh-about__text h2 { text-align: left; color: var(--jth-ink); margin: 0 0 24px; }
.jh-about__text p { margin: 0 0 16px; }
.jh-sig { font-style: italic; }
.jh-btn-o { display: inline-block; margin-top: 16px; border: 1px solid #4F5E79; color: #4F5E79 !important; padding: 12px 25px; text-transform: uppercase; text-decoration: none; font-size: 14px; font-weight: 700; }
.jh-about__img { background-size: cover; background-position: center; min-height: 500px; }
.jh-press { margin-top: 100px; background: #A27E4A; min-height: 440px; }
.jh-press .jl-quote, .jh-press .jl-quote a { color: var(--jth-ink) !important; }
.jh-press .jl-quote h3 { order: -1; margin: 0 0 12px; font-weight: 700; letter-spacing: 1px; }
.jh-press .jl-quote p { color: var(--jth-ink); }
.jh-press .jl-arrow { color: var(--jth-ink); opacity: .6; }
.jh-press .jl-dots button { border-color: var(--jth-ink); }
.jh-press .jl-dots button.is-active { background: var(--jth-ink); }
/* Live's journal container measures 1110px (confirmed via computed
   layout at 1440px) — ours was capped at 970px, which is why the photos
   read as noticeably narrower than live's. */
.jh-journal { max-width: 1110px; margin: 0 auto; padding: 30px 15px 60px; }
.jh-journal__feature { height: 511px; background-size: cover; background-position: center; position: relative; }
.jh-journal__overlay { position: absolute; inset: 0; background: rgba(29,19,15,.35); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 130px; }
.jh-journal__overlay h2 { font-size: 36px; font-weight: 700; margin: 0 0 14px; }
.jh-journal__overlay h2 a, .jh-journal__overlay p { color: #fff !important; text-decoration: none; }
.jh-journal__overlay p { font-size: 16px; }
.jh-readmore { display: inline-block; margin-top: 16px; border: 1px solid #fff; color: #fff !important; padding: 14px 30px; text-transform: uppercase; font-weight: 700; font-size: 15px; text-decoration: none; }
.jh-readmore--dark { border: 0; padding: 0; color: #4E5D7A !important; text-decoration: underline; margin-top: 8px; }
.jh-journal__row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 30px; }
.jh-journal__row img { width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; display: block; }
.jh-journal__row h3 { font-size: 18px; text-transform: uppercase; margin: 20px 0 10px; }
.jh-journal__row h3 a { color: #4F5E79; text-decoration: none; }
/* Live's excerpt text under these two cards is 16px/24px line-height —
   ours was inheriting the site's larger 18px body size, which combined
   with the "Read More" link below (which live hides entirely on these
   two smaller cards, keeping it only on the big feature card) to look
   noticeably heavier/bigger than live. */
.jh-journal__row p { margin: 0; font-size: 16px; line-height: 24px; }
.jh-journal__row .jh-readmore--dark { display: none; }
@media (max-width: 800px) {
	.jh-buyout__box, .jh-about__box, .jh-journal__row { grid-template-columns: 1fr; }
	.jh-about__text { padding: 40px 24px; } .jh-about__img { min-height: 300px; }
	.jh-conservation { flex-direction: column; text-align: center; }
	.jh-journal__feature { height: 380px; } .jh-journal__overlay { padding: 0 24px; } .jh-journal__overlay h2 { font-size: 26px; }
}
.jh-press .jl-quote h3, .jh-press .jl-quote h3 a { color: var(--jth-ink) !important; }
.jth-parity-page .jl-room__link, .jth-parity-page .jl-other a { color: #4E5D7A; }
.jth-parity-shop { background: transparent !important; }
.jth-parity-page .jth-parity-content { letter-spacing: 1px; }