/* ─── Hero ───────────────────────────────────────────────── */
.hero {
  position: relative;
  height: 100svh;
  overflow: hidden;
}

.hero-dissolve {
  position: absolute;
  inset: 0;
}

.hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity 2s var(--ease-film);
}
.hero-img.active {
  opacity: 1;
}

/* Vignette */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, transparent 40%, rgba(14,12,10,0.72) 100%),
    linear-gradient(to top, rgba(14,12,10,0.6) 0%, transparent 40%);
  pointer-events: none;
}

.hero-text {
  position: absolute;
  bottom: var(--sp-24);
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 2;
  animation: hero-fade-in 3s var(--ease-enter) both;
}

@keyframes hero-fade-in {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.hero-concept {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: var(--tracking-widest);
  color: var(--fade);
  text-transform: lowercase;
  margin-bottom: var(--sp-3);
  opacity: 0.7;
}

.hero-kanji {
  font-family: 'Hiragino Mincho ProN', 'Yu Mincho', 'Noto Serif JP', serif;
  font-size: var(--size-3xl);
  color: var(--dust);
  letter-spacing: 0.2em;
  opacity: 0.5;
  font-weight: 300;
}

/* ─── Featured Series ────────────────────────────────────── */
.featured-series {
  padding: var(--sp-32) var(--sp-8) var(--sp-24);
}

.series-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
  max-width: 1100px;
  margin: 0 auto;
}

.series-card {
  display: block;
  position: relative;
  overflow: hidden;
}

.series-card:nth-child(2) { margin-top: var(--sp-12); }
.series-card:nth-child(4) { margin-top: var(--sp-16); }

.series-img-wrap {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--surface);
}
.series-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 2.2s var(--ease-film),
              opacity var(--dur-hover) var(--ease-breath),
              filter var(--dur-hover) var(--ease-breath);
  opacity: 0.82;
  filter: saturate(0.82) brightness(0.96);
}
.series-card:hover .series-img-wrap img {
  transform: scale(1.035);
  opacity: 1;
  filter: saturate(1.0) brightness(1.0);
}

.series-label {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--size-lg);
  font-weight: 300;
  color: var(--dust);
  margin-top: var(--sp-3);
  letter-spacing: var(--tracking-tight);
  transition: color var(--dur-hover) var(--ease-breath);
}
.series-card:hover .series-label { color: var(--cream); }

/* ─── Statement ──────────────────────────────────────────── */
.statement {
  padding: var(--sp-24) var(--sp-8) var(--sp-32);
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
  transition-delay: 0.1s;
}
.statement p {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: var(--size-2xl);
  line-height: 1.25;
  color: var(--cream);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--sp-8);
}

/* ─── Print nudge ────────────────────────────────────────── */
.print-nudge {
  padding: 0 var(--sp-8) var(--sp-32);
  transition-delay: 0.15s;
}
.print-nudge-link {
  display: flex;
  gap: var(--sp-16);
  align-items: center;
  max-width: 900px;
  margin: 0 auto;
}
.print-nudge-img-wrap {
  flex: 0 0 55%;
  overflow: hidden;
  background: var(--surface);
}
.print-nudge-img-wrap img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  transition: transform 1.4s var(--ease-film);
}
.print-nudge-link:hover .print-nudge-img-wrap img {
  transform: scale(1.03);
}
.print-nudge-text {
  flex: 1;
}
.print-nudge-text p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--size-2xl);
  line-height: var(--leading-tight);
  color: var(--cream);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--sp-6);
}

/* ─── Mobile ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  .series-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .series-card:nth-child(2),
  .series-card:nth-child(4) { margin-top: 0; }
  .series-card:nth-child(even) { margin-top: var(--sp-8); }
}

@media (max-width: 640px) {
  .hero-kanji { font-size: var(--size-xl); }
  .hero-tagline { font-size: var(--size-base); }
  .hero-text { bottom: var(--sp-12); }

  .featured-series { padding: var(--sp-16) var(--sp-6) var(--sp-12); }
  .series-grid { gap: var(--sp-3); }

  .statement p { font-size: var(--size-lg); }

  .print-nudge-link {
    flex-direction: column;
    gap: var(--sp-6);
  }
  .print-nudge-img-wrap { flex: none; width: 100%; }
  .print-nudge-text p { font-size: var(--size-xl); }
}