/* The same panoramic composition as pond.css: clear artwork, fading paint at the edges. */
:root { --paper: #E8F4EF; }
html[data-audience=kids] { --paper: #EDF4FC; }
.hero {
  display: block;
  width: 100%;
  padding: 0;
  /* Horizontal clip only: the masked sky may rise softly behind the family switcher. */
  overflow-x: clip;
  overflow-y: visible;
}
.hero-layout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 48px;
  align-items: center;
  padding-block: 62px 94px;
}
.hero-layout > .hero-copy { position: relative; z-index: 2; pointer-events: auto; }
.hero .goose-scene {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 1.12 / 1;
  isolation: auto;
  z-index: 1;
}
.hero .goose-scene::before { content: none; }
.hero .world-backdrop {
  position: absolute;
  left: -125%;
  top: -42%;
  bottom: auto;
  width: 280%;
  max-width: none;
  height: 180%;
  transform: none;
  filter: none;
  opacity: 1;
  mask: none;
  z-index: -1;
}
.hero .hero-goose {
  width: 56%;
  height: auto;
  aspect-ratio: 1;
  right: -6%;
  bottom: 6%;
}
.hero .scene-label {
  font-size: clamp(15px, 1.5vw, 19px);
  max-width: min(330px, calc(100% - 24px));
  padding: 12px 20px;
  line-height: 1.35;
}
.hero .farm-hotspot { left: 0; top: 21%; width: 29%; height: 43%; }
.hero .play-hotspot { left: 0; top: 29%; width: 36%; height: 43%; }
.world-swing { transform-origin: 835px 300px; }
.world-butterfly, .world-birds { opacity: 0; pointer-events: none; }
.butterfly-wing { transform-box: view-box; transform-origin: 0 0; }
.world-awake .butterfly-wing { animation: butterfly-wings .19s ease-in-out infinite alternate; }
.world-awake .butterfly-wing-right { animation-delay: -.04s; }
@keyframes butterfly-wings { from { scale: 1 1; } to { scale: .2 1; } }
.world-grass { transform-box: fill-box; transform-origin: 50% 100%; }
.world-awake .world-grass { animation: meadow-breeze 8s ease-in-out infinite; }
.world-awake .world-grass:nth-last-of-type(2n) { animation-delay: -3s; }
@keyframes meadow-breeze { 0%,100% { rotate: -2deg; } 50% { rotate: 4deg; } }
.studio-header nav>a, .studio-language summary {
  border: 0;
  background: #fff;
  font: 700 15px/1 var(--body);
  min-height: 44px;
}
.studio-header nav>a { padding-inline: 17px; }
.studio-header nav>a:hover, .studio-language summary:hover { color: var(--orange); background: #fff; }
.studio-language-menu a:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.studio-principles { border-top: 1px solid var(--line); padding-block: 57px 76px; }
.studio-principles h2 { max-width: 680px; font-size: clamp(30px, 3.5vw, 42px); margin-bottom: 27px; }
.studio-principles .principles-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 42px; }
.studio-principle { min-width: 0; }
.studio-principle .principle-art { display: block; width: 100%; height: auto; margin: 0 0 18px; }
.studio-principle h3 { font-size: 26px; line-height: 1.25; margin: 0 0 15px; letter-spacing: -.4px; }
.studio-principles .studio-principle p { display: block; border: 0; border-radius: 0; padding: 0; background: none; font-size: 16px; line-height: 1.9; color: var(--muted); }
@media (min-width:861px) and (max-width:1199px) {
  .hero .hero-goose { right: 2%; }
}
@media (max-width:860px) {
  .hero-layout { grid-template-columns: minmax(0,1fr); gap: 12px; padding-block: 26px 64px; }
  .hero .goose-scene { order: -1; max-width: 650px; justify-self: center; aspect-ratio: 1.42 / 1; }
  .hero .world-backdrop { left: -12%; top: -12%; width: 124%; height: 137%; }
  .hero .hero-goose { width: 39%; right: 13%; bottom: 4%; }
  .hero .scene-label { max-width: min(330px, calc(100% - 24px)); font-size: clamp(15px, 2.8vw, 20px); }
  .studio-principles .principles-list { gap: 25px; }
  .studio-principle h3 { font-size: 23px; }
}
@media (max-width:650px) {
  .audience-buttons > button { gap: 5px; padding-inline: 6px; }
  .audience-buttons > button > span { font-size: 20px; }
  .audience-buttons img { width: 36px; height: 36px; }
  .studio-principles .principles-list { grid-template-columns: 1fr; gap: 35px; }
  .studio-principle { display: grid; grid-template-columns: minmax(0, 1fr); }
  .studio-principle .principle-art { max-width: 330px; justify-self: center; margin-bottom: 15px; }
  .studio-principle h3 { font-size: 26px; }
  .studio-principles { padding-top: 40px; }
  .studio-principles h2 { margin-bottom: 12px; }
}
@media (max-width:480px) {
  .hero-layout { padding-top: 15px; }
  .hero .goose-scene { aspect-ratio: 1.15 / 1; }
  .hero .world-backdrop { left: -72%; top: -19%; width: 184%; height: 138%; }
  .hero .hero-goose { width: 47%; right: 27%; bottom: 6%; }
  .hero .scene-label { font-size: 14px; padding: 10px 16px; max-width: calc(100% - 24px); }
}
@media (min-width:481px) and (max-width:600px) { .hero .hero-goose { right: 30%; } }
@media (max-width:380px) {
  .audience-buttons > button { gap: 4px; padding-inline: 4px; }
  .audience-buttons > button > span { font-size: 17px; }
  .audience-buttons img { width: 30px; height: 30px; }
}

/* A single travelling selection surface keeps the family navigation compact. */
.audience-buttons { position: relative; isolation: isolate; width: min(490px,100%); gap: 0; padding: 5px; border-radius: 25px; touch-action: pan-y; }
.audience-thumb { position: absolute; left: 5px; top: 5px; bottom: 5px; width: calc((100% - 10px) / 2); border: 2px solid var(--ink); border-radius: 18px; background: var(--action); pointer-events: none; transition: transform .34s cubic-bezier(.22,.8,.3,1); z-index: 0; }
html[data-audience=kids] .audience-thumb { transform: translateX(100%); }
.audience-buttons > button, .audience-buttons > button[aria-pressed=true], .audience-buttons > button:hover { position: relative; z-index: 1; min-height: 65px; padding: 7px 12px; gap: 9px; background: transparent; border: 2px solid transparent; border-radius: 18px; }
.audience-buttons > button > span { font-size: 24px; }
.audience-buttons img { width: 45px; height: 45px; }
.audience-buttons > button:focus-visible { outline: 2px solid var(--ink); outline-offset: -4px; }
.studio-illustration img { width: 100%; height: auto; }
.apps-section .section-heading { margin-bottom: 18px; }
.family-description { max-width: 870px; margin-bottom: 34px; }
.family-description p { margin: 0 0 17px; font-size: 17px; line-height: 1.9; color: var(--muted); }
.family-description p:last-child { margin-bottom: 0; }
@media(min-width:861px) { .family-description { columns: 2; column-gap: 42px; max-width: none; } .family-description p { break-inside: avoid; } }
@media(max-width:650px) {
  .audience-buttons { width: min(420px,100%); border-radius: 22px; }
  .audience-buttons > button, .audience-buttons > button[aria-pressed=true], .audience-buttons > button:hover { min-height: 57px; gap: 6px; padding-inline: 6px; }
  .audience-buttons > button > span { font-size: 20px; }
  .audience-buttons img { width: 34px; height: 34px; }
  .audience-thumb { border-radius: 15px; }
}
@media(max-width:380px) {
  .audience-buttons > button, .audience-buttons > button[aria-pressed=true], .audience-buttons > button:hover { min-height: 53px; gap: 4px; padding-inline: 3px; }
  .audience-buttons > button > span { font-size: 17px; }
  .audience-buttons img { width: 30px; height: 30px; }
}

.flock-wing { transform-box: fill-box; transform-origin: 70% 100%; }
.world-awake .flock-wing { animation: flock-flap 1.1s ease-in-out infinite; animation-delay: var(--flap-delay); }
@keyframes flock-flap { 0%,100% { scale: 1 1; } 50% { scale: 1 -.7; } }
@media(prefers-reduced-motion:reduce) { .flock-wing, .butterfly-wing { animation: none!important; } }

/* Side notes sit within their heading's height; column headings share a row so body copy starts level. */
@media(min-width:861px) {
  .section-heading { align-items: end; }
  .section-heading>p { max-width: 440px; }
  .studio-principles .principles-list { grid-template-rows: auto auto 1fr; row-gap: 0; }
  .studio-principle { display: grid; grid-row: span 3; grid-template-rows: subgrid; }
  .studio-principle h3 { align-self: start; }
}