@font-face {
  font-family: 'Instrument Sans';
  src: url('../fonts/instrument-sans.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Sans';
  src: url('../fonts/instrument-sans-italic.woff2') format('woff2');
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

:root {
  --cream: #f4f1e9;
  --cream-tint: #ebe7dc;
  --charcoal: #2b2a26;
  --charcoal-muted: #5f5c53;   
  
  --charcoal-muted-aaa: #545149;
  --accent: #5a2851;          
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --measure: 72rem;
  --section-y: clamp(3rem, 7vw, 5.5rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--charcoal);
  font-family: 'Instrument Sans', system-ui, sans-serif;
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p, dl, dd, ul { margin: 0; }
img { display: block; max-width: 100%; height: auto; }

a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

.skip-link { position: absolute; left: -999px; top: 0.5rem; z-index: 10; padding: 0.5rem 0.75rem; background: var(--cream); }
.skip-link:focus { left: 0.5rem; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.shell { max-width: var(--measure); margin-inline: auto; padding-inline: var(--gutter); }


.logo,
.nav__link,
.cta-close__link,
.footer__nav a,
.contact__email .link { position: relative; }

.logo::after,
.nav__link::after,
.cta-close__link::after,
.footer__nav a::after,
.contact__email .link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
}

.skip-link { padding-block: 0.5625rem; }


.display { font-weight: 500; letter-spacing: -0.015em; line-height: 1.15; color: var(--charcoal); }
h1.display { font-size: clamp(2.25rem, 4.6vw, 3.5rem); }
h2.display { font-size: clamp(1.625rem, 2.6vw, 2.125rem); }
.eyebrow { font-size: 0.9375rem; font-weight: 500; color: var(--charcoal-muted); margin-bottom: 1rem; }
.lead { font-size: clamp(1.125rem, 1.6vw, 1.3125rem); line-height: 1.5; color: var(--charcoal); }
.lead__in { font-weight: 500; }
.display + .lead { margin-top: clamp(1.25rem, 2.4vw, 1.75rem); }
.caption, .small { font-size: 0.9375rem; color: var(--charcoal-muted); }


.masthead__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-block: 1.25rem;
}

.logo { display: inline-flex; align-items: center; gap: 0.1875rem; color: var(--charcoal); text-decoration: none; }
.logo__mark { width: 1.75rem; height: auto; }

.logo__word { font-size: 2rem; font-weight: 500; letter-spacing: -0.01em; line-height: 1; transform: translateY(-0.2rem); }
.nav-toggle { display: none; }
.nav { display: flex; gap: clamp(1rem, 3vw, 2rem); }
.nav__link { color: var(--accent); font-size: 1rem; }
.nav__link[aria-current='page'] { text-decoration-thickness: 2px; }


.section { padding-block: var(--section-y); }
.page-head { padding-block: clamp(3.5rem, 9vw, 7rem) clamp(1.5rem, 3vw, 2.5rem); }
.page-head__meta { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; margin-top: 1.5rem; }

.contact__email {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  font-size: clamp(1.625rem, 2.6vw, 2.125rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
}

#main:has(.contact__email) .page-head {
  padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(2.5rem, 5vw, 4rem);
}

.split { display: grid; gap: 1.5rem; }
@media (min-width: 56rem) {
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4rem; }
}
.about__body, .prose { font-size: clamp(1.0625rem, 1.4vw, 1.1875rem); max-width: 40rem; }


@media (min-width: 56rem) {
  #about .split { grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); }
}
#about .about__body { max-width: none; text-wrap: balance; }
.about__body > * + *, .prose > * + * { margin-top: 1em; }



.notice {
  display: grid; gap: 0.35rem;
  margin-top: 2rem; padding: 1rem 1.25rem;
  background: var(--cream-tint); border-radius: 6px;
  font-size: 0.9375rem; color: var(--charcoal);
}
.notice__label { font-weight: 600; }
.draft-banner { background: var(--cream-tint); font-size: 0.9375rem; }
.draft-banner__inner { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; padding-block: 0.75rem; }
.draft-banner__label { font-weight: 600; }


.doc { max-width: 44rem; }
.doc > * + * { margin-top: 1em; }
.doc hr { display: none; }
.doc h2 { font-size: clamp(1.5rem, 2.4vw, 1.875rem); font-weight: 500; letter-spacing: -0.01em; line-height: 1.2; margin-top: 2.5rem; }
.doc h3 { font-size: 1.3125rem; font-weight: 500; line-height: 1.3; margin-top: 2.5rem; }
.doc h4 { font-size: 1.0625rem; font-weight: 600; margin-top: 1.75rem; }
.doc ul { padding-left: 1.25rem; }
.doc li + li { margin-top: 0.4em; }
.doc strong { font-weight: 600; }
.bracket { background: var(--cream-tint); padding: 0 0.2em; border-radius: 3px; }


.footer { padding-block: var(--section-y) 2rem; color: var(--charcoal); }
.footer__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.5rem 3rem; }
.footer__tagline { margin-top: 0.75rem; color: var(--charcoal-muted); font-size: 0.9375rem; }
.footer__nav { display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; align-items: flex-start; }
.footer__disclaimer { margin-top: 2rem; font-size: 0.875rem; color: var(--charcoal-muted); }
.footer__address { margin-top: 0.75rem; font-size: 0.875rem; line-height: 1.5; color: var(--charcoal-muted); }
.footer__bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem;
  margin-top: 2rem; font-size: 0.9375rem; color: var(--charcoal-muted);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}


:root { --ivory-rgb: 244 241 233; --band-text: #f4f1e9; --dark: #14140f; --dark-rgb: 20 20 15; }


.hero h1 { max-width: 15ch; }
.hero__br { display: none; }
.hero--full {
  display: flex;
  align-items: center;
  padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(0.75rem, 1.5vw, 1.25rem);
  overflow: hidden;
}
.hero--full .shell { width: 100%; }
.hero__grid {
  display: grid;
  gap: clamp(3rem, 6vw, 5rem);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 62rem) {
  .hero--full .hero__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
}
.hero__figure { display: flex; flex-direction: column; align-items: stretch; gap: 1.25rem; margin: 0; }
.hero__art { width: 100%; height: auto; }
.hero__body {
  margin-top: clamp(1.25rem, 2.4vw, 1.75rem);
  font-size: clamp(1.1875rem, 1rem + 0.8vw, 1.375rem);
  line-height: 1.45;
  max-width: 34ch;
}
.hero__leadin { display: block; font-weight: 500; }

.hero-mosaic {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  container-type: inline-size;
  --mx: 0; --my: 0; --sy: 0;
  
  --scx: 0.1; --scy: 1;
}

@media (min-width: 62rem) {
  .hero-mosaic { width: min(112%, 42rem, calc(100% + max(0px, (100vw - 72rem) / 2) + var(--gutter) - 1rem)); margin-inline: 0 auto; }
}
@media (max-width: 61.999rem) { .hero-mosaic { --scx: -0.25; --scy: 0.7; } }
.hero-mosaic__group {
  position: absolute;
  inset: 0;
  transform: translate3d(calc(var(--mx) * 13px), calc(var(--my) * 9px + var(--sy) * 34px), 0);
  transition: transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.hero-mosaic__tile {
  position: absolute;
  display: block;
  left: calc(var(--l) * 1%);
  top: calc(var(--t) * 1%);
  width: calc(var(--w) * 1%);
  height: calc(var(--h) * 1%);
}
.hero-mosaic__inner { display: block; width: 100%; height: 100%; }
.hero-mosaic__tile img { width: 100%; height: 100%; object-fit: contain; }

[data-mosaic='assemble'] .hero-mosaic__inner {
  animation: tile-arrive 1800ms cubic-bezier(0.3, 1.24, 0.42, 1) backwards;
  animation-delay: calc(var(--i) * var(--stagger, 100ms));
}
@keyframes tile-arrive {
  from {
    transform: translate3d(calc(var(--ax) * var(--scx) * 1%), calc(var(--ay) * var(--scy) * 1%), 0)
               rotate(var(--r0)) scale(0.92);
    opacity: 0.3;
  }
  45%  { opacity: 1; }
  to   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); opacity: 1; }
}
[data-mosaic='settled'] .hero-mosaic__tile {
  animation: tile-breathe var(--idur) ease-in-out var(--idelay) infinite alternate;
}
@keyframes tile-breathe {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(var(--ix), var(--iy), 0); }
}
.hero-mosaic:hover .hero-mosaic__tile { animation-play-state: paused; }


.hero-tile__chip {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  padding: 0.26rem 0.6rem 0.3rem;
  border-radius: 999px;
  background: var(--charcoal);
  color: var(--band-text);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
  transform: translate(-50%, -50%);
}
@media (max-width: 47.999rem) {
  .hero-tile__chip {
    width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); border: 0;
  }
}

[data-mosaic='assemble'] .hero-tile__chip {
  animation: chip-announce 2700ms cubic-bezier(0.22, 0.61, 0.36, 1) 120ms both;
}
[data-mosaic='settled'] .hero-tile__chip { opacity: 0; }
@keyframes chip-announce {
  0%   { opacity: 0; transform: translate(-50%, -50%) translateY(0.4rem); }
  14%  { opacity: 1; transform: translate(-50%, -50%); }
  66%  { opacity: 1; transform: translate(-50%, -50%); }
  100% { opacity: 0; transform: translate(-50%, -50%) translateY(-0.3rem); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-tile__chip {
    animation: none !important;
    opacity: 1 !important;
    transform: translate(-50%, -50%) !important;
  }
}

[data-entry='assemble'] .hero__copy > * {
  animation: hero-copy-in 620ms cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
}
[data-entry='assemble'] .hero__copy > :nth-child(1) { animation-delay: 520ms; }
[data-entry='assemble'] .hero__copy > :nth-child(2) { animation-delay: 700ms; }
[data-entry='assemble'] .hero__copy > :nth-child(3) { animation-delay: 900ms; }
@keyframes hero-copy-in {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to   { opacity: 1; transform: none; }
}
.hero { overflow: clip; }

@media (prefers-reduced-motion: reduce) {
  .hero-mosaic__group,
  .hero-mosaic__inner { transform: none !important; transition: none !important; animation: none !important; }
  .hero__copy > * { animation: none !important; }
  .hero-mosaic__tile { animation: none !important; }
}


.builtfor {
  --bf-dark: rgb(44 38 16);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-items: center;
  min-height: clamp(20rem, 34vw, 30rem);
  padding-block: clamp(2.5rem, 5vw, 4rem);
  background: var(--bf-dark);
  color: var(--band-text);
}
.builtfor__media { position: absolute; inset: 0; z-index: -1; }
.builtfor__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left center; }
.builtfor__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to left, rgb(0 0 0 / 0.62) 0%, rgb(0 0 0 / 0.55) 42%, rgb(0 0 0 / 0.3) 56%, rgb(0 0 0 / 0) 72%);
}
.builtfor__copy { margin-left: 50%; max-width: 34rem; }

h2.builtfor__title { color: var(--band-text); font-size: clamp(1.5rem, 2.2vw, 1.875rem); line-height: 1.2; text-wrap: balance; }
@media (min-width: 62rem) {
  #built-for .builtfor__copy { margin-left: 46%; max-width: none; }
  #built-for .builtfor__title { white-space: nowrap; }
}
#built-for { min-height: clamp(24rem, 40vw, 34rem); }
#built-for .builtfor__copy { max-width: 40rem; }
.builtfor__inner { width: 100%; }


.builtfor--cta { --bf-dark: rgb(62 41 19); }
.builtfor--cta .builtfor__img { object-position: left 30%; }
.cta-close__copy { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(1rem, 2vw, 1.5rem); }
h2.cta-close__title { font-size: clamp(1.75rem, 2.8vw, 2.5rem); }
.cta-close__line { color: rgb(var(--ivory-rgb) / 0.9); font-size: clamp(1.0625rem, 1.3vw, 1.25rem); line-height: 1.5; max-width: 34ch; margin-top: -0.25rem; }
.cta-close__line + .cta-close__link { margin-top: clamp(0.75rem, 1.5vw, 1.25rem); }
.cta-close__link { color: var(--band-text); font-size: clamp(1.0625rem, 1.3vw, 1.25rem); }
.cta-close__link:focus-visible { outline-color: var(--band-text); }
.builtfor__body {
  margin-top: 1.25rem;
  font-size: clamp(1.0625rem, 1.3vw, 1.25rem);
  line-height: 1.55;
  color: rgb(var(--ivory-rgb) / 0.9);
  text-wrap: pretty;
}
.builtfor__lead { color: var(--band-text); font-size: clamp(1.1875rem, 1.5vw, 1.4375rem); }
@media (max-width: 61.999rem) {
  .builtfor { display: block; min-height: 0; padding-top: 0; }
  .builtfor__media { position: relative; z-index: auto; height: clamp(14rem, 56vw, 22rem); }
  .builtfor__img { object-position: 22% 45%; }
  .builtfor__media::after { background: linear-gradient(to bottom, rgb(0 0 0 / 0) 55%, var(--bf-dark)); }
  .builtfor__copy { margin-left: 0; padding-top: clamp(1.75rem, 6vw, 2.5rem); }
  .builtfor--cta .builtfor__img { object-position: 30% 32%; }
  #built-for { min-height: 0; }
}

.qpills {
  --loop: 14s;
  position: absolute;
  inset: 0 56% 0 0;
  z-index: 1;
  margin: 0;
  padding: 0;
  list-style: none;
  container-type: size;
}
.qpill {
  position: absolute;
  left: var(--l);
  max-width: calc(100% - var(--l) - 0.5rem);
  width: max-content;
  padding: 0.5rem 0.95rem;
  border-radius: 1.25rem;
  background: rgb(var(--ivory-rgb) / 0.88);
  box-shadow: 0 6px 18px rgb(0 0 0 / 0.18), inset 0 0 0 1px rgb(255 255 255 / 0.5);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
  color: var(--dark);
  font-size: 0.9375rem;
  line-height: 1.3;
}
.qpill:nth-child(1) { --l: 10%; top: 8%; }
.qpill:nth-child(2) { --l: 32%; top: 22%; }
.qpill:nth-child(3) { --l: 6%;  top: 36%; }
.qpill:nth-child(4) { --l: 28%; top: 52%; }
.qpill:nth-child(5) { --l: 12%; top: 66%; }
.qpill:nth-child(6) { --l: 34%; top: 80%; }
@media (prefers-reduced-motion: no-preference) and (min-width: 62rem) {
  .qpills > .qpill {
    top: auto;
    bottom: 6%;
    opacity: 0;
    animation: qpill-rise var(--loop) linear calc(var(--i) * var(--loop) / -6) infinite;
  }
  .qpills:hover .qpill { animation-play-state: paused; }
}
@keyframes qpill-rise {
  0%   { opacity: 0; translate: 0 0; }
  6%   { opacity: 1; }
  56%  { opacity: 1; }
  64%  { opacity: 0; translate: 0 -72cqh; }
  100% { opacity: 0; translate: 0 -72cqh; }
}
@media (max-width: 61.999rem) {
  .qpills {
    inset: auto auto 0 0;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.4rem;
    padding: 0.75rem var(--gutter) 0;
    bottom: auto;
    container-type: normal;
  }
  .qpill { position: static; max-width: 100%; padding: 0.3rem 0.75rem; font-size: 0.8125rem; }
}
@media (max-width: 47.999rem) and (prefers-reduced-motion: no-preference) {
  .builtfor__media { height: 13rem; }
  .builtfor__copy { padding-top: 1.25rem; }
  .qpills {
    --loop: 20s;
    position: absolute;
    inset: 0;
    display: block;
    padding: 0;
    container-type: size;
  }
  .qpills > .qpill {
    position: absolute;
    top: auto;
    bottom: 5%;
    left: calc(var(--gutter) + var(--lm));
    max-width: calc(100% - 2 * var(--gutter) - var(--lm));
    padding: 0.35rem 0.8rem;
    font-size: 0.8125rem;
    opacity: 0;
    animation: qpill-rise-phone var(--loop) linear calc(var(--i) * var(--loop) / -6) infinite;
  }
  .qpill:nth-child(1) { --lm: 0%; }
  .qpill:nth-child(2) { --lm: 22%; }
  .qpill:nth-child(3) { --lm: 6%; }
  .qpill:nth-child(4) { --lm: 26%; }
  .qpill:nth-child(5) { --lm: 3%; }
  .qpill:nth-child(6) { --lm: 18%; }
  .qpills[data-paused] > .qpill { animation-play-state: paused; }
}
@keyframes qpill-rise-phone {
  0%   { opacity: 0; translate: 0 0; }
  5%   { opacity: 1; }
  36%  { opacity: 1; }
  44%  { opacity: 0; translate: 0 -62cqh; }
  100% { opacity: 0; translate: 0 -62cqh; }
}


@media (max-width: 47.999rem) {
  .hero__grid {
    grid-template-columns: max-content minmax(0, 1fr);
    grid-template-areas:
      "eyebrow eyebrow"
      "title   art"
      "body    body";
    column-gap: 0.375rem;
    row-gap: 0;
    align-items: center;
  }
  .hero__copy { display: contents; }
  .hero__copy > .eyebrow { grid-area: eyebrow; }
  
  .hero__copy > h1 { grid-area: title; max-width: none; align-self: center; font-size: clamp(1.5rem, 7.2vw, 2rem); }
  .hero__br { display: inline; }
  .hero__copy > .hero__body { grid-area: body; margin-top: 1.25rem; font-size: 1.125rem; }
  .hero__figure { grid-area: art; gap: 0.5rem; align-self: center; }
  .hero-mosaic { --scx: 0; --scy: 1; }
  [data-mosaic='assemble'] .hero-mosaic__inner {
    animation-duration: 1400ms;
    animation-delay: calc(var(--i) * var(--stagger-phone, 60ms));
  }
  .hero-mosaic__tile { pointer-events: none; }
  .logo { gap: 0.0625rem; }
  
  .hero--full { padding-bottom: 2.75rem; }
  h2.builtfor__title { font-size: 1.5rem; }
  #built-for .builtfor__copy { padding-top: 2.25rem; padding-bottom: 1.25rem; }
  h2.cta-close__title { font-size: 1.625rem; }
  .builtfor__lead { font-size: 1.125rem; }
  .builtfor__body { font-size: 1rem; }
}



#about { padding-bottom: calc(var(--section-y) * 0.5); }
.pieces { padding-top: calc(var(--section-y) * 0.5); }

.pieces__title { max-width: 30ch; }

.pieces__br { display: none; }
@media (min-width: 48rem) { .pieces__br { display: inline; } }

.pieces__stage {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.25rem, 3vw, 2rem);
}
.pieces__head { margin-bottom: clamp(1.25rem, 2.5vw, 2rem); }

@media (min-width: 48rem) {
  .pieces__stage {
    grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
    align-items: center;
    gap: clamp(1rem, 2.5vw, 2rem);
  }
  
  .pieces__head {
    grid-column: 2; grid-row: 1;
    text-align: center;
    margin-bottom: 0;
  }
  .pieces__labels--left { grid-column: 1; grid-row: 2; }
  .pieces__figure { grid-column: 2; grid-row: 2; }
  .pieces__labels--right { grid-column: 3; grid-row: 2; }
  .pieces__title { margin-inline: auto; }
}

.pieces__figure { margin: 0; }
.pieces__img { width: 100%; height: auto; }


.pieces__band { display: none; }
@media (min-width: 48rem) {
  .pieces__flat { display: none; }
  .pieces__band { display: block; position: relative; width: 100%; aspect-ratio: var(--ar); }
}
.sband__stage { position: absolute; inset: 0; }
.sband__piece {
  position: absolute;
  left: var(--x); top: var(--y);
  width: var(--w); height: var(--h);
}
[data-band='ready'] .sband__piece {
  opacity: 0;
  transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(0.9);
}

[data-band='play'] .sband__piece {
  animation: sband-settle 2.2s cubic-bezier(0.33, 1, 0.68, 1) var(--d) both;
}
@keyframes sband-settle {
  from { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(0.9); }
  35%  { opacity: 1; }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  [data-band] .sband__piece {
    animation: none !important; opacity: 1 !important; transform: none !important;
  }
}

.pieces__img { aspect-ratio: 420 / 321; }

.pieces__labels {
  display: grid;
  gap: clamp(2.5rem, 7vw, 5rem);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.9375rem;
  line-height: 1.3;
  color: var(--charcoal-muted);
}
.pieces__labels li { display: flex; align-items: center; gap: 0.625rem; }

.pieces__labels li::after,
.pieces__labels li::before {
  content: '';
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1px;
  background: color-mix(in srgb, var(--charcoal) 22%, transparent);
}
.pieces__labels--left li::before,
.pieces__labels--right li::after { content: none; }
.pieces__labels--left { justify-items: end; text-align: right; }
.pieces__labels--right { justify-items: start; }


@media (max-width: 47.999rem) {
  .pieces__stage {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem 1.5rem;
  }
  .pieces__head { grid-column: 1 / -1; grid-row: 1; text-align: left; }
  .pieces__figure { grid-column: 1 / -1; grid-row: 2; }
  .pieces__labels {
    grid-row: 3;
    gap: 0.6rem;
    justify-items: start;
    text-align: left;
  }
  .pieces__labels--left { grid-column: 1; }
  .pieces__labels--right { grid-column: 2; }
  .pieces__labels li::after,
  .pieces__labels li::before { content: none; }
}

.layers {
  --px: 0;         
  --shift: 10px;   
  margin-top: clamp(2rem, 4vw, 3rem);
}

.layers__track {
  display: flex;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  margin: 0;
  padding: 16px 0;    
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.layers__track::-webkit-scrollbar { display: none; }
.layer { --lift: 0px; flex: 0 0 76%; scroll-snap-align: start; }
@media (min-width: 40rem) { .layer { flex-basis: 46%; } }


@media (min-width: 64rem) {
  .layers__track {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: visible;
    scroll-snap-type: none;
    transform: translate3d(calc(var(--px) * var(--shift)), 0, 0);
    transition: transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .layer {
    flex: none;
    transform: translate3d(0, calc(var(--px) * var(--dy) + var(--lift)), 0)
               rotate(calc(var(--px) * var(--dr)));
    transition: transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
  }
}

.card-media {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 10px;
  background: var(--cream-tint);
  transition: box-shadow 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.card-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
}


.layer:hover, .layer:focus-visible { --lift: -10px; z-index: 2; }
.layer:hover .card-media,
.layer:focus-visible .card-media { box-shadow: 0 16px 36px rgb(var(--dark-rgb) / 0.26); }
.layer:hover .card-media img,
.layer:focus-visible .card-media img { transform: scale(1.04); }
.layer:focus-visible { outline: none; }
.layer:focus-visible .card-media { outline: 2px solid var(--charcoal); outline-offset: 4px; }


.layer__chip {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 1.25rem;
  text-align: center;
  border-radius: inherit;
  isolation: isolate;
}
.layer__chip::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  border-radius: inherit;
  
  background: radial-gradient(closest-side,
    rgb(var(--dark-rgb) / 0.86) 0%,
    rgb(var(--dark-rgb) / 0.8) 66%,
    rgb(var(--dark-rgb) / 0) 100%);
  transition: opacity 460ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.layer__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(closest-side,
    rgb(var(--dark-rgb) / 0.9) 0%,
    rgb(var(--dark-rgb) / 0.88) 72%,
    rgb(var(--dark-rgb) / 0.58) 100%);
  clip-path: inset(100% 0 0 0 round 10px);
  transition: clip-path 520ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.layer:hover .layer__scrim,
.layer:focus-within .layer__scrim { clip-path: inset(0 0 0 0 round 10px); }
.layer:hover .layer__chip::before,
.layer:focus-within .layer__chip::before { opacity: 0; }

.layer__label {
  font-size: clamp(1.125rem, 1.5vw, 1.3125rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--band-text);
  text-wrap: balance;
}

.layer__reveal {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 420ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.layer__reveal > .layer__clip { overflow: hidden; min-height: 0; }
.layer:hover .layer__reveal,
.layer:focus-within .layer__reveal { grid-template-rows: 1fr; }
.layer__def {
  padding-top: 0.6rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--band-text);
}


@media (hover: none) {
  .layer__reveal { grid-template-rows: 1fr; }
  .layer__chip::before {
    opacity: 1 !important;
    background: radial-gradient(closest-side,
      rgb(var(--dark-rgb) / 0.88) 0%,
      rgb(var(--dark-rgb) / 0.84) 70%,
      rgb(var(--dark-rgb) / 0.36) 100%);
  }
  .layer__scrim { display: none; }
}


.layers__controls { display: flex; gap: 0.75rem; margin-top: 1.5rem; }
@media (min-width: 64rem) { .layers__controls { display: none; } }
.layers__btn {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid color-mix(in srgb, var(--charcoal) 26%, transparent);
  border-radius: 999px;
  background: transparent;
  color: var(--charcoal);
  font-size: 1rem;
  cursor: pointer;
  transition: border-color 200ms ease, opacity 200ms ease;
}
.layers__btn:hover { border-color: var(--charcoal); }
.layers__btn[disabled] { opacity: 0.35; cursor: default; }

@media (prefers-reduced-motion: reduce) {
  .layers__track, .layer, .card-media img,
  .layer__scrim, .layer__chip::before, .layer__reveal { transition: none; }
  
  .layers__track, .layer { transform: none !important; }
}