/* Layout: a seaside postcard. A lilac header with bunting, one centred message, the sea along the bottom.
   Flat colours and thick outlines, matching the show's art style. All colours come from /theme.css. */
@font-face { font-family: Nunito; font-weight: 800; font-display: swap; src: url(/fonts/Nunito-800.ttf) format("truetype"); }
@font-face { font-family: Nunito; font-weight: 900; font-display: swap; src: url(/fonts/Nunito-900.ttf) format("truetype"); }
* { box-sizing: border-box; }
html { height: 100%; }
body { margin: 0; min-height: 100%; display: flex; flex-direction: column; background: var(--bg); color: var(--text); font: 800 18px/1.5 Nunito, "Trebuchet MS", "Segoe UI", sans-serif; text-align: center; }
.band { flex: none; height: 26px; background: var(--brand); border-bottom: 4px solid var(--outline); }
.bunting { display: block; flex: none; width: 100%; height: 54px; margin-top: -3px; }
.bunting g { stroke: var(--outline); }
.f-pink { fill: var(--accent); }
.f-yellow { fill: var(--yellow); }
.f-teal { fill: var(--teal); }
.f-orange { fill: var(--orange); }
main { flex: 1; width: 100%; max-width: 660px; margin: auto; padding: 24px max(20px, env(safe-area-inset-right, 0px)) 36px max(20px, env(safe-area-inset-left, 0px)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.tutu { width: min(170px, 42vw); height: auto; display: block; }
.tutu polygon { fill: var(--brand); stroke: var(--outline); }
h1 { margin: 0; font-size: clamp(3.1rem, 14vw, 6rem); font-weight: 900; line-height: 1; letter-spacing: -.01em; }
.soon { margin: 4px 0 0; padding: 3px 18px 4px; background: var(--accent-strong); color: var(--on-accent-strong); border: 4px solid var(--outline); border-radius: 8px; font-size: 1.3rem; font-weight: 900; }
.catch { margin: 8px 0 0; color: var(--link); font-size: clamp(1.5rem, 6vw, 2.1rem); font-weight: 900; line-height: 1.15; text-wrap: balance; }
.about { margin: 0; max-width: 34em; text-wrap: balance; }
a { color: var(--link); font-weight: 900; }
a:hover { color: var(--link-hover); }
a:focus-visible { outline: 4px solid var(--focus); outline-offset: 3px; }
footer { flex: none; }
.sea { display: block; width: 100%; height: 40px; margin-bottom: -1px; }
.sea path { fill: var(--teal-tint); stroke: var(--outline); }
.shore { background: var(--teal-tint); padding: 12px 20px max(16px, env(safe-area-inset-bottom, 0px)); }
.shore p { margin: 0; font-size: .95rem; }
@media (prefers-reduced-motion: no-preference) {
  .tutu { animation: bob 3.6s ease-in-out infinite; }
  @keyframes bob { 50% { transform: translateY(-7px) rotate(-2deg); } }
}