.background-intro { padding: 48px 0 36px; }
.background-heading { display: flex; justify-content: space-between; align-items: end; gap: 32px; margin-top: 44px; }
.background-heading h1 { margin-top: 16px; font-size: clamp(64px, 6.8vw, 94px); }
.background-heading h1 em { display: inline-block; padding: .05em .06em .12em 0; }
.background-heading > p { max-width: 330px; padding-bottom: 10px; font-size: 23px; }
.fabric-lookbook { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, .8fr); align-items: center; gap: 7%; padding-bottom: 100px; }
.fabric-stage { position: relative; width: 100%; min-width: 0; min-height: 540px; aspect-ratio: 1; overflow: hidden; background: var(--fabric-tone, #eee8db); }
.fabric-stage-label { position: absolute; top: 24px; left: 26px; font: 10px/1.5 Arial, sans-serif; letter-spacing: .17em; }
.fabric-stack { position: absolute; inset: 12% 20% 13%; }
.fabric-underlay, .fabric-card { position: absolute; inset: 0; background: var(--paper); box-shadow: 0 18px 30px #49312f24; }
.fabric-underlay-one { transform: rotate(7deg) translate(5px, 2px); background: #fffdf5; }
.fabric-underlay-two { transform: rotate(-9deg) translate(-5px, 4px); background: #dce9e8; }
.fabric-card { z-index: 1; padding: 7px; opacity: 1; transform: rotate(-3deg); }
.fabric-card[aria-hidden="true"] { z-index: 0; opacity: 0; transform: rotate(2deg) translateY(8px); pointer-events: none; }
.fabric-card img { width: 100%; height: 100%; object-fit: cover; }
.fabric-handnote { position: absolute; bottom: 22px; left: 0; right: 0; text-align: center; color: var(--cherry); font: 31px/1.3 Pinyon, cursive; transform: rotate(-3deg); }
.fabric-selection { min-width: 0; padding-block: 28px; }
.fabric-count { margin-bottom: 28px; color: var(--cherry); font: 12px/1.5 Arial, sans-serif; letter-spacing: .1em; font-variant-numeric: tabular-nums; }
.fabric-count > span:nth-child(2) { margin-inline: 10px; }
.fabric-selection h2 { min-height: 1.15em; margin-top: 12px; font-size: clamp(48px, 4.8vw, 68px); line-height: 1.15; }
.fabric-description { min-height: 3.1em; max-width: 29ch; margin-top: 12px; font-size: 21px; }
.fabric-swatches { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 28px; }
.fabric-swatch { display: flex; flex-direction: column; align-items: stretch; min-width: 0; min-height: 48px; padding: 0 0 8px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--ink); font: 16px/1.3 Instrument, Georgia, serif; text-align: left; cursor: pointer; }
.fabric-swatch img { flex: none; width: 100%; height: auto; aspect-ratio: .8; margin-bottom: 8px; object-fit: cover; }
.fabric-swatch[aria-pressed="true"] { border-bottom-color: var(--cherry); }
.fabric-swatch[aria-pressed="true"] img { outline: 2px solid var(--cherry); outline-offset: 3px; }
.fabric-swatch:focus-visible, .fabric-arrow:focus-visible { outline: 3px solid var(--cherry); outline-offset: 5px; }
.fabric-swatch:hover { color: var(--cherry); }
.fabric-navigation { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 20px; }
.fabric-lookbook:not([data-ready]) .fabric-navigation { display: none; }
.fabric-navigation > span { font-size: 17px; }
.fabric-arrow { display: grid; place-items: center; flex: none; width: 48px; height: 48px; padding: 0; border: 1px solid #d9a4a4; border-radius: 50%; background: transparent; color: var(--ink); font: inherit; cursor: pointer; }
.fabric-arrow:hover { background: var(--pink); }
.fabric-arrow:active { background: #edc1c0; }
.fabric-load-error { margin-top: 16px; color: var(--cherry); font-size: 17px; }
.fabric-note { margin-top: 30px; padding-top: 20px; border-top: 1px solid #d9c9c1; font-size: 16px; line-height: 1.5; }
.fabric-selection .text-link { margin-top: 12px; font-size: 19px; }
@media (max-width: 1000px) and (min-width: 761px) {
  .fabric-lookbook { grid-template-columns: minmax(0, 1fr) minmax(270px, .8fr); gap: 5%; }
  .fabric-stage { min-height: 500px; }
  .fabric-stack { inset-inline: 14%; }
}
@media (max-width: 760px) {
  .background-intro { padding-top: 32px; }
  .background-heading { align-items: start; flex-direction: column; gap: 14px; margin-top: 36px; }
  .background-heading h1 { font-size: clamp(60px, 13vw, 82px); }
  .background-heading > p { padding: 0; font-size: 21px; }
  .fabric-lookbook { grid-template-columns: 1fr; gap: 8px; padding-bottom: 64px; }
  .fabric-stage { min-height: 0; aspect-ratio: .92; }
  .fabric-stage-label { top: 18px; left: 18px; font-size: 9px; }
  .fabric-stack { inset: 12% 21% 14%; }
  .fabric-handnote { bottom: 16px; font-size: 27px; }
  .fabric-selection { padding-top: 20px; }
  .fabric-count { margin-bottom: 15px; }
  .fabric-selection h2 { font-size: 54px; }
  .fabric-description { max-width: 100%; }
  .fabric-swatches { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .fabric-swatch img { aspect-ratio: 1; }
  .fabric-navigation { max-width: 330px; }
}
@media (prefers-reduced-motion: no-preference) {
  .fabric-card { transition: opacity .35s ease, transform .5s cubic-bezier(.2, .7, .25, 1); }
  .fabric-arrow, .fabric-swatch { transition: color .2s ease, background-color .2s ease; }
}
@media (forced-colors: active) {
  .fabric-swatch[aria-pressed="true"] { border-color: Highlight; }
  .fabric-swatch[aria-pressed="true"] img { outline-color: Highlight; }
  .fabric-arrow { border-color: ButtonText; }
}