/* KHZ ART — 刷新の層（試作 2026-09-30）
   既存の style.css / editorial.css の後に読む。中身と構造は触らず、系だけ揃える。
   系＝墨と紙の2色・書体は欧文 Cormorant Garamond ＋和文ヒラギノ（明朝は見出し、角は本文）。 */

:root {
  --bg: #0c0c0b;
  --fg: #ebe6de;
  --border: rgba(235,230,222,.16);
  --accent: #b9b3aa;
  --serif: 'Cormorant Garamond', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  --display: 'Cormorant Garamond', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  --sans: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', system-ui, sans-serif;
  --rn-ease: cubic-bezier(.2,.7,.1,1);
  color-scheme: dark;
}
/* ライト＝紙と墨を入れ替える（本番と同じ切替ボタン・保存名 khz-theme） */
:root[data-theme="light"] { --bg: #f1ede6; --fg: #171615; --border: rgba(23,22,21,.16); --accent: #5f5a54; color-scheme: light; }
:root[data-theme="light"] img { background: #e2ddd5; }
:root[data-theme="light"] body::after { opacity: .05; }
:lang(ja) {
  --serif: 'Cormorant Garamond', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  --sans: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', system-ui, sans-serif;
}
html, body { background: var(--bg) !important; color: var(--fg); }
body { overflow-x: clip; -webkit-font-smoothing: antialiased; }

/* 頁をまたぐ遷移（非対応の環境では普通に開くだけ） */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .55s; animation-timing-function: var(--rn-ease); }
/* 作品頁の第一画面の写真＝一覧で押した写真がここへ運ばれる */
.cs-hero__bg img { view-transition-name: work-hero; }
::view-transition-group(work-hero) { animation-duration: .8s; animation-timing-function: var(--rn-ease); }

/* 紙の粒 */
body::after {
  content: ""; position: fixed; inset: -50%; pointer-events: none; z-index: 9999; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ヘッダー＝1段・極小・差の合成で写真の上でも読める */
.nav, .nav.is-scrolled, .nav--on-dark:not(.is-scrolled) {
  background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  mix-blend-mode: difference; color: #fff;
}
.nav__logo { font: 400 15px/1 var(--serif) !important; letter-spacing: .42em !important; color: #fff !important; }
.nav__logo-sub, .footer__logo-sub, .nav__status, .nav__lang-sep { display: none !important; }
.nav__theme-btn { color: #fff !important; font: 400 11px/1 var(--sans) !important; letter-spacing: .18em !important; text-transform: uppercase; background: none !important; border: 0 !important; cursor: pointer; }
.nav__theme-btn::before { display: none !important; }
.nav__theme-btn { width: auto !important; height: auto !important; padding: 0 !important; }
.nav__lang-item, .nav__menu-btn { color: #fff !important; font: 400 11px/1 var(--sans) !important; letter-spacing: .18em !important; }

/* 頁の題＝細いセリフを大きく */
.page-hero__title, .cs-hero__title {
  font-family: var(--serif) !important; font-weight: 300 !important;
  font-size: clamp(88px, 13vw, 210px) !important; line-height: .86 !important; letter-spacing: -.02em !important;
  text-wrap: balance;
}
.page-hero__title em, .page-hero__title i, .cs-hero__title em, .cs-hero__title i { font-style: italic; font-weight: 300; }
/* 和文の見出しは balance を当てない（「設計｜より、」と割れる）＝欧文の題だけ */

/* 頁の第一画面＝題は左下・説明は右の細い列（トップと同じ骨格） */
.page-hero { min-height: 82svh; display: flex; align-items: flex-end; padding-bottom: clamp(48px, 9vh, 96px) !important; border-bottom: 1px solid var(--border); }
.page-hero > .container { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); column-gap: 48px; align-items: end; }
.page-hero__label { grid-column: 1 / -1; align-self: start; margin-bottom: auto; font: 400 11px/1.4 var(--sans) !important; letter-spacing: .18em !important; text-transform: uppercase; }
.page-hero__title { grid-column: 1; grid-row: 2 / span 3; margin: 0 !important; }
.page-hero__sub, .page-hero__sub-supplement, .page-hero__streams { grid-column: 2; margin: 0 0 14px !important; font-size: 13px !important; line-height: 1.9 !important; }
.page-hero__sub { font: 400 15px/1.9 'Hiragino Mincho ProN', 'Yu Mincho', serif !important; }
.page-hero__streams { opacity: .6; margin-bottom: 0 !important; }
/* 入力のある頁は第一画面を低く（フォームを押し下げない） */
body:has(form) .page-hero { min-height: 46svh; }
@media (max-width: 760px) {
  .page-hero { min-height: 72svh; }
  body:has(form) .page-hero { min-height: 0; padding-top: 120px !important; }
  .page-hero > .container { grid-template-columns: minmax(0, 1fr); }
  .page-hero__title { grid-row: auto; margin-bottom: 28px !important; }
  .page-hero__sub, .page-hero__sub-supplement, .page-hero__streams { grid-column: 1; }
}

/* 和文は文節で折る（1字だけ次行へ落とさない） */
.page-hero__sub, .page-hero__sub-supplement, .contact-cta__heading, .contact-cta__note, .cs-sec h2 { word-break: auto-phrase; }
:lang(ja) :is(h1, h2, h3, h4) { word-break: auto-phrase; }
@media (max-width: 760px) { .contact-cta__heading { font-size: clamp(34px, 11vw, 56px) !important; } }

/* 下へ読む間はヘッダーを退かせ、戻る時だけ出す（本文と重ねない） */
.nav { transition: transform .5s var(--rn-ease) !important; }
.nav.rn-hide { transform: translateY(-110%); }

/* 作品名・見出しの Zodiak を置き換え */
[class*="__title"], [class*="-title"] { font-family: var(--serif); }

/* 写真の待ち時間＝灰色の箱でなく墨の階調で */
img { background: #151413; }
img[loading="lazy"] { transition: opacity .8s var(--rn-ease); }

/* 作品の見開き＝題に寄ると写真が静かに寄る */
.spread__image { overflow: hidden; }
.spread__image img { transition: transform 1.4s var(--rn-ease), filter .8s; }
.spread:hover .spread__image img { transform: scale(1.035); }

/* スクロールで現れる（対応環境だけ） */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .cs-hero img, .page-hero img {
      animation: rn-drift linear both; animation-timeline: view(); animation-range: exit 0% exit 100%;
    }
    @keyframes rn-drift { to { transform: scale(1.08) translateY(4%); } }
  }
}

/* 連絡の帯＝同じ系の大きなセリフ */
.contact-cta h2, .contact-cta [class*="title"] { font-family: var(--serif) !important; font-weight: 300 !important; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* スマホのヘッダー＝トップと同じ2本線のボタンだけ（言語と明るさはメニューの下の段へ） */
@media (max-width: 760px) {
  .nav__lang, .nav__theme-btn, .nav__menu-label { display: none !important; }
  .nav__menu-icon { width: 34px; height: 16px; }
  .nav__menu-icon span:nth-child(1) { top: 3px; width: 34px; }
  .nav__menu-icon span:nth-child(2) { top: 11px; width: 20px; opacity: 1; transform: none; }
  .nav__menu-icon span:nth-child(3) { display: none; }
  .nav__menu-btn:hover .nav__menu-icon span:nth-child(2) { width: 34px; }
  .nav__menu-btn.is-open .nav__menu-icon span:nth-child(1) { top: 7px; width: 30px; transform: rotate(22deg); }
  .nav__menu-btn.is-open .nav__menu-icon span:nth-child(2) { top: 7px; width: 30px; opacity: 1; transform: rotate(-22deg); }
  .nav__menu-btn::after { display: none; }
}

.nav__menu-btn, #mnBtn { -webkit-tap-highlight-color: transparent; outline: none; }