/* ============================================================
   KHZ ART — Editorial Recomposition（試作・index.htmlのみ読込）
   誌面基準：文字と画像の重なり／縦書き／ゴーストノンブル／微グレイン
   type-display.css（--display=Zodiak）の後に読み込むこと
   ============================================================ */

/* ── 1. FILM GRAIN（全面・静的） ─────────────────────────── */
body::after {
  content: '';
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 260px 260px;
  opacity: .045;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 9997;
}
html.performance-lite body::after,
html.in-app-browser body::after { content: none; }

/* ── 2. HERO（大級数・詰め・縦書きの気配） ──────────────── */
.hero__title {
  font-size: clamp(90px, 17vw, 250px);
  line-height: .84;
  letter-spacing: -.035em;
}
/* イタリック行はわずかに緩める（傾きで詰まって見えるため） */
.hero__line--italic span { letter-spacing: -.02em; padding-right: .06em; }

@media (min-width: 901px) {
  .hero--image .hero__eyebrow {
    position: absolute;
    right: var(--pad);
    top: 50%;
    transform: translateY(-50%);
    writing-mode: vertical-rl;
    margin: 0;
    letter-spacing: .3em;
  }
}

/* 本番バグ修復：style.cssのheroSink（scroll-driven）がfadeUp登場アニメを
   上書きするため、基底の opacity:0 が解除されず eyebrow が永久に不可視。
   supporting browserでは初期から可視にする（横展開時はstyle.css側で直す） */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero--image .hero__eyebrow { opacity: 1; }
  }
}

/* ── 3. KICKER（section-label＝Vogue的イタリック小見出し） ─ */
.section-label {
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: none;
}
.section-label[data-no]::before {
  font-style: normal;
  letter-spacing: .08em;
}

/* ── 4. ABOUT（見出しは右カラム内で完結・画像に被せない） ── */
@media (min-width: 901px) {
  .about-preview__heading {
    font-size: clamp(30px, 3.9vw, 58px);
    line-height: 1.16;
  }
}

/* ── 5. HERO COPY（羅列→editorialな一文） ───────────────── */
.hero__tagline--statement {
  display: block;
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  text-transform: none;
  letter-spacing: .005em;
  font-size: clamp(17px, 1.9vw, 26px);
  line-height: 1.35;
  color: rgba(245,245,240,.82);
  max-width: 20ch;
}
.hero__tagline-tail {
  display: block;
  font-family: var(--sans);
  font-style: normal;
  font-size: clamp(10px, .82vw, 12px);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(245,245,240,.5);
  margin-top: 10px;
}

/* ── 6. SHARED-ELEMENT MORPH（About画像 → Aboutページhero） ─
   遷移元。遷移先 about.html 側の .hero-cover img に同名を付与。
   名前が一致した要素だけがページ間で滑らかに変形する。 */
@media (prefers-reduced-motion: no-preference) {
  .about-preview__img-inner { view-transition-name: vt-about; }
}
/* 画像をリンク化（タップで about.html へ＝モーフ発火） */
a.about-preview__image { display: block; cursor: pointer; }

/* ── 7. 作品タイトル・リンク（Zodiakの静かな輪郭） ────────── */
.film-thumb__title,
.sound-thumb__title,
.work-thumb__title {
  font-family: var(--display);
  font-size: clamp(14px, 1.5vw, 19px);
}
.works__view-all,
.link-arrow {
  font-family: var(--display);
  font-style: italic;
  font-size: 13px;
  letter-spacing: .06em;
}