/* ==========================================================================
   Canada Event Spot - design system
   --------------------------------------------------------------------------
   Direction: municipal wayfinding. The country is read through its provinces,
   so province colour is a structural device, not decoration: it appears as the
   route bar on every card, the dot on every city chip, and the pin on the map.
   Everything else stays quiet - ink on paper, one accent, tabular numerals.
   ========================================================================== */

@font-face {
  font-family: 'Archivo';
  src: url('/fonts/archivo-latin.woff2') format('woff2');
  font-weight: 400 800;
  font-stretch: 100% 125%;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- ink & paper ------------------------------------------------------ */
  --ink:        #12212b;
  --ink-2:      #40545f;
  --ink-3:      #6b7f89;
  --paper:      #e9ece7;
  --surface:    #ffffff;
  --surface-2:  #f4f6f2;
  --line:       #d2d8d1;
  --line-2:     #e2e7e0;

  /* --- accents ---------------------------------------------------------- */
  --signal:     #0e6e52;   /* actions, links */
  --signal-ink: #0a5540;
  --signal-bg:  #e2f0ea;
  --amber:      #f4b942;   /* free / on now */
  --amber-ink:  #6b4a00;
  --amber-bg:   #fdf3dc;

  /* --- province lines ---------------------------------------------------
     Per-province colour is set inline from config('canada.region_colours'),
     because thirteen of them belong in one editable list rather than in two.
     What stays here is the fallback and the two the admin chrome names
     directly for alert and warning states. */
  --line-default: #6b7f89;
  --line-alert:   #c8102e;
  --line-warn:    #f4881f;

  /* --- type ------------------------------------------------------------- */
  --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --body: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Consolas, monospace;

  /* --- scale ------------------------------------------------------------ */
  --step--1: clamp(0.80rem, 0.78rem + 0.10vw, 0.86rem);
  --step-0:  clamp(1.00rem, 0.97rem + 0.15vw, 1.06rem);
  --step-1:  clamp(1.20rem, 1.13rem + 0.35vw, 1.40rem);
  --step-2:  clamp(1.50rem, 1.35rem + 0.75vw, 2.00rem);
  --step-3:  clamp(1.95rem, 1.65rem + 1.50vw, 2.90rem);
  --step-4:  clamp(2.40rem, 1.90rem + 2.50vw, 4.00rem);

  --gutter: clamp(1rem, 0.6rem + 2vw, 2rem);
  --radius: 4px;
  --radius-lg: 8px;

  --shadow-1: 0 1px 2px rgba(18, 33, 43, 0.06), 0 1px 1px rgba(18, 33, 43, 0.04);
  --shadow-2: 0 6px 20px -8px rgba(18, 33, 43, 0.22), 0 2px 6px rgba(18, 33, 43, 0.06);

  --z-nav: 30;
  --z-sheet: 50;

  color-scheme: light;
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */

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

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

body {
  margin: 0;
  /* Backstop: a single wide child (a long venue name, a stray table) must
     never turn the whole document into a horizontal scroller. clip is used
     rather than hidden so position: sticky keeps working. */
  overflow-x: clip;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-family: var(--display); line-height: 1.08; font-weight: 700; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
a { color: var(--signal-ink); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--ink); }

:focus-visible {
  outline: 3px solid var(--signal);
  outline-offset: 2px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: #fff;
  padding: 0.75rem 1.25rem;
  z-index: 100;
}
.skip-link:focus { left: 0; }

.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;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.wrap {
  width: min(100% - (var(--gutter) * 2), 1180px);
  margin-inline: auto;
}
.wrap--narrow { width: min(100% - (var(--gutter) * 2), 760px); }

.stack > * + * { margin-top: var(--space, 1rem); }
.section { padding-block: clamp(2rem, 1.2rem + 3vw, 3.5rem); }
.section--tight { padding-block: clamp(1.25rem, 1rem + 1.5vw, 2rem); }

/* --------------------------------------------------------------------------
   Type helpers
   -------------------------------------------------------------------------- */

.eyebrow {
  font-family: var(--display);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.eyebrow::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}

.h1, .h2, .h3 { overflow-wrap: break-word; }
.h1 { font-size: var(--step-3); font-weight: 800; font-stretch: 112%; letter-spacing: -0.022em; }
.h2 { font-size: var(--step-2); font-weight: 800; font-stretch: 108%; letter-spacing: -0.018em; }
.h3 { font-size: var(--step-1); font-weight: 700; letter-spacing: -0.01em; }
.lede { font-size: var(--step-1); line-height: 1.45; color: var(--ink-2); max-width: 62ch; }
.muted { color: var(--ink-2); }
.small { font-size: var(--step--1); }
.nums { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.masthead__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 62px;
  padding-block: 0.5rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 118%;
  font-size: 1.0625rem;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: var(--ink);
  white-space: nowrap;
}

/* The roundel echoes transit wayfinding: a bar through a ring. */
/* The pin mark, from public/img/logo-mark.svg. Fixed box so a slow icon
   cannot shift the masthead once it lands. */
.brand__mark {
  width: 26px;
  height: 26px;
  flex: none;
  display: block;
}

.masthead__nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.masthead__nav::-webkit-scrollbar { display: none; }
.masthead__nav a { flex: none; }
.masthead__nav a {
  font-size: var(--step--1);
  font-weight: 600;
  text-decoration: none;
  color: var(--ink-2);
  padding: 0.5rem 0.65rem;
  border-radius: var(--radius);
}
.masthead__nav a:hover { color: var(--ink); background: var(--surface-2); }
.masthead__nav a[aria-current='page'] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--signal); }

/* Icon-only, so it needs its own square rather than the text links'
   asymmetric padding, and a hover that says it is a link to Telegram
   rather than one more section of the site. */
.masthead__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  color: var(--ink-3);
  margin-left: 0.15rem;
}
.masthead__icon:hover { color: #229ED9; background: var(--surface-2); }

.footer__brandlink { display: inline-flex; align-items: center; gap: 0.45rem; }

/* The masthead is the widest fixed row on the page, so links drop out before
   anything is allowed to push the document past the viewport. */
@media (max-width: 860px) {
  .masthead__nav a.is-optional { display: none; }
}

@media (max-width: 560px) {
  .masthead__nav a.is-optional-sm { display: none; }
  .masthead__nav a { padding: 0.5rem 0.4rem; font-size: 0.8125rem; }
  .brand { font-size: 0.9375rem; gap: 0.45rem; }
  .brand__mark { width: 22px; height: 22px; }
}

/* --------------------------------------------------------------------------
   Search
   -------------------------------------------------------------------------- */

.searchbar {
  display: flex;
  align-items: stretch;
  background: var(--surface);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  overflow: hidden;
}
.searchbar input {
  flex: 1;
  min-width: 0;
  border: 0;
  padding: 0.7rem 0.85rem;
  background: transparent;
  /* Stated, not inherited. The bar keeps its light background inside the dark
     signup panel, so an inherited white would type white on white. */
  color: var(--ink);
}
.searchbar input::placeholder { color: var(--ink-3); }
.searchbar input:focus { outline: none; }
.searchbar:focus-within { box-shadow: 0 0 0 3px var(--signal-bg); }
.searchbar button {
  border: 0;
  background: var(--ink);
  color: #fff;
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding-inline: 1.1rem;
  cursor: pointer;
  min-height: 44px;
}
.searchbar button:hover { background: var(--signal-ink); }

/* --------------------------------------------------------------------------
   Buttons & chips
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 44px;
  padding: 0.55rem 1.05rem;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--step--1);
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}
.btn:hover { background: var(--ink); color: #fff; }
.btn--primary { background: var(--signal); border-color: var(--signal); color: #fff; }
.btn--primary:hover { background: var(--signal-ink); border-color: var(--signal-ink); color: #fff; }
.btn--ghost { border-color: var(--line); color: var(--ink-2); }
.btn--ghost:hover { border-color: var(--ink); background: var(--surface-2); color: var(--ink); }
.btn--sm { min-height: 38px; padding: 0.35rem 0.75rem; font-size: 0.8125rem; }
.btn--block { width: 100%; }

/* A disabled button that looks live is worse than no button: it swallows the
   click and the operator concludes the feature is broken. Say so visibly. */
.btn:disabled,
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.btn:disabled:hover,
.btn[disabled]:hover { background: var(--surface); border-color: var(--line); color: var(--ink-2); }
.btn--primary:disabled:hover,
.btn--primary[disabled]:hover { background: var(--signal); border-color: var(--signal); color: #fff; }

.chiprow {
  display: flex;
  gap: 0.45rem;
  overflow-x: auto;
  padding-bottom: 0.35rem;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

/* Scrolling is right on a phone and wrong on a desktop: a horizontal bar
   through the middle of a filter panel hides options behind a gesture nobody
   makes with a mouse. Above the fold width, the rows wrap instead. */
@media (min-width: 700px) {
  .chiprow--wrap {
    flex-wrap: wrap;
    overflow-x: visible;
    padding-bottom: 0;
    row-gap: 0.5rem;
  }
}
.chiprow::-webkit-scrollbar { height: 6px; }
.chiprow::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex: none;
  min-height: 38px;
  padding: 0.3rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-2);
  font-size: var(--step--1);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}
.chip:hover { border-color: var(--ink-3); color: var(--ink); }
.chip[aria-pressed='true'],
.chip[aria-current],
.chip.is-on {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.chip__dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--region, var(--line-default));
  flex: none;
}

/* Province colour is the site's one structural signal, and a 9px dot on a dark
   fill does not carry it. An active place or category keeps the ink fill for
   contrast and states its colour as a ring outside the pill, where it has the
   white panel behind it to read against. */
.chip--region[aria-current] {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 5px var(--region, var(--ink));
}
/* On the dark fill the dot keeps its colour and gains a halo, so the province
   reads twice: once on the ring, once here. */
.chip--region[aria-current] .chip__dot { box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.9); }
.chip__count {
  font-variant-numeric: tabular-nums;
  font-size: 0.75rem;
  color: var(--ink-3);
}

.chip--sm { min-height: 34px; padding: 0.2rem 0.7rem; font-size: 0.8125rem; font-weight: 500; }

/* An applied filter is a statement with a way out, not a choice to make: it
   reads filled and carries the cross that removes it. */
.chip--applied {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
  padding-right: 0.55rem;
}
.chip--applied:hover { background: var(--signal-ink); border-color: var(--signal-ink); color: #fff; }
.chip--applied .chip__x { opacity: 0.6; margin-left: 0.1rem; }
.chip--applied:hover .chip__x { opacity: 1; }
.chip--clear { border-style: dashed; color: var(--ink-3); }
.chip[aria-pressed='true'] .chip__count,
.chip[aria-current] .chip__count { color: rgba(255, 255, 255, 0.7); }

/* --------------------------------------------------------------------------
   Filter bar
   -------------------------------------------------------------------------- */

.filters {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 0.9rem;
}

/* The search and the number of results are one thought - type, press, see how
   many - so they sit on one line and the count is the largest thing in the
   panel after the field itself. */
.filters__top { display: grid; gap: 0.6rem; }
@media (min-width: 700px) {
  .filters__top { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1rem; }
}
.filters__count {
  margin: 0;
  font-size: var(--step--1);
  color: var(--ink-2);
  white-space: nowrap;
}
.filters__count strong { font-size: var(--step-1); color: var(--ink); margin-right: 0.15rem; }
.filters__when { display: block; color: var(--ink-3); font-size: 0.75rem; }

/* What is switched on, before the controls that switch things on. Tinted band
   so it reads as state rather than as one more group of choices. */
.filters__active {
  margin-top: 0.85rem;
  padding: 0.7rem 0.8rem;
  background: var(--surface-2);
  border-radius: var(--radius);
}

.filters__group { margin-top: 0.85rem; padding-top: 0.85rem; border-top: 1px dashed var(--line-2); }

/* The community list exists because a province was chosen. Stepping it in and
   hanging it off a rule says that, where five identical rows said nothing. */
.filters__group--nested {
  margin-left: 0.85rem;
  padding-left: 0.85rem;
  border-top: 0;
  border-left: 2px solid var(--line-2);
  padding-top: 0.6rem;
  margin-top: 0.5rem;
}

/* These narrow a set rather than choosing one, so they sit quieter. */
.filters__group--quiet .filters__label { color: var(--line-default); }
.filters__label {
  font-family: var(--display);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 0.5rem;
}
.filters__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.9rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line-2);
}

/* --------------------------------------------------------------------------
   Event card - the route bar carries the region
   -------------------------------------------------------------------------- */

.cards { display: grid; gap: 0.75rem; }

.card {
  position: relative;
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 0 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 5px solid var(--region, var(--line-default));
  border-radius: var(--radius);
  padding: 0.9rem 1rem 0.9rem 0.85rem;
  transition: box-shadow 180ms ease, border-color 180ms ease, transform 180ms ease;
}
.card:hover { box-shadow: var(--shadow-2); border-color: var(--ink-3); border-left-color: var(--region, var(--line-default)); }
.card:has(.card__title a:focus-visible) { box-shadow: var(--shadow-2); }

/* Ticket-stub date block: tabular numerals, hairline rule, no colour. */
.card__date {
  font-family: var(--display);
  text-align: center;
  border-right: 1px solid var(--line-2);
  padding-right: 0.85rem;
  align-self: start;
}
.card__date .mon {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.card__date .day {
  display: block;
  font-size: 1.75rem;
  font-weight: 800;
  font-stretch: 115%;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.card__date .dow {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.card__date .range {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--signal-ink);
}

.card__body { min-width: 0; }

.card__title {
  font-family: var(--display);
  font-size: var(--step-1);
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.2;
  margin: 0 0 0.3rem;
  overflow-wrap: anywhere;
}
.card__title a { color: inherit; text-decoration: none; }
.card__title a::after { content: ''; position: absolute; inset: 0; }
.card__title a:hover { color: var(--signal-ink); }

.card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.75rem;
  font-size: var(--step--1);
  color: var(--ink-2);
  margin-bottom: 0.4rem;
}
.card__meta > span { display: inline-flex; align-items: center; gap: 0.3rem; }
.card__meta svg { width: 14px; height: 14px; flex: none; color: var(--ink-3); }

.card__excerpt {
  font-size: var(--step--1);
  color: var(--ink-2);
  margin: 0 0 0.55rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  overflow: hidden;
}

.card__tags { display: flex; flex-wrap: wrap; gap: 0.35rem; }

.card__thumb {
  grid-column: 1 / -1;
  order: -1;
  margin: -0.9rem -1rem 0.9rem -0.85rem;
  aspect-ratio: 16 / 7;
  overflow: hidden;
  background: var(--surface-2);
}
.card__thumb img { width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 700px) {
  .card { grid-template-columns: 74px 132px minmax(0, 1fr); }
  .card--nothumb { grid-template-columns: 74px minmax(0, 1fr); }
  .card__thumb {
    grid-column: auto;
    order: 0;
    margin: 0;
    aspect-ratio: 4 / 3;
    border-radius: 3px;
    align-self: start;
  }
}

/* --------------------------------------------------------------------------
   Tags
   -------------------------------------------------------------------------- */

.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  font-family: var(--display);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.22rem 0.5rem;
  border-radius: 2px;
  background: var(--surface-2);
  color: var(--ink-2);
  border: 1px solid var(--line-2);
  text-decoration: none;
}
.tag--free { background: var(--amber-bg); border-color: #eccd88; color: var(--amber-ink); }
.tag--now { background: var(--ink); border-color: var(--ink); color: #fff; }
.tag--cancelled { background: #fdecea; border-color: #f0b9b3; color: #8c1d13; }
.tag--cat { background: var(--surface); border-color: var(--line); color: var(--ink-2); }
.tag--cat::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--tag-color, var(--line-default));
}
a.tag:hover { border-color: var(--ink-3); color: var(--ink); }

/* --------------------------------------------------------------------------
   Departure board - the weekend signature
   -------------------------------------------------------------------------- */

.board {
  background: var(--ink);
  border-radius: var(--radius-lg);
  padding: clamp(1rem, 0.6rem + 1.6vw, 1.75rem);
  color: #fff;
}
.board__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1.1rem;
}
.board__head h2 { color: #fff; font-size: var(--step-2); }
.board__head .eyebrow { color: rgba(255, 255, 255, 0.55); margin: 0 0 0.35rem; }
.board__head .eyebrow::after { background: rgba(255, 255, 255, 0.18); }
.board__head a { color: var(--amber); font-weight: 600; font-size: var(--step--1); }

.board__grid {
  display: grid;
  gap: 1px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
  overflow: hidden;
}
@media (min-width: 820px) {
  .board__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.board__day { background: var(--ink); padding: 0.9rem; }
.board__day h3 {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 0.75rem;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.board__day h3 span { color: rgba(255, 255, 255, 0.45); font-variant-numeric: tabular-nums; letter-spacing: 0.06em; }

.board__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.1rem; }

.board__row {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: 0.7rem;
  padding: 0.5rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  align-items: baseline;
}
.board__row:first-child { border-top: 0; }
.board__time {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--amber);
  letter-spacing: 0.02em;
}
.board__link { color: #fff; text-decoration: none; font-size: 0.9375rem; line-height: 1.3; font-weight: 500; }
.board__link:hover { color: var(--amber); text-decoration: underline; }
.board__where { display: block; font-size: 0.75rem; color: rgba(255, 255, 255, 0.5); margin-top: 0.1rem; }
.board__empty { color: rgba(255, 255, 255, 0.45); font-size: 0.875rem; padding: 0.5rem 0; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero { padding-block: clamp(1.75rem, 1rem + 3vw, 3.25rem) clamp(1.25rem, 1rem + 2vw, 2rem); }
.hero h1 { font-size: var(--step-4); font-weight: 800; font-stretch: 115%; letter-spacing: -0.03em; max-width: 16ch; }
.hero .lede { margin-top: 0.85rem; }
.hero__search { margin-top: 1.5rem; max-width: 560px; }
.hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  margin-top: 1rem;
  font-size: var(--step--1);
  color: var(--ink-2);
}
.hero__stats b { font-variant-numeric: tabular-nums; color: var(--ink); }

/* --------------------------------------------------------------------------
   Region legend
   -------------------------------------------------------------------------- */

.legend { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; font-size: var(--step--1); color: var(--ink-2); }
.legend span { display: inline-flex; align-items: center; gap: 0.4rem; }
.legend i { width: 14px; height: 4px; border-radius: 2px; background: var(--region); display: block; }

/* --------------------------------------------------------------------------
   Detail page
   -------------------------------------------------------------------------- */

.detail { display: grid; gap: clamp(1.25rem, 1rem + 2vw, 2.5rem); align-items: start; }
@media (min-width: 900px) { .detail { grid-template-columns: minmax(0, 1fr) 330px; } }

.detail__hero {
  aspect-ratio: 21 / 9;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  margin-bottom: 1.25rem;
}
.detail__hero img { width: 100%; height: 100%; object-fit: cover; }

.prose { max-width: 68ch; color: var(--ink-2); }
.prose h2, .prose h3 { color: var(--ink); margin: 1.6em 0 0.5em; }
.prose h2 { font-size: var(--step-1); }
.prose h3 { font-size: var(--step-0); }
.prose ul, .prose ol { padding-left: 1.2em; margin: 0 0 1em; }
.prose li + li { margin-top: 0.3em; }
.prose a { color: var(--signal-ink); }

/* The ticket panel repeats the route bar so the region stays legible. */
.ticket {
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 5px solid var(--region, var(--line-default));
  border-radius: var(--radius);
  padding: 1.1rem;
  position: sticky;
  top: 78px;
}
.ticket dl { margin: 0; display: grid; gap: 0.85rem; }
.ticket dt {
  font-family: var(--display);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 0.15rem;
}
.ticket dd { margin: 0; font-size: 0.9375rem; }
/* The same card away from the two-column event page, where sticking to the
   viewport has nothing to stick against. */
.ticket--plain { position: static; top: auto; }
.ticket__actions { display: grid; gap: 0.5rem; margin-top: 1.1rem; }
.ticket__source {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px dashed var(--line-2);
  font-size: 0.75rem;
  color: var(--ink-3);
}

/* --------------------------------------------------------------------------
   Map
   -------------------------------------------------------------------------- */

.mapshell { display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); }
@media (min-width: 900px) { .mapshell { grid-template-columns: 360px minmax(0, 1fr); } }

.mapshell__list { max-height: 72vh; overflow-y: auto; padding: 0.75rem; border-bottom: 1px solid var(--line); }
@media (min-width: 900px) { .mapshell__list { border-bottom: 0; border-right: 1px solid var(--line); } }

.mapshell__canvas { height: 52vh; min-height: 340px; }
@media (min-width: 900px) { .mapshell__canvas { height: 72vh; } }

#map { width: 100%; height: 100%; background: var(--surface-2); }
.leaflet-container { font: inherit; }

.pin {
  width: 16px; height: 16px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--region, var(--signal));
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}
.pin--free { background: var(--amber); }

/* The map's side rail is a dense index, not a card list: one line per event. */
.maplist { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }

.maprow {
  border-left: 4px solid var(--region, var(--line-default));
  padding: 0.55rem 0.7rem;
  background: var(--surface);
  border-bottom: 1px solid var(--line-2);
}
.maprow:hover { background: var(--surface-2); }
.maprow__link {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1.25;
  color: var(--ink);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.maprow__link:hover { color: var(--signal-ink); text-decoration: underline; }
.maprow__meta { display: block; font-size: 0.75rem; color: var(--ink-2); margin-top: 0.15rem; }

.pop { font-family: var(--body); min-width: 190px; }
.pop b { font-family: var(--display); font-size: 0.9375rem; display: block; margin-bottom: 0.2rem; }
.pop .pop__meta { font-size: 0.75rem; color: var(--ink-2); }
.pop a { display: inline-block; margin-top: 0.5rem; font-weight: 600; font-size: 0.8125rem; }

/* --------------------------------------------------------------------------
   Pagination, notices, forms
   -------------------------------------------------------------------------- */

.pager { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; justify-content: center; margin-top: 1.5rem; }
.pager a, .pager span {
  min-width: 42px; min-height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  padding-inline: 0.6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  color: var(--ink-2);
}
.pager a:hover { border-color: var(--ink); color: var(--ink); }
.pager [aria-current='page'] { background: var(--ink); border-color: var(--ink); color: #fff; font-weight: 700; }
.pager .is-disabled { opacity: 0.4; }

.notice {
  border: 1px solid var(--line);
  border-left: 5px solid var(--signal);
  background: var(--surface);
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
}
.notice--warn { border-left-color: var(--amber); }
.notice--error { border-left-color: #c0392b; }

.empty {
  text-align: center;
  padding: clamp(2rem, 1.5rem + 3vw, 4rem) 1rem;
  border: 1px dashed var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.empty h2 { font-size: var(--step-1); margin-bottom: 0.5rem; }

.field { display: grid; gap: 0.35rem; margin-bottom: 1rem; }
.field label { font-weight: 600; font-size: var(--step--1); }
.field .hint { font-size: 0.75rem; color: var(--ink-3); }
.field input[type='text'],
.field input[type='email'],
.field input[type='url'],
.field input[type='datetime-local'],
.field select,
.field textarea {
  width: 100%;
  min-height: 44px;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.field textarea { min-height: 140px; resize: vertical; }
.field :is(input, select, textarea):focus-visible { border-color: var(--signal); outline-offset: 0; }
.field--error :is(input, select, textarea) { border-color: #c0392b; }
.field__error { color: #a8271b; font-size: var(--step--1); }

.checkgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0.4rem; }
.checkgrid label { display: flex; gap: 0.5rem; align-items: center; font-size: var(--step--1); padding: 0.4rem 0.5rem; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--surface); cursor: pointer; }
.checkgrid label:hover { border-color: var(--ink-3); }
.checkgrid input { width: 18px; height: 18px; accent-color: var(--signal); }

.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --------------------------------------------------------------------------
   Link grids (internal linking blocks)
   -------------------------------------------------------------------------- */

.linkgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.4rem; list-style: none; margin: 0; padding: 0; }
.linkgrid a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--region, var(--line-default));
  border-radius: var(--radius);
  background: var(--surface);
  text-decoration: none;
  color: var(--ink);
  font-size: var(--step--1);
  font-weight: 600;
}
.linkgrid a:hover { border-color: var(--ink-3); border-left-color: var(--region, var(--line-default)); }
.linkgrid .n { color: var(--ink-3); font-variant-numeric: tabular-nums; font-weight: 500; }

/* --------------------------------------------------------------------------
   Newsletter signup
   -------------------------------------------------------------------------- */

.signup {
  display: grid;
  gap: 1rem;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 5px solid var(--amber);
  border-radius: var(--radius-lg);
  padding: clamp(1rem, 0.8rem + 1vw, 1.5rem);
}
@media (min-width: 780px) {
  .signup { grid-template-columns: 1fr minmax(0, 22rem); gap: 2rem; }
}
.signup__copy h2 { margin-bottom: 0.35rem; }
.signup__copy .small { max-width: 46ch; }
.signup__form .searchbar { border-color: var(--ink); }

.signup--inverse {
  background: var(--ink);
  border-color: var(--ink);
  border-left-color: var(--amber);
  color: rgba(255, 255, 255, 0.78);
}
.signup--inverse h2 { color: #fff; }
.signup--inverse .eyebrow { color: rgba(255, 255, 255, 0.5); }
.signup--inverse .eyebrow::after { background: rgba(255, 255, 255, 0.18); }
.signup--inverse .muted { color: rgba(255, 255, 255, 0.62); }
.signup--inverse a { color: var(--amber); }

/* --------------------------------------------------------------------------
   Confirmation pages
   --------------------------------------------------------------------------
   Reached once, read once, then left. The job is to answer three questions in
   order - did it work, is there anything left for me to do, where do I go now -
   so the page is a single column with one primary action and nothing competing
   for the eye. The mark is an outlined SVG rather than a filled badge: at this
   size a solid disc of colour reads as an alert.
   -------------------------------------------------------------------------- */

.confirm { max-width: 46rem; }

.confirm__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 1rem;
  border-radius: 50%;
  border: 2px solid currentColor;
  color: var(--signal);
  background: var(--signal-bg);
}
.confirm__mark svg { width: 24px; height: 24px; }
.confirm__mark--inbox { color: var(--amber-ink); background: var(--amber-bg); }
.confirm__mark--stop  { color: var(--ink-2);     background: var(--surface-2); }

.confirm__body .lede { margin-bottom: 0; }

.confirm__detail {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 5px solid var(--signal);
  border-radius: var(--radius-lg);
  padding: clamp(1rem, 0.85rem + 0.6vw, 1.35rem);
}
.confirm__detailhead {
  font-family: var(--display);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 0.9rem;
}

.confirm__facts { margin: 0; display: grid; gap: 0.9rem; }
@media (min-width: 600px) {
  .confirm__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.75rem; }
}
.confirm__facts dt {
  font-family: var(--display);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 0.15rem;
}
.confirm__facts dd { margin: 0; font-size: var(--step--1); line-height: 1.55; }

/* Wrapping, not overflowing: two 44px targets side by side do not fit a 360px
   phone, and a button that runs off the edge is a button nobody presses. */
.confirm__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
/* --------------------------------------------------------------------------
   Sponsored slots
   --------------------------------------------------------------------------
   Deliberately quieter than an event card and always labelled, so an ad can
   never be mistaken for a listing.
   -------------------------------------------------------------------------- */

.ad {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  padding: 0.75rem;
}
.ad__label {
  font-family: var(--display);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 0.5rem;
}
.ad__link { display: block; text-decoration: none; color: inherit; }
.ad__image { width: 100%; height: auto; border-radius: 3px; }
.ad__text { display: grid; gap: 0.3rem; }
.ad__headline {
  font-family: var(--display);
  font-size: var(--step-1);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--ink);
}
.ad__body { font-size: var(--step--1); color: var(--ink-2); }
.ad__cta {
  justify-self: start;
  margin-top: 0.35rem;
  font-family: var(--display);
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--signal-ink);
  border-bottom: 2px solid var(--signal);
  padding-bottom: 1px;
}
.ad__link:hover .ad__cta { color: var(--ink); border-bottom-color: var(--ink); }
.ad__by { margin: 0.5rem 0 0; font-size: 0.6875rem; color: var(--ink-3); }
.ad__pixel { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.ad--event_sidebar { margin-top: 1rem; }
.ad--footer { margin-block: 1.5rem; }

/* --------------------------------------------------------------------------
   Breadcrumbs & footer
   -------------------------------------------------------------------------- */

.crumbs { font-size: var(--step--1); color: var(--ink-3); padding-block: 0.9rem; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; }
.crumbs li + li::before { content: '/'; margin-right: 0.4rem; color: var(--line); }
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }

.footer { background: var(--ink); color: rgba(255, 255, 255, 0.72); margin-top: clamp(2.5rem, 2rem + 3vw, 4rem); padding-block: 2.5rem 2rem; }
.footer a { color: #fff; text-decoration: none; }
.footer a:hover { text-decoration: underline; }
.footer__cols { display: grid; gap: 1.75rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.footer h2 { font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); margin-bottom: 0.6rem; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; font-size: var(--step--1); }
.footer__base { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, 0.14); font-size: var(--step--1); display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; justify-content: space-between; }

/* --------------------------------------------------------------------------
   Utility
   -------------------------------------------------------------------------- */

.row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.row--between { justify-content: space-between; }
.grid-2 { display: grid; gap: 1rem; }
@media (min-width: 760px) { .grid-2 { grid-template-columns: 1fr 1fr; } }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }

/* --------------------------------------------------------------------------
   Province chooser
   --------------------------------------------------------------------------
   The home page's first question. Each tile is a destination sign: the
   province's line colour runs full-height down the leading edge, the name
   carries the weight, and the counts sit underneath in tabular numerals so
   the column of numbers reads straight down the grid.

   Thirteen is a deliberate, fixed count, so the grid is sized to land on
   clean rows - four across on a desktop, two on a phone - rather than
   leaving one orphan tile on its own row.
   -------------------------------------------------------------------------- */

.provincegrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* "Newfoundland and Labrador" wraps to two lines where every other name fits
   on one, so the tiles are stretched to the tallest in their row - a ragged
   baseline across a grid this regular reads as a bug. */
.provincegrid li {
  display: flex;
}

.provincegrid a {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  padding: 0.8rem 0.85rem 0.75rem 1.1rem;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: var(--surface);
  text-decoration: none;
  color: var(--ink);
  overflow: hidden;
}

/* The colour bar is a child rather than a border-left so it can sit flush in
   the corner radius and thicken on hover without shifting the text. */
.provincegrid__bar {
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--region, var(--line-default));
  transition: width 120ms ease;
}

.provincegrid a:hover,
.provincegrid a:focus-visible {
  border-color: var(--ink-3);
}

.provincegrid a:hover .provincegrid__bar,
.provincegrid a:focus-visible .provincegrid__bar {
  width: 7px;
}

.provincegrid__name {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--step-0);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.provincegrid__meta {
  display: block;
  margin-top: 0.2rem;
  color: var(--ink-3);
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 520px) {
  .provincegrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .provincegrid a { padding: 0.65rem 0.6rem 0.6rem 0.9rem; }
}