/* ACORNS: a quiet opening built around licensed photographs of Hiroshima. */
html body main > .hero.hero-photographic {
  height: 92svh;
  min-height: 620px;
  background: #f5f3ee;
  align-items: center;
  justify-content: flex-start;
}
html body .hero-photographic .hero-films {
  background: #e8e3db;
  animation: none;
  filter: none;
  transform: none;
}
html body .hero-photographic .hero-photograph,
html body .hero-photographic .hero-photograph img {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
html body .hero-photographic .hero-photograph {
  opacity: 0;
  z-index: 0;
  transition: opacity 1.6s ease-in-out;
}
html body .hero-photographic .hero-photograph.is-current { opacity: 1; z-index: 1; }
html body .hero-photographic .hero-photograph.is-entering { opacity: 1; z-index: 2; }
html body .hero-photographic:not(.photo-moving) .hero-photograph { transition: none; }
html body .hero-photographic .hero-photograph img {
  object-fit: cover;
  object-position: var(--photo-focus, 50% 58%);
  animation: acorns-photo-drift 32s ease-in-out infinite alternate;
  animation-play-state: paused;
  transform-origin: var(--photo-focus, 50% 58%);
}
html body .hero-photographic .hero-stock-sakura { --photo-focus: 68% 58%; }
html body .hero-photographic .hero-stock-islands { --photo-focus: 60% 60%; }
html body .hero-photographic .hero-stock-torii { --photo-focus: 84% 82%; }
html body .hero-photographic .hero-stock-river { --photo-focus: 50% 58%; }
html body .hero-photographic .hero-stock-dome { --photo-focus: 59% 70%; }
html body .hero-photographic .hero-photograph:not(.is-current):not(.is-entering) img { animation: none; }
html body .hero-photographic.photo-moving .hero-photograph.is-current img,
html body .hero-photographic.photo-moving .hero-photograph.is-entering img {
  animation-play-state: running;
}
html body .hero-photographic .hero-films::after {
  background:
    linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.4) 9%, transparent 23%),
    linear-gradient(100deg, rgba(18,16,13,.55), rgba(18,16,13,.16) 54%, transparent 85%);
}
html body .hero-photographic .hero-copy {
  width: 88%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0;
  text-align: left;
  transform: translateY(-12svh);
  text-shadow: 0 2px 22px rgba(18,16,13,.32);
}
html body .hero-photographic .hero-copy h1 {
  color: #fff;
  font-family: var(--acorns-serif);
  font-size: clamp(2.625rem, 4.5vw, 5rem);
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: .065em;
}
html body .hero-photographic .hero-copy h1 .phrase {
  display: block;
  white-space: nowrap;
}
html body main > .hero.hero-photographic::after {
  height: 25%;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.28) 35%, rgba(255,255,255,.88) 78%, #fff 100%);
}
html body .hero-photographic .motion-toggle {
  bottom: 4%;
  color: #292b2a;
  text-shadow: none;
}
html body:has(.hero-photographic) .header:not(.scrolled):not(.menu-active) > .menu {
  --menu-ink: #252525;
  --menu-hover: rgba(110,110,110,.12);
}
html[lang='en'] body .hero-photographic .hero-copy h1 {
  font-size: clamp(2rem, 3.8vw, 4rem);
  line-height: 1.6;
}
html[lang='en'] body .hero-photographic .hero-copy h1 .phrase {
  white-space: normal;
  margin-left: 0;
}
/* Keep the established logo timing; reveal the photograph without a blur pass. */
html.intro-running body .hero-photographic .hero-films {
  animation: acorns-photo-arrival 1.2s cubic-bezier(.4,0,.2,1) 7.05s both;
}
@keyframes acorns-photo-arrival {
  from { opacity: .65; }
  to { opacity: 1; }
}
@keyframes acorns-photo-drift {
  from { transform: scale(1.045); }
  to { transform: scale(1); }
}
@media (max-width: 700px) {
  html body main > .hero.hero-photographic { height: 88svh; min-height: 580px; }
  html body .hero-photographic .hero-copy { width: 86%; transform: translateY(-14svh); }
  html body .hero-photographic .hero-copy h1 {
    font-size: clamp(1.5rem, 7.1vw, 3rem);
    line-height: 1.85;
    letter-spacing: .04em;
  }
  html body .hero-photographic .hero-stock-sakura { --photo-focus: 68% 55%; }
  html body .hero-photographic .hero-stock-islands { --photo-focus: 60% 52%; }
  html body .hero-photographic .hero-stock-torii { --photo-focus: 84% 55%; }
  html body .hero-photographic .hero-stock-river { --photo-focus: 50% 55%; }
  html body .hero-photographic .hero-stock-dome { --photo-focus: 59% 55%; }
  html body main > .hero.hero-photographic::after { height: 22%; }
  html[lang='en'] body .hero-photographic .hero-copy h1 { font-size: clamp(1.5rem, 6.5vw, 2.5rem); }
}
@media (max-height: 500px) and (min-width: 701px) {
  html body main > .hero.hero-photographic { min-height: 460px; }
  html body .hero-photographic .hero-copy { transform: translateY(-4svh); }
}
@media (prefers-reduced-motion: reduce) {
  html body .hero-photographic .hero-photograph { transition: none; }
  html body .hero-photographic .hero-photograph img,
  html.intro-running body .hero-photographic .hero-films {
    animation: none;
    opacity: 1;
    transform: none;
  }
  html body .hero-photographic .motion-toggle { display: none; }
}