/* Mobile composition and intrinsic image frames, 2026-10-30.
   Keep sizing in normal flow; HTML image dimensions must not set grid row height. */
.gallery-item {
  display:block;
  width:100%;
  min-width:0;
  min-height:0;
  height:auto;
  padding:0;
  aspect-ratio:auto;
  align-self:start;
  isolation:isolate;
}
.gallery-item::before {
  content:"";
  display:block;
  padding-top:86.956522%;
}
.gallery-item>img {
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  max-height:100%;
  aspect-ratio:auto;
  object-fit:cover;
}
.hero-heading { display:contents; }

@media (max-width:640px) {
  .site-header,.site-header.is-fixed { height:66px; }

  /* Show the complete supplied landscape artwork. Its intrinsic height owns
     the first grid row, so neither a viewport height nor the copy can crop it. */
  .hero {
    display:grid;
    grid-template-columns:minmax(0,1fr);
    height:auto;
    min-height:0;
    max-height:none;
    padding:66px 0 24px;
    gap:0;
    background:#2b190f;
  }
  .hero-photo {
    position:relative;
    inset:auto;
    grid-area:1 / 1;
    z-index:0;
    width:100%;
    height:auto;
    aspect-ratio:auto;
    overflow:hidden;
  }
  .hero-photo .hero-scene {
    position:relative;
    inset:auto;
    width:100%;
    height:auto;
    max-height:none;
    aspect-ratio:1530 / 823;
    object-fit:contain;
    object-position:center;
    scale:1;
    transform:none;
  }
  .hero-photo::after { display:none; }
  .hero-scenes .hero-scene.is-active {
    animation:mobile-hero-open 1.2s ease-out both;
  }
  .hero-shade {
    position:relative;
    inset:auto;
    grid-area:1 / 1;
    z-index:1;
    background:linear-gradient(90deg,#20100885,transparent 63%);
    pointer-events:none;
  }
  .hero-content { display:contents; }
  .hero-heading {
    display:block;
    position:relative;
    grid-area:1 / 1;
    align-self:end;
    width:58%;
    margin:0 0 17px 20px;
    z-index:3;
  }
  .hero .eyebrow {
    margin-bottom:8px;
    font-size:8px;
    line-height:1.8;
    letter-spacing:.025em;
    text-shadow:0 2px 12px #130b07;
  }
  .hero h1 {
    font-size:clamp(20px,6vw,34px);
    line-height:1.55;
    letter-spacing:.035em;
    text-shadow:0 2px 22px #160c08b3;
  }
  .hero-description {
    grid-area:2 / 1;
    font-size:13px;
    line-height:2;
    margin:18px 24px 0;
  }
  .hero-actions { grid-area:3 / 1; margin:18px 24px 0; gap:10px; }
  .hero-actions .button { width:100%; max-width:none; min-height:58px; }
  .hero-actions .text-link { min-height:44px; }
  .hero-bottom {
    position:relative;
    inset:auto;
    grid-area:4 / 1;
    width:auto;
    margin:22px 24px 0;
    padding-top:16px;
    border-top:1px solid #d8b45a33;
  }

  /* Remove offset decorative frames: the image and its caption share edges. */
  .about-image { padding:0; margin:0; }
  .about-image::before,.about-image .image-orbit { display:none; }
  .about-image>img { width:100%; height:auto; aspect-ratio:725/823; }
  .about-image .image-caption {
    position:static;
    display:block;
    margin-top:12px;
    line-height:1.8;
  }
  .about-section .section-intro h2 { font-size:clamp(22px,6.7vw,34px); letter-spacing:.025em; }
  .feel-visual { overflow:hidden; }
  .feel-visual>img { display:block; width:100%; height:auto; }
  .try-visual>img,.portrait.product-poster>img { height:auto; }

  /* A ratio spacer sets the frame even before a lazy image has loaded,
     including browsers without aspect-ratio support. */
  .gallery-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .gallery-item::before { padding-top:75%; }
  .gallery-item>img { height:100%; aspect-ratio:auto; }
  .gallery-label { align-items:flex-start; gap:12px; line-height:1.7; }

  /* Reveal without enlarging a photograph outside its frame on scroll. */
  .has-observer .picture-reveal:not(.in-view)>img { clip-path:none; }
  .picture-arriving>img { animation:mobile-picture-open .7s ease-out both!important; }
  .gallery-item:hover>img { transform:none; }
}
@media (max-width:360px) {
  .hero-heading { margin-left:16px; margin-bottom:12px; width:62%; }
  .hero .eyebrow { font-size:7px; }
  .hero-description,.hero-actions,.hero-bottom { margin-left:20px; margin-right:20px; }
  .hero-description { font-size:12px; }
}
@keyframes mobile-hero-open {
  from { opacity:0; }
  to { opacity:1; }
}
@keyframes mobile-picture-open {
  from { opacity:.35; }
  to { opacity:1; }
}
@media (prefers-reduced-motion:reduce) {
  .hero-scenes .hero-scene.is-active { animation:none; }
  .picture-arriving>img { animation:none!important; }
}