/* 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 var(--tiny) 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 var(--tiny) 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); }
/* On a phone or a pad the six cuts are not a line you have to drag sideways —
   they stand two to a row, three rows, all of them on screen at once
   (her word, 7 Oct 2026). */
@media (max-width: 900px) {
  .sl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row;
    gap: clamp(18px, 4vw, 34px) clamp(14px, 3vw, 28px); margin: 0 auto; padding: 0; }
  .sl-stage { aspect-ratio: 1 / 1.14; }
  .sl-cut b { font-size: clamp(20px, 5.4vw, 30px); }
  .sl-chips { gap: 7px; }
}

.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 var(--tiny) 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 var(--tiny) 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: var(--tiny); 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: var(--tiny); 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 var(--tiny) var(--mono); letter-spacing: .24em; text-transform: uppercase; opacity: .6; }