/* Coincide — shared page shell: reset, body, links, headings, footer.
   No raw colour values here. Everything comes from styles/tokens.css. */

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

/* The `hidden` attribute must always win. The browser's own rule for it is a
   plain `display: none`, which any later `display: flex` or `display: grid`
   quietly beats — so a "hidden" panel stays on screen. This is how a holding
   message ends up sitting underneath the live event. One line, stated once,
   and every screen in the app can trust `hidden` to mean hidden. */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  background: var(--c-surface);
  color: var(--c-ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

:where(a) {
  color: var(--c-accent);
  text-underline-offset: 0.2em;
  text-decoration-thickness: from-font;
}

:where(a):hover { color: var(--c-brand-strong); }

:where(a):focus-visible,
:where(button):focus-visible,
:where(input):focus-visible,
:where(textarea):focus-visible,
:where([tabindex]):focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* A heading that receives focus when a step changes should not draw a ring as
   if it were a control — but it must still be findable, so it keeps the ring
   when reached by keyboard. */
:where(h1, h2, h3)[tabindex="-1"]:focus { outline: none; }
:where(h1, h2, h3)[tabindex="-1"]:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 4px;
}

/* Skip link — first thing in the tab order, invisible until focused. */
.skip {
  position: absolute;
  left: var(--space-4);
  top: var(--space-4);
  z-index: 10;
  padding: var(--space-2) var(--space-4);
  background: var(--c-surface-raised);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius-sm);
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

.page {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding: var(--space-12) var(--space-6);
  max-width: calc(var(--measure) + var(--space-12));
  margin-inline: auto;
  width: 100%;
}

/* The holding page centres itself; pages with content start at the top. */
.page--centred { justify-content: center; }

/* --- Wordmark ---------------------------------------------------------- */

.wordmark {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--c-brand);
}

.wordmark::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--c-line-strong);
  transform: translateY(-0.3em);
}

.wordmark a { color: inherit; text-decoration: none; }
.wordmark a:hover { color: var(--c-brand-strong); }

/* A smaller wordmark for the inner pages, where the content is the point. */
.wordmark--small { font-size: var(--step-1); }

/* --- Copy -------------------------------------------------------------- */

.lede {
  margin: 0;
  max-width: var(--measure);
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1.3;
  color: var(--c-ink);
  text-wrap: balance;
}

.body {
  margin: 0;
  max-width: var(--measure);
  color: var(--c-ink-muted);
  text-wrap: pretty;
}

/* --- Status note ------------------------------------------------------- */

.note {
  margin: 0;
  padding: var(--space-4) var(--space-6);
  max-width: var(--measure);
  background: var(--c-surface-raised);
  border: 1px solid var(--c-line);
  border-left: 3px solid var(--c-accent);
  border-radius: var(--radius-md);
  color: var(--c-ink-muted);
  font-size: var(--step--1);
}

.note strong { color: var(--c-ink); font-weight: 600; }

/* --- Footer ------------------------------------------------------------ */

.foot {
  padding: var(--space-6);
  border-top: 1px solid var(--c-line);
  color: var(--c-ink-faint);
  font-size: var(--step--1);
  text-align: center;
}

.foot p { margin: 0 0 var(--space-2); }
.foot p:last-child { margin-bottom: 0; }

/* The entrance animation is for the short holding page only. A long list of
   experiences must not stagger in — it makes the page feel slow on the phone
   of someone standing in a room waiting to book. */
@media (prefers-reduced-motion: no-preference) {
  .page--centred > * {
    animation: rise 600ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
  }
  .page--centred > *:nth-child(2) { animation-delay: 80ms; }
  .page--centred > *:nth-child(3) { animation-delay: 160ms; }
  .page--centred > *:nth-child(4) { animation-delay: 240ms; }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(0.6rem); }
  to   { opacity: 1; transform: none; }
}