/* KingPoleApps — the big top.
 *
 * Every page is the inside of a circus tent. A kingpole runs down the centre
 * of the viewport and the content hangs either side of it:
 *   .banner   cream canvas banner on a gold rope, tied back to the pole
 *   .poster   vintage show poster for an app ("act")
 *   .marquee  lit sign board; its bulbs blink when hovered
 *   .button   admission ticket
 *   .acrobat  performer holding the pole, waving a pennant
 * On narrow screens the pole moves to the left edge and becomes the spine of
 * a single column.
 *
 * Scene motion is CSS. Scroll-driven parallax is a progressive enhancement;
 * everything (including the bulb chase and the acrobats) stands still for
 * anyone with reduced motion enabled. The cursor follow-spot, click confetti
 * and acrobat spins come from assets/js/bigtop.js; the site works without it.
 */

/* ---------- Fonts (self-hosted, SIL Open Font License; see fonts/OFL-*.txt) ---------- */

@font-face {
  font-family: 'Abril Fatface';
  src: url('../fonts/abril-fatface-latin.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Jost';
  src: url('../fonts/jost-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
}

/* ---------- Tokens ---------- */

:root {
  color-scheme: dark;

  /* The tent (product-family navy). */
  --night: #0b1430;
  --stripe-a: #121d3d;
  --stripe-b: #1a2a57;
  --paper: #fffdf7;
  --muted: #cfd4e3;

  /* Circus print colours. */
  /* Locked brand palette (docs/design/brand/README.md, section 3). */
  --navy: #121d3d; /* brand navy */
  --gold: #ff9f0a; /* brand amber */
  --cream: #fffdf7; /* brand ivory */
  --navy-deep: #0b1430; /* approved dark canvas */

  /* Supporting tones derived from the brand palette. */
  --cream-deep: #f1e9d8;
  --ink: var(--navy);
  --ink-soft: #46506e;
  --gold-light: #ffbd5c;
  --gold-deep: #c46f00; /* small ornaments on ivory */
  --rope-a: #ffb44a;
  --rope-b: #a35c00;

  --brass-dark: #8a4f00;
  --brass: #e88f00;
  --brass-light: #ffc061;

  /* Per-act accent. The KingPoleApps tent uses the logo's gold. */
  --accent: var(--gold);
  --glow: 255 170 70;

  --font-playbill: 'Abril Fatface', 'Didot', 'Bodoni MT', Georgia, serif;
  --font-caps: 'Jost', 'Futura', 'Century Gothic', 'Avenir Next', system-ui, sans-serif;
  --font-body: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;

  --pole-w: clamp(14px, 1.3vw, 20px);
  --pole-x: 50%;
  --gap: clamp(88px, 10vw, 150px);
  --page-w: 1240px;
}

/* Each app is an act with its own colour. Set on <body data-act> and on
   anything that stands for that act elsewhere (posters, rings, tickets). */
[data-act='lookdesignerpro'] {
  --accent: #ff9f0a;
  --accent-2: #ff4a0a;
  --glow: 255 140 70;
  --poster-hi: #c2410c;
  --poster-lo: #3b1106;
}

[data-act='hireline'] {
  --accent: #2dd4bf;
  --accent-2: #008c7a;
  --glow: 120 230 210;
  --poster-hi: #0f766e;
  --poster-lo: #062a2a;
}

/* ---------- Base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--night);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-x: clip;
}

html {
  overflow-x: clip;
}

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

a {
  color: var(--accent);
  text-underline-offset: 0.18em;
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

h1,
h2,
h3 {
  font-family: var(--font-playbill);
  font-weight: 400;
  line-height: 1.1;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h2 {
  font-size: clamp(1.8rem, 3.4vw, 2.7rem);
}

h3 {
  font-size: 1.4rem;
}

p {
  margin: 0 0 1em;
  text-wrap: pretty;
}

p:last-child {
  margin-bottom: 0;
}

em {
  font-style: normal;
  color: var(--accent);
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--cream);
  color: var(--ink);
  font-weight: 700;
}

.skip-link:focus {
  top: 16px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- The big top (fixed background scene) ---------- */

.bigtop {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.bigtop > * {
  position: absolute;
}

/* Canvas: stripes radiate from the apex where the pole meets the roof. */
.bigtop__canvas {
  inset: -12vh -20vw -40vh;
  background:
    radial-gradient(ellipse 55% 40% at 50% 8%, rgb(var(--glow) / 0.26), transparent 70%),
    radial-gradient(ellipse 110% 85% at 50% 18%, transparent 35%, rgb(4 8 22 / 0.88) 100%),
    repeating-conic-gradient(from 0deg at 50% 8%, var(--stripe-a) 0deg 4.5deg, var(--stripe-b) 4.5deg 9deg);
  transform-origin: 50% 8%;
}

/* Two follow-spots in the rigging. They swing and change gel as you scroll. */
.bigtop__beam {
  top: -20vh;
  width: 46vw;
  height: 150vh;
  /* Saturated amber so the hue-rotate gel changes are visible. */
  background: linear-gradient(to bottom, rgb(255 165 50 / 0.3), rgb(255 165 50 / 0.08) 60%, transparent 85%);
  clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%);
  transform-origin: 50% 0;
  mix-blend-mode: screen;
}

.bigtop__beam--l {
  left: -6vw;
  transform: rotate(-24deg);
}

.bigtop__beam--r {
  right: -6vw;
  transform: rotate(24deg);
}

/* While the script tracks a mouse, it sets each beam's `rotate` to aim at
   the cursor; the easing makes the operators lag a little behind. Scrolling
   still changes the gel colour (see the beam-gel keyframes). */
.is-aiming .bigtop__beam {
  transform: none;
  transition: rotate 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Festoon lights strung from the pole to the tent walls. */
.bigtop__lights {
  inset: 0 0 auto;
  width: 100%;
  height: 110vh;
}

.bigtop__lights .wire {
  fill: none;
  stroke: rgb(255 253 247 / 0.22);
  stroke-width: 1.5;
}

.bigtop__lights .bulbs,
.bigtop__lights .chase {
  fill: none;
  stroke-width: 7;
  stroke-linecap: round;
}

/* Every bulb, dimmed. */
.bigtop__lights .bulbs {
  stroke: #ffe3a8;
  stroke-dasharray: 0 34;
  opacity: 0.45;
}

/* A five-channel chaser: every fifth bulb is lit, and stepping the offset
   five times hops the light along one bulb per step. The bulb spacing (34)
   times the channel count (5) gives the 170 dash period. */
.bigtop__lights .chase {
  stroke: var(--accent);
  stroke-dasharray: 0 170;
  filter: drop-shadow(0 0 6px var(--accent));
}

.bigtop__lights .chase--warm {
  stroke: #fff0c8;
  filter: drop-shadow(0 0 6px #ffcf70);
}

/* The kingpole. Bands scroll past slower than the page for depth. */
.bigtop__pole {
  top: 0;
  bottom: 0;
  left: var(--pole-x);
  width: var(--pole-w);
  translate: -50% 0;
  background:
    repeating-linear-gradient(to bottom, transparent 0 220px, rgb(0 0 0 / 0.35) 220px 226px, rgb(255 230 170 / 0.25) 226px 228px, transparent 228px 240px),
    linear-gradient(90deg, var(--brass-dark), var(--brass) 30%, var(--brass-light) 48%, var(--brass) 66%, var(--brass-dark));
  box-shadow: 0 0 40px rgb(var(--glow) / 0.25), 12px 0 30px rgb(0 0 0 / 0.45);
}

/* On an act's page the pole wears that act's ribbon. */
body:not([data-act='kingpole']) .bigtop__pole {
  background:
    repeating-linear-gradient(160deg, transparent 0 26px, var(--accent-2) 26px 38px, var(--accent) 38px 42px, transparent 42px 70px),
    linear-gradient(90deg, var(--brass-dark), var(--brass) 30%, var(--brass-light) 48%, var(--brass) 66%, var(--brass-dark));
}

/* Sawdust ring rising into view at the end of the page. */
.bigtop__ring {
  left: -30vw;
  right: -30vw;
  bottom: -62vh;
  height: 90vh;
  border-radius: 50%;
  background:
    radial-gradient(ellipse 60% 40% at 50% 18%, rgb(255 220 160 / 0.22), transparent 70%),
    radial-gradient(ellipse at 50% 30%, #6e4d2b 0%, #4a321b 45%, #24180d 100%);
  box-shadow: inset 0 10px 0 -2px var(--cream), inset 0 16px 0 -2px var(--gold), 0 -30px 80px rgb(var(--glow) / 0.15);
}

/* ---------- Motion (progressive enhancement) ---------- */

@media (prefers-reduced-motion: no-preference) {
  .bigtop__lights .chase {
    animation: chase 1.4s steps(5) infinite;
  }

  /* Marquee bulbs stay lit, and only start blinking when you hover the sign. */
  .marquee:hover::before {
    animation: bulbs-blink 0.8s steps(1) infinite;
  }

  .marquee:hover::after {
    animation: bulbs-blink 0.8s steps(1) infinite reverse;
  }

  .acrobat__figure {
    animation: sway 3.6s ease-in-out infinite alternate;
  }

  .acrobat__flag {
    animation: flutter 1.4s ease-in-out infinite alternate;
  }

  @supports (animation-timeline: scroll()) {
    .bigtop__canvas,
    .bigtop__lights,
    .bigtop__beam,
    .bigtop__pole,
    .bigtop__ring {
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: scroll(root block);
    }

    .bigtop__canvas {
      animation-name: canvas-drift;
    }

    .bigtop__lights {
      animation-name: lights-drift;
    }

    .bigtop__beam--l {
      animation-name: beam-swing-l;
    }

    .bigtop__beam--r {
      animation-name: beam-swing-r;
    }

    .is-aiming .bigtop__beam--l {
      animation-name: beam-gel-l;
    }

    .is-aiming .bigtop__beam--r {
      animation-name: beam-gel-r;
    }

    .bigtop__pole {
      animation-name: pole-bands;
    }

    body:not([data-act='kingpole']) .bigtop__pole {
      animation-name: pole-ribbon;
    }

    .bigtop__ring {
      animation-name: ring-rise;
    }
  }
}

@keyframes chase {
  to {
    stroke-dashoffset: -170;
  }
}

@keyframes bulbs-blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.25;
  }
}

@keyframes sway {
  from {
    rotate: -4deg;
  }
  to {
    rotate: 5deg;
  }
}

@keyframes flutter {
  from {
    transform: skewY(-2.5deg) scaleX(1);
  }
  to {
    transform: skewY(2deg) scaleX(0.96);
  }
}

@keyframes canvas-drift {
  from {
    transform: translateY(0) scale(1);
  }
  to {
    transform: translateY(-18vh) scale(1.08);
  }
}

@keyframes lights-drift {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-38vh);
  }
}

/* Without a mouse (touch, or no script) the follow-spots swing back and
   forth as you scroll. Either way they cycle through gels as you scroll:
   amber, rose, violet, teal and back. */
@keyframes beam-gel-l {
  0% {
    filter: hue-rotate(0deg);
  }
  25% {
    filter: hue-rotate(-45deg);
  }
  50% {
    filter: hue-rotate(-110deg);
  }
  75% {
    filter: hue-rotate(-200deg);
  }
  100% {
    filter: hue-rotate(-360deg);
  }
}

@keyframes beam-gel-r {
  0% {
    filter: hue-rotate(-200deg);
  }
  25% {
    filter: hue-rotate(-110deg);
  }
  50% {
    filter: hue-rotate(-45deg);
  }
  75% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(-160deg);
  }
}

@keyframes beam-swing-l {
  0% {
    transform: rotate(-30deg);
    filter: hue-rotate(0deg);
  }
  25% {
    transform: rotate(-15deg);
    filter: hue-rotate(-45deg);
  }
  50% {
    transform: rotate(-27deg);
    filter: hue-rotate(-110deg);
  }
  75% {
    transform: rotate(-12deg);
    filter: hue-rotate(-200deg);
  }
  100% {
    transform: rotate(-22deg);
    filter: hue-rotate(-360deg);
  }
}

@keyframes beam-swing-r {
  0% {
    transform: rotate(30deg);
    filter: hue-rotate(-200deg);
  }
  25% {
    transform: rotate(14deg);
    filter: hue-rotate(-110deg);
  }
  50% {
    transform: rotate(28deg);
    filter: hue-rotate(-45deg);
  }
  75% {
    transform: rotate(13deg);
    filter: hue-rotate(0deg);
  }
  100% {
    transform: rotate(22deg);
    filter: hue-rotate(-160deg);
  }
}

@keyframes pole-bands {
  from {
    background-position: 0 0, 0 0;
  }
  to {
    background-position: 0 -720px, 0 0;
  }
}

@keyframes pole-ribbon {
  from {
    background-position: 0 0, 0 0;
  }
  to {
    background-position: 0 -840px, 0 0;
  }
}

@keyframes ring-rise {
  from {
    transform: translateY(40vh);
  }
  to {
    transform: translateY(0);
  }
}

/* ---------- Header & footer ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--navy-deep);
}

/* Scalloped valance along the bottom edge of the header. */
.site-header::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 16px;
  background:
    radial-gradient(circle at 50% 0, var(--cream) 0 13px, transparent 14px) 0 0 / 34px 16px repeat-x,
    radial-gradient(circle at 50% 0, var(--gold) 0 15px, transparent 16px) 0 0 / 34px 16px repeat-x;
}

.site-header__inner {
  width: min(var(--page-w), 100% - 32px);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  flex-wrap: wrap;
  padding: 10px 0;
}

/* Approved logo artwork (src/assets/brand, copied unchanged from
   docs/design/brand). Rules from the brand guide:
   - always on the solid dark canvas, never over the striped tent;
   - scale proportionally, never below the minimum visible width;
   - keep about one KINGPOLE cap-height of clear space around the artwork.
   The PNGs carry transparent padding, so displayed widths are larger than
   the visible artwork: the title shows ~89% of its width, the compact
   emblem ~85% and the large emblem ~99%. */
.brand {
  display: inline-block;
  line-height: 0;
}

/* Text title in the header: 200px canvas = ~177px visible (minimum 160px).
   Negative block margins trim the PNG's empty top and bottom canvas; the
   header padding restores the clear space. */
.brand--title img {
  width: 200px;
  height: auto;
  margin-block: -14px -10px;
}

/* Compact emblem in the footer: 280px canvas = ~237px visible (minimum 220px).
   A block wrapper stops the image shrinking with an inline parent. */
.brand--compact {
  display: block;
  width: fit-content;
}

.brand--compact img {
  max-width: none;
  width: 280px;
  height: auto;
  margin-left: -20px; /* align the visible artwork, not the canvas, with the text */
}

/* A plain dark-canvas plate for a feature emblem placed inside the tent. */
.brand-plate {
  margin: 0;
  padding: clamp(16px, 3vw, 32px);
  background: var(--navy-deep);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgb(0 0 0 / 0.45);
}

.brand-plate img {
  display: block;
  width: 420px; /* large emblem: ~414px visible (minimum 360px) */
  max-width: 100%;
  height: auto;
  margin-inline: auto;
}

/* On phones the page swaps in the compact emblem (see <picture> on About):
   280px canvas = ~237px visible (minimum 220px). */
@media (max-width: 639px) {
  .brand-plate img {
    width: 280px;
  }
}

.sign.brand-plate {
  width: fit-content;
  max-width: 100%;
}

/* Tracked capitals throughout: labels, nav, tickets, stamps, pennants. */
.label,
.site-nav a,
.button,
.stamp,
.acrobat__flag,
.poster__kicker,
.site-footer h2 {
  font-weight: 600;
  letter-spacing: 0.16em;
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav a {
  display: inline-block;
  padding: 8px 12px;
  color: var(--cream);
  text-decoration: none;
  font-family: var(--font-caps);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.site-nav a:hover,
.site-nav a[aria-current='page'] {
  color: var(--gold);
  text-decoration: underline 2px var(--gold);
  text-underline-offset: 7px;
}

.site-footer {
  margin-top: clamp(64px, 10vw, 140px);
  padding: 40px 0 56px;
  background: var(--navy-deep);
  border-top: 1px solid rgb(255 159 10 / 0.25);
  color: var(--muted);
  font-size: 0.95rem;
}

.site-footer__inner {
  width: min(var(--page-w), 100% - 32px);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr var(--gap) 1fr;
  gap: 24px 0;
}

.site-footer__inner > :last-child {
  grid-column: 3;
}

.site-footer h2 {
  font-family: var(--font-caps);
  font-size: 0.9rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
}

.site-footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}

.site-footer ul + h2 {
  margin-top: 24px;
}

.site-footer a {
  color: var(--cream);
}

/* ---------- Stage: two sides of the pole ---------- */

.stage {
  width: min(var(--page-w), 100% - 32px);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr var(--gap) 1fr;
  align-items: start;
  row-gap: clamp(24px, 3vw, 36px);
}

.stage + .stage {
  margin-top: clamp(56px, 8vw, 110px);
}

.side-l {
  grid-column: 1;
}

.side-r {
  grid-column: 3;
}

.across {
  grid-column: 1 / -1;
}

/* Hung on the pole itself: centred, the pole passes behind it. */
.sign {
  grid-column: 1 / -1;
  justify-self: center;
  width: min(780px, 100%);
  text-align: center;
}

.stack {
  display: grid;
  gap: 32px;
}

/* Wood-type signage. */
.label {
  display: inline-block;
  margin: 0 0 14px;
  font-family: var(--font-caps);
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}

.side-l > .label {
  justify-self: end;
}

.hero > .label.across {
  justify-self: center;
}

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

/* ---------- Hero ---------- */

.hero {
  padding-top: clamp(48px, 9vw, 120px);
}

.hero__title {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr var(--gap) 1fr;
  align-items: last baseline;
  margin: 0 0 clamp(8px, 2vw, 20px);
  font-size: clamp(2.7rem, 6.6vw, 6rem);
  line-height: 1;
  color: var(--cream);
}

.hero__title > span:first-child {
  grid-column: 1;
  text-align: right;
}

.hero__title > span:last-child {
  grid-column: 3;
  color: var(--gold);
}

.hero__title--single {
  display: block;
  text-align: center;
  font-size: clamp(2.4rem, 5vw, 4.4rem);
}

.lede {
  font-size: clamp(1.12rem, 1.6vw, 1.32rem);
}

/* Hero copy sits straight on the tent, no box. */
.hero-copy {
  color: var(--cream);
  text-shadow: 0 1px 12px rgb(4 8 22 / 0.9);
}

.hero-copy .stamp {
  color: var(--gold);
  text-shadow: none;
}

/* Section headings painted straight on the tent. */
.heading-on-tent h2 {
  color: var(--cream);
}

.heading-on-tent p:not(.label) {
  color: var(--muted);
  text-shadow: 0 1px 12px rgb(4 8 22 / 0.9);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 26px;
}

.note {
  margin-top: 14px;
  font-size: 0.92rem;
}

/* ---------- Banner: cream canvas on a gold rope, tied to the pole ---------- */

.banner {
  position: relative;
  margin-bottom: 18px; /* room for the hem */
  padding: 36px clamp(22px, 3vw, 38px) 30px;
  color: var(--ink);
  background: linear-gradient(180deg, var(--cream), var(--cream) 55%, var(--cream-deep));
  border-bottom: 4px solid var(--navy);
  box-shadow: 0 20px 44px rgb(0 0 0 / 0.45);
}

/* The rope it hangs from. On either side of the pole it runs back to the pole. */
.banner::before {
  content: '';
  position: absolute;
  top: -5px;
  left: -10px;
  right: -10px;
  height: 10px;
  border-radius: 5px;
  background: repeating-linear-gradient(-55deg, var(--rope-a) 0 5px, var(--rope-b) 5px 8px);
  box-shadow: 0 3px 6px rgb(0 0 0 / 0.4);
}

.side-l.banner::before,
.side-l > .banner::before {
  right: calc(var(--gap) / -2);
}

.side-r.banner::before,
.side-r > .banner::before {
  left: calc(var(--gap) / -2);
}

/* Scalloped hem. */
.banner::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 16px;
  background: radial-gradient(circle at 50% 0, var(--navy) 0 15px, transparent 16px) 0 0 / 32px 16px repeat-x;
}

.banner .label {
  color: var(--gold-deep);
}

.banner h2,
.banner h3 {
  color: var(--ink);
}

.banner a:not(.button) {
  color: var(--navy);
}

.banner .note,
.banner .muted {
  color: var(--ink-soft);
}

/* ---------- Poster: vintage show poster for an act ---------- */

.poster {
  position: relative;
  padding: 34px clamp(22px, 3vw, 34px) 30px;
  text-align: center;
  color: var(--cream);
  background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--poster-hi, var(--navy)) 60%, var(--navy)), var(--navy-deep) 78%);
  border: 2px solid var(--gold);
  outline: 1px solid rgb(255 159 10 / 0.6);
  outline-offset: -9px;
  box-shadow: 0 22px 50px rgb(0 0 0 / 0.5);
}

.poster img {
  width: 76px;
  height: 76px;
  margin: 0 auto 12px;
  border-radius: 18px;
  box-shadow: 0 0 0 2px var(--gold), 0 10px 30px rgb(0 0 0 / 0.45);
}

.poster__kicker {
  margin: 0;
  font-family: var(--font-caps);
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}

.poster h3 {
  margin: 4px 0 0;
  font-family: var(--font-playbill);
  font-size: clamp(1.9rem, 3vw, 2.5rem);
  line-height: 1.05;
}

.poster h3 a {
  color: var(--cream);
  text-decoration: none;
}

.poster__act {
  margin: 2px 0 14px;
  font-family: var(--font-playbill);
  font-size: 1.15rem;
  color: var(--gold);
}

.poster__act::before,
.poster__act::after {
  content: ' — ';
  color: rgb(255 253 247 / 0.5);
}

.poster .actions {
  justify-content: center;
  margin-top: 18px;
}

/* "Coming soon" ribbon on an act's poster until it is on the Shopify App Store. */
.poster__soon {
  position: absolute;
  top: 18px;
  right: -10px;
  margin: 0;
  padding: 6px 14px;
  font-family: var(--font-caps);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--navy-deep);
  background: var(--gold);
  box-shadow: 0 6px 16px rgb(0 0 0 / 0.4);
  transform: rotate(4deg);
}

/* ---------- Marquee: lit sign board with blinking bulbs ---------- */

.marquee {
  position: relative;
  padding: clamp(38px, 4vw, 52px) clamp(30px, 4vw, 56px);
  color: var(--cream);
  background: radial-gradient(ellipse at 50% 25%, #1b2a5a, var(--navy-deep) 80%);
  border-radius: 14px;
  box-shadow:
    0 0 0 6px #a35c00,
    0 0 0 9px var(--navy-deep),
    0 24px 60px rgb(0 0 0 / 0.55),
    0 0 70px rgb(var(--glow) / 0.22);
}

/* Two interleaved sets of bulbs around the frame; they blink in turn. */
.marquee::before,
.marquee::after {
  content: '';
  position: absolute;
  inset: 4px;
  padding: 22px;
  border-radius: 10px;
  pointer-events: none;
  background-repeat: round;
  background-size: 44px 44px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

.marquee::before {
  background-image:
    radial-gradient(circle at 25% 25%, #fff6d6 0 3.5px, rgb(255 200 90 / 0.55) 5px, transparent 7px),
    radial-gradient(circle at 75% 75%, #fff6d6 0 3.5px, rgb(255 200 90 / 0.55) 5px, transparent 7px);
}

.marquee::after {
  background-image:
    radial-gradient(circle at 75% 25%, #fff6d6 0 3.5px, rgb(255 200 90 / 0.55) 5px, transparent 7px),
    radial-gradient(circle at 25% 75%, #fff6d6 0 3.5px, rgb(255 200 90 / 0.55) 5px, transparent 7px);
}

.marquee > * {
  position: relative;
}

.marquee h2 {
  font-family: var(--font-playbill);
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--cream);
  text-shadow: 0 0 18px rgb(255 159 10 / 0.5);
}

.marquee .label {
  color: var(--gold);
}

.marquee a:not(.button) {
  color: var(--gold);
}

/* ---------- Ticket buttons ---------- */

.button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 28px;
  color: var(--ink);
  background:
    radial-gradient(circle at 50% 50%, rgb(255 255 255 / 0.25), transparent 70%),
    var(--accent);
  font-family: var(--font-caps);
  font-size: 0.92rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1.2;
  /* Notched ticket edges. */
  -webkit-mask:
    radial-gradient(circle 9px at 0 50%, #0000 97%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle 9px at 100% 50%, #0000 97%, #000) right / 51% 100% no-repeat;
  mask:
    radial-gradient(circle 9px at 0 50%, #0000 97%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle 9px at 100% 50%, #0000 97%, #000) right / 51% 100% no-repeat;
  transition: transform 0.15s ease;
}

.button:hover {
  transform: translateY(-2px) rotate(-1.5deg);
}

/* Pressing a ticket squashes it, like it's being torn at the gate. */
.button:active {
  transform: translateY(1px) scale(0.95, 0.9) rotate(1deg);
  transition-duration: 0.05s;
}

.button--cream {
  background: var(--cream);
}

.banner .button--cream {
  background: var(--ink);
  color: var(--cream);
}

/* Rubber-stamp badges. */
.stamps {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.stamp {
  display: inline-block;
  padding: 5px 10px 4px;
  border: 2px dashed currentColor;
  border-radius: 6px;
  color: var(--navy);
  font-family: var(--font-caps);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  rotate: -2deg;
}

.stamp:nth-child(even) {
  rotate: 1.5deg;
}

/* ---------- Lists ---------- */

.ticks {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 18px;
}

.ticks li {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 2px 10px;
}

.ticks li::before {
  content: '★';
  grid-row: span 2;
  color: var(--gold-deep);
  font-size: 1.05rem;
  line-height: 1.5;
}

.ticks strong {
  font-family: var(--font-playbill);
  font-weight: 400;
  font-size: 1.22rem;
  line-height: 1.25;
}

.ticks span {
  color: var(--ink-soft);
}

.marquee .ticks li::before {
  color: var(--gold);
}

.marquee .ticks span {
  color: var(--muted);
}

.marquee .ticks strong a {
  color: var(--cream);
}

.ticks--compact {
  gap: 10px;
}

.steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
  display: grid;
  gap: 22px;
}

.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 2px 12px;
}

.steps li::before {
  content: counter(step, upper-roman) '.';
  grid-row: span 2;
  font-family: var(--font-playbill);
  font-size: 1.6rem;
  color: var(--navy);
  line-height: 1.1;
}

.steps strong {
  font-family: var(--font-playbill);
  font-weight: 400;
  font-size: 1.25rem;
}

.steps span {
  color: var(--ink-soft);
}

/* ---------- Acrobats on the pole ---------- */

/* A "human flag": both hands on the pole, body held straight out, and a
   pennant streaming from the toes. The figure's viewBox is 170 x 90; the
   hands are at x=13 and the toes at x=166, y=44.5. */
.acrobat {
  --fig-w: 212px;
  --grip: calc(var(--fig-w) * 13 / 170);
  --toe: calc(var(--fig-w) * 166 / 170);
  --pole-at: 50%;
  grid-column: 1 / -1;
  position: relative;
  height: calc(var(--fig-w) * 90 / 170 + 8px);
  margin-bottom: clamp(8px, 2vw, 24px);
}

.acrobat__figure {
  position: absolute;
  top: 0;
  left: calc(var(--pole-at) - var(--grip));
  width: var(--fig-w);
  height: auto;
  overflow: visible;
  transform-origin: var(--grip) 50%;
  filter: drop-shadow(0 6px 8px rgb(0 0 0 / 0.45));
}

/* Left-hand acrobats use a pre-mirrored drawing (partials/acrobat-figure-l),
   so the hands sit at the right of the box. */
.acrobat--l .acrobat__figure {
  left: calc(var(--pole-at) + var(--grip) - var(--fig-w));
  transform-origin: calc(100% - var(--grip)) 50%;
}

.acrobat__figure .skin {
  fill: var(--cream);
}

.acrobat__figure .hair {
  fill: var(--gold);
}

.acrobat__figure .tights {
  fill: var(--cream);
}

.acrobat__figure .suit {
  fill: var(--gold);
}

.acrobat__figure .trim {
  fill: none;
  stroke: var(--navy);
  stroke-width: 2.5;
  stroke-linecap: round;
}

.acrobat__figure .shoe {
  fill: var(--gold);
}

/* The pennant, tied to the toes. */
.acrobat__flag {
  position: absolute;
  top: calc(var(--fig-w) * 44.5 / 170 - 19px);
  left: calc(var(--pole-at) - var(--grip) + var(--toe));
  margin: 0;
  padding: 9px 34px 9px 16px;
  white-space: nowrap;
  color: var(--navy);
  background: var(--gold);
  font-family: var(--font-caps);
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 50%, 100% 100%, 0 100%);
  transform-origin: left center;
  box-shadow: inset 0 -2px 0 rgb(18 29 61 / 0.3);
}

.acrobat--l .acrobat__flag {
  left: auto;
  right: calc(100% - var(--pole-at) - var(--grip) + var(--toe));
  padding: 9px 16px 9px 34px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 16px 50%);
  transform-origin: right center;
}

/* ---------- Act visuals ---------- */

/* Gilt frame and a pool of follow-spot light for the LookDesigner screenshot. */
.shot {
  position: relative;
  isolation: isolate;
  margin: 0;
  border: 10px solid;
  border-image: linear-gradient(135deg, #f6d27a, #9a6a1c 30%, #f6d27a 55%, #7a4f12 80%, #f6d27a) 1;
  background: var(--navy-deep);
  box-shadow: 0 30px 80px rgb(0 0 0 / 0.55);
}

.shot::before {
  content: '';
  position: absolute;
  inset: -30% -18%;
  z-index: -1;
  background: radial-gradient(ellipse at 50% 35%, rgb(var(--glow) / 0.4), transparent 62%);
}

.shot figcaption {
  padding: 10px 14px;
  font-size: 0.88rem;
  color: var(--muted);
  background: var(--navy-deep);
}

/* HireLine's high wire: one line from first booking to final return. */
.highwire {
  margin: 0;
}

.highwire svg {
  width: 100%;
  overflow: visible;
}

.highwire .rig {
  fill: none;
  stroke: var(--brass);
  stroke-width: 7;
  stroke-linecap: round;
}

.highwire .line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3;
  filter: drop-shadow(0 0 6px var(--accent));
}

.highwire .stop {
  fill: var(--night);
  stroke: var(--accent);
  stroke-width: 4;
}

.highwire .performer .limb {
  fill: none;
  stroke: var(--cream);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.highwire .performer .suit {
  fill: none;
  stroke: var(--accent-2);
  stroke-width: 9;
  stroke-linecap: round;
}

.highwire .performer .head {
  fill: var(--cream);
}

.highwire .performer .pole {
  stroke: var(--brass-light);
  stroke-width: 3;
  stroke-linecap: round;
}

.highwire text {
  fill: var(--cream);
  font-family: var(--font-caps);
  font-size: 19px;
  letter-spacing: 1px;
  text-anchor: middle;
}

.highwire figcaption {
  margin-top: 12px;
  font-size: 0.95rem;
  color: var(--muted);
  text-align: center;
}

/* ---------- FAQ ---------- */

.faq details {
  border-bottom: 2px dotted rgb(18 29 61 / 0.25);
}

.faq summary {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  cursor: pointer;
  font-family: var(--font-playbill);
  font-size: 1.2rem;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: '★';
  color: var(--gold-deep);
  transition: rotate 0.25s ease;
}

.faq details[open] summary::after {
  rotate: 144deg;
}

.faq details p {
  padding-bottom: 16px;
  color: var(--ink-soft);
}

.side-l.heading-on-tent {
  text-align: right;
}

/* ---------- Prose pages (about, privacy, contact) ---------- */

.prose h2 {
  margin-top: 1.4em;
  font-size: 1.6rem;
}

.prose h2:first-child {
  margin-top: 0;
}

.prose ul {
  padding-left: 1.2em;
}

.prose li + li {
  margin-top: 6px;
}

.prose li::marker {
  color: var(--gold-deep);
  content: '★  ';
}

.big-link {
  font-family: var(--font-playbill);
  font-size: clamp(1.4rem, 3vw, 2rem);
  word-break: break-word;
}

/* ---------- "At a glance" facts on act pages ---------- */

.facts__title {
  margin: 1.6em 0 0.6em;
  font-family: var(--font-caps);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}

.facts {
  display: grid;
  gap: 10px;
  margin: 0;
  text-align: left;
  text-shadow: 0 1px 12px rgb(4 8 22 / 0.9);
}

.facts > div {
  display: grid;
  grid-template-columns: 8.5em 1fr;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgb(255 253 247 / 0.12);
}

.facts dt {
  font-family: var(--font-caps);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 2px;
}

.facts dd {
  margin: 0;
  color: var(--cream);
}

.side-l.heading-on-tent .facts__title {
  text-align: right;
}

@media (max-width: 860px) {
  .side-l.heading-on-tent .facts__title {
    text-align: left;
  }
}

/* ---------- Legal pages: plain-language summary, then the full text ---------- */

.sign.summary,
.sign.legal-doc {
  text-align: left;
}

.sign.legal-doc {
  width: min(860px, 100%);
}

.summary h2 {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
}

.legal-doc {
  font-size: 1rem;
}

.legal-doc h2 {
  margin-top: 1.8em;
  font-size: 1.3rem;
}

.legal-doc h2:first-of-type {
  margin-top: 0.4em;
}

.legal-doc h3 {
  margin: 1.3em 0 0.4em;
  font-family: var(--font-caps);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.legal-doc table {
  width: 100%;
  margin: 0.8em 0 1.2em;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.legal-doc th,
.legal-doc td {
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgb(18 29 61 / 0.15);
}

.legal-doc th {
  font-family: var(--font-caps);
  font-weight: 600;
  letter-spacing: 0.04em;
}

.legal-doc code {
  font-size: 0.9em;
  overflow-wrap: anywhere;
}

/* Wide tables scroll inside their own box on phones. */
.table-wrap {
  overflow-x: auto;
}

/* ---------- Cookie notice (shown by assets/js/notice.js) ---------- */

.cookie-notice {
  position: fixed;
  z-index: 40;
  left: 16px;
  right: 16px;
  bottom: 16px;
  display: grid;
  gap: 10px;
  max-width: 560px;
  margin-inline: auto;
  padding: 18px 22px;
  color: var(--ink);
  background: var(--cream);
  border-top: 4px solid var(--gold);
  border-radius: 12px;
  box-shadow: 0 20px 50px rgb(0 0 0 / 0.5);
}

.cookie-notice[hidden] {
  display: none;
}

.cookie-notice p {
  margin: 0;
}

.cookie-notice__title {
  font-family: var(--font-caps);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.cookie-notice__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  margin-top: 4px;
}

.cookie-notice a {
  color: var(--navy);
}

button.button {
  border: 0;
}

/* ---------- Play: cursor and click (see assets/js/bigtop.js) ---------- */

/* A white circus glove points at anything you can click. */
a,
button,
summary,
.acrobat__figure {
  cursor: url('../img/cursor-glove.svg') 10 1, pointer;
}

/* A follow-spot that tracks the mouse across the tent (added by script). */
.followspot {
  position: fixed;
  left: 0;
  top: 0;
  z-index: -1;
  width: 440px;
  height: 440px;
  margin: -220px 0 0 -220px;
  border-radius: 50%;
  pointer-events: none;
  /* Where the two aimed beams meet. */
  background: radial-gradient(circle, rgb(255 236 200 / 0.3), rgb(255 236 200 / 0.12) 35%, transparent 68%);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 0.5s ease;
  will-change: transform;
}

.followspot.is-on {
  opacity: 1;
}

/* Confetti where you click (added by script). */
.burst {
  position: fixed;
  z-index: 50;
  width: 0;
  height: 0;
  pointer-events: none;
}

.burst span {
  position: absolute;
  left: -4px;
  top: -3px;
  width: 8px;
  height: 6px;
  border-radius: 1px;
  background: var(--c);
  animation: confetti 0.85s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}

.burst .star {
  left: -7px;
  top: -9px;
  width: auto;
  height: auto;
  background: none;
  color: var(--c);
  font-size: 15px;
  line-height: 1;
}

@keyframes confetti {
  from {
    transform: translate(0, 0) rotate(0) scale(1);
    opacity: 1;
  }
  to {
    transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(0.6);
    opacity: 0;
  }
}

.acrobat__figure {
  pointer-events: auto;
}

@media (prefers-reduced-motion: no-preference) {
  /* Acrobats get excited when you hover them, and spin round the pole when clicked. */
  .acrobat__figure:hover {
    animation-duration: 0.7s;
  }

  .acrobat .acrobat__figure.is-spinning {
    animation: acro-spin 0.9s cubic-bezier(0.5, 0, 0.3, 1);
  }
}

@keyframes acro-spin {
  from {
    rotate: 0deg;
  }
  to {
    rotate: 360deg;
  }
}

@media (prefers-reduced-motion: reduce) {
  .followspot,
  .burst {
    display: none;
  }
}

/* ---------- Narrow screens: the pole becomes the spine ---------- */

@media (max-width: 860px) {
  :root {
    --pole-x: 22px;
    --pole-w: 10px;
    --gap: 0px;
  }

  /* The two-row nav is too tall to keep pinned on a phone. */
  .site-header {
    position: relative;
  }

  .site-nav a {
    padding: 6px 8px;
    font-size: 0.78rem;
  }

  .stage,
  .site-footer__inner {
    grid-template-columns: 1fr;
    width: auto;
    margin-inline: 16px;
    padding-left: 36px;
  }

  .side-l,
  .side-r,
  .site-footer__inner > :last-child {
    grid-column: 1;
  }

  .side-l > .label,
  .hero > .label.across {
    justify-self: start;
  }

  .side-l.heading-on-tent {
    text-align: left;
  }

  /* Every banner's rope runs left, back to the spine. */
  .banner::before,
  .side-l.banner::before,
  .side-l > .banner::before,
  .side-r.banner::before,
  .side-r > .banner::before {
    left: -34px;
    right: -6px;
  }

  .hero__title {
    display: block;
  }

  .hero__title > span {
    display: block;
    text-align: left !important;
  }

  .sign {
    text-align: left;
  }

  .sign .actions {
    justify-content: flex-start;
  }

  /* Acrobats all hold the spine on the left. The pole is 30px left of the
     content box (22px from the viewport edge; content starts at 52px). */
  .acrobat {
    --fig-w: 150px;
    --pole-at: -30px;
  }

  /* Turn left-hand acrobats round to face into the page. */
  .acrobat--l .acrobat__figure {
    left: calc(var(--pole-at) - var(--grip));
    transform: scaleX(-1);
    transform-origin: 50% 50%;
    animation: none;
  }

  .acrobat--l .acrobat__flag {
    left: calc(var(--pole-at) - var(--grip) + var(--toe));
    right: auto;
    padding: 9px 34px 9px 16px;
    clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 50%, 100% 100%, 0 100%);
    transform-origin: left center;
  }

  .acrobat__flag {
    font-size: 0.8rem;
  }

  .bigtop__beam {
    width: 90vw;
  }

  .bigtop__lights {
    height: 80vh;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .button,
  .faq summary::after {
    transition: none;
  }
}