/* ==========================================================================
   Foiling.events — design system (light)
   --------------------------------------------------------------------------
   White ground, deliberately.

   People check this site outdoors — on a beach, at a launch, in bright sun,
   which is exactly where dark UIs fail. A light ground also lets event
   photography behave as content rather than as a glow, and photography is the
   main thing that will sell an event.

   Two teals, because one cannot do both jobs on white:
     --fe-teal        5.7:1 — anything that carries text or meaning
     --fe-teal-vivid  1.9:1 — graphic fills only, never text

   Hierarchy on a light ground has to come from weight, size and space rather
   than from luminance, so the type scale and the rhythm do more work here
   than colour does.

   Voxel's widgets are styled through Elementor global colour variables, so
   redefining those at :root restyles every Voxel widget at once.
   ========================================================================== */

:root {
  /* ---- ground and surfaces --------------------------------------------- */
  --fe-page:      #FFFFFF;
  --fe-tint:      #F5F9FA;   /* alternating section, quiet fill             */
  --fe-card:      #FFFFFF;
  --fe-raise:     #F9FCFC;   /* hover surface                               */

  --fe-line:      #E4EDF1;   /* hairline                                    */
  --fe-line-mid:  #CFDEE5;   /* divider that needs to be seen               */
  --fe-line-hi:   #A9C1CC;   /* hairline on hover                           */

  /* ---- ink ------------------------------------------------------------- */
  --fe-ink:       #08181F;   /* headings           18.1:1                   */
  --fe-body:      #2E4855;   /* body copy           9.7:1                   */
  --fe-muted:     #5B7787;   /* secondary           4.7:1  AA               */
  --fe-faint:     #8AA5B2;   /* icons, rules        2.6:1  never for text   */

  /* ---- brand ----------------------------------------------------------- */
  --fe-teal:       #00736B;  /* links, primary button, anything with text   */
  --fe-teal-deep:  #005A54;  /* hover, active                               */
  --fe-teal-vivid: #00D6BC;  /* graphic fills, marks — never text on white  */
  --fe-teal-tint:  #E4F7F4;
  --fe-teal-edge:  #A8E5DD;

  /* ---- semantic, kept separate from the brand accent ------------------- */
  --fe-free:  #1B7A4B;  --fe-free-tint:  #E7F6ED;  --fe-free-edge:  #B4E2C6;
  --fe-paid:  #1D6FB8;  --fe-paid-tint:  #E8F1FB;  --fe-paid-edge:  #B9D5F0;
  --fe-live:  #C2410C;  --fe-live-tint:  #FDEDE4;  --fe-live-edge:  #F6C9AE;
  --fe-quiet: #5B7787;  --fe-quiet-tint: #EFF4F6;  --fe-quiet-edge: #D8E4E9;

  /* ---- type ------------------------------------------------------------ */
  --fe-display: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --fe-text:    'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* ---- geometry -------------------------------------------------------- */
  --fe-r-sm: 8px;
  --fe-r:    12px;
  --fe-r-lg: 16px;
  --fe-r-xl: 22px;
  --fe-pill: 999px;

  --fe-ease: cubic-bezier(.22, .61, .36, 1);
  --fe-fast: 150ms var(--fe-ease);
  --fe-med:  260ms var(--fe-ease);

  /* Light-mode elevation is a whisper: a tight contact shadow that defines
     the edge, and a wide soft one that lifts. */
  --fe-sh-sm:  0 1px 2px rgba(8, 24, 31, .05), 0 1px 3px rgba(8, 24, 31, .04);
  --fe-sh:     0 1px 2px rgba(8, 24, 31, .04), 0 8px 20px -8px rgba(8, 24, 31, .12);
  --fe-sh-lg:  0 2px 4px rgba(8, 24, 31, .05), 0 22px 44px -16px rgba(8, 24, 31, .20);
  --fe-sh-cta: 0 2px 4px rgba(0, 90, 84, .18), 0 12px 28px -10px rgba(0, 115, 107, .42);

  /* ---- Voxel / Elementor global colour overrides ----------------------- */
  --e-global-color-primary:   var(--fe-ink);
  --e-global-color-secondary: var(--fe-muted);
  --e-global-color-text:      var(--fe-body);
  --e-global-color-accent:    var(--fe-teal);

  --e-global-color-0d1f28c:   var(--fe-teal-deep); /* Accent 2 (hover)      */
  --e-global-color-53bd778:   var(--fe-teal-tint); /* Accent 3 (tint)       */
  --e-global-color-c798801:   var(--fe-page);      /* Shade 0 (page)        */
  --e-global-color-0c6c884:   var(--fe-tint);      /* Shade 1 (surface)     */
  --e-global-color-ae7ab98:   var(--fe-raise);     /* Shade 2 (raised)      */
  --e-global-color-c0a1184:   var(--fe-line);      /* Border                */
  --e-global-color-c2fa2f3:   var(--fe-line-hi);   /* Border hover          */
  --e-global-color-de1b9b0:   var(--fe-muted);     /* Grey                  */
  --e-global-color-45408bb:   var(--fe-faint);     /* Grey 2                */

  /* ---- Voxel's own token layer ---------------------------------------- */
  --ts-accent-1: var(--fe-teal);
  --ts-accent-2: var(--fe-teal-deep);
  --ts-accent-3: var(--fe-teal-tint);
  --ts-shade-1:  var(--fe-ink);
  --ts-shade-2:  var(--fe-body);
  --ts-shade-3:  var(--fe-muted);
  --ts-shade-4:  var(--fe-faint);
  --ts-shade-5:  var(--fe-line-hi);
  --ts-shade-6:  var(--fe-line);
  --ts-shade-7:  var(--fe-tint);
  --ts-scroll-color: var(--fe-line-hi);
  --vx-main-font: var(--fe-text);

  color-scheme: light;
}

/* ==========================================================================
   Base
   ========================================================================== */

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

/* [hidden] has to win.
   The UA stylesheet sets [hidden] { display: none } at the lowest possible
   specificity, so any author rule that sets a display value — .fe-btn,
   .fe-share__list — silently overrides it. Anything JavaScript hides by
   attribute then stays on screen: the share block was rendering the native
   share button and the whole fallback link list at the same time, and on a
   browser without the Web Share API it would have shown a button that does
   nothing at all. */
[hidden] { display: none !important; }

body,
body.fe {
  background: var(--fe-page);
  color: var(--fe-body);
  font-family: var(--fe-text);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
  font-family: var(--fe-display);
  color: var(--fe-ink);
  font-weight: 700;
  letter-spacing: -.026em;
  line-height: 1.1;
  text-wrap: balance;
}

h1, .elementor-widget-heading h1.elementor-heading-title {
  font-weight: 800;
  letter-spacing: -.034em;
  line-height: 1.02;
}

p { text-wrap: pretty; }

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

/* Links inside running copy are underlined: colour alone is not a sufficient
   affordance, and the teal sits close in weight to the body ink. */
.elementor-widget-text-editor p a,
.fe-prose a {
  text-decoration: underline;
  text-decoration-color: var(--fe-teal-edge);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
.elementor-widget-text-editor p a:hover,
.fe-prose a:hover { text-decoration-color: currentColor; }

::selection { background: var(--fe-teal-tint); color: var(--fe-ink); }

:focus-visible {
  outline: 2px solid var(--fe-teal);
  outline-offset: 2px;
  border-radius: 4px;
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--fe-line-hi) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--fe-line-mid);
  border-radius: var(--fe-pill);
  border: 3px solid var(--fe-page);
}
*::-webkit-scrollbar-thumb:hover { background: var(--fe-line-hi); }

/* ==========================================================================
   Voxel surfaces
   ========================================================================== */

.ts-panel,
.vx-dialog,
.ts-popup-content,
.ts-field-popup,
.ts-booking-summary,
.ts-notification,
.ts-comp-item,
.min-scroll {
  background: var(--fe-card);
  border-color: var(--fe-line);
  color: var(--fe-body);
}

.ts-panel { border-radius: var(--fe-r-lg); box-shadow: var(--fe-sh-sm); }

.ts-field-popup,
.ts-popup-content {
  border-radius: var(--fe-r-lg);
  border: 1px solid var(--fe-line-mid);
  box-shadow: var(--fe-sh-lg);
}

hr,
.ts-separator,
.elementor-divider-separator {
  border-color: var(--fe-line);
  background: var(--fe-line);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.ts-btn {
  font-family: var(--fe-text);
  font-weight: 600;
  letter-spacing: -.005em;
  border-radius: var(--fe-pill);
  transition: background var(--fe-fast), border-color var(--fe-fast),
              color var(--fe-fast), transform var(--fe-fast),
              box-shadow var(--fe-med);
}
.ts-btn:active { transform: translateY(1px); }

.ts-btn-1 {
  background: var(--fe-page);
  border: 1px solid var(--fe-line-mid);
  color: var(--fe-ink);
}
.ts-btn-1:hover { background: var(--fe-tint); border-color: var(--fe-line-hi); color: var(--fe-ink); }

.ts-btn-2 {
  background: var(--fe-teal);
  border: 1px solid transparent;
  color: #FFFFFF;
  font-weight: 700;
}
.ts-btn-2:hover { background: var(--fe-teal-deep); color: #FFFFFF; box-shadow: var(--fe-sh-cta); }

.ts-btn-4 {
  background: var(--fe-tint);
  border: 1px solid var(--fe-line);
  color: var(--fe-body);
}
.ts-btn-4:hover { background: var(--fe-raise); border-color: var(--fe-line-mid); color: var(--fe-ink); }

/* ==========================================================================
   Forms
   ========================================================================== */

.ts-form input[type="text"],
.ts-form input[type="email"],
.ts-form input[type="url"],
.ts-form input[type="number"],
.ts-form input[type="password"],
.ts-form input[type="search"],
.ts-form textarea,
.ts-form select,
.ts-filter,
.ts-input-icon input,
input.ts-filter-text {
  background: var(--fe-page);
  border: 1px solid var(--fe-line-mid);
  border-radius: var(--fe-r);
  color: var(--fe-ink);
  font-family: var(--fe-text);
  transition: border-color var(--fe-fast), box-shadow var(--fe-fast), background var(--fe-fast);
}

.ts-form input:hover,
.ts-form textarea:hover,
.ts-filter:hover { border-color: var(--fe-line-hi); }

.ts-form input:focus,
.ts-form textarea:focus,
.ts-form select:focus,
.ts-filter:focus-within {
  border-color: var(--fe-teal);
  box-shadow: 0 0 0 3px var(--fe-teal-tint);
  outline: none;
}

::placeholder { color: var(--fe-muted); opacity: 1; }

label,
.ts-form-group > label,
.field-label {
  font-family: var(--fe-text);
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .01em;
  color: var(--fe-body);
}

.ts-checkbox-container .checkbox-label,
.container-radio { color: var(--fe-body); }

/* ==========================================================================
   Search form
   ========================================================================== */

/* Voxel sets filter widths as a percentage and the wrapper adds a gap on top,
   so exact fractions overflow by the gap and wrap. Letting the items shrink
   makes the row resilient at any container width. */
.ts-filter-wrapper > .ts-form-group {
  box-sizing: border-box;
  min-width: 0;
  flex-shrink: 1;
}

.ts-filter {
  border-radius: var(--fe-r);
  background: var(--fe-page);
  border: 1px solid var(--fe-line-mid);
  color: var(--fe-body);
  font-weight: 500;
}
.ts-filter .ts-filter-text { color: var(--fe-body); }

/* A set filter must be obvious at a glance — this is the difference between
   trusting the result count and not. */
.ts-filter.ts-filled,
.ts-filter.active {
  background: var(--fe-teal-tint);
  border-color: var(--fe-teal);
  box-shadow: inset 0 0 0 1px var(--fe-teal);
}
.ts-filter.ts-filled .ts-filter-text,
.ts-filter.active .ts-filter-text { color: var(--fe-teal-deep); font-weight: 700; }

/* ==========================================================================
   Header
   ========================================================================== */

.ts-header,
header.site-header {
  background: rgba(255, 255, 255, .86);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--fe-line);
}

.ts-nav > li > a,
.ts-nav-menu a,
.ts-navbar > ul > li > a {
  font-family: var(--fe-text);
  font-weight: 600;
  font-size: .93rem;
  color: var(--fe-body);
  transition: color var(--fe-fast);
}
.ts-nav > li > a:hover,
.ts-navbar > ul > li > a:hover { color: var(--fe-teal); }

.ts-header .elementor-container,
header .ts-navbar { padding-left: 4px; }

/* ==========================================================================
   Pills — semantic status only
   Colour here means something, and it is deliberately not the brand accent so
   a cancelled event never reads like a promoted one.
   ========================================================================== */

.fe-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--fe-text);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--fe-pill);
  border: 1px solid transparent;
  white-space: nowrap;
  line-height: 1.6;
}

.fe-pill--free      { background: var(--fe-free-tint);  color: var(--fe-free);  border-color: var(--fe-free-edge); }
.fe-pill--paid      { background: var(--fe-paid-tint);  color: var(--fe-paid);  border-color: var(--fe-paid-edge); }
.fe-pill--live      { background: var(--fe-live-tint);  color: var(--fe-live);  border-color: var(--fe-live-edge); }
.fe-pill--soon      { background: var(--fe-teal-tint);  color: var(--fe-teal);  border-color: var(--fe-teal-edge); }
.fe-pill--ended,
.fe-pill--cancelled { background: var(--fe-quiet-tint); color: var(--fe-quiet); border-color: var(--fe-quiet-edge); }

/* One moving thing on the page, and only when something is genuinely live. */
.fe-pill--live::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--fe-live);
  animation: fe-pulse 2s var(--fe-ease) infinite;
}
@keyframes fe-pulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: .35; transform: scale(.82); }
}

.fe-ended-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border-radius: var(--fe-r);
  background: var(--fe-quiet-tint);
  border: 1px solid var(--fe-quiet-edge);
  color: var(--fe-body);
  font-weight: 500;
  font-size: .95rem;
}

/* ==========================================================================
   Chips — taxonomy navigation, in two tiers
   The event type is what it *is*; disciplines are what it covers. Giving the
   two equal weight, as the first pass did, makes five things compete and none
   of them read.
   ========================================================================== */

.fe-chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--fe-text);
  font-size: .8rem;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: var(--fe-pill);
  border: 1px solid var(--fe-line-mid);
  background: var(--fe-page);
  color: var(--fe-body);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color var(--fe-fast), color var(--fe-fast), background var(--fe-fast);
}
.fe-chip:hover {
  border-color: var(--fe-teal);
  color: var(--fe-teal-deep);
  background: var(--fe-teal-tint);
}

.fe-chip--event_type {
  background: var(--fe-ink);
  border-color: var(--fe-ink);
  color: #FFFFFF;
}
.fe-chip--event_type:hover {
  background: var(--fe-teal-deep);
  border-color: var(--fe-teal-deep);
  color: #FFFFFF;
}

/* ==========================================================================
   Breadcrumbs
   ========================================================================== */

.fe-crumbs {
  font-family: var(--fe-text);
  font-size: .82rem;
  font-weight: 500;
  color: var(--fe-muted);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.fe-crumbs a { color: var(--fe-muted); }
.fe-crumbs a:hover { color: var(--fe-teal); }
.fe-crumbs__sep { color: var(--fe-faint); }
.fe-crumbs__current { color: var(--fe-body); font-weight: 600; }

/* ==========================================================================
   Event hero — split
   Content left, image right. The title, dates and location clear the fold
   before the photograph does, because the photograph confirms a decision the
   facts have to make possible first.
   ========================================================================== */

.fe-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  gap: 44px;
  /* Stretch, not start: a fixed image ratio left ~150px of dead space beside
     a short summary. Letting the photo take the row height keeps the two
     columns level whatever the copy length turns out to be. */
  align-items: stretch;
}

.fe-hero__main {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.fe-hero__chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.fe-hero__title {
  font-family: var(--fe-display);
  font-weight: 800;
  font-size: clamp(2.1rem, 3.6vw, 3.2rem);
  line-height: 1.02;
  letter-spacing: -.036em;
  color: var(--fe-ink);
  margin: 0;
  text-wrap: balance;
}

.fe-hero__summary {
  font-size: 1.12rem;
  line-height: 1.5;
  color: var(--fe-body);
  max-width: 46ch;
  margin: 0;
}

.fe-hero__media {
  margin: 0;
  border-radius: var(--fe-r-xl);
  overflow: hidden;
  border: 1px solid var(--fe-line);
  background: var(--fe-tint);
  height: 100%;
  min-height: 300px;
  max-height: 440px;
  box-shadow: var(--fe-sh);
}
.fe-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* The fact row spans the full width beneath both columns, which gives four
   facts room to sit on one line instead of stacking in a narrow column. */
.fe-hero__meta {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 18px 26px;
  margin: 8px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid var(--fe-line);
}
.fe-hero__meta-item { min-width: 0; }
.fe-hero__meta dt {
  font-family: var(--fe-text);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--fe-muted);
  margin-bottom: 5px;
}
.fe-hero__meta dd {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--fe-ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
}
.fe-hero__meta address { font-style: normal; display: flex; flex-direction: column; gap: 1px; }

.fe-venue { color: var(--fe-ink); }
.fe-place { font-weight: 500; font-size: .92rem; color: var(--fe-muted); }
.fe-place a {
  color: var(--fe-muted);
  text-decoration: underline;
  text-decoration-color: var(--fe-line-hi);
  text-underline-offset: 2px;
}
.fe-place a:hover { color: var(--fe-teal); text-decoration-color: currentColor; }

.fe-tzhint {
  display: block;
  font-size: .74rem;
  font-weight: 500;
  color: var(--fe-muted);
  letter-spacing: .01em;
  margin-top: 2px;
}

/* ==========================================================================
   Facts
   ========================================================================== */

.fe-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 34px;
}

.fe-facts__heading {
  font-family: var(--fe-display);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--fe-muted);
  margin: 0 0 12px;
}

.fe-datelist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.fe-datelist li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--fe-line);
  font-variant-numeric: tabular-nums;
  color: var(--fe-ink);
  font-weight: 600;
  font-size: .95rem;
}
.fe-datelist li:last-child { border-bottom: none; }
.fe-datelist__time { color: var(--fe-muted); font-size: .88rem; font-weight: 500; }

.fe-facts__note { margin: 10px 0 0; font-size: .85rem; color: var(--fe-muted); }

.fe-deflist { margin: 0; }
.fe-deflist__row {
  display: grid;
  grid-template-columns: minmax(84px, 32%) 1fr;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--fe-line);
}
.fe-deflist__row:last-child { border-bottom: none; }
.fe-deflist dt { color: var(--fe-muted); font-size: .88rem; font-weight: 600; }
.fe-deflist dd { margin: 0; color: var(--fe-ink); font-weight: 600; font-size: .95rem; overflow-wrap: anywhere; }

/* ==========================================================================
   Actions
   The register button is the single thing this page exists to produce, so it
   gets a panel of its own and stays with the reader.
   ========================================================================== */

.fe-actions {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--fe-card);
  border: 1px solid var(--fe-line-mid);
  border-radius: var(--fe-r-lg);
  padding: 22px;
  box-shadow: var(--fe-sh);
}

/* Sticky on desktop so the decision travels with the reader through a long
   description. Offset clears the fixed header. */
@media (min-width: 1025px) {
  .fe-actions { position: sticky; top: 88px; }
}
.fe-actions__group { display: flex; flex-wrap: wrap; gap: 8px; }

.fe-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-family: var(--fe-text);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.25;
  padding: 15px 24px;
  border-radius: var(--fe-pill);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  text-align: center;
  transition: background var(--fe-fast), border-color var(--fe-fast),
              color var(--fe-fast), transform var(--fe-fast), box-shadow var(--fe-med);
}
.fe-btn:active { transform: translateY(1px); }

.fe-btn--primary {
  background: var(--fe-teal);
  color: #FFFFFF;
  width: 100%;
  box-shadow: var(--fe-sh-sm);
}
.fe-btn--primary:hover { background: var(--fe-teal-deep); color: #FFFFFF; box-shadow: var(--fe-sh-cta); }
.fe-btn__hint { font-size: .74rem; font-weight: 500; opacity: .82; letter-spacing: .01em; }

.fe-btn--ghost {
  background: var(--fe-page);
  border-color: var(--fe-line-mid);
  color: var(--fe-body);
  font-weight: 600;
  font-size: .9rem;
  padding: 11px 16px;
  flex: 1 1 auto;
}
.fe-btn--ghost:hover { border-color: var(--fe-line-hi); background: var(--fe-tint); color: var(--fe-ink); }

.fe-btn--disabled {
  background: var(--fe-quiet-tint);
  border-color: var(--fe-quiet-edge);
  color: var(--fe-muted);
  cursor: not-allowed;
  font-weight: 600;
  width: 100%;
}

/* Price sits with the decision rather than in the chip row, where it competed
   with the taxonomy for attention. */
.fe-actions__price { display: flex; align-items: baseline; gap: 8px; padding-bottom: 4px; }
.fe-actions__price-value {
  font-family: var(--fe-display);
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--fe-ink);
  font-variant-numeric: tabular-nums;
}
.fe-actions__price-note { font-size: .85rem; color: var(--fe-muted); }

.fe-share { border-top: 1px solid var(--fe-line); padding-top: 12px; }
.fe-share__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.fe-share__list a,
.fe-share__copy {
  font-family: var(--fe-text);
  font-size: .86rem;
  font-weight: 600;
  color: var(--fe-muted);
  background: none;
  border: none;
  padding: 3px 0;
  cursor: pointer;
  text-decoration: none;
  transition: color var(--fe-fast);
}
.fe-share__list a:hover,
.fe-share__copy:hover { color: var(--fe-teal); }
.fe-share__copy.is-done { color: var(--fe-free); }

/* Sticky register bar is mobile-only; see the mobile block. */
.fe-stickybar { display: none; }

/* ==========================================================================
   Cards
   ========================================================================== */

.fe-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--fe-card);
  border: 1px solid var(--fe-line);
  border-radius: var(--fe-r-lg);
  overflow: hidden;
  height: 100%;
  transition: transform var(--fe-med), border-color var(--fe-med), box-shadow var(--fe-med);
}
.fe-card:hover {
  transform: translateY(-2px);
  border-color: var(--fe-line-mid);
  box-shadow: var(--fe-sh-lg);
}
.fe-card:focus-within { border-color: var(--fe-teal); box-shadow: 0 0 0 3px var(--fe-teal-tint); }

/* One link over the whole card keeps the surface tappable on a phone without
   nesting interactive elements inside a link. */
.fe-card__link { position: absolute; inset: 0; z-index: 2; }

.fe-card__media { position: relative; aspect-ratio: 16 / 10; background: var(--fe-tint); overflow: hidden; }
.fe-card__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 560ms var(--fe-ease);
}
.fe-card:hover .fe-card__media img { transform: scale(1.035); }
.fe-card__media-empty {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, var(--fe-teal-tint), var(--fe-tint));
}

.fe-card__badges {
  position: absolute;
  top: 10px; left: 10px;
  display: flex; flex-wrap: wrap; gap: 6px;
  z-index: 1;
}
/* Pills sit over photography, so they need their own opaque ground. */
.fe-card__badges .fe-pill {
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(6px);
  box-shadow: 0 1px 2px rgba(8, 24, 31, .16);
  border-color: transparent;
}

.fe-card__body { display: flex; flex-direction: column; gap: 5px; padding: 15px 17px 17px; }

.fe-card__kicker {
  font-family: var(--fe-text);
  font-size: .67rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--fe-muted);
  margin: 0;
}

.fe-card__title {
  font-family: var(--fe-display);
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -.022em;
  line-height: 1.2;
  color: var(--fe-ink);
  margin: 0;
  text-wrap: balance;
}

/* The date is the second thing anyone reads on a card, so it carries the
   brand colour and the heavier weight. */
.fe-card__when {
  margin: 3px 0 0;
  font-size: .92rem;
  font-weight: 700;
  color: var(--fe-teal);
  font-variant-numeric: tabular-nums;
}
.fe-card--past .fe-card__when { color: var(--fe-muted); }

.fe-card__where,
.fe-card__org { margin: 0; font-size: .88rem; color: var(--fe-muted); }

/* Disciplines are content, not decoration, so they take the muted token
   (4.7:1) rather than the faint one (2.6:1) that the rest of the system
   reserves for rules and icons. */
.fe-card__disciplines { margin: 5px 0 0; font-size: .76rem; color: var(--fe-muted); letter-spacing: .01em; }

.fe-card--past .fe-card__media img { filter: grayscale(.35) opacity(.82); }

/* ==========================================================================
   Related events
   ========================================================================== */

.fe-related { display: block; }
.fe-related__heading {
  font-family: var(--fe-display);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -.024em;
  color: var(--fe-ink);
  margin: 0 0 18px;
  padding-top: 30px;
  border-top: 1px solid var(--fe-line);
}

.fe-grid,
.ts-post-feed-grid,
.post-feed-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: 20px;
}

/* ==========================================================================
   Organizer hero
   ========================================================================== */

.fe-orghero { display: flex; flex-direction: column; }
.fe-orghero__cover {
  margin: 0;
  aspect-ratio: 21 / 9;
  max-height: 340px;
  border-radius: var(--fe-r-xl);
  overflow: hidden;
  border: 1px solid var(--fe-line);
  background: var(--fe-tint);
}
.fe-orghero__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

.fe-orghero__body { display: flex; gap: 20px; align-items: flex-start; margin-top: -40px; padding: 0 4px; }
/* Elementor sets a global `img { height: auto }` that collapsed this to a
   squashed strip, and the flex parent shrank the width. Pinning all three
   axes and the aspect ratio keeps it a square avatar. */
.fe-orghero .fe-orghero__logo {
  width: 92px;
  min-width: 92px;
  height: 92px;
  aspect-ratio: 1 / 1;
  flex: 0 0 92px;
  border-radius: var(--fe-r);
  object-fit: cover;
  border: 3px solid var(--fe-page);
  background: var(--fe-card);
  box-shadow: var(--fe-sh);
}
.fe-orghero__identity { display: flex; flex-direction: column; gap: 11px; padding-top: 46px; min-width: 0; }
.fe-orghero__meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 2px 0 0; font-size: .91rem; color: var(--fe-muted); }

/* ==========================================================================
   Submission gate
   ========================================================================== */

.fe-gate {
  background: var(--fe-tint);
  border: 1px solid var(--fe-line-mid);
  border-radius: var(--fe-r-lg);
  padding: 26px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.fe-gate__title {
  font-family: var(--fe-display);
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -.026em;
  color: var(--fe-ink);
  margin: 0;
  text-wrap: balance;
}
.fe-gate__body { margin: 0; color: var(--fe-body); max-width: 56ch; }
.fe-gate__steps {
  margin: 0;
  padding-left: 1.2em;
  display: flex;
  flex-direction: column;
  gap: 7px;
  color: var(--fe-body);
  font-size: .95rem;
  max-width: 56ch;
}
.fe-gate__steps li::marker { color: var(--fe-teal); font-weight: 800; }
.fe-gate__actions { margin: 6px 0 0; }
.fe-gate .fe-btn--primary { width: auto; }

/* ==========================================================================
   Footer
   ========================================================================== */

.fe-footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.fe-footer-links a {
  font-family: var(--fe-text);
  font-size: .9rem;
  font-weight: 500;
  color: var(--fe-muted);
  text-decoration: none;
  transition: color var(--fe-fast);
}
.fe-footer-links a:hover { color: var(--fe-teal); }

.fe-footer-blurb { font-size: .9rem; color: var(--fe-muted); max-width: 34ch; margin: 0 0 4px; }
.fe-footer-legal { font-size: .82rem; color: var(--fe-muted); margin: 0; }
.fe-footer-legal a { color: var(--fe-muted); text-decoration: none; }
.fe-footer-legal a:hover { color: var(--fe-teal); }

/* ==========================================================================
   Utilities
   ========================================================================== */

.fe-eyebrow {
  font-family: var(--fe-text);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fe-teal);
}
.fe-meta  { font-size: .86rem; color: var(--fe-muted); font-variant-numeric: tabular-nums; }
.fe-num   { font-variant-numeric: tabular-nums; }
.fe-stack { display: flex; flex-direction: column; gap: var(--fe-gap, 16px); }
.fe-row   { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fe-gap, 12px); }

.fe-lede { font-size: 1.18rem; line-height: 1.55; color: var(--fe-body); max-width: 56ch; }

.fe-scroll-x { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }

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

.fe-placeholder {
  padding: 20px;
  border: 1px dashed var(--fe-line-hi);
  border-radius: var(--fe-r);
  color: var(--fe-muted);
  font-size: .92rem;
  text-align: center;
}

/* ==========================================================================
   Tablet
   ========================================================================== */

@media (max-width: 1024px) {
  .fe-hero { grid-template-columns: 1fr; gap: 24px; }
  /* Photo after the summary: the title and dates answer the question, the
     photograph confirms it. */
  .fe-hero__main  { order: 1; }
  .fe-hero__media { order: 2; height: auto; aspect-ratio: 16 / 9; min-height: 0; max-height: 380px; }
  .fe-hero__meta  { order: 3; margin-top: 4px; }
}

/* ==========================================================================
   Mobile
   Most arrivals are a shared link opened on a phone, often outdoors.
   ========================================================================== */

@media (max-width: 768px) {
  body { font-size: 15.5px; }

  .fe-hero { gap: 20px; }
  .fe-hero__media { border-radius: var(--fe-r-lg); height: auto; aspect-ratio: 3 / 2; min-height: 0; max-height: 280px; }
  .fe-hero__title { font-size: clamp(1.85rem, 8vw, 2.5rem); }
  .fe-hero__summary { font-size: 1.02rem; }
  .fe-hero__meta { grid-template-columns: 1fr 1fr; gap: 16px; }
  .fe-lede { font-size: 1.04rem; }

  .fe-facts { gap: 26px; }
  .fe-deflist__row { grid-template-columns: 1fr; gap: 2px; }

  .fe-actions { padding: 18px; }
  .fe-grid { grid-template-columns: 1fr; gap: 16px; }
  .fe-related__heading { font-size: 1.14rem; padding-top: 24px; }

  .fe-orghero__body { flex-direction: column; margin-top: -28px; gap: 14px; }
  .fe-orghero__identity { padding-top: 0; }
  .fe-orghero .fe-orghero__logo { width: 72px; min-width: 72px; height: 72px; flex: 0 0 72px; }

  .fe-gate { padding: 20px 18px 22px; }
  .fe-gate__title { font-size: 1.22rem; }
  .fe-gate .fe-btn--primary { width: 100%; }

  .ts-btn { min-height: 46px; }

  /* Filter chips scroll rather than wrapping into a wall. */
  .ts-form.ts-search-widget .ts-filter-wrapper {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .ts-form.ts-search-widget .ts-filter-wrapper::-webkit-scrollbar { display: none; }
  .ts-form.ts-search-widget .ts-filter { scroll-snap-align: start; flex: 0 0 auto; }

  .ts-field-popup { border-radius: var(--fe-r-xl) var(--fe-r-xl) 0 0; }

  /* ---- sticky register bar ----
     On a phone the register button scrolls away within one screen and never
     comes back. This keeps it reachable without hijacking the layout. */
  .fe-stickybar {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 90;
    gap: 12px;
    align-items: center;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, .96);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-top: 1px solid var(--fe-line-mid);
    box-shadow: 0 -4px 20px -8px rgba(8, 24, 31, .18);
  }
  .fe-stickybar__price { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
  .fe-stickybar__price-value {
    font-family: var(--fe-display);
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--fe-ink);
    font-variant-numeric: tabular-nums;
  }
  .fe-stickybar__price-note {
    font-size: .72rem;
    color: var(--fe-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .fe-stickybar .fe-btn { flex: 1 1 auto; padding: 13px 18px; font-size: .95rem; }
  .fe-stickybar .fe-btn__hint { display: none; }

  /* Room for the bar so it never covers the last line of the page. */
  body.fe-event-single { padding-bottom: 78px; }
}

/* ==========================================================================
   Print — an event page should print as a usable itinerary.
   ========================================================================== */

@media print {
  .ts-header, .ts-footer, .fe-share, .fe-stickybar, .fe-related { display: none !important; }
  body { background: #fff; color: #000; }
  .fe-hero { grid-template-columns: 1fr; }
  .fe-actions { box-shadow: none; border: 1px solid #999; }
  a::after { content: " (" attr(href) ")"; font-size: .8em; color: #444; }
}

/* ==========================================================================
   Motion preferences
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .fe-card:hover { transform: none; }
  .fe-card:hover .fe-card__media img { transform: none; }
}

/* ==========================================================================
   Date presets
   --------------------------------------------------------------------------
   Voxel expands the preset list into full filter controls, so "This weekend"
   rendered as a 52px bordered box identical to the real filters — four empty
   boxes across two rows, reading as inputs nobody had filled in. They are
   one-tap shortcuts and should look like it.

   A preset is the only .ts-filter that is not a .ts-popup-target, which makes
   it targetable without depending on Elementor's generated repeater ids.
   ========================================================================== */

.ts-filter-wrapper > .ts-form-group:has(> .ts-filter:not(.ts-popup-target)) {
  width: auto !important;
  flex: 0 0 auto;
}

.ts-filter-wrapper > .ts-form-group > .ts-filter:not(.ts-popup-target) {
  height: auto;
  min-height: 0;
  padding: 8px 16px;
  border-radius: var(--fe-pill);
  background: var(--fe-tint);
  border: 1px solid var(--fe-line);
  cursor: pointer;
  box-shadow: none;
  transition: background var(--fe-fast), border-color var(--fe-fast), color var(--fe-fast);
}
.ts-filter-wrapper > .ts-form-group > .ts-filter:not(.ts-popup-target):hover {
  background: var(--fe-page);
  border-color: var(--fe-line-hi);
}
.ts-filter-wrapper > .ts-form-group > .ts-filter:not(.ts-popup-target) .ts-filter-text {
  font-size: .86rem;
  font-weight: 600;
  color: var(--fe-body);
}

/* The chosen preset is the current view, so it reads as selected rather than
   merely filled. */
.ts-filter-wrapper > .ts-form-group > .ts-filter:not(.ts-popup-target).ts-filled {
  background: var(--fe-ink);
  border-color: var(--fe-ink);
  box-shadow: none;
}
.ts-filter-wrapper > .ts-form-group > .ts-filter:not(.ts-popup-target).ts-filled .ts-filter-text {
  color: #FFFFFF;
  font-weight: 700;
}

/* A preset carries no value of its own, so its empty icon slot only adds a
   gap before the label. */
.ts-filter-wrapper > .ts-form-group > .ts-filter:not(.ts-popup-target) > span:empty { display: none; }

/* ==========================================================================
   Discovery map
   --------------------------------------------------------------------------
   Results left, map right, map sticky. Geography is half of how anyone decides
   whether an event is reachable, so the two belong beside each other rather
   than the map being a separate destination you have to go and find.

   On a phone the map sits above the list at a modest height: tall enough to
   orient, short enough that it does not bury the results.
   ========================================================================== */

.fe-discovery__map { align-self: stretch; }

@media (min-width: 1025px) {
  .fe-discovery__map { position: sticky; top: 88px; }
}

.ts-map,
.map-container,
.fe-discovery__map .elementor-widget-ts-map {
  border-radius: var(--fe-r-lg);
  overflow: hidden;
  border: 1px solid var(--fe-line-mid);
  box-shadow: var(--fe-sh-sm);
}

/* Leaflet paints its own chrome; bring it onto the site's surfaces. */
.leaflet-container { font-family: var(--fe-text); background: var(--fe-tint); }

.leaflet-control-zoom a,
.leaflet-bar a {
  background: var(--fe-page);
  color: var(--fe-ink);
  border-color: var(--fe-line-mid);
  transition: background var(--fe-fast), color var(--fe-fast);
}
.leaflet-control-zoom a:hover,
.leaflet-bar a:hover { background: var(--fe-tint); color: var(--fe-teal); }

.leaflet-bar { box-shadow: var(--fe-sh-sm); border-radius: var(--fe-r-sm); overflow: hidden; }

/* Attribution is a licence condition of using OSM tiles, so it is styled to be
   unobtrusive but never hidden. */
.leaflet-control-attribution {
  background: rgba(255, 255, 255, .86) !important;
  color: var(--fe-muted) !important;
  font-size: 10.5px !important;
  padding: 2px 7px !important;
}
.leaflet-control-attribution a { color: var(--fe-muted) !important; text-decoration: underline; }
.leaflet-control-attribution a:hover { color: var(--fe-teal) !important; }

/* Marker popups reuse the event card, so the popup itself is just a frame. */
.leaflet-popup-content-wrapper {
  background: var(--fe-card);
  border-radius: var(--fe-r-lg);
  box-shadow: var(--fe-sh-lg);
  border: 1px solid var(--fe-line-mid);
  padding: 0;
  overflow: hidden;
}
.leaflet-popup-content { margin: 0; width: 260px !important; }
.leaflet-popup-content .fe-card { border: none; border-radius: 0; box-shadow: none; }
.leaflet-popup-content .fe-card:hover { transform: none; box-shadow: none; }
.leaflet-popup-tip { background: var(--fe-card); }
.leaflet-popup-close-button {
  background: rgba(255, 255, 255, .92) !important;
  border-radius: 50%;
  width: 24px !important; height: 24px !important;
  margin: 7px 7px 0 0;
  color: var(--fe-ink) !important;
  box-shadow: var(--fe-sh-sm);
}

/* Marker cluster bubbles inherit the brand rather than Leaflet's default. */
.marker-cluster,
.marker-cluster div {
  background: var(--fe-teal) !important;
  color: #FFFFFF !important;
  border: 2px solid rgba(255, 255, 255, .9);
  box-shadow: var(--fe-sh);
  font-family: var(--fe-text);
  font-weight: 700;
}

@media (max-width: 1024px) {
  .fe-discovery__map { position: static; width: 100%; }
}

/* ==========================================================================
   Term archive hero — discipline / event type / location
   --------------------------------------------------------------------------
   These are the pages organic search lands on, so they open with the phrase
   someone searched, say honestly how much is actually here, and hand the
   reader sideways links. The sibling row is the internal graph doing its job.
   ========================================================================== */

.fe-termhero {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 760px;
}

.fe-termhero__title {
  font-family: var(--fe-display);
  font-weight: 800;
  font-size: clamp(2.1rem, 4.4vw, 3.1rem);
  line-height: 1.02;
  letter-spacing: -.036em;
  color: var(--fe-ink);
  margin: 0;
  text-wrap: balance;
}

.fe-termhero__intro {
  font-size: 1.1rem;
  line-height: 1.55;
  color: var(--fe-body);
  margin: 0;
  max-width: 62ch;
}

.fe-termhero__count {
  margin: 0;
  font-size: .92rem;
  color: var(--fe-muted);
  font-variant-numeric: tabular-nums;
}
.fe-termhero__count strong { color: var(--fe-ink); font-weight: 700; }

.fe-termhero__siblings {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
  padding-top: 18px;
  border-top: 1px solid var(--fe-line);
}

@media (max-width: 768px) {
  .fe-termhero__title { font-size: clamp(1.8rem, 8vw, 2.4rem); }
  .fe-termhero__intro { font-size: 1rem; }
  /* Sideways links scroll rather than becoming a wall of chips. */
  .fe-termhero__siblings {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .fe-termhero__siblings::-webkit-scrollbar { display: none; }
  .fe-termhero__siblings .fe-chip { flex: 0 0 auto; }
}