/* ==========================================================================
   LIVE AT ST MARY'S — SITE STYLES
   ==========================================================================
   Layout and components. The colours, fonts and corner shapes all come from
   brand.css — if you want to change a colour or make buttons rounded again,
   change it there, not here.

   Contents
     1.  Base
     2.  Layout helpers
     3.  Section headings
     4.  Buttons
     5.  Header and menu
     6.  Home page hero (with background video)
     7.  Event tiles
     8.  Information cards
     9.  Formstack form panel
     10. Partners
     11. Footer
     12. Event page
     13. Reveal animation
     14. Responsive
   ========================================================================== */


/* ==========================================================================
   1. BASE
   ========================================================================== */

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

/* Anything with the "hidden" attribute must actually be hidden.

   The browser's own rule is [hidden] { display: none }, but ANY rule written
   here beats it — so a panel given `display: flex` or `grid` stays on screen
   even after the code hides it, silently covering the page and swallowing
   clicks. The lightbox hit exactly that; this makes it impossible anywhere. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--page);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--page);
  color: var(--text-muted);
  font-family: var(--font-brand);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  margin: 0;
  color: var(--text);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--teal-deep); text-decoration: none; }
a:hover { text-decoration: underline; }

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

ul { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 3px solid var(--crimson);
  outline-offset: 3px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 200;
  padding: 0.7rem 1.1rem;
  background: var(--text);
  color: var(--page);
  font-weight: 700;
  transform: translateY(-160%);
  transition: transform 0.2s var(--ease);
}
.skip-link:focus { transform: translateY(0); }

.noscript-note {
  margin: 0;
  padding: 1rem var(--page-gutter);
  background: var(--crimson);
  color: #ffffff;
  text-align: center;
  font-weight: 600;
}


/* ==========================================================================
   2. LAYOUT HELPERS
   ========================================================================== */

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

.section {
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
}

/* A section on the tinted background, to break up long white pages */
.section--alt {
  background: var(--page-alt);
  border-block: 1px solid var(--border);
}


/* ==========================================================================
   3. SECTION HEADINGS
   ========================================================================== */

.section-head {
  max-width: 46rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.section-head--centred {
  margin-inline: auto;
  text-align: center;
}

.eyebrow {
  margin: 0 0 0.85rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--crimson-deep);
}

.section-title {
  font-size: clamp(1.95rem, 4.2vw, 3.1rem);
  margin-bottom: 0.7rem;
}

.section-title--sm { font-size: clamp(1.5rem, 2.6vw, 2rem); }

.section-intro {
  margin: 0;
  font-size: 1.075rem;
  color: var(--text-muted);
  max-width: 44rem;
}

.section-head--centred .section-intro { margin-inline: auto; }


/* ==========================================================================
   4. BUTTONS
   ==========================================================================
   All square-edged, via --radius-button in brand.css.
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.85rem 1.6rem;
  border: 0;
  border-radius: var(--radius-button);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform var(--speed) var(--ease),
    box-shadow var(--speed) var(--ease),
    background-color var(--speed) var(--ease),
    border-color var(--speed) var(--ease),
    color var(--speed) var(--ease);
}

.btn:hover { text-decoration: none; }

.btn--sm { padding: 0.6rem 1.2rem; font-size: 0.875rem; }
.btn--lg { padding: 1.02rem 2rem; font-size: 1.02rem; }

/* -- Primary: the brand gradient -- */
.btn--primary {
  color: #ffffff;
  background-image: var(--gradient-cta);
  background-size: 160% 100%;
  background-position: 0% 50%;
  box-shadow: var(--shadow-cta);
  transition: background-position 0.5s var(--ease), transform var(--speed) var(--ease),
              box-shadow var(--speed) var(--ease);
}
.btn--primary:hover,
.btn--primary:focus-visible {
  background-position: 100% 50%;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -12px rgba(228, 0, 78, 0.65);
}

/* -- Secondary: outlined -- */
.btn--secondary {
  color: var(--text);
  background: var(--surface);
  border: 1.5px solid var(--border-strong);
}
.btn--secondary:hover,
.btn--secondary:focus-visible {
  border-color: var(--crimson);
  color: var(--crimson-deep);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* -- Buttons that sit on top of the hero video need to hold their own
      against a moving background, so they get a solid fill or a white
      outline rather than a light one. -- */
.btn--on-media {
  color: #ffffff;
  background: rgba(9, 9, 26, 0.42);
  border: 1.5px solid rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(6px);
}
.btn--on-media:hover,
.btn--on-media:focus-visible {
  background: #ffffff;
  color: var(--text);
  border-color: #ffffff;
  transform: translateY(-2px);
}

/* -- Sold out, used on a home page tile. Still a link, but visually muted
      so nobody mistakes it for tickets being available. -- */
.btn--soldout-link {
  color: var(--off-text);
  background: var(--off-bg);
  border: 1.5px solid var(--off-border);
}
.btn--soldout-link:hover,
.btn--soldout-link:focus-visible {
  color: var(--text);
  border-color: var(--border-strong);
  background: var(--surface-alt);
}

/* -- A button that is not a link at all. Used on a tile when click-through
      to the event page is switched off, so the wording still reads as a clear
      statement ("On sale 9am Friday") without inviting a click. -- */
.btn--static {
  color: var(--text);
  background: var(--surface-alt);
  border: 1.5px solid var(--border-strong);
  cursor: default;
}

.btn__arrow {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  transition: transform var(--speed) var(--ease);
}
.btn:hover .btn__arrow,
.cta-button:hover .btn__arrow { transform: translateX(4px); }


/* ==========================================================================
   5. HEADER AND MENU
   ==========================================================================
   The header sits over the hero to begin with, so its text is white. Once the
   page scrolls it becomes a solid white bar and the text turns dark.
   ========================================================================== */

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--border);
  background: var(--page);
  transition: background-color var(--speed) var(--ease),
              border-color var(--speed) var(--ease),
              box-shadow var(--speed) var(--ease);
}

/* Over the hero: see-through, white text */
.header--over-hero:not(.header--stuck) {
  background: transparent;
  border-bottom-color: transparent;
}

/* Scrolled: solid white bar */
.header--stuck {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow-sm);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: var(--header-padding);
}

.header__logo { display: block; flex: 0 0 auto; }
.header__logo img {
  height: var(--header-logo);
  width: auto;
}

/* The logo artwork is dark navy type, which disappears against the hero
   video, so it gets a soft drop shadow only while it sits over the hero. */
.header--over-hero:not(.header--stuck) .header__logo img {
  filter: brightness(0) invert(1) drop-shadow(0 2px 10px rgba(0, 0, 0, 0.45));
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 2.4vw, 2.2rem);
}

.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 2.2vw, 2rem);
}

.nav__link {
  color: var(--text);
  font-size: 0.94rem;
  font-weight: 600;
  text-decoration: none;
  padding-block: 0.35rem;
  position: relative;
}

.header--over-hero:not(.header--stuck) .nav__link {
  color: #ffffff;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--gradient-brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--speed) var(--ease);
}
.nav__link:hover { text-decoration: none; }
.nav__link:hover::after,
.nav__link:focus-visible::after { transform: scaleX(1); }

/* -- Mobile menu button -- */
.nav-toggle {
  display: none;
  width: var(--header-control);
  height: var(--header-control);
  padding: 0;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-button);
  background: var(--surface);
  cursor: pointer;
}

.header--over-hero:not(.header--stuck) .nav-toggle {
  background: rgba(9, 9, 26, 0.35);
  border-color: rgba(255, 255, 255, 0.7);
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--text);
  margin-inline: auto;
  transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
}
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }

.header--over-hero:not(.header--stuck) .nav-toggle__bars,
.header--over-hero:not(.header--stuck) .nav-toggle__bars::before,
.header--over-hero:not(.header--stuck) .nav-toggle__bars::after {
  background: #ffffff;
}

.header--nav-open .nav-toggle__bars { background: transparent !important; }
.header--nav-open .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.header--nav-open .nav-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); }


/* ==========================================================================
   6. HOME PAGE HERO (with background video)
   ========================================================================== */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: var(--hero-height);
  margin-top: calc(-1 * var(--header-height));
  padding-top: clamp(7rem, 14vh, 10rem);
  padding-bottom: clamp(3.5rem, 8vh, 6rem);
  overflow: hidden;
  isolation: isolate;
  background: #0b0b20;   /* shows while the video is still loading */
}

/* -- The still image behind the video. It is also what visitors see if the
      video is blocked, or if they have asked for reduced motion. -- */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -3;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.04);
}

/* -- The YouTube video --
      An iframe cannot crop itself the way an image can, so it is sized to
      always be at least as large as the screen in both directions and then
      centred, with the overflow hidden. That gives the same result as
      "cover" on a background image. -- */
.hero__video {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  opacity: 0;
  transition: opacity 1.2s var(--ease);
}

.hero__video.is-playing { opacity: 1; }

/* Pasted player code usually arrives with a fixed size on its own container
   (560 x 315 or similar). Those have to be overridden, or the video sits as a
   small rectangle in the corner instead of filling the hero. */
.hero__video > div,
.hero__video > span,
.hero__video > object {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  max-width: none !important;
}

/* ---------------------------------------------------------------------------
   Filling the hero with no gaps down the sides
   ---------------------------------------------------------------------------
   The hero is much wider than it is tall — often wider than 16:9 — while the
   video itself is 16:9. Stretching the player to the hero's shape does not
   help: it keeps the video's own proportions and pads the difference with
   black, which is where the bars either side came from.

   So instead the player is made big enough to cover the hero in BOTH
   directions, centred, and the overflow is hidden. The shape of the video is
   held in these two numbers, and the script sets them from the real video
   when it can, so a video that is not 16:9 still fills the space.
   --------------------------------------------------------------------------- */
.hero__video {
  container-type: size;    /* lets the player measure itself against the hero */
  --hero-video-w: 16;
  --hero-video-h: 9;
}

.hero__video iframe,
.hero__video video,
.hero__video > div iframe,
.hero__video > div video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 0;
  object-fit: cover;

  /* The player sets max-width/max-height: 100% on itself, which would stop it
     growing past the hero and bring the bars straight back. */
  max-width: none !important;
  max-height: none !important;

  /* Fallback for older browsers: the hero runs the full width of the window,
     so the window's width is the hero's width. */
  width: 100vw !important;
  height: 56.25vw !important;
  min-width: 177.78vh;
  min-height: 100vh;
}

/* Measured against the hero itself rather than the window, which is exact
   whatever the hero's height happens to be. */
@supports (width: 1cqw) {
  .hero__video iframe,
  .hero__video video,
  .hero__video > div iframe,
  .hero__video > div video {
    width: max(100cqw, calc(100cqh * var(--hero-video-w) / var(--hero-video-h))) !important;
    height: max(100cqh, calc(100cqw * var(--hero-video-h) / var(--hero-video-w))) !important;
    min-width: 0;
    min-height: 0;
  }
}

/* Nothing inside the hero video should be clickable or tab-reachable */
.hero__video,
.hero__video * { pointer-events: none; }

/* -- Darkening veil so the type stays readable over moving pictures -- */
.hero__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(8, 8, 24, 0.62) 0%, rgba(8, 8, 24, 0.5) 45%,
                    rgba(8, 8, 24, 0.72) 100%),
    linear-gradient(90deg, rgba(8, 8, 24, 0.72) 0%, rgba(8, 8, 24, 0.3) 60%,
                    rgba(8, 8, 24, 0.45) 100%);
}

/* The brand gradient closes off the bottom of the hero */
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  z-index: 2;
  background: var(--gradient-brand);
}

.hero__inner { max-width: 54rem; }

.hero__eyebrow {
  margin: 0 0 1.1rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--on-media);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
}

.hero__headline {
  font-size: clamp(2.6rem, 7.4vw, 5.4rem);
  letter-spacing: -0.03em;
  margin-bottom: 1.3rem;
  color: var(--on-media);
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
  text-wrap: balance;
}

.hero__intro {
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  color: var(--on-media);
  max-width: 38rem;
  margin-bottom: 2.1rem;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.5);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}


/* ==========================================================================
   7. EVENT TILES
   ========================================================================== */

.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr));
  gap: clamp(1.25rem, 2.4vw, 1.9rem);
}

.tile {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--speed) var(--ease),
              border-color var(--speed) var(--ease),
              box-shadow var(--speed) var(--ease);
}

.tile:hover {
  transform: translateY(-6px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-lg);
}

/* -- Image -- */
.tile__media {
  position: relative;
  display: block;
  aspect-ratio: var(--tile-ratio);
  overflow: hidden;
  background: var(--surface-alt);
}

.tile__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}

.tile:hover .tile__media img { transform: scale(1.055); }

.tile__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 8, 24, 0.2) 0%, transparent 40%);
}

/* The gradient rule that separates image from text — the brand's signature */
.tile__media::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--gradient-brand);
}

/* -- Corner label -- */
.tile__badge {
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-button);
  background-image: var(--gradient-cta);
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  box-shadow: 0 4px 14px -4px rgba(0, 0, 0, 0.5);
}

.tile__badge--soldout {
  background-image: none;
  background-color: rgba(13, 13, 36, 0.88);
}

/* -- Text -- */
.tile__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.55rem;
  padding: 1.35rem 1.35rem 1.5rem;
}

.tile__date {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  font-size: 0.79rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--crimson-deep);
}

.tile__tick {
  display: block;
  width: 3px;
  height: 1.05rem;
  flex: 0 0 auto;
  background: var(--gradient-brand);
  background-size: 100% 400%;
}

.tile__title {
  font-size: 1.35rem;
  line-height: 1.15;
}

.tile__title a {
  color: var(--text);
  text-decoration: none;
}
.tile__title a:hover { color: var(--crimson-deep); text-decoration: none; }

.tile__support {
  margin: 0;
  font-size: 0.92rem;
  color: var(--text-subtle);
}

/* Pin the button to the bottom so every tile lines up */
.tile__cta {
  margin-top: auto;
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
  width: 100%;
}

.empty-state {
  padding: clamp(2rem, 5vw, 3.5rem);
  background: var(--surface-alt);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-card);
  text-align: center;
  font-size: 1.05rem;
}


/* ==========================================================================
   8. INFORMATION CARDS
   ========================================================================== */

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}

.info-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.6rem 1.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
  transition: border-color var(--speed) var(--ease), transform var(--speed) var(--ease),
              box-shadow var(--speed) var(--ease);
}

.info-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gradient-brand);
}

.info-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}

/* A card with a photo needs no padding at the top — the picture goes right to
   the edges, under the gradient rule. */
.info-card--has-photo { padding: 0 0 1.5rem; }

.info-card__media {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--surface-alt);
}

.info-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}

.info-card--has-photo:hover .info-card__media img { transform: scale(1.05); }

.info-card--has-photo .info-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex: 1;
  padding: 1.4rem 1.5rem 0;
}

.info-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex: 1;
}

.info-card__title { font-size: 1.1rem; }

.info-card p {
  margin: 0;
  font-size: 0.96rem;
  color: var(--text-muted);
}

.info-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: auto;
  padding-top: 0.3rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--teal-deep);
}
.info-card__link svg { width: 0.9rem; height: 0.9rem; transition: transform var(--speed) var(--ease); }
.info-card__link:hover { text-decoration: none; color: var(--crimson-deep); }
.info-card__link:hover svg { transform: translateX(3px); }


/* ==========================================================================
   8b. PHOTO GALLERY
   ==========================================================================
   A grid of photos from past shows. The first one takes a double-width,
   double-height slot so the grid does not look like a plain spreadsheet.
   ========================================================================== */

.gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.5rem, 1.2vw, 0.9rem);
}

/* Each photo is a <button>, so the browser's default button styling has to be
   cleared away first. */
.gallery__item {
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--surface-alt);
  aspect-ratio: 3 / 2;
  cursor: zoom-in;
  font: inherit;
  color: inherit;
}

.gallery__item--feature {
  grid-column: span 2;
  grid-row: span 2;
  aspect-ratio: auto;   /* the two rows it spans decide the height */
}

.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease);
}

.gallery__item:hover img,
.gallery__item:focus-visible img {
  transform: scale(1.06);
}

/* The magnifier badge that appears on hover, hinting the photo opens */
.gallery__zoom {
  position: absolute;
  right: 0.6rem;
  bottom: 0.6rem;
  width: 2.1rem;
  height: 2.1rem;
  display: grid;
  place-items: center;
  background: rgba(8, 8, 24, 0.62);
  color: #ffffff;
  backdrop-filter: blur(4px);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--speed) var(--ease), transform var(--speed) var(--ease);
}

.gallery__zoom svg { width: 1.1rem; height: 1.1rem; }

.gallery__item:hover .gallery__zoom,
.gallery__item:focus-visible .gallery__zoom {
  opacity: 1;
  transform: none;
}


/* ==========================================================================
   8c. LIGHTBOX — the full-screen photo viewer
   ==========================================================================
   Deliberately dark even though the rest of the site is light: photographs
   read best against near-black, and it makes clear you have stepped into a
   viewer rather than another page.
   ========================================================================== */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  /* No fade on the viewer itself, deliberately. It takes over the whole screen
     and holds the keyboard, so it must be visible the instant it opens — it
     must never depend on an animation or a script running to become visible.
     The photo inside does the fading instead, and that has its own backstop. */
}

/* Kept deliberately, even though the global [hidden] rule near the top of this
   file now covers it too. Belt and braces on the one that actually bit us. */
.lightbox[hidden] {
  display: none;
}


.lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 4, 14, 0.94);
  border: 0;
  cursor: zoom-out;
}

.lightbox__panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: clamp(0.6rem, 2vw, 1.25rem);
  gap: 0.6rem;
  pointer-events: none;   /* let clicks fall through to the backdrop... */
}

/* ...except on the parts you are meant to interact with */
.lightbox__panel > *,
.lightbox__figure,
.lightbox__btn { pointer-events: auto; }

.lightbox__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex: 0 0 auto;
}

.lightbox__counter {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* -- Buttons -- */
.lightbox__btn {
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  padding: 0;
  border: 1.5px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius-button);
  background: rgba(255, 255, 255, 0.07);
  color: #ffffff;
  cursor: pointer;
  transition: background-color var(--speed) var(--ease),
              border-color var(--speed) var(--ease),
              transform var(--speed) var(--ease);
}

.lightbox__btn svg { width: 1.35rem; height: 1.35rem; }

.lightbox__btn:hover,
.lightbox__btn:focus-visible {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--text);
}

.lightbox__btn:focus-visible { outline: 3px solid var(--teal-bright); outline-offset: 3px; }

/* -- The photo itself -- */
.lightbox__stage {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.5rem, 2vw, 1.5rem);
  min-height: 0;         /* lets the figure shrink inside the flex column */
  touch-action: pan-y;   /* keeps horizontal swipes for us */
}

.lightbox__nav { flex: 0 0 auto; }

.lightbox__figure {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox__image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-card);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.9);
  /* No fade here either. The photo is the whole point of the viewer, so it is
     never hidden behind an effect that has to complete before you can see it.
     The photos either side are preloaded instead, which makes swapping between
     them look instant without risking a blank screen. */
}

.lightbox__caption {
  flex: 0 0 auto;
  margin: 0;
  text-align: center;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.92rem;
  line-height: 1.5;
  max-width: 52rem;
  margin-inline: auto;
}

/* -- Thumbnail strip -- */
.lightbox__thumbs {
  flex: 0 0 auto;
  display: flex;
  gap: 0.4rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
  justify-content: center;
}

.lightbox__thumbs::-webkit-scrollbar { height: 6px; }
.lightbox__thumbs::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.3); }

.lightbox__thumb {
  flex: 0 0 auto;
  width: 5rem;
  height: 3.4rem;
  padding: 0;
  border: 0;
  border-radius: 2px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
  cursor: pointer;
  opacity: 0.45;
  transition: opacity var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}

.lightbox__thumb img { width: 100%; height: 100%; object-fit: cover; }

.lightbox__thumb:hover { opacity: 0.8; }

.lightbox__thumb.is-current {
  opacity: 1;
  box-shadow: 0 0 0 2px var(--teal-bright);
}

.lightbox__thumb:focus-visible { outline: 3px solid var(--teal-bright); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .lightbox,
  .lightbox__image,
  .lightbox__btn,
  .lightbox__thumb,
  .gallery__item img,
  .gallery__zoom { transition: none; }

  .lightbox__image { opacity: 1; }
}

@media (max-width: 40rem) {
  /* On a phone the arrows would eat the photo, so swiping and the thumbnail
     strip do the work instead. */
  .lightbox__nav { display: none; }
  .lightbox__thumb { width: 3.9rem; height: 2.7rem; }
  .lightbox__thumbs { justify-content: flex-start; }
  .lightbox__caption { font-size: 0.85rem; }
}


/* ==========================================================================
   9. FORMSTACK FORM PANEL
   ==========================================================================
   Formstack brings its own stylesheet with it. The rules below sit on top of
   it so the form matches the Live at St Mary's look. Some need !important to
   win against Formstack's own styles — that is expected here.
   ========================================================================== */

/* The form sits on the tinted band so the white card stands out from it */
.section--form {
  background: var(--page-alt);
  border-block: 1px solid var(--border);
}

.form-card {
  max-width: 48rem;
  margin-inline: auto;
  padding: clamp(1.5rem, 3.5vw, 2.75rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}

.form-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--gradient-brand);
}

/* Forms shown in an iframe bring their own padding */
.form-card--iframe { padding: 0; }
.form-card--iframe .fs-embed { padding-top: 4px; }
.form-card--iframe .fs-embed iframe {
  display: block;
  width: 100%;
  min-height: 50rem;
  border: 0;
}

/* -- Placeholder shown before an embed code has been pasted in -- */
.form-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  text-align: center;
  padding: clamp(1.5rem, 4vw, 3rem) 1rem;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-card);
  background: var(--surface-alt);
  color: var(--text-subtle);
}

.form-placeholder__mark {
  width: 3.25rem;
  height: 3.25rem;
  background: var(--gradient-brand);
  opacity: 0.85;
}

.form-placeholder p { margin: 0; max-width: 32rem; font-size: 0.95rem; }

.fs-error {
  margin: 0;
  padding: 1rem;
  border-radius: var(--radius-card);
  background: rgba(228, 0, 78, 0.08);
  border: 1px solid var(--crimson);
  color: var(--text);
}

/* -- Formstack's own markup, restyled -- */
.fs-embed .fsBody,
.fs-embed .fsForm {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  width: 100% !important;
  font-family: var(--font-brand) !important;
}

.fs-embed .fsSectionHeader,
.fs-embed .fsSectionHeading,
.fs-embed .fsPage h2,
.fs-embed .fsPage h3 {
  background: transparent !important;
  border: 0 !important;
  color: var(--text) !important;
  font-family: var(--font-brand) !important;
}

.fs-embed .fsLabel,
.fs-embed label {
  color: var(--text) !important;
  font-family: var(--font-brand) !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
}

.fs-embed .fsSupporting,
.fs-embed .fsOptionLabel {
  color: var(--text-muted) !important;
  font-family: var(--font-brand) !important;
}

.fs-embed .fsRequiredMarker { color: var(--crimson-deep) !important; }

.fs-embed input[type="text"],
.fs-embed input[type="email"],
.fs-embed input[type="tel"],
.fs-embed input[type="number"],
.fs-embed input[type="date"],
.fs-embed input[type="password"],
.fs-embed select,
.fs-embed textarea {
  width: 100% !important;
  padding: 0.8rem 0.95rem !important;
  background: var(--page) !important;
  border: 1.5px solid var(--border-strong) !important;
  border-radius: var(--radius-button) !important;
  color: var(--text) !important;
  font-family: var(--font-brand) !important;
  font-size: 1rem !important;
  box-shadow: none !important;
}

.fs-embed input::placeholder,
.fs-embed textarea::placeholder { color: var(--text-subtle) !important; }

.fs-embed input[type="text"]:focus,
.fs-embed input[type="email"]:focus,
.fs-embed input[type="tel"]:focus,
.fs-embed select:focus,
.fs-embed textarea:focus {
  border-color: var(--crimson) !important;
  outline: none !important;
}

.fs-embed .fsFieldRow,
.fs-embed .fsRow { margin-bottom: 1.1rem !important; }

.fs-embed .fsSubmit {
  background: transparent !important;
  border: 0 !important;
  padding: 0.5rem 0 0 !important;
  text-align: left !important;
}

.fs-embed .fsSubmitButton,
.fs-embed input[type="submit"],
.fs-embed button[type="submit"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  padding: 0.95rem 2rem !important;
  border: 0 !important;
  border-radius: var(--radius-button) !important;
  background-image: var(--gradient-cta) !important;
  background-color: var(--crimson) !important;
  color: #ffffff !important;
  font-family: var(--font-brand) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  text-shadow: none !important;
  box-shadow: var(--shadow-cta) !important;
  cursor: pointer !important;
}

.fs-embed .fsSubmitButton:hover,
.fs-embed input[type="submit"]:hover { filter: brightness(1.06); }

/* Formstack's error styling, matched to the brand */
.fs-embed .fsError,
.fs-embed .fsValidationError {
  background: rgba(228, 0, 78, 0.08) !important;
  border-color: var(--crimson) !important;
  color: var(--text) !important;
  border-radius: var(--radius-card) !important;
}


/* ==========================================================================
   10. PARTNERS
   ========================================================================== */

.partners {
  padding-block: clamp(2.5rem, 5vw, 4rem);
  background: var(--page-alt);
  border-top: 1px solid var(--border);
}

/* A proper centred section heading rather than the small caption it was */
.partners__heading {
  margin: 0 auto clamp(2rem, 4vw, 2.75rem);
  max-width: 40rem;
  text-align: center;
  font-size: clamp(1.5rem, 3vw, 2.15rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--text);
}

/* A short gradient rule centred under the heading */
.partners__heading::after {
  content: "";
  display: block;
  width: 4.5rem;
  height: 3px;
  margin: 0.9rem auto 0;
  background: var(--gradient-brand);
}

.partners__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3.25rem);
}

.partners__item img {
  height: clamp(30px, 4.5vw, 42px);
  width: auto;
  opacity: 0.8;
  transition: opacity var(--speed) var(--ease);
}
.partners__item:hover img { opacity: 1; }


/* ==========================================================================
   11. FOOTER
   ========================================================================== */

.footer {
  padding-top: clamp(2.5rem, 5vw, 3.5rem);
  background: var(--page-alt);
  border-top: 1px solid var(--border);
}

.footer__rule { margin: 0 0 clamp(2.5rem, 5vw, 3.5rem); }

.footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 2fr);
  gap: clamp(2rem, 5vw, 4rem);
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

.footer__mark { height: 44px; width: auto; margin-bottom: 1.3rem; }

.footer__brand p {
  font-size: 0.95rem;
  color: var(--text-muted);
  max-width: 26rem;
}

.footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.4rem;
}

.footer__social-link {
  display: inline-block;
  padding: 0.5rem 1rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-button);
  background: var(--surface);
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 600;
  transition: border-color var(--speed) var(--ease), color var(--speed) var(--ease);
}
.footer__social-link:hover {
  text-decoration: none;
  border-color: var(--crimson);
  color: var(--crimson-deep);
}

/* An icon rather than a word. Square, so Facebook and Instagram sit as a
   matched pair however different their shapes are, and wide enough to stay
   a comfortable tap target on a phone. */
.footer__social-link--icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
}

.social-icon { display: block; }

.footer__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.footer__col-title {
  margin-bottom: 1rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--crimson-deep);
}

.footer__col ul { display: flex; flex-direction: column; gap: 0.7rem; }

.footer__col a {
  color: var(--text-muted);
  font-size: 0.94rem;
}
.footer__col a:hover { color: var(--text); text-decoration: none; }

.footer__base {
  padding-block: 1.5rem;
  border-top: 1px solid var(--border);
}

.footer__base p {
  margin: 0;
  font-size: 0.83rem;
  color: var(--text-subtle);
}


/* ==========================================================================
   12. EVENT PAGE
   ========================================================================== */

/* -- Hero -- */
.event-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(26rem, 62vh, 38rem);
  margin-top: calc(-1 * var(--header-height));
  padding-top: clamp(7rem, 14vh, 9rem);
  padding-bottom: clamp(3rem, 6vw, 4.5rem);
  overflow: hidden;
  isolation: isolate;
  background: #0b0b20;
}

.event-hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.event-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

.event-hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(8, 8, 24, 0.7) 0%, rgba(8, 8, 24, 0.42) 35%,
                    rgba(8, 8, 24, 0.8) 88%, rgba(8, 8, 24, 0.86) 100%),
    linear-gradient(90deg, rgba(8, 8, 24, 0.8) 0%, rgba(8, 8, 24, 0.25) 65%);
}

.event-hero__inner { max-width: 52rem; }

.backlink {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.6rem;
  color: var(--on-media);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}
.backlink svg { width: 1rem; height: 1rem; transition: transform var(--speed) var(--ease); }
.backlink:hover { text-decoration: none; opacity: 0.85; }
.backlink:hover svg { transform: translateX(-4px); }

.event-hero__eyebrow {
  margin: 0 0 0.9rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--on-media);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
}

.event-hero__title {
  font-size: clamp(2.3rem, 6.4vw, 4.6rem);
  letter-spacing: -0.03em;
  color: var(--on-media);
  text-shadow: 0 2px 22px rgba(0, 0, 0, 0.45);
  text-wrap: balance;
}

.event-hero__support {
  margin: 0.9rem 0 0;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  color: var(--on-media);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}

.event-hero__status { margin-top: 1.3rem; }

.status-pill {
  display: inline-block;
  padding: 0.45rem 1rem;
  border-radius: var(--radius-button);
  background-image: var(--gradient-cta);
  color: #ffffff;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.status-pill--soldout {
  background-image: none;
  background-color: rgba(255, 255, 255, 0.12);
  border: 1.5px solid rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(6px);
}

.status-pill--soon { background-image: var(--gradient-cool); }

/* -- Date / time / venue strip -- */
.event-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0 clamp(1.5rem, 4vw, 3rem);
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.28);
}

.event-meta__item {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding-block: 0.5rem;
}

.event-meta__label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}

.event-meta__value {
  color: var(--on-media);
  font-size: 1rem;
  font-weight: 600;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
}

/* -- Booking panel: lifted so it overlaps the hero -- */
.event-booking {
  position: relative;
  z-index: 3;
  margin-top: clamp(-4.5rem, -6vw, -2.5rem);
}

.booking-panel {
  max-width: 44rem;
  padding: clamp(1.5rem, 3.5vw, 2.4rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}

.booking-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--gradient-brand);
}

.booking-panel__title {
  font-size: 1.3rem;
  margin-bottom: 1.35rem;
}

.booking-panel__note {
  margin: 1.35rem 0 0;
  font-size: 0.86rem;
  color: var(--text-subtle);
}

/* -- The vendor buttons themselves -- */
.cta-stack {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.cta-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-radius: var(--radius-button);
  font-family: inherit;
  text-align: left;
  text-decoration: none;
  transition: transform var(--speed) var(--ease),
              box-shadow var(--speed) var(--ease),
              background-color var(--speed) var(--ease),
              border-color var(--speed) var(--ease),
              color var(--speed) var(--ease);
}

.cta-button:hover { text-decoration: none; }

.cta-button__text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.cta-button__label {
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.3;
}

.cta-button__note {
  font-size: 0.84rem;
  font-weight: 400;
  line-height: 1.4;
}

.cta-button .btn__arrow { width: 1.15rem; height: 1.15rem; }

/* Primary — the main ticket link */
.cta-button--primary {
  color: #ffffff;
  background-image: var(--gradient-cta);
  background-size: 170% 100%;
  background-position: 0% 50%;
  border: 1.5px solid transparent;
  box-shadow: var(--shadow-cta);
  transition: background-position 0.5s var(--ease), transform var(--speed) var(--ease),
              box-shadow var(--speed) var(--ease);
}
.cta-button--primary .cta-button__note { color: rgba(255, 255, 255, 0.88); }
.cta-button--primary:hover,
.cta-button--primary:focus-visible {
  background-position: 100% 50%;
  transform: translateY(-2px);
  box-shadow: 0 16px 34px -14px rgba(228, 0, 78, 0.6);
}

/* Secondary — everything else */
.cta-button--secondary {
  color: var(--text);
  background: var(--surface);
  border: 1.5px solid var(--border-strong);
}
.cta-button--secondary .cta-button__note { color: var(--text-subtle); }
.cta-button--secondary:hover,
.cta-button--secondary:focus-visible {
  border-color: var(--crimson);
  color: var(--crimson-deep);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Sold out — muted, and deliberately not clickable */
.cta-button--soldout {
  color: var(--off-text);
  background: var(--off-bg);
  border: 1.5px solid var(--off-border);
  cursor: not-allowed;
}

.cta-button--soldout .cta-button__label {
  color: var(--text-subtle);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  text-decoration-color: var(--off-border);
}

.cta-button--soldout .cta-button__note { color: var(--off-text); }

.cta-button__flag {
  flex: 0 0 auto;
  padding: 0.35rem 0.8rem;
  border-radius: var(--radius-button);
  border: 1.5px solid var(--off-border);
  background: var(--surface);
  color: var(--text-subtle);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* -- Description and Good to know -- */
.event-body { padding-top: clamp(3rem, 6vw, 4.5rem); }

.event-body__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.event-tagline {
  font-size: clamp(1.2rem, 2.2vw, 1.55rem);
  font-weight: 600;
  line-height: 1.4;
  color: var(--text);
  margin-bottom: 1.4rem;
  text-wrap: pretty;
}

.event-prose p { font-size: 1.06rem; }

/* -- Questions and answers (the accordion) --
      Built on the browser's own <details> element, so the answers open and
      close, respond to the keyboard and can be found by find-on-page without
      any JavaScript at all. */

.faq {
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  background: var(--page-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  position: relative;
  overflow: hidden;
}

.faq::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gradient-brand);
}

.faq__title {
  font-size: 1.15rem;
  margin-bottom: 1.1rem;
}

.faq__list {
  display: flex;
  flex-direction: column;
}

.faq__item { border-top: 1px solid var(--border); }
.faq__item:first-child { border-top: 0; }

/* A line with no answer behind it — shown as a plain point */
.faq__item--plain {
  padding: 0.95rem 0;
  font-size: 0.95rem;
  color: var(--text-muted);
}

/* -- The question, which is the clickable part -- */
.faq__question {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.95rem 0;
  cursor: pointer;
  list-style: none;              /* removes the default triangle */
  color: var(--text);
  font-size: 0.97rem;
  font-weight: 700;
  line-height: 1.45;
  transition: color var(--speed) var(--ease);
}

/* Safari and Chrome use their own marker, which also has to go */
.faq__question::-webkit-details-marker { display: none; }
.faq__question::marker { content: ""; }

.faq__question:hover { color: var(--crimson-deep); }

.faq__question:focus-visible {
  outline: 3px solid var(--crimson);
  outline-offset: 2px;
}

.faq__text { min-width: 0; }

/* -- The + that turns into a − -- */
.faq__icon {
  position: relative;
  flex: 0 0 auto;
  width: 1.4rem;
  height: 1.4rem;
  margin-top: 0.05rem;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-button);
  transition: border-color var(--speed) var(--ease),
              background-color var(--speed) var(--ease);
}

.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform var(--speed) var(--ease), opacity var(--speed) var(--ease);
}

.faq__icon::before { width: 0.7rem; height: 2px; }                 /* the bar  */
.faq__icon::after  { width: 2px; height: 0.7rem; }                 /* the stem */

/* Open: the upright stroke disappears, leaving a minus */
.faq__details[open] .faq__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}

.faq__details[open] .faq__question { color: var(--crimson-deep); }

.faq__question:hover .faq__icon,
.faq__details[open] .faq__icon {
  border-color: var(--crimson);
  background: rgba(228, 0, 78, 0.06);
}

/* -- The answer -- */
.faq__answer {
  padding: 0 0 1.1rem;
  font-size: 0.93rem;
  line-height: 1.65;
  color: var(--text-muted);
}

.faq__answer p { margin: 0; }

/* A gentle slide as it opens. There is no "to" state and no fill mode on
   purpose: the answer's normal state is fully visible, so if the animation
   never runs the text is still there. */
.faq__details[open] .faq__answer {
  animation: faq-open 0.26s var(--ease);
}

@keyframes faq-open {
  from { opacity: 0; transform: translateY(-5px); }
}

@media (prefers-reduced-motion: reduce) {
  .faq__details[open] .faq__answer { animation: none; }
  .faq__icon, .faq__icon::before, .faq__icon::after { transition: none; }
}

/* -- Other events -- */
.other-events {
  padding-top: clamp(2.5rem, 5vw, 4rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

.mini-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: clamp(1rem, 2vw, 1.4rem);
}

.mini-tile {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  transition: transform var(--speed) var(--ease), border-color var(--speed) var(--ease),
              box-shadow var(--speed) var(--ease);
}
.mini-tile:hover {
  text-decoration: none;
  transform: translateY(-4px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}

.mini-tile__media {
  flex: 0 0 auto;
  width: 4.25rem;
  height: 4.25rem;
  overflow: hidden;
  background: var(--surface-alt);
}
.mini-tile__media img { width: 100%; height: 100%; object-fit: cover; }

.mini-tile__body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.mini-tile__date {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--crimson-deep);
}

.mini-tile__title {
  color: var(--text);
  font-size: 1.03rem;
  font-weight: 700;
  line-height: 1.25;
}

.mini-tile__flag {
  margin-top: 0.25rem;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

/* -- Event not found -- */
.not-found {
  padding-top: clamp(4rem, 10vh, 7rem);
  text-align: center;
}
.not-found .section-intro { margin-inline: auto; }

.not-found__list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 2rem auto;
  max-width: 26rem;
  text-align: left;
}
.not-found__list a {
  display: block;
  padding: 0.8rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  color: var(--text);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}
.not-found__list a:hover {
  text-decoration: none;
  border-color: var(--crimson);
  color: var(--crimson-deep);
}


/* ==========================================================================
   12b. HOLDING PAGES
   ==========================================================================
   The "coming soon" and "under maintenance" pages. One full screen, centred,
   over a photograph — deliberately different from the site itself so it is
   obvious at a glance that this is not the real thing.
   ========================================================================== */

.holding {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;          /* allows for the address bar on a phone */
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: clamp(3rem, 10vh, 6rem);
  overflow: hidden;
  isolation: isolate;
  background: #0b0b20;
  text-align: center;
}

.holding__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.holding__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.holding__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(8, 8, 24, 0.78) 0%, rgba(8, 8, 24, 0.66) 45%,
                    rgba(8, 8, 24, 0.85) 100%);
}

.holding__inner {
  max-width: 44rem;
}

.holding__logo {
  height: clamp(60px, 11vw, 104px);
  width: auto;
  margin: 0 auto;
  /* The logo artwork is dark navy type, so it is reversed to white here. */
  filter: brightness(0) invert(1) drop-shadow(0 2px 14px rgba(0, 0, 0, 0.5));
}

.holding__rule {
  width: 5rem;
  margin: clamp(1.5rem, 4vw, 2.25rem) auto;
}

.holding__heading {
  font-size: clamp(2rem, 5.5vw, 3.4rem);
  letter-spacing: -0.03em;
  color: var(--on-media);
  text-shadow: 0 2px 22px rgba(0, 0, 0, 0.45);
  text-wrap: balance;
}

.holding__message {
  margin: 1.1rem auto 0;
  max-width: 34rem;
  font-size: clamp(1.02rem, 1.8vw, 1.2rem);
  line-height: 1.65;
  color: var(--on-media);
  opacity: 0.92;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.5);
  text-wrap: pretty;
}

/* The sign-up form, when the coming soon page is set to show one */
.holding__form { margin-top: clamp(2rem, 5vw, 3rem); }

.holding__form .section {
  padding: 0;
  background: none;
  border: 0;
}

.holding__form .wrap { padding-inline: 0; }

.holding__form .form-card {
  text-align: left;
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.8);
}

/* Hold the form's space from the very first paint.

   The form itself comes from Formstack, so however early we start fetching it
   there is always a moment before it arrives. Reserving its height means the
   social links and small print below it do not jump down when it lands — the
   page looks finished from the start. This is a floor, not a fixed height, so
   a taller form still grows past it. */
.holding__form .fs-embed { min-height: 20rem; }

.holding__form .section-title {
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
  color: var(--on-media);
}

.holding__form .section-intro { color: rgba(255, 255, 255, 0.85); }

/* -- Social links -- */
.holding__social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
}

.holding__social-link {
  display: inline-block;
  padding: 0.5rem 1.1rem;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--radius-button);
  color: var(--on-media);
  font-size: 0.88rem;
  font-weight: 600;
  transition: background-color var(--speed) var(--ease),
              border-color var(--speed) var(--ease), color var(--speed) var(--ease);
}

.holding__social-link:hover {
  text-decoration: none;
  background: #ffffff;
  border-color: #ffffff;
  color: var(--text);
}

.holding__social-link--icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
}

.holding__small {
  margin: clamp(2rem, 5vw, 3rem) 0 0;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
}


/* ==========================================================================
   13. REVEAL ANIMATION
   ==========================================================================
   Content starts VISIBLE. The hidden-then-fade-in state only applies once
   JavaScript has added .js-reveal to <html>, which it does only when it knows
   it can reliably reveal things again. If anything goes wrong — no
   IntersectionObserver, a script blocked, reduced motion — the page is still
   perfectly readable rather than a screen of invisible text.
   ========================================================================== */

.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.js-reveal [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js-reveal [data-reveal] { opacity: 1; transform: none; transition: none; }
  .tile, .tile__media img, .info-card, .mini-tile, .btn, .cta-button { transition: none; }
  .hero__video { transition: none; }
}


/* ==========================================================================
   14. RESPONSIVE
   ========================================================================== */

@media (max-width: 62rem) {
  .event-body__grid { grid-template-columns: 1fr; }
  .footer__inner { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 52rem) {
  .nav-toggle { display: block; }

  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0 var(--page-gutter);
    max-height: 0;
    overflow: hidden;
    background: var(--page);
    border-bottom: 1px solid transparent;
    transition: max-height 0.4s var(--ease), padding 0.4s var(--ease),
                border-color 0.4s var(--ease);
  }

  .header--nav-open .nav {
    max-height: 34rem;
    padding-block: 1rem 1.5rem;
    border-bottom-color: var(--border);
    box-shadow: var(--shadow-md);
  }

  /* Inside the open panel the background is white, so the links must be dark
     even while the header itself is sitting over the hero. */
  .header--over-hero:not(.header--stuck) .nav__link {
    color: var(--text);
    text-shadow: none;
  }

  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav__list li { border-bottom: 1px solid var(--border); }

  .nav__link {
    display: block;
    padding-block: 1rem;
    font-size: 1.05rem;
  }
  .nav__link::after { display: none; }

  .nav__cta { margin-top: 1.25rem; width: 100%; }

  .event-meta { gap: 0.25rem 2rem; }

  .cta-button { align-items: flex-start; }
}

@media (max-width: 34rem) {
  .hero__actions .btn { width: 100%; }

  /* Two columns on a phone, and the feature photo goes full width */
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery__item--feature { grid-column: span 2; grid-row: span 1; aspect-ratio: 3 / 2; }

  /* The arrow is decorative, and on a narrow screen the space is better spent
     on the label and its note. */
  .cta-button .btn__arrow { display: none; }

  .cta-button__flag { align-self: flex-start; }

  .event-booking { margin-top: -1.5rem; }

  .mini-tile__media { width: 3.5rem; height: 3.5rem; }
}

/* ==========================================================================
   INFORMATION PAGES — /getting-here, /bag-policy and the rest
   ==========================================================================
   The header is the event page's banner (.event-hero), so the two kinds of
   page look like one site. Below it, each section shows whichever of its
   parts the editor filled in — see assets/js/page.js.
   ========================================================================== */

/* No picture in the header: the banner's own dark background, a little
   shorter, so a plain page does not open with a large empty block. */
.page-hero--plain {
  min-height: clamp(20rem, 46vh, 28rem);
  background: var(--gradient-brand, #0b0b20);
}

.page-hero__intro {
  max-width: 44rem;
  font-size: clamp(1.05rem, 1.7vw, 1.25rem);
  line-height: 1.55;
}

.page-body { padding-block: clamp(2.5rem, 6vw, 4.5rem); }

.page-section + .page-section { margin-top: clamp(2.75rem, 6vw, 4.5rem); }

.page-section__heading { margin-bottom: 1.1rem; }

.page-section__words { max-width: 46rem; }
.page-section__prose p:last-child { margin-bottom: 0; }

.page-section__faq { margin-top: 1.4rem; }
.page-section__heading + .page-section__faq { margin-top: 0; }

.page-section__actions { margin-top: 1.6rem; }

.page-section__media {
  margin: 0;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--page-alt);
}
.page-section__media img {
  display: block;
  width: 100%;
  height: auto;
}

/* Above or below the words */
.page-section__words + .page-section__media,
.page-section__media + .page-section__words { margin-top: clamp(1.5rem, 3vw, 2.25rem); }

/* Beside the words */
.page-section__split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 5vw, 4rem);
  align-items: center;
}
.page-section__split .page-section__words { max-width: none; }
.page-section__split--image-left .page-section__media { order: -1; }

@media (max-width: 48rem) {
  .page-section__split { grid-template-columns: minmax(0, 1fr); }
  /* On a phone the picture always comes first, whichever side it is on. */
  .page-section__split .page-section__media { order: -1; }
}


/* ==========================================================================
   THE THANK-YOU PAGE — where forms send people afterwards
   ==========================================================================
   Drawn with the holding page's styles above (.holding and friends), so it
   matches the Coming soon page. Only the button is its own. */

.thanks .holding__logo { display: block; }
.thanks__actions { margin-top: clamp(1.75rem, 4vw, 2.5rem); }