/* Trenchpedia v2: the book that writes itself. One folio on a celadon museum wall; the whole page is that book. */
@font-face{font-family:"Grenze Gotisch";src:url(/assets/fonts/Grenze.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"IM Fell English";src:url(/assets/fonts/Fell.woff2) format("woff2");font-display:swap}
@font-face{font-family:"IM Fell English";src:url(/assets/fonts/Fell-Italic.woff2) format("woff2");font-style:italic;font-display:swap}
@font-face{font-family:"Pinyon Script";src:url(/assets/fonts/Pinyon.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Courier Prime";src:url(/assets/fonts/Courier.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Courier Prime";src:url(/assets/fonts/Courier-Bold.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  --wall:#AFC3A6; --wall-2:#A3B899; --wall-d:#7E9677; --wall-ink:#2B3A2C;
  --navy:#17264A; --navy-d:#0E1834; --navy-l:#253862;
  --gilt:#B48A3C; --gilt-l:#D9B866;
  --vel:#F1EAD8; --vel-2:#E9E0CA; --vel-d:#D9CDB0;
  --ink:#2A2320; --ink-2:#5B4F45; --rib:#C2452D;
  --bl:"Grenze Gotisch",serif; --fell:"IM Fell English",Georgia,serif; --hand:"Pinyon Script",cursive; --type:"Courier Prime","Courier New",monospace;
  --hdr:64px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--wall);-webkit-text-size-adjust:100%}
body{background:var(--wall);color:var(--navy);font:400 18px/1.45 var(--fell);overflow-x:clip;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0}
a,button,[role=button],[role=link],summary,label,.plate-ca{cursor:pointer}
:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
img{display:block}

/* ------------------------------------------------ header */
.hdr{position:fixed;inset:0 0 auto;z-index:50;height:var(--hdr);display:flex;align-items:center;gap:28px;padding:0 clamp(16px,3vw,40px);pointer-events:none}
.hdr>*{pointer-events:auto}
.brand{display:flex;align-items:center;gap:10px;min-height:44px;font:700 25px/1 var(--bl);letter-spacing:.01em;color:var(--navy)}
.nav{display:flex;gap:30px;margin:0 auto}
.nav a{font:400 17px/1 var(--fell);font-style:italic;color:var(--navy);padding:12px 4px;margin:0 -4px;position:relative}
.nav a::after{content:"";position:absolute;left:4px;right:4px;bottom:6px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:0 50%;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.nav a:hover::after{transform:scaleX(1)}
.hdr-r{display:flex;align-items:center;gap:10px;margin-left:auto}
.nav+.hdr-r{margin-left:0}

/* buttons: bookcloth label with a gilt fillet, notched like a spine label */
.cloth{--n:9px;position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 26px;background:var(--navy);color:var(--vel);
  font:700 13px/1 var(--type);letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;
  clip-path:polygon(var(--n) 0,calc(100% - var(--n)) 0,100% var(--n),100% calc(100% - var(--n)),calc(100% - var(--n)) 100%,var(--n) 100%,0 calc(100% - var(--n)),0 var(--n));transition:background .25s}
.cloth::before{content:"";position:absolute;inset:5px;border:1px solid var(--gilt);clip-path:inherit;transition:inset .3s cubic-bezier(.2,.7,.2,1),border-color .25s}
.cloth span{position:relative}
.cloth:hover{background:var(--navy-l)}
.cloth:hover::before{inset:3px;border-color:var(--gilt-l)}
.cloth:active{transform:translateY(1px)}
.cloth.sm{min-height:40px;padding:0 18px;font-size:11.5px;--n:7px}
.cloth.sm::before{inset:4px}
.xbtn{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:40px;height:40px;border:1px solid var(--navy);color:var(--navy);transition:background .25s,color .25s}
.xbtn svg{width:15px;height:15px}
.xbtn:hover{background:var(--navy);color:var(--vel)}
.xbtn span{display:none}
.xbtn.lg{width:auto;height:48px;padding:0 18px;font:700 12px/1 var(--type);letter-spacing:.16em;text-transform:uppercase}
.xbtn.lg span{display:inline}

/* CA: an ex-libris bookplate */
.plate-ca{display:inline-flex;align-items:center;gap:12px;height:48px;padding:0 14px 0 12px;background:var(--vel);color:var(--ink);border:1px solid var(--ink);outline:1px solid var(--ink);outline-offset:-5px;transition:transform .25s}
.plate-ca b{font:700 21px/1 var(--bl);color:var(--navy);padding-right:10px;border-right:1px solid var(--vel-d)}
.plate-ca .v{font:400 14px/1 var(--type);max-width:22ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plate-ca.pending .v{font:italic 16px/1 var(--fell);color:var(--ink-2)}
.plate-ca .c{font:700 10.5px/1 var(--type);letter-spacing:.14em;text-transform:uppercase;color:var(--rib)}
.plate-ca:hover{transform:translateY(-1px)}

/* ------------------------------------------------ the folio: one sticky stage, the scroll turns the pages */
.folio{position:relative;height:640svh}
.stage{position:sticky;top:0;height:100svh;overflow:hidden;
  background:radial-gradient(120% 80% at 50% 62%,var(--wall) 0,var(--wall) 45%,var(--wall-2) 100%)}
.title{position:absolute;left:0;right:0;top:calc(var(--hdr) - 10px);text-align:center;pointer-events:none;z-index:1}
.title span{display:inline-block;font:800 clamp(64px,14.2vw,232px)/.86 var(--bl);letter-spacing:-.012em;color:var(--navy);transform-origin:50% 0}
.side{position:absolute;top:50%;z-index:3;transform:translateY(-10%)}
.side.l{left:clamp(16px,3.4vw,56px);display:grid;gap:22px}
.side.r{right:clamp(16px,3.4vw,56px);text-align:right}
.side.r p{font:italic 400 clamp(17px,1.5vw,23px)/1.28 var(--fell);color:var(--navy)}
.tally .k{display:block;font:700 10.5px/1 var(--type);letter-spacing:.2em;text-transform:uppercase;color:var(--wall-ink);margin-bottom:8px}
.tally .n{font:700 clamp(26px,2.3vw,36px)/1 var(--type);font-variant-numeric:tabular-nums;color:var(--navy)}
.cta{position:absolute;left:0;right:0;bottom:clamp(18px,4.2svh,40px);display:flex;justify-content:center;align-items:center;gap:14px;z-index:4;flex-wrap:wrap;padding:0 16px}
.cue{position:absolute;right:clamp(16px,3.4vw,56px);bottom:clamp(24px,5svh,48px);display:flex;align-items:center;gap:10px;font:italic 15px/1 var(--fell);color:var(--wall-ink);z-index:3}
.cue i{width:1px;height:34px;background:var(--wall-ink);transform-origin:50% 0;animation:cue 2.4s cubic-bezier(.6,0,.3,1) infinite}
@keyframes cue{0%{transform:scaleY(0)}50%{transform:scaleY(1);transform-origin:50% 0}51%{transform-origin:50% 100%}100%{transform:scaleY(0);transform-origin:50% 100%}}

.scene{position:absolute;inset:0;perspective:2600px;perspective-origin:50% 38%;z-index:2}
.shadow{position:absolute;left:50%;top:50%;width:1100px;height:520px;margin:-260px 0 0 -550px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(30,48,34,.42),rgba(30,48,34,.2) 55%,rgba(30,48,34,0));will-change:transform,opacity}
.camera{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d}
.book{position:absolute;transform-style:preserve-3d;width:calc(var(--pw) * 2);height:var(--ph);left:calc(var(--pw) * -1);top:calc(var(--ph) / -2)}
.book,.board,.blk,.face,.hinge,.leaf,.pg,.pop,.pp,.tabs,.arch-stars{transform-style:preserve-3d}

/* boards, block, edges */
.board{position:absolute;background:var(--navy);border-radius:2px 6px 6px 2px}
.board.back{left:calc(var(--pw) - 4px);top:-10px;width:calc(var(--pw) + 16px);height:calc(var(--ph) + 20px);transform:translateZ(-7px);
  box-shadow:inset 0 0 0 1px var(--navy-d)}
.blk{position:absolute;top:0;width:var(--pw);height:var(--ph)}
.blk.r{left:var(--pw)}
.face{position:absolute;inset:0;backface-visibility:hidden}
.edge{position:absolute;backface-visibility:hidden;
  background:repeating-linear-gradient(var(--edir,90deg),#E8DCC0 0 1px,#D2C29E 1px 2px,#EADFC6 2px 3.5px)}
.edge.fore{top:0;right:0;width:var(--t);height:100%;transform-origin:100% 50%;transform:rotateY(90deg);--edir:90deg;
  background:linear-gradient(90deg,rgba(180,138,60,.0),rgba(180,138,60,.35)),repeating-linear-gradient(90deg,#E8DCC0 0 1px,#D2C29E 1px 2px,#EADFC6 2px 3.5px)}
.edge.tail{left:0;bottom:0;height:var(--t);width:100%;transform-origin:50% 100%;transform:rotateX(-90deg);--edir:0deg}
.edge.head{left:0;top:0;height:var(--t);width:100%;transform-origin:50% 0;transform:rotateX(90deg);--edir:0deg}
.blk .edge{background-color:#E5D9BD}

.hinge{position:absolute;left:var(--pw);top:0;width:var(--pw);height:var(--ph);transform-origin:0 50%}
.leaf{position:absolute;inset:0;transform-origin:0 50%;will-change:transform}
.pg{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:var(--vel)}
.pg>.pc{position:absolute;inset:0;overflow:hidden;transform-style:flat}
/* gutter light: the page darkens towards the spine */
.pg::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;background:linear-gradient(90deg,rgba(91,70,40,.2),rgba(91,70,40,.06) 5%,rgba(91,70,40,0) 13%,rgba(91,70,40,0) 96%,rgba(91,70,40,.06))}
.pg.l::before{background:linear-gradient(270deg,rgba(91,70,40,.2),rgba(91,70,40,.06) 5%,rgba(91,70,40,0) 13%,rgba(91,70,40,0) 96%,rgba(91,70,40,.06))}
.pg .sh{position:absolute;inset:0;pointer-events:none;z-index:3;opacity:0;background:linear-gradient(90deg,rgba(40,30,20,.34),rgba(40,30,20,.08) 60%,rgba(40,30,20,.02))}
.pg.l .sh{background:linear-gradient(270deg,rgba(40,30,20,.34),rgba(40,30,20,.08) 60%,rgba(40,30,20,.02))}

/* the cover */
.cov-f,.cov-i{top:-10px;bottom:-10px;right:-14px}
.cov-f{background:var(--navy) url(/assets/art/cover.webp) center/100% 100% no-repeat;border-radius:2px 7px 7px 2px}
.cov-i{background:var(--navy) url(/assets/art/endpaper.webp) center/cover no-repeat;border-radius:7px 2px 2px 7px}
.cov-i::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 14px var(--navy)}
.cov-f .sh,.cov-i .sh{position:absolute;inset:0;background:#0b1328;opacity:0;border-radius:inherit}
.cov-edge{position:absolute;top:0;right:0;width:7px;height:100%;background:var(--navy-d);transform-origin:100% 50%;transform:rotateY(90deg)}
.clasp{position:absolute;right:-150px;top:50%;width:270px;height:auto;margin-top:-37px}
.clasp img{width:100%;height:auto;transform:scaleX(-1)}
.spine{position:absolute;left:-22px;top:0;width:44px;height:100%;background:var(--navy) url(/assets/art/spine.webp) center/100% 100%;transform-origin:50% 50%;border-radius:10px}

/* blank leaves that riffle past */
.pg.blank .pc{background:repeating-linear-gradient(180deg,transparent 0 22px,rgba(42,35,32,.07) 22px 23px) 0 64px/100% calc(100% - 128px) no-repeat}

/* ------------------------------------------------ page typography (base page 560 x 760, scaled by the camera) */
.pc{padding:46px 48px 40px;color:var(--ink);font:400 17px/1.45 var(--fell)}
.pg.l .pc{padding:46px 52px 40px 44px}
.rh{display:flex;justify-content:space-between;align-items:baseline;font:700 10px/1 var(--type);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-2);padding-bottom:9px;border-bottom:1px solid var(--ink)}
.rh+.rule{height:3px;border-bottom:1px solid var(--ink);margin-bottom:18px}
.folio-n{position:absolute;bottom:22px;left:0;right:0;text-align:center;font:italic 14px/1 var(--fell);color:var(--ink-2)}
.cap{font:700 10.5px/1 var(--type);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}
.n{font-variant-numeric:tabular-nums}

/* frontispiece */
.fs{display:flex;flex-direction:column;height:100%}
.fs h2{font:700 60px/.9 var(--bl);color:var(--navy);margin:34px 0 12px;letter-spacing:-.01em}
.fs h2 em{font-style:normal;color:var(--rib)}
.fs .sub{font:italic 21px/1.3 var(--fell);color:var(--ink-2);max-width:20ch}
.fs .orn{width:100%;height:14px;margin:26px 0 22px;background:linear-gradient(var(--ink),var(--ink)) 0 6px/100% 1px no-repeat}
.fs .orn::after{content:"";display:block;width:12px;height:12px;margin:0 auto;background:var(--vel);border:1px solid var(--ink);transform:rotate(45deg)}
.fs .latest{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;align-items:end}
.fs .latest .cap{grid-column:1/-1;color:var(--rib)}
.fs .latest img{grid-row:2/4;width:76px;height:76px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px var(--vel),0 0 0 3px var(--gilt)}
.hand{font:400 62px/1.05 var(--hand);color:var(--navy);white-space:nowrap;display:inline-block;clip-path:inset(-20% 0 -20% 0);padding-right:6px}
.fs .meta{font:400 14px/1.4 var(--type);color:var(--ink-2)}
.fs .meta b{color:var(--ink);font-weight:700}
.fs .foot{margin-top:auto;display:flex;justify-content:space-between;align-items:end;border-top:1px solid var(--ink);padding-top:12px}
.fs .foot .cap{display:block;margin-bottom:6px}
.fs .foot b{font:700 30px/1 var(--type);color:var(--navy)}

.wrote{list-style:none;margin-top:22px;border-top:1px solid var(--ink)}
.wrote a{display:grid;grid-template-columns:44px auto 1fr auto;align-items:baseline;gap:10px;padding:7px 0 5px;border-bottom:1px solid var(--vel-d)}
.wrote .no{font:700 11px/1 var(--type);color:var(--ink-2)}
.wrote .nm{font:400 30px/1 var(--hand);color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:230px}
.wrote i{border-bottom:1px dotted var(--ink-2);transform:translateY(-4px)}
.wrote .v{font:700 14px/1 var(--type)}
.wrote a:hover .nm{color:var(--rib)}
/* the pop-up page */
.chart{position:absolute;inset:0;pointer-events:none}
.chart svg{position:absolute;inset:0;width:100%;height:100%}
.pop{position:absolute;inset:0;pointer-events:none}
.pp{position:absolute;transform-origin:50% 100%;backface-visibility:visible}
.pp.arch{width:calc(var(--pw) * .94);left:calc(var(--pw) * -.47);bottom:calc(var(--ph) * .5);aspect-ratio:1200/650;pointer-events:auto}
.pp.arch>img{width:100%;height:100%;object-fit:contain}
.arch-stars{position:absolute;inset:0}
/* a star's box (size set by book.js) is its hit zone: the avatar sits inside it with a ring of air */
.star{position:absolute;width:42px;height:42px;padding:4px;box-sizing:border-box;border-radius:50%;transform-style:flat;transition:opacity .3s}
.star img{width:100%;height:100%;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px var(--navy-d),0 0 0 3.5px var(--gilt-l);transition:box-shadow .25s}
.star:hover img,.star:focus-visible img{box-shadow:0 0 0 2px var(--navy-d),0 0 0 4.5px var(--vel)}
.star b{position:absolute;left:50%;top:calc(100% + 2px);transform:translateX(-50%);font:700 11px/1 var(--type);letter-spacing:.08em;color:var(--gilt-l);white-space:nowrap;background:var(--navy-d);padding:3px 5px}
.star.big{padding:5px}
.arch-dots{position:absolute;inset:0;pointer-events:none}
.dot{position:absolute;border-radius:50%;background:var(--gilt-l);transform:translate(-50%,-50%);opacity:.7;transition:opacity .3s}
.arch.lit .dot{opacity:.14}.arch.lit .dot.on{opacity:1}
.arch-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.arch-lines path{fill:none;stroke:var(--gilt-l);stroke-width:1.3;opacity:.0;transition:opacity .3s}
.arch.lit .star{opacity:.28}.arch.lit .star.on{opacity:1}
.arch.lit path.on{opacity:.95}
.arch-cap{position:absolute;left:50%;bottom:9%;transform:translateX(-50%);font:700 12px/1 var(--type);letter-spacing:.2em;text-transform:uppercase;color:var(--gilt-l);white-space:nowrap;opacity:0;transition:opacity .3s}
.arch.lit .arch-cap{opacity:1}
.pp.emb{width:150px;height:150px;bottom:calc(var(--ph) * .36)}
.pp.emb img{width:100%;height:100%;object-fit:contain}
.pp.emb .lab{position:absolute;left:50%;top:100%;transform:translate(-50%,4px);background:var(--vel);border:1px solid var(--ink);padding:5px 8px;font:700 11px/1 var(--type);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);white-space:nowrap}
.pp.emb .lab i{font-style:normal;color:var(--rib)}
.pp.med{width:240px;bottom:calc(var(--ph) * .08);left:calc(var(--pw) * .52 - 120px)}
.med .disc{position:relative;width:240px;height:240px}
.med .disc img.av{position:absolute;inset:17%;width:66%;height:66%;border-radius:50%;object-fit:cover}
.med .disc img.ring{position:absolute;inset:0;width:100%;height:100%}
.med .card{margin:-8px auto 0;width:240px;background:var(--vel);border:1px solid var(--ink);outline:1px solid var(--ink);outline-offset:-4px;padding:10px 12px 9px;text-align:center}
.med .card .cap{color:var(--rib)}
.med .card b{display:block;font:700 34px/1 var(--bl);color:var(--navy);margin:6px 0 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.med .card span{font:700 14px/1.2 var(--type);color:var(--ink-2)}

/* exhibit: the mounted plate */
.plate{display:flex;flex-direction:column;align-items:center;height:100%;text-align:center}
.plate .rh{align-self:stretch}
.plate .acc{font:700 13px/1 var(--type);letter-spacing:.24em;color:var(--ink-2);margin-top:6px}
.plate .acc b{display:block;font:700 54px/1 var(--type);letter-spacing:.04em;color:var(--navy);margin-top:10px}
.plate .mount{position:relative;width:300px;height:300px;margin:26px 0 22px}
.plate .mount .av{position:absolute;inset:17%;width:66%;height:66%;border-radius:50%;object-fit:cover;background:var(--vel-2)}
.plate .mount .ring{position:absolute;inset:0;width:100%;height:100%}
.plate h3{font:700 54px/.95 var(--bl);color:var(--navy);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plate .tick{font:400 15px/1 var(--type);color:var(--ink-2);margin-top:8px}
.plate .label{margin-top:auto;display:flex;align-items:center;gap:12px;border:1px solid var(--ink);padding:8px 14px 8px 8px;background:var(--vel)}
.plate .label img{width:44px;height:44px;object-fit:contain}
.plate .label span{font:italic 17px/1.15 var(--fell);text-align:left}
.plate .label b{display:block;font:700 10.5px/1 var(--type);letter-spacing:.2em;text-transform:uppercase;font-style:normal;color:var(--rib);margin-bottom:4px}
.ribbon{position:absolute;top:-8px;right:64px;width:30px;height:auto;z-index:4}

/* exhibit: the entry */
.entry h4{font:700 32px/1 var(--bl);color:var(--navy);margin:2px 0 14px}
.why{list-style:none;counter-reset:w;display:grid;gap:9px;min-height:180px}
.why li{position:relative;padding-left:30px;font:italic 18px/1.38 var(--fell);color:var(--ink)}
.why li::before{counter-increment:w;content:counter(w,lower-roman) ".";position:absolute;left:0;top:1px;font:400 15px/1.38 var(--fell);font-style:normal;color:var(--rib)}
.why .w{opacity:.0;transition:opacity .5s ease-out}
.why .w.on{opacity:1}
.stats{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--ink);margin-top:20px}
.stats div{padding:9px 0 8px;border-bottom:1px solid var(--vel-d);display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.stats div:nth-child(odd){padding-right:16px;border-right:1px solid var(--vel-d)}
.stats div:nth-child(even){padding-left:16px}
.stats dt{font:italic 15px/1 var(--fell);color:var(--ink-2)}
.stats dd{font:700 16px/1 var(--type);color:var(--ink);font-variant-numeric:tabular-nums}
.trail{margin-top:16px;padding:12px 14px;background:var(--vel-2);border-left:3px solid var(--navy)}
.trail .cap{display:block;margin-bottom:6px}
.trail p{font:400 15.5px/1.35 var(--fell)}
.trail a{padding:14px 3px;margin:-14px -3px;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.more{position:absolute;left:48px;right:48px;bottom:48px;display:flex;justify-content:space-between;align-items:center}
.more a{font:700 12px/1 var(--type);letter-spacing:.16em;text-transform:uppercase;color:var(--navy);padding:16px 0 12px;border-bottom:1px solid var(--navy)}
.more a:hover{color:var(--rib);border-color:var(--rib)}

/* ledger: the index of the newest entries */
.ledger h4{font:700 32px/1 var(--bl);color:var(--navy);margin:2px 0 10px}
.ledger .lede{font:italic 16px/1.3 var(--fell);color:var(--ink-2);margin-bottom:12px}
.rows{list-style:none;border-top:1px solid var(--ink)}
.rows li a{display:grid;grid-template-columns:40px 34px minmax(0,1fr) auto 64px;align-items:center;gap:10px;height:54px;border-bottom:1px solid var(--vel-d);transition:background .2s}
.rows li a:hover{background:var(--vel-2)}
.rows .no{font:700 12px/1 var(--type);color:var(--ink-2)}
.rows img.a{width:34px;height:34px;border-radius:50%;object-fit:cover;background:var(--vel-2)}
.rows .nm{min-width:0}
.rows .nm b{display:block;font:700 21px/1 var(--bl);color:var(--navy);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rows .nm span{display:block;font:italic 13px/1.2 var(--fell);color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px}
.rows img.e{width:32px;height:32px;object-fit:contain}
.rows .ath{font:700 15px/1 var(--type);text-align:right;color:var(--ink)}
.rows .ath small{display:block;font:400 11px/1 var(--type);color:var(--ink-2);margin-top:4px}
.invite{position:absolute;left:48px;right:48px;bottom:46px;border:1px solid var(--ink);outline:1px solid var(--ink);outline-offset:-5px;padding:18px 20px;text-align:center;background:var(--vel)}
.invite p{font:italic 17px/1.35 var(--fell);margin-bottom:12px}
.invite p b{font-style:normal;font-family:var(--type);font-size:15px}
.invite .cloth{min-height:42px}

/* category tabs on the fore-edge */
.tabs{position:absolute;left:calc(var(--pw) * 2 - 6px);top:28px;bottom:28px;width:40px;display:flex;flex-direction:column;justify-content:space-between}
.tab{position:relative;display:block;width:40px;height:calc((var(--ph) - 56px) / 12 - 6px);background:var(--vel-2);border:1px solid var(--vel-d);border-left:0;border-radius:0 6px 6px 0;transform-style:flat;transition:transform .3s cubic-bezier(.2,.7,.2,1),background .2s}
.tab img{position:absolute;right:6px;top:50%;width:24px;height:24px;margin-top:-12px;object-fit:contain}
.tab:hover{transform:translateX(8px);background:var(--vel)}
.tab span{position:absolute;left:calc(100% + 12px);top:50%;transform:translateY(-50%);font:700 11px/1 var(--type);letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;color:var(--navy);opacity:0;transition:opacity .2s}
.tab:hover span{opacity:1}

/* ------------------------------------------------ after the book: the Reading Room plate */
.after{min-height:40svh;display:grid;place-items:center;padding:80px 16px}
.room-c{width:100%;max-width:560px;background:var(--vel);color:var(--ink);border:1px solid var(--ink);outline:1px solid var(--ink);outline-offset:-6px;padding:34px 30px 30px;text-align:center}
.room-c h2{font:400 clamp(30px,6vw,44px)/1 var(--bl);color:var(--navy);margin-bottom:14px}
.room-c p{font:italic 18px/1.42 var(--fell);margin:0 auto 16px;max-width:42ch}
.room-c p b{font:700 15px/1 var(--type);font-style:normal}
.room-st{display:inline-block;font:700 12px/1 var(--type)!important;font-style:normal!important;letter-spacing:.16em;text-transform:uppercase;color:var(--rib);border:1px solid var(--rib);padding:9px 12px}
.room-st[hidden]{display:none}
.room-c .cloth{display:flex;width:max-content;margin:4px auto 0}
.ftr{display:flex;flex-wrap:wrap;gap:6px 24px;justify-content:center;align-items:center;padding:40px 16px 56px;font:700 12px/1 var(--type);letter-spacing:.16em;text-transform:uppercase}
.ftr a{display:inline-flex;align-items:center;justify-content:center;min-height:40px;min-width:40px;padding:0 4px}
.ftr span{font:700 22px/1 var(--bl);letter-spacing:0;text-transform:none}
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);background:var(--navy);color:var(--vel);font:700 12px/1 var(--type);letter-spacing:.14em;text-transform:uppercase;padding:14px 18px;opacity:0;transition:opacity .25s,transform .25s;z-index:60;pointer-events:none}
.toast.on{opacity:1;transform:translate(-50%,0)}
.ns{position:absolute;inset:0;display:grid;place-items:center;font:italic 20px/1.4 var(--fell);color:var(--navy);text-align:center;padding:24px}

/* ------------------------------------------------ phone: one page at a time, its own composition */
@media (max-width:760px){
  :root{--hdr:56px}
  .nav{display:none}
  .nav+.hdr-r{margin-left:auto}
  .brand span{font-size:22px}
  .cloth.sm .wide{display:none}
  .title{top:calc(var(--hdr) + 4px)}
  .title span{font-size:clamp(54px,16.6vw,96px)}
  .side.l{top:auto;bottom:84px;left:0;right:0;transform:none;display:flex;justify-content:center;gap:40px;text-align:center}
  .tally .k{margin-bottom:6px}
  .side.r{display:none}
  .tally .n{font-size:22px}
  .cta{gap:8px;bottom:18px}
  .cta .cloth{min-height:46px;padding:0 16px;font-size:11.5px}
  .plate-ca{height:46px;gap:8px;padding:0 10px}
  .plate-ca b{font-size:18px;padding-right:8px}
  .plate-ca .v{max-width:11ch;font-size:13px}
  .plate-ca .c{display:none}
  .xbtn.lg{height:46px;width:46px;padding:0}
  .xbtn.lg span{display:none}
  .cue{display:none}
  .pc{font-size:24px;padding:58px 46px 48px}
  .m .pc{padding:58px 46px 48px}
  .m .rh{font-size:14px}
  .m .fs h2{font-size:84px}
  .m .why li{font-size:25px}
  .m .why li::before{font-size:20px}
  .m .entry h4,.m .ledger h4{font-size:44px}
  .m .stats{grid-template-columns:1fr}
  .m .stats div:nth-child(odd){padding-right:0;border-right:0}
  .m .stats div:nth-child(even){padding-left:0}
  .m .stats dt{font-size:21px}.m .stats dd{font-size:22px}
  .m .trail p{font-size:21px}
  .m .more{left:46px;right:46px;bottom:56px}
  .m .more a{font-size:16px}
  .m .plate .rh{align-self:stretch}
.plate .acc{font-size:16px}.m .plate .acc b{font-size:70px}
  .m .plate .mount{width:380px;height:380px}
  .m .plate h3{font-size:72px}
  .m .plate .tick{font-size:20px}
  .m .plate .label span{font-size:22px}.m .plate .label b{font-size:14px}
  .m .rows li a{grid-template-columns:52px minmax(0,1fr) auto;height:84px;gap:14px}
  .m .rows .no,.m .rows img.e{display:none}
  .m .rows img.a{width:52px;height:52px}
  .m .rows .nm b{font-size:30px}.m .rows .nm span{font-size:18px}
  .m .rows .ath{font-size:20px}.m .rows .ath small{font-size:15px}
  .m .ledger .lede{font-size:22px}
  .m .invite{left:46px;right:46px;bottom:56px}
  .m .invite p{font-size:22px}.m .invite p b{font-size:19px}
  .m .tabs{display:none}
  .m .pp.arch{width:calc(var(--pw) * .96);left:calc(var(--pw) * .02);bottom:calc(var(--ph) * .52)}
  .m .pp.med{width:200px;left:calc(var(--pw) * .5 - 100px);bottom:calc(var(--ph) * .02)}
  .m .med .disc{width:200px;height:200px}
  .m .med .card{width:220px;margin-left:-10px}
  .m .ribbon{right:auto;left:14px}
  .m .star{padding:6px}
  .m .star b{font-size:15px;padding:3px 6px}
}
/* the smallest phones: the three buttons keep one row so they never sit over the tallies */
@media (max-width:360px){
  .cta{gap:6px;padding:0 12px;flex-wrap:nowrap}
  .cta .cloth{padding:0 14px;letter-spacing:.12em}
  .plate-ca .v{display:none}
  .plate-ca b{padding-right:0;border-right:0}
}
@media (prefers-reduced-motion:reduce){
  .cue i{animation:none}
  .why .w{opacity:1;transition:none}
}