:root{--paper:#FCFBF7;--card:#fff;--ink:#1C1B19;--ink2:#55504a;--ink3:#8a8172;--line:rgba(28,27,25,.12);--red:#BE2B33;--tint:rgba(190,43,51,.06);
 --mk:rgba(190,43,51,.16);--text:"EB Garamond",Palatino,Georgia,serif;--ui:-apple-system,"Helvetica Neue",system-ui,sans-serif;--fs:21px}
html.night{--paper:#171614;--card:#201f1c;--ink:#EAE4D8;--ink2:#EAE4D8;--ink3:#8f877a;--line:rgba(234,228,216,.12);--red:#E0575C;--tint:rgba(224,87,92,.08);--mk:rgba(224,87,92,.25)}
*{box-sizing:border-box}
[hidden]{display:none!important}
.sc{font-variant:small-caps;letter-spacing:.03em}
html,body{background:var(--paper);color:var(--ink)}
body{margin:0;font-family:var(--ui);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
.sp{flex:1}.dim{color:var(--ink3)}
.btn{display:inline-block;font:600 14px var(--ui);padding:8px 16px;border-radius:8px;border:1px solid var(--line);background:var(--card)}
.btn.pri{background:var(--red);border-color:var(--red);color:#fff}
.av{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#d9cfbf;color:#3b342a;font:600 13px var(--ui);flex:none}
.av.xl{width:64px;height:64px;font-size:26px}
.bar{display:block;height:4px;border-radius:2px;background:rgba(128,118,100,.22);overflow:hidden}.bar i{display:block;height:100%;background:var(--red)}

/* wireframe bar */
.wfbar{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:12px;height:38px;padding:0 16px;background:#24211d;color:#ddd;font-size:12.5px}
.wfbar b{color:#fff}.wfbar button{background:#3a352e;color:#eee;padding:4px 8px;border-radius:6px;font-size:12px}
#phoneWrap{position:fixed;inset:0;z-index:80;background:rgba(20,18,16,.75);display:flex;align-items:center;justify-content:center;gap:20px}
#phoneWrap[hidden]{display:none}
.phoneFrame{width:410px;height:min(864px,94vh);border-radius:32px;border:10px solid #111;overflow:hidden;background:#000;box-shadow:0 30px 80px -20px #000}
.phoneFrame iframe{width:100%;height:100%;border:0;background:var(--paper)}
#phoneClose{align-self:flex-start;margin-top:32px;background:#fff;color:#111;padding:8px 12px;border-radius:8px;font-size:13px}

/* top bar */
.top{position:sticky;top:40px;z-index:40;display:flex;align-items:center;gap:16px;height:58px;padding:0 28px;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
body.embed .top{top:0}
.logo{font-family:var(--text);font-size:21px;font-weight:500}
.back{font-size:20px;color:var(--ink2);padding-right:4px}
.crumb{font-family:var(--text);font-size:17px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tabs-top{display:flex;gap:4px;background:rgba(128,118,100,.12);border-radius:8px;padding:4px}
.tabs-top a{padding:8px 16px;border-radius:8px;font-size:13.5px;color:var(--ink2)}.tabs-top a.on{background:var(--card);color:var(--ink);box-shadow:0 1px 2px #0002}
.ib{font-size:16px;color:var(--ink2);padding:8px;display:flex;gap:8px;align-items:center}.kbd{font-size:12px;color:var(--ink3);border:1px solid var(--line);border-radius:5px;padding:4px 4px}
.pbar{position:sticky;
  top:96px;
  z-index:39;
  height:2px}
.pbar i{display:block;
  height:2px;
  width:100%;
  background:var(--red);
  transform-origin:0 50%;
  transform:scaleX(0);
  transition:transform .15s;}

body.embed .pbar{top:56px}
.tabbar{display:none}

main{max-width:1180px;margin:0 auto;padding:0 32px 120px}

/* home */
h1.big{font-family:var(--text);font-weight:600;font-size:44px;margin:32px 0 16px}
.resume{display:flex;gap:24px;align-items:center;padding:24px;border:1px solid var(--line);border-radius:16px;background:var(--card);max-width:720px}
.resume img{width:120px;border-radius:3px;box-shadow:0 12px 24px -12px #0008}
.resume .rt{flex:1}.resume .k{font:600 12px var(--ui);color:var(--red)}
.resume .t{font-family:var(--text);font-size:26px;margin:4px 0}.resume .c{color:var(--ink2);font-size:14px;margin-bottom:12px}
.two{display:grid;grid-template-columns:60px 1fr 42px;align-items:center;gap:8px;font-size:12px;color:var(--ink3);max-width:360px;margin:4px 0}
.resume .btn{margin-top:12px}
.row{margin-top:40px}.row h2{font-family:var(--text);font-weight:600;font-size:28px;margin:0}.row .sub{margin:4px 0 0;color:var(--ink3);font-size:14px}
.rail{display:flex;gap:24px;overflow-x:auto;padding:16px 4px 8px;scroll-snap-type:x mandatory}
.rail .bc{flex:none;width:150px;scroll-snap-align:start}
.bc img{display:block;
  width:100%;
  aspect-ratio:2/3;
  object-fit:cover;
  border-radius:3px;
  box-shadow:0 10px 22px -10px #0007,0 1px 2px #0002;
  transition:transform .2s;}

@media (hover:hover){.bc:hover img{transform:translateY(-3px)}}
.bc .bar{margin-top:8px}.bc .cap{display:block;font-size:13px;color:var(--ink3);margin-top:4px}
.gridb{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:32px 24px;padding-top:16px}
.foot{display:flex;gap:40px;flex-wrap:wrap;align-items:flex-start;margin-top:60px;padding-top:28px;border-top:1px solid var(--line)}
.foot p{margin:4px 0 12px;color:var(--ink2);font-size:14px}.mail{display:flex;gap:8px;flex-wrap:wrap}
.mail input{width:260px;padding:8px 12px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink);font:14px var(--ui)}
.links{margin-left:auto;display:flex;gap:24px;font-size:15px}

/* book page */
.bk{display:flex;gap:44px;margin-top:40px}
.bcv{width:220px;align-self:flex-start;border-radius:4px;box-shadow:0 20px 40px -18px #0009}
.kicker{font:600 12px var(--ui);color:var(--red)}
.bi h1,.readp h1{font-family:var(--text);font-weight:500;font-size:44px;line-height:1.1;margin:8px 0 8px}
.meta{font-size:13.5px;color:var(--ink3)}.pct{color:var(--red)}
.desc{font-family:var(--text);font-size:19px;color:var(--ink2);margin:16px 0}
.bprog{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--ink2);margin:16px 0 16px}.bar.big{height:6px;width:260px}
.chh{font:600 18px var(--ui);margin:44px 0 8px}
.chl{list-style:none;margin:0;padding:0}
.chl li{display:flex;align-items:center;border-bottom:1px solid var(--line)}
.chl li a{flex:1;display:grid;grid-template-columns:42px 1fr 70px 110px;align-items:center;padding:16px 0}
@media (hover:hover){.chl li a:hover .nm{color:var(--red)}}

.chl .num{font:500 13px var(--ui);color:var(--ink3)}.chl .nm{font-family:var(--text);font-size:20px}.chl .mn{font-size:12.5px;color:var(--ink3)}
.chl .pc{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink3)}.mini{width:56px;height:3px;background:rgba(128,118,100,.22);border-radius:2px;overflow:hidden}.mini i{display:block;height:100%;background:var(--red)}
.chl li.done .nm{color:var(--ink2)}.chl li.done .pv{color:var(--red)}.chl li.cur .nm{color:var(--red)}
.st{width:36px;font-size:17px;color:var(--red)}

/* reader */
.readp{max-width:none;padding:0 20px 140px}
.col{max-width:680px;margin:0 auto;padding-top:56px;position:relative}
.ticks{position:fixed;left:32px;top:46%;display:flex;flex-direction:column;gap:8px;z-index:5}
.ticks i{display:block;width:16px;height:2px;background:rgba(128,118,100,.35);cursor:pointer}.ticks i.on{background:var(--ink2)}@media (hover:hover){.ticks i:hover{width:22px}}
.acts{display:flex;gap:28px;padding:12px 0;margin:24px 0 32px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:14px;color:var(--ink2)}
.acts.end{margin:40px 0 24px}
.text p{text-wrap:pretty;
  font-family:var(--text);
  font-size:var(--fs);
  line-height:1.62;
  margin:0 0 1.05em;
  -webkit-hyphens: auto;
  hyphens: auto;
  text-align:justify;
  position:relative;
  color:var(--ink)}

.text p:first-child::first-letter{float:left;font-size:3.3em;line-height:.85;padding:8px 8px 0 0;color:var(--red)}
.text h3{font-family:var(--text);font-weight:600;font-size:24px;margin:1.6em 0 .6em;text-align:center}
.pg{position:absolute;left:-76px;font:500 12px var(--ui);color:var(--ink3);margin-top:8px;user-select:none}
.pg::before{content:"p. " attr(data-p)}
sup.fn{font:700 12px var(--ui);color:var(--red);padding:0 4px;cursor:pointer;line-height:0}
@media (hover:hover){sup.fn:hover{text-decoration:underline}}
.fnpop{position:absolute;z-index:30;padding:16px 16px;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:0 16px 40px -14px #0006;font-family:var(--text);font-size:17px;line-height:1.5;color:var(--ink2)}
.fnpop b{font:700 12px var(--ui);color:var(--red);margin-right:8px}.fnpop .go{display:block;margin-top:8px;font:600 12px var(--ui);color:var(--red);cursor:pointer}
.dots{text-align:center;color:var(--ink3);margin:32px 0}.nh{margin:0 0 12px;font:600 12px var(--ui);color:var(--ink3)}
.notesB{font-family:var(--text);font-size:17px;line-height:1.5;color:var(--ink2);padding-left:24px}.notesB li{margin-bottom:8px}.notesB .back{color:var(--red);font-size:14px;cursor:pointer}
.flash{animation:fl 1.6s}@keyframes fl{0%,40%{background:var(--mk)}100%{background:transparent}}
.mk{background:transparent;border-bottom:2px solid color-mix(in srgb,var(--red) 55%,transparent);cursor:pointer}
.mk.note{background:var(--tint)}
.bub{position:absolute;right:-72px;top:4px;font:600 12px var(--ui);color:var(--ink2);border:1px solid var(--line);border-radius:8px;padding:4px 8px;background:var(--card)}
.selbar{position:absolute;z-index:30;display:flex;gap:4px;padding:4px;background:#1f1d1a;border-radius:8px;box-shadow:0 10px 24px -8px #0008}
.selbar button{color:#f3eee5;font-size:13px;padding:8px 8px;border-radius:6px}@media (hover:hover){.selbar button:hover{background:#3a362f}}
.dock{position:fixed;left:0;right:0;bottom:0;z-index:40;height:60px;display:flex;align-items:center;justify-content:center;gap:56px;background:var(--paper);border-top:1px solid var(--line);font-size:15px;color:var(--ink2)}
.dock .nx{position:absolute;right:24px;font-size:13px;color:var(--ink3);max-width:30vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nextc{display:flex;align-items:center;gap:16px;padding:16px 16px;border:1px solid var(--line);border-radius:12px;font-family:var(--text);font-size:19px;background:var(--card)}
.nextc img{width:40px;border-radius:2px}.nextc .dim{font:12px var(--ui)}
.cms{margin-top:44px}.cms h2{font:600 20px var(--ui);display:flex;align-items:center}.sort{margin-left:auto;font:500 12.5px var(--ui);padding:8px 8px;background:rgba(128,118,100,.12);border-radius:8px}
.write{display:flex;gap:12px;margin:16px 0 28px}.wbox{flex:1;border:1px solid var(--line);border-radius:8px;background:var(--card);padding:8px 12px}
.wbox textarea,.rbox textarea{width:100%;min-height:64px;border:0;outline:0;resize:vertical;background:transparent;color:var(--ink);font:15px var(--ui)}
.wbox .btn{float:right;padding:8px 16px}.wbox::after{content:"";display:block;clear:both}
.wq{margin:0 0 8px;padding:4px 8px;border-left:2px solid var(--red);font-family:var(--text);font-style:italic;color:var(--ink2)}
.cm{display:flex;gap:12px;margin-bottom:24px;font-size:14.5px}.cb{flex:1}.cm p{font-family:var(--text);font-size:18px;line-height:1.5;margin:4px 0 8px}
.cm.sub{margin:16px 0 0}
.quote{margin:8px 0;padding:4px 8px;border-left:2px solid color-mix(in srgb,var(--red) 55%,transparent);font-family:var(--text);font-style:italic;color:var(--ink2);font-size:16px;cursor:pointer}
.ca{display:flex;gap:16px;font-size:12.5px;color:var(--ink3)}.ca .on{color:var(--red)}
.rbox{margin-top:8px;border:1px solid var(--line);border-radius:8px;padding:8px 8px;background:var(--card)}

/* you */
.youhead{display:flex;gap:16px;align-items:center;margin-top:32px}.youhead h1{font-family:var(--text);font-weight:600;font-size:40px;margin:0}
.utabs{display:flex;gap:24px;border-bottom:1px solid var(--line);margin:24px 0 24px}.utabs a{padding:8px 0;font-size:14px;color:var(--ink3)}.utabs a.on{color:var(--ink);border-bottom:2px solid var(--ink)}
.coll{display:grid;grid-template-columns:250px 1fr;gap:36px}
.csearch{width:100%;padding:8px 12px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink);font:14px var(--ui)}
.cgrp{margin-top:20px}.cl{font:600 12px var(--ui);color:var(--ink3);margin-bottom:8px}
.cgrp a{display:flex;align-items:center;gap:8px;padding:8px 8px;border-radius:8px;font-size:13.5px;color:var(--ink2)}.cgrp a span{margin-left:auto;color:var(--ink3);font-size:12px}
.cgrp a.on{background:rgba(128,118,100,.14);color:var(--ink)}.cgrp img{width:18px;border-radius:1px}
.cbook{margin-bottom:24px}.cbook header{display:flex;align-items:center;gap:8px;font-family:var(--text);font-size:20px;padding-bottom:8px;border-bottom:1px solid var(--line)}.cbook header img{width:26px;border-radius:2px}.cbook header .dim{font:12px var(--ui)}
.ci{display:flex;gap:12px;padding:12px 4px;border-bottom:1px solid var(--line)}@media (hover:hover){.ci:hover{background:var(--tint)}}
.ci .ico{color:var(--red);width:18px;flex:none;font-size:14px;padding-top:4px}.ci .ct{flex:1;min-width:0}
.ci q{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-family:var(--text);font-size:18px;line-height:1.4;quotes:none}
.ci .nt{display:block;font-size:13.5px;color:var(--ink2);margin-top:4px}.ci .wh{display:block;font-size:12px;color:var(--ink3);margin-top:4px}
.ci.star .ct{font-family:var(--text);font-size:18px}
.pubp .pf{display:flex;gap:16px;align-items:center;margin:16px 0}.pubp h2{margin:0;font-family:var(--text)}

/* study */
.lead{font-size:15px;margin-top:-8px}
.path{border:1px solid var(--line);border-radius:12px;padding:16px 20px;margin:16px 0;background:var(--card)}
.path header{display:flex;gap:12px;align-items:baseline}.path b{font-family:var(--text);font-size:22px}
.path ol{list-style:none;margin:8px 0 0;padding:0}.path li a{display:flex;align-items:center;gap:12px;padding:8px 0;border-top:1px solid var(--line)}
.path li img{width:28px;border-radius:2px}.path li span{flex:1;font-family:var(--text);font-size:18px}.path li small{display:block;font:12px var(--ui);color:var(--ink3)}.path li .dim{flex:none;font:12px var(--ui)}

/* search */
#search{position:fixed;inset:0;z-index:90;background:rgba(20,18,16,.4);display:flex;justify-content:center;padding-top:12vh}
.sbox{width:min(620px,92vw);background:var(--card);border-radius:12px;box-shadow:0 30px 70px -20px #000a;overflow:hidden;align-self:flex-start}
.sbox input{width:100%;padding:16px 20px;border:0;outline:0;font:20px var(--text);background:transparent;color:var(--ink);border-bottom:1px solid var(--line)}
.sres{max-height:50vh;overflow:auto;padding:8px}.sres p{padding:8px 12px;margin:0;font-size:13.5px}
.sres a{display:flex;gap:12px;align-items:center;padding:8px 12px;border-radius:8px}@media (hover:hover){.sres a:hover{background:var(--tint)}}.sres img{width:26px;border-radius:2px}.sres small{display:block;color:var(--ink3);font:12px var(--ui)}
#toast{position:fixed;left:50%;bottom:80px;transform:translate(-50%,20px);opacity:0;z-index:95;background:#1f1d1a;color:#f3eee5;padding:8px 16px;border-radius:8px;font-size:13.5px;transition:.25s;pointer-events:none}#toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- phone ---------- */
@media (max-width:900px){
 :root{--fs:19px}
 .top{padding:0 16px;gap:8px;height:52px}
 .tabs-top,.kbd,.top .av{display:none}
 .top:not(.rd) .logo{display:none}
 .pbar{top:88px}body.embed .pbar{top:52px}
 main{padding:0 16px 112px}
 h1.big{font-size:40px;margin:16px 0 16px}
 .resume{padding:16px;gap:16px}.resume img{width:84px}.resume .t{font-size:20px}.two{grid-template-columns:52px 1fr 36px}
 .row{margin-top:32px}.row h2{font-size:25px}.rail{gap:16px;margin:0 -16px;padding:12px 16px}.rail .bc{width:140px}
 .gridb{grid-template-columns:repeat(2,1fr);gap:24px 16px}
 .tabbar{display:flex;position:fixed;left:12px;right:12px;bottom:16px;z-index:50;justify-content:space-around;padding:8px 8px;background:var(--card);border-radius:24px;box-shadow:0 8px 24px -8px #0005;font-size:12px;text-align:center;color:var(--ink3)}
 .tabbar a{display:flex;flex-direction:column;align-items:center;gap:4px;padding:4px 8px;border-radius:20px}.tabbar b{font-size:17px;font-weight:400}.tabbar a.on{color:var(--red);background:rgba(128,118,100,.12)}
 .foot{flex-direction:column}.links{margin-left:0}
 .bk{flex-direction:column;align-items:center;text-align:center;gap:20px;margin-top:20px}.bcv{width:170px;align-self:center}.bi h1{font-size:32px}.bprog{justify-content:center}.bar.big{width:180px}
 .chl li a{grid-template-columns:30px 1fr 64px}.chl .mn{display:none}.chl .nm{font-size:18px}
 .readp{padding:0 24px 120px}.col{padding-top:32px}.readp h1{font-size:34px}
 .ticks,.pg,.bub{display:none}
 .acts{gap:20px;font-size:13px}
 .dock{gap:32px;height:56px}.dock .nx{display:none}
 .coll{grid-template-columns:1fr}.cside{display:flex;flex-direction:column}.cgrp{display:flex;gap:8px;overflow-x:auto;margin-top:12px}.cgrp .cl{display:none}.cgrp a{flex:none;border:1px solid var(--line);border-radius:16px;padding:4px 8px}.cgrp a span{margin-left:4px}
 .youhead h1{font-size:30px}
}

/* ---------- v2.1: icons, left rail, wider use of the screen ---------- */
.ic{width:18px;height:18px;vertical-align:-3px;flex:none}
.ic.fill{fill:currentColor}
.siderail{position:fixed;left:0;top:40px;bottom:0;z-index:45;width:76px;display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px 0;border-right:1px solid var(--line);background:var(--paper)}
body.embed .siderail{top:0}
.siderail a{position:relative;display:grid;place-items:center;width:46px;height:46px;border-radius:12px;color:var(--ink2);cursor:pointer}
.siderail a .ic{width:22px;height:22px}
@media (hover:hover){.siderail a:hover,.siderail a.on{background:rgba(128,118,100,.14);color:var(--ink)}}
.siderail a.on{color:var(--red)}
.siderail a span:not(.av){position:absolute;left:56px;white-space:nowrap;background:#1f1d1a;color:#f3eee5;font-size:12px;padding:4px 8px;border-radius:6px;opacity:0;pointer-events:none;transition:.15s}
@media (hover:hover){.siderail a:hover span:not(.av){opacity:1}}
.siderail .mark{color:var(--red);margin-bottom:8px}
body{padding-left:76px}.dock{left:76px}
.top{gap:8px;height:54px}.top .back{display:flex;align-items:center}@media (hover:hover){.crumb:hover{color:var(--ink)}}
.pbar{top:92px}
.only-phone{display:none}
main{max-width:1320px;padding:0 48px 120px}
.ticks{left:112px}
/* home: hero + in progress side by side */
.toprow{display:grid;grid-template-columns:minmax(420px,620px) 1fr;gap:40px;align-items:start}
.toprow .row{margin-top:0}.resume{max-width:none}
.resume .btn .ic,.btn .ic{width:16px;height:16px;margin-right:4px}
.links a{display:inline-flex;gap:8px;align-items:center}
/* book page: info column + chapters in two columns */
.bklay{display:grid;grid-template-columns:300px 1fr;gap:56px;margin-top:36px;align-items:start}
.bk{position:sticky;top:112px;flex-direction:column;gap:20px;margin:0}
.bk .bcv{width:200px}.bi h1{font-size:34px}.bar.big{width:200px}.desc{font-size:17px}
.chh{margin-top:0}.chh .dim{font:400 13px var(--ui);margin-left:8px}
.chl{display:grid;grid-template-columns:1fr 1fr;column-gap:40px}
.chl li a{grid-template-columns:34px 1fr 96px;gap:8px}.chl .nm{font-size:19px;line-height:1.25}.chl .nm .mn{display:block;font:12px var(--ui);color:var(--ink3);margin-top:4px}
.st .ic{width:17px;height:17px}
/* reader: wider measure */
.col{max-width:740px}
.text p{font-size:21.5px}
.acts button,.dock button,.ca button,.selbar button{display:inline-flex;align-items:center;gap:8px}
.dock{gap:60px}.dock .nx{display:inline-flex;align-items:center;gap:8px}
.bub{display:inline-flex;align-items:center;gap:4px;right:-80px}.bub .ic{width:13px;height:13px}
.selbar .ic{width:15px;height:15px}
.ca .ic{width:14px;height:14px}.ca button{gap:4px}.ca .on{color:var(--red)}.ca .on .ic{fill:currentColor}
/* collection: cards across the width */
.cgrp a .ic{width:16px;height:16px}.ci .ico .ic{width:16px;height:16px}
.cbook .items{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:12px;margin-top:12px}
.cbook .ci{border:1px solid var(--line);border-radius:12px;padding:12px 16px;background:var(--card)}
.tabbar .ic{width:20px;height:20px}
@media (max-width:1100px){.toprow{grid-template-columns:1fr}.chl{grid-template-columns:1fr}}
@media (max-width:900px){
 .siderail{display:none}body{padding-left:0}.dock{left:0}.only-phone{display:block}
 main{padding:0 16px 112px}.pbar{top:88px}body.embed .pbar{top:52px}
 .bklay{grid-template-columns:1fr;gap:20px;margin-top:16px}.bk{position:static;align-items:center;text-align:center}
 .tabbar a{gap:4px}
 .cbook .items{grid-template-columns:1fr}
}

@media (max-width:900px){.chl li a{grid-template-columns:28px 1fr 80px}.chl .nm .mn{display:block}}
@media (min-width:1101px) and (max-width:1300px){.chl{grid-template-columns:1fr}}
.toprow>*{min-width:0}
@media (max-width:900px){.toprow{grid-template-columns:1fr}.resume .two{max-width:none}}
@media (max-width:900px){.bk .bcv{width:140px}.bi h1{font-size:30px}.bprog{flex-direction:column;gap:8px}}

/* ---------- v2.2: inline respond / note, share sheet, shared passages, centred home ---------- */
.float{position:absolute;z-index:35;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:0 22px 50px -18px #0007;padding:16px 16px}
.fhead{display:flex;align-items:center;gap:8px;font-size:14px}.fhead .dim{font-size:12.5px}.fhead button{color:var(--ink3);display:flex}
.float blockquote{margin:8px 0;padding:4px 0 4px 12px;border-left:2px solid var(--red);font-family:var(--text);font-style:italic;font-size:16px;line-height:1.45;color:var(--ink2);max-height:5.8em;overflow:hidden}
.float textarea{width:100%;min-height:88px;border:1px solid var(--line);border-radius:8px;padding:8px 12px;background:var(--paper);color:var(--ink);font:15px var(--ui);resize:vertical;outline:0}
.float textarea:focus-visible,.wbox textarea:focus-visible,.rbox textarea:focus-visible,.sbox input:focus-visible,.csearch:focus-visible,.mail input:focus-visible{outline:2px solid color-mix(in srgb,var(--red) 60%,transparent);outline-offset:2px}
.float textarea:focus{border-color:color-mix(in srgb,var(--red) 50%,var(--line))}
.ffoot{display:flex;align-items:center;gap:8px;margin-top:8px}.ffoot .dim{font-size:12px}.ffoot .btn{padding:8px 16px;display:inline-flex;align-items:center;gap:8px}
.fexp{font-size:12.5px;margin:-4px 0 8px}
.shch{display:flex;gap:12px;align-items:center;margin:12px 0;font-family:var(--text);font-size:18px}.shch img{width:44px;border-radius:2px}.shch .dim{font:12.5px var(--ui)}
.slink{display:flex;gap:8px}.slink input{flex:1;min-width:0;padding:8px 8px;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink2);font:12.5px ui-monospace,Menlo,monospace}
.slink .btn{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.sopts{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.sopts a{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--line);border-radius:16px;font-size:13px;color:var(--ink2)}@media (hover:hover){.sopts a:hover{background:var(--tint)}}
.mk.shared{background:rgba(232,190,60,.32);border-bottom-color:transparent}
html.night .mk.shared{background:rgba(232,190,60,.22)}
.mk.note{cursor:pointer}
.fnpop .nb{font-family:var(--text);font-size:17px;color:var(--ink);margin-top:8px}
.sharedban{position:fixed;left:50%;top:104px;transform:translateX(-50%);z-index:41;display:flex;align-items:center;gap:8px;padding:8px 12px 8px 16px;background:#1f1d1a;color:#f3eee5;border-radius:12px;font-size:13.5px;box-shadow:0 10px 30px -10px #0008}
.sharedban button{display:flex;color:#bbb}body.embed .sharedban{top:64px}

main{margin-left:auto;margin-right:auto}
body.embed{padding-left:0}
.wfbar{margin-left:-76px}@media (max-width:900px){.wfbar{margin-left:0}}

/* v2.3 home: two equal blocks, one progress bar, no Start here */
main.home{padding-top:44px}
.toprow{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:stretch}
.toprow .row{display:flex;flex-direction:column;margin-top:0}
.toprow .row h2{margin-bottom:16px}
.toprow .rail{padding-top:0;flex:1;align-items:flex-start}
.row.cont .resume{flex:1;display:flex;align-items:center;gap:28px;padding:20px 24px}
.row.cont .resume img{width:auto;height:225px;aspect-ratio:2/3;object-fit:cover}
.resume .t{font-size:28px;line-height:1.15}.resume .c{margin:8px 0 16px}
.one{display:grid;grid-template-columns:1fr 40px;align-items:center;gap:12px;font-size:12.5px;color:var(--ink3);max-width:320px}
.row h2{font-size:26px}
.row + .row,.toprow + .row{margin-top:56px}
@media (max-width:900px){main.home{padding-top:16px}.toprow{grid-template-columns:1fr;gap:32px}.row.cont .resume img{height:150px}.resume .t{font-size:21px}}
.toprow .row,.toprow .row + .row{margin-top:0}

/* v2.4: progress rings, bigger on big screens */
.ring{position:relative;display:inline-grid;place-items:center;width:var(--s);height:var(--s);flex:none;color:var(--red)}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:2.6}.ring .bg{stroke:rgba(128,118,100,.22)}.ring .fg{stroke:var(--red);stroke-linecap:round}
.ring.zero .bg{stroke:rgba(128,118,100,.28);stroke-dasharray:2 3}
.ring b{position:absolute;font:700 calc(var(--s) * .3) var(--ui);color:var(--ink)}
.ring.done .ic{width:var(--s);height:var(--s)}
.prow{display:flex;align-items:center;gap:12px;margin:4px 0 16px}.prow b{display:block;font:600 14px var(--ui)}.prow small{display:block;font-size:12.5px;color:var(--ink3);margin-top:4px}
.chl .pc{gap:8px;justify-content:flex-end}.chl .pv{min-width:30px;font-size:12px;color:var(--ink3)}
.chl li a{grid-template-columns:34px 1fr 70px}
.bc .cap{display:flex;align-items:center;gap:4px}.bc .cap .ic{width:13px;height:13px}


.ring.done svg{transform:none}.ring .dot{fill:var(--red);stroke:none}.ring .tick{fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
html.night .ring .tick{stroke:var(--paper)}

/* ---------- v2.5 ---------- */
/* warmer, higher-contrast theme */
:root{--paper:#FCFBF7;--card:#FFFFFF;--ink:#1C1B19;--ink2:#3E3730;--ink3:#776B5D;--line:rgba(60,45,30,.13);--red:#BE2B33;--green:#2F7A4A;--amber:#B9741A}
html.night{--paper:#16130F;--card:#1F1B16;--ink:#EFE8DC;--ink2:#EFE8DC;--ink3:#A39887;--line:rgba(239,232,220,.12);--red:#E2585E;--green:#62B07E;--amber:#E0A04A}
.go{color:var(--red)}.fin{color:var(--green)}
.ring.done .dot{fill:var(--green)}
.pcol{font:600 15px var(--ui)}
.bc .cap .ring.done .dot{fill:var(--green)}
/* book page: one column of chapters */
.chl{display:block;max-width:900px}
.chl li a{grid-template-columns:40px 1fr 110px;padding:16px 0}
.chl .nm{font-size:21px}
.chl .pc{gap:8px}.chl .pv{font:600 12.5px var(--ui);min-width:34px;text-align:right}
.bklay{grid-template-columns:280px minmax(0,760px);justify-content:center}
/* reader header: chapter title, book above it */
.top.rd{height:68px}
.hd{display:flex;flex-direction:column;min-width:0}
.hbook{font:600 12px var(--ui);color:var(--ink3)}
@media (hover:hover){.hbook:hover{color:var(--red)}}
.hch{font-family:var(--text);font-size:22px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pbar{top:104px}
/* comments: one card at the end, opens a sheet */
.cms{margin-top:36px}
.ccard{display:block;width:100%;text-align:left;padding:16px 16px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
@media (hover:hover){.ccard:hover{border-color:color-mix(in srgb,var(--red) 35%,var(--line))}}
.cch{display:flex;align-items:center;gap:8px;font-size:15px}.cn{font:600 13px var(--ui);color:var(--ink3)}
.ctop{display:flex;gap:8px;align-items:flex-start;margin-top:8px}.ctt{font-family:var(--text);font-size:17px;line-height:1.45;color:var(--ink2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#sheet{position:fixed;inset:0;z-index:70;background:rgba(20,16,12,0);display:flex;justify-content:center;align-items:flex-end;transition:background .2s}
#sheet.in{background:rgba(20,16,12,.38)}
.shbox{width:min(760px,100%);height:min(78vh,820px);background:var(--card);border-radius:16px 16px 0 0;display:flex;flex-direction:column;transform:translateY(40px);opacity:0;transition:.22s}
#sheet.in .shbox{transform:none;opacity:1}
.shbox header{display:flex;align-items:center;gap:8px;padding:16px 20px;border-bottom:1px solid var(--line);font-size:16px}
.shbox header .sort{margin-left:8px;display:inline-flex;gap:4px;align-items:center}.shbox header button{display:flex;color:var(--ink3)}
.shbody{flex:1;overflow:auto;padding:16px 20px}
.shbox .write{margin:0;padding:12px 20px;border-top:1px solid var(--line)}
.shbox .wbox textarea{min-height:44px;resize:none}
.wbox .btn{display:inline-flex;align-items:center;gap:8px}
.bub{display:none}
/* search */
.sin{display:flex;align-items:center;gap:8px;padding:0 16px;border-bottom:1px solid var(--line)}.sin .ic{color:var(--ink3)}.sin input{border:0}
.sin kbd{font:12px var(--ui);color:var(--ink3);border:1px solid var(--line);border-radius:5px;padding:4px 8px}
.sres a{align-items:flex-start}.sres img{width:30px;margin-top:4px}.sres small{font-size:12px}
.snip{display:block;font-family:var(--text);font-size:16.5px;line-height:1.45;color:var(--ink2);margin-top:4px}.snip mark{background:color-mix(in srgb,var(--red) 16%,transparent);color:inherit;border-radius:2px}
@media (max-width:900px){.top.rd{height:56px}.hch{font-size:18px}.pbar{top:96px}body.embed .pbar{top:56px}.bklay{grid-template-columns:1fr}}

.chl li .pv.fin{color:var(--green)}.chl li .pv.go{color:var(--red)}
.readp .meta{display:flex;align-items:center;gap:8px;font-size:14px}.readp .meta .ic{width:15px;height:15px}
.readp .pct{margin-left:8px;padding:4px 8px;border-radius:12px;background:color-mix(in srgb,var(--red) 10%,transparent);font:600 12.5px var(--ui)}

/* ---------- your collection, option A ---------- */
.khead{display:flex;align-items:center;gap:28px;flex-wrap:wrap;margin:40px 0 32px}
.khead h1{font-family:var(--text);font-weight:600;font-size:40px;margin:0}
.kseg{display:flex;gap:4px;background:rgba(120,105,85,.12);border-radius:12px;padding:4px}
.kseg a{display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:8px;font-size:14px;color:var(--ink2)}
.kseg a .ic{width:17px;height:17px}.kseg a b{font:600 12px var(--ui);color:var(--ink3)}
.kseg a.on{background:var(--card);color:var(--ink);box-shadow:0 1px 3px #0002;font-weight:600}.kseg a.on .ic{color:var(--red)}
.kcovers{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,165px));gap:32px 32px}
.kcv .kimg{position:relative;display:block}.kcv img{display:block;width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:3px;box-shadow:0 12px 24px -12px #0008;transition:transform .2s;}
@media (hover:hover){.kcv:hover img{transform:translateY(-3px)}}
.kcv .badge{position:absolute;right:-8px;top:-8px;min-width:28px;text-align:center;background:var(--red);color:#fff;font:700 13px var(--ui);border-radius:12px;padding:4px 8px;box-shadow:0 3px 8px #0003}
.kcv .kt{display:block;font-family:var(--text);font-size:17px;line-height:1.25;margin-top:8px}
.kbook{display:grid;grid-template-columns:240px minmax(0,760px);gap:56px;justify-content:center;align-items:start}
.kbook aside{position:sticky;top:120px}.kbook aside img{width:180px;border-radius:3px;box-shadow:0 16px 30px -14px #0009;margin-top:16px}
.kbook aside h2{font-family:var(--text);font-weight:500;font-size:26px;line-height:1.15;margin:16px 0 4px}.kbook aside p{margin:0;color:var(--ink3);font-size:14px}
.kback{display:inline-flex;align-items:center;gap:4px;font-size:14px;color:var(--ink3)}@media (hover:hover){.kback:hover{color:var(--red)}}
.kpass h3{font-family:var(--text);font-weight:600;font-size:22px;margin:24px 0 8px;display:flex;align-items:baseline;gap:8px}.kpass h3:first-child{margin-top:0}
.kpass h3 span{font:700 12px var(--ui);color:var(--red)}
.kq{display:flex;gap:16px;width:100%;text-align:left;padding:16px 16px;margin-bottom:8px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
@media (hover:hover){.kq:hover{border-color:color-mix(in srgb,var(--red) 40%,var(--line));box-shadow:0 8px 20px -14px #0006}}
.kq .ico{color:var(--red);flex:none;padding-top:4px}.kq .ico .ic{width:18px;height:18px}
.kq q{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-family:var(--text);font-size:19px;line-height:1.45;quotes:none}
.kq .nt{display:block;margin-top:8px;font-size:14px;color:var(--ink2)}.kq small{display:block;margin-top:8px;font-size:12px;color:var(--ink3)}
.starlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(440px,1fr));gap:12px}
.starrow{display:flex;align-items:center;gap:16px;padding:16px 16px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
@media (hover:hover){.starrow:hover{border-color:color-mix(in srgb,var(--red) 40%,var(--line))}}
.starrow img{width:44px;border-radius:2px;box-shadow:0 4px 10px -6px #0008}.starrow .t{flex:1;font-family:var(--text);font-size:20px;line-height:1.2}
.starrow .t small{display:block;font:13px var(--ui);color:var(--ink3);margin-top:4px}.starrow .pv{font:600 13px var(--ui);min-width:72px}.starrow .pv.go{color:var(--red)}.starrow .pv.fin{color:var(--green)}
.empty{display:flex;align-items:center;gap:8px;color:var(--ink3);font-size:15px;padding:32px 0}
#kmodal{position:fixed;inset:0;z-index:75;background:rgba(20,16,12,.42);display:flex;align-items:center;justify-content:center;padding:20px}
.kmbox{width:min(680px,100%);max-height:86vh;overflow:auto;background:var(--card);border-radius:16px;padding:24px 24px;box-shadow:0 30px 70px -20px #000b}
.kmbox header{display:flex;align-items:center;gap:12px}.kmbox header img{width:34px;border-radius:2px}.kmbox header span{flex:1}.kmbox header b{display:block;font-family:var(--text);font-size:19px;font-weight:500}
.kmbox header small{font-size:12.5px;color:var(--ink3)}.kmbox header button{color:var(--ink3);display:flex}
.kmbox p{font-family:var(--text);
  font-size:19px;
  line-height:1.6;
  -webkit-hyphens: auto;
  hyphens: auto;
  text-align:justify;
  color:var(--ink2);
  margin:16px 0}

.kmbox mark{background:color-mix(in srgb,var(--red) 13%,transparent);color:var(--ink);border-bottom:2px solid color-mix(in srgb,var(--red) 55%,transparent);padding:4px 0}
.knote{display:flex;gap:8px;align-items:center;padding:8px 12px;border-radius:8px;background:var(--tint);font-size:14px;color:var(--ink2);margin-bottom:16px}
.kmbox footer{display:flex;align-items:center;gap:8px}.kmbox .btn{display:inline-flex;align-items:center;gap:8px}.btn.ghost{border-color:transparent;color:var(--ink3)}
@media (max-width:900px){.khead{margin:20px 0 20px;gap:16px}.khead h1{font-size:30px}.kseg{width:100%}.kseg a{flex:1;justify-content:center;padding:8px 8px;font-size:12.5px}.kseg a span{display:none}
 .kcovers{grid-template-columns:repeat(3,1fr);gap:24px 16px}.kcv .kt{font-size:14px}
 .kbook{grid-template-columns:1fr;gap:16px}.kbook aside{position:static;display:grid;grid-template-columns:70px 1fr;column-gap:16px;align-items:center}.kbook aside .kback{grid-column:1/-1}.kbook aside img{width:70px;grid-row:span 2}.kbook aside h2{font-size:20px;margin:12px 0 0}
 .starlist{grid-template-columns:1fr}.starrow .t{font-size:17px}}

/* unslop: bar heights on the 4 px grid */
.wfbar{height:40px}.top{top:40px;height:56px}.top.rd{height:68px}
.pbar{top:96px}.readp ~ .pbar,.top.rd + .pbar{top:108px}
body.embed .top{top:0}body.embed .top.rd + .pbar{top:68px}
.siderail{top:40px}body.embed .siderail{top:0}
.kicker,.hbook,.nh,.cl,.kpass h3 span{font-size:13px;font-weight:600}

/* unslop round 2: bigger type keeps the 740 px column near 75 characters a line (and less text per screen) */
.text p{font-size:24px;line-height:1.6}
@media (max-width:900px){.text p{font-size:19px}}
.dock .nx{max-width:28vw}
.notesB{max-width:640px;font-size:18px}
@media (max-width:900px){.dock .nx{display:none}}
.notesB{max-width:600px}

/* ---------- v2.6: home + library, chapter rings, brand icons, the old search ---------- */
:root{--ink-2:var(--ink2);--ink-3:var(--ink3);--ease:cubic-bezier(.2,.7,.2,1)}
.bring{display:inline-block;width:var(--s);height:var(--s);flex:none}.bring svg{width:100%;height:100%;transform:rotate(-90deg)}
.bring circle{fill:none;stroke-width:5}.bring .on{stroke:var(--red)}.bring .half{stroke:color-mix(in srgb,var(--red) 45%,transparent)}.bring .off{stroke:rgba(120,105,85,.2)}
.social{display:flex;gap:4px;align-items:center}
.social a{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;color:var(--ink2)}
.social a svg,.social a .ic{width:20px;height:20px}
@media (hover:hover){.social a.tg:hover{color:#229ED9;background:rgba(34,158,217,.1)}.social a.rd:hover{color:#FF4500;background:rgba(255,69,0,.08)}.social a.ml:hover{color:var(--red);background:var(--tint)}}
h1.works{font-family:var(--text);font-weight:600;font-size:56px;line-height:1.05;margin:36px 0 32px}
.row.prog .rh{display:flex;align-items:center;margin-bottom:12px}.row.prog .rh h2{margin:0}
.pager{margin-left:auto;display:flex;gap:8px}.pager button{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--ink2)}
.toprow .rail{overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory}.toprow .rail::-webkit-scrollbar{display:none}
.toprow .rail .bc{width:calc((100% - 44px) / 3)}
.allw{display:flex;justify-content:center;margin:56px 0 24px}
.allbtn{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border-radius:999px;font-size:15px}
.libhead{display:flex;align-items:baseline;gap:16px;margin:36px 0 28px}.libhead h1{font-family:var(--text);font-weight:600;font-size:48px;margin:0}
.gridb.lib{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:40px 28px}
.lib .lt{display:flex;align-items:flex-start;gap:8px;margin-top:12px}.lib .ltt{flex:1;font-family:var(--text);font-size:17px;line-height:1.2}.lib .ly{display:block;font-size:13px;color:var(--ink3);margin-top:4px}
.mailbox header{align-items:flex-start}.mailbox header small{display:block;margin-top:4px}.mailbox .mail{margin-top:16px}.mailbox .mail input{flex:1}
.prow b.pcol{font-size:16px}
@media (max-width:900px){h1.works{font-size:34px;margin:16px 0 20px}.toprow .rail .bc{width:42%}.social a{width:32px;height:32px}.libhead h1{font-size:34px}.gridb.lib{grid-template-columns:repeat(2,1fr)}}

/* ---------- collections ---------- */
.colp .kback{margin-top:28px}
.csearch2{display:flex;align-items:center;gap:12px;max-width:900px;height:56px;padding:0 20px;border:1px solid var(--line);border-radius:999px;background:var(--card);margin:0 0 32px}
.csearch2 .ic{color:var(--red);width:20px;height:20px}.csearch2 input{flex:1;border:0;outline:0;background:none;font:20px var(--text);color:var(--ink)}
.csearch2 input::placeholder{color:var(--ink3);font-style:italic}.csearch2 .clr{display:flex;color:var(--ink3)}
.ccols{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px}
.ccol{display:flex;flex-direction:column;gap:8px;padding:16px;border:1px solid var(--line);border-radius:16px;background:var(--card);text-align:left;min-height:236px}
@media (hover:hover){.ccol:hover{border-color:color-mix(in srgb,var(--red) 40%,var(--line));box-shadow:0 12px 28px -18px #0007}}
.cstack{display:flex;height:120px;align-items:flex-end;margin-bottom:8px}
.cstack img{height:112px;aspect-ratio:2/3;object-fit:cover;border-radius:2px;box-shadow:0 8px 16px -8px #0008;margin-right:-28px}
.cstack img:nth-child(2){transform:translateY(-4px)}.cstack img:nth-child(3){transform:translateY(-8px)}
.cempty{display:grid;place-items:center;width:76px;height:112px;border:1px dashed var(--line);border-radius:4px;color:var(--ink3)}
.cname{font-family:var(--text);font-size:22px;line-height:1.2}
.ccount{display:flex;gap:12px;font-size:13px;color:var(--ink3)}.ccount span{display:inline-flex;align-items:center;gap:4px}.ccount .ic{width:14px;height:14px}
.ccol.allsaved .cname{color:var(--red)}
.ccol.newc{align-items:center;justify-content:center;border-style:dashed;color:var(--ink3);font-size:15px}.ccol.newc .ic{width:24px;height:24px}
.ccol.newc.editing{justify-content:center;gap:12px}.ccol.newc input{width:100%;padding:8px 12px;border:1px solid var(--line);border-radius:8px;font:18px var(--text);background:var(--paper);color:var(--ink)}
.chead{display:flex;align-items:center;gap:8px;margin:12px 0 20px}.chead h1{font-family:var(--text);font-weight:600;font-size:44px;margin:0}
.renf{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.renf input{font:600 36px var(--text);padding:4px 12px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink)}
.colp .kseg{display:inline-flex;margin-bottom:24px}
.citems{display:flex;flex-direction:column;gap:12px;max-width:820px}
.ci2{display:flex;flex-direction:column;gap:8px;width:100%;text-align:left;padding:16px 20px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
@media (hover:hover){.ci2:hover{border-color:color-mix(in srgb,var(--red) 40%,var(--line))}}
.ci2.pass q{font-family:var(--text);font-size:20px;line-height:1.55;quotes:none;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.from{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--ink3)}.from .ic{width:14px;height:14px;color:var(--red)}
.tags{display:flex;gap:6px;flex-wrap:wrap}.tag{font-size:12px;padding:2px 8px;border-radius:999px;background:var(--tint);color:var(--red)}
.ci2.chap{flex-direction:row;align-items:center;gap:16px}.ci2.chap img{width:44px;border-radius:2px;box-shadow:0 4px 10px -6px #0008}
.ct2{flex:1;display:flex;flex-direction:column;gap:4px}.ci2.chap b{font-family:var(--text);font-weight:500;font-size:21px}
.ci2.com{flex-direction:row;gap:12px}.who{font-weight:600;font-size:14px}.cq{font-family:var(--text);font-style:italic;color:var(--ink2);border-left:2px solid color-mix(in srgb,var(--red) 55%,transparent);padding-left:8px}
.ctx{font-family:var(--text);font-size:18px;line-height:1.45}
.found{margin:0 0 4px}
/* picker */
.picker{position:absolute;z-index:80;width:340px;background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:0 24px 60px -20px #000a;padding:12px}
.picker header{display:flex;align-items:center;gap:8px;padding:4px 4px 12px;border-bottom:1px solid var(--line)}.picker header .ic{color:var(--green)}.picker header .dim{font-size:13px}
.picker header button{display:flex;color:var(--ink3)}
.plist{display:flex;flex-direction:column;padding:8px 0;max-height:240px;overflow:auto}
.prow2{display:flex;align-items:center;gap:12px;padding:8px;border-radius:8px;text-align:left}
@media (hover:hover){.prow2:hover{background:var(--tint)}}
.chk{display:grid;place-items:center;width:20px;height:20px;border:1.5px solid var(--line);border-radius:6px;color:transparent}.chk .ic{width:14px;height:14px}
.prow2.on .chk{background:var(--red);border-color:var(--red);color:#fff}
.pn{flex:1;font-family:var(--text);font-size:18px}.pc2{font-size:12px;color:var(--ink3)}
.pnew{display:flex;align-items:center;gap:12px;padding:8px;border-top:1px solid var(--line)}.pnew .ic{width:18px;height:18px;color:var(--ink3)}
.pnew input{flex:1;border:0;outline:0;background:none;font:17px var(--text);color:var(--ink)}
.picker footer{display:flex;align-items:center;gap:8px;padding-top:8px}
#toast.withlink a{color:#fff;font-weight:600;text-decoration:underline;margin-left:8px;pointer-events:auto}#toast.withlink{pointer-events:auto}
@media (max-width:900px){.ccols{grid-template-columns:1fr 1fr;gap:12px}.ccol{min-height:200px;padding:12px}.cstack img{height:84px}.cname{font-size:18px}.chead h1{font-size:30px}.picker{width:calc(100vw - 24px)}}
.hlt{background:linear-gradient(transparent 58%,color-mix(in srgb,var(--red) 16%,transparent) 58%);-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* ---------- home: everything on one screen ---------- */
main.home{max-width:none;padding:0;height:var(--avail,calc(100vh - 96px));display:flex;flex-direction:column;overflow:hidden}
.mast{position:relative;flex:0 0 40%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;background:#8F1F25;color:#FCF6EC;overflow:hidden}
html.night .mast{background:#5A1418}
.mast::before{content:"";position:absolute;inset:0;background:url("icons/great-triad.webp") center 40%/auto 90% no-repeat;opacity:.06;filter:brightness(0) invert(1)}
.mastin{position:relative;padding-bottom:40px}
.ess{font-family:var(--text);font-style:italic;font-size:clamp(18px,2.2vh,26px);opacity:.9}
.rg{font-family:var(--text);font-weight:500;font-size:clamp(48px,9vh,104px);line-height:1;margin:4px 0 8px}
.yrs{font-family:var(--text);font-size:16px;opacity:.75;letter-spacing:.08em}
.band{position:absolute;left:0;right:0;bottom:12px;height:36px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.bandrun{display:flex;gap:44px;width:max-content;animation:drift 90s linear infinite}
.bandrun i{display:block;width:36px;height:36px;background:#FCF6EC;opacity:.5;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
@keyframes drift{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.bandrun{animation:none}}
.below{flex:1;min-height:0;width:100%;max-width:1320px;margin:0 auto;padding:24px 48px 24px;--cov:calc(var(--avail) * .6 - 132px)}
.toprow.big{height:100%;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:stretch}
.toprow.big .row{min-height:0}
.toprow.big .row h2{font-size:28px;margin:0 0 12px}
.row.prog .rh{margin-bottom:12px}.row.prog .rh h2{margin:0}
.alllink{display:inline-flex;align-items:center;gap:6px;margin-left:16px;font-size:14px;color:var(--red);font-weight:600}.alllink .ic{width:16px;height:16px}
.toprow.big .row.cont .resume{flex:1;min-height:0;padding:20px 24px;gap:28px;border-radius:20px}
.toprow.big .row.cont .resume img{height:var(--cov);width:auto}
.toprow.big .resume .t{font-size:clamp(22px,3.4vh,34px);line-height:1.1}.toprow.big .resume .c{font-size:15px;margin:6px 0 16px}
.toprow.big .resume .btn{height:44px;padding:0 20px;display:inline-flex;align-items:center;gap:8px}
.toprow.big .rail{flex:1;min-height:0;align-items:flex-start}
.toprow.big .rail .bc{width:auto;flex:0 0 auto}
.toprow.big .rail .bc img{height:var(--cov);width:auto}
@media (max-width:900px){main.home{height:auto;overflow:visible}.mast{flex:none;height:42vh}.below{padding:20px 18px 100px;--cov:200px}.toprow.big{grid-template-columns:1fr}.toprow.big .rail .bc img{height:180px}}
.toprow.big .rail{gap:20px}
.toprow.big .rail .bc{flex:0 0 calc((100% - 40px) / 3);min-width:0}
.toprow.big .rail .bc img{width:auto;max-width:100%;height:var(--cov);max-height:var(--cov);aspect-ratio:2/3;object-fit:cover}
@supports (width:1cqw){.toprow.big .row.prog{container-type:inline-size}.toprow.big .rail .bc img{height:min(var(--cov),calc((100cqw - 40px) / 3 * 1.5))}}

/* ---------- v2.7 ---------- */
/* home opening: paper, no line above, symbols still */
main.home .mast{background:transparent;color:var(--ink)}
main.home .mast::before{display:none}
body:has(main.home) .top{border-bottom-color:transparent}
.mast .ess{color:var(--ink2)}.mast .yrs{color:var(--red);opacity:1}
.mast .rg{font-size:clamp(56px,10vh,120px)}
.mastin{padding-bottom:12px}
.syms{display:flex;justify-content:center;flex-wrap:wrap;gap:20px;max-width:1100px;margin:0 auto;padding:0 24px}
.syms i{display:block;width:30px;height:30px;background:var(--red);opacity:.75;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
html.night main.home .mast{background:transparent}
/* collection search: top right, ⌘K */
.khead{justify-content:space-between}
.csearch3{display:flex;align-items:center;gap:8px;height:40px;padding:0 8px 0 14px;border:1px solid var(--line);border-radius:999px;background:var(--card);width:260px}
.csearch3 .ic{width:16px;height:16px;color:var(--ink3)}.csearch3 input{flex:1;min-width:0;border:0;outline:0;background:none;font:15px var(--ui);color:var(--ink)}
.csearch3 kbd{font:12px var(--ui);color:var(--ink3);border:1px solid var(--line);border-radius:6px;padding:1px 6px}
.csearch3:focus-within{border-color:color-mix(in srgb,var(--red) 50%,var(--line))}
.found-q{display:flex;align-items:center;gap:8px;font-family:var(--text);font-size:20px;margin:0 0 16px}.found-q a{display:flex;color:var(--ink3)}
/* collection cards: covers fan out from the centre */
.ccols{grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:24px}
.ccol{min-height:0;padding:20px;gap:8px}
.cstack{position:relative;display:block;height:clamp(170px,22vh,240px);margin:4px 0 16px}
.cstack img{position:absolute;left:50%;bottom:0;height:var(--h);width:auto;aspect-ratio:2/3;margin:0;object-fit:cover;border-radius:3px;
  box-shadow:0 10px 22px -10px #0009;transform:translateX(-50%) translateX(calc(var(--x) * 3)) rotate(var(--r));transform-origin:50% 100%;transition:transform .25s}
@media (hover:hover){.ccol:hover .cstack img{transform:translateX(-50%) translateX(calc(var(--x) * 3.4)) rotate(calc(var(--r) * 1.3))}}
.cstack img:nth-child(2),.cstack img:nth-child(3){transform:translateX(-50%) translateX(calc(var(--x) * 3)) rotate(var(--r))}
.cempty{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:auto;height:auto;border:0;color:var(--ink3)}.cempty .ic{width:40px;height:40px}
.cname,.ccount{justify-content:center;text-align:center}
.cname{font-size:24px}
.ccol.newc{min-height:clamp(260px,30vh,340px)}
/* inside a collection: use the width */
.colp .citems{max-width:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(420px,100%),1fr));gap:16px;align-items:start}
.chead{display:flex;align-items:center}
.syms{flex-wrap:nowrap;gap:clamp(8px,1.2vw,20px)}.syms i{width:clamp(18px,1.9vw,30px);height:clamp(18px,1.9vw,30px);flex:none}

/* ---------- v2.8 ---------- */
.kmbox.pq{position:relative;width:min(640px,100%);padding:40px 44px 28px}
.kx{position:absolute;right:16px;top:16px;display:flex;color:var(--ink3)}
.kmbox.pq blockquote{margin:0 0 24px;font-family:var(--text);font-size:28px;line-height:1.45;color:var(--ink);text-align:left}
.kmbox.pq blockquote::before{content:"“";display:block;font-size:64px;line-height:.6;color:var(--red);margin-bottom:12px}
.pqsrc{display:flex;align-items:center;gap:12px;margin-bottom:24px}.pqsrc img{width:36px;border-radius:2px;box-shadow:0 4px 10px -6px #0008}
.pqsrc b{display:block;font-family:var(--text);font-size:19px;font-weight:500}.pqsrc small{font-size:13px;color:var(--ink3)}
.lib .bc{display:flex;flex-direction:column}
.lbar{display:block;height:4px;border-radius:2px;background:rgba(120,105,85,.16);overflow:hidden;margin-top:12px}.lbar i{display:block;height:100%;background:var(--red)}
.lbar.fin i{background:var(--green)}.lbar.zero{background:rgba(120,105,85,.1)}
.lib .ltt{font-family:var(--text);font-size:18px;line-height:1.25;margin-top:10px}
.lib .ly{font-size:13px;color:var(--ink3);margin-top:4px}.lib .ly b{font-weight:600}
.prof{display:flex;align-items:center;gap:20px;margin:40px 0 28px}.prof h1{font-family:var(--text);font-weight:600;font-size:40px;margin:0}
.av.xxl{width:88px;height:88px;font-size:34px}.prof .btn{display:inline-flex;align-items:center;gap:6px}
.pstats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:40px}
.pstats div{padding:20px;border:1px solid var(--line);border-radius:16px;background:var(--card)}.pstats b{display:block;font-family:var(--text);font-size:40px;font-weight:500;color:var(--red)}.pstats span{font-size:14px;color:var(--ink3)}
.ph2{font-family:var(--text);font-weight:600;font-size:28px;margin:32px 0 16px}
.profp .ci2{margin-bottom:12px;max-width:820px}
.siderail a .av{width:32px;height:32px}
@media (max-width:900px){.pstats{grid-template-columns:1fr 1fr}.prof{flex-wrap:wrap}.kmbox.pq{padding:32px 22px 20px}.kmbox.pq blockquote{font-size:22px}}

/* ---------- v2.9 home ---------- */
main.home{height:auto;overflow:visible;display:block}
.fold{height:var(--avail,calc(100vh - 96px));display:flex;flex-direction:column}
main.home .mast{flex:0 0 auto;padding:28px 0 8px}
main.home .mast .rg{font-size:clamp(44px,7vh,76px);margin:2px 0 6px}
main.home .mast .ess{font-size:clamp(16px,2vh,22px)}
main.home .mast .yrs{font-size:14px}
.fold .below{flex:1;min-height:0;--cov:calc(var(--avail) * .78 - 260px)}
.fold .toprow.big{height:100%;align-items:stretch}
.toprow.big .row{display:flex;flex-direction:column;min-height:0}
.toprow.big .row.cont .resume{flex:1;min-height:0;align-items:center}
.toprow.big .row.prog .rail{flex:1;align-items:flex-start}
.cpct{display:inline-flex;align-items:center;gap:6px;font-size:15px;color:var(--ink3);margin:0 0 20px}.cpct .ic{width:16px;height:16px}
.sugg{padding:40px 0 24px}.sugg .rh h2{font-family:var(--text);font-weight:600;font-size:28px;margin:0 0 16px}
.sgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.scard{display:flex;gap:16px;align-items:center;padding:16px;border:1px solid var(--line);border-radius:16px;background:var(--card)}
@media (hover:hover){.scard:hover{border-color:color-mix(in srgb,var(--red) 40%,var(--line))}}
.scard img{width:72px;aspect-ratio:2/3;object-fit:cover;border-radius:2px;box-shadow:0 6px 14px -8px #0008}
.st2 b{display:block;font-family:var(--text);font-weight:500;font-size:19px;line-height:1.2}
.st2 small{display:flex;gap:6px;align-items:flex-start;margin-top:6px;font-size:13px;color:var(--ink3)}.st2 small .ic{width:14px;height:14px;flex:none;margin-top:2px;color:var(--red)}
.allw{margin:32px 0 8px}
main.home.fresh .mast{padding:12vh 0 4vh}
main.home.fresh .mast .rg{font-size:clamp(56px,10vh,110px)}
/* library */
.gridb.lib{align-items:start}
.lib .bc{display:flex;flex-direction:column;justify-content:flex-start}
.lib .ltt{margin-top:10px}.lib .ly{margin-top:4px;display:flex;align-items:center;gap:6px}
.lp{display:inline-flex;align-items:center;gap:4px}.lp .ic{width:13px;height:13px}.lp.fin{color:var(--green)}
@media (max-width:1100px){.sgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.fold{height:auto}.sgrid{grid-template-columns:1fr}}
/* the card and the covers beside it end at the same line */
.fold .toprow.big{align-items:start;height:auto}
.toprow.big .row.cont .resume{flex:none;padding:16px 24px 24px;gap:28px;align-items:stretch}
.toprow.big .row.cont .resume img{height:var(--cov)}
.toprow.big .resume .rt{display:flex;flex-direction:column;justify-content:center}
.fold .below{--cov:clamp(180px,calc(var(--avail) - 330px),420px)}
.fold{height:auto}
.fold .below{padding-bottom:0}
.toprow.big .resume .rt .btn{align-self:flex-start}
.sugg{padding-top:56px}
.scard{flex-direction:row;align-items:flex-start;gap:16px;padding:20px}
.scard img{width:64px}
.st2 b{font-size:18px}
.sgrid{grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr))}
.sgrid{grid-template-columns:repeat(3,minmax(0,1fr))}@media (max-width:1100px){.sgrid{grid-template-columns:1fr}}

/* ---------- v2.10 ---------- */
.sym{display:inline-block;flex:none;width:var(--z);height:var(--z);background:var(--red);-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.topsearch{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 8px 0 12px;margin-right:8px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink3);font-size:14px}
.topsearch .ic{width:16px;height:16px}.topsearch kbd{font:12px var(--ui);border:1px solid var(--line);border-radius:6px;padding:1px 6px}
@media (hover:hover){.topsearch:hover{color:var(--ink);border-color:color-mix(in srgb,var(--red) 40%,var(--line))}}
.top .sp + .topsearch{margin-left:auto}
.pshared{background:rgba(232,190,60,.18);box-shadow:-12px 0 0 rgba(232,190,60,.18),12px 0 0 rgba(232,190,60,.18);border-radius:4px}
/* the search box always fits on screen (the page zoom makes 100vh too tall) */
.finder{--fx-top:max(48px,10vh);max-height:calc(var(--vh,100vh) - var(--fx-top) - 32px)}
.fx-scope{display:flex;justify-content:flex-end;padding:0 20px 8px}
/* collection cards: covers stay inside their card, under the top bar */
.ccol{position:relative;isolation:isolate}
.found{font-size:15px;color:var(--ink3);margin:0 0 12px}
.citems > .empty{grid-column:1/-1}
.pcm{display:flex;align-items:center;gap:20px;margin-top:32px}.pcm .ph2{margin:0}.pcm .btn{display:inline-flex;align-items:center;gap:8px}
.bchips{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 24px}.bchips a{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid var(--line);border-radius:999px;background:var(--card);font-size:14px;color:var(--ink2)}
.bchips a b{font-weight:600;color:var(--ink3);font-size:12px}.bchips a.on{border-color:var(--red);color:var(--red)}
.nextc .sym,.ci2.chap .sym,.pqsrc .sym,.shch .sym,.starrow .sym{margin-right:4px}
.path li .sym{margin-right:4px}

.top .csearch3{height:36px;width:240px;margin-right:8px}
.profp > .kback{margin-top:28px;display:inline-flex}
.pstats a{display:block;padding:20px;border:1px solid var(--line);border-radius:16px;background:var(--card)}.pstats a b{display:block;font-family:var(--text);font-size:40px;font-weight:500;color:var(--red)}.pstats a span{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--ink3)}.pstats a .ic{width:14px;height:14px}
@media (hover:hover){.pstats a:hover{border-color:color-mix(in srgb,var(--red) 40%,var(--line))}}

/* ---------- v2.11 ---------- */
/* chapter title in the reader bar: room for descenders (g, y, p) */
.hch{line-height:1.3;padding-bottom:2px}
.crumb{line-height:1.3;padding-bottom:2px}
.hbook{line-height:1.3}
/* selection bar: the page's paper, not black */
.selbar{background:var(--card);border:1px solid var(--line);box-shadow:0 12px 30px -12px #0006}
.selbar button{color:var(--ink)}.selbar button .ic{color:var(--red)}
@media (hover:hover){.selbar button:hover{background:var(--tint)}}
/* a passage opened from search or a link: the same red as highlights */
.mk.shared,html.night .mk.shared{background:color-mix(in srgb,var(--red) 16%,transparent);border-bottom:2px solid color-mix(in srgb,var(--red) 55%,transparent)}
.pshared{background:color-mix(in srgb,var(--red) 8%,transparent);box-shadow:-12px 0 0 color-mix(in srgb,var(--red) 8%,transparent),12px 0 0 color-mix(in srgb,var(--red) 8%,transparent)}
@keyframes fl{0%,40%{background:color-mix(in srgb,var(--red) 22%,transparent)}100%{background:transparent}}

/* top bar: blends in at the top of the page; once scrolled it is a white bar with a line and a soft shadow */
.top{transition:background .2s,border-color .2s,box-shadow .2s;background:var(--paper);border-bottom:1px solid transparent}
body.scrolled .top{background:color-mix(in srgb,var(--card) 94%,transparent);border-bottom-color:var(--line);box-shadow:0 6px 18px -14px rgba(40,25,10,.35)}
body:has(main.home) .top{border-bottom-color:transparent}
body.scrolled:has(main.home) .top{border-bottom-color:var(--line)}
html.night body.scrolled .top{background:color-mix(in srgb,var(--card) 94%,transparent)}
/* phone: the reader bar keeps its title whole; search and social live in the tab bar / menu */
.hd{flex:1 1 auto}
@media (max-width:900px){.top .social,.top .topsearch,.top .csearch3{display:none}.top .crumb{flex:1 1 auto;min-width:0}}
.wfbar .wflink{color:#f0c9a8;font-size:12px;margin-right:4px;text-decoration:underline}
body.newacct .wfbar{background:#3b1f1f}

/* progress: the line with its % right beside it */
.pline{display:flex;align-items:center;gap:10px;margin-top:12px}
.pline .lbar{flex:1;margin:0}
.pline b{font:600 13px var(--ui);color:var(--red);min-width:0;white-space:nowrap}
.pline.fin b{color:var(--green)}.pline.zero b{display:none}
.bc .pline{margin-top:10px}
.cpct{display:block;width:min(320px,100%);margin:0 0 24px}.cpct .pline{margin-top:0}

/* ======================= v3: the 2026-11-15 review ======================= */
/* top bar: brand icons in their own colours */
.social a.tg{color:#229ED9}.social a.rd{color:#FF4500}.social a.ml{color:var(--ink2)}
@media (hover:hover){.social a.tg:hover{background:rgba(34,158,217,.1)}.social a.rd:hover{background:rgba(255,69,0,.08)}}
/* book search: just the bar and the results */
.fx-field input::placeholder{font-style:normal}
.fx-scope{display:none}
.finder[data-state="idle"] .fx-empty,.finder[data-state="loading"] .fx-empty{display:none}
/* reader: bottom bar */
.dock{gap:8px;justify-content:center;padding:0 16px env(safe-area-inset-bottom);height:calc(64px + env(safe-area-inset-bottom))}
.dock button,.dock .nx{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 14px;border-radius:999px;color:var(--ink2);transition:background .15s,color .15s}
@media (hover:hover){.dock button:hover,.dock .nx:hover{background:var(--tint);color:var(--ink)}.nextc:hover{border-color:color-mix(in srgb,var(--red) 40%,var(--line))}.nextc:hover .ic{transform:translateX(3px)}}
.nextc .ic{transition:transform .15s}
.dock .nx{position:absolute;right:16px;font-size:14px;color:var(--ink3)}.dock .nx span{font-weight:600;color:var(--ink2)}
.acts button{border-radius:8px;padding:4px 8px;margin:-4px -8px}
@media (hover:hover){.acts button:hover{background:var(--tint);color:var(--ink)}}
/* page numbers: readable, and only where the margin has room */
.pg{font-size:13px;left:-84px}
@media (max-width:1180px){.pg{display:none}}
/* footnotes */
sup.fn:focus{outline:none}sup.fn:focus-visible{outline:2px solid color-mix(in srgb,var(--red) 50%,transparent);border-radius:2px}
sup.fn.lit,.notesB li.lit{background:color-mix(in srgb,var(--red) 12%,transparent);border-radius:4px}
.notesB li{padding:2px 6px;margin-left:-6px;transition:background .3s}
.notesB .back{color:var(--red);display:inline-flex;vertical-align:-2px}.notesB .back .ic{width:15px;height:15px}
.fnpop{max-height:min(50vh,420px);overflow:auto;padding:18px 22px 14px;font-size:18px;line-height:1.55}
.fnpop .fnb{color:var(--ink)}
.fnpop .go{display:inline-flex;align-items:center;gap:4px;margin-top:10px;font:600 13px var(--ui);color:var(--red)}.fnpop .go .ic{width:14px;height:14px}
/* marks */
.mk.held{background:color-mix(in srgb,var(--red) 16%,transparent)}
.mnote.side{position:absolute;left:calc(100% + 40px);width:240px;display:flex;gap:8px;padding:10px 12px;border-left:2px solid color-mix(in srgb,var(--red) 50%,transparent);font:14px/1.45 var(--ui);color:var(--ink2);background:var(--card);border-radius:0 8px 8px 0;box-shadow:0 4px 14px -10px #0005}
.mnote .ic{width:14px;height:14px;flex:none;margin-top:2px;color:var(--ink3)}
.mnote.side.on{border-left-color:var(--red);color:var(--ink)}
.mnote.inline{display:flex;gap:8px;margin:-8px 0 20px;padding:10px 12px;border-left:2px solid var(--red);background:var(--tint);font:15px/1.45 var(--ui);color:var(--ink2);border-radius:0 8px 8px 0}
.mnote.inline[hidden]{display:none}
/* comments, in place */
.cms{margin-top:48px;padding-top:24px;border-top:1px solid var(--line)}
.cmh{display:flex;align-items:baseline;gap:10px;margin-bottom:16px}.cmh h2{font:600 22px var(--ui);margin:0}.cmh .cn{font:500 15px var(--ui);color:var(--ink3)}
.cmform{display:flex;align-items:flex-start;gap:12px;margin:0 0 24px}
.cmform textarea{flex:1;min-height:40px;max-height:240px;padding:9px 0;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--ink);font:16px/1.45 var(--ui);resize:none;outline:none;overflow:hidden}
.cmform textarea:focus{border-bottom-color:var(--ink3)}
.cmform.reply{margin:12px 0 0 0}
.ibtn{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:999px;color:var(--ink2);flex:none}
.ibtn .ic{width:18px;height:18px}
@media (hover:hover){.ibtn:hover{background:var(--tint);color:var(--ink)}}
.ibtn.send{color:var(--red)}
.cmlist .cm{display:flex;gap:12px;padding:16px 0;border-top:1px solid var(--line);margin:0}
.cmlist > .cm:first-child{border-top:0}
.cm.sub{border-top:0;padding:12px 0 0}
.cm.focus{background:color-mix(in srgb,var(--red) 6%,transparent);border-radius:10px;padding:16px 12px;margin:0 -12px}
.cmw{display:flex;gap:8px;align-items:baseline;font-size:14px}
.cm p{font-family:var(--text);font-size:18px;line-height:1.5;margin:4px 0 8px}
.cm .quote{display:block;text-align:left;margin:6px 0 2px;padding:2px 0 2px 10px;border-left:2px solid color-mix(in srgb,var(--red) 55%,transparent);font:italic 16px/1.45 var(--text);color:var(--ink2)}
@media (hover:hover){.cm .quote:hover{color:var(--ink)}}
.ca{display:flex;gap:2px;margin-left:-8px}
.ca button{display:inline-flex;align-items:center;gap:4px;height:30px;padding:0 8px;border-radius:999px;font-size:13px;color:var(--ink3)}
.ca .ic{width:15px;height:15px}
@media (hover:hover){.ca button:hover{background:var(--tint);color:var(--ink)}}
.ca button.on{color:var(--red)}.ca .ic.fill{fill:currentColor}
.cmmore{display:inline-flex;align-items:center;gap:6px;margin-top:8px;height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--line);font:600 14px var(--ui);color:var(--ink2)}
@media (hover:hover){.cmmore:hover{background:var(--tint)}}
.cmnone{margin:0}
/* comment / note box: one line that grows, a bin and a send button */
.float.compose{width:min(520px,calc(100vw - 32px));padding:8px 8px 8px 16px;border-radius:999px}
.float.compose form{display:flex;align-items:flex-end;gap:4px}
.float.compose textarea{flex:1;min-height:36px;max-height:200px;padding:8px 0;border:0;outline:0;background:transparent;color:var(--ink);font:16px/1.4 var(--ui);resize:none;overflow:hidden}
.float.compose .fic{display:grid;place-items:center;height:36px;color:var(--ink3)}.float.compose .fic .ic{width:16px;height:16px}
.float.compose:has(textarea[style*="height"]){border-radius:18px}
/* share: a row of icons */
.float.sharebar{display:flex;gap:4px;padding:6px;border-radius:999px;width:auto}
.float.sharebar .sh{display:grid;place-items:center;width:42px;height:42px;border-radius:999px;color:var(--ink2)}
.float.sharebar .sh svg,.float.sharebar .sh .ic{width:20px;height:20px}
.sh.tg{color:#229ED9}.sh.xx{color:var(--ink)}.sh.wa{color:#25D366}.sh.ok{color:var(--green)}
@media (hover:hover){.float.sharebar .sh:hover{background:var(--tint)}}
/* save-to box */
.picker .btn.ghost{color:var(--ink3)}
/* your collection */
.khead{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.csearch3{width:min(320px,100%)}.csearch3 input::placeholder{color:var(--ink3)}
.ccol{overflow:hidden}
.cstack{overflow:hidden;margin:0 -20px 16px;padding:0 20px}
.cstack img{transform:translateX(-50%) translateX(calc(var(--x) * 2.2)) rotate(var(--r))}
.cstack img:nth-child(2),.cstack img:nth-child(3){transform:translateX(-50%) translateX(calc(var(--x) * 2.2)) rotate(var(--r))}
@media (hover:hover){.ccol:hover .cstack img{transform:translateX(-50%) translateX(calc(var(--x) * 2.4)) rotate(calc(var(--r) * 1.15))}}
.ccol.newc .ic{width:40px;height:40px;color:var(--ink3)}
.ccol.newc.editing{position:relative;align-items:stretch;justify-content:center;gap:16px;padding:24px}
.ccol.newc.editing .big{align-self:center;width:48px;height:48px;color:var(--red)}
.ccol.newc.editing input{border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;text-align:center;font:22px var(--text);padding:6px 0;outline:none}
.ccol.newc.editing .go:disabled{opacity:.35;cursor:default}
.ncx{position:absolute;top:8px;right:8px}
.chead{gap:8px;flex-wrap:wrap}
.cname-ed{outline:none;border-bottom:1px dashed transparent;cursor:text;min-width:2ch;max-width:100%;overflow-wrap:anywhere}
@media (hover:hover){.cname-ed:hover{border-bottom-color:var(--line)}}
.cname-ed:focus{border-bottom-color:var(--ink3)}
.colp .citems{display:flex;flex-direction:column;gap:0;max-width:880px;border-top:1px solid var(--line)}
.row2{display:grid;grid-template-columns:28px 1fr 36px;gap:12px;align-items:start;padding:16px 4px;border-bottom:1px solid var(--line);cursor:pointer}
@media (hover:hover){.row2:hover{background:var(--tint)}.row2:hover .rdel{opacity:1}}
.rk{color:var(--red);padding-top:3px}.rk .ic{width:18px;height:18px}
.rb{display:flex;flex-direction:column;gap:4px;min-width:0}
.rtext{font-family:var(--text);font-size:19px;line-height:1.45;color:var(--ink);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.rtext.ch{font-size:20px}
.rnote{display:flex;gap:6px;align-items:center;font-size:14px;color:var(--ink2)}.rnote .ic{width:13px;height:13px}
.rw{font-size:13px;color:var(--ink3)}
.rdel{opacity:.5;color:var(--ink3)}
@media (hover:none){.rdel{opacity:1}}
.kmbox.ask{width:min(460px,100%);padding:24px}.kmbox.ask p{font:18px/1.5 var(--ui);margin:0 0 8px}.kmbox.ask footer{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
/* profile, settings, sign in */
.prof{flex-wrap:wrap}.prof .btn{display:inline-flex;align-items:center;gap:8px}.prof .cnt{font-weight:600;color:var(--ink3)}
.setl{max-width:560px;border-top:1px solid var(--line)}
.setr{display:flex;align-items:center;justify-content:space-between;width:100%;padding:16px 0;border-bottom:1px solid var(--line);font-size:16px;text-align:left}
.setr b{font-weight:500;color:var(--ink2)}.setr.out{justify-content:flex-start;gap:8px;color:var(--red)}
.tog{position:relative;width:44px;height:26px;border-radius:999px;background:rgba(120,105,85,.25);transition:background .2s}.tog i{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0003;transition:transform .2s}
.tog.on{background:var(--red)}.tog.on i{transform:translateX(18px)}
.signin{max-width:420px;margin:12vh auto;text-align:center;display:flex;flex-direction:column;gap:12px}.signin h1{font:600 40px var(--text);margin:0}
/* suggested: the covers, with one line of why */
.sgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.scard{flex-direction:column;align-items:center;gap:12px;padding:0;border:0;background:none;text-align:center}
.scard img{width:min(100%,200px);box-shadow:0 10px 24px -14px #0008}
.scard small{font-size:14px;color:var(--ink3)}
@media (hover:hover){.scard:hover{border:0}.scard:hover img{transform:translateY(-3px)}}
.scard img{transition:transform .2s}
/* tablet widths: give the reading column room, stack the book page */
@media (max-width:1180px){.bklay{grid-template-columns:1fr;gap:24px}.bk{position:static;flex-direction:row;align-items:flex-start;gap:28px}.bk .bcv{width:160px}.ticks{display:none}.mnote.side{display:none}}
@media (max-width:1180px) and (min-width:901px){.readp .col{padding-left:32px;padding-right:32px}}
/* phone */
@media (max-width:900px){
 main{padding-left:20px;padding-right:20px}
 .readp{padding:0 20px 120px}.text p{font-size:19px;line-height:1.65}
 .bk{flex-direction:column;align-items:center;text-align:center}
 .toprow.big .rail{justify-content:flex-start;gap:16px;padding:0 20px;margin:0 -20px}
 .toprow.big .rail .bc{flex:0 0 40%}
 .tabbar a{padding:2px 14px;min-width:0}
 .top .only-phone[data-act=search]{display:grid;place-items:center;width:40px;height:40px;border-radius:999px;border:1px solid var(--line);background:var(--card)}
 .sgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
 .chead h1,.cname-ed{font-size:30px}
 .dock .nx{display:none}
 .float.compose{border-radius:18px}
}
/* phone view in the wireframe bar: always fits the window */
.phoneFrame{height:calc(var(--vh,100vh) - 80px);width:calc((var(--vh,100vh) - 80px) * .47);max-width:420px;max-height:880px}
.row2{width:100%;box-sizing:border-box}
.wfbar{flex-wrap:wrap;height:auto;min-height:40px;overflow:hidden}
/* reading measure on narrower screens: ~65–75 characters a line */
@media (max-width:1180px){.readp .col{max-width:680px}.text p{font-size:21px;line-height:1.65}}
@media (max-width:600px){.text p{font-size:19px}}
/* home on phones and tablets: no fixed one-screen height, the opening sized to its text */
@media (max-width:900px){.fold{height:auto;display:block}main.home .mast{padding:40px 0 24px}.fold .below{--cov:200px}.toprow.big .row.cont .resume img{height:180px!important}}
@media (max-width:900px){main.home .mast{height:auto;min-height:0;padding:32px 0 16px}}
/* phone view: a real phone width (390), scaled down to fit the window instead of squeezed */
.phoneFrame{width:410px!important;height:864px!important;max-height:none;max-width:none;transform:scale(min(1,calc((var(--vh,100vh) - 90px) / 864px)));transform-origin:50% 0}
#phoneWrap{align-items:flex-start;padding-top:40px}
@media (max-width:900px){main.home .toprow.big .rail{padding:4px 20px 8px!important;margin:0 -20px!important;scroll-padding:0 20px}}
.row2.withcover{grid-template-columns:44px 1fr 36px;align-items:center}.rcov{width:44px;aspect-ratio:2/3;object-fit:cover;border-radius:2px;box-shadow:0 2px 6px -2px #0004}
.mini-cover{flex:none;aspect-ratio:2/3;object-fit:cover;border-radius:2px;box-shadow:0 2px 6px -2px #0004}

/* ======================= v4: visitor first, Substack sidebar and article, Medium comments panel (2026-11-15 decisions) ======================= */
/* sidebar: logo + name, big icon + word rows (≥1180); icons with the word under them (900–1180, and in the reader) */
@media (min-width:901px){
 body{padding-left:240px}.dock{left:240px}.wfbar{margin-left:-240px}
 .siderail{width:240px;align-items:stretch;gap:2px;padding:18px 14px 16px}
 .siderail .brand{display:flex;align-items:center;gap:10px;height:auto;padding:4px 10px 22px;margin:0;border-radius:0;color:var(--ink);font:500 23px/1.1 var(--text)}
 .siderail .brand img{width:36px;height:36px;object-fit:contain;flex:none}
 .siderail .brand span{position:static!important;opacity:1!important;background:none!important;color:inherit!important;padding:0!important;font:inherit!important;white-space:nowrap}
 .siderail a:not(.brand){display:flex;align-items:center;justify-content:flex-start;gap:14px;width:auto;height:50px;padding:0 12px;border-radius:10px;color:var(--ink2);font:400 17px var(--ui)}
 .siderail a .ic{width:24px;height:24px}
 .siderail a span:not(.av){position:static;opacity:1;background:none;color:inherit;font:inherit;padding:0;pointer-events:none;white-space:nowrap}
 .siderail a.on{color:var(--ink);font-weight:600;background:rgba(128,118,100,.12)}
 .siderail a .av{width:28px;height:28px;font-size:13px}
 .siderail a.quiet{height:42px;color:var(--ink3);font-size:15px}.siderail a.quiet .ic{width:20px;height:20px}
 .sbsign{height:44px;margin:6px 4px 2px;border:1px solid var(--line);border-radius:999px;background:var(--card);font:600 15px var(--ui);color:var(--ink)}
 @media (hover:hover){.sbsign:hover{border-color:var(--ink3)}}
 body.compact{padding-left:88px}body.compact .dock{left:88px}body.compact .wfbar{margin-left:-88px}
 body.compact .siderail{width:88px;padding:14px 6px 12px}
 body.compact .siderail .brand{justify-content:center;padding:4px 0 16px}body.compact .siderail .brand span{display:none}
 body.compact .siderail a:not(.brand){flex-direction:column;justify-content:center;gap:5px;height:66px;padding:0 2px;font-size:12px}
 body.compact .siderail a.quiet{height:58px;font-size:12px}
 body.compact .sbsign{height:auto;padding:8px 2px;margin:4px 2px;font-size:12px}
 body.onboarding{padding-left:0}body.onboarding .wfbar{margin-left:0}
}
.siderail a .av{flex:none}
/* top bar */
.top .logo{display:none}
.topsearch kbd{display:none}
@media (hover:hover){.topsearch:hover{border-color:var(--ink3)}}
@media (max-width:900px){
 .top:not(.rd) .logo{display:flex;align-items:center;gap:8px;font:500 20px var(--text);color:var(--ink);white-space:nowrap}
 .top .logo img{width:30px;height:30px;object-fit:contain}
 .top .psign{display:inline-flex;align-items:center;height:36px;padding:0 14px;border-radius:999px;font-size:14px}
 .top .pme{display:flex}
 .top .social{display:none}
}
/* home: the name, the search field, then rows of big covers */
main.home{max-width:1320px;height:auto;overflow:visible;display:block;padding:0 48px 64px;--covh:clamp(180px,calc(var(--vh,900px) - 560px),300px)}
main.home .mast{position:static;flex:none;display:block;height:auto;padding:28px 0 4px;text-align:center;background:none;color:var(--ink)}
main.home .mast .ess{font:italic 400 32px/1.2 var(--text);color:var(--ink2);opacity:1}
main.home .mast .rg{font:500 88px/1 var(--text);margin:6px 0 10px}
main.home .mast .yrs{font:400 22px/1.2 var(--text);letter-spacing:.08em;color:var(--red);opacity:1}
.hsearch{display:flex;align-items:center;gap:12px;width:min(620px,100%);height:56px;margin:26px auto 0;padding:0 22px;border:1px solid color-mix(in srgb,var(--ink) 22%,transparent);border-radius:999px;background:var(--card);color:var(--ink3);cursor:text}
.hsearch .ic{width:20px;height:20px}
.hsearch input{flex:1;min-width:0;height:100%;border:0;outline:0;background:none;font:18px var(--ui);color:var(--ink);-webkit-appearance:none;appearance:none}
.hsearch input::placeholder{color:var(--ink3);font-style:normal}
.hsearch input::-webkit-search-cancel-button{display:none}
main.home .below{max-width:none;margin:0;padding:0}
.crow{margin-top:34px}
.crow .rh,.row .rh{display:flex;align-items:center;gap:16px;margin-bottom:14px}
.crow h2,main.home .row h2{font:600 28px/1.2 var(--text);margin:0}
.alllink{display:inline-flex;margin-left:0;font:600 14px var(--ui);color:var(--ink2);text-decoration:underline;text-underline-offset:3px}
.pager{margin-left:auto;display:flex;gap:8px}
.pager button{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--ink2)}
@media (hover:hover){.pager button:hover{border-color:var(--ink3);color:var(--ink)}}
.crow .rail{display:flex;gap:24px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory;padding:4px 2px 14px;margin:0}
.crow .rail::-webkit-scrollbar{display:none}
.crow .bc{flex:none;width:auto;scroll-snap-align:start}
.crow .bc img{height:var(--covh);width:auto;aspect-ratio:2/3}
main.home .toprow{margin-top:34px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start}
main.home .toprow.tr1{grid-template-columns:minmax(0,680px)}
main.home .toprow .row{margin:0;display:flex;flex-direction:column}
main.home .row.cont .resume{flex:none;display:flex;align-items:stretch;gap:28px;padding:20px 24px;border-radius:16px}
main.home .row.cont .resume img{width:auto;height:min(var(--covh),240px);aspect-ratio:2/3;object-fit:cover}
main.home .resume .rt{display:flex;flex-direction:column;justify-content:center}
main.home .resume .t{font:500 30px/1.15 var(--text)}
main.home .resume .btn{align-self:flex-start;height:44px;padding:0 26px;display:inline-flex;align-items:center;border-radius:999px;font-size:15px}
main.home .toprow .rail{display:flex;gap:20px;overflow-x:auto;scrollbar-width:none;padding:0;margin:0}
main.home .toprow .rail::-webkit-scrollbar{display:none}
main.home .toprow .rail .bc{flex:0 0 calc((100% - 40px) / 3);min-width:0}
main.home .toprow .rail .bc img{width:100%;height:auto}
@media (max-width:1100px) and (min-width:901px){main.home .toprow{grid-template-columns:1fr}}
@media (max-width:900px){
 main.home{padding:0 20px 112px;--covh:200px}
 main.home .mast{padding:20px 0 0}
 main.home .mast .ess{font-size:22px}main.home .mast .rg{font-size:54px;margin:4px 0 6px}main.home .mast .yrs{font-size:16px}
 .hsearch{height:50px;margin-top:20px;padding:0 18px}.hsearch input{font-size:17px}
 .crow{margin-top:26px}.crow h2,main.home .row h2{font-size:24px}
 .crow .rail{gap:16px;margin:0 -20px;padding:4px 20px 12px;scroll-padding:0 20px}
 main.home .toprow{grid-template-columns:1fr;gap:28px;margin-top:26px}
 main.home .row.cont .resume{padding:16px;gap:16px}main.home .row.cont .resume img{height:150px!important}main.home .resume .t{font-size:21px}
 main.home .toprow .rail{margin:0 -20px;padding:0 20px}main.home .toprow .rail .bc{flex:0 0 40%}
}
/* progress: one thin line with the % beside it, in ink; "Read" when finished */
.lbar i,.lbar.fin i{background:var(--ink2)}
.pline b,.pline.fin b{color:var(--ink2)}
.bprog{display:block;margin:4px 0 20px}.bprog .pline{width:min(240px,100%);margin:0}
.bprog .dim{font-size:14px}
.chl li a{grid-template-columns:40px 1fr 130px}
.chl .pc{justify-content:flex-end}.chl .pc .pline{width:120px;margin:0}
.chl li.cur .nm,.chl li.done .pv{color:inherit}
@media (hover:hover){.chl li a:hover .nm{color:var(--ink)}}
@media (max-width:900px){.chl li a{grid-template-columns:28px 1fr 96px}.chl .pc .pline{width:90px}.bprog .pline{margin:0 auto}}
.st{color:var(--ink2)}
/* reader: the title block like a Substack article */
.ahead{margin:4px 0 36px;padding-bottom:28px;border-bottom:1px solid var(--line)}
.kick{display:inline-block;font:600 13px/1.3 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
@media (hover:hover){.kick:hover{color:var(--ink)}}
.readp .ahead h1{font:700 48px/1.1 var(--text);margin:12px 0 10px;letter-spacing:-.005em}
.subt{font:400 21px/1.3 var(--text);color:var(--ink3)}
.byline{display:flex;align-items:center;gap:12px;margin-top:24px}
.byline img{width:34px;height:51px;object-fit:cover;border-radius:2px;box-shadow:0 2px 6px -2px #0004}
.byline b{display:block;font:600 13px/1.3 var(--ui);letter-spacing:.07em;text-transform:uppercase}
.byline small{display:block;font:500 12.5px/1.3 var(--ui);letter-spacing:.07em;color:var(--ink3);margin-top:3px}
@media (max-width:900px){.readp .ahead h1{font-size:34px}.subt{font-size:18px}.ahead{margin-bottom:28px;padding-bottom:22px}}
/* reader: bottom bar, like Substack's: like, comment, save, share across the text column; Next chapter on its own */
.dock{display:flex;justify-content:center;align-items:center;gap:0;padding:0 20px env(safe-area-inset-bottom)}
.dock .dk{flex:0 1 740px;min-width:0;display:flex;align-items:center;justify-content:space-between}
@media (max-width:1180px){.dock .dk{flex-basis:680px}}
.dock .dk button{min-width:44px;justify-content:center}
.dock button.on{color:var(--red)}.dock .ic.fill{fill:currentColor}
.dock .nx{position:absolute;right:16px;top:12px;display:inline-flex;align-items:center;gap:8px;max-width:calc((100% - 740px) / 2 - 32px);min-width:0;font-size:14px;color:var(--ink3)}
.dock .nx .nxl{flex:none;font-weight:600;color:var(--ink2)}
.dock .nx .nxt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dock .nx .ic{flex:none}
@media (max-width:1240px){.dock .nx{position:static;flex:none;max-width:none;margin-left:8px}.dock .nx .nxt{display:none}.dock .dk{flex:1 1 auto;max-width:680px}}
@media (max-width:900px){.dock .nx{display:inline-flex!important;padding:0 10px}}
/* reader: comment counts beside paragraphs (Medium's highlight responses) and the side panel they open */
.pbub{position:absolute;left:calc(100% + 14px);top:6px;display:inline-flex;align-items:center;gap:4px;height:26px;padding:0 6px;border-radius:999px;font:500 13px var(--ui);color:var(--ink3);text-indent:0}
.pbub .ic{width:16px;height:16px}
@media (hover:hover){.pbub:hover{color:var(--ink);background:var(--tint)}}
@media (max-width:900px){.pbub{position:static;vertical-align:-3px;margin-left:6px;height:22px}}
.mnote.side{left:calc(100% + 60px)}
.cpanel{position:fixed;right:0;top:40px;bottom:0;z-index:72;width:min(420px,100vw);display:flex;flex-direction:column;background:var(--card);border-left:1px solid var(--line);box-shadow:-18px 0 40px -32px #0007}
body.embed .cpanel{top:0}
.cpanel header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 14px 22px;border-bottom:1px solid var(--line)}
.cpanel h2{font:600 22px var(--text);margin:0}
.cpbody{flex:1;min-height:0;overflow:auto;padding:20px 22px}
.cpq{margin:0 0 18px;padding:14px 16px;border:1px solid var(--line);border-radius:10px;font:18px/1.5 var(--text);color:var(--ink);background:var(--paper)}
.cpform{align-items:flex-end;gap:6px;margin:0 0 8px}
.cpform .av{align-self:center}
.cpanel .cmlist .cm:first-child{border-top:1px solid var(--line)}
.cpanel footer{padding:14px 22px;border-top:1px solid var(--line);text-align:center}
.seeall{font:600 14px var(--ui);color:var(--ink2);text-decoration:underline;text-underline-offset:3px}
@media (max-width:900px){.cpanel{top:auto!important;left:0;right:0;width:auto;height:min(78vh,640px);border-left:0;border-radius:16px 16px 0 0;box-shadow:0 -18px 40px -20px #0007}}
/* comments: serif heading like the other headings */
.cmh h2{font:600 26px var(--text)}
/* sign-in box (visitors) and the sign-in page */
.signmodal{z-index:85}
.kmbox.signbox{position:relative;width:min(400px,100%);padding:36px 32px 28px;display:flex;flex-direction:column;align-items:stretch;gap:12px;text-align:center}
.obseal{width:44px;height:44px;object-fit:contain;align-self:center}
.signbox h1,.signin h1{font:600 32px var(--text);margin:4px 0 12px}
.signbox .btn,.signin .btn{height:46px;border-radius:999px;font-size:15px}
.signin{max-width:400px;margin:12vh auto;display:flex;flex-direction:column;align-items:stretch;gap:12px;text-align:center}
/* topics after Create account */
.onboard{max-width:860px;margin:0 auto;padding:48px 28px 80px}
.onboard h1{font:500 46px/1.15 var(--text);margin:14px 0 6px}
.onboard .obseal{align-self:auto;display:block}
.onboard section{margin-top:30px}
.onboard h5{font:600 13px var(--ui);letter-spacing:.07em;text-transform:uppercase;color:var(--ink3);margin:0 0 12px}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{height:40px;padding:0 17px;border:1px solid var(--line);border-radius:999px;background:var(--card);font:15px var(--ui);color:var(--ink)}
.chip.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
@media (hover:hover){.chip:not(.on):hover{border-color:var(--ink3)}}
.onboard footer{display:flex;justify-content:flex-end;gap:12px;margin-top:40px}
.onboard .btn{height:46px;padding:0 26px;border-radius:999px;font-size:15px}
.btn:disabled{opacity:.4;cursor:default}
@media (max-width:900px){.onboard{padding:28px 20px 60px}.onboard h1{font-size:34px}.chip{height:38px;padding:0 14px}}
/* New collection, like Medium's Create list */
.kmbox.newcolbox{width:min(480px,100%);padding:28px;display:flex;flex-direction:column;gap:16px}
.newcolbox h2{font:600 26px var(--text);margin:0 0 4px}
.newcolbox input{border:0;border-bottom:1px solid var(--line);border-radius:0;background:none;padding:10px 0;font:18px var(--ui);color:var(--ink);outline:none}
.newcolbox input:focus{border-bottom-color:var(--ink3)}
.adddesc{align-self:flex-start;font:15px var(--ui);color:var(--ink2);text-decoration:underline;text-underline-offset:3px}
.privrow{display:flex;align-items:center;justify-content:space-between;font:16px var(--ui)}
.newcolbox footer{display:flex;align-items:center;gap:8px;margin-top:6px}
.tog.on{background:var(--ink)}
.ccol.newc{border-style:solid}
/* save box */
.picker header .ic{color:var(--ink)}
.prow2.on .chk{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.pnew{gap:8px;padding:4px 4px}.pnew .ibtn{width:32px;height:32px}
/* saved rows: every kind with its book's cover */
.row2.withcover{grid-template-columns:64px 1fr 36px;align-items:center}
.rcov{width:64px}
/* neutral borders: no coloured boxes */
@media (hover:hover){.ccol:hover,.nextc:hover,.ci2:hover,.scard:hover,.starrow:hover,.kq:hover{border-color:var(--ink3)}}
.csearch3:focus-within{border-color:var(--ink3)}
.mail input:focus-visible,.float textarea:focus-visible,.csearch:focus-visible{outline:none;border-color:var(--ink3)}
.bchips a.on{border-color:var(--ink);color:var(--ink)}
.ccol.allsaved .cname{color:inherit}
/* wireframe bar: the three accounts */
.acctsw{display:inline-flex;align-items:center;gap:2px;background:#3a352e;border-radius:7px;padding:2px}
.acctsw span{padding:0 6px;color:#bbb}
.wfbar .acctsw button{background:none;padding:3px 8px}.wfbar .acctsw button.on{background:#f0e6d6;color:#1c1b19}
body.acct-visitor .wfbar{background:#1f2a24}
/* search: best match, then Passages · Chapters · Books */
.finder{width:min(760px,calc(100vw - 32px))}
.fx-answer,.fx-chapters,.fx-scope,.fx-foot,.fx-esc{display:none!important}
.fx-field{border-bottom:1px solid var(--line)}
.fx-best{flex:none;padding:14px 22px 4px}
.fx-lab{font:600 12px var(--ui);letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);margin-bottom:8px}
.fx-bestc{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink)}
@media (hover:hover){.fx-bestc:hover{border-color:var(--ink3)}}
.fx-bcov{width:64px;aspect-ratio:2/3;object-fit:cover;border-radius:2px;box-shadow:0 6px 14px -10px #0009}
.fx-bcov.sm{width:40px}
.fx-bt{font:500 23px/1.2 var(--text)}
.fx-bs{font:12.5px/1.4 var(--ui);color:var(--ink3);margin-top:3px}
.fx-bestc.pass .fx-snip{-webkit-line-clamp:2}
.fx-tabs{flex:none;display:flex;gap:26px;margin:10px 22px 0;border-bottom:1px solid var(--line)}
.fx-tab{padding:10px 0 9px;font:15px var(--ui);color:var(--ink3);border-bottom:2px solid transparent;margin-bottom:-1px}
.fx-tab.on{color:var(--ink);font-weight:600;border-bottom-color:var(--ink)}
.fx-list,.fx-chlist,.fx-books{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.fx-list{padding:4px 0 10px}
.fx-item{display:grid;grid-template-columns:40px 1fr;gap:14px;padding:14px 22px;border-bottom:1px solid var(--line)}
.fx-item[aria-selected="true"]::before{display:none}
.fx-icov{width:40px;aspect-ratio:2/3;object-fit:cover;border-radius:2px;margin-top:3px}
.fx-item .fx-meta{display:block;margin:4px 0 0;font:12.5px/1.4 var(--ui);color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fx-item .fx-snip{font-size:17px;line-height:1.5}
.fx-chlist{padding:4px 22px 10px}
.fx-chrow{display:flex;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line);color:var(--ink)}
.fx-ccov{width:34px;aspect-ratio:2/3;object-fit:cover;border-radius:2px;flex:none}
.fx-ct{font:18px/1.3 var(--text)}
@media (hover:hover){.fx-chrow:hover .fx-ct{text-decoration:underline;text-underline-offset:3px}}
.fx-books{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:20px;padding:16px 22px 16px;align-content:start}
.fx-books[hidden],.fx-chlist[hidden],.fx-list[hidden]{display:none}
.fx-bk{display:flex;flex-direction:column;gap:6px;font:14px/1.3 var(--text);text-align:center;color:var(--ink)}
.fx-bk img{width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:2px;box-shadow:0 8px 18px -12px #0009}
.fx-none{margin:16px 0;font:16px var(--ui);color:var(--ink3)}
.fx-books .fx-none{grid-column:1/-1}
@media (max-width:640px){.fx-best{padding:12px 14px 2px}.fx-tabs{margin:8px 14px 0}.fx-item{padding:12px 14px}.fx-chlist{padding:4px 14px}.fx-books{padding:14px;grid-template-columns:repeat(3,1fr);gap:14px}.fx-bt{font-size:20px}}
.signbox .btn,.signin .btn{display:flex;align-items:center;justify-content:center}
.cpanel .cm .quote{display:none}
/* wide screens: the text moves left so the passage stays beside the panel (as on Medium) */
@media (min-width:1181px){body.panel-open main.readp{padding-right:440px}body.panel-open .dock{right:420px}body.panel-open .dock .nx{display:none}}
.mnote.side,.mnote.side.on{border-left-color:var(--ink3)}.mnote.inline{border-left-color:var(--ink3);background:color-mix(in srgb,var(--ink) 4%,transparent)}
.fx-item[aria-selected="true"]{background:color-mix(in srgb,var(--ink) 4%,transparent)}
.cname .lk{width:18px;height:18px;margin-right:8px;vertical-align:-1px;color:var(--ink3)}
.cdesc{display:flex;align-items:center;gap:8px;margin:-8px 0 20px;font:16px var(--ui);color:var(--ink3)}.cdesc .ic{width:16px;height:16px}
.bi .kicker{color:var(--ink3);letter-spacing:.06em}
.bchips a{min-height:40px;padding:4px 14px}.bchips .mini-cover{width:20px!important}
.from .ic{color:var(--ink3)}.cq{border-left-color:var(--line)}
.crow .rail{padding-bottom:30px;margin-bottom:-16px}
@media (max-width:900px){.crow .rail{padding-bottom:26px}}
@media (max-width:1400px) and (min-width:1101px){main.home .row.cont .resume{padding:16px 20px;gap:22px}main.home .resume .t{font-size:24px}main.home .resume .c{margin:4px 0 10px}main.home .cpct{margin-bottom:14px}main.home .resume .btn{height:40px}}
@media (max-width:900px){.top .pme .av{display:inline-grid}}
/* ======================= v5: Hussam's grills of the v4 build (2026-11-15) ======================= */
/* 1. home search: the field takes the typing; the results drop down from it (finder.js drop mode) */
main.home .mast{overflow:visible}main.home .mast .hswrap{position:relative;z-index:60}
.finder.drop{position:absolute;z-index:61;transform:none!important;opacity:1;transition:none;border-radius:14px;box-shadow:0 18px 40px -22px rgba(30,24,16,.35)}
html[data-theme="dark"] .finder.drop{box-shadow:0 18px 40px -22px #000}
.finder.drop .fx-field{display:none}
.finder.drop .fx-best{padding-top:16px}
.finder.drop:is([data-state="idle"],[data-state="loading"]){display:none}
.finder.drop{text-align:left}
/* 2. top-right search: the icon and ⌘K */
.topsearch{gap:6px;height:36px;padding:0 12px 0 11px;margin-right:0}
.topsearch kbd{display:inline;border:0;padding:0;background:none;font:500 13px var(--ui);color:var(--ink3);letter-spacing:.02em}
@media (hover:hover){.topsearch:hover{color:var(--ink);border-color:var(--ink3)}.topsearch:hover kbd{color:var(--ink2)}}
/* 5. night mode in the top bar, beside search */
.top .nightbtn{display:grid;place-items:center;width:36px;height:36px;padding:0;border-radius:50%;color:var(--ink2);flex:none}
.top .nightbtn .ic{width:19px;height:19px}
@media (hover:hover){.top .nightbtn:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 6%,transparent)}}
.top{gap:10px}
/* 3. section label and its link */
.alllink{color:var(--red);text-decoration:none;font-weight:600}
@media (hover:hover){.alllink:hover{text-decoration:underline;text-underline-offset:3px}}
/* 4. reader: the rail is icons only; a visitor's sign-in is a person icon */
@media (min-width:901px){
 body.in-reader.compact{padding-left:72px}body.in-reader.compact .dock{left:72px}body.in-reader.compact .wfbar{margin-left:-72px}
 body.in-reader .siderail{width:72px;padding:14px 0 12px;align-items:center}
 body.in-reader .siderail a span:not(.av){display:none!important}
 body.in-reader .siderail a:not(.brand){width:48px;height:48px;padding:0;gap:0;border-radius:12px;justify-content:center}
 body.in-reader .siderail .brand{width:48px;justify-content:center;padding:4px 0 18px}
 body.in-reader .sbsign.sbicon{display:grid;place-items:center;width:48px;height:48px;margin:4px 0 0;padding:0;border:0;border-radius:12px;background:none;color:var(--ink2)}
 body.in-reader .sbsign.sbicon .ic{width:24px;height:24px}
 @media (hover:hover){body.in-reader .sbsign.sbicon:hover{color:var(--ink);background:rgba(128,118,100,.12)}}
}
/* 9. the logo: aligned with the icons under it, no hover box */
@media (min-width:901px){
 .siderail .brand{width:auto;padding:4px 12px 22px}
 body.compact .siderail .brand{justify-content:center;padding:4px 0 16px}
}
.siderail a.brand,.siderail a.brand:hover,.siderail a.brand.on,.top .logo,.top .logo:hover{background:none!important;box-shadow:none!important}
.siderail a.brand:focus:not(:focus-visible),.top .logo:focus:not(:focus-visible){outline:none}
/* 7. covers are flat: no shadows or shading; a hairline so white covers don't vanish on the paper */
img[src*="covers/"]{box-shadow:0 6px 16px -10px rgba(28,24,18,.35)!important;filter:none!important;outline:1px solid color-mix(in srgb,var(--ink) 12%,transparent);outline-offset:-1px}
/* 8. reader top bar: no book or chapter title until the title block's rule has scrolled under it */
.top.rd .hd{opacity:0;visibility:hidden;transition:opacity .25s,visibility 0s .25s}
body.past-title .top.rd .hd{opacity:1;visibility:visible;transition:opacity .25s}
/* 10. selection bar: icons only */
.selbar{gap:2px;padding:4px}
.selbar button{width:42px;height:40px;padding:0;justify-content:center;gap:0}
.selbar .ic{width:20px;height:20px}.selbar button .ic{color:var(--ink2)}
@media (hover:hover){.selbar button:hover{background:color-mix(in srgb,var(--ink) 6%,transparent)}.selbar button:hover .ic{color:var(--ink)}}
/* 11. Next in the accent; the chapter title beside it neutral */
.dock .nx .nxl{color:var(--red)}
.dock .nx .nxt{color:var(--ink3);font-weight:400}
/* 12. the title block, larger; the author row and the cover clearly bigger */
.readp .ahead{margin:8px 0 40px;padding-bottom:32px}
.readp .kick{font-size:15px;letter-spacing:.08em}
.readp .ahead h1{font-size:58px;margin:14px 0 12px}
.readp .subt{font-size:25px}
.readp .byline{gap:18px;margin-top:30px}
.readp .byline img{width:64px;height:96px;border-radius:2px}
.readp .byline b{font-size:17px;letter-spacing:.08em}
.readp .byline small{font-size:15.5px;margin-top:5px}
@media (max-width:900px){.readp .ahead h1{font-size:40px}.readp .subt{font-size:21px}.readp .byline img{width:56px;height:84px}.readp .byline b{font-size:16px}.readp .byline small{font-size:14.5px}.readp .kick{font-size:13.5px}}
.fx-item{grid-template-columns:40px minmax(0,1fr)}.fx-ib{min-width:0}
/* ======================= v6: the griller's round 4 on v5 (2026-11-15) ======================= */
/* 1. the comment panel sits beside the text at every width above phones; the text column moves left of it */
@media (min-width:901px){body.panel-open main.readp{padding-right:440px}body.panel-open .dock{right:420px}body.panel-open .dock .nx{display:none}}
/* 7. the home field scrolls away under the top bar (it only rises above the page while its results are open) */
main.home .mast .hswrap{z-index:auto}
main.home .mast .hswrap:has(.finder.drop:not([hidden])){z-index:39}
/* 8. results hang flush from the field: one shape, the field's lower corners square off while open */
.finder.drop{background:var(--card);border:1px solid color-mix(in srgb,var(--ink) 22%,transparent);border-top-color:var(--line);border-radius:0 0 18px 18px;box-shadow:none!important}
.hswrap:has(.finder.drop:not([hidden]):is([data-state="results"],[data-state="none"],[data-state="down"])) .hsearch{border-radius:28px 28px 0 0;border-bottom-color:transparent}
@media (max-width:900px){.hswrap:has(.finder.drop:not([hidden]):is([data-state="results"],[data-state="none"],[data-state="down"])) .hsearch{border-radius:25px 25px 0 0}}
/* 9. the Next card's cover */
.nextc .mini-cover{width:56px!important}
/* 12. part headings in the chapter list */
.chl li.part{grid-column:1/-1;display:block;border-bottom:0}
.chl li.part h3{margin:30px 0 4px;font:600 13px/1.3 var(--ui);letter-spacing:.07em;text-transform:uppercase;color:var(--ink3)}
.chl li.part:first-child h3{margin-top:4px}
/* 13. the reading size never drops below the phone's and never jumps (--rd is set with the page scale) */
#text p{font-size:var(--rd,21px)}
@media (min-width:901px){.readp .col{max-width:max(calc(var(--rd,24px) * 31),calc(680px / var(--z,1)))}}
@media (max-width:1180px) and (min-width:901px){.readp .col{padding-left:0;padding-right:0}}
/* 14. the reader top bar stays frosted (the user, 2026-11-15) */
/* 15. the selection is the marks' pink */
::selection{background:color-mix(in srgb,var(--red) 16%,transparent)}
/* 17. share row: brand colours */
.float.sharebar .sh.tg{color:#229ED9}.float.sharebar .sh.wa{color:#25D366}.float.sharebar .sh.xx{color:#000}html.night .float.sharebar .sh.xx{color:#fff}.float.sharebar .sh.ml{color:var(--ink2)}
/* 24. phone top bar: search, night and avatar alike */
@media (max-width:900px){.top .only-phone.psearch[data-act=search],.top .nightbtn,.top .pme{display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:none;color:var(--ink2);box-shadow:none}.top .psearch .ic{width:19px;height:19px}.top .pme .av{width:30px;height:30px;font-size:13px}}

/* covers keep a soft shadow (the user, 2026-11-15; replaces "flat covers") */