/*! Marquee design system 1.0.0 (2026-11-07). Licensed to Design Systems Library members, single user. */

/* ---- base ---- */
/* Base: document defaults, zero-specificity resets inside .mq-page, the two grounds (paper and night),
   type roles and helpers. Big Shoulders sets display stacks in uppercase; Schibsted Grotesk sets
   everything people read. */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--mq-nav-h) + var(--mq-space-5));
}

body {
  margin: 0;
  background: var(--mq-paper);
  color: var(--mq-body);
  font-family: var(--mq-font-sans);
  font-size: var(--mq-fs-body);
  font-weight: var(--mq-weight-regular);
  line-height: var(--mq-lh-body);
  font-kerning: normal;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Phones: interface text that sits in paragraphs (meta, hints, notes under actions) grows to 16px,
   so no paragraph on a small screen is set below 16px. Caps labels in spans stay at 13px. */
@media (max-width: 499px) {
  :root {
    --mq-fs-ui: 1rem;
    --mq-fs-meta: 1rem;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html:focus-within {
    scroll-behavior: smooth;
  }
}

.mq-page {
  display: flow-root;
  min-height: 100vh;
  overflow-x: clip;
  background: var(--mq-paper);
}

:where(.mq-page) :where(*, *::before, *::after) {
  box-sizing: border-box;
}

:where(.mq-page) :where(h1, h2, h3, h4, h5, h6, p, figure, blockquote, ul, ol, dl, dd, pre, fieldset, legend) {
  margin: 0;
}

:where(.mq-page) :where(fieldset) {
  min-width: 0;
  padding: 0;
  border: 0;
}

/* Display headings: condensed, heavy, uppercase. h4 and below return to Schibsted in sentence case. */
:where(.mq-page) :where(h1, h2, h3) {
  color: var(--mq-ink);
  font-family: var(--mq-font-display);
  font-weight: var(--mq-weight-heavy);
  text-transform: uppercase;
  text-wrap: balance;
  font-optical-sizing: auto;
}

:where(.mq-page) :where(h1) {
  font-size: var(--mq-fs-display);
  line-height: var(--mq-lh-display);
  letter-spacing: var(--mq-track-display);
}

:where(.mq-page) :where(h2) {
  font-size: var(--mq-fs-title);
  line-height: var(--mq-lh-title);
  letter-spacing: var(--mq-track-title);
}

:where(.mq-page) :where(h3) {
  font-size: var(--mq-fs-headline);
  font-weight: var(--mq-weight-bold);
  line-height: var(--mq-lh-headline);
}

:where(.mq-page) :where(h4, h5, h6) {
  color: var(--mq-ink);
  font-family: var(--mq-font-sans);
  font-size: var(--mq-fs-card);
  font-weight: var(--mq-weight-bold);
  line-height: var(--mq-lh-snug);
  text-wrap: balance;
}

:where(.mq-page) :where(p, li, dd) {
  text-wrap: pretty;
}

:where(.mq-page) :where(strong, b) {
  color: var(--mq-ink);
  font-weight: var(--mq-weight-bold);
}

/* Links: ink text with a thick loud underline; hover lays the loud fill behind the words */
:where(.mq-page) :where(a) {
  color: var(--mq-ink);
  text-decoration-line: underline;
  text-decoration-color: var(--mq-loud);
  text-decoration-thickness: 3px;
  text-underline-offset: 0.22em;
  transition: background-color var(--mq-dur-fast) var(--mq-ease), color var(--mq-dur-fast) var(--mq-ease);
}

:where(.mq-page) :where(a:hover) {
  background-color: var(--mq-loud);
  color: var(--mq-loud-ink);
  text-decoration-color: var(--mq-loud-ink);
}

:where(.mq-page) :where(:focus-visible) {
  outline: 3px solid var(--mq-focus);
  outline-offset: 2px;
}

:where(.mq-page) ::selection {
  background: var(--mq-loud);
  color: var(--mq-loud-ink);
}

:where(.mq-page) :where(img, svg, video, canvas) {
  display: block;
  max-width: 100%;
}

:where(.mq-page) :where(a svg, button svg, span svg, li svg, p svg, label svg, summary svg, dt svg, time svg) {
  display: inline-block;
  flex-shrink: 0;
  vertical-align: -0.2em;
}

:where(.mq-page) :where(code, kbd, samp) {
  font-family: var(--mq-font-mono);
  font-size: 0.875em;
}

:where(.mq-page) :where(hr) {
  height: 0;
  margin: 0;
  border: 0;
  border-block-start: var(--mq-line-hair) solid var(--mq-rule);
}

:where(.mq-page) :where(button, input, select, textarea) {
  font: inherit;
  color: inherit;
}

:where(.mq-page) :where(table) {
  border-collapse: collapse;
}

:where(.mq-page) :where(abbr[title]) {
  text-decoration: underline dotted;
  cursor: help;
}

/* ------------------------------------------------------------ grounds
   .mq-night turns any block into a black band: every component inside reads the night values.
   .mq-loud turns a block into a loud (coral) band for large black type and one ink button.
   .mq-alt is the paper-2 ground for alternating light sections. */

.mq-night {
  --mq-paper: var(--mq-night);
  --mq-paper-2: var(--mq-night-2);
  --mq-surface: var(--mq-night-2);
  --mq-ink: var(--mq-night-ink);
  --mq-body: var(--mq-night-body);
  --mq-muted: var(--mq-night-muted);
  --mq-rule: var(--mq-night-rule);
  --mq-control: var(--mq-night-control);
  --mq-accent: var(--mq-night-accent);
  --mq-focus: var(--mq-night-focus);
  --mq-loud-soft: var(--mq-night-3);
  --mq-aqua-soft: var(--mq-night-3);
  background-color: var(--mq-paper);
  color: var(--mq-body);
}

.mq-loud {
  --mq-paper: var(--mq-loud);
  --mq-paper-2: var(--mq-loud-hover);
  --mq-surface: var(--mq-loud-hover);
  --mq-ink: var(--mq-loud-ink);
  --mq-body: var(--mq-loud-ink);
  --mq-muted: var(--mq-loud-ink);
  --mq-rule: var(--mq-loud-ink);
  --mq-control: var(--mq-loud-ink);
  --mq-accent: var(--mq-loud-ink);
  --mq-focus: var(--mq-loud-ink);
  --mq-btn: var(--mq-night);
  --mq-btn-hover: var(--mq-night-2);
  --mq-btn-ink: var(--mq-night-ink);
  background-color: var(--mq-paper);
  color: var(--mq-body);
}

.mq-loud :where(a:hover) {
  background-color: var(--mq-night);
  color: var(--mq-night-ink);
  text-decoration-color: var(--mq-night-ink);
}

.mq-alt {
  background-color: var(--mq-paper-2);
}

/* ------------------------------------------------------------ layout helpers */

.mq-wrap {
  width: 100%;
  max-width: var(--mq-page);
  margin-inline: auto;
  padding-inline: var(--mq-gutter);
}

.mq-wrap--narrow {
  max-width: calc(var(--mq-measure) + 2 * var(--mq-gutter));
}

.mq-section {
  padding-block: var(--mq-section-pad);
  background-color: var(--mq-paper);
}

.mq-section.mq-alt {
  background-color: var(--mq-paper-2);
}

.mq-section--tight {
  padding-block: calc(var(--mq-section-pad) * 0.6);
}

.mq-section--flush-top {
  padding-block-start: 0;
}

.mq-section--flush-bottom {
  padding-block-end: 0;
}

/* A padded block: for a small night or loud panel inside a paper section */
.mq-panel {
  padding: clamp(1.25rem, 1rem + 1.2vw, 2rem);
}

.mq-flow > * + * {
  margin-block-start: var(--mq-space-5);
}

.mq-flow--tight > * + * {
  margin-block-start: var(--mq-space-3);
}

.mq-flow--loose > * + * {
  margin-block-start: var(--mq-space-8);
}

.mq-grid {
  display: grid;
  gap: var(--mq-space-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.mq-grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
}

.mq-grid--4 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}

.mq-split {
  display: grid;
  gap: var(--mq-space-7);
  align-items: start;
}

@media (min-width: 960px) {
  .mq-split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--mq-space-8);
  }

  .mq-split--wide-start {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  }

  .mq-split--wide-end {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  }

  .mq-split--aside {
    grid-template-columns: minmax(0, 1fr) 22rem;
  }

  .mq-split--center {
    align-items: center;
  }
}

/* Sticky: an aside that stays in view beside long content on wide screens */
@media (min-width: 960px) {
  .mq-sticky {
    position: sticky;
    inset-block-start: calc(var(--mq-nav-h) + var(--mq-space-5));
  }
}

/* A list set in newspaper columns: indexes, long link lists */
.mq-columns {
  columns: 13rem;
  column-gap: var(--mq-space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mq-columns > li {
  break-inside: avoid;
  padding-block: 4px;
}

/* ------------------------------------------------------------ type roles */

.mq-poster-type,
.mq-display,
.mq-title,
.mq-headline {
  color: var(--mq-ink);
  font-family: var(--mq-font-display);
  font-weight: var(--mq-weight-heavy);
  text-transform: uppercase;
  text-wrap: balance;
  font-optical-sizing: auto;
}

.mq-poster-type {
  font-size: var(--mq-fs-poster);
  line-height: var(--mq-lh-poster);
  letter-spacing: var(--mq-track-poster);
}

.mq-display {
  font-size: var(--mq-fs-display);
  line-height: var(--mq-lh-display);
  letter-spacing: var(--mq-track-display);
}

.mq-title {
  font-size: var(--mq-fs-title);
  line-height: var(--mq-lh-title);
}

.mq-headline {
  font-size: var(--mq-fs-headline);
  font-weight: var(--mq-weight-bold);
  line-height: var(--mq-lh-headline);
}

/* The poster stack: one display line per span, set tight like a letterpress bill */
.mq-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.mq-stack__line {
  display: block;
}

.mq-stack__line--indent {
  margin-inline-start: 0.6em;
}

.mq-stack__line--end {
  align-self: flex-end;
}

.mq-stack__line--small {
  font-size: 0.5em;
  line-height: 1;
  padding-block: 0.12em;
}

.mq-stack__line--aqua {
  color: var(--mq-aqua);
}

.mq-stack__line--muted {
  color: var(--mq-muted);
}

/* The mark: the loud fill behind large black type. Display sizes only. */
.mq-mark,
.mq-stack__line--loud {
  display: inline-block;
  padding-inline: 0.08em;
  background: var(--mq-loud);
  color: var(--mq-loud-ink);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.mq-stack__line--loud {
  display: block;
  margin-block: 0.03em;
}

.mq-lede {
  max-width: 40rem;
  color: var(--mq-body);
  font-size: var(--mq-fs-lede);
  line-height: var(--mq-lh-lede);
}

.mq-meta {
  color: var(--mq-muted);
  font-size: var(--mq-fs-meta);
  line-height: var(--mq-lh-ui);
}

.mq-muted {
  color: var(--mq-muted);
}

/* Tracked caps label: sits below or beside a heading, never above it */
.mq-label {
  color: var(--mq-muted);
  font-family: var(--mq-font-sans);
  font-size: var(--mq-fs-label);
  font-weight: var(--mq-weight-semibold);
  line-height: var(--mq-lh-ui);
  letter-spacing: var(--mq-track-label);
  text-transform: uppercase;
}

.mq-num {
  font-variant-numeric: tabular-nums lining-nums;
}

.mq-figure {
  color: var(--mq-ink);
  font-family: var(--mq-font-display);
  font-weight: var(--mq-weight-heavy);
  line-height: 0.9;
  font-variant-numeric: tabular-nums lining-nums;
}

/* Arrow link: an action in running text or under a card */
.mq-link {
  display: inline-flex;
  align-items: center;
  gap: var(--mq-space-2);
  color: var(--mq-ink);
  font-family: var(--mq-font-display);
  font-size: var(--mq-fs-btn);
  font-weight: var(--mq-weight-bold);
  letter-spacing: var(--mq-track-btn);
  line-height: 1.1;
  text-transform: uppercase;
  text-decoration-line: underline;
  text-decoration-color: var(--mq-loud);
  text-decoration-thickness: 3px;
  text-underline-offset: 0.24em;
}

.mq-link svg {
  transition: transform var(--mq-dur) var(--mq-ease);
}

.mq-link:hover svg {
  transform: translateX(3px);
}

.mq-link:dir(rtl) svg {
  transform: scaleX(-1);
}

.mq-link:dir(rtl):hover svg {
  transform: scaleX(-1) translateX(3px);
}

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

.mq-skip {
  position: absolute;
  inset-block-start: var(--mq-space-3);
  inset-inline-start: var(--mq-space-3);
  z-index: 100;
  padding: var(--mq-space-3) var(--mq-space-4);
  background: var(--mq-loud);
  color: var(--mq-loud-ink);
  font-weight: var(--mq-weight-bold);
  text-decoration: none;
  transform: translateY(-200%);
}

.mq-skip:focus {
  transform: none;
}

.mq-icon-flip:dir(rtl) {
  transform: scaleX(-1);
}

@media (prefers-reduced-motion: reduce) {
  :where(.mq-page) :where(*, *::before, *::after) {
    transition-duration: 1ms !important;
  }
}

/* ---- buttons ---- */
/* Buttons: square corners, heavy Big Shoulders labels in capitals. One loud primary per view.
   The primary lifts onto a hard stamp shadow drawn in the current ink; the others invert. */

.mq-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mq-space-2);
  min-height: 52px;
  padding: 12px 26px 11px;
  border: var(--mq-line) solid var(--mq-ink);
  border-radius: var(--mq-radius-btn);
  background: transparent;
  color: var(--mq-ink);
  font-family: var(--mq-font-display);
  font-size: var(--mq-fs-btn);
  font-weight: var(--mq-weight-heavy);
  letter-spacing: var(--mq-track-btn);
  line-height: 1;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition:
    transform var(--mq-dur-fast) var(--mq-ease),
    box-shadow var(--mq-dur-fast) var(--mq-ease),
    background-color var(--mq-dur-fast) var(--mq-ease),
    color var(--mq-dur-fast) var(--mq-ease);
}

.mq-btn:hover {
  background: var(--mq-ink);
  color: var(--mq-paper);
  text-decoration: none;
}

.mq-btn:focus-visible {
  outline: 3px solid var(--mq-focus);
  outline-offset: 3px;
}

.mq-btn:active {
  transform: translate(0, 1px);
  box-shadow: none;
}

.mq-btn--primary {
  border-color: var(--mq-btn);
  background: var(--mq-btn);
  color: var(--mq-btn-ink);
}

.mq-btn--primary:hover {
  border-color: var(--mq-btn-hover);
  background: var(--mq-btn-hover);
  color: var(--mq-btn-ink);
  transform: translate(-3px, -3px);
  box-shadow: 3px 3px 0 0 var(--mq-ink);
}

.mq-btn--secondary {
  background: transparent;
}

/* Ink: a solid black button, for the action on a loud band or a light ticket */
.mq-btn--ink {
  border-color: var(--mq-ink);
  background: var(--mq-ink);
  color: var(--mq-paper);
}

.mq-btn--ink:hover {
  background: var(--mq-ink);
  color: var(--mq-paper);
  transform: translate(-3px, -3px);
  box-shadow: 3px 3px 0 0 var(--mq-loud);
}

/* Text: a tertiary action with the loud underline */
.mq-btn--text {
  min-height: 44px;
  padding-inline: var(--mq-space-1);
  border-color: transparent;
  text-decoration-line: underline;
  text-decoration-color: var(--mq-loud);
  text-decoration-thickness: 3px;
  text-underline-offset: 0.24em;
}

.mq-btn--text:hover {
  background: var(--mq-loud);
  color: var(--mq-loud-ink);
  text-decoration-color: var(--mq-loud-ink);
}

/* Quiet: no border, for icon buttons in bars */
.mq-btn--quiet {
  border-color: transparent;
}

.mq-btn--quiet:hover {
  border-color: var(--mq-rule);
  background: var(--mq-paper-2);
  color: var(--mq-ink);
}

.mq-btn--danger {
  border-color: var(--mq-danger);
  color: var(--mq-danger);
}

.mq-btn--danger:hover {
  border-color: var(--mq-danger);
  background: var(--mq-danger);
  color: var(--mq-surface);
}

.mq-btn--sm {
  min-height: 40px;
  padding: 8px 16px 7px;
  font-size: 1.0625rem;
}

.mq-btn--lg {
  min-height: 64px;
  padding: 16px 34px 15px;
  font-size: 1.5rem;
}

.mq-btn--block {
  display: flex;
  width: 100%;
}

.mq-btn--icon {
  width: 52px;
  padding: 0;
}

.mq-btn--icon.mq-btn--sm {
  width: 40px;
}

.mq-btn[aria-disabled="true"],
.mq-btn:disabled {
  border-color: var(--mq-rule);
  background: var(--mq-paper-2);
  color: var(--mq-muted);
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
  pointer-events: none;
}

/* Loading: keep the label for the accessible name, show a square spinner beside it */
.mq-btn[aria-busy="true"] {
  cursor: progress;
  pointer-events: none;
}

.mq-btn__spinner {
  width: 14px;
  height: 14px;
  border: 3px solid currentColor;
  border-inline-end-color: transparent;
  animation: mq-spin 700ms steps(8) infinite;
}

@keyframes mq-spin {
  to {
    transform: rotate(1turn);
  }
}

@media (pointer: coarse) {
  .mq-btn--sm {
    min-height: 44px;
  }

  .mq-btn--icon.mq-btn--sm {
    width: 44px;
  }
}

/* Action group: one primary and at most one secondary, with an optional note under the pair */
.mq-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mq-space-3) var(--mq-space-4);
}

.mq-actions--center {
  justify-content: center;
}

.mq-actions__note {
  flex-basis: 100%;
  color: var(--mq-muted);
  font-size: var(--mq-fs-meta);
}

.mq-actions--center .mq-actions__note {
  text-align: center;
}

@media (max-width: 479px) {
  .mq-actions--stack-sm {
    flex-direction: column;
    align-items: stretch;
  }

  .mq-actions--stack-sm .mq-btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mq-btn,
  .mq-btn:hover,
  .mq-btn--primary:hover,
  .mq-btn--ink:hover {
    transform: none;
    transition: none;
  }

  .mq-btn__spinner {
    animation-duration: 2400ms;
  }
}

/* ---- badges ---- */
/* Badges: pill track tags, square status badges and the rotated stamp. Labels are 13px capitals. */

.mq-tag,
.mq-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 3px 11px 2px;
  border: var(--mq-line) solid transparent;
  font-family: var(--mq-font-sans);
  font-size: var(--mq-fs-label);
  font-weight: var(--mq-weight-bold);
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
}

.mq-tag svg,
.mq-badge svg {
  width: 14px;
  height: 14px;
}

/* Track tags: 999px pills, one color per track, always with the track name in words */
.mq-tag {
  border-radius: var(--mq-radius-tag);
  background: var(--mq-paper-2);
  color: var(--mq-ink);
}

.mq-tag--build {
  background: var(--mq-loud);
  color: var(--mq-loud-ink);
}

.mq-tag--tend {
  background: var(--mq-aqua);
  color: var(--mq-aqua-ink);
}

.mq-tag--workshop {
  border-color: var(--mq-ink);
  background: transparent;
  color: var(--mq-ink);
}

.mq-tag--main {
  background: var(--mq-ink);
  color: var(--mq-paper);
}

/* Status badges: square, ruled */
.mq-badge {
  border-color: var(--mq-ink);
  border-radius: 0;
  color: var(--mq-ink);
}

.mq-badge--loud {
  border-color: var(--mq-loud);
  background: var(--mq-loud);
  color: var(--mq-loud-ink);
}

.mq-badge--ink {
  background: var(--mq-ink);
  color: var(--mq-paper);
}

.mq-badge--ok {
  border-color: var(--mq-ok);
  background: var(--mq-ok-soft);
  color: var(--mq-ok);
}

.mq-badge--warn {
  border-color: var(--mq-warn);
  background: var(--mq-warn-soft);
  color: var(--mq-warn);
}

.mq-badge--danger {
  border-color: var(--mq-danger);
  background: var(--mq-danger-soft);
  color: var(--mq-danger);
}

.mq-badge--quiet {
  border-color: var(--mq-rule);
  color: var(--mq-muted);
}

.mq-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mq-space-2);
  padding: 0;
  list-style: none;
}

/* The stamp: a rotated, double-ruled mark for Sold out or Full; set over a ticket or a session */
.mq-stamp {
  display: inline-block;
  padding: 6px 14px 4px;
  border: 4px double currentColor;
  color: var(--mq-ink);
  font-family: var(--mq-font-display);
  font-size: 1.75rem;
  font-weight: var(--mq-weight-heavy);
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
  transform: rotate(-7deg);
}

.mq-stamp:dir(rtl) {
  transform: rotate(7deg);
}

/* Filter chips: pill buttons with aria-pressed, used by the timetable and the speaker grid */
.mq-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mq-space-2);
}

.mq-chips[hidden] {
  display: none;
}

.mq-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 6px 16px;
  border: var(--mq-line) solid var(--mq-ink);
  border-radius: var(--mq-radius-tag);
  background: transparent;
  color: var(--mq-ink);
  font-family: var(--mq-font-sans);
  font-size: var(--mq-fs-ui);
  font-weight: var(--mq-weight-bold);
  line-height: 1;
  cursor: pointer;
}

.mq-chip::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--mq-chip-dot, transparent);
  box-shadow: 0 0 0 var(--mq-line) var(--mq-ink);
}

.mq-chip--build {
  --mq-chip-dot: var(--mq-loud);
}

.mq-chip--tend {
  --mq-chip-dot: var(--mq-aqua);
}

.mq-chip--all::before {
  display: none;
}

.mq-chip:hover {
  background: var(--mq-paper-2);
}

.mq-chip[aria-pressed="true"] {
  background: var(--mq-ink);
  color: var(--mq-paper);
}

.mq-chip[aria-pressed="true"]::before {
  box-shadow: 0 0 0 var(--mq-line) var(--mq-paper);
}

.mq-chip:focus-visible {
  outline: 3px solid var(--mq-focus);
  outline-offset: 3px;
}

@media (pointer: coarse) {
  .mq-chip {
    min-height: 44px;
  }
}

/* Accent switcher chips (components page): the dot shows each preset's fixed swatch */
.mq-chip--coral {
  --mq-chip-dot: var(--mq-swatch-coral);
}

.mq-chip--acid {
  --mq-chip-dot: var(--mq-swatch-acid);
}

.mq-chip--tangerine {
  --mq-chip-dot: var(--mq-swatch-tangerine);
}

/* ---- avatar ---- */
/* Avatar: initials in a square block, set in Big Shoulders like a cropped poster letter. No photos. */

.mq-avatar {
  --mq-av: 48px;
  display: inline-grid;
  flex-shrink: 0;
  place-items: center;
  width: var(--mq-av);
  height: var(--mq-av);
  overflow: hidden;
  border-radius: var(--mq-radius-card);
  background: var(--mq-ink);
  color: var(--mq-paper);
  font-family: var(--mq-font-display);
  font-size: calc(var(--mq-av) * 0.56);
  font-weight: var(--mq-weight-heavy);
  letter-spacing: -0.01em;
  line-height: 1;
  text-transform: uppercase;
  user-select: none;
}

.mq-avatar--loud {
  background: var(--mq-loud);
  color: var(--mq-loud-ink);
}

.mq-avatar--aqua {
  background: var(--mq-aqua);
  color: var(--mq-aqua-ink);
}

.mq-avatar--paper {
  background: var(--mq-paper-2);
  color: var(--mq-ink);
}

.mq-avatar--sm {
  --mq-av: 32px;
}

.mq-avatar--lg {
  --mq-av: 72px;
}

/* Poster crop: the letters run off the bottom edge */
.mq-avatar--xl {
  --mq-av: 136px;
  place-items: end center;
  font-size: calc(var(--mq-av) * 0.9);
  line-height: 0.74;
}

.mq-avatars {
  display: flex;
  padding: 0;
  list-style: none;
}

.mq-avatars > * + * {
  margin-inline-start: -10px;
}

.mq-avatars .mq-avatar {
  box-shadow: 0 0 0 3px var(--mq-paper);
}

.mq-avatars__more {
  display: inline-grid;
  place-items: center;
  min-width: 48px;
  height: 48px;
  padding-inline: 8px;
  border: var(--mq-line) solid var(--mq-ink);
  background: var(--mq-paper);
  color: var(--mq-ink);
  font-size: var(--mq-fs-meta);
  font-weight: var(--mq-weight-bold);
}

/* ---- nav ---- */
/* Nav: the black top bar. Wordmark, section links, theme toggle and the ticket button.
   Under 1100px the links fold into a poster-type menu; without scripts they stay visible. */

.mq-nav {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  border-block-end: var(--mq-line-hair) solid var(--mq-rule);
  background: var(--mq-paper);
}

.mq-nav__bar {
  display: flex;
  align-items: center;
  gap: var(--mq-space-4);
  min-height: var(--mq-nav-h);
}

.mq-nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  color: var(--mq-ink);
  font-family: var(--mq-font-display);
  font-size: 1.625rem;
  font-weight: var(--mq-weight-heavy);
  letter-spacing: 0.01em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
}

.mq-nav__brand:hover {
  background: transparent;
  color: var(--mq-ink);
}

.mq-nav__mark {
  display: inline-grid;
  color: var(--mq-loud);
}

.mq-nav__year {
  padding: 3px 6px 2px;
  background: var(--mq-loud);
  color: var(--mq-loud-ink);
}

.mq-nav__menu {
  margin-inline-start: auto;
}

.mq-nav__links {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mq-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 11px;
  color: var(--mq-body);
  font-size: var(--mq-fs-ui);
  font-weight: var(--mq-weight-semibold);
  text-decoration: none;
}

.mq-nav__link:hover {
  background: transparent;
  color: var(--mq-ink);
  text-decoration-line: underline;
  text-decoration-color: var(--mq-loud);
  text-decoration-thickness: 3px;
}

.mq-nav__link[aria-current="page"] {
  color: var(--mq-ink);
  box-shadow: inset 0 -4px 0 var(--mq-loud);
}

.mq-nav__actions {
  display: flex;
  align-items: center;
  gap: var(--mq-space-2);
}

.mq-nav__toggle {
  display: none;
}

.mq-nav__menu-cta {
  display: none;
}

/* Theme toggle: shows the moon in light mode and the sun in dark mode */
.mq-theme-toggle .mq-theme-toggle__sun {
  display: none;
}

:root[data-theme="dark"] .mq-theme-toggle .mq-theme-toggle__sun {
  display: inline-block;
}

:root[data-theme="dark"] .mq-theme-toggle .mq-theme-toggle__moon {
  display: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mq-theme-toggle .mq-theme-toggle__sun {
    display: inline-block;
  }

  :root:not([data-theme="light"]) .mq-theme-toggle .mq-theme-toggle__moon {
    display: none;
  }
}

@media (max-width: 1099px) {
  .mq-nav__bar {
    flex-wrap: wrap;
  }

  .mq-nav__toggle {
    display: inline-flex;
    margin-inline-start: auto;
  }

  .mq-nav__actions {
    order: 2;
  }

  /* Without scripts: the links wrap onto a second row */
  .mq-nav__menu {
    order: 3;
    flex-basis: 100%;
    margin-inline-start: 0;
    padding-block-end: var(--mq-space-3);
  }

  .mq-nav__links {
    flex-wrap: wrap;
  }

  .mq-nav:not(.is-ready) .mq-nav__toggle {
    display: none;
  }

  .mq-nav:not(.is-ready) .mq-nav__actions {
    margin-inline-start: auto;
  }

  /* With scripts: a folded menu that opens as a poster of links */
  .mq-nav.is-ready .mq-nav__menu {
    display: none;
  }

  .mq-nav.is-ready.is-open .mq-nav__menu {
    display: block;
    position: absolute;
    inset-inline: 0;
    inset-block-start: 100%;
    max-height: calc(100vh - var(--mq-nav-h));
    overflow-y: auto;
    padding: var(--mq-space-5) var(--mq-gutter) var(--mq-space-7);
    border-block-end: var(--mq-line-heavy) solid var(--mq-loud);
    background: var(--mq-paper);
  }

  .mq-nav.is-ready .mq-nav__links {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .mq-nav.is-ready .mq-nav__link {
    width: 100%;
    min-height: 56px;
    padding-inline: 0;
    border-block-end: var(--mq-line-hair) solid var(--mq-rule);
    color: var(--mq-ink);
    font-family: var(--mq-font-display);
    font-size: 2.25rem;
    font-weight: var(--mq-weight-heavy);
    line-height: 1;
    text-transform: uppercase;
  }

  .mq-nav.is-ready .mq-nav__link[aria-current="page"] {
    box-shadow: inset 6px 0 0 var(--mq-loud);
    padding-inline-start: var(--mq-space-4);
  }

  .mq-nav.is-ready .mq-nav__menu-cta {
    display: flex;
    margin-block-start: var(--mq-space-5);
  }
}

@media (max-width: 479px) {
  .mq-nav__brand {
    font-size: 1.375rem;
  }

  .mq-nav__year {
    display: none;
  }

  .mq-nav__tickets {
    display: none;
  }

  .mq-nav:not(.is-ready) .mq-nav__tickets {
    display: inline-flex;
  }

  .mq-nav__toggle .mq-nav__toggle-label {
    display: none;
  }
}

/* Static: a nav that scrolls away with the page (documentation, embedded previews) */
.mq-nav--static {
  position: relative;
}

/* ---- announcement-bar ---- */
/* Announcement bar: one loud line above the nav, in large condensed capitals (large text on the loud fill). */

.mq-announce {
  background: var(--mq-loud);
  color: var(--mq-loud-ink);
}

.mq-announce__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--mq-space-3) var(--mq-space-5);
  min-height: 48px;
  padding-block: 8px;
}

.mq-announce__text {
  margin: 0;
  font-family: var(--mq-font-display);
  font-size: 1.375rem;
  font-weight: var(--mq-weight-heavy);
  letter-spacing: 0.02em;
  line-height: 1.1;
  text-align: center;
  text-transform: uppercase;
}

.mq-announce__link {
  color: var(--mq-loud-ink);
  text-decoration-color: var(--mq-loud-ink);
  white-space: nowrap;
}

.mq-announce__link:hover {
  background: var(--mq-loud-ink);
  color: var(--mq-loud);
}

.mq-announce__close {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  padding: 0;
  border: var(--mq-line) solid transparent;
  background: transparent;
  color: var(--mq-loud-ink);
  cursor: pointer;
}

.mq-announce__close:hover {
  border-color: var(--mq-loud-ink);
}

.mq-announce__close:focus-visible {
  outline: 3px solid var(--mq-loud-ink);
  outline-offset: 1px;
}

.mq-announce[hidden] {
  display: none;
}

.mq-announce--night {
  background: var(--mq-night);
  color: var(--mq-night-ink);
}

.mq-announce--night .mq-announce__link,
.mq-announce--night .mq-announce__close {
  color: var(--mq-night-ink);
  text-decoration-color: var(--mq-loud);
}

.mq-announce--night .mq-announce__close:focus-visible {
  outline-color: var(--mq-night-focus);
}

@media (pointer: coarse) {
  .mq-announce__close {
    width: 44px;
    height: 44px;
  }
}

/* ---- ticker ---- */
/* Ticker: the marquee band. Facts move sideways in large capitals; a pause button stops them.
   Without scripts, or with reduced motion, the list wraps and stands still. */

.mq-ticker {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-block: var(--mq-line) solid var(--mq-loud-ink);
  background: var(--mq-loud);
  color: var(--mq-loud-ink);
}

.mq-ticker--night {
  border-color: var(--mq-night-rule);
  background: var(--mq-night);
  color: var(--mq-night-ink);
}

.mq-ticker--paper {
  border-color: var(--mq-ink);
  background: var(--mq-paper);
  color: var(--mq-ink);
}

.mq-ticker__track {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
}

.mq-ticker__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 0;
  margin: 0;
  padding: 14px var(--mq-gutter);
  list-style: none;
}

.mq-ticker__item {
  display: inline-flex;
  align-items: center;
  gap: 22px;
  padding-inline-end: 22px;
  font-family: var(--mq-font-display);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  font-weight: var(--mq-weight-heavy);
  letter-spacing: 0.01em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.mq-ticker__item svg {
  width: 0.8em;
  height: 0.8em;
}

.mq-ticker--night .mq-ticker__item svg {
  color: var(--mq-loud);
}

/* Running: scripts duplicate the list and slide the track by half its width */
.mq-ticker.is-running .mq-ticker__track {
  flex: none;
  width: max-content;
  animation: mq-ticker var(--mq-ticker-dur) linear infinite;
}

.mq-ticker.is-running .mq-ticker__list {
  flex-wrap: nowrap;
  padding-inline: 0;
}

.mq-ticker.is-running:hover .mq-ticker__track,
.mq-ticker.is-paused .mq-ticker__track {
  animation-play-state: paused;
}

.mq-ticker.is-running:dir(rtl) .mq-ticker__track {
  animation-name: mq-ticker-rtl;
}

@keyframes mq-ticker {
  to {
    transform: translateX(-50%);
  }
}

@keyframes mq-ticker-rtl {
  to {
    transform: translateX(50%);
  }
}

.mq-ticker__toggle {
  position: absolute;
  inset-inline-end: 0;
  inset-block: 0;
  z-index: 1;
  display: inline-grid;
  place-items: center;
  width: 52px;
  padding: 0;
  border: 0;
  border-inline-start: var(--mq-line) solid currentColor;
  background: inherit;
  color: inherit;
  cursor: pointer;
}

.mq-ticker__toggle[hidden] {
  display: none;
}

.mq-ticker__toggle:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: -6px;
}

.mq-ticker__toggle .mq-ticker__play {
  display: none;
}

.mq-ticker.is-paused .mq-ticker__toggle .mq-ticker__play {
  display: inline-block;
}

.mq-ticker.is-paused .mq-ticker__toggle .mq-ticker__pause {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .mq-ticker.is-running .mq-ticker__track {
    animation: none;
  }
}

/* ---- breadcrumbs ---- */
/* Breadcrumbs: event, section, page. Slashes in the loud color, mirrored in right-to-left pages. */

.mq-crumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 0;
  padding: 0;
  list-style: none;
  font-size: var(--mq-fs-meta);
  font-weight: var(--mq-weight-semibold);
}

.mq-crumbs__item {
  display: inline-flex;
  align-items: center;
  color: var(--mq-muted);
}

.mq-crumbs__item + .mq-crumbs__item::before {
  content: "/";
  margin-inline: 10px;
  color: var(--mq-ink);
  font-family: var(--mq-font-display);
  font-size: 1.25rem;
  font-weight: var(--mq-weight-heavy);
  line-height: 1;
}

.mq-crumbs__link {
  color: var(--mq-body);
  text-decoration-thickness: 2px;
}

.mq-crumbs__item [aria-current="page"] {
  color: var(--mq-ink);
}

@media (pointer: coarse) {
  .mq-crumbs__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* ---- sidebar-nav ---- */
/* Sidebar nav: a vertical list of sections with counts. The current item gets a loud bar at its start
   edge. On phones the list scrolls sideways as a row of tabs. */

.mq-sidenav__title {
  display: block;
  margin-block-end: var(--mq-space-3);
  color: var(--mq-muted);
  font-size: var(--mq-fs-label);
  font-weight: var(--mq-weight-semibold);
  letter-spacing: var(--mq-track-label);
  text-transform: uppercase;
}

.mq-sidenav__list {
  display: grid;
  padding: 0;
  border-block-start: var(--mq-line) solid var(--mq-ink);
  list-style: none;
}

.mq-sidenav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mq-space-3);
  min-height: 48px;
  padding: 10px var(--mq-space-3);
  border-block-end: var(--mq-line-hair) solid var(--mq-rule);
  color: var(--mq-body);
  font-weight: var(--mq-weight-semibold);
  text-decoration: none;
}

.mq-sidenav__link:hover {
  background: var(--mq-paper-2);
  color: var(--mq-ink);
}

.mq-sidenav__link[aria-current="page"],
.mq-sidenav__link[aria-current="true"] {
  box-shadow: inset 6px 0 0 var(--mq-loud);
  color: var(--mq-ink);
  padding-inline-start: var(--mq-space-5);
}

.mq-sidenav__link[aria-current="page"]:dir(rtl),
.mq-sidenav__link[aria-current="true"]:dir(rtl) {
  box-shadow: inset -6px 0 0 var(--mq-loud);
}

.mq-sidenav__count {
  color: var(--mq-muted);
  font-family: var(--mq-font-display);
  font-size: 1.125rem;
  font-weight: var(--mq-weight-heavy);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 719px) {
  .mq-sidenav__list {
    display: flex;
    overflow-x: auto;
    border-block-start: 0;
    border-block-end: var(--mq-line) solid var(--mq-ink);
    scrollbar-width: thin;
  }

  .mq-sidenav__link {
    flex: 0 0 auto;
    border-block-end: 0;
    white-space: nowrap;
  }

  .mq-sidenav__link[aria-current="page"],
  .mq-sidenav__link[aria-current="true"],
  .mq-sidenav__link[aria-current="page"]:dir(rtl),
  .mq-sidenav__link[aria-current="true"]:dir(rtl) {
    box-shadow: inset 0 -5px 0 var(--mq-loud);
    padding-inline-start: var(--mq-space-3);
  }
}

@media (min-width: 960px) {
  .mq-sidenav--sticky {
    position: sticky;
    inset-block-start: calc(var(--mq-nav-h) + var(--mq-space-5));
  }
}

/* ---- poster-hero ---- */
/* Poster hero: the event as a bill. The title is a giant uppercase stack; the date, place, countdown
   and the ticket action sit beside it; a facts strip runs along the foot. Lives on a night band. */

.mq-poster {
  padding-block: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem) clamp(3rem, 2rem + 4vw, 5rem);
}

.mq-poster__grid {
  display: grid;
  gap: var(--mq-space-6) var(--mq-space-8);
}

.mq-poster__title {
  font-size: var(--mq-fs-poster);
  line-height: var(--mq-lh-poster);
  letter-spacing: var(--mq-track-poster);
}

.mq-poster__title .mq-stack__line--loud {
  padding-block: 0.04em 0;
}

.mq-poster__lede {
  max-width: 34rem;
  color: var(--mq-body);
  font-size: var(--mq-fs-lede);
  line-height: var(--mq-lh-lede);
}

.mq-poster__side {
  display: flex;
  flex-direction: column;
  gap: var(--mq-space-5);
}

.mq-poster__date {
  color: var(--mq-ink);
  font-family: var(--mq-font-display);
  font-size: clamp(3rem, 2.4rem + 2.4vw, 4.75rem);
  font-weight: var(--mq-weight-heavy);
  line-height: 0.86;
  text-transform: uppercase;
}

.mq-poster__date-days {
  display: block;
  margin-block-start: 0.12em;
  color: var(--mq-aqua);
  font-size: 0.5em;
  letter-spacing: 0.02em;
}

.mq-poster__when {
  display: flex;
  flex-direction: column;
  gap: var(--mq-space-5);
}

.mq-poster__go {
  display: flex;
  flex-direction: column;
  gap: var(--mq-space-5);
}

.mq-poster__place {
  padding-block-start: var(--mq-space-4);
  border-block-start: var(--mq-line-heavy) solid var(--mq-ink);
  color: var(--mq-ink);
  font-family: var(--mq-font-display);
  font-size: 1.75rem;
  font-weight: var(--mq-weight-bold);
  line-height: 1;
  text-transform: uppercase;
}

.mq-poster__place-detail {
  display: block;
  margin-block-start: var(--mq-space-2);
  color: var(--mq-muted);
  font-family: var(--mq-font-sans);
  font-size: var(--mq-fs-meta);
  font-weight: var(--mq-weight-medium);
  line-height: var(--mq-lh-ui);
  text-transform: none;
}

/* Facts: a lineup column of numerals with labels beside them */
.mq-poster__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 0;
  border-block-start: var(--mq-line) solid var(--mq-ink);
  list-style: none;
}

.mq-poster__fact {
  display: flex;
  align-items: baseline;
  gap: var(--mq-space-3);
  padding-block: var(--mq-space-3);
  border-block-end: var(--mq-line-hair) solid var(--mq-rule);
}

.mq-poster__fact-num {
  min-width: 3.3ch;
  color: var(--mq-ink);
  font-family: var(--mq-font-display);
  font-size: clamp(2.25rem, 1.9rem + 1.4vw, 3rem);
  font-weight: var(--mq-weight-heavy);
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 959px) {
  .mq-poster__fact {
    flex-direction: column;
    gap: var(--mq-space-1);
  }
}

@media (max-width: 479px) {
  .mq-poster .mq-actions .mq-btn {
    flex: 1 1 0;
    padding-inline: var(--mq-space-3);
  }
}

.mq-poster__clock {
  padding-block-start: var(--mq-space-5);
  border-block-start: var(--mq-line-heavy) solid var(--mq-ink);
}

@media (min-width: 960px) {
  .mq-poster__grid {
    grid-template-columns: minmax(0, 1fr) minmax(19rem, 25rem);
    align-items: end;
  }

  /* Beside the side column the stack scales with the free width, so the widest line never collides */
  .mq-poster__title {
    grid-column: 1;
    grid-row: 1;
    font-size: clamp(10rem, 40vw - 14rem, 16rem);
  }

  .mq-poster__lede {
    grid-column: 1;
    grid-row: 2;
  }

  .mq-poster__side {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: stretch;
    justify-content: space-between;
    padding-block-start: 0.6rem;
  }

  .mq-poster__facts {
    grid-template-columns: minmax(0, 1fr);
  }

  .mq-poster__clock {
    grid-column: 1 / -1;
  }
}

/* Rise: the stack lines lift into place once (scripts add .is-in; reduced motion shows them at rest) */
.mq-reveal .mq-stack__line {
  transition: transform var(--mq-dur-slow) var(--mq-ease-out), opacity var(--mq-dur-slow) var(--mq-ease-out);
}

.mq-reveal.is-armed:not(.is-in) .mq-stack__line {
  opacity: 0;
  transform: translateY(0.35em);
}

.mq-reveal.is-in .mq-stack__line:nth-child(2) {
  transition-delay: 80ms;
}

.mq-reveal.is-in .mq-stack__line:nth-child(3) {
  transition-delay: 160ms;
}

.mq-reveal.is-in .mq-stack__line:nth-child(4) {
  transition-delay: 240ms;
}

@media (prefers-reduced-motion: reduce) {
  .mq-reveal .mq-stack__line {
    transition: none;
  }

  .mq-reveal.is-armed:not(.is-in) .mq-stack__line {
    opacity: 1;
    transform: none;
  }
}

/* ---- hero ---- */
/* Hero: the page poster at the top of every inner page. A display stack h1, a lede and actions beside
   it, a facts strip below. Night by default; .mq-loud and paper grounds work too. */

.mq-hero {
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) clamp(3rem, 2rem + 4vw, 5rem);
}

.mq-hero__grid {
  display: grid;
  gap: var(--mq-space-6) var(--mq-space-8);
}

.mq-hero__title {
  font-size: var(--mq-fs-display);
  line-height: var(--mq-lh-display);
  letter-spacing: var(--mq-track-display);
}

.mq-hero__side {
  display: flex;
  flex-direction: column;
  gap: var(--mq-space-5);
  max-width: 36rem;
}

.mq-hero__lede {
  color: var(--mq-body);
  font-size: var(--mq-fs-lede);
  line-height: var(--mq-lh-lede);
}

.mq-hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mq-space-3) var(--mq-space-6);
  padding: var(--mq-space-4) 0 0;
  border-block-start: var(--mq-line) solid var(--mq-ink);
  list-style: none;
}

.mq-hero__fact {
  display: inline-flex;
  align-items: center;
  gap: var(--mq-space-2);
  color: var(--mq-ink);
  font-size: var(--mq-fs-ui);
  font-weight: var(--mq-weight-semibold);
}

.mq-hero__fact svg {
  color: var(--mq-loud);
}

.mq-loud .mq-hero__fact svg {
  color: var(--mq-loud-ink);
}

@media (min-width: 960px) {
  .mq-hero__grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    align-items: end;
  }

  .mq-hero__facts {
    grid-column: 1 / -1;
  }
}

/* Compact: for article and utility pages where the title is a sentence */
.mq-hero--compact .mq-hero__title {
  font-size: var(--mq-fs-title);
  line-height: var(--mq-lh-title);
}

@media (min-width: 960px) {
  .mq-hero--compact .mq-hero__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- countdown ---- */
/* Countdown: days, hours, minutes and seconds to the doors. The date line is the content; the clock
   appears only when scripts run. */

.mq-countdown {
  display: flex;
  flex-direction: column;
  gap: var(--mq-space-3);
}

.mq-countdown__date {
  color: var(--mq-body);
  font-size: var(--mq-fs-ui);
  font-weight: var(--mq-weight-semibold);
}

.mq-countdown__clock {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: var(--mq-line) solid var(--mq-ink);
}

.mq-countdown__clock[hidden] {
  display: none;
}

.mq-countdown__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: var(--mq-space-3) var(--mq-space-1) var(--mq-space-2);
}

.mq-countdown__unit + .mq-countdown__unit {
  border-inline-start: var(--mq-line) solid var(--mq-ink);
}

.mq-countdown__num {
  color: var(--mq-ink);
  font-family: var(--mq-font-display);
  font-size: clamp(2.25rem, 1.8rem + 1.6vw, 3rem);
  font-weight: var(--mq-weight-heavy);
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
}

.mq-countdown__unit:first-child .mq-countdown__num {
  color: var(--mq-loud);
}

.mq-countdown__label {
  color: var(--mq-muted);
  font-size: var(--mq-fs-label);
  font-weight: var(--mq-weight-semibold);
  letter-spacing: var(--mq-track-label);
  line-height: 1;
  text-transform: uppercase;
}

/* On paper the loud numeral turns to ink (the loud color is a fill, not text, on paper) */
.mq-countdown--paper .mq-countdown__unit:first-child {
  background: var(--mq-loud);
}

.mq-countdown--paper .mq-countdown__unit:first-child .mq-countdown__num,
.mq-countdown--paper .mq-countdown__unit:first-child .mq-countdown__label {
  color: var(--mq-loud-ink);
}

.mq-countdown--large .mq-countdown__num {
  font-size: var(--mq-fs-numeral);
}

/* Row: the date line at the start, the clock at the end (a strip under a poster) */
@media (min-width: 720px) {
  .mq-countdown--row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--mq-space-6);
  }

  .mq-countdown--row .mq-countdown__date {
    max-width: 26rem;
  }

  .mq-countdown--row .mq-countdown__clock {
    flex: 0 1 34rem;
  }
}

/* ---- perforation ---- */
/* Perforation: the ticket tear as structure. Bands bite their top or bottom edge with a row of round
   perforations (the next section's ground shows through), and .mq-tear draws a dashed tear rule. */

.mq-perf-bottom,
.mq-perf-top {
  position: relative;
  z-index: 1;
}

.mq-perf-bottom {
  margin-block-end: calc(var(--mq-perf) * -1);
  -webkit-mask: radial-gradient(circle at 50% 100%, transparent var(--mq-perf), black calc(var(--mq-perf) + 0.5px)) bottom / var(--mq-perf-step) 100% repeat-x;
  mask: radial-gradient(circle at 50% 100%, transparent var(--mq-perf), black calc(var(--mq-perf) + 0.5px)) bottom / var(--mq-perf-step) 100% repeat-x;
}

.mq-perf-top {
  margin-block-start: calc(var(--mq-perf) * -1);
  -webkit-mask: radial-gradient(circle at 50% 0, transparent var(--mq-perf), black calc(var(--mq-perf) + 0.5px)) top / var(--mq-perf-step) 100% repeat-x;
  mask: radial-gradient(circle at 50% 0, transparent var(--mq-perf), black calc(var(--mq-perf) + 0.5px)) top / var(--mq-perf-step) 100% repeat-x;
}

.mq-perf-top.mq-perf-bottom {
  -webkit-mask:
    radial-gradient(circle at 50% 0, transparent var(--mq-perf), black calc(var(--mq-perf) + 0.5px)) top / var(--mq-perf-step) 51% repeat-x,
    radial-gradient(circle at 50% 100%, transparent var(--mq-perf), black calc(var(--mq-perf) + 0.5px)) bottom / var(--mq-perf-step) 51% repeat-x;
  mask:
    radial-gradient(circle at 50% 0, transparent var(--mq-perf), black calc(var(--mq-perf) + 0.5px)) top / var(--mq-perf-step) 51% repeat-x,
    radial-gradient(circle at 50% 100%, transparent var(--mq-perf), black calc(var(--mq-perf) + 0.5px)) bottom / var(--mq-perf-step) 51% repeat-x;
}

/* The tear rule: dashes like a ticket's perforation, between parts of a page or inside a panel */
.mq-tear {
  display: block;
  height: var(--mq-line);
  margin-block: var(--mq-space-7);
  border: 0;
  background: repeating-linear-gradient(90deg, var(--mq-ink) 0 10px, transparent 10px 17px);
}

.mq-tear--loud {
  height: var(--mq-line-heavy);
  background: repeating-linear-gradient(90deg, var(--mq-loud) 0 14px, transparent 14px 22px);
}

.mq-tear--tight {
  margin-block: var(--mq-space-5);
}

/* ---- section-header ---- */
/* Section header: a display h2 on a heavy ink bar. A caps label may sit below the title (never above);
   the lede and a link take the end column on wide screens. */

.mq-head {
  display: grid;
  gap: var(--mq-space-4) var(--mq-space-8);
  margin-block-end: clamp(2.5rem, 1.8rem + 2.6vw, 4rem);
  padding-block-start: var(--mq-space-5);
  border-block-start: var(--mq-line-heavy) solid var(--mq-ink);
}

.mq-head__main {
  display: flex;
  flex-direction: column;
  gap: var(--mq-space-4);
}

.mq-head__title {
  max-width: 16ch;
}

.mq-head__num {
  display: inline-block;
  margin-inline-end: 0.12em;
  padding: 0.06em 0.1em 0;
  background: var(--mq-loud);
  color: var(--mq-loud-ink);
  font-size: 0.5em;
  line-height: 1;
  vertical-align: 0.62em;
  font-variant-numeric: tabular-nums;
}

.mq-head__label {
  display: block;
  color: var(--mq-muted);
  font-size: var(--mq-fs-label);
  font-weight: var(--mq-weight-semibold);
  letter-spacing: var(--mq-track-label);
  line-height: var(--mq-lh-ui);
  text-transform: uppercase;
}

.mq-head__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--mq-space-4);
}

.mq-head__lede {
  max-width: 34rem;
  color: var(--mq-body);
  font-size: var(--mq-fs-lede);
  line-height: var(--mq-lh-lede);
}

@media (min-width: 960px) {
  .mq-head {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    align-items: end;
  }
}

.mq-head--center {
  justify-items: center;
  text-align: center;
}

.mq-head--center .mq-head__main,
.mq-head--center .mq-head__aside {
  align-items: center;
}

@media (min-width: 960px) {
  .mq-head--center {
    grid-template-columns: minmax(0, 1fr);
  }
}

.mq-head--compact {
  margin-block-end: var(--mq-space-6);
  padding-block-start: var(--mq-space-3);
  border-block-start-width: var(--mq-line);
}

.mq-head--compact .mq-head__title {
  max-width: none;
  font-size: var(--mq-fs-headline);
  line-height: var(--mq-lh-headline);
}

.mq-head--compact {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--mq-space-2) var(--mq-space-5);
}

.mq-head__label code {
  font-size: 1em;
  letter-spacing: 0;
  text-transform: none;
}

/* ---- features ---- */
/* Features: what the event offers. Numbered or iconed items, each under a heavy ink rule. */

.mq-features {
  display: grid;
  gap: var(--mq-space-7) var(--mq-space-6);
  padding: 0;
  list-style: none;
}

@media (min-width: 720px) {
  .mq-features,
  .mq-features--3,
  .mq-features--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .mq-features--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .mq-features--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.mq-feature {
  display: flex;
  flex-direction: column;
  gap: var(--mq-space-3);
  padding-block-start: var(--mq-space-4);
  border-block-start: var(--mq-line-heavy) solid var(--mq-ink);
}

.mq-feature__num {
  color: var(--mq-ink);
  font-family: var(--mq-font-display);
  font-size: 3.5rem;
  font-weight: var(--mq-weight-heavy);
  line-height: 0.85;
  font-variant-numeric: tabular-nums;
}

.mq-feature__icon {
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  background: var(--mq-loud);
  color: var(--mq-loud-ink);
}

.mq-feature__icon svg {
  width: 26px;
  height: 26px;
}

.mq-feature__title {
  font-family: var(--mq-font-display);
  font-size: 1.75rem;
  font-weight: var(--mq-weight-bold);
  line-height: 1;
  text-transform: uppercase;
}

.mq-feature__text {
  color: var(--mq-body);
}

.mq-feature__link {
  margin-block-start: auto;
  padding-block-start: var(--mq-space-2);
}

/* Split list: what's in and what isn't, side by side */
.mq-features--split {
  gap: var(--mq-space-6);
}

.mq-checklist {
  display: grid;
  gap: var(--mq-space-3);
  padding: 0;
  list-style: none;
}

.mq-checklist li {
  display: flex;
  gap: var(--mq-space-3);
  color: var(--mq-body);
}

.mq-checklist svg {
  flex-shrink: 0;
  margin-block-start: 3px;
  color: var(--mq-ink);
}

.mq-checklist--no li {
  color: var(--mq-muted);
}

/* ---- cards ---- */
/* Cards: ruled boxes for dispatches, hotels and formats. A link card lifts onto the stamp shadow.
   With no image, a card opens on a type poster: a word or a number on a loud, aqua or night block. */

.mq-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  gap: var(--mq-space-6) var(--mq-space-5);
  padding: 0;
  list-style: none;
}

.mq-card {
  container-type: inline-size;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--mq-space-3);
  height: 100%;
  padding: var(--mq-space-5);
  border: var(--mq-line) solid var(--mq-ink);
  border-radius: var(--mq-radius-card);
  background: var(--mq-surface);
  color: var(--mq-body);
}

.mq-card--link {
  transition: transform var(--mq-dur-fast) var(--mq-ease), box-shadow var(--mq-dur-fast) var(--mq-ease);
}

.mq-card--link:hover,
.mq-card--link:focus-within {
  transform: translate(-4px, -4px);
  box-shadow: var(--mq-stamp) var(--mq-stamp) 0 0 var(--mq-ink);
}

.mq-card__poster {
  display: flex;
  align-items: flex-end;
  min-height: 11rem;
  margin: calc(var(--mq-space-5) * -1) calc(var(--mq-space-5) * -1) var(--mq-space-2);
  padding: var(--mq-space-4) var(--mq-space-5);
  overflow: hidden;
  border-block-end: var(--mq-line) solid var(--mq-ink);
  background: var(--mq-ink);
  color: var(--mq-paper);
  font-family: var(--mq-font-display);
  font-size: clamp(2.5rem, 16cqi, 4.5rem);
  font-weight: var(--mq-weight-heavy);
  line-height: 0.82;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.mq-card__poster--loud {
  background: var(--mq-loud);
  color: var(--mq-loud-ink);
}

.mq-card__poster--aqua {
  background: var(--mq-aqua);
  color: var(--mq-aqua-ink);
}

.mq-card__poster--paper {
  background: var(--mq-paper-2);
  color: var(--mq-ink);
}

.mq-card__title {
  font-family: var(--mq-font-sans);
  font-size: 1.375rem;
  font-weight: var(--mq-weight-bold);
  line-height: var(--mq-lh-snug);
  text-transform: none;
}

.mq-card__link {
  text-decoration: none;
}

.mq-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.mq-card__link:hover {
  background: transparent;
  color: var(--mq-ink);
}

.mq-card__link:focus-visible {
  outline: none;
}

.mq-card--link:focus-within {
  outline: 3px solid var(--mq-focus);
  outline-offset: 3px;
}

.mq-card__text {
  color: var(--mq-body);
}

.mq-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mq-space-2) var(--mq-space-3);
  margin-block-start: auto;
  padding-block-start: var(--mq-space-3);
  border-block-start: var(--mq-line-hair) solid var(--mq-rule);
  color: var(--mq-muted);
  font-size: var(--mq-fs-meta);
  font-weight: var(--mq-weight-medium);
}

.mq-card--loud {
  --mq-ink: var(--mq-loud-ink);
  --mq-body: var(--mq-loud-ink);
  --mq-muted: var(--mq-loud-ink);
  --mq-rule: var(--mq-loud-ink);
  border-color: var(--mq-loud);
  background: var(--mq-loud);
}

.mq-card.mq-night {
  border-color: var(--mq-night);
}

/* Row: a wide card with the poster at the start */
.mq-card--row {
  display: grid;
  gap: var(--mq-space-3) var(--mq-space-6);
}

@media (min-width: 720px) {
  .mq-card--row {
    grid-template-columns: minmax(12rem, 0.8fr) minmax(0, 2fr);
    align-items: start;
  }

  .mq-card--row .mq-card__poster {
    grid-row: span 4;
    align-self: stretch;
    margin: calc(var(--mq-space-5) * -1) 0 calc(var(--mq-space-5) * -1) calc(var(--mq-space-5) * -1);
    border-block-end: 0;
    border-inline-end: var(--mq-line) solid var(--mq-ink);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mq-card--link:hover,
  .mq-card--link:focus-within {
    transform: none;
  }
}

/* ---- bento ---- */
/* Bento: a poster wall. Tiles of mixed size and ground (loud, aqua, night, paper) with big figures
   and coded mini schedules. Three columns on desktop, one on phones. */

.mq-bento {
  display: grid;
  gap: var(--mq-space-4);
}

@media (min-width: 720px) {
  .mq-bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .mq-bento {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.mq-bento__tile {
  display: flex;
  flex-direction: column;
  gap: var(--mq-space-4);
  min-width: 0;
  padding: clamp(1.25rem, 1rem + 1vw, 2rem);
  border: var(--mq-line) solid var(--mq-ink);
  border-radius: var(--mq-radius-card);
  background: var(--mq-surface);
  color: var(--mq-body);
}

.mq-bento__tile.mq-night {
  border-color: var(--mq-night);
  background: var(--mq-night);
}

.mq-bento__tile--loud {
  --mq-ink: var(--mq-loud-ink);
  --mq-body: var(--mq-loud-ink);
  --mq-muted: var(--mq-loud-ink);
  --mq-rule: var(--mq-loud-ink);
  border-color: var(--mq-loud);
  background: var(--mq-loud);
}

.mq-bento__tile--aqua {
  --mq-ink: var(--mq-aqua-ink);
  --mq-body: var(--mq-aqua-ink);
  --mq-muted: var(--mq-aqua-ink);
  --mq-rule: var(--mq-aqua-ink);
  --mq-paper: var(--mq-aqua);
  border-color: var(--mq-aqua);
  background: var(--mq-aqua);
}

@media (min-width: 720px) {
  .mq-bento__tile--wide {
    grid-column: span 2;
  }
}

@media (min-width: 1100px) {
  .mq-bento__tile--tall {
    grid-row: span 2;
  }
}

.mq-bento__figure {
  color: var(--mq-ink);
  font-family: var(--mq-font-display);
  font-size: clamp(6rem, 4rem + 8vw, 11rem);
  font-weight: var(--mq-weight-heavy);
  line-height: 0.78;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.mq-bento__tile--tall .mq-bento__figure {
  margin-block-end: auto;
}

.mq-bento__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mq-space-2) var(--mq-space-3);
  font-size: clamp(1.75rem, 1.5rem + 1vw, 2.5rem);
  line-height: 0.95;
}

.mq-bento__text {
  color: var(--mq-body);
}

.mq-bento__ui {
  margin-block-start: auto;
}

/* Mini list: times and titles, like a door sign */
.mq-minilist {
  display: grid;
  padding: 0;
  list-style: none;
  border-block-start: var(--mq-line) solid var(--mq-ink);
}

.mq-minilist li {
  display: flex;
  gap: var(--mq-space-3);
  padding-block: 10px;
  border-block-end: var(--mq-line-hair) solid var(--mq-rule);
  color: var(--mq-ink);
  font-size: var(--mq-fs-ui);
  font-weight: var(--mq-weight-semibold);
  line-height: var(--mq-lh-ui);
}

.mq-minilist__time {
  flex: 0 0 3.25rem;
  font-family: var(--mq-font-display);
  font-size: 1.25rem;
  font-weight: var(--mq-weight-heavy);
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}

/* ---- stats ---- */
/* Stats: event numbers in giant condensed numerals with tracked labels below them, between heavy rules. */

.mq-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  border-block: var(--mq-line-heavy) solid var(--mq-ink);
}

.mq-stat {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: var(--mq-space-3);
  padding: var(--mq-space-5) var(--mq-space-4) var(--mq-space-5) 0;
}

.mq-stat + .mq-stat {
  padding-inline-start: var(--mq-space-5);
  border-inline-start: var(--mq-line-hair) solid var(--mq-rule);
}

.mq-stat__num {
  margin: 0;
  color: var(--mq-ink);
  font-family: var(--mq-font-display);
  font-size: var(--mq-fs-numeral);
  font-weight: var(--mq-weight-heavy);
  line-height: 0.82;
  font-variant-numeric: tabular-nums lining-nums;
}

.mq-stat__label {
  color: var(--mq-muted);
  font-size: var(--mq-fs-label);
  font-weight: var(--mq-weight-semibold);
  letter-spacing: var(--mq-track-label);
  line-height: var(--mq-lh-ui);
  text-transform: uppercase;
}

.mq-stat__note {
  display: block;
  margin-block-start: 6px;
  color: var(--mq-body);
  font-size: var(--mq-fs-meta);
  letter-spacing: 0;
  text-transform: none;
}

@media (max-width: 599px) {
  .mq-stat + .mq-stat {
    padding-inline-start: 0;
    border-inline-start: 0;
    border-block-start: var(--mq-line-hair) solid var(--mq-rule);
  }
}

.mq-stats--loud .mq-stat:first-child .mq-stat__num {
  align-self: flex-start;
  padding-inline: 0.06em;
  background: var(--mq-loud);
  color: var(--mq-loud-ink);
}

/* ---- logo-row ---- */
/* Logo row: invented geometric marks with their names, monochrome, in a ruled row. */

.mq-logos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  padding: 0;
  border-block: var(--mq-line) solid var(--mq-ink);
  list-style: none;
}

.mq-logo {
  display: flex;
  align-items: center;
  gap: var(--mq-space-3);
  min-height: 5.5rem;
  padding: var(--mq-space-4);
  color: var(--mq-ink);
}

.mq-logo + .mq-logo {
  border-inline-start: var(--mq-line-hair) solid var(--mq-rule);
}

.mq-logo svg {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
}

.mq-logo__name {
  font-family: var(--mq-font-display);
  font-size: 1.375rem;
  font-weight: var(--mq-weight-heavy);
  line-height: 1;
  text-transform: uppercase;
}

@media (max-width: 599px) {
  .mq-logo + .mq-logo {
    border-inline-start: 0;
    border-block-start: var(--mq-line-hair) solid var(--mq-rule);
  }
}

/* ---- testimonial ---- */
/* Testimonial: one statement from the event's own people. A loud quotation block, the words in large
   Schibsted, a monogram byline. */

.mq-quote {
  display: grid;
  gap: var(--mq-space-5);
  max-width: 58rem;
}

@media (min-width: 720px) {
  .mq-quote {
    grid-template-columns: 6rem minmax(0, 1fr);
    column-gap: var(--mq-space-6);
  }
}

.mq-quote::before {
  content: "\201C";
  display: grid;
  place-items: start center;
  width: 5rem;
  height: 5rem;
  overflow: hidden;
  background: var(--mq-loud);
  color: var(--mq-loud-ink);
  font-family: var(--mq-font-display);
  font-size: 9rem;
  font-weight: var(--mq-weight-heavy);
  line-height: 0.95;
}

@media (min-width: 720px) {
  .mq-quote::before {
    grid-row: span 2;
    width: 6rem;
    height: 6rem;
    font-size: 11rem;
  }
}

.mq-quote__text {
  margin: 0;
  color: var(--mq-ink);
  font-size: clamp(1.375rem, 1.15rem + 0.9vw, 2rem);
  font-weight: var(--mq-weight-medium);
  line-height: 1.32;
  text-wrap: pretty;
}

.mq-quote__text p + p {
  margin-block-start: var(--mq-space-4);
}

.mq-quote__by {
  display: flex;
  align-items: center;
  gap: var(--mq-space-3);
  color: var(--mq-muted);
  font-size: var(--mq-fs-meta);
}

.mq-quote__name {
  display: block;
  color: var(--mq-ink);
  font-family: var(--mq-font-display);
  font-size: 1.5rem;
  font-weight: var(--mq-weight-heavy);
  line-height: 1;
  text-transform: uppercase;
}

/* ---- ticket ---- */
/* Ticket: the signature stub. Two pieces of card (body and stub) meet at a dashed tear line; each piece
   bites its own corners at the seam, so the notches line up in any orientation. Wide tickets run
   sideways; under 40rem of their own width they stand up, stub at the foot. */

.mq-tickets {
  display: grid;
  gap: var(--mq-space-6);
  padding: 0;
  list-style: none;
}

.mq-tickets--3 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  align-items: start;
}

.mq-ticket {
  --mq-ticket-edge: var(--mq-ink);
  container-type: inline-size;
  position: relative;
  filter:
    drop-shadow(1.5px 0 0 var(--mq-ticket-edge))
    drop-shadow(-1.5px 0 0 var(--mq-ticket-edge))
    drop-shadow(0 1.5px 0 var(--mq-ticket-edge))
    drop-shadow(0 -1.5px 0 var(--mq-ticket-edge));
}

.mq-night .mq-ticket {
  --mq-ticket-edge: var(--mq-night);
}

/* Featured tickets carry the hard stamp shadow in the surrounding ink */
.mq-ticket--stamp {
  filter:
    drop-shadow(1.5px 0 0 var(--mq-ticket-edge))
    drop-shadow(-1.5px 0 0 var(--mq-ticket-edge))
    drop-shadow(0 1.5px 0 var(--mq-ticket-edge))
    drop-shadow(0 -1.5px 0 var(--mq-ticket-edge))
    drop-shadow(var(--mq-stamp) var(--mq-stamp) 0 var(--mq-ink));
}

.mq-ticket__card {
  --mq-stub: clamp(14rem, 36%, 19rem);
  --mq-paper: var(--mq-stock);
  --mq-paper-2: var(--mq-stock-2);
  --mq-surface: var(--mq-stock);
  --mq-ink: var(--mq-stock-ink);
  --mq-body: var(--mq-stock-body);
  --mq-muted: var(--mq-stock-muted);
  --mq-rule: var(--mq-stock-rule);
  --mq-control: var(--mq-stock-control);
  --mq-focus: var(--mq-stock-ink);
  --mq-loud-soft: var(--mq-stock-2);
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--mq-stub);
  color: var(--mq-body);
}

.mq-ticket__body,
.mq-ticket__stub {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--mq-space-4);
  padding: clamp(1.25rem, 1rem + 1vw, 2rem);
}

.mq-ticket__body {
  border-start-start-radius: var(--mq-radius-ticket);
  border-end-start-radius: var(--mq-radius-ticket);
  background: var(--mq-paper);
  -webkit-mask:
    radial-gradient(circle var(--mq-notch) at 100% 0, transparent 98%, black) top / 100% 51% no-repeat,
    radial-gradient(circle var(--mq-notch) at 100% 100%, transparent 98%, black) bottom / 100% 51% no-repeat;
  mask:
    radial-gradient(circle var(--mq-notch) at 100% 0, transparent 98%, black) top / 100% 51% no-repeat,
    radial-gradient(circle var(--mq-notch) at 100% 100%, transparent 98%, black) bottom / 100% 51% no-repeat;
}

.mq-ticket__stub {
  justify-content: space-between;
  border-start-end-radius: var(--mq-radius-ticket);
  border-end-end-radius: var(--mq-radius-ticket);
  background: var(--mq-paper-2);
  -webkit-mask:
    radial-gradient(circle var(--mq-notch) at 0 0, transparent 98%, black) top / 100% 51% no-repeat,
    radial-gradient(circle var(--mq-notch) at 0 100%, transparent 98%, black) bottom / 100% 51% no-repeat;
  mask:
    radial-gradient(circle var(--mq-notch) at 0 0, transparent 98%, black) top / 100% 51% no-repeat,
    radial-gradient(circle var(--mq-notch) at 0 100%, transparent 98%, black) bottom / 100% 51% no-repeat;
}

.mq-ticket__body:dir(rtl) {
  -webkit-mask:
    radial-gradient(circle var(--mq-notch) at 0 0, transparent 98%, black) top / 100% 51% no-repeat,
    radial-gradient(circle var(--mq-notch) at 0 100%, transparent 98%, black) bottom / 100% 51% no-repeat;
  mask:
    radial-gradient(circle var(--mq-notch) at 0 0, transparent 98%, black) top / 100% 51% no-repeat,
    radial-gradient(circle var(--mq-notch) at 0 100%, transparent 98%, black) bottom / 100% 51% no-repeat;
}

.mq-ticket__stub:dir(rtl) {
  -webkit-mask:
    radial-gradient(circle var(--mq-notch) at 100% 0, transparent 98%, black) top / 100% 51% no-repeat,
    radial-gradient(circle var(--mq-notch) at 100% 100%, transparent 98%, black) bottom / 100% 51% no-repeat;
  mask:
    radial-gradient(circle var(--mq-notch) at 100% 0, transparent 98%, black) top / 100% 51% no-repeat,
    radial-gradient(circle var(--mq-notch) at 100% 100%, transparent 98%, black) bottom / 100% 51% no-repeat;
}

/* The tear line: dashes between the notches */
.mq-ticket__stub::before {
  content: "";
  position: absolute;
  inset-block: calc(var(--mq-notch) + 4px);
  inset-inline-start: -1px;
  width: var(--mq-line);
  background: repeating-linear-gradient(to bottom, var(--mq-ink) 0 8px, transparent 8px 14px);
}

.mq-ticket__tier {
  font-size: clamp(2.5rem, 2rem + 2.2vw, 4rem);
  line-height: 0.86;
}

.mq-ticket__when {
  display: block;
  color: var(--mq-muted);
  font-size: var(--mq-fs-label);
  font-weight: var(--mq-weight-semibold);
  letter-spacing: var(--mq-track-label);
  line-height: var(--mq-lh-ui);
  text-transform: uppercase;
}

.mq-ticket__list {
  display: grid;
  gap: var(--mq-space-2);
  margin: 0;
  padding: var(--mq-space-4) 0 0;
  border-block-start: var(--mq-line-hair) solid var(--mq-rule);
  list-style: none;
}

.mq-ticket__list li {
  display: flex;
  align-items: baseline;
  gap: var(--mq-space-2);
  color: var(--mq-body);
}

.mq-ticket__list svg {
  flex-shrink: 0;
  align-self: center;
  width: 18px;
  height: 18px;
  color: var(--mq-ink);
}

.mq-ticket__list .mq-ticket__no {
  color: var(--mq-muted);
}

.mq-ticket__admit {
  display: flex;
  justify-content: space-between;
  gap: var(--mq-space-3);
  color: var(--mq-muted);
  font-size: var(--mq-fs-label);
  font-weight: var(--mq-weight-semibold);
  letter-spacing: var(--mq-track-label);
  line-height: 1.2;
  text-transform: uppercase;
}

.mq-ticket__price {
  display: flex;
  align-items: flex-start;
  color: var(--mq-ink);
  font-family: var(--mq-font-display);
  font-size: var(--mq-fs-numeral);
  font-weight: var(--mq-weight-heavy);
  line-height: 0.82;
  font-variant-numeric: tabular-nums lining-nums;
}

.mq-ticket__currency {
  margin-block-start: 0.08em;
  font-size: 0.42em;
  line-height: 1;
}

.mq-ticket__note {
  margin-block-start: calc(var(--mq-space-2) * -1);
  color: var(--mq-muted);
  font-size: var(--mq-fs-meta);
  line-height: var(--mq-lh-ui);
}

/* A decorative bar code at the foot of the stub */
.mq-ticket__code {
  display: block;
  height: 30px;
  background:
    repeating-linear-gradient(90deg, var(--mq-ink) 0 2px, transparent 2px 4px, var(--mq-ink) 4px 7px, transparent 7px 9px, var(--mq-ink) 9px 10px, transparent 10px 13px, var(--mq-ink) 13px 16px, transparent 16px 17px);
}

/* Seats left: a native meter cut into perforated segments, with the count in words beside it */
.mq-seats {
  display: grid;
  gap: var(--mq-space-2);
}

.mq-seats__meter {
  display: block;
  width: 100%;
  height: 14px;
  border: 0;
  background: var(--mq-stock-rule);
  -webkit-appearance: none;
  appearance: none;
  -webkit-mask: repeating-linear-gradient(90deg, black 0 7px, transparent 7px 10px);
  mask: repeating-linear-gradient(90deg, black 0 7px, transparent 7px 10px);
}

.mq-seats__meter::-webkit-meter-inner-element {
  display: block;
}

.mq-seats__meter::-webkit-meter-bar {
  height: 14px;
  border: 0;
  border-radius: 0;
  background: var(--mq-rule);
}

.mq-seats__meter::-webkit-meter-optimum-value,
.mq-seats__meter::-webkit-meter-suboptimum-value,
.mq-seats__meter::-webkit-meter-even-less-good-value {
  background: var(--mq-ink);
}

.mq-seats__meter::-moz-meter-bar {
  background: var(--mq-ink);
}

.mq-seats__label {
  color: var(--mq-body);
  font-size: var(--mq-fs-meta);
  line-height: var(--mq-lh-ui);
}

.mq-seats__label strong {
  font-family: var(--mq-font-display);
  font-size: 1.375rem;
  font-weight: var(--mq-weight-heavy);
  line-height: 1;
}

.mq-seats--low .mq-seats__label {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Loud ticket: the featured tier, printed on the loud color */
.mq-ticket--loud .mq-ticket__card {
  --mq-paper: var(--mq-loud);
  --mq-paper-2: var(--mq-loud-hover);
  --mq-surface: var(--mq-loud);
  --mq-ink: var(--mq-loud-ink);
  --mq-body: var(--mq-loud-ink);
  --mq-muted: var(--mq-loud-ink);
  --mq-rule: var(--mq-loud-ink);
  --mq-control: var(--mq-loud-ink);
  --mq-focus: var(--mq-loud-ink);
  --mq-stock-rule: var(--mq-loud-hover);
  --mq-btn: var(--mq-night);
  --mq-btn-hover: var(--mq-night-2);
  --mq-btn-ink: var(--mq-night-ink);
}

.mq-ticket--loud .mq-seats__meter::-webkit-meter-bar {
  background: var(--mq-paper);
}

/* Sold out: the stamp sits across the body; the price is struck and the button is disabled */
.mq-ticket__stamp {
  position: absolute;
  inset-block-start: var(--mq-space-6);
  inset-inline-end: var(--mq-space-6);
}

.mq-ticket--soldout .mq-ticket__price {
  text-decoration: line-through;
  text-decoration-thickness: 4px;
}

/* Upright: under 40rem of its own width the stub drops to the foot and the notches move to the sides */
@container (max-width: 40rem) {
  .mq-ticket__card {
    grid-template-columns: minmax(0, 1fr);
  }

  .mq-ticket__body,
  .mq-ticket__body:dir(rtl) {
    border-radius: var(--mq-radius-ticket) var(--mq-radius-ticket) 0 0;
    -webkit-mask:
      radial-gradient(circle var(--mq-notch) at 0 100%, transparent 98%, black) left / 51% 100% no-repeat,
      radial-gradient(circle var(--mq-notch) at 100% 100%, transparent 98%, black) right / 51% 100% no-repeat;
    mask:
      radial-gradient(circle var(--mq-notch) at 0 100%, transparent 98%, black) left / 51% 100% no-repeat,
      radial-gradient(circle var(--mq-notch) at 100% 100%, transparent 98%, black) right / 51% 100% no-repeat;
  }

  .mq-ticket__stub,
  .mq-ticket__stub:dir(rtl) {
    border-radius: 0 0 var(--mq-radius-ticket) var(--mq-radius-ticket);
    -webkit-mask:
      radial-gradient(circle var(--mq-notch) at 0 0, transparent 98%, black) left / 51% 100% no-repeat,
      radial-gradient(circle var(--mq-notch) at 100% 0, transparent 98%, black) right / 51% 100% no-repeat;
    mask:
      radial-gradient(circle var(--mq-notch) at 0 0, transparent 98%, black) left / 51% 100% no-repeat,
      radial-gradient(circle var(--mq-notch) at 100% 0, transparent 98%, black) right / 51% 100% no-repeat;
  }

  .mq-ticket__stub::before {
    inset-block: -1px auto;
    inset-inline: calc(var(--mq-notch) + 4px);
    width: auto;
    height: var(--mq-line);
    background: repeating-linear-gradient(90deg, var(--mq-ink) 0 8px, transparent 8px 14px);
  }

  .mq-ticket__stamp {
    position: static;
    align-self: flex-end;
    margin-block-start: calc(var(--mq-space-2) * -1);
  }
}

/* ---- pricing ---- */
/* Pricing: team and group passes as ruled columns with giant prices, and the pass comparison table.
   The recommended column sits on a loud block; checks and crosses carry words for screen readers. */

.mq-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  padding: 0;
  border: var(--mq-line) solid var(--mq-ink);
  list-style: none;
}

.mq-plan {
  display: flex;
  flex-direction: column;
  gap: var(--mq-space-4);
  padding: clamp(1.25rem, 1rem + 1.2vw, 2rem);
  background: var(--mq-surface);
  color: var(--mq-body);
}

.mq-plan + .mq-plan {
  border-inline-start: var(--mq-line) solid var(--mq-ink);
}

@media (max-width: 719px) {
  .mq-plan + .mq-plan {
    border-inline-start: 0;
    border-block-start: var(--mq-line) solid var(--mq-ink);
  }
}

.mq-plan--pick {
  --mq-ink: var(--mq-loud-ink);
  --mq-body: var(--mq-loud-ink);
  --mq-muted: var(--mq-loud-ink);
  --mq-rule: var(--mq-loud-ink);
  --mq-btn: var(--mq-night);
  --mq-btn-hover: var(--mq-night-2);
  --mq-btn-ink: var(--mq-night-ink);
  --mq-focus: var(--mq-loud-ink);
  background: var(--mq-loud);
}

.mq-plan--pick + .mq-plan,
.mq-plan + .mq-plan--pick {
  border-color: var(--mq-loud-ink);
}

.mq-plan__name {
  font-size: clamp(2rem, 1.7rem + 1.2vw, 2.75rem);
  line-height: 0.9;
}

.mq-plan__for {
  color: var(--mq-body);
}

.mq-plan__price {
  display: flex;
  align-items: flex-start;
  gap: 2px;
  color: var(--mq-ink);
  font-family: var(--mq-font-display);
  font-size: var(--mq-fs-numeral);
  font-weight: var(--mq-weight-heavy);
  line-height: 0.82;
  font-variant-numeric: tabular-nums lining-nums;
}

.mq-plan__currency {
  font-size: 0.42em;
  line-height: 1.1;
}

.mq-plan__unit {
  align-self: flex-end;
  margin-inline-start: 6px;
  font-family: var(--mq-font-sans);
  font-size: var(--mq-fs-meta);
  font-weight: var(--mq-weight-semibold);
  line-height: 1.4;
}

.mq-plan__anchor {
  color: var(--mq-muted);
  font-size: var(--mq-fs-meta);
}

.mq-plan__list {
  display: grid;
  gap: var(--mq-space-2);
  margin: 0;
  padding: var(--mq-space-4) 0 0;
  border-block-start: var(--mq-line-hair) solid var(--mq-rule);
  list-style: none;
}

.mq-plan__list li {
  display: flex;
  gap: var(--mq-space-2);
}

.mq-plan__list svg {
  flex-shrink: 0;
  margin-block-start: 3px;
}

.mq-plan .mq-btn {
  margin-block-start: auto;
}

/* Comparison table */
.mq-compare {
  width: 100%;
  border-block-end: var(--mq-line-heavy) solid var(--mq-ink);
}

.mq-compare th,
.mq-compare td {
  padding: 14px var(--mq-space-4);
  border-block-end: var(--mq-line-hair) solid var(--mq-rule);
  text-align: start;
  vertical-align: middle;
}

.mq-compare thead th {
  border-block-end: var(--mq-line-heavy) solid var(--mq-ink);
  color: var(--mq-ink);
  font-family: var(--mq-font-display);
  font-size: 1.5rem;
  font-weight: var(--mq-weight-heavy);
  line-height: 1;
  text-transform: uppercase;
  vertical-align: bottom;
}

.mq-compare thead th small {
  display: block;
  margin-block-start: 6px;
  color: var(--mq-muted);
  font-family: var(--mq-font-sans);
  font-size: var(--mq-fs-meta);
  font-weight: var(--mq-weight-semibold);
  text-transform: none;
}

.mq-compare tbody th {
  color: var(--mq-ink);
  font-weight: var(--mq-weight-semibold);
}

.mq-compare__pick {
  background: var(--mq-loud-soft);
}

.mq-compare__yes,
.mq-compare__no {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: var(--mq-weight-semibold);
}

.mq-compare__yes {
  color: var(--mq-ink);
}

.mq-compare__no {
  color: var(--mq-muted);
}

.mq-compare-wrap {
  overflow-x: auto;
}

@media (max-width: 639px) {
  .mq-compare thead {
    display: none;
  }

  .mq-compare,
  .mq-compare tbody,
  .mq-compare tr,
  .mq-compare th,
  .mq-compare td {
    display: block;
  }

  .mq-compare tr {
    padding-block: var(--mq-space-3);
    border-block-end: var(--mq-line) solid var(--mq-ink);
  }

  .mq-compare th,
  .mq-compare td {
    padding: 6px 0;
    border: 0;
  }

  .mq-compare tbody th {
    font-size: var(--mq-fs-card);
  }

  .mq-compare td {
    display: flex;
    justify-content: space-between;
    gap: var(--mq-space-4);
  }

  .mq-compare td::before {
    content: attr(data-label);
    color: var(--mq-muted);
    font-weight: var(--mq-weight-semibold);
  }

  .mq-compare__pick {
    background: transparent;
  }
}

/* ---- add-to-calendar ---- */
/* Add to calendar: a details menu of .ics downloads. Works without scripts; with them it closes on
   Escape and on a click outside. */

.mq-cal {
  position: relative;
  display: inline-block;
}

.mq-cal__toggle {
  list-style: none;
}

.mq-cal__toggle::-webkit-details-marker {
  display: none;
}

.mq-cal__toggle .mq-cal__chev {
  transition: transform var(--mq-dur-fast) var(--mq-ease);
}

.mq-cal[open] .mq-cal__toggle .mq-cal__chev {
  transform: rotate(180deg);
}

.mq-cal__menu {
  position: absolute;
  inset-block-start: calc(100% + 6px);
  inset-inline-start: 0;
  z-index: 20;
  display: grid;
  min-width: 17rem;
  margin: 0;
  padding: 6px;
  border: var(--mq-line) solid var(--mq-ink);
  background: var(--mq-surface);
  box-shadow: var(--mq-stamp) var(--mq-stamp) 0 0 var(--mq-ink);
  list-style: none;
}

.mq-cal--end .mq-cal__menu {
  inset-inline: auto 0;
}

.mq-cal__item {
  display: flex;
  align-items: center;
  gap: var(--mq-space-3);
  min-height: 44px;
  padding: 8px 12px;
  color: var(--mq-ink);
  font-size: var(--mq-fs-ui);
  font-weight: var(--mq-weight-semibold);
  text-decoration: none;
}

.mq-cal__item:hover,
.mq-cal__item:focus-visible {
  background: var(--mq-loud);
  color: var(--mq-loud-ink);
  outline: none;
}

.mq-cal__item small {
  display: block;
  color: inherit;
  font-size: var(--mq-fs-meta);
  font-weight: var(--mq-weight-regular);
}

@media (prefers-reduced-motion: reduce) {
  .mq-cal__toggle .mq-cal__chev {
    transition: none;
  }
}

/* ---- session-card ---- */
/* Session card: one slot in the program. A heavy top bar in the track color, the time in display
   numerals, a sentence-case title, the speaker and the room. */

.mq-session {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--mq-space-3);
  min-width: 0;
  padding: var(--mq-space-4) var(--mq-space-5) var(--mq-space-5);
  border: var(--mq-line) solid var(--mq-ink);
  border-block-start-width: 8px;
  border-radius: var(--mq-radius-card);
  background: var(--mq-surface);
  color: var(--mq-body);
}

.mq-session--build {
  border-block-start-color: var(--mq-loud);
}

.mq-session--tend {
  border-block-start-color: var(--mq-aqua);
}

.mq-session--workshop {
  border-style: dashed solid solid;
  border-block-start-color: var(--mq-ink);
}

.mq-session__time {
  color: var(--mq-ink);
  font-family: var(--mq-font-display);
  font-size: 1.625rem;
  font-weight: var(--mq-weight-heavy);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.mq-session__title {
  font-family: var(--mq-font-sans);
  font-size: var(--mq-fs-card);
  font-weight: var(--mq-weight-bold);
  line-height: var(--mq-lh-snug);
  text-transform: none;
}

.mq-session__title a {
  text-decoration-thickness: 2px;
  text-decoration-color: transparent;
}

.mq-session__title a:hover {
  text-decoration-color: var(--mq-loud-ink);
}

.mq-session__title a:focus-visible {
  text-decoration-color: var(--mq-loud);
}

.mq-session__speaker {
  display: flex;
  align-items: center;
  gap: var(--mq-space-2);
  color: var(--mq-body);
  font-size: var(--mq-fs-ui);
  line-height: var(--mq-lh-ui);
}

.mq-session__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mq-space-2) var(--mq-space-3);
  margin-block-start: auto;
  padding-block-start: var(--mq-space-2);
}

.mq-session__room {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--mq-muted);
  font-size: var(--mq-fs-meta);
  font-weight: var(--mq-weight-semibold);
}

.mq-session__actions {
  position: absolute;
  inset-block-start: var(--mq-space-2);
  inset-inline-end: var(--mq-space-2);
}

/* Main stage: a black card across every column */
.mq-session--main {
  --mq-paper: var(--mq-night);
  --mq-surface: var(--mq-night);
  --mq-paper-2: var(--mq-night-2);
  --mq-ink: var(--mq-night-ink);
  --mq-body: var(--mq-night-body);
  --mq-muted: var(--mq-night-muted);
  --mq-rule: var(--mq-night-rule);
  --mq-focus: var(--mq-night-focus);
  border-color: var(--mq-night);
  border-block-start-color: var(--mq-loud);
  background: var(--mq-night);
}

/* Breaks: lunch, coffee, doors. No speaker, a tint, the time and a line. */
.mq-session--break {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--mq-space-2) var(--mq-space-4);
  padding-block: var(--mq-space-3);
  border: var(--mq-line-hair) solid var(--mq-rule);
  border-block-start-width: var(--mq-line-hair);
  background: var(--mq-paper-2);
}

.mq-session--break .mq-session__title {
  font-size: var(--mq-fs-body);
}

/* A workshop running on from the slot above */
.mq-session--cont {
  display: grid;
  place-items: center;
  min-height: 4rem;
  padding: var(--mq-space-3);
  border: var(--mq-line) dashed var(--mq-control);
  border-block-start-width: var(--mq-line);
  background: transparent;
  color: var(--mq-muted);
  font-size: var(--mq-fs-meta);
  font-weight: var(--mq-weight-semibold);
}

/* Saved: the visitor starred it */
.mq-session.is-saved {
  box-shadow: var(--mq-stamp) var(--mq-stamp) 0 0 var(--mq-ink);
}

.mq-session--full .mq-session__title::after {
  content: " (full)";
  color: var(--mq-muted);
  font-weight: var(--mq-weight-regular);
}

/* ---- timetable ---- */
/* Timetable: the real program. Time rows with Build, Tend and Workshop columns on wide screens; a
   stacked list on phones. Day tabs and a track filter appear when scripts run; without them both
   days show in full. */

.mq-timetable {
  display: grid;
  gap: var(--mq-space-6);
}

.mq-timetable__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--mq-space-4);
}

.mq-timetable__controls[hidden] {
  display: none;
}

.mq-timetable__days {
  display: flex;
  border: var(--mq-line) solid var(--mq-ink);
}

.mq-timetable__day {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 56px;
  padding: 8px 20px;
  border: 0;
  background: transparent;
  color: var(--mq-ink);
  font-family: var(--mq-font-display);
  font-size: 1.5rem;
  font-weight: var(--mq-weight-heavy);
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
}

.mq-timetable__day + .mq-timetable__day {
  border-inline-start: var(--mq-line) solid var(--mq-ink);
}

.mq-timetable__day small {
  margin-block-start: 4px;
  font-family: var(--mq-font-sans);
  font-size: var(--mq-fs-label);
  font-weight: var(--mq-weight-semibold);
  letter-spacing: var(--mq-track-label);
}

.mq-timetable__day[aria-selected="true"] {
  background: var(--mq-ink);
  color: var(--mq-paper);
}

.mq-timetable__day:focus-visible {
  outline: 3px solid var(--mq-focus);
  outline-offset: 3px;
}

.mq-timetable__panel {
  display: grid;
  gap: var(--mq-space-4);
}

.mq-timetable__panel[hidden] {
  display: none;
}

.mq-timetable__heading {
  font-size: var(--mq-fs-headline);
}

.mq-timetable__slots {
  display: grid;
  gap: var(--mq-space-4);
  padding: 0;
  list-style: none;
}

.mq-timetable__slot {
  display: grid;
  gap: var(--mq-space-3);
}

.mq-timetable__time {
  color: var(--mq-ink);
  font-family: var(--mq-font-display);
  font-size: 2rem;
  font-weight: var(--mq-weight-heavy);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.mq-timetable__head {
  display: none;
}

.mq-timetable__slot .mq-session__time {
  display: none;
}

.mq-timetable__slot .mq-session--break .mq-session__time {
  display: block;
}

/* Phones: the time sits above the cards, a heavy rule marks each slot */
@media (max-width: 959px) {
  .mq-timetable__slot {
    padding-block-start: var(--mq-space-3);
    border-block-start: var(--mq-line-heavy) solid var(--mq-ink);
  }

  .mq-timetable__slot .mq-session--cont {
    display: none;
  }

  .mq-timetable__slot .mq-session__time {
    display: block;
    font-size: 1.25rem;
  }
}

/* Wide screens: a grid with a time column and one column per track */
@media (min-width: 960px) {
  .mq-timetable__head,
  .mq-timetable__slot {
    grid-template-columns: 6.5rem repeat(3, minmax(0, 1fr));
    gap: var(--mq-space-3);
  }

  .mq-timetable__head {
    position: sticky;
    inset-block-start: var(--mq-nav-h);
    z-index: 2;
    display: grid;
    padding-block: var(--mq-space-3);
    border-block-end: var(--mq-line-heavy) solid var(--mq-ink);
    background: var(--mq-paper);
  }

  .mq-alt .mq-timetable__head {
    background: var(--mq-paper-2);
  }

  .mq-timetable__col {
    display: flex;
    align-items: center;
    gap: var(--mq-space-2);
    color: var(--mq-ink);
    font-size: var(--mq-fs-label);
    font-weight: var(--mq-weight-bold);
    letter-spacing: var(--mq-track-label);
    text-transform: uppercase;
  }

  .mq-timetable__col::before {
    content: "";
    width: 14px;
    height: 14px;
    border-radius: 50%;
  }

  .mq-timetable__col:first-child::before {
    display: none;
  }

  .mq-timetable__col--build::before {
    background: var(--mq-loud);
  }

  .mq-timetable__col--tend::before {
    background: var(--mq-aqua);
  }

  .mq-timetable__col--workshop::before {
    border: var(--mq-line) solid var(--mq-ink);
  }

  .mq-timetable__slot {
    align-items: stretch;
    padding-block-start: var(--mq-space-3);
    border-block-start: var(--mq-line-hair) solid var(--mq-rule);
  }

  .mq-timetable__time {
    grid-column: 1;
    padding-block-start: var(--mq-space-2);
  }

  .mq-timetable__slot > .mq-session--build {
    grid-column: 2;
  }

  .mq-timetable__slot > .mq-session--tend {
    grid-column: 3;
  }

  .mq-timetable__slot > .mq-session--workshop,
  .mq-timetable__slot > .mq-session--cont {
    grid-column: 4;
  }

  .mq-timetable__slot > .mq-session--main,
  .mq-timetable__slot > .mq-session--break {
    grid-column: 2 / -1;
  }
}

/* Filtered out by the track filter */
.mq-timetable .mq-session.is-filtered {
  display: none;
}

.mq-timetable__empty[hidden] {
  display: none;
}

/* Legend: what the colors and rooms mean, in words */
.mq-timetable__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mq-space-2) var(--mq-space-5);
  padding: 0;
  list-style: none;
  color: var(--mq-body);
  font-size: var(--mq-fs-meta);
}

.mq-timetable__legend li {
  display: inline-flex;
  align-items: center;
  gap: var(--mq-space-2);
}

/* ---- speaker-card ---- */
/* Speaker card: a cropped initials monogram on the track color, the name in display capitals, the
   role, the talk and the slot. No photos. */

.mq-speaker {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--mq-space-2);
  height: 100%;
  min-width: 0;
}

.mq-speaker__mono {
  display: grid;
  place-items: end start;
  aspect-ratio: 4 / 3;
  margin-block-end: var(--mq-space-3);
  padding-inline: 0.06em;
  overflow: hidden;
  border-radius: var(--mq-radius-card);
  background: var(--mq-ink);
  color: var(--mq-paper);
  font-family: var(--mq-font-display);
  font-size: clamp(7rem, 5rem + 6vw, 10rem);
  font-weight: var(--mq-weight-heavy);
  letter-spacing: -0.02em;
  line-height: 0.72;
  text-transform: uppercase;
  user-select: none;
}

.mq-speaker--build .mq-speaker__mono {
  background: var(--mq-loud);
  color: var(--mq-loud-ink);
}

.mq-speaker--tend .mq-speaker__mono {
  background: var(--mq-aqua);
  color: var(--mq-aqua-ink);
}

.mq-speaker--workshop .mq-speaker__mono {
  border: var(--mq-line) solid var(--mq-ink);
  background: var(--mq-surface);
  color: var(--mq-ink);
}

.mq-speaker__name {
  font-size: clamp(1.75rem, 1.5rem + 0.8vw, 2.25rem);
  line-height: 0.95;
}

.mq-speaker__role {
  color: var(--mq-muted);
  font-size: var(--mq-fs-meta);
  font-weight: var(--mq-weight-medium);
  line-height: var(--mq-lh-ui);
}

.mq-speaker__talk {
  margin-block-start: var(--mq-space-2);
  color: var(--mq-ink);
  font-weight: var(--mq-weight-bold);
  line-height: var(--mq-lh-snug);
}

.mq-speaker__talk a {
  text-decoration-thickness: 2px;
}

.mq-speaker__slot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mq-space-2);
  margin-block-start: auto;
  padding-block-start: var(--mq-space-3);
  color: var(--mq-muted);
  font-size: var(--mq-fs-meta);
  font-weight: var(--mq-weight-semibold);
}

/* Row: monogram beside the words, for lists and session pages */
.mq-speaker--row {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  column-gap: var(--mq-space-5);
  align-items: start;
}

.mq-speaker--row .mq-speaker__mono {
  grid-row: span 5;
  aspect-ratio: 1;
  margin: 0;
  font-size: 6rem;
}

.mq-speaker--row .mq-speaker__slot {
  margin-block-start: 0;
}

/* ---- speaker-grid ---- */
/* Speaker grid: speaker cards in a wall, four across on wide screens, with a track filter. */

.mq-speakers {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: var(--mq-space-7) var(--mq-space-5);
  padding: 0;
  list-style: none;
}

@media (min-width: 1100px) {
  .mq-speakers {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.mq-speakers > li.is-filtered {
  display: none;
}

.mq-speakers-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--mq-space-3) var(--mq-space-5);
  margin-block-end: var(--mq-space-6);
}

.mq-speakers-filter__status {
  color: var(--mq-muted);
  font-size: var(--mq-fs-meta);
}

/* ---- venue-card ---- */
/* Venue card: the hall as a ruled sheet. A coded street map with the venue marked, the address in
   display capitals, transit and access facts as labelled rows. */

.mq-venue {
  display: grid;
  border: var(--mq-line) solid var(--mq-ink);
  border-radius: var(--mq-radius-card);
  background: var(--mq-surface);
  overflow: hidden;
}

@media (min-width: 960px) {
  .mq-venue {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  }
}

.mq-venue__map {
  border-block-end: var(--mq-line) solid var(--mq-ink);
  background: var(--mq-paper-2);
}

@media (min-width: 960px) {
  .mq-venue__map {
    border-block-end: 0;
    border-inline-end: var(--mq-line) solid var(--mq-ink);
  }
}

.mq-map {
  width: 100%;
  height: 100%;
  min-height: 16rem;
  aspect-ratio: 8 / 5;
}

.mq-map__ground {
  fill: var(--mq-paper-2);
}

.mq-map__water {
  fill: var(--mq-aqua);
  opacity: 0.55;
}

.mq-map__street {
  fill: none;
  stroke: var(--mq-surface);
  stroke-width: 10;
}

.mq-map__street--main {
  stroke-width: 18;
}

.mq-map__rail {
  fill: none;
  stroke: var(--mq-ink);
  stroke-width: 3;
  stroke-dasharray: 10 6;
}

.mq-map__block {
  fill: var(--mq-rule);
}

.mq-map__venue {
  fill: var(--mq-loud);
  stroke: var(--mq-ink);
  stroke-width: 3;
}

.mq-map__station {
  fill: var(--mq-ink);
}

.mq-map__stop {
  fill: var(--mq-surface);
  stroke: var(--mq-ink);
  stroke-width: 4;
}

.mq-map__label {
  fill: var(--mq-ink);
  font-family: var(--mq-font-display);
  font-size: 19px;
  font-weight: var(--mq-weight-heavy);
  text-transform: uppercase;
}

.mq-map__label--small {
  font-family: var(--mq-font-sans);
  font-size: 15px;
  font-weight: var(--mq-weight-bold);
  text-transform: none;
}

.mq-venue__body {
  display: flex;
  flex-direction: column;
  gap: var(--mq-space-4);
  padding: clamp(1.25rem, 1rem + 1.2vw, 2rem);
}

.mq-venue__name {
  font-size: clamp(2.25rem, 1.8rem + 1.8vw, 3.5rem);
  line-height: 0.88;
}

.mq-venue__address {
  color: var(--mq-body);
  font-size: var(--mq-fs-lede);
  line-height: var(--mq-lh-lede);
}

.mq-venue__facts {
  display: grid;
  margin: 0;
  border-block-start: var(--mq-line) solid var(--mq-ink);
}

.mq-venue__fact {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: var(--mq-space-3);
  padding-block: var(--mq-space-3);
  border-block-end: var(--mq-line-hair) solid var(--mq-rule);
}

.mq-venue__fact dt {
  display: flex;
  align-items: center;
  gap: 8px;
  align-self: start;
  color: var(--mq-ink);
  font-size: var(--mq-fs-label);
  font-weight: var(--mq-weight-bold);
  letter-spacing: var(--mq-track-label);
  line-height: 1.6;
  text-transform: uppercase;
}

.mq-venue__fact dd {
  margin: 0;
  color: var(--mq-body);
}

@media (max-width: 479px) {
  .mq-venue__fact {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }
}

/* ---- sponsor-tiers ---- */
/* Sponsor tiers: supporters grouped by tier, marks sized by tier, every name written out. */

.mq-sponsors {
  display: grid;
  gap: var(--mq-space-7);
}

.mq-sponsors__tier {
  display: grid;
  gap: var(--mq-space-4);
}

@media (min-width: 960px) {
  .mq-sponsors__tier {
    grid-template-columns: 14rem minmax(0, 1fr);
    gap: var(--mq-space-6);
    align-items: start;
  }
}

.mq-sponsors__name {
  padding-block-start: var(--mq-space-3);
  border-block-start: var(--mq-line-heavy) solid var(--mq-ink);
  font-size: var(--mq-fs-headline);
  line-height: 0.95;
}

.mq-sponsors__note {
  display: block;
  margin-block-start: var(--mq-space-2);
  color: var(--mq-muted);
  font-family: var(--mq-font-sans);
  font-size: var(--mq-fs-label);
  font-weight: var(--mq-weight-semibold);
  letter-spacing: var(--mq-track-label);
  text-transform: uppercase;
}

.mq-sponsors__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr));
  gap: var(--mq-space-3);
  padding: 0;
  list-style: none;
}

.mq-sponsor {
  display: flex;
  align-items: center;
  gap: var(--mq-space-3);
  min-height: 5rem;
  padding: var(--mq-space-4);
  border: var(--mq-line) solid var(--mq-ink);
  background: var(--mq-surface);
  color: var(--mq-ink);
}

.mq-sponsor svg {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
}

.mq-sponsor__name {
  font-family: var(--mq-font-display);
  font-size: 1.5rem;
  font-weight: var(--mq-weight-heavy);
  line-height: 1;
  text-transform: uppercase;
}

.mq-sponsors__tier--host .mq-sponsors__list {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
}

.mq-sponsors__tier--host .mq-sponsor {
  min-height: 8rem;
  padding: var(--mq-space-5);
}

.mq-sponsors__tier--host .mq-sponsor svg {
  width: 56px;
  height: 56px;
}

.mq-sponsors__tier--host .mq-sponsor__name {
  font-size: 2.25rem;
}

.mq-sponsors__tier--small .mq-sponsor {
  min-height: 3.5rem;
  padding: var(--mq-space-3);
  border-width: var(--mq-line-hair);
}

.mq-sponsors__tier--small .mq-sponsor svg {
  width: 26px;
  height: 26px;
}

.mq-sponsors__tier--small .mq-sponsor__name {
  font-size: 1.125rem;
}

/* ---- code-of-conduct ---- */
/* Code of conduct: the short version in a heavy-ruled panel. Numbered rules in display numerals,
   then the ways to report, with response times. */

.mq-conduct {
  display: grid;
  gap: var(--mq-space-6) var(--mq-space-8);
  padding: clamp(1.5rem, 1rem + 2vw, 3rem);
  border: var(--mq-line-heavy) solid var(--mq-ink);
  background: var(--mq-surface);
}

@media (min-width: 960px) {
  .mq-conduct {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  }
}

.mq-conduct__title {
  font-size: var(--mq-fs-title);
  line-height: var(--mq-lh-title);
}

.mq-conduct__intro {
  margin-block-start: var(--mq-space-4);
  color: var(--mq-body);
  font-size: var(--mq-fs-lede);
  line-height: var(--mq-lh-lede);
}

.mq-conduct__rules {
  display: grid;
  gap: var(--mq-space-4);
  margin: var(--mq-space-6) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: mq-rule;
}

.mq-conduct__rule {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: var(--mq-space-3);
  padding-block-start: var(--mq-space-3);
  border-block-start: var(--mq-line) solid var(--mq-ink);
  counter-increment: mq-rule;
}

.mq-conduct__rule::before {
  content: counter(mq-rule, decimal-leading-zero);
  color: var(--mq-ink);
  font-family: var(--mq-font-display);
  font-size: 2.5rem;
  font-weight: var(--mq-weight-heavy);
  line-height: 0.85;
}

.mq-conduct__rule strong {
  display: block;
  color: var(--mq-ink);
}

.mq-conduct__report {
  display: flex;
  flex-direction: column;
  gap: var(--mq-space-4);
  padding: clamp(1.25rem, 1rem + 1vw, 2rem);
  border-radius: var(--mq-radius-card);
}

.mq-conduct__report-title {
  font-size: var(--mq-fs-headline);
}

.mq-conduct__ways {
  display: grid;
  gap: var(--mq-space-3);
  padding: 0;
  list-style: none;
}

.mq-conduct__way {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: var(--mq-space-3);
  padding-block-end: var(--mq-space-3);
  border-block-end: var(--mq-line-hair) solid var(--mq-rule);
  color: var(--mq-body);
}

.mq-conduct__way svg {
  margin-block-start: 2px;
  color: var(--mq-loud);
}

.mq-conduct__way strong {
  display: block;
}

/* ---- cta ---- */
/* CTA: the closing call on a loud band. Large black type only, one ink button (the band turns the
   primary into ink), a secondary link and a plain line that answers the obvious worry. */

.mq-cta {
  padding-block: clamp(4rem, 2.8rem + 5vw, 7rem);
}

.mq-cta__grid {
  display: grid;
  gap: var(--mq-space-6) var(--mq-space-8);
}

.mq-cta__title {
  font-size: var(--mq-fs-display);
  line-height: var(--mq-lh-display);
}

.mq-cta__side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--mq-space-5);
}

.mq-cta__text {
  max-width: 30rem;
  color: var(--mq-body);
  font-size: var(--mq-fs-lede);
  font-weight: var(--mq-weight-semibold);
  line-height: var(--mq-lh-lede);
}

.mq-cta__note {
  color: var(--mq-body);
  font-size: var(--mq-fs-lede);
  font-weight: var(--mq-weight-semibold);
  line-height: var(--mq-lh-lede);
}

@media (min-width: 960px) {
  .mq-cta__grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    align-items: end;
  }
}

/* Paper and night grounds keep the same layout */
.mq-cta--center .mq-cta__grid {
  justify-items: center;
  text-align: center;
}

.mq-cta--center .mq-cta__side {
  align-items: center;
}

@media (min-width: 960px) {
  .mq-cta--center .mq-cta__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- footer ---- */
/* Footer: the black stub at the bottom of every page, with a perforated top edge. A display sign-off,
   link columns with paragraph titles, the dispatch signup and a bar naming the typefaces. */

.mq-footer {
  padding-block: calc(var(--mq-section-pad) * 0.8) var(--mq-space-6);
}

.mq-footer__sign {
  padding-block-end: var(--mq-space-7);
  color: var(--mq-ink);
  font-family: var(--mq-font-display);
  font-size: var(--mq-fs-display);
  font-weight: var(--mq-weight-heavy);
  line-height: var(--mq-lh-display);
  text-transform: uppercase;
  text-wrap: balance;
}

.mq-footer__sign .mq-mark {
  margin-block-start: 0.04em;
}

.mq-footer__grid {
  display: grid;
  gap: var(--mq-space-7) var(--mq-space-6);
  padding-block: var(--mq-space-6) var(--mq-space-7);
  border-block-start: var(--mq-line-heavy) solid var(--mq-ink);
}

@media (min-width: 720px) {
  .mq-footer__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .mq-footer__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.6fr);
  }
}

.mq-footer__title {
  margin-block-end: var(--mq-space-3);
  color: var(--mq-ink);
  font-family: var(--mq-font-display);
  font-size: 1.5rem;
  font-weight: var(--mq-weight-heavy);
  line-height: 1;
  text-transform: uppercase;
}

.mq-footer__links {
  display: grid;
  gap: 2px;
  padding: 0;
  list-style: none;
}

.mq-footer__link {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  color: var(--mq-body);
  text-decoration: none;
}

.mq-footer__link:hover {
  background: transparent;
  color: var(--mq-ink);
  text-decoration-line: underline;
  text-decoration-color: var(--mq-loud);
}

.mq-footer__signup {
  display: flex;
  flex-direction: column;
  gap: var(--mq-space-3);
}

.mq-footer__text {
  color: var(--mq-body);
  font-size: var(--mq-fs-ui);
}

.mq-footer__bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--mq-space-3) var(--mq-space-6);
  padding-block-start: var(--mq-space-5);
  border-block-start: var(--mq-line-hair) solid var(--mq-rule);
  color: var(--mq-muted);
  font-size: var(--mq-fs-meta);
}

.mq-footer__bar a {
  color: var(--mq-muted);
}

.mq-footer__bar a:hover {
  color: var(--mq-loud-ink);
}

@media (pointer: coarse) {
  .mq-footer__link {
    min-height: 44px;
  }
}

/* ---- prose ---- */
/* Prose: long-form typography for dispatches, policies and session pages. Schibsted at 19px on a
   42rem measure; display h2s in capitals; h3 and below in sentence case. */

.mq-prose {
  max-width: var(--mq-measure);
  color: var(--mq-body);
  font-size: var(--mq-fs-read);
  line-height: var(--mq-lh-read);
}

.mq-prose > * + * {
  margin-block-start: 1.1em;
}

.mq-prose > :is(h2, h3, h4) {
  margin-block-start: 2em;
}

.mq-prose > :first-child {
  margin-block-start: 0;
}

.mq-prose > :is(h2, h3, h4) + * {
  margin-block-start: 0.7em;
}

.mq-prose h2 {
  padding-block-start: var(--mq-space-3);
  border-block-start: var(--mq-line-heavy) solid var(--mq-ink);
  font-size: clamp(2.25rem, 1.9rem + 1.6vw, 3.25rem);
  line-height: 0.92;
  scroll-margin-block-start: calc(var(--mq-nav-h) + var(--mq-space-5));
}

.mq-prose h3 {
  font-family: var(--mq-font-sans);
  font-size: 1.5rem;
  font-weight: var(--mq-weight-bold);
  line-height: var(--mq-lh-snug);
  text-transform: none;
}

.mq-prose h4 {
  font-size: var(--mq-fs-body);
}

.mq-prose :is(ul, ol) {
  padding-inline-start: 1.5em;
}

.mq-prose li + li {
  margin-block-start: 0.4em;
}

.mq-prose ul {
  list-style: none;
  padding-inline-start: 1.6em;
}

.mq-prose ul > li {
  position: relative;
}

.mq-prose ul > li::before {
  content: "";
  position: absolute;
  inset-inline-start: -1.25em;
  inset-block-start: 0.62em;
  width: 0.5em;
  height: 0.5em;
  background: var(--mq-loud);
  box-shadow: 0 0 0 1.5px var(--mq-ink);
}

.mq-prose ol > li::marker {
  color: var(--mq-ink);
  font-family: var(--mq-font-display);
  font-weight: var(--mq-weight-heavy);
}

.mq-prose blockquote {
  margin-inline: 0;
  padding: var(--mq-space-2) 0 var(--mq-space-2) var(--mq-space-5);
  border-inline-start: 8px solid var(--mq-loud);
  color: var(--mq-ink);
  font-size: 1.375rem;
  font-weight: var(--mq-weight-medium);
  line-height: 1.4;
}

.mq-prose blockquote cite {
  display: block;
  margin-block-start: var(--mq-space-3);
  color: var(--mq-muted);
  font-size: var(--mq-fs-meta);
  font-style: normal;
  font-weight: var(--mq-weight-semibold);
}

.mq-prose :not(pre) > code {
  padding: 0.1em 0.35em;
  background: var(--mq-paper-2);
  color: var(--mq-ink);
}

.mq-prose pre {
  overflow-x: auto;
  padding: var(--mq-space-5);
  background: var(--mq-night);
  color: var(--mq-night-body);
  font-size: 0.875rem;
  line-height: 1.6;
}

.mq-prose figure {
  margin-block: 2em;
}

.mq-prose figcaption {
  margin-block-start: var(--mq-space-3);
  padding-block-start: var(--mq-space-2);
  border-block-start: var(--mq-line-hair) solid var(--mq-rule);
  color: var(--mq-muted);
  font-size: var(--mq-fs-meta);
  line-height: var(--mq-lh-ui);
}

.mq-prose hr {
  margin-block: 2.5em;
  border: 0;
  height: var(--mq-line);
  background: repeating-linear-gradient(90deg, var(--mq-ink) 0 10px, transparent 10px 17px);
}

.mq-prose table {
  width: 100%;
  font-size: var(--mq-fs-ui);
  line-height: var(--mq-lh-ui);
  border-block: var(--mq-line) solid var(--mq-ink);
}

.mq-prose th,
.mq-prose td {
  padding: 10px 12px 10px 0;
  border-block-end: var(--mq-line-hair) solid var(--mq-rule);
  text-align: start;
}

.mq-prose thead th {
  color: var(--mq-ink);
  font-weight: var(--mq-weight-bold);
}

.mq-prose .mq-prose__lead {
  color: var(--mq-ink);
  font-size: var(--mq-fs-lede);
  line-height: var(--mq-lh-lede);
}

.mq-prose .mq-prose__wide {
  max-width: none;
}

/* ---- callout ---- */
/* Callout: a note set apart by a heavy start rule and a tint, with an icon and a title. */

.mq-callout {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: var(--mq-space-2) var(--mq-space-3);
  padding: var(--mq-space-4) var(--mq-space-5);
  border-inline-start: 8px solid var(--mq-ink);
  background: var(--mq-paper-2);
  color: var(--mq-body);
}

.mq-callout > svg {
  grid-row: span 2;
  margin-block-start: 2px;
  color: var(--mq-ink);
}

.mq-callout__title {
  color: var(--mq-ink);
  font-weight: var(--mq-weight-bold);
}

.mq-callout__body > * + * {
  margin-block-start: var(--mq-space-2);
}

.mq-callout--loud {
  border-inline-start-color: var(--mq-loud);
  background: var(--mq-loud-soft);
}

.mq-callout--aqua {
  border-inline-start-color: var(--mq-aqua);
  background: var(--mq-aqua-soft);
}

.mq-callout--warn {
  border-inline-start-color: var(--mq-warn);
  background: var(--mq-warn-soft);
}

.mq-callout--danger {
  border-inline-start-color: var(--mq-danger);
  background: var(--mq-danger-soft);
}

/* ---- toc ---- */
/* Table of contents: the parts of a long dispatch with display numerals. Sticky beside the text on wide
   screens; the part on screen gets the loud bar. */

.mq-toc__title {
  display: block;
  margin-block-end: var(--mq-space-3);
  color: var(--mq-muted);
  font-size: var(--mq-fs-label);
  font-weight: var(--mq-weight-semibold);
  letter-spacing: var(--mq-track-label);
  text-transform: uppercase;
}

.mq-toc__list {
  display: grid;
  padding: 0;
  border-block-start: var(--mq-line) solid var(--mq-ink);
  list-style: none;
  counter-reset: mq-toc;
}

.mq-toc__link {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: var(--mq-space-2);
  align-items: baseline;
  padding: 10px var(--mq-space-2);
  border-block-end: var(--mq-line-hair) solid var(--mq-rule);
  color: var(--mq-body);
  font-size: var(--mq-fs-ui);
  font-weight: var(--mq-weight-semibold);
  line-height: var(--mq-lh-ui);
  text-decoration: none;
  counter-increment: mq-toc;
}

.mq-toc__link::before {
  content: counter(mq-toc, decimal-leading-zero);
  color: var(--mq-ink);
  font-family: var(--mq-font-display);
  font-size: 1.25rem;
  font-weight: var(--mq-weight-heavy);
}

.mq-toc__link:hover {
  background: var(--mq-paper-2);
  color: var(--mq-ink);
}

.mq-toc__link[aria-current="true"] {
  box-shadow: inset 6px 0 0 var(--mq-loud);
  color: var(--mq-ink);
}

.mq-toc__link[aria-current="true"]:dir(rtl) {
  box-shadow: inset -6px 0 0 var(--mq-loud);
}

@media (min-width: 960px) {
  .mq-toc--sticky {
    position: sticky;
    inset-block-start: calc(var(--mq-nav-h) + var(--mq-space-5));
  }
}

/* ---- byline ---- */
/* Byline: who wrote it, their role, the date and the reading time beside an initials avatar. */

.mq-byline {
  display: flex;
  align-items: center;
  gap: var(--mq-space-3);
}

.mq-byline__text {
  display: grid;
  gap: 2px;
}

.mq-byline__name {
  color: var(--mq-ink);
  font-weight: var(--mq-weight-bold);
  line-height: var(--mq-lh-ui);
}

.mq-byline__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--mq-space-3);
  color: var(--mq-muted);
  font-size: var(--mq-fs-meta);
  line-height: var(--mq-lh-ui);
}

.mq-byline__meta > * + *::before {
  content: "\00B7";
  margin-inline-end: var(--mq-space-3);
  color: var(--mq-ink);
}

.mq-bylines {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mq-space-4) var(--mq-space-6);
}

/* ---- timeline ---- */
/* Timeline: past editions and schedule changes. Years or dates in display numerals on a heavy rule,
   square markers in the loud color. */

.mq-timeline {
  display: grid;
  padding: 0;
  list-style: none;
}

.mq-timeline__item {
  position: relative;
  display: grid;
  gap: var(--mq-space-2) var(--mq-space-5);
  padding-block: 0 var(--mq-space-6);
  padding-inline-start: var(--mq-space-6);
  border-inline-start: var(--mq-line-heavy) solid var(--mq-ink);
}

.mq-timeline__item:last-child {
  padding-block-end: 0;
}

.mq-timeline__item::before {
  content: "";
  position: absolute;
  inset-inline-start: -12px;
  inset-block-start: 4px;
  width: 20px;
  height: 20px;
  border: var(--mq-line) solid var(--mq-ink);
  background: var(--mq-loud);
}

.mq-timeline__item--past::before {
  background: var(--mq-paper);
}

.mq-timeline__when {
  color: var(--mq-ink);
  font-family: var(--mq-font-display);
  font-size: 2.25rem;
  font-weight: var(--mq-weight-heavy);
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
}

.mq-timeline__title {
  font-family: var(--mq-font-sans);
  font-size: var(--mq-fs-card);
  font-weight: var(--mq-weight-bold);
  line-height: var(--mq-lh-snug);
  text-transform: none;
}

.mq-timeline__text {
  color: var(--mq-body);
}

@media (min-width: 720px) {
  .mq-timeline--wide .mq-timeline__item {
    grid-template-columns: 8rem minmax(0, 1fr);
  }

  .mq-timeline--wide .mq-timeline__when {
    grid-row: span 2;
  }
}

/* ---- forms ---- */
/* Forms: square fields with 2px control borders and bold labels above them. Checked boxes take the loud
   fill with an ink tick; radios are the one round control. Errors say what to do next. */

.mq-form {
  display: grid;
  gap: var(--mq-space-5);
}

.mq-form__row {
  display: grid;
  gap: var(--mq-space-5);
}

@media (min-width: 720px) {
  .mq-form__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.mq-field {
  display: grid;
  gap: var(--mq-space-2);
  min-width: 0;
}

.mq-field__label,
.mq-fieldset__legend {
  color: var(--mq-ink);
  font-size: var(--mq-fs-ui);
  font-weight: var(--mq-weight-bold);
  line-height: var(--mq-lh-ui);
}

/* Legends title a group of fields, so they set in display capitals above the plain labels */
.mq-fieldset__legend {
  margin-block-end: var(--mq-space-4);
  padding: 0;
  font-family: var(--mq-font-display);
  font-size: 1.625rem;
  font-weight: var(--mq-weight-heavy);
  line-height: 1;
  text-transform: uppercase;
}

.mq-field__optional {
  color: var(--mq-muted);
  font-weight: var(--mq-weight-regular);
}

.mq-field__hint {
  color: var(--mq-muted);
  font-size: var(--mq-fs-meta);
  line-height: var(--mq-lh-ui);
}

.mq-field__error,
.mq-field__success {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: var(--mq-fs-meta);
  font-weight: var(--mq-weight-semibold);
  line-height: var(--mq-lh-ui);
}

.mq-field__error {
  color: var(--mq-danger);
}

.mq-field__success {
  color: var(--mq-ok);
}

.mq-field__error svg,
.mq-field__success svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-block-start: 1px;
}

.mq-input,
.mq-select,
.mq-textarea {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  border: var(--mq-line) solid var(--mq-control);
  border-radius: var(--mq-radius-input);
  background: var(--mq-surface);
  color: var(--mq-ink);
  font-family: var(--mq-font-sans);
  font-size: 1.0625rem;
  line-height: 1.4;
  transition: border-color var(--mq-dur-fast) var(--mq-ease);
}

.mq-input::placeholder,
.mq-textarea::placeholder {
  color: var(--mq-muted);
  opacity: 1;
}

.mq-input:hover,
.mq-select:hover,
.mq-textarea:hover {
  border-color: var(--mq-ink);
}

.mq-input:focus-visible,
.mq-select:focus-visible,
.mq-textarea:focus-visible {
  border-color: var(--mq-ink);
  outline: 3px solid var(--mq-focus);
  outline-offset: 2px;
}

.mq-textarea {
  min-height: 9rem;
  resize: vertical;
}

.mq-select {
  padding-inline-end: 44px;
  -webkit-appearance: none;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--mq-ink) 50%),
    linear-gradient(135deg, var(--mq-ink) 50%, transparent 50%);
  background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.mq-select:dir(rtl) {
  background-position: 16px 50%, 22px 50%;
}

.mq-input[aria-invalid="true"],
.mq-select[aria-invalid="true"],
.mq-textarea[aria-invalid="true"] {
  border-color: var(--mq-danger);
  box-shadow: inset 0 0 0 1px var(--mq-danger);
}

.mq-input.is-valid {
  border-color: var(--mq-ok);
}

.mq-input:disabled,
.mq-select:disabled,
.mq-textarea:disabled {
  border-color: var(--mq-rule);
  background-color: var(--mq-paper-2);
  color: var(--mq-muted);
  cursor: not-allowed;
}

.mq-input[readonly] {
  border-style: dashed;
  background: var(--mq-paper-2);
}

/* Checkboxes and radios */
.mq-choices {
  display: grid;
  gap: var(--mq-space-3);
  padding: 0;
  list-style: none;
}

.mq-check {
  display: flex;
  align-items: flex-start;
  gap: var(--mq-space-3);
  color: var(--mq-body);
  cursor: pointer;
}

.mq-check__input {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 24px;
  height: 24px;
  margin: 1px 0 0;
  border: var(--mq-line) solid var(--mq-control);
  border-radius: 0;
  background: var(--mq-surface);
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.mq-check__input:hover {
  border-color: var(--mq-ink);
}

.mq-check__input:focus-visible {
  outline: 3px solid var(--mq-focus);
  outline-offset: 2px;
}

.mq-check__input::before {
  content: "";
  width: 14px;
  height: 14px;
  background: var(--mq-loud-ink);
  clip-path: polygon(12% 52%, 0 66%, 38% 100%, 100% 22%, 86% 9%, 38% 72%);
  transform: scale(0);
}

.mq-check__input:checked {
  border-color: var(--mq-ink);
  background: var(--mq-loud);
}

.mq-check__input:checked::before {
  transform: scale(1);
}

.mq-check__input[type="radio"] {
  border-radius: 50%;
}

.mq-check__input[type="radio"]::before {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  clip-path: none;
}

.mq-check__input:disabled {
  border-color: var(--mq-rule);
  background: var(--mq-paper-2);
  cursor: not-allowed;
}

.mq-check__input[aria-invalid="true"] {
  border-color: var(--mq-danger);
}

.mq-check__text {
  display: grid;
  gap: 2px;
}

.mq-check__title {
  color: var(--mq-ink);
  font-weight: var(--mq-weight-semibold);
}

.mq-check__hint {
  color: var(--mq-muted);
  font-size: var(--mq-fs-meta);
}

.mq-check:has(.mq-check__input:disabled) {
  color: var(--mq-muted);
  cursor: not-allowed;
}

.mq-check:has(.mq-check__input:disabled) .mq-check__title {
  color: var(--mq-muted);
}

.mq-form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mq-space-4);
  padding-block-start: var(--mq-space-2);
}

@media (pointer: coarse) {
  .mq-check {
    min-height: 44px;
    align-items: center;
  }
}

/* ---- switch ---- */
/* Switch: a square on/off control on a native checkbox with role="switch". On fills the track with the
   loud color behind an ink thumb. */

.mq-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mq-space-4);
  cursor: pointer;
}

.mq-switch__text {
  display: grid;
  gap: 2px;
}

.mq-switch__label {
  color: var(--mq-ink);
  font-weight: var(--mq-weight-semibold);
}

.mq-switch__hint {
  color: var(--mq-muted);
  font-size: var(--mq-fs-meta);
}

.mq-switch__input {
  position: relative;
  flex-shrink: 0;
  width: 56px;
  height: 30px;
  margin: 0;
  border: var(--mq-line) solid var(--mq-control);
  background: var(--mq-paper-2);
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: background-color var(--mq-dur-fast) var(--mq-ease), border-color var(--mq-dur-fast) var(--mq-ease);
}

.mq-switch__input::before {
  content: "";
  position: absolute;
  inset-block-start: 3px;
  inset-inline-start: 3px;
  width: 20px;
  height: 20px;
  background: var(--mq-control);
  transition: transform var(--mq-dur) var(--mq-ease-out), background-color var(--mq-dur-fast) var(--mq-ease);
}

.mq-switch__input:checked {
  border-color: var(--mq-ink);
  background: var(--mq-loud);
}

.mq-switch__input:checked::before {
  background: var(--mq-loud-ink);
  transform: translateX(26px);
}

.mq-switch__input:checked:dir(rtl)::before {
  transform: translateX(-26px);
}

.mq-switch__input:hover {
  border-color: var(--mq-ink);
}

.mq-switch__input:focus-visible {
  outline: 3px solid var(--mq-focus);
  outline-offset: 2px;
}

.mq-switch__input:disabled {
  border-color: var(--mq-rule);
  background: var(--mq-paper-2);
  cursor: not-allowed;
}

.mq-switch__input:disabled::before {
  background: var(--mq-rule);
}

.mq-switch:has(.mq-switch__input:disabled) {
  cursor: not-allowed;
}

.mq-switch:has(.mq-switch__input:disabled) .mq-switch__label {
  color: var(--mq-muted);
}

.mq-settings {
  display: grid;
  padding: 0;
  border-block-start: var(--mq-line) solid var(--mq-ink);
  list-style: none;
}

.mq-settings > li {
  padding-block: var(--mq-space-4);
  border-block-end: var(--mq-line-hair) solid var(--mq-rule);
}

@media (prefers-reduced-motion: reduce) {
  .mq-switch__input,
  .mq-switch__input::before {
    transition: none;
  }
}

/* ---- choice-cards ---- */
/* Choice cards: a radio group of tiles. The chosen tile takes a heavy ink frame and a loud check.
   The ticket form adds tear-line notches, for choosing a pass. */

.mq-choices-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--mq-space-3);
  padding: 0;
  border: 0;
}

@media (min-width: 600px) {
  .mq-choices-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.mq-choice {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--mq-space-2) var(--mq-space-3);
  min-height: 100%;
  padding: var(--mq-space-4) var(--mq-space-5);
  border: var(--mq-line) solid var(--mq-control);
  border-radius: var(--mq-radius-card);
  background: var(--mq-surface);
  color: var(--mq-body);
  cursor: pointer;
}

.mq-choice__input {
  position: absolute;
  inset-block-start: var(--mq-space-4);
  inset-inline-end: var(--mq-space-4);
  width: 26px;
  height: 26px;
  margin: 0;
  border: var(--mq-line) solid var(--mq-control);
  border-radius: 50%;
  background: var(--mq-surface);
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.mq-choice__input:checked {
  border-color: var(--mq-ink);
  background: var(--mq-loud);
}

.mq-choice__input:checked::before {
  content: "";
  position: absolute;
  inset: 5px;
  background: var(--mq-loud-ink);
  clip-path: polygon(12% 52%, 0 66%, 38% 100%, 100% 22%, 86% 9%, 38% 72%);
}

.mq-choice__input:focus-visible {
  outline: 3px solid var(--mq-focus);
  outline-offset: 2px;
}

.mq-choice__title {
  grid-column: 1;
  padding-inline-end: var(--mq-space-6);
  color: var(--mq-ink);
  font-family: var(--mq-font-display);
  font-size: 1.75rem;
  font-weight: var(--mq-weight-heavy);
  line-height: 1;
  text-transform: uppercase;
}

.mq-choice__text {
  grid-column: 1 / -1;
  color: var(--mq-body);
  font-size: var(--mq-fs-ui);
  line-height: var(--mq-lh-ui);
}

.mq-choice__price {
  grid-column: 1 / -1;
  color: var(--mq-ink);
  font-family: var(--mq-font-display);
  font-size: 2.25rem;
  font-weight: var(--mq-weight-heavy);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.mq-choice__price small {
  margin-inline-start: 4px;
  color: var(--mq-muted);
  font-family: var(--mq-font-sans);
  font-size: var(--mq-fs-meta);
  font-weight: var(--mq-weight-semibold);
}

.mq-choice:hover {
  border-color: var(--mq-ink);
}

.mq-choice:has(.mq-choice__input:checked) {
  border-color: var(--mq-ink);
  box-shadow: inset 0 0 0 2px var(--mq-ink);
}

.mq-choice:has(.mq-choice__input:disabled) {
  border-style: dashed;
  border-color: var(--mq-rule);
  background: var(--mq-paper-2);
  cursor: not-allowed;
}

.mq-choice:has(.mq-choice__input:disabled) :is(.mq-choice__title, .mq-choice__price) {
  color: var(--mq-muted);
}

/* Ticket tiles: notches where a tear line would be, a dashed tear above the price */
.mq-choice--ticket {
  border: 0;
  background: var(--mq-surface);
  filter:
    drop-shadow(2px 0 0 var(--mq-control))
    drop-shadow(-2px 0 0 var(--mq-control))
    drop-shadow(0 2px 0 var(--mq-control))
    drop-shadow(0 -2px 0 var(--mq-control));
  -webkit-mask:
    radial-gradient(circle 12px at 0 62%, transparent 98%, black) left / 51% 100% no-repeat,
    radial-gradient(circle 12px at 100% 62%, transparent 98%, black) right / 51% 100% no-repeat;
  mask:
    radial-gradient(circle 12px at 0 62%, transparent 98%, black) left / 51% 100% no-repeat,
    radial-gradient(circle 12px at 100% 62%, transparent 98%, black) right / 51% 100% no-repeat;
}

.mq-choice--ticket .mq-choice__price {
  padding-block-start: var(--mq-space-3);
  background: repeating-linear-gradient(90deg, var(--mq-ink) 0 8px, transparent 8px 14px) top / 100% 2px no-repeat;
}

.mq-choice--ticket:has(.mq-choice__input:checked) {
  box-shadow: none;
  background: var(--mq-loud-soft);
}

.mq-choices-wrap {
  display: grid;
  gap: var(--mq-space-3);
}

/* ---- search-field ---- */
/* Search field: a square field with a search icon at the start and the button attached at the end. */

.mq-search {
  display: flex;
  max-width: 40rem;
}

.mq-search__box {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

.mq-search__box svg {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 14px;
  color: var(--mq-muted);
  transform: translateY(-50%);
  pointer-events: none;
}

.mq-search__input {
  padding-inline-start: 46px;
  border-inline-end-width: 0;
}

.mq-search__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.mq-search .mq-btn {
  flex: 0 0 auto;
  min-height: 52px;
}

.mq-search--lg .mq-search__input {
  min-height: 64px;
  font-size: 1.25rem;
}

.mq-search--lg .mq-btn {
  min-height: 64px;
}

.mq-search__hint {
  margin-block-start: var(--mq-space-2);
  color: var(--mq-muted);
  font-size: var(--mq-fs-meta);
}

/* ---- file-drop ---- */
/* File drop: a dashed zone (a perforated edge) that is the file input's label, with drag-over, file
   list and error states. */

.mq-drop {
  display: grid;
  gap: var(--mq-space-3);
}

.mq-drop__zone {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--mq-space-2);
  padding: var(--mq-space-6) var(--mq-space-5);
  border: var(--mq-line) dashed var(--mq-control);
  background: var(--mq-surface);
  color: var(--mq-body);
  text-align: center;
  cursor: pointer;
}

.mq-drop__zone svg {
  color: var(--mq-ink);
}

.mq-drop__title {
  color: var(--mq-ink);
  font-weight: var(--mq-weight-bold);
}

.mq-drop__hint {
  color: var(--mq-muted);
  font-size: var(--mq-fs-meta);
}

.mq-drop__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.mq-drop__zone:hover,
.mq-drop.is-over .mq-drop__zone {
  border-color: var(--mq-ink);
  border-style: solid;
  background: var(--mq-loud-soft);
}

.mq-drop__input:focus-visible + .mq-drop__zone,
.mq-drop__zone:focus-within {
  outline: 3px solid var(--mq-focus);
  outline-offset: 2px;
}

.mq-drop--error .mq-drop__zone {
  border-color: var(--mq-danger);
}

.mq-drop__files {
  display: grid;
  gap: var(--mq-space-2);
  padding: 0;
  list-style: none;
}

.mq-drop__file {
  display: flex;
  align-items: center;
  gap: var(--mq-space-3);
  padding: 10px var(--mq-space-3);
  border: var(--mq-line-hair) solid var(--mq-rule);
  background: var(--mq-surface);
  color: var(--mq-ink);
  font-size: var(--mq-fs-ui);
}

.mq-drop__file span:last-of-type {
  margin-inline-start: auto;
  color: var(--mq-muted);
  font-size: var(--mq-fs-meta);
}

/* ---- newsletter ---- */
/* Newsletter: the dispatch signup. One labelled email field and one button on a single row,
   a line on how often mail comes, and a subscribed state that replaces the form. */

.mq-newsletter {
  display: grid;
  gap: var(--mq-space-3);
  max-width: 36rem;
}

.mq-newsletter__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mq-space-2);
}

.mq-newsletter__input {
  flex: 1 1 14rem;
  width: auto;
  min-width: 0;
}

.mq-newsletter__row .mq-btn {
  flex: 0 0 auto;
}

.mq-newsletter__note {
  color: var(--mq-muted);
  font-size: var(--mq-fs-meta);
}

.mq-newsletter__done {
  display: flex;
  align-items: flex-start;
  gap: var(--mq-space-3);
  padding: var(--mq-space-4);
  border: var(--mq-line) solid var(--mq-ink);
  background: var(--mq-surface);
  color: var(--mq-body);
}

.mq-newsletter__done svg {
  flex-shrink: 0;
  color: var(--mq-ok);
}

.mq-newsletter__done strong {
  display: block;
}

/* Block: the signup as its own panel, a display title beside the form */
.mq-newsletter-block {
  display: grid;
  gap: var(--mq-space-5) var(--mq-space-8);
  padding: clamp(1.5rem, 1rem + 2vw, 3rem);
  border: var(--mq-line-heavy) solid var(--mq-ink);
  background: var(--mq-surface);
}

@media (min-width: 960px) {
  .mq-newsletter-block {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    align-items: center;
  }
}

.mq-newsletter-block__title {
  font-size: var(--mq-fs-headline);
}

.mq-newsletter-block__text {
  margin-block-start: var(--mq-space-3);
  color: var(--mq-body);
}

/* ---- tables ---- */
/* Tables: an ink head rule, tabular numerals, track tags in cells. Under 640px each row becomes a
   labelled stack (cells carry data-label). */

.mq-table-wrap {
  overflow-x: auto;
}

.mq-table {
  width: 100%;
  border-block-end: var(--mq-line) solid var(--mq-ink);
  font-size: var(--mq-fs-ui);
  line-height: var(--mq-lh-ui);
}

.mq-table__caption {
  margin-block-end: var(--mq-space-3);
  color: var(--mq-muted);
  font-size: var(--mq-fs-meta);
  text-align: start;
  caption-side: top;
}

.mq-table th,
.mq-table td {
  padding: 12px var(--mq-space-4) 12px 0;
  border-block-end: var(--mq-line-hair) solid var(--mq-rule);
  text-align: start;
  vertical-align: top;
}

.mq-table thead th {
  padding-block: 10px;
  border-block-end: var(--mq-line-heavy) solid var(--mq-ink);
  color: var(--mq-ink);
  font-size: var(--mq-fs-label);
  font-weight: var(--mq-weight-bold);
  letter-spacing: var(--mq-track-label);
  text-transform: uppercase;
  vertical-align: bottom;
}

.mq-table tbody th {
  color: var(--mq-ink);
  font-weight: var(--mq-weight-semibold);
}

.mq-table .mq-table__num {
  text-align: end;
  font-variant-numeric: tabular-nums;
}

.mq-table tbody tr:hover {
  background: var(--mq-paper-2);
}

.mq-table__row--hl {
  background: var(--mq-loud-soft);
}

@media (max-width: 639px) {
  .mq-table--stack thead {
    display: none;
  }

  .mq-table--stack,
  .mq-table--stack tbody,
  .mq-table--stack tr,
  .mq-table--stack th,
  .mq-table--stack td {
    display: block;
  }

  .mq-table--stack tr {
    padding-block: var(--mq-space-3);
    border-block-end: var(--mq-line) solid var(--mq-ink);
  }

  .mq-table--stack th,
  .mq-table--stack td {
    padding: 4px 0;
    border: 0;
  }

  .mq-table--stack td[data-label] {
    display: flex;
    justify-content: space-between;
    gap: var(--mq-space-4);
    text-align: end;
  }

  .mq-table--stack td[data-label]::before {
    content: attr(data-label);
    color: var(--mq-muted);
    font-weight: var(--mq-weight-semibold);
    text-align: start;
  }
}

/* ---- description-list ---- */
/* Description list: facts as ruled rows, with tracked caps terms and plain values. */

.mq-dl {
  display: grid;
  border-block-start: var(--mq-line) solid var(--mq-ink);
}

.mq-dl__row {
  display: grid;
  grid-template-columns: minmax(8rem, 0.4fr) minmax(0, 1fr);
  gap: var(--mq-space-4);
  padding-block: var(--mq-space-3);
  border-block-end: var(--mq-line-hair) solid var(--mq-rule);
}

.mq-dl__term {
  color: var(--mq-muted);
  font-size: var(--mq-fs-label);
  font-weight: var(--mq-weight-semibold);
  letter-spacing: var(--mq-track-label);
  line-height: 1.7;
  text-transform: uppercase;
}

.mq-dl__value {
  margin: 0;
  color: var(--mq-ink);
}

.mq-dl__value--num {
  font-family: var(--mq-font-display);
  font-size: 1.5rem;
  font-weight: var(--mq-weight-heavy);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

@media (min-width: 720px) {
  .mq-dl--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--mq-space-6);
  }
}

@media (max-width: 419px) {
  .mq-dl__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
}

/* ---- pagination ---- */
/* Pagination: square page numbers, the current page in ink, previous and next in words. */

.mq-pages__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mq-space-2);
  padding: 0;
  list-style: none;
}

.mq-pages__link {
  display: inline-grid;
  place-items: center;
  min-width: 48px;
  height: 48px;
  padding-inline: 10px;
  border: var(--mq-line) solid var(--mq-ink);
  color: var(--mq-ink);
  font-family: var(--mq-font-display);
  font-size: 1.375rem;
  font-weight: var(--mq-weight-heavy);
  line-height: 1;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}

.mq-pages__link:hover {
  background: var(--mq-loud);
  color: var(--mq-loud-ink);
}

.mq-pages__link[aria-current="page"] {
  background: var(--mq-ink);
  color: var(--mq-paper);
}

.mq-pages__link--word {
  display: inline-flex;
  gap: 6px;
  text-transform: uppercase;
}

.mq-pages__link[aria-disabled="true"] {
  border-color: var(--mq-rule);
  color: var(--mq-muted);
  pointer-events: none;
}

.mq-pages__gap {
  padding-inline: 4px;
  color: var(--mq-muted);
}

.mq-pages__status {
  margin-block-start: var(--mq-space-3);
  color: var(--mq-muted);
  font-size: var(--mq-fs-meta);
}

/* ---- chart ---- */
/* Chart: inline SVG bar, line and donut charts that read only the viz tokens. Labels are HTML or SVG
   text in Schibsted; every chart ships a data table or visible values, so color is never alone. */

.mq-chart {
  display: grid;
  gap: var(--mq-space-4);
  padding: var(--mq-space-5);
  border: var(--mq-line) solid var(--mq-ink);
  background: var(--mq-surface);
}

.mq-chart__title {
  color: var(--mq-ink);
  font-family: var(--mq-font-display);
  font-size: 1.75rem;
  font-weight: var(--mq-weight-heavy);
  line-height: 1;
  text-transform: uppercase;
}

.mq-chart__sub {
  display: block;
  margin-block-start: 4px;
  color: var(--mq-muted);
  font-size: var(--mq-fs-meta);
}

.mq-chart svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

.mq-chart__grid {
  stroke: var(--mq-rule);
  stroke-width: 1;
}

.mq-chart__axis {
  stroke: var(--mq-ink);
  stroke-width: 2;
}

.mq-chart__text {
  fill: var(--mq-muted);
  font-family: var(--mq-font-sans);
  font-size: 13px;
  font-weight: var(--mq-weight-semibold);
}

.mq-chart__value {
  fill: var(--mq-ink);
  font-family: var(--mq-font-display);
  font-size: 18px;
  font-weight: var(--mq-weight-heavy);
}

.mq-chart__s1 { fill: var(--mq-viz-1); }
.mq-chart__s2 { fill: var(--mq-viz-2); }
.mq-chart__s3 { fill: var(--mq-viz-3); }
.mq-chart__s4 { fill: var(--mq-viz-4); }
.mq-chart__s5 { fill: var(--mq-viz-5); }
.mq-chart__s6 { fill: var(--mq-viz-6); }

.mq-chart__line {
  fill: none;
  stroke-width: 4;
  stroke-linejoin: round;
  stroke-linecap: square;
}

.mq-chart__line--1 { stroke: var(--mq-viz-1); }
.mq-chart__line--2 { stroke: var(--mq-viz-3); stroke-dasharray: 10 6; }

.mq-chart__dot {
  stroke: var(--mq-surface);
  stroke-width: 3;
}

.mq-chart__ring {
  fill: none;
  stroke-width: 34;
}

.mq-chart__ring--1 { stroke: var(--mq-viz-1); }
.mq-chart__ring--2 { stroke: var(--mq-viz-2); }
.mq-chart__ring--3 { stroke: var(--mq-viz-3); }
.mq-chart__ring--4 { stroke: var(--mq-viz-4); }
.mq-chart__ring--5 { stroke: var(--mq-viz-5); }

.mq-chart__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mq-space-2) var(--mq-space-5);
  padding: 0;
  list-style: none;
  color: var(--mq-body);
  font-size: var(--mq-fs-meta);
  font-weight: var(--mq-weight-semibold);
}

.mq-chart__legend li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.mq-chart__key {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--mq-ink);
}

.mq-chart__key--1 { background: var(--mq-viz-1); }
.mq-chart__key--2 { background: var(--mq-viz-2); }
.mq-chart__key--3 { background: var(--mq-viz-3); }
.mq-chart__key--4 { background: var(--mq-viz-4); }
.mq-chart__key--5 { background: var(--mq-viz-5); }
.mq-chart__key--6 { background: var(--mq-viz-6); }

.mq-chart__key--dash {
  height: 4px;
  border: 0;
  background: repeating-linear-gradient(90deg, var(--mq-viz-3) 0 6px, transparent 6px 9px);
}

.mq-chart__donut {
  display: grid;
  gap: var(--mq-space-5);
  align-items: center;
}

@media (min-width: 600px) {
  .mq-chart__donut {
    grid-template-columns: 12rem minmax(0, 1fr);
  }
}

.mq-chart__center {
  fill: var(--mq-ink);
  font-family: var(--mq-font-display);
  font-size: 34px;
  font-weight: var(--mq-weight-heavy);
}

.mq-chart__table summary {
  color: var(--mq-ink);
  font-size: var(--mq-fs-meta);
  font-weight: var(--mq-weight-semibold);
  cursor: pointer;
}

.mq-charts {
  display: grid;
  gap: var(--mq-space-5);
}

@media (min-width: 960px) {
  .mq-charts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Inside prose the chart keeps its own caption style */
.mq-chart > figcaption {
  margin: 0;
  padding: 0;
  border: 0;
}

/* ---- faq ---- */
/* FAQ: native details between heavy rules. Sentence-case questions, a square plus that turns into a
   cross, plain answers. */

.mq-faq {
  border-block-end: var(--mq-line-heavy) solid var(--mq-ink);
}

.mq-faq__item {
  border-block-start: var(--mq-line-heavy) solid var(--mq-ink);
}

.mq-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mq-space-5);
  min-height: 64px;
  padding-block: var(--mq-space-4);
  color: var(--mq-ink);
  font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem);
  font-weight: var(--mq-weight-bold);
  line-height: var(--mq-lh-snug);
  list-style: none;
  cursor: pointer;
}

.mq-faq__q::-webkit-details-marker {
  display: none;
}

.mq-faq__q:hover {
  text-decoration: underline;
  text-decoration-color: var(--mq-loud);
  text-decoration-thickness: 3px;
  text-underline-offset: 0.22em;
}

.mq-faq__q:focus-visible {
  outline: 3px solid var(--mq-focus);
  outline-offset: 3px;
}

.mq-faq__icon {
  position: relative;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border: var(--mq-line) solid var(--mq-ink);
  transition: background-color var(--mq-dur-fast) var(--mq-ease);
}

.mq-faq__icon::before,
.mq-faq__icon::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  width: 16px;
  height: 3px;
  margin: -1.5px 0 0 -8px;
  background: var(--mq-ink);
}

.mq-faq__icon::before,
.mq-faq__icon::after {
  transition: transform var(--mq-dur) var(--mq-ease-out);
}

.mq-faq__icon::after {
  transform: rotate(90deg);
}

.mq-faq__item[open] .mq-faq__icon {
  background: var(--mq-loud);
}

.mq-faq__item[open] .mq-faq__icon::before {
  transform: rotate(45deg);
}

.mq-faq__item[open] .mq-faq__icon::after {
  transform: rotate(135deg);
}

.mq-faq__item[open] .mq-faq__icon::before,
.mq-faq__item[open] .mq-faq__icon::after {
  background: var(--mq-loud-ink);
}

.mq-faq__a {
  max-width: 46rem;
  padding-block-end: var(--mq-space-5);
  color: var(--mq-body);
}

.mq-faq__a > * + * {
  margin-block-start: var(--mq-space-3);
}

@media (prefers-reduced-motion: reduce) {
  .mq-faq__icon,
  .mq-faq__icon::before,
  .mq-faq__icon::after {
    transition: none;
  }
}

/* ---- alert ---- */
/* Alert: an inline status message. Heavy start rule, an icon, a title and the next step. */

.mq-alert {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 4px var(--mq-space-3);
  padding: var(--mq-space-4) var(--mq-space-5);
  border: var(--mq-line) solid var(--mq-ink);
  border-inline-start-width: 8px;
  background: var(--mq-surface);
  color: var(--mq-body);
}

.mq-alert > svg {
  grid-row: span 2;
  margin-block-start: 2px;
  color: var(--mq-ink);
}

.mq-alert__title {
  color: var(--mq-ink);
  font-weight: var(--mq-weight-bold);
}

.mq-alert__text {
  color: var(--mq-body);
}

.mq-alert__text a {
  font-weight: var(--mq-weight-semibold);
}

.mq-alert--ok {
  border-color: var(--mq-ok);
  background: var(--mq-ok-soft);
}

.mq-alert--ok > svg,
.mq-alert--ok .mq-alert__title {
  color: var(--mq-ok);
}

.mq-alert--warn {
  border-color: var(--mq-warn);
  background: var(--mq-warn-soft);
}

.mq-alert--warn > svg,
.mq-alert--warn .mq-alert__title {
  color: var(--mq-warn);
}

.mq-alert--danger {
  border-color: var(--mq-danger);
  background: var(--mq-danger-soft);
}

.mq-alert--danger > svg,
.mq-alert--danger .mq-alert__title {
  color: var(--mq-danger);
}

.mq-alert--loud {
  border-color: var(--mq-ink);
  background: var(--mq-loud-soft);
}

.mq-alerts {
  display: grid;
  gap: var(--mq-space-3);
}

/* ---- toast ---- */
/* Toast: a short confirmation on a black slip with a loud start edge, in a polite live region at the
   bottom of the screen. */

.mq-toasts {
  position: fixed;
  inset-block-end: var(--mq-space-5);
  inset-inline-end: var(--mq-space-5);
  z-index: 90;
  display: grid;
  gap: var(--mq-space-2);
  width: min(26rem, calc(100vw - 2 * var(--mq-space-4)));
}

.mq-toasts--static {
  position: static;
  width: auto;
  max-width: 26rem;
}

.mq-toast {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--mq-space-3);
  padding: var(--mq-space-3) var(--mq-space-3) var(--mq-space-3) var(--mq-space-4);
  border-inline-start: 8px solid var(--mq-loud);
  background: var(--mq-night);
  color: var(--mq-night-ink);
  box-shadow: var(--mq-shadow-float);
  animation: mq-toast-in var(--mq-dur) var(--mq-ease-out);
}

.mq-toast.is-leaving {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--mq-dur) var(--mq-ease), transform var(--mq-dur) var(--mq-ease);
}

.mq-toast__icon {
  display: inline-grid;
  color: var(--mq-loud);
}

.mq-toast__text {
  margin: 0;
  color: var(--mq-night-ink);
  font-size: var(--mq-fs-ui);
  font-weight: var(--mq-weight-semibold);
  line-height: var(--mq-lh-ui);
}

.mq-toast__action {
  color: var(--mq-night-ink);
  font-size: var(--mq-fs-ui);
  font-weight: var(--mq-weight-bold);
  text-decoration-color: var(--mq-loud);
}

.mq-toast__action:hover {
  background: var(--mq-loud);
  color: var(--mq-loud-ink);
}

.mq-toast__close {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: var(--mq-line) solid transparent;
  background: transparent;
  color: var(--mq-night-ink);
  cursor: pointer;
}

.mq-toast__close:hover {
  border-color: var(--mq-night-rule);
}

.mq-toast__close:focus-visible,
.mq-toast__action:focus-visible {
  outline: 3px solid var(--mq-night-focus);
  outline-offset: 2px;
}

@keyframes mq-toast-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mq-toast {
    animation: none;
  }

  .mq-toast.is-leaving {
    transition: none;
  }
}

@media (pointer: coarse) {
  .mq-toast__close {
    width: 44px;
    height: 44px;
  }
}

/* ---- dialog ---- */
/* Dialog: a native modal dialog on a ruled sheet with the stamp shadow, a display title and the
   action pair. */

.mq-dialog {
  width: min(34rem, calc(100vw - 2 * var(--mq-space-4)));
  max-height: calc(100vh - 2 * var(--mq-space-5));
  padding: 0;
  border: var(--mq-line) solid var(--mq-ink);
  border-radius: var(--mq-radius-card);
  background: var(--mq-surface);
  color: var(--mq-body);
  box-shadow: 10px 10px 0 0 var(--mq-ink);
}

.mq-dialog::backdrop {
  background: var(--mq-overlay);
}

.mq-dialog[open] {
  animation: mq-dialog-in var(--mq-dur) var(--mq-ease-out);
}

.mq-dialog__inner {
  display: grid;
  gap: var(--mq-space-4);
  padding: clamp(1.25rem, 1rem + 1.2vw, 2rem);
}

.mq-dialog__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--mq-space-4);
  padding-block-end: var(--mq-space-3);
  border-block-end: var(--mq-line-heavy) solid var(--mq-ink);
}

.mq-dialog__title {
  font-size: clamp(2rem, 1.7rem + 1.2vw, 2.75rem);
  line-height: 0.9;
}

.mq-dialog__close {
  flex-shrink: 0;
}

.mq-dialog__body > * + * {
  margin-block-start: var(--mq-space-3);
}

.mq-dialog__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--mq-space-3);
  padding-block-start: var(--mq-space-2);
}

/* Static preview: the same sheet in the page flow, for documentation */
.mq-dialog--static {
  position: static;
  display: block;
  margin: 0;
}

@keyframes mq-dialog-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mq-dialog[open] {
    animation: none;
  }
}

/* ---- tooltip ---- */
/* Tooltip: a short definition in an ink slip above a term or an icon button, shown on hover and on
   focus, hidden with Escape. Never the only place essential content lives. */

.mq-tip {
  position: relative;
  display: inline-flex;
}

.mq-tip__term {
  border: 0;
  padding: 0;
  background: none;
  color: var(--mq-ink);
  font: inherit;
  font-weight: var(--mq-weight-semibold);
  text-decoration: underline dotted var(--mq-ink);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.22em;
  cursor: help;
}

.mq-tip__bubble {
  position: absolute;
  inset-block-end: calc(100% + 10px);
  inset-inline-start: 50%;
  z-index: 30;
  width: max-content;
  max-width: 16rem;
  padding: 8px 12px;
  background: var(--mq-ink);
  color: var(--mq-paper);
  font-size: var(--mq-fs-meta);
  font-weight: var(--mq-weight-medium);
  line-height: var(--mq-lh-ui);
  text-align: start;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 4px);
  transition: opacity var(--mq-dur-fast) var(--mq-ease), transform var(--mq-dur-fast) var(--mq-ease), visibility var(--mq-dur-fast);
  pointer-events: none;
}

.mq-tip__bubble:dir(rtl) {
  transform: translate(50%, 4px);
}

.mq-tip__bubble::after {
  content: "";
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: calc(50% - 7px);
  border: 7px solid transparent;
  border-block-start-color: var(--mq-ink);
}

.mq-tip:hover .mq-tip__bubble,
.mq-tip:focus-within .mq-tip__bubble {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.mq-tip:hover .mq-tip__bubble:dir(rtl),
.mq-tip:focus-within .mq-tip__bubble:dir(rtl) {
  transform: translate(50%, 0);
}

.mq-tip.is-dismissed .mq-tip__bubble {
  opacity: 0;
  visibility: hidden;
}

.mq-tip--open .mq-tip__bubble {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

/* Start: the bubble lines up with the trigger's start edge (for triggers near the edge of a column) */
.mq-tip--start .mq-tip__bubble,
.mq-tip--start:hover .mq-tip__bubble,
.mq-tip--start:focus-within .mq-tip__bubble,
.mq-tip--start .mq-tip__bubble:dir(rtl),
.mq-tip--start:hover .mq-tip__bubble:dir(rtl),
.mq-tip--start:focus-within .mq-tip__bubble:dir(rtl) {
  inset-inline-start: 0;
  transform: none;
}

.mq-tip--start .mq-tip__bubble::after {
  inset-inline-start: 14px;
}

@media (prefers-reduced-motion: reduce) {
  .mq-tip__bubble {
    transition: none;
  }
}

/* ---- empty-state ---- */
/* Empty state: what's missing, why, and the one thing to do about it, under an outlined ticket mark. */

.mq-empty {
  display: grid;
  justify-items: center;
  gap: var(--mq-space-3);
  padding: var(--mq-space-7) var(--mq-space-5);
  border: var(--mq-line) dashed var(--mq-control);
  text-align: center;
}

.mq-empty__mark {
  display: inline-grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin-block-end: var(--mq-space-2);
  border: var(--mq-line) solid var(--mq-ink);
  background: var(--mq-loud);
  color: var(--mq-loud-ink);
}

.mq-empty__mark svg {
  width: 36px;
  height: 36px;
}

.mq-empty__title {
  font-size: var(--mq-fs-headline);
}

.mq-empty__text {
  max-width: 28rem;
  color: var(--mq-body);
}

.mq-empty .mq-actions {
  justify-content: center;
  margin-block-start: var(--mq-space-2);
}

/* ---- skeleton ---- */
/* Skeleton: the shape of a session list while it loads. A sweep crosses each block; reduced motion
   keeps the blocks still. */

.mq-skeleton {
  display: grid;
  gap: var(--mq-space-3);
}

.mq-skeleton__card {
  display: grid;
  gap: var(--mq-space-3);
  padding: var(--mq-space-4) var(--mq-space-5);
  border: var(--mq-line) solid var(--mq-rule);
  border-block-start-width: 8px;
  background: var(--mq-surface);
}

.mq-skeleton__line {
  position: relative;
  display: block;
  height: 14px;
  overflow: hidden;
  background: var(--mq-paper-2);
}

.mq-skeleton__line--time {
  width: 5rem;
  height: 24px;
}

.mq-skeleton__line--title {
  width: 80%;
  height: 20px;
}

.mq-skeleton__line--short {
  width: 45%;
}

.mq-skeleton__line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--mq-rule);
  opacity: 0.6;
  transform: translateX(-100%);
  animation: mq-sweep 1400ms var(--mq-ease) infinite;
}

@keyframes mq-sweep {
  to {
    transform: translateX(100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mq-skeleton__line::after {
    animation: none;
    opacity: 0;
  }
}

/* ---- progress ---- */
/* Progress: a labelled bar in the loud color, a segmented checkout stepper, and a seat-hold timer. */

.mq-progress {
  display: grid;
  gap: var(--mq-space-2);
}

.mq-progress__head {
  display: flex;
  justify-content: space-between;
  gap: var(--mq-space-3);
  color: var(--mq-ink);
  font-size: var(--mq-fs-ui);
  font-weight: var(--mq-weight-semibold);
}

.mq-progress__value {
  font-family: var(--mq-font-display);
  font-size: 1.25rem;
  font-weight: var(--mq-weight-heavy);
  font-variant-numeric: tabular-nums;
}

.mq-progress__bar {
  display: block;
  width: 100%;
  height: 16px;
  border: var(--mq-line) solid var(--mq-ink);
  background: var(--mq-surface);
  -webkit-appearance: none;
  appearance: none;
}

.mq-progress__bar::-webkit-progress-bar {
  background: var(--mq-surface);
}

.mq-progress__bar::-webkit-progress-value {
  background: var(--mq-loud);
  box-shadow: inset -2px 0 0 var(--mq-ink);
}

.mq-progress__bar::-moz-progress-bar {
  background: var(--mq-loud);
}

.mq-progress__note {
  color: var(--mq-muted);
  font-size: var(--mq-fs-meta);
}

/* Indeterminate: a block slides along the track (still when motion is reduced) */
.mq-progress__track {
  position: relative;
  height: 16px;
  overflow: hidden;
  border: var(--mq-line) solid var(--mq-ink);
  background: var(--mq-surface);
}

.mq-progress__track::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 30%;
  background: var(--mq-loud);
  animation: mq-indeterminate 1400ms var(--mq-ease) infinite;
}

@keyframes mq-indeterminate {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(340%);
  }
}

/* Steps: Pass, Details, Pay, Done */
.mq-steps {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: mq-step;
}

.mq-step {
  display: grid;
  gap: 6px;
  padding-block-start: var(--mq-space-3);
  border-block-start: 8px solid var(--mq-rule);
  color: var(--mq-muted);
  font-size: var(--mq-fs-meta);
  font-weight: var(--mq-weight-semibold);
  counter-increment: mq-step;
}

.mq-step::before {
  content: counter(mq-step, decimal-leading-zero);
  font-family: var(--mq-font-display);
  font-size: 1.5rem;
  font-weight: var(--mq-weight-heavy);
  line-height: 1;
}

.mq-step--done {
  border-block-start-color: var(--mq-ink);
  color: var(--mq-ink);
}

.mq-step[aria-current="step"] {
  border-block-start-color: var(--mq-loud);
  color: var(--mq-ink);
}

@media (prefers-reduced-motion: reduce) {
  .mq-progress__track::after {
    animation: none;
    width: 100%;
    opacity: 0.4;
  }
}

.mq-progress__track:dir(rtl) {
  transform: scaleX(-1);
}