* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #1d2c43 url('../images/background-tile.jpg') center top repeat; color: white; font-family: var(--font-body); }
button, input { font: inherit; }
button, a, input { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid var(--heading-colour); outline-offset: 5px; }
img { display: block; height: auto; }
.page { --u: min(0.0520833333vw, 1px); width: 100%; max-width: 1920px; margin-inline: auto; position: relative; isolation: isolate; overflow: clip; }
.site-background { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.background-master { position: absolute; top: 0; width: 100%; height: calc(1767 * var(--u)); background: url('../images/background-master.jpg') center top / 100% auto no-repeat; }
main { position: relative; }
/* The hero reserves the VIDEO height only. Its fade can extend into the body. */
.hero { position: relative; height: calc(var(--video-height) * var(--u)); }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.main-nav { position: absolute; inset: 0 0 auto; display: flex; height: calc(78 * var(--u)); z-index: 20; }
.nav-piece, .nav-link { position: relative; flex: var(--nav-width) 1 0%; min-width: 0; height: 100%; }
.nav-left { --nav-width: 319; } .nav-home { --nav-width: 147; } .nav-shop { --nav-width: 126; } .nav-art { --nav-width: 212; } .nav-logo { --nav-width: 310; } .nav-dream { --nav-width: 499; } .nav-right { --nav-width: 313; }
.nav-piece, .nav-link img { width: 100%; height: 100%; }
.nav-hover { position: absolute; inset: 0; opacity: 0; transition: opacity .12s; }
.nav-link:hover .nav-hover, .nav-link:focus-visible .nav-hover { opacity: 1; }
.hero-transition { position: absolute; width: 100%; left: 0; top: calc((var(--video-height) - var(--transition-overlap) - var(--transition-edge-inset)) * var(--u)); z-index: 25; pointer-events: none; }
.hero-oliver, .hero-logo { position: absolute; height: auto; left: 50%; animation: heroIn 1.2s ease-out 1s both; pointer-events: none; }
.hero-oliver { --dx: var(--oliver-x); top: calc(var(--oliver-y) * var(--u)); width: calc(var(--oliver-width) * var(--u)); z-index: 30; }
.hero-logo { --dx: var(--logo-x); top: calc(var(--logo-y) * var(--u)); width: calc(var(--logo-width) * var(--u)); z-index: 40; }
@keyframes heroIn { from { opacity: 0; transform: translate(calc(-50% + var(--dx) * var(--u)), calc(50 * var(--u))); } to { opacity: 1; transform: translate(calc(-50% + var(--dx) * var(--u)), 0); } }
.body-content { position: relative; }
.body-clown { position: absolute; z-index: 26; top: calc(50% + var(--clown-y) * var(--u)); left: calc(50% + var(--clown-x) * var(--u)); width: calc(var(--clown-width) * var(--u)); height: auto; transform: translate(-50%, -50%); opacity: var(--clown-opacity); pointer-events: none; }
.content-section, .dream-world-section, .signup-section { position: relative; z-index: 27; }
.section-inner { width: calc(var(--content-width) * var(--u)); margin-inline: auto; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; }
h1, h2 { color: var(--heading-colour); font-size: calc(56 * var(--u)); line-height: 1; margin: 0; }
p { margin: 0; }
.artwork { transform: translate(calc(var(--x, 0) * var(--u)), calc(var(--y, 0) * var(--u))) scale(var(--scale, 1)); transform-origin: center; }
.section-label img { width: calc(337 * var(--u)); }
.what-is { padding-top: calc(36 * var(--u)); padding-bottom: calc(32 * var(--u)); }
.what-is .section-inner { display: grid; grid-template-columns: calc(337 * var(--u)) minmax(0,1fr); column-gap: calc(20 * var(--u)); row-gap: 0; align-items: start; }
.what-is .section-label { height: calc(175 * var(--u)); }
.what-is .section-label img { --x: var(--what-ticket-x); --y: var(--what-ticket-y); --scale: var(--what-ticket-scale); }
.intro-heading { padding-top: calc(46 * var(--u)); }
.book-image { --x: var(--book-x); --y: var(--book-y); --scale: var(--book-scale); width: calc(285 * var(--u)); justify-self: center; margin-top: calc(25 * var(--u)); }
.body-copy { width: 100%; max-width: calc(880 * var(--u)); font-size: calc(24 * var(--u)); font-weight: 700; line-height: 1.15; }
.body-copy p + p { margin-top: calc(24 * var(--u)); }
.whos-it-for { padding-bottom: calc(100 * var(--u)); }
.whos-it-for .section-inner { display: grid; grid-template-columns: calc(337 * var(--u)) minmax(0,1fr); gap: calc(15 * var(--u)) calc(20 * var(--u)); }
.whos-it-for .section-label img { --x: var(--who-ticket-x); --y: var(--who-ticket-y); --scale: var(--who-ticket-scale); }
.fans-heading { padding-top: calc(22 * var(--u)); }
.fan-list { grid-column: 1 / -1; margin-left: calc(70 * var(--u)); width: calc(1200 * var(--u)); display: grid; gap: calc(20 * var(--u)); }
.fan-item { position: relative; isolation: isolate; min-height: calc(182 * var(--u)); display: grid; grid-template-columns: calc(140 * var(--u)) minmax(0,1fr); gap: calc(70 * var(--u)); align-items: center; padding: calc(22 * var(--u)) calc(55 * var(--u)) calc(22 * var(--u)) 0; }
.fan-item::before { content: ''; position: absolute; z-index: -1; inset: 0 0 0 calc(var(--bullet-overlap) * var(--u)); background: url('../images/bullet-bg-ticket.png') center / 100% 100% no-repeat; pointer-events: none; }
.fan-item > img { width: calc(139 * var(--u)); transform: translate(calc(var(--bullet-icon-x) * var(--u)), calc(var(--bullet-icon-y) * var(--u))) scale(var(--bullet-icon-scale)); }
.fan-item h3 { font-size: calc(28 * var(--u)); line-height: 1.15; margin: 0 0 calc(12 * var(--u)); }
.fan-item p { font-size: calc(24 * var(--u)); line-height: 1.15; font-weight: 700; }
.dream-world-title { text-align: center; padding-bottom: calc(65 * var(--u)); }
.dream-world-title h2 { font-size: calc(56 * var(--u)); }
.dream-world-banner > img { width: 100%; }
.signup-section { padding: calc(42 * var(--u)) 0 calc(136 * var(--u)); }
.signup-inner { width: calc(792 * var(--u)); margin-inline: auto; }
.signup-inner > p:not(.site-status) { font-weight: 700; font-size: calc(24 * var(--u)); line-height: 1.6; margin-bottom: calc(30 * var(--u)); }
.signup-form { display: flex; gap: calc(35 * var(--u)); align-items: center; margin-top: calc(35 * var(--u)); }
.signup-form input { width: calc(420 * var(--u)); min-width: 0; height: calc(76 * var(--u)); padding: 0 calc(40 * var(--u)); border: 0; border-radius: calc(30 * var(--u)); background: var(--heading-colour); color: #253450; font-family: var(--font-body); font-size: calc(36 * var(--u)); font-weight: 700; }
.signup-form input::placeholder { color: #756431; opacity: .6; }
.join-button { transform: translate(calc(var(--join-x) * var(--u)), calc(var(--join-y) * var(--u))) scale(var(--join-scale)); border: 0; padding: 0; background: none; cursor: pointer; }
.join-button img { width: calc(337 * var(--u)); }
.join-button:hover img { filter: brightness(1.1); }
.site-status { font-size: max(14px,calc(22 * var(--u))); line-height: 1.4; }
.site-status:not(:empty) { margin-top: 20px; }
.site-footer { position: relative; min-height: calc(407 * var(--u)); background: url('../images/footer-bg.jpg') center top / 100% auto no-repeat; }
.copyright { position: absolute; bottom: 18px; width: 100%; text-align: center; opacity: .65; font-size: max(11px,calc(18 * var(--u))); }
@media (max-width: 700px) {
  .page { --u: 1px; }
  .background-master { height: 1767px; background-size: auto 1100px; }
  .hero { height: 440px; }
  .hero-video { object-position: center; }
  .hero-oliver { width: min(calc(var(--oliver-width) * 1px),62vw); }
  .hero-logo { width: min(calc(var(--logo-width) * 1px),96vw); }
  .main-nav { height: 54px; align-items: center; background: #18222d; border-bottom: 1px solid #ffeb91; }
  .nav-left, .nav-right { display: none; }
  .nav-link { height: auto; align-self: center; }
  .nav-link img { height: auto; }
  .nav-logo { --nav-width: 250; }
  .hero-transition { width: 1100px; max-width: none; left: 50%; top: 380px; transform: translateX(-50%); }
  .section-inner { width: auto; margin-inline: 20px; }
  h1, h2 { font-size: 30px; }
  .what-is { padding: 22px 0 35px; }
  .what-is .section-inner { grid-template-columns: 100px minmax(0,1fr); column-gap: 12px; row-gap: 16px; }
  .section-label img { width: 100%; max-width: 150px; }
  .what-is .section-label { height: auto; }
  .intro-heading { padding-top: 12px; }
  .book-image { width: 110px; margin-top: 5px; }
  .body-copy { font-size: 16px; max-width: none; line-height: 1.4; }
  .body-copy p + p { margin-top: 15px; }
  .whos-it-for { padding-bottom: 48px; }
  .whos-it-for .section-inner { grid-template-columns: 100px minmax(0,1fr); gap: 22px 12px; }
  .fans-heading { padding: 5px 0 0; font-size: 27px; }
  .fans-heading br { display: none; }
  .fan-list { margin-left: 0; width: 100%; gap: 14px; }
  .fan-item { grid-template-columns: 62px minmax(0,1fr); gap: 13px; padding: 18px 12px 18px 0; min-height: 145px; }
  .fan-item > img { width: 62px; }
  .fan-item h3 { font-size: 21px; margin-bottom: 8px; }
  .fan-item p { font-size: 16px; line-height: 1.35; }
  .dream-world-title { padding: 0 22px 28px; }
  .dream-world-title h2 { font-size: 32px; }
  .dream-world-banner { overflow: hidden; }
  .dream-world-banner img { width: 800px; max-width: none; position: relative; left: 50%; transform: translateX(-50%); }
  .signup-section { padding: 28px 24px 65px; }
  .signup-inner { width: 100%; max-width: 450px; }
  .signup-inner > p:not(.site-status) { font-size: 16px; line-height: 1.5; margin-bottom: 20px; }
  .signup-form { gap: 10px; margin-top: 22px; flex-wrap: wrap; justify-content: center; }
  .signup-form input { width: 100%; height: 52px; padding: 0 22px; font-size: 22px; border-radius: 22px; }
  .join-button img { width: 190px; }
  .site-footer { min-height: 280px; background-size: auto 250px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-oliver, .hero-logo { animation: none; opacity: 1; transform: translateX(calc(-50% + var(--dx) * var(--u))); }
  .nav-hover { transition: none; }
}

/* Mobile navigation keeps the labels legible instead of shrinking image slices. */
.mobile-nav-label { display: none; }
@media (max-width: 700px) {
  .main-nav { height: 88px; display: grid; grid-template-columns: .8fr .8fr 1.1fr 1.7fr; padding: 42px 8px 0; }
  .main-nav .nav-link { height: 44px; display: flex; justify-content: center; align-items: center; text-decoration: none; }
  .main-nav .nav-link > img { display: none; }
  .main-nav .nav-logo { position: absolute; top: 3px; left: 50%; transform: translateX(-50%); width: 150px; height: 37px; }
  .main-nav .nav-logo > img { display: block; width: 150px; height: auto; }
  .mobile-nav-label { display: block; color: #ddd19b; font: bold 13px var(--font-body); white-space: nowrap; }
  .nav-link:hover .mobile-nav-label { color: white; }
}