/* Brand Mockups — Figma 710:1550 */
body[data-chapter="mockups"] { --dock-y: 168; --dock-x: 160; }
@media (min-width: 761px) { .fh .fh__chips { max-width: 1200px; justify-content: center; } }

.mk-intro { display: grid; gap: var(--s-4); }
.mk-intro .shapes { font-size: clamp(18px, calc(26 * var(--fx)), 26px); }

/* split: text + photo */
.mk-split__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s-7); align-items: center; }
.mk-split--rev .mk-split__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.mk-split--rev .mk-split__text { order: 2; }
.mk-split__text { display: grid; gap: var(--s-4); align-content: center; max-width: 620px; }
.mk-media { position: relative; overflow: hidden; border-radius: var(--r-card); background: #F2F3F8; transition: transform .7s var(--ease); transform-style: preserve-3d; }
.mk-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), filter .6s; }
.mk-media:hover img { transform: scale(1.04); }
.mk-media--tall { aspect-ratio: 640 / 760; max-height: 78svh; justify-self: center; width: auto; height: min(78svh, 760px); }
.mk-media--keychain { aspect-ratio: 561 / 938; height: min(84svh, 900px); width: auto; justify-self: center; background: linear-gradient(160deg, #6FC6C9, #B9B7F2); }
.mk-media--stickers { aspect-ratio: 1028 / 1522; height: min(84svh, 900px); width: auto; justify-self: center; background: var(--m-navy); display: grid; place-items: center; }
.mk-media--stickers img { width: 92%; height: auto; object-fit: contain; rotate: -8deg; }
.mk-media--clear { background: none; }
.mk-media--clear img { object-fit: contain; }

/* keychain swings on hover, stickers peel up */
.mk-swing { transform-origin: 50% 2%; }
.mk-media--keychain:hover .mk-swing { animation: swing 2.4s ease-in-out infinite; transform: none; }
@keyframes swing { 0%, 100% { rotate: 0deg; } 25% { rotate: 3deg; } 75% { rotate: -3deg; } }
.mk-media--stickers:hover .mk-peel { transform: scale(1.06) rotate(4deg); filter: drop-shadow(0 30px 30px rgba(0,0,0,.45)); }

.mk-note { display: grid; gap: var(--s-3); max-width: 1000px; }

/* merch rails */
.mk-hint { align-self: end; }
.mk-row { display: grid; gap: var(--s-3); margin-bottom: var(--s-6); }
.mk-rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: clamp(220px, 26vw, 420px); gap: var(--s-3);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding: 4px var(--gutter) var(--s-3);
  scroll-padding-inline: var(--gutter); scrollbar-width: none; cursor: grab;
}
.mk-rail::-webkit-scrollbar { display: none; }
.mk-rail.is-drag { cursor: grabbing; scroll-snap-type: none; }
.mk-rail.is-drag img { pointer-events: none; }
.mk-rail img { aspect-ratio: 1; width: 100%; object-fit: cover; border-radius: var(--r-card); scroll-snap-align: start; background: #F2F3F8; transition: transform .6s var(--ease), box-shadow .6s var(--ease); user-select: none; -webkit-user-drag: none; }
.mk-rail img:hover { transform: translateY(-6px); box-shadow: 0 30px 50px -30px rgba(14,19,60,.5); }
.mk-rail--wide { grid-auto-columns: clamp(280px, 40vw, 640px); }
.mk-rail--wide img { aspect-ratio: 906 / 502; }

/* signs */
.mk-signs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.mk-signs .mk-media { aspect-ratio: 907 / 498; }
.mk-rule { margin-top: var(--s-5); }

/* flags */
.mk-flags__row { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: var(--s-3); margin-top: var(--s-5); align-items: end; }
.mk-flags__row .mk-media:not(.mk-media--clear) { aspect-ratio: 448 / 501; }
.mk-stage { position: relative; margin-top: clamp(140px, 18vw, 320px); background: var(--m-navy); height: clamp(260px, 34vw, 640px); display: grid; place-items: end center; overflow: visible; }
.mk-stage__flags { width: min(100%, 1600px); height: auto; margin-bottom: 0; translate: 0 6%; filter: drop-shadow(0 40px 60px rgba(0,0,0,.35)); }
.mk-wave { transform-origin: 50% 100%; }
.mk-stage:hover .mk-wave, .mk-media--clear:hover .mk-wave { animation: sway 3s ease-in-out infinite; }
@keyframes sway { 0%, 100% { transform: skewX(0); } 50% { transform: skewX(-1.4deg); } }

@media (max-width: 900px) {
  .mk-split__grid, .mk-split--rev .mk-split__grid { grid-template-columns: 1fr; }
  .mk-split--rev .mk-split__text { order: 0; }
  .mk-media--tall, .mk-media--keychain, .mk-media--stickers { height: auto; width: 100%; }
  .mk-signs, .mk-flags__row { grid-template-columns: 1fr 1fr; }
}
.mk-flags { padding-bottom: 0; }
.mk-stage { clip-path: inset(-60vh 0 0 0); }