/* Trenchpedia: the book that writes itself. One folio on a celadon library wall; the whole page is that book. Materials and type: folio.css */

: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:var(--disp); --fell:var(--text); --hand:var(--script); --type:var(--lab);
  --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,.m-ex{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}
.hdr::before{content:"";position:absolute;inset:0;z-index:-1;background:#17264A url(/assets/art/tooled.webp) 0 0/300px;box-shadow:inset 0 -1px 0 rgba(180,138,60,.7),0 6px 14px rgba(5,10,24,.35);opacity:0;transition:opacity .3s}
.past .hdr::before{opacity:1}
.past .brand{color:var(--vel)}
.brand{display:flex;align-items:center;gap:10px;min-height:44px;font:900 25px/1 var(--bl);letter-spacing:-.01em;color:var(--navy)}
.nav{display:flex;gap:6px;margin:0 auto;align-self:flex-start;padding-top:12px}
.hdr-r{display:flex;align-items:center;gap:12px;margin-left:auto}
.nav+.hdr-r{margin-left:0}
/* hero actions sit in one row; the ex-libris carries the CA */
.cta .m-plate{min-width:236px}
.cta .m-ex .v{max-width:16ch}

/* ------------------------------------------------ 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:linear-gradient(rgba(175,195,166,.5),rgba(175,195,166,.5)),var(--wall) url(/assets/art/wall.webp) 0 0/560px 560px repeat}
.stage::before{content:"";position:absolute;left:0;right:0;bottom:0;height:min(62svh,620px);pointer-events:none;
  background:url(/assets/art/shelves.webp) 50% 100%/auto 100% no-repeat;opacity:.13;-webkit-mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent)}
.stage::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(90% 70% at 50% 40%,rgba(175,195,166,0) 40%,rgba(84,108,82,.32) 100%),linear-gradient(180deg,rgba(175,195,166,.55),rgba(175,195,166,0) 26%)}
.title{position:absolute;left:0;right:0;top:calc(var(--hdr) - 6px);text-align:center;pointer-events:none;z-index:1}
.title span{display:inline-block;font:900 clamp(60px,13.4vw,220px)/.9 var(--bl);letter-spacing:-.025em;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 13px/1 var(--type);letter-spacing:.14em;text-transform:uppercase;color:var(--wall-ink);margin-bottom:8px}
.tally .n{font:700 clamp(30px,2.6vw,40px)/1 var(--num);font-variant-numeric:tabular-nums lining-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 12px/1 var(--type);letter-spacing:.14em;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 12px/1 var(--type);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-2)}
.n{font-variant-numeric:tabular-nums lining-nums}

/* frontispiece */
.fs{display:flex;flex-direction:column;height:100%}
.fs h2{font:900 58px/.92 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 54px/1.2 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 16px/1.4 var(--text);color:var(--ink-2)}
.fs .meta b{font-family:var(--num)}
.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(--num);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 13px/1 var(--num);color:var(--ink-2)}
.wrote .nm{font:700 21px/1.1 var(--bl);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 15px/1 var(--num)}
.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 12px/1 var(--num);letter-spacing:.02em;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 13px/1 var(--type);letter-spacing:.14em;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 12px/1 var(--type);letter-spacing:.1em;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:800 30px/1.05 var(--bl);color:var(--navy);margin:6px 0 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.med .card span{font:700 15px/1.2 var(--num);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 14px/1 var(--type);letter-spacing:.16em;color:var(--ink-2);margin-top:6px}
.plate .acc b{display:block;font:700 56px/1 var(--num);letter-spacing:.01em;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:900 50px/1 var(--bl);color:var(--navy);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plate .tick{font:italic 400 17px/1.1 var(--text);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 12px/1 var(--type);letter-spacing:.13em;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 16px/1 var(--fell);color:var(--ink-2)}
.stats dd{font:700 17px/1 var(--num);color:var(--ink);font-variant-numeric:tabular-nums lining-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}

/* 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 13px/1 var(--num);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:800 19px/1.05 var(--bl);letter-spacing:.005em;color:var(--navy);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rows .nm span{display:block;font:italic 14px/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 16px/1 var(--num);text-align:right;color:var(--ink)}
.rows .ath small{display:block;font:italic 400 13px/1 var(--text);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(--num);font-size:16px}
.invite .mb{margin-top:2px}
.invite{background:var(--vel) url(/assets/art/paper.webp) 0 0/640px}

/* 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 13px/1 var(--type);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;color:var(--navy);opacity:0;transition:opacity .2s}
.tab:hover span{opacity:1}

/* ------------------------------------------------ after the book: the film and the Reading Room on a marbled endpaper */
.after.s-marble{background-image:linear-gradient(rgba(16,27,54,.58),rgba(16,27,54,.58)),url(/assets/art/marble.webp)}
.after{position:relative;display:grid;justify-items:center;gap:clamp(40px,6vw,72px);padding:clamp(72px,9vw,120px) 16px;box-shadow:inset 0 14px 18px -12px rgba(14,24,52,.55),inset 0 -14px 18px -12px rgba(14,24,52,.55)}
.room-c{position:relative;width:100%;max-width:600px;background:var(--vel) url(/assets/art/paper.webp) 0 0/640px;color:var(--ink);padding:44px 40px 40px;text-align:center;
  box-shadow:0 1px 0 #D9CDB0,0 2px 0 #EFE6D0,0 3px 0 #CDBF9F,0 22px 40px rgba(8,14,30,.45)}
.room-c::before{content:"";position:absolute;inset:12px;border:1px solid var(--ink);outline:1px solid var(--ink);outline-offset:-5px;pointer-events:none}
.room-c h2{font:900 clamp(32px,6vw,46px)/1 var(--bl);color:var(--navy);margin-bottom:14px;letter-spacing:-.015em}
.room-c p{font:italic 19px/1.45 var(--fell);margin:0 auto 18px;max-width:42ch}
.room-c p b{font:700 17px/1 var(--num);font-style:normal}
.room-st{display:inline-block;font:700 13px/1 var(--type)!important;font-style:normal!important;letter-spacing:.12em;text-transform:uppercase;color:var(--f-ox);border:1px solid var(--f-ox);padding:9px 12px}
.room-st[hidden]{display:none}
.room-c .mb{display:flex;width:max-content;margin:6px auto 0}
/* the film, mounted like a plate in a sunk frame */
.film{position:relative;width:min(1040px,100%);margin:0;background:var(--navy) url(/assets/art/cloth.webp) 0 0/256px;padding:18px 18px 6px;
  box-shadow:inset 0 0 0 1px var(--gilt),inset 0 0 0 6px var(--navy),inset 0 0 0 7px rgba(180,138,60,.6),0 22px 40px rgba(8,14,30,.45)}
.fp-scr{position:relative;aspect-ratio:16/9;background:var(--navy-d);overflow:hidden;box-shadow:0 0 0 1px rgba(226,198,124,.5)}
.fp-scr video,.fp-scr>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.fp-card{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:14px;text-align:center;color:var(--vel);pointer-events:none}
.fp-card b{font:900 clamp(30px,5vw,72px)/1 var(--bl)}
.fp-big{position:absolute;left:50%;bottom:clamp(16px,8%,56px);transform:translateX(-50%);z-index:2;display:flex;align-items:center;gap:0;padding:0;background:none}
.fp-big span{margin-left:-10px;padding:12px 18px 12px 22px;background:var(--navy) url(/assets/art/cloth.webp) 0 0/256px;box-shadow:inset 0 0 0 1px var(--gilt),0 4px 10px rgba(8,14,30,.35);
  font:700 15px/1 var(--sc);letter-spacing:.06em;color:var(--f-gilt-l);white-space:nowrap}
.fp-big .m-knob{z-index:1}
.fp-big .m-knob{width:72px;height:72px}
.film.playing .fp-big{display:none}
.fp-bar{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto auto auto;align-items:center;gap:16px;padding:10px 2px 8px;color:var(--vel)}
.fp-b{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;font:700 13px/1 var(--type);letter-spacing:.1em;text-transform:uppercase;color:var(--f-gilt-l)}
.fp-b:hover{color:var(--vel)}
.fp-fs{border:1px solid rgba(226,198,124,.6)}
.fp-fs svg{width:14px;height:14px}
.fp-pp{flex:none}
.fp-tl{position:relative;height:44px;cursor:pointer;touch-action:none}
.fp-tl::before{content:"";position:absolute;left:0;right:0;top:21px;height:1px;background:rgba(226,198,124,.7)}
.fp-sc{position:absolute;left:0;top:25px;width:100%;height:12px;overflow:visible}
.fp-sc path{stroke:rgba(226,198,124,.55);stroke-width:1;vector-effect:non-scaling-stroke}
.fp-fill{position:absolute;left:0;right:0;top:20px;height:3px;background:var(--f-gilt-l);transform:scaleX(0);transform-origin:0 50%}
.fp-k{position:absolute;top:10px;width:1px;height:24px;background:var(--vel);transform:translateX(-.5px)}
.fp-k::before{content:"";position:absolute;left:-4px;top:-5px;width:9px;height:9px;background:var(--vel);transform:rotate(45deg)}
.fp-t{font:700 15px/1 var(--num);font-variant-numeric:tabular-nums lining-nums;white-space:nowrap;min-width:96px;text-align:right}
.fp-m{min-width:64px}
.fp-vol{display:flex;align-items:center}
.fp-vol button{display:flex;align-items:flex-end;justify-content:center;width:14px;height:44px;padding-bottom:14px}
.fp-vol i{display:block;width:3px;background:rgba(226,198,124,.35)}
.fp-vol button:nth-child(1) i{height:6px}.fp-vol button:nth-child(2) i{height:9px}.fp-vol button:nth-child(3) i{height:12px}.fp-vol button:nth-child(4) i{height:15px}
.fp-vol button.on i{background:var(--f-gilt-l)}
.film:fullscreen{padding:0;display:flex;flex-direction:column;justify-content:center}
.film:fullscreen .fp-scr{flex:1;aspect-ratio:auto}
.film:fullscreen video{object-fit:contain}
.film:fullscreen .fp-bar{padding:8px 18px}
[hidden]{display:none!important}
@media (max-width:800px){.fp-vol{display:none}.fp-bar{grid-template-columns:auto minmax(0,1fr) auto auto auto;gap:10px}.fp-t{min-width:0;font-size:14px}.film{padding:10px 10px 4px}.fp-big .m-knob{width:58px;height:58px}}
@media (max-width:420px){.fp-m{display:none}.fp-bar{grid-template-columns:auto minmax(0,1fr) auto auto}.fp-big span{display:none}.fp-big{padding:0}}
/* the binding at the foot of the page */
.ftr{display:flex;flex-wrap:wrap;gap:6px 26px;justify-content:center;align-items:center;padding:44px 16px 56px;font:700 14px/1 var(--type);letter-spacing:.1em;text-transform:uppercase;color:var(--f-gilt-l);box-shadow:inset 0 1px 0 var(--gilt),inset 0 6px 0 var(--navy),inset 0 7px 0 rgba(180,138,60,.55)}
.ftr a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 4px}
.ftr a:hover{color:var(--vel)}
.ftr span{font:900 26px/1 var(--bl);letter-spacing:-.01em;text-transform:none;color:var(--vel)}
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);background:var(--navy) url(/assets/art/cloth.webp) 0 0/256px;color:var(--vel);font:700 14px/1 var(--type);letter-spacing:.1em;box-shadow:inset 0 0 0 1px var(--gilt),0 8px 20px rgba(14,24,52,.3);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}
  .m-plate.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 .m-plate{min-width:0;min-height:50px;padding:0 18px;font-size:14.5px;border-image-width:15px 18px}
  .cta .m-ex{min-height:50px;gap:9px;padding:0 16px 0 15px;border-image-width:13px 16px}
  .cta .m-ex b{font-size:19px;padding-right:9px}
  .cta .m-ex .v{max-width:9ch;font-size:14px}
  .cta .m-ex .c{display:none}
  .m-seal.lg{padding:0}
  .cta{flex-wrap:nowrap}
  .m-seal.lg .wax{width:50px;height:50px}
  .m-seal.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:430px){
  .cta .m-plate{padding:0 16px;font-size:14px}
  .cta .m-ex .v{display:none}
  .cta .m-ex b{padding-right:0;border-right:0}
}
@media (max-width:360px){
  .cta{gap:6px;padding:0 12px;flex-wrap:nowrap}
  .cta .m-plate{padding:0 14px;letter-spacing:.03em}
  .cta .m-ex .v{display:none}
  .cta .m-ex b{padding-right:0;border-right:0}
}
@media (prefers-reduced-motion:reduce){
  .cue i{animation:none}
  .why .w{opacity:1;transition:none}
}
.past .brand img{background:#F1EAD8;border-radius:4px;padding:2px}
.fp-vol,.fp-vol button{cursor:pointer}
@media (max-width:1000px){.nav{display:none}.nav+.hdr-r{margin-left:auto}}
/* short landscape phones: the actions go small so they stay off the book's edge */
@media (max-height:520px) and (min-width:761px){
  .cta{gap:8px;bottom:10px}
  .cta .m-plate{min-width:0;min-height:42px;padding:0 18px;font-size:13.5px;border-image-width:13px 16px}
  .cta .m-ex{min-height:42px;border-image-width:12px 15px}.cta .m-ex .v{display:none}.cta .m-ex b{font-size:18px;padding-right:0;border-right:0}.cta .m-ex .c{display:none}
  .m-seal.lg{padding:0}.m-seal.lg span{display:none}.m-seal.lg .wax{width:44px;height:44px}
  .cue{display:none}
}