/* The approved 1672 × 941 compositions stay on one proportional canvas.
   Photography never stretches; all page lettering remains live HTML. */
.static-scene {
  position: relative;
  isolation: isolate;
  background: transparent;
  color: #fff5d9;
  scroll-margin-top: -80px;
}
.scene-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1672 / 941;
  overflow: hidden;
  container-type: inline-size;
}
.scene-visual { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.scene-visual > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  max-width: none;
  mask-image: linear-gradient(to bottom, transparent, #000 2%, #000 97%, transparent);
}
.scene-wordmark {
  position: absolute;
  top: 3.8%;
  left: 2.9%;
  width: 5.7%;
  height: auto;
}
.static-scene h2 {
  font-family: var(--foli-font-body);
  font-weight: 800;
  font-style: normal;
  letter-spacing: -.065em;
  -webkit-text-stroke: .008em currentColor;
}
.scene-eyebrow {
  color: #e8b660;
  font-size: .96cqw;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .30em;
  text-transform: uppercase;
}
.scene-description {
  color: #ecece3;
  font-size: 1.7cqw;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
}
.gift-scene-copy {
  position: absolute;
  top: 15.9%;
  left: 3.2%;
  width: 35%;
}
.gift-scene h2 {
  font-size: 9cqw;
  line-height: .83;
  margin-top: .9cqw;
}
.gift-scene h2 span { display: block; white-space: nowrap; }
.gift-scene .scene-description { margin-top: 1.6cqw; }
.fermentation-scene-copy {
  position: absolute;
  top: 13%;
  left: 2.9%;
  right: 2.9%;
}
.fermentation-scene .scene-eyebrow { margin-left: .45cqw; letter-spacing: .24em; }
.fermentation-scene h2 {
  margin-top: .75cqw;
  font-size: 9.75cqw;
  line-height: .82;
  letter-spacing: -.04em;
}
.fermentation-scene h2 span { display: block; white-space: nowrap; }
.fermentation-scene .scene-description {
  margin: 2.7cqw 0 0 .8cqw;
  font-size: 1.5cqw;
  line-height: 1.35;
}
.craft-scene .scene-wordmark { top: 5.5%; left: 4%; width: 7.2%; }
.craft-scene h2 > span { position: absolute; display: block; }
.recipe-count {
  top: 12.6%;
  left: 3.3%;
  font-size: 28cqw;
  line-height: .85;
  letter-spacing: -.075em;
}
.recipe-versions {
  top: 53.5%;
  left: 4.6%;
  font-size: 8.9cqw;
  line-height: .9;
}
.recipe-result {
  top: 27.4%;
  left: 47.1%;
  font-size: 9.6cqw;
  line-height: .92;
  letter-spacing: -.025em;
  color: #edc57f;
}
.craft-scene .scene-description {
  position: absolute;
  top: 69.5%;
  left: 5.1%;
  font-size: 1.95cqw;
  line-height: 1.25;
}

/* Portrait art direction: move the intact photograph, never distort it.
   Only empty surroundings are cropped from gift and bottle photography. */
@media (max-width: 700px) {
  .scene-frame { aspect-ratio: auto; }
  .scene-wordmark, .craft-scene .scene-wordmark {
    top: 30px;
    left: 24px;
    width: 66px;
  }
  .scene-eyebrow { font-size: 10px; letter-spacing: .2em; }
  .scene-description { font-size: 15px; line-height: 1.5; letter-spacing: -.02em; }
  .scene-desktop-break { display: none; }
  .scene-visual > img {
    position: absolute;
    top: auto;
    bottom: 0;
    mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 97%, transparent);
  }
  .gift-scene .scene-frame { min-height: max(690px, 180vw); }
  .gift-scene-copy { top: 96px; left: 24px; width: calc(100% - 48px); }
  .gift-scene h2 { font-size: 15.2cqw; line-height: .94; margin-top: 18px; }
  .gift-scene .scene-description { margin-top: 22px; max-width: 330px; }
  .gift-scene .scene-visual > img { width: 150%; left: -48%; mask-image: linear-gradient(to bottom, transparent, #000 8%, #000 97%, transparent); }
  .fermentation-scene .scene-frame { min-height: max(760px, 195vw); }
  .fermentation-scene-copy { top: 96px; left: 24px; right: 24px; }
  .fermentation-scene .scene-eyebrow { margin: 0; }
  .fermentation-scene h2 { margin-top: 21px; font-size: 11.1cqw; line-height: 1; letter-spacing: -.065em; }
  .fermentation-scene h2 span { white-space: normal; }
  .fermentation-scene h2 span:first-child { max-width: 7.8em; }
  .fermentation-scene .scene-description { margin: 24px 0 0; font-size: 15px; line-height: 1.5; max-width: 330px; }
  .fermentation-scene .scene-visual > img { width: 210%; left: -76%; }
  .craft-scene .scene-frame { min-height: max(740px, 190vw); }
  .craft-scene .scene-visual > img { width: 225%; left: -103%; mask-image: linear-gradient(to bottom, transparent, #000 8%, #000 97%, transparent); }
  .recipe-count { left: 5%; top: 15%; font-size: 46cqw; line-height: .85; }
  .recipe-versions { left: 6.15%; top: 36%; font-size: 15.2cqw; }
  .recipe-result { left: 6.15%; top: 49%; font-size: 15cqw; line-height: .96; }
  .craft-scene .scene-description { top: 72%; left: 24px; width: 53%; font-size: 15px; line-height: 1.45; }
}

/* ImageGen supplies alpha only. Both layers retain the original photographs,
   label artwork, dimensions and responsive positioning without resampling. */
.gift-scene { --scene-mask:url('assets/gift-subject-mask-v1.png'); }
.fermentation-scene { --scene-mask:url('assets/fermentation-subject-mask-v1.png'); }
.craft-scene { --scene-mask:url('assets/craft-subject-mask-v1.png'); }
.scene-visual > img.scene-atmosphere {
  opacity:.20;
  mask-image:linear-gradient(to bottom, transparent, #000 14%, #000 82%, transparent);
}
.scene-visual > img.scene-subject {
  opacity:1;
  mask-image:var(--scene-mask);
  mask-mode:alpha;
  mask-size:100% 100%;
  mask-position:center;
  mask-repeat:no-repeat;
}