/* Canva composition, with fluid spacing and distinct phone/tablet layouts. */
:root {
  --content: 1200px;
  --gutter: clamp(20px, 4.5vw, 64px);
  --section-space: clamp(56px, 7.5vw, 112px);
  --serif: Didot, 'Bodoni MT', 'Times New Roman', serif;
}

* { box-sizing: border-box; }
body { margin: 0; background: #fff; color: #00291f; font-family: Arial, sans-serif; }
a { color: inherit; }
img { display: block; }
:where(a, button, summary, input, textarea):focus-visible {
  outline: 3px solid #e15746;
  outline-offset: 4px;
}
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
#main-content, #event-info, #booking, #who-can-play, #faq, #partners { scroll-margin-top: 20px; }
.fine { font-size: 13px !important; line-height: 1.6; color: #65645f; }

/* Keep the five navigation destinations; compact screens use a disclosure. */
.site-header { background: #000; color: #fff; position: relative; z-index: 10; }
.menu-toggle { align-items: center; gap: 12px; min-height: 44px; padding: 10px 12px; border: 0; background: transparent; color: #fff; font: 16px/1.2 Arial, sans-serif; cursor: pointer; }
.menu-toggle:focus-visible { outline-color: #ffdf61; }
.menu-icon, .menu-icon::before, .menu-icon::after { display: block; width: 22px; height: 2px; background: currentColor; }
.menu-icon { position: relative; }
.menu-icon::before, .menu-icon::after { content: ''; position: absolute; left: 0; }
.menu-icon::before { top: -7px; }
.menu-icon::after { top: 7px; }
.menu-toggle[aria-expanded="true"] .menu-icon { background: transparent; }
.menu-toggle[aria-expanded="true"] .menu-icon::before { top: 0; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-icon::after { top: 0; transform: rotate(-45deg); }
.site-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 clamp(20px, 4.8vw, 72px);
  min-height: 80px;
  max-width: 1440px;
  margin: 0 auto;
  padding: 12px var(--gutter);
}
.site-nav a {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: #fff;
  font-size: clamp(16px, 1.8vw, 26px);
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}
.site-nav a:hover, .site-nav a:focus-visible { text-decoration: underline; text-underline-offset: 6px; }
.site-nav a:focus-visible { outline-color: #ffdf61; }
.skip-link {
  position: absolute;
  left: 16px;
  top: 10px;
  z-index: 20;
  transform: translateY(-180%);
  padding: 12px 18px;
  background: #ffdf61;
  color: #00291f;
  font-size: 16px;
}
.skip-link:focus { transform: translateY(0); }

.hero {
  height: clamp(680px, calc(100svh - 80px), 1000px);
  max-width: 1800px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
  text-align: center;
  z-index: 2;
}
h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(76px, 8.2vw, 144px);
  line-height: 1.03;
  letter-spacing: -.045em;
  margin: 0;
}
h1 span { display: block; }
.date { font-size: clamp(20px, 2.25vw, 36px); letter-spacing: .1em; margin: 26px 0 12px; }
.details { font-size: 15px; line-height: 1.5; letter-spacing: .03em; margin: 0; }
.status { display: block; max-width: 40ch; margin: 10px auto 0; font-size: 12px; line-height: 1.6; color: #56645e; }
.art { position: absolute; aspect-ratio: var(--ratio); overflow: hidden; pointer-events: none; z-index: 1; }
.art img, .cutout img { position: absolute; height: auto; max-width: none; }
.cat { width: 25%; left: 8.5%; top: -3%; }
.phone { width: 13%; left: 64.3%; top: 0; }
.hand { width: 18%; right: -2%; top: 24%; }
.question { width: 28%; left: 0; top: 76%; }
.brain { width: 17%; left: 68%; top: max(71%, calc(50% + clamp(90px, 11.5vw, 202px))); }
.board { width: 11%; right: -8%; top: 64%; }
.cutout { position: relative; overflow: hidden; width: 100%; pointer-events: none; }

.intro { padding: var(--section-space) 0 clamp(56px, 6vw, 88px); text-align: center; }
.intro h2 {
  font-size: clamp(24px, 3vw, 40px);
  font-weight: 600;
  line-height: 1.25;
  max-width: 950px;
  padding: 0 var(--gutter);
  margin: 0 auto clamp(32px, 5vw, 65px);
  text-wrap: balance;
}
.photo-carousel { position: relative; max-width: 1800px; margin: 0 auto; }
.photo-strip {
  display: flex;
  gap: clamp(10px, 1.8vw, 24px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}
.photo-strip img {
  flex: 0 0 42%;
  width: 42%;
  height: clamp(240px, 28vw, 440px);
  object-fit: cover;
}
.carousel-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.carousel-toggle:focus-visible {
  clip-path: none;
  width: 44px;
  height: 44px;
  right: 14px;
  bottom: 18px;
  margin: 0;
  border: 1px solid white;
  border-radius: 50%;
  background: #101714;
  color: white;
  font-size: 18px;
}
.carousel-toggle[hidden] { display: none; }
@media (max-width: 960px) {
  .photo-strip img { flex-basis: 65%; width: 65%; }
}
@media (max-width: 600px) {
  .photo-strip img { flex-basis: 85%; width: 85%; height: clamp(240px, 70vw, 360px); }
}
@media (prefers-reduced-motion: reduce) {
  .photo-strip [data-carousel-clone], .carousel-toggle { display: none; }
}

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 620px; background: #fff6ea; }
.split > div { display: flex; align-items: center; justify-content: center; padding: clamp(32px, 4.5vw, 80px); }
.split h2, .section-heading { font: 400 clamp(34px, 3.6vw, 60px)/1.1 var(--serif); margin: 0 0 24px; }
.talent-text { background: #ffdf61; text-align: center; }
.talent-text h2 { max-width: 540px; margin: 0; }
/* Each eye owns a grid cell; the offsets keep the scattered composition
   without letting independently positioned frames cross at wider sizes. */
.split > .eyes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(min-content, 1fr));
  gap: clamp(16px, 2.5vw, 36px);
  min-height: 620px;
}
.eyes .cutout { position: relative; width: min(90%, 230px); justify-self: center; align-self: center; }
.eyes .cutout:nth-child(1) { grid-area: 1 / 1; }
.eyes .cutout:nth-child(2) { grid-area: 1 / 2; align-self: end; }
.eyes .cutout:nth-child(3) { grid-area: 2 / 1; justify-self: end; }
.eyes .cutout:nth-child(4) { grid-area: 2 / 2; align-self: end; }
.eyes .cutout:nth-child(5) { grid-area: 3 / 1; justify-self: end; }
.people .gesture { --gesture-height: 620px; background: #2dd0df; padding: 0; min-height: var(--gesture-height); }
/* Bound the whole source frame by both available width and reserved height.
   The forearm stays at the bottom, with space above the fingertips. */
.gesture .cutout { width: min(70%, 480px, calc((var(--gesture-height) - 24px) * 603 / 930.749989)); align-self: flex-end; }
.people-copy { flex-direction: column; }
.people-copy > * { width: 100%; max-width: 34rem; }
.people-copy p { font-size: 19px; line-height: 1.65; margin: 0 0 20px; }
.people-copy p:last-child { margin-bottom: 0; }

.how { padding: var(--section-space) 0 0; }
.how-top { text-align: center; padding: 0 var(--gutter) 40px; }
.how-top .cutout { width: clamp(140px, 16vw, 200px); margin: 0 auto 30px; }
.how-top h2 { max-width: 1000px; font: 400 clamp(30px, 3.2vw, 50px)/1.15 var(--serif); margin: 0 auto; text-wrap: balance; }
.how-top p { font-size: 14px; line-height: 1.6; letter-spacing: .05em; }
.steps-wrap { background: #f3efe6; padding: 55px max(var(--gutter), calc((100% - var(--content)) / 2)); }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 2.5vw, 40px); }
.steps article + article { border-left: 1px solid #c9c6bc; padding-left: clamp(24px, 2.5vw, 40px); }
.steps small { color: #706b5f; }
.steps h3 { font: 400 28px/1.2 var(--serif); margin: 15px 0; }
.steps p { line-height: 1.65; font-size: 16px; max-width: 60ch; }
.solo { border-top: 1px solid #a6a395; margin-top: 35px; padding-top: 25px; display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.solo p { line-height: 1.6; margin: 0; max-width: 68ch; }
.solo a { display: inline-flex; align-items: center; min-height: 44px; flex-shrink: 0; }

.booking { padding: var(--section-space) max(var(--gutter), calc((100% - var(--content)) / 2)); background: #ffdf61; }
.booking > .section-heading, .practical .section-heading { text-align: center; }
.booking-intro { margin-bottom: 35px; max-width: 700px; }
.booking-intro p { line-height: 1.6; }
.ticket { background: #fffaf0; border-radius: 14px; padding: clamp(24px, 3vw, 40px); margin-top: 20px; display: flex; justify-content: space-between; align-items: center; gap: 32px; }
.ticket > div { min-width: 0; }
.ticket small { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; line-height: 1.5; color: #a34f43; }
.ticket small strong { color: #20231e; }
.ticket h3 { font: 400 clamp(30px, 3vw, 44px)/1.15 var(--serif); margin: 18px 0 12px; }
.ticket p { max-width: 60ch; line-height: 1.6; }
.ticket details { max-width: 60ch; line-height: 1.6; }
.ticket summary { width: fit-content; min-height: 44px; padding: 10px 0; cursor: pointer; }
.ticket-more { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 0; border: 0; background: none; color: inherit; font: 700 16px/1.4 Arial, sans-serif; cursor: pointer; }
.ticket-more { list-style: none; }
.ticket-more::-webkit-details-marker { display: none; }
.ticket-more span { font-size: 24px; line-height: 1; }
.ticket-details[open] > .ticket-more span { transform: rotate(180deg); }
.ticket-inclusions { margin: 4px 0 0; padding-left: 22px; }
.ticket-inclusions li + li { margin-top: 6px; }
.btn { display: inline-block; background: #101714; color: white; border: 0; border-radius: 9px; min-height: 48px; padding: 15px 23px; font: 400 16px/1.3 Arial, sans-serif; cursor: pointer; }
.btn:hover { background: #254539; }
.ticket > .btn { flex-shrink: 0; }

.practical { padding: var(--section-space) max(var(--gutter), calc((100% - var(--content)) / 2)); display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 70px); align-items: center; }
.practical-photo img { width: 100%; height: 550px; object-fit: cover; }
.practical dl { margin: 35px 0 0; }
.practical dl > div { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 20px; padding: 21px 0; border-bottom: 1px solid #ddd; }
.practical dt { font: 20px/1.5 var(--serif); }
.practical dd { margin: 0; line-height: 1.6; }
.practical dd strong, .practical dd small { display: block; }
.practical dd small { color: #666; }
.hosts { padding: 65px max(var(--gutter), calc((100% - var(--content)) / 2)); }
.hosts-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 5vw, 70px); }
.hosts p { line-height: 1.7; max-width: 60ch; }
.hosts h3 { font: 400 32px/1.2 var(--serif); }
.faq { background: #fff6ea; padding: var(--section-space) max(var(--gutter), calc((100% - 960px) / 2)); }
.faq details { border-bottom: 1px solid #cec8bc; padding: 16px 0; }
.faq summary { font-size: 20px; line-height: 1.45; min-height: 44px; padding: 10px 0; cursor: pointer; }
.faq details p { line-height: 1.7; max-width: 65ch; }
.contact { background: #fff6ea; text-align: center; padding: 60px var(--gutter) var(--section-space); }
.contact h2 { font: 400 clamp(32px, 3.5vw, 40px)/1.15 var(--serif); text-wrap: balance; }
.envelope { width: 150px; height: auto; margin: 22px auto; }
.motion-still { display: none; }
.contact p { line-height: 1.65; }
.partners { container-name: footer; container-type: inline-size; overflow: hidden; background: #232321; color: white; text-align: center; padding: 75px var(--gutter) 0; }
.partners > p { font-size: 12px; line-height: 1.5; letter-spacing: .1em; }
/* Supplied 1920 × 1080 PNG: visible logo bounds x=769–1149, y=513–608.
   Frame only its transparent margins; preserve the supplied file and logo ratio. */
.morning { position: relative; overflow: hidden; width: 220px; max-width: 65%; aspect-ratio: 380 / 95; margin: 15px auto 50px; }
.morning img { position: absolute; width: 505.263158%; max-width: none; height: auto; left: -202.368421%; top: -540%; }
.closing { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); text-align: left; align-items: center; gap: clamp(24px, 5vw, 60px); max-width: 1100px; margin: auto; }
.closing .cutout { max-width: 450px; }
/* Extend only the supplied paper to the viewport edge; keep the hand in its original column. */
.footer-art { --edge-offset: max(var(--gutter), calc((100cqw + 2 * var(--gutter) - 1100px) / 2)); position: relative; width: 100%; max-width: 520px; aspect-ratio: 753 / 547; pointer-events: none; }
.footer-paper { position: absolute; top: 0; left: calc(-1 * var(--edge-offset)); width: calc(100% + var(--edge-offset)); height: 100%; max-width: none; object-fit: cover; }
.footer-hand { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: right bottom; }

.closing h2 { font: 400 clamp(40px, 5vw, 72px)/1.1 var(--serif); margin: 20px 0; }
.closing .footer-play { display: block; width: 2.6em; max-width: 100%; margin-bottom: 8px; }
.closing p { font-size: 14px; line-height: 1.6; }
.closing .footer-event-name { margin: 0 0 6px; font-size: 14px; font-weight: 400; line-height: 1.5; }
.closing .footer-description { margin: 0 0 clamp(36px, 3.2vw, 44px); font-size: 12px; line-height: 1.6; color: white; }
.closing .footer-description + h2 { margin-top: 0; }

.preview-note { padding: 18px var(--gutter); text-align: center; font-size: 12px; line-height: 1.6; color: #666; background: #f5f5f2; margin: 0; }

a.btn, a.ticket-more { text-decoration: none; }

/* The compact menu overlays the hero without moving its composition. Without
   JavaScript the original navigation remains available as wrapping links. */
@media (max-width: 1100px) {
  .site-header.nav-ready { height: 56px; padding: 6px 12px; }
  .site-header.nav-ready .menu-toggle { display: inline-flex; }
  .site-header.nav-ready .site-nav { position: absolute; top: 100%; left: 0; right: 0; max-height: calc(100svh - 56px); overflow-y: auto; min-height: 0; padding: 12px 24px 20px; margin: 0; background: #000; border-top: 1px solid #343434; flex-direction: column; align-items: stretch; gap: 0; }
  .site-header.nav-ready .site-nav a { min-height: 48px; font-size: 18px; }
}

/* Portrait formats get their own composition, like the reference's distinct
   portrait montage. Grid tracks reserve space for the large top/bottom images;
   the two side pieces are anchored to the title track, not viewport height. */
@media (min-width: 601px) and (max-width: 1100px) {
  .hero {
    --hero-top-band: clamp(225px, 27vw, 300px);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(var(--hero-top-band), 1fr) auto minmax(clamp(260px, 32vw, 360px), 1fr);
    height: auto;
    min-height: min(calc(100svh - 56px), 1040px);
  }
  .title { grid-row: 2; position: relative; top: auto; left: auto; transform: none; width: 78%; margin-inline: auto; }
  h1 { font-size: clamp(64px, 10vw, 96px); }
  .cat { width: 36%; left: -5%; top: -20px; }
  .phone { width: 24%; left: auto; right: -4%; top: -20px; }
  .hand { grid-row: 2; width: 27%; left: -4%; right: auto; top: 20px; }
  .board { grid-row: 2; width: 11%; right: -8%; top: max(20px, calc(36vw - var(--hero-top-band))); }
  .question { width: 44%; left: -5%; top: auto; bottom: -15px; }
  .brain { width: 29%; left: auto; right: 2%; top: auto; bottom: -15px; }
}

/* A wider, shorter canvas needs less image width to preserve the same weight. */
@media (min-width: 601px) and (max-width: 1100px) and (orientation: landscape) {
  .hero { display: block; height: clamp(680px, calc(100svh - 56px), 1040px); min-height: 0; }
  .title { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
  .cat { width: 28%; top: -3%; }
  .phone { width: 20%; right: 4%; top: 0; }
  .hand { width: 24%; top: 42%; }
  .board { top: calc(50% - 170px); }
  .question { width: 38%; bottom: -4%; }
  .brain { width: 21%; right: 4%; bottom: -3%; }
}

/* Tablet: switch to a single reading column before text becomes cramped. */
@media (max-width: 960px) {
  .split { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .split > div { padding: 48px var(--gutter); }
  .talent-text { min-height: 320px; }
  .split h2, .section-heading { font-size: clamp(34px, 5vw, 48px); }
  .split > .eyes { min-height: 0; }
  .people .gesture { --gesture-height: clamp(320px, 55vw, 480px); padding: 0; min-height: 0; height: var(--gesture-height); }
  .gesture .cutout { width: min(68%, 360px, calc((var(--gesture-height) - 24px) * 603 / 930.749989)); }
  .people-copy > * { max-width: 40rem; }
  .steps { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .steps article + article { border-left: 0; border-top: 1px solid #c9c6bc; padding: 24px 0 0; }
  .steps h3 { font-size: 30px; }
  .solo { align-items: flex-start; flex-direction: column; gap: 12px; }
  .practical { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .practical-photo img { height: clamp(300px, 48vw, 460px); }
}

@media (max-width: 760px) {
  .ticket { flex-direction: column; align-items: stretch; gap: 16px; }
  .ticket > .btn { width: 100%; }
  .hosts-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}

/* Phone: keep the four principal pictures substantial, the hand beside the
   title and only the authored discreet board fragment at the right edge. */
@media (max-width: 600px) {
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(clamp(185px, 50vw, 280px), 1fr) auto minmax(clamp(205px, 54vw, 320px), 1fr);
    height: auto;
    min-height: calc(100svh - 56px);
  }
  .title { grid-row: 2; position: relative; top: auto; left: auto; transform: none; width: calc(100% - 32px); margin-inline: auto; }
  h1 { font-size: clamp(48px, 15.5vw, 88px); }
  .date { font-size: 22px; margin-top: 22px; }
  .details { font-size: 14px; letter-spacing: 0; }
  .status { max-width: 36ch; }
  .cat { width: 48%; left: -3%; top: -10px; }
  .phone { width: 35%; left: auto; right: -3%; top: -12px; }
  .hand { grid-row: 2; width: 26%; left: -5%; right: auto; top: -5px; }
  .board { grid-row: 2; width: 18%; right: -14%; top: 24px; }
  .question { width: 60%; top: auto; bottom: -4px; left: -5%; }
  .brain { width: 38%; left: auto; right: -3%; top: auto; bottom: -7px; }
  .split > div { padding-block: 40px; }
  .talent-text { min-height: 280px; }
  .talent-text h2 { font-size: clamp(28px, 7.2vw, 40px); }
  .people-copy p { font-size: 17px; }
  .how-top p { max-width: 30ch; margin-inline: auto; }
  .practical { gap: 32px; }
  .practical dl > div { grid-template-columns: 76px minmax(0, 1fr); gap: 16px; }
  .faq summary { font-size: 18px; }
  .partners { padding-top: 50px; }
  .closing .cutout { width: min(70%, 280px); margin: 0 auto; order: 1; }
  .closing h2 { font-size: 52px; }
}

/* Use available footer space, not a phone label: two columns need about
   350px each plus their gap. Stacked paper spans both viewport edges. */
@container footer (max-width: 46rem) {
  .closing { grid-template-columns: minmax(0, 1fr); text-align: center; gap: clamp(20px, 4cqw, 32px); }
  .footer-art { --edge-offset: calc((100cqw + 2 * var(--gutter) - 100%) / 2); width: min(70%, 380px); margin-inline: auto; }
  .footer-paper { width: calc(100% + 2 * var(--edge-offset)); }
  .closing .footer-play { margin-inline: auto; }
  .closing .footer-description { margin-inline: auto; }
}

/* Compact phones need shorter image bands so the bottom subjects are present
   in the opening view. Keep the image/text balance, with readable event info. */
@media (max-width: 430px) and (max-height: 700px) {
  .hero { grid-template-rows: minmax(clamp(130px, 36vw, 155px), 1fr) auto minmax(clamp(135px, 40vw, 172px), 1fr); }
  h1 { font-size: clamp(42px, 14vw, 56px); }
  .date { font-size: 18px; margin: 16px 0 10px; }
  .details { font-size: 13px; }
  .status { font-size: 11px; line-height: 1.4; margin-top: 8px; max-width: 40ch; }
  .cat { width: 44%; }
  .phone { width: 30%; top: -16px; }
  .question { width: 56%; }
  .brain { width: 33%; }
}

/* On a short landscape phone, move the principal images to the side bands.
   Their size follows screen height while the complete reading path stays
   centered, so the lower subjects do not fall outside the opening viewport. */
@media (min-width: 480px) and (max-width: 1100px) and (max-height: 500px) and (orientation: landscape) {
  .hero { display: block; height: calc(100svh - 56px); min-height: 0; }
  .title { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 56%; }
  h1 { font-size: clamp(40px, 12svh, 56px); }
  .date { font-size: 18px; margin: 16px 0 10px; }
  .details { font-size: 13px; }
  .status { font-size: 11px; line-height: 1.4; margin-top: 8px; max-width: 40ch; }
  .cat { width: min(22%, 46svh); left: -2%; top: -8px; }
  .phone { width: min(15%, 31svh); right: 2%; top: -12px; }
  .hand { width: min(13%, 28svh); left: auto; right: calc(50% + 31svh - 8px); top: 38%; }
  .question { width: min(24%, 53svh); left: -2%; bottom: -4px; }
  .brain { width: min(15%, 31svh); right: 5%; bottom: -7px; }
  .board { width: 11%; right: -8%; top: 64%; }
}

@media (prefers-reduced-motion: reduce) {
  .motion-gif { display: none; }
  .motion-still { display: block; }
}