/* Makinah base — a modern reset plus the motion-safety rules the kit relies on.
   Link it before your own stylesheet: <link rel="stylesheet" href="assets/css/mk-base.css"> */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { min-height: 100svh; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }
a { color: inherit; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.mk-skip { position: absolute; left: 1rem; top: -4rem; z-index: 1000; padding: .75rem 1rem; background: #000; color: #fff; border-radius: .5rem; }
.mk-skip:focus { top: 1rem; }
.mk-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.mk-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }

/* Pre-animation states exist only when JS is running and motion is allowed, so the
   site is fully readable without JavaScript or with reduced motion. */
.mk-js:not(.mk-reduced) [data-reveal],
.mk-js:not(.mk-reduced) [data-split]:not(.is-split) { opacity: 0; }
.mk-js:not(.mk-reduced) [data-img-reveal] { clip-path: inset(100% 0 0 0); }
.mk-line { padding-bottom: .06em; margin-bottom: -.06em; } /* keeps descenders inside line masks */

/* Horizontal gallery: native swipe row until the desktop pin takes over. */
[data-hscroll-track] { display: flex; gap: clamp(1rem, 3vw, 2.5rem); }
@media (max-width: 899px) {
  [data-hscroll] { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
  [data-hscroll-track] > * { scroll-snap-align: start; flex: 0 0 82%; }
}
[data-hscroll].is-hscroll { overflow: hidden; }
[data-hscroll].is-hscroll [data-hscroll-track] { width: max-content; }

/* Pinned chapters: stacked on mobile, layered on desktop. */
[data-pin-steps].is-pinned { position: relative; min-height: 100svh; }
[data-pin-steps].is-pinned [data-steps],
[data-pin-steps].is-pinned [data-steps-media] { display: grid; }
[data-pin-steps].is-pinned [data-step],
[data-pin-steps].is-pinned [data-step-media] { grid-area: 1 / 1; }

[data-marquee] { display: flex; width: max-content; will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Cross-document page transitions (progressive enhancement). */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: mk-vt-out .35s cubic-bezier(.7,0,.84,0) both; }
  ::view-transition-new(root) { animation: mk-vt-in .55s cubic-bezier(.16,1,.3,1) both; }
}
@keyframes mk-vt-out { to { opacity: 0; transform: translateY(-12px); } }
@keyframes mk-vt-in { from { opacity: 0; transform: translateY(16px); } }