:root {
  color-scheme: light;
  font-family: Georgia, 'Times New Roman', serif;
  color: #244562;
  background: #d7e5ef;
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; }
.scene {
  position: relative;
  min-height: 700px;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
}
.landscape, .veil { position: absolute; inset: 0; z-index: -1; }
.landscape {
  transform-origin: 65% 55%;
  animation: drift 22s ease-in-out infinite;
  will-change: transform;
}
.landscape img { width: 100%; height: 100%; object-fit: cover; object-position: 60% center; }
.veil {
  background: linear-gradient(90deg, rgba(233,243,249,.58), rgba(229,240,245,.28) 31%, transparent 57%);
}
.intro {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(100% - 48px);
  transform: translate(-50%, -50%);
  text-align: center;
}
h1 {
  margin: 0 0 34px;
  font-size: clamp(100px, 11.5vw, 190px);
  font-weight: 400;
  letter-spacing: -.065em;
  line-height: .87;
}
.japanese {
  margin: 0 0 21px;
  font-family: 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  font-size: 27px;
  line-height: 1.5;
  letter-spacing: .26em;
}
.subtitle {
  margin: 0;
  font: 400 14px/1.6 Arial, sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
}
@keyframes drift {
  0%, 100% { transform: scale(1.025) translate3d(0, 0, 0); }
  50% { transform: scale(1.065) translate3d(-.45%, -.65%, 0); }
}
@media (max-width: 700px) {
  .scene { min-height: 600px; }
  h1 { font-size: clamp(86px, 19vw, 125px); line-height: .88; margin-bottom: 22px; }
  .japanese { font-size: 21px; margin-bottom: 11px; }
  .subtitle { font-size: 12px; letter-spacing: .14em; }
  .landscape { top: 31%; left: -9%; right: -9%; }
  .landscape img { object-position: 67% center; }
  .veil { background: linear-gradient(180deg, #d7e5ef 0%, #d7e5ef 27%, rgba(215,229,239,.86) 34%, transparent 51%); }
}
@media (min-width: 701px) and (max-height: 700px) {
  .scene { min-height: 540px; }
  h1 { font-size: min(11.5vw, 24vh); margin-bottom: 24px; }
  .japanese { margin-bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .landscape { animation: none; transform: scale(1.025); }
}