/* Each atlas quadrant is a complete studio scene, not a strip inside a panel.
   Keep its original ratio and join its empty margins to the surrounding surface. */
:root { --studio: #151719; }
.gallery-crop { position: relative; width: 100%; aspect-ratio: 1; overflow: hidden; background: var(--studio); }
.gallery-crop img { position: absolute; max-width: none; object-fit: fill; }
#selected-visual.gallery-stage, #case-main-art.gallery-stage { aspect-ratio: 1; padding: 0; display: block; border-radius: 12px; overflow: hidden; }
.gallery-expand { position: relative; display: grid; align-content: center; width: 100%; height: 100%; padding: 0; border: 0; background: var(--studio); cursor: zoom-in; }
.gallery-expand:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.gallery-stage .gallery-expand > .product-art, .gallery-stage .gallery-expand > .case-art { width: 100%; margin: 0; transform: none; }
.gallery-zoom { position: absolute; right: 14px; bottom: 14px; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid #ffffff50; border-radius: 50%; color: #fff; background: #101216c9; font-size: 24px; }
.gallery-thumbnails { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px; margin-top: 14px; }
.gallery-thumbnails button { min-width: 0; padding: 0 0 9px; overflow: hidden; border: 1px solid var(--line); background: var(--studio); border-radius: 6px; }
.gallery-thumbnails button[aria-pressed=true] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.gallery-thumbnails button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.gallery-thumb-art { display: grid; align-content: center; width: 100%; aspect-ratio: 1; overflow: hidden; margin-bottom: 7px; }
.gallery-thumb-art .product-art, .gallery-thumb-art .case-art { width: 100%; margin: 0; transform: none; }
.gallery-thumbnails button > span:last-child { font-size: 11px; }
.gallery-caption { color: #ccd0d7; font-size: 12px; line-height: 1.6; margin: 14px 0 5px; }
.gallery-disclaimer { color: #959aa5; font-size: 11px; line-height: 1.6; margin: 0 0 12px; }
.gallery-dialog { width: min(760px,94vw); max-height: 94dvh; padding: 18px; overflow-y: auto; }
.gallery-dialog .dialog-head { padding: 0 0 14px; }
.gallery-dialog .dialog-head h2 { font-size: 16px; }
.gallery-dialog .gallery-enlarged { width: min(100%,68dvh); margin: auto; }
.gallery-dialog .gallery-enlarged img { max-width: none; }
.finish-comparison[hidden] { display:none; }
.finish-comparison { padding:12px; }
.finish-comparison h2 { margin:0 0 24px; font-size:24px; }
.finish-comparison-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.finish-comparison figure { margin:0; overflow:hidden; border:1px solid var(--line); border-radius:12px; background:#111416; }
.finish-comparison figcaption { display:flex; align-items:center; gap:12px; padding:16px; }
.finish-comparison figcaption i { width:18px; height:18px; border:1px solid #ffffff40; border-radius:50%; background:var(--swatch); }
.finish-comparison figcaption small { display:block; color:var(--muted); margin-top:4px; font-size:11px; }
@media(max-width:640px) { .finish-comparison-grid { grid-template-columns:1fr; } }
@media(max-width:480px) { .gallery-thumbnails { gap: 6px; } .gallery-thumbnails button > span:last-child { font-size: 10px; } }
.pack-options { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.pack-options button { border: 1px solid var(--line); background: #191c20; padding: 14px 10px; border-radius: 6px; display: flex; align-items: baseline; justify-content: center; gap: 8px; }
.pack-options strong { font-size: 22px; font-weight: 500; }
.pack-options span { font-size: 11px; }
.pack-options button[aria-pressed=true] { border-color: var(--accent); box-shadow: inset 0 -2px var(--accent); }
.pack-options button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* Approved STELLAR scenes fill their panels without studio atlas masks. */
.product-art.scene-art { aspect-ratio: 3 / 2; width: 100%; background: var(--studio); box-shadow: none; }
.product-art.scene-art img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; filter: none; clip-path: none; transform: none; }
.card-visual:has(.scene-art) { padding: 0; }
.hero-product:has(.scene-art) { transform: none; right: 0; width: 62%; top: 13%; }
.hero-product .scene-art { border-radius: 12px 0 0 12px; }
.hero-product:has(.scene-art) .hero-product-label { margin: 14px 24px; }
@media(max-width:1050px) and (min-width:721px) {
  .hero-product:has(.scene-art) { top: 34%; width: 60%; }
}
@media(max-width:720px) {
  .hero-product:has(.scene-art) { top: auto; bottom: 50px; right: 0; width: 100%; }
  .hero-product .scene-art { border-radius: 0; }
  .hero-product:has(.scene-art) .hero-product-label { margin: 8px 20px; }
}
.product-art.finish-art {
  aspect-ratio: 3 / 2;
  background: transparent;
  box-shadow: none;
}
.finish-cell {
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  transform: none;
  /* Fade only the empty studio margins; the products remain fully opaque. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent), linear-gradient(transparent, #000 14%, #000 78%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent), linear-gradient(transparent, #000 14%, #000 78%, transparent);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.product-art .finish-cell img { height: 200%; object-fit: fill; }
.scene-atlas .finish-cell { -webkit-mask-image: none; mask-image: none; }
.product-art.scene-atlas .finish-cell img { width: 200%; height: 200%; object-fit: fill; }

/* Catalog / frame thumbnails / family and finish previews. */
.card-visual, .family-card, .finish-showcase-card, .frame-options button,
.chapter-card, .selected-visual, #case-main-art {
  background: var(--studio);
}
.card-visual {
  height: auto;
  display: block;
  padding: 0;
  overflow: hidden;
  border-radius: 10px;
}
.card-visual .card-tag { z-index: 1; }
.card-visual .card-arrow { z-index: 1; }
.family-card, .finish-showcase-card, .chapter-card { border-radius: 12px; }
.family-card .product-art { width: 100%; margin: 0; }
.finish-showcase-card { padding: 0 0 24px; overflow: hidden; }
.finish-showcase-card>div:last-child { padding: 8px 24px 0; }
.frame-options button { padding: 0 0 12px; overflow: hidden; border-radius: 6px; }
.frame-options button>span { margin-top: 0; }

/* Large fan gallery: the scene fills the gallery, with no inset rectangle. */
.selected-visual {
  padding: 0;
  min-height: 0;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 12px;
}
.selected-visual .product-art { width: 100%; }

/* Floating hero and feature share the page's studio lighting. */
.hero-product .product-art.finish-art { background: transparent; box-shadow: none; }
.hero-product { top: 17%; right: -5%; width: 66%; }
.hero-product-label { margin-top: -12px; position: relative; }
.feature-visual {
  background: var(--studio);
  padding: 0;
  overflow: hidden;
}
.feature-visual .product-art { transform: none; aspect-ratio: 3 / 2; }

/* Cases already have a square studio scene. Keep it edge-to-edge rather than
   placing a smaller square within the feature cards. Fade the floor only. */
.case-art {
  background: transparent;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent), linear-gradient(transparent, #000 2%, #000 98%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent), linear-gradient(transparent, #000 2%, #000 98%, transparent);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.chapter-card>.case-art { width: 100%; margin: 0; }
.chapter-card>.product-art { width: 100%; margin: auto 0; padding: 0; }
.chapter-card>.case-art::after {
  content: ''; position: absolute; inset: 90% 0 0;
  background: linear-gradient(transparent, var(--studio)); pointer-events: none;
}
#case-main-art { border-radius: 12px; overflow: hidden; }
.case-art.case-scene { -webkit-mask-image: none; mask-image: none; }
.chapter-card>.case-art.case-scene::after { content: none; }
.case-teaser {
  background: var(--studio); color: var(--white);
  border-block: 1px solid var(--line);
  padding-block: 0;
  gap: 40px;
}
.case-teaser .eyebrow { color: var(--muted); }
.case-teaser .text-link { border-color: #6c7075; }
.case-teaser .text-link:hover { color: var(--accent); }
.case-teaser-copy { padding-block: 60px; }
.case-teaser-art { border: 0; max-width: none; }
.hero::before {
  content: ''; position: absolute; inset: 8% -10% 0 24%; z-index: -1;
  background: radial-gradient(ellipse at 62% 48%, #292d354d, transparent 66%);
  pointer-events: none;
}

@media(min-width:1600px) { .hero-product { top: 12%; right: -2%; width: 65%; } }
@media(max-width:1050px) and (min-width:721px) { .hero-product { top: 33%; width: 78%; right: -17%; } }
@media(max-width:720px) {
  .hero-product { top: auto; bottom: 57px; width: 108%; right: -5%; }
  .hero-product-label { margin-top: -6px; }
  .card-visual { height: auto; padding: 12px 0; }
  .case-card .card-visual { padding: 0; }
  .card-tag { top: 9px; }
  .selected-visual { padding: 0; min-height: 0; }
  .feature-visual { padding: 0; }
  .chapter-card>.case-art { width: 100%; margin: 0; }
  .chapter-card>.product-art { padding: 0; }
  .case-teaser { grid-template-columns: 1fr; gap: 0; padding-bottom: 0; }
  .case-teaser-art { width: 100%; justify-self: center; }
  .hero::before { inset: 30% -20% 0; }
  .case-teaser-copy { padding-bottom: 20px; }
  .finish-showcase-card>div:last-child { padding-inline: 20px; }
}
.selected-visual.gallery-stage.showing-pack#selected-visual { aspect-ratio:3/2; }

/* The rail stays beside the image on touch screens as well as desktop. */
.gallery-layout { display:grid;grid-template-columns:76px minmax(0,1fr);gap:12px;align-items:start; }
.gallery-layout .gallery-thumbnails { display:flex;flex-direction:column;gap:9px;margin:0; }
.gallery-layout .gallery-thumbnails button { padding:0;border-radius:5px;position:relative; }
.gallery-layout .gallery-thumb-art { aspect-ratio:1;margin:0; }
.gallery-layout .gallery-thumbnails button>span:last-child:not(.gallery-thumb-art) { position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%); }
.gallery-layout .gallery-stage { min-width:0;touch-action:pan-y pinch-zoom;user-select:none; }
.gallery-layout .gallery-stage img { -webkit-user-drag:none; }
.gallery-crop.gallery-wide { aspect-ratio:2/1; }
.gallery-stage.gallery-grouped#selected-visual { aspect-ratio:3/2; }
.gallery-stage .gallery-wide { align-self:center; }
.gallery-dialog .gallery-enlarged:has(.gallery-wide) { width:100%; }
.card-visual:has(>.gallery-crop) { aspect-ratio:3/2;display:grid;place-items:center; }
.card-visual>.gallery-crop { width:66.667%;aspect-ratio:1; }
.arrow-icon { display:inline-block;width:1em;height:1em;min-width:1em;flex-shrink:0;vertical-align:-.12em; }
.text-link .arrow-icon,.button .arrow-icon { width:18px;height:18px; }
.card-arrow .arrow-icon { width:20px;height:20px; }
.format-filters { margin-top:-8px; }
.format-filters button { font-size:12px; }
.case-teaser.case-world { display:flex;position:relative;isolation:isolate;overflow:hidden;min-height:620px;background:#191b1d;padding-block:80px; }
.case-world .case-world-image { position:absolute;z-index:-2;inset:0;width:100%;height:100%;object-fit:cover;object-position:center; }
.case-world::before { content:'';position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,#101214d9,transparent 65%);pointer-events:none; }
.case-world .case-teaser-copy { padding:0;max-width:42%;align-self:center; }
.case-world .case-teaser-copy h2 { font-size:clamp(36px,4vw,64px); }
.case-world .case-teaser-copy p { color:#d3d4d6; }
.case-world .eyebrow { color:#d6c29e; }
@media(max-width:720px) {
 .gallery-layout { grid-template-columns:46px minmax(0,1fr);gap:7px; }
 .gallery-layout .gallery-thumbnails { gap:7px; }
 .gallery-zoom { width:28px;height:28px;font-size:19px;right:8px;bottom:8px; }
 .gallery-caption { font-size:11px; }
 .case-teaser.case-world { min-height:700px;padding:48px 24px 340px; }
 .case-world .case-teaser-copy { max-width:100%;align-self:flex-start; }
 .case-world .case-world-image { height:400px;inset:auto 0 0;width:100%;object-position:84% center;mask-image:linear-gradient(transparent,#000 14%); }
 .case-world::before { background:linear-gradient(#1c1e1f 0%,#1c1e1f 37%,transparent 62%); }
}