/* The Shirt Legend (22 Sep 2026): the six cuts, each turning through its own
   colours with the colour's name under the shirt. On white, as her legend is
   (her word, 22 Sep 2026). Headed the way the collections are. */
.sl { background: #fff; color: var(--nav-bg, #001E2D); padding: clamp(60px, 9vh, 110px) 16px; }
.sl-head { display: grid; gap: 8px; justify-items: center; text-align: center; margin: 0 0 clamp(36px, 6vh, 70px); }
.sl-head small { font: 600 10px var(--mono); letter-spacing: .3em; text-transform: uppercase; color: var(--flag, #D62828); }
.sl-head h2 { margin: 0; font: 400 clamp(34px, 5vw, 72px)/1 'Anton', var(--display); text-transform: uppercase; letter-spacing: .01em; }
.sl-line { margin: 6px 0 4px; font: italic 400 clamp(17px, 1.6vw, 22px)/1.45 var(--body); opacity: .85; }
.sl-head span { font: 600 10px var(--mono); letter-spacing: .24em; text-transform: uppercase; opacity: .55; }

/* all six on one line (her word, 22 Sep 2026); on a phone the line runs on
   past the edge and is swiped along, one cut at a time */
.sl-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); max-width: 1700px; margin: 0 auto; gap: clamp(16px, 2vw, 40px); }
@media (max-width: 900px) {
  .sl-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(58vw, 240px); justify-content: start;
    overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 0 16px 10px; scrollbar-width: none; }
  .sl-grid::-webkit-scrollbar { display: none; }
  .sl-card { scroll-snap-align: center; }
}

.sl-card { margin: 0; display: grid; justify-items: center; gap: 14px; }
.sl-cut { display: grid; justify-items: center; gap: 4px; text-align: center; }
.sl-cut b { font: 400 clamp(24px, 2.2vw, 32px)/1 'Anton', var(--display); text-transform: uppercase; letter-spacing: .02em; }
.sl-cut small { font: 600 10px var(--mono); letter-spacing: .22em; text-transform: uppercase; opacity: .65; }
/* every colour of a cut sits in the same place, and only one shows at a time */
.sl-stage { position: relative; width: 100%; aspect-ratio: 1 / 1.08; }
/* the colour's name sits under the shirt (her word, 22 Sep 2026) */
.sl-look { position: absolute; inset: 0; display: grid; grid-template-rows: 1fr auto; justify-items: center; gap: 12px;
  opacity: 0; transition: opacity .7s ease; }
.sl-look.is-on { opacity: 1; }
.sl-name { order: 2; font: 600 11px var(--mono); letter-spacing: .22em; text-transform: uppercase; padding: 6px 11px; border-radius: 4px;
  background: var(--nav-bg, #001E2D); color: var(--nav-ink, #FFB627); white-space: nowrap; }
.sl-shirt { position: relative; width: 100%; min-height: 0; }
.sl-shirt picture, .sl-shirt img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: 50% 50%; }
.sl-look.is-on .sl-shirt img { animation: slIn .7s ease both; }
@keyframes slIn { from { transform: translateY(8px) scale(.98); } to { transform: none; } }
.sl-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.sl-chip { width: 22px; height: 22px; border-radius: 50%; padding: 0; cursor: pointer; background: var(--c);
  border: 1.5px solid rgba(0,30,45,.35); box-shadow: inset 0 0 0 2px #fff; transition: transform .2s, border-color .2s; }
.sl-chip.is-on { border-color: var(--red, #AE2012); border-width: 2px; transform: scale(1.18); }
.sl-chip:focus-visible { outline: 2px solid var(--nav-bg, #001E2D); outline-offset: 3px; }
@media (max-width: 700px) { .sl-name { font-size: 9px; letter-spacing: .12em; padding: 5px 7px; } .sl-chip { width: 18px; height: 18px; } .sl-chips { gap: 7px; } }
@media (prefers-reduced-motion: reduce) { .sl-look { transition: none; } .sl-look.is-on .sl-shirt img { animation: none; } }
/* six to a line on a narrower screen: smaller dots and colour names so each
   cut still has its colours on one row */
@media (min-width: 901px) and (max-width: 1200px) { .sl-chip { width: 16px; height: 16px; } .sl-chips { gap: 6px; } .sl-name { font-size: 9px; letter-spacing: .1em; padding: 5px 7px; } }
/* where the colours come from (her word, 22 Sep 2026) */
.sl-note { margin: clamp(30px, 5vh, 56px) 0 0; text-align: center; font: 600 10px var(--mono); letter-spacing: .24em; text-transform: uppercase; opacity: .6; }