/* Select the layout in CSS before first paint; JavaScript only adds scroll motion. */
@media(min-width:900px) and (min-height:640px) and (prefers-reduced-motion:no-preference){
html .hero-image{height:130%;top:-15%}
html .intro-story{position:relative;isolation:isolate}
html .intro-heading{position:sticky;top:clamp(110px,16svh,150px);z-index:1}
html .intro-heading .intro-text{max-width:720px}
html .photo-composition{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  grid-template-rows:repeat(30,5svh);
  gap:0 2vw;
  align-items:start;
  margin-top:14svh;
  padding:0;
  text-align:left;
}
html .photo-composition .scene-photo{position:relative;align-self:start;width:100%;min-width:0;margin:0;padding:0}
html .composition-right{grid-column:9/13;grid-row:1;z-index:2;max-width:42svh;justify-self:end}
html .composition-left{grid-column:1/5;grid-row:8;z-index:3;max-width:37.5svh}
html .composition-center{grid-column:5/10;grid-row:14;z-index:4;max-width:50.6svh;justify-self:center}
html .scene-photo img{width:100%;height:auto;opacity:.9;object-fit:cover}
html .scene-photo figcaption{display:inline-block;max-width:100%;margin-top:0;padding:7px 10px;background:var(--paper);color:var(--muted);font-size:11px;line-height:1.6}
html .intro-story::after{
  content:'';
  position:absolute;
  z-index:8;
  left:0;
  right:0;
  bottom:0;
  height:38svh;
  background:linear-gradient(180deg,rgba(241,234,218,0),var(--paper) 65%,var(--paper));
  pointer-events:none;
}
html .intro-end{position:relative;margin-top:35px}
}