/* ==========================================================================
   Monolith — KATA (Katarina Radović, haute couture) case study
   A couture editorial: ivory paper, hairline rules, high-contrast serif,
   pinned sketchbook pages, and a wordmark sliced like cloth (the hero's
   strips shear with scroll — driven from js/pages/kata.js). Relies on
   site.css for resets, nav/footer bones, and keyframes.
   ========================================================================== */

html { background: #F4F1EA; }
body {
  background: #F4F1EA;
  color: #141414;
  transition: background-color 0.8s ease;
}

/* adaptive chrome: paper by default, switching to the runway's ink when
   that section sits behind the fixed header (toggled from kata.js) */
header.mono-nav {
  background: rgba(244,241,234,0.92); border-bottom: 1px solid rgba(20,20,20,0.12);
  transition: background-color 0.5s ease, border-color 0.5s ease;
}
.mono-word, header.mono-nav nav a { color: #6A665C; transition: color 0.35s ease; }
.mono-word:hover, header.mono-nav nav a:hover { color: #141414; }
header.mono-nav nav a.is-current { color: #141414; }
header.mono-nav.ka-dark-hdr { background: rgba(8,11,20,0.92); border-bottom-color: rgba(244,241,234,0.1); }
header.mono-nav.ka-dark-hdr .mono-word, header.mono-nav.ka-dark-hdr nav a { color: #9C9C9C; }
header.mono-nav.ka-dark-hdr .mono-word:hover, header.mono-nav.ka-dark-hdr nav a:hover { color: #F4F1EA; }
header.mono-nav.ka-dark-hdr nav a.is-current { color: #F4F1EA; }
.mono-burger span { transition: transform 0.4s cubic-bezier(0.5,0.15,0.15,1), opacity 0.2s ease, background-color 0.35s ease !important; }
footer.mono-foot { border-top: 1px solid rgba(20,20,20,0.16); }
footer.mono-foot .mono-foot-brand span, .mono-foot-copy { color: #6A665C; }

.ka-cursor { color: #141414; animation: blink 1.2s steps(1) infinite; }

.ka-wrap { max-width: 1240px; margin: 0 auto; padding: 0 80px; box-sizing: border-box; }

/* ============ hero ============ */
.ka-hero { padding: 72px 0 84px; }
.ka-hero-top { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; }
.ka-kick { font-family: 'VCR OSD Mono', monospace; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: #8A8578; }
.ka-kick a { color: inherit; text-decoration: none; transition: color 0.2s ease; }
.ka-kick a:hover { color: #141414; }
.ka-issue { font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-size: 15px; color: #8A8578; }

.ka-slice { position: relative; width: min(100%, 880px); margin: 64px auto 0; }
/* .ks-base is the mark: one single, unsliced image, on screen by default
   (including through the load animation — see playIntro in kata.js).
   The nine .ks-strip layers only surface while the mark is actively
   shearing under scroll (.is-shearing, toggled from kata.js); each is
   its own compositor texture, and even pixel-identical source rows can
   land a hair differently at a texture's own edge, so keeping them
   hidden the rest of the time keeps that artifact off screen. */
.ka-slice .ks-base {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  opacity: 1; transition: opacity 0.35s ease;
  -webkit-user-drag: none; user-select: none;
}
.ka-slice.is-shearing .ks-base { opacity: 0; }
.ka-slice .ks-strip {
  background-image: url('/uploads/kata-logo.png');
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.35s ease;
  will-change: transform;
}
.ka-slice.is-shearing .ks-strip { opacity: 1; }
.ka-slice-hint {
  margin: 26px 0 0; text-align: center;
  font-family: 'VCR OSD Mono', monospace; font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: #A8A294;
}

.ka-dek {
  max-width: 620px; margin: 72px auto 0; text-align: center;
  font-family: 'Playfair Display', Georgia, serif; font-size: 24px; line-height: 1.5; color: #33302A;
}
.ka-dek em { font-style: italic; }

.ka-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin-top: 88px; padding-top: 26px; border-top: 1px solid rgba(20,20,20,0.2); }
.ka-meta-item { display: flex; flex-direction: column; gap: 8px; }
.ka-meta-label { font-family: 'VCR OSD Mono', monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #8A8578; }
.ka-meta-val { font-size: 15px; line-height: 1.45; color: #141414; }

/* ============ sections ============ */
.ka-section { padding: clamp(80px, 9vw, 130px) 0 clamp(36px, 4vw, 56px); }
.ka-grid { display: grid; grid-template-columns: minmax(240px, 0.85fr) 1.5fr; gap: 56px; align-items: start; }

.ka-rail { position: relative; border-top: 1px solid rgba(20,20,20,0.35); padding-top: 18px; }
.ka-no {
  display: block; font-family: 'Playfair Display', Georgia, serif; font-weight: 400;
  font-size: clamp(44px, 4.5vw, 68px); line-height: 1; color: #141414;
}
.ka-h {
  margin: 14px 0 0; font-family: 'Playfair Display', Georgia, serif; font-weight: 500;
  font-size: clamp(24px, 2.2vw, 34px); line-height: 1.15; font-style: italic; color: #33302A;
}
.ka-no-light, .ka-h-light { color: #F4F1EA; }
.ka-dark .ka-rail { border-top-color: rgba(244,241,234,0.4); }

.ka-copy { max-width: 640px; padding-top: 18px; }
.ka-lead {
  margin: 0 0 22px; font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(21px, 2vw, 26px); line-height: 1.45; color: #141414;
}
.ka-body { margin: 0; font-size: 16.5px; line-height: 1.6; color: #4A463D; }
.ka-lead-light { color: #F4F1EA; }
.ka-body-light { color: rgba(244,241,234,0.72); }

/* ============ captions ============ */
.ka-cap {
  display: flex; justify-content: space-between; gap: 24px; margin-top: 14px;
  font-family: 'VCR OSD Mono', monospace; font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: #8A8578;
}
.ka-cap-light { color: rgba(244,241,234,0.55); }

/* ============ spec sheet (guidelines) ============ */
.ka-spec { max-width: 1080px; margin: clamp(48px, 6vw, 72px) auto 0; padding: 0 80px; }
.ka-spec img {
  display: block; width: 100%; height: auto; background: #FFFFFF;
  border: 1px solid rgba(20,20,20,0.18); box-shadow: 0 18px 44px rgba(20,20,20,0.08);
}

/* ============ pinboard (sketch wall) ============ */
.ka-pinboard {
  max-width: 1160px; margin: clamp(56px, 7vw, 88px) auto 0; padding: 0 80px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3.5vw, 48px);
  align-items: start;
}
.ka-pin { position: relative; margin: 0; background: #FFFFFF; padding: 10px 10px 14px; box-shadow: 0 16px 36px rgba(20,20,20,0.13); }
.ka-pin img { display: block; width: 100%; height: auto; }
.ka-pin::before {
  content: ''; position: absolute; top: -12px; left: 50%; width: 92px; height: 26px;
  transform: translateX(-50%) rotate(-2deg);
  background: rgba(226,220,203,0.85); box-shadow: 0 1px 3px rgba(20,20,20,0.12);
}
.ka-pin-a { transform: rotate(-2.4deg); }
.ka-pin-b { transform: rotate(1.6deg) translateY(26px); }
.ka-pin-c { transform: rotate(-1.1deg) translateY(8px); }
.ka-pin .ka-cap { padding: 10px 4px 0; margin-top: 0; }

/* ============ feature + spread ============ */
.ka-feature { max-width: 860px; margin: clamp(48px, 6vw, 80px) auto 0; padding: 0 80px; }
.ka-feature img { display: block; width: 100%; height: auto; }

.ka-spread {
  max-width: 1160px; margin: clamp(56px, 7vw, 88px) auto 0; padding: 0 80px;
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 64px); align-items: start;
}
.ka-spread-item { margin: 0; }
.ka-spread-item img { display: block; width: 100%; height: auto; }
.ka-spread-item-late { transform: translateY(clamp(32px, 6vw, 96px)); }

/* ============ covers ============ */
.ka-covers {
  max-width: 1080px; margin: clamp(56px, 7vw, 88px) auto 0; padding: 0 80px;
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px);
}
.ka-cover { margin: 0; box-shadow: 0 26px 60px rgba(20,20,20,0.16); }
.ka-cover img { display: block; width: 100%; height: auto; }
.ka-cover-l { transform: rotate(-1.4deg); }
.ka-cover-r { transform: rotate(1.2deg) translateY(30px); }
.ka-covers-cap { max-width: 1080px; margin: 44px auto 0; padding: 0 80px; }

/* ============ dark runway ============ */
.ka-dark { padding: clamp(90px, 10vw, 150px) 0 clamp(60px, 7vw, 90px); }
.ka-runway { max-width: 1240px; margin: clamp(48px, 6vw, 72px) auto 0; padding: 0 80px; }
.ka-runway img { display: block; width: 100%; height: auto; box-shadow: 0 30px 80px rgba(0,0,0,0.5); }

/* ============ outro ============ */
.ka-outro { padding: clamp(100px, 12vw, 170px) 0 100px; }
/* the "Sewn, not said." reveal (scroll-triggered, fires ~12% into view)
   can land before the page's own background has finished crossfading
   back from the runway's dark ink to cream paper — near-black text over
   a still-dark backdrop reads as invisible. Tie the text color to
   body.ka-bg-dark (same signal that drives the header swap, toggled in
   kata.js) instead of a fixed color, so it always matches whatever the
   page is actually showing, in the same frame, no separate timing to
   fall out of sync. */
.ka-outro-line {
  margin: 0; font-family: 'Playfair Display', Georgia, serif; font-weight: 400;
  font-size: clamp(44px, 7vw, 104px); line-height: 1.05; letter-spacing: -0.01em; color: #141414;
  transition: color 0.5s ease;
}
.ka-outro-line em { font-style: italic; }
body.ka-bg-dark .ka-outro-line { color: #F4F1EA; }
.ka-next { display: inline-block; margin-top: 56px; font-family: 'VCR OSD Mono', monospace; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: #6A665C; text-decoration: none; transition: color 0.5s ease; }
.ka-next:hover { color: #141414; }
body.ka-bg-dark .ka-next { color: #9C9C9C; }
body.ka-bg-dark .ka-next:hover { color: #F4F1EA; }

/* ============ reveal ============ */
[data-reveal] { opacity: 0.05; transform: translateY(22px); transition: opacity 0.8s cubic-bezier(0.33,1,0.68,1), transform 0.8s cubic-bezier(0.33,1,0.68,1); }
[data-reveal].is-in { opacity: 1; transform: none; }

/* ============ mobile ============ */
@media (max-width: 900px) {
  .ka-wrap, .ka-spec, .ka-pinboard, .ka-feature, .ka-spread, .ka-covers, .ka-covers-cap, .ka-runway { padding-left: 22px; padding-right: 22px; }
  .ka-grid { grid-template-columns: 1fr; gap: 28px; }
  .ka-meta { grid-template-columns: 1fr 1fr; gap: 22px; }
  .ka-pinboard { grid-template-columns: 1fr; gap: 44px; }
  .ka-pin-b, .ka-pin-c { transform: rotate(1.6deg); }
  .ka-spread { grid-template-columns: 1fr; }
  .ka-spread-item-late { transform: none; margin-top: 8px; }
  .ka-covers { grid-template-columns: 1fr; }
  .ka-cover-r { transform: rotate(1.2deg); margin-top: 12px; }
}
@media (max-width: 760px) {
  body { overflow-x: hidden; }
  .ka-hero { padding-top: 40px; }
  .ka-hero-top { flex-direction: column; gap: 8px; }
  .ka-meta { grid-template-columns: 1fr; }
  .ka-dek { text-align: left; margin-top: 56px; }
}