:root {
  --ivory: #f3f1ec;
  --white: #fbfbf8;
  --ink: #181a1c;
  --muted: #6e716f;
  --line: #c9cac4;
  --dark: #111315;
  --dark-line: #34373a;
  --olive: #8f9680;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--ivory);
  font-family: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif;
  line-height: 1.8;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }

.site-header {
  height: 84px;
  padding: 0 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--ivory);
  border-bottom: 1px solid rgba(24,26,28,.05);
  position: relative;
  z-index: 20;
}
.brand { font-size: 17px; letter-spacing: .14em; }
.desktop-nav { display: flex; gap: 34px; font: 600 11px/1 Georgia, serif; letter-spacing: .12em; }
.desktop-nav a { opacity: .72; }
.desktop-nav a:hover { opacity: 1; }
.menu-button { display: none; border: 0; background: none; color: var(--ink); }
.mobile-menu { display: none; }

section { padding-left: clamp(28px, 8vw, 170px); padding-right: clamp(28px, 8vw, 170px); }
.section-ivory { background: var(--ivory); }
.section-white { background: var(--white); }
.section-dark { background: var(--dark); color: #f5f5f1; }

.hero {
  min-height: 830px;
  padding-top: 105px;
  padding-bottom: 75px;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(420px, .95fr);
  gap: 90px;
  align-items: center;
}
.hero-copy { max-width: 610px; }
.eyebrow { display: inline-flex; }
.pill {
  padding: 7px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font: 600 11px/1 Georgia, serif;
  letter-spacing: .16em;
}
h1 { margin: 34px 0 12px; font-size: clamp(44px, 4.1vw, 60px); line-height: 1.15; font-weight: 500; letter-spacing: .08em; }
.subtitle { color: var(--muted); font-size: 18px; letter-spacing: .12em; margin: 0 0 42px; }
.lead { font-size: 15px; line-height: 2.1; margin: 0; }
.tagline { margin: 58px 0 34px; font-size: 25px; line-height: 1.6; letter-spacing: .04em; }
.text-link { font: 600 12px/1 Georgia, serif; letter-spacing: .16em; }
.text-link span { margin-left: 8px; }

.specimen {
  min-height: 650px;
  background: var(--dark);
  color: #fafaf7;
  position: relative;
  overflow: hidden;
  padding: 34px;
}
.specimen-label { margin: 0; font: 600 11px/1.05 Georgia, serif; letter-spacing: .2em; }
.rings { width: min(78%, 420px); aspect-ratio: 1; position: absolute; left: 50%; top: 48%; transform: translate(-50%, -50%); }
.rings i { position: absolute; inset: 0; border: 1px solid #3a3d3f; border-radius: 50%; }
.rings i:nth-child(2){ inset: 20%; }.rings i:nth-child(3){ inset: 25%; }.rings i:nth-child(4){ inset: 30%; }.rings i:nth-child(5){ inset: 35%; }.rings i:nth-child(6){ inset: 40%; }.rings i:nth-child(7){ inset: 45%; }
.specimen-meta { position: absolute; left: 34px; bottom: 34px; display: grid; gap: 2px; font-family: Arial, sans-serif; font-size: 9px; letter-spacing: .02em; }
.specimen-meta strong { font-weight: 500; }
.specimen-meta span { color: #9a9da0; }

.about { padding-top: 95px; padding-bottom: 125px; min-height: 580px; }
.section-label { display: grid; gap: 2px; margin-bottom: 36px; }
.section-label span { font: 600 12px/1 Georgia, serif; letter-spacing: .14em; }
.section-label small { font: 400 11px/1.4 "Noto Sans JP", sans-serif; color: var(--muted); }
.section-label.inverse small { color: #a5a8aa; }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.about h2, .world h2, .novel h2 { margin: 0; font-size: clamp(31px, 3.3vw, 48px); line-height: 1.55; font-weight: 500; letter-spacing: .04em; }
.about p { max-width: 520px; font-size: 15px; }

.characters { padding-top: 90px; padding-bottom: 115px; min-height: 860px; }
.section-heading-row { display: flex; align-items: start; justify-content: space-between; gap: 30px; margin-bottom: 54px; }
.section-heading-row h2 { margin: 0; max-width: 560px; font-size: clamp(30px, 3vw, 45px); line-height: 1.35; font-weight: 500; }
.section-heading-row p { margin: 0; font-size: 12px; color: var(--muted); padding-top: 8px; }
.character-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.character-card { border: 1px solid var(--line); min-height: 310px; padding: 28px; background: rgba(255,255,255,.34); }
.accent-line { display: block; width: 42px; height: 2px; background: #a4b4bb; margin-bottom: 18px; }
.character-card.yoruka .accent-line { background: var(--olive); }
.roman { margin: 0 0 12px; font: 600 10px/1 Georgia, serif; letter-spacing: .14em; color: var(--muted); }
.character-card h3, .world h3, .timeline h3 { margin: 0 0 12px; font-size: 25px; line-height: 1.35; font-weight: 500; }
.character-card > p:last-child { font-size: 13px; color: #4a4d4b; }
.section-link { display: inline-block; margin-top: 42px; }

.world { padding-top: 90px; padding-bottom: 120px; min-height: 800px; }
.world h2 { max-width: 900px; font-size: clamp(34px, 3.6vw, 52px); }
.world-grid { margin-top: 64px; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; }
.world-grid article { border: 1px solid var(--dark-line); min-height: 220px; padding: 22px; }
.world .roman { color: #8e9294; }
.world h3 { color: #fff; }
.world-grid article > p:last-child { color: #b9bcbd; font-size: 13px; }

.story { padding-top: 90px; padding-bottom: 120px; min-height: 760px; }
.timeline { display: grid; grid-template-columns: repeat(3,1fr); gap: 0; border-top: 1px solid rgba(24,26,28,.08); margin-top: 42px; }
.timeline-item { min-height: 260px; padding: 34px 40px 20px 0; position: relative; }
.timeline-item + .timeline-item { border-left: 1px solid rgba(24,26,28,.12); padding-left: 40px; }
.timeline .dot { display: none; }
.timeline-item > p:last-child { font-size: 14px; max-width: 290px; color: #4d504e; }

.novel { min-height: 690px; padding-top: 95px; padding-bottom: 95px; display: grid; grid-template-columns: 1fr 500px; gap: 90px; align-items: center; }
.novel-copy { max-width: 500px; }
.episode-no { display: block; margin-bottom: 22px; font-size: 14px; letter-spacing: .1em; }
.novel h2 { font-size: 38px; margin-bottom: 22px; }
.novel-copy > p { color: #4d504e; font-size: 14px; margin-bottom: 36px; }
.pill-button { display: inline-flex; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; font: 600 10px/1 Georgia, serif; letter-spacing: .12em; }
.novel-cover { height: 500px; background: #e9e7e1; padding: 45px 55px; display: flex; flex-direction: column; justify-content: space-between; }
.novel-cover span { font-size: 74px; color: #d3d0c8; }
.novel-cover strong { font-size: 26px; font-weight: 500; line-height: 1.6; }

.site-footer { min-height: 280px; padding: 80px 90px 50px; background: var(--dark); color: #f5f5f1; display: flex; justify-content: space-between; align-items: end; }
.site-footer > div { display: grid; gap: 8px; }
.site-footer strong { font-weight: 500; letter-spacing: .1em; }
.site-footer small { color: #8f9395; }
.site-footer nav { display: flex; gap: 20px; font: 600 10px/1 Georgia, serif; letter-spacing: .12em; color: #b6b8ba; }


/* Japanese line-break control */
.lead,
.tagline,
.about h2,
.about p,
.section-heading-row h2,
.character-card > p:last-child,
.world h2,
.world-grid article > p:last-child,
.timeline-item > p:last-child,
.novel h2,
.novel-copy > p {
  line-break: strict;
  word-break: normal;
  overflow-wrap: normal;
}

.no-orphan {
  white-space: nowrap;
}


.no-break {
  white-space: nowrap;
}

.about p,
.character-card > p:last-child,
.world-grid article > p:last-child,
.timeline-item > p:last-child,
.novel-copy > p {
  text-align: justify;
  text-justify: inter-character;
}


.world-line {
  display: block;
}

@media (max-width: 820px) {
  .site-header { height: 68px; padding: 0 22px; }
  .brand { font-size: 14px; }
  .desktop-nav { display: none; }
  .menu-button { display: grid; grid-template-columns: 18px auto; align-items: center; gap: 8px; padding: 8px 0; font: 600 10px/1 Georgia, serif; letter-spacing: .12em; }
  .menu-lines, .menu-lines::before, .menu-lines::after { display: block; width: 18px; height: 1px; background: var(--ink); content: ""; }
  .menu-lines { position: relative; }
  .menu-lines::before { position: absolute; top: -5px; }
  .menu-lines::after { position: absolute; top: 5px; }
  .mobile-menu { position: fixed; inset: 68px 0 auto; z-index: 15; display: grid; background: rgba(243,241,236,.98); border-bottom: 1px solid var(--line); transform: translateY(-130%); transition: transform .25s ease; padding: 20px 24px 24px; gap: 0; }
  .mobile-menu.open { transform: translateY(0); }
  .mobile-menu a { padding: 14px 0; border-bottom: 1px solid rgba(24,26,28,.1); font: 600 12px/1 Georgia, serif; letter-spacing: .14em; }

  section { padding-left: 24px; padding-right: 24px; }
  .hero { min-height: auto; padding-top: 54px; padding-bottom: 54px; grid-template-columns: 1fr; gap: 46px; align-items: stretch; }
  .hero-copy { max-width: none; }
  .pill { font-size: 9px; padding: 6px 10px; }
  h1 { margin-top: 26px; font-size: clamp(38px, 11vw, 52px); letter-spacing: .07em; }
  .subtitle { font-size: 15px; margin-bottom: 30px; }
  .lead { font-size: 14px; line-height: 2; }
  .tagline { margin: 42px 0 26px; font-size: 21px; }
  .specimen { min-height: 430px; padding: 24px; }
  .specimen-label { font-size: 9px; }
  .specimen-meta { left: 24px; bottom: 24px; font-size: 8px; }
  .rings { width: min(76vw, 300px); }

  .about { min-height: auto; padding-top: 68px; padding-bottom: 80px; }
  .section-label { margin-bottom: 28px; }
  .about-grid { grid-template-columns: 1fr; gap: 32px; }
  .about h2, .world h2, .novel h2 { font-size: 30px; line-height: 1.5; }
  .about p { margin: 0; font-size: 14px; }

  .characters { min-height: auto; padding-top: 68px; padding-bottom: 80px; }
  .section-heading-row { display: grid; gap: 14px; margin-bottom: 36px; }
  .section-heading-row h2 { font-size: 31px; }
  .section-heading-row p { padding-top: 0; }
  .character-grid { grid-template-columns: 1fr; gap: 12px; }
  .character-card { min-height: auto; padding: 24px; }
  .character-card h3 { font-size: 24px; }
  .character-card > p:last-child { font-size: 13px; margin-bottom: 0; }
  .section-link { margin-top: 30px; }

  .world { min-height: auto; padding-top: 68px; padding-bottom: 80px; }
  .world h2 { font-size: 31px; line-height: 1.55; }
  .world-grid { margin-top: 42px; grid-template-columns: 1fr; gap: 12px; }
  .world-grid article { min-height: auto; padding: 22px; }
  .world-grid article > p:last-child { margin-bottom: 0; }

  .story { min-height: auto; padding-top: 68px; padding-bottom: 80px; }
  .timeline { display: block; border-top: 0; margin-top: 18px; padding-left: 22px; position: relative; }
  .timeline::before { content: ""; position: absolute; left: 4px; top: 12px; bottom: 18px; width: 1px; background: #b8bbb8; }
  .timeline-item { min-height: auto; padding: 0 0 46px 24px; position: relative; }
  .timeline-item + .timeline-item { border-left: 0; padding-left: 24px; }
  .timeline .dot { display: block; position: absolute; width: 9px; height: 9px; border: 1px solid var(--ink); border-radius: 50%; background: var(--ivory); left: -22px; top: 4px; }
  .timeline .dot.current::after { content: ""; position: absolute; inset: 2px; background: var(--ink); border-radius: 50%; }
  .timeline-item > p:last-child { margin-bottom: 0; font-size: 13px; }
  .timeline h3 { font-size: 24px; }

  .novel { min-height: auto; padding-top: 68px; padding-bottom: 80px; grid-template-columns: 1fr; gap: 38px; }
  .novel-copy { max-width: none; }
  .novel h2 { font-size: 31px; }
  .novel-cover { height: 390px; padding: 32px; order: -1; }
  .novel-cover span { font-size: 58px; }
  .novel-cover strong { font-size: 24px; }

  .site-footer { min-height: 250px; padding: 54px 24px 34px; display: grid; gap: 38px; align-items: end; }
  .site-footer nav { display: grid; grid-template-columns: repeat(2, max-content); gap: 14px 22px; }
}

@media (max-width: 420px) {
  section { padding-left: 20px; padding-right: 20px; }
  .world { padding-left: 16px; padding-right: 16px; }

  h1 { font-size: 39px; }
  .tagline { font-size: 19px; }
  .specimen { min-height: 400px; }

  .about h2,
  .novel h2,
  .section-heading-row h2 { font-size: 27px; }

  .world h2 {
    font-size: 22px;
    line-height: 1.7;
    letter-spacing: -0.025em;
  }

  .world-line {
    white-space: nowrap;
  }
}

/* pinpoint mobile line-fit fixes */
@media (max-width: 420px) {
  .hero-lead-tight {
    font-size: 13.6px;
    letter-spacing: -0.032em;
  }

  .timeline-tight {
    font-size: 12.6px !important;
    letter-spacing: -0.028em;
  }
}


/* final pinpoint mobile typography fixes */
@media (max-width: 420px) {
  .hero-lead-fit {
    font-size: 13.45px;
    letter-spacing: -0.042em;
  }

  .character-card > p:last-child {
    letter-spacing: -0.018em;
  }
}

/* === CHARACTER PAGE RESTORED === */
.character-page .site-header [aria-current="page"] {
  opacity: 1;
}

.character-hero {
  min-height: 560px;
  padding-top: 110px;
  padding-bottom: 90px;
  position: relative;
}
.character-hero .section-label { margin-bottom: 70px; }
.character-hero-index {
  margin: 0 0 14px;
  font: 600 10px/1 Georgia, serif;
  letter-spacing: .18em;
  color: var(--muted);
}
.character-hero h1 {
  margin: 0;
  font-size: clamp(44px, 5vw, 68px);
  line-height: 1.35;
}
.character-hero-lead {
  margin: 38px 0 0;
  max-width: 560px;
  font-size: 14px;
  color: #4d504e;
}

.character-detail {
  min-height: 720px;
  padding-top: 90px;
  padding-bottom: 90px;
  display: grid;
  grid-template-columns: minmax(360px, .9fr) minmax(0, 1.1fr);
  gap: clamp(55px, 7vw, 120px);
  align-items: center;
  border-top: 1px solid rgba(24,26,28,.07);
}
.character-visual {
  min-height: 540px;
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(rgba(24,26,28,.025), rgba(24,26,28,.025)),
    var(--ivory);
}
.character-visual-dark {
  background: var(--dark);
  color: #f5f5f1;
  border-color: var(--dark-line);
}
.character-visual-olive {
  background: #e8e9e2;
}
.character-number {
  position: absolute;
  top: 24px;
  left: 28px;
  font: 400 66px/1 Georgia, serif;
  color: rgba(110,113,111,.18);
}
.character-visual-dark .character-number {
  color: rgba(255,255,255,.12);
}
.portrait-placeholder {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: 72%;
  aspect-ratio: 3/4;
  border: 0;
  opacity: .34;
  display: grid;
  place-content: center;
  text-align: center;
  gap: 10px;
  font: 600 10px/1 Georgia, serif;
  letter-spacing: .18em;
}
.portrait-placeholder small {
  font: inherit;
  font-size: 8px;
  letter-spacing: .14em;
}

.character-profile { max-width: 590px; }
.character-profile .accent-line {
  width: 58px;
  margin-bottom: 22px;
}
.character-profile .roman {
  margin-bottom: 16px;
}
.character-profile h2 {
  margin: 0 0 12px;
  font-size: clamp(40px, 4.4vw, 58px);
  font-weight: 500;
  line-height: 1.25;
}
.character-meta {
  margin: 0 0 34px;
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--muted);
}
.character-intro {
  margin: 0 0 44px;
  font-size: 17px;
  line-height: 2;
}
.profile-list {
  margin: 0;
  border-top: 1px solid var(--line);
}
.profile-list > div {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 24px;
  padding: 19px 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.profile-list dt {
  font: 600 9px/1.6 Georgia, serif;
  letter-spacing: .16em;
  color: var(--muted);
  white-space: nowrap;
}
.profile-list dd {
  margin: 0;
  font-size: 13px;
  line-height: 1.9;
  color: #4a4d4b;
  min-width: 0;
}

.character-back {
  padding-top: 72px;
  padding-bottom: 72px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.character-back .roman { margin: 0; color: #888d8f; }

@media (max-width: 820px) {
  .character-hero {
    min-height: auto;
    padding-top: 66px;
    padding-bottom: 72px;
  }
  .character-hero .section-label { margin-bottom: 46px; }
  .character-hero h1 {
    font-size: 37px;
    line-height: 1.45;
  }
  .character-hero-lead {
    margin-top: 28px;
    font-size: 13px;
    line-height: 2;
  }

  .character-detail {
    min-height: auto;
    padding-top: 56px;
    padding-bottom: 70px;
    grid-template-columns: 1fr;
    gap: 42px;
  }
  .character-visual {
    min-height: 430px;
  }
  .character-number {
    font-size: 54px;
    top: 20px;
    left: 22px;
  }
  .portrait-placeholder {
    width: min(68%, 270px);
  }
  .character-profile {
    max-width: none;
  }
  .character-profile h2 {
    font-size: 38px;
  }
  .character-meta {
    margin-bottom: 26px;
  }
  .character-intro {
    font-size: 15px;
    margin-bottom: 34px;
  }
  .profile-list > div {
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 16px;
    padding: 17px 0;
  }
  .profile-list dd {
    font-size: 12.5px;
  }
  .character-back {
    padding-top: 56px;
    padding-bottom: 56px;
    display: grid;
    gap: 30px;
  }
}

@media (max-width: 420px) {
  .character-hero,
  .character-detail,
  .character-back {
    padding-left: 20px;
    padding-right: 20px;
  }

  .character-hero h1 { font-size: 34px; }
  .character-visual { min-height: 390px; }
  .character-profile h2 { font-size: 36px; }
  .character-intro {
    font-size: 14px;
    letter-spacing: -0.012em;
  }
  .profile-list > div {
    grid-template-columns: 108px minmax(0, 1fr);
    gap: 12px;
  }
  .profile-list dt {
    font-size: 8.5px;
    letter-spacing: .14em;
  }
  .profile-list dd {
    letter-spacing: -0.01em;
    text-align: left;
  }
}

@media (max-width: 420px) {
  .character-title-fit {
    font-size: 28px !important;
    line-height: 1.4;
    letter-spacing: -0.02em;
    white-space: nowrap;
  }
}