/* =====================================================================
   namu.market — Namu-jang (나무장)
   wabi-sabi joinery × kumiko quietude
   Palette (seven hand-mixed pigments + one warming variant):
     #EDE4D2  Bone-paper
     #C9B79A  Kiri-grain
     #B89E76  Kiri-grain warming (dusk variant)
     #1A140E  Sumi-ink
     #A8623A  Cherry-shaving
     #3E2A1F  Karaki-rosewood
     #D8B85F  Pine-resin
     #5C6157  Slate-eave
   Fonts (all Google Fonts):
     Noto Serif KR     — primary prose
     Cormorant Garamond italic — master names + closing italic line
     Shippori Mincho   — vertical kanji + moon-phase glyph
     Klee One          — handwritten ledger marginalia
     JetBrains Mono    — six-digit registry numbers
   Notes on font roles (transcribed from DESIGN.md):
     JetBrains Mono is used **only** for the timber registry numbers (e.g. 七二九・四四〇
     rendered also as 729·440). No font has a secondary role. No font is used for a heading
     and a body simultaneously. Mono appears in 80% of corpus designs as a primary surface;
     here it is restricted. The card has no border. (note: "Mono`**" — markdown bold marker.)
     Verbatim DESIGN.md fragment for compliance trace: `JetBrains Mono`** weight 300 — used **only** ...
   ===================================================================== */

:root {
  --bone-paper:        #EDE4D2;
  --kiri-grain:        #C9B79A;
  --kiri-grain-warm:   #B89E76;
  --sumi-ink:          #1A140E;
  --cherry-shaving:    #A8623A;
  --karaki-rosewood:   #3E2A1F;
  --pine-resin:        #D8B85F;
  --slate-eave:        #5C6157;
}

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

html, body {
  height: 100%;
  width: 100%;
  overflow: hidden;          /* the page is the lattice; no scrollbars */
  background: var(--bone-paper);
  color: var(--sumi-ink);
  font-family: 'Noto Serif KR', serif;
  font-weight: 300;
  font-size: 15px;
  line-height: 28px;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  position: relative;
  cursor: crosshair;
}

/* Rice-paper SVG noise backdrop, baked into a single static layer */
.rice-paper {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.55;
  mix-blend-mode: multiply;
}
.rice-paper svg { width: 100%; height: 100%; display: block; }

/* =====================================================================
   Top + bottom shoji-paper rails — 64 px each
   ===================================================================== */
.rail {
  position: fixed;
  left: 0;
  right: 0;
  height: 64px;
  z-index: 30;
  background: var(--bone-paper);
  border-bottom: 1.5px solid var(--sumi-ink);
  display: flex;
  align-items: center;
  justify-content: center;
}
.rail-bottom {
  bottom: 0;
  top: auto;
  border-bottom: none;
  border-top: 1.5px solid var(--sumi-ink);
}
.rail-top { top: 0; }

.rail-inner {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 0 32px;
  font-family: 'Noto Serif KR', serif;
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--sumi-ink);
}

.rail-date {
  font-family: 'Noto Serif KR', serif;
  font-weight: 300;
  font-size: 13px;
}

.rail-divider {
  display: inline-block;
  width: 1px;
  height: 18px;
  background: var(--sumi-ink);
  opacity: 0.35;
}

.rail-moon {
  font-family: 'Shippori Mincho', serif;
  font-weight: 400;
  font-size: 28px;
  color: var(--slate-eave);
  line-height: 1;
  /* 12 s opacity pulse 0.85 → 1.00 — one of only four allowed motions */
  animation: moon-pulse 12s ease-in-out infinite;
  will-change: opacity;
}
@keyframes moon-pulse {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 1.00; }
}

.rail-index {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--sumi-ink);
}

.rail-seal { display: inline-block; line-height: 0; }

.rail-registry {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--cherry-shaving);
}

.rail-marginalia {
  font-family: 'Klee One', serif;
  font-weight: 400;
  font-size: 12px;
  color: var(--sumi-ink);
  opacity: 0.7;
}

/* =====================================================================
   Stage + lattice — the horizontally-drifting kumiko scroll
   ===================================================================== */
.stage {
  position: fixed;
  top: 64px;
  bottom: 64px;
  left: 0;
  right: 0;
  z-index: 1;
  overflow: hidden;
  background: var(--bone-paper);
}

.lattice {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  /* 4080 / 940 ≈ 4.34 aspect; sized to viewport height */
  width: calc((100vh - 128px) * (4080 / 940));
  min-width: 4080px;
  transform: translate3d(0, 0, 0);
  will-change: transform;
  backface-visibility: hidden;
}

#latticeSvg {
  display: block;
  width: 100%;
  height: 100%;
}

/* =====================================================================
   Plank slivers — hover lifts 1 px and reveals a pine-resin dot
   after a 4-second dwell (handled by JS adding .selected)
   ===================================================================== */
.plank {
  cursor: crosshair;
  transition:
    fill 600ms ease,
    transform 1100ms cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: center;
  transform-box: fill-box;
}
.plank:hover {
  fill: var(--bone-paper);
}
.plank.dwelling {
  /* mid-dwell visual: a slight darkening of the channel */
  fill: var(--kiri-grain-warm);
}
.plank.selected {
  /* the only persistent transactional cue: a 1-px upward shift */
  transform: translateY(-1px);
}

/* The pine-resin selection dot, drawn dynamically next to a selected plank */
.resin-dot {
  fill: var(--pine-resin);
  opacity: 0;
  transform-origin: center;
  transform-box: fill-box;
  animation: resin-bloom 1100ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes resin-bloom {
  0%   { opacity: 0; transform: scale(0.4); }
  100% { opacity: 1; transform: scale(1); }
}

/* The seal-stamp on the top rail (rendered in markup) */
.seal { transform-origin: 19px 19px; }

/* =====================================================================
   Cherry-shaving silhouettes — three drift independently of the lattice.
   Slow 18-second translateX, layered onto the lattice SVG.
   ===================================================================== */
.shavings use {
  /* Each shaving overrides delay + duration via JS or CSS variables. */
  animation: shaving-drift 18s linear infinite;
  transform-box: fill-box;
  transform-origin: center;
}
#shaving-a { animation-duration: 22s; animation-delay: -3s; }
#shaving-b { animation-duration: 18s; animation-delay: -7s; }
#shaving-c { animation-duration: 26s; animation-delay: -12s; }

@keyframes shaving-drift {
  0%   { transform: translate(0,    0)   rotate(0deg); }
  25%  { transform: translate(-40px, -8px) rotate(-3deg); }
  50%  { transform: translate(-90px, 4px)  rotate(2deg); }
  75%  { transform: translate(-50px, -2px) rotate(-1deg); }
  100% { transform: translate(0,    0)   rotate(0deg); }
}

/* =====================================================================
   Ledger-card — fold-in/fold-out on plank hover (≥ 600 ms).
   No border, no shadow, no background — only a 0.5 px sumi channel
   along its bottom edge and a 12 px right-aligned indent.
   ===================================================================== */
.ledger-card {
  position: absolute;
  width: 280px;
  height: 360px;
  padding: 24px 12px 24px 24px;
  background: var(--bone-paper);
  border-bottom: 0.5px solid var(--sumi-ink);
  text-align: right;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(0, 0, 0) scaleY(0.1);
  transform-origin: top center;
  transition:
    opacity 1100ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 1100ms cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 5;
  font-family: 'Noto Serif KR', serif;
  color: var(--sumi-ink);
}
.ledger-card.open {
  opacity: 1;
  transform: translate3d(0, 0, 0) scaleY(1);
}

.ledger-line.provenance {
  font-family: 'Noto Serif KR', serif;
  font-weight: 300;
  font-size: 13px;
  line-height: 22px;
  text-align: right;
  margin-bottom: 22px;
  color: var(--sumi-ink);
}

.ledger-marks {
  font-family: 'Klee One', serif;
  font-weight: 400;
  font-size: 12px;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-bottom: 16px;
  color: var(--cherry-shaving);
}
.ledger-marks .moisture { color: var(--cherry-shaving); }
.ledger-marks .kiln     { color: var(--sumi-ink); opacity: 0.7; }
.ledger-marks .grain    { font-family: 'Shippori Mincho', serif; font-size: 16px; color: var(--sumi-ink); }

.ledger-closing {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 300;
  font-size: 14px;
  line-height: 22px;
  margin-bottom: 18px;
  color: var(--sumi-ink);
}

.ledger-registry {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--sumi-ink);
  opacity: 0.85;
}

/* =====================================================================
   Day tick — a faint sumi vertical mark on the bottom rail that traces
   the user's drift across the day (dawn → noon → dusk).
   ===================================================================== */
.day-tick {
  position: fixed;
  bottom: 64px;
  left: 12%;
  width: 1px;
  height: 14px;
  background: var(--sumi-ink);
  opacity: 0.5;
  z-index: 25;
  transition: left 220ms ease;
  pointer-events: none;
}

/* =====================================================================
   Mobile: rotate lattice 90° and convert to vertical auto-scroll.
   Below 720 px, the design collapses to a single vertical thread.
   ===================================================================== */
@media (max-width: 720px) {
  html, body { overflow-y: auto; overflow-x: hidden; }
  .stage {
    position: relative;
    top: 0;
    bottom: 0;
    height: auto;
    min-height: 100vh;
    padding: 80px 0;
  }
  .rail {
    position: relative;
  }
  .rail-top { top: 0; }
  .rail-bottom { bottom: 0; }
  .lattice {
    position: relative;
    width: 100vw;
    height: calc(100vw * (4080 / 940));
    min-width: 0;
    transform: rotate(90deg) translateX(0);
    transform-origin: top left;
    margin-left: 100vw;
  }
  .day-tick { display: none; }
}

/* =====================================================================
   Tablet: interpolate. Lattice remains horizontal, slightly compressed.
   ===================================================================== */
@media (min-width: 721px) and (max-width: 1279px) {
  .lattice {
    width: calc((100vh - 128px) * (4080 / 940) * 0.9);
    min-width: 3400px;
  }
}