/* engine:tokens.css */
/* Design tokens: the default override surface. A site changes its whole look
   by redefining these in overrides/tokens.css (or by starting from a preset
   in engine/theme/presets). Module CSS only ever consumes tokens, so a
   handful of lines is enough to make two sites look nothing alike. */
:root {
  color-scheme: light;

  /* Color */
  --color-bg: #fcfcfd;
  --color-surface: #f2f4f3;
  --color-text: #17191a;
  --color-muted: #5b6362;
  --color-border: #dde1df;
  --color-accent: #14655a;
  --color-accent-contrast: #ffffff;
  --color-success: #2f7a45;
  --color-error: #b3372f;

  /* Type. System stacks by default: no font download, no FOUT, no layout
     shift. --font-display is the personality knob; sites override it. */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: var(--font-sans);
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: clamp(1.1rem, 1rem + 0.5vw, 1.3rem);
  --text-xl: clamp(1.25rem, 1.1rem + 0.8vw, 1.6rem);
  --text-2xl: clamp(1.5rem, 1.25rem + 1.4vw, 2.1rem);
  --text-3xl: clamp(2rem, 1.5rem + 2.6vw, 3.2rem);

  /* Space and shape */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;
  --radius: 0.5rem;
  --radius-lg: 1rem;
  --container-max: 68rem;
  --section-pad: clamp(3rem, 6vw, 5.5rem);

  /* Depth */
  --shadow-1: 0 1px 2px rgb(10 20 20 / 0.06);
  --shadow-2: 0 14px 34px rgb(10 30 30 / 0.12);
}


/* engine:base.css */
/* Base layer: reset + primitives. Kept small on purpose; visual identity
   comes from tokens and modules, not from here. */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--color-accent); }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
:target { scroll-margin-top: 5rem; }

.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

/* Shared section heading with the engine's small signature: a short accent
   rule under the heading that draws in when the section reveals. */
.section-heading {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.section-heading::after {
  content: "";
  display: block;
  width: 2.75rem;
  height: 3px;
  margin-top: var(--space-2);
  border-radius: 2px;
  background: var(--color-accent);
  transform-origin: left;
}

/* Scroll reveal. Hidden states only apply when the runtime added the .js
   class, so a JavaScript-free visit still sees every section. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.js [data-reveal].is-revealed { opacity: 1; transform: none; }
.js [data-reveal] .section-heading::after {
  transform: scaleX(0);
  transition: transform 0.6s ease 0.15s;
}
.js [data-reveal].is-revealed .section-heading::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .js [data-reveal] .section-heading::after { transform: none; transition: none; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}


/* module:header */
.m-header {
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
  z-index: 40;
}
.m-header--sticky { position: sticky; top: 0; }
.m-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 3.75rem;
}
.m-header__brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  color: var(--color-text);
  text-decoration: none;
}
.m-header__nav { display: flex; gap: var(--space-4); }
.m-header__link {
  color: var(--color-text);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 500;
  padding: 0.35em 0;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.m-header__link:hover { color: var(--color-accent); border-bottom-color: var(--color-accent); }
.m-header__burger {
  display: none;
  position: relative;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: transparent;
  cursor: pointer;
}
.m-header__burger-line,
.m-header__burger-line::before,
.m-header__burger-line::after {
  content: "";
  position: absolute;
  left: 0.6rem;
  right: 0.6rem;
  height: 2px;
  border-radius: 1px;
  background: var(--color-text);
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.m-header__burger-line { top: calc(50% - 1px); }
.m-header__burger-line::before { top: -7px; }
.m-header__burger-line::after { top: 7px; }
.m-header.is-open .m-header__burger-line { background: transparent; }
.m-header.is-open .m-header__burger-line::before { transform: translateY(7px) rotate(45deg); }
.m-header.is-open .m-header__burger-line::after { transform: translateY(-7px) rotate(-45deg); }

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

@media (max-width: 47.99rem) {
  .m-header__burger { display: inline-flex; }
  .m-header__nav {
    display: none;
    position: absolute;
    inset: 100% 0 auto 0;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-2);
  }
  .m-header { position: relative; }
  .m-header--sticky { position: sticky; }
  .m-header.is-open .m-header__nav { display: flex; }
}

.m-header__logo { height: 2.75rem; width: auto; }


/* module:marquee */
.m-marquee {
  overflow: hidden;
  background: var(--color-text);
}

.m-marquee__track {
  display: flex;
  width: max-content;
  animation: m-marquee-scroll var(--speed, 28s) linear infinite;
}

.m-marquee__list {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0.6rem 0;
  white-space: nowrap;
}

.m-marquee__list li {
  padding-inline: 0.75rem;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 0.04em;
  font-size: 0.85rem;
  color: var(--color-bg);
}

.m-marquee__sep {
  font-size: 0.9rem;
}

@keyframes m-marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .m-marquee__track { animation: none; }
  .m-marquee__list:last-of-type { display: none; }
}


/* module:hero */
.m-hero { background: var(--color-surface); overflow: hidden; }
.m-hero__inner {
  display: grid;
  gap: var(--space-5);
  align-items: center;
  padding-block: var(--section-pad);
}
.m-hero--split .m-hero__inner { grid-template-columns: 1fr; }
@media (min-width: 60rem) {
  .m-hero--split .m-hero__inner { grid-template-columns: 1.05fr 1fr; }
}
.m-hero__heading {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-3);
}
.m-hero__sub {
  font-size: var(--text-lg);
  color: var(--color-muted);
  max-width: 40ch;
  margin-bottom: var(--space-4);
}
.m-hero__cta {
  display: inline-block;
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  padding: 0.8em 1.5em;
  border-radius: var(--radius);
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--shadow-1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.m-hero__cta:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.m-hero__img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
}


/* module:countdown */
.m-countdown {
  background: var(--color-accent);
  color: var(--color-accent-contrast);
}

.m-countdown__inner {
  padding-block: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.6rem 0.9rem;
  text-align: center;
}

.m-countdown__disco {
  font-size: 1.1rem;
}

.m-countdown__text {
  margin: 0;
  font-weight: 700;
}

.m-countdown__fallback,
.m-countdown__live {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.m-countdown__label {
  font-weight: 500;
  margin-left: 0.4em;
  opacity: 0.9;
}

.m-countdown__cta {
  color: inherit;
  font-weight: 800;
  text-decoration: underline;
  margin-left: 0.5rem;
  white-space: nowrap;
}


/* module:events-list */
.m-events-list {
  padding-block: var(--section-pad);
}

.m-events-list__intro {
  max-width: 60ch;
  margin: 0.75rem 0 2rem;
  color: var(--color-muted);
}

.m-events-list__grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: 2rem;
}

@media (max-width: 900px) {
  .m-events-list__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .m-events-list__grid { grid-template-columns: 1fr; }
}

.m-events-list__card {
  display: block;
  text-decoration: none;
  color: inherit;
  transition-delay: calc(var(--i) * 70ms);
}

/* Poster-wall tilt: cards read like flyers pinned to a wall. The rotation and
   hover lift live on this inner wrapper, kept separate from the outer
   [data-reveal] element so the engine's own reveal transform never collides
   with this one on the same property. */
.m-events-list__tilt {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  transform: rotate(calc((var(--i, 0) % 2 * 2 - 1) * 1.4deg));
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  position: relative;
  z-index: 0;
}

/* Colour card peeking out from behind the whole tile, same graphic idea as
   the placeholder art and the gallery/locations photo frames, so a real
   photo swap keeps the same personality. */
.m-events-list__tilt::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: calc(var(--radius-lg) + 4px);
  background: var(--olive);
  transform: rotate(calc((var(--i, 0) % 2 * 2 - 1) * -3deg));
  z-index: -1;
}

.m-events-list__card:nth-child(3n+2) .m-events-list__tilt::before { background: var(--lilac); }
.m-events-list__card:nth-child(3n) .m-events-list__tilt::before { background: var(--color-accent); }

.m-events-list__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  display: block;
}

.m-events-list__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.m-events-list__badge {
  position: absolute;
  top: 0.9rem;
  left: 0.9rem;
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.7rem;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  box-shadow: var(--shadow-1);
}

.m-events-list__badge--past {
  background: var(--olive, var(--color-muted));
}

.m-events-list__body {
  padding: 1.25rem 1.4rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.m-events-list__date {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-accent);
}

.m-events-list__title {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: 1.25rem;
  line-height: 1.1;
}

.m-events-list__location {
  font-size: 0.9rem;
  color: var(--color-muted);
}

.m-events-list__teaser {
  font-size: 0.9rem;
  margin-top: 0.25rem;
}

/* Hover flourish: only for devices with a real pointer, and only when motion is welcome. */
@media (pointer: fine) {
  .m-events-list__card:hover .m-events-list__tilt {
    transform: rotate(0deg) translateY(-6px);
    box-shadow: var(--shadow-2);
  }
}

@supports (background: color-mix(in srgb, red, blue)) {
  @media (pointer: fine) {
    .m-events-list__tilt::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: var(--radius-lg);
      background: linear-gradient(120deg, transparent 40%, color-mix(in srgb, var(--color-accent) 25%, transparent) 50%, transparent 60%);
      opacity: 0;
      transition: opacity 0.35s ease;
      pointer-events: none;
    }
    .m-events-list__card:hover .m-events-list__tilt::after {
      opacity: 1;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .m-events-list__tilt,
  .m-events-list__tilt::before {
    transform: none;
  }
}


/* module:gallery */
.m-gallery {
  padding-block: var(--section-pad);
}

.m-gallery__grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), 1fr);
  gap: clamp(1.75rem, 3vw, 2.75rem);
  margin-top: 2rem;
}

@media (max-width: 900px) {
  .m-gallery__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .m-gallery__grid { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
}

.m-gallery__item {
  display: block;
  position: relative;
  cursor: pointer;
}

/* Photo-frame treatment: a rotated colour card peeks out from behind every
   thumbnail, and a white polaroid-style border sits around the photo itself.
   This is the same graphic idea as the placeholder art (bold colour block +
   label), so the personality survives once real photos replace the SVGs. */
.m-gallery__item::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  background: var(--color-accent);
  transform: rotate(calc((var(--i, 0) % 2 * 2 - 1) * 4deg));
  z-index: 0;
}

.m-gallery__item:nth-child(3n+2)::before { background: var(--olive); }
.m-gallery__item:nth-child(3n)::before { background: var(--lilac); }

.m-gallery__frame {
  position: relative;
  z-index: 1;
  display: block;
  background: var(--color-surface);
  padding: 0.5rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  transform: rotate(calc((var(--i, 0) % 2 * 2 - 1) * -1.5deg));
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.m-gallery__thumb {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: calc(var(--radius) - 4px);
}

@media (pointer: fine) {
  .m-gallery__item:hover .m-gallery__frame {
    transform: rotate(0deg) translateY(-4px);
    box-shadow: var(--shadow-2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .m-gallery__item::before,
  .m-gallery__frame {
    transform: none;
  }
}

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

.m-gallery__dialog {
  border: none;
  padding: 0;
  margin: auto;
  max-width: min(92vw, 1100px);
  max-height: 88vh;
  width: fit-content;
  background: transparent;
  border-radius: var(--radius-lg);
  overflow: visible;
}

.m-gallery__dialog::backdrop {
  background: rgba(43, 36, 32, 0.86);
}

/* Modern open/close transition, ignored entirely by browsers that don't
   understand @starting-style, which is the graceful fallback. */
.m-gallery__dialog {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.28s ease, transform 0.28s ease, overlay 0.28s ease allow-discrete, display 0.28s ease allow-discrete;
}
.m-gallery__dialog::backdrop {
  transition: opacity 0.28s ease, overlay 0.28s ease allow-discrete, display 0.28s ease allow-discrete;
  opacity: 1;
}
@starting-style {
  .m-gallery__dialog[open] { opacity: 0; transform: scale(0.96); }
  .m-gallery__dialog[open]::backdrop { opacity: 0; }
}
.m-gallery__dialog:not([open]) {
  opacity: 0;
  transform: scale(0.96);
  pointer-events: none;
}

.m-gallery__figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  max-height: 88vh;
}

.m-gallery__full {
  display: block;
  max-width: min(92vw, 1100px);
  max-height: 74vh;
  width: auto;
  height: auto;
  object-fit: contain;
  margin: 0 auto;
  background: var(--color-text);
}

.m-gallery__caption {
  padding: 0.9rem 1.25rem;
  font-size: 0.9rem;
  color: var(--color-muted);
}

.m-gallery__close,
.m-gallery__prev,
.m-gallery__next {
  position: fixed;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  border: none;
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-2);
  cursor: pointer;
}

.m-gallery__close { top: 1.25rem; right: 1.25rem; }
.m-gallery__prev { left: 1.25rem; top: 50%; transform: translateY(-50%); }
.m-gallery__next { right: 1.25rem; top: 50%; transform: translateY(-50%); }

@media (pointer: fine) {
  .m-gallery__close:hover,
  .m-gallery__prev:hover,
  .m-gallery__next:hover {
    background: var(--color-accent);
    color: var(--color-accent-contrast);
  }
}

@media (max-width: 640px) {
  .m-gallery__prev, .m-gallery__next { width: 2.25rem; height: 2.25rem; }
}


/* module:text-image */
.m-textimage { padding-block: var(--section-pad); }
.m-textimage__inner {
  display: grid;
  gap: var(--space-5);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 60rem) {
  .m-textimage__inner { grid-template-columns: 1.1fr 1fr; }
  .m-textimage--left .m-textimage__inner > div:first-child { order: 2; }
}
.m-textimage__body { color: var(--color-muted); margin-top: var(--space-3); max-width: 52ch; }
.m-textimage__img { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-1); }


/* module:reviews */
.m-reviews { padding-block: var(--section-pad); }
.m-reviews__summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  color: var(--color-muted);
}
.m-reviews__stars { color: var(--color-accent); letter-spacing: 0.1em; }
.m-reviews__grid {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-5);
  grid-template-columns: 1fr;
}
@media (min-width: 60rem) {
  .m-reviews__grid { grid-template-columns: repeat(3, 1fr); }
}
.m-reviews__card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: grid;
  gap: var(--space-2);
  align-content: start;
}
.m-reviews__quote { font-size: var(--text-base); line-height: 1.6; }
.m-reviews__quote::before { content: "\201C"; }
.m-reviews__quote::after { content: "\201D"; }
.m-reviews__author { color: var(--color-muted); font-size: var(--text-sm); }
.m-reviews__author::before { content: "— "; }


/* module:cta-banner */
.m-cta { background: var(--color-accent); color: var(--color-accent-contrast); }
.m-cta__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-5);
}
.m-cta__heading { font-family: var(--font-display); font-size: var(--text-2xl); }
.m-cta__text { opacity: 0.85; margin-top: var(--space-1); }
.m-cta__button {
  background: var(--color-accent-contrast);
  color: var(--color-accent);
  padding: 0.8em 1.5em;
  border-radius: var(--radius);
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.2s ease;
}
.m-cta__button:hover { transform: translateY(-2px); }


/* module:faq */
.m-faq { padding-block: var(--section-pad); }
.m-faq__inner { max-width: 46rem; }
.m-faq__intro { color: var(--color-muted); margin-top: var(--space-3); }
.m-faq__list { margin-top: var(--space-5); border-top: 1px solid var(--color-border); }
.m-faq__item { border-bottom: 1px solid var(--color-border); }
.m-faq__q {
  position: relative;
  cursor: pointer;
  list-style: none;
  padding: var(--space-3) 2.5rem var(--space-3) 0;
  font-weight: 600;
}
.m-faq__q::-webkit-details-marker { display: none; }
.m-faq__q::after {
  content: "+";
  position: absolute;
  right: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  color: var(--color-accent);
  transition: transform 0.25s ease;
}
.m-faq__item[open] .m-faq__q::after { transform: translateY(-50%) rotate(45deg); }
.m-faq__a { padding-bottom: var(--space-3); color: var(--color-muted); max-width: 60ch; }


/* module:contact-form */
.m-contact-form {
  padding-block: var(--section-pad);
}

.m-contact-form__inner {
  max-width: 720px;
}

.m-contact-form__heading {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin: 0 0 0.5rem;
}

.m-contact-form__intro {
  color: var(--color-muted);
  margin: 0 0 1.75rem;
}

.m-contact-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
  margin-bottom: 1.25rem;
}

.m-contact-form__field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.m-contact-form__field--wide {
  grid-column: 1 / -1;
}

.m-contact-form__field label {
  font-weight: 700;
  font-size: 0.85rem;
}

.m-contact-form__req {
  color: var(--color-accent);
}

/* The actual fix for "invisible until clicked": a solid surface background
   and a real, always-visible border, on every field, in every context. */
.m-contact-form__field input,
.m-contact-form__field textarea {
  width: 100%;
  box-sizing: border-box;
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.8rem 1rem;
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--color-text);
}

.m-contact-form__field input:focus-visible,
.m-contact-form__field textarea:focus-visible {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent);
}

@supports (box-shadow: 0 0 0 3px color-mix(in srgb, red 25%, transparent)) {
  .m-contact-form__field input:focus-visible,
  .m-contact-form__field textarea:focus-visible {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 25%, transparent);
  }
}

.m-contact-form__field textarea {
  resize: vertical;
  min-height: 6rem;
}

/* Honeypot: present in the DOM for bots, invisible and unreachable for
   people (off-screen, not display:none, and out of the tab order). */
.m-contact-form__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.m-contact-form__submit {
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  border: none;
  border-radius: 999px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.85rem 1.8rem;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.m-contact-form__submit:disabled {
  opacity: 0.6;
  cursor: wait;
}

@media (pointer: fine) {
  .m-contact-form__submit:hover:not(:disabled) {
    transform: translateY(-2px);
  }
}

.m-contact-form__status {
  margin-top: 1rem;
  font-weight: 700;
}

.m-contact-form__status--success { color: var(--olive); }
.m-contact-form__status--error { color: var(--color-accent); }

@media (max-width: 560px) {
  .m-contact-form__grid { grid-template-columns: 1fr; }
}

/* ---------- the "nieuwsbrief" instance: a festive band, not a plain form ---------- */

#nieuwsbrief.m-contact-form {
  background: var(--color-text);
  border-radius: var(--radius-lg);
  margin-inline: auto;
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
}

#nieuwsbrief .m-contact-form__heading,
#nieuwsbrief .m-contact-form__intro {
  color: var(--color-bg);
}

#nieuwsbrief .m-contact-form__intro { opacity: 0.85; }

#nieuwsbrief .m-contact-form__grid {
  grid-template-columns: 1fr auto;
  align-items: end;
}

#nieuwsbrief .m-contact-form__field input {
  border-radius: 999px;
  border: 2px solid transparent;
}

#nieuwsbrief .m-contact-form__submit {
  height: fit-content;
}

@media (max-width: 560px) {
  #nieuwsbrief .m-contact-form__grid { grid-template-columns: 1fr; }
}


/* module:footer */
.m-footer {
  position: relative;
  z-index: 0;
  overflow: hidden;
  background: var(--color-text);
  color: var(--color-bg);
  margin-top: var(--section-pad);
}

.m-footer::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -30% auto auto -8%;
  width: min(45vw, 420px);
  height: min(45vw, 420px);
  background: radial-gradient(circle, var(--lilac) 0%, transparent 65%);
  opacity: 0.35;
  filter: blur(48px);
  pointer-events: none;
}

.m-footer__grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  padding-block: clamp(2.5rem, 5vw, 4rem);
}

@media (max-width: 700px) {
  .m-footer__grid { grid-template-columns: 1fr; }
}

.m-footer__brand p {
  max-width: 42ch;
  line-height: 1.6;
  opacity: 0.9;
}

.m-footer__socials {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.m-footer__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  background: rgba(251, 243, 231, 0.12);
  color: var(--color-bg);
  transition: background 0.2s ease, transform 0.2s ease;
}

@supports (background: color-mix(in srgb, red, blue)) {
  .m-footer__social {
    background: color-mix(in srgb, var(--color-bg) 12%, transparent);
  }
}

@media (pointer: fine) {
  .m-footer__social:hover {
    background: var(--color-accent);
    transform: translateY(-2px);
  }
}

.m-footer__contact {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  align-items: flex-start;
}

.m-footer__contact-item {
  color: inherit;
  text-decoration: none;
  opacity: 0.9;
}

.m-footer__contact-item:hover {
  text-decoration: underline;
}

.m-footer__hours {
  list-style: none;
  margin: 0;
  padding: 0;
  opacity: 0.9;
}

.m-footer__bottom {
  border-top: 1px solid rgba(251, 243, 231, 0.15);
  padding-block: 1.25rem;
  font-size: 0.8rem;
  opacity: 0.7;
}

@supports (background: color-mix(in srgb, red, blue)) {
  .m-footer__bottom {
    border-top-color: color-mix(in srgb, var(--color-bg) 15%, transparent);
  }
}


/* module:locations */
.m-locations {
  padding-block: var(--section-pad);
}

.m-locations__intro {
  max-width: 60ch;
  margin: 0.75rem 0 2rem;
  color: var(--color-muted);
}

.m-locations__grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 2), 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: 2rem;
}

@media (max-width: 700px) {
  .m-locations__grid { grid-template-columns: 1fr; }
}

.m-locations__card {
  display: grid;
  grid-template-columns: 40% 1fr;
  gap: 1.25rem;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

@media (pointer: fine) {
  .m-locations__card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-2);
  }
}

@media (max-width: 560px) {
  .m-locations__card { grid-template-columns: 1fr; }
}

.m-locations__media {
  position: relative;
  min-height: 100%;
  padding: 0.6rem;
  background: var(--lilac);
  display: flex;
}

.m-locations__card:nth-child(2) .m-locations__media { background: var(--olive); }
.m-locations__card:nth-child(3) .m-locations__media { background: var(--color-accent); }

.m-locations__img {
  width: 100%;
  height: 100%;
  min-height: 180px;
  object-fit: cover;
  display: block;
  border-radius: calc(var(--radius) - 4px);
}

.m-locations__badge {
  position: absolute;
  top: 0.9rem;
  left: 0.9rem;
  background: var(--olive, var(--color-accent));
  color: var(--color-accent-contrast);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.7rem;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
}

.m-locations__body {
  padding: 1.5rem 1.5rem 1.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

@media (max-width: 560px) {
  .m-locations__body { padding: 0 1.25rem 1.5rem; }
}

.m-locations__name {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 800;
  font-size: 1.3rem;
  margin: 0;
}

.m-locations__city {
  color: var(--color-accent);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 0 0 0.5rem;
}

.m-locations__body p {
  margin: 0 0 0.5rem;
  line-height: 1.5;
}

.m-locations__link {
  margin-top: 0.25rem;
  color: var(--color-accent);
  font-weight: 700;
  text-decoration: underline;
  align-self: start;
}


/* module:event-details */
.m-event-details {
  padding-block: var(--section-pad);
}

.m-event-details__grid {
  display: grid;
  grid-template-columns: minmax(240px, 320px) 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

@media (max-width: 800px) {
  .m-event-details__grid {
    grid-template-columns: 1fr;
  }
}

.m-event-details__facts {
  background: var(--color-surface);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  position: sticky;
  top: 1.5rem;
}

@media (max-width: 800px) {
  .m-event-details__facts { position: static; }
}

.m-event-details__facts dl {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  margin: 0;
}

.m-event-details__facts dt {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-accent);
  margin-bottom: 0.15rem;
}

.m-event-details__facts dd {
  margin: 0;
  font-weight: 600;
  line-height: 1.35;
}

.m-event-details__pastnote {
  margin-top: 1.25rem;
  font-size: 0.85rem;
  color: var(--color-muted);
  font-style: italic;
}

.m-event-details__cta {
  display: inline-block;
  margin-top: 1.5rem;
  padding: 0.7rem 1.3rem;
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.85rem;
  border-radius: 999px;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

@media (pointer: fine) {
  .m-event-details__cta:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-1);
  }
}

.m-event-details__copy {
  max-width: 68ch;
}

.m-event-details__copy p {
  margin: 0 0 1.1rem;
  line-height: 1.6;
}

.m-event-details__subheading {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: -0.01em;
  font-size: 1.3rem;
  margin: 2rem 0 1rem;
}

.m-event-details__vendor {
  margin-top: 2rem;
  padding: 1.5rem;
  border-radius: var(--radius);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
}

@supports (background: color-mix(in srgb, red, blue)) {
  .m-event-details__vendor {
    background: color-mix(in srgb, var(--lilac, var(--color-accent)) 18%, var(--color-bg));
  }
}

.m-event-details__vendor-eyebrow {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-accent);
  margin: 0 0 0.3rem;
}

.m-event-details__vendor-name {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 1.1rem;
  margin: 0 0 0.5rem;
}

.m-event-details__vendor-handle {
  font-family: var(--font-sans);
  text-transform: none;
  font-weight: 500;
  color: var(--color-muted);
  font-size: 0.9rem;
}

.m-event-details__vendor-desc {
  margin: 0 0 0.75rem !important;
}

.m-event-details__vendor-link {
  color: var(--color-accent);
  font-weight: 700;
  text-decoration: underline;
}


/* module:map */
.m-map { padding-block: var(--section-pad); }
.m-map__frame {
  margin-top: var(--space-4);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-1);
}
.m-map__frame iframe { display: block; border: 0; }


/* module:location-details */
.m-location-details {
  padding-block: var(--section-pad);
}

.m-location-details__grid {
  display: grid;
  grid-template-columns: minmax(240px, 320px) 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

@media (max-width: 800px) {
  .m-location-details__grid { grid-template-columns: 1fr; }
}

.m-location-details__facts {
  background: var(--color-surface);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.m-location-details__facts dl {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  margin: 0;
}

.m-location-details__facts dt {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-accent);
  margin-bottom: 0.15rem;
}

.m-location-details__facts dd {
  margin: 0;
  font-weight: 600;
  line-height: 1.35;
}

.m-location-details__maps,
.m-location-details__agenda {
  display: inline-block;
  text-align: center;
  padding: 0.7rem 1.2rem;
  border-radius: 999px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.82rem;
  text-decoration: none;
}

.m-location-details__maps {
  background: var(--color-accent);
  color: var(--color-accent-contrast);
}

.m-location-details__agenda {
  background: transparent;
  border: 2px solid var(--color-border);
  color: var(--color-text);
}

.m-location-details__copy {
  max-width: 68ch;
}

.m-location-details__copy p {
  margin: 0 0 1.1rem;
  line-height: 1.6;
}


/* site:tokens.css */
:root {
  /* Core engine tokens, tuned to the brand: warm raspberry-red, mustard-olive,
     cream instead of white. Directional per the build plan, easy to nudge. */
  --color-bg: #fbf3e7;
  --color-surface: #ffffff;
  --color-text: #2b2420;
  --color-muted: #7a6e5d;
  --color-border: #e4d9c7;
  --color-accent: #e5546c;
  --color-accent-contrast: #ffffff;

  --radius: 14px;
  --radius-lg: 28px;
  --section-pad: clamp(3rem, 6vw, 6rem);
  --container-max: 1180px;

  --shadow-1: 0 2px 10px rgba(43, 36, 32, 0.08);
  --shadow-2: 0 18px 40px rgba(43, 36, 32, 0.16);

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Arial Black", Impact, "Helvetica Neue", Arial, sans-serif;

  /* Site-specific extras, used across the custom modules and site.css. */
  --olive: #8b7a1c;
  --lilac: #b79fd1;
  --sky: #bfe4ee;
  --disco: #f4c548;
}


/* site:site.css */
/*
 * Site-wide restyle for Treasure Markt.
 *
 * NOTE for whoever wires this into the real engine repo: the selectors below
 * for the REUSED built-in modules (header, hero, text-image, reviews,
 * cta-banner, faq, map) are written against the class-naming convention the
 * manual documents (`m-<module>`, `m-<module>__part`), not against the
 * actual module.js source, which wasn't available while this was built.
 * They should be correct, but do a quick visual pass after the first real
 * build and adjust any selector that doesn't take. `gallery` and
 * `contact-form` are no longer in this category: both are shadowed by
 * site-local modules now (see modules/gallery, modules/contact-form), styled
 * entirely in their own module.css, no guessing involved.
 */

/* ---------- Page-wide base ---------- */

body {
  background-color: var(--color-bg);
  background-image:
    radial-gradient(rgba(43, 36, 32, 0.05) 1px, transparent 1px);
  background-size: 18px 18px;
}

::selection {
  background: var(--color-accent);
  color: var(--color-accent-contrast);
}

.section-heading {
  position: relative;
}

/* A small rotated sparkle echoes the hand-drawn stars scattered across the
   brand's own poster art (see the source Instagram screenshots). Hidden on
   narrow screens so it never crowds the heading text. */
.section-heading::before {
  content: '✦';
  position: absolute;
  left: -1.35em;
  top: 0.05em;
  font-size: 0.6em;
  color: var(--color-accent);
  transform: rotate(-15deg);
}

@media (max-width: 640px) {
  .section-heading::before { display: none; }
}

/* The base theme's ::after is a plain accent rule under the heading; this
   swaps it for a hand-drawn squiggle instead of a flat bar, a small but
   deliberate move away from the "flat rectangle underline" look. */
.section-heading::after {
  background: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 12'%3E%3Cpath d='M2 7 Q10 2 18 7 T34 7 T50 7 T64 7' fill='none' stroke='%23E5546C' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 32px 12px;
  width: 84px;
  height: 12px;
}

@supports (animation-timeline: view()) {
  .js [data-reveal] {
    animation: none; /* base reveal already handles this; keep view() opt-in light */
  }
}

@supports (navigation: auto) {
  @view-transition {
    navigation: auto;
  }
}

/* ---------- header ---------- */

.m-header {
  background: rgba(251, 243, 231, 0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--color-border);
}

@supports (background: color-mix(in srgb, red, blue)) {
  .m-header {
    background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  }
}

.m-header__brand {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--color-text);
}

.m-header__nav a {
  font-weight: 700;
  color: var(--color-text);
  text-decoration: none;
  position: relative;
}

@media (pointer: fine) {
  .m-header__nav a:hover {
    color: var(--color-accent);
  }
}

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

.m-hero {
  position: relative;
  z-index: 0;
  overflow: hidden;
}

/* Soft organic colour wash behind the hero content. Two overlapping radial
   gradients rather than an SVG blob file, so no extra asset is needed and it
   scales with any hero size. Sits behind everything via the stacking context
   this section establishes (position:relative + z-index:0 above), so no
   child needs its own z-index to stay on top. */
.m-hero::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -15% -10% auto auto;
  width: min(60vw, 640px);
  height: min(60vw, 640px);
  background:
    radial-gradient(circle at 30% 30%, var(--lilac) 0%, transparent 65%),
    radial-gradient(circle at 70% 65%, var(--sky) 0%, transparent 60%);
  opacity: 0.55;
  filter: blur(50px);
  pointer-events: none;
}

.m-hero__heading {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 0.95;
  font-size: clamp(2.4rem, 6vw, 4.5rem);
}

.m-hero__sub {
  max-width: 52ch;
  font-size: 1.1rem;
  color: var(--color-muted);
}

.m-hero__cta {
  display: inline-block;
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.85rem 1.6rem;
  border-radius: 999px;
  text-decoration: none;
}

/* Same photo-frame language as the rest of the site: a rotated colour card
   behind the hero image, so the hero keeps its personality once a real
   photo replaces the placeholder. */
.m-hero__image {
  position: relative;
  z-index: 0;
}

.m-hero__image::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: calc(var(--radius-lg) + 6px);
  background: var(--olive);
  transform: rotate(2.5deg);
  z-index: -1;
}

.m-hero__image img {
  position: relative;
  border-radius: var(--radius-lg);
  transform: rotate(-1.5deg);
}

@media (prefers-reduced-motion: reduce) {
  .m-hero__image::before,
  .m-hero__image img {
    transform: none;
  }
}

/* ---------- text-image (about / standhouders "waarom") ---------- */

.m-text-image__image img {
  border-radius: var(--radius-lg);
}

.m-text-image__heading {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

/* ---------- reviews (mockup content, see HANDOFF.md) ---------- */

.m-reviews {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  margin-inline: auto;
}

.m-reviews__quote {
  font-family: var(--font-display);
  text-transform: none;
  font-weight: 700;
}

/* ---------- cta-banner ---------- */

.m-cta-banner {
  position: relative;
  z-index: 0;
  overflow: hidden;
  background: var(--color-text);
  color: var(--color-bg);
  border-radius: var(--radius-lg);
  margin-inline: auto;
}

.m-cta-banner::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: auto -8% -40% auto;
  width: min(50vw, 480px);
  height: min(50vw, 480px);
  background: radial-gradient(circle, var(--color-accent) 0%, transparent 68%);
  opacity: 0.5;
  filter: blur(45px);
  pointer-events: none;
}

.m-cta-banner__cta {
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  border-radius: 999px;
  text-decoration: none;
  font-weight: 800;
  padding: 0.75rem 1.5rem;
  display: inline-block;
}

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

.m-faq__item {
  border-bottom: 1px solid var(--color-border);
}

.m-faq__question {
  font-weight: 800;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 1rem;
}

/* ---------- map ---------- */

.m-map iframe {
  border-radius: var(--radius-lg);
  border: none;
  width: 100%;
  min-height: 320px;
}