/* ==========================================================================
   The Bend NWA — rebuild of thebendnwa.com
   Values below are taken from the live site's rendered/computed CSS
   (headless Chrome, 1440px desktop + 390px mobile). Mobile-first.
   ========================================================================== */

/* --- Halis Grotesque Medium: the display face the live site serves ------- */
@font-face {
  font-family: 'Halis';
  src: url('../assets/fonts/HalisGR-Medium.otf') format('opentype');
  font-weight: 400 700;
  font-display: swap;
}

/* --- tokens (mirror site.theme in content.json) -------------------------- */
:root {
  --orange: #db5337;
  --blue: #00b4ed;
  --teal: #00bfba;
  --teal-hover: #08afab;
  --yellow: #f2ca2b;
  --yellow-hover: #ddb824;
  /* Two near-identical navies on the live site: the footer edge artwork and the
     shape block behind it are #193958, while the "Follow us" heading text is
     #183856. Keeping them separate avoids a visible seam where the torn-edge
     PNG meets the footer's own background. */
  --navy: #193958;
  --navy-text: #183856;
  --white: #fff;
  --input-fill: #ccf0fb;   /* sampled from rendered pixels; absent from computed styles */
  --input-fill-light: rgba(230, 228, 232, .8);

  --font-display: 'Halis', 'Outfit', 'Helvetica Neue', Arial, sans-serif;
  --font-body: Arial, Helvetica, sans-serif;

  --r-card: 20px;
  --r-card-img: 15px;
  --r-pill: 300px;
  --r-nav-pill: 40px;

  --content-max: 1214px;
  --gutter: 5.9vw; /* 23px at 390 — the live mobile inset */

  /* Hero geometry, overridden at the desktop breakpoint. */
  --hero-photo-top: 43.59vw; /* live mobile pushes the photo down 170px */
  --layer-top-h: 350px;
  --layer-top-max: 260px;
  --layer-mid-h: 10vw;
  /* Height of the navy footer edge artwork. The footer is transparent and this
     artwork sits at its top, so preceding sections only need a small visual gap. */
  --layer-bottom-h: 40vh;
}

/* --- reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--white);
  color: #000;
  font-family: var(--font-body);
  font-size: 17.68px;
  line-height: 1.8;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; border: 0; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; margin: 0; }
p { margin: 0; }

/* Avoid a flash of unbound placeholder markup before content.json lands. */
html:not(.content-ready) body { opacity: 0; }
html.content-ready body { opacity: 1; transition: opacity .18s ease-out; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.container {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ==========================================================================
   Layered parallax PNGs
   The three artworks are torn-edge bands: top = solid orange with a ragged
   bottom, middle = yellow-over-blue transition, bottom = navy footer edge.
   They are decorative, so they are aria-hidden.
   Mobile matches the live site by scaling these to cover a much taller box than
   their 2500-wide natural aspect, which crops horizontally only. From 768px up the
   box is *shorter* than the natural aspect, so cover would crop vertically and
   slice the ragged edge off — the desktop block below resets them to fill.
   ========================================================================== */
.layer {
  position: absolute;
  left: 0;
  width: 100%;
  pointer-events: none;
  user-select: none;
  z-index: 3;
}

.layer--top {
  top: 0;
  height: var(--layer-top-h);
  max-height: var(--layer-top-max);
  object-fit: cover;
}

.layer--middle {
  bottom: 0;
  height: var(--layer-mid-h);
  object-fit: fill;
}

.layer--bottom {
  top: 0;
  height: var(--layer-bottom-h);
  object-fit: cover;
}

/* ==========================================================================
   Header — trailside sign + wordmark + pill nav, layered over the hero
   ========================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--orange);
  aspect-ratio: 390 / 619;
}

.hero__photo {
  position: absolute;
  left: 0;
  top: var(--hero-photo-top);
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.hero__brand {
  position: relative;
  z-index: 4; /* above .layer--top */
  padding: 10.5vw var(--gutter) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.hero__sign { display: block; width: 100%; }
.hero__sign img { width: 100%; height: auto; }

.hero__wordmark { display: block; width: 42.5%; margin-top: 5.1vw; }
.hero__wordmark img { width: 100%; height: auto; }

/* --- pill nav ----------------------------------------------------------- */
.site-menu {
  display: flex;
  justify-content: center;
  margin-top: 4.6vw;
}

/* The pill row is a single unbroken bar, so it must never wrap. Scale the type
   with the viewport instead: 14.4px at 390 (the live mobile size), shrinking on
   narrow phones so the bar always fits inside the gutters. */
.site-menu-inner { display: flex; font-size: clamp(10px, 3.7vw, 14.4px); }

.site-menu a {
  font-family: var(--font-display);
  color: var(--orange);
  text-decoration: none;
  letter-spacing: .08em;
  padding: 2px 8px;
  line-height: 1.8;
  white-space: nowrap;
  transition: background .1s ease-in;
}

.site-menu a.teal { background: var(--teal); }
.site-menu a.teal:hover { background: var(--teal-hover); }
.site-menu a.yellow { background: var(--yellow); }
.site-menu a.yellow:hover { background: var(--yellow-hover); }

.site-menu a.first {
  border-radius: var(--r-nav-pill) 0 0 var(--r-nav-pill);
  padding: 2px 8px 2px 16px;
}
.site-menu a.last {
  border-radius: 0 var(--r-nav-pill) var(--r-nav-pill) 0;
  padding: 2px 16px 2px 8px;
}

/* ==========================================================================
   Home — blue collage section
   Mobile: plain stacked flow (matches the live fluid-grid reflow order).
   Desktop: absolutely positioned percentage collage inside an aspect-ratio
   box, reproducing the live overlapping arrangement while still scaling.
   ========================================================================== */
.collage {
  position: relative;
  background: var(--blue);
  overflow: hidden;
  padding: 4.9vw 0 0;
}

.collage__pattern {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 0;
  object-fit: cover;
  top: 12.05%;
  height: 46.8%;
}

.collage > *:not(.collage__pattern) { position: relative; z-index: 1; }

.collage__review { width: 100%; }
.collage__review img { width: 100%; height: auto; }

.collage__bikers { width: 69%; margin: 1.5vw auto 0; }
.collage__bikers img { width: 100%; height: auto; border-radius: 50%; }

/* --- image-based CTA buttons ------------------------------------------- */
.buttons-container { display: flex; justify-content: center; margin-top: 12vw; }

.inner-buttons-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.inner-buttons-container a {
  display: inline-block;
  transition: transform .3s ease-out;
}
.inner-buttons-container a:hover { transform: translateY(-10px); }

/* The buttons are artwork, not text — cap their height and let width follow. */
.inner-buttons-container img {
  max-height: 60px;
  width: auto;
  height: auto;
}

/* --- map graphic (two artworks, swapped by breakpoint like the live site) */
.collage__map { display: block; width: 87.9%; margin: 8.5vw auto 0; }
.collage__map img { width: 100%; height: auto; }
.map--desktop { display: none; }
.map--mobile { display: block; }

/* --- food + drink strip ------------------------------------------------- */
.food-drink { margin-top: 8vw; }

.food-drink__item { width: 39.5%; margin: 0 auto 11px; }
.food-drink__item img { width: 100%; height: auto; }

/* --- JOIN US TRAILSIDE! + star ----------------------------------------- */
.join-us { text-align: center; margin-top: 8vw; padding-inline: var(--gutter); }

.join-us__heading {
  font-family: var(--font-display);
  color: var(--white);
  font-size: 11.9vw;
  line-height: 1.23;
  margin: 0;
}

.join-us__star { width: 51%; margin: 4vw auto 0; }
.join-us__star img { width: 100%; height: auto; }

/* ==========================================================================
   Gallery marquee — infinite scroll
   ========================================================================== */
.marquee {
  position: relative;
  z-index: 1;
  width: 100%;
  overflow: hidden;
  margin-top: 10vw;
}

.marquee__track {
  display: flex;
  gap: 20px;
  will-change: transform;
}

.marquee__slide {
  flex: 0 0 auto;
  padding: 10px 0;
}

.sl-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 280px;   /* 250px image + 15px padding each side, matching live */
  padding: 15px;
  border-radius: var(--r-card);
  box-shadow: 0 4px 8px rgba(0, 0, 0, .1);
  background: var(--white);
}

.sl-img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: var(--r-card-img);
}

/* ==========================================================================
   Home — social + get in touch (white section)
   ========================================================================== */
.pale-section { background: var(--white); padding: 5vw 0 3rem; }

.social-block { text-align: center; padding-inline: var(--gutter); }

.social-block__heading {
  color: var(--navy-text);
  font-size: 8.26vw;
  line-height: 1.31;
  margin: 0;
}

.social-icons {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-top: 2vw;
}
.social-icons a { display: inline-block; transition: transform .3s ease-out; }
.social-icons a:hover { transform: translateY(-10px); }
.social-icons img { max-height: 60px; width: auto; }

.get-in-touch { padding: 7vw var(--gutter) 0; }

.get-in-touch__heading { font-size: 24.1px; line-height: 1.36; margin-bottom: 1.5rem; }

.get-in-touch__body { font-size: 17px; line-height: 1.8; }

/* --- contact form (stub shell) ----------------------------------------- */
.contact-form { margin-top: 2rem; }

.field { margin-bottom: 1.25rem; }

.field__label {
  display: block;
  font-family: var(--font-body);
  font-size: 17.68px;
  line-height: 1.8;
  margin-bottom: .25rem;
}
.field__req { font-size: 14.27px; opacity: .85; margin-left: .35em; }

.field__input,
.field__textarea,
.field__select {
  width: 100%;
  max-width: 490px;
  font-family: var(--font-body);
  font-size: 17.68px;
  color: #000;
  background: var(--input-fill-light);
  border: 1px solid transparent;
  border-radius: 31px;
  padding: 10px 20px;
  min-height: 54px;
}
.field__textarea { min-height: 100px; resize: vertical; border-radius: 31px; }

.btn-send {
  display: inline-block;
  background: #000;
  color: var(--white);
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .02em;
  border: 0;
  border-radius: var(--r-pill);
  padding: 19px 32px;
  cursor: pointer;
}

.btn-party {
  display: inline-block;
  background: var(--blue);
  color: var(--white);
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .02em;
  text-decoration: none;
  text-align: center;
  border-radius: var(--r-pill);
  padding: 19px 32px;
  margin-top: 1.5rem;
}

/* ==========================================================================
   Footer — navy, with the torn-edge PNG across its top
   ========================================================================== */
/* The footer is transparent and the torn-edge artwork sits at its very top, so the
   artwork's transparent upper wedge reveals whatever section precedes it — white
   after Home's contact form, blue after the Events calendar. A ::after fills solid
   navy from the artwork's lower edge down. The footer content then sits *over* the
   artwork's navy region, which is how the live site packs it (its footer lives
   inside the preceding section rather than after it). */
.site-footer {
  position: relative;
  background: none;
  color: var(--white);
  padding: 0 0 3rem;
  min-height: var(--layer-bottom-h);
}

/* Behind the artwork: the colour of the section that precedes the footer, so the
   torn edge's transparent wedge reads as a continuation of it. Pages whose last
   section is blue add .site-footer--on-blue. */
.site-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--layer-bottom-h);
  background: var(--footer-edge-bg, var(--white));
  z-index: 0;
}

.site-footer--on-blue { --footer-edge-bg: var(--blue); }

/* Below the artwork: solid navy to the bottom of the page. */
.site-footer::after {
  content: '';
  position: absolute;
  top: calc(var(--layer-bottom-h) - 1px);
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--navy);
  z-index: 1;
}

.site-footer .layer--bottom {
  position: absolute;
  top: 0;
  z-index: 2;
}

.site-footer__inner {
  position: relative;
  z-index: 3;
  padding: calc(var(--layer-bottom-h) * .42) var(--gutter) 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

/* Mobile puts the wordmark + nav above the hours/address, as the live site does. */
.site-footer__brand { order: -1; margin-bottom: 1.5rem; }

.site-footer a { color: var(--white); }

.footer__logo { width: 42.5%; margin: 0 auto; display: block; }
.footer__logo img { width: 100%; height: auto; }

.site-footer .site-menu { margin-top: 1.25rem; }

.footer__cols { margin-top: 2rem; display: grid; gap: .5rem; }

.footer__line {
  font-family: var(--font-display);
  font-size: 19.36px;
  line-height: 1.39;
  margin: 0 0 1.5rem;
}
.footer__line--body { font-family: var(--font-body); font-size: 17.68px; }
.footer__link { text-decoration: underline; }

/* ==========================================================================
   Events page
   ========================================================================== */
/* Events hero is structurally identical to Home's; only the photo offset differs
   (live nudges this one down 130px on mobile instead of 170px). */
.events-hero { --hero-photo-top: 33.33vw; }

/* The live heading uses Squarespace "scaled text": its size is a constant 5.3% of
   its container width at every breakpoint (52.6px in a 992px box on desktop,
   18.2px in a 343px box on mobile). Reproduced as a fluid vw size. */
.page-heading-wrap { width: 87.9%; margin-inline: auto; }

.page-heading {
  font-family: var(--font-display);
  color: var(--white);
  text-align: left;
  font-size: 4.66vw;
  line-height: 1;
  margin: 0;
}

.calendar-section {
  background: var(--blue);
  position: relative;
  padding: 1.28vw 0 0;   /* the footer paints its own edge backdrop */
}

/* The card is a white 20px-radius rounded rectangle — on the live site an SVG
   shape block sitting behind the calendar widget. */
.calendar-card {
  background: var(--white);
  border-radius: var(--r-card);
  width: 87.9%;
  max-width: 1600px;
  margin: 21vw auto 0;
  padding: 14px 0;
}

.calendar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 31px;
}

.calendar-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
  text-align: center;
  color: #000;
  flex: 1;
}

.calendar-nav {
  background: none;
  border: 0;
  cursor: pointer;
  width: 48px;
  height: 31px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
}

/* Chevrons are drawn rather than typed so they match the live weight/size. */
.calendar-nav__chev {
  display: block;
  width: 9px;
  height: 9px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
}
.calendar-nav--prev .calendar-nav__chev { transform: rotate(135deg); }
.calendar-nav--next .calendar-nav__chev { transform: rotate(-45deg); }

/* border-spacing on the live <table> becomes a grid gap here: 8px mobile, 4px desktop. */
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  padding: 30px 8px 8px;
}

.calendar-weekday {
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  color: #000;
  padding: 1px 1px 10px;
}

/* Mobile = the live "compact-layout": small cells, no fill, centred numbers. */
.calendar-day {
  height: 40px;
  padding: 1px;
  font-family: var(--font-body);
  font-size: 17px;
  color: #000;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}
.calendar-day--empty { background: transparent; }
.calendar-day--today { border: 1px solid rgba(110, 110, 110, .2); }

.calendar-note {
  text-align: center;
  color: var(--white);
  padding: 1.5rem var(--gutter) 0;
  font-size: .95rem;
  opacity: .9;
}

/* ==========================================================================
   Party inquiry page
   ========================================================================== */
/* This page is one blue section top to bottom — no hero photo, no middle layer,
   no pill nav and (unlike Home and Events) no footer at all. */
.party-page { background: var(--blue); }

.party-hero {
  position: relative;
  background: var(--blue);
  overflow: hidden;
}

/* Here the torn band is a plain image block at its natural aspect ratio, not the
   height-capped, object-fit:fill treatment used on Home and Events. */
.party-hero .layer--top {
  top: 2.3vw;
  height: auto;
  max-height: none;
  object-fit: contain;
}

.party-hero__brand {
  position: relative;
  z-index: 4;
  /* Tall enough to contain the torn band at its natural aspect (2500x489) plus
     its top offset, so .party-hero's overflow never clips the torn edge. */
  height: 21.75vw;
}

.party-hero__sign {
  position: absolute;
  left: 5.9%;
  top: 5.64vw;
  width: 53.8%;
}
.party-hero__sign img { width: 100%; height: auto; }

.party-hero__wordmark {
  position: absolute;
  left: 74.1%;
  top: 4.6vw;
  width: 20%;
}
.party-hero__wordmark img { width: 100%; height: auto; }

.party-form-section { padding: 5.13vw 0 6vw; }

/* Fixed sizes at both breakpoints (48.4px mobile / 66.4px desktop) — this heading
   is NOT Squarespace scaled text, unlike the one on Events. */
.party-heading {
  font-family: var(--font-display);
  color: var(--white);
  text-align: center;
  /* Live sizes are 48.4px at 390 and 66.4px at 1440. Interpolate smoothly between
     them, stay proportional on very narrow phones so it holds one line, and cap at
     the 1440 size above that. A flat vw would balloon to ~95px just under 768. */
  font-size: min(12.41vw, calc(41.7px + 1.714vw), 66.4px);
  line-height: 1.232;
  margin: 0 0 2.82vw;
}

.party-form { width: 87.9%; max-width: 768px; margin-inline: auto; }

.party-form .form-item { margin-bottom: 20px; }
.party-form fieldset { border: 0; margin: 0 0 20px; padding: 0; }

.field__legend {
  padding: 0;
  font-family: var(--font-body);
  font-size: 17.08px;
  line-height: 1.8;
  color: var(--white);
}

.party-form .field__label { color: var(--white); }

/* The two name sub-labels render at the same size as the "(required)" hint —
   the 12px on their outer <label> is not what the text actually uses. */
.field__label--caption { font-size: 14.92px; line-height: 1.8; }

.party-form .field__req { color: var(--white); font-size: 14.92px; }

/* Name row stays two-up at every width, as on the live site. */
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.party-form .field__input,
.party-form .field__textarea,
.party-form .field__select {
  width: 100%;
  max-width: none;
  background: var(--input-fill);
  border: 1px solid transparent;
  border-radius: 30.3px;
  padding: 10px 20px;
  font-family: var(--font-body);
  font-size: 17.08px;
  color: #000;
  min-height: 52.75px;
}

.party-form .field__textarea { min-height: 100px; resize: vertical; }

/* Date and time keep a fixed 200px width at both breakpoints. */
.party-form .field__control--narrow { width: 200px; max-width: 100%; min-height: 54.75px; }

.party-form .field__select {
  font-size: 14.92px;
  min-height: 48.86px;
  padding: 10px 42px 10px 20px;
  border-radius: 27.7px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
}
.party-form .field__select.show-placeholder { color: rgba(0, 0, 0, .55); }

.field__note {
  display: block;
  font-size: 14.92px;
  color: var(--white);
  margin-top: .25rem;
}

/* Opt-in checkbox, nested under the Email field as on the live site. */
.field__option {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 4px;
}
.field__checkbox {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  border-radius: 300px;
  background: rgba(255, 255, 255, .8);
  border: 2px solid transparent;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.field__checkbox:checked { background: var(--navy); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .8); }
.field__optionLabel {
  font-family: var(--font-body);
  font-size: 14.92px;
  color: var(--white);
  cursor: pointer;
}

.form-button-wrapper { margin-top: 20px; }

.btn-submit {
  display: inline-block;
  background: var(--white);
  color: var(--blue);
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .02em;
  border: 0;
  border-radius: var(--r-pill);
  padding: 19.2px 32px;
  cursor: pointer;
}

/* ==========================================================================
   Tablet and up
   ========================================================================== */
@media (min-width: 768px) {
  :root {
    --gutter: 40px;
    --hero-photo-top: 0px;
    --layer-top-h: 18vw;
    --layer-top-max: 260px;
    --layer-bottom-h: min(27vw, 390px);
  }

  /* Above 768px the layer boxes are shorter than the artwork's natural aspect
     (top: 259 vs 282px; bottom: 389 vs 475px at 1440). object-fit:cover would
     centre-crop that difference away, cutting the ragged edge into a hard line
     that bleeds over the hero and over the contact form. fill squashes to the box
     instead, keeping the whole torn edge inside it — as the live site does, where
     object-fit:cover is scoped to its max-width:767px block. */
  .layer--top,
  .layer--bottom { object-fit: fill; }

  .hero { aspect-ratio: 1440 / 778; }

  /* Sign left, wordmark + nav right — the live desktop header arrangement. */
  .hero__brand {
    position: absolute;
    inset: 0;
    padding: 0;
    display: block;
  }

  /* Vertical offsets are percentages of the hero's height (778px at 1440 wide),
     horizontal ones percentages of its width — matching the live positions. */
  .hero__sign {
    position: absolute;
    left: 4.03%;
    top: 6.94%;
    width: 45.63%;
  }

  .hero__wordmark {
    position: absolute;
    left: 65.83%;
    top: 6.94%;
    width: 22.43%;
    margin: 0;
  }

  /* Anchored from the right rather than at a fixed left %, so the pill bar grows
     leftwards and can never run off the viewport at tablet widths. At 1440 this
     lands on the live position exactly (bar spanning x900–1319). */
  .hero__brand .site-menu {
    position: absolute;
    right: 8.4%;
    top: 22.37%;
    justify-content: flex-end;
    margin: 0;
  }

  /* 17.68px at 1440 (the live size) but proportional below it, so the pill bar
     stays inside the viewport at tablet widths where it is anchored at 62.5%. */
  .site-menu-inner { font-size: clamp(11px, 1.2278vw, 17.68px); }

  /* ----- desktop collage ------------------------------------------------ */
  .collage {
    aspect-ratio: 1440 / 2453;
    padding: 0;
  }

  /* Every collage item is placed as a percentage of the section box, so the
     overlapping arrangement scales with the viewport instead of breaking. */
  .collage > *:not(.collage__pattern) { position: absolute; }

  .collage__pattern {
    top: 26.46%;
    left: 0;
    width: 100%;
    height: 73.58%;
  }

  /* .join-us and .food-drink stay static wrappers so their children position
     against .collage rather than against the wrapper. Selector weight matches
     the rule above so source order decides. */
  .collage > .join-us,
  .collage > .food-drink {
    position: static;
    margin: 0;
    padding: 0;
  }

  .join-us__heading {
    position: absolute;
    left: 33.4%;
    top: 1.51%;
    width: 25.42%;
    font-size: 4.611vw;
    line-height: 1.23;
  }

  /* The star is a small accent on desktop and a large graphic on mobile. */
  .join-us__star {
    position: absolute;
    left: 19.44%;
    top: 10.8%;
    width: 3.13%;
    margin: 0;
  }

  .collage__bikers { left: 61.94%; top: 5.87%; width: 38.06%; margin: 0; }

  .collage__review { left: 4.03%; top: 8.72%; width: 53.33%; }

  .food-drink__item { position: absolute; margin: 0; }
  .food-drink__item:nth-child(1) { left: 6.88%;  top: 24.83%; width: 20.63%; }
  .food-drink__item:nth-child(2) { left: 60.07%; top: 26.46%; width: 18.47%; }
  .food-drink__item:nth-child(3) { left: 40.42%; top: 28.05%; width: 26.94%; }
  .food-drink__item:nth-child(4) { left: 19.31%; top: 31.27%; width: 22.71%; }

  .buttons-container {
    left: 7.85%;
    top: 48.96%;
    width: 84.27%;
    margin: 0;
  }
  .inner-buttons-container { flex-direction: row; gap: 30px; }
  .inner-buttons-container img { max-height: 80px; }

  .collage__map { left: 21.81%; top: 55.4%; width: 56.46%; margin: 0; }
  .map--desktop { display: block; }
  .map--mobile { display: none; }

  .marquee { top: 81.82%; left: 0; width: 100%; margin: 0; }
  .sl-container { height: 410px; padding: 15px; }

  /* ----- white section -------------------------------------------------- */
  .pale-section { padding: 0 0 7.6vw; }

  .social-block {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 30px;
    padding: 5.5vw 4.03% 0;
    text-align: right;
  }
  .social-block__heading { font-size: 2.98vw; line-height: 1.31; flex: 1; }
  .social-icons { margin: 0; flex: 0 0 auto; }

  .get-in-touch { padding: 0 7.85% 0 4.03%; margin-top: -.5rem; }
  .get-in-touch__heading { font-size: 29.44px; }
  .get-in-touch__body { font-size: 17.68px; padding-left: 3.8%; }

  /* Form on the left, PARTY INQUIRY pill on the right — the live layout. */
  .get-in-touch__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 2rem;
    padding-left: 3.8%;
    margin-top: 1.5rem;
  }
  .btn-party { margin-top: 0; justify-self: end; min-width: 267px; }

  /* ----- footer --------------------------------------------------------- */
  .site-footer { padding-bottom: 4rem; }

  .site-footer__inner {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem;
    align-items: start;
    max-width: var(--content-max);
    margin-inline: auto;
    /* The artwork's diagonal bottoms out at ~35% of its height on the left edge,
       so footer content must start below that to stay on navy. */
    padding: calc(var(--layer-bottom-h) * .38) var(--gutter) 0;
  }

  /* Desktop returns to hours | address | wordmark+nav across three columns. */
  .site-footer__brand { order: 0; margin-bottom: 0; }

  .footer__logo { width: 100%; max-width: 323px; margin: 0 0 0 auto; }
  .site-footer .site-menu { justify-content: flex-end; margin-top: 1.75rem; }
  .footer__cols { margin: 0; }

  /* ----- events / calendar ---------------------------------------------- */
  .events-hero { --hero-photo-top: 0px; }

  /* 992px heading box at 1440 = 68.9vw; 5.3% of that is 3.652vw (52.6px live). */
  .page-heading-wrap { width: 68.9%; }
  .page-heading { font-size: 3.652vw; }

  .calendar-section { padding: 5.49vw 0 12.9vw; }

  .calendar-card {
    width: 92.01%;
    margin-top: 1.8vw;
    padding: 0 4.15%;
  }

  .calendar-head { min-height: 36px; }
  .calendar-title { font-size: 28px; }
  .calendar-nav { width: 170px; height: 36px; padding: 0 4px; }
  .calendar-nav--prev { justify-content: flex-start; }
  .calendar-nav--next { justify-content: flex-end; }

  .calendar-grid { gap: 4px; padding: 34px 0 0; }

  .calendar-weekday { letter-spacing: .5px; }

  /* Desktop = the live full layout: square tinted cells, number at the top-right. */
  .calendar-day {
    height: auto;
    aspect-ratio: 1 / 1;
    background: rgba(110, 110, 110, .05);
    font-size: 17.68px;
    display: block;
    padding: 1px;
    text-align: right;
  }
  .calendar-day--empty { background: rgba(110, 110, 110, .05); }
  .calendar-day--today { background: rgba(110, 110, 110, .1); border: 0; }

  /* ----- party inquiry -------------------------------------------------- */
  .party-hero .layer--top { top: 2.15vw; }

  /* Height is derived from the artwork's aspect + offset, both vw-proportional,
     so the mobile value already holds here — no override needed. */
  .party-hero__sign  { left: 7.85%; top: 5.07vw; width: 57.2%; }
  .party-hero__wordmark { left: 73.54%; top: 4.65vw; width: 22.43%; }

  .party-heading { margin: 0; }
  .field__label--caption { font-size: 14.272px; }

  .party-form { width: 53.35%; }
  /* Padding, not margin, so it can't collapse through the section box. */
  .party-form-section { padding: 2.99vw 0 3.4vw; }

  .field__legend { font-size: 17.68px; }
  .party-form .field__req { font-size: 14.272px; }
  .field__note { font-size: 14.272px; }
  .field__optionLabel { font-size: 14.272px; }

  .party-form .field__input,
  .party-form .field__textarea,
  .party-form .field__select {
    font-size: 17.68px;
    border-radius: 31px;
    min-height: 53.83px;
  }
  .party-form .field__textarea { min-height: 100px; }
  .party-form .field__control--narrow { min-height: 55.83px; }

  .party-form .field__select {
    font-size: 14.272px;
    min-height: 47.69px;
    border-radius: 26.96px;
  }
}

/* ==========================================================================
   Large desktop — stop the collage growing without bound
   ========================================================================== */
@media (min-width: 1600px) {
  .join-us__heading { font-size: 73px; }
  .social-block__heading { font-size: 47px; }
  /* .page-heading is deliberately NOT capped: the live site's scaled text keeps
     filling its container at every width, so it stays fluid. */
}

/* ==========================================================================
   Motion preferences
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .inner-buttons-container a,
  .social-icons a { transition: none; }
  .inner-buttons-container a:hover,
  .social-icons a:hover { transform: none; }
  .marquee__track { transform: none !important; }
}

/* ---- Calendar events (marker + month list) ---- */
/* The dot sits on the existing 40px cell rather than resizing it, so adding
   events changes nothing about the grid's rhythm. */
.calendar-day--event { position: relative; font-weight: 700; }

/* Category colour comes from the site's OWN theme rather than a new palette:
   orange is already the Events hero background and blue the page ground, so an
   event marker reads as part of this site instead of an import from Hum. */
.calendar-day--cat-event { --marker: #db5337; }      /* theme orange */
.calendar-day--cat-promotion { --marker: #f2ca2b; }  /* theme yellow */

/* Two layouts to sit inside, so the dot follows each rather than guessing
   offsets: below 768px the cell is a 40px flex box centring its number, and at
   768px+ it becomes a square block with the number right-aligned. */
.calendar-day--event::after {
  content: '';
  position: absolute;
  bottom: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 4px;
  border-radius: 2px;
  background: var(--marker, #db5337);
}

@media (min-width: 768px) {
  /* In flow and right-aligned, so it lands under the number wherever the cell
     sizes itself, instead of floating in the middle of a large square. */
  .calendar-day--event::after {
    position: static;
    transform: none;
    display: block;
    width: 100%;
    height: 6px;
    border-radius: 3px;
    margin: 6px 0 0;
  }

  /* A tinted cell as well as the bar: at 140px the bar alone is a small mark in
     a large square, and the wash is what makes an event day read at a glance. */
  .calendar-day--cat-event { background: rgba(219, 83, 55, .12); }
  .calendar-day--cat-promotion { background: rgba(242, 202, 43, .18); }
}

.calendar-events {
  list-style: none;
  margin: 0;
  padding: 1.25rem var(--gutter) 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  color: var(--white);
}

.calendar-events__item {
  font-family: var(--font-body);
  font-size: .95rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid rgba(255, 255, 255, .18);
}

.calendar-events__item:last-child { border-bottom: 0; }

.calendar-events__empty {
  font-family: var(--font-body);
  font-size: .95rem;
  opacity: .9;
  text-align: center;
}

/* ---- Upcoming events cards ---- */
.upcoming { padding: 2.5rem var(--gutter) 0; }

.upcoming__heading {
  font-family: var(--font-display, inherit);
  color: var(--white);
  text-align: center;
  margin: 0 0 1.25rem;
  font-size: 1.6rem;
  letter-spacing: .02em;
}

.upcoming__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

/* Same white rounded card as .calendar-card above it, so the section reads as
   the same family rather than a new component. */
.upcoming__card {
  background: var(--white);
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-top: 6px solid var(--marker, #db5337);
}

.upcoming__card--event { --marker: #db5337; }
.upcoming__card--promotion { --marker: #f2ca2b; }

.upcoming__img { width: 100%; height: 150px; object-fit: cover; display: block; }

.upcoming__body { padding: .9rem 1rem 1.1rem; }

.upcoming__when {
  margin: 0 0 .25rem;
  font-family: var(--font-body);
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--marker, #db5337);
  font-weight: 700;
}

.upcoming__title {
  margin: 0 0 .35rem;
  font-family: var(--font-display, inherit);
  font-size: 1.15rem;
  color: #193958;
}

.upcoming__meta,
.upcoming__desc {
  margin: 0;
  font-family: var(--font-body);
  font-size: .9rem;
  color: rgba(25, 57, 88, .75);
}

.upcoming__desc { margin-top: .3rem; }

@media (min-width: 768px) {
  .upcoming__grid { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
  .upcoming__heading { font-size: 2rem; }
}

/* ---- Event detail dialog ---- */
/* Anything site.js has made clickable. One class covers the day cell, the month
   list row and the Upcoming card, so the three affordances cannot drift apart. */
.is-openable { cursor: pointer; }

.is-openable:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}

.upcoming__card.is-openable { transition: transform .3s ease-out; }
.upcoming__card.is-openable:hover { transform: translateY(-4px); }
.calendar-events__item.is-openable:hover { border-bottom-color: rgba(255, 255, 255, .5); }

/* Same white rounded card as .calendar-card and .upcoming__card, including the
   category accent along the top edge — the dialog is the card, enlarged, not a
   new component with its own look. */
.event-detail {
  width: min(92vw, 520px);
  max-height: 88vh;
  padding: 0;
  border: 0;
  border-top: 6px solid var(--marker, #db5337);
  border-radius: var(--r-card);
  background: var(--white);
  color: #193958;
  overflow: hidden auto;
  /* <dialog> is centred by the UA in the top layer; margin:auto keeps that
     centring once a width is set. */
  margin: auto;
}

.event-detail--event { --marker: #db5337; }
.event-detail--promotion { --marker: #f2ca2b; }

/* The site navy, so the wash behind the dialog belongs to this palette rather
   than defaulting to the UA's neutral black. */
.event-detail::backdrop { background: rgba(25, 57, 88, .6); }

.event-detail__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  color: #193958;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  /* Above the image, which bleeds to the dialog's top edge. */
  z-index: 1;
}

.event-detail__close:hover { background: var(--white); }

/* Taller than the card's 150px: this is the view where the photo is the point. */
.event-detail__img { width: 100%; height: 200px; object-fit: cover; }

/* The reset's `img { display: block }` is an author rule, so it outranks the UA's
   `[hidden] { display: none }` — without this, an event with no image still
   reserved 200px of blank white at the top of the dialog. */
.event-detail__img[hidden] { display: none; }

.event-detail__body { padding: 1.1rem 1.25rem 1.4rem; }

/* Only needed without an image — with one, the close button floats over the photo
   and the text below it is already clear. */
.event-detail--no-image .event-detail__when,
.event-detail--no-image .event-detail__title { padding-right: 2.5rem; }

/* Matches .upcoming__when exactly, so the same event reads the same in both. */
.event-detail__when {
  margin: 0 0 .3rem;
  font-family: var(--font-body);
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--marker, #db5337);
  font-weight: 700;
}

.event-detail__title {
  margin: 0 0 .4rem;
  font-family: var(--font-display, inherit);
  font-size: 1.5rem;
  line-height: 1.2;
  color: #193958;
}

.event-detail__location,
.event-detail__desc {
  margin: 0;
  font-family: var(--font-body);
  font-size: .95rem;
  line-height: 1.6;
  color: rgba(25, 57, 88, .75);
}

.event-detail__location { font-weight: 700; }
.event-detail__desc { margin-top: .5rem; }

.event-detail__share {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(25, 57, 88, .12);
}

.event-detail__share-label {
  margin: 0 0 .6rem;
  font-family: var(--font-body);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  color: rgba(25, 57, 88, .6);
}

.event-detail__share-row { display: flex; flex-wrap: wrap; gap: .5rem; }

/* Pill geometry and type borrowed from .btn-send / .btn-party rather than each
   network's own branding, so the row stays inside the site's visual language. */
.share-btn {
  display: inline-block;
  border: 0;
  border-radius: var(--r-pill);
  padding: 10px 18px;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: .85rem;
  font-weight: 500;
  letter-spacing: .02em;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  color: var(--white);
}

.share-btn:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

.share-btn--native { background: var(--teal); }
.share-btn--native:hover { background: var(--teal-hover); }

.share-btn--fb { background: var(--blue); }
.share-btn--fb:hover { background: #009fd2; }

.share-btn--x { background: #000; }
.share-btn--x:hover { background: #222; }

/* White on blue text, mirroring .btn-submit — the odd one out because copying is
   a local action, not a hand-off to another site. */
.share-btn--copy {
  background: var(--white);
  color: var(--blue);
  box-shadow: inset 0 0 0 1px var(--blue);
}
.share-btn--copy:hover { background: var(--input-fill); }

.event-detail__status {
  margin: .6rem 0 0;
  font-family: var(--font-body);
  font-size: .8rem;
  color: var(--teal-hover);
  overflow-wrap: anywhere; /* the fallback prints the URL for manual copying */
}

@media (min-width: 768px) {
  .event-detail__img { height: 240px; }
  .event-detail__title { font-size: 1.9rem; }
  .event-detail__body { padding: 1.4rem 1.75rem 1.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .upcoming__card.is-openable { transition: none; }
  .upcoming__card.is-openable:hover { transform: none; }
}