:root{
  --paper:#f4f0e6;
  --paper-deep:#ece5d6;
  --ink:#242520;
  --ink-soft:#66665f;
  --line:#d8d0c1;
  --night:#20283a;
  --lamp:#e7b85e;
  --lamp-ink:#9a6a1c;
  --lamp-soft:#f1dfb9;
  --mincho:"Zen Old Mincho","Hiragino Mincho ProN","Yu Mincho","Noto Serif JP","Noto Serif CJK JP",serif;
  --gothic:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic","Noto Sans JP","Noto Sans CJK JP",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--mincho);font-size:16px;line-height:1.95;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:.34em;text-decoration-thickness:1px}
a:hover{text-decoration-color:var(--lamp)}
:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.wrap{width:min(100% - 40px,1080px);margin-inline:auto}
.nb{display:inline-block}

/* ---- top bar (all pages) ---- */
.bar{background:var(--night);color:var(--lamp-soft)}
.bar-in{display:flex;align-items:center;justify-content:space-between;padding:20px 0;gap:20px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-size:14px;letter-spacing:.22em;white-space:nowrap}
.brand svg{width:11px;height:17px;flex:none}
.bar nav,.hero nav{display:flex;gap:22px;font-family:var(--gothic);font-size:12px;letter-spacing:.1em}
.bar nav a,.hero nav a{text-decoration:none;opacity:.7;white-space:nowrap}
.bar nav a:hover,.hero nav a:hover,.bar nav a[aria-current]{opacity:1}
@media(max-width:620px){.bar nav,.hero nav{gap:14px;font-size:11px;letter-spacing:.04em}.bar nav .wide{display:none}}

/* ---- hero (top page) ---- */
.hero{background:var(--night);color:var(--lamp-soft);position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;min-height:72svh}
.hero-body{flex:1;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:48px;padding:8svh 0 7svh}
.hero-copy{align-self:center;max-width:720px;position:relative}
.hero-copy::before{content:"";position:absolute;z-index:-1;pointer-events:none;left:30%;top:24%;width:min(130vw,900px);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(231,184,94,.20),rgba(231,184,94,.07) 50%,rgba(231,184,94,0))}
@media (prefers-reduced-motion:no-preference){
  .hero-copy::before{animation:toka-glow 2.6s ease-out both}
  .hero h1{animation:toka-lit 2.2s ease-out both}
  @keyframes toka-glow{0%,30%{opacity:0}52%{opacity:.75}60%{opacity:.5}74%{opacity:.95}100%{opacity:1}}
  @keyframes toka-lit{0%,40%{color:#5d6475}100%{color:var(--lamp-soft)}}
}
.hero h1{font-size:clamp(42px,7vw,78px);font-weight:700;line-height:1.34;letter-spacing:.08em;font-feature-settings:"palt"}
.hero h1 .ln{white-space:nowrap}
.hero-lede{margin-top:34px;max-width:29em;font-size:17px;line-height:2.05;color:#d8d0bf}
.hero-mark{writing-mode:vertical-rl;font-size:12px;letter-spacing:.22em;color:#aaa99f;border-right:1px solid rgba(255,255,255,.18);padding-right:14px;margin-bottom:8px}
.hero-foot{display:flex;justify-content:flex-end;gap:24px;align-items:center;padding-bottom:28px;font-family:var(--gothic);font-size:12px;color:#aaa99f}
.hero-foot a{text-decoration:none;border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:2px}
.hero-foot .credit-sp{display:none}
.hero-foot .go{display:flex;align-items:center;gap:18px}
.hero-foot .free{color:var(--lamp);letter-spacing:.06em}
@media(max-width:700px){
  .hero{min-height:66svh}
  .hero-body{grid-template-columns:1fr;padding:7svh 0 6svh}
  .hero-mark{display:none}
  .hero-foot .credit-sp{display:inline}
  .hero h1{font-size:min(58px,calc((100vw - 40px) / 7.8))}
  .hero-lede{font-size:16px}
  .hero-foot{justify-content:space-between}
}

/* ---- rhythm ---- */
main{padding-bottom:36px}
.section{padding:96px 0 0}
.section h2{font-size:clamp(21px,2.5vw,26px);font-weight:700;letter-spacing:.14em;font-feature-settings:"palt";margin-bottom:36px}
@media(max-width:620px){.section{padding-top:72px}.section h2{margin-bottom:26px}}
.small{font-family:var(--gothic);font-size:13px;line-height:1.9;color:var(--ink-soft)}

/* ---- shelf (top page) ---- */
.shelf{list-style:none;border-top:1px solid var(--line)}
.shelf>li{display:grid;grid-template-columns:150px 1fr;gap:clamp(24px,5vw,56px);align-items:start;padding:36px 0;border-bottom:1px solid var(--line)}
.shelf .cv{width:150px}
.no{font-family:var(--gothic);font-size:12px;letter-spacing:.2em;color:var(--ink-soft)}
.shelf h3{font-size:clamp(24px,3vw,30px);font-weight:900;letter-spacing:.05em;line-height:1.45;font-feature-settings:"palt";margin-top:2px}
.shelf h3 a{text-decoration:none}
.shelf h3 a:hover{text-decoration:underline;text-decoration-color:var(--lamp)}
.who{font-size:14px;color:var(--ink-soft);margin-top:4px;letter-spacing:.04em}
.shelf .blurb{margin-top:14px;max-width:34em;font-size:16px}
.shelf .meta{margin-top:16px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 22px;font-family:var(--gothic);font-size:13px;color:var(--ink-soft)}
.shelf .meta a{color:var(--ink);font-weight:500}
@media(max-width:560px){.shelf>li{grid-template-columns:96px 1fr;gap:20px;padding:28px 0}.shelf .cv{width:96px}.shelf .blurb{font-size:15px}}
.cv{box-shadow:0 16px 28px -20px rgba(20,22,22,.6),0 1px 4px rgba(20,22,22,.14);background:#ece6da}
.upcoming{margin-top:24px}

/* ---- preface ---- */
.ask{font-size:clamp(22px,3.2vw,32px);font-weight:700;line-height:1.75;letter-spacing:.04em;max-width:22em;font-feature-settings:"palt"}
.ask+p{margin-top:22px}
.prose{font-size:17px;line-height:2.15;max-width:36em}
.prose p+p{margin-top:1.1em}
.prose .motto{font-weight:700;letter-spacing:.06em}
.prose .sign{margin-top:2.2em;text-align:right;letter-spacing:.18em;line-height:1.8}
.page-head{padding:72px 0 0}
.page-head h1{font-size:clamp(28px,4vw,40px);font-weight:900;letter-spacing:.1em;font-feature-settings:"palt"}
.page-head p{margin-top:10px}

/* ---- reading & terms ---- */
.notes{display:grid;grid-template-columns:1fr 1fr;gap:64px}
.notes h3{font-size:18px;letter-spacing:.1em;margin-bottom:18px}
.howto{border-top:1px solid var(--line)}
.howto div{padding:16px 0;border-bottom:1px solid var(--line)}
.howto dt{font-weight:700;letter-spacing:.04em}
.howto dd{margin-top:4px}
.terms p+p{margin-top:1em}
@media(max-width:760px){.notes{grid-template-columns:1fr;gap:52px}}
.mail{display:inline-block;margin-top:14px;font-family:var(--gothic);font-size:18px;letter-spacing:.04em}

/* ---- book page ---- */
.book{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,320px);gap:clamp(40px,7vw,84px);align-items:start;padding-top:64px}
.book h1{font-size:clamp(34px,4.8vw,50px);font-weight:900;line-height:1.35;letter-spacing:.04em;font-feature-settings:"palt";margin-top:6px}
.book .lede{margin-top:28px;max-width:31em;font-size:17px;line-height:2.05}
.facts{margin-top:32px;display:grid;grid-template-columns:auto 1fr;border-top:1px solid var(--line);max-width:31em;font-family:var(--gothic);font-size:13px;line-height:1.8}
.facts dt,.facts dd{padding:10px 0;border-bottom:1px solid var(--line)}
.facts dt{color:var(--ink-soft);padding-right:28px;letter-spacing:.08em;white-space:nowrap}
.book .cv{width:100%}
@media(max-width:760px){.book{grid-template-columns:1fr;padding-top:40px}.book .cover-col{order:-1;width:min(62vw,260px);justify-self:center}}

/* ---- downloads ---- */
.btn{display:inline-flex;justify-content:center;align-items:center;gap:.6em;padding:13px 22px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);font-family:var(--gothic);font-size:14px;letter-spacing:.06em;text-decoration:none;white-space:nowrap}
.btn:hover{background:transparent;color:var(--ink)}
.btn.quiet{background:transparent;color:var(--ink)}
.btn.quiet:hover{background:var(--ink);color:var(--paper)}
.btn .kb{font-size:12px;opacity:.75;letter-spacing:0}
.dl-intro{max-width:36em}
.single{margin-top:8px}
.single .btn{min-width:min(100%,320px)}

.whole{margin-top:30px;display:grid;grid-template-columns:72px 1fr auto;gap:22px;align-items:center;padding:22px 24px;background:var(--paper-deep)}
.whole h3,.vols h3{font-size:18px;font-weight:700;letter-spacing:.08em;line-height:1.5}
.whole .cv,.vols .cv{width:72px}
.vols{list-style:none;margin-top:12px;border-top:1px solid var(--line)}
.vols li{display:grid;grid-template-columns:72px 1fr auto;gap:22px;align-items:center;padding:22px 0;border-bottom:1px solid var(--line)}
.range{font-size:14px;color:var(--ink-soft);margin-top:2px}
/* 作品全体のうち、その巻がどこにあたるか */
.span{position:relative;height:4px;margin-top:12px;max-width:340px;background:var(--line);border-radius:2px}
.span i{position:absolute;top:0;bottom:0;left:var(--s);width:var(--w);background:var(--lamp-ink);border-radius:2px}
.whole .span i{left:0;width:100%}
.label-split{margin-top:44px;font-size:15px;font-weight:700;letter-spacing:.1em}
@media(max-width:620px){
  .whole,.vols li{grid-template-columns:56px 1fr;gap:16px}
  .whole{padding:18px 16px}
  .whole .cv,.vols .cv{width:56px}
  .whole .btn,.vols .btn{grid-column:1/-1;width:100%}
}
.after{margin-top:40px}

/* ---- footer ---- */
footer{padding:110px 0 56px}
.footer-rule{height:1px;background:var(--line);margin-bottom:38px}
.footer-grid{display:flex;justify-content:space-between;align-items:flex-end;gap:40px}
.footer-name{font-size:18px;font-weight:700;letter-spacing:.22em}
.footer-small{margin-top:8px;font-family:var(--gothic);font-size:11px;color:var(--ink-soft)}
.okuzuke{font-family:var(--gothic);font-size:12px;color:var(--ink-soft)}
.okuzuke dl{display:grid;grid-template-columns:auto 1fr;gap:3px 18px}
.okuzuke dt{color:#88877f}
@media(max-width:620px){.footer-grid{align-items:flex-start;flex-direction:column}}

@media(prefers-color-scheme:dark){
  :root{--paper:#191b1e;--paper-deep:#22252a;--ink:#e7e2d8;--ink-soft:#aaa69e;--line:#373a3d;--night:#141922;--lamp-soft:#e9dcc2;--lamp-ink:#e0ad55}
  .cv{box-shadow:0 16px 30px -22px rgba(0,0,0,.9),0 2px 6px rgba(0,0,0,.35)}
  .okuzuke dt{color:#8d8a83}
}