/* ===== 海淵 site — deep water + capybara ===== ASCII-only for PS5.1 safety */

:root{
  /* page — light (default) */
  --bg:#edf1ef; --surface:#f8fbf9; --ink:#15292b; --ink-soft:#4c6163; --line:#d6e0dc;
  --shadow:0 1px 2px rgba(20,40,42,.05), 0 10px 30px -14px rgba(20,40,42,.18);
  /* accents — constant across themes */
  --accent:#cf8330; --accent-deep:#a9641c; --capy:#bd8b5c; --capy-dark:#8a5e38;
  /* the deep — hero water, constant */
  --deep:#0d1a1c; --deep-2:#123033; --foam:#eaf2ef; --foam-soft:#94aeaa; --deep-line:#284a4f;
  /* type */
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Noto Serif TC","Source Han Serif TC","Songti TC","PMingLiU",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang TC","Microsoft JhengHei","Noto Sans TC","Hiragino Sans",sans-serif;
  /* reading knobs */
  --reading:var(--sans);
  --fs:1.14rem;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0c191b; --surface:#122629; --ink:#e7efec; --ink-soft:#94a9a6; --line:#22403f;
    --shadow:0 1px 2px rgba(0,0,0,.25), 0 12px 34px -16px rgba(0,0,0,.6);
    --accent:#e0a24a; --accent-deep:#f0b866; --capy:#c68d5c;
  }
}
:root[data-theme="light"]{
  --bg:#edf1ef; --surface:#f8fbf9; --ink:#15292b; --ink-soft:#4c6163; --line:#d6e0dc;
  --shadow:0 1px 2px rgba(20,40,42,.05), 0 10px 30px -14px rgba(20,40,42,.18);
  --accent:#cf8330; --accent-deep:#a9641c; --capy:#bd8b5c;
}
:root[data-theme="dark"]{
  --bg:#0c191b; --surface:#122629; --ink:#e7efec; --ink-soft:#94a9a6; --line:#22403f;
  --shadow:0 1px 2px rgba(0,0,0,.25), 0 12px 34px -16px rgba(0,0,0,.6);
  --accent:#e0a24a; --accent-deep:#f0b866; --capy:#c68d5c;
}
:root[data-size="s"]{ --fs:1rem }
:root[data-size="m"]{ --fs:1.14rem }
:root[data-size="l"]{ --fs:1.3rem }
:root[data-font="sans"]{ --reading:var(--sans) }
:root[data-font="serif"]{ --reading:var(--serif) }

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.7; -webkit-font-smoothing:antialiased;
}
a{color:inherit}
::selection{background:var(--accent); color:#fff}
:focus-visible{outline:2.5px solid var(--accent); outline-offset:3px; border-radius:3px}
img,svg{max-width:100%}
.wrap{max-width:960px; margin:0 auto; padding:0 24px}

/* ===== reading progress ===== */
.progress{position:fixed; inset:0 0 auto 0; height:3px; background:transparent; z-index:40}
.progress__fill{height:100%; width:0; background:var(--accent); transition:width .1s linear}

/* ===== reader toolbar ===== */
.toolbar{
  position:fixed; left:50%; bottom:18px; transform:translateX(-50%); z-index:45;
  display:flex; gap:6px; align-items:center; padding:7px 9px;
  background:var(--surface); border:1px solid var(--line); border-radius:100px;
  box-shadow:var(--shadow); font-size:.82rem;
}
.toolbar .grp{display:flex; gap:2px; align-items:center}
.toolbar .sep{width:1px; height:20px; background:var(--line); margin:0 4px}
.toolbar button{
  border:0; background:transparent; color:var(--ink-soft); cursor:pointer;
  font-family:var(--sans); font-size:.82rem; padding:5px 9px; border-radius:100px; line-height:1;
}
.toolbar button:hover{color:var(--ink); background:color-mix(in srgb,var(--ink) 7%,transparent)}
.toolbar button[aria-pressed="true"]{background:var(--accent); color:#fff}

/* ===== HERO : the deep water ===== */
.hero{position:relative; background:var(--deep); color:var(--foam); overflow:hidden}
.hero::before{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 90% at 78% 18%, rgba(224,162,74,.14), transparent 55%),
             radial-gradient(90% 70% at 12% 90%, rgba(20,70,72,.55), transparent 60%);}
.hero__inner{position:relative; max-width:960px; margin:0 auto; padding:74px 24px 118px;
  display:grid; grid-template-columns:1.15fr .85fr; gap:32px; align-items:center}
.eyebrow{font-size:.72rem; letter-spacing:.32em; text-transform:uppercase; color:var(--foam-soft); margin:0 0 20px; font-weight:600}
.name{font-family:var(--serif); font-weight:600; color:var(--foam); font-size:clamp(3.6rem,11vw,6.4rem);
  line-height:.94; letter-spacing:.04em; margin:0; text-wrap:balance}
.name .dot{color:var(--accent)}
.tagline{margin:22px 0 0; font-size:clamp(1.05rem,2.4vw,1.28rem); color:var(--foam); font-weight:500}
.motto{margin:16px 0 0; max-width:34ch; color:var(--foam-soft); font-family:var(--serif); font-style:italic; font-size:1.05rem; line-height:1.6}
.hero__art{justify-self:center; width:100%; max-width:300px}
.capy{width:100%; height:auto; display:block}
.capy .capyfloat{animation:bob 6s ease-in-out infinite; transform-origin:center}
.capy .yuzu{animation:bob 5s ease-in-out infinite .6s; transform-origin:center}
.capy .steam{animation:rise 4.5s ease-in-out infinite}
.capy .steam2{animation:rise 4.5s ease-in-out infinite 1.4s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes rise{0%{opacity:0;transform:translateY(4px)}40%{opacity:.6}100%{opacity:0;transform:translateY(-10px)}}
.wave{position:absolute; left:0; right:0; bottom:-1px; width:100%; display:block; color:var(--bg)}

/* ===== section rhythm ===== */
.kicker{display:inline-block; font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; color:var(--accent-deep); font-weight:700; margin:0 0 14px}
h2{font-family:var(--serif); font-weight:600; font-size:clamp(1.7rem,4vw,2.1rem); margin:0 0 18px; letter-spacing:.02em; text-wrap:balance}
.block{max-width:640px}
.muted{color:var(--ink-soft)}

.about{padding:56px 0 8px}
.about p{margin:0 0 16px; color:var(--ink-soft)}
.about p strong{color:var(--ink); font-weight:600}

/* ===== featured book (home) ===== */
.featured{display:grid; grid-template-columns:1fr auto; gap:28px; align-items:center;
  background:linear-gradient(135deg,var(--deep),var(--deep-2)); color:var(--foam);
  border-radius:18px; padding:34px; margin:36px 0 8px; box-shadow:var(--shadow)}
.featured h3{font-family:var(--serif); font-size:2rem; margin:0 0 6px; color:var(--foam); font-weight:600}
.featured .sub{color:var(--foam-soft); font-size:.9rem; margin:0 0 14px}
.featured .short p{color:var(--foam); margin:0 0 10px; font-size:1rem; line-height:1.7}
.featured .badge{writing-mode:vertical-rl; text-orientation:upright; letter-spacing:.3em;
  font-family:var(--serif); font-size:1.4rem; color:var(--accent); border:1px solid var(--deep-line);
  border-radius:12px; padding:18px 10px; white-space:nowrap}
.tag-row{display:flex; flex-wrap:wrap; gap:7px; align-items:center; margin-bottom:14px}
.chip{font-size:.72rem; letter-spacing:.03em; padding:3px 9px; border-radius:100px;
  background:color-mix(in srgb,var(--accent) 14%,transparent); color:var(--accent-deep); font-weight:600}
.featured .chip{background:rgba(224,162,74,.16); color:var(--accent)}

/* buttons */
.btn{display:inline-flex; align-items:center; gap:8px; text-decoration:none; font-weight:600; font-size:1rem;
  padding:13px 22px; border-radius:100px; cursor:pointer; border:1px solid transparent; transition:transform .15s ease, background .15s ease}
.btn--primary{background:var(--accent); color:#fff}
.btn--primary:hover{transform:translateY(-2px); background:var(--accent-deep)}
.btn--ghost{background:transparent; color:var(--foam); border-color:var(--deep-line)}
.btn--ghost:hover{border-color:var(--accent); color:var(--accent)}
.btn--line{background:var(--surface); color:var(--ink); border-color:var(--line)}
.btn--line:hover{border-color:var(--accent); transform:translateY(-2px)}

/* ===== book landing ===== */
.book-hero{position:relative; background:var(--deep); color:var(--foam); padding:64px 0 88px; overflow:hidden}
.book-hero::before{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(100% 80% at 85% 10%, rgba(224,162,74,.13), transparent 55%)}
.book-hero .wrap{position:relative}
.crumb{font-size:.85rem; color:var(--foam-soft); text-decoration:none; margin-bottom:22px; display:inline-block}
.crumb:hover{color:var(--accent)}
.book-title{font-family:var(--serif); font-size:clamp(2.6rem,7vw,4rem); margin:0; color:var(--foam); letter-spacing:.05em; line-height:1}
.book-alt{color:var(--foam-soft); margin:10px 0 0; font-size:1rem; letter-spacing:.04em}
.book-stats{color:var(--foam); margin:20px 0 26px; font-size:.95rem; letter-spacing:.02em}
.book-stats b{color:var(--accent); font-weight:600}
.book-cta{display:flex; gap:12px; flex-wrap:wrap; align-items:center}

.book-body{padding:56px 0 40px}
.book-cols{display:grid; grid-template-columns:1fr; gap:8px}

/* blurb prose */
.prose{max-width:640px; color:var(--ink)}
.prose h2{font-size:1.5rem; margin:36px 0 12px}
.prose h3{font-family:var(--serif); font-size:1.2rem; margin:28px 0 10px; color:var(--accent-deep); letter-spacing:.03em}
.prose p{margin:0 0 15px; color:var(--ink-soft); line-height:1.85}
.prose strong{color:var(--ink); font-weight:600}
.prose blockquote{margin:18px 0; padding:4px 0 4px 18px; border-left:3px solid var(--accent);
  font-family:var(--serif); font-style:italic; font-size:1.15rem; color:var(--ink)}
.prose hr{border:0; border-top:1px solid var(--line); margin:30px 0}
.prose table{border-collapse:collapse; margin:16px 0; font-size:.95rem}
.prose td{border:1px solid var(--line); padding:7px 14px; color:var(--ink-soft)}
.prose td:first-child{color:var(--ink); font-weight:600; white-space:nowrap}

/* TOC */
.toc{margin:52px 0 0}
.toc h2{margin-bottom:8px}
.toc-part{margin:28px 0}
.toc-part h3{font-family:var(--serif); font-size:1.15rem; color:var(--accent-deep); letter-spacing:.06em;
  margin:0 0 12px; padding-bottom:8px; border-bottom:1px solid var(--line)}
.toc-list{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:2px 20px}
.toc-list a{display:flex; align-items:baseline; gap:12px; text-decoration:none; padding:9px 10px; border-radius:8px}
.toc-list a:hover{background:var(--surface)}
.toc-list .n{font-variant-numeric:tabular-nums; color:var(--accent-deep); font-weight:600; font-size:.85rem; min-width:2.4em}
.toc-list .t{flex:1; color:var(--ink)}
.toc-list .w{color:var(--ink-soft); font-size:.78rem; font-variant-numeric:tabular-nums}

.resume{display:flex; align-items:center; gap:10px; text-decoration:none; margin:14px 0 0;
  padding:12px 18px; border-radius:12px; background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow)}
.resume:hover{border-color:var(--accent)}
.resume .lbl{color:var(--accent-deep); font-weight:600; font-size:.85rem}
.resume .resume__t{color:var(--ink); font-weight:600}

/* ===== chapter reading ===== */
.reader{max-width:41rem; margin:0 auto; padding:0 24px}
.chapter-head{padding:64px 0 8px; text-align:center}
.chapter-head .part{font-size:.74rem; letter-spacing:.24em; text-transform:uppercase; color:var(--accent-deep); font-weight:700}
.chapter-head .seq{color:var(--ink-soft); font-size:.9rem; margin-top:14px; letter-spacing:.06em}
.chapter-head h1{font-family:var(--serif); font-size:clamp(1.9rem,5vw,2.6rem); margin:6px 0 0; letter-spacing:.03em; text-wrap:balance}
.chapter-head .book-link{display:inline-block; margin-top:22px; color:var(--ink-soft); text-decoration:none; font-size:.85rem}
.chapter-head .book-link:hover{color:var(--accent)}
.rule{width:44px; height:2px; background:var(--accent); border:0; margin:30px auto 34px}

.chapter-body{font-family:var(--reading); font-size:var(--fs); line-height:2; color:var(--ink); padding-bottom:20px}
.chapter-body p{margin:0 0 1.35em}
.chapter-body blockquote{margin:1.5em 0; padding:2px 0 2px 20px; border-left:3px solid var(--accent);
  color:var(--ink); font-style:normal}
.chapter-body p:first-child::first-letter{font-family:var(--serif); font-weight:600}
.chapter-body .scene{text-align:center; margin:2em 0; height:1em}
.chapter-body .scene::before{content:"\2042"; color:var(--accent); font-size:1.15rem; letter-spacing:.3em}

.chapter-nav{display:flex; justify-content:space-between; gap:14px; margin:24px 0 120px}
.chapter-nav a, .chapter-nav span{flex:1; text-decoration:none; padding:16px 18px; border-radius:12px;
  border:1px solid var(--line); background:var(--surface); box-shadow:var(--shadow); min-width:0}
.chapter-nav a:hover{border-color:var(--accent)}
.chapter-nav .dir{display:block; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-deep); font-weight:700; margin-bottom:4px}
.chapter-nav .ttl{display:block; color:var(--ink); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.chapter-nav .next{text-align:right}
.chapter-nav .disabled{opacity:.4; box-shadow:none}

/* ===== footer ===== */
.foot{border-top:1px solid var(--line); margin-top:20px}
.foot .wrap{padding:40px 24px 90px}
.foot .sign{font-family:var(--serif); color:var(--ink-soft); font-size:1.05rem}
.foot .sign b{color:var(--ink); font-weight:600; letter-spacing:.06em}
.foot nav{margin-top:14px; display:flex; gap:18px; flex-wrap:wrap}
.foot nav a{color:var(--ink-soft); text-decoration:none; font-size:.9rem}
.foot nav a:hover{color:var(--accent)}

@media (max-width:720px){
  .hero__inner{grid-template-columns:1fr; padding:52px 24px 100px}
  .hero__art{grid-row:1; max-width:200px; justify-self:start}
  .featured{grid-template-columns:1fr}
  .featured .badge{writing-mode:horizontal-tb; letter-spacing:.14em; padding:8px 14px; font-size:1rem; justify-self:start}
  .toc-list{grid-template-columns:1fr}
  .toolbar{font-size:.78rem; gap:4px; padding:6px 7px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .capy *{animation:none !important}
}