/* Can colors are carried by the untouched original image. Only the masked
   duplicate scenery receives color adjustments, in the gallery and viewer. */
.tenaya-graded { position:relative; display:block; width:100%; aspect-ratio:var(--art-ratio); }
.archive-art .tenaya-graded img { display:block; width:100%; height:auto; max-height:none; }
.tenaya-scenery { position:absolute; inset:0; pointer-events:none; background-size:100% 100%; background-position:center; background-repeat:no-repeat; filter:var(--scenery-filter); -webkit-mask-image:var(--scenery-mask); mask-image:var(--scenery-mask); -webkit-mask-size:100% 100%; mask-size:100% 100%; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; }
/* No mask support means the original artwork remains the complete fallback. */
@supports not ((mask-image:url('')) or (-webkit-mask-image:url(''))) { .tenaya-scenery { display:none; } }
.artwork-view .tenaya-graded { display:inline-block; vertical-align:top; width:min(100%,calc((100dvh - 250px) * var(--art-ratio))); }
.artwork-view .tenaya-graded img { width:100%; height:auto; max-height:none; }
.artwork-view.is-tall .tenaya-graded { width:min(1200px,100%); }
/* The opening scene and feature scenes are independent of the alpha can art. */
.can-feature-scenic .can-stage { background:#713612 url('/assets/tenaya/scenery/valley-of-fire-v1.webp') center / cover no-repeat; }
.can-feature-scenic .can-stage::before { content:''; position:absolute; inset:0; background:linear-gradient(90deg,#132126ed 0%,#132126bd 23%,#13212622 48%,transparent 70%); pointer-events:none; }
.can-feature-scenic .stage-copy { color:#fff; }
.can-feature-scenic .stage-small { opacity:1; }
.can-feature-scenic[data-view=whole] .feature-view-label { color:#fff; opacity:1; text-shadow:0 1px 6px #000; }
.can-feature-scenic[data-view=whole] .chapter-progress { background:#ffffff40; }
.can-feature-scenic[data-view=whole] .chapter-progress i { background:#fff; }
.can-feature-scenic .detail-media.tenaya-graded { position:absolute; inset:0; width:100%; height:100%; overflow:hidden; aspect-ratio:auto; }
.can-feature-scenic .detail-media.tenaya-graded img { width:100%; height:100%; object-fit:cover; }
.can-feature-scenic .detail-media .tenaya-scenery { background-size:cover; -webkit-mask-size:cover; mask-size:cover; -webkit-mask-position:center; mask-position:center; }
#can-designs .horizontal-heading-title > .eyebrow { display:block; margin-bottom:18px; }
#can-designs .design-art { position:relative; isolation:isolate; }
#can-designs .design-art::before { content:''; position:absolute; inset:-25px -2vw; z-index:-1; background:var(--can-scenery) center / cover no-repeat; }
#can-designs .design-panel[data-beer="desert-howler"] { --can-scenery:url('/assets/tenaya/scenery/desert-howler-v1.webp'); background:#012c3e; }
#can-designs .design-panel[data-beer="big-dam-brown"] { --can-scenery:url('/assets/tenaya/scenery/big-dam-brown-v1.webp'); background:#103d52; }
#can-designs .design-panel[data-beer="valley-of-fire"] { --can-scenery:url('/assets/tenaya/scenery/valley-of-fire-v1.webp'); background:#7d250d; }
#can-designs .design-panel[data-beer="trailhead-canyon"] { --can-scenery:url('/assets/tenaya/scenery/trailhead-canyon-v1.webp'); background:#754024; }
#can-designs .design-panel[data-beer="el-charro"] { --can-scenery:url('/assets/tenaya/scenery/el-charro-v1.webp'); background:#1c1d1e; }
#can-designs .design-panel[data-beer="charleston-hop-run"] { --can-scenery:url('/assets/tenaya/scenery/charleston-hop-run-v1.webp'); background:#17381f; }
#can-designs .design-panel[data-beer="monsoon-haze"] { --can-scenery:url('/assets/tenaya/scenery/monsoon-haze-v1.webp'); background:#361844; }
#can-designs .design-panel[data-beer="god-of-thunder"] { --can-scenery:url('/assets/tenaya/scenery/god-of-thunder-v1.webp'); background:#1a163b; }
#can-designs .design-panel[data-beer="aviators-ale"] { --can-scenery:url('/assets/tenaya/scenery/aviators-ale-v1.webp'); background:#092138; }
@media(max-width:700px) {
  .artwork-view .tenaya-graded { width:min(100%,calc((100dvh - 210px) * var(--art-ratio))); }
  .can-feature-scenic .can-stage::before { background:linear-gradient(90deg,#132126eb,#13212695 35%,transparent 76%); }
  #can-designs .design-art::before { inset:-20px -16px; }
  .beer-family .two-art { grid-template-columns:1fr; }
}

.tenaya-graded[data-scenery="el-charro"] .tenaya-scenery { filter:grayscale(1) var(--scenery-filter); }
/* Match the original contain framing, including the 650px desktop portrait cap. */
@media(max-width:1099px) {
  .beer-family .four-art .tenaya-graded { width:calc(100% * var(--art-ratio)); max-width:100%; margin-inline:auto; flex-shrink:0; }
}
@media(min-width:1100px) {
  .beer-family .three-art .archive-art:first-child .tenaya-graded { width:min(100%,calc(650px * var(--art-ratio))); margin-inline:auto; }
  .beer-family .three-art .archive-art .tenaya-graded img { max-height:none; height:auto; }
}
.can-feature-scenic .detail-media.tenaya-graded img { object-position:50% 59%; }
.can-feature-scenic .detail-media .tenaya-scenery { background-position:50% 59%; -webkit-mask-position:50% 59%; mask-position:50% 59%; }
/* Keep the section heading, full explanations and controls visible on laptops. */
@media(min-width:901px) and (max-height:850px) {
  .pin-motion #can-designs .horizontal-pin { padding-block:16px; }
  .pin-motion #can-designs .horizontal-heading { margin-bottom:14px; }
  .pin-motion #can-designs .horizontal-heading h2 { font-size:40px; }
  .pin-motion #can-designs .horizontal-heading-title > .eyebrow { margin-bottom:8px; }
  .pin-motion #can-designs .design-panel { height:calc(100svh - 310px); padding:18px 24px; gap:24px; grid-template-columns:.9fr 1.2fr; }
  .pin-motion #can-designs .design-art { height:calc(100svh - 355px); }
  .pin-motion #can-designs .design-art::before { inset:-18px -12px; }
  .pin-motion #can-designs .design-copy h3 { font-size:36px; margin:12px 0; }
  .pin-motion #can-designs .design-copy p { font-size:15px; line-height:1.45; max-width:40ch; }
  .pin-motion #can-designs .gallery-controls { margin-top:14px; }
}