@font-face {
  font-family: "Alegreya Sans";
  src: url("/media/AlegreyaSans-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}
:root {
  color-scheme: light;
  --paper: #f4f0e5;
  --white: #fffdf6;
  --forest: #294f44;
  --ink: #1b382e;
  --muted: #4f6053;
  --line: #d5d9c8;
  --moss: #e4ead5;
  --focus: #92531c;
  --heading: "Alegreya Sans", system-ui, sans-serif;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 1rem/1.55 system-ui, sans-serif;
}
img, video { display: block; max-inline-size: 100%; }
a { color: inherit; text-underline-offset: .2em; }
button, summary { font: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.shell { inline-size: min(1050px, calc(100% - clamp(2rem, 8vw, 7rem))); margin-inline: auto; }
.skip { position: absolute; inset: .5rem auto auto .5rem; z-index: 3; padding: .75rem; background: var(--white); }
.skip:not(:focus) { clip-path: inset(50%); }
.top, .foot { display: flex; gap: 1rem; align-items: center; justify-content: space-between; padding-block: .85rem; }
.top { border-bottom: 1px solid var(--line); }
.brand { display: grid; gap: .05rem; color: var(--forest); text-decoration: none; }
.wordmark { display: flex; align-items: center; font: 700 2.5rem/.95 var(--heading); }
.wordmark img { block-size: 1.24em; inline-size: .54em; margin-inline-end: -.07em; }
.tagline { color: #556456; font-size: .73rem; white-space: nowrap; }
.language { position: relative; z-index: 2; }
.language summary { display: flex; align-items: center; gap: .45rem; min-block-size: 44px; padding: .5rem .65rem; border: 1px solid var(--line); border-radius: .5rem; list-style: none; font-size: .84rem; font-weight: 650; }
.language summary span, .language a { white-space: nowrap; }
.language { inline-size: 11.5rem; flex: none; }
.language summary::-webkit-details-marker { display: none; }
.language summary::after { content: ""; border-inline: .27rem solid transparent; border-block-start: .32rem solid currentColor; margin-inline-start: auto; }
.language nav { position: absolute; inset: calc(100% + .4rem) 0 auto auto; min-inline-size: 11.5rem; padding: .3rem; background: var(--white); border: 1px solid var(--line); border-radius: .65rem; box-shadow: 0 8px 24px #1b382e14; }
.language a { display: flex; align-items: center; gap: .65rem; padding: .6rem .7rem; border-radius: .35rem; text-decoration: none; }
.language a:hover, .language a[aria-current] { background: var(--moss); }
.flag { inline-size: 19px; block-size: 13px; flex: none; border-radius: 2px; box-shadow: 0 0 0 1px #26392a21; }
.stage {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: #9d9a69;
}
.habitat, .stage::before { position: absolute; inset: 0; z-index: -1; }
.habitat img { width: 100%; height: 100%; object-fit: cover; object-position: 50% top; }
.stage::before {
  content: "";
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(0deg, transparent 48%, #29351f0d);
}
.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 430px);
  justify-content: center;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 3.25rem);
  padding-block: clamp(1.65rem, 4vw, 3.5rem);
}
h1, h2 { margin: 0; font-family: var(--heading); font-weight: 700; line-height: 1.04; }
h1 { font-size: clamp(2.45rem, 5.1vw, 4.25rem); text-wrap: pretty; }
h2 { font-size: clamp(1.5rem, 2.8vw, 2.1rem); }
.mascot { --mascot-size: clamp(110px, 10vw, 155px); position: absolute; z-index: -2; pointer-events: none; inline-size: var(--mascot-size); inset: 29% calc(100% - var(--mascot-size) * .14) auto auto; }
.mascot img { width: 100%; height: auto; filter: drop-shadow(2px 3px 2px #30281738); }
/* Body sits behind the timber; only the gripping hands cross its front edge. */
.mascot-grip { z-index: 1; clip-path: polygon(76% 25%, 100% 25%, 100% 55%, 76% 55%, 76% 44%, 99% 44%, 99% 35%, 76% 35%); }
.demo {
  --poster-shade: #23302424;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-areas: "caption" "player";
  min-inline-size: 0;
  margin: 0;
  padding: 17% 12% 9%;
}
.board-wood {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: url("/media/zoo-board-sunlit.webp") center / 100% 100% no-repeat;
  filter: drop-shadow(5px 10px 7px #30281852);
  pointer-events: none;
}
.board-legs {
  position: absolute;
  z-index: -3;
  inset: auto 0 0;
  pointer-events: none;
}
.board-legs::before, .board-legs::after {
  content: "";
  position: absolute;
  inset-block-start: -22px;
  inline-size: clamp(16.1px, 5.75%, 25.3px);
  block-size: 200px;
  transform-origin: center top;
  border-radius: 2px;
  background:
    linear-gradient(180deg, #301b0cca, transparent 58px),
    linear-gradient(90deg, #fbe5a652, transparent 36%, #2f1b0dc2),
    url("/media/zoo-board-thin-oak.webp") var(--post-grain) / 3000% 850px no-repeat #a97443;
  box-shadow: 4px 3px 7px #36271065;
}
.board-legs::before {
  --post-grain: 2.7% 37%;
  inset-inline-start: 19%;
  rotate: 6deg;
  clip-path: polygon(0 0, 100% 0, 86% 100%, 8% 100%);
}
.board-legs::after {
  --post-grain: 96.5% 65%;
  inset-inline-end: 19%;
  rotate: -6deg;
  inline-size: clamp(16.1px, 5.52%, 24.15px);
  clip-path: polygon(0 0, 100% 0, 95% 100%, 17% 100%);
}
.demo[data-frame="oak"] .board-wood { background-image: url("/media/zoo-board-oak.webp"); }
.demo[data-frame="logs"] .board-wood { background-image: url("/media/zoo-board-logs.webp"); }
.demo[data-frame^="thin-"] { padding: 10% 7% 6%; }
.demo[data-frame^="thin-"] .board-wood {
  background: none;
  border-image-slice: 9% 10% 7% fill;
  border-image-width: 7% 7% 5%;
}
.demo[data-frame="thin-oak"] { padding-block-end: 9%; }
.demo[data-frame="thin-oak"] .board-wood {
  border-image-source: url("/media/zoo-board-thin-oak.webp");
  border-image-width: 7% 7% 7.5%;
  /* Back the join so fractional scaling cannot expose the habitat. */
  background: linear-gradient(#e9d7bb, #e9d7bb) center calc(92.5% + 2px) / 87% 5px no-repeat;
}
.demo[data-frame="thin-logs"] .board-wood { border-image-source: url("/media/zoo-board-thin-logs.webp"); }
.demo[data-frame="thin-cedar"] .board-wood { border-image-source: url("/media/zoo-board-thin-cedar.webp"); }
.demo[data-frame^="thin-"] .zoo-sign { inset-block-start: 3.7%; inset-inline-end: 10%; width: clamp(27px, 4vw, 38px); }
.film-screen:has(.play:not([hidden]))::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: var(--poster-shade);
}
.player { grid-area: player; min-inline-size: 0; padding: 5px clamp(8px, 1.8vw, 13px) clamp(8px, 1.8vw, 13px); background: transparent; }
.film-screen { position: relative; overflow: hidden; border: 1px solid transparent; }
.film-screen.has-started { border-color: var(--poster-shade); }
video { inline-size: 100%; block-size: auto; aspect-ratio: 9 / 11; }
.demo-caption { grid-area: caption; display: flex; align-items: center; min-block-size: 60px; background: transparent; padding: .65rem .85rem; }
.demo-label { font: 700 clamp(1.35rem, 2.8vw, 1.65rem)/1.15 Georgia, serif; }
.demo[data-lettering="sans"] .demo-label { font-family: "Trebuchet MS", sans-serif; letter-spacing: .015em; }
.demo[data-lettering="slab"] .demo-label { font-family: Rockwell, "Courier New", serif; letter-spacing: -.035em; }
.zoo-sign {
  position: absolute;
  inset-block-start: 6.4%;
  inset-inline-end: 15%;
  width: clamp(36px, 5vw, 46px);
  height: auto;
  transform: translateY(-50%);
  opacity: .65; mix-blend-mode: multiply;
  filter: drop-shadow(0 1px #e0b88d);
}
.play {
  position: absolute;
  z-index: 2;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: clamp(60px, 8vw, 72px);
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid #f4f0e568;
  border-radius: 50%;
  color: #fffdf6;
  background: var(--forest);
  box-shadow: 0 .2rem .75rem #1a312464;
}
.play:hover { background: #183b30; }
.play[hidden] { display: none; }
.play svg { margin-inline-start: 2px; }
video::cue { color: white; background: #173b32; line-height: 1.4; }
.links { display: grid; justify-items: center; gap: .85rem; padding: 0 0 2.2rem; }
.links > div { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .7rem; }
.stores img { block-size: 42px; inline-size: auto; }
.social a { display: grid; place-items: center; inline-size: 46px; block-size: 46px; }
.social img { inline-size: 24px; block-size: 24px; }
.audience { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); align-items: baseline; gap: .65rem 1.5rem; padding-block: clamp(1.35rem, 3vw, 2.4rem); }
.audience p { margin: 0; color: var(--muted); max-inline-size: 59ch; }
.download-row { grid-column: 1 / -1; display: grid; grid-template-columns: 140px minmax(0, 1fr); align-items: center; gap: clamp(1.25rem, 3vw, 2rem); margin-block-start: .7rem; }
.store-badges { display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; flex: none; }
.store-badges span { display: grid; place-items: center; width: 140px; height: 46.8px; overflow: hidden; border-radius: 7px; background: #000; border: 1px solid #a6a6a6; }
.store-badges img { width: 100%; height: auto; clip-path: inset(1px round 5px); }
.store-badges span:first-child { overflow: hidden; }
.store-badges span:first-child img { max-inline-size: none; width: 160.355px; height: auto; margin: -10.178px; clip-path: inset(13px 12px); }
.download-icons { display: grid; gap: 1rem; }
.social-icons { display: flex; justify-content: center; gap: .75rem; }
.social-icons span { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 7px; }
.social-icons img { width: 23px; height: 23px; opacity: .78; }
.unavailable { position: relative; }
.unavailable::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 50%;
  height: 8px;
  background: repeating-linear-gradient(135deg, #171714 0 7px, #ffda21 7px 14px);
  /* skewY keeps both ends vertical while the tape rises to the right. */
  transform: translateY(-50%) skewY(-6deg);
  pointer-events: none;
}
.social-icons .unavailable::after { height: 6px; }
.tickets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; min-inline-size: 0; }
.tickets img { width: 100%; height: auto; filter: drop-shadow(0 3px 2px #54371920); }
.game-ticket { position: relative; container-type: inline-size; }
.ticket-heads { position: absolute; inset: 58% 31% 12% 10%; display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(2, 1fr); align-items: center; justify-items: center; gap: 2%; }
.ticket-heads span { width: 5cqw; height: 5cqw; background: #24391e; opacity: .72; mask: var(--head) center / contain no-repeat; }
.ticket-mini .ticket-heads { inset: 58% 36% 12% 15%; grid-template-columns: repeat(4, 1fr); grid-template-rows: 1fr; }
.ticket-mini .ticket-heads span { width: 6.5cqw; height: 6.5cqw; background: #58371e; }
.review { padding-block: 2rem; }
.review > h1 { font-size: clamp(2rem, 5vw, 3rem); }
.review > p { max-width: 65ch; color: var(--muted); }
.review-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; margin-block: 2rem; }
.review-card { min-width: 0; padding: 1.25rem; border: 1px solid var(--line); border-radius: .5rem; }
.review-card h2 { display: flex; align-items: center; gap: .6rem; }
.review-card .tickets { grid-template-columns: 1fr; margin-block: 1rem; }
.review-card nav { display: flex; flex-wrap: wrap; gap: .5rem 1rem; font-size: .9rem; }
@media (max-width: 720px) { .review-grid { grid-template-columns: 1fr; } }
@media (max-width: 900px) {
  .tickets { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .download-row { grid-template-columns: minmax(0, 1fr); }
  .download-icons { grid-template-columns: 140px minmax(0, 1fr); align-items: center; gap: 1rem; }
}
.foot { flex-wrap: wrap; border-top: 1px solid var(--line); font-size: .88rem; padding-block: 1.25rem; }
.foot nav { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; }
.legal { max-inline-size: 48rem; padding-block: clamp(2rem, 6vw, 4rem); overflow-wrap: anywhere; }
.legal h1 { font-size: clamp(2rem, 6vw, 3.4rem); }
.legal h2 { font-size: 1.35rem; margin-block-start: 1.55rem; }
.legal p { margin-block: .55rem 0; }
.legal .notice { background: var(--moss); border: 1px solid var(--line); border-radius: .65rem; padding: .8rem 1rem; margin-block: 1rem; }
@media (max-width: 720px), (orientation: portrait) and (max-width: 900px) {
  .habitat img { object-position: 24% top; }
  .hero {
    --stage-gap: clamp(1.65rem, 4vw, 3.5rem);
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    inline-size: min(530px, calc(100% - 2 * clamp(2rem, 8vw, 7rem)));
    padding-block: calc(clamp(8.5rem, 28vw, 12rem) + var(--stage-gap)) calc(2 * var(--stage-gap));
  }
  .mascot { --mascot-size: clamp(150px, 40vw, 215px); inset: auto 8% calc(100% - var(--mascot-size) * .08) auto; }
  .mascot-grip { clip-path: none; mask: linear-gradient(#000 0 0) 8% 100% / 21% 35% no-repeat, linear-gradient(#000 0 0) 69% 100% / 23% 35% no-repeat, linear-gradient(#000 0 0) 41% 100% / 14% 35% no-repeat; }
  .audience { grid-template-columns: 1fr; }
}
@media (max-width: 380px) {
  .top { gap: .5rem; }
  .wordmark { font-size: 2.15rem; }
  .tagline { font-size: .59rem; }
  .language summary { gap: .3rem; padding-inline: .4rem; font-size: .76rem; }
  .demo-caption { padding-inline: .55rem; }
}
@media (max-width: 340px) {
  .top { flex-wrap: wrap; }
  .top .language { margin-inline-start: auto; }
}
@media (max-width: 720px) and (prefers-reduced-motion: no-preference),
       (orientation: portrait) and (max-width: 900px) and (prefers-reduced-motion: no-preference) {
  .demo { translate: 0 var(--board-slide, 0px); }
}
@media (min-width: 721px) and (orientation: landscape), (min-width: 901px) { .hero { justify-content: end; padding-inline-end: clamp(0px, 5vw, 5rem); } }