/* ============================================================
   Project NOVA 文庫 — base.css  （全ページ共通DNA）
   ============================================================ */

/* ---- reset ---- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-serif);
  font-size: clamp(1rem, .55vw + .9rem, 1.075rem);
  line-height: 1.8;
  letter-spacing: .01em;
  font-feature-settings: "palt";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: background-color .4s var(--ease), color .4s var(--ease);
}
img, svg, picture { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul { list-style: none; padding: 0; }
:target { scroll-margin-top: 6rem; }

/* ---- typography scale ---- */
h1, h2, h3, h4 { font-weight: 700; line-height: 1.32; letter-spacing: .02em; }
.latin { font-family: var(--font-latin); letter-spacing: .04em; }

/* eyebrow ＝ 文庫の通し番号やラベル（Zen角ゴ・トラッキング） */
.eyebrow {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: .74rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: .6em;
}
.eyebrow::before {
  content: "";
  width: 1.4rem; height: 1px;
  background: var(--accent-line);
}
.eyebrow--plain::before { display: none; }

/* ---- skip link ---- */
.skip-link {
  position: absolute; left: 50%; top: -4rem; transform: translateX(-50%);
  z-index: 100; padding: .7rem 1.2rem;
  background: var(--accent); color: var(--accent-contrast);
  font-family: var(--font-sans); font-size: .85rem; border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 0; }

/* ---- layout ---- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
main { flex: 1; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================================================
   nav（ヘッダー）
   ============================================================ */
.site-head {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--border);
}
.site-head__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 4.4rem;
}
.brand { display: inline-flex; align-items: center; gap: .65rem; }
.brand__mark { width: 1.7rem; height: 1.7rem; color: var(--accent); flex: none; }
.brand__name {
  font-family: var(--font-latin); font-weight: 600;
  font-size: 1.02rem; letter-spacing: .14em; line-height: 1;
}
.brand__sub {
  font-family: var(--font-serif); font-weight: 700;
  font-size: .92rem; letter-spacing: .12em; color: var(--text-muted);
  padding-left: .55rem; margin-left: .45rem; border-left: 1px solid var(--hairline);
}

/* nav actions */
.nav-actions { display: flex; align-items: center; gap: .35rem; }
.icon-btn, .icon-link {
  display: inline-grid; place-items: center;
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  color: var(--text-muted);
  transition: color .25s var(--ease), background-color .25s var(--ease), transform .25s var(--ease);
}
.icon-btn:hover, .icon-link:hover { color: var(--accent); background: var(--accent-faint); }
.icon-btn:active, .icon-link:active { transform: scale(.92); }
.icon-btn svg, .icon-link svg { width: 1.2rem; height: 1.2rem; }

/* テーマトグル：太陽/月をクロスフェード */
.theme-toggle .sun, .theme-toggle .moon {
  grid-area: 1 / 1; transition: opacity .3s var(--ease), transform .4s var(--ease);
}
.theme-toggle { display: inline-grid; }
.theme-toggle .moon { opacity: 0; transform: rotate(-40deg) scale(.6); }
.theme-toggle .sun { opacity: 1; transform: rotate(0) scale(1); }
[data-theme="dark"] .theme-toggle .moon { opacity: 1; transform: rotate(0) scale(1); }
[data-theme="dark"] .theme-toggle .sun  { opacity: 0; transform: rotate(40deg) scale(.6); }

/* SNS group */
.sns-group { display: flex; align-items: center; gap: .15rem; }

/* 狭い画面でヘッダーが溢れないよう、ラベルとアイコンを引き締める */
@media (max-width: 32rem) {
  .brand__sub { display: none; }
  .brand__name { font-size: .86rem; letter-spacing: .1em; }
  .nav-actions { gap: .1rem; }
  .icon-link, .icon-btn { width: 2.4rem; height: 2.4rem; }
}
@media (max-width: 21rem) {
  .brand__name { display: none; }
}

/* ============================================================
   buttons / CTA
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-sans); font-weight: 500; font-size: .95rem;
  letter-spacing: .04em; padding: .85rem 1.6rem; border-radius: 999px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease);
}
.btn svg { width: 1.05rem; height: 1.05rem; }
.btn--kindle {
  background: var(--accent); color: var(--accent-contrast);
  box-shadow: 0 1px 2px rgba(0,0,0,.18), 0 10px 26px var(--accent-line);
}
.btn--kindle:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,.2), 0 16px 38px var(--accent-line); }
.btn--ghost {
  border: 1px solid var(--hairline); color: var(--text);
}
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }

/* ---- focus ---- */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}
[data-theme="dark"] :focus-visible { outline-color: var(--accent); }

/* ============================================================
   footer
   ============================================================ */
.site-foot {
  margin-top: clamp(4rem, 9vw, 8rem);
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.site-foot__inner {
  display: grid; gap: 2.2rem; padding-block: clamp(2.6rem, 6vw, 4rem);
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .site-foot__inner { grid-template-columns: 1.4fr 1fr; align-items: start; } }
.foot-brand { display: flex; align-items: center; gap: .7rem; margin-bottom: 1rem; }
.foot-brand .brand__mark { width: 1.5rem; height: 1.5rem; }
.foot-credits { color: var(--text-muted); font-size: .9rem; line-height: 2; }
.foot-credits b { color: var(--text); font-weight: 700; }
.foot-nav h2 { font-family: var(--font-sans); font-size: .76rem; letter-spacing: .2em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 1rem; }
.foot-nav ul { display: flex; flex-direction: column; gap: .55rem; }
.foot-nav a { color: var(--text-muted); font-size: .95rem; transition: color .2s var(--ease); }
.foot-nav a:hover { color: var(--accent); }
.foot-meta {
  border-top: 1px solid var(--border);
  padding-block: 1.4rem; text-align: center;
  font-family: var(--font-sans); font-size: .78rem; letter-spacing: .08em; color: var(--text-muted);
}

/* ============================================================
   作字キーアート（.keyart）— 実表紙が無い作品の「表紙」
   書店カードと作品LPヒーローの両方で使う共有コンポーネント。
   container query 単位(cqw)で寸法を取り、サムネ〜ヒーローまで等比拡縮。
   色は固定（＝表紙なのでテーマで変えない）。
   ============================================================ */
.keyart {
  container-type: inline-size;
  position: relative;
  aspect-ratio: 1600 / 2560;
  overflow: hidden;
  border-radius: var(--radius-sm);
  font-family: var(--font-serif);
  color: #f0ece2;
  isolation: isolate;
}
.keyart::before {                 /* 通し番号（アートの刻印） */
  content: attr(data-num);
  position: absolute; top: 7cqw; left: 7cqw; z-index: 3;
  font-family: var(--font-latin); font-size: 4cqw; letter-spacing: .22em;
  opacity: .9;
}
.keyart__motif {
  position: absolute; z-index: 1; font-weight: 800; line-height: 1;
  pointer-events: none; user-select: none;
}
.keyart__title {
  position: absolute; left: 7cqw; right: 7cqw; bottom: 13cqw; z-index: 3;
  font-size: 13cqw; font-weight: 800; line-height: 1.2; letter-spacing: .05em;
  text-wrap: balance;
}
.keyart__foot {
  position: absolute; left: 7cqw; right: 7cqw; bottom: 6cqw; z-index: 3;
  font-family: var(--font-sans); font-size: 3.1cqw; letter-spacing: .16em; opacity: .82;
}
/* カード上では番号はバッジ(本文)側に出すので、アートの刻印は隠す */
.book-card .keyart::before { display: none; }

/* --- 死者専用レビューサイト：黒地×沈んだ画面青×滲む紅の★ --- */
.keyart--shisha { background: radial-gradient(130% 72% at 72% 8%, #1b3a5b 0%, #0b1119 48%, #06080c 100%); }
.keyart--shisha::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: repeating-linear-gradient(180deg, rgba(120,160,200,.05) 0 2px, transparent 2px 8px);
}
.keyart--shisha::before { color: #7d9ec0; }
.keyart--shisha .keyart__motif { top: 19cqw; left: 7cqw; color: #d24b54; font-size: 12cqw; letter-spacing: .1em; text-shadow: 0 0 6cqw rgba(210,75,84,.4); }
.keyart--shisha .keyart__title { color: #eef2f7; }
.keyart--shisha .keyart__foot { color: #7d9ec0; }

/* --- 箱庭の迷い子：霧の谷の藍×鉄錆、製図グリッドに 3,403 の亡霊 --- */
.keyart--hakoniwa { background: linear-gradient(165deg, #1a1c24 0%, #14141b 55%, #0e0f15 100%); }
.keyart--hakoniwa::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(85% 50% at 28% 90%, rgba(150,64,30,.4), transparent 70%),
    repeating-linear-gradient(0deg, rgba(180,150,120,.06) 0 1px, transparent 1px 27px),
    repeating-linear-gradient(90deg, rgba(180,150,120,.06) 0 1px, transparent 1px 27px);
}
.keyart--hakoniwa::before { color: #b98a6c; }
.keyart--hakoniwa .keyart__motif { top: 28cqw; left: 5cqw; color: rgba(214,138,95,.2); font-size: 30cqw; font-family: var(--font-latin); letter-spacing: -.02em; }
.keyart--hakoniwa .keyart__title { color: #ede6dc; }
.keyart--hakoniwa .keyart__foot { color: #c4906f; }

/* --- 千の栞：灰→琥珀（世界の解像度が上がる比喩） --- */
.keyart--shiori { background: linear-gradient(202deg, #3b3e44 0%, #585243 36%, #9a7c44 70%, #cda255 100%); }
.keyart--shiori::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(62% 42% at 72% 82%, rgba(255,228,176,.45), transparent 70%);
  mix-blend-mode: screen;
}
.keyart--shiori::before { color: #2a2114; }
.keyart--shiori .keyart__motif { top: 15cqw; right: 8cqw; color: rgba(22,17,9,.42); font-size: 22cqw; }
.keyart--shiori .keyart__title { color: #1c160d; }
.keyart--shiori .keyart__foot { color: #3a2f1c; }

/* ============================================================
   motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  /* 実際に酔いを誘う「スムーズスクロール」だけを止める。
     アニメーションを * + !important で一括停止する構造はやめた
     （意図した演出まで殺し、JS等で回避せざるを得なくなるため）。
     各演出は穏やかで小さく、必要なら個別にここで上書きする方針。 */
  html { scroll-behavior: auto; }
}