@font-face{font-family:'Young Serif';font-weight:400;font-display:swap;src:url(/fonts/young-serif-400.woff2) format('woff2')}
@font-face{font-family:'Literata';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/literata-400-700.woff2) format('woff2')}
@font-face{font-family:'Literata';font-style:italic;font-weight:400 700;font-display:swap;src:url(/fonts/literata-400-700-italic.woff2) format('woff2')}
@font-face{font-family:'Courier Prime';font-weight:400;font-display:swap;src:url(/fonts/courier-prime-400.woff2) format('woff2')}
@font-face{font-family:'Courier Prime';font-weight:700;font-display:swap;src:url(/fonts/courier-prime-700.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-weight:700;font-display:swap;src:url(/fonts/poppins-700.woff2) format('woff2')}

:root{
  --wall:#D9DFD3; --wall-deep:#C8D1C1; --wall-line:#B4BFAC;
  --ink:#1C2230; --ink-soft:#4C5466; --ink-faint:#7A8292;
  --green:#24493C; --green-deep:#122A21; --green-hi:#2F5E4D;
  --paper:#FBF7EC; --paper-edge:#EDE5D0; --rule:#DDD3BB;
  --manila:#EED9A4; --manila-deep:#DCC384;
  --red:#C23A2E; --red-deep:#8E241B; --violet:#4B3B9B;
  --walnut:#5A3A26; --walnut-hi:#7B5336; --walnut-dark:#33200F;
  --brass:#B58A3C;
  --gold:linear-gradient(135deg,#FFF0C2,#F0C25E 45%,#C9922E);
  --display:'Young Serif',Georgia,serif; --text:'Literata',Georgia,serif; --type:'Courier Prime','Courier New',monospace;
  --wall-rgb:217,223,211;
  --rib:#C23A2E; --rib-lo:#A52E24; --rib-hi:#D4503F; --rib-ink:#FFF6EA;
  --bw:118px; --gapx:18px; --board:26px; --head:34px; --pitch:calc(var(--bw)*1.5 + var(--head) + var(--board));
  --ease:cubic-bezier(.3,1.4,.5,1);
}
/* what the stamps unlock: walls, bookmarks, bookcases. Keep the keys equal to ROOM in api/index.php. */
[data-wall=rose]{--wall:#E9DAD1;--wall-deep:#DDC9BE;--wall-line:#CBB3A6;--wall-rgb:233,218,209}
[data-wall=mist]{--wall:#D3DFE4;--wall-deep:#C2D1D8;--wall-line:#A9BDC7;--wall-rgb:211,223,228}
[data-wall=butter]{--wall:#EDE5C8;--wall-deep:#E0D6B0;--wall-line:#CBBE92;--wall-rgb:237,229,200}
[data-ribbon=violet]{--rib:#4B3B9B;--rib-lo:#392C7C;--rib-hi:#6654BD;--rib-ink:#F4F0FF}
[data-ribbon=green]{--rib:#2F6B4F;--rib-lo:#22503A;--rib-hi:#42876A;--rib-ink:#F1FBF4}
[data-ribbon=gold]{--rib:#D9A93F;--rib-lo:#B78726;--rib-hi:#F2CB6A;--rib-ink:#3E2C06}
.case,[data-case]{--w0:#33200F;--w1:#5A3A26;--w2:#7B5336;--lip:#A77B55;--backp:#2A1A0E;--shade:.6;--grainc:rgba(255,255,255,.022)}
[data-case=oak]{--w0:#8B6A43;--w1:#B8915F;--w2:#D3B080;--lip:#E9CD9E;--backp:#EFE5CF;--shade:.2;--grainc:rgba(120,90,40,.05)}
[data-case=green]{--w0:#0F241C;--w1:#24493C;--w2:#2F5E4D;--lip:#CDA650;--backp:#11251D;--shade:.55}
[data-case=midnight]{--w0:#090B11;--w1:#171B26;--w2:#252B3A;--lip:#E0BC62;--backp:#0B0D13;--shade:.5}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;transition:background-color .5s;background:var(--wall);color:var(--ink);font:400 17px/1.6 var(--text);font-optical-sizing:auto;min-height:100vh;display:flex;flex-direction:column;
  background-image:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,0) 420px)}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.08;margin:0;letter-spacing:-.012em;text-wrap:balance}
h1{font-size:clamp(34px,5.2vw,58px)} h2{font-size:clamp(24px,3vw,32px)} h3{font-size:20px}
p{margin:0} a{color:inherit}
h1,h2,h3,p,dd,li,blockquote{overflow-wrap:anywhere}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
img{display:block;max-width:100%}
:focus-visible{outline:2.5px solid var(--violet);outline-offset:3px;border-radius:4px}
.wrap{width:min(1180px,100% - 48px);margin-inline:auto}
.skip{position:absolute;left:12px;top:-60px;background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:8px;z-index:200;transition:top .15s}
.skip:focus{top:12px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.grain{position:fixed;inset:0;z-index:100;pointer-events:none;opacity:.5;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .28 0 0 0 0 .2 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- header ---------- */
.top{position:sticky;top:0;z-index:40;background:rgba(var(--wall-rgb),.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--wall-line)}
.top .wrap{display:flex;align-items:center;gap:22px;height:68px;position:relative}
.logo{display:flex;align-items:center;gap:9px;text-decoration:none}
/* the P: its two top pages are separate layers, so they can lift like pages being turned */
.pmark{--ph:46px;position:relative;display:block;flex:none;height:var(--ph);aspect-ratio:566/830;transition:transform .3s var(--ease);transform-origin:50% 100%;filter:drop-shadow(0 3px 4px rgba(142,36,27,.28))}
.pmark img{position:absolute;inset:0;width:100%;height:100%;max-width:none}
.pmark .f1{transform-origin:10.6% 15.4%;animation:leaf1 9s 1s ease-in-out infinite}
.pmark .f2{transform-origin:16.8% 18.3%;animation:leaf2 9s 1s ease-in-out infinite}
@keyframes leaf1{0%,14%,100%{transform:none}3%{transform:rotate(-13deg)}6%{transform:rotate(2deg)}9%{transform:rotate(-5deg)}12%{transform:rotate(.5deg)}}
@keyframes leaf2{0%,2%,16%,100%{transform:none}5%{transform:rotate(-9deg)}8%{transform:rotate(1.5deg)}11%{transform:rotate(-3.5deg)}14%{transform:rotate(.4deg)}}
.logo:hover .pmark .f1,.pmark.big:hover .f1{animation:leaf1h .9s ease-in-out}
.logo:hover .pmark .f2,.pmark.big:hover .f2{animation:leaf2h .9s .08s ease-in-out}
@keyframes leaf1h{0%,100%{transform:none}25%{transform:rotate(-16deg)}50%{transform:rotate(3deg)}75%{transform:rotate(-6deg)}}
@keyframes leaf2h{0%,100%{transform:none}25%{transform:rotate(-11deg)}50%{transform:rotate(2deg)}75%{transform:rotate(-4deg)}}
.logo:hover .mark{transform:translateY(-2px) rotate(-4deg)}
/* the same wordmark as PopcornChapters: lowercase, heavy, the second word in red */
.logo .wm{font-family:'Poppins',sans-serif;font-weight:700;font-size:23px;letter-spacing:-.035em;line-height:1;color:var(--ink);white-space:nowrap}
.logo .wm b{color:var(--red);font-weight:700}
.nav{display:flex;gap:4px}
.nav a,.tabs a{text-decoration:none;font-family:var(--type);font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.nav a{padding:9px 13px;border-radius:999px;display:inline-flex;gap:8px;align-items:center;transition:background .15s,color .15s}
.nav a:hover{color:var(--ink);background:rgba(28,34,48,.06)}
.nav a[aria-current]{color:var(--paper);background:var(--ink)}
.nav a i,.tabs a i{font-style:normal;font-size:11.5px;letter-spacing:0;opacity:.65}
.sp{flex:1}
.tabs{display:none}

/* ---------- buttons: pills with a hard lower edge ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:999px;padding:12px 22px;font-family:var(--text);font-weight:700;font-size:16px;text-decoration:none;white-space:nowrap;line-height:1.2;transition:transform .12s,box-shadow .12s,background .15s,color .15s,border-color .15s}
.btn:active{transform:translateY(2px)}
.btn.primary{background:var(--green);color:var(--paper);box-shadow:0 4px 0 var(--green-deep),inset 0 1px 0 rgba(255,255,255,.18)}
.btn.primary:hover{background:var(--green-hi)}
.btn.primary:active{box-shadow:0 2px 0 var(--green-deep)}
.btn.red{background:var(--red);color:#FFF6EA;box-shadow:0 4px 0 var(--red-deep),inset 0 1px 0 rgba(255,255,255,.22)}
.btn.red:hover{filter:brightness(1.07)} .btn.red:active{box-shadow:0 2px 0 var(--red-deep)}
.btn.ghost{background:transparent;border:1.5px solid rgba(28,34,48,.32);color:var(--ink);padding:10.5px 20px}
.btn.ghost:hover{border-color:var(--ink);background:rgba(28,34,48,.05)}
.btn.sm{padding:9px 16px;font-size:14.5px} .btn.ghost.sm{padding:7.5px 15px}
.btn.lg{padding:15px 28px;font-size:17.5px}
.btn[disabled]{opacity:.5;pointer-events:none}
.link{background:none;border:0;padding:0;font-family:var(--type);font-size:13.5px;color:var(--ink-soft);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(28,34,48,.3)}
.link:hover{color:var(--red);text-decoration-color:currentColor}
.eyebrow{font-family:var(--type);font-size:12.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--green);display:inline-flex;align-items:center;gap:12px}
.eyebrow.deco::before,.eyebrow.deco::after{content:"";width:30px;height:1px;background:currentColor;opacity:.5}

/* ---------- page furniture ---------- */
main{flex:1}
#app:focus,#app:focus-visible{outline:0}
#app{overflow-x:clip}
.view{padding:44px 0 72px;animation:rise .45s ease both}
@keyframes rise{from{opacity:0;transform:translateY(8px)}}
.pagehead{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:30px}
.pagehead h1{margin-top:12px}
.pagehead .tally{font-family:var(--type);font-size:14.5px;color:var(--ink-soft);margin-top:14px;display:flex;gap:8px 22px;flex-wrap:wrap}
.tally b{color:var(--ink);font-size:16px}
.lede{font-size:19px;color:var(--ink-soft);max-width:56ch;margin-top:14px}
.foot{border-top:1px solid var(--wall-line);padding:34px 0 40px;font-size:14.5px;color:var(--ink-soft)}
.foot .slogan{font-family:var(--display);font-size:22px;color:var(--ink);margin-bottom:8px}
.foot em{font-style:normal;color:var(--red)}
.foot a{text-underline-offset:3px}

/* ---------- covers ---------- */
.cv{display:block;position:relative;aspect-ratio:2/3;border-radius:3px 5px 5px 3px;overflow:hidden;background:var(--c,#3b4a5c);flex:none;
  box-shadow:0 1px 2px rgba(0,0,0,.3),0 12px 22px -10px rgba(28,34,48,.6)}
.cv img{width:100%;height:100%;object-fit:cover;position:relative;z-index:1;opacity:0}
.cv img.ok{opacity:1}
.cv:has(img.ok) .cloth{visibility:hidden}
.cv::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.28),rgba(255,255,255,.16) 3.5%,rgba(0,0,0,.08) 6%,transparent 10%)}
.cv .cloth b,.cv .cloth i{display:block}
.cv .cloth{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:14% 12% 12% 16%;color:var(--t,#F6EFDC);container-type:inline-size}
.cv .cloth::before{content:"";position:absolute;inset:6% 6% 6% 10%;border:1px solid currentColor;opacity:.4;border-radius:1px}
.cv .cloth b{font-family:var(--display);font-weight:400;font-size:13cqw;line-height:1.08;overflow:hidden;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical}
.cv .cloth i{font-family:var(--type);font-style:normal;font-size:7cqw;letter-spacing:.08em;text-transform:uppercase;opacity:.85}

/* ---------- a book, standing cover out ---------- */
.bk{--tilt:14deg;position:relative;display:block;flex:none;width:var(--bw);height:calc(var(--bw)*1.5*var(--hs,1));perspective:900px;text-decoration:none;border-radius:3px}
.bk::after{content:"";position:absolute;left:4%;right:-10%;bottom:-5px;height:12px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.55),transparent);pointer-events:none;transition:opacity .4s,transform .4s}
.bk .bki{position:absolute;inset:0;z-index:1;transform-style:preserve-3d;transform-origin:50% 100%;transform:rotateY(var(--tilt));transition:transform .5s var(--ease)}
.bk .cv{width:100%;height:100%;aspect-ratio:auto;border-radius:2px 3px 3px 2px;box-shadow:0 0 0 .5px rgba(0,0,0,.35)}
.bk .pg{position:absolute;top:1.2%;bottom:1.2%;right:0;width:var(--th,8px);transform-origin:100% 50%;transform:rotateY(90deg);
  background:linear-gradient(180deg,rgba(0,0,0,.12),transparent 8%,transparent 90%,rgba(0,0,0,.2)),repeating-linear-gradient(90deg,#F2EBD8 0 1px,#D8CCAF 1px 2px)}
.bk .seal{--s:calc(var(--bw)*.39);position:absolute;right:calc(var(--bw)*-.085);bottom:7%;transform:translateZ(1px) rotate(8deg);transition:transform .45s var(--ease)}
.bk:hover,.bk:focus-visible{z-index:6}
.bk:hover .bki,.bk:focus-visible .bki{transform:translateY(-12px) translateZ(46px) rotateY(4deg)}
.bk:hover::after,.bk:focus-visible::after{opacity:.5;transform:scale(1.12)}
.bk:hover .seal,.bk:focus-visible .seal{transform:translateZ(1px) rotate(-4deg) scale(1.12)}
.bk:focus-visible{outline-color:#FFE9A8;outline-offset:6px}
.bk.still:hover .bki,.bk.still:focus-visible .bki{transform:rotateY(6deg) translateY(-4px)}

/* ---------- the mark: a prize sticker with ten segments, foil at nine and up ---------- */
.seal{--s:44px;position:relative;display:inline-grid;place-items:center;flex:none;width:var(--s);height:var(--s);vertical-align:middle;filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.45))}
.seal svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.seal .edge{fill:var(--paper)}
.seal .on,.seal .off{fill:none;stroke-width:5.5}
.seal .on{stroke:var(--red)} .seal .off{stroke:rgba(28,34,48,.13)}
.seal b{position:relative;font-family:var(--display);font-weight:400;font-size:calc(var(--s)*.335);line-height:1;color:var(--ink);letter-spacing:-.02em;font-style:normal}
.seal.g .edge{fill:url(#foil)} .seal.g .on{stroke:#5B4310} .seal.g .off{stroke:rgba(91,67,16,.22)} .seal.g b{color:#3A2905}
.seal.none{filter:none} .seal.none .edge{fill:rgba(255,255,255,.35);stroke:var(--ink-faint);stroke-width:1.2;stroke-dasharray:3 3} .seal.none b{color:var(--ink-faint)}
.seal.xs{--s:30px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.3))} .seal.sm{--s:42px} .seal.lg{--s:88px} .seal.xl{--s:132px}
.seal.xl{transform:rotate(-6deg);animation:sealin .55s var(--ease) both}
.seal.xl .on{animation:segin .28s calc(var(--i)*60ms + .25s) both}
.seal.lg{animation:sealpop .32s var(--ease)}
@keyframes sealin{from{transform:scale(.5) rotate(-40deg);opacity:0}}
@keyframes sealpop{from{transform:scale(.86)}}
@keyframes segin{from{opacity:0;stroke-width:0}}
.rosette{position:relative;width:132px;padding-bottom:50px;flex:none}
.rosette .seal{z-index:1}
.rosette .tail{position:absolute;top:96px;left:26px;width:30px;height:76px;background:linear-gradient(90deg,#A52E24,var(--red) 45%,#D4503F);clip-path:polygon(0 0,100% 0,100% 100%,50% 82%,0 100%);transform:rotate(13deg);transform-origin:50% 0;animation:tail .5s .3s var(--ease) both}
.rosette .tail.r{left:auto;right:26px;transform:rotate(-13deg);filter:brightness(.88)}
@keyframes tail{from{transform:rotate(0) scaleY(.2)}}
.rosette small{position:absolute;left:0;right:0;bottom:-22px;text-align:center;font-family:var(--type);font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint)}
.ghost-entry .rosette .tail{background:rgba(28,34,48,.14);animation:none}
.ghost-entry .seal.xl{animation:none}

/* ---------- the shelf-talker: your one-sentence review, on hover ---------- */
.talker{position:absolute;width:min(300px,calc(100vw - 20px));background:var(--paper);border-radius:4px;padding:18px 18px 13px;z-index:60;pointer-events:none;
  box-shadow:0 0 0 1px rgba(28,34,48,.08),0 20px 38px -12px rgba(8,12,18,.7);transform-origin:var(--ox,50%) calc(100% + 14px);transform:translateY(16px) scale(.6) rotate(-7deg);opacity:0;transition:transform .34s var(--ease),opacity .16s}
.talker.show{transform:rotate(-1.4deg);opacity:1}
.talker::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;border-radius:4px 4px 0 0;background:var(--red)}
.talker::after{content:"";position:absolute;left:calc(var(--ox,50%) - 8px);bottom:-7px;width:16px;height:16px;background:var(--paper);transform:rotate(45deg);box-shadow:3px 3px 4px -2px rgba(8,12,18,.35)}
.talker.below{transform-origin:var(--ox,50%) -14px} .talker.below::after{bottom:auto;top:-7px;box-shadow:none;background:var(--red)}
.talker .eyebrow{font-size:11px}
.talker .say{font-family:var(--display);font-size:19.5px;line-height:1.24;margin-top:8px;text-wrap:balance}
.talker .say.none{font-family:var(--text);font-style:italic;font-size:16px;color:var(--ink-soft)}
.talker footer{display:flex;gap:11px;align-items:center;margin-top:13px;padding-top:11px;border-top:1px dashed var(--rule)}
.talker footer span{min-width:0;display:block} .talker footer b{display:block;font-weight:700;font-size:14.5px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.talker footer small{display:block;font-family:var(--type);font-size:12px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.talker .seal{--s:40px}

/* ---------- the bookcase ---------- */
.shelftools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-family:var(--type);font-size:13.5px;color:var(--ink-soft)}
.seg{display:inline-flex;background:rgba(28,34,48,.07);border-radius:999px;padding:3px}
.seg button{border:0;background:none;padding:7px 14px;border-radius:999px;font-family:var(--type);font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--ink-soft)}
.seg button[aria-pressed=true]{background:var(--paper);color:var(--ink);box-shadow:0 1px 3px rgba(28,34,48,.25)}
.case{border-radius:12px 12px 6px 6px;padding:18px 18px 0;position:relative;
  background:linear-gradient(90deg,var(--w0),var(--w1) 3.5%,var(--w2) 50%,var(--w1) 96.5%,var(--w0));
  box-shadow:0 2px 0 rgba(255,255,255,.16) inset,0 34px 54px -32px rgba(28,34,48,.75),0 3px 0 var(--w0)}
.case::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:.6;background:repeating-linear-gradient(90deg,var(--grainc) 0 2px,transparent 2px 9px)}
.case::after{content:"";display:block;height:16px;margin:0 -18px;border-radius:0 0 6px 6px;background:linear-gradient(180deg,rgba(0,0,0,.38),transparent 60%)}
.rows{display:flex;flex-wrap:wrap;align-items:flex-end;padding:0 14px;min-height:var(--pitch);border-radius:3px;position:relative;
  background-color:var(--backp);
  background-image:
    linear-gradient(180deg,rgba(0,0,0,var(--shade)),rgba(0,0,0,0) 46px),
    linear-gradient(180deg,transparent calc(var(--pitch) - var(--board)),var(--lip) calc(var(--pitch) - var(--board)),var(--lip) calc(var(--pitch) - var(--board) + 2px),var(--w2) calc(var(--pitch) - var(--board) + 2px),var(--w1) calc(var(--pitch) - 5px),var(--w0) var(--pitch)),
    linear-gradient(90deg,rgba(0,0,0,calc(var(--shade)*.7)),transparent 4%,transparent 96%,rgba(0,0,0,calc(var(--shade)*.7))),
    repeating-linear-gradient(90deg,var(--grainc) 0 3px,transparent 3px 11px);
  background-size:100% var(--pitch),100% var(--pitch),100% 100%,100% 100%}
.slot{height:var(--pitch);padding:0 calc(var(--gapx)/2) var(--board);display:flex;align-items:flex-end;position:relative}
.slot .bookend{margin-left:calc(var(--bw)*.1);flex:none}
.plate{position:absolute;left:calc(var(--gapx)/2);bottom:calc((var(--board) - 17px)/2 - 1px);height:17px;line-height:18px;padding:0 8px;border-radius:2px;white-space:nowrap;z-index:2;
  font-family:var(--type);font-weight:700;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#4A3A14;background:linear-gradient(180deg,#F6EAC6,#E3D09C);box-shadow:0 0 0 1.5px #A07A30,0 0 0 2.5px rgba(0,0,0,.25),0 2px 3px rgba(0,0,0,.4)}
.slot.new .bk .bki{animation:settle .9s .1s var(--ease) both}
.slot.new .bk .seal{animation:stick .5s .8s var(--ease) both}
@keyframes settle{0%{transform:translateY(-40px) rotateY(var(--tilt))}55%{transform:rotateY(var(--tilt))}75%{transform:translateY(-5px) rotateY(var(--tilt))}}
@keyframes stick{from{transform:translateZ(1px) scale(2.2) rotate(-18deg);opacity:0}}
.bookend{width:calc(var(--bw)*.4);height:calc(var(--bw)*.86);background:linear-gradient(100deg,#E9CB7C,#C39A45 30%,#9C7628 75%,#7E5D1C);clip-path:polygon(0 0,13% 0,13% 62%,100% 91%,100% 100%,0 100%);filter:drop-shadow(1px 0 1px rgba(0,0,0,.5))}
.bookend[data-ends=marble]{width:calc(var(--bw)*.42);background:linear-gradient(118deg,#F7F4EE,#DAD5CB 32%,#F3F0E9 46%,#CFC9BE 64%,#EEEAE2 80%,#BDB7AC);clip-path:polygon(0 0,34% 0,100% 100%,0 100%)}
.bookend[data-ends=cat]{width:calc(var(--bw)*.46);background:linear-gradient(100deg,#7A8399,#3A4152 45%,#262C3B);clip-path:none;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 104' preserveAspectRatio='none'%3E%3Cpath d='M7 104C4 82 6 62 15 50 9 43 8 33 11 25L9 5l11 12c4-2 10-2 14 0L45 5l-2 20c3 8 2 18-4 25 8 10 12 30 11 54z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 104' preserveAspectRatio='none'%3E%3Cpath d='M7 104C4 82 6 62 15 50 9 43 8 33 11 25L9 5l11 12c4-2 10-2 14 0L45 5l-2 20c3 8 2 18-4 25 8 10 12 30 11 54z'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.emptycase{position:absolute;inset:0 0 var(--board);display:grid;place-content:center;justify-items:center;gap:14px;text-align:center;color:#EADFC8;padding:0 20px}
.emptycase p{max-width:38ch;font-size:16.5px;opacity:.9}
.emptycase h3{font-size:24px;color:#FBF7EC}
[data-case=oak] .emptycase{color:var(--ink-soft)} [data-case=oak] .emptycase h3{color:var(--ink)}
.casenote{font-family:var(--type);font-size:13.5px;color:var(--ink-soft);margin-top:20px;text-align:center}
.casenote a{text-underline-offset:3px}

/* ---------- the bookmark: where you left off ---------- */
.bm{position:relative;isolation:isolate;align-self:flex-start;flex:none;width:44px;height:86px;margin-bottom:-18px;border:0;padding:0 0 16px;background:none;color:var(--rib-ink);display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:1px;
  font-family:var(--type);line-height:1;filter:drop-shadow(0 3px 3px rgba(28,34,48,.3));transition:transform .25s var(--ease)}
.bm[hidden]{display:none}
.bm::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,var(--rib-lo),var(--rib) 40%,var(--rib-hi));clip-path:polygon(0 0,100% 0,100% 100%,50% 87%,0 100%)}
.bm small{font-size:10.5px;letter-spacing:.1em;opacity:.85}
.bm b{font-size:15.5px;font-weight:700;letter-spacing:-.02em}
.bm:hover,.bm[aria-expanded=true]{transform:translateY(5px)}
.bm:focus-visible{outline-offset:2px}
.bmpop{position:absolute;top:calc(100% + 30px);right:0;width:min(380px,100%);background:var(--paper);border-radius:14px;padding:18px;z-index:45;box-shadow:0 0 0 1px rgba(28,34,48,.1),0 26px 44px -18px rgba(28,34,48,.7);animation:pop .22s var(--ease) both}
@keyframes pop{from{opacity:0;transform:translateY(-8px) scale(.97)}}
.bmpop .row{display:grid;grid-template-columns:54px 1fr;gap:14px;align-items:center;margin-bottom:14px}
.bmpop h3{font-size:19px;margin-top:4px} .bmpop h3 a{text-decoration:none} .bmpop .by{font-family:var(--type);font-size:13px;color:var(--ink-soft)}
.bmpop .link{display:inline-block;margin-top:14px}
.pageform{display:flex;align-items:center;gap:8px 10px;flex-wrap:wrap;font-family:var(--type);font-size:14.5px}
.pageform input{width:74px;padding:8px 8px 7px;border:1.5px solid var(--rule);border-radius:9px;background:#fff;text-align:center;font-weight:700;font-size:16px}
.pageform input:focus{outline:0;border-color:var(--violet);box-shadow:0 0 0 3px rgba(75,59,155,.16)}
.hops{display:flex;gap:6px;margin-right:6px}
.hops button{border:1.5px dashed rgba(28,34,48,.35);background:none;border-radius:999px;padding:6px 12px 5px;font-family:var(--type);font-weight:700;font-size:14px;transition:all .15s}
.hops button:hover{border-style:solid;border-color:var(--rib);background:var(--rib);color:var(--rib-ink)}
.edge{height:16px;border-radius:2px;position:relative;background:repeating-linear-gradient(90deg,var(--paper-edge) 0 2px,#fff 2px 4px);box-shadow:inset 0 0 0 1px var(--rule)}
.edge i{position:absolute;inset:0 auto 0 0;background:repeating-linear-gradient(90deg,#CDBF9C 0 2px,#E2D6B8 2px 4px);border-radius:2px 0 0 2px;transition:width .6s cubic-bezier(.3,.8,.3,1)}
.edge b{position:absolute;top:-6px;width:11px;height:36px;background:linear-gradient(90deg,var(--rib-lo),var(--rib) 40%,var(--rib-hi));clip-path:polygon(0 0,100% 0,100% 100%,50% 80%,0 100%);transform:translateX(-50%);filter:drop-shadow(0 2px 1px rgba(0,0,0,.25));transition:left .6s cubic-bezier(.3,.8,.3,1)}
.bmk{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:26px;align-items:center;background:var(--paper);border-radius:16px;padding:22px 26px;margin-bottom:34px;position:relative;
  box-shadow:0 1px 0 #fff inset,0 16px 34px -20px rgba(28,34,48,.5),0 0 0 1px rgba(28,34,48,.07)}
.bmk>.bk{--bw:92px;--tilt:18deg}
.bmk h2{font-size:24px;margin-top:6px} .bmk h2 a{text-decoration:none} .bmk h2 a:hover{color:var(--red)}
.bmk .by{color:var(--ink-soft);font-size:15.5px;margin-top:2px}
.pageno{display:flex;align-items:baseline;gap:10px;margin-top:10px;font-family:var(--type);color:var(--ink-soft)}
.pageno small{font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase}
.pageno b{font-family:var(--display);font-weight:400;font-size:46px;line-height:.9;color:var(--ink);letter-spacing:-.02em}
.pageno span{font-size:15px}
.bmk .edge{margin-top:14px}
.pacing{font-family:var(--type);font-size:13.5px;color:var(--ink-soft);display:flex;flex-wrap:wrap;gap:4px 20px;margin-top:14px}
.pacing b{color:var(--ink);font-size:14.5px}
.bmk .pageform{margin-top:16px}
.bmk .side{display:flex;flex-direction:column;align-items:flex-end;gap:12px;max-width:230px}
.note2{font-style:italic;font-size:15px;color:var(--ink-soft);text-align:right}
.bmk.big{grid-template-columns:auto minmax(0,1fr) 268px;gap:40px;padding:34px 36px 34px 40px;align-items:stretch;margin-bottom:54px}
.bmk.big>.bk{--bw:184px;align-self:center}
.bmk.big h2{font-size:clamp(26px,2.6vw,34px)} .bmk.big .by{font-size:17px}
.bmk.big .pageno{margin-top:18px} .bmk.big .pageno b{font-size:clamp(72px,8vw,104px)} .bmk.big .pageno span{font-size:18px}
.bmk.big .edge{height:20px;margin-top:18px} .bmk.big .edge b{height:44px;width:13px;top:-8px}
.bmk.big .pageform{margin-top:22px}
.bmk.big aside{display:flex;flex-direction:column;gap:20px;border-left:1px dashed var(--rule);padding-left:30px;align-items:flex-start}
.bmk.big aside .btn{margin-top:4px}
.slipnote{background:var(--manila);padding:12px 14px 10px;border-radius:3px;transform:rotate(1.2deg);width:100%;box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 8px 14px -10px rgba(28,34,48,.6)}
.slipnote label,.noteline label{display:block;font-family:var(--type);font-weight:700;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#6A5722;margin-bottom:4px}
.slipnote textarea{display:block;width:100%;border:0;background:repeating-linear-gradient(180deg,transparent 0 25px,rgba(106,87,34,.3) 25px 26px);resize:none;font-style:italic;font-size:15.5px;line-height:26px;padding:0;color:#3E3210;outline:0}
.slipnote textarea::placeholder{color:rgba(106,87,34,.65)}
.slipnote:focus-within{box-shadow:0 0 0 2.5px var(--violet),0 8px 14px -10px rgba(28,34,48,.6)}
.nights{width:100%}
.fort{display:grid;grid-template-columns:repeat(14,1fr);gap:4px;margin-top:10px}
.fort i{display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;height:62px;font-style:normal}
.fort b{display:block;height:max(3px,calc(var(--v)*44px));border-radius:1.5px;background:var(--rule)}
.fort .on b{background:repeating-linear-gradient(180deg,var(--rib) 0 3px,var(--rib-lo) 3px 4px)}
.fort small{font-family:var(--type);font-size:10px;text-align:center;color:var(--ink-faint);margin-top:5px;line-height:1}
.fort .now small{color:var(--ink);font-weight:700}
.run{font-family:var(--type);font-size:13.5px;color:var(--ink-soft);margin-top:10px} .run b{color:var(--ink);font-size:16px}
.sittings{margin-top:24px;padding-top:18px;border-top:1px dashed var(--rule)}
.sittings ol{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:6px 26px;font-family:var(--type);font-size:13.5px;color:var(--ink-soft)}
.sittings li{display:grid;grid-template-columns:86px 1fr auto;gap:8px;align-items:baseline} .sittings b{color:var(--rib);font-size:14.5px}
.bmk.empty{grid-template-columns:auto 1fr} .bmk.empty>.bk{--bw:112px} .bmk.empty .acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px} .bmk.slim{grid-template-columns:1fr}
.bmk.inbook{box-shadow:none;padding:0;background:none;grid-template-columns:1fr;margin-bottom:0} .bmk.inbook>.bk,.bmk.inbook .side,.bmk.inbook h2,.bmk.inbook .by{display:none}
.bmk.inbook .pageno b{font-size:72px}
.noteline{margin-top:22px} .noteline label{color:var(--ink-soft)}
.noteline .in{font-style:italic}

/* ---------- home ---------- */
.sechead{margin:0 0 20px} .sechead h2{margin-top:8px} *+.sechead{margin-top:54px}
.welcome{background:var(--paper);border-radius:16px;padding:48px 44px;margin-bottom:54px;box-shadow:0 16px 34px -20px rgba(28,34,48,.5),0 0 0 1px rgba(28,34,48,.07)}
.welcome h2{font-size:clamp(28px,4vw,44px);max-width:18ch} .welcome p{font-size:18.5px;color:var(--ink-soft);max-width:56ch;margin:14px 0 26px}
.acts{display:flex;gap:10px;flex-wrap:wrap}
.recrow+.recrow{margin-top:34px}
.rowhead{display:flex;align-items:baseline;gap:6px 18px;flex-wrap:wrap;margin-bottom:14px}
.rowhead h3{font-size:21px;display:flex;align-items:center;gap:8px;flex-wrap:wrap} .rowhead h3 a{text-decoration-color:rgba(28,34,48,.3);text-underline-offset:4px} .rowhead h3 a:hover{color:var(--red)}
.rowhead p{font-family:var(--type);font-size:13.5px;color:var(--ink-soft)}
.strip{display:grid;grid-auto-flow:column;grid-auto-columns:132px;gap:24px;overflow-x:auto;padding:10px 6px 18px;margin:0 -6px;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:var(--wall-line) transparent}
.rec{display:flex;flex-direction:column;min-width:0;scroll-snap-align:start}
.rec .peek{display:block;border:0;padding:0;background:none;border-radius:4px;transition:transform .3s var(--ease)}
.rec .peek:hover{transform:translateY(-6px) rotate(-1.5deg)}
.rec h4{font-family:var(--display);font-weight:400;font-size:16px;line-height:1.18;margin:12px 0 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rec .by{font-size:13.5px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.rec .tag{font-family:var(--type);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--green);margin-top:6px}
.rec .who{display:flex;align-items:center;gap:6px;margin-top:7px;font-family:var(--type);font-size:12.5px;text-decoration:none;color:var(--ink-soft)} .rec .who span:nth-child(2){flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.rec .btn{padding:6px 10px;font-size:13px;align-self:stretch}
.rec>.btn{margin-top:auto} .rec>:nth-last-child(2){margin-bottom:10px}
.rec.skel{height:270px;border-radius:8px}
.lower{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:54px;margin-top:60px;align-items:start}
.lower aside{display:grid;gap:18px}
.feed{display:grid;gap:12px;margin-bottom:18px} .feed.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.feeditem{display:grid;grid-template-columns:54px minmax(0,1fr) auto;gap:16px;align-items:center;background:var(--paper);border-radius:12px;padding:12px 16px 12px 12px;text-decoration:none;box-shadow:0 0 0 1px rgba(28,34,48,.07),0 10px 20px -18px rgba(28,34,48,.5);transition:transform .2s var(--ease),box-shadow .2s}
.feeditem:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(28,34,48,.12),0 16px 24px -18px rgba(28,34,48,.6)}
.feeditem .body{display:block;min-width:0}
.feeditem .who{display:flex;align-items:center;gap:7px;font-family:var(--type);font-size:12.5px;color:var(--ink-soft)} .feeditem .who b{color:var(--ink)}
.feeditem strong{display:block;font-family:var(--display);font-weight:400;font-size:18px;line-height:1.15;margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.feeditem .ln{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-style:italic;font-size:14.5px;line-height:1.35;color:var(--ink-soft);margin-top:3px}
.av{display:inline-grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;background:var(--c);color:#FBF7EC;font-family:var(--type);font-weight:700;font-size:13px;letter-spacing:.02em;box-shadow:inset 0 -2px 0 rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.25)}
.av.xs{width:20px;height:20px;font-size:8.5px;box-shadow:none} .av.lg{width:50px;height:50px;font-size:17px} .av.xl{width:104px;height:104px;font-size:36px;box-shadow:inset 0 -5px 0 rgba(0,0,0,.2),inset 0 2px 0 rgba(255,255,255,.25),0 12px 22px -12px rgba(28,34,48,.6)}
.panel{display:block;background:var(--paper);border-radius:14px;padding:22px;box-shadow:0 0 0 1px rgba(28,34,48,.07),0 12px 24px -20px rgba(28,34,48,.5);text-decoration:none}
.trio{display:grid;grid-template-columns:repeat(3,auto);justify-content:space-between;gap:10px;margin-top:14px}
.trio b{display:block;font-family:var(--display);font-weight:400;font-size:32px;line-height:1} .trio span{font-family:var(--type);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.months{display:grid;grid-template-columns:repeat(12,1fr);gap:4px;margin-top:22px;padding-top:6px;border-top:1px dashed var(--rule)}
.months div{display:flex;flex-direction:column;align-items:stretch}
.months span{display:flex;flex-direction:column-reverse;gap:2px;height:64px;border-bottom:2px solid var(--walnut)}
.months i{display:block;height:11px;border-radius:1.5px;box-shadow:inset 0 -2px 0 rgba(0,0,0,.18),inset 2px 0 0 rgba(255,255,255,.14)}
.months small{font-family:var(--type);font-size:10.5px;text-align:center;color:var(--ink-faint);margin-top:5px} .months .now small{color:var(--ink);font-weight:700} .months .later{opacity:.45}
.nextstamp{display:grid;grid-template-columns:84px 1fr;gap:16px;align-items:center;transition:transform .2s var(--ease)} .nextstamp:hover{transform:translateY(-2px)}
.nextstamp>span{display:block;min-width:0} .nextstamp strong{display:block;font-family:var(--display);font-weight:400;font-size:20px;margin-top:4px} .nextstamp .how{display:block;font-size:14.5px;color:var(--ink-soft);line-height:1.35}
.nextstamp small,.st small{display:block;font-family:var(--type);font-size:12px;color:var(--ink-soft);margin-top:5px}
.meter{display:block;height:8px;border-radius:999px;background:rgba(28,34,48,.1);margin-top:10px;overflow:hidden} .meter i{display:block;height:100%;border-radius:999px;background:var(--green)}
.prompt.left{text-align:left;margin-top:0} .prompt.left p{margin-inline:0}

/* ---------- nightstand: the to-read pile, by lamplight ---------- */
.night{border-radius:18px;overflow:hidden;position:relative;color:#F3EAD3;background:#13231C;box-shadow:0 30px 50px -30px rgba(28,34,48,.8)}
.night .scene{display:flex;align-items:flex-end;gap:38px;padding:60px 56px 0 48px;min-height:440px;position:relative;
  background:radial-gradient(70% 110% at 14% 34%,#345748 0,#213B30 34%,#13231C 74%)}
.night .scene::before{content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;background:repeating-linear-gradient(90deg,rgba(255,255,255,.018) 0 1px,transparent 1px 46px)}
.lamp{position:relative;width:150px;height:300px;flex:none}
.lamp i{position:absolute;display:block}
.lamp .glow{left:50%;top:104px;width:1000px;height:760px;transform:translate(-50%,-34%);pointer-events:none;background:radial-gradient(closest-side,rgba(255,214,140,.6),rgba(255,208,128,.2) 40%,transparent 72%)}
.lamp .shade{left:8px;right:8px;top:0;height:112px;background:linear-gradient(180deg,#FFF6D8,#F5DC9E 55%,#DDB96F);clip-path:polygon(24% 0,76% 0,100% 100%,0 100%)}
.lamp .stem{left:50%;top:110px;width:8px;height:172px;margin-left:-4px;background:linear-gradient(90deg,#7E5D1C,#E9CB7C 45%,#8A6A2A)}
.lamp .lfoot{left:50%;bottom:0;width:92px;height:16px;margin-left:-46px;border-radius:46px 46px 4px 4px/14px 14px 4px 4px;background:linear-gradient(90deg,#7E5D1C,#E9CB7C 40%,#9C7628)}
.lamp .shade::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(150,100,20,.28),transparent 30%,transparent 70%,rgba(150,100,20,.28))}
[data-lamp=banker] .lamp .shade{left:-12px;right:-12px;top:84px;height:54px;clip-path:none;border-radius:70px 70px 10px 10px/54px 54px 10px 10px;background:linear-gradient(180deg,#5FB790,#2F7A5C 45%,#17513B);box-shadow:inset 0 5px 0 rgba(255,255,255,.28),0 5px 0 #C39A45}
[data-lamp=banker] .lamp .stem{top:140px;height:142px}
[data-lamp=banker] .lamp .shade::after{display:none}
[data-lamp=candle] .lamp .shade::after{display:none}
[data-lamp=banker] .lamp .glow{top:170px;background:radial-gradient(closest-side,rgba(214,244,190,.3),rgba(255,214,140,.12) 42%,transparent 70%)}
[data-lamp=candle] .lamp .shade{left:calc(50% - 14px);right:auto;width:28px;top:150px;height:132px;clip-path:none;border-radius:4px 4px 0 0;background:linear-gradient(90deg,#D9CDA8,#FFF8E3 45%,#CFC09A)}
[data-lamp=candle] .lamp .stem{top:104px;width:20px;height:44px;margin-left:-10px;border-radius:50% 50% 50% 50%/68% 68% 32% 32%;background:radial-gradient(ellipse at 50% 78%,#FFF7D0 0,#FFC850 42%,#F0802E 72%,rgba(240,128,46,0) 76%);animation:flick 2.6s ease-in-out infinite;transform-origin:50% 100%}
[data-lamp=candle] .lamp .lfoot{width:104px;margin-left:-52px;height:16px}
[data-lamp=candle] .lamp .glow{top:120px;width:760px;height:620px;background:radial-gradient(closest-side,rgba(255,170,80,.4),rgba(255,150,70,.1) 45%,transparent 70%);animation:glow 2.6s ease-in-out infinite}
[data-lamp=candle].night .scene{background:radial-gradient(60% 100% at 14% 40%,#3A3626 0,#1F2119 36%,#0E1210 76%)}
@keyframes flick{0%,100%{transform:scale(1) rotate(-2deg)}30%{transform:scale(1.06,.94) rotate(2deg)}60%{transform:scale(.96,1.07) rotate(-1deg)}}
@keyframes glow{0%,100%{opacity:1}30%{opacity:.86}60%{opacity:.95}}
.upnext{display:flex;align-items:flex-end;gap:30px;position:relative;min-width:0}
.bk.lg{--bw:176px}
.uncopy{padding-bottom:40px;max-width:330px;position:relative;min-width:0}
.uncopy .eyebrow{color:#E9C773}
.uncopy h2{color:#FBF7EC;margin-top:10px;font-size:clamp(26px,2.8vw,36px)} .uncopy h2 a{text-decoration:none}
.uncopy .by{font-size:17px;opacity:.85;margin-top:6px}
.uncopy p{opacity:.85}
.facts2{font-family:var(--type);font-size:13px;margin:12px 0 20px}
.uncopy>.btn{margin-top:20px} .uncopy .facts2+.btn{margin-top:0}
.lean{display:flex;align-items:flex-end;margin-left:auto;position:relative;padding-left:20px}
.lean .bk{--bw:142px;margin-left:calc(var(--bw)*-.26);transform-origin:50% 100%;transition:transform .35s var(--ease),margin .35s var(--ease)}
.lean .bk:first-child{margin-left:0}
.lean .bk[data-tilt="0"]{transform:rotate(-2.5deg)} .lean .bk[data-tilt="1"]{transform:rotate(1.5deg)} .lean .bk[data-tilt="2"]{transform:rotate(-1deg)}
.lean .bk:hover,.lean .bk:focus-visible{transform:rotate(0) translateY(-8px)}
.night .table{height:70px;position:relative;background:linear-gradient(180deg,#B08560 0,#9A6E4C 3px,#7B5336 3px,#6A452C 17px,#22140A 17px,#22140A 20px,#5A3A26 20px,#4A2E1C)}
.night .knob{position:absolute;left:50%;top:36px;width:20px;height:20px;margin-left:-10px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFF0C2,#C9922E 55%,#7E5D1C);box-shadow:0 3px 4px rgba(0,0,0,.5)}
.night.bare .scene{min-height:400px;align-items:flex-end}
.night.bare .uncopy{padding-bottom:70px}
.pilelist{list-style:none;margin:30px 0 0;padding:6px 22px;background:var(--paper);border-radius:14px;box-shadow:0 0 0 1px rgba(28,34,48,.07),0 12px 24px -20px rgba(28,34,48,.5)}
.pilelist li{display:grid;grid-template-columns:42px minmax(0,1fr) auto auto;gap:18px;align-items:center;padding:13px 0;border-bottom:1px solid var(--rule)}
.pilelist li:last-child{border-bottom:0}
.pilelist .t{font-family:var(--display);font-size:19px;text-decoration:none;display:block;line-height:1.15} .pilelist .t:hover{color:var(--red)}
.pilelist .by{font-size:14.5px;color:var(--ink-soft)}
.pilelist .meta{font-family:var(--type);font-size:13px;color:var(--ink-soft);white-space:nowrap}
.pilelist .acts{align-items:center;gap:16px;flex-wrap:nowrap;justify-content:flex-end;min-width:270px}
.pin{font-family:var(--type);font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--green)}
.cvwrap{display:block}

/* ---------- readers ---------- */
.rgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.rcard{background:var(--paper);border-radius:14px;padding:20px;display:flex;flex-direction:column;box-shadow:0 0 0 1px rgba(28,34,48,.07),0 12px 24px -20px rgba(28,34,48,.5)}
.rcard .head{display:flex;gap:14px;align-items:center;text-decoration:none}
.rcard .head>span:not(.av){display:block;min-width:0} .rcard strong{display:block;font-family:var(--display);font-weight:400;font-size:21px;line-height:1.1} .rcard .head:hover strong{color:var(--red)}
.rcard small{font-family:var(--type);font-size:12.5px;color:var(--ink-soft)}
.rcard .bio{font-size:15.5px;color:var(--ink-soft);margin:14px 0 16px;line-height:1.45}
.minis{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:auto}
.minis .cv{box-shadow:0 1px 2px rgba(0,0,0,.3),0 8px 12px -8px rgba(28,34,48,.6)}
.foot2{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:18px;padding-top:14px;border-top:1px dashed var(--rule)}
.match{font-family:var(--type);font-size:13px;color:var(--ink-soft)} .match b{color:var(--ink);font-size:16px}
.btn[aria-pressed=true]::before{content:"✓";font-size:.9em}
.profile{display:flex;align-items:center;gap:28px;flex-wrap:wrap;margin-bottom:30px}
.profile>div{flex:1;min-width:240px}
.profile h1{font-size:clamp(32px,4.4vw,50px)}
.handle{font-family:var(--type);font-size:14px;color:var(--ink-soft);margin-top:6px}
.profile .bio{font-size:18.5px;color:var(--ink-soft);margin-top:10px;max-width:52ch}
.profile .tally{font-family:var(--type);font-size:14.5px;color:var(--ink-soft);margin-top:14px;display:flex;gap:8px 22px;flex-wrap:wrap}
.btn.big{padding:13px 26px;font-size:16.5px}
.both{margin-bottom:28px} .both>div{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.both a{display:block;background:var(--paper);border-radius:10px;padding:9px 14px;text-decoration:none;box-shadow:0 0 0 1px rgba(28,34,48,.08)} .both a:hover{box-shadow:0 0 0 1.5px var(--ink)}
.both b{display:block;font-family:var(--display);font-weight:400;font-size:16.5px} .both span{font-family:var(--type);font-size:12.5px;color:var(--ink-soft)}
.byline{display:inline-flex;align-items:center;gap:12px;text-decoration:none}
.byline b{display:block;font-size:17px} .byline small{display:block;font-family:var(--type);font-size:13px;color:var(--ink-soft)}
.byline:hover b{color:var(--red)}
.others a{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px 0;border-top:1px solid var(--rule);text-decoration:none}
.others a:hover b{color:var(--red)}
.others b{display:block;font-size:15.5px} .others em{display:block;font-size:15px;color:var(--ink-soft);line-height:1.35}

/* ---------- stamps and the reading room ---------- */
.stamp2{display:block;width:100%;max-width:120px;color:var(--violet);transform:rotate(var(--r));opacity:.9;mix-blend-mode:multiply;overflow:visible}
.stamp2.red{color:var(--red)} .stamp2.green{color:var(--green)} .stamp2.no{color:#A3A595;opacity:.75}
.stamp2 circle{fill:none;stroke:currentColor;stroke-width:3} .stamp2 .thin{stroke-width:1.2}
.stamp2.no circle{stroke-dasharray:4 4;stroke-width:1.6} .stamp2.no .thin{stroke-dasharray:none;stroke-width:.8}
.stamp2 text{fill:currentColor;font-family:var(--type);font-weight:700}
.stamp2 .ring{font-size:9.6px;letter-spacing:1.5px;text-transform:uppercase} .stamp2 .ring.sm{font-size:7.6px;letter-spacing:1.3px}
.stamp2 .gl{font-family:var(--display);font-weight:400;font-size:31px;letter-spacing:-.5px} .stamp2 .gl.s{font-size:20px}
.stamps{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:16px}
.st{display:grid;grid-template-columns:104px minmax(0,1fr);gap:18px;align-items:center;border-radius:14px;padding:16px 18px 16px 16px;border:1.5px dashed var(--wall-line)}
.st.got{background:var(--paper);border:0;box-shadow:0 0 0 1px rgba(28,34,48,.07),0 12px 24px -20px rgba(28,34,48,.5)}
.st h3{font-size:20px} .st p{font-size:15px;color:var(--ink-soft);line-height:1.4;margin-top:3px}
.st .meter{margin-top:9px}
.gift{font-family:var(--type);font-size:12.5px!important;margin-top:8px!important;color:var(--ink-soft)} .gift.open{color:var(--green)!important;font-weight:700} .gift b{color:var(--ink)}
.room{background:var(--paper);border-radius:16px;padding:10px 30px 30px;box-shadow:0 0 0 1px rgba(28,34,48,.07),0 16px 30px -22px rgba(28,34,48,.5)}
.kind{padding:24px 0 0;margin-top:24px;border-top:1px solid var(--rule)} .kind h3{margin-bottom:14px}
.opts{display:flex;flex-wrap:wrap;gap:12px}
.opt{width:158px;display:grid;gap:3px;text-align:left;border:1.5px solid var(--rule);background:#fff;border-radius:12px;padding:10px 12px 11px;transition:border-color .15s,transform .2s var(--ease)}
.opt:hover{border-color:var(--ink-soft);transform:translateY(-2px)}
.opt[aria-pressed=true]{border-color:var(--violet);box-shadow:0 0 0 1.5px var(--violet)}
.opt b{font-weight:700;font-size:15px;line-height:1.2;margin-top:8px} .opt small{font-family:var(--type);font-size:12px;color:var(--ink-soft)} .opt[aria-pressed=true] small{color:var(--violet);font-weight:700}
.opt.locked{background:transparent;border-style:dashed} .opt.locked .sw{filter:grayscale(.75);opacity:.55} .opt.locked b{color:var(--ink-soft)}
.sw{display:block;height:74px;border-radius:7px;position:relative;overflow:hidden}
.swcase{background:var(--backp);border:6px solid var(--w1);border-bottom:0;box-shadow:inset 0 -9px 0 var(--w1),inset 0 -11px 0 var(--lip),inset 0 12px 14px -8px rgba(0,0,0,var(--shade))}
.swcase i{position:absolute;bottom:11px;width:17px;height:30px;left:12px;background:#C23A2E;border-radius:1px} .swcase i:nth-child(2){left:33px;height:36px;background:#D9A93F} .swcase i:nth-child(3){left:54px;height:27px;background:#3F7A8A}
.swwall{background:var(--wall);box-shadow:inset 0 0 0 1px var(--wall-line),inset 0 -16px 0 var(--wall-deep)}
.swrib{background:var(--paper-edge)} .swrib i{position:absolute;left:50%;top:0;width:24px;height:60px;margin-left:-12px;background:linear-gradient(90deg,var(--rib-lo),var(--rib) 40%,var(--rib-hi));clip-path:polygon(0 0,100% 0,100% 100%,50% 82%,0 100%)}
.swend{background:linear-gradient(180deg,var(--wall) 0 78%,var(--walnut) 78%);--bw:70px} .swend .bookend{position:absolute;left:50%;bottom:16px;margin-left:-14px}
.swlamp{background:radial-gradient(90% 120% at 50% 30%,#345748,#13231C 80%)} .swlamp .lamp{position:absolute;left:50%;bottom:4px;margin-left:-75px;transform:scale(.21);transform-origin:50% 100%} .swlamp .glow{display:none}
.swlamp[data-lamp=candle]{background:radial-gradient(90% 120% at 50% 40%,#3A3626,#0E1210 80%)}

/* ---------- the small print ---------- */
.legal{max-width:760px} .legal h1{margin:14px 0 10px} .legal h2{margin:38px 0 10px;font-size:24px} .legal p,.legal li{color:var(--ink-soft);font-size:17px;line-height:1.65} .legal p{margin:0 0 14px} .legal ul{margin:0 0 14px;padding-left:22px} .legal li{margin-bottom:6px} .legal strong{color:var(--ink)} .legal .date{font-family:var(--type);font-size:13.5px;color:var(--ink-faint)}

/* ---------- the front door ---------- */
body[data-auth=out] .nav,body[data-auth=out] .tabs,body[data-auth=out] #addbtn,body[data-auth=out] #bm,body[data-auth=out] #mebtn{display:none}
#mebtn{text-decoration:none;transition:transform .2s var(--ease)} #mebtn:hover{transform:translateY(-2px)} #mebtn[hidden]{display:none}
.door{overflow-x:clip}
.dhero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:64px;align-items:center;padding:46px 0 0}
.dhero .acts{margin-top:30px;gap:12px}
.proof{display:flex;gap:8px 22px;flex-wrap:wrap;margin-top:22px;font-family:var(--type);font-size:13.5px;color:var(--ink-soft)}
.proof span{display:inline-flex;align-items:center;gap:8px} .proof span::before{content:"";width:8px;height:13px;background:var(--green);clip-path:polygon(0 0,100% 0,100% 100%,50% 76%,0 100%)}
.pitch h1{animation:rise .7s .05s both} .pitch .lede{animation:rise .7s .15s both} .dhero .acts{animation:rise .7s .25s both} .proof{animation:rise .7s .35s both} #doorbox{animation:rise .8s .2s both}
.dsec{padding:74px 0 10px} .dshelf{padding-top:54px}
.dsec .sechead{text-align:center;margin-bottom:34px} .dsec .sechead h2,.dfeat h2,.dcta h2{font-size:clamp(28px,3.6vw,44px)}
/* the shelf fills itself: books drop in one by one, then take turns stepping forward */
.dshelf .slot .bk{opacity:0}
.dshelf.play .slot .bk{opacity:1;transition:opacity .2s calc(var(--d)*120ms + .15s)}
.dshelf.play .slot .bk .bki{animation:settle .9s calc(var(--d)*120ms + .15s) var(--ease) both}
.dshelf.play .slot .bk .seal{animation:stick .5s calc(var(--d)*120ms + .85s) var(--ease) both}
.bk.lift{z-index:6} .bk.lift .bki{transform:translateY(-12px) translateZ(46px) rotateY(4deg)} .bk.lift .seal{transform:translateZ(1px) rotate(-4deg) scale(1.12)}
.dfeat{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:64px;align-items:center}
.dfeat.flip{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)} .dfeat.flip .copy{order:2}
.dfeat .copy p{font-size:18.5px;color:var(--ink-soft);margin-top:14px;max-width:44ch}
.dfeat .copy .eyebrow{margin:0;font-size:12.5px;color:var(--green)}
.dfeat .copy h2{margin-top:12px}
.dfeat ul{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:9px}
.dfeat li{padding-left:26px;position:relative;color:var(--ink-soft);font-size:16.5px}
.dfeat li::before{content:"";position:absolute;left:3px;top:6px;width:9px;height:15px;background:var(--red);clip-path:polygon(0 0,100% 0,100% 100%,50% 76%,0 100%)}
.dfeat .copy,.demo,.dsec .sechead{opacity:0;transform:translateY(22px);transition:opacity .7s,transform .7s cubic-bezier(.2,.7,.3,1)}
.dsec.play .copy,.dsec.play .demo,.dsec.play .sechead{opacity:1;transform:none} .dsec.play .demo{transition-delay:.12s}
.demo{min-width:0;position:relative}
.demobmk{margin:0;grid-template-columns:auto minmax(0,1fr);gap:28px;padding:28px 30px;align-items:center}
.demobmk>.bk{--bw:128px}
.demobmk .pageno b{font-size:76px} .demobmk .edge{height:18px} .demobmk .edge b{height:40px;width:12px;top:-7px}
.demobmk .nights{margin-top:16px;max-width:300px} .demobmk .fort i{height:48px} .demobmk .fort b{transition:height .45s var(--ease),background .3s}
.hangrib{position:absolute;right:34px;top:-14px;width:46px;height:92px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:18px;font-style:normal;font-family:var(--type);color:var(--rib-ink);line-height:1;
  background:linear-gradient(90deg,var(--rib-lo),var(--rib) 40%,var(--rib-hi));clip-path:polygon(0 0,100% 0,100% 100%,50% 87%,0 100%);animation:sway 4s ease-in-out infinite;transform-origin:50% 0}
.hangrib small{font-size:10.5px;opacity:.85} .hangrib b{font-size:16px;font-weight:700}
@keyframes sway{0%,100%{transform:rotate(-1.6deg)}50%{transform:rotate(1.6deg)}}
.entrycard{background:var(--paper);border-radius:10px 16px 16px 10px;padding:26px 30px 22px;box-shadow:0 0 0 1px rgba(28,34,48,.08),0 2px 0 #E4DAC0,0 4px 0 #F4EDDA,0 6px 0 #E0D5BA,0 30px 50px -28px rgba(28,34,48,.65);animation:cardin .55s var(--ease) both}
@keyframes cardin{from{opacity:0;transform:translateY(14px) rotate(.8deg)}}
.entrycard header{display:grid;grid-template-columns:62px minmax(0,1fr);gap:18px;align-items:center}
.entrycard .line{font-family:var(--display);font-size:clamp(19px,2vw,24px);line-height:1.2;margin-top:6px;text-wrap:balance}
.entrycard .verdict{margin-top:20px;padding:24px 0 30px}
.entrycard .marks i.on{animation:markin .3s both}
.entrycard .bar:nth-child(1) .marks i.on{animation-delay:.3s} .entrycard .bar:nth-child(2) .marks i.on{animation-delay:.45s} .entrycard .bar:nth-child(3) .marks i.on{animation-delay:.6s} .entrycard .bar:nth-child(4) .marks i.on{animation-delay:.75s} .entrycard .bar:nth-child(5) .marks i.on{animation-delay:.9s} .entrycard .bar:nth-child(6) .marks i.on{animation-delay:1.05s}
@keyframes markin{from{background:rgba(28,34,48,.11);transform:translateY(-5px)}}
.entrycard footer{font-family:var(--type);font-size:13px;color:var(--ink-soft);margin-top:14px}
.stamprow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;max-width:520px;margin:0 auto 26px}
.stamprow span{display:block;opacity:.4;transition:opacity .4s} .stamprow span.hit{opacity:1} .stamprow .stamp2{max-width:none}
.stamprow span.thunk .stamp2{animation:thunk .5s cubic-bezier(.2,1.6,.4,1) both}
.case.mini{--bw:104px;--gapx:14px;max-width:560px;margin-inline:auto} .case.mini .rows{justify-content:center}
.unlocked{text-align:center;font-family:var(--type);font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--green);margin-top:18px}
#dfd .feed{max-width:560px;margin:0 auto;height:306px;overflow:hidden;position:relative;-webkit-mask:linear-gradient(180deg,#000 82%,transparent);mask:linear-gradient(180deg,#000 82%,transparent)}
#dfd .feeditem.enter{animation:feedin .5s var(--ease) both} #dfd .feeditem.leave{animation:fadeout .4s both}
@keyframes feedin{from{opacity:0;transform:translateY(-30px) scale(.97);margin-bottom:-92px}}
.dcta{text-align:center;padding:90px 0 40px}
.dcta .pmark{--ph:120px;margin:0 auto 22px;filter:drop-shadow(0 14px 14px rgba(142,36,27,.3));animation:bob 4.5s ease-in-out infinite} .dcta .pmark .f1,.dcta .pmark .f2{animation-duration:4.5s;animation-delay:.4s}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-8px) rotate(2deg)}}
.dcta p{font-size:18.5px;color:var(--ink-soft);margin:12px 0 26px}
.pitch h1{font-size:clamp(40px,6vw,74px);margin-top:14px} .pitch h1 em{font-style:normal;color:var(--red)}
.doorcard{background:var(--paper);border-radius:18px;padding:26px 30px 30px;box-shadow:0 0 0 1px rgba(28,34,48,.08),0 2px 0 #E4DAC0,0 4px 0 #F4EDDA,0 30px 50px -28px rgba(28,34,48,.65)}
.doorcard .seg{display:flex} .doorcard .seg button{flex:1;padding:10px 14px}
.doorcard h2{margin:24px 0 18px}
.doorcard form{display:grid;gap:14px}
.doorcard form h2{margin-bottom:4px}
.doorcard .btn{margin-top:4px} .doorcard .err{margin:0} .doorcard .err:empty{display:none}
.doorcard .hint .link{font-family:inherit;font-size:inherit}
.claim{background:var(--manila);border-radius:4px;padding:13px 15px;margin-top:20px;font-size:15px;line-height:1.45;color:#3E3210;transform:rotate(-.5deg);box-shadow:0 8px 14px -10px rgba(28,34,48,.6)}
.youcard{display:flex;align-items:center;gap:18px;flex-wrap:wrap;background:var(--paper);border-radius:14px;padding:18px 22px;margin-bottom:10px;box-shadow:0 0 0 1px rgba(28,34,48,.07),0 12px 24px -20px rgba(28,34,48,.5)}
.youcard>div{flex:1;min-width:220px} .youcard strong{font-family:var(--display);font-weight:400;font-size:21px;margin-right:10px} .youcard small{font-family:var(--type);font-size:12.5px;color:var(--ink-soft)}
.youcard p{font-size:15.5px;color:var(--ink-soft);margin-top:3px} .youcard p b{color:var(--ink)}
.nobooks{font-style:italic;color:var(--ink-faint);font-size:15px;margin-top:auto}
.rec .tag.via{color:var(--violet)}
.profileform{padding:24px 0 6px;display:grid;gap:18px;justify-items:start} .profileform .grid2{width:100%;max-width:760px}
.pf-head{display:flex;align-items:center;gap:14px;width:100%} .pf-head>div{flex:1} .pf-head .handle{margin-top:2px}
.closeacct{margin-top:26px;padding-top:18px;border-top:1px solid var(--rule)} .closeacct summary{cursor:pointer;font-family:var(--type);font-size:13.5px;color:var(--ink-soft)} .closeacct form{display:grid;gap:14px;max-width:440px;margin-top:14px;justify-items:start} .closeacct p{font-size:15.5px;color:var(--ink-soft)} .closeacct .f{width:100%}
.check{display:flex;gap:12px;align-items:flex-start;cursor:pointer} .check input{width:20px;height:20px;margin-top:3px;accent-color:var(--green)} .check b{display:block} .check small{display:block;font-size:14.5px;color:var(--ink-soft)}

/* ---------- a new stamp, on a slip in the corner ---------- */
.won{position:absolute;right:24px;bottom:24px;width:min(420px,calc(100% - 32px));display:grid;grid-template-columns:104px 1fr;gap:18px;align-items:center;background:var(--paper);border-radius:14px;padding:20px 22px 20px 18px;pointer-events:auto;
  box-shadow:0 0 0 1px rgba(28,34,48,.1),0 30px 50px -18px rgba(8,12,18,.7);animation:wonin .5s var(--ease) both}
.won.out{animation:tout2 .28s ease both}
@keyframes wonin{from{opacity:0;transform:translateY(40px) rotate(2deg)}}
@keyframes tout2{to{opacity:0;transform:translateY(16px)}}
.won .stamp2{animation:thunk .5s .35s cubic-bezier(.2,1.6,.4,1) both}
@keyframes thunk{from{opacity:0;transform:scale(2.4) rotate(calc(var(--r) - 24deg))}}
.won h3{font-size:22px;margin-top:6px} .won p{font-size:15px;color:var(--ink-soft);line-height:1.4}
.won .gift b{color:var(--ink)} .won .acts{margin-top:14px}
.won .x{position:absolute;top:6px;right:8px;border:0;background:none;font-size:22px;line-height:1;color:var(--ink-faint);padding:6px}

/* ---------- find a book ---------- */
.searchbar{display:flex;gap:12px;align-items:center;background:var(--paper);border-radius:999px;padding:8px 8px 8px 26px;box-shadow:0 0 0 1px rgba(28,34,48,.1),0 14px 28px -18px rgba(28,34,48,.5);max-width:720px}
.searchbar:focus-within{box-shadow:0 0 0 2.5px var(--violet),0 14px 28px -18px rgba(28,34,48,.5)}
.searchbar input{flex:1;min-width:0;border:0;background:none;outline:0;font-size:19px;padding:8px 0}
.searchbar input::placeholder{color:var(--ink-faint)}
.tries{font-family:var(--type);font-size:14px;color:var(--ink-soft);margin-top:16px;display:flex;gap:6px 10px;flex-wrap:wrap;align-items:center}
.tries button{border:1px dashed rgba(28,34,48,.35);background:none;border-radius:999px;padding:4px 12px;font-family:var(--type);font-size:13.5px}
.tries button:hover{border-style:solid;background:var(--paper)}
.results{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,500px),1fr));gap:18px;margin-top:34px}
.res{display:grid;grid-template-columns:96px 1fr;gap:20px;background:var(--paper);border-radius:12px;padding:18px;box-shadow:0 0 0 1px rgba(28,34,48,.07),0 10px 22px -18px rgba(28,34,48,.5)}
.res h3{font-size:21px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.res .by{color:var(--ink-soft);font-size:15.5px;margin-top:3px}
.res .facts{font-family:var(--type);font-size:13px;color:var(--ink-faint);margin-top:6px}
.res .acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.res .body{display:flex;flex-direction:column;min-width:0}
.res .acts{margin-top:auto;padding-top:14px}
.note{font-family:var(--type);font-size:14.5px;color:var(--ink-soft);margin-top:30px}
.skel{height:168px;border-radius:12px;background:linear-gradient(100deg,rgba(251,247,236,.5) 30%,rgba(251,247,236,.95) 50%,rgba(251,247,236,.5) 70%);background-size:300% 100%;animation:shim 1.3s linear infinite}
@keyframes shim{to{background-position:-150% 0}}
.byhand{margin-top:44px;padding-top:26px;border-top:1px solid var(--wall-line);max-width:720px}
.byhand summary{cursor:pointer;font-family:var(--type);font-size:14.5px;color:var(--ink-soft)}
.byhand form{display:grid;grid-template-columns:2fr 1.5fr 90px 90px auto;gap:10px;margin-top:16px;align-items:end}

/* ---------- forms ---------- */
label.f,.f{display:block}
.f>span,.lab{display:block;font-family:var(--type);font-weight:700;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:7px}
.f small,.hint{display:block;font-family:var(--text);font-style:italic;font-size:14.5px;color:var(--ink-faint);letter-spacing:0;text-transform:none;font-weight:400;margin-top:2px}
.in,textarea.in{width:100%;border:1.5px solid var(--rule);background:#fff;border-radius:9px;padding:11px 13px;font-size:16.5px;line-height:1.5;transition:border-color .15s,box-shadow .15s}
.in:focus{outline:0;border-color:var(--violet);box-shadow:0 0 0 3px rgba(75,59,155,.16)}
textarea.in{resize:vertical;min-height:96px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1.5px solid var(--rule);background:#fff;border-radius:999px;padding:7px 15px;font-size:15px;transition:all .15s}
.chip:hover{border-color:var(--ink-soft)}
.chip[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--paper)}

/* ---------- the open book (book page, entry, writing) ---------- */
.crumb{font-family:var(--type);font-size:13.5px;margin-bottom:20px;display:inline-flex;gap:8px;align-items:center;text-decoration:none;color:var(--ink-soft)}
.crumb:hover{color:var(--red)}
.spread{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);background:var(--paper);border-radius:8px 14px 14px 8px;position:relative;
  box-shadow:0 0 0 1px rgba(28,34,48,.08),0 2px 0 #E4DAC0,0 4px 0 #F4EDDA,0 6px 0 #E0D5BA,0 8px 0 #F1E9D4,0 30px 50px -28px rgba(28,34,48,.65)}
.spread::before{content:"";position:absolute;top:0;bottom:0;left:calc(41% - 30px);width:60px;pointer-events:none;z-index:2;
  background:linear-gradient(90deg,transparent,rgba(60,45,20,.07) 35%,rgba(60,45,20,.2) 49%,rgba(255,255,255,.5) 51%,rgba(60,45,20,.05) 66%,transparent)}
.ribbon{position:absolute;top:-10px;left:calc(41% + 14px);width:20px;height:112px;background:linear-gradient(90deg,var(--rib-lo),var(--rib) 40%,var(--rib-hi));clip-path:polygon(0 0,100% 0,100% 100%,50% 88%,0 100%);z-index:3;filter:drop-shadow(1px 3px 2px rgba(0,0,0,.25))}
.verso{padding:44px 46px 46px 40px;min-width:0}
.write .verso{position:sticky;top:76px;align-self:start}
.recto{padding:44px 44px 50px 60px;min-width:0}
.verso .cvbig{width:min(100%,230px);margin-bottom:26px}
.verso h1{font-size:clamp(28px,3.2vw,40px)}
.verso>*{min-width:0}
.verso .by{font-size:19px;color:var(--ink-soft);margin-top:8px}
.facts{font-family:var(--type);font-size:13.5px;color:var(--ink-soft);margin-top:14px;display:flex;gap:4px 14px;flex-wrap:wrap}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.tags span{font-family:var(--type);font-size:12.5px;border:1px solid var(--rule);border-radius:999px;padding:2px 10px;color:var(--ink-soft)}
.blurb{font-size:16px;color:var(--ink-soft);margin-top:18px}
.verso .acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px;align-items:center}
/* the checkout card: one line per reading, stamped */
.card{background:var(--manila);border-radius:4px;margin-top:28px;padding:16px 18px 12px;font-family:var(--type);position:relative;transform:rotate(-.6deg);box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 8px 14px -10px rgba(28,34,48,.6);
  -webkit-mask:radial-gradient(circle 5px at 50% 0,transparent 98%,#000) 0 0/16px 100% repeat-x;mask:radial-gradient(circle 5px at 50% 0,transparent 98%,#000) 0 0/16px 100% repeat-x}
.card header{display:flex;justify-content:space-between;font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#6A5722;border-bottom:1.5px solid #6A5722;padding:6px 0 6px}
.card a,.card .row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 0 7px;border-bottom:1px solid rgba(106,87,34,.35);text-decoration:none;min-height:42px}
.card a:hover .stamp{opacity:1}
.card .row.blank{color:rgba(106,87,34,.55);font-size:13px}
.stamp{display:inline-block;font-family:var(--type);font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--violet);border:2px solid currentColor;border-radius:3px;padding:3px 8px 1px;transform:rotate(-2.5deg);opacity:.86;mix-blend-mode:multiply;white-space:nowrap}
.card a:nth-child(odd) .stamp{transform:rotate(1.8deg)}
.card a[aria-current] .stamp{color:var(--red)}
.card .sc{font-weight:700;font-size:16px;color:#3E3210}
.card footer{font-size:11.5px;color:#6A5722;padding-top:9px;letter-spacing:.04em}

.recto .line{font-family:var(--display);font-size:clamp(24px,2.6vw,33px);line-height:1.2;margin-top:12px;text-wrap:balance}
.verdict{display:grid;grid-template-columns:auto 1fr;gap:34px;align-items:center;margin-top:30px;padding:30px 0 34px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.bars{display:grid;gap:7px;min-width:0}
.bar{display:grid;grid-template-columns:118px auto 22px;justify-content:start;gap:10px;align-items:center;font-family:var(--type);font-size:13.5px}
.bar .n{font-weight:700;text-align:right}
.bar.unmarked{color:var(--ink-faint)} .bar.unmarked em{font-style:normal;font-size:12.5px}
.marks{display:flex;gap:3px}
.marks i{flex:none;width:15px;height:20px;background:rgba(28,34,48,.11);clip-path:polygon(0 0,100% 0,100% 100%,50% 76%,0 100%)}
.marks i.on{background:var(--red)}
.marks.g i.on{background:var(--gold)}
blockquote.q{margin:34px 0 0;font-style:italic;font-size:clamp(20px,2vw,24px);line-height:1.45;position:relative;padding-left:26px;border-left:3px solid var(--red)}
blockquote.q cite{display:block;font-family:var(--type);font-style:normal;font-size:13px;color:var(--ink-soft);margin-top:10px;letter-spacing:.04em}
.sec{margin-top:32px}
.sec h4{font-family:var(--type);font-size:12.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--green);margin:0 0 9px}
.sec p{white-space:pre-line}
.two{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.sec ul{margin:0;padding:0;list-style:none}
.sec li{padding-left:22px;position:relative;margin-bottom:6px}
.sec li::before{content:"+";position:absolute;left:0;font-family:var(--type);font-weight:700;color:var(--green)}
.sec.minus li::before{content:"–";color:var(--red)}
.slip{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:18px 26px;margin-top:34px;padding-top:24px;border-top:1px dashed var(--rule)}
.slip dt{font-family:var(--type);font-size:11.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint)}
.slip dd{margin:3px 0 0;font-size:16.5px}
.slip div{min-width:0}
.entryacts{display:flex;gap:16px;align-items:center;margin-top:34px;flex-wrap:wrap}
.prompt{margin-top:28px;padding:26px;border:1.5px dashed var(--rule);border-radius:10px;text-align:center}
.prompt p{color:var(--ink-soft);margin:8px auto 18px;max-width:40ch}
.ghost-entry{opacity:.55;margin-top:34px}
.ghost-entry .verdict{margin-top:12px}

/* writing */
.write .recto{padding-bottom:40px}
.group{padding:28px 0;border-top:1px solid var(--rule)}
.group:first-of-type{border-top:0;padding-top:22px}
.group>h3{margin-bottom:4px}
.group>.hint{margin-bottom:18px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.rate{display:grid;grid-template-columns:200px 1fr auto;gap:8px 16px;align-items:center;padding:11px 0;border-bottom:1px solid rgba(221,211,187,.6)}
.rate:last-of-type{border-bottom:0}
.rate .nm b{font-family:var(--display);font-weight:400;font-size:18.5px;display:block;line-height:1.15}
.rate .nm small{font-style:italic;font-size:13.5px;color:var(--ink-faint);line-height:1.25;display:block}
.ribs{display:flex;gap:4px;padding:6px 0;border-radius:6px;touch-action:none}
.ribs button{flex:1;max-width:24px;min-width:0;height:34px;border:0;padding:0;background:rgba(28,34,48,.12);clip-path:polygon(0 0,100% 0,100% 100%,50% 78%,0 100%);transition:background .12s,transform .12s}
.ribs button.on{background:var(--red)}
.ribs button.pre{background:rgba(194,58,46,.45)}
.ribs.g button.on{background:var(--gold)}
.ribs button:hover{transform:translateY(2px)}
.rate.off .ribs{opacity:.35;pointer-events:none}
.rate .val{font-family:var(--type);font-weight:700;font-size:18px;width:74px;text-align:right;display:flex;flex-direction:column;align-items:flex-end;line-height:1.1}
.rate .val .link{font-size:12px;font-weight:400}
.total{display:flex;align-items:center;gap:20px;margin-top:20px;padding:16px 18px;background:#fff;border-radius:10px;box-shadow:0 0 0 1px var(--rule)}
.total p{font-size:15px;color:var(--ink-soft)}
.bul{display:grid;gap:8px}
.bul .row{display:flex;gap:8px;align-items:center}
.bul .row::before{content:"+";font-family:var(--type);font-weight:700;color:var(--green);width:12px}
.bul.minus .row::before{content:"–";color:var(--red)}
.savebar{position:sticky;bottom:0;margin:10px -44px -40px -60px;padding:16px 44px 18px 60px;background:linear-gradient(180deg,rgba(251,247,236,0),var(--paper) 30%);display:flex;gap:16px;align-items:center;justify-content:flex-end;flex-wrap:wrap;border-radius:0 0 14px 0;z-index:4}
.err{color:var(--red-deep);font-family:var(--type);font-size:14.5px;margin-right:auto}

/* ---------- slips of paper: toasts and confirmation ---------- */
#layer{position:fixed;inset:0;pointer-events:none;z-index:90}
.toast{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);background:var(--ink);color:var(--paper);padding:12px 20px;border-radius:999px;font-size:15.5px;box-shadow:0 14px 30px -10px rgba(0,0,0,.5);animation:tin .3s var(--ease) both;pointer-events:auto;max-width:calc(100% - 32px);text-align:center}
.toast.out{animation:tout .25s ease both}
@keyframes tin{from{opacity:0;transform:translateX(-50%) translateY(14px)}}
@keyframes tout{to{opacity:0;transform:translateX(-50%) translateY(8px)}}

/* ---------- shelving: the book closes, crosses the room and takes its place, cover out ---------- */
.shelving{position:absolute;inset:0;pointer-events:auto;background:radial-gradient(ellipse at 50% 30%,rgba(36,73,60,.985),rgba(13,28,22,.99));display:flex;flex-direction:column;align-items:center;justify-content:flex-end;animation:fade .35s ease both;overflow:hidden}
.shelving.out{animation:fadeout .45s ease both}
@keyframes fade{from{opacity:0}} @keyframes fadeout{to{opacity:0}}
.shelving .say{position:absolute;top:8vh;left:0;right:0;text-align:center;color:#F3EAD3;padding:0 20px}
.shelving .say .eyebrow{color:#E3BE6A}
.shelving .say h2{font-size:clamp(28px,4.4vw,46px);margin-top:10px;color:#FBF7EC}
.shelving .say p.sub{font-family:var(--type);font-size:15px;margin-top:10px;opacity:0;transition:opacity .5s}
.shelving.done .say p.sub{opacity:.85}
.shelving .mini{width:min(1100px,100%);padding:0 24px;margin-bottom:9vh}
.shelving .mini .case{padding-top:14px}
.shelving .mini .rows{flex-wrap:nowrap;justify-content:center;overflow:hidden}
.shelving .mini .slot{flex:none;pointer-events:none}
.shelving .gap{overflow:hidden;transition:width .75s cubic-bezier(.6,0,.2,1)}
.shelving .gap .bk{visibility:hidden}
.shelving .gap.landed{overflow:visible} .shelving .gap.landed .bk{visibility:visible}
.shelving .gap.landed .seal{animation:stick .5s .15s var(--ease) both}
.fly{position:absolute;left:50%;top:42%;width:0;height:0;transform-style:preserve-3d;will-change:transform}
.fly>div{position:absolute}
.fly .face{width:200px;height:300px;left:-100px;top:-150px;border-radius:2px 5px 5px 2px;overflow:hidden;backface-visibility:hidden}
.fly .face .cv{width:100%;height:100%;box-shadow:none;border-radius:0}
.fly .pgs{height:292px;top:-146px;right:-100px;transform-origin:100% 50%;transform:rotateY(90deg);background:linear-gradient(180deg,rgba(0,0,0,.14),transparent 8%,transparent 90%,rgba(0,0,0,.22)),repeating-linear-gradient(90deg,#F2EBD8 0 1.5px,#D8CCAF 1.5px 3px)}
.fly .back{width:200px;height:300px;left:-100px;top:-150px;background:#1C2230;border-radius:2px 5px 5px 2px}
.thud{position:absolute;width:140px;height:16px;border-radius:50%;background:radial-gradient(rgba(255,240,200,.55),transparent 70%);opacity:0;pointer-events:none}
.thud.go{animation:thud .6s ease-out both}
@keyframes thud{0%{opacity:.9;transform:scale(.3)}100%{opacity:0;transform:scale(2.2)}}
.shelving .skipbtn{position:absolute;bottom:22px;right:24px;color:#DCE7DD;font-family:var(--type);font-size:13px;background:none;border:0;text-decoration:underline;text-underline-offset:3px;opacity:.75}

.oops{text-align:center;padding:90px 0}
.oops p{color:var(--ink-soft);margin:12px auto 22px;max-width:42ch}

/* ---------- smaller screens ---------- */
@media (max-width:1060px){
  .top .wrap{gap:14px}
  .nav a{padding:8px 9px;letter-spacing:.08em;font-size:12.5px} .nav a i{display:none}
  .bmk.big{grid-template-columns:auto minmax(0,1fr);gap:30px} .bmk.big>.bk{--bw:150px;align-self:start}
  .bmk.big aside{grid-column:1/-1;border-left:0;border-top:1px dashed var(--rule);padding:24px 0 0;display:grid;grid-template-columns:1fr 1fr auto;align-items:start;gap:26px}
  .bmk.big aside .btn{margin-top:0;align-self:end}
  .lower{grid-template-columns:1fr;gap:44px} .lower aside{grid-template-columns:1fr 1fr}
  .night .scene{gap:26px;padding-inline:30px}
  .lean .bk{--bw:104px} .bk.lg{--bw:150px}
  .feed.two{grid-template-columns:1fr}
}
@media (max-width:920px){
  .dhero{grid-template-columns:1fr;gap:40px} .dfeat,.dfeat.flip{grid-template-columns:1fr;gap:34px} .dfeat.flip .copy{order:0}
  .write .verso{position:static}
  .spread{grid-template-columns:1fr;border-radius:10px}
  .spread::before,.ribbon{display:none}
  .verso{padding:30px 26px 6px;display:grid;grid-template-columns:120px 1fr;gap:6px 22px;align-items:start}
  .verso .cvbig{grid-row:span 4;width:120px;margin:0}
  .verso .blurb,.verso .card,.verso .acts,.verso .tags{grid-column:1/-1}
  .recto{padding:26px 26px 36px;border-top:1px solid var(--rule);margin-top:26px}
  .write .verso .blurb,.write .verso .tags{display:none}
  .savebar{margin:10px -26px -36px;padding:16px 26px 18px;border-radius:0 0 10px 10px}
  .byhand form{grid-template-columns:1fr 1fr}
  .byhand form .btn{grid-column:1/-1}
  .night .scene{flex-wrap:wrap;min-height:0;padding-top:44px}
  .lamp{position:absolute;left:18px;bottom:0;transform:scale(.72);transform-origin:0 100%}
  .upnext{margin-left:130px}
  .lean{display:none}
  .pilelist li{grid-template-columns:42px minmax(0,1fr) auto} .pilelist .meta{display:none} .pilelist .acts{min-width:0}
  .bmk{grid-template-columns:auto minmax(0,1fr)} .bmk .side{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:space-between;max-width:none} .note2{text-align:left}
}
@media (max-width:720px){
  :root{--gapx:10px;--bw:calc((100vw - 59px)/3 - 10px);--head:26px;--board:24px}
  body{font-size:16.5px;padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  .wrap{width:calc(100% - 32px)}
  .top .wrap{height:58px;gap:12px}
  .nav{display:none}
  #addbtn{padding:8px 13px;font-size:14px} #addbtn .long{display:none}
  .logo{gap:7px} .logo .wm{font-size:19px} .pmark{--ph:36px}
  #addbtn{padding:8px 12px} #addbtn span+span{display:none}
  .bm{width:40px;height:76px} .bm b{font-size:14.5px}
  .bmpop{top:calc(100% + 26px);width:100%}
  .tabs{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:50;background:rgba(251,247,236,.96);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--rule);padding-bottom:env(safe-area-inset-bottom)}
  .tabs a{padding:16px 2px 13px;text-align:center;font-size:10.5px;letter-spacing:.05em;position:relative;white-space:nowrap}
  .tabs a i{display:none}
  .tabs a[aria-current]{color:var(--ink)}
  .tabs a[aria-current]::before{content:"";position:absolute;top:0;left:50%;width:18px;height:11px;margin-left:-9px;background:var(--rib);clip-path:polygon(0 0,100% 0,100% 100%,50% 60%,0 100%)}
  .view{padding:28px 0 48px}
  .pagehead{margin-bottom:22px}
  .case{margin-inline:-6px;padding:12px 12px 0;border-radius:10px 10px 5px 5px} .case::after{margin:0 -12px;height:12px}
  .rows{padding:0 6px}
  .slot .bookend{position:absolute;left:calc(100% - var(--gapx)/2 + 4px);bottom:var(--board);margin:0}   /* beside the last book, without changing how the row wraps */
  .slot:nth-child(3n) .bookend{display:none}   /* a shelf that is full to the edge holds itself up */
  .plate{font-size:9.5px;padding:0 6px;height:15px;line-height:16px;bottom:calc((var(--board) - 15px)/2 - 1px)}
  .bmk,.bmk.big{grid-template-columns:auto minmax(0,1fr);gap:16px;padding:18px 16px;margin-bottom:34px;align-items:start}
  .bmk>.bk,.bmk.big>.bk{--bw:78px}
  .bmk.big .eyebrow{font-size:11px}
  .bmk h2,.bmk.big h2{font-size:21px} .bmk.big .by{font-size:15px}
  .bmk .pageno,.bmk .edge,.bmk .pacing,.bmk .pageform,.bmk .sittings{grid-column:1/-1}
  .bmk .main{display:contents} .bmk .main>.eyebrow,.bmk .main>h2,.bmk .main>.by{grid-column:2}
  .bmk>.bk{grid-row:1/4}
  .bmk .main>.eyebrow{align-self:end} .bmk .main>h2{margin-top:0}
  .bmk.big .pageno{margin-top:4px} .bmk.big .pageno b{font-size:76px}
  .bmk.big aside{grid-template-columns:1fr;gap:20px;padding-top:20px}
  .bmk.empty .main{display:block}
  .hops{margin-right:0} .pageform label{flex-basis:auto}
  .welcome{padding:30px 22px;margin-bottom:40px} .welcome p{font-size:17px}
  *+.sechead{margin-top:40px}
  .strip{grid-auto-columns:116px;gap:16px;margin:0 -16px;padding-inline:16px}
  .rowhead h3{font-size:19px}
  .lower{margin-top:44px} .lower aside{grid-template-columns:1fr}
  .feeditem{grid-template-columns:46px minmax(0,1fr) auto;gap:12px;padding:10px 12px 10px 10px} .feeditem strong{font-size:16.5px} .feeditem .seal{--s:36px}
  .night{border-radius:14px;margin-inline:-6px}
  .night .scene{padding:30px 18px 0;gap:0}
  .lamp{transform:scale(.5);left:6px}
  .upnext{margin-left:84px;gap:16px;align-items:flex-end;flex:1} .bk.lg{--bw:104px}
  .uncopy{padding-bottom:20px} .uncopy h2{font-size:22px} .uncopy .by{font-size:15px} .facts2{font-size:12px;margin:8px 0 14px}
  .uncopy .btn{padding:9px 16px;font-size:14.5px}
  .night .table{height:46px} .night .knob{top:22px;width:14px;height:14px;margin-left:-7px}
  .night.bare .scene{min-height:300px} .night.bare .uncopy{margin-left:96px;padding-bottom:30px}
  .pilelist{padding:2px 14px} .pilelist li{gap:12px;grid-template-columns:38px minmax(0,1fr)} .pilelist .acts{grid-column:1/-1;justify-content:space-between} .pilelist .t{font-size:17.5px}
  .rgrid{grid-template-columns:1fr}
  .profile{gap:16px} .av.xl{width:72px;height:72px;font-size:25px} .profile .bio{font-size:16.5px} .profile .btn.big{width:100%}
  .stamps{grid-template-columns:1fr} .st{grid-template-columns:80px minmax(0,1fr);gap:14px}
  .room{padding:6px 18px 22px} .opts{display:grid;grid-template-columns:1fr 1fr;gap:10px} .opt{width:auto}
  .dhero{padding-top:28px;gap:30px} .pitch h1{font-size:40px} .pitch .lede{font-size:17px} .doorcard{padding:20px 20px 24px} .dhero .acts .btn{flex:1;padding-inline:14px}
  .dsec{padding-top:54px} .dfeat{gap:26px} .dfeat .copy p{font-size:17px}
  .demobmk{grid-template-columns:auto minmax(0,1fr);padding:18px 16px;gap:16px} .demobmk>.bk{--bw:78px;grid-row:auto} .demobmk .main{display:block} .demobmk .pageno b{font-size:60px} .hangrib{right:16px;width:40px;height:78px}
  .entrycard{padding:18px 16px} .entrycard header{grid-template-columns:48px minmax(0,1fr);gap:12px}
  .case.mini{--bw:calc((100vw - 100px)/4);--gapx:8px} .stamprow{gap:8px}
  #dfd .feed{height:290px}
  #mebtn{width:32px;height:32px;font-size:12px}
  .won{right:16px;bottom:calc(78px + env(safe-area-inset-bottom));grid-template-columns:78px 1fr;gap:14px;padding:16px}
  .verso .blurb{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
  .slip{grid-template-columns:1fr 1fr}
  .bar{font-size:13px}
  .res{grid-template-columns:64px 1fr;gap:6px 14px;padding:14px}
  .res .body{display:contents}
  .res .cv{grid-row:1/4;align-self:start}
  .res .acts{grid-column:1/-1;padding-top:8px}
  .res .acts .btn{padding:7px 12px;font-size:13.5px}
  .res h3{font-size:19px}
  .searchbar{padding-left:18px} .searchbar input{font-size:17px}
  .verso{grid-template-columns:96px 1fr;padding:22px 18px 4px;gap:4px 16px} .verso .cvbig{width:96px}
  .recto{padding:22px 18px 30px}
  .savebar{margin:10px -18px -30px;padding:14px 18px 16px;justify-content:stretch}
  .savebar .btn{flex:1}
  .verdict{grid-template-columns:1fr;gap:34px;justify-items:start}
  .rosette{width:112px;padding-bottom:40px} .rosette .seal.xl{--s:112px} .rosette .tail{top:82px;left:22px;width:26px;height:62px} .rosette .tail.r{right:22px}
  .bars{width:100%} .bar{grid-template-columns:112px auto 22px}
  .marks i{width:13px}
  .two,.grid2{grid-template-columns:1fr;gap:22px}
  .rate{grid-template-columns:1fr auto}
  .rate .ribs{grid-column:1/-1;grid-row:2}
  .rate .val{flex-direction:row;gap:10px;align-items:baseline;width:auto}
  .toast{bottom:calc(78px + env(safe-area-inset-bottom))}
  .savebar{bottom:calc(52px + env(safe-area-inset-bottom))}
  .fly{top:44%}
  .shelving .say{top:6vh}
  .shelving .mini{margin-bottom:calc(72px + 5vh);padding:0 10px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}