/* Page shell — owned by the orchestrator. Section builders must not edit this.
   Holds cross-page furniture: anchor offset, the back link, and the page header
   used by register.html / tickets.html. */

:root {
  /* app.js reads this to offset in-page jumps. */
  --anchor-offset: 18px;

  /* Height of .page-head (14px pad + 44px button + 14px pad). Section CSS reads
     it to run a background plate up behind the header, so keep it in sync if
     .page-head padding changes — it is a real coupling. */
  --page-head-h: 72px;
}

/* Native fragment navigation honours this even before app.js runs. */
[data-section] { scroll-margin-top: var(--anchor-offset); }

/* ---- the page ground ------------------------------------------------------
   Drawn in CSS, never photographed: the only source plate is a 1410px crop, so
   it is soft on any 2x display. Do not reintroduce court-*.webp/.jpg as a page
   or section background (BRIEF §0).

   Painted on fixed pseudo-elements rather than on body so it never scrolls or
   repeats, and so nothing in it can move (§4: nothing blurred may animate).
   ------------------------------------------------------------------------- */

html { background: var(--navy-900, #0D1637); }

/* body must stay transparent — an opaque body background paints over the
   z-index:-2 ground below and the page goes flat navy. */
body { position: relative; background: transparent; }

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    /* two soft court bands — give the glass an edge to bend */
    linear-gradient(107deg, transparent 34%,
      rgba(150, 186, 240, .050) 34.7%, rgba(150, 186, 240, .050) 35.9%, transparent 36.6%),
    linear-gradient(107deg, transparent 62%,
      rgba(150, 186, 240, .034) 62.6%, rgba(150, 186, 240, .034) 63.6%, transparent 64.2%),
    /* the sun, top right */
    radial-gradient(120% 90% at 88% -8%, rgba(108, 152, 220, .40), transparent 62%),
    /* court blue lifting through the middle */
    radial-gradient(130% 100% at 30% 42%, rgba(45, 72, 133, .55), transparent 70%),
    /* deep shadow, bottom left */
    radial-gradient(100% 80% at 4% 108%, rgba(4, 8, 24, .85), transparent 60%),
    linear-gradient(168deg, #10193C 0%, #0D1637 46%, #080F28 100%);
}

/* Film grain — one 140px SVG tile, so it is resolution-independent and ~1KB. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .055;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 140px 140px;
}

/* ---- sub-page header ------------------------------------------------------
   register.html and tickets.html are standalone pages; this is the quiet header
   that gets you back. */

.page-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px clamp(16px, 4vw, 40px);
  position: relative;
  z-index: 5;
}

.page-back {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 8px 16px 8px 12px;
  border-radius: 999px;
  text-decoration: none;
  font: 500 14px/1 var(--font-ui, system-ui, sans-serif);
  color: var(--paper, #F4F7FB);
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .14);
  transition: background .18s ease, transform .18s ease;
}
.page-back:hover { background: rgba(255, 255, 255, .12); }
.page-back:active { transform: translateY(1px); }
.page-back:focus-visible {
  outline: 2px solid var(--ball, #C6DC63);
  outline-offset: 3px;
}
.page-back svg { width: 15px; height: 15px; flex: none; }

.page-head__mark {
  margin-left: auto;
  font: 600 11px/1 var(--font-display, Didot, serif);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(244, 247, 251, .55);
  white-space: nowrap;
}

@media (max-width: 420px) {
  .page-head__mark { display: none; }
}

/* ---- the closing line -----------------------------------------------------
   Venue, address, contact — nothing else. No rule, no panel, no heading: the DJ
   bill's night has to run out into it, not stop at it. Its first colour is the
   bill's own last one, measured off rendered pixels — rgb(30 41 78) at both
   viewports — and it then deepens by a few values to the page base, which reads
   as the night closing rather than as a band. It also carries the same grain as
   the sections above it: without it the flat band is the seam, even when the
   colour matches. */

/* Sections arrive over the network, and until they do the page is an empty
   <main> with the footer hugging the top — reading as "the site is only a
   footer". Keep the footer out of the story until app.js flips aria-busy off
   at the end of boot. (If the data load itself dies, boot bails with aria-busy
   still true: the error line shows, the footer stays out of the wreckage.) */
#app[aria-busy="true"] ~ .site-foot { display: none; }

.site-foot {
  position: relative;
  z-index: 1;
  background: linear-gradient(180deg, #1E294E 0%, #141D44 100%);
  /* The text sits in the vertical middle of the band: equal padding both
     sides plus centred flex, not a top-hugging block with dead space below. */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 7px;
  min-height: clamp(96px, 12vw, 150px);
  padding: clamp(22px, 3vw, 34px) clamp(16px, 4vw, 40px);
}

/* The quietest thing on the page — clearly subordinate to the contact line. */
.site-foot__credit {
  position: relative;
  margin: 0;
  font: 400 11px/1.6 var(--font-ui, system-ui, sans-serif);
  letter-spacing: .02em;
  color: rgba(244, 247, 251, .34);
  text-align: center;
}
/* The credit link takes the shared .site-foot a underline below — a bespoke
   border-bottom here stacked on top of it and read as a double line. */

.site-foot__line {
  position: relative;          /* over the grain, never under it */
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 4px 9px;
  margin: 0 auto;
  max-width: 1292px;
  font: 500 13px/1.6 var(--font-ui, system-ui, sans-serif);
  letter-spacing: .01em;
  color: rgba(244, 247, 251, .58);
  text-align: center;
}
.site-foot__sep { color: rgba(244, 247, 251, .3); }

/* One line needs 470px of measure. Below that it stacks instead of wrapping, or
   the middots end up dangling at the end of a line with nothing after them. */
@media (max-width: 520px) {
  .site-foot__line { flex-direction: column; align-items: center; gap: 3px; }
  .site-foot__sep { display: none; }
}
.site-foot a {
  color: rgba(244, 247, 251, .58);
  text-decoration: underline;
  text-decoration-color: rgba(244, 247, 251, .26);
  text-underline-offset: 4px;
}
.site-foot a:hover { color: var(--paper, #F4F7FB); }
.site-foot a:focus-visible {
  outline: 2px solid var(--ball, #C6DC63);
  outline-offset: 3px;
  border-radius: 4px;
}

/* The skip link is styled in base.css (drops in from the top, centred).
   Do not restyle it here — a second definition once left the focused link
   half off-screen when the two rulesets combined. */

@media (prefers-reduced-motion: reduce) {
  .page-back { transition: none; }
}

/* Overscroll (rubber-band) area on the LANDING page: a solid tone matching the
   footer, so bouncing past the bottom never reveals a disconnected gradient.
   Only the landing carries .page-landing — the other pages keep the drawn
   ground behind their overscroll. */
html.page-landing { background-color: #141D44; }

/* iOS keeps painting the FIXED page gradient over the rubber-band area, so the
   html colour alone never showed. A SHADOW cast straight down from the footer
   paints the bounce zone in the footer's own end colour — and shadows are ink,
   not layout, so the page cannot scroll into it (an absolute block here made
   the page scroll 120vh past the footer into nothing). */
html.page-landing .site-foot {
  /* For engines that paint ink below the document (Android, desktop). */
  box-shadow: 0 400px 0 400px #141D44;
}

/* iOS pins the FIXED page ground over the rubber-band gap, above anything the
   page itself can paint there (measured on device) — so the gap cannot be
   recoloured, only removed: no overscroll, the page ends at the footer.
   Supported iOS 16.4+ / all modern engines; older ones keep the old bounce. */
html.page-landing,
html.page-landing body {
  overscroll-behavior-y: none;
}