/* Trenchpedia: the materials of the folio. Shared by the book (index) and the single leaves (docs, entries, constellations, 404).
   Type: Fraunces (display, soft + wonky cut), Alegreya (text), Alegreya SC (stamped labels), Alegreya Sans (figures, tabular),
   Alegreya Sans SC (captions), Petit Formal Script (one accent: the name being written).
   Buttons are bound objects: leather plate, wax seal, ex-libris, spine label, brass plate, brass boss, silk ribbon. */
@font-face{font-family:"Fraunces";src:url(/assets/fonts/Fraunces.woff2) format("woff2");font-weight:600 900;font-display:swap}
@font-face{font-family:"Alegreya";src:url(/assets/fonts/Alegreya.woff2) format("woff2");font-weight:400 900;font-display:swap}
@font-face{font-family:"Alegreya";src:url(/assets/fonts/Alegreya-Italic.woff2) format("woff2");font-weight:400 900;font-style:italic;font-display:swap}
@font-face{font-family:"Alegreya SC";src:url(/assets/fonts/AlegreyaSC-Bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Alegreya Sans";src:url(/assets/fonts/AlegreyaSans-Bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Alegreya Sans SC";src:url(/assets/fonts/AlegreyaSansSC-Bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Petit Formal Script";src:url(/assets/fonts/PetitFormal.woff2) format("woff2");font-display:swap}

:root{
  --disp:"Fraunces",Georgia,serif; --text:"Alegreya",Georgia,serif; --sc:"Alegreya SC","Alegreya",Georgia,serif;
  --lab:"Alegreya Sans SC","Alegreya Sans",system-ui,sans-serif; --num:"Alegreya Sans",system-ui,sans-serif; --script:"Petit Formal Script",cursive;
  --f-navy:#17264A; --f-navy-d:#0E1834; --f-gilt:#B48A3C; --f-gilt-l:#E2C67C; --f-vel:#F1EAD8; --f-ink:#2A2320; --f-ox:#6E2A26; --f-wax:#3B1411;
  --sh-rest:drop-shadow(0 2px 0 rgba(14,24,52,.32)) drop-shadow(0 7px 10px rgba(14,24,52,.2));
  --sh-up:drop-shadow(0 4px 0 rgba(14,24,52,.26)) drop-shadow(0 14px 16px rgba(14,24,52,.22));
  --sh-down:drop-shadow(0 0 0 rgba(14,24,52,0)) drop-shadow(0 2px 3px rgba(14,24,52,.3));
}
.n,.num{font-family:var(--num);font-weight:700;font-variant-numeric:tabular-nums lining-nums!important;font-feature-settings:"tnum","lnum"}

/* ------------------------------------------------ the material button: lifts on hover, sinks on press, catches a sheen */
.mb{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;white-space:nowrap;text-decoration:none;
  border:0 solid transparent;background:none;color:inherit;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;
  filter:var(--sh-rest);transform:translate3d(0,0,0);transition:transform .22s cubic-bezier(.3,.8,.3,1),filter .22s}
.mb>*{position:relative;z-index:1}
.mb::after{content:"";position:absolute;inset:var(--shi,5px);z-index:2;pointer-events:none;border-radius:var(--shr,0);
  background:linear-gradient(104deg,transparent 0 38%,rgba(255,246,222,.32) 47%,rgba(255,246,222,.06) 53%,transparent 60% 100%) 150% 0/260% 100% no-repeat;opacity:0}
@media (hover:hover){
  .mb:hover{transform:translate3d(0,-2px,0);filter:var(--sh-up)}
  .mb:hover::after{opacity:1;background-position:-60% 0;transition:background-position .75s cubic-bezier(.3,.6,.2,1),opacity .1s}
}
.mb:active{transform:translate3d(0,2px,0) scale(.985);filter:var(--sh-down);transition-duration:.07s}
.mb:focus-visible{outline:2px dashed var(--f-gilt);outline-offset:5px}
.mb[aria-disabled=true],.mb:disabled{filter:saturate(.55) var(--sh-rest);cursor:help}
.mb[aria-disabled=true]:active{transform:translate3d(0,1px,0)}

/* 1. pump.fun: navy morocco plate, double gilt fillet, gilt-stamped letters */
.m-plate{min-height:56px;padding:0 34px;border-image:url(/assets/art/plate.webp) 80 96 fill / 17px 20px stretch;
  font:700 16px/1 var(--sc);letter-spacing:.06em;color:var(--f-gilt-l);text-shadow:0 -1px 0 rgba(0,0,0,.55),0 1px 0 rgba(255,232,170,.12)}
.m-plate b{font-weight:inherit}
.m-plate.sm{min-height:44px;padding:0 24px;font-size:14px;border-image-width:13px 16px}

/* 2. X: a wax seal, the mark pressed into it */
.m-seal{width:54px;height:54px;padding:0;border-radius:50%;background:url(/assets/art/seal.webp) center/100% 100% no-repeat;color:var(--f-wax);--shr:50%;--shi:8px}
.m-seal svg{width:19px;height:19px;color:#240806;filter:drop-shadow(0 1px 0 rgba(255,196,176,.45))}
@media (hover:hover){.m-seal:hover{transform:translate3d(0,-2px,0) rotate(-8deg)}}
.m-seal:active{transform:translate3d(0,1px,0) scale(.93)}
.m-seal.sm{width:46px;height:46px}.m-seal.sm svg{width:15px;height:15px}
.m-seal.lg{width:auto;height:56px;padding:0 18px 0 0;border-radius:0;background:none;color:var(--f-navy);filter:none;gap:12px;font:700 15px/1 var(--sc);letter-spacing:.06em}
.m-seal.lg::after{display:none}
.m-seal.lg .wax{width:56px;height:56px;display:grid;place-items:center;background:url(/assets/art/seal.webp) center/100% 100% no-repeat;color:var(--f-wax);filter:var(--sh-rest);transition:transform .22s cubic-bezier(.3,.8,.3,1),filter .22s}
@media (hover:hover){.m-seal.lg:hover{transform:none;filter:none}.m-seal.lg:hover .wax{transform:translate3d(0,-2px,0) rotate(-8deg);filter:var(--sh-up)}}
.m-seal.lg:active .wax{transform:scale(.93);filter:var(--sh-down)}

/* 3. CA: an ex-libris bookplate pasted in */
.m-ex{min-height:56px;padding:0 26px 0 24px;gap:14px;border-image:url(/assets/art/bookplate.webp) 64 80 fill / 15px 19px stretch;color:var(--f-ink);text-align:left;max-width:100%}
.m-ex b{font:800 22px/1 var(--disp);color:var(--f-navy);padding-right:13px;border-right:1px solid rgba(42,35,32,.28)}
.m-ex .v{font:700 15px/1 var(--num);font-variant-numeric:tabular-nums;max-width:22ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.m-ex.pending .v{font:italic 500 17px/1 var(--text);color:#5B4F45}
.m-ex .c{font:700 12px/1 var(--lab);letter-spacing:.12em;color:var(--f-ox)}
.m-ex.pending .c{display:none}
.m-ex.ok .c{animation:stamp .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes stamp{0%{transform:scale(1.7) rotate(-8deg);opacity:0}100%{transform:none;opacity:1}}

/* 4. "Open the entry": an oxblood spine label, gilt lettering */
.m-label{min-height:48px;padding:0 26px;border-image:url(/assets/art/label.webp) 30 40 fill / 7px 9px stretch;
  font:700 14.5px/1 var(--sc);letter-spacing:.07em;color:var(--f-gilt-l);text-shadow:0 -1px 0 rgba(0,0,0,.5)}
.m-label svg{width:20px;height:9px;flex:none;transition:transform .25s}
@media (hover:hover){.m-label:hover svg{transform:translateX(3px)}}

/* 5. The Reading Room: a brass nameplate, the words engraved */
.m-brass{min-height:54px;padding:0 34px;border-image:url(/assets/art/brassplate.webp) 60 fill / 14px stretch;
  font:700 15.5px/1 var(--sc);letter-spacing:.07em;color:#3A2A0E;text-shadow:0 1px 0 rgba(255,238,190,.5)}
.m-brass.sm{min-height:44px;padding:0 24px;font-size:14px;border-image-width:12px}

/* 6. the film: a brass boss */
.m-knob{width:64px;height:64px;padding:0;border-radius:50%;background:url(/assets/art/knob.webp) center/100% 100% no-repeat;color:#33250B;--shr:50%;--shi:9px}
.m-knob svg{width:16px;height:18px;margin-left:3px;filter:drop-shadow(0 1px 0 rgba(255,238,190,.55))}
.m-knob.sm{width:46px;height:46px}.m-knob.sm svg{width:11px;height:13px;margin-left:2px}

/* 7. navigation: silk bookmark ribbons, pulled out a little on hover */
.m-rib{min-height:38px;padding:0 30px 0 16px;border-image:url(/assets/art/ribbon-h-navy.webp) 0 104 0 16 fill / 0 25px 0 4px stretch;
  font:700 14.5px/1 var(--sc);letter-spacing:.05em;color:var(--f-vel);text-shadow:0 -1px 0 rgba(0,0,0,.35);filter:drop-shadow(0 2px 2px rgba(14,24,52,.28))}
.m-rib.gilt{border-image-source:url(/assets/art/ribbon-h-gilt.webp);color:#2B1F08;text-shadow:0 1px 0 rgba(255,236,190,.35)}
.m-rib.sage{border-image-source:url(/assets/art/ribbon-h-sage.webp);color:#F3EEDD}
.m-rib::after{display:none}
@media (hover:hover){.m-rib:hover{transform:translate3d(5px,0,0);filter:drop-shadow(0 3px 3px rgba(14,24,52,.3))}}
.m-rib:active{transform:translate3d(8px,1px,0)}

/* ------------------------------------------------ surfaces */
.s-wall{background:linear-gradient(rgba(175,195,166,.5),rgba(175,195,166,.5)),#AFC3A6 url(/assets/art/wall.webp) 0 0/560px 560px repeat}
.s-marble{background:#24365C url(/assets/art/marble.webp) 0 0/720px 720px repeat}
.s-leather{background:#17264A url(/assets/art/tooled.webp) 0 0/300px 300px repeat}
.s-cloth{background:#17264A url(/assets/art/cloth.webp) 0 0/256px 256px repeat}
.s-paper{background:#F1EAD8 url(/assets/art/paper.webp) 0 0/640px 640px repeat}

@media (prefers-reduced-motion:reduce){.mb,.mb::after,.m-seal.lg .wax{transition:none!important}.m-ex.ok .c{animation:none}}