:root {
  --green: #1a6032;
  --leaf: #6e9a3c;
  --cream: #efe6d5;
  --gold: #e8bc45;
  --ink: #111;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--cream);
  color: var(--ink);
  font-family: 'Open Sans', 'Myriad Pro', Arial, sans-serif;
}

.page { background: var(--cream); min-height: 100vh; container-type: inline-size; overflow: hidden; padding-bottom: 12cqw; }
.hero { --art-w: min(100cqw, 1000px, 120vh); position: relative; background: var(--green); }
.art { position: relative; z-index: 2; display: block; width: var(--art-w); height: auto; margin: 0 auto; }
.wave { position: absolute; z-index: 1; left: 0; bottom: -1px; width: 100%; height: calc(var(--art-w) * 58 / 1292 + 1px); }
.logo { position: absolute; z-index: 3; top: 2.3cqw; left: 2.3cqw; width: 17.6cqw; height: auto; }
.side { display: none; }

.tagline { margin-top: 2.5cqw; font-size: max(15px, 2.7cqw); text-align: center; }
.tickets { display: flex; align-items: center; justify-content: center; gap: 3.5cqw; width: max(190px, 27cqw); height: max(52px, 7.2cqw); margin: 3.6cqw auto 0; border: max(3px, .35cqw) solid #fff; border-radius: 999px; background: var(--gold); color: #fff; font-family: 'Bree Serif', Georgia, serif; font-size: max(22px, 3.3cqw); text-decoration: none; text-shadow: 0 0 2px rgba(120, 80, 0, .6); box-shadow: 0 2px 6px rgba(0, 0, 0, .08); transition: transform .15s ease, filter .15s ease; }
.tickets:hover { transform: translateY(-2px); filter: brightness(1.05); }
.tickets svg { width: max(16px, 2cqw); height: auto; }

.info { margin: 4.2cqw 7.2cqw 0; padding: 5.5cqw 0 3cqw; border-radius: 5.4cqw; background: #fff; list-style: none; }
.info li { display: grid; grid-template-columns: 30.8% 1fr; align-items: center; min-height: 13.8cqw; padding-right: 4cqw; font-size: max(15px, 3.4cqw); }
.info .icon { display: flex; justify-content: center; padding-right: 14.2%; }
.info .icon svg { width: max(30px, 7.5cqw); height: max(30px, 7.5cqw); }
.info .label { display: none; }
.info a { color: inherit; text-decoration: none; word-break: break-word; }

.ticket-shop { max-width: 680px; margin: 42px auto 0; padding: 0 24px; }
.ticket-shop h2 { margin-bottom: 18px; color: var(--green); font-family: 'Bree Serif', Georgia, serif; font-size: 28px; text-align: center; }
.ticket-embed { overflow: hidden; padding: 10px; border-radius: 26px; background: #fff; box-shadow: 0 10px 30px rgba(26, 96, 50, .08); }

@media (min-width: 860px) {
  .page { padding-bottom: 96px; }
  .logo { top: 24px; left: 32px; width: 200px; }
  .tagline { margin-top: 20px; font-size: 24px; }
  .tickets { width: 240px; height: 66px; gap: 22px; margin-top: 28px; border-width: 4px; font-size: 32px; }
  .tickets svg { width: 20px; }
  .info { display: grid; grid-template-columns: 1fr 1fr 1.5fr .8fr; max-width: 1100px; margin: 56px auto 0; padding: 44px 24px; border-radius: 36px; box-shadow: 0 10px 30px rgba(26, 96, 50, .08); }
  .info li { display: flex; flex-direction: column; align-items: center; gap: 18px; min-height: 0; padding: 4px 20px; font-size: 19px; text-align: center; }
  .info li + li { border-left: 1px solid #ece4d3; }
  .info .icon { padding: 0; }
  .info .icon svg { width: 54px; height: 54px; }
  .info .label { display: block; margin-bottom: 6px; color: var(--green); font-family: 'Bree Serif', Georgia, serif; font-size: 16px; }
  .info .sep { display: none; }
  .info .time { display: block; }
  .info a:hover { color: var(--green); }
  .ticket-shop { margin-top: 42px; }
  .ticket-shop h2 { font-size: 32px; }
}

@media (min-width: 1600px) {
  .side { --side-h: calc(var(--art-w) * .24); display: block; position: absolute; z-index: 2; bottom: calc(var(--art-w) * .02 - var(--side-h) * 30 / 290); height: var(--side-h); width: calc(var(--side-h) * 360 / 290); }
  .side-left { left: calc((100cqw - var(--art-w)) / 4 - var(--side-h) * 180 / 290); }
  .side-right { right: calc((100cqw - var(--art-w)) / 4 - var(--side-h) * 180 / 290); }
}