:root {
  --ink: #1d2422;
  --muted: #65716b;
  --paper: #f5f6f2;
  --card: #fff;
  --line: #dfe4de;
  --accent: #c94e3e;
  --shadow: 0 18px 45px rgba(26, 39, 34, .10);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: radial-gradient(circle at 8% 4%, rgba(216, 229, 213, .42), transparent 28rem), var(--paper);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  line-height: 1.8;
}
a { color: #a83e32; }
a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.site-header, .page-layout, .site-footer { width: min(1180px, calc(100% - 32px)); margin-inline: auto; }
.site-header { margin-top: 24px; }
.comic-banner {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 24px;
  box-shadow: var(--shadow);
}
.site-nav { display: flex; gap: 8px; padding: 18px 4px 14px; }
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 15px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--muted);
  font-size: .83rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-decoration: none;
}
.site-nav a:hover, .site-nav a:focus-visible, .site-nav a[aria-current="page"] {
  border-color: var(--line);
  background: var(--card);
  color: #a83e32;
}
.page-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 248px;
  align-items: start;
  gap: 28px;
  padding: 20px 0 56px;
  border-top: 1px solid var(--line);
}
.episode, .episode-list {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--card);
  box-shadow: var(--shadow);
}
.episode { padding: clamp(22px, 4vw, 48px); }
.series-label { margin: 0 0 2px; color: var(--accent); font-size: .76rem; font-weight: 800; letter-spacing: .12em; }
.episode h1 { margin: 0; font-size: clamp(1.65rem, 3.5vw, 2.3rem); line-height: 1.35; }
.episode-date { margin: 4px 0 26px; color: var(--muted); font-size: .84rem; }
.comic-image { display: block; width: min(100%, 660px); height: auto; margin: 0 auto; border-radius: 10px; }
.episode-copy { max-width: 660px; margin: 30px auto 0; }
.episode-copy p { margin: 16px 0 0; }
.episode-copy h2 { margin: 28px 0 10px; font-size: 1.1rem; }
.note, .character-intro { margin-top: 28px; padding: 18px 22px; border: 1px solid var(--line); border-radius: 14px; background: #fafbf8; }
.note h2, .character-intro h2 { margin-top: 0; }
.character-intro img { display: block; max-width: 100%; height: auto; margin: 12px auto; border-radius: 8px; }
.character-list { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0; }
.character-list dt { font-weight: 800; }
.character-list dd { margin: 0; }
.episode-pager { display: flex; gap: 12px; margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--line); }
.episode-pager a { display: block; flex: 1; padding: 14px 18px; border: 1px solid var(--line); border-radius: 14px; font-weight: 700; text-decoration: none; }
.episode-pager a:hover { border-color: var(--accent); background: #fff8f5; }
.episode-pager small { display: block; color: var(--muted); font-size: .75rem; }
.episode-list { position: sticky; top: 20px; padding: 22px; }
.episode-list h2 { margin: 0 0 14px; font-size: 1.05rem; }
.episode-list ol { margin: 0; padding: 0; list-style: none; }
.episode-list li + li { margin-top: 8px; }
.episode-list a { display: block; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); font-weight: 700; text-decoration: none; line-height: 1.5; }
.episode-list a:hover, .episode-list a[aria-current="page"] { border-color: #e6b9ae; background: #fff4f0; color: #a83e32; }
.episode-list small { display: block; color: var(--muted); font-size: .75rem; font-weight: 400; }
.site-footer { padding: 20px 0 36px; border-top: 1px solid var(--line); color: var(--muted); font-size: .75rem; text-align: center; }
@media (max-width: 760px) {
  .page-layout { grid-template-columns: 1fr; gap: 18px; }
  .episode-list { position: static; }
  .episode-list ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .episode-list li + li { margin-top: 0; }
}
@media (max-width: 460px) {
  .site-header, .page-layout, .site-footer { width: calc(100% - 22px); }
  .site-header { margin-top: 12px; }
  .comic-banner { border-radius: 14px; }
  .site-nav { flex-wrap: wrap; padding-top: 12px; }
  .episode { padding: 20px 16px; }
  .note, .character-intro { padding: 16px; }
  .episode-list ol { grid-template-columns: 1fr; }
}