/* Bunna's warm courtyard inside the Osavus Worlds presentation. */
.chapter-bunna {
  grid-template-columns:minmax(0, .85fr) minmax(0, 1.25fr);
  gap:clamp(36px, 5vw, 80px);
  padding:30px 0 80px;
  min-height:0;
}

.bunna-copy {
  min-width:0;
}

.bunna-copy .bunna-latest {
  display:flex;
  align-items:center;
  gap:9px;
  margin:32px 0 18px;
  color:#e5bd7e;
  font-size:var(--type-small);
}

.bunna-latest > span {
  font-size:.6rem;
  line-height:1;
}

.bunna-copy h3 {
  margin:0 0 30px;
  max-width:460px;
}

.bunna-copy h3 img {
  width:100%;
}

.bunna-copy .bunna-tagline {
  color:#f7f1e5;
  font-family:var(--editorial);
  font-size:clamp(1.8rem, 1.2rem + 1.5vw, 2.75rem);
  line-height:1.12;
  letter-spacing:-.035em;
  margin-bottom:22px;
}

.bunna-copy > p:not(.bunna-tagline):not(.bunna-latest) {
  max-width:36ch;
}

.bunna-actions {
  display:flex;
  flex-direction:column;
  align-items:start;
  gap:14px;
}

.bunna-actions .launch {
  background:#edcf9a;
  border-color:#edcf9a;
  color:#17231d;
}

.bunna-actions .launch:hover {
  background:#f7dfb7;
  border-color:#f7dfb7;
}

.bunna-availability {
  font-size:var(--type-small);
  color:var(--muted);
}

.bunna-recipe {
  display:flex;
  align-items:center;
  gap:18px;
  width:max-content;
  max-width:100%;
  margin-top:32px;
  padding-top:22px;
  border-top:1px solid var(--line);
}

.bunna-ingredient {
  display:grid;
  justify-items:center;
  gap:5px;
  color:#c7c8bc;
  font-size:.75rem;
  white-space:nowrap;
}

.bunna-ingredient img {
  width:46px;
  height:46px;
  object-fit:contain;
}

.bunna-recipe-arrow {
  color:#b49466;
  margin-top:-22px;
}

.bunna-showcase {
  margin:0;
  min-width:0;
}

.bunna-art {
  position:relative;
  padding-top:90px;
  overflow:hidden;
  border-radius:48% 48% 6px 6px;
  background:#243c31;
  background:radial-gradient(ellipse at 50% 25%, #567052 0%, #294438 60%, #182a23 100%);
}

.bunna-courtyard {
  position:relative;
  aspect-ratio:3 / 2;
  isolation:isolate;
}

.bunna-backdrop {
  width:100%;
  height:100%;
  object-fit:fill;
  /* Soften only the background's upper edge; café layers stay crisp. */
  mask-image:linear-gradient(to bottom, transparent 0%, #000 23%);
}

.bunna-stage {
  position:absolute;
  inset:0;
}

.bunna-stage[hidden] {
  display:none;
}

.bunna-stage img {
  position:absolute;
  max-width:none;
}

.bunna-showcase figcaption {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  padding-top:22px;
}

.bunna-scene-caption {
  display:grid;
  gap:7px;
  color:#c4d0c5;
  font-size:var(--type-small);
}

.bunna-scene-caption .section-label {
  color:#e5bd7e;
}

.bunna-scene-controls {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  flex-shrink:0;
  max-width:100%;
  padding:4px;
  border:1px solid #ffffff36;
  border-radius:30px;
}

.bunna-scene-controls[hidden] {
  display:none;
}

.bunna-scene-controls button {
  min-height:44px;
  padding:9px 14px;
  border:0;
  border-radius:25px;
  background:transparent;
  color:#c4d0d3;
  font-size:var(--type-small);
  line-height:1.3;
}

.bunna-scene-controls button:hover {
  color:#fff;
}

.bunna-scene-controls button[aria-pressed="true"] {
  background:#e9e3d2;
  color:#203729;
}

.chapter-bunna + .world-chapter {
  padding-top:75px;
}

@media(max-width:1100px) {
  .chapter-bunna {
    grid-template-columns:minmax(0, 1fr) minmax(0, 1.1fr);
    gap:35px;
  }

  .bunna-art {
    padding-top:70px;
  }

  .bunna-showcase figcaption {
    flex-direction:column;
    align-items:start;
  }
}

@media(max-width:760px) {
  .chapter-bunna {
    grid-template-columns:minmax(0, 1fr);
    gap:32px;
    padding:0 0 45px;
  }

  .bunna-copy h3 {
    max-width:430px;
    margin-bottom:24px;
  }

  .bunna-copy .bunna-latest {
    margin-top:25px;
  }

  .bunna-recipe {
    margin-top:24px;
    gap:24px;
  }

  .bunna-art {
    padding-top:clamp(40px, 10vw, 70px);
  }

  .bunna-showcase figcaption {
    align-items:center;
    text-align:center;
    gap:16px;
  }

  .chapter-bunna + .world-chapter {
    padding-top:45px;
  }
}

@media(forced-colors:active) {
  .bunna-scene-controls button[aria-pressed="true"] {
    outline:2px solid ButtonText;
  }
}