/* Responsive reading layout. Artwork keeps its original proportions. */
:root {
  --paper:#fcfdfe; --ink:#263c49; --muted:#526874; --blue:#3d657b; --line:#dce7ec; --soft:#eef4f7;
  --gutter:clamp(20px,4vw,112px); --page-width:1520px; --reading-width:780px;
  --body-size:clamp(17px,calc(15px + .3125vw),21px);
  --small-size:clamp(13px,calc(11.5px + .2vw),16px);
  --heading-size:clamp(28px,calc(22px + 1vw),44px);
  --gap:clamp(32px,4vw,96px); --section-space:clamp(44px,5vw,104px);
  font-family:"Yu Gothic UI","Yu Gothic",Meiryo,"Hiragino Kaku Gothic ProN",sans-serif;
  font-synthesis:none; color:var(--ink); background:var(--paper); color-scheme:light;
}
* { box-sizing:border-box; }
html { scroll-behavior:auto; scroll-padding-top:28px; }
body { margin:0; font-size:var(--body-size); }
a { color:inherit; text-underline-offset:.3em; }
button,textarea { font:inherit; }
button { cursor:pointer; }
/* Width and height respond together; HTML dimensions reserve the natural ratio. */
img,svg { display:block; max-width:100%; height:auto; }
h1,h2,h3 { font-weight:500; line-height:1.6; letter-spacing:.025em; margin:0; text-wrap:balance; overflow-wrap:anywhere; }
p { margin:0 0 1.45em; line-height:2.05; line-break:strict; overflow-wrap:anywhere; }
a:focus-visible,button:focus-visible,textarea:focus-visible,summary:focus-visible { outline:3px solid var(--blue); outline-offset:5px; }
.wide { width:min(var(--page-width),calc(100% - var(--gutter)*2)); margin-inline:auto; }
.reading-width { width:min(var(--reading-width),calc(100% - var(--gutter)*2)); margin-inline:auto; }
.skip { position:fixed; top:-120px; left:20px; background:var(--ink); color:white; z-index:20; padding:14px; }
.skip:focus { top:12px; }
.site-header { border-bottom:1px solid var(--line); }
.header-inner { min-height:96px; display:flex; justify-content:space-between; align-items:center; gap:24px; }
.brand { text-decoration:none; min-width:0; }
.brand strong { font-size:clamp(24px,calc(19px + .6vw),32px); font-weight:500; display:block; letter-spacing:.04em; }
.brand small { font-size:clamp(12px,calc(10px + .22vw),15px); color:var(--muted); display:block; margin-top:4px; line-height:1.6; }
.site-nav { display:flex; gap:clamp(20px,2vw,40px); align-items:center; font-size:clamp(14px,calc(12px + .22vw),17px); }
.site-nav a { min-height:44px; display:flex; align-items:center; text-decoration:none; border-bottom:2px solid transparent; white-space:nowrap; }
.site-nav a:hover,.site-nav a[aria-current=page] { border-color:var(--blue); }
.menu-toggle { display:none; background:var(--paper); border:1px solid var(--line); min-height:44px; padding:10px 14px; color:var(--ink); font-size:14px; }
.eyebrow,.chapter-number { font-size:var(--small-size); color:var(--muted); margin:0 0 18px; line-height:1.8; }
.small { font-size:var(--small-size); line-height:1.95; color:var(--muted); }
.actions { display:flex; gap:16px 28px; flex-wrap:wrap; align-items:center; }
.button { display:inline-flex; align-items:center; gap:22px; justify-content:center; padding:14px 24px; background:var(--blue); color:white; border:1px solid var(--blue); border-radius:2px; min-height:48px; max-width:100%; text-decoration:none; font-size:clamp(15px,calc(13px + .2vw),18px); line-height:1.6; }
.button:hover { background:#294e63; }
.button.secondary { background:transparent; color:var(--blue); }
.text-link { min-height:44px; display:inline-flex; align-items:center; gap:14px; font-size:clamp(15px,calc(13px + .2vw),18px); line-height:1.7; }
.home-opening { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--gap); align-items:center; padding:clamp(40px,4vw,80px) 0 var(--section-space); }
.home-intro { min-width:0; }
.home-intro h1 { font-size:clamp(30px,calc(22px + 1.25vw),50px); font-weight:400; line-height:1.65; margin-bottom:26px; }
.home-intro h1 span { display:block; }
.home-lead { max-width:32em; font-size:var(--body-size); margin-bottom:28px; }
.opening-art { width:100%; max-width:680px; height:auto; object-fit:contain; justify-self:center; }
.home-excerpt { padding:var(--section-space) 0; border-block:1px solid var(--line); }
.home-excerpt h2,.contents-intro h2,.home-after h2 { font-size:var(--heading-size); font-weight:400; margin-bottom:26px; }
.home-excerpt p:not(.eyebrow) { font-size:var(--body-size); }
.home-contents { padding:var(--section-space) 0; display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:var(--gap); }
.contents-intro>p:last-child { max-width:28em; }
.book-contents { display:grid; min-width:0; }
.book-contents a { display:flex; gap:20px; align-items:baseline; font-size:clamp(16px,calc(14px + .2vw),19px); line-height:1.8; min-height:52px; padding:14px 0; text-decoration:none; border-bottom:1px solid var(--line); overflow-wrap:anywhere; }
.book-contents span { font-family:Arial,sans-serif; color:var(--blue); font-size:1em; min-width:28px; flex-shrink:0; }
.book-contents a:hover { text-decoration:underline; }
.home-after { border-top:1px solid var(--line); padding:var(--section-space) 0; display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); align-items:center; gap:var(--gap); }
.home-after img { width:min(100%,500px); height:auto; justify-self:center; }
.home-after>div { min-width:0; max-width:38em; }
blockquote { border-left:2px solid var(--blue); padding:8px 0 8px 24px; margin:32px 0; font-size:clamp(22px,calc(17px + .5vw),29px); line-height:1.9; font-weight:400; overflow-wrap:anywhere; }
blockquote small { display:block; font-size:var(--small-size); color:var(--muted); margin-top:12px; }
.site-footer { border-top:1px solid var(--line); padding:32px 0 42px; }
.site-footer p,.site-footer a { font-size:var(--small-size); }
.site-footer p { max-width:70em; margin-bottom:12px; }
.book-title { text-align:center; padding:clamp(44px,4vw,80px) 0 0; }
.book-title h1 { font-size:clamp(30px,calc(22px + 1.25vw),50px); font-weight:400; margin-bottom:20px; }
.book-title>.small { margin-bottom:32px; }
.toc-details { width:min(var(--reading-width),100%); margin:0 auto; text-align:left; border-block:1px solid var(--line); }
.toc-details summary { cursor:pointer; font-size:clamp(16px,calc(14px + .2vw),19px); min-height:48px; padding:14px 0; }
.toc-details .book-contents { padding-bottom:18px; }
.book-prologue { padding:var(--section-space) 0; }
.book-prologue h2,.book-ending h2 { font-size:var(--heading-size); font-weight:400; margin-bottom:32px; }
.novel-chapter { border-top:1px solid var(--line); padding:var(--section-space) 0; scroll-margin-top:28px; }
.chapter-heading { margin-bottom:clamp(28px,3vw,56px); }
.chapter-number { font-family:Arial,sans-serif; margin-bottom:8px; color:var(--blue); }
.chapter-heading .eyebrow { margin-bottom:12px; }
.chapter-heading h2 { font-size:var(--heading-size); font-weight:400; }
.chapter-layout { display:grid; grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr); gap:var(--gap); align-items:start; }
.novel-illustration { margin:0; width:min(100%,600px); justify-self:center; }
.novel-illustration svg { width:100%; height:auto; aspect-ratio:1 / 1; }
.chapter-prose { min-width:0; width:100%; max-width:38em; }
.chapter-prose p:last-child { margin-bottom:0; }
.memory-line { color:#2e5369; font-weight:500; }
.book-ending { padding:var(--section-space) 0; }
.book-ending .end-note { margin-top:48px; }
.novel .site-footer { padding-bottom:calc(110px + env(safe-area-inset-bottom,0px)); }
.reader-rail { position:fixed; bottom:0; left:0; right:0; min-height:64px; background:var(--paper); border-top:1px solid var(--line); display:grid; grid-template-columns:auto minmax(0,560px) auto; align-items:center; justify-content:center; gap:clamp(14px,3vw,48px); z-index:5; padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom,0px)); font-size:clamp(13px,calc(11px + .2vw),16px); }
.reader-rail a { min-height:44px; display:flex; align-items:center; white-space:nowrap; }
.reader-rail span { min-width:0; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--muted); }
.reading-progress { position:absolute; left:0; top:-2px; right:0; height:2px; background:var(--line); }
.reading-progress i { display:block; background:var(--blue); height:100%; width:0; transition:width .18s; }
.page-title { padding:clamp(40px,4vw,72px) 0 32px; }
.page-title h1 { font-size:var(--heading-size); font-weight:400; margin-bottom:24px; }
.page-title>p:not(.eyebrow) { max-width:42em; }
.about-page>.page-title>.eyebrow { display:none; }
.about-opening { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:var(--gap); align-items:center; padding:20px 0 var(--section-space); }
.about-opening img { width:min(100%,580px); height:auto; object-fit:contain; justify-self:center; }
.about-opening>div { min-width:0; max-width:38em; }
.about-opening h2 { font-size:clamp(26px,calc(21px + .65vw),36px); margin-bottom:28px; }
.about-opening h3 { font-size:clamp(19px,calc(16px + .25vw),23px); margin-bottom:12px; }
.about-opening p:last-child { margin-bottom:0; }
.about-policy { padding:var(--section-space) 0; width:min(var(--reading-width),100%); border-top:1px solid var(--line); }
.about-policy h2 { font-size:clamp(26px,calc(21px + .65vw),36px); margin-bottom:24px; }
.about-policy h2:not(:first-child) { margin-top:40px; }
.memo-page { padding-bottom:var(--section-space); }
.field { margin:32px 0; }
.field label { display:block; font-size:var(--body-size); margin-bottom:12px; }
.field textarea { display:block; width:100%; min-height:168px; border:1px solid #7b919d; background:white; border-radius:2px; padding:16px; resize:vertical; color:var(--ink); font-size:max(16px,var(--body-size)); line-height:1.9; }
.memo-page #memo-status { min-height:30px; margin-top:22px; }
.text-book { padding-bottom:var(--section-space); }
.text-book section { padding:40px 0; border-top:1px solid var(--line); }
.text-book h2 { font-size:clamp(26px,calc(21px + .65vw),36px); font-weight:400; margin-bottom:28px; }

@media (max-width:1050px) {
  .chapter-layout { grid-template-columns:minmax(0,1fr); gap:32px; }
  .chapter-heading,.chapter-prose { width:min(var(--reading-width),100%); margin-inline:auto; }
  .novel-illustration { width:min(100%,560px); }
  .chapter-prose { max-width:var(--reading-width); }
  .home-opening { gap:28px; }
  .home-intro h1 { font-size:clamp(30px,3.8vw,40px); }
  .about-opening { grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:32px; }
}
@media (max-width:900px) {
  .header-inner { min-height:84px; flex-wrap:wrap; padding:14px 0; gap:0 12px; }
  .brand { flex:1; }
  .brand strong { font-size:24px; }
  .brand small { font-size:12px; }
  .menu-toggle { display:block; flex-shrink:0; }
  .site-nav { display:none; flex-direction:column; align-items:stretch; flex-basis:100%; gap:0; margin-top:16px; font-size:16px; }
  .site-nav.open { display:flex; }
  .site-nav a { padding:12px 0; border-bottom:1px solid var(--line); }
  .home-opening { grid-template-columns:minmax(0,1fr); gap:32px; }
  .home-intro { max-width:var(--reading-width); }
  .home-intro h1 { font-size:clamp(30px,4.6vw,42px); }
  .opening-art { width:min(100%,560px); }
  .home-contents { grid-template-columns:minmax(0,1fr); gap:26px; }
  .contents-intro>p:last-child { max-width:var(--reading-width); margin-bottom:0; }
  .home-after { grid-template-columns:minmax(0,1fr); gap:28px; }
  .home-after>div { width:min(var(--reading-width),100%); margin-inline:auto; }
  .home-after img { width:min(100%,440px); }
  .about-opening { grid-template-columns:minmax(0,1fr); gap:32px; }
  .about-opening img { width:min(100%,500px); }
  .about-opening>div { width:min(var(--reading-width),100%); margin-inline:auto; }
}
@media (max-width:600px) {
  :root { --gutter:20px; --gap:28px; --section-space:44px; }
  .home-opening { padding-top:36px; }
  .home-intro h1 { font-size:30px; margin-bottom:24px; }
  .home-lead { margin-bottom:24px; }
  .actions { gap:12px 20px; }
  .button { padding:13px 20px; }
  .opening-art { width:min(100%,420px); }
  .home-after img { width:min(100%,360px); }
  .book-title { padding-top:38px; }
  .book-title h1 { font-size:30px; }
  .book-prologue h2,.book-ending h2 { margin-bottom:28px; }
  .chapter-heading { margin-bottom:26px; }
  .chapter-layout { gap:28px; }
  .novel-illustration { width:min(100%,440px); }
  blockquote { padding-left:18px; }
  .reader-rail { grid-template-columns:auto minmax(0,1fr) auto; gap:12px; padding-inline:16px; font-size:13px; }
  .page-title { padding-top:36px; padding-bottom:24px; }
  .about-opening { padding-top:8px; gap:28px; }
  .about-opening img { width:min(100%,400px); }
  .about-opening h2 { margin-bottom:24px; }
}
@media (max-width:360px) {
  :root { --gutter:18px; }
  .brand strong { font-size:22px; }
  .brand small { font-size:11px; }
  .menu-toggle { padding-inline:10px; }
  .home-intro h1,.book-title h1 { font-size:28px; }
  .reader-rail { gap:8px; padding-inline:14px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation:none!important; transition:none!important; }
}