/* =========================================================
   樟の樹と猫の棲む家。 / 夕景のキャラクターページ
   色は --kusunoki-* のテーマ変数からまとめて調整できます。
   ========================================================= */
body.kusunoki-page {
  --kusunoki-ink: #3e352f;
  --kusunoki-muted: #81756c;
  --kusunoki-paper: #f8f4ee;
  --kusunoki-orange: #bd7044;
  --kusunoki-orange-light: #e7c5a9;
  --kusunoki-dark: #44372f;
  margin: 0;
  color: var(--kusunoki-ink);
  background: linear-gradient(180deg, #fbf8f3 0%, var(--kusunoki-paper) 56%, #f2ebe2 100%);
  font-family: "メイリオ", Meiryo, "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
}
.kusunoki-page *,
.kusunoki-page *::before,
.kusunoki-page *::after { box-sizing: border-box; }
.kusunoki-page img { max-width: 100%; }
.kusunoki-page a { color: inherit; }
.kusunoki-page .skip-link {
  position: absolute; z-index: 20; top: -60px; left: 12px; padding: 9px 13px;
  border: 1px solid var(--kusunoki-dark); background: white; color: var(--kusunoki-dark); font-weight: 700;
}
.kusunoki-page .skip-link:focus { top: 12px; }
.kusunoki-page a:focus-visible { outline: 3px solid var(--kusunoki-orange); outline-offset: 4px; }
.kusunoki-page .eyebrow { margin: 0 0 8px; color: var(--kusunoki-orange); font-size: 9px; font-weight: 800; letter-spacing: .2em; }

/* Key visual */
.kusunoki-page .hero { overflow: hidden; border-bottom: 4px solid var(--kusunoki-orange); background: #d5a37a; }
.kusunoki-page .hero img { display: block; width: 100%; height: auto; }
.kusunoki-page .title-under-hero {
  width: min(860px, calc(100% - 44px)); margin: 25px auto 0; padding: 0 0 17px;
  border-bottom: 1px solid #d8c6b5; text-align: center;
}
.kusunoki-page .title-under-hero .eyebrow { margin-bottom: 5px; color: #a06a48; font: 700 9px/1.5 Georgia, serif; letter-spacing: .22em; }
.kusunoki-page .title-under-hero h1 {
  margin: 0; color: #43372f; font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: clamp(22px, 3.1vw, 35px); font-weight: 600; line-height: 1.5; letter-spacing: .08em;
}
.kusunoki-page .title-under-hero > p:last-child { margin: 5px 0 0; color: var(--kusunoki-muted); font-size: 10px; letter-spacing: .08em; }

/* Story */
.kusunoki-page .story-intro {
  width: min(820px, calc(100% - 48px)); margin: 52px auto 58px; padding: 0 24px 34px;
  border-bottom: 1px solid #d8c6b5; text-align: center;
}
.kusunoki-page .story-intro .eyebrow { color: #a06a48; font: 700 9px/1.5 Georgia, serif; letter-spacing: .22em; }
.kusunoki-page .story-intro h2 {
  margin: 0; color: #5a4538; font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: clamp(20px, 3vw, 29px); font-weight: 600; line-height: 1.6; letter-spacing: .08em;
}
.kusunoki-page .story-intro > p:last-child { margin: 15px 0 0; color: #6d6259; font-size: 12px; line-height: 2.1; }

/* Character directory */
.kusunoki-page .characters { width: min(1160px, calc(100% - 48px)); margin: 0 auto; padding-bottom: 24px; }
.kusunoki-page .section-heading {
  display: flex; justify-content: space-between; align-items: end; gap: 20px; margin: 0 0 25px; padding-bottom: 14px;
  border-bottom: 2px solid #b87a50;
}
.kusunoki-page .section-heading .eyebrow { margin-bottom: 3px; font: 700 9px/1.5 Georgia, serif; letter-spacing: .2em; }
.kusunoki-page .section-heading h2 {
  margin: 0; color: #42372f; font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: 28px; font-weight: 600; letter-spacing: .1em;
}
.kusunoki-page .section-heading > p { margin: 0 0 2px; color: var(--kusunoki-muted); text-align: right; font-size: 10px; line-height: 1.8; }
.kusunoki-page .character-card {
  --accent: #c8895b;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.16fr); gap: clamp(22px, 4vw, 48px);
  align-items: center; margin: 0 0 22px; padding: clamp(16px, 2.6vw, 28px);
  border: 1px solid #e4d9cd; border-left: 3px solid var(--accent); background: rgb(255 255 255 / 76%);
}
.kusunoki-page .character-kuzuha { --accent: #ad704a; }
.kusunoki-page .character-tatsuki { --accent: #71837f; }
.kusunoki-page .character-kirino { --accent: #c28564; }
.kusunoki-page .character-makino { --accent: #987450; }
.kusunoki-page .character-natsuki { --accent: #a55f48; }
.kusunoki-page .portrait { position: relative; overflow: hidden; background: #e9dfd4; }
.kusunoki-page .portrait img { display: block; width: 100%; height: 100%; max-height: 390px; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 25%; }
.kusunoki-page .number {
  position: absolute; right: 10px; bottom: 10px; padding: 3px 8px; background: rgb(55 45 39 / 78%);
  color: #fff9f2; font: 700 10px/1.3 Georgia, serif; letter-spacing: .12em;
}
.kusunoki-page .character-copy { min-width: 0; padding: 4px 0; }
.kusunoki-page .character-label { margin: 0 0 5px; color: var(--accent); font: 700 8px/1.5 Georgia, serif; letter-spacing: .18em; }
.kusunoki-page .character-copy h3 {
  margin: 0; color: #43372f; font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: clamp(25px, 3vw, 34px); font-weight: 600; line-height: 1.35; letter-spacing: .08em;
}
.kusunoki-page .reading { margin: 4px 0 0; color: #988a7f; font-size: 9px; letter-spacing: .08em; }
.kusunoki-page .quote {
  margin: 15px 0; padding: 6px 0 6px 13px; border-left: 1px solid var(--accent);
  color: #654b3d; font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif; font-size: 13px; font-weight: 600; line-height: 1.8;
}
.kusunoki-page .profile { display: flex; flex-wrap: wrap; gap: 0; margin: 0; padding: 0; border: 0; border-top: 1px solid #e7ddd3; border-bottom: 1px solid #e7ddd3; }
.kusunoki-page .profile div { flex: 1 1 25%; min-width: 88px; padding: 7px 8px; border-right: 1px solid #e7ddd3; }
.kusunoki-page .profile div:last-child { border-right: 0; }
.kusunoki-page .profile dt { color: #96877c; font-size: 8px; font-weight: 700; letter-spacing: .06em; }
.kusunoki-page .profile dd { margin: 0; color: #433a34; font-size: 10px; font-weight: 800; }
.kusunoki-page .bio { margin: 13px 0 0; color: #625951; font-size: 11px; line-height: 2; }
.kusunoki-page .voice { display: inline-flex; align-items: center; gap: 8px; margin: 7px 0 0; }
.kusunoki-page .voice-mark {
  display: inline-block; padding: 2px 7px; background: var(--kusunoki-orange); color: #fffaf5;
  font: 800 8px/1.5 Georgia, serif; letter-spacing: .13em;
}
.kusunoki-page .voice-name { color: #5d493b; font-size: 10px; font-weight: 800; letter-spacing: .04em; }
.kusunoki-page .voice-note { width: min(1160px, calc(100% - 48px)); margin: 0 auto 55px; color: #8f8277; text-align: right; font-size: 9px; }

/* Voice drama link */
.kusunoki-page .drama-promo { width: min(760px, calc(100% - 48px)); margin: 0 auto 54px; }
.kusunoki-page .drama-promo .eyebrow { margin: 0 0 8px; color: #a65f35; font: 700 9px/1.5 Georgia, serif; letter-spacing: .2em; }
.kusunoki-page .drama-sample-label { display: grid; gap: 2px; margin: 0 0 8px; }
.kusunoki-page .drama-sample-title { color: #5b4438; font-size: 14px; font-weight: 700; }
.kusunoki-page .drama-sample-subtitle { color: #87776c; font-size: 10px; }
.kusunoki-page .drama-videos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.kusunoki-page .drama-video-caption { margin: 0 0 5px; color: #87776c; font-size: 10px; font-weight: 700; }
.kusunoki-page .drama-video { overflow: hidden; border: 1px solid #d6a27b; background: #2d2926; aspect-ratio: 16 / 9; }
.kusunoki-page .drama-video iframe { display: block; width: 100%; height: 100%; border: 0; }
.kusunoki-page .drama-cast { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 16px; }
.kusunoki-page .drama-cast-label { padding: 2px 7px; background: #a65f35; color: #fffaf5; font: 700 8px/1.5 Georgia, serif; letter-spacing: .15em; }
.kusunoki-page .drama-cast-names { color: #5b4438; font-size: 11px; font-weight: 700; letter-spacing: .02em; }
.kusunoki-page .drama-promo-link {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 17px 21px;
  border: 1px solid #d6a27b; background: #fff8f1; color: #5b4438; text-decoration: none;
  transition: background .2s, transform .2s;
}
.kusunoki-page .drama-promo-link:hover { transform: translateY(-2px); background: #f8e7d7; }
.kusunoki-page .drama-promo-link strong { display: block; font-size: 14px; letter-spacing: .04em; }
.kusunoki-page .drama-promo-link small { display: block; margin-top: 4px; color: #87776c; font-size: 10px; }
.kusunoki-page .drama-promo-arrow { color: #a65f35; font-size: 19px; }

/* Footer */
.kusunoki-page .site-footer {
  display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 20px max(24px, calc((100vw - 1160px) / 2));
  border-top: 3px solid #bb774a; background: #44372f; color: #e8ded4; font-size: 9px; letter-spacing: .06em;
}
.kusunoki-page .site-footer p { margin: 0; }
.kusunoki-page .back-home { color: #ead1bb; font: 700 8px/1.5 Georgia, serif; letter-spacing: .16em; text-decoration: none; }

@media (min-width: 920px) {
  .kusunoki-page .character-card:nth-of-type(even) { grid-template-columns: minmax(0, 1.16fr) minmax(0, 1fr); }
  .kusunoki-page .character-card:nth-of-type(even) .portrait { order: 2; }
}
@media (max-width: 680px) {
  .kusunoki-page .title-under-hero { width: calc(100% - 32px); margin-top: 17px; padding-bottom: 13px; }
  .kusunoki-page .title-under-hero h1 { font-size: 22px; }
  .kusunoki-page .title-under-hero > p:last-child { font-size: 9px; }
  .kusunoki-page .story-intro { width: calc(100% - 32px); margin: 39px auto 44px; padding: 0 4px 25px; }
  .kusunoki-page .story-intro > p:last-child { font-size: 10px; }
  .kusunoki-page .characters { width: calc(100% - 32px); }
  .kusunoki-page .section-heading { align-items: start; gap: 10px; margin-bottom: 18px; }
  .kusunoki-page .section-heading h2 { font-size: 24px; }
  .kusunoki-page .section-heading > p { max-width: 110px; font-size: 9px; }
  .kusunoki-page .character-card,
  .kusunoki-page .character-card:nth-of-type(even) { grid-template-columns: 1fr; gap: 16px; margin-bottom: 18px; padding: 13px; }
  .kusunoki-page .character-card:nth-of-type(even) .portrait { order: 0; }
  .kusunoki-page .portrait img { max-height: 420px; aspect-ratio: 4 / 3; object-position: center 30%; }
  .kusunoki-page .character-copy { padding: 0 4px 6px; }
  .kusunoki-page .character-copy h3 { font-size: 28px; }
  .kusunoki-page .profile div { min-width: 0; flex: 1 1 25%; padding: 6px 5px; }
  .kusunoki-page .profile dd { font-size: 9px; }
  .kusunoki-page .voice-note { width: calc(100% - 32px); margin-bottom: 38px; }
  .kusunoki-page .drama-promo { width: calc(100% - 32px); margin-bottom: 38px; }
  .kusunoki-page .drama-videos { grid-template-columns: 1fr; gap: 12px; }
  .kusunoki-page .drama-promo-link { padding: 14px 15px; }
  .kusunoki-page .drama-promo-link strong { font-size: 12px; }
  .kusunoki-page .site-footer { flex-direction: column; justify-content: center; gap: 8px; padding: 18px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .kusunoki-page * { scroll-behavior: auto; }
}