/* The card stack under the Shop (21 Sep 2026).
   Every card sits in the same spot; data-pos moves it: 0 is the big one in
   front, -1 and 1 the smaller ones either side behind it, -2 and 2 waiting
   just out of sight, anything else hidden. The stack steps left by giving
   every card the next position, and the transitions do the sliding. */

.cf { background: #000; color: #EAE2B7; padding: clamp(50px, 8vh, 100px) 16px clamp(40px, 6vh, 80px); overflow: hidden; }
.cf-head { text-align: center; margin: 0 0 clamp(26px, 4vh, 44px); }
.cf-head small { font: 600 10px var(--mono); letter-spacing: .3em; text-transform: uppercase; color: var(--nav-ink, #FFB627); }

.cf-stage { position: relative; height: clamp(420px, 62vh, 560px); max-width: 1100px; margin: 0 auto; }
.cf-card { position: absolute; left: 50%; top: 50%; width: clamp(230px, 30vw, 360px); aspect-ratio: 3 / 4;
  display: grid; grid-template-rows: auto minmax(0, 1fr); border-radius: 14px; overflow: hidden;
  background: var(--cf-bg); color: var(--cf-ink); text-decoration: none;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.9);
  transform: translate(-50%, -50%) scale(.6); opacity: 0; z-index: 0; pointer-events: none;
  transition: transform .8s cubic-bezier(.6,.05,.25,1), opacity .8s ease, filter .8s ease; will-change: transform; }

/* the band at the top: the name, large, and the ink under it — never over a face */
.cf-band { display: grid; align-content: center; padding: 14px 16px 12px; background: var(--cf-bg); }
.cf-name { font: 400 clamp(26px, 3.4vw, 46px)/.92 'Anton', var(--display); text-transform: uppercase; letter-spacing: .005em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cf-inkline { font: 600 9px var(--mono); font-style: normal; letter-spacing: .22em; text-transform: uppercase; opacity: .75; margin-top: 6px; }
.cf-shot { position: relative; display: block; min-height: 0; overflow: hidden; }
.cf-shot picture, .cf-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; }
.cf-tag { position: absolute; right: 12px; bottom: 12px; z-index: 2; padding: 7px 12px; border-radius: 4px;
  background: var(--nav-ink, #FFB627); color: var(--nav-bg, #001E2D);
  font-family: var(--price), var(--mono); font-weight: 700; font-size: clamp(14px, 1.4vw, 20px); line-height: 1; }
.cf-tag .from { font: 600 8px var(--mono); letter-spacing: .18em; text-transform: uppercase; opacity: .7; margin-right: 5px; }
.cf-tag .compare { display: none; }

/* the positions */
.cf-card[data-pos="0"]  { transform: translate(-50%, -50%) scale(1); opacity: 1; z-index: 3; pointer-events: auto; }
.cf-card[data-pos="-1"] { transform: translate(calc(-50% - 62%), -50%) scale(.8); opacity: 1; z-index: 2; pointer-events: auto; filter: brightness(.82); }
.cf-card[data-pos="1"]  { transform: translate(calc(-50% + 62%), -50%) scale(.8); opacity: 1; z-index: 2; pointer-events: auto; filter: brightness(.82); }
.cf-card[data-pos="-2"] { transform: translate(calc(-50% - 110%), -50%) scale(.62); opacity: 0; z-index: 1; }
.cf-card[data-pos="2"]  { transform: translate(calc(-50% + 110%), -50%) scale(.62); opacity: 0; z-index: 1; }
.cf-card[data-pos="0"]:hover { filter: none; }
.cf-card[data-pos="0"]:focus-visible { outline: 3px solid var(--nav-ink, #FFB627); outline-offset: 4px; }

.cf-nav { display: flex; justify-content: center; align-items: center; gap: 22px; margin-top: clamp(22px, 4vh, 40px); }
.cf-btn { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid rgba(234,226,183,.45); background: transparent;
  color: #EAE2B7; font-size: 18px; cursor: pointer; transition: background .2s, border-color .2s; }
.cf-btn:hover { background: var(--nav-ink, #FFB627); border-color: var(--nav-ink, #FFB627); color: var(--nav-bg, #001E2D); }
.cf-count { font: 600 11px var(--mono); letter-spacing: .26em; min-width: 80px; text-align: center; }

@media (max-width: 700px) {
  .cf-stage { height: clamp(380px, 70vh, 480px); }
  .cf-card { width: min(68vw, 280px); }
  .cf-card[data-pos="-1"] { transform: translate(calc(-50% - 44%), -50%) scale(.78); }
  .cf-card[data-pos="1"]  { transform: translate(calc(-50% + 44%), -50%) scale(.78); }
}
@media (prefers-reduced-motion: reduce) { .cf-card { transition: none; } }

/* ---- the twins as a card stack: each card is a pair (21 Sep 2026) ----
   No band and no name across the top — the pair is two pictures side by side,
   each labelled like the collage: batch number on its side upper left, and
   under the picture the name, the ink, the price. */
/* the YinYang Collection sits on black, not navy (her word, 22 Sep 2026) */
.cf-twins { --tw-bg: #000; background: var(--tw-bg); }
.tw-mark { display: block; width: clamp(54px, 5vw, 72px); height: auto; margin: 0 auto 6px; animation: twMarkTurn 24s linear infinite; }
@keyframes twMarkTurn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .tw-mark { animation: none; } }
.cf-twins .tw-head { margin-bottom: clamp(26px, 4vh, 44px); }
/* white and black split the way a yin-yang is split (her word, 22 Sep 2026),
   standing upright as the symbol does: the S of its own two half-circles runs
   from the middle of the top edge to the middle of the bottom edge — white on
   the left bowing out to the right in the upper half, black on the right
   bowing out to the left in the lower half. The two halves are true circles,
   exactly the yin-yang's own (her word: the exact shape, not a stretched S) —
   the picture is scaled to the section's height, never stretched, so the S
   spans it top to bottom; a narrow screen shows less of the bulges. The heading's words are white drawn in "difference", so
   they read black on the white and white on the black wherever the curve
   crosses them; the shirts' own words are turned dark on the white by
   store.js, which tests each against this same curve. */
.cf-twins { background: #000 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-200 0 500 100' preserveAspectRatio='xMidYMid slice'%3E%3Cpath fill='%23fff' d='M50 0 A25 25 0 0 1 50 50 A25 25 0 0 0 50 100 L-200 100 L-200 0 Z'/%3E%3C/svg%3E") center / cover no-repeat; }
.cf-twins .tw-head { color: #fff; }
.cf-twins .tw-head h2, .cf-twins .tw-line, .cf-twins .tw-head > span { color: #fff; mix-blend-mode: difference; opacity: 1; }
.cf-twins .tw-head small { color: var(--flag, #D62828); }
.cf-twins .tw-batch.on-white, .cf-twins figcaption b.on-white, .cf-twins .tw-ink.on-white { color: #000; }
.cf-twins .cf-stage { height: clamp(520px, 72vh, 640px); max-width: 1280px; }
.cf-twins .cf-pair { width: clamp(520px, 52vw, 720px); aspect-ratio: auto; height: auto;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; column-gap: 80px;
  background: transparent; border-radius: 0; overflow: visible; box-shadow: none; margin: 0; perspective: 1200px; }
.cf-twins .cf-pair .tw-shot { border-radius: 4px; box-shadow: 0 26px 50px -30px rgba(0,0,0,.9); }
.cf-twins .cf-card[data-pos="-1"] { transform: translate(calc(-50% - 78%), -50%) scale(.62); filter: brightness(.6); }
.cf-twins .cf-card[data-pos="1"]  { transform: translate(calc(-50% + 78%), -50%) scale(.62); filter: brightness(.6); }
.cf-twins .cf-card[data-pos="-2"] { transform: translate(calc(-50% - 130%), -50%) scale(.5); }
.cf-twins .cf-card[data-pos="2"]  { transform: translate(calc(-50% + 130%), -50%) scale(.5); }
@media (max-width: 700px) {
  .cf-twins .cf-stage { height: clamp(360px, 62vh, 460px); }
  .cf-twins .cf-pair { width: min(92vw, 380px); column-gap: 18px; }
  .cf-twins .cf-card[data-pos="-1"] { transform: translate(calc(-50% - 62%), -50%) scale(.6); }
  .cf-twins .cf-card[data-pos="1"]  { transform: translate(calc(-50% + 62%), -50%) scale(.6); }
}

/* ---- break the carousel (her word, 21 Sep 2026) ---- */
/* "Wanna Play?" — the yellow box that offers the game after 10 seconds */
.tw-play { position: absolute; z-index: 9; left: 50%; top: 50%; transform: translate(-50%, -50%);
  animation: twPlayIn .45s cubic-bezier(.2,.8,.2,1); }
.tw-play[hidden] { display: none; }
@keyframes twPlayIn { from { opacity: 0; transform: translate(-50%, -40%) scale(.92); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.tw-play-box { display: grid; gap: 10px; justify-items: center; text-align: center; cursor: pointer;
  padding: 26px 34px 24px; border: 0; border-radius: 8px; background: var(--nav-ink, #FFB627); color: var(--nav-bg, #001E2D);
  box-shadow: 0 30px 70px -20px rgba(0,0,0,.85); max-width: min(86vw, 440px); transition: transform .2s; }
.tw-play-box:hover { transform: scale(1.03); }
.tw-play-box:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.tw-play-box b { font: 400 clamp(30px, 3.4vw, 46px)/1 'Anton', var(--display); text-transform: uppercase; letter-spacing: .01em; }
.tw-play-box span { font: 600 11px/1.6 var(--mono); letter-spacing: .18em; text-transform: uppercase; }
.tw-play-x { position: absolute; z-index: 2; right: -12px; top: -12px; width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
  border: 0; background: var(--nav-bg, #001E2D); color: var(--nav-ink, #FFB627); font-size: 13px; box-shadow: 0 6px 16px -6px rgba(0,0,0,.8); }
/* once they are playing, a small count in the corner of the stage */
.tw-play-count { position: absolute; z-index: 9; right: 14px; top: 10px; font: 700 11px var(--mono); letter-spacing: .14em;
  padding: 4px 9px; border-radius: 3px; background: var(--nav-ink, #FFB627); color: var(--nav-bg, #001E2D); }
.tw-play-count[hidden] { display: none; }
.tw-hint-touch { display: none; }
@media (hover: none) { .tw-hint-mouse { display: none; } .tw-hint-touch { display: inline; } }
[data-breakable].is-playing .cf-stage { cursor: crosshair; }

/* the cracks: each path is drawn out as it is uncovered */
.tw-cracks { position: absolute; inset: 0; z-index: 6; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.tw-cracks path { fill: none; stroke: rgba(255,255,255,.9); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  vector-effect: non-scaling-stroke; stroke-dasharray: 1400; stroke-dashoffset: 1400;
  filter: drop-shadow(0 0 3px rgba(255,255,255,.7)); transition: stroke-dashoffset .35s ease-out; }
.tw-cracks path.on { stroke-dashoffset: 0; }
.cf-stage.is-hit { animation: twShake .28s cubic-bezier(.36,.07,.19,.97); }
@keyframes twShake { 20% { transform: translate(-7px, 2px) rotate(-.4deg); } 45% { transform: translate(6px, -3px) rotate(.4deg); }
  70% { transform: translate(-4px, 1px); } 100% { transform: none; } }

/* the shatter: glass pieces fly off, and the twins with them */
.tw-shard { position: absolute; inset: 0; z-index: 7; pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,.62), rgba(210,230,255,.18) 55%, rgba(255,255,255,.4)); backdrop-filter: blur(3px);
  transition: transform 1s cubic-bezier(.2,.7,.2,1), opacity 1s ease; }
.tw-flash { position: absolute; inset: 0; z-index: 8; background: #fff; opacity: 0; pointer-events: none; animation: twFlash .5s ease-out; }
@keyframes twFlash { 0% { opacity: .85; } 100% { opacity: 0; } }
.cf-twins.is-broken .cf-stage .tw-one { transition: transform .9s cubic-bezier(.2,.7,.2,1), opacity .9s ease !important; }

/* what they land in: six to a line — three pairs — 100px apart, a pair never
   split (her word, 21 Sep 2026: first four, then six). Screens too narrow for
   six drop to four, and a phone to two, always an even number so pairs hold. */
.tw-after { display: grid; grid-template-columns: repeat(6, minmax(0, 260px)); justify-content: center;
  column-gap: 80px; row-gap: 100px; padding-top: 20px; }
.tw-after[hidden] { display: none; }
.tw-after .tw-one { opacity: 0; transform: translate(var(--fx, 0), var(--fy, 0)) rotate(var(--fr, 0deg)) scale(.7);
  transition: transform 1s cubic-bezier(.2,.8,.2,1), opacity .7s ease; transition-delay: var(--fd, 0s); }
.tw-after.is-landed .tw-one { opacity: 1; transform: none; }
@media (max-width: 1399px) { .tw-after { grid-template-columns: repeat(4, minmax(0, 260px)); } }
@media (max-width: 900px) { .tw-after { grid-template-columns: repeat(2, minmax(0, 280px)); } }
@media (max-width: 700px) { .tw-after { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; row-gap: 60px; } }
.cf-twins.is-broken .cf-stage, .cf-twins.is-broken .cf-nav { display: none; }

@media (prefers-reduced-motion: reduce) {
  .cf-stage.is-hit { animation: none; }
  .tw-after .tw-one { opacity: 1; transform: none; transition: none; }
}

/* six to a line makes the pictures small, and the batch number was longer than
   the picture was tall — it hung below and pushed the names out of line. In
   the rows it is set smaller so it always fits beside its own picture. */
.tw-after .tw-batch { font-size: 8px; letter-spacing: .06em; }
/* every figure in a row is stretched to the tallest one; the spare room goes
   below the caption, not into the picture's row, so the names stay level */
.tw-after .tw-one { align-items: start; align-content: start; }

/* ---- the all-designs stack, matched to the twins (21 Sep 2026) ---- */
.cf-all { background: var(--nav-bg, #001E2D); }
.cf-all .cf-stage { height: clamp(500px, 70vh, 620px); }
.cf-all .cf-single { width: clamp(230px, 24vw, 330px); aspect-ratio: auto; height: auto; display: block;
  background: transparent; border-radius: 0; overflow: visible; box-shadow: none; }
.cf-all .cf-single .tw-shot { border-radius: 4px; box-shadow: 0 26px 50px -30px rgba(0,0,0,.9); }
.cf-all .cf-card[data-pos="-1"] { transform: translate(calc(-50% - 70%), -50%) scale(.78); filter: brightness(.6); }
.cf-all .cf-card[data-pos="1"]  { transform: translate(calc(-50% + 70%), -50%) scale(.78); filter: brightness(.6); }
@media (max-width: 700px) {
  .cf-all .cf-single { width: min(64vw, 260px); }
  .cf-all .cf-card[data-pos="-1"] { transform: translate(calc(-50% - 52%), -50%) scale(.74); }
  .cf-all .cf-card[data-pos="1"]  { transform: translate(calc(-50% + 52%), -50%) scale(.74); }
}

/* the one-liner under the YinYang heading */
.tw-line { margin: 6px 0 4px; font: italic 400 clamp(17px, 1.6vw, 22px)/1.45 var(--body); color: #EAE2B7; opacity: .92; letter-spacing: .01em; }
.cf-twins .tw-batch, .cf-twins figcaption b, .cf-twins .tw-ink { transition: color .45s ease; }