/* ===== Preloader ===== */
.preloader {
  position: fixed; inset: 0; z-index: 999;
  background: var(--black);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 24px;
}
.preloader .mark {
  color: var(--ivory);
  opacity: 0.9;
}
.preloader .mark img { display: block; width: min(230px, 55vw); height: auto; }
.preloader .bar {
  width: min(280px, 60vw); height: 1px; background: rgba(243,237,224,0.15);
  position: relative; overflow: hidden;
}
.preloader .bar-fill {
  position: absolute; left: 0; top: 0; height: 100%; width: 0%;
  background: var(--amber);
}
.preloader.done { pointer-events: none; }

/* ===== Nav ===== */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-nav);
  display: flex; align-items: center; justify-content: space-between;
  padding: 28px var(--container-pad);
  mix-blend-mode: difference;
  transition: transform var(--dur-med) var(--ease-cinematic);
}
.nav.nav-hidden { transform: translateY(-120%); }
.nav-logo {
  display: flex; align-items: center;
  color: var(--ivory);
}
.nav-logo img { display: block; height: 40px; width: auto; }
.nav-links { display: flex; gap: 36px; }
.nav-links a {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ivory-dim);
  position: relative;
  padding-bottom: 4px;
}
.nav-links a::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 1px; width: 0;
  background: var(--amber); transition: width var(--dur-fast) var(--ease-soft);
}
.nav-links a:hover::after { width: 100%; }
.nav-menu-btn {
  display: none; flex-direction: column; gap: 5px; width: 28px;
}
.nav-menu-btn span { display: block; height: 1px; background: var(--ivory); }

/* ===== Fixed Chapter Progress ===== */
.chapter-progress {
  position: fixed; right: 36px; top: 50%; transform: translateY(-50%);
  z-index: var(--z-progress);
  display: flex; flex-direction: column; gap: 22px;
  mix-blend-mode: difference;
}
.chapter-progress .dot-row {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  opacity: 0.45; transition: opacity var(--dur-fast) var(--ease-soft);
}
.chapter-progress .dot-row.active { opacity: 1; }
.chapter-progress .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ivory-dim); flex-shrink: 0;
  transition: background var(--dur-fast) var(--ease-soft), transform var(--dur-fast) var(--ease-soft);
}
.chapter-progress .dot-row.active .dot {
  background: var(--amber); transform: scale(1.6);
}
.chapter-progress .label {
  font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ivory); white-space: nowrap;
  max-width: 0; overflow: hidden; opacity: 0;
  transition: max-width var(--dur-med) var(--ease-cinematic), opacity var(--dur-fast) var(--ease-soft);
}
.chapter-progress .dot-row.active .label,
.chapter-progress .dot-row:hover .label { max-width: 180px; opacity: 1; }

/* ===== Scroll cue ===== */
.scroll-cue {
  position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  color: var(--ivory-dim); font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase;
}
.scroll-cue .line {
  width: 1px; height: 40px; background: rgba(243,237,224,0.3); overflow: hidden; position: relative;
}
.scroll-cue .line::after {
  content: ''; position: absolute; top: -40px; left: 0; width: 100%; height: 40px;
  background: var(--amber); animation: scrollcue 2.2s ease-in-out infinite;
}
@keyframes scrollcue { 0% { top: -40px; } 60% { top: 40px; } 100% { top: 40px; } }

/* ===== Buttons ===== */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 16px 30px; border: 1px solid var(--ivory);
  transition: background var(--dur-fast) var(--ease-soft), color var(--dur-fast) var(--ease-soft), border-color var(--dur-fast) var(--ease-soft);
}
.btn:hover { background: var(--ivory); color: var(--black); }
.btn-ghost {
  border-color: transparent; text-decoration: underline;
  text-underline-offset: 6px; text-decoration-color: rgba(243,237,224,0.35);
  padding: 16px 4px;
}
.btn-ghost:hover { text-decoration-color: var(--amber); background: none; color: var(--ivory); }
.btn-amber { border-color: var(--amber); }
.btn-amber:hover { background: var(--amber); color: var(--black); }

/* ===== Card ===== */
.card {
  position: relative; overflow: hidden; border-radius: 2px;
  background: var(--forest-mid);
}
.card .card-media {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.6s var(--ease-cinematic), filter 1.2s var(--ease-soft);
}
.card:hover .card-media { transform: scale(1.08); }
.card .card-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8,9,10,0.85) 0%, rgba(8,9,10,0.1) 55%, transparent 100%);
}
.card .card-body {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 28px;
}
.card .card-tags {
  display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 12px;
  opacity: 0; transform: translateY(8px);
  transition: opacity var(--dur-fast) var(--ease-soft), transform var(--dur-fast) var(--ease-soft);
}
.card:hover .card-tags { opacity: 1; transform: translateY(0); }
.card .card-tags span {
  font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ivory-dim);
}