/* Chromals: a full-height 3D stage with a quiet caption panel. */
.chromals-page{min-height:100svh}
.viewer{position:relative;min-height:100svh;display:grid;grid-template-rows:1fr auto;padding-top:64px;
  background:radial-gradient(ellipse 60% 50% at 50% 48%,#24211b 0%,#13120f 55%,var(--bg) 85%)}

.stage{position:relative;min-height:0;touch-action:none;cursor:grab}
.stage:active{cursor:grabbing}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.stage-status{position:absolute;inset:auto 0 50%;margin:0;text-align:center;font:500 10px/1.6 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--muted);pointer-events:none;transition:opacity .4s}
.stage-status.is-hidden{opacity:0}

.panel{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"eyebrow colors" "name colors" "picker hint";align-items:end;gap:6px 32px;
  padding:24px var(--gutter) 32px;border-top:1px solid var(--line);background:linear-gradient(transparent,rgba(11,11,10,.6))}
.panel .eyebrow{grid-area:eyebrow;margin:0}
.panel h1{grid-area:name;margin:0 0 18px;font-weight:300;font-size:clamp(40px,5.5vw,84px);line-height:.95;letter-spacing:-.03em}

.colorways{grid-area:colors;display:flex;gap:14px;align-self:center}
.swatch{width:34px;height:34px;padding:0;border-radius:50%;border:1px solid var(--line);cursor:pointer;
  background:radial-gradient(circle at 32% 28%,#fff 0,var(--c) 34%,color-mix(in srgb,var(--c) 45%,#000) 100%);
  box-shadow:0 0 0 0 var(--gold);transition:box-shadow .25s,transform .25s}
.swatch:hover{transform:translateY(-2px)}
.swatch[aria-pressed="true"]{box-shadow:0 0 0 3px var(--bg),0 0 0 4px var(--gold)}
.swatch .label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

.picker{grid-area:picker;display:flex;align-items:center;gap:14px;min-width:0;font:500 10px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase}
/* One row that scrolls sideways, so the picker stays tidy as the catalog grows. */
.list{display:flex;gap:6px;min-width:0;margin:0;padding:2px 0;list-style:none;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 12px),transparent);mask-image:linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 12px),transparent)}
.list::-webkit-scrollbar{display:none}
.list li{flex:none;scroll-snap-align:center}
.list li:first-child{margin-left:8px}.list li:last-child{margin-right:8px}
.step{flex:none}
.list button,.step{min-width:44px;min-height:36px;padding:0 12px;border:1px solid var(--line);border-radius:2px;background:none;color:var(--muted);font:inherit;letter-spacing:inherit;cursor:pointer;transition:color .25s,border-color .25s}
.list button:hover,.step:hover{color:var(--ink);border-color:rgba(236,230,218,.35)}
.list button[aria-current="true"]{color:var(--gold);border-color:rgba(200,169,106,.6)}
.hint{grid-area:hint;margin:0;justify-self:end;font:500 10px/1.6 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.site-header nav a[aria-current="page"]{color:var(--ink)}

@media (max-width:720px){
  .panel{grid-template-columns:minmax(0,1fr);grid-template-areas:"eyebrow" "name" "colors" "picker" "hint";gap:10px}
  .panel h1{margin-bottom:6px}
  .colorways{align-self:start}
  .hint{justify-self:start}
}
@media (max-width:520px){
  .site-header nav a:not([aria-current]){display:none}
}