/* ==========================================================================
   Base: reset, typography, links, containers, layout primitives, a11y helpers
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* scroll-padding-top is synced to the header height by motion.css/motion.js */
}

body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ol, ul { margin: 0; }

ul[role="list"], ol[role="list"], ul[class], ol[class] { list-style: none; padding: 0; }

img, svg, video, canvas { display: block; max-width: 100%; }
img, video { height: auto; }

input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled, [aria-disabled="true"] { cursor: not-allowed; }

table { border-collapse: collapse; border-spacing: 0; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
legend { padding: 0; }

[hidden] { display: none !important; }

/* ---- Document ----------------------------------------------------------- */
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--surface-page);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: var(--leading-normal);
  font-weight: var(--weight-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-optical-sizing: auto;
  overflow-x: hidden;
}

/* The header floats (position: fixed) over the top of the page. main reserves
   its height; a leading .page-hero pulls itself up underneath the pill. */
main { flex: 1 0 auto; display: block; padding-top: var(--header-space); }
main:focus { outline: none; }

/* ---- Typography --------------------------------------------------------- */
/* h1-h3 are the editorial serif (light at display sizes); h4-h6 are UI
   headings in the grotesk. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-display);
  color: var(--color-heading);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  font-weight: var(--weight-medium);
  text-wrap: balance;
  overflow-wrap: break-word;
}
h1, .h1 { font-size: var(--step-5); line-height: var(--leading-display); letter-spacing: var(--tracking-display); font-weight: var(--weight-display); }
h2, .h2 { font-size: var(--step-4); line-height: 1.06; letter-spacing: var(--tracking-display); font-weight: var(--weight-display); }
h3, .h3 { font-size: var(--step-2); line-height: 1.18; letter-spacing: var(--tracking-tight); font-weight: var(--weight-regular); }
h4, .h4 { font-size: var(--step-1); font-family: var(--font-sans); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-snug); }
h5, .h5, h6, .h6 { font-size: var(--step-0); font-family: var(--font-sans); font-weight: var(--weight-semibold); letter-spacing: 0; }

p, li, dd { max-width: var(--measure); text-wrap: pretty; }

small, .text-small { font-size: var(--step--1); }
strong, b { font-weight: var(--weight-bold); }

.lead {
  font-family: var(--font-sans);
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink-700);
  max-width: var(--measure-narrow);
}

.text-muted { color: var(--color-text-muted); }
.text-center { text-align: center; }
.nowrap { white-space: nowrap; }

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--space-l) 0;
}

/* Long-form copy (news articles, about pages, member overviews). */
.prose {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  line-height: var(--leading-loose);
  color: var(--ink-800);
  max-width: var(--measure);
}
.prose > * + * { margin-top: 1.1em; }
.prose h2, .prose h3, .prose h4 { margin-top: 1.8em; }
.prose h2 { font-size: var(--step-3); }
.prose h3 { font-size: var(--step-2); }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li + li { margin-top: 0.35em; }
.prose li::marker { color: var(--blue-500); }
.prose blockquote {
  border-left: 1px solid var(--navy-300);
  padding-left: var(--space-m);
  color: var(--navy-900);
  font-size: var(--step-2);
  line-height: 1.35;
  font-style: italic;
  font-weight: var(--weight-light);
}

code, kbd, pre { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 0.9em; }

/* ---- Links -------------------------------------------------------------- */
a {
  color: var(--color-link);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--dur-fast) var(--ease-out), text-decoration-color var(--dur-fast);
}
a:hover { color: var(--color-link-hover); text-decoration-thickness: 2px; }

/* ---- Focus -------------------------------------------------------------- */
:focus { outline: none; }
:focus-visible {
  outline: var(--focus-width) solid var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-xs);
}
.on-dark :focus-visible,
.surface-ink :focus-visible,
.section--ink :focus-visible,
.colour-tile :focus-visible,
.glass-dark :focus-visible,
.site-footer :focus-visible,
.page-hero :focus-visible,
.cta-band :focus-visible,
.demo-switcher :focus-visible {
  outline-color: var(--focus-ring-inverse);
}
/* Light surfaces nested inside a dark band (e.g. the white .hero-card inside
   .page-hero): restore the standard ring. Mark any such surface with
   data-surface="light". Specificity beats the inverse rules above. */
.on-dark [data-surface="light"] :focus-visible,
.page-hero [data-surface="light"] :focus-visible,
.cta-band [data-surface="light"] :focus-visible,
.site-footer [data-surface="light"] :focus-visible,
.page-hero .hero-card :focus-visible,
.page-hero .card :focus-visible,
.page-hero .panel :focus-visible,
.on-dark .hero-card :focus-visible,
.on-dark .card :focus-visible,
.on-dark .panel :focus-visible,
.surface-ink .card :focus-visible,
.surface-ink .panel :focus-visible,
.surface-ink [data-surface="light"] :focus-visible,
.section--ink .card :focus-visible,
.section--ink .panel :focus-visible,
.section--ink [data-surface="light"] :focus-visible,
.cta-band .card :focus-visible,
.cta-band .panel :focus-visible,
[data-surface="light"] :focus-visible,
[data-surface="light"]:focus-visible {
  outline-color: var(--focus-ring);
}

::selection { background: var(--sky-100); color: var(--navy-950); }

/* ---- Accessibility helpers ---------------------------------------------- */
.visually-hidden,
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.skip-link {
  position: absolute;
  left: var(--space-s);
  top: var(--space-s);
  z-index: calc(var(--z-toast) + 10);
  padding: var(--space-xs) var(--space-m);
  background: var(--white);
  color: var(--navy-900);
  font-weight: var(--weight-semibold);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-3);
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform var(--dur) var(--ease-out);
}
.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  outline: var(--focus-width) solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-pill);
}

/* ---- Containers ---------------------------------------------------------- */
.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: calc(var(--container-narrow) + 2 * var(--gutter)); }
.container--wide { max-width: calc(var(--container-wide) + 2 * var(--gutter)); }

.section { padding-block: var(--section-space); }
.section--tight { padding-block: calc(var(--section-space) * 0.6); }
.section--alt { background: var(--surface-paper); }
.section--sky { background: var(--surface-sky); }
.section--flush-top { padding-top: 0; }

/* ---- Layout primitives --------------------------------------------------- */
/* Stack: vertical rhythm. Set --stack-gap or use a size modifier. */
.stack { display: flex; flex-direction: column; gap: var(--stack-gap, var(--space-s)); }
.stack--2xs { --stack-gap: var(--space-2xs); }
.stack--xs  { --stack-gap: var(--space-xs); }
.stack--m   { --stack-gap: var(--space-m); }
.stack--l   { --stack-gap: var(--space-l); }
.stack--xl  { --stack-gap: var(--space-xl); }
.stack > * { margin-block: 0; }

/* Cluster: wrapping row of items (buttons, badges, meta). */
.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cluster-gap, var(--space-xs));
}
.cluster--s { --cluster-gap: var(--space-2xs); }
.cluster--l { --cluster-gap: var(--space-m); }
.cluster--between { justify-content: space-between; }
.cluster--end { justify-content: flex-end; }
.cluster--start { align-items: flex-start; }

/* Grid: auto-fit columns, each at least --grid-min wide (never wider than the container). */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-min, 16rem), 100%), 1fr));
  gap: var(--grid-gap, var(--space-m));
}
.grid--fill { grid-template-columns: repeat(auto-fill, minmax(min(var(--grid-min, 16rem), 100%), 1fr)); }
.grid--xs { --grid-min: 9rem; }
.grid--s  { --grid-min: 12rem; }
.grid--m  { --grid-min: 16rem; }
.grid--l  { --grid-min: 20rem; }
.grid--xl { --grid-min: 26rem; }

/* Fixed column counts that collapse on small screens. */
.grid-2, .grid-3, .grid-4 { display: grid; gap: var(--grid-gap, var(--space-m)); grid-template-columns: 1fr; }
@media (min-width: 40em) {
  .grid-2, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 62em) {
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Main column + sidebar (profile, event detail, account). Sidebar goes below on mobile. */
.with-sidebar { display: grid; gap: var(--space-xl); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 62em) {
  .with-sidebar { grid-template-columns: minmax(0, 1fr) 20rem; }
  .with-sidebar--left { grid-template-columns: 17rem minmax(0, 1fr); }
  .sticky-aside { position: sticky; top: calc(var(--header-space) + var(--space-s)); }
}

/* Utility spacing (sparingly). */
.mt-0 { margin-top: 0 !important; }
.mt-s { margin-top: var(--space-s); }
.mt-m { margin-top: var(--space-m); }
.mt-l { margin-top: var(--space-l); }
.mt-xl { margin-top: var(--space-xl); }
.mb-m { margin-bottom: var(--space-m); }

/* Lock page scroll while the mobile nav or a dialog is open. */
html.is-scroll-locked, html.is-scroll-locked body { overflow: hidden; }

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