:root{
  --paper:#efe3c8; --paper2:#e6d6b5; --ink:#1d1812; --ink2:#4a3f33; --pencil:#6d6a66;
  --pw:520px; --ph:780px;
  --serif:'Libre Caslon Text', 'Iowan Old Style', Georgia, serif;
  --display:'Fraunces', 'Cooper Black', Georgia, serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:#2a1e16;
  background:radial-gradient(ellipse at 50% 38%, #5a3f2c 0%, #3a281c 45%, #1c140e 100%);
  color:var(--ink); font-family:var(--serif); overflow:hidden;
  -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent;
}
button{font:inherit;color:inherit}

/* ---------- loader: pages riffling ---------- */
.loader{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  background:inherit;transition:opacity .5s}
.loader.done{opacity:0;pointer-events:none}
.loader-pages{position:relative;width:120px;height:160px}
.loader-pages span{position:absolute;inset:0;background:var(--paper);border-radius:1px 4px 4px 1px;transform-origin:left center;
  box-shadow:0 1px 2px rgba(0,0,0,.35);animation:riffle 1.1s infinite ease-in-out}
.loader-pages span:nth-child(2){animation-delay:.12s}.loader-pages span:nth-child(3){animation-delay:.24s}
.loader-pages span:nth-child(4){animation-delay:.36s}.loader-pages span:nth-child(5){animation-delay:.48s}
@keyframes riffle{0%,30%{transform:perspective(500px) rotateY(0)}70%,100%{transform:perspective(500px) rotateY(-170deg);opacity:.4}}
.loader-num{font:700 15px var(--serif);color:var(--paper);letter-spacing:.06em;min-height:1em}
.loader-bar{width:120px;height:2px;background:rgba(239,227,200,.18)}
.loader-bar i{display:block;height:100%;width:0;background:var(--paper);transition:width .25s}

/* ---------- stage ---------- */
.stage{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;perspective:2400px}

/* ---------- cover ---------- */
.cover{position:relative;width:var(--pw);height:var(--ph);padding:0;border:0;cursor:pointer;background:transparent;
  border-radius:3px 8px 8px 3px;transform-origin:left center;transform-style:preserve-3d;
  box-shadow:0 30px 60px rgba(0,0,0,.55),0 4px 10px rgba(0,0,0,.4), inset 4px 0 6px rgba(255,255,255,.12);
  transition:transform .9s cubic-bezier(.5,.05,.3,1), box-shadow .9s;}
.cover:focus-visible{outline:3px solid #f2c14e;outline-offset:6px}
.cover-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.cover::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.35) 0,rgba(255,255,255,.18) 1.2%,rgba(0,0,0,.18) 2.6%,transparent 5%),
             linear-gradient(180deg,rgba(255,255,255,.10),transparent 30%,transparent 80%,rgba(0,0,0,.18));}
.cover-type{position:absolute;left:0;right:0;top:7%;display:flex;flex-direction:column;align-items:center;gap:.2em;pointer-events:none;z-index:2}
.cover-author{font:700 calc(var(--pw)*.052)/1 var(--display);font-variation-settings:'SOFT' 100;letter-spacing:.14em;text-transform:uppercase;
  color:#fff7e0;text-shadow:0 2px 0 #7a2412,0 3px 8px rgba(0,0,0,.45)}
.cover-title{font:900 calc(var(--pw)*.19)/.92 var(--display);font-variation-settings:'SOFT' 100,'opsz' 144;letter-spacing:-.01em;
  color:#ffd23f;-webkit-text-stroke:2px #7a2412;
  text-shadow:0 3px 0 #7a2412,0 6px 0 #4a120a,0 10px 18px rgba(0,0,0,.45)}
.stage.open .cover{transform:translateX(50%) rotateY(-178deg);box-shadow:0 10px 20px rgba(0,0,0,.2);pointer-events:none}

/* ---------- open book ---------- */
.book{position:absolute;width:calc(var(--pw)*2);height:var(--ph);transform-style:preserve-3d}
.book[hidden]{display:none}
.block{position:absolute;inset:-6px -10px -12px -10px;border-radius:6px;
  background:linear-gradient(#d9c7a3,#cdb994);
  box-shadow:0 34px 70px rgba(0,0,0,.6),0 6px 14px rgba(0,0,0,.4);}
.block::before,.block::after{content:"";position:absolute;top:4px;bottom:6px;width:10px;
  background:repeating-linear-gradient(90deg,#e9dcbc 0 1px,#cbb48c 1px 2px)}
.block::before{left:0;border-radius:6px 0 0 6px}.block::after{right:0;border-radius:0 6px 6px 0}
.page{position:absolute;top:0;width:var(--pw);height:var(--ph);background-color:var(--paper);overflow:hidden;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .27 0 0 0 0 .16 0 0 0 .10 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");}
.page.left{left:0;border-radius:4px 0 0 4px;
  box-shadow:inset -38px 0 40px -26px rgba(70,45,20,.55), inset 0 0 60px rgba(150,110,60,.18)}
.page.right{left:var(--pw);border-radius:0 4px 4px 0;
  box-shadow:inset 38px 0 40px -26px rgba(70,45,20,.55), inset 0 0 60px rgba(150,110,60,.18)}
.spine{position:absolute;left:calc(var(--pw) - 1px);top:0;width:2px;height:100%;background:rgba(60,40,20,.35)}

.inner{position:absolute;inset:0;padding:calc(var(--ph)*.075) calc(var(--pw)*.12) calc(var(--ph)*.09);display:flex;flex-direction:column}
.left .inner{padding-right:calc(var(--pw)*.13)}
.right .inner{padding-left:calc(var(--pw)*.13)}
.scroll{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(60,40,20,.35) transparent;margin-right:-10px;padding-right:10px}
.folio{position:absolute;bottom:calc(var(--ph)*.035);left:0;right:0;text-align:center;font:400 calc(var(--pw)*.026)/1 var(--serif);color:var(--ink2);letter-spacing:.04em}
.pnum{font:700 calc(var(--pw)*.07)/1 var(--serif);text-align:center;margin:0 0 .7em;color:var(--ink)}

.text{font-size:calc(var(--pw)*.034);line-height:1.62;hyphens:auto;-webkit-hyphens:auto;text-align:justify}
.text p{margin:0;text-indent:1.4em}
.text p:first-child{text-indent:0}
.text p+p{margin-top:.15em}
.text.lead p:first-child::first-letter{font-size:1em}

.choices{list-style:none;margin:1.2em 0 0;padding:0;font-size:calc(var(--pw)*.034);line-height:1.5}
.choices li{position:relative;margin:0 0 .9em;text-align:left}
.choice{display:block;width:100%;padding:0;border:0;background:none;text-align:left;cursor:pointer;font-style:normal;line-height:1.5}
.choice .if{font-style:normal}
.choice .turn{font-weight:700;white-space:nowrap}
.choice:hover .turn,.choice:focus-visible .turn{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.choice:focus-visible{outline:none}
.choice:focus-visible .if{background:rgba(255,220,120,.35)}
.choices.centered{margin-top:auto;margin-bottom:auto}
.tick{position:absolute;left:-1.7em;top:-.15em;width:1.3em;height:1.3em;opacity:.75}

.plate{display:flex;align-items:center;justify-content:center;flex:1;min-height:0}
.plate img{display:block;max-width:100%;max-height:100%;mix-blend-mode:multiply;filter:contrast(1.04) sepia(.08);user-select:none;-webkit-user-drag:none}
.plate.small{flex:0 0 auto;height:44%;margin:0 0 1em}

.theend{font:900 calc(var(--pw)*.1)/1 var(--display);font-variation-settings:'SOFT' 100;text-align:center;letter-spacing:.06em;margin:.8em 0 .6em;font-style:italic}
.after{list-style:none;padding:0;margin:0;font-size:calc(var(--pw)*.03);line-height:1.5;text-align:center}
.after li{margin:.35em 0}
.after button{border:0;background:none;padding:.2em;cursor:pointer;font-style:italic}
.after button:hover,.after button:focus-visible{text-decoration:underline}

/* title page */
.titlepage{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;text-align:center;gap:.6em}
.titlepage .t{font:900 calc(var(--pw)*.11)/1 var(--display);font-variation-settings:'SOFT' 100;letter-spacing:.01em}
.titlepage .a{font:400 calc(var(--pw)*.035)/1 var(--serif);letter-spacing:.24em;text-transform:uppercase}
.titlepage .orn{width:40%;height:1px;background:var(--ink);margin:.6em 0;position:relative}
.titlepage .orn::after{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;background:var(--paper);border:1px solid var(--ink);transform:translate(-50%,-50%) rotate(45deg)}
.titlepage .about{margin-top:2.6em;border:0;background:none;cursor:pointer;font:italic calc(var(--pw)*.028)/1 var(--serif);color:var(--ink2)}
.titlepage .about:hover{text-decoration:underline}

/* project pages */
.proj h2{font:700 calc(var(--pw)*.05)/1.1 var(--serif);margin:0;text-align:center}
.proj .client{font:400 calc(var(--pw)*.024)/1 var(--serif);letter-spacing:.24em;text-align:center;margin:.6em 0 1.2em;color:var(--ink2)}
.proj .desc{font-size:calc(var(--pw)*.031);line-height:1.6;margin:0 0 1em;text-align:justify;hyphens:auto}
.proj h3{font:700 calc(var(--pw)*.026)/1.2 var(--serif);letter-spacing:.14em;text-transform:uppercase;margin:1.6em 0 .5em;text-align:center}
.proj .sec{font-size:calc(var(--pw)*.028);line-height:1.55;margin:0 0 .7em;font-style:italic;text-align:center;color:var(--ink2)}
.proj .credits{font-size:calc(var(--pw)*.024);line-height:1.6;margin:1.6em 0 0;color:var(--ink2);text-align:center}
.say{font-size:calc(var(--pw)*.034);line-height:1.6;margin:1em 0 0;text-align:justify;hyphens:auto}

.films{display:grid;grid-template-columns:1fr;gap:.9em;margin:.4em 0}
.films.vertical{grid-template-columns:repeat(3,1fr)}
/* a portrait film that plays takes the whole line, as tall as the page allows, so the film and its controls read */
.films.vertical .film.big{grid-column:1/-1;justify-self:center;width:min(100%,calc(var(--ph)*.72*9/16))}
.film{margin:0}
.film .slot{position:relative;aspect-ratio:16/9;background:#1d1812;border:1px solid var(--ink);overflow:hidden}
.films.vertical .slot{aspect-ratio:9/16}
.film .slot button{position:absolute;inset:0;width:100%;border:0;cursor:pointer;color:var(--paper);background:#1d1812;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4em;padding:.4em}
.film .slot button img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55;filter:grayscale(1) contrast(1.1)}
.film .slot button .play{position:relative;width:3em;height:3em;border-radius:50%;border:2px solid var(--paper);display:flex;align-items:center;justify-content:center;background:rgba(29,24,18,.55)}
.film .slot button .play::after{content:"";border-left:.9em solid var(--paper);border-top:.55em solid transparent;border-bottom:.55em solid transparent;margin-left:.2em}
.film .slot button:hover .play,.film .slot button:focus-visible .play{background:rgba(160,40,20,.85)}
.film iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.film figcaption{font-size:calc(var(--pw)*.025);text-align:center;margin-top:.35em;font-style:italic}

.pics{display:grid;gap:.5em;margin:.4em 0}
.pics.row-2{grid-template-columns:1fr 1fr}.pics.row-3{grid-template-columns:1fr 1fr 1fr}.pics.full,.pics.one{grid-template-columns:1fr}
.pics.many{grid-template-columns:1fr 1fr}
.pics button{display:block;padding:0;border:0;background:none;cursor:zoom-in}
.pics img{display:block;width:100%;height:auto;outline:1px solid rgba(29,24,18,.6);outline-offset:-1px;background:#ddd}
/* a tall poster or board is shown whole, no taller than the page (the screen on a phone); a tap opens it full size */
.pics{--lim:calc(var(--ph)*.78)}
.pics img{width:min(100%,calc(var(--lim)*var(--r,99)));margin:0 auto}

.tracks{list-style:none;padding:0;margin:.3em 0}
.track{display:flex;align-items:center;gap:.6em;width:100%;border:0;background:none;padding:.35em 0;cursor:pointer;text-align:left;font-size:calc(var(--pw)*.029)}
.track .knob{flex:0 0 auto;width:1.7em;height:1.7em;border-radius:50%;border:1.5px solid var(--ink);display:flex;align-items:center;justify-content:center}
.track .knob::after{content:"";border-left:.55em solid var(--ink);border-top:.34em solid transparent;border-bottom:.34em solid transparent;margin-left:.12em}
.track.on .knob::after{border:0;width:.5em;height:.6em;margin:0;border-left:.17em solid var(--ink);border-right:.17em solid var(--ink)}
.track .bar{display:block;height:1px;background:rgba(29,24,18,.25);margin-top:.3em;position:relative}
.track .bar i{position:absolute;left:0;top:-1px;height:3px;background:var(--ink);width:0}
.track .tt{flex:1}

/* back matter */
.endings{list-style:none;padding:0;margin:0;font-size:calc(var(--pw)*.029);line-height:1.35}
.endings li{margin:0 0 .28em;position:relative}
.endings button{display:flex;width:100%;border:0;background:none;padding:0;cursor:pointer;align-items:baseline;gap:.3em;text-align:left}
.endings .n{flex:0 1 auto}
.endings .dots{flex:1;border-bottom:1.5px dotted rgba(29,24,18,.55);transform:translateY(-.25em);min-width:1em}
.endings .pg{flex:0 0 auto;font-weight:700}
.endings button:hover .n,.endings button:focus-visible .n{text-decoration:underline}
.endings .tick{left:-1.5em;top:-.1em;width:1.1em;height:1.1em}
.bm h2{font:700 calc(var(--pw)*.04)/1 var(--serif);letter-spacing:.2em;text-transform:uppercase;text-align:center;margin:0 0 1.1em}
.bm .who{font:700 calc(var(--pw)*.045)/1.1 var(--serif);text-align:center;margin:0 0 .2em}
.bm .role{text-align:center;font-style:italic;font-size:calc(var(--pw)*.03);margin:0 0 1.1em}
.bm .bio{font-size:calc(var(--pw)*.031);line-height:1.6;text-align:justify;margin:0 0 1em}
.bm .jobs{list-style:none;padding:0;margin:0 0 1em;font-size:calc(var(--pw)*.027);line-height:1.45}
.bm .jobs li{margin:0 0 .6em}
.bm .jobs b{font-weight:700}
.bm .contact{text-align:center;font-size:calc(var(--pw)*.029);line-height:1.8}
.bm .contact a{color:inherit}

/* the dog-ear on pages you've read before */
.page.right.read::after{content:"";position:absolute;top:0;right:0;width:34px;height:34px;
  background:linear-gradient(225deg,#2a1e16 0 50%,#e2d1ad 50% 100%);box-shadow:-2px 2px 4px rgba(0,0,0,.18)}

/* fingers in the book */
.fingers{position:absolute;right:-70px;top:14%;display:flex;flex-direction:column;gap:14px;z-index:5}
.finger{position:relative;width:86px;height:46px;border:0;padding:0;background:none;cursor:pointer;transition:transform .2s}
.finger:hover,.finger:focus-visible{transform:translateX(-6px)}
.finger svg{position:absolute;inset:0;width:100%;height:100%}
.finger span{position:absolute;right:12px;top:50%;transform:translateY(-50%);font:700 14px/1 var(--serif);color:#4a3a2c}
.finger.in{animation:slidein .35s ease-out}
@keyframes slidein{from{transform:translateX(30px);opacity:0}}

.ribbon{position:absolute;top:-10px;right:calc(var(--pw)*.035);width:30px;height:130px;border:0;padding:0 0 22px;cursor:pointer;z-index:6;
  background:#8e1d18;color:#f4d9a8;font:700 10px/1 var(--serif);letter-spacing:.16em;text-transform:uppercase;writing-mode:vertical-rl;
  clip-path:polygon(0 0,100% 0,100% 100%,50% 86%,0 100%);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);transition:height .2s}
.ribbon:hover,.ribbon:focus-visible{height:142px}

/* page turning */
.leaf{position:absolute;top:0;width:var(--pw);height:var(--ph);transform-style:preserve-3d;z-index:4;
  transition:transform .72s cubic-bezier(.45,.05,.35,1)}
.leaf.fwd{left:var(--pw);transform-origin:left center}
.leaf.back{left:0;transform-origin:right center}
.leaf .face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.leaf .face .page{left:0!important;position:absolute}
.leaf .face.b{transform:rotateY(180deg)}
.leaf .shade{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .36s;background:linear-gradient(90deg,rgba(0,0,0,.25),transparent 60%)}

.lightbox{position:fixed;inset:0;z-index:40;background:rgba(20,14,10,.92);display:flex;align-items:center;justify-content:center;padding:4vmin;cursor:zoom-out}
.lightbox[hidden]{display:none}
.lightbox img{max-width:100%;max-height:100%;box-shadow:0 20px 50px rgba(0,0,0,.6)}
.lb-close{position:fixed;top:max(10px,env(safe-area-inset-top));right:max(10px,env(safe-area-inset-right));width:44px;height:44px;border:1.5px solid rgba(239,227,200,.7);border-radius:50%;
  background:rgba(29,24,18,.6);color:var(--paper);font:400 28px/1 var(--serif);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0 0 3px}
.lb-close:hover,.lb-close:focus-visible{background:rgba(160,40,20,.85);outline:none}

/* ---------- phones: one page at a time ---------- */
body.single{overflow:auto}
body.single .stage{position:static;display:block;perspective:none;min-height:100%;padding:14px 12px 40px}
body.single .cover{display:block;width:min(100%,520px);height:auto;aspect-ratio:2/3;margin:6vh auto 0}
body.single .stage.open .cover{display:none}
body.single .book{position:relative;width:100%;max-width:560px;height:auto;margin:0 auto}
body.single .block{display:none}
body.single .page{position:relative;left:auto!important;width:100%;height:auto;border-radius:3px;
  box-shadow:0 10px 30px rgba(0,0,0,.45), inset 0 0 50px rgba(150,110,60,.18)}
body.single .page.left{display:none}
body.single .spine{display:none}
body.single .inner{position:relative;inset:auto;padding:30px 24px 52px}
body.single .scroll{overflow:visible;margin:0;padding:0}
body.single .plate{flex:none;margin:0 0 18px}
body.single .plate img{max-height:none;width:100%}
body.single .plate.small{height:auto}
body.single .text,body.single .choices,body.single .say{font-size:17px}
body.single .pnum{font-size:28px}
body.single .proj h2{font-size:24px}
body.single .proj .client,body.single .folio{font-size:11px}
body.single .proj .desc{font-size:16px}
body.single .proj h3{font-size:12px}
body.single .proj .sec,body.single .film figcaption,body.single .track,body.single .proj .credits{font-size:14px}
body.single .theend{font-size:44px}
body.single .pics{--lim:calc(100vh - 120px);--lim:calc(100svh - 120px)}
/* on a phone the full-size picture fills the width and a tall one scrolls */
body.single .lightbox{align-items:flex-start;overflow-y:auto;overscroll-behavior:contain;padding:64px 10px 24px}
body.single .lightbox img{margin:auto;max-height:none}
/* portrait films on a phone: one per row, centred, the whole player and its controls on the screen */
body.single .films.vertical{grid-template-columns:minmax(0,1fr);justify-items:center;gap:22px}
body.single .films.vertical .film,body.single .films.vertical .film.big{width:min(100%,calc((100vh - 120px)*9/16));width:min(100%,calc((100svh - 120px)*9/16))}
body.single .after{font-size:15px}
body.single .endings{font-size:15px}
body.single .bm h2{font-size:16px}
body.single .bm .who{font-size:22px}
body.single .bm .role,body.single .bm .bio,body.single .bm .contact{font-size:15px}
body.single .bm .jobs{font-size:14px}
body.single .titlepage .t{font-size:46px}
body.single .titlepage .a{font-size:13px}
body.single .titlepage .about{font-size:14px}
body.single .choices li{margin-bottom:1em}
body.single .choice{padding:.15em 0}
body.single .tick{left:-1.35em;width:1.1em}
body.single .fingers{position:sticky;top:8px;right:auto;flex-direction:row;justify-content:flex-end;gap:6px;margin:0 0 -40px;height:40px;z-index:8;pointer-events:none}
body.single .finger{pointer-events:auto;width:64px;height:34px}
body.single .finger span{font-size:12px;right:8px}
body.single .ribbon{position:fixed;top:-6px;right:auto;left:16px;height:96px;width:26px}
body.single .ribbon:hover{height:104px}
body.single .page.right.read::after{width:26px;height:26px}
body.single .turnin{animation:turnin .45s cubic-bezier(.3,.6,.3,1)}
@keyframes turnin{from{transform:perspective(1200px) rotateY(-14deg) translateX(30px);opacity:.2}}
@media (prefers-reduced-motion: reduce){
  .leaf,.cover{transition:none!important} .turnin,.finger.in,.loader-pages span{animation:none!important}
}

.verso{display:flex;align-items:center;justify-content:center;height:100%}
.verso svg{width:28%;opacity:.8}
.titlepage.front{justify-content:flex-start;gap:.45em}
.titlepage.front .t{font-size:calc(var(--pw)*.085)}
.titlepage.front .about{margin:.2em 0 .6em}
.titlepage.front .plate{width:100%}
body.single .ribbon{left:2px;width:20px;height:84px;font-size:8px;padding-bottom:16px}
body.single .proj{margin-top:28px}
body.single .say{margin-top:0}

.cover-art,.cover-type,.cover::after{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.cover-art{border-radius:3px 8px 8px 3px}
.cover::after{border-radius:3px 8px 8px 3px}
.cover-back{position:absolute;inset:0;border-radius:8px 3px 3px 8px;transform:rotateY(180deg);backface-visibility:hidden;-webkit-backface-visibility:hidden;
  background:#e4d4b2;box-shadow:inset 0 0 0 10px #d6c19a, inset 0 0 40px rgba(120,80,40,.25)}
.endings{font-size:calc(var(--pw)*.027);line-height:1.28}
.endings li{margin:0 0 .16em}
.bm .bio{text-align:left}
.bm h2{margin-bottom:.8em}
body.single .fingers{position:fixed;top:6px;right:6px;margin:0;height:auto;flex-direction:column;align-items:flex-end;gap:4px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35))}
body.single .text,body.single .say,body.single .proj .desc,body.single .bm .bio{text-align:left;hyphens:manual;-webkit-hyphens:manual}
body.single .book{transform-style:flat}
body.single .page{z-index:0}
body.single .fingers{z-index:30}

/* ---------- 1980s mass-market trade dress ---------- */
.cover{background:transparent}
.cv-board{position:absolute;inset:0;overflow:hidden;border-radius:2px 6px 6px 2px;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  background-color:#f1ead8;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .3 0 0 0 0 .2 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  box-shadow:inset 0 0 0 1px rgba(80,50,20,.25), inset 0 0 22px rgba(150,110,60,.28)}
.cv-board::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:6;
  background:
    radial-gradient(circle at 100% 0,rgba(255,255,255,.55) 0,transparent 3.2%),
    radial-gradient(circle at 100% 100%,rgba(255,255,255,.6) 0,transparent 4%),
    radial-gradient(circle at 0 100%,rgba(255,255,255,.35) 0,transparent 3%),
    linear-gradient(90deg,transparent 98.8%,rgba(255,255,255,.5)),
    linear-gradient(180deg,rgba(255,255,255,.35),transparent 1.2%,transparent 98.6%,rgba(255,255,255,.45));}
.cv-spine{position:absolute;left:0;top:0;bottom:0;width:6.5%;z-index:2;
  background:linear-gradient(90deg,#7e1a12,#b3301f 45%,#9c2618 80%,#6d150e)}
.cv-spine::after{content:"";position:absolute;right:-3px;top:0;bottom:0;width:3px;background:#d9a531}
.cv-band{position:absolute;left:6.5%;right:0;top:3.4%;height:8.2%;z-index:2;display:flex;align-items:center;justify-content:center;
  background:#b3301f;box-shadow:0 3px 0 #d9a531, 0 -3px 0 #d9a531}
.cv-author{font:700 calc(var(--pw)*.046)/1 var(--serif);font-variant:small-caps;text-transform:none;letter-spacing:.2em;color:#f6ecd2;padding-left:.2em}
.cv-title{position:absolute;left:6.5%;right:0;top:13.6%;z-index:2;text-align:center;
  font:900 calc(var(--pw)*.175)/1 var(--display);font-variation-settings:'SOFT' 100,'opsz' 144;letter-spacing:-.01em;
  color:#1d1812;text-shadow:3px 3px 0 #d9a531}
.cv-frame{position:absolute;left:12%;right:5.5%;top:29%;bottom:4.2%;z-index:1;overflow:hidden;
  border:2px solid #1d1812;box-shadow:0 0 0 5px #f1ead8, 0 0 0 6.5px #b3301f}
.cv-frame .cover-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 70%;border-radius:0;
  filter:saturate(.72) sepia(.22) contrast(.9) brightness(1.04) hue-rotate(-6deg)}
.cv-dots{position:absolute;inset:0;mix-blend-mode:multiply;opacity:.28;pointer-events:none;
  background-image:radial-gradient(circle,rgba(40,25,10,.9) .7px,transparent 1.1px);background-size:3px 3px}
.cv-frame::after{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:.16;background:linear-gradient(160deg,#f5e6c4,#c9a874)}
.cv-wear{position:absolute;inset:0;width:100%;height:100%;z-index:5;pointer-events:none}
.cover::after{display:none}