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

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

body {
  margin: 0;
  min-height: 100svh;
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1,
p {
  margin: 0;
}

/* Selection in the brand ink; the one accent on dark surfaces */
::selection {
  background: var(--color-plum);
  color: var(--color-bone);
}

.theme-card ::selection,
.programme ::selection,
.site-footer ::selection {
  background: var(--color-accent-on-dark);
  color: var(--color-navy);
}

:focus-visible {
  outline: 2px solid var(--color-violet);
  outline-offset: 3px;
}

/* Anchor targets land with a little air above them */
[id] {
  scroll-margin-top: 1.5rem;
}

/* ---------- Buttons (from the revised Figma board, node 12:371) ---------- */

.btn {
  position: relative;
  isolation: isolate;
  /* A <button> brings its own border and fill; drop them so nothing shows behind the notched corners */
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--btn-height);
  padding: 0 var(--btn-pad-x);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-btn);
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
  transition:
    background-color var(--duration-normal) var(--ease-out-expo),
    color var(--duration-normal) var(--ease-out-expo),
    box-shadow var(--duration-normal) var(--ease-out-expo);
}

/* Ticket: plum slab with a scalloped notch at each corner and a stitched perforation near the end.
   The slab is a pseudo-element so the mask that cuts the notches never clips the focus ring. */
.btn--ticket {
  --btn-bg: var(--color-accent);
  --notch: var(--ticket-notch);
  padding-right: calc(var(--btn-pad-x) + var(--ticket-stub));
  color: var(--color-surface);
}

.btn--ticket::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--btn-bg);
  -webkit-mask:
    radial-gradient(circle var(--notch) at 0 0, transparent 97%, #000 100%) top left / 51% 51% no-repeat,
    radial-gradient(circle var(--notch) at 100% 0, transparent 97%, #000 100%) top right / 51% 51% no-repeat,
    radial-gradient(circle var(--notch) at 0 100%, transparent 97%, #000 100%) bottom left / 51% 51% no-repeat,
    radial-gradient(circle var(--notch) at 100% 100%, transparent 97%, #000 100%) bottom right / 51% 51% no-repeat;
  mask:
    radial-gradient(circle var(--notch) at 0 0, transparent 97%, #000 100%) top left / 51% 51% no-repeat,
    radial-gradient(circle var(--notch) at 100% 0, transparent 97%, #000 100%) top right / 51% 51% no-repeat,
    radial-gradient(circle var(--notch) at 0 100%, transparent 97%, #000 100%) bottom left / 51% 51% no-repeat,
    radial-gradient(circle var(--notch) at 100% 100%, transparent 97%, #000 100%) bottom right / 51% 51% no-repeat;
  transition: background-color var(--duration-normal) var(--ease-out-expo);
}

.btn--ticket::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: var(--ticket-stub);
  --stitch-dot: 2px;
  width: var(--stitch-dot);
  --stitch-color: currentColor;
  background-image: var(--stitch-dotted);
  background-size: var(--stitch-dot) var(--stitch-pitch);
  background-repeat: repeat-y;
  background-position: 0 calc(var(--stitch-pitch) / 2);
  opacity: 0.85;
  transition: opacity var(--duration-normal) var(--ease-out-expo);
}

.btn--ticket:active {
  --btn-bg: var(--color-navy);
}

/* Not live yet: the button stays in place but reads as a label, not a control */
.btn[disabled] {
  cursor: default;
  pointer-events: none;
}

/* Outline: square corners, 1px plum rule */
.btn--outline {
  color: var(--color-plum);
  background: transparent;
  box-shadow: inset 0 0 0 1px currentColor;
}

.btn--outline:active {
  background: color-mix(in oklab, var(--color-plum) 14%, transparent);
}

/* On coloured and dark surfaces the ticket is white; its ring is white too */
.btn--on-hue {
  --btn-bg: var(--color-white);
  color: var(--hue);
}

.btn--on-dark {
  --btn-bg: var(--color-white);
  color: var(--color-navy);
}

.btn--on-hue:active,
.btn--on-dark:active {
  --btn-bg: var(--color-bone-deep);
}

.btn--on-hue:focus-visible,
.btn--on-dark:focus-visible {
  outline-color: var(--color-white);
}

@media (hover: hover) {
  .btn--ticket:hover {
    --btn-bg: var(--color-accent-hover);
  }

  .btn--ticket:hover::after {
    opacity: 1;
  }

  .btn--outline:hover {
    background: color-mix(in oklab, var(--color-plum) 8%, transparent);
  }

  .btn--on-hue:hover,
  .btn--on-dark:hover {
    --btn-bg: var(--color-bone);
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .btn--ticket::before,
  .btn--ticket::after {
    transition-duration: 1ms;
  }
}

@media print {
  .quilt-field,
  .nav__toggle,
  .nav__cta,
  .skip-link,
  .site-footer__form,
  .site-footer__patch,
  .marquee {
    display: none !important;
  }

  .site-header {
    min-height: 0;
  }

  .band {
    padding-block: 1.5rem;
    break-inside: avoid;
  }

  [data-reveal],
  .stagger > * {
    opacity: 1 !important;
    transform: none !important;
  }
}