@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Oswald:wght@500;600&family=Playfair+Display:ital,wght@1,600&display=swap");

:root {
  --fair-navy: #172d46;
  --fair-white: #ffffff;
  --fair-cream: #f7efe3;
  --fair-paper: #ffffff;
  --fair-gold: #d39330;
  --fair-brick: #9a402f;

  --_theme---background: var(--fair-paper);
  --_theme---body-text: var(--fair-navy);
  --_theme---heading: var(--fair-navy);
  --_theme---border: var(--fair-navy);
  --_theme---cursor-select-bg: var(--fair-gold);
  --_theme---cursor-select-text: var(--fair-navy);

  --_colors---swatch--navy: var(--fair-navy);
  --_colors---swatch--blue: var(--fair-white);
  --_colors---swatch--gold: var(--fair-gold);
  --_colors---swatch--red: var(--fair-brick);
  --_colors---swatch--brown: var(--fair-navy);
  --_colors---swatch--dark-brown: var(--fair-navy);
  --_colors---swatch--beige: var(--fair-cream);
  --_colors---swatch--cream: var(--fair-cream);
  --_colors---swatch--off-white: var(--fair-white);
}

html,
body {
  background: var(--fair-paper);
}

::selection {
  color: var(--fair-navy);
  background: var(--fair-gold);
}

/* The original site used "brown" as light text on dark cards. Those cards are
   white in this refresh, so the utility must be dark as well. */
.text-color-brown,
.theme-blue .text-color-brown,
.theme-lightblue .text-color-brown,
.theme-gold .text-color-brown {
  color: var(--fair-navy) !important;
}

.homestead-fair-logo {
  object-fit: contain;
}

.nav-logo .homestead-fair-logo {
  content: url("/homestead-fair-menu-logo.png");
  aspect-ratio: 1200 / 287;
}

.nav-logo {
  width: 10rem;
  height: 3.4rem;
  padding: 0.35rem 0.5rem;
  background: var(--fair-white);
}

/* Give the header a little extra height so the logo chip doesn't overflow. */
.nav-main,
.nav-inner,
.nav-container {
  height: auto !important;
  min-height: 64px;
}

.nav-main {
  padding-block: 5px;
}

.loader__logo-item {
  display: grid;
  place-items: center;
  background: var(--fair-white);
}

.loader__logo-item .homestead-fair-logo {
  content: url("/homestead-fair-loader-mark.png");
  width: clamp(9rem, 24vw, 15rem) !important;
  height: auto !important;
  aspect-ratio: 841 / 834;
}

.footer-logo .homestead-fair-logo {
  content: url("/homestead-fair-logo.png");
  aspect-ratio: 768 / 268;
  padding: 0;
  background: transparent;
}

/* The exported layout parked spinning decorative discs in these slots (hero
   corner, steps section, big rotating mark). The round Fair badge takes their
   place so the rotation animation reads as intentional. */
.guide-pair_img,
.hero-content_badge .image,
.steps-badge .image {
  content: url("/homestead-fair-round-mark-1988.svg");
  object-fit: contain;
  filter: none;
}

.guide-pair_svg,
.slider_emoji {
  display: none !important;
}

/* The decorative round badges overlap interactive cards at some widths; they
   must never swallow clicks. Same for the "Fair favorite" ribbon. */
.slider_badge,
.intro_badge,
.hero-content_badge-wrap,
.guide-pair_img,
.fair-fav-tag {
  pointer-events: none;
}

.guide-pair_img {
  display: block;
  width: min(24rem, 52vw) !important;
  height: auto !important;
  margin-inline: auto;
  aspect-ratio: 1 / 1;
}

.theme-blue,
.theme-lightblue {
  --_theme---background: var(--fair-white);
  --_theme---body-text: var(--fair-navy);
  --_theme---heading: var(--fair-navy);
  --_theme---border: var(--fair-navy);
}

.theme-yellow,
.theme-gold {
  --_theme---background: var(--fair-gold);
  --_theme---body-text: var(--fair-navy);
  --_theme---heading: var(--fair-navy);
  --_theme---border: var(--fair-navy);
}

.theme-brown,
.theme-red,
.theme-blue-brown {
  --_theme---background: var(--fair-white);
  --_theme---body-text: var(--fair-navy);
  --_theme---heading: var(--fair-brick);
  --_theme---border: var(--fair-brick);
}

.theme-blue-brown {
  --_theme---background: var(--fair-cream);
}

.theme-dark,
.theme-navy {
  --_theme---background: var(--fair-navy);
  --_theme---body-text: var(--fair-cream);
  --_theme---heading: var(--fair-cream);
  --_theme---border: var(--fair-cream);
}

/* Shorter ticket so the text fills it more. The frame SVGs get
   preserveAspectRatio="none" in fair-section-order.js to follow suit. */
.tag-card {
  aspect-ratio: 4 / 1.8 !important;
  container-type: inline-size;
}

/* Size the ticket text against the ticket itself so it fills the card at any
   viewport instead of tracking the page's type scale. */
.tag-card .paragraph-xxs {
  font-size: 2.9cqw;
}

.tag-card_heading {
  font-size: 15.5cqw;
  line-height: 0.82;
}

/* Hero ticket: countdown row, populated by fair-section-order.js. Hidden until
   the script fills it so a JS failure never leaves an empty "✦  ✦" row. */
.tag-card_countdown {
  display: none;
}

.tag-card_countdown.is-ready {
  display: flex;
}

.tag-card_countdown .paragraph-xxs {
  display: inline-flex;
  align-items: baseline;
  gap: 0.55em;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 700;
}

.tag-card_countdown-star,
.tag-card_caption-star {
  color: var(--fair-gold);
}

/* Five full stars, not four and a half. */
.tag-card_rating-svg path[opacity],
.ribbon-rating_svg path[opacity] {
  opacity: 1 !important;
}

.button,
.nav-link,
.nav-dropdown__link,
.footer-link {
  transition:
    color 220ms ease,
    background-color 220ms ease,
    border-color 220ms ease,
    transform 220ms ease;
}

.section_steps,
.section_guide-pair {
  border-block: 0.5rem solid var(--fair-cream);
}

/* The stock layout anchors one guide card from the top and the other from the
   bottom. Start both from the same vertical axis, while leaving the separate
   scroll transforms intact for the moving collage effect. */
@media (min-width: 768px) {
  .section_guide-pair .guide-pair_card.is-activities,
  .section_guide-pair .guide-pair_card.is-food {
    top: 50% !important;
    bottom: auto !important;
  }
}

/* Intro "what's going on" board (injected by fair-section-order.js): real
   activities with labels, each tile linking to its page. */

/* The section carries a stray 83px bottom padding from the inherited layout;
   the .section-padding-160px child already pads both ends evenly. */
#intro.section_intro {
  padding-block: 0 !important;
}

/* The inherited layout parked the card 83px from the left and the board flush
   right. Center the pair as one grid instead. */
#intro .intro_wrapper {
  display: grid;
  grid-template-columns: minmax(380px, 460px) minmax(0, 740px);
  gap: 26px clamp(28px, 4vw, 60px);
  justify-content: center;
  align-items: stretch;
  padding: 0 !important;
}

#intro .intro_wrapper > .card.is-intro-card {
  position: relative;
  left: auto;
  top: auto;
}

.intro_content.is-fair-intro-board-host {
  display: block;
  position: static;
  width: auto;
  height: auto;
}

/* Keep the decorative round badge out of the grid flow. */
#intro .intro_badge {
  position: absolute;
}

.fair-intro-board {
  display: block;
  width: 100%;
  height: 100%;
}

/* Section masthead spanning the welcome card and the board: straight Oswald
   heading over a gold rule, schedule link on the right. */
.fair-intro-sechead {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--fair-gold);
}

.fair-intro-sechead strong {
  font: 600 clamp(26px, 2.2vw, 34px)/1 "Oswald", sans-serif;
  color: var(--fair-navy);
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

@media (max-width: 767px) {
  #intro .intro_wrapper {
    grid-template-columns: 1fr;
  }
}



/* "Fair favorite" ribbon on the lead highlight card. */
.foodtruck-card_inner {
  position: relative;
}

.fair-fav-tag {
  position: absolute;
  top: -13px;
  left: 50%;
  z-index: 5;
  translate: -50% 0;
  rotate: -2deg;
  padding: 7px 12px;
  color: var(--fair-navy);
  background: var(--fair-gold);
  font: 500 11px "DM Mono", monospace;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(9, 28, 51, 0.3);
}

.fair-intro-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  grid-template-rows: repeat(3, 1fr);
  gap: 16px;
  height: 100%;
  min-height: 0;
}

.fair-intro-feature {
  grid-row: 1 / -1;
  position: relative;
  display: block;
  overflow: hidden;
  border: 2px solid var(--fair-navy);
  box-shadow: 12px 12px 0 var(--fair-gold);
  text-decoration: none;
}

.fair-intro-feature img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 24% 50%;
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.fair-intro-feature:hover img {
  transform: scale(1.045);
}

.fair-intro-feature-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  gap: 4px;
  padding: 44px 20px 18px;
  color: var(--fair-cream);
  background: linear-gradient(180deg, transparent, rgba(23, 45, 70, 0.9) 55%);
}

.fair-intro-feature-caption strong {
  font: 600 clamp(22px, 1.9vw, 30px)/1 "Oswald", sans-serif;
  text-transform: uppercase;
}

.fair-intro-feature-caption small {
  font: 400 11px "DM Mono", monospace;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.85;
}

.fair-intro-row {
  display: grid;
  grid-template-columns: 86px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 8px 16px 8px 8px;
  color: var(--fair-navy);
  background: var(--fair-white);
  border: 2px solid var(--fair-navy);
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.fair-intro-row img {
  width: 86px;
  height: 100%;
  min-height: 62px;
  object-fit: cover;
}

.fair-intro-row-copy strong {
  display: block;
  font: 600 19px/1.05 "Oswald", sans-serif;
  text-transform: uppercase;
}

.fair-intro-row-copy small {
  font: 400 10.5px "DM Mono", monospace;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.75;
}

.fair-intro-arrow {
  font-size: 18px;
  transition: translate 0.2s ease;
}

.fair-intro-row:hover {
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 var(--fair-gold);
}

.fair-intro-row:hover .fair-intro-arrow {
  translate: 4px 0;
}

.fair-intro-more {
  color: var(--fair-navy);
  font: 500 12px "DM Mono", monospace;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
  border-bottom: 2px solid var(--fair-gold);
  padding-bottom: 3px;
}

.fair-intro-more:hover {
  border-color: var(--fair-navy);
}

@media (max-width: 767px) {
  .fair-intro-board {
    height: auto;
  }

  .fair-intro-grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }

  .fair-intro-feature {
    grid-row: auto;
    aspect-ratio: 4 / 3;
  }
}

/* Intro collage: bigger, more deliberately scattered photo cards with real
   shadows so the section carries the same energy as the hero. */
.intro_photo.is-1 {
  scale: 1.22;
  rotate: -5deg;
}

.intro_photo.is-2 {
  scale: 1.3;
  rotate: 3.5deg;
}

.intro_photo.is-3 {
  scale: 1.22;
  rotate: -2.5deg;
}

.intro_photo .photo-card {
  filter: drop-shadow(0 18px 30px rgba(23, 45, 70, 0.28));
}

/* Focal points: keep the herding dog and the pony rider inside the crop. */
.intro_photo.is-1 .photo-card_frame img {
  object-position: 24% 50%;
}

.intro_photo.is-3 .photo-card_frame img {
  object-position: 36% 20%;
}

/* Nudge the intro USP badges apart so the front one doesn't cover the back
   one's caption. `translate` composes with the animation transform. */
.intro-card_usp.is-1 {
  translate: -20% 24%;
}

.intro-card_usp.is-2 {
  width: 38%;
  translate: 22% -12%;
  z-index: 4;
}

.intro-card_usp.is-2 .intro-card_usp-content {
  width: 88%;
  translate: 3% 0;
}

.intro-card_usp.is-2 .text-style-alt {
  max-width: 12ch;
  margin-inline: auto;
  line-height: 0.95;
  text-wrap: balance;
}

/* Badge captions overhang their shapes; keep them legible over photos. */
.intro-card_usp .text-style-alt {
  text-shadow: 0 1px 6px rgba(23, 45, 70, 0.35);
}

/* Turn the oversized closing collage into a useful visit-planning stop. */
.section_work-at.is-visit-planner .section-padding-160px {
  padding-block: clamp(5rem, 9vw, 8rem);
}

.section_work-at.is-visit-planner .work-at_container {
  min-height: auto;
}

.section_work-at.is-visit-planner .work-at_bg {
  filter: saturate(0.82) contrast(0.94);
}

.section_work-at.is-visit-planner .work-at_container::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(23, 45, 70, 0.82), rgba(23, 45, 70, 0.38));
  pointer-events: none;
}

.section_work-at.is-visit-planner .work-at_wrapper,
.section_work-at.is-visit-planner .work-at_content {
  position: relative;
  z-index: 2;
}

.fair-visit-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(420px, 1.1fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
  max-width: 1180px;
  margin-inline: auto;
  padding: clamp(2rem, 4vw, 4rem);
  color: var(--fair-navy);
  background: rgba(255, 255, 255, 0.96);
  border: 3px solid var(--fair-navy);
  box-shadow: 14px 14px 0 var(--fair-gold);
}

.fair-visit-eyebrow {
  display: inline-block;
  margin-bottom: 1.1rem;
  color: var(--fair-brick);
  font: 500 0.72rem "DM Mono", monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.fair-visit-copy h2 {
  margin: 0 0 1.4rem;
  color: var(--fair-navy);
  font: 600 clamp(3.2rem, 6vw, 5.6rem)/0.84 "Oswald", sans-serif;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}

.fair-visit-copy > p {
  max-width: 47ch;
  margin: 0 0 1.8rem;
  font: 400 0.88rem/1.7 "DM Mono", monospace;
}

.fair-visit-date {
  display: grid;
  gap: 0.28rem;
  padding-top: 1.2rem;
  border-top: 2px solid var(--fair-navy);
  font-family: "DM Mono", monospace;
}

.fair-visit-date strong {
  color: var(--fair-brick);
  font-size: 1.05rem;
}

.fair-visit-date span {
  font-size: 0.72rem;
}

.fair-visit-actions {
  display: grid;
  gap: 0.65rem;
}

.fair-visit-action {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1.1rem;
  align-items: center;
  padding: 1.25rem 1.35rem;
  color: var(--fair-navy);
  background: var(--fair-cream);
  border: 2px solid var(--fair-navy);
  text-decoration: none;
  transition: transform 180ms ease, background-color 180ms ease;
}

.fair-visit-action:hover,
.fair-visit-action:focus-visible {
  transform: translateX(6px);
  background: var(--fair-white);
}

.fair-visit-action:focus-visible {
  outline: 3px solid var(--fair-gold);
  outline-offset: 3px;
}

.fair-visit-action.is-primary {
  background: var(--fair-gold);
}

.fair-visit-number {
  font: 600 0.72rem "DM Mono", monospace;
}

.fair-visit-action strong,
.fair-visit-action small {
  display: block;
}

.fair-visit-action strong {
  font: 600 1.4rem "Oswald", sans-serif;
  text-transform: uppercase;
}

.fair-visit-action small {
  margin-top: 0.15rem;
  font: 400 0.68rem "DM Mono", monospace;
}

.fair-visit-arrow {
  font-size: 1.65rem;
  transition: transform 180ms ease;
}

.fair-visit-action:hover .fair-visit-arrow {
  transform: translateX(3px);
}

@media (max-width: 820px) {
  .intro-card_usp.is-2 {
    width: 40%;
    translate: 14% -10%;
  }

  .fair-visit-panel {
    grid-template-columns: 1fr;
    box-shadow: 8px 8px 0 var(--fair-gold);
  }
}

@media (max-width: 560px) {
  .fair-visit-panel {
    padding: 1.5rem;
  }

  .fair-visit-copy h2 {
    font-size: clamp(2.8rem, 15vw, 4rem);
  }

  .fair-visit-action {
    gap: 0.75rem;
    padding: 1rem;
  }

  .fair-visit-action strong {
    font-size: 1.15rem;
  }
}

/* ── Marquee hero (hero-options.html option A; previous hero lives on the
   old-hero branch) ─────────────────────────────────────────────────────── */
.section_hero.fair-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 92dvh;
  display: grid;
  place-items: center;
  padding: 8.5rem max(4vw, 20px) 8rem;
  text-align: center;
  color: var(--fair-cream);
}

.fair-hero_bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.section_hero.fair-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(23, 45, 70, 0.82), rgba(23, 45, 70, 0.55) 45%, rgba(23, 45, 70, 0.86));
}

.fair-hero_inner {
  display: grid;
  justify-items: center;
  gap: 1.4rem;
  max-width: 1100px;
}

.fair-hero_tag {
  display: inline-block;
  padding: 9px 14px;
  color: var(--fair-navy);
  background: var(--fair-gold);
  font: 500 11px "DM Mono", monospace;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transform: rotate(-1.2deg);
}

.fair-hero_title {
  margin: 0;
  font: 600 clamp(3.6rem, 9.5vw, 8.2rem)/0.92 "Oswald", sans-serif;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: var(--fair-cream);
}

.fair-hero_dates {
  display: flex;
  align-items: center;
  gap: 20px;
  color: var(--fair-gold);
  font: 600 clamp(1.9rem, 4.6vw, 3.75rem)/1 "Oswald", sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.fair-hero_dates::before,
.fair-hero_dates::after {
  content: "✦";
  font-size: 0.55em;
}

.fair-hero_meta {
  margin: 0;
  font: 400 14px "DM Mono", monospace;
  letter-spacing: 0.04em;
}

.fair-hero_countdown {
  display: none;
  margin: 0;
  gap: 0.55em;
  align-items: baseline;
  justify-content: center;
  font: 500 12px "DM Mono", monospace;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  opacity: 0.92;
}

.fair-hero_countdown.is-ready {
  display: flex;
}

.fair-hero_star {
  color: var(--fair-gold);
}

.fair-hero_buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 0.4rem;
}

.fair-hero_btn {
  display: inline-block;
  padding: 17px 30px;
  text-decoration: none;
  color: var(--fair-navy);
  background: var(--fair-gold);
  font: italic 600 19px "Playfair Display", serif;
  clip-path: polygon(4% 0, 96% 0, 100% 18%, 100% 82%, 96% 100%, 4% 100%, 0 82%, 0 18%);
  transition: transform 0.2s ease;
}

.fair-hero_btn:hover {
  transform: rotate(-1deg) scale(1.04);
}

.fair-hero_btn.is-outline {
  background: transparent;
  box-shadow: inset 0 0 0 2px currentColor;
  color: var(--fair-cream);
  clip-path: none;
}

.fair-hero_badge {
  position: absolute;
  top: 128px;
  right: max(4vw, 24px);
  width: clamp(90px, 10vw, 150px);
  rotate: 8deg;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.35));
}

.fair-hero_inner {
  position: relative;
  z-index: 2;
}

.fair-hero_hand {
  rotate: -3deg;
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
}

/* Postage-stamp edged photo: solid interior plus a punched-hole ring. */
.fair-hero_stamp {
  position: absolute;
  z-index: 1;
  left: max(3vw, 18px);
  bottom: 16%;
  width: clamp(150px, 16vw, 250px);
  rotate: -6deg;
  padding: 12px;
  background: var(--fair-white);
  -webkit-mask:
    linear-gradient(#000 0 0) center / calc(100% - 18px) calc(100% - 18px) no-repeat,
    radial-gradient(circle 6px, transparent 98%, #000 100%) 0 0 / 18px 18px round;
  mask:
    linear-gradient(#000 0 0) center / calc(100% - 18px) calc(100% - 18px) no-repeat,
    radial-gradient(circle 6px, transparent 98%, #000 100%) 0 0 / 18px 18px round;
  filter: drop-shadow(0 14px 26px rgba(0, 0, 0, 0.35));
}

.fair-hero_polaroid {
  position: absolute;
  z-index: 1;
  right: max(3vw, 18px);
  bottom: 11%;
  width: clamp(140px, 15vw, 230px);
  rotate: 5deg;
  padding: 10px 10px 30px;
  background: var(--fair-white);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
}

.fair-hero_stamp img,
.fair-hero_polaroid img {
  width: 100%;
  aspect-ratio: 4 / 3.4;
  object-fit: cover;
}

.fair-hero_checker {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 16px;
  background: repeating-conic-gradient(var(--fair-navy) 0% 25%, transparent 0% 50%) 0 0 / 32px 16px var(--fair-white);
}

@media (max-width: 767px) {
  .section_hero.fair-hero {
    min-height: 88dvh;
    padding: 8rem 20px 6rem;
  }

  .fair-hero_badge {
    top: auto;
    bottom: 40px;
    width: 78px;
  }

  .fair-hero_meta {
    font-size: 12px;
  }

  .fair-hero_btn {
    padding: 14px 22px;
    font-size: 17px;
  }

  .fair-hero_stamp,
  .fair-hero_polaroid {
    display: none;
  }
}

@media (max-width: 767px) {
  .nav-logo {
    width: 7.5rem;
    height: 2.75rem;
    padding: 0.3rem 0.4rem;
  }

  .guide-pair_img {
    width: min(16rem, 62vw) !important;
  }
}

/* Rich, activity-specific Fair highlight modal content. */
.modal-inner_body {
  display: grid;
  gap: 1.5rem;
}

.fair-modal-summary {
  max-width: 68ch;
  margin: 0;
  line-height: 1.65;
}

.fair-modal-know {
  padding: 1.4rem 1.5rem;
  color: var(--fair-navy);
  background: var(--fair-cream);
  border-left: 0.45rem solid var(--fair-gold);
}

.fair-modal-know h3 {
  margin: 0 0 0.8rem;
  font: 600 1.35rem "Oswald", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.fair-modal-know ul {
  display: grid;
  gap: 0.65rem;
  margin: 0;
  padding-left: 1.2rem;
}

.fair-modal-know li {
  padding-left: 0.25rem;
  font: 400 0.76rem/1.55 "DM Mono", monospace;
}

.fair-modal-cta {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 1.6rem;
  min-width: min(100%, 18rem);
  padding: 1rem 1.25rem;
  color: var(--fair-navy);
  background: var(--fair-gold);
  border: 2px solid var(--fair-navy);
  font: italic 600 1.1rem "Playfair Display", serif;
  text-decoration: none;
  transition: transform 180ms ease, background-color 180ms ease;
}

.fair-modal-cta span {
  margin-left: auto;
  font-family: "DM Mono", monospace;
  font-style: normal;
}

.fair-modal-cta:hover,
.fair-modal-cta:focus-visible {
  transform: translateX(5px);
  background: var(--fair-white);
}

.fair-modal-cta:focus-visible {
  outline: 3px solid var(--fair-gold);
  outline-offset: 3px;
}

.modal-inner_grid .modal-inner_col {
  min-width: 0;
}

.modal-inner_grid .foodtruck-card_number {
  overflow-wrap: anywhere;
}

.stack-cards__item[hidden] {
  display: none !important;
}

@media (max-width: 767px) {
  .fair-modal-know {
    padding: 1.1rem;
  }

  .fair-modal-know li {
    font-size: 0.72rem;
  }
}

/* ---------------------------------------------------------------------------
   Mobile pass
   --------------------------------------------------------------------------- */

/* Each highlight slide carried a fixed one-to-two degree tilt from the
   inherited layout. It is static, not scroll motion, and at this card size it
   reads as misalignment rather than charm. Sit them square. */
.slider_cms_item {
  transform: none !important;
}

@media (max-width: 767px) {
  /* The Passes ticket sized to its single line of text while the Menu ticket
     sized to the 2.5em burger button, so the two ends of the header did not
     match. Pin both ends to one height instead of letting content decide. */
  .nav-end,
  .nav-end.is-menu {
    height: 3.75em;
    justify-content: center;
    align-items: center;
  }

  .nav-end:not(.is-menu) .nav-button {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
  }

  /* 160px of inherited section padding left a deep white gap between the hero's
     checker strip and the welcome card. */
  #intro .section-padding-160px {
    padding-top: 1.5rem;
    padding-bottom: 3rem;
  }
}

@media (max-width: 767px) {
  /* The header is three separate ticket shapes with gaps between them, so once
     it sits over page content you read headings and buttons straight through
     it. Fill the bar behind the tickets, but only once the hero photo has
     scrolled past, so the tickets still float over the photo at the top. */
  /* Fill the nav element itself, not .nav-container. The header shifts up a few
     pixels as you scroll, so a background on the inner box leaves an uncovered
     strip along the top edge that page content shows through. */
  .nav {
    transition: background-color 200ms ease;
  }

  .nav[data-nav-solid="true"] {
    background-color: var(--fair-navy);
  }

  /* Run the navy a touch past the tickets' bottom edge so the bar reads as a
     band, not a hairline crop against the content behind it. */
  .nav::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 14px;
    background-color: var(--fair-navy);
    opacity: 0;
    transition: opacity 200ms ease;
    pointer-events: none;
  }

  .nav[data-nav-solid="true"]::after {
    opacity: 1;
  }

  /* Headings land under the fixed header when a hash link jumps to them. */
  :target {
    scroll-margin-top: 110px;
  }
}

/* The gold ticket sat 22px tall beside the 64px header bar, because .nav-end
   sizes to its own text while .nav-inner centres it. Stretch it to the bar. */
@media (min-width: 768px) {
  .nav-end {
    align-self: stretch;
    height: auto;
  }

  .nav-end .nav-button {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
  }
}

/* Keep grid children within their tracks while retaining vertical scroll motion. */
#intro .intro_wrapper > .card.is-intro-card { width:100%; min-width:0; max-width:100%; }
#intro .intro_content { min-width:0; }
@media (max-width:1100px) {
  #intro .intro_wrapper { grid-template-columns:minmax(0,1fr); gap:28px; }
  #intro .intro_wrapper > .card.is-intro-card { transform:none !important; }
  #intro .fair-intro-grid { min-height:440px; }
  #intro .card-content { padding:32px; }
  #intro .card-content p { font-size:14px; line-height:1.6; }
}
@media (max-width:600px) {
  #intro .fair-intro-grid { min-height:0; }
}
/* Put moving CTA cards above the neighbouring ornamental strips. */
.section_guide-pair { position:relative; z-index:3; }
.section_guide-pair .guide-pair_card { z-index:4; }
.section-border { pointer-events:none; }
/* Color the alpha video without changing its animation or transparent edges. */
.fair-plow-gold-color { flood-color:var(--fair-gold); }
.fair-plow-walker video,
.fair-plow-dirt img { filter:url("#fair-plow-gold"); }
.fair-plow-dirt::after { background:var(--fair-gold); }
.fair-step-action { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:10px 18px; background:var(--fair-gold); color:var(--fair-navy); font:500 13px/1.3 "DM Mono",monospace; text-decoration:none; position:relative; z-index:2; }
.fair-step-action:hover { background:var(--fair-navy); color:white; }
.fair-step-action:focus-visible { outline:3px solid currentColor; outline-offset:4px; }

/* The title lives inside the existing pinned animation, so it stays with the steps. */
.section_steps .steps-title { position:absolute; top:100px; left:0; z-index:5; pointer-events:none; }
.section_steps .steps-title .padding-top { padding-top:20px; }
.section_steps .steps-title h2 { font-size:clamp(38px,5vw,72px); }
.section_steps .card-content.is-step { gap:12px; padding:22px; }
@media (max-width:991px) {
  .section_steps { overflow:clip; }
  .section_steps .steps-container { overflow:visible; }
  .section_steps .steps-title { position:sticky; top:90px; grid-column:1 / -1; margin-bottom:20px; padding-bottom:16px; background:var(--_theme---background); }
  .section_steps .steps-title .padding-top { padding-top:16px; }
}

.section_marquee[hidden] { display:none !important; }

/* Tablet navigation uses the same three-ticket silhouette as the phone header. */
.fair-tablet-links, .fair-tablet-menu-label { display:none; }
@media (min-width:768px) and (max-width:991px) {
  .nav-center { display:none !important; }
  .nav-main { width:50%; padding:0 16px; justify-content:center; }
  .nav-logo { width:180px; }
  .nav-end, .nav-end:hover { width:25%; order:-1; }
  .nav-end.is-menu { display:flex; order:1; }
  .nav-end.is-menu .menu-button { display:flex; width:100%; }
  .nav[data-nav-solid="true"] { background:var(--fair-navy); }
  .fair-tablet-links:not([hidden]) { display:grid; position:fixed; inset:86px 16px auto; z-index:100; padding:20px; border:2px solid var(--fair-navy); background:white; box-shadow:0 12px 24px #172d4622; }
  .fair-tablet-links a { display:block; padding:14px; min-height:44px; font:500 16px "DM Mono",monospace; color:var(--fair-navy); text-decoration:none; border-bottom:1px solid #ddd; }
  .fair-tablet-links a:hover, .fair-tablet-links a:focus-visible { background:var(--fair-cream); }
  .nav-top { display:none; }
  .nav-inner, .nav-end, .nav-end.is-menu { height:64px; }
  .nav-end .nav-button { box-sizing:border-box; padding-block:0; height:64px; }
  .nav-end.is-menu .menu-button { height:64px; color:var(--fair-navy); font:italic 600 24px "Playfair Display",serif; }
  .nav-end.is-menu .menu-button_wrap { display:none; }
  .nav-end.is-menu .nav-inner-bg { display:none; }
  .nav-end.is-menu .menu-button { background:white !important; border-radius:4px; }
  .fair-tablet-menu-label { display:block; position:relative; color:var(--fair-navy); }

  .fair-tablet-links { max-height:calc(100svh - 110px); overflow-y:auto; }
  .nav-end.is-menu .menu-button { color:var(--fair-navy); align-items:center; justify-content:center; }

}

/* Leave room between the animated tickets and keep tall windows from
   stretching the heading-to-card gap across half the screen. */
@media (min-width:992px) {
  .section_steps .steps-circle { top:clamp(360px, 40vh, 520px); }
  .section_steps .card.is-step-circle {
    width:22vw;
    aspect-ratio:auto;
    min-height:clamp(280px, 22vw, 360px);
  }
  .section_steps .card-content.is-step {
    box-sizing:border-box;
    width:100%;
    padding:clamp(26px, 2.1vw, 40px);
    gap:16px;
  }
  .section_steps .step-card-title { font-size:clamp(26px, 2.3vw, 42px); line-height:1.05; }
  .section_steps .card-content.is-step .paragraph-s { font-size:clamp(12px, 1vw, 16px); line-height:1.5; }
  .section_steps .fair-step-action { align-self:center; max-width:100%; padding:12px 16px; }
}