/* Om Wellness Fest
   Layout: full-width bands that alternate between the brand brown and a white-to-beige gradient.
   Content sits on a 1240px column. Shapes: buttons and chips are pills, cards and media are 20px. */
:root {
  --brown: #6d4036;        /* primary, from Dany's colour swatch */
  --brown-deep: #4a2a23;   /* footer, text on cream buttons */
  --terracotta: #83412d;   /* sky of the flyer artwork, used behind the hero picture */
  --cream: #f6e9d2;        /* text on brown, the colour of the festival title */
  --beige-1: #fbf7f1;      /* top of the secondary gradient */
  --beige-2: #eedfd0;      /* bottom of the secondary gradient */
  --paper: #fffaf3;        /* cards on beige */
  --gold: #d8a657;         /* the sun's gold line */
  --coral: #c4502a;        /* the date numbers on the flyer */
  --ink: #3b2520;          /* text on beige */
  --ink-soft: #73554b;
  --on-brown-soft: rgba(246, 233, 210, 0.76);
  --line-beige: rgba(109, 64, 54, 0.16);
  --line-brown: rgba(246, 233, 210, 0.2);
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --r-card: 20px;
  --r-pill: 999px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --header-h: 76px;
  --shadow: 0 24px 60px -32px rgba(74, 42, 35, 0.55);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 12px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
a, button, input, select, label, summary { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
  color: var(--ink);
  background: var(--brown);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: env(safe-area-inset-top, 0px);
  z-index: 60;
  background: var(--brown);
}
img, video { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--cream); color: var(--brown-deep); padding: 10px 16px; border-radius: var(--r-pill);
  text-decoration: none; font-weight: 500;
}
.skip-link:focus { top: calc(env(safe-area-inset-top, 0px) + 12px); }

.ic { width: 1em; height: 1em; flex: none; display: inline-block; vertical-align: -0.125em; }

/* Layout */
.wrap {
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}
.band { padding-block: clamp(72px, 9vw, 128px); position: relative; }
.band--brown { background: var(--brown); color: var(--cream); }
.band--beige { background: linear-gradient(180deg, var(--beige-1) 0%, var(--beige-2) 100%); color: var(--ink); }
.band--tight { padding-block: clamp(48px, 6vw, 80px); }

/* Type */
h1, h2, h3, h4 { margin: 0; font-weight: 400; text-wrap: balance; }
.h1 { font-size: clamp(40px, 6vw, 76px); line-height: 1.02; letter-spacing: -0.03em; }
.h2 { font-size: clamp(34px, 4.6vw, 58px); line-height: 1.06; letter-spacing: -0.028em; }
.h3 { font-size: clamp(22px, 2.1vw, 28px); line-height: 1.2; letter-spacing: -0.016em; }
.h4 { font-size: 19px; line-height: 1.3; letter-spacing: -0.01em; font-weight: 500; }
.lede { font-size: clamp(18px, 1.55vw, 21px); line-height: 1.55; max-width: 60ch; margin: 0; }
p { margin: 0; }
.eyebrow { font-size: 13px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; margin: 0; }
.band--brown .eyebrow { color: var(--gold); }
.band--beige .eyebrow { color: var(--brown); }
.band--brown .muted { color: var(--on-brown-soft); }
.band--beige .muted { color: var(--ink-soft); }
.stack { display: grid; gap: 20px; }
.stack--lg { gap: 28px; }
.tnum { font-variant-numeric: tabular-nums; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px;
  border-radius: var(--r-pill); border: 1px solid transparent; background: transparent;
  font: 500 16px/1 var(--font); letter-spacing: -0.005em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform 0.25s var(--ease), background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.25s var(--ease);
}
.btn .ic { width: 18px; height: 18px; transition: transform 0.25s var(--ease); }
.btn:hover .ic--arrow { transform: translateX(3px); }
.btn:active { transform: translateY(1px) scale(0.985); }
.btn--sm { min-height: 42px; padding: 0 18px; font-size: 15px; }
.btn--cream { background: var(--cream); color: var(--brown-deep); }
.btn--cream:hover { background: #fff4e2; box-shadow: 0 10px 30px -14px rgba(0, 0, 0, 0.45); }
.btn--brown { background: var(--brown); color: var(--cream); }
.btn--brown:hover { background: var(--brown-deep); box-shadow: 0 12px 30px -16px rgba(74, 42, 35, 0.8); }
.btn--line-cream { border-color: rgba(246, 233, 210, 0.55); color: var(--cream); }
.btn--line-cream:hover { background: rgba(246, 233, 210, 0.1); border-color: var(--cream); }
.btn--line-brown { border-color: rgba(109, 64, 54, 0.4); color: var(--brown); }
.btn--line-brown:hover { background: rgba(109, 64, 54, 0.06); border-color: var(--brown); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.text-link {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 500; text-decoration: none;
  border-bottom: 1px solid currentColor; padding-bottom: 2px;
}
.text-link .ic { width: 16px; height: 16px; transition: transform 0.25s var(--ease); }
.text-link:hover .ic { transform: translateX(3px); }

/* Header */
.site-header {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 50;
  height: var(--header-h);
  color: var(--cream);
  background: transparent;
  transition: background-color 0.3s, box-shadow 0.3s, backdrop-filter 0.3s;
}
.site-header.is-solid, .site-header--solid {
  background: rgba(109, 64, 54, 0.94);
  box-shadow: 0 1px 0 var(--line-brown);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.site-header__inner { height: 100%; display: flex; align-items: center; gap: 28px; }
.brand { display: inline-flex; align-items: center; text-decoration: none; flex: none; }
.brand img { height: 54px; width: auto; }
.site-nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.site-nav a:not(.btn) {
  text-decoration: none; font-size: 15px; font-weight: 500; padding: 10px 14px; border-radius: var(--r-pill);
  color: var(--on-brown-soft); transition: color 0.2s, background-color 0.2s;
}
.site-nav a:not(.btn):hover, .site-nav a[aria-current="page"] { color: var(--cream); background: rgba(246, 233, 210, 0.08); }
.site-nav .btn { margin-left: 10px; }
.menu-btn {
  display: none; margin-left: auto; width: 46px; height: 46px; border-radius: var(--r-pill);
  border: 1px solid var(--line-brown); background: transparent; color: var(--cream); cursor: pointer;
  align-items: center; justify-content: center;
}
.menu-btn .ic { width: 22px; height: 22px; }
@media (max-width: 860px) {
  .menu-btn { display: inline-flex; }
  .site-nav {
    position: absolute; left: 0; right: 0; top: var(--header-h);
    flex-direction: column; align-items: stretch; gap: 2px;
    padding: 12px max(20px, env(safe-area-inset-right, 0px)) 20px max(20px, env(safe-area-inset-left, 0px));
    background: var(--brown); box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.5);
    border-top: 1px solid var(--line-brown);
    display: none;
  }
  .site-nav.is-open { display: flex; }
  .site-nav a:not(.btn) { font-size: 17px; padding: 14px 12px; }
  .site-nav .btn { margin: 10px 0 0; }
}

/* Hero */
.hero {
  position: relative;
  margin-top: calc(-1 * var(--header-h));
  padding-top: var(--header-h);
  min-height: clamp(600px, 90dvh, 900px);
  display: flex; align-items: center;
  background: var(--terracotta);
  color: var(--cream);
  overflow: hidden;
  isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: -1; }
.hero-sentinel { position: absolute; top: 120px; left: 0; width: 1px; height: 1px; pointer-events: none; }
.hero__art {
  position: absolute; top: 0; right: 0; height: 100%; width: auto; max-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 34%);
}
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(74, 42, 35, 0.82) 0%, rgba(74, 42, 35, 0.45) 50%, rgba(74, 42, 35, 0.12) 100%); }
.hero--art .hero__scrim { display: none; }
.hero__content { position: relative; padding-block: 56px 72px; }
.hero__copy { max-width: 560px; display: grid; gap: 26px; justify-items: center; justify-self: center; text-align: center; }
.hero__copy .date-chips, .hero__copy .btn-row { justify-content: center; }
.date-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.date-chip {
  display: inline-flex; align-items: center; gap: 0.35em; height: 38px; padding: 0 18px;
  border-radius: var(--r-pill); background: var(--cream); color: var(--brown-deep);
  font-size: 14px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
}
.date-chip b { color: var(--coral); font-weight: 700; }
/* The title follows the title artwork: symbol, HOUSE OF OM, Grand Opening Bangkok, the gold line.
   Every size and gap is a share of --t, the HOUSE OF OM size, so the proportions hold at any width.
   72px is the largest size where HOUSE OF OM still fits the 560px text column on one line. */
.hero__copy { --t: clamp(40px, 5.8vw, 84px); max-width: 680px; }
.hero__title { display: grid; justify-items: center; margin: -6px 0 0; }
.hero__symbol { width: calc(clamp(40px, 5vw, 72px) * 0.67); height: auto; }
.hero__copy .date-chips { gap: 8px; }
.hero__copy .date-chip { height: 32px; padding: 0 14px; font-size: 12.5px; }
.hero__name {
  font-family: var(--font-title); font-weight: 600; font-synthesis: none; text-transform: uppercase;
  font-size: var(--t); line-height: 1; letter-spacing: 0; color: var(--cream);
}
/* Grand Opening Bangkok sits on an orange pill with white text, measured from Dany's picture (2 Nov):
   flat #b36232, fully round ends, 1.3em of space each side, and the capitals centred top to bottom
   (Bagnard's baseline sits 0.75em down, so the top padding is larger than the bottom).
   The 6vw cap keeps the one-line pill inside very narrow screens. */
.hero__kicker {
  font-family: var(--font-title); font-weight: 600; font-synthesis: none;
  font-size: min(calc(var(--t) * 0.481), 6vw); line-height: 1; color: #fff; margin-top: calc(var(--t) * 0.2);
  padding: 0.434em 1.3em 0.27em; border-radius: var(--r-pill); background: #b36232; white-space: nowrap;
}
.hero__title .launch-line {
  margin-top: calc(var(--t) * 0.392); width: max(calc(var(--t) * 6.12), min(280px, 100%));
  gap: calc(var(--t) * 0.26); font-size: max(11px, calc(var(--t) * 0.186)); font-weight: 700; line-height: 1;
}
.launch-line {
  display: flex; align-items: center; gap: 14px; width: min(540px, 84vw);
  color: var(--gold); font-size: 15px; font-weight: 500; letter-spacing: 0.42em; text-transform: uppercase;
}
.launch-line::before, .launch-line::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: 0.7; }
.launch-line span { padding-left: 0.42em; white-space: nowrap; }
.hero__sub { font-size: clamp(16px, 1.3vw, 18px); line-height: 1.55; color: rgba(246, 233, 210, 0.9); max-width: 40ch; }
.hero__controls {
  position: absolute; z-index: 2;
  right: max(20px, env(safe-area-inset-right, 0px)); bottom: 24px;
  display: flex; gap: 8px;
}
.round-btn {
  width: 46px; height: 46px; border-radius: var(--r-pill); display: inline-flex; align-items: center; justify-content: center;
  background: rgba(74, 42, 35, 0.55); color: var(--cream); border: 1px solid var(--line-brown); cursor: pointer;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background-color 0.2s;
}
.round-btn:hover { background: rgba(74, 42, 35, 0.8); }
.round-btn .ic { width: 20px; height: 20px; }
@media (prefers-reduced-motion: no-preference) {
  .hero .reveal { animation: rise 0.9s var(--ease) both; }
  .hero .reveal:nth-child(2) { animation-delay: 0.08s; }
  .hero .reveal:nth-child(3) { animation-delay: 0.16s; }
  .hero .reveal:nth-child(4) { animation-delay: 0.24s; }
  .hero__art { animation: drift 1.6s var(--ease) both; }
}
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes drift { from { opacity: 0.4; transform: scale(1.04); } to { opacity: 1; transform: none; } }
@media (max-width: 860px) {
  .hero { min-height: 0; align-items: flex-start; }
  .hero__art {
    top: auto; bottom: 0; left: 0; right: 0; width: 100%; height: auto;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 36%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 36%);
  }
  .hero--art .hero__content { padding-bottom: min(calc(128vw - 40px), 760px); }
  .hero__content { padding-block: 32px 56px; }
  .hero__scrim { background: linear-gradient(180deg, rgba(74, 42, 35, 0.86) 0%, rgba(74, 42, 35, 0.4) 60%, rgba(74, 42, 35, 0.2) 100%); }
  .hero--video { min-height: 88svh; }
}

/* Statement */
.statement { text-align: center; }
.statement__head { display: grid; gap: 22px; justify-items: center; max-width: 880px; margin-inline: auto; }
.statement__head .lede { margin-inline: auto; }
.stats {
  margin: 56px auto 0; max-width: 960px;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px;
}
.stat { display: grid; gap: 6px; justify-items: center; }
.stat__num { font-size: clamp(40px, 5vw, 60px); line-height: 1; letter-spacing: -0.035em; color: var(--brown); font-variant-numeric: tabular-nums; }
.stat__label { font-size: 13px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }
@media (max-width: 700px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; } }
.feature-media {
  position: relative; margin-top: clamp(48px, 6vw, 80px);
  border-radius: var(--r-card); overflow: hidden; aspect-ratio: 16 / 8; max-width: 100%;
  background: var(--brown-deep); box-shadow: var(--shadow);
}
.feature-media img, .feature-media video { width: 100%; height: 100%; object-fit: cover; }
.feature-media img { object-position: center 62%; }
.feature-media__play {
  position: absolute; inset: 0; margin: auto; width: 88px; height: 88px; border-radius: var(--r-pill);
  border: 0; background: var(--cream); color: var(--brown-deep); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 20px 50px -18px rgba(0, 0, 0, 0.6); transition: transform 0.3s var(--ease);
}
.feature-media__play:hover { transform: scale(1.06); }
.feature-media__play .ic { width: 30px; height: 30px; margin-left: 4px; }
.feature-media.is-playing .feature-media__play { opacity: 0; pointer-events: none; }
@media (max-width: 700px) { .feature-media { aspect-ratio: 4 / 3; } }

/* How the weekend works */
.section-head { display: grid; gap: 18px; max-width: 760px; }
.steps {
  list-style: none; margin: 64px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px;
  counter-reset: step; position: relative;
}
.steps::before {
  content: ""; position: absolute; left: 0; right: 0; top: 24px; height: 1px; background: var(--line-brown);
}
.step { position: relative; display: grid; gap: 14px; align-content: start; counter-increment: step; }
.step__num {
  width: 48px; height: 48px; border-radius: var(--r-pill); display: inline-flex; align-items: center; justify-content: center;
  background: var(--brown); border: 1px solid var(--gold); color: var(--gold); font-size: 17px; font-weight: 500;
  position: relative; z-index: 1;
}
.step__num::before { content: counter(step); }
.step p { color: var(--on-brown-soft); max-width: 30ch; }
@media (max-width: 960px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; }
  .steps::before { display: none; }
}
@media (max-width: 560px) { .steps { grid-template-columns: minmax(0, 1fr); } }

/* Experiences (tabs) */
.tabs {
  display: flex; gap: 8px; margin-top: 44px; overflow-x: auto; padding-bottom: 6px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: none; height: 44px; padding: 0 20px; border-radius: var(--r-pill); cursor: pointer;
  border: 1px solid var(--line-beige); background: transparent; color: var(--ink);
  font-size: 15px; font-weight: 500; transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.tab:hover { border-color: rgba(109, 64, 54, 0.45); }
.tab[aria-selected="true"] { background: var(--brown); color: var(--cream); border-color: var(--brown); }
.exp-panel {
  margin-top: 36px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 56px); align-items: start;
}
.exp-panel__text { display: grid; gap: 20px; }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ticks li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; }
.ticks .ic { width: 20px; height: 20px; margin-top: 3px; }
.band--beige .ticks .ic { color: var(--brown); }
.band--brown .ticks .ic { color: var(--gold); }
.card-rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 280px); gap: 16px;
  overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 4px 18px; margin: -4px -4px 0;
  scrollbar-width: thin; scrollbar-color: rgba(109, 64, 54, 0.35) transparent;
}
.session-card {
  scroll-snap-align: start; display: grid; gap: 12px; align-content: start;
  min-height: 200px; padding: 22px; border-radius: var(--r-card);
  background: var(--paper); border: 1px solid var(--line-beige);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.session-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.session-card__when { font-size: 14px; font-weight: 500; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.session-card__title { font-size: 20px; line-height: 1.25; letter-spacing: -0.012em; }
.session-card__where { display: flex; gap: 8px; align-items: center; font-size: 14px; color: var(--ink-soft); }
.session-card__where .ic { width: 16px; height: 16px; }
.session-card .badge { justify-self: start; margin-top: auto; }
.exp-panel.is-entering { animation: fadeIn 0.45s var(--ease) both; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .exp-panel.is-entering { animation: none; } }
@media (max-width: 900px) { .exp-panel { grid-template-columns: minmax(0, 1fr); } }

/* Badges */
.badge {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
}
.badge--free { background: rgba(216, 166, 87, 0.18); color: #7a4f12; box-shadow: inset 0 0 0 1px rgba(184, 132, 50, 0.45); }
.badge--full { background: var(--brown); color: var(--cream); }
.badge--invite { background: transparent; color: var(--ink-soft); box-shadow: inset 0 0 0 1px var(--line-beige); }
.band--brown .badge--free { background: rgba(216, 166, 87, 0.16); color: var(--gold); box-shadow: inset 0 0 0 1px rgba(216, 166, 87, 0.5); }
.band--brown .badge--full { background: var(--cream); color: var(--brown-deep); }

/* Passes */
.passes {
  margin-top: 56px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  border-top: 1px solid var(--line-brown);
}
.pass { padding: 40px clamp(0px, 3vw, 48px) 8px 0; display: grid; gap: 22px; align-content: start; }
.pass + .pass { padding-left: clamp(24px, 4vw, 56px); padding-right: 0; border-left: 1px solid var(--line-brown); }
.pass__top { display: grid; gap: 8px; }
.pass__name { font-size: clamp(24px, 2.4vw, 30px); letter-spacing: -0.018em; line-height: 1.15; }
.pass__price { font-size: clamp(48px, 6vw, 72px); line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.pass__price small { font-size: 0.32em; letter-spacing: 0; color: var(--on-brown-soft); margin-left: 8px; }
.pass .ticks { color: var(--cream); }
.pass .btn { justify-self: start; margin-top: 8px; }
@media (max-width: 800px) {
  .passes { grid-template-columns: minmax(0, 1fr); }
  .pass { padding: 36px 0 12px; }
  .pass + .pass { padding-left: 0; border-left: 0; border-top: 1px solid var(--line-brown); margin-top: 28px; }
}

/* Signature Sound Float: limited floating beds (home page passes, tickets page) */
.float-note {
  margin-top: 48px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px clamp(20px, 3vw, 40px); align-items: center;
  padding: clamp(22px, 3vw, 32px) clamp(20px, 3vw, 40px); border-radius: var(--r-card);
  border: 1px solid rgba(216, 166, 87, 0.55); background: rgba(216, 166, 87, 0.1);
}
.float-note__count { margin: 0; min-width: 104px; display: grid; justify-items: center; gap: 6px; text-align: center; }
.float-note__count strong {
  font-family: var(--font-title); font-weight: 600; font-synthesis: none;
  font-size: clamp(56px, 7vw, 80px); line-height: 0.9; color: var(--gold);
}
.float-note__count span { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.float-note__text { display: grid; gap: 8px; }
.float-note__text p:last-child { margin: 0; max-width: 64ch; }
.band--brown .float-note__text p:last-child { color: var(--on-brown-soft); }
.book-main .float-note { margin-top: 32px; background: var(--paper); border-color: rgba(184, 132, 50, 0.45); box-shadow: var(--shadow); }
.book-main .float-note__count strong { color: var(--coral); }
.book-main .float-note__text p:last-child { color: var(--ink-soft); }
@media (max-width: 560px) {
  .float-note { grid-template-columns: minmax(0, 1fr); }
  .float-note__count { justify-items: start; text-align: left; }
}

/* Sponsors and collaborators: the secondary beige, warmed by a soft gold glow on the left and a coral
   glow on the right. It ends on the light beige so it runs straight into the section below. */
.band.partners {
  background:
    url("../img/grain-soft.png") 0 0 / 320px 320px,
    radial-gradient(52% 46% at 10% 22%, rgba(216, 166, 87, 0.24), rgba(216, 166, 87, 0) 70%),
    radial-gradient(50% 55% at 92% 58%, rgba(196, 80, 42, 0.14), rgba(196, 80, 42, 0) 72%),
    linear-gradient(180deg, var(--beige-2) 0%, #f5e2d2 48%, var(--beige-1) 100%);
  background-blend-mode: overlay, normal, normal, normal;
}
.partners__head { display: grid; gap: 14px; justify-items: center; text-align: center; }
.partners { --card-w: min(520px, 86vw); }
.partners__rail {
  margin-top: clamp(36px, 4vw, 56px); display: flex; gap: clamp(16px, 2vw, 28px);
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  padding: 8px calc((100% - var(--card-w)) / 2) 24px; scrollbar-width: none;
}
.partners__rail::-webkit-scrollbar { display: none; }
.partners__rail:focus-visible { outline: 2px solid var(--brown); outline-offset: -2px; }
.partner-card {
  flex: 0 0 var(--card-w); scroll-snap-align: center; display: grid; grid-template-rows: auto 1fr; align-content: start;
  border-radius: clamp(28px, 3vw, 44px); overflow: hidden; color: var(--cream);
  box-shadow: 0 30px 60px -36px rgba(74, 42, 35, 0.6);
}
.partner-card--plum { background: linear-gradient(165deg, #5e0b2e 0%, #3b0219 100%); }
.partner-card--night { background: url("../img/ornament-sun.webp") right -60px top -40px / 260px auto no-repeat, linear-gradient(170deg, #2b1814 0%, #4a2a23 48%, #83412d 100%); }
.partner-card--cream { background: #fbf3e6; color: var(--ink); }
.partner-card--terra { background: linear-gradient(165deg, #a0502f 0%, #6d4036 100%); }
.partner-card__text { padding: clamp(28px, 3.2vw, 44px) clamp(24px, 3vw, 44px) 0; }
.partner-card__kicker { margin: 0; font-size: clamp(17px, 1.5vw, 22px); line-height: 1.35; }
.partner-card__title { margin: 6px 0 0; font-size: clamp(30px, 2.8vw, 40px); line-height: 1.1; }
.partner-card__grid {
  list-style: none; margin: clamp(28px, 3.6vw, 48px) 0 0; padding: 0 14px 14px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-content: end;
}
.partner-photo { position: relative; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; background: rgba(0, 0, 0, 0.2); }
.partner-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.partner-photo p {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 32px 12px 10px; display: grid; gap: 2px;
  background: linear-gradient(180deg, rgba(20, 10, 8, 0) 0%, rgba(20, 10, 8, 0.82) 100%); color: #fff; font-size: 12px; line-height: 1.3;
}
.partner-photo strong { font-family: var(--font-title); font-weight: 600; font-synthesis: none; font-size: clamp(15px, 1.4vw, 18px); line-height: 1.1; }
.partner-photo span { opacity: 0.82; }
/* Sample logos: three rows that take the same height as two rows of photos */
.partner-card__grid--logos { grid-auto-rows: calc((var(--card-w) - 40px) * 0.375 * 2 / 3 - 4px); }
.partner-logo {
  display: grid; place-content: center; justify-items: center; gap: 8px; padding: 10px; text-align: center;
  border-radius: 16px; background: rgba(246, 233, 210, 0.95); color: var(--brown-deep);
}
.partner-logo .ic { width: 26px; height: 26px; color: var(--coral); }
.partner-logo span { font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.partner-logo--serif span { font-family: var(--font-title); font-weight: 600; font-synthesis: none; font-size: 19px; letter-spacing: 0; text-transform: none; }
.partners__foot { margin-top: 18px; display: grid; gap: 10px; justify-items: center; text-align: center; }
/* Arrows and dots under a sliding row (assets/js/partners.js); cream versions on brown bands */
.slider-nav { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; }
.slider-arrow {
  width: 46px; height: 46px; border-radius: var(--r-pill); display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-beige); background: var(--paper); color: var(--brown); cursor: pointer; transition: opacity 0.2s, background-color 0.2s;
}
.slider-arrow:hover { background: #fff; }
.slider-arrow:disabled { opacity: 0.35; cursor: default; }
.slider-arrow .ic { width: 20px; height: 20px; }
.slider-dots { display: flex; gap: 8px; }
.slider-dots button {
  width: 10px; height: 10px; padding: 0; border: 0; border-radius: var(--r-pill); cursor: pointer;
  background: rgba(109, 64, 54, 0.25); transition: width 0.3s var(--ease), background-color 0.3s;
}
.slider-dots button[aria-current="true"] { width: 28px; background: var(--brown); }
.band--brown .slider-arrow { border-color: transparent; background: var(--cream); color: var(--brown-deep); }
.band--brown .slider-arrow:hover { background: #fff; }
.band--brown .slider-dots button { background: rgba(246, 233, 210, 0.32); }
.band--brown .slider-dots button[aria-current="true"] { background: var(--cream); }
/* A mouse can drag a row; snapping waits until the drag ends */
@media (hover: hover) and (pointer: fine) {
  [data-slider-rail] { cursor: grab; }
  [data-slider-rail].is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
}
.partners__note { margin: 0; font-size: 15px; max-width: 60ch; }

/* What the weekend holds, signature experiences, how the weekend works: one brown band in three parts */
.ornate-head { display: grid; gap: 14px; justify-items: center; text-align: center; max-width: 760px; margin-inline: auto; }
.ornate-head .lede { margin-inline: auto; }
/* A thin gold rule with a small diamond in the middle, as on the flyer */
.ornate-rule {
  position: relative; width: min(360px, 70%); height: 10px; margin-top: 4px;
  background: linear-gradient(90deg, transparent, rgba(216, 166, 87, 0.7) 30%, rgba(216, 166, 87, 0.7) 44%, transparent 44%, transparent 56%, rgba(216, 166, 87, 0.7) 56%, rgba(216, 166, 87, 0.7) 70%, transparent) center / 100% 1px no-repeat;
}
.ornate-rule::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; border: 1px solid var(--gold);
  transform: translate(-50%, -50%) rotate(45deg);
}
.offerings {
  list-style: none; margin: clamp(40px, 5vw, 64px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0 clamp(12px, 1.4vw, 20px); row-gap: clamp(32px, 4vw, 48px);
}
/* Round photos with a gold ring, no frame around them. Each circle turns over when tapped and shows
   its line on a terracotta back (assets/js/offerings.js sets aria-expanded).
   Each item spans two shared rows (circle, title), so the titles and their gold lines line up
   across a row even when one title wraps onto two lines */
.offering {
  grid-row: span 2; display: grid; grid-template-rows: subgrid; justify-items: center; align-content: start; gap: 18px; text-align: center;
}
.offering__circle {
  position: relative; display: block; width: 100%; max-width: 172px; aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--cream); cursor: pointer; perspective: 900px; transition: transform 0.4s var(--ease);
}
.offering__circle:hover { transform: translateY(-3px); }
.offering__circle:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; border-radius: 50%; }
.offering__spin { position: absolute; inset: 0; z-index: 0; transform-style: preserve-3d; transition: transform 0.7s var(--ease); }
.offering__circle[aria-expanded="true"] .offering__spin { transform: rotateY(180deg); }
.offering__face {
  position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  box-shadow: 0 0 0 1px rgba(216, 166, 87, 0.6), 0 0 0 6px rgba(216, 166, 87, 0.08), 0 18px 30px -18px rgba(30, 12, 8, 0.8);
}
.offering__photo { object-fit: cover; background: #83412d; }
.offering__back {
  display: grid; place-items: center; padding: 13% 15% 18%; transform: rotateY(180deg);
  background: radial-gradient(circle at 35% 30%, #b0603b 0%, #7a3a28 72%);
  font-size: clamp(13px, 1.05vw, 15px); font-weight: 500; line-height: 1.4; color: var(--cream);
}
/* A small cream button on the edge says the circle can be tapped; it turns into a cross while open */
.offering__badge {
  position: absolute; right: 3%; bottom: 3%; z-index: 1; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; background: var(--cream); color: var(--brown-deep);
  box-shadow: 0 6px 14px -6px rgba(20, 8, 5, 0.75); transition: transform 0.45s var(--ease);
}
.offering__badge .ic { width: 16px; height: 16px; }
.offering__circle[aria-expanded="true"] .offering__badge { transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) { .offering__spin, .offering__badge, .offering__circle { transition: none; } }
.offering__title {
  margin: 0; display: flex; flex-direction: column; justify-content: flex-start; align-items: center;
  font-size: clamp(18px, 1.5vw, 21px); line-height: 1.15; text-transform: uppercase; letter-spacing: 0.04em;
}
.offering__title::after { content: ""; flex: none; width: 28px; height: 1px; margin-top: 12px; background: var(--gold); opacity: 0.8; }
.offerings__hint { margin: 28px 0 0; text-align: center; font-size: 15px; color: var(--on-brown-soft); }
.signature, .how { margin-top: clamp(80px, 9vw, 128px); }

/* What to expect: the flyers in a row that slides sideways, the middle one centred.
   The row runs edge to edge, so the neighbours peek in from both sides. */
.expect { --slide-w: clamp(240px, 26vw, 360px); }
.expect + .wrap { margin-top: clamp(80px, 9vw, 128px); }
.expect__rail {
  margin-top: clamp(36px, 4vw, 56px); display: flex; gap: clamp(14px, 1.6vw, 24px);
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  padding: 8px calc((100% - var(--slide-w)) / 2) 28px; scrollbar-width: none;
}
.expect__rail::-webkit-scrollbar { display: none; }
.expect__rail:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; border-radius: 0; }
.expect-slide {
  flex: 0 0 var(--slide-w); width: var(--slide-w); height: auto; aspect-ratio: 4 / 5; object-fit: cover;
  scroll-snap-align: center; border-radius: var(--r-card); background: rgba(20, 8, 5, 0.3);
  box-shadow: 0 0 0 1px rgba(216, 166, 87, 0.22), 0 30px 50px -30px rgba(20, 8, 5, 0.85);
  -webkit-user-drag: none; user-select: none;
}
.expect__nav { margin-top: 10px; display: flex; align-items: center; justify-content: center; gap: 16px; }
@media (max-width: 600px) { .expect { --slide-w: 74vw; } }
.signature__list {
  list-style: none; margin: clamp(40px, 5vw, 56px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px);
}
/* Signature cards: the drawing in a round badge above the text; each card's colours are set below */
.sig-card {
  display: grid; align-content: start; gap: 10px; padding: clamp(22px, 2.2vw, 30px); border-radius: 24px;
  background: radial-gradient(120% 70% at 100% 0%, rgba(196, 80, 42, 0.12) 0%, rgba(196, 80, 42, 0) 60%), #f6e9d2;
  color: var(--ink); box-shadow: 0 30px 50px -34px rgba(20, 8, 5, 0.75);
}
.sig-card__art {
  width: 88px; height: 88px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 8px; color: #a0502f;
  background: radial-gradient(circle at 40% 35%, #fbf3e6 0%, #efd9bd 100%);
  box-shadow: 0 0 0 1px rgba(160, 80, 47, 0.28), 0 0 0 6px rgba(160, 80, 47, 0.06);
}
.sig-card__art svg { width: 62%; height: 62%; }
.sig-card__when { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #9a5a2c; }
.sig-card__title { margin: 0; font-size: clamp(21px, 1.8vw, 25px); line-height: 1.15; color: var(--brown-deep); }
.sig-card p:last-child { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-soft); }
/* Each card has its own gradient from the flyer colours: pool teal, cacao, plum and pyramid gold.
   Text on every one passes the 4.5 contrast check, at both ends of the gradient. */
.sig-card--pool { background: radial-gradient(120% 70% at 100% 0%, rgba(216, 166, 87, 0.16) 0%, rgba(216, 166, 87, 0) 60%), linear-gradient(160deg, #33605a 0%, #1b3532 100%); }
.sig-card--music { background: radial-gradient(120% 70% at 100% 0%, rgba(216, 166, 87, 0.16) 0%, rgba(216, 166, 87, 0) 60%), linear-gradient(160deg, #8f3c25 0%, #52200f 100%); }
.sig-card--plum { background: radial-gradient(120% 70% at 100% 0%, rgba(216, 166, 87, 0.16) 0%, rgba(216, 166, 87, 0) 60%), linear-gradient(160deg, #7e3154 0%, #3b0a22 100%); }
.sig-card--gold { background: radial-gradient(120% 70% at 100% 0%, rgba(255, 250, 243, 0.45) 0%, rgba(255, 250, 243, 0) 60%), linear-gradient(160deg, #f2cd8a 0%, #dca763 100%); }
.sig-card--dark { color: var(--cream); }
.sig-card--dark .sig-card__title { color: var(--cream); }
.sig-card--dark p:last-child { color: rgba(246, 233, 210, 0.92); }
.sig-card--dark .sig-card__when { color: #f3d9a6; }
.sig-card--dark .sig-card__art {
  color: var(--cream); background: rgba(246, 233, 210, 0.1);
  box-shadow: 0 0 0 1px rgba(216, 166, 87, 0.55), 0 0 0 6px rgba(246, 233, 210, 0.06);
}
.sig-card--gold .sig-card__title { color: #3b1d14; }
.sig-card--gold p:last-child { color: #4a2a23; }
.sig-card--gold .sig-card__when { color: #5e2a10; }
.sig-card--gold .sig-card__art { color: #8a4a26; box-shadow: 0 0 0 1px rgba(94, 42, 16, 0.28), 0 0 0 6px rgba(94, 42, 16, 0.06); }
.signature__more {
  margin: 32px auto 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px;
  text-align: center; color: var(--on-brown-soft); font-size: 16px; max-width: 900px;
}
.signature__more-art { display: inline-grid; place-items: center; width: 36px; height: 36px; color: var(--gold); }
.signature__more-art svg { width: 100%; height: 100%; }
.signature__more .text-link { color: var(--cream); }
.how .steps { margin-top: clamp(40px, 5vw, 64px); }
@media (max-width: 1100px) {
  .offerings { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .signature__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .offerings { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .signature__list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .partner-photo p { padding: 24px 10px 8px; }
  .partner-photo span { display: none; }
  .partner-logo--serif span { font-size: 16px; }
  .partner-logo span { font-size: 10px; }
}

/* Map teaser */
.map-teaser { margin-top: 48px; display: block; border-radius: var(--r-card); overflow: hidden; position: relative; box-shadow: 0 30px 70px -40px rgba(0, 0, 0, 0.7); }
.map-teaser img { width: 100%; height: auto; transition: transform 1.2s var(--ease); }
.map-teaser:hover img { transform: scale(1.015); }
.map-zones { margin-top: 40px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; }
.map-zones div { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-top: 1px solid var(--line-brown); }
.zone-num {
  width: 28px; height: 28px; border-radius: var(--r-pill); display: inline-flex; align-items: center; justify-content: center;
  background: var(--cream); color: var(--brown-deep); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.map-zones span:last-child { color: var(--on-brown-soft); font-size: 15px; }
.map-zones strong { color: var(--cream); font-weight: 500; display: block; font-size: 16px; }
@media (max-width: 900px) { .map-zones { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .map-zones { grid-template-columns: minmax(0, 1fr); } }

/* Visit and questions */
.visit { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.facts { display: grid; gap: 0; margin-top: 8px; }
.fact { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 14px; padding: 18px 0; border-top: 1px solid var(--line-beige); }
.fact .ic { width: 22px; height: 22px; color: var(--brown); margin-top: 2px; }
.fact h3 { font-size: 13px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 4px; }
.fact a { text-decoration-color: rgba(109, 64, 54, 0.4); text-underline-offset: 3px; }
.faq { display: grid; border-top: 1px solid var(--line-beige); }
.faq details { border-bottom: 1px solid var(--line-beige); }
.faq summary {
  list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) 28px; gap: 16px; align-items: center;
  padding: 22px 0; font-size: 19px; letter-spacing: -0.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ic { width: 22px; height: 22px; color: var(--brown); transition: transform 0.3s var(--ease); }
.faq details[open] summary .ic { transform: rotate(45deg); }
.faq details p { padding: 0 44px 24px 0; color: var(--ink-soft); max-width: 62ch; }
@media (max-width: 900px) { .visit { grid-template-columns: minmax(0, 1fr); } }

/* Closing call */
.closing { text-align: center; display: grid; gap: 26px; justify-items: center; }
.closing__sun { width: 64px; height: 64px; color: var(--gold); }

/* Footer */
.site-footer { background: var(--brown-deep); color: var(--on-brown-soft); padding-block: 64px 40px; font-size: 15px; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: 40px; }
.footer-grid img { height: 64px; width: auto; margin-bottom: 18px; }
.footer-grid h2 { font-size: 13px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream); margin-bottom: 14px; }
.footer-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.footer-links a { text-decoration: none; }
.footer-links a:hover { color: var(--cream); }
.footer-base { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line-brown); display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; font-size: 14px; }
@media (max-width: 760px) { .footer-grid { grid-template-columns: minmax(0, 1fr); } }

/* Inner page heading (programme, map) */
.page-head { padding-block: calc(var(--header-h) + 40px) 56px; margin-top: calc(-1 * var(--header-h)); }
.page-head .lede { margin-top: 18px; }

/* Programme page */
.prog-bar {
  position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--header-h)); z-index: 30;
  background: rgba(251, 247, 241, 0.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-beige);
}
.prog-bar__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding-block: 14px; }
.segmented { display: inline-flex; padding: 4px; border-radius: var(--r-pill); background: rgba(109, 64, 54, 0.08); }
.segmented button {
  height: 40px; padding: 0 18px; border: 0; border-radius: var(--r-pill); background: transparent; cursor: pointer;
  font-size: 15px; font-weight: 500; color: var(--ink-soft); white-space: nowrap; transition: background-color 0.2s, color 0.2s;
}
.segmented button[aria-pressed="true"] { background: var(--brown); color: var(--cream); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  height: 40px; padding: 0 16px; border-radius: var(--r-pill); border: 1px solid var(--line-beige); background: transparent;
  font-size: 14px; font-weight: 500; color: var(--ink); cursor: pointer; white-space: nowrap;
}
.chip:hover, .segmented button:hover { color: var(--brown-deep); }
.chip:hover { border-color: rgba(109, 64, 54, 0.45); }
.chip[aria-pressed="true"] { border-color: var(--brown); box-shadow: inset 0 0 0 1px var(--brown); }
.select {
  height: 40px; padding: 0 40px 0 16px; border-radius: var(--r-pill); border: 1px solid var(--line-beige);
  background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%236d4036'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E") no-repeat right 14px center / 16px;
  -webkit-appearance: none; appearance: none; font: 500 14px var(--font); color: var(--ink); cursor: pointer;
}
.prog-bar .select { margin-left: auto; }
@media (max-width: 760px) { .prog-bar { position: static; } .prog-bar .select { margin-left: 0; } }
.prog-body { padding-block: 40px 96px; }
.day-note { display: flex; gap: 12px; align-items: center; color: var(--ink-soft); }
.day-note .ic { width: 20px; height: 20px; color: var(--brown); }
.allday { margin-top: 28px; padding: 24px; border-radius: var(--r-card); background: var(--paper); border: 1px solid var(--line-beige); }
.allday h2 { font-size: 13px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
.allday ul { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px 24px; }
.allday li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 15px; }
.allday li small { display: block; color: var(--ink-soft); font-size: 13px; }
.allday .zone-num, .prog-row .zone-num { background: var(--brown); color: var(--cream); }
.prog-group { margin-top: 48px; }
.prog-group__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line-beige); }
.prog-group__head p { color: var(--ink-soft); font-size: 15px; }
.prog-list { list-style: none; margin: 0; padding: 0; }
.prog-row {
  display: grid; grid-template-columns: 112px minmax(0, 1fr) 240px 132px; gap: 20px; align-items: center;
  padding: 18px 0; border-bottom: 1px solid var(--line-beige);
}
.prog-row__time { display: grid; font-variant-numeric: tabular-nums; font-size: 17px; font-weight: 500; color: var(--brown); line-height: 1.3; }
.prog-row__time span + span { font-weight: 400; color: var(--ink-soft); font-size: 14px; }
.prog-row__title { font-size: 19px; letter-spacing: -0.01em; line-height: 1.3; }
.prog-row__meta { color: var(--ink-soft); font-size: 14px; margin-top: 2px; }
.prog-row__where { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: center; font-size: 15px; }
.prog-row__where small { display: block; color: var(--ink-soft); font-size: 13px; }
.prog-row__badge { justify-self: end; }
.prog-row--invite .prog-row__title { color: var(--ink-soft); }
@media (max-width: 860px) {
  .prog-row { grid-template-columns: 76px minmax(0, 1fr); gap: 6px 16px; align-items: start; }
  .prog-row__time { grid-row: span 3; }
  .prog-row__badge { justify-self: start; }
}
.empty-state { margin-top: 56px; padding: 48px 24px; text-align: center; border: 1px dashed var(--line-beige); border-radius: var(--r-card); display: grid; gap: 16px; justify-items: center; color: var(--ink-soft); }

/* Map page */
.map-frame { display: block; width: 100%; height: 100vh; height: 100dvh; border: 0; background: #743e34; transition: opacity 0.4s var(--ease); }
.map-frame-wrap { position: relative; background: #743e34; }
.map-loading, .map-fallback { display: none; }
.map-frame-wrap.is-loading .map-frame { opacity: 0; }
.map-frame-wrap.is-loading .map-loading {
  display: block; position: absolute; left: 0; right: 0; top: 96px; margin: 0; text-align: center;
  color: var(--on-brown-soft); font-size: 16px; animation: map-pulse 1.6s ease-in-out infinite;
}
@keyframes map-pulse { 50% { opacity: 0.45; } }
.map-frame-wrap.is-failed .map-loading { display: none; }
.map-frame-wrap.is-failed .map-frame { position: absolute; visibility: hidden; }
.map-frame-wrap.is-failed .map-fallback { display: block; padding-block: 32px 64px; text-align: center; }
.map-fallback img { width: 100%; max-width: 1200px; height: auto; border-radius: var(--r-card); }
.map-fallback p { margin: 14px 0 0; color: var(--on-brown-soft); }
.map-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
/* Shorter heading on the map page, so the map starts higher up */
.page-head--compact { padding-block: calc(var(--header-h) + 20px) 28px; }
.page-head--compact .h1, html[lang="th"] .page-head--compact .h1 { font-size: clamp(30px, 3.4vw, 44px); }
.page-head--compact .lede { margin-top: 8px; font-size: 16px; }
.page-head--compact .map-actions { margin-top: 16px; gap: 10px; }
.page-head--compact .btn--sm { min-height: 36px; padding: 0 14px; font-size: 14px; }
.prog-row__badge { display: grid; gap: 8px; justify-items: end; }
.prog-row__book { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: var(--brown); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.prog-row__book .ic { width: 14px; height: 14px; }
@media (max-width: 860px) { .prog-row__badge { justify-items: start; grid-auto-flow: column; align-items: center; justify-content: start; gap: 14px; } }

/* Language switch */
.lang-switch { display: inline-flex; flex: none; padding: 3px; margin-left: 10px; border-radius: var(--r-pill); border: 1px solid var(--line-brown); }
.lang-switch button {
  height: 34px; min-width: 46px; padding: 0 12px; border: 0; border-radius: var(--r-pill); background: transparent; cursor: pointer;
  color: var(--on-brown-soft); font: 500 14px/1 var(--font); letter-spacing: 0.02em; transition: background-color 0.2s, color 0.2s;
}
.lang-switch button:hover { color: var(--cream); }
.lang-switch button[aria-pressed="true"] { background: var(--cream); color: var(--brown-deep); }
@media (max-width: 860px) {
  .lang-switch { margin-left: auto; }
  .site-header__inner .menu-btn { margin-left: 8px; }
}

/* Thai: Noto Sans Thai fills in the Thai letters next to Inter. Thai has no capitals and its vowel and
   tone marks sit above and below the letters, so no letter-spacing and a little more line height. */
html[lang="th"] body { line-height: 1.75; }
html[lang="th"] *, html[lang="th"] *::before, html[lang="th"] *::after { letter-spacing: normal !important; }
html[lang="th"] h1, html[lang="th"] h2, html[lang="th"] h3, html[lang="th"] h4,
html[lang="th"] .stat__label, html[lang="th"] .pass__price small { line-height: 1.35; }
html[lang="th"] .h1 { font-size: clamp(36px, 5vw, 64px); }
html[lang="th"] .h2 { font-size: clamp(30px, 4vw, 50px); }
html[lang="th"] .launch-line { font-size: 17px; }
html[lang="th"] .btn { line-height: 1.2; }
html[lang="th"] .faq summary { line-height: 1.45; }

/* Hero with the reel: text on the left, the upright video on the right (below the text on phones) */
.hero__content { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(32px, 5vw, 80px); }
.hero__reel {
  position: relative; margin: 0;
  width: min(380px, 30vw, calc((100dvh - var(--header-h) - 120px) * 0.5625));
  min-width: 240px; max-width: 100%; aspect-ratio: 9 / 16;
  border-radius: 24px; overflow: hidden; background: var(--brown-deep);
  box-shadow: 0 50px 90px -40px rgba(30, 12, 8, 0.75), 0 0 0 1px rgba(246, 233, 210, 0.16);
}
.hero__reel-video { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero__reel .hero__controls { right: 14px; bottom: 14px; }
.hero__sun {
  position: absolute; top: 0; right: 0; width: min(560px, 44vw); height: auto; opacity: 0.85;
  -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 55%, transparent 100%);
}
.hero--art .hero__sun { display: none; }
.hero--art .hero__content { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 860px) {
  .hero__content { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .hero__reel { width: min(100%, 360px); min-width: 0; }
  .hero__sun { width: 260px; opacity: 0.55; }
}

/* Paper texture over every page, like the grain in the flyer artwork */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none;
  background: url("../img/grain.png") repeat; background-size: 320px 320px;
  opacity: 0.13; mix-blend-mode: overlay;
}

/* Flowing lines behind the home page: one drawing from below the hero to the footer (assets/js/flow.js) */
main { position: relative; }
.hero { z-index: 3; }
.band { overflow: clip; }
.band > .wrap { position: relative; z-index: 2; }
.flow { position: absolute; left: 0; right: 0; top: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.flow svg { display: block; }
.flow--on-dark .flow-ribbon { stroke: rgba(246, 233, 210, 0.05); }
.flow--on-light .flow-ribbon { stroke: rgba(109, 64, 54, 0.045); }
.flow-line { stroke-width: 1.2; }
.flow--on-dark .flow-line { stroke: rgba(216, 166, 87, 0.3); }
.flow--on-light .flow-line { stroke: rgba(150, 95, 60, 0.24); }
.flow-line--long { stroke-width: 1; }
/* Where the browser supports it, the fine lines draw themselves as you scroll down */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .flow-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: flow-draw linear both; animation-timeline: scroll(root); animation-range: 0% 92%; }
  }
}
@keyframes flow-draw { to { stroke-dashoffset: 0; } }

/* The sun and leaves from the flyer, faded into the corners of the sections */
.ornament {
  position: absolute; z-index: 1; pointer-events: none; background: currentColor;
  -webkit-mask: var(--shape) center / contain no-repeat; mask: var(--shape) center / contain no-repeat;
}
.ornament--sun { --shape: url("../img/ornament-sun.webp"); width: clamp(190px, 30vw, 440px); aspect-ratio: 389 / 434; }
.ornament--leaves { --shape: url("../img/ornament-leaves.webp"); width: clamp(170px, 28vw, 400px); aspect-ratio: 349 / 335; }
.ornament--tl { top: 0; left: 0; }
.ornament--tr { top: 0; right: 0; }
.ornament--br { bottom: 0; right: 0; }
.ornament--bl { bottom: 0; left: 0; }
.ornament--mr { top: 50%; right: 0; translate: 0 -50%; }
.ornament--flip-x { transform: scaleX(-1); }
.ornament--flip-y { transform: scaleY(-1); }
.ornament--turn { transform: rotate(180deg); }
.band--brown .ornament--sun { color: var(--gold); opacity: 0.2; }
.band--brown .ornament--leaves { color: var(--cream); opacity: 0.085; }
.band--beige .ornament--sun { color: var(--brown); opacity: 0.1; }
.band--beige .ornament--leaves { color: var(--brown); opacity: 0.075; }
@media (max-width: 700px) {
  .band--brown .ornament--sun { opacity: 0.14; }
  .band--brown .ornament--leaves { opacity: 0.065; }
  .band--beige .ornament--sun, .band--beige .ornament--leaves { opacity: 0.06; }
}

/* Headings in the Mindvalley proportions: bold Inter at a calmer size, stronger labels */
.h1 { font-weight: 700; font-size: clamp(36px, 4.6vw, 60px); line-height: 1.08; letter-spacing: -0.025em; }
.h2 { font-weight: 700; font-size: clamp(30px, 3.3vw, 44px); line-height: 1.2; letter-spacing: -0.022em; }
.eyebrow { font-size: clamp(15px, 1.3vw, 19px); font-weight: 600; letter-spacing: 0.03em; }
.band--beige .eyebrow { color: var(--ink); }
.statement__head { gap: 24px; max-width: 1000px; }
.statement .lede { font-size: clamp(17px, 1.45vw, 20px); color: var(--ink); max-width: 76ch; }
.stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px clamp(44px, 6.5vw, 96px); max-width: none; margin-top: 52px; }
.stat { gap: 4px; }
.stat__num { font-size: clamp(34px, 3.3vw, 44px); font-weight: 700; letter-spacing: -0.02em; }
.stat__label { font-size: clamp(13px, 1.1vw, 16px); font-weight: 600; letter-spacing: 0.02em; color: var(--ink); }
@media (max-width: 700px) { .stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; } }
html[lang="th"] .h1 { font-size: clamp(32px, 4.2vw, 54px); }
html[lang="th"] .h2 { font-size: clamp(28px, 3.1vw, 42px); }
@media (max-width: 560px) { .statement h2 br { display: none; } }
.flow--on-dark .flow-ribbon { stroke: rgba(246, 233, 210, 0.065); }
.flow--on-light .flow-ribbon { stroke: rgba(109, 64, 54, 0.055); }

/* Map page key: each zone number in its own shade of the flyer's earth colours, dark to light */
.zone-key .zone-num[data-zone="1"] { background: #5e2c33; color: var(--cream); }
.zone-key .zone-num[data-zone="2"] { background: #6d4036; color: var(--cream); }
.zone-key .zone-num[data-zone="3"] { background: #7a3b35; color: var(--cream); }
.zone-key .zone-num[data-zone="4"] { background: #83412d; color: var(--cream); }
.zone-key .zone-num[data-zone="5"] { background: #8f5240; color: var(--cream); }
.zone-key .zone-num[data-zone="6"] { background: #9c4a3e; color: var(--cream); }
.zone-key .zone-num[data-zone="7"] { background: #ab4525; color: var(--cream); }
.zone-key .zone-num[data-zone="8"] { background: #a84a2c; color: var(--cream); }
.zone-key .zone-num[data-zone="9"] { background: #d08a55; color: var(--brown-deep); }
.zone-key .zone-num[data-zone="10"] { background: #c49050; color: var(--brown-deep); }
.zone-key .zone-num[data-zone="11"] { background: #d98c74; color: var(--brown-deep); }
.zone-key .zone-num[data-zone="12"] { background: #d8a657; color: var(--brown-deep); }
.zone-key .zone-num { width: 32px; height: 32px; font-size: 14px; font-weight: 700; box-shadow: none; }
.zone-key li { grid-template-columns: 34px minmax(0, 1fr); align-items: center; }

/* Quieter background: only the wide ribbons, sun and leaves, all more faded */
.flow--on-dark .flow-ribbon { stroke: rgba(246, 233, 210, 0.04); }
.flow--on-light .flow-ribbon { stroke: rgba(109, 64, 54, 0.033); }
.band--brown .ornament--sun { opacity: 0.12; }
.band--brown .ornament--leaves { opacity: 0.055; }
.band--beige .ornament--sun { opacity: 0.06; }
.band--beige .ornament--leaves { opacity: 0.045; }
.hero__sun { opacity: 0.55; }
@media (max-width: 700px) {
  .band--brown .ornament--sun { opacity: 0.09; }
  .band--brown .ornament--leaves { opacity: 0.045; }
  .band--beige .ornament--sun, .band--beige .ornament--leaves { opacity: 0.04; }
  .hero__sun { opacity: 0.38; }
}

/* Countdown to the gates opening: flip-clock tiles with depth */
.countdown { margin: 52px auto 0; display: grid; justify-items: center; gap: 24px; }
.countdown__label { font-size: clamp(14px, 1.2vw, 17px); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.countdown__tiles { display: flex; gap: clamp(10px, 2vw, 22px); perspective: 900px; }
.cd-tile { display: grid; justify-items: center; gap: 12px; }
.cd-tile__num {
  position: relative; display: grid; place-items: center;
  width: clamp(70px, 8.4vw, 112px); aspect-ratio: 1 / 1.08; border-radius: 18px;
  font-size: clamp(32px, 4.2vw, 54px); font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
  color: var(--cream);
  background: linear-gradient(180deg, #8d5547 0%, #74463a 49%, #613a30 51%, #4e2d25 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 214, 0.28),
    inset 0 -3px 0 rgba(0, 0, 0, 0.22),
    0 6px 0 #3a201a,
    0 22px 34px -14px rgba(74, 42, 35, 0.65);
  transform: rotateX(10deg);
  transform-origin: 50% 100%;
}
.cd-tile__num::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px;
  background: rgba(0, 0, 0, 0.32); box-shadow: 0 1px 0 rgba(255, 236, 214, 0.1);
}
.cd-tile__num::before {
  content: ""; position: absolute; inset: 6px 10px auto; height: 38%; border-radius: 12px 12px 30px 30px;
  background: linear-gradient(180deg, rgba(255, 240, 220, 0.16), rgba(255, 240, 220, 0)); pointer-events: none;
}
.cd-tile__label { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.cd-tile__num.is-flip { animation: cd-flip 0.6s var(--ease); }
@keyframes cd-flip { 0% { transform: rotateX(10deg); } 35% { transform: rotateX(-62deg); } 100% { transform: rotateX(10deg); } }

/* The 3D ticket button: a raised face on a darker base, it sinks when pressed */
.btn-3d {
  position: relative; display: inline-flex; margin-top: 10px; border-radius: var(--r-pill); text-decoration: none;
  background: linear-gradient(180deg, #3f231c, #2e1813);
  box-shadow: 0 22px 40px -16px rgba(74, 42, 35, 0.75), 0 0 0 1px rgba(216, 166, 87, 0.35);
}
.btn-3d__face {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 12px;
  min-height: 62px; padding: 0 36px; border-radius: var(--r-pill);
  font: 700 18px/1 var(--font); letter-spacing: -0.005em; color: var(--cream); white-space: nowrap;
  background: linear-gradient(180deg, #a0614f 0%, #7d4a3d 45%, #6a3d32 100%);
  box-shadow: inset 0 1px 0 rgba(255, 236, 214, 0.4), inset 0 -2px 0 rgba(0, 0, 0, 0.22), inset 0 0 0 1px rgba(216, 166, 87, 0.45);
  transform: translateY(-7px);
  transition: transform 0.18s var(--ease), filter 0.2s;
}
.btn-3d__face .ic { width: 22px; height: 22px; color: var(--gold); }
.btn-3d__face::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 236, 205, 0.35) 50%, transparent 65%);
  transform: translateX(-130%);
}
.btn-3d:hover .btn-3d__face { transform: translateY(-9px); filter: brightness(1.07); }
.btn-3d:active .btn-3d__face { transform: translateY(-2px); filter: brightness(0.97); }
.btn-3d:focus-visible { outline: 2px solid var(--gold); outline-offset: 5px; }
@media (prefers-reduced-motion: no-preference) {
  .btn-3d__face::after { animation: btn-shine 4.2s ease-in-out 1.2s infinite; }
}
@keyframes btn-shine { 0%, 62% { transform: translateX(-130%); } 82%, 100% { transform: translateX(130%); } }
@media (prefers-reduced-motion: reduce) { .cd-tile__num.is-flip { animation: none; } }
@media (max-width: 480px) {
  .countdown__tiles { gap: 8px; }
  .cd-tile__num { width: 21vw; border-radius: 14px; }
  .btn-3d__face { min-height: 56px; padding: 0 26px; font-size: 17px; }
}

/* The walkthrough video card */
.feature { margin: clamp(52px, 6vw, 84px) 0 0; display: grid; gap: 14px; }
.feature .feature-media { margin-top: 0; aspect-ratio: 16 / 9; }
.feature-media img { object-position: center; }
.feature__caption { text-align: center; font-size: 15px; color: var(--ink-soft); }
@media (max-width: 700px) { .feature .feature-media { aspect-ratio: 16 / 9; } }
.cd-tile__num::before { inset: 3px 3px auto; height: 47%; border-radius: 15px 15px 4px 4px; background: linear-gradient(180deg, rgba(255, 240, 220, 0.14), rgba(255, 240, 220, 0.02)); }

/* Polished-stone finish for the countdown tiles and the ticket button:
   smaller and quieter, a soft matte sheen with a fine speckle instead of a glassy shine */
.countdown { gap: 20px; }
.countdown__tiles { gap: clamp(8px, 1.4vw, 16px); }
.cd-tile { gap: 9px; }
.cd-tile__num {
  width: clamp(58px, 6.2vw, 84px); aspect-ratio: 1 / 1.06; border-radius: 14px;
  font-size: clamp(26px, 3vw, 38px); font-weight: 600;
  background:
    radial-gradient(120% 85% at 28% 12%, rgba(255, 238, 218, 0.15), rgba(255, 238, 218, 0) 58%),
    url("../img/grain.png") center / 140px 140px,
    linear-gradient(165deg, #7f4c3e 0%, #6a3d33 52%, #56322a 100%);
  background-blend-mode: normal, overlay, normal;
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 214, 0.2),
    inset 0 -1px 0 rgba(0, 0, 0, 0.25),
    0 3px 0 #3e231c,
    0 12px 20px -12px rgba(74, 42, 35, 0.55);
  transform: none;
}
.cd-tile__num::before { display: none; }
.cd-tile__num::after { background: rgba(0, 0, 0, 0.2); box-shadow: 0 1px 0 rgba(255, 236, 214, 0.06); }
.cd-tile__label { font-size: 12px; }
@keyframes cd-flip { 0% { transform: perspective(500px) rotateX(0); } 40% { transform: perspective(500px) rotateX(-55deg); } 100% { transform: perspective(500px) rotateX(0); } }

.btn-3d { margin-top: 6px; background: #3e231c; box-shadow: 0 12px 22px -12px rgba(74, 42, 35, 0.6), 0 0 0 1px rgba(216, 166, 87, 0.22); }
.btn-3d__face {
  min-height: 48px; padding: 0 26px; gap: 10px; font: 600 16px/1 var(--font);
  background:
    radial-gradient(130% 120% at 25% 0%, rgba(255, 238, 218, 0.17), rgba(255, 238, 218, 0) 55%),
    url("../img/grain.png") center / 140px 140px,
    linear-gradient(170deg, #8a5444 0%, #6f4035 55%, #5c352c 100%);
  background-blend-mode: normal, overlay, normal;
  box-shadow: inset 0 1px 0 rgba(255, 236, 214, 0.24), inset 0 -1px 0 rgba(0, 0, 0, 0.25), inset 0 0 0 1px rgba(216, 166, 87, 0.28);
  transform: translateY(-3px);
}
.btn-3d__face::after { display: none; animation: none; }
.btn-3d__face .ic { width: 18px; height: 18px; }
.btn-3d:hover .btn-3d__face { transform: translateY(-4px); filter: brightness(1.05); }
.btn-3d:active .btn-3d__face { transform: translateY(-1px); filter: none; }
@media (max-width: 480px) {
  .cd-tile__num { width: 18vw; border-radius: 12px; }
  .btn-3d__face { min-height: 46px; padding: 0 22px; font-size: 15px; }
}

/* Texture lives in the section backgrounds only, so buttons, text and photos stay clean */
body::after { display: none; }
.band--brown { background: url("../img/grain-soft.png") 0 0 / 320px 320px, var(--brown); background-blend-mode: overlay, normal; }
.band--beige { background: url("../img/grain-soft.png") 0 0 / 320px 320px, linear-gradient(180deg, var(--beige-1) 0%, var(--beige-2) 100%); background-blend-mode: overlay, normal; }
.hero { background: url("../img/grain-soft.png") 0 0 / 320px 320px, var(--terracotta); background-blend-mode: overlay, normal; }
.site-footer { background: url("../img/grain-soft.png") 0 0 / 320px 320px, var(--brown-deep); background-blend-mode: overlay, normal; }

/* Countdown tiles and the ticket button: smooth polished finish, no speckle */
.cd-tile__num {
  background:
    radial-gradient(120% 85% at 28% 12%, rgba(255, 238, 218, 0.18), rgba(255, 238, 218, 0) 58%),
    linear-gradient(165deg, #8a4f3f 0%, #6e3e33 52%, #573229 100%);
  background-blend-mode: normal;
}
.btn-3d { background: #3e231c; box-shadow: 0 12px 22px -12px rgba(74, 42, 35, 0.6), 0 0 0 1px rgba(216, 166, 87, 0.22); }
.btn-3d__face {
  background:
    radial-gradient(130% 120% at 25% 0%, rgba(255, 238, 218, 0.17), rgba(255, 238, 218, 0) 55%),
    linear-gradient(170deg, #8a5444 0%, #6f4035 55%, #5c352c 100%);
  background-blend-mode: normal;
  box-shadow: inset 0 1px 0 rgba(255, 236, 214, 0.24), inset 0 -1px 0 rgba(0, 0, 0, 0.25), inset 0 0 0 1px rgba(216, 166, 87, 0.28);
}

/* Step numbers as raised gold medallions */
.step__num {
  width: 52px; height: 52px; border: 0; font-size: 20px; font-weight: 700; color: var(--brown-deep);
  background: radial-gradient(circle at 34% 28%, #f6dca6 0%, #e2b56a 38%, #c8914a 72%, #a87332 100%);
  box-shadow:
    inset 0 2px 2px rgba(255, 246, 225, 0.65),
    inset 0 -3px 5px rgba(110, 66, 24, 0.45),
    0 4px 0 #7d5422,
    0 12px 20px -8px rgba(20, 8, 4, 0.55);
  text-shadow: 0 1px 0 rgba(255, 240, 210, 0.7);
}
.step__num::after {
  content: ""; position: absolute; inset: 5px; border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(122, 82, 34, 0.35), 0 1px 0 rgba(255, 246, 225, 0.35);
  pointer-events: none;
}
.steps::before { top: 26px; }



/* Programme page: paper background with the Om mark, and more colour */
.paper-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: #f8f0e3 url("../img/paper-om.webp") right center / cover no-repeat; }
.prog-area { background: transparent; }
.prog-area .prog-bar { background: rgba(250, 243, 232, 0.86); }
.prog-area .allday { background: rgba(255, 250, 243, 0.62); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); border-color: rgba(109, 64, 54, 0.14); }

/* Every zone keeps its own colour wherever its number appears (same shades as the map key) */
.zone-num[data-zone="1"] { background: #5e2c33; color: var(--cream); }
.zone-num[data-zone="2"] { background: #6d4036; color: var(--cream); }
.zone-num[data-zone="3"] { background: #7a3b35; color: var(--cream); }
.zone-num[data-zone="4"] { background: #83412d; color: var(--cream); }
.zone-num[data-zone="5"] { background: #8f5240; color: var(--cream); }
.zone-num[data-zone="6"] { background: #9c4a3e; color: var(--cream); }
.zone-num[data-zone="7"] { background: #ab4525; color: var(--cream); }
.zone-num[data-zone="8"] { background: #a84a2c; color: var(--cream); }
.zone-num[data-zone="9"] { background: #d08a55; color: var(--brown-deep); }
.zone-num[data-zone="10"] { background: #c49050; color: var(--brown-deep); }
.zone-num[data-zone="11"] { background: #d98c74; color: var(--brown-deep); }
.zone-num[data-zone="12"] { background: #d8a657; color: var(--brown-deep); }
.zone-num[data-zone] { width: 32px; height: 32px; font-size: 14px; font-weight: 700; box-shadow: none; }
.prog-row__where { grid-template-columns: 34px minmax(0, 1fr); }
.allday li { grid-template-columns: 34px minmax(0, 1fr); align-items: center; }

/* Badges: green for free (like the Garden Pass), terracotta for Full Access, plum for invite only */
.badge--free { background: #dce6c8; color: #3f5629; box-shadow: none; }
.badge--full { background: #8a4430; color: var(--cream); box-shadow: none; }
.badge--invite { background: rgba(94, 44, 51, 0.08); color: #5e2c33; box-shadow: none; }

.prog-row__time span:first-child { color: #9c4a35; }
/* Footer: dark colours show grain less, so it gets a stronger grain to keep the paper feel */
.site-footer { background: url("../img/grain-mid.png") 0 0 / 320px 320px, var(--brown-deep); background-blend-mode: overlay, normal; }
/* Full Access badge a touch deeper so its small text reads easily */
.badge--full { background: #8a4430; }

/* Two suns, as in the hero artwork: the cut-out sun shape in soft gold. One sits behind the reel with its
   straight right edge hidden under the video; a mirrored copy peeks in from the left edge of the page.
   Both are 1.515 times the reel's width, so they keep the same size and place on any screen. */
.hero__sun {
  top: auto; right: auto; height: auto; aspect-ratio: 389 / 434; opacity: 0.68; pointer-events: none;
  background: var(--gold);
  -webkit-mask: url("../img/ornament-sun.webp") center / contain no-repeat;
  mask: url("../img/ornament-sun.webp") center / contain no-repeat;
}
.hero__reel-wrap { position: relative; }
/* Behind the reel: the half sun and its mirror image meet into one full sun, its face centred on the reel,
   so the same rays reach out on both sides. Each half is 151.5% of the reel's width; the pair spans
   229.6% of it. The reel's edges sit at 28.22% and 71.78% of the pair, and the rays fade out between
   24px and 90px beyond each edge, so they never run into the text. */
.hero__sun-pair {
  position: absolute; left: -64.8%; top: 6.8%; width: 229.6%; aspect-ratio: 1.3584; z-index: -1; pointer-events: none;
  -webkit-mask: linear-gradient(90deg, transparent calc(28.22% - 90px), #000 calc(28.22% - 24px), #000 calc(71.78% + 24px), transparent calc(71.78% + 90px));
  mask: linear-gradient(90deg, transparent calc(28.22% - 90px), #000 calc(28.22% - 24px), #000 calc(71.78% + 24px), transparent calc(71.78% + 90px));
}
.hero__sun--half { top: 0; left: 0; width: 65.98%; height: 100%; aspect-ratio: auto; }
.hero__sun--mirror { left: auto; right: 0; transform: scaleX(-1); }
.hero__sun--left {
  left: 0; top: 54%; width: calc(1.515 * min(380px, 30vw, (100dvh - var(--header-h) - 120px) * 0.5625));
  transform: translate(-52%, -50%) scaleX(-1);
}
@media (max-width: 860px) {
  .hero__reel-wrap { justify-self: center; }
  .hero__sun--left { display: none; }
  .hero__sun--half { opacity: 0.5; }
}

/* Step numbers flat (2D): plain gold circles, no shine, edge or shadow */
.step__num { background: var(--gold); box-shadow: none; text-shadow: none; }
.step__num::after { display: none; }

/* Primary font: Bagnard for every title. Inter stays for everything else (text, buttons, labels, numbers).
   Bagnard has one weight and no Thai letters, so Thai titles (and the ฿ sign) use Noto Serif Thai to match.
   The 400 to 700 range stops browsers from drawing a fake bold on top of Bagnard. */
@font-face {
  font-family: "Bagnard";
  src: url("../fonts/Bagnard-Regular.ttf") format("truetype");
  font-weight: 400 700; font-style: normal; font-display: swap;
}
:root { --font-title: "Bagnard", "Noto Serif Thai", Georgia, "Times New Roman", serif; }
h1, h2, h3, h4,
.pass__name, .tier__name, .session-card__title, .prog-row__title, .eticket__pass {
  font-family: var(--font-title); font-weight: 600; font-synthesis: none;
}
.hero__title { font-family: var(--font); }
.h1 { line-height: 1.08; letter-spacing: -0.01em; }
.h2 { line-height: 1.14; letter-spacing: -0.008em; }
.h3, .h4, .pass__name, .tier__name, .session-card__title, .prog-row__title, .eticket__pass { letter-spacing: 0; }
/* The small headings that were uppercase labels read as titles now */
.fact h3, .footer-grid h2, .allday h2 { font-size: 19px; letter-spacing: 0; text-transform: none; line-height: 1.3; }
.band--beige .fact h3, .allday h2 { color: var(--ink); }

/* Timetable (home page): one day at a time, rooms side by side, scroll and zoom.
   Colours follow the printed timetable: a terracotta board, cream room headers and sessions coloured by kind.
   --ppm is the height of one minute in pixels; timetable.js changes it to zoom. */
.tt {
  margin-top: 44px; display: grid; gap: 16px;
  --tt-board: #a95f4b; --tt-col: #c18d7a; --tt-head: #fff3dd;
  --tt-move: #e6baa2; --tt-sound: #f2e1c6; --tt-art: #d6c9ac; --tt-dj: #624749; --tt-ceremony: #775047;
}
.tt-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; }
.tt-jump { display: flex; flex-wrap: wrap; gap: 8px; }
.tt-zoom { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; padding: 4px; border-radius: var(--r-pill); background: rgba(109, 64, 54, 0.08); }
.tt-zoom__btn {
  width: 40px; height: 40px; border: 0; border-radius: var(--r-pill); background: var(--paper); color: var(--brown);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color 0.2s, opacity 0.2s;
}
.tt-zoom__btn:hover { background: #fff; }
.tt-zoom__btn:disabled { opacity: 0.4; cursor: default; }
.tt-zoom__level { min-width: 54px; text-align: center; font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.tt-note { font-size: 15px; color: var(--ink-soft); }

.tt-stage { position: relative; border-radius: var(--r-card); overflow: hidden; background: var(--tt-board); box-shadow: var(--shadow); }
.tt-view { height: min(74vh, 780px); overflow: auto; touch-action: pan-x pan-y; overscroll-behavior-x: contain; }
.tt-view:focus-visible { outline: 2px solid var(--gold); outline-offset: -3px; border-radius: var(--r-card); }
.tt-grid {
  --ppm: 1.4;
  position: relative; display: grid; min-width: min-content;
  grid-template-columns: 58px repeat(var(--cols), minmax(150px, 1fr));
  grid-template-rows: auto calc(var(--len) * var(--ppm) * 1px);
  column-gap: 6px; row-gap: 10px; padding: 0 14px 22px 0;
}
.tt-corner, .tt-room { position: sticky; top: 0; z-index: 3; grid-row: 1; background: var(--tt-board); padding: 14px 0 0; }
.tt-corner { left: 0; z-index: 4; grid-column: 1; }
.tt-room__box {
  height: 100%; display: grid; align-content: center; justify-items: center; gap: 1px; padding: 8px 8px 7px;
  border-radius: 4px; background: var(--tt-head); color: var(--brown-deep); text-align: center;
}
.tt-room__name { font-family: var(--font-title); font-weight: 600; font-synthesis: none; font-size: 17px; line-height: 1.15; }
.tt-room__sub { font-size: 12px; line-height: 1.3; color: var(--ink-soft); }
.tt-room__free { font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #3f5629; background: #dce6c8; border-radius: var(--r-pill); padding: 1px 8px; margin-top: 3px; }
.tt-times { position: sticky; left: 0; z-index: 2; grid-column: 1; grid-row: 2; background: var(--tt-board); }
.tt-times span {
  position: absolute; right: 10px; top: calc(var(--s) * var(--ppm) * 1px); transform: translateY(-50%);
  font-size: 12px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; color: var(--tt-head);
}
.tt-col {
  position: relative; grid-row: 2;
  background-color: var(--tt-col);
  background-image:
    repeating-linear-gradient(180deg, rgba(255, 243, 221, 0.3) 0 1px, transparent 1px calc(var(--ppm) * 60px)),
    repeating-linear-gradient(180deg, rgba(255, 243, 221, 0.13) 0 1px, transparent 1px calc(var(--ppm) * 30px));
}
.tt-s {
  position: absolute; left: 0; right: 0;
  top: calc(var(--s) * var(--ppm) * 1px + 1px); height: calc(var(--d) * var(--ppm) * 1px - 2px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: 6px 8px; border: 0; border-radius: 3px; overflow: hidden; cursor: pointer; text-align: center;
  font: inherit; color: var(--brown-deep); transition: filter 0.15s, box-shadow 0.15s;
}
.tt-s:hover { filter: brightness(1.05); box-shadow: 0 8px 18px -10px rgba(40, 20, 15, 0.7); z-index: 1; }
.tt-s:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; z-index: 1; }
.tt-s.is-active { box-shadow: 0 0 0 2px var(--gold), 0 10px 22px -10px rgba(40, 20, 15, 0.8); z-index: 1; }
.tt-s__title {
  font-family: var(--font-title); font-weight: 600; font-synthesis: none; font-size: 15px; line-height: 1.2;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tt-s__time { font-size: 12.5px; line-height: 1.3; font-variant-numeric: tabular-nums; }
.tt-s__host { font-size: 12px; line-height: 1.3; opacity: 0.85; }
/* Sizes by block height: lg shows everything, md drops the host, sm shrinks the text, xs keeps the title only */
.tt-s[data-size="md"] .tt-s__title, .tt-s[data-size="sm"] .tt-s__title, .tt-s[data-size="xs"] .tt-s__title { -webkit-line-clamp: 1; }
.tt-s[data-size="md"] .tt-s__host, .tt-s[data-size="sm"] .tt-s__host { display: none; }
.tt-s[data-size="sm"] { padding: 2px 6px; gap: 0; }
.tt-s[data-size="sm"] .tt-s__title { font-size: 13.5px; line-height: 1.15; }
.tt-s[data-size="sm"] .tt-s__time { font-size: 11.5px; line-height: 1.25; }
.tt-s[data-size="xs"] { padding: 1px 6px; }
.tt-s[data-size="xs"] .tt-s__title { font-size: 12.5px; line-height: 1.15; }
.tt-s[data-size="xs"] .tt-s__time, .tt-s[data-size="xs"] .tt-s__host { display: none; }
.tt-s--move { background: var(--tt-move); }
.tt-s--sound { background: var(--tt-sound); }
.tt-s--art { background: var(--tt-art); }
.tt-s--dj { background: var(--tt-dj); color: var(--tt-head); }
.tt-s--ceremony { background: var(--tt-ceremony); color: var(--tt-head); }
.tt-now {
  grid-column: 2 / -1; grid-row: 2; align-self: start; position: relative; z-index: 2; pointer-events: none;
  margin-top: calc(var(--s) * var(--ppm) * 1px); height: 2px; background: var(--gold);
}
.tt-now span {
  position: absolute; left: 4px; top: -10px; padding: 2px 8px; border-radius: var(--r-pill);
  background: var(--gold); color: var(--brown-deep); font-size: 11px; font-weight: 600; line-height: 1.4;
}

.tt-detail {
  position: absolute; z-index: 5; left: 12px; right: 12px; bottom: 12px; max-width: 420px; margin-inline: auto;
  display: grid; gap: 8px; padding: 18px 20px 20px; border-radius: 16px; background: var(--paper); color: var(--ink);
  box-shadow: 0 26px 50px -18px rgba(40, 20, 15, 0.75);
}
.tt-detail__close {
  position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; border: 0; border-radius: var(--r-pill);
  background: rgba(109, 64, 54, 0.08); color: var(--brown); display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.tt-detail__title { font-size: 22px; line-height: 1.2; padding-right: 44px; color: var(--brown-deep); display: flex; align-items: center; gap: 10px; }
.tt-detail__meta { display: flex; align-items: flex-start; gap: 8px; font-size: 15px; line-height: 1.45; }
.tt-detail__meta .ic { margin-top: 3px; color: var(--brown); flex: none; }
.tt-detail__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 4px; }
.tt-detail__link { font-size: 15px; font-weight: 500; color: var(--brown); text-underline-offset: 3px; }
.tt-detail__note { font-size: 14px; color: var(--ink-soft); }

.tt-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; }
.tt-key { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; color: var(--ink-soft); }
.tt-key li { display: inline-flex; align-items: center; gap: 8px; }
.tt-swatch { width: 14px; height: 14px; flex: none; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(74, 42, 35, 0.16); }
.tt-swatch--move { background: var(--tt-move); }
.tt-swatch--sound { background: var(--tt-sound); }
.tt-swatch--art { background: var(--tt-art); }
.tt-swatch--dj { background: var(--tt-dj); }
.tt-swatch--ceremony { background: var(--tt-ceremony); }
.tt-hint { font-size: 13px; color: var(--ink-soft); }
.tt-between {
  display: grid; gap: 6px; padding: 18px 22px; border-radius: 16px;
  background: rgba(255, 250, 243, 0.7); border: 1px solid var(--line-beige);
}
.tt-between__title { font-size: 20px; line-height: 1.2; color: var(--brown-deep); }
.tt-between__list { font-size: 15px; }
.tt-between__list .tt-sep { color: var(--ink-soft); padding: 0 6px; }
.tt-between__where { font-size: 13px; color: var(--ink-soft); }
.tt-small { font-size: 13px; color: var(--ink-soft); }
@media (max-width: 700px) {
  .tt { margin-top: 32px; }
  .tt-zoom { margin-left: 0; }
  .tt-view { height: min(70svh, 640px); }
  .tt-grid { grid-template-columns: 50px repeat(var(--cols), minmax(140px, 1fr)); padding-right: 10px; }
  .tt-room__name { font-size: 16px; }
}

/* Countdown tiles: a streaky leaf-fibre texture in brown gradients (Dany, 2 Nov), from assets/img/leaf-brown.webp.
   Each tile shows a different part of it, so no two look the same. Cream numbers stay readable on the lightest streak. */
.cd-tile__num {
  background:
    radial-gradient(120% 85% at 28% 12%, rgba(255, 238, 218, 0.14), rgba(255, 238, 218, 0) 58%),
    linear-gradient(180deg, rgba(40, 18, 12, 0) 45%, rgba(40, 18, 12, 0.22) 100%),
    url("../img/leaf-brown.webp") var(--leaf-pos, 0 0) / 260px auto;
  background-blend-mode: normal;
  text-shadow: 0 1px 2px rgba(30, 12, 8, 0.45);
}
.cd-tile:nth-child(2) .cd-tile__num { --leaf-pos: 38% 62%; }
.cd-tile:nth-child(3) .cd-tile__num { --leaf-pos: 72% 18%; }
.cd-tile:nth-child(4) .cd-tile__num { --leaf-pos: 100% 86%; }

/* The ticket button wears the same brown leaf texture as the countdown tiles (Dany, 2 Nov).
   The texture covers the whole face, so it never shows a seam however long the words get.
   A soft sheen sits above the words and a shade below them; the words themselves sit on the bare texture. */
.btn-3d__face {
  background:
    linear-gradient(180deg, rgba(255, 238, 218, 0.12) 0%, rgba(255, 238, 218, 0) 30%, rgba(40, 18, 12, 0) 68%, rgba(40, 18, 12, 0.24) 100%),
    url("../img/leaf-brown.webp") 30% 45% / cover;
  background-blend-mode: normal;
  text-shadow: 0 1px 2px rgba(30, 12, 8, 0.45);
}

/* Countdown tiles and ticket button recoloured to Dany's cocoa swatch (2 Nov): the leaf streaks now run in one
   cocoa brown (#684339 in the middle, from assets/img/leaf-cocoa.webp), with no sheen or shade laid over the top,
   so what shows is the swatch colour itself. The darker edges under the tiles and the button use the same brown, deeper. */
.cd-tile__num {
  background: url("../img/leaf-cocoa.webp") var(--leaf-pos, 0 0) / 260px auto;
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 214, 0.2),
    inset 0 -1px 0 rgba(0, 0, 0, 0.25),
    0 3px 0 #3e2822,
    0 12px 20px -12px rgba(62, 40, 34, 0.55);
}
.btn-3d { background: #3e2822; }
.btn-3d__face { background: url("../img/leaf-cocoa.webp") 30% 45% / cover; }

/* Top-bar links stay on one line: with the longer "Get Free Pass" button (2 Nov), "Festival map" split in two just above the menu width */
.site-nav a { white-space: nowrap; }

/* New order (Dany, 2 Nov). Second section, on the light band: what it is, the countdown, the video, then What to expect.
   The flyers get a softer brown shadow on the light background. */
.statement .expect { margin-top: clamp(72px, 8vw, 112px); }
.statement .expect + .wrap { margin-top: 0; }
.statement .expect-slide {
  background: rgba(74, 42, 35, 0.08);
  box-shadow: 0 0 0 1px rgba(216, 166, 87, 0.3), 0 26px 44px -28px rgba(74, 42, 35, 0.55);
}
/* Third section, the brown band, now opens straight on the signature experiences */
.offer-band .signature { margin-top: 0; }

/* The two date badges in the opening section, enlarged (Dany, 2 Nov): about half again as big as before,
   a little smaller on phones so both still fit side by side */
.hero__copy .date-chips { gap: 12px; }
.hero__copy .date-chip { height: 2.55em; padding: 0 1.1em; font-size: clamp(16px, 1.5vw, 19px); }

/* The Get Free Pass button in the opening section glows (Dany, 2 Nov): a warm halo that slowly swells and settles.
   With reduced motion it keeps a steady glow instead. */
.btn--glow { box-shadow: 0 0 28px 8px rgba(255, 222, 170, 0.6); }
@media (prefers-reduced-motion: no-preference) {
  .btn--glow { animation: btn-glow 2.8s ease-in-out infinite; }
  .btn--glow:hover { animation-play-state: paused; }
}
@keyframes btn-glow {
  0%, 100% { box-shadow: 0 0 16px 3px rgba(255, 222, 170, 0.45), 0 0 0 0 rgba(255, 238, 210, 0); }
  50% { box-shadow: 0 0 46px 14px rgba(255, 222, 170, 0.85), 0 0 0 6px rgba(255, 238, 210, 0.3); }
}

/* The line under WELLNESS WEEKEND, made easier to read (Dany, 2 Nov): a little bigger and bolder, in full cream,
   with "Free entry for everyone." picked out in bold light gold */
.hero__sub { font-size: clamp(17px, 1.45vw, 20px); font-weight: 500; line-height: 1.55; color: var(--cream); max-width: 42ch; text-shadow: 0 1px 2px rgba(40, 16, 10, 0.35); }
.hero__sub strong { font-weight: 700; color: #f3d9a6; }

/* Giving back (Dany, 2 Nov): House of Om's charity work, words on the left and the photo on the right.
   On phones the words come first and the photo sits under them. */
.giving__inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(36px, 5vw, 80px); align-items: center; }
.giving__text { display: grid; gap: 18px; }
.giving__text .h2 { margin: 0 0 4px; }
.giving__text p { margin: 0; }
.giving__text p.muted { font-size: clamp(16px, 1.25vw, 18px); line-height: 1.6; max-width: 52ch; }
.giving__photo { margin: 0; border-radius: var(--r-card); overflow: hidden; aspect-ratio: 1386 / 774; background: var(--brown-deep); box-shadow: 0 0 0 1px rgba(216, 166, 87, 0.35), 0 30px 60px -30px rgba(30, 12, 8, 0.7); }
.giving__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 900px) { .giving__inner { grid-template-columns: minmax(0, 1fr); } }

/* Tickets on the home page (Dany, 2 Nov night): Free Pass on the left, the Workshop Pass on a gold-edged panel,
   then the six kinds of workshop the Workshop Pass opens. */
.passes { align-items: start; }
.passes .pass.pass--feature {
  margin: 28px 0 0 clamp(20px, 3vw, 40px); padding: clamp(28px, 3vw, 40px); border: 1px solid rgba(216, 166, 87, 0.55);
  border-radius: var(--r-card); background: linear-gradient(160deg, rgba(216, 166, 87, 0.2) 0%, rgba(216, 166, 87, 0.05) 100%), rgba(40, 18, 12, 0.18);
  box-shadow: 0 30px 60px -34px rgba(20, 8, 5, 0.8);
}
.pass__flag {
  justify-self: start; margin: 0 0 6px; height: 28px; padding: 0 12px; border-radius: var(--r-pill); display: inline-flex; align-items: center;
  background: var(--gold); color: var(--brown-deep); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
}
.pass__stats { margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.pass__stats span {
  display: grid; gap: 2px; padding: 12px 16px; border-radius: 14px; min-width: 104px;
  background: rgba(246, 233, 210, 0.08); box-shadow: inset 0 0 0 1px rgba(216, 166, 87, 0.35);
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-brown-soft);
}
.pass__stats strong { font-family: var(--font-title); font-weight: 600; font-synthesis: none; font-size: 30px; line-height: 1; letter-spacing: 0; text-transform: none; color: #f3d9a6; }
.pass .ticks strong { color: #fff3dd; font-weight: 600; }
.pass .ticks .is-plus { color: #f3d9a6; }
@media (max-width: 800px) {
  .passes .pass.pass--feature { margin: 28px 0 0; border-top: 1px solid rgba(216, 166, 87, 0.55); }
}

.pass-cats { margin-top: clamp(56px, 7vw, 88px); padding-top: clamp(36px, 4vw, 48px); border-top: 1px solid var(--line-brown); display: grid; gap: 28px; }
.pass-cats__head { display: grid; gap: 10px; }
.pass-cats__head .h3 { margin: 0; }
.pass-cats__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 48px); }
.pass-cats__list li {
  display: grid; grid-template-columns: 56px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 16px; row-gap: 4px;
  padding: 22px 0; border-bottom: 1px solid var(--line-brown); align-content: start;
}
.pass-cats__art {
  grid-row: 1 / 3; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; color: #f3d9a6;
  background: rgba(246, 233, 210, 0.08); box-shadow: 0 0 0 1px rgba(216, 166, 87, 0.45);
}
.pass-cats__art svg { width: 64%; height: 64%; }
.pass-cats__list strong { font-family: var(--font-title); font-weight: 600; font-synthesis: none; font-size: 21px; line-height: 1.2; color: var(--cream); }
.pass-cats__list li > span:last-child { font-size: 15px; line-height: 1.5; color: var(--on-brown-soft); }
.pass-cats__foot { margin: 0; }
.pass-cats__foot .text-link { color: var(--cream); }
@media (max-width: 960px) { .pass-cats__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .pass-cats__list { grid-template-columns: minmax(0, 1fr); } }

/* Which pass each signature event needs */
.sig-card { position: relative; }
.sig-card__pass {
  position: absolute; top: clamp(22px, 2.2vw, 30px); right: clamp(18px, 2vw, 26px); height: 26px; padding: 0 11px; border-radius: var(--r-pill);
  display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--cream); color: var(--brown-deep);
}
.sig-card__pass--free { background: rgba(246, 233, 210, 0.14); color: #f3d9a6; box-shadow: inset 0 0 0 1px rgba(243, 217, 166, 0.6); }
.sig-card--gold .sig-card__pass { background: var(--brown-deep); color: var(--cream); }
@media (max-width: 520px) {
  .pass__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pass__stats span { min-width: 0; }
  .pass__stats span:last-child { grid-column: 1 / -1; }
}

/* Gallery (Dany, 2 Nov): five columns of two photos with staggered tops, centred on the page,
   running off both edges like the reference. Each photo opens large in a lightbox (gallery.js). */
.gallery__head { display: grid; gap: 18px; justify-items: center; text-align: center; max-width: 900px; margin-inline: auto; }
.gallery__head .lede { margin-inline: auto; color: var(--ink-soft); }
.gallery__grid {
  --w: clamp(160px, 21.5vw, 420px); --g: clamp(10px, 1.45vw, 28px);
  display: flex; justify-content: center; gap: var(--g); overflow: hidden;
  margin-top: clamp(48px, 6vw, 80px);
}
.gallery__col { flex: 0 0 var(--w); display: grid; gap: var(--g); align-content: start; }
.gallery__col:nth-child(2) { padding-top: calc(var(--w) * 0.12); }
.gallery__col:nth-child(3) { padding-top: calc(var(--w) * 0.25); }
.gallery__col:nth-child(4) { padding-top: calc(var(--w) * 0.15); }
.gallery__col:nth-child(5) { padding-top: 0; }
.gallery__ph {
  margin: 0; aspect-ratio: var(--ar); overflow: hidden; border-radius: clamp(14px, 1.5vw, 24px);
  background: #cdbfa6; box-shadow: 0 24px 40px -30px rgba(59, 37, 32, 0.55);
}
.gallery__ph img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.8s var(--ease); }
@media (hover: hover) { .gallery__ph:hover img { transform: scale(1.04); } }
@media (max-width: 600px) { .gallery__grid { --w: 46vw; --g: 10px; } }

.gallery__open { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.gallery__open:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; border-radius: inherit; }

/* The lightbox: the photo large and uncropped on a dark screen, with a caption, a counter, arrows and a close button */
html.is-lightbox { overflow: hidden; }
.lightbox {
  width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: transparent; color: var(--cream); overflow: hidden;
}
.lightbox::backdrop { background: rgba(24, 12, 9, 0.92); }
.lightbox[open] { display: grid; place-items: center; }
.lightbox__fig { margin: 0; display: grid; justify-items: center; gap: 14px; padding: 64px clamp(16px, 7vw, 96px) 24px; }
.lightbox__fig img {
  display: block; max-width: min(100%, 1400px); max-height: calc(100dvh - 150px); width: auto; height: auto;
  border-radius: 16px; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.8); background: #2a1813;
}
.lightbox__fig figcaption { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; max-width: 70ch; text-align: center; font-size: 15px; line-height: 1.5; color: rgba(246, 233, 210, 0.86); }
.lightbox__count { color: var(--gold); font-variant-numeric: tabular-nums; font-weight: 600; }
.lightbox__btn {
  position: fixed; width: 48px; height: 48px; border-radius: var(--r-pill); border: 0; display: grid; place-items: center; cursor: pointer;
  background: rgba(246, 233, 210, 0.14); color: var(--cream); box-shadow: inset 0 0 0 1px rgba(246, 233, 210, 0.28);
  transition: background 0.2s;
}
.lightbox__btn:hover { background: rgba(246, 233, 210, 0.26); }
.lightbox__btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.lightbox__btn .ic { width: 22px; height: 22px; }
.lightbox__close { top: 16px; right: 16px; }
.lightbox__nav { top: 50%; margin-top: -24px; }
.lightbox__nav--prev { left: clamp(10px, 2vw, 28px); }
.lightbox__nav--next { right: clamp(10px, 2vw, 28px); }
@media (max-width: 600px) {
  .lightbox__fig { padding: 72px 12px 96px; }
  .lightbox__fig img { max-height: calc(100dvh - 220px); border-radius: 12px; }
  .lightbox__nav { top: auto; bottom: 24px; margin-top: 0; }
  .lightbox__nav--prev { left: calc(50% - 60px); }
  .lightbox__nav--next { right: calc(50% - 60px); }
}
@media (prefers-reduced-motion: no-preference) {
  .lightbox[open] .lightbox__fig { animation: lightbox-in 0.35s var(--ease); }
  .lightbox[open]::backdrop { animation: lightbox-fade 0.3s ease; }
}
@keyframes lightbox-in { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes lightbox-fade { from { opacity: 0; } to { opacity: 1; } }

/* Signature tags: back to their original colours (Victoria, 2 Nov late), undoing the one-colour look from earlier that day.
   "Workshop Pass" is cream, "Free for everyone" a gold outline, and the tag on the gold pyramid card dark brown (rules above). */

/* Five ways in (Dany, 2 Nov night): the photos lead. Five tall photo tiles with the names on them;
   the chosen one opens wider with a gold edge. The short line and the sessions sit underneath, smaller.
   On phones the tiles slide sideways instead. */
.ways__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 48px; }
.ways__head .h2 { margin: 0; }
.ways__head p { margin: 0; max-width: 36ch; font-size: 16px; line-height: 1.55; }
.ways__tiles { margin-top: clamp(32px, 4vw, 48px); display: flex; gap: clamp(8px, 1vw, 14px); height: clamp(460px, 44vw, 620px); }
.way {
  position: relative; flex: 1 1 0; min-width: 0; padding: 0; border: 0; border-radius: clamp(18px, 1.8vw, 28px); overflow: hidden;
  cursor: pointer; background: #2a1813; color: #fff3dd; text-align: left; font: inherit;
  box-shadow: 0 30px 50px -36px rgba(42, 24, 19, 0.8);
  transition: flex-grow 0.75s var(--ease), box-shadow 0.3s;
}
.way[aria-selected="true"] { flex-grow: 3.2; box-shadow: 0 0 0 3px var(--gold), 0 36px 60px -34px rgba(42, 24, 19, 0.85); }
.way img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.9) brightness(0.84); transition: transform 1s var(--ease), filter 0.4s;
}
.way[aria-selected="true"] img { filter: none; }
@media (hover: hover) { .way:hover img { transform: scale(1.04); filter: none; } }
.way::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(20, 8, 5, 0.18) 0%, rgba(20, 8, 5, 0) 26%, rgba(20, 8, 5, 0) 46%, rgba(20, 8, 5, 0.78) 100%); }
.way__num { position: absolute; z-index: 1; top: 16px; left: 18px; font-size: 13px; font-weight: 700; letter-spacing: 0.14em; color: rgba(255, 243, 221, 0.92); }
.way__text { position: absolute; z-index: 1; left: 18px; right: 18px; bottom: 20px; display: grid; gap: 8px; }
.way__name {
  font-family: var(--font-title); font-weight: 600; font-synthesis: none; font-size: clamp(19px, 1.55vw, 24px); line-height: 1.1;
  color: #fff3dd; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}
.way[aria-selected="true"] .way__name { font-size: clamp(30px, 3.1vw, 48px); }
.way[aria-selected="true"] .way__text { left: clamp(20px, 2.2vw, 32px); bottom: clamp(22px, 2.4vw, 34px); }
.way__meta { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #f3d9a6; }
.way:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.ways__detail { margin-top: clamp(22px, 2.6vw, 32px); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(20px, 3vw, 48px); align-items: start; }
.ways__detail.is-entering { animation: fadeIn 0.45s var(--ease) both; }
.ways__note { display: grid; gap: 12px; justify-items: start; }
.ways__note p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); }
.ways__rail { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 10px; scrollbar-width: thin; }
.way-sess {
  flex: 0 0 188px; scroll-snap-align: start; display: grid; gap: 5px; align-content: start; padding: 14px 16px;
  border-radius: 16px; background: rgba(255, 250, 243, 0.78); border: 1px solid var(--line-beige);
}
.way-sess__when { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; color: #9a5a2c; }
.way-sess__title { margin: 0; font-family: var(--font-title); font-weight: 600; font-synthesis: none; font-size: 17px; line-height: 1.2; color: var(--brown-deep); }
.way-sess__where { margin: 0; font-size: 13px; color: var(--ink-soft); }
.way-sess .badge { justify-self: start; margin-top: 4px; height: 24px; padding: 0 10px; font-size: 11px; }
@media (prefers-reduced-motion: reduce) { .way { transition: none; } .ways__detail.is-entering { animation: none; } }
@media (max-width: 900px) {
  .ways__tiles {
    height: auto; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(50% - 50vw); padding: 4px max(16px, calc(50vw - 50%)) 8px; scroll-padding-inline: max(16px, calc(50vw - 50%));
  }
  .ways__tiles::-webkit-scrollbar { display: none; }
  .way, .way[aria-selected="true"] { flex: 0 0 min(74vw, 340px); height: min(112vw, 460px); scroll-snap-align: center; }
  .way__name, .way[aria-selected="true"] .way__name { font-size: 28px; }
  .way img { filter: none; }
  .ways__detail { grid-template-columns: minmax(0, 1fr); }
  .ways__rail { margin-inline: calc(50% - 50vw); padding-inline: max(16px, calc(50vw - 50%)); }
}

/* Tickets on the home page, kept short (Dany, 2 Nov late). Both passes are panels built the same way, and CSS subgrid
   puts the tag, name, price, line, numbers, list and button of each pass on the same lines. */
.passes--even {
  margin-top: clamp(32px, 4vw, 48px); border-top: 0; align-items: stretch;
  grid-template-rows: repeat(7, auto); column-gap: clamp(16px, 2.4vw, 32px); row-gap: 0;
}
.passes--even .pass, .passes--even .pass + .pass, .passes--even .pass.pass--feature {
  --pass-pad: clamp(26px, 3vw, 40px);
  grid-row: span 7; display: grid; grid-template-rows: subgrid; row-gap: 14px; align-content: start;
  margin: 0; padding: var(--pass-pad); border-radius: var(--r-card);
}
.passes--even .pass:not(.pass--feature) {
  border: 1px solid rgba(246, 233, 210, 0.26); background: rgba(246, 233, 210, 0.05);
  box-shadow: 0 30px 60px -38px rgba(20, 8, 5, 0.7);
}
.passes--even .pass__flag { margin: 0; align-self: start; }
.pass__flag--free { background: rgba(246, 233, 210, 0.14); color: #f3d9a6; box-shadow: inset 0 0 0 1px rgba(243, 217, 166, 0.6); }
.passes--even .pass__name, .passes--even .pass__price { margin: 0; align-self: end; }
.pass__sub { margin: 0; color: var(--on-brown-soft); font-size: 17px; line-height: 1.5; }
.passes--even .pass__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.passes--even .pass__stats span { min-width: 0; padding: 12px 12px; font-size: 11.5px; letter-spacing: 0.06em; }
.passes--even .pass__stats strong { font-size: clamp(21px, 2vw, 28px); }
.passes--even .ticks { align-self: start; }
.passes--even .pass .btn { align-self: end; margin-top: 6px; }
.passes__more { margin: clamp(24px, 3vw, 36px) 0 0; text-align: center; }
.passes__more .text-link { color: var(--cream); }
@media (max-width: 800px) {
  .passes--even .pass + .pass { margin-top: 18px; }
}
@media (max-width: 520px) {
  .passes--even .pass, .passes--even .pass + .pass, .passes--even .pass.pass--feature { --pass-pad: 20px; row-gap: 12px; }
  .passes--even .pass__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .passes--even .pass__stats span:last-child { grid-column: auto; }
  .passes--even .pass__stats span { padding: 8px 9px; font-size: 10px; letter-spacing: 0.04em; }
  .passes--even .pass__stats strong { font-size: 19px; }
  .passes--even .pass__sub { font-size: 15.5px; }
}

/* Cookie choice (PDPA brief, 2 Nov late). Tracking set in config.js loads only after Accept (assets/js/site.js). */
.cookie {
  position: fixed; z-index: 80; left: 16px; bottom: 16px; width: min(420px, calc(100vw - 32px));
  padding: 18px 20px; border-radius: 18px; background: var(--brown-deep); color: var(--cream);
  box-shadow: 0 24px 60px -20px rgba(20, 8, 5, 0.75), inset 0 0 0 1px rgba(216, 166, 87, 0.35);
  display: grid; gap: 14px; font-size: 14.5px; line-height: 1.5;
}
.cookie[hidden] { display: none; }
.cookie p { margin: 0; color: var(--on-brown-soft); }
.cookie strong { color: var(--cream); }
.cookie a { color: var(--cream); text-decoration: underline; text-underline-offset: 3px; }
.cookie__btns { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie .btn { min-height: 40px; }
.cookie-link { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* Privacy and terms page */
.legal { max-width: 760px; display: grid; gap: clamp(36px, 5vw, 56px); }
.legal .legal__toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.legal__toc a {
  display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border-radius: var(--r-pill);
  background: var(--paper); color: var(--brown); box-shadow: inset 0 0 0 1px rgba(109, 64, 54, 0.22); text-decoration: none; font-weight: 500; font-size: 15px;
}
.legal__toc a:hover { box-shadow: inset 0 0 0 1px var(--brown); }
.legal section { display: grid; gap: 14px; scroll-margin-top: 110px; }
.legal h2 { margin: 0; }
.legal h3 { margin: 10px 0 0; font-size: 19px; }
.legal p, .legal li { color: var(--ink-soft); font-size: 17px; line-height: 1.65; }
.legal p { margin: 0; }
.legal ul { margin: 0; padding-left: 22px; display: grid; gap: 8px; }
.legal strong { color: var(--ink); font-weight: 600; }
.legal a { color: var(--brown); text-decoration: underline; text-underline-offset: 3px; }
.legal__note {
  padding: 16px 20px; border-radius: 16px; background: rgba(216, 166, 87, 0.14);
  box-shadow: inset 0 0 0 1px rgba(184, 132, 50, 0.35); font-size: 15px !important;
}
.legal__updated { font-size: 14px !important; }

/* "Welcome to House of Om" (Dany, 2 Nov late): a small section, less space above and below the words,
   the video straight after, and a bigger countdown */
.statement--short { padding-block: clamp(40px, 5vw, 64px) clamp(56px, 7vw, 96px); }
.statement--short .statement__head { gap: 8px; }
.statement--short .statement__head .h2 { font-size: clamp(28px, 3.2vw, 40px); }
.statement--short .statement__head .muted { margin: 0; font-size: clamp(16px, 1.3vw, 18px); color: var(--ink-soft); }
.statement--short .feature { margin-top: clamp(20px, 2.6vw, 32px); }
.statement--short .countdown { margin-top: clamp(40px, 5vw, 64px); gap: 24px; }
.statement--short .countdown__label { font-size: clamp(15px, 1.4vw, 19px); }
.statement--short .countdown__tiles { gap: clamp(10px, 1.8vw, 22px); }
.statement--short .cd-tile__num { width: clamp(76px, 9.6vw, 132px); border-radius: 18px; font-size: clamp(38px, 4.8vw, 64px); }
.statement--short .cd-tile__label { font-size: clamp(12px, 1vw, 14px); }
@media (max-width: 480px) { .statement--short .cd-tile__num { width: 21vw; font-size: 34px; } }

/* Cookie notice: Accept is the main button, "No thanks" a quiet text button */
.cookie__btns { align-items: center; gap: 16px; }
.cookie__no { background: none; border: 0; padding: 6px 2px; font: inherit; font-size: 14px; color: var(--on-brown-soft); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cookie__no:hover { color: var(--cream); }

/* Long tile names ("Live Music, DJs & Performances") fit the narrow tiles: a touch smaller, and "Performances"
   breaks with a hyphen only where home.js puts a soft hyphen */
.way:not([aria-selected="true"]) .way__name { font-size: clamp(16px, 1.4vw, 22px); hyphens: manual; }

/* Home tickets heading on two lines (Dany, 2 Nov late) */
.section-head .passes__title { max-width: none; font-size: clamp(26px, 2.7vw, 40px); line-height: 1.2; }
.passes__title span { display: block; }
.passes-band .section-head { max-width: none; }

/* Timetable: back to its original look (Victoria, 2 Nov late). The grey/bright colours and the Chill Zone and
   Oracle Table columns from earlier that night were taken out again. */

/* Five ways in, under the tiles (tidied 2 Nov late): no sideways scroll bar.
   Timed sessions: a neat grid of equal cards, the badge always on the bottom line, and a "+N more" card. */
.ways__rail {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
  overflow: visible; padding: 0; scroll-snap-type: none;
}
.way-sess { flex: none; display: flex; flex-direction: column; gap: 5px; min-height: 132px; padding: 14px 16px 16px; }
.way-sess .badge { margin-top: auto; align-self: flex-start; }
.way-sess--more {
  justify-content: center; gap: 6px; text-decoration: none; color: var(--brown);
  background: transparent; border: 1px dashed rgba(109, 64, 54, 0.32);
}
.way-sess--more strong { font-family: var(--font-title); font-weight: 600; font-synthesis: none; font-size: 22px; line-height: 1.1; color: var(--brown-deep); }
.way-sess--more span { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 500; }
.way-sess--more .ic { width: 15px; height: 15px; transition: transform 0.2s var(--ease); }
.way-sess--more:hover { background: rgba(255, 250, 243, 0.6); border-color: var(--brown); }
.way-sess--more:hover .ic { transform: translateX(3px); }

/* Food, Tea & Market: the all-day spots as one calm list */
.ways__list {
  list-style: none; margin: 0; padding: 16px 22px 10px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px;
  border-radius: 18px; background: rgba(255, 250, 243, 0.78); border: 1px solid var(--line-beige);
}
.ways__list-head {
  grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 10px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #9a5a2c;
}
.ways__list-head .badge { height: 24px; padding: 0 10px; font-size: 11px; }
.ways__list-item { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: center; padding: 11px 0; border-top: 1px solid rgba(109, 64, 54, 0.1); }
.ways__list-art { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(216, 166, 87, 0.16); color: var(--brown); }
.ways__list-art svg { width: 62%; height: 62%; }
.ways__list-item strong { display: block; font-family: var(--font-title); font-weight: 600; font-synthesis: none; font-size: 16.5px; line-height: 1.2; color: var(--brown-deep); }
.ways__list-item small { display: block; margin-top: 2px; font-size: 13px; color: var(--ink-soft); }
@media (max-width: 900px) {
  .ways__rail { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-inline: 0; padding-inline: 0; }
}
@media (max-width: 560px) {
  .ways__list { grid-template-columns: minmax(0, 1fr); padding: 14px 16px 8px; }
  .way-sess { min-height: 118px; padding: 12px 13px 14px; }
}

/* Line under the Tickets heading (Victoria, 3 Nov) */
.passes-band .passes__note { max-width: 62ch; margin-top: 14px; }

/* Every day at House of Om (3 Nov): five elements under the passes, kept small with simple signs (Victoria's comment).
   Each element has its own colour, dark enough for small text on beige. */
.elements { padding-block: clamp(36px, 4vw, 56px); }
.elements__head { display: grid; justify-items: center; gap: 6px; text-align: center; margin: 0 auto clamp(24px, 3vw, 36px); max-width: 600px; }
.elements__title { font-family: var(--font-title); font-weight: 600; font-synthesis: none; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.1; letter-spacing: -0.02em; color: var(--brown-deep); }
.elements__head .muted { margin: 0; font-size: 14.5px; }
.elements__list { list-style: none; margin: 0 auto; padding: 0; position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 22px); max-width: 1000px; }
.elements__list::before {
  content: ""; position: absolute; left: 10%; right: 10%; top: 33px; height: 1px;
  background: linear-gradient(90deg, rgba(109, 64, 54, 0) 0%, var(--line-beige) 12%, var(--line-beige) 88%, rgba(109, 64, 54, 0) 100%);
}
.element { --el: #73554b; position: relative; display: grid; justify-items: center; align-content: start; text-align: center; gap: 4px; }
.element--air   { --el: #4c6d5d; }
.element--ether { --el: #5e3f6c; }
.element--water { --el: #21636c; }
.element--fire  { --el: #b0441e; }
.element--earth { --el: #74571e; }
.element__art {
  width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 8px; color: var(--el);
  background: #f6eee5; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--el) 30%, transparent);
}
.element__art svg { width: 62%; height: 62%; }
.element__name { margin: 0; font-size: 10.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--el); }
.element__title { margin: 0; font-family: var(--font-title); font-weight: 600; font-synthesis: none; font-size: clamp(16px, 1.3vw, 18px); line-height: 1.15; color: var(--brown-deep); }
.element__text { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); max-width: 24ch; }
@media (max-width: 900px) {
  .elements__list { grid-template-columns: 1fr; gap: 14px; max-width: 520px; margin-inline: auto; }
  .elements__list::before { left: 25px; right: auto; top: 26px; bottom: 26px; width: 1px; height: auto; background: var(--line-beige); }
  .element { grid-template-columns: 50px minmax(0, 1fr); column-gap: 14px; row-gap: 1px; justify-items: start; text-align: left; }
  .element__art { grid-row: 1 / span 3; width: 50px; height: 50px; margin: 0; }
  .element__name { align-self: end; }
  .element__text { max-width: none; }
}

/* "Spots are limited." on its own line under the hero text (3 Nov) */
.hero__limited { display: block; margin-top: 6px; }

/* The 2-day pass, one quiet line under the Workshop Pass price (3 Nov) */
.pass__twoday { display: block; margin-top: 10px; font-size: 15px; line-height: 1.4; letter-spacing: 0; color: var(--on-brown-soft); font-variant-numeric: tabular-nums; }
.pass__twoday strong { font-weight: 600; color: #f3d9a6; }

/* What to expect starts on the first flyer, lined up with the left edge of the page column (3 Nov).
   The wide right padding lets every flyer, the last one too, slide to that same spot. */
.expect[data-slider-start] .expect__rail {
  padding-left: calc(max(0px, (100% - 1240px) / 2) + 20px);
  padding-right: calc(100% - var(--slide-w) - max(0px, (100% - 1240px) / 2) - 20px);
  scroll-padding-left: calc(max(0px, (100% - 1240px) / 2) + 20px);
}
.expect[data-slider-start] .expect-slide { scroll-snap-align: start; }

/* Hero title (4 Nov): the pill now reads "Wellness Sanctuary Opening" and the gold line "Wellness Weekend Bangkok".
   The longer gold line gets more room (close to the width of HOUSE OF OM) and slightly tighter letter spacing,
   so the short side lines still show on every screen. The longer pill text is set a little smaller so the pill
   stays narrower than HOUSE OF OM. */
.hero__kicker { font-size: min(calc(var(--t) * 0.405), 5vw); }
.hero__title .launch-line { width: min(100%, max(calc(var(--t) * 7.2), 340px)); letter-spacing: 0.34em; }
.hero__title .launch-line span { padding-left: 0.34em; }
@media (max-width: 700px) {
  .hero__title .launch-line { letter-spacing: 0.26em; }
  .hero__title .launch-line span { padding-left: 0.26em; }
}
@media (max-width: 360px) {
  .hero__title .launch-line { letter-spacing: 0.2em; }
  .hero__title .launch-line span { padding-left: 0.2em; }
}

/* Paper grain baked into the textures (4 Nov). Phones were not blending the grey grain picture into the colours
   (background-blend-mode), so whole sections showed up grey. Each colour now has a ready-blended texture that looks the
   same as before, and the light sections get a see-through grain, so nothing needs blending. Baked from
   grain-soft.png and grain-mid.png. */
.band--brown { background: url("../img/grain-on-brown.webp") 0 0 / 320px 320px, var(--brown); background-blend-mode: normal; }
.band--beige { background: url("../img/grain-light.webp") 0 0 / 320px 320px, linear-gradient(180deg, var(--beige-1) 0%, var(--beige-2) 100%); background-blend-mode: normal; }
.hero { background: url("../img/grain-on-terracotta.webp") 0 0 / 320px 320px, var(--terracotta); background-blend-mode: normal; }
.site-footer { background: url("../img/grain-on-brown-deep.webp") 0 0 / 320px 320px, var(--brown-deep); background-blend-mode: normal; }

/* Five elements on phones and tablets (4 Nov, asked in chat): only the five round signs, in a row on their thread.
   Tapping one makes it pop and opens its words in a card just under the row, on the same screen; tapping it again
   closes it. The card copies the words from the element (assets/js/home.js), so the Thai switch keeps working.
   Computers keep the full row with the words under each sign. */
.elements__hint, .elements__detail { display: none; }
@media (max-width: 900px) {
  .elements__list { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; max-width: 420px; }
  .elements__list::before {
    left: 10%; right: 10%; top: 28px; bottom: auto; width: auto; height: 1px;
    background: linear-gradient(90deg, rgba(109, 64, 54, 0) 0%, var(--line-beige) 12%, var(--line-beige) 88%, rgba(109, 64, 54, 0) 100%);
  }
  .element { grid-template-columns: none; justify-items: center; text-align: center; }
  .elements__list .element__name, .elements__list .element__title, .elements__list .element__text { display: none; }
  .element__art {
    grid-row: auto; width: 56px; height: 56px; cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: transform 0.28s cubic-bezier(0.3, 1.6, 0.5, 1), background-color 0.2s, box-shadow 0.2s;
  }
  .element__art:focus-visible { outline: 2px solid var(--el); outline-offset: 3px; }
  .element.is-open .element__art {
    transform: scale(1.14); background: #fff;
    box-shadow: inset 0 0 0 1.5px var(--el), 0 10px 20px -12px color-mix(in srgb, var(--el) 75%, transparent);
  }
  .elements__hint { display: block; margin: 16px 0 0; text-align: center; font-size: 13px; color: var(--ink-soft); }
  .elements__hint[hidden] { display: none; }
  .elements__detail { display: grid; grid-template-rows: 0fr; max-width: 420px; margin: 0 auto; transition: grid-template-rows 0.32s ease; }
  .elements__detail.is-open { grid-template-rows: 1fr; }
  .elements__detail-inner { overflow: hidden; min-height: 0; }
  .elements__card {
    --el: #73554b; position: relative; margin-top: 20px; padding: 16px 20px 18px; border-radius: 16px;
    display: grid; justify-items: center; gap: 4px; text-align: center; background: #fbf6ef;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--el) 30%, transparent), 0 16px 30px -22px rgba(74, 42, 35, 0.5);
    animation: element-pop 0.32s cubic-bezier(0.3, 1.4, 0.5, 1) both;
  }
  .elements__card::before {
    content: ""; position: absolute; top: -7px; left: calc(var(--caret, 50%) - 7px); width: 14px; height: 14px;
    background: #fbf6ef; transform: rotate(45deg);
    border-top: 1px solid color-mix(in srgb, var(--el) 30%, transparent); border-left: 1px solid color-mix(in srgb, var(--el) 30%, transparent);
  }
  .elements__card .element__name { margin: 0; }
  .elements__card .element__title { font-size: 19px; }
  .elements__card .element__text { max-width: 32ch; font-size: 14.5px; }
}
@keyframes element-pop { from { opacity: 0; transform: translateY(-6px) scale(0.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .element__art, .elements__detail { transition: none; }
  .elements__card { animation: none; }
}

/* The five element signs redrawn from the House of Om logo (4 Nov, asked in chat): brush strokes with the logo's
   weight, a drop for water and a flame for fire, the logo roof and beam for earth. They fill a little more of the circle. */
.element__art svg { width: 70%; height: 70%; }

/* House rules template on the Privacy & terms page (4 Nov): numbered rules, each with a "To be added" placeholder until
   House of Om writes it, and a spot for the full PDF (config.js houseRulesPdf). */
.rules-doc { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 14px; border: 1px dashed rgba(109, 64, 54, 0.4); background: rgba(255, 252, 247, 0.6); font-size: 15px; }
.rules-doc .ic { flex: none; width: 20px; height: 20px; color: var(--brown); }
.legal .rules-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; counter-reset: rule; }
.legal .rule { counter-increment: rule; display: grid; gap: 4px; padding: 14px 16px 14px 52px; position: relative; border-radius: 14px; background: rgba(109, 64, 54, 0.04); }
.legal .rule::before { content: counter(rule); position: absolute; left: 16px; top: 14px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 600; color: var(--cream); background: var(--brown); }
.legal .rule h3 { margin: 0; font-size: 17px; }
.legal .rule__todo { font-size: 15px; line-height: 1.55; color: #8a6c62; }
.rule__tag { display: inline-block; margin-right: 6px; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #8a4430; background: rgba(216, 166, 87, 0.22); vertical-align: 1px; }

/* Beige sections that sit right above another beige section (4 Nov, asked in chat: "these should be the same colour
   like the white one the lighter one"): they stay the light beige all the way down instead of fading darker, so the two
   meet in the same colour with no visible line (Five elements → Welcome, Five ways in → Timetable). */
.band--beige:has(+ .band--beige) { background: url("../img/grain-light.webp") 0 0 / 320px 320px, var(--beige-1); background-blend-mode: normal; }

/* Privacy policy, ticket terms and house rules (4 Nov): their own pages. Inside the checkout's document window (?embed=1)
   they show without the header, footer or cookie notice. House rules are numbered cards. */
.is-embed .site-header, .is-embed .site-footer, .is-embed .skip-link, .is-embed .cookie { display: none !important; }
.is-embed .page-head { margin-top: 0; padding-block: 28px 24px; }
.is-framed .page-head .h1 { display: none; }
.is-embed body { background: var(--beige-1); }
.is-embed .band--beige { padding-block: 24px 40px; }
@media print {
  @page { size: A4; margin: 10mm; }
  html { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .paper-bg { display: none; }
  .is-embed .page-head { padding-block: 18px 14px; }
  .is-embed .band--beige { padding-block: 14px 10px; }
  .legal { gap: 14px; }
  .legal .rules-list { gap: 8px; }
  .legal .rule { padding-block: 10px; break-inside: avoid; }
  .legal .rule::before { top: 10px; }
  .legal__updated { margin-top: 6px; }
}
.legal .rule h2 { margin: 0; font-size: 18px; line-height: 1.3; color: var(--ink); }
.legal .rule p { font-size: 16px; line-height: 1.6; }

/* House rules and privacy policy, full versions (4 Nov, team's own wording): bullet lists inside the numbered rules,
   the "where we get it" line under each kind of data, and the purpose / lawful basis table. */
.legal .rule ul { list-style: disc; margin: 2px 0 0; padding-left: 20px; gap: 6px; }
.legal .rule li { font-size: 16px; line-height: 1.6; }
.legal .rule li::marker, .legal .data-list li::marker { color: var(--brown); }
.legal .data-list { gap: 12px; }
.legal__src { display: block; margin-top: 2px; font-size: 15px; color: #8a6c62; }
.legal__table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.5; }
.legal__table th, .legal__table td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; border-bottom: 1px solid rgba(109, 64, 54, 0.16); color: var(--ink-soft); }
.legal__table th { font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); border-bottom-color: rgba(109, 64, 54, 0.32); }
.legal__table td:last-child, .legal__table th:last-child { width: 34%; padding-right: 0; }
@media (max-width: 480px) { .legal__table { font-size: 15px; } .legal__table td:last-child, .legal__table th:last-child { width: 38%; } }
@media print { .legal__table tr, .legal .data-list li, .legal .rule li { break-inside: avoid; } }
@media (max-width: 480px) { .legal .rule { padding: 14px 14px 14px 46px; } .legal .rule::before { left: 13px; } .legal .rule ul { padding-left: 17px; } }
/* Printing the documents (PDFs): Chrome splits grid layouts badly across pages, so in print the legal pages use plain blocks,
   long rules may continue on the next page, and only single bullets, table rows and headings stay together. */
@media print {
  .legal, .legal section, .legal .rules-list, .legal ul, .legal .rule { display: block; }
  .legal > * + *, .legal section > * + * { margin-top: 12px; }
  .legal .rule + .rule { margin-top: 8px; }
  .legal .rule { break-inside: auto; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
  .legal .rule h2, .legal h2, .legal h3 { break-after: avoid; }
  .legal .rule h2 + * { margin-top: 4px; }
  .legal li + li { margin-top: 5px; }
  .legal li, .legal p, .legal__table tr { break-inside: avoid; }
}
@media print { .legal p, .legal li, .legal td, .legal .rule p, .legal .rule li { font-size: 14.5px; line-height: 1.5; } .legal__src { font-size: 13.5px; } }
@media print { .legal .legal__toc { display: none; } .legal > section + section { margin-top: 22px; } }