/* style.css — KLMN.DESIGN
   Grid: grid.js v2 (1-based), 25px margin, 15px gutter
   12×9 landscape / 6×12 portrait                        */

/* ── 1. Reset ─────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: #000;
  font-family: 'IBM Plex Mono', monospace;
  -webkit-text-size-adjust: 100%;
}

a { color: inherit; text-decoration: none }

/* ── 2. Fonts ─────────────────────────────────────────── */

@font-face {
  font-family: 'OnlyExtended';
  src: url('/fonts/only/OnlyExtendedVF-Roman.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'OnlyExtended';
  src: url('/fonts/only/OnlyExtendedVF-Italic.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* ── 3. Scroll architecture ───────────────────────────── */

.scroll-root {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
}
.scroll-root::-webkit-scrollbar { display: none }

.section {
  position: relative;
  width: 100vw; height: 100dvh;
  scroll-snap-align: start;
  background-size: cover;
  background-position: center;
  background-color: #000;
  overflow: hidden;
}

/* S1–S7 use fixed bg divs — no inline background */
#S1, #S2, #S3, #S4, #S5, #S6, #S7 { background: none }

/* Fixed bg divs for S1–S7 — toggled by JS */
#s1bg, #s2bg, #s3bg, #s4bg, #s5bg, #s6bg, #s7bg {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  display: none;
  pointer-events: none;
}

/* ── 4. Horizontal gallery ────────────────────────────── */

.hscroll {
  display: flex;
  width: 100%; height: 100%;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  position: relative; z-index: 1;
}
.hscroll::-webkit-scrollbar { display: none }

.hcard {
  flex-shrink: 0;
  width: 100vw; height: 100%;
  scroll-snap-align: start;
  position: relative;
  background-color: transparent;
  overflow: hidden;
}

.hcard.work {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  background-color: transparent;
}

/* ── 5. Corner nav ────────────────────────────────────── */

.cnav {
  position: fixed; z-index: 1500;
  text-decoration: none; display: block;
}

/* ── 6. Arrows ────────────────────────────────────────── */

.arr {
  position: fixed; z-index: 1400;
  cursor: pointer; display: none;
}
.arr.vis { display: block }
.arr svg { display: block; width: 50px; height: 50px }

@keyframes bounceUp {
  0%,100% { transform: translateY(0) }
  50%      { transform: translateY(-6px) }
}
@keyframes bounceDn {
  0%,100% { transform: translateY(0) }
  50%      { transform: translateY(6px) }
}
@keyframes bounceLt {
  0%,100% { transform: translateX(0) }
  50%      { transform: translateX(-6px) }
}
@keyframes bounceRt {
  0%,100% { transform: translateX(0) }
  50%      { transform: translateX(6px) }
}
#arrUp.vis { animation: bounceUp 1.4s ease-in-out infinite }
#arrDn.vis { animation: bounceDn 1.4s ease-in-out infinite }
#arrLt.vis { animation: bounceLt 1.4s ease-in-out infinite }
#arrRt.vis { animation: bounceRt 1.4s ease-in-out infinite }

/* ── 7. Label background (work cards) ────────────────── */

.plbl-bg {
  background-image: url('/img/lab_cocha_back01.png');
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}

/* ── 8. Typography ────────────────────────────────────── */

.ohl-lg {
  font-family: 'OnlyExtended', sans-serif;
  font-weight: 900;
  font-size: 40px;
  line-height: 0.88;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}
.ohl-sm {
  font-family: 'OnlyExtended', sans-serif;
  font-weight: 900;
  font-size: 20px;
  line-height: 0.88;
  letter-spacing: 0;
  text-transform: uppercase;
}
@media (orientation: portrait) {
  .ohl-lg { font-size: 36px }
  .ohl-sm { font-size: 18px }
}

/* mono scale:
   .mono-sm  10px / 1.12   (portrait: 8px)
   .mono-md  12px / 1.06   (portrait: 10px / 1.12)
   .mono     14px / 1.0    (portrait: 12px)
   .mono-lg  16px / 0.96   (portrait: 14px)        */

.mono-sm {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px; font-weight: 400; line-height: 1.12;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.mono-md {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px; font-weight: 400; line-height: 1.06;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.mono {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 14px; font-weight: 400; line-height: 1.0;
  letter-spacing: 0.04em; text-transform: uppercase;
  white-space: normal; word-break: break-word;
}
.mono-lg {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 16px; font-weight: 400; line-height: 0.96;
  letter-spacing: 0.04em; text-transform: uppercase;
}

@media (orientation: portrait) {
  .mono-sm { font-size: 8px }
  .mono-md { font-size: 10px; line-height: 1.12 }
  .mono    { font-size: 12px }
  .mono-lg { font-size: 14px }
}
@media (max-width: 400px) {
  .mono-sm { font-size: 7px }
  .mono-md { font-size: 9px }
  .mono    { font-size: 10px }
  .mono-lg { font-size: 12px }
}