/* ============================================================
   slipcase landing — layout for the four directions
   ============================================================ */

#root { width: 100%; }
.stage { width: 100%; height: 100vh;
  position: relative;
  display: flex; align-items: center; justify-content: center;
}
.stage-inner { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }

.canvas {
  position: relative;
  width: min(1300px, 94vw);
  height: min(82vh, 760px);
  --lbl: clamp(14px, 1.7vw, 23px);
  --lbl-long: clamp(11px, 1.3vw, 18px);
}
.wordmark-word {
  font-size: calc(clamp(24px, 3.3vw, 44px) * var(--word-scale));
  color: var(--ink);
}
.standfirst {
  font-size: clamp(13px, 1.15vw, 16px);
  line-height: 1.5; margin: 0; max-width: 22ch;
}

/* ---- motion ---- */
.el { opacity: 1; }
.el.enter { opacity: 0; animation: elIn 0.9s var(--ease) both; }
.el.show  { opacity: 1; }
@keyframes elIn { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: no-preference) {
  .stage.drift-drift .sq,
  .stage.drift-drift .plabel {
    animation: elIn 0.9s var(--ease) both, floaty 9s ease-in-out infinite;
  }
}
@keyframes floaty {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 calc(-8px - 6px * var(--di, 0)); }
}

/* ---- scatter elements ---- */
.scatter .el, .canvas > .el { position: absolute; }
.plabel { display: inline-block; transition: opacity 180ms var(--ease); }
.plabel:hover { opacity: 0.72; }
.sq {
  display: block;
  width: clamp(40px, 4.2vw, 64px);
  height: clamp(40px, 4.2vw, 64px);
  transition: transform 220ms var(--ease);
}
.sq:hover { scale: 1.08; }

/* ============================================================
   DIRECTION 2 — color spines
   ============================================================ */
.spines-canvas { display: flex; align-items: center; justify-content: center; }
.spine-frame {
  display: flex; gap: 0;
  height: min(78vh, 660px);
  padding: clamp(10px, 1.4vw, 18px);
  background: #f4f2ec;
}
.spine {
  width: clamp(82px, 9vw, 128px);
  height: 100%;
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  padding: clamp(20px, 2.4vw, 34px) 0 clamp(18px, 2vw, 26px);
  transition: filter 240ms var(--ease);
}
.spine:hover { filter: brightness(1.06); }
.spine .caps { writing-mode: vertical-rl; transform: rotate(180deg); }
.spine-top   { font-size: clamp(13px, 1.25vw, 17px); font-weight: 700; }
.spine-title { font-size: clamp(14px, 1.4vw, 19px); font-weight: 700; margin-top: clamp(16px, 3vw, 44px); }
.spine-title-long { font-size: clamp(11px, 1.05vw, 14px); letter-spacing: 0.12em; text-indent: 0; margin-top: clamp(12px, 2vw, 26px); }

/* ============================================================
   DIRECTION 3 — gray spine (single slipcase)
   ============================================================ */
.gs-canvas { display: flex; align-items: center; justify-content: center; }
.gs-card {
  position: relative;
  width: min(440px, 64vw);
  height: min(82vh, 720px);
  background: var(--paper-spine);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.05);
}
.vtext, .gs-word .caps, .gs-col .caps { writing-mode: vertical-rl; transform: rotate(180deg); }
.gs-word {
  position: absolute; top: 7%; bottom: 7%; right: 14%;
  display: flex; align-items: flex-start; justify-content: center;
}
.gs-word .caps {
  color: var(--ink);
  font-size: clamp(17px, 2.5vw, 30px);
  font-weight: 700;
}
.gs-col { position: absolute; display: flex; align-items: flex-start; }
.gs-col .caps { font-size: clamp(12px, 1.5vw, 18px); font-weight: 700; }
.gs-remember { top: 9%; bottom: 9%; left: 17%; }
.gs-shadow   { bottom: 9%; right: 34%; height: 32%; }
.gs-gnosis   { bottom: 9%; right: 47%; height: 25%; }

/* ============================================================
   DIRECTION 4 — project index (hover reveals image)
   ============================================================ */
.idx-canvas {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
}
.idx-head { grid-column: 1 / 2; position: absolute; top: 0; left: 0; }
.idx-word { font-size: clamp(16px, 1.5vw, 21px); font-weight: 700; color: var(--ink); }
.idx-stand { font-size: clamp(12px, 1vw, 15px); margin: 8px 0 0; }
.idx-list {
  grid-column: 1 / 2;
  list-style: none; margin: 0; padding: 0;
  align-self: center;
}
.idx-item { margin: 0.05em 0; }
.idx-link {
  display: inline-block;
  white-space: normal;
  font-size: clamp(19px, 2.5vw, 38px);
  line-height: 1.22;
  font-weight: 700;
  transition: opacity 160ms var(--ease), padding-left 220ms var(--ease);
}
.idx-list:hover .idx-link { opacity: 0.34; }
.idx-list .idx-link:hover { opacity: 1; padding-left: 0.4em; }

.idx-stage { grid-column: 2 / 3; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.idx-frame {
  width: min(360px, 36vw); aspect-ratio: 4 / 5;
  border: 2px solid transparent;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 220ms var(--ease);
}
.idx-photo {
  width: 100%; height: 100%;
  display: flex; align-items: flex-end; justify-content: flex-start;
  padding: 16px;
}
.idx-photo-num { color: rgba(255,255,255,0.9); font-size: 22px; font-weight: 700; }
.idx-hint, .idx-cap { font-size: clamp(13px, 1.05vw, 15px); margin: 0; }
.idx-hint { color: var(--ink-faint); }

/* ============================================================
   responsive
   ============================================================ */
@media (max-width: 720px) {
  .canvas { height: min(80vh, 640px); }
  .idx-canvas { grid-template-columns: 1fr; }
  .idx-stage { display: none; }
  .gs-card { width: 82vw; }
}