/* The twins section (21 Sep 2026) — one design, its inks side by side.
   Twenty ways for a pair to arrive; the section carries one tw-anim-N class and
   each pair gains .is-in as it scrolls into view. */

.tw { background: var(--tw-bg, var(--nav-bg, #001E2D)); color: #EAE2B7; padding: clamp(60px, 9vh, 120px) clamp(18px, 5vw, 80px); overflow: hidden; }
.tw-head { display: grid; gap: 8px; justify-items: center; text-align: center; margin: 0 0 clamp(50px, 8vh, 100px); }
.tw-head small { font: 600 10px var(--mono); letter-spacing: .3em; text-transform: uppercase; color: var(--nav-ink, #FFB627); }
.tw-head h2 { margin: 0; font: 400 clamp(34px, 5vw, 72px)/1 'Anton', var(--display); text-transform: uppercase; letter-spacing: .01em; }
.tw-head span { font: 600 10px var(--mono); letter-spacing: .24em; text-transform: uppercase; opacity: .6; }

/* a pair: two pictures, 100px apart, side by side */
/* 100px picture to picture: the batch number and its 10px (20px in all) sit
   inside the right-hand figure, so the columns are 80px apart */
.tw-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 380px)); justify-content: center; column-gap: 80px;
  margin: 0 auto 100px; perspective: 1200px; }
.tw-pair:last-child { margin-bottom: 0; }
.tw-one { margin: 0; position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; row-gap: 10px; }
.tw-batch { grid-column: 1; grid-row: 1; align-self: start; writing-mode: vertical-rl; transform: rotate(180deg);
  font: 600 10px var(--mono); letter-spacing: .26em; text-transform: uppercase; line-height: 1; color: var(--nav-ink, #FFB627); white-space: nowrap; }
.tw-shot { grid-column: 2; grid-row: 1; position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 5; }
.tw-shot picture, .tw-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; }
.tw-one figcaption { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; text-align: right; }
.tw-one figcaption b { font: 600 10px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--nav-ink, #FFB627); }
.tw-ink { font: 600 10px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--nav-ink, #FFB627); opacity: .8; }
.tw-price { margin-top: 6px; 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; }
.tw-price .from { font: 600 8px var(--mono); letter-spacing: .18em; text-transform: uppercase; opacity: .7; margin-right: 5px; }
.tw-price .compare { display: none; }
.tw-wash { position: absolute; inset: 0; z-index: 2; background: var(--tw-bg, var(--ink)); pointer-events: none; opacity: 0; }

@media (max-width: 700px) {
  .tw-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; margin-bottom: 70px; }
}

/* ---------- shared timing ---------- */
.tw .tw-one, .tw .tw-shot, .tw .tw-shot img, .tw .tw-wash {
  transition-property: transform, opacity, filter, clip-path; transition-duration: .9s; transition-timing-function: cubic-bezier(.2,.7,.2,1); }
.tw .tw-r { transition-delay: 0s; }

/* 1 · Rise together */
.tw-anim-1 .tw-one { opacity: 0; transform: translateY(46px); }
.tw-anim-1 .is-in .tw-one { opacity: 1; transform: none; }

/* 2 · From either side */
.tw-anim-2 .tw-l { opacity: 0; transform: translateX(-90px); }
.tw-anim-2 .tw-r { opacity: 0; transform: translateX(90px); }
.tw-anim-2 .is-in .tw-one { opacity: 1; transform: none; }

/* 3 · Curtain */
.tw-anim-3 .tw-pair { position: relative; }
.tw-anim-3 .tw-pair::before, .tw-anim-3 .tw-pair::after { content: ''; position: absolute; z-index: 5; top: 0; bottom: 0; width: 50%;
  background: var(--tw-bg, var(--nav-bg, #001E2D)); transition: transform 1.1s cubic-bezier(.7,0,.2,1); }
.tw-anim-3 .tw-pair::before { left: 0; } .tw-anim-3 .tw-pair::after { right: 0; }
.tw-anim-3 .is-in::before { transform: translateX(-101%); } .tw-anim-3 .is-in::after { transform: translateX(101%); }

/* 4 · One then the other */
.tw-anim-4 .tw-one { opacity: 0; transform: translateY(30px); }
.tw-anim-4 .is-in .tw-one { opacity: 1; transform: none; }
.tw-anim-4 .is-in .tw-r { transition-delay: .45s; }

/* 5 · Grow in */
.tw-anim-5 .tw-one { opacity: 0; transform: scale(.86); }
.tw-anim-5 .is-in .tw-one { opacity: 1; transform: none; }

/* 6 · Turn over */
.tw-anim-6 .tw-l { opacity: 0; transform: rotateY(-70deg); transform-origin: left center; }
.tw-anim-6 .tw-r { opacity: 0; transform: rotateY(70deg); transform-origin: right center; }
.tw-anim-6 .is-in .tw-one { opacity: 1; transform: none; }

/* 7 · Into focus */
.tw-anim-7 .tw-one { opacity: .2; filter: blur(14px); }
.tw-anim-7 .is-in .tw-one { opacity: 1; filter: none; }

/* 8 · Wipe up */
.tw-anim-8 .tw-shot { clip-path: inset(100% 0 0 0); }
.tw-anim-8 .is-in .tw-shot { clip-path: inset(0 0 0 0); }
.tw-anim-8 .is-in .tw-r .tw-shot { transition-delay: .2s; }

/* 9 · Diagonal wipe */
.tw-anim-9 .tw-shot { clip-path: polygon(0 0, 0 0, 0 0, 0 0); }
.tw-anim-9 .is-in .tw-shot { clip-path: polygon(0 0, 200% 0, 0 200%, 0 0); }

/* 10 · Settle */
.tw-anim-10 .tw-shot img { transform: scale(1.25); }
.tw-anim-10 .tw-one { opacity: 0; }
.tw-anim-10 .is-in .tw-one { opacity: 1; }
.tw-anim-10 .is-in .tw-shot img { transform: scale(1); transition-duration: 1.6s; }

/* 11 · Pick one (pointer) */
.tw-anim-11 .tw-one { transition-duration: .5s; }
.tw-anim-11 .tw-pair:hover .tw-one { opacity: .35; transform: scale(.94); filter: grayscale(.6); }
.tw-anim-11 .tw-pair:hover .tw-one:hover { opacity: 1; transform: scale(1.05); filter: none; }

/* 12 · Mirror */
.tw-anim-12 .tw-r { opacity: 0; transform: translateX(calc(-100% - 100px)); }
.tw-anim-12 .is-in .tw-r { opacity: 1; transform: none; transition-delay: .15s; }

/* 13 · Part */
.tw-anim-13 .tw-l { transform: translateX(calc(50% + 50px)); }
.tw-anim-13 .tw-r { transform: translateX(calc(-50% - 50px)); opacity: .0; }
.tw-anim-13 .is-in .tw-one { transform: none; opacity: 1; }

/* 14 · Straighten */
.tw-anim-14 .tw-l { opacity: 0; transform: rotate(-8deg) translateY(20px); }
.tw-anim-14 .tw-r { opacity: 0; transform: rotate(8deg) translateY(20px); }
.tw-anim-14 .is-in .tw-one { opacity: 1; transform: none; }

/* 15 · Colour in */
.tw-anim-15 .tw-shot img { filter: grayscale(1) contrast(.9); }
.tw-anim-15 .is-in .tw-shot img { filter: none; transition-duration: 1.6s; }

/* 16 · Shutter */
.tw-anim-16 .tw-shot::after { content: ''; position: absolute; inset: 0; z-index: 3;
  background: repeating-linear-gradient(0deg, var(--tw-bg, var(--nav-bg, #001E2D)) 0 22px, transparent 22px 44px);
  transform-origin: top; transition: transform 1s cubic-bezier(.7,0,.2,1); }
.tw-anim-16 .is-in .tw-shot::after { transform: scaleY(0); }

/* 17 · Drop */
.tw-anim-17 .tw-one { opacity: 0; transform: translateY(-80px); }
.tw-anim-17 .is-in .tw-one { opacity: 1; transform: none; transition-timing-function: cubic-bezier(.3,1.5,.5,1); }
.tw-anim-17 .is-in .tw-r { transition-delay: .12s; }

/* 18 · Drift (scroll-linked; the page sets --drift from -1 to 1) */
.tw-anim-18 .tw-l { transform: translateY(calc(var(--drift, 0) * -40px)); transition: none; }
.tw-anim-18 .tw-r { transform: translateY(calc(var(--drift, 0) * 40px)); transition: none; }

/* 19 · Ink wash */
.tw-anim-19 .tw-wash { opacity: 1; transform: translateX(-101%); }
.tw-anim-19 .is-in .tw-wash { animation: twWash 1.2s cubic-bezier(.7,0,.2,1) forwards; }
.tw-anim-19 .is-in .tw-r .tw-wash { animation-delay: .18s; }
@keyframes twWash { 0% { transform: translateX(-101%); } 45% { transform: translateX(0); } 55% { transform: translateX(0); } 100% { transform: translateX(101%); } }

/* 20 · Tilt (pointer; the page sets --tx and --ty) */
.tw-anim-20 .tw-shot { transform: rotateX(var(--ty, 0deg)) rotateY(var(--tx, 0deg)); transition: transform .25s ease-out; transform-style: preserve-3d; }

/* nobody who has asked for less motion is made to watch any of it */
@media (prefers-reduced-motion: reduce) {
  .tw .tw-one, .tw .tw-shot, .tw .tw-shot img { transform: none !important; opacity: 1 !important; filter: none !important; clip-path: none !important; transition: none !important; }
  .tw .tw-wash, .tw-anim-16 .tw-shot::after, .tw-anim-3 .tw-pair::before, .tw-anim-3 .tw-pair::after { display: none !important; }
}

/* ---- the chooser's cards: a small stage for one pair each ---- */
.tw-grid { grid-template-columns: repeat(auto-fill, minmax(min(420px, 100%), 1fr)); }
.tw-card .tw-stage { border-radius: 10px; overflow: hidden; }
.tw-card .tw { padding: 26px 18px 30px; }
.tw-card .tw-head { display: none; }
.tw-card .tw-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; margin: 0; }
.tw-card .tw-price { font-size: 13px; padding: 5px 8px; }