*{box-sizing:border-box}body{margin:0;background:#f7efdf;color:#173b5b;font-family:'Source Serif 4',Georgia,serif}header{display:flex;justify-content:space-between;align-items:center;padding:20px 4%;gap:25px}.brand{letter-spacing:2px;font-size:13px;font-weight:700;text-decoration:none;color:inherit;white-space:nowrap}.brand span{color:#d9571c;font-size:32px;vertical-align:middle;margin-right:14px}nav{display:flex;gap:32px;font-size:12px;letter-spacing:1px}nav a{color:inherit;text-decoration:none}nav .active{color:#d9571c;text-decoration:underline;text-underline-offset:10px}main{max-width:1440px;margin:0 auto;padding:0 4% 16px}h1{font-family:'DM Serif Display',Georgia,serif;font-size:clamp(30px,4vw,64px);font-weight:400;letter-spacing:-2px;line-height:1;margin:0 0 12px}.subtitle{font-size:clamp(10px,1.125vw,15.75px);letter-spacing:3.75px;margin:0 0 12px}.venues{display:grid;grid-template-columns:1.15fr 1fr .95fr;gap:34px;align-items:start}.venue button{width:100%;height:clamp(198px,calc(110svh - 517px),473px);display:block;border:0;background:none;padding:0;cursor:pointer;perspective:1000px}.venue button>svg{width:auto;max-width:100%;height:100%;overflow:hidden}.venue button{mix-blend-mode:normal}.door{transform-box:view-box;transform:rotateY(0deg);transition:transform 850ms cubic-bezier(.22,.7,.25,1);backface-visibility:hidden}.interior{opacity:0;transition:opacity 250ms}.venue button[aria-pressed=true] .door{transform:rotateY(var(--open-angle))}.venue button[aria-pressed=true] .interior{opacity:1}@media(hover:hover){.venue button:hover .door{transform:rotateY(var(--open-angle))}.venue button:hover .interior{opacity:1}}.venue button:focus-visible{outline:2px solid #d9571c;outline-offset:6px;border-radius:8px}.caption{text-align:center;padding-top:12px}.rule{display:block;background:#173b5b;width:78px;height:1px;margin:0 auto 12px}.day{font-size:14px;letter-spacing:3px;margin:0 0 10px;font-weight:600}h2{font-family:'DM Serif Display',Georgia,serif;font-style:italic;font-weight:400;font-size:clamp(25px,2.6vw,39px);line-height:1.2;margin:0 0 12px}.detail{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;margin:0;line-height:1.7}@media(max-width:760px){header{flex-direction:column;gap:18px;padding:20px}nav{gap:15px;font-size:9px;flex-wrap:wrap;justify-content:center}main{padding:24px 22px}h1{letter-spacing:-1px}.subtitle{letter-spacing:2px;margin-bottom:28px}.venues{grid-template-columns:1fr;gap:44px}.venue button{height:407px}.caption{padding-top:12px}}@media(prefers-reduced-motion:reduce){.door,.interior{transition:none}}

/* Local hinges keep the approved artwork aligned throughout the turn. */
.hinge-box{overflow:visible;pointer-events:none}.hinge-space{width:100%;height:100%;perspective:650px;perspective-origin:center;overflow:visible}
.door-leaf{position:relative;width:100%;height:100%;transform-origin:var(--hinge) center;transform:translateZ(0) rotateY(0);backface-visibility:hidden;will-change:transform}
.door-leaf svg{display:block;width:100%;height:100%;overflow:hidden}.leaf-shade{position:absolute;inset:0;pointer-events:none;background:#102633;opacity:0}
.room{opacity:1;pointer-events:none}.sounds .leaf-shade{display:none}
.door-leaf{overflow:hidden}.door-leaf img{display:block;width:100%;height:100%;object-fit:fill;pointer-events:none}.low .hinge-space{perspective:900px}
.event-facts{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;max-width:260px;margin:12px auto 0;text-align:left;font-size:13px;line-height:1.5}.event-facts dt{font-weight:600}.event-facts dd{margin:0;opacity:.72}
.venue button{pointer-events:none;cursor:default}.venue button>svg,.venue button>svg *{pointer-events:none}.venue button>svg .entrance-hit{pointer-events:all;cursor:pointer}
/* Weekend program typography mockup */
.caption{max-width:290px;margin:0 auto;text-align:left;padding-top:12px}
.rule{width:38px;height:2px;background:#d9571c;margin:0 0 9px}
.day{color:#d9571c;font-size:11px;letter-spacing:2px;margin-bottom:7px}
h2{font-family:'Fraunces',Georgia,serif;font-style:normal;font-weight:600;font-size:clamp(25px,2.25vw,34px);letter-spacing:-.7px;margin:0 0 7px}
.detail{font-size:13px;letter-spacing:0;text-transform:none;font-style:italic;line-height:1.5}
.event-facts{max-width:none;margin:14px 0 0;grid-template-columns:65px 1fr;gap:6px 10px;font-size:13px;line-height:1.35}
.event-facts dt{color:#72764e;font-size:10px;letter-spacing:1.3px;text-transform:uppercase;align-self:center;font-weight:700}
.event-facts dd{opacity:1;color:#173b5b}
@media(max-width:760px){.caption{max-width:290px;width:100%}}
/* Larger, more readable event information with a little more breathing room. */
.venues{margin-top:32px}
.day{font-size:13px;letter-spacing:1.7px}
h2{font-size:clamp(28px,2.45vw,37px)}
.detail{font-size:16px;line-height:1.4}
.event-facts{font-size:16px;grid-template-columns:82px 1fr;gap:7px 12px;line-height:1.35}
.event-facts dt{font-size:12px;letter-spacing:1px}
@media(min-width:761px) and (max-height:680px){.venues{margin-top:12px}.venue button{height:clamp(165px,calc(110svh - 539px),242px)}}
/* Keep the full matchup readable without pushing attire below the fold. */
@media(min-width:761px){.venues{margin-top:20px}.caption h2{line-height:1.1}.event-facts{gap:5px 12px}main{padding-bottom:8px}}

:root{--navy:#173b5b;--orange:#d9571c}
.event-page-header {
  position: absolute;
  z-index: 20;
  left: 3.0cqw;
  right: 4.0cqw;
  top: 2.2cqw;

  height: 3.1cqw;
  padding: 0;
  margin: 0;

  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
}

.event-page-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.88cqw;
  flex: 0 0 auto;

  color: var(--ht-navy);
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 1.10cqw;
  font-weight: 700;
  letter-spacing: 0.08cqw;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
}

.event-page-logo span {
  color: var(--ht-orange);
  font-size: 1.68cqw;
  line-height: 1;
}

.event-page-nav {
  position: absolute;
  left: 41.4cqw;
  top: 0.08cqw;

  display: flex;
  align-items: center;
  gap: 3.60cqw;
  white-space: nowrap;
}

.event-page-nav a {
  position: relative;
  display: inline-block;

  color: var(--ht-navy);
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 1.10cqw;
  font-weight: 700;
  letter-spacing: 0.03cqw;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;

  transition: color 0.18s ease;
}

.event-page-nav a:hover,
.event-page-nav a:focus-visible,
.event-page-nav a.active {
  color: var(--ht-orange);
}

.event-page-nav a::after {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(100% + 0.48cqw);

  width: 3.2cqw;
  height: 0.5cqw;

  opacity: 0;
  transform: translateX(-50%) scaleX(0);
  transform-origin: left center;

  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 8'%3E%3Cpath d='M1 4 C6 0 11 8 16 4 S26 0 31 4 S41 8 46 4 S51 0 53 4' fill='none' stroke='%23d9571c' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E")
    center / contain no-repeat;

  transition: transform 0.22s ease, opacity 0.16s ease;
}

.event-page-nav a.active::after,
.event-page-nav a:hover::after,
.event-page-nav a:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) scaleX(1);
}


.with-family-page{--ht-navy:var(--navy);--ht-orange:var(--orange)}
.with-family-page .event-page-header{position:relative;inset:auto;height:auto;margin:0;width:100%;justify-content:space-between;gap:26px;padding:30px 3.5vw 24px}
.with-family-page .event-page-logo{font-size:clamp(11px,1.22vw,18px);letter-spacing:1.2px;gap:12px;line-height:1}
.with-family-page .event-page-logo span{font-size:33px}
.with-family-page .event-page-nav{position:static;width:auto;padding:0;overflow:visible;gap:clamp(20px,3.3vw,50px)}
.with-family-page .event-page-nav a{font-size:clamp(11px,1.15vw,17px);letter-spacing:0;line-height:normal}
.with-family-page .event-page-nav a[aria-current]{text-decoration:none}
@media(max-width:700px){.with-family-page .event-page-header{padding:23px 22px 18px;gap:19px;align-items:center}.with-family-page .event-page-logo{font-size:12px;letter-spacing:1px}.with-family-page .event-page-logo span{font-size:26px}.with-family-page .event-page-nav{gap:clamp(11px,3vw,22px);justify-content:center;flex-wrap:wrap}.with-family-page .event-page-nav a{font-size:10px}.with-family-page .event-page-nav a::after{width:40px;height:6px;top:calc(100% + 2px)}}

.with-family-page .event-page-header{min-height:88px;flex-direction:row}
.with-family-page .event-page-logo{font-weight:700;white-space:nowrap}
.with-family-page .event-page-logo .sun{font-family:Georgia,serif;font-weight:400;line-height:1;margin:0}
.with-family-page .event-page-nav{font-weight:700;flex-wrap:nowrap}
.with-family-page .event-page-nav a{padding:6px 0}
.sounds .caption{max-width:360px}.sounds h2{font-size:clamp(24px,2.3vw,34px);white-space:nowrap}
@media(max-width:700px){.with-family-page .event-page-header{flex-direction:column}.with-family-page .event-page-nav{flex-wrap:wrap}.sounds h2{font-size:clamp(20px,6.1vw,28px)}}