/* The Whale Rider — Classic English */
:root{
  --ink:#14262a; --soft:#4d6266; --paper:#f4f6f3; --card:#fff; --line:#d5dfdc;
  --sea:#0f4c4a; --sea-2:#1d6b66; --deep:#0a2b2c; --foam:#e5f0ec;
  --red:#b3261e; --gold:#a8762a;
  --r:12px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.06rem/1.6 "Atkinson Hyperlegible",system-ui,sans-serif}
h1,h2,h3{font-family:"Marcellus",Georgia,serif;font-weight:400;line-height:1.2;color:var(--deep)}
h1{font-size:clamp(2.1rem,6vw,3.2rem);margin:.2rem 0 .6rem}
h2{font-size:clamp(1.45rem,4vw,1.9rem);margin:2.4rem 0 .6rem}
h3{font-size:1.2rem;margin:0 0 .4rem}
a{color:var(--sea-2)}
button{font:inherit}

/* top bar (links fixed by /assets/send-panel.js) */
.topbar{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:.7rem 16px;background:var(--deep);color:#fff}
.topbar a{color:#fff;text-decoration:none}
.topbar .home{font-family:"Marcellus",serif;font-size:1.1rem}
.topbar .where{font-size:.95rem;opacity:.9;text-align:right}

main{max-width:760px;margin:0 auto;padding:0 16px 4rem}

/* buttons */
.btn{display:inline-block;padding:.6rem 1.1rem;border-radius:999px;border:1px solid var(--sea);background:#fff;color:var(--sea);cursor:pointer;text-decoration:none;font-weight:700}
.btn.primary{background:var(--sea);color:#fff}
.btn:hover{filter:brightness(1.08)}
.btn:disabled{opacity:.5;cursor:default}

/* hero */
.hero{display:grid;grid-template-columns:1fr 210px;gap:2rem;align-items:center;padding:2.2rem 0 1rem}
.hero .by{margin:0;color:var(--gold);letter-spacing:.06em;text-transform:uppercase;font-size:.85rem;font-weight:700}
.hero .lead{color:var(--soft)}
.hero figure{margin:0}
.hero img{width:100%;height:auto;border-radius:6px;box-shadow:0 10px 30px rgba(10,43,44,.3)}
@media (max-width:620px){.hero{grid-template-columns:1fr}.hero figure{max-width:190px;order:-1}}

/* seasons path */
.path{list-style:none;padding:0;margin:0;display:grid;gap:.7rem}
.path li a,.path li .locked{display:grid;grid-template-columns:3rem 1fr auto;gap:.9rem;align-items:center;padding:1rem 1.1rem;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);text-decoration:none;color:var(--ink)}
.path li a:hover{border-color:var(--sea-2);box-shadow:0 3px 14px rgba(15,76,74,.12)}
.path .glyph{width:3rem;height:3rem;border-radius:50%;display:grid;place-items:center;background:var(--foam);color:var(--sea)}
.path .glyph svg{width:1.7rem;height:1.7rem}
.path .t{display:block;font-family:"Marcellus",serif;font-size:1.2rem;color:var(--deep)}
.path .d{display:block;color:var(--soft);font-size:.95rem}
.path .locked{opacity:.62}
.badge{font-size:.8rem;font-weight:700;padding:.25rem .6rem;border-radius:999px;background:var(--foam);color:var(--sea);white-space:nowrap}
.badge.done{background:var(--sea);color:#fff}
.badge.soon{background:#ece9e2;color:#6e6a60}
@media (max-width:480px){.path li a,.path li .locked{grid-template-columns:2.4rem 1fr}.path .glyph{width:2.4rem;height:2.4rem}.path .badge{grid-column:2;justify-self:start}}

.bigq{margin-top:2.2rem;background:var(--deep);color:#e9f2ef;border-radius:var(--r);padding:1.4rem 1.5rem}
.bigq h2{color:#fff;margin:0 0 .5rem}
.bigq .q{font-size:1.12rem;font-weight:700;color:#fff;margin:.2rem 0 .8rem}
.bigq p{margin:.5rem 0}

/* reading guide */
.intro{background:var(--foam);border-left:4px solid var(--sea);padding:.9rem 1.1rem;border-radius:0 var(--r) var(--r) 0}
details.box{background:var(--card);border:1px solid var(--line);border-radius:var(--r);margin:1rem 0;padding:0 1.1rem}
details.box summary{cursor:pointer;padding:.9rem 0;font-weight:700;color:var(--sea)}
details.box[open] summary{border-bottom:1px solid var(--line);margin-bottom:.6rem}
.words{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.5rem 1.2rem;padding-bottom:1rem}
.words div{padding:.35rem 0;border-bottom:1px dotted var(--line)}
.words .term{font-weight:700;color:var(--deep)}
.words .def{display:block;color:var(--soft);font-size:.93rem}
.words .mi{font-style:italic}

.stream{margin-top:1.6rem;position:relative}
.stream::before{content:"";position:absolute;left:1.15rem;top:0;bottom:0;width:2px;background:linear-gradient(var(--sea-2),var(--line))}
.para{position:relative;padding-left:3.1rem;margin:0 0 .9rem}
.para .n{position:absolute;left:0;top:.15rem;width:2.3rem;height:2.3rem;border-radius:50%;display:grid;place-items:center;
  background:var(--sea);color:#fff;font-weight:700;font-size:.95rem}
.para .open{margin:.45rem 0 .4rem;color:var(--soft);font-size:.95rem}
.para .open q{font-style:italic;color:var(--ink);quotes:"“" "”"}
.para.minor{margin-bottom:.4rem}
.para.minor .n{background:#fff;color:var(--soft);border:2px solid var(--line);width:2.3rem;height:2.3rem;font-size:.85rem}
.para.minor .open{margin:.55rem 0 .2rem}
.para.minor .tag{font-size:.8rem;color:#857f72;margin-left:.3rem}
.qcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:.9rem 1rem}
.qcard.answered{border-color:var(--sea-2)}
.qtext{margin:0 0 .55rem;font-weight:700}
textarea{width:100%;min-height:4.4rem;padding:.6rem .7rem;border:1px solid #bccbc7;border-radius:8px;font:inherit;line-height:1.45;background:#fbfcfb;resize:vertical}
textarea:focus{outline:2px solid var(--sea-2);outline-offset:1px;background:#fff}
.saved{font-size:.8rem;color:var(--sea-2);height:1rem;margin-top:.2rem}

.after{margin-top:2.6rem}
.after .qcard{margin-bottom:.9rem}
.after .num{display:inline-block;min-width:1.6rem;color:var(--gold);font-weight:700}
.task{color:var(--soft)}
.wcount{display:flex;flex-wrap:wrap;gap:.4rem 1rem;font-size:.9rem;color:var(--soft);margin-top:.35rem}
.wcount b{color:var(--ink)}
.wcount .ok{color:var(--sea-2)}
.used{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.5rem}
.used span{font-size:.82rem;padding:.12rem .55rem;border-radius:999px;background:#eef1ef;color:#8a948f}
.used span.on{background:var(--sea);color:#fff}

.ce-send-block{margin-top:2.4rem}
.next{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.7rem 1rem;margin-top:2rem}
.note{font-size:.88rem;color:var(--soft)}

/* parts with several chapters */
.chap-nav{display:flex;flex-wrap:wrap;gap:.45rem;margin:1.2rem 0 .4rem}
.chip{font-size:.9rem;font-weight:700;padding:.35rem .8rem;border-radius:999px;background:#fff;border:1px solid var(--sea-2);color:var(--sea);text-decoration:none}
.chip.off{border-color:var(--line);color:#8a948f;font-weight:400}
.chapter{margin-top:2.6rem;padding-top:1rem;border-top:3px solid var(--sea);scroll-margin-top:4rem}
.chapter.pending{opacity:.65}
.chap-h{margin-top:.4rem}
.chap-sub{display:block;font-family:"Atkinson Hyperlegible",sans-serif;font-size:1rem;color:var(--soft);margin-top:.25rem}
.chapter h3{margin-top:1.8rem}
#writing{scroll-margin-top:4rem}
.para .open q.noq{quotes:none}
.para.minor{min-height:2.7rem}
.summary{border-top:3px solid var(--gold);padding-top:1rem;scroll-margin-top:4rem}
.summary h2{margin-top:.4rem}
.pgnote{font-size:.9rem;margin-top:-.4rem}