/* ============================================================
   Harbor Church Event Venue
   Palette and type from the OHV Visual Brand Identity (Aug 2026).
   The four brand colors are fixed; --paper-2, --ink-2 and --ink-3 are
   tints mixed from them, chosen so every text pairing clears WCAG AA.
   ============================================================ */

:root {
  /* Brand colors — OHV Visual Brand Identity */
  --blue: #2D4E6B;        /* Dark Blue — traditional, sophisticated, water */
  --brown: #873A17;       /* Brown — historic, wood, old buildings, barrels */
  --blue-light: #D1DDE3;  /* Light Blue — complementary */
  --cream: #F0EBE4;       /* Cream — complementary */

  /* Surfaces */
  --paper: var(--cream);
  --paper-2: #DFE3E3;     /* light blue softened toward cream, for alternating bands */

  /* Type — brand blue and two tints of it. AA on both --paper and --paper-2. */
  --ink: var(--blue);     /* 7.34 on paper */
  --ink-2: #44617A;       /* 5.47 on paper, 5.02 on paper-2 */
  --ink-3: #4C677E;       /* 4.99 on paper, 4.57 on paper-2 */

  /* Actions */
  --rust: var(--brown);
  --rust-dark: #692D12;
  --slate: var(--blue);

  --line-faint: rgba(45, 78, 107, 0.16);
  --line-soft: rgba(45, 78, 107, 0.34);
  --paper-faint: rgba(240, 235, 228, 0.16);
  /* Muted text on the blue fields. Cream had plenty of headroom over the old
     near-black ink, but over #2D4E6B anything below 0.72 alpha drops under the
     4.5:1 AA floor, so 0.72 (4.68:1) is as quiet as text here is allowed to get. */
  --paper-soft: rgba(240, 235, 228, 0.72);
  --nav-h: 118px;

  /* Type stacks */
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body: 'Poppins', system-ui, -apple-system, sans-serif;
  /* Logo lockup only — closest Google Fonts to the CMU Serif / Jimmy Script
     the identity is drawn in. Not used anywhere else on the site. */
  --font-logo: 'Old Standard TT', Georgia, 'Times New Roman', serif;
  --font-script: 'Parisienne', 'Snell Roundhand', cursive;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h); }

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.6;
}

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

/* ── Typography helpers ─────────────────────────────────── */

.hc-display {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: 0;
  margin: 0;
  font-size: clamp(2.1rem, 4.4vw, 3.4rem);
}
.hc-display--xl { font-size: clamp(2.9rem, 7.6vw, 5.8rem); line-height: 1.04; }
.hc-display--layout { font-size: clamp(2.6rem, 5.4vw, 4.4rem); }

.hc-eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 14px;
}
.hc-eyebrow--light { color: var(--paper-soft); }
/* Brown eyebrow, for pages whose brown band sits far down the scroll.
   6.69:1 on --paper, 6.13:1 on --paper-2. */
.hc-eyebrow--rust { color: var(--rust); }

.hc-mono {
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--ink-2);
}

.hc-copy-note {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--ink-3);
  font-style: normal;
}

/* ── Buttons ────────────────────────────────────────────── */

.hc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 24px;
  border: 1px solid transparent;
  border-radius: 2px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.hc-btn:hover { transform: translateY(-1px); }
.hc-btn--sm { padding: 9px 16px; font-size: 13px; }
.hc-btn--lg { padding: 16px 30px; font-size: 15px; }

.hc-btn--rust { background: var(--rust); color: var(--paper); }
.hc-btn--rust:hover { background: var(--rust-dark); }

/* Brand brown (#873A17) against brand dark blue (#2D4E6B) is 1.10:1 — the
   button label stays readable but the button itself dissolves into the field.
   On every dark-blue surface the filled CTA becomes cream with blue text
   (7.34:1); brown stays the action color on cream and light-blue surfaces.
   A brown field (.hc-on-rust) has the same problem for the opposite reason —
   brown on brown — and takes the same swap. */
.hc-hero .hc-btn--rust,
.hc-split-text--ink .hc-btn--rust,
.hc-specials .hc-btn--rust,
.hc-partners .hc-btn--rust,
.hc-vendors .hc-btn--rust,
.hc-on-rust .hc-btn--rust,
.hc-footer .hc-btn--rust,
.hc-nav:not(.is-solid) .hc-nav-cta {
  background: var(--paper);
  color: var(--blue);
}
.hc-hero .hc-btn--rust:hover,
.hc-split-text--ink .hc-btn--rust:hover,
.hc-specials .hc-btn--rust:hover,
.hc-partners .hc-btn--rust:hover,
.hc-vendors .hc-btn--rust:hover,
.hc-on-rust .hc-btn--rust:hover,
.hc-footer .hc-btn--rust:hover,
.hc-nav:not(.is-solid) .hc-nav-cta:hover {
  background: var(--blue-light);
  color: var(--blue);
}

.hc-btn--primary { background: var(--ink); color: var(--paper); }
.hc-btn--primary:hover { background: #000; }

.hc-btn--outline { background: transparent; color: var(--paper); border-color: var(--paper-soft); }
.hc-btn--outline:hover { border-color: var(--paper); background: rgba(240, 235, 228, 0.08); }

/* Brown on the dark-blue hero is 1.42:1 as a *shape*, under the 3.0 a UI
   element needs, which is why .hc-btn--rust swaps to cream on dark fields
   above. A cream hairline gives the button its own edge (9.49:1 against the
   hero) so the fill can stay brand brown where --rust cannot. Label is cream
   on brown, 6.69:1. Deliberately not a --rust variant, so the swap never
   claims it. */
.hc-btn--rust-edge {
  background: var(--rust);
  color: var(--paper);
  border-color: var(--paper);
}
.hc-btn--rust-edge:hover {
  background: var(--rust-dark);
  border-color: var(--paper);
}

.hc-btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-soft); }
.hc-btn--ghost:hover { border-color: var(--ink); }

/* ── Navigation ─────────────────────────────────────────── */

.hc-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  transition: background 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  border-bottom: 1px solid transparent;
}
.hc-nav.is-solid {
  background: var(--paper);
  border-bottom-color: var(--line-faint);
  box-shadow: 0 2px 20px rgba(45, 78, 107, 0.06);
}
.hc-nav-inner {
  max-width: 1280px;
  margin: 0 auto;
  min-height: var(--nav-h);
  padding: 0 6vw;
  display: flex;
  align-items: center;
  gap: 24px;
}

.hc-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--paper);
  text-decoration: none;
  transition: color 0.25s ease;
}
.hc-logo-name {
  font-family: var(--font-logo);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  white-space: nowrap;
}
/* The script "at" is a joining word, not a label — it sits tight between the
   two wordmarks the way it does in the drawn lockup. */
.hc-logo-at {
  font-family: var(--font-script);
  font-size: 14px;
  line-height: 1;
  margin: 4px 0 2px;
}
.hc-nav.is-solid .hc-logo { color: var(--ink); }

/* The complete OHV logo — wordmark and dam mark — closes the lockup, as it
   does in the drawn artwork. Sized so the Meetinghouse name is ~1.43x its
   width, the proportion Nia's lockup uses. Two files rather than a mask:
   a mask that fails to load leaves nothing, a wrong-colored <img> is legible.
   The light one carries the transparent nav, the color one the solid nav. */
.hc-logo-ohv {
  display: block;
  width: 125px;
  height: auto;
}
.hc-logo-ohv--dark { display: none; }
.hc-nav.is-solid .hc-logo-ohv--light { display: none; }
.hc-nav.is-solid .hc-logo-ohv--dark { display: block; }

.hc-nav-links {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-left: auto;
}
.hc-nav-links a {
  font-size: 14px;
  color: var(--paper);
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: color 0.25s ease, opacity 0.18s ease;
}
.hc-nav-links a:not(.hc-btn):hover { opacity: 0.7; }
.hc-nav-links a.active:not(.hc-btn) { text-decoration: underline; text-underline-offset: 6px; }
.hc-nav.is-solid .hc-nav-links a { color: var(--ink); }
.hc-nav.is-solid .hc-nav-links a.hc-nav-cta { color: var(--paper); }
.hc-nav-cta { margin-left: 6px; }

.hc-burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 34px; height: 34px;
  padding: 6px;
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
}
.hc-burger span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--paper);
  transition: background 0.25s ease, transform 0.25s ease, opacity 0.25s ease;
}
.hc-nav.is-solid .hc-burger span { background: var(--ink); }

/* ── Hero ───────────────────────────────────────────────── */

.hc-hero {
  position: relative;
  background: var(--blue);
  color: var(--paper);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: calc(var(--nav-h) + 40px) 6vw 64px;
  min-height: 620px;
}
.hc-hero--home { min-height: 90vh; }
.hc-hero--inner { min-height: 58vh; }
.hc-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(45deg, transparent, transparent 14px, rgba(240, 235, 228, 0.05) 14px, rgba(240, 235, 228, 0.05) 15px),
    radial-gradient(120% 120% at 20% 0%, rgba(240, 235, 228, 0.10) 0%, rgba(0, 0, 0, 0.22) 70%);
}
.hc-hero-inner { position: relative; z-index: 2; max-width: 820px; }
.hc-hero-photo-note {
  position: absolute;
  top: calc(var(--nav-h) + 20px);
  right: 6vw;
  z-index: 2;
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--paper-soft);
  max-width: 42%;
  text-align: right;
}
/* Home hero carries the seal at top-right, so shift its photo note left. */
.hc-hero--home .hc-hero-photo-note {
  right: auto;
  left: 6vw;
  text-align: left;
  max-width: 34%;
}
.hc-hero .hc-display { color: var(--paper); margin-top: 14px; }
.hc-hero-sub {
  margin: 22px 0 0;
  max-width: 52ch;
  color: rgba(240, 235, 228, 0.78);
  font-size: 16px;
}
.hc-hero-cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 30px;
}

/* "Now Open" seal — spinning stamp floating top-right of the hero. */
.hc-seal {
  position: absolute;
  top: calc(var(--nav-h) + 28px);
  right: 6vw;
  z-index: 3;
  width: 156px;
  height: 156px;
  filter: drop-shadow(0 10px 26px rgba(0, 0, 0, 0.4));
  animation: hc-seal-float 6s ease-in-out infinite;
  transform: rotate(-8deg);
  text-decoration: none;
  cursor: pointer;
}
.hc-seal:hover { filter: drop-shadow(0 14px 34px rgba(0, 0, 0, 0.55)); }
.hc-seal-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.hc-seal-rot {
  transform-origin: 100px 100px;
  animation: hc-seal-spin 26s linear infinite;
}
.hc-seal-arc-text {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 1.5px;
  fill: var(--brown);
}
.hc-seal-now, .hc-seal-open {
  font-family: var(--font-display);
  font-weight: 600;
  fill: var(--brown);
  font-size: 30px;
  letter-spacing: 0.5px;
}
.hc-seal-star { font-size: 15px; fill: rgba(135, 58, 23, 0.7); }

@keyframes hc-seal-spin { to { transform: rotate(360deg); } }
@keyframes hc-seal-float {
  0%, 100% { transform: rotate(-8deg) translateY(0); }
  50% { transform: rotate(-8deg) translateY(-7px); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hc-seal { animation: none; }
  .hc-seal-rot { animation: none; }
}

/* ── Photo placeholders ─────────────────────────────────── */

.hc-photo {
  position: relative;
  min-height: 320px;
  background:
    repeating-linear-gradient(45deg, transparent, transparent 12px, rgba(45, 78, 107, 0.04) 12px, rgba(45, 78, 107, 0.04) 13px),
    var(--paper-2);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.hc-photo span {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  text-align: center;
  max-width: 24ch;
}
.hc-photo--tall { min-height: 100%; }

/* ── Thesis / centered statement ────────────────────────── */

.hc-thesis {
  padding: clamp(56px, 9vw, 104px) 6vw;
  text-align: center;
  background: var(--paper);
}
.hc-thesis-inner { max-width: 660px; margin: 0 auto; }
.hc-thesis p {
  margin: 18px auto 0;
  color: var(--ink-2);
  font-size: 16px;
  max-width: 54ch;
}

/* ── Split sections ─────────────────────────────────────── */

.hc-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 520px;
}
.hc-split--paper2 { background: var(--paper-2); }
.hc-split-text {
  padding: clamp(40px, 6vw, 76px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hc-split-text--paper2 { background: var(--paper-2); }
.hc-split-text--ink { background: var(--ink); color: var(--paper); }
.hc-split-text--ink .hc-display { color: var(--paper); }
.hc-split-text p { margin: 18px 0 0; color: var(--ink-2); font-size: 15px; max-width: 46ch; }
.hc-split-text--ink p { color: rgba(240, 235, 228, 0.72); }
.hc-split-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; }
/* Reverse: put the photo on the right regardless of source order. */
.hc-split--reverse .hc-photo { order: 2; }
.hc-split--reverse .hc-split-text { order: 1; }

/* ── Layout scenes (The Space) ──────────────────────────── */

.hc-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 540px;
}
.hc-layout--paper { background: var(--paper); }
.hc-layout--paper2 { background: var(--paper-2); }
.hc-layout-text {
  padding: clamp(40px, 6vw, 72px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hc-layout-text .hc-mono { margin: 6px 0 0; }
.hc-layout-text p:not(.hc-mono) { margin: 16px 0 0; color: var(--ink-2); font-size: 15px; max-width: 44ch; }
.hc-layout--reverse .hc-photo { order: 2; }
.hc-layout--reverse .hc-layout-text { order: 1; }

/* Seating-layout floor plans (blueprint style). */
.hc-plan {
  position: relative;
  margin-top: 26px;
  max-width: 440px;
  border: 1.5px solid var(--ink);
  background:
    linear-gradient(rgba(45, 78, 107, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(45, 78, 107, 0.05) 1px, transparent 1px),
    var(--paper);
  background-size: 24px 24px;
}
.hc-plan::after {
  content: 'N';
  position: absolute;
  top: 8px; right: 10px;
  font-family: var(--font-body);
  font-size: 10px;
  border: 1px solid var(--line-soft);
  padding: 1px 6px;
  opacity: 0.5;
}
.hc-plan-svg { display: block; width: 100%; height: auto; }
.hc-tbl { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; }
.hc-ch { fill: var(--paper); stroke: var(--ink); stroke-width: 1; }
.hc-lbl {
  font-family: var(--font-body);
  font-size: 11px;
  fill: var(--ink-2);
  text-anchor: middle;
}
.hc-stage { fill: none; stroke: var(--line-soft); stroke-width: 1; stroke-dasharray: 4 4; }
.hc-stage-lbl {
  font-family: var(--font-body);
  font-size: 11px;
  fill: var(--ink-3);
  text-anchor: middle;
  letter-spacing: 1px;
}

/* ── CTA band ───────────────────────────────────────────── */

.hc-cta-band {
  padding: clamp(56px, 9vw, 104px) 6vw;
  background: var(--paper);
  text-align: center;
}
.hc-cta-band-inner { max-width: 560px; margin: 0 auto; }
.hc-cta-band p { margin: 16px auto 0; color: var(--ink-2); }
.hc-cta-band .hc-hero-cta { justify-content: center; margin-top: 26px; }

/* ── Home hero promo link ───────────────────────────────── */

.hc-hero-link {
  display: inline-block;
  margin-top: 20px;
  color: var(--paper-soft);
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color 0.18s ease;
}
.hc-hero-link:hover { color: var(--paper); }

/* ── Now Open: opening specials ─────────────────────────── */

.hc-specials { padding: clamp(56px, 8vw, 96px) 6vw; }
.hc-specials-inner { max-width: 1000px; margin: 0 auto; }
.hc-specials-inner .hc-display { color: var(--paper); }
.hc-specials-lead { margin: 16px 0 0; max-width: 56ch; color: var(--paper-soft); }
.hc-specials-lead em { font-style: italic; color: var(--paper); }

.hc-offer {
  display: flex;
  align-items: center;
  gap: clamp(20px, 4vw, 40px);
  margin-top: 36px;
  padding: clamp(24px, 4vw, 40px);
  border: 1px solid var(--paper-faint);
  border-radius: 2px;
  background: rgba(240, 235, 228, 0.07);
}
.hc-offer-num {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.2rem, 6vw, 3.6rem);
  line-height: 1;
  color: var(--blue-light);
  text-transform: uppercase;
}
.hc-offer-text .hc-display { font-size: clamp(1.3rem, 3vw, 1.9rem); }
.hc-offer-text p { margin: 8px 0 0; color: var(--paper-soft); font-size: 14px; }

.hc-perk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
  margin-top: 40px;
}
.hc-perk { border-top: 1px solid var(--paper-faint); padding-top: 16px; }
.hc-perk .hc-display { font-size: 1.3rem; }
.hc-perk p { margin: 8px 0 0; color: var(--paper-soft); font-size: 14px; }

.hc-specials-note {
  margin: 36px 0 0;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--paper-soft);
}

/* ── Chronology band (About) ────────────────────────────── */

/* The century between the 1884 rescue and the 1981 acquisition is four dated
   beats rather than a story section, so it reads as a list, not as splits. */
.hc-chron {
  padding: clamp(56px, 8vw, 96px) 6vw;
  background: var(--ink);
  color: var(--paper);
}
.hc-chron-inner { max-width: 900px; margin: 0 auto; }
.hc-chron-inner > .hc-display { color: var(--paper); }
.hc-chron-lead { margin: 16px 0 0; max-width: 56ch; color: rgba(240, 235, 228, 0.75); }
.hc-chron-list { list-style: none; margin: 40px 0 0; padding: 0; }
.hc-chron-item {
  display: grid;
  grid-template-columns: 148px 1fr;
  gap: clamp(16px, 3vw, 36px);
  padding: 22px 0;
  border-top: 1px solid var(--paper-faint);
}
.hc-chron-year {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  line-height: 1.1;
  color: var(--blue-light);
}
.hc-chron-body .hc-display { font-size: 1.35rem; }
.hc-chron-body p { margin: 8px 0 0; color: rgba(240, 235, 228, 0.72); font-size: 14px; max-width: 52ch; }

/* ── Partners (About) ───────────────────────────────────── */

.hc-partners {
  padding: clamp(48px, 7vw, 84px) 6vw;
}
.hc-partners-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 16px;
}
.hc-partner {
  border-top: 1px solid var(--paper-faint);
  padding-top: 18px;
}
.hc-partner .hc-display { color: var(--paper); font-size: 1.5rem; }
.hc-partner p { margin: 8px 0 0; color: var(--paper-soft); font-size: 13px; }

/* ── Booking: steps ─────────────────────────────────────── */

.hc-steps { padding: clamp(56px, 8vw, 96px) 6vw; background: var(--paper); }
.hc-steps-inner { max-width: 1100px; margin: 0 auto; }
.hc-steps-inner > .hc-display { margin-bottom: 40px; }
.hc-steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.hc-step { border-top: 2px solid var(--ink); padding-top: 18px; }
.hc-step-num {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--rust);
  letter-spacing: 0.1em;
}
.hc-step .hc-display { font-size: 1.35rem; margin: 10px 0 8px; }
.hc-step p { margin: 0; color: var(--ink-2); font-size: 14px; }

/* ── Booking: upcoming availability ─────────────────────── */

.hc-availability { padding: clamp(56px, 8vw, 96px) 6vw; background: var(--paper-2); }
.hc-availability-inner { max-width: 720px; margin: 0 auto; }
.hc-availability-lead { margin: 16px 0 0; color: var(--ink-2); max-width: 54ch; }
.hc-dates { list-style: none; margin: 28px 0 0; padding: 0; }
.hc-date-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line-faint);
}
.hc-date {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.2vw, 1.4rem);
  color: var(--ink);
}
.hc-date-badge {
  flex-shrink: 0;
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--line-soft);
  color: var(--ink-2);
}
.hc-date-badge--confirmed { border-color: var(--ink); color: var(--ink); background: var(--paper); }
.hc-date-badge--held { border-color: var(--rust); color: var(--rust); }
.hc-availability-cta { margin-top: 32px; }

/* ── Booking: preferred vendors ─────────────────────────── */

.hc-vendors { padding: clamp(56px, 8vw, 96px) 6vw; }
.hc-vendors-inner { max-width: 1100px; margin: 0 auto; }
.hc-vendors-inner .hc-display { color: var(--paper); }
.hc-vendors-lead { margin: 16px 0 0; max-width: 54ch; color: var(--paper-soft); }
.hc-vendors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 24px;
  margin-top: 40px;
}
.hc-vendor-cat { border-top: 1px solid var(--paper-faint); padding-top: 16px; }
.hc-vendor-cat .hc-display { font-size: 1.25rem; }
.hc-vendor-cat ul { list-style: none; margin: 12px 0 0; padding: 0; }
.hc-vendor-cat li {
  font-size: 13px;
  color: var(--paper-soft);
  padding: 5px 0;
  font-family: var(--font-body);
}

/* ── In the Area: places to stay ────────────────────────── */

.hc-stay { padding: clamp(56px, 8vw, 96px) 6vw; background: var(--paper); }
.hc-stay-inner { max-width: 1100px; margin: 0 auto; }
.hc-stay-lead { margin: 16px 0 0; max-width: 54ch; color: var(--ink-2); }
.hc-stay-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px;
  margin-top: 40px;
}
.hc-stay-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line-faint);
  background: var(--paper);
}
.hc-stay-card .hc-photo { min-height: 180px; }
.hc-stay-body { padding: 22px; }
.hc-stay-body .hc-display { font-size: 1.4rem; }
.hc-stay-body .hc-mono { margin: 6px 0 0; }
.hc-stay-body p:not(.hc-mono) { margin: 10px 0 0; color: var(--ink-2); font-size: 14px; }

/* ── In the Area: map + grouped points of interest ──────── */

.hc-area-map { padding: clamp(56px, 8vw, 96px) 6vw; background: var(--paper-2); }
.hc-area-map-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 40px;
  align-items: stretch;
}
.hc-poi-groups { margin-top: 24px; display: flex; flex-direction: column; gap: 22px; }
.hc-poi-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.2rem;
}
.hc-poi-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.hc-poi-dot--ent { background: var(--rust); }
.hc-poi-dot--eat { background: var(--blue); }
/* No third hue in the brand palette, so the third category reads as a ring. */
.hc-poi-dot--out { background: transparent; box-shadow: inset 0 0 0 3px var(--blue); }
.hc-poi-cat ul { list-style: none; margin: 0; padding: 0 0 0 21px; }
.hc-poi-cat li { font-size: 14px; color: var(--ink-2); padding: 4px 0; }
.hc-poi-cat a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.hc-map { display: flex; border: 1.5px solid var(--ink); background: var(--paper); }
.hc-map iframe { flex: 1; width: 100%; min-height: 400px; border: 0; display: block; }

/* ── In the Area: photo gallery ─────────────────────────── */

.hc-gallery-section { padding: clamp(56px, 8vw, 96px) 6vw; background: var(--paper); }
.hc-gallery-inner { max-width: 1100px; margin: 0 auto; }
.hc-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 40px;
}
.hc-gallery .hc-photo { min-height: 200px; }

/* ── FAQ accordion ──────────────────────────────────────── */

.hc-faq { padding: clamp(48px, 7vw, 88px) 6vw; background: var(--paper); }
.hc-faq-inner { max-width: 840px; margin: 0 auto; }
.hc-accordion { margin-top: 14px; }
.hc-acc-item { border-bottom: 1px solid var(--line-faint); }
.hc-acc-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.15rem, 2.4vw, 1.6rem);
  color: var(--ink);
  line-height: 1.15;
}
.hc-acc-mark {
  font-family: var(--font-body);
  font-size: 18px;
  color: var(--rust);
  flex-shrink: 0;
}
.hc-acc-a {
  display: none;
  padding: 0 0 24px;
  max-width: 62ch;
  color: var(--ink-2);
  font-size: 15px;
}
.hc-acc-a p { margin: 0; }
.hc-acc-item.is-open .hc-acc-a { display: block; }

.hc-contact-intro { padding: clamp(48px, 7vw, 80px) 6vw; background: var(--paper-2); text-align: center; }
.hc-contact-intro-inner { max-width: 560px; margin: 0 auto; }
.hc-contact-intro p { margin: 14px auto 24px; color: var(--ink-2); }

/* ── Footer ─────────────────────────────────────────────── */

.hc-footer { background: var(--ink); color: var(--paper); }

.hc-footer-contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  padding: clamp(56px, 8vw, 96px) 6vw;
  border-bottom: 1px solid var(--paper-faint);
}
.hc-footer-contact-copy .hc-display { color: var(--paper); }
.hc-footer-contact-copy p { color: rgba(240, 235, 228, 0.72); max-width: 42ch; margin-top: 16px; }
.hc-footer-find { margin-top: 32px; }
.hc-footer-find .hc-mono { color: rgba(240, 235, 228, 0.72); line-height: 1.9; }

.hc-footer-cols {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 32px;
  padding: clamp(48px, 6vw, 72px) 6vw 40px;
}
.hc-footer-brand p { color: var(--paper-soft); font-size: 14px; max-width: 34ch; margin-top: 10px; }
/* Footer carries the lockup as drawn: THE / MEETINGHOUSE stacked and dominant,
   the OHV logo about 1/1.43 of its width, matching the proportions of the
   artwork. The nav keeps the name on one line — not for want of room, since
   two lines do fit the 118px bar, but because they only fit by dropping the
   OHV logo to 96px, at which the dam bars get cramped. One line holds it at
   125px. Both were rendered and compared before choosing. */
/* MEETINGHOUSE is one unbreakable 314px word at 36px, wider than the footer
   column at a 320px viewport — enough to push the whole document into
   horizontal scroll (WCAG 1.4.10 Reflow). The old lockup was an <img> with
   max-width, so it could always shrink; live text cannot.

   Both halves scale on vw below a 400px viewport, rather than only the name:
   shrinking the name alone would leave the OHV logo at its full 214px and
   collapse the 1.47 name-to-logo ratio the lockup is built on. At >=400px
   both sit at their maximum and nothing moves. */
.hc-logo-stack { display: inline-flex; flex-direction: column; align-items: center; max-width: 100%; }
.hc-logo-name--footer {
  font-size: clamp(24px, 9vw, 36px);
  line-height: 1.06;
  letter-spacing: 0.03em;
  text-align: center;
  white-space: normal;
}
.hc-logo-at--footer { font-size: 27px; margin: 34px 0 27px; }
.hc-logo--footer { display: block; width: min(214px, 53vw); max-width: 100%; height: auto; }
.hc-footer-cols h5 {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-soft);
  margin: 0 0 12px;
}
.hc-footer-cols ul { list-style: none; margin: 0; padding: 0; }
.hc-footer-cols li { font-size: 14px; color: rgba(240, 235, 228, 0.72); padding: 5px 0; }
.hc-footer-cols a { text-decoration: none; }
.hc-footer-cols a:hover { color: var(--paper); }

.hc-footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 22px 6vw;
  border-top: 1px solid var(--paper-faint);
  font-size: 12px;
  color: var(--paper-soft);
}
.hc-footer-bottom p { margin: 0; }
.hc-footer-bottom a { color: rgba(240, 235, 228, 0.8); }

/* ── Contact form ───────────────────────────────────────── */

.hc-form { display: flex; flex-direction: column; gap: 16px; }
.hc-field { display: flex; flex-direction: column; gap: 6px; }
.hc-field label {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper-soft);
}
.hc-field-opt { text-transform: none; letter-spacing: 0; opacity: 0.7; }
.hc-field input, .hc-field textarea {
  width: 100%;
  padding: 12px 14px;
  background: rgba(240, 235, 228, 0.06);
  border: 1px solid var(--paper-faint);
  border-radius: 2px;
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 15px;
}
.hc-field textarea { min-height: 120px; resize: vertical; }
.hc-field input::placeholder, .hc-field textarea::placeholder { color: var(--paper-soft); }
.hc-field input:focus, .hc-field textarea:focus {
  outline: none;
  border-color: var(--blue-light);
  background: rgba(240, 235, 228, 0.09);
}
.hc-field.has-error input, .hc-field.has-error textarea { border-color: #F2C9B4; }
.hc-field-error { font-size: 12px; color: #F2C9B4; }
.hc-form-error {
  padding: 10px 14px;
  border: 1px solid #F2C9B4;
  border-radius: 2px;
  color: #F2C9B4;
  font-size: 13px;
}
.hc-form .hc-btn { align-self: flex-start; margin-top: 4px; }

.hc-form-success { text-align: center; padding: 40px 24px; }
.hc-form-success-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--paper);
  color: var(--blue);
  display: grid;
  place-items: center;
  margin: 0 auto 16px;
}
.hc-form-success .hc-display { color: var(--paper); }
.hc-form-success p { color: rgba(240, 235, 228, 0.72); margin: 8px 0 0; }

/* ── Brown fields ───────────────────────────────────────── */

/* Brand brown carrying a whole section, so the palette reads on every page
   rather than only in the buttons. Cream on brown is 6.69:1, but --paper-soft
   is tuned to the blue field and lands at 4.27:1 here — under AA — so the
   muted alpha rises to 0.80 (4.91:1).

   The ink tokens are re-pointed rather than overridden element by element:
   every rule in this file already reads var(--ink*) and var(--paper-soft), so
   one rebinding covers eyebrows, leads, body copy and hairlines without a
   specificity fight against selectors like `.hc-layout-text p:not(.hc-mono)`. */
.hc-on-rust {
  --ink: var(--paper);
  --ink-2: rgba(240, 235, 228, 0.80);   /* 4.91:1 on brown */
  --ink-3: rgba(240, 235, 228, 0.80);
  --paper-soft: rgba(240, 235, 228, 0.80);
  --paper-faint: rgba(240, 235, 228, 0.20);
  --line-faint: rgba(240, 235, 228, 0.16);
  --line-soft: rgba(240, 235, 228, 0.34);
  background: var(--rust);
  color: var(--paper);
}

/* Opaque light cards on the field keep their own cream ground, so the ink
   tokens snap back at their edge — otherwise blueprint strokes and photo
   captions render cream on cream. Custom properties inherit into the inline
   SVGs, so the floor plans are covered by the .hc-plan entry.

   `color` has to come back too, not just the tokens: anything that inherits
   it rather than naming a token — .hc-plan::after's compass 'N', a stay
   card's heading — would otherwise still be drawing in the field's cream. */
.hc-on-rust .hc-photo,
.hc-on-rust .hc-plan,
.hc-on-rust .hc-stay-card {
  --ink: var(--blue);
  --ink-2: #44617A;
  --ink-3: #4C677E;
  --line-faint: rgba(45, 78, 107, 0.16);
  --line-soft: rgba(45, 78, 107, 0.34);
  color: var(--ink);
}

/* .hc-btn--primary is a var(--ink) fill, which the rebinding above would turn
   cream on cream. On a brown field it becomes the outlined secondary, leaving
   the swapped --rust button as the one solid CTA. .hc-btn--ghost and
   .hc-btn--outline already read the rebound tokens and need no rule. */
.hc-on-rust .hc-btn--primary {
  background: transparent;
  color: var(--paper);
  border-color: var(--paper-soft);
}
.hc-on-rust .hc-btn--primary:hover {
  background: rgba(240, 235, 228, 0.08);
  border-color: var(--paper);
}

/* ── Responsive ─────────────────────────────────────────── */

@media (max-width: 860px) {
  .hc-burger { display: flex; }
  .hc-nav-links {
    position: fixed;
    top: var(--nav-h); left: 0; right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 16px 6vw 24px;
    background: var(--paper);
    border-bottom: 1px solid var(--line-faint);
    box-shadow: 0 12px 24px rgba(45, 78, 107, 0.12);
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }
  .hc-nav-links.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .hc-nav-links a { color: var(--ink); width: 100%; padding: 10px 0; }
  .hc-nav-links a.hc-nav-cta { margin-top: 8px; }
  .hc-nav:not(.is-solid) .hc-nav-links.is-open .hc-nav-cta {
    background: var(--rust);
    color: var(--paper);
  }

  .hc-split, .hc-layout {
    grid-template-columns: 1fr;
  }
  /* On mobile, keep photo above text for every scene regardless of order. */
  .hc-split .hc-photo, .hc-layout .hc-photo { order: 0; min-height: 260px; }
  .hc-split .hc-split-text, .hc-layout .hc-layout-text { order: 1; }

  .hc-partners-grid { grid-template-columns: 1fr; }
  .hc-chron-item { grid-template-columns: 1fr; gap: 4px; }
  .hc-steps-grid { grid-template-columns: 1fr 1fr; }
  .hc-footer-contact { grid-template-columns: 1fr; }
  .hc-footer-cols { grid-template-columns: 1fr 1fr; }
  .hc-hero-photo-note { display: none; }
  .hc-seal { width: 118px; height: 118px; top: calc(var(--nav-h) + 16px); right: 5vw; }
  .hc-hero--home { padding-top: calc(var(--nav-h) + 150px); }
  .hc-area-map-inner { grid-template-columns: 1fr; }
  .hc-gallery { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 520px) {
  .hc-steps-grid { grid-template-columns: 1fr; }
  .hc-footer-cols { grid-template-columns: 1fr; }
  .hc-gallery { grid-template-columns: 1fr; }
  .hc-hero-cta .hc-btn, .hc-cta-band .hc-btn { width: 100%; }
}