/* Remlinger Farms — Fall Harvest Pumpkin Festival
   Page styles. The header and footer belong to Remlinger Global Shell and are
   not styled here; every rule below is scoped to .fh so nothing leaks into the
   shell or into X/Pro. */

/* Metric-matched fallbacks.
   size-adjust = target font's average lowercase advance / the fallback's.
   Measured from the shipped woff2 files: Instrument Serif 0.3922 em (italic
   0.4134), Space Grotesk 0.5550 em. Fallback averages are the published
   Georgia (0.5471) and Arial (0.4563) figures. ascent/descent overrides are
   the real font's hhea values divided by the size-adjust so line boxes match
   before and after the swap. */

@font-face {
  font-family: "FH Serif Fallback";
  src: local("Georgia"), local("Times New Roman"), local("Times");
  size-adjust: 71.7%;
  ascent-override: 138.1%;
  descent-override: 43.2%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "FH Serif Fallback";
  font-style: italic;
  src: local("Georgia Italic"), local("Georgia"), local("Times New Roman Italic");
  size-adjust: 75.6%;
  ascent-override: 131.0%;
  descent-override: 41.0%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "FH Sans Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 121.6%;
  ascent-override: 80.9%;
  descent-override: 24.0%;
  line-gap-override: 0%;
}

/* ---------------------------------------------------------------- tokens */

body.fh-page {
  --fh-accent: #e4620e;          /* decorative fills, rules, glyphs        */
  --fh-accent-strong: #c4500b;   /* anything carrying white text — 4.67:1  */
  --fh-cider: #f0a93b;
  --fh-moss: #4e5b2c;
  --fh-ink: #140d06;
  --fh-ink-2: #0f0a05;
  --fh-ink-3: #1a1109;
  --fh-cream: #f7efe2;
  --fh-eyebrow-light: #7a5c3a;   /* on cream — 5.38:1                      */
  --fh-numeral: #a8420a;         /* on cream — 5.34:1                      */
  --fh-shell-header: 96px;       /* shell header band + breathing room     */
  --fh-gutter: clamp(16px, 4vw, 44px);
  --fh-radius: 22px;

  margin: 0;
  background: var(--fh-ink);
  -webkit-text-size-adjust: 100%;
}

/* colour and font live on .fh, not on body.
   The HighTrek ticket widget mounts at body level, so anything inherited from
   body lands on it: cream text on its white panel, and a fallback face carrying
   size-adjust: 121.6%. Overflow moved here too — .fh already clips, and a
   propagated overflow-x on body changes how the viewport clips fixed elements,
   which is the layer a third-party modal lives in. */
.fh {
  color: var(--fh-cream);
  font-family: "FH Space Grotesk", "FH Sans Fallback", system-ui, -apple-system, sans-serif;
}

body.fh-page.fh-locked {
  overflow: hidden;
}

html:has(body.fh-page) {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html:has(body.fh-page) { scroll-behavior: auto; }
}

.fh *,
.fh *::before,
.fh *::after { box-sizing: border-box; }

.fh {
  position: relative;
  width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
}

.fh ::selection { background: var(--fh-accent); color: #fff; }

/* --------------------------------------------------------------------------
   Theme guard

   X Theme Pro sets a colour on every h1–h6 site-wide. A declared value beats
   an inherited one at any specificity, so headings that only inherited from
   body.fh-page rendered in the theme's dark ink — invisible on every dark
   section. Everything here exists to take that back.

   --fh-text is the readable colour for whatever surface an element sits on.
   Photo overlays set it themselves because they sit on images, not sections.
   -------------------------------------------------------------------------- */

.fh { --fh-text: var(--fh-cream); }
.fh .fh-section--light { --fh-text: var(--fh-ink); }

.fh-figure figcaption,
.fh-portrait figcaption,
.fh-tile-copy,
.fh-food-hero-copy,
.fh-cannon-copy,
.fh-callout,
.fh-dialog,
.fh-video-lightbox { --fh-text: var(--fh-cream); }

.fh :is(h1, h2, h3, h4, h5, h6) { color: var(--fh-text) !important; }


/* every section clears the fixed shell header when an anchor is followed */
.fh-section { scroll-margin-top: var(--fh-shell-header); }

/* ------------------------------------------------------------------ type */

.fh-display {
  font-family: "FH Instrument Serif", "FH Serif Fallback", Georgia, serif;
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.fh-em { font-style: italic; color: var(--fh-cider); }
.fh-section--light .fh-em { color: var(--fh-accent); }

.fh-eyebrow {
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--fh-cider);
  margin: 0;
}

.fh-section--light .fh-eyebrow { color: var(--fh-eyebrow-light); }

.fh-lede {
  font-size: clamp(15px, 1.7vw, 19px);
  line-height: 1.6;
  color: rgba(247, 239, 226, 0.82);
}

.fh-section--light .fh-lede,
.fh-section--light .fh-body { color: #4a3a26; }

.fh-body { font-size: 16px; line-height: 1.65; color: rgba(247, 239, 226, 0.72); }

/* --------------------------------------------------------------- section */

.fh-section {
  position: relative;
  z-index: 6;
  padding: clamp(64px, 10vw, 132px) var(--fh-gutter);
}

.fh-section--dark { background: var(--fh-ink-3); }
.fh-section--darker { background: var(--fh-ink-2); padding: 0; }
.fh-section--light { background: var(--fh-cream); color: var(--fh-ink); }
.fh-section--tickets { background: linear-gradient(180deg, #2a1406 0%, #140d06 100%); }

.fh-shell { max-width: 1240px; margin: 0 auto; }
.fh-shell--narrow { max-width: 1100px; margin: 0 auto; }
.fh-shell--tight { max-width: 940px; margin: 0 auto; }

.fh-split {
  display: grid;
  gap: clamp(28px, 5vw, 64px);
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 900px) {
  .fh-split { grid-template-columns: 1fr 1fr; }
  .fh-split--wide-right { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
}

/* ------------------------------------------------------------------ hero */

.fh-hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  padding: calc(var(--fh-shell-header) + env(safe-area-inset-top)) var(--fh-gutter) 0;
  padding-left: max(var(--fh-gutter), env(safe-area-inset-left));
  padding-right: max(var(--fh-gutter), env(safe-area-inset-right));
  background: radial-gradient(120% 80% at 50% 8%, #3a1b06 0%, #1e1108 46%, #140d06 100%);
  overflow: hidden;
  z-index: auto;
}

.fh-hero-weave {
  position: absolute;
  inset: 0;
  opacity: 0.28;
  background: repeating-linear-gradient(115deg, rgba(247, 239, 226, 0.05) 0 1px, transparent 1px 7px);
  pointer-events: none;
}

/* Full bleed at every width. This used to be width:min(1180px,152%), which
   capped the photograph at 1180px on any viewport wider than about 776px —
   on a 1920 screen it sat as a letterboxed rectangle in the middle. */
.fh-hero-photo {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.fh-hero-photo picture {
  display: block;
  width: 100%;
  height: 100%;
}

.fh-hero-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 48%;
  /* base scale gives the parallax headroom to move without exposing an edge */
  transform: scale(1.06);
  transform-origin: center 45%;
  filter: saturate(1.06) contrast(1.03) brightness(1.03);
  will-change: transform;
}

/* Faint corner vignette. Not a mask over the picture — it only settles the
   four corners so the photograph does not fight the header controls or the
   stat strip. The middle of the frame is untouched. */
.fh-hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(20, 13, 6, 0.52) 0%, rgba(20, 13, 6, 0.18) 96px, rgba(20, 13, 6, 0) 160px),
    radial-gradient(128% 108% at 50% 46%,
      rgba(20, 13, 6, 0) 52%,
      rgba(20, 13, 6, 0.28) 82%,
      rgba(20, 13, 6, 0.6) 100%);
}

/* A pool behind the copy and nothing else, on its own layer above the
   photograph. It used to live on .fh-hero-body, which sat high enough in the
   stack to darken everything in the hero rather than just the type. */
.fh-hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(72% 42% at 50% 45%,
    rgba(20, 13, 6, 0.8) 0%,
    rgba(20, 13, 6, 0.6) 46%,
    rgba(20, 13, 6, 0) 82%);
}

@media (min-width: 900px) {
  .fh-hero-scrim {
    background: radial-gradient(46% 36% at 50% 45%,
      rgba(20, 13, 6, 0.76) 0%,
      rgba(20, 13, 6, 0.52) 48%,
      rgba(20, 13, 6, 0) 80%);
  }
}

.fh-hero-body {
  position: relative;
  z-index: 6;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 22px;
  padding: clamp(24px, 6vw, 60px) 0;
}

.fh-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(240, 169, 59, 0.42);
  /* was 0.5 — the photograph behind it is a bright pumpkin now, and 11px cider
     text only reached 3.75:1 through the old glass */
  background: rgba(20, 13, 6, 0.66);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fh-cider);
}

.fh-hero-badge i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--fh-cider);
}

.fh-hero h1 {
  margin: 0;
  font-size: clamp(46px, 12vw, 132px);
  text-shadow: 0 6px 40px rgba(20, 13, 6, 0.7);
}

.fh-hero p {
  margin: 0;
  max-width: 46ch;
  text-shadow: 0 2px 18px rgba(20, 13, 6, 0.85);
}

.fh-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

/* --------------------------------------------------------------- buttons */

.fh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 28px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.22s, color 0.22s, border-color 0.22s, transform 0.22s;
}

.fh-btn--sm { min-height: 48px; padding: 0 22px; font-size: 12px; }

/* Beats the generic `.fh a` link colour, which is one class less specific. */
.fh a.fh-btn { text-decoration: none; }

.fh .fh-btn--primary { background: var(--fh-accent-strong); color: #fff; }
.fh .fh-btn--primary:hover { background: var(--fh-cream); color: var(--fh-ink); }

.fh .fh-btn--ghost {
  background: rgba(247, 239, 226, 0.08);
  border-color: rgba(247, 239, 226, 0.34);
  color: var(--fh-cream);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.fh .fh-btn--ghost:hover { background: rgba(247, 239, 226, 0.2); color: #fff; }

.fh .fh-btn--ink {
  background: transparent;
  border-color: rgba(20, 13, 6, 0.36);
  color: var(--fh-ink);
}
.fh .fh-btn--ink:hover { background: var(--fh-accent-strong); border-color: var(--fh-accent-strong); color: #fff; }

.fh .fh-btn--cream { background: var(--fh-cream); color: var(--fh-ink); }
.fh .fh-btn--cream:hover { background: #fff; }

/* --------------------------------------------------------------- hero stats */

.fh-stats {
  position: relative;
  z-index: 6;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: rgba(247, 239, 226, 0.16);
  border-top: 1px solid rgba(247, 239, 226, 0.16);
  margin: 0 calc(var(--fh-gutter) * -1);
}

.fh-stats > div { background: var(--fh-ink); padding: 18px clamp(12px, 2vw, 22px); }
.fh-stats > div:last-child { grid-column: 1 / -1; }

@media (min-width: 760px) {
  .fh-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .fh-stats > div:last-child { grid-column: auto; }
}

.fh-stats b {
  display: block;
  font-family: "FH Instrument Serif", "FH Serif Fallback", Georgia, serif;
  font-weight: 400;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1;
}

.fh-stats span {
  display: block;
  margin-top: 8px;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(247, 239, 226, 0.62);
}

/* --------------------------------------------------------------- marquee */

.fh-marquee {
  position: relative;
  z-index: 6;
  overflow: hidden;
  background: var(--fh-accent);
  color: #1b0e04;
  border-block: 1px solid rgba(20, 13, 6, 0.25);
}

.fh-marquee-track {
  display: flex;
  width: max-content;
  padding: 13px 0;
  font-size: clamp(13px, 1.5vw, 17px);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  animation: fh-marquee 38s linear infinite;
}

.fh-marquee-track span { padding-right: 34px; }

@keyframes fh-marquee {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

/* ----------------------------------------------------------------- dates */

.fh-dates-hours {
  margin: 16px 0 0;
  max-width: 44ch;
  font-size: 15px;
  line-height: 1.6;
  color: #4a3a26;
}

.fh-dates-hours strong { color: var(--fh-ink); font-weight: 600; }

.fh-weekends {
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(20, 13, 6, 0.16);
}

.fh-weekend {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 16px;
  flex-wrap: wrap;
  padding: 18px 0;
  border-bottom: 1px solid rgba(20, 13, 6, 0.16);
}

.fh-weekend-when { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }

.fh-weekend-range {
  font-family: "FH Instrument Serif", "FH Serif Fallback", Georgia, serif;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1;
}

.fh-weekend-days {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fh-eyebrow-light);
}

.fh-weekend-tag {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(196, 80, 11, 0.4);
  background: rgba(228, 98, 14, 0.1);
  color: #8f3a08;
  white-space: nowrap;
}

/* ----------------------------------------------------------------- rides */

.fh-rides-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.fh-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  margin-top: 28px;
}

.fh-figure {
  grid-column: span 12;
  margin: 0;
  position: relative;
  border-radius: var(--fh-radius);
  overflow: hidden;
  min-height: clamp(300px, 46vw, 460px);
  background: #241a10;
}

.fh-figure--tall { min-height: clamp(340px, 56vw, 560px); }

.fh-figure img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.fh-figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 13, 6, 0) 20%, rgba(20, 13, 6, 0.66) 52%, rgba(20, 13, 6, 0.96) 100%);
  pointer-events: none;
}

.fh-figure figcaption {
  text-shadow: 0 1px 3px rgba(10, 6, 2, 0.9);
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: clamp(18px, 2.6vw, 34px);
  max-width: 62ch;
}

.fh-figure figcaption .fh-kicker {
  margin: 0;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fh-cider);
}

.fh-figure figcaption h3 {
  margin: 8px 0 0;
  font-family: "FH Instrument Serif", "FH Serif Fallback", Georgia, serif;
  font-weight: 400;
  font-size: clamp(26px, 3.4vw, 48px);
  line-height: 1;
}

.fh-figure figcaption p {
  margin: 10px 0 0;
  max-width: 44ch;
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(247, 239, 226, 0.84);
}

@media (min-width: 900px) {
  .fh-figure[data-span="7"] { grid-column: span 7; }
  .fh-figure[data-span="6"] { grid-column: span 6; }
  .fh-figure[data-span="5"] { grid-column: span 5; }
}

.fh-callout {
  margin-top: 20px;
  padding: clamp(20px, 3vw, 30px);
  border-radius: var(--fh-radius);
  border: 1px solid rgba(240, 169, 59, 0.34);
  background: rgba(240, 169, 59, 0.07);
  display: flex;
  flex-wrap: wrap;
  gap: 18px 32px;
  align-items: center;
  justify-content: space-between;
}

.fh-callout .fh-kicker {
  margin: 0;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fh-cider);
}

.fh-callout h3 {
  margin: 10px 0 0;
  font-family: "FH Instrument Serif", "FH Serif Fallback", Georgia, serif;
  font-weight: 400;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.15;
}

.fh-callout p {
  margin: 8px 0 0;
  max-width: 56ch;
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(247, 239, 226, 0.76);
}

/* ------------------------------------------------------------------ food */

.fh-food-hero {
  position: relative;
  min-height: min(100svh, 860px);
  display: grid;
  place-items: end start;
  overflow: hidden;
}

.fh-food-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: brightness(1.07) saturate(1.08) contrast(1.03);
}

.fh-food-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  /* The full-image wash is gone — the caramel apple is at full brightness and
     the copy carries its own frosted panel instead. This only settles the very
     bottom edge into the menu block below. */
  background: linear-gradient(180deg, rgba(15, 10, 5, 0) 76%, rgba(15, 10, 5, 0.42) 100%);
}

.fh-food-hero-copy {
  position: relative;
  z-index: 2;
  margin: clamp(18px, 3vw, 46px);
  padding: clamp(22px, 3vw, 40px);
  max-width: min(560px, calc(100% - 2 * clamp(18px, 3vw, 46px)));
  border: 1px solid rgba(247, 239, 226, 0.16);
  border-radius: 24px;
  background: rgba(12, 8, 4, 0.66);
  -webkit-backdrop-filter: blur(18px) saturate(118%);
  backdrop-filter: blur(18px) saturate(118%);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.42);
}

.fh-food-hero-copy h2 {
  margin: 12px 0 0;
  font-size: clamp(36px, 5.4vw, 72px);
}

.fh-menu {
  padding: clamp(56px, 8vw, 110px) var(--fh-gutter) clamp(64px, 10vw, 132px);
}

.fh-menu-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 20px;
  flex-wrap: wrap;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(247, 239, 226, 0.14);
}

.fh-menu-head h3 { margin: 0; font-size: clamp(28px, 4vw, 52px); }

.fh-menu-hint {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(247, 239, 226, 0.62);
}

.fh-menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 16px;
  margin-top: 26px;
}

.fh-tile {
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 20px;
  overflow: hidden;
  /* ~120px taller than before so the caption's scrim falls under the frame
     rather than across the dish */
  min-height: clamp(440px, 56vw, 545px);
  background: #241a10;
  color: inherit;
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: transform 0.24s;
}

.fh-tile:hover { transform: translateY(-4px); }
.fh-tile:hover::before { opacity: 1; }

.fh-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: 20px;
  box-shadow: inset 0 0 0 2px var(--fh-cider);
  opacity: 0;
  transition: opacity 0.24s;
  pointer-events: none;
}

.fh-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* the dish sits high in the taller frame, clear of the caption */
  object-position: center 38%;
  filter: brightness(1.08) saturate(1.08) contrast(1.03);
}

.fh-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Starts at 52% instead of 18%: the food sits in the upper two-thirds and is
     now untouched, and the ramp only covers the caption. */
  background: linear-gradient(180deg,
    rgba(15, 10, 5, 0) 56%,
    rgba(15, 10, 5, 0.74) 70%,
    rgba(15, 10, 5, 0.96) 100%);
}

.fh-tile-copy {
  text-shadow: 0 1px 3px rgba(6, 4, 1, 0.9);
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: clamp(16px, 2vw, 24px);
}

.fh-tile-copy small {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fh-cider);
}

.fh-tile-copy strong {
  display: block;
  margin-top: 7px;
  font-family: "FH Instrument Serif", "FH Serif Fallback", Georgia, serif;
  font-weight: 400;
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.06;
}

.fh-tile-note {
  display: block;
  margin-top: 8px;
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(247, 239, 226, 0.78);
}

/* --------------------------------------------------------------- village */

.fh-numbered {
  display: grid;
  gap: 1px;
  background: rgba(20, 13, 6, 0.14);
  margin-top: 32px;
  border-radius: 14px;
  overflow: hidden;
}

.fh-numbered > div {
  background: var(--fh-cream);
  padding: 16px 18px;
  display: flex;
  gap: 16px;
  align-items: baseline;
}

.fh-numbered b {
  font-family: "FH Instrument Serif", "FH Serif Fallback", Georgia, serif;
  font-weight: 400;
  font-size: 20px;
  color: var(--fh-numeral);
  min-width: 26px;
  font-variant-numeric: tabular-nums;
}

.fh-numbered-copy { display: block; }
.fh-numbered-copy strong { display: block; font-weight: 600; font-size: 15px; }
.fh-numbered-copy .fh-numbered-body { display: block; font-size: 13.5px; color: #5c4630; line-height: 1.5; margin-top: 3px; }

.fh-portrait {
  margin: 0;
  position: relative;
  border-radius: var(--fh-radius);
  overflow: hidden;
  min-height: clamp(320px, 52vw, 580px);
  background: #241a10;
}

.fh-portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.fh-portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 13, 6, 0) 26%, rgba(20, 13, 6, 0.64) 58%, rgba(20, 13, 6, 0.95) 100%);
}

.fh-portrait figcaption {
  text-shadow: 0 1px 3px rgba(10, 6, 2, 0.9);
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  padding: clamp(18px, 2.6vw, 32px);
  color: var(--fh-cream);
}

.fh-portrait figcaption .fh-kicker {
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fh-cider);
}

.fh-portrait figcaption strong {
  display: block;
  margin-top: 8px;
  font-family: "FH Instrument Serif", "FH Serif Fallback", Georgia, serif;
  font-weight: 400;
  font-size: clamp(24px, 3vw, 38px);
  line-height: 1.05;
}

/* ------------------------------------------------------------- timeline */

.fh-timeline { display: flex; flex-direction: column; }

.fh-timeline > div {
  display: grid;
  grid-template-columns: clamp(64px, 10vw, 120px) minmax(0, 1fr);
  gap: clamp(14px, 3vw, 36px);
  padding: 22px 0;
  border-top: 1px solid rgba(247, 239, 226, 0.14);
}

.fh-timeline > div:last-child { border-bottom: 1px solid rgba(247, 239, 226, 0.14); }

.fh-timeline time {
  font-family: "FH Instrument Serif", "FH Serif Fallback", Georgia, serif;
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.1;
  color: var(--fh-cider);
  font-variant-numeric: tabular-nums;
}

.fh-timeline h3 {
  margin: 0;
  font-size: clamp(17px, 2vw, 22px);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.fh-timeline p {
  margin: 8px 0 0;
  max-width: 62ch;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(247, 239, 226, 0.72);
}

/* --------------------------------------------------------------- tickets */

.fh-tiers {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 272px), 1fr));
  margin-top: 40px;
}

.fh-tier {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(22px, 3vw, 34px);
  border-radius: 24px;
  border: 1px solid rgba(247, 239, 226, 0.16);
  background: rgba(247, 239, 226, 0.05);
}

.fh-tier-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.fh-tier-label {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fh-cider);
}

.fh-tier-tag {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(247, 239, 226, 0.24);
  color: rgba(247, 239, 226, 0.78);
  white-space: nowrap;
}

.fh-tier-price {
  font-family: "FH Instrument Serif", "FH Serif Fallback", Georgia, serif;
  font-size: clamp(46px, 6vw, 70px);
  line-height: 0.94;
  font-variant-numeric: tabular-nums;
}

.fh-tier-sub { font-size: 13.5px; color: rgba(247, 239, 226, 0.7); line-height: 1.55; }

.fh-tier .fh-btn { margin-top: auto; width: 100%; }

.fh-fineprint {
  margin: 26px 0 0;
  text-align: center;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(247, 239, 226, 0.68);
}

/* ----------------------------------------------------------------- visit */

.fh-visit-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }

.fh-drives {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1px;
  background: rgba(20, 13, 6, 0.14);
  border: 1px solid rgba(20, 13, 6, 0.14);
  border-radius: 14px;
  overflow: hidden;
  margin-top: 30px;
}

.fh-drives > div { background: var(--fh-cream); padding: 16px 18px; }

.fh-drives b {
  display: block;
  font-family: "FH Instrument Serif", "FH Serif Fallback", Georgia, serif;
  font-weight: 400;
  font-size: 26px;
  line-height: 1;
}

.fh-drives span {
  display: block;
  margin-top: 7px;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fh-eyebrow-light);
}

.fh-map {
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(20, 13, 6, 0.16);
  background: #e7dcc7;
  min-height: clamp(300px, 42vw, 480px);
}

.fh-map iframe { width: 100%; height: 100%; min-height: clamp(300px, 42vw, 480px); border: 0; display: block; }

/* ------------------------------------------------------------------- faq */

.fh-faq { border-top: 1px solid rgba(247, 239, 226, 0.14); margin-top: 34px; }

.fh-faq-item { border-bottom: 1px solid rgba(247, 239, 226, 0.14); }

.fh-faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 64px;
  padding: 18px 2px;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  font-size: clamp(15.5px, 2vw, 18px);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: color 0.2s;
}

.fh-faq-q:hover { color: var(--fh-cider); }

.fh-faq-sign {
  font-family: "FH Instrument Serif", "FH Serif Fallback", Georgia, serif;
  font-size: 26px;
  line-height: 1;
  color: var(--fh-cider);
  flex: none;
}

.fh-faq-a {
  margin: 0;
  padding: 0 2px 22px;
  max-width: 70ch;
  font-size: 15.5px;
  line-height: 1.7;
  color: rgba(247, 239, 226, 0.76);
}

.fh-faq-a[hidden] { display: none; }

/* --------------------------------------------------------------- closing */

.fh-closing {
  position: relative;
  z-index: 6;
  padding: clamp(48px, 8vw, 96px) var(--fh-gutter);
  background: var(--fh-ink-2);
  border-top: 1px solid rgba(247, 239, 226, 0.12);
}

.fh-closing-inner {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  gap: 28px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  align-items: end;
}

.fh-closing h2 { margin: 0; font-size: clamp(34px, 6vw, 68px); }

.fh-closing p {
  margin: 16px 0 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(247, 239, 226, 0.7);
}

.fh-closing-actions { display: flex; flex-wrap: wrap; gap: 10px; }

@media (min-width: 760px) {
  .fh-closing-actions { justify-content: flex-end; }
}

/* -------------------------------------------------------------- dialogs */
/* Above the shell header (980) and below the shell's own dialogs (1400). */

.fh-dialog {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: max(18px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
           max(18px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: rgba(10, 7, 3, 0.94);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.fh-dialog[hidden] { display: none; }

.fh-dialog-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: default;
}

.fh-dialog-head,
.fh-dialog-body,
.fh-dialog-foot { position: relative; z-index: 1; }

.fh-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.fh-dialog-head .fh-kicker {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fh-cider);
}

.fh-dialog-head h2 {
  margin: 2px 0 0;
  font-family: "FH Instrument Serif", "FH Serif Fallback", Georgia, serif;
  font-weight: 400;
  font-size: clamp(22px, 3vw, 32px);
  line-height: 1.05;
}

.fh-dialog-close {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(247, 239, 226, 0.32);
  background: rgba(247, 239, 226, 0.08);
  color: var(--fh-cream);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.fh-dialog-close:hover { background: var(--fh-accent-strong); color: #fff; }

.fh-dialog-body {
  flex: 1;
  min-height: 0;
  border-radius: 20px;
  overflow: hidden;
  background: rgba(247, 239, 226, 0.05);
  border: 1px solid rgba(247, 239, 226, 0.14);
}

.fh-dialog-body img { width: 100%; height: 100%; object-fit: contain; display: block; }
.fh-dialog-body iframe { width: 100%; height: 100%; border: 0; display: block; }

.fh-dialog-foot { max-width: 62ch; }

.fh-dialog-foot strong {
  display: block;
  font-family: "FH Instrument Serif", "FH Serif Fallback", Georgia, serif;
  font-weight: 400;
  font-size: clamp(22px, 3vw, 34px);
  line-height: 1.05;
}

.fh-dialog-foot p { margin: 8px 0 0; font-size: 14.5px; line-height: 1.6; color: rgba(247, 239, 226, 0.76); }

.fh-dialog-foot a {
  display: inline-block;
  margin-top: 10px;
  min-height: 44px;
  line-height: 44px;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------- reveals */

.fh-reveal { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  .fh-js .fh-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.8s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  .fh-js .fh-reveal.is-in { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .fh-marquee-track { animation: none; transform: none; }
  .fh-marquee { overflow-x: auto; }
  .fh-tile:hover { transform: none; }
}

/* ==========================================================================
   Apple cannon — focus-circle video feature

   Ported from the homepage application's `.split-focus-*` and `.tile-video-*`
   components so the two pages behave identically. Layer order, clip radii,
   the 7s conic orbit, the easing curves and the loading count-up are the
   homepage's values, not new ones.
   ========================================================================== */

.fh-cannon {
  position: relative;
  margin: 14px 0 0;
  border-radius: var(--fh-radius);
  overflow: hidden;
  min-height: clamp(460px, 64vw, 720px);
  background: #241a10;
  color: #fff;
  isolation: isolate;
}

/* base photograph — flat, shaded, reads as the out-of-focus surround */
.fh-cannon-base {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: brightness(1.08) saturate(1.02) contrast(1.01);
  transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.fh-cannon:hover .fh-cannon-base { transform: scale(1.045); }

/* the same photograph again, clipped to the circle and lifted — this is what
   "in focus" actually is: brighter, more saturated, above the shade */
.fh-cannon-focus {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  clip-path: circle(40%);
  filter: brightness(1.2) saturate(1.08) contrast(1.02);
  pointer-events: none;
  transition:
    clip-path 1.1s cubic-bezier(0.2, 0.72, 0.2, 1),
    opacity 1.1s cubic-bezier(0.2, 0.72, 0.2, 1),
    transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.fh-cannon-shade {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(rgba(5, 8, 7, 0) 0%, rgba(5, 8, 7, 0.08) 44%, rgba(5, 8, 7, 0.86) 100%);
}

.fh-cannon-circle {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  width: min(72%, 460px);
  aspect-ratio: 1;
  padding: 0;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  outline: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  background: radial-gradient(circle at 32% 23%, rgba(255, 255, 255, 0.15), transparent 37%),
              rgba(255, 255, 255, 0.02);
  box-shadow:
    inset 3px 3px 8px rgba(255, 255, 255, 0.18),
    inset -6px -8px 14px rgba(0, 0, 0, 0.14),
    -7px -8px 24px rgba(255, 255, 255, 0.08),
    11px 20px 58px rgba(0, 0, 0, 0.22);
  transition:
    opacity 1.1s cubic-bezier(0.2, 0.72, 0.2, 1),
    transform 1.1s cubic-bezier(0.2, 0.72, 0.2, 1),
    box-shadow 0.26s,
    border-color 0.26s;
}

/* the rotating arc */
.fh-cannon-circle::before {
  content: "";
  position: absolute;
  inset: 9px;
  z-index: 2;
  border-radius: inherit;
  background: conic-gradient(from 30deg, transparent 0 62%, rgba(255, 255, 255, 0.94) 69%, transparent 76% 100%);
  animation: fh-focus-orbit 7s linear infinite;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 0);
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 0);
}

/* the static glass bezel */
.fh-cannon-circle::after {
  content: "";
  position: absolute;
  inset: -5px;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  background: conic-gradient(from 135deg,
    rgba(255, 255, 255, 0.92),
    rgba(240, 169, 59, 0.48) 42deg,
    rgba(255, 255, 255, 0.1) 92deg,
    rgba(20, 13, 6, 0.5) 175deg,
    rgba(6, 9, 7, 0.7) 224deg,
    rgba(228, 98, 14, 0.18) 282deg,
    rgba(255, 255, 255, 0.78) 340deg,
    rgba(255, 255, 255, 0.92));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
}

.fh-cannon-circle:hover,
.fh-cannon-circle:focus-visible {
  border-color: #fff;
  box-shadow:
    inset 4px 4px 9px rgba(255, 255, 255, 0.24),
    inset -7px -9px 15px rgba(0, 0, 0, 0.14),
    -8px -9px 28px rgba(255, 255, 255, 0.12),
    13px 23px 68px rgba(0, 0, 0, 0.3),
    0 0 0 8px rgba(255, 255, 255, 0.07);
}

.fh-cannon-circle:focus-visible { outline: 3px solid #fff; outline-offset: 7px; }

/* the open transition: circle blooms outward, focus ring opens up, copy blurs off */
.fh-cannon[data-video-opening="true"] .fh-cannon-circle {
  opacity: 0;
  transform: translate(-50%, -50%) scale(3.2);
}

.fh-cannon[data-video-opening="true"] .fh-cannon-focus {
  clip-path: circle(90%);
  opacity: 0;
}

.fh-cannon[data-video-opening="true"] .fh-cannon-copy {
  opacity: 0;
  filter: blur(9px);
  transform: translateY(-12px);
}

.fh-cannon-copy {
  position: absolute;
  z-index: 4;
  bottom: clamp(24px, 4vw, 52px);
  left: clamp(20px, 3.4vw, 46px);
  right: clamp(20px, 3.4vw, 46px);
  pointer-events: none;
  text-shadow: 0 1px 3px rgba(10, 6, 2, 0.9);
  transition:
    opacity 1.1s cubic-bezier(0.2, 0.72, 0.2, 1),
    transform 1.1s cubic-bezier(0.2, 0.72, 0.2, 1),
    filter 1.1s cubic-bezier(0.2, 0.72, 0.2, 1);
}

/* A pool of shade under the caption only. The tile-wide shade cannot go much
   darker without flattening the circle, and the kicker sits high enough in the
   frame to land on smoke rather than ground. */
.fh-cannon-copy::before {
  content: "";
  position: absolute;
  inset: -46px -40px -70px -60px;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(125% 150% at 14% 84%,
    rgba(8, 5, 2, 0.95) 0%,
    rgba(8, 5, 2, 0.78) 48%,
    rgba(8, 5, 2, 0) 78%);
}

.fh-cannon-copy .fh-kicker {
  margin: 0;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fh-cider);
}

.fh-cannon-copy h3 {
  margin: 8px 0 0;
  font-family: "FH Instrument Serif", "FH Serif Fallback", Georgia, serif;
  font-weight: 400;
  font-size: clamp(30px, 4.6vw, 62px);
  line-height: 1;
}

.fh-cannon-copy p {
  margin: 10px 0 0;
  max-width: 44ch;
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(247, 239, 226, 0.88);
}

/* the "this is a film" cue, matching the homepage watermark */
.fh-cannon-badge {
  position: absolute;
  z-index: 5;
  top: clamp(16px, 2.4vw, 30px);
  right: clamp(16px, 2.4vw, 30px);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  pointer-events: none;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
}

@keyframes fh-focus-orbit {
  to { transform: rotate(1turn); }
}

/* ------------------------------------------------------------ lightbox */

.fh-video-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: clamp(10px, 3vw, 32px);
  animation: fh-modal-fade-in 0.7s both;
}

.fh-video-lightbox[hidden] { display: none; }

.fh-video-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  cursor: pointer;
  background: radial-gradient(circle at 50% 44%, rgba(47, 52, 46, 0.72), rgba(5, 7, 6, 0.97) 69%);
  -webkit-backdrop-filter: blur(22px) saturate(72%);
  backdrop-filter: blur(22px) saturate(72%);
}

.fh-video-stage {
  position: relative;
  z-index: 1;
  width: min(1120px, 94vw);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: clamp(22px, 3vw, 42px);
  background: #080b09;
  box-shadow: 0 50px 180px rgba(0, 0, 0, 0.75), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  animation: fh-video-stage-in 1s cubic-bezier(0.2, 0.72, 0.2, 1) both;
}

.fh-video-stage:focus { outline: none; }

.fh-video-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.17), transparent 24% 73%, rgba(255, 255, 255, 0.06));
}

.fh-video-stage video {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #080b09;
  opacity: 0;
  transition: opacity 0.28s;
}

.fh-video-lightbox.has-frame video { opacity: 0.38; }
.fh-video-lightbox.is-playing video { opacity: 1; }

.fh-video-loading {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  color: #fff;
  background: linear-gradient(rgba(8, 11, 9, 0.18), rgba(8, 11, 9, 0.58));
  transition: opacity 0.24s, visibility 0s linear 0.24s;
}

.fh-video-lightbox.is-playing:not(.is-buffering) .fh-video-loading {
  opacity: 0;
  visibility: hidden;
}

.fh-video-loading span {
  min-width: 3ch;
  font-size: clamp(5rem, 15vw, 10rem);
  font-weight: 800;
  line-height: 0.8;
  letter-spacing: -0.09em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 15px 52px rgba(0, 0, 0, 0.45);
}

.fh-video-lightbox.has-error .fh-video-loading span {
  font-size: clamp(2rem, 7vw, 4.5rem);
  letter-spacing: -0.05em;
}

.fh-video-loading small {
  margin-top: 22px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.fh-video-close {
  position: absolute;
  z-index: 5;
  top: clamp(12px, 2vw, 22px);
  right: clamp(12px, 2vw, 22px);
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 50%;
  background: rgba(8, 11, 9, 0.34);
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.fh-video-close:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }

.fh-video-message {
  position: absolute;
  z-index: 4;
  bottom: clamp(24px, 7%, 62px);
  left: clamp(24px, 5vw, 70px);
  right: clamp(24px, 5vw, 70px);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 22px;
  pointer-events: none;
  color: #fff;
}

.fh-video-message h2 {
  margin: 0;
  max-width: 58%;
  font-size: clamp(2rem, 5.2vw, 5.8rem);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.065em;
  color: #fff;
  text-shadow: 0 3px 7px rgba(0, 0, 0, 0.96), 0 12px 38px rgba(0, 0, 0, 0.8);
  opacity: 0;
  transform: translateY(18px);
}

.fh-video-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 9px;
  max-width: 48%;
  opacity: 0;
  transform: translateY(14px);
}

.fh .fh-video-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.68);
  border-radius: 16px;
  background: rgba(10, 15, 13, 0.32);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  color: #fff;
  font-family: inherit;
  font-size: 0.64rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.32), inset 0 1px rgba(255, 255, 255, 0.28);
}

.fh .fh-video-action:hover,
.fh .fh-video-action:focus-visible { background: #fff; color: var(--fh-ink); }

.fh-video-lightbox.is-playing .fh-video-message h2 { animation: fh-video-copy 5s linear both; }
.fh-video-lightbox.is-playing .fh-video-actions { animation: fh-video-actions 5s linear both; }

@keyframes fh-modal-fade-in { 0% { opacity: 0; } }

@keyframes fh-video-stage-in {
  0% { opacity: 0; transform: translateY(42px) rotateX(7deg) scale(0.72); }
}

@keyframes fh-video-copy {
  0% { opacity: 0; transform: translateY(18px); }
  20%, 80% { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateY(-10px); }
}

@keyframes fh-video-actions {
  0%, 30% { opacity: 0; transform: translateY(14px); }
  40%, 70% { opacity: 1; transform: none; }
  80%, to { opacity: 0; transform: translateY(-8px); }
}

@media (max-width: 760px) {
  .fh-video-lightbox { padding: 10px; }
  .fh-video-stage { width: calc(100vw - 20px); border-radius: 23px; }
  .fh-video-close { width: 44px; height: 44px; }
  .fh-video-message { flex-direction: column; align-items: flex-start; gap: 11px; bottom: 18px; left: 18px; right: 18px; }
  .fh-video-message h2 { max-width: 80%; font-size: clamp(1.7rem, 9vw, 3rem); }
  .fh-video-actions { justify-content: flex-start; gap: 6px; max-width: 100%; }
  .fh .fh-video-action { min-height: 44px; padding: 0 12px; border-radius: 13px; font-size: 0.55rem; }
  .fh-cannon-circle { width: min(78%, 320px); }
}

@media (prefers-reduced-motion: reduce) {
  .fh-cannon-circle::before { animation: none !important; }
  .fh-cannon-circle,
  .fh-cannon-focus,
  .fh-cannon-copy,
  .fh-cannon-base { transition: none; }
  .fh-video-lightbox,
  .fh-video-stage { animation: none; }
  .fh-video-lightbox.is-playing .fh-video-message h2,
  .fh-video-lightbox.is-playing .fh-video-actions {
    opacity: 1;
    transform: none;
    animation: none !important;
  }
}

/* ==========================================================================
   Deferral

   Every below-the-fold section is skipped by layout and paint until it nears
   the viewport. contain-intrinsic-size holds a plausible height so the
   scrollbar and any anchor jump stay honest before a section has rendered;
   the values are the measured heights at 393px, rounded.

   The hero is deliberately excluded — it is the first paint.
   ========================================================================== */

.fh-defer {
  content-visibility: auto;
  contain-intrinsic-size: auto 1200px;
}

/* While any Global Shell dialog is up, take the containment off. A size- or
   layout-contained subtree is a hostile place for a third-party widget to
   measure itself against, and nothing below the fold needs skipping while the
   page is behind a modal anyway. */
body.rf-shell-is-locked .fh-defer {
  content-visibility: visible;
  contain-intrinsic-size: none;
}

.fh #dates { contain-intrinsic-size: auto 950px; }
.fh #rides { contain-intrinsic-size: auto 2200px; }
.fh #food { contain-intrinsic-size: auto 2090px; }
.fh #village { contain-intrinsic-size: auto 1185px; }
.fh #plan { contain-intrinsic-size: auto 1090px; }
.fh #tickets { contain-intrinsic-size: auto 1290px; }
.fh #visit { contain-intrinsic-size: auto 940px; }
.fh #faq { contain-intrinsic-size: auto 835px; }
.fh-closing { contain-intrinsic-size: auto 310px; }

/* ------------------------------------------------------- click-to-load map */

.fh-map { position: relative; }

.fh-map-card {
  position: relative;
  display: block;
  width: 100%;
  min-height: clamp(300px, 42vw, 480px);
  padding: clamp(20px, 3vw, 34px);
  border: 0;
  background:
    radial-gradient(circle at 22% 26%, rgba(228, 98, 14, 0.16), transparent 46%),
    radial-gradient(circle at 78% 74%, rgba(78, 91, 44, 0.18), transparent 48%),
    #e9dfca;
  color: var(--fh-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
}

/* the faint road grid, drawn rather than downloaded */
.fh-map-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background:
    repeating-linear-gradient(0deg, rgba(20, 13, 6, 0.09) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg, rgba(20, 13, 6, 0.09) 0 1px, transparent 1px 44px);
}

.fh-map-card-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  height: 100%;
}

.fh-map-pin {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--fh-accent-strong);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  box-shadow: 0 12px 30px rgba(20, 13, 6, 0.28);
}

.fh-map-card strong {
  font-family: "FH Instrument Serif", "FH Serif Fallback", Georgia, serif;
  font-weight: 400;
  font-size: clamp(22px, 3vw, 32px);
  line-height: 1.08;
}

.fh-map-card span { font-size: 14px; line-height: 1.55; color: #4a3a26; }

.fh-map-card em {
  margin-top: auto;
  /* #9C3D08 on the card's #e9dfca ground is 5.15:1; the section accent is only 3.53 here */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #9c3d08;
}

.fh-map-card:hover em,
.fh-map-card:focus-visible em { color: var(--fh-ink); }

.fh-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
}