/* Fit the photographs and illustrations to their intrinsic proportions. */
img { height: auto; }

.hero-title {
  left: max(7vw, calc((100vw - 1440px) / 2 + 64px));
  top: 48%;
}
.hero-title h1 { font-size: clamp(100px, 11.5vw, 180px); }
.hero-portrait {
  left: 67%;
  top: 49%;
  width: min(34vw, 44svh, 480px);
  height: auto;
  max-height: none;
  aspect-ratio: 2 / 3;
  border-radius: 24px;
  background: #f5e7db;
}
.hero-portrait img {
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: contain;
  object-position: center;
}
.hero-age { top: 46%; font-size: min(58vw, 96svh); }
.hero-foot { bottom: max(42px, calc(var(--safe-bottom) + 26px)); }

.gallery-title { top: 9%; font-size: clamp(68px, 7.5vw, 120px); }
.memory-card {
  top: 57%;
  width: min(28vw, 36svh, 400px);
  height: auto;
  max-height: none;
  padding: 10px 10px 0;
}
.memory-card .photo-button {
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
}
.memory-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.memory-wide { width: min(52vw, 73svh, 720px); }
.memory-wide .photo-button { aspect-ratio: 3 / 2; }
.memory-card figcaption { height: 36px; }

.message-orbit { left: 61%; }
.proud-title { font-size: clamp(80px, 9.2vw, 150px); }
.bear-orbit { width: min(39vw, 49svh, 520px); }
.bear-card {
  border-radius: 22px;
  border: 8px solid #fff9f1;
  overflow: hidden;
  transform: rotate(3deg);
  background: #fff9f1;
}
.bear-card img {
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  border-radius: 14px;
}
.shin-sticker {
  width: min(12vw, 16svh, 170px);
  top: 67%;
  left: 23%;
  border-radius: 5px;
}
.shin-sticker img {
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
}
.shin-sticker span { padding: 8px 0; }
.orbit-heart { font-size: clamp(40px, 5vw, 78px); left: -13%; }
.little-wish { font-size: 12px; }

.finale { padding-top: 110px; }
.finale h2 { font-size: clamp(84px, 9vw, 142px); }
.blow-scene { width: min(800px, 82vw); height: min(42vw, 400px); margin-top: 16px; }
.finale footer { padding-bottom: max(30px, calc(var(--safe-bottom) + 20px)); }

@media (min-width: 768px) and (max-height: 700px) {
  .masthead { height: 72px; }
  .hero-title h1 { font-size: min(11.5vw, 21svh); }
  .hero-portrait { width: min(30vw, 42svh); }
  .gallery-title { top: 9%; font-size: 13svh; }
  .memory-card { width: min(26vw, 33svh); top: 56%; }
  .memory-wide { width: min(50vw, 67svh); }
  .proud-title { font-size: min(9vw, 17svh); }
  .bear-orbit { width: 47svh; }
  .shin-sticker { width: 14svh; top: 66%; }
  .chapter-label { top: 24px; }
}

@media (min-width: 768px) and (max-width: 1023px) and (min-height: 701px) {
  .hero-portrait { left: 65%; width: min(37vw, 42svh); }
  .hero-title { left: 6%; }
  .hero-title h1 { font-size: 13vw; }
  .hero-subline { font-size: 11px; }
  .memory-card { width: min(38vw, 36svh); }
  .memory-wide { width: min(68vw, 73svh); }
  .proud-title { font-size: 9.5vw; }
}

@media (max-width: 767px) {
  .masthead { height: 70px; }
  .hero { height: 275svh; }
  .hero-title { left: 7%; top: 75%; width: 88%; }
  .hero-title h1 { font-size: clamp(72px, 24vw, 128px); line-height: 1.17; }
  .hero-title .eyebrow { font-size: 8px; letter-spacing: .22em; }
  .hero-subline { font-size: 11px; margin-top: 3px; }
  .hero-portrait {
    left: 55%;
    top: 39%;
    width: min(64vw, 34svh, 330px);
    height: auto;
    max-height: none;
    aspect-ratio: 2 / 3;
    border-radius: 18px;
  }
  .hero-age { top: 40%; font-size: 98vw; }
  .spark-a { top: 23%; left: 84%; font-size: 29px; }
  .spark-b { top: 48%; left: 9%; font-size: 20px; }
  .hero-foot { left: 6%; right: 6%; bottom: max(28px, calc(var(--safe-bottom) + 20px)); }
  .hero-edition { font-size: 6px; letter-spacing: .1em; }
  .scroll-cue { font-size: 7px; gap: 8px; }
  .hero-year { font-size: 7px; }
  .chapter-label { top: 25px; font-size: 7px; }
  .gallery { height: 330svh; }
  .gallery-title { top: 11%; font-size: clamp(53px, 18vw, 94px); }
  .memory-card {
    width: min(74vw, 36svh, 340px);
    height: auto;
    max-height: none;
    top: 55%;
    padding: 7px 7px 0;
  }
  .memory-wide { width: min(85vw, 72svh, 520px); }
  .memory-card figcaption { height: 31px; font-size: 6px; }
  .memory-card .photo-button { height: auto; }
  .gallery-bottom { bottom: max(35px, calc(var(--safe-bottom) + 25px)); }
  .gallery-bottom>span:last-child { font-size: 6px; letter-spacing: .08em; }
  .message { height: 225svh; }
  .message-orbit { left: 50%; }
  .proud-title { font-size: clamp(54px, 15.5vw, 86px); line-height: 1.12; }
  .bear-orbit { width: min(72vw, 37svh, 380px); }
  .bear-card { border-width: 6px; border-radius: 18px; }
  .bear-card img { border-radius: 12px; }
  .shin-sticker { left: 6%; top: 72%; width: min(24vw, 15svh, 120px); padding: 5px 5px 0; }
  .shin-sticker span { font-size: 5px; padding: 7px 0; }
  .little-wish { font-size: 11px; bottom: max(42px, calc(var(--safe-bottom) + 28px)); }
  .finale { min-height: 100svh; padding: 100px 6vw 0; }
  .finale h2 { font-size: clamp(64px, 19vw, 104px); margin-top: 6px; line-height: 1.04; }
  .finale h2 em { display: block; }
  .blow-scene {
    width: 100vw;
    height: min(70vw, 340px);
    margin-top: 24px;
    margin-left: -6vw;
    left: 0;
  }
  .cake-assembly { width: 60%; left: 1%; }
  .bubu-character { width: 47%; right: 0; }
  .finale .bubu-character { bottom: 14%; }
  .blow-button { margin-top: 26px; min-height: 52px; }
  .finale footer { margin-top: 65px; padding-bottom: max(44px, calc(var(--safe-bottom) + 30px)); }
  .photo-dialog { width: 94vw; max-height: 92svh; }
  .photo-dialog>img { max-height: 72svh; width: auto; height: auto; object-fit: contain; }
}

@media (max-width: 767px) and (max-height: 610px) {
  .hero-title h1 { font-size: 22vw; }
  .hero-title { top: 75%; }
  .hero-portrait { width: 32svh; top: 39%; }
  .hero-subline { font-size: 9px; }
  .hero-foot { bottom: 22px; }
  .gallery-title { top: 10%; font-size: 17vw; }
  .memory-card { width: min(70vw, 34svh); top: 54%; }
  .memory-wide { width: min(83vw, 70svh); }
  .proud-title { font-size: 15vw; }
  .bear-orbit { width: 34svh; }
  .shin-sticker { top: 72%; width: 13svh; }
  .gallery-bottom>span:last-child { display: none; }
  .finale { padding-top: 88px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-title { top: 48% !important; }
  .hero-portrait { border-radius: 22px !important; }
  .memory-card { position: relative; flex: 0 0 min(70vw, 34svh, 370px); top: auto; width: min(70vw, 34svh, 370px); height: auto; }
  .memory-wide { flex-basis: min(82vw, 68svh, 650px); width: min(82vw, 68svh, 650px); }
  .proud-title { left: 27% !important; top: 40% !important; transform: translate(-50%,-50%) scale(.64) !important; }
  .bear-orbit { left: 70% !important; top: 54% !important; }
  .gallery-title { position: relative; top: auto; }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .hero-title { top: 75% !important; }
  .proud-title { left: 50% !important; top: 22% !important; transform: translate(-50%,-50%) scale(.67) !important; }
  .bear-orbit { left: 55% !important; top: 54% !important; }
}