/* The Shelf: a dark studio bookcase lit from above, in the spirit of the studio's own shelf photos.
   Spines are old cloth hardbacks coloured from each cover; featured titles stand face-out, flush with their neighbours. The case stays dark in both themes,
   like a photograph; only the chrome around it follows the page tokens (--cream, --ink, --muted, --brass, with fallbacks). */
.shelf-wrap{--ink2:var(--ink,#1f1511);--mute:var(--muted,#6a5849);--brass2:var(--brass,#c9a15a);--gilt:#dcbf85;--s:1;color:var(--ink2);
  --wall:#120b06;--wall-lit:#4a2d17;--plank:#5a3519;
  /* one colour per kind of work; the filter chips, the spine labels and the card all use the same three */
  --rec:#c9a15a;--rec-ink:#2a1a0e;--rem:#3f8f84;--rem-ink:#f4ecdb;--post:#a4442c;--post-ink:#f4ecdb}
@media (max-width:760px){.shelf-wrap{--s:.82}}
@media (max-width:460px){.shelf-wrap{--s:.7}}
.shelf-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;margin:0 0 10px}
.shelf-head .count{color:var(--mute);font-size:.95rem}
/* ---- filters: solid colour chips, one colour per kind of work, with counts; a search box alongside ---- */
.shelf-tools{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:0 0 18px}
.shelf-filters{display:flex;flex-wrap:wrap;gap:7px;margin:0;padding:0;list-style:none}
.shelf-filters button{--fc:var(--ink2);--fi:var(--cream,#f4ecdb);border:0;background:var(--fc);color:var(--fi);border-radius:999px;padding:8px 14px 8px 12px;font:inherit;font-size:.9rem;font-weight:600;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;opacity:.5;filter:saturate(.75);transition:opacity .15s,filter .15s,transform .15s;box-shadow:inset 0 -1px 0 rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.14)}
.shelf-filters button:hover{opacity:.8}
.shelf-filters button[aria-pressed="true"]{opacity:1;filter:none;box-shadow:inset 0 -1px 0 rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.14),0 6px 14px -8px rgba(0,0,0,.6)}
.shelf-filters button:focus-visible{outline:2px solid var(--ink2);outline-offset:2px}
.shelf-filters .f-rec{--fc:var(--rec);--fi:var(--rec-ink)}
.shelf-filters .f-rem{--fc:var(--rem);--fi:var(--rem-ink)}
.shelf-filters .f-post{--fc:var(--post);--fi:var(--post-ink)}
.shelf-filters i{width:10px;height:10px;border-radius:50%;background:var(--fi);opacity:.9;display:inline-block;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.shelf-filters .n{font-weight:400;opacity:.8;font-variant-numeric:tabular-nums}
.shelf-filters .n:empty{display:none}
.shelf-find{display:inline-flex;flex:1 1 220px;max-width:340px}
.shelf-find .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.shelf-find input{width:100%;min-width:0;font:inherit;font-size:.92rem;color:var(--ink2);background:transparent;border:0;border-bottom:1px solid var(--mute);padding:8px 2px;border-radius:0}
.shelf-find input::placeholder{color:var(--mute)}
.shelf-find input:focus{outline:none;border-bottom-color:var(--ink2)}
@media (max-width:460px){.shelf-filters{gap:6px}.shelf-filters button{padding:7px 11px 7px 10px;font-size:.84rem;gap:6px}.shelf-filters i{width:8px;height:8px}}
/* ---- the case: dark wood, tungsten glow from above, vignette, grain ---- */
.case{position:relative;padding:calc(10px * var(--s)) calc(14px * var(--s)) 4px;border-radius:6px;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(ellipse 70% 40% at 50% -8%,rgba(255,196,120,.28),rgba(255,196,120,0) 70%),
    linear-gradient(90deg,rgba(0,0,0,.6),rgba(0,0,0,0) 9%,rgba(0,0,0,0) 91%,rgba(0,0,0,.6)),
    linear-gradient(180deg,#1b100a,#120b06 60%,#0d0804);
  box-shadow:inset 0 0 0 1px rgba(255,210,150,.07),inset 0 18px 30px -20px rgba(0,0,0,.9),0 18px 40px -22px rgba(0,0,0,.6)}
.case::after{content:"";position:absolute;inset:0;background:url(images/shelf/grain.png);opacity:.4;mix-blend-mode:overlay;pointer-events:none;z-index:9}
.shelf{position:relative}
.books{position:relative;display:flex;align-items:flex-end;gap:0;min-height:calc(196px * var(--s));padding:calc(26px * var(--s)) calc(6px * var(--s)) 0}
/* shadow cast by the plank above onto the tops of the books, and a warm key light from the front */
.books::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:5;
  background:linear-gradient(180deg,rgba(10,6,3,.72),rgba(10,6,3,.25) 16%,rgba(10,6,3,0) 34%,rgba(10,6,3,0) 78%,rgba(10,6,3,.28))}
.board{position:relative;height:calc(16px * var(--s));background:
    linear-gradient(180deg,rgba(255,220,170,.2),rgba(255,220,170,0) 30%,rgba(0,0,0,0) 55%,rgba(0,0,0,.5)),
    var(--plank-img,url(images/shelf/plank-1.jpg)) var(--plank-pos,0) 0 / auto 100% repeat-x,var(--plank);
  filter:brightness(var(--dim,1));
  box-shadow:0 1px 0 rgba(255,225,180,.25) inset,0 12px 14px -8px rgba(0,0,0,.9);margin:0 calc(-4px * var(--s)) calc(10px * var(--s))}
/* no two shelves alike: four planks cut from the studio's own shelf photos, each with its own scratches and dings,
   shifted along by a different amount, and a touch dimmer the further from the lamp */
.shelf:nth-child(4n+2) .board{--plank-img:url(images/shelf/plank-2.jpg);--plank-pos:-310px}
.shelf:nth-child(4n+3) .board{--plank-img:url(images/shelf/plank-3.jpg);--plank-pos:-140px}
.shelf:nth-child(4n+4) .board{--plank-img:url(images/shelf/plank-4.jpg);--plank-pos:-520px}
.shelf:nth-child(4n+5) .board{--plank-pos:-230px}
.shelf:nth-child(n+2) .board{--dim:.96}.shelf:nth-child(n+3) .board{--dim:.92}.shelf:nth-child(n+4) .board{--dim:.89}
.shelf:nth-child(even) .books::after{background:linear-gradient(180deg,rgba(10,6,3,.7),rgba(10,6,3,.22) 18%,rgba(10,6,3,0) 36%,rgba(10,6,3,0) 76%,rgba(10,6,3,.3))}
.board::after{content:"";position:absolute;left:0;right:0;top:100%;height:calc(14px * var(--s));background:linear-gradient(180deg,rgba(0,0,0,.65),rgba(0,0,0,0))}
.shelf:last-child .board{margin-bottom:2px}
.book{appearance:none;border:0;padding:0;margin:0;background:transparent;cursor:pointer;position:relative;flex:none;font:inherit;color:inherit;
  transition:transform .3s ease}
.book:focus-visible{outline:2px solid var(--gilt);outline-offset:3px;border-radius:2px}
@media (prefers-reduced-motion:reduce){.book,.face .b3d{transition:none}}
/* ---- spines: old cloth, worn edges, a curve to the back ---- */
.spine{width:calc(var(--w) * var(--s) * var(--k,1));height:calc(var(--h) * var(--s));color:var(--t);border-radius:2px 3px 2px 1px;overflow:hidden;
  display:flex;align-items:flex-start;justify-content:center;filter:brightness(var(--j,1));
  /* layers, top down: the curve of the spine; light from above and the fade it leaves; the frayed top edge; rubbed patches,
     scratches and grime (each book shows a different part of the tile); the cloth weave; the cloth colour */
  background:
    linear-gradient(90deg,rgba(0,0,0,.55) 0,rgba(0,0,0,.18) 7%,rgba(255,255,255,.1) 28%,rgba(255,255,255,0) 52%,rgba(0,0,0,.22) 86%,rgba(0,0,0,.6) 100%),
    linear-gradient(180deg,rgba(255,240,215,.16),rgba(255,240,215,.07) 22%,rgba(255,240,215,0) 48%,rgba(0,0,0,0) 68%,rgba(0,0,0,.4)),
    url(images/shelf/fray.png) var(--fx,0) 0 / 128px 12px repeat-x,
    url(images/shelf/wear.png) var(--wx,0) var(--wy,0) / 192px 192px,
    url(images/shelf/cloth.png) 0 0 / 64px 64px,var(--c);
  background-blend-mode:normal,normal,normal,normal,overlay,normal;
  box-shadow:inset 1px 0 0 rgba(255,235,205,.14),inset -1px 0 0 rgba(0,0,0,.5),inset 0 1px 0 rgba(255,235,205,.16),inset 0 -1px 0 rgba(0,0,0,.45),
    4px 0 6px -3px rgba(0,0,0,.7),0 10px 10px -8px rgba(0,0,0,.9)}
.spine::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,235,205,.22) 0,rgba(255,235,205,0) 3px,transparent calc(100% - 3px),rgba(255,235,205,.1));mix-blend-mode:screen}
.spine.creased::before{background:linear-gradient(180deg,rgba(255,235,205,.22) 0,rgba(255,235,205,0) 3px,transparent calc(100% - 3px),rgba(255,235,205,.1)),
  linear-gradient(90deg,transparent calc(9% - 1px),rgba(255,235,205,.16) 9%,transparent calc(9% + 1px))}
.spine.rules::after{content:"";position:absolute;left:calc(3px * var(--s));right:calc(3px * var(--s));top:calc(6px * var(--s));bottom:calc(21px * var(--s));pointer-events:none;
  border-top:1px solid rgba(220,191,133,.55);border-bottom:1px solid rgba(220,191,133,.55);box-shadow:0 calc(3px * var(--s)) 0 -0px rgba(220,191,133,.35) inset,0 calc(-3px * var(--s)) 0 -0px rgba(220,191,133,.35) inset;opacity:.9}
.spine:hover,.spine[aria-pressed="true"]{transform:translateY(calc(-9px * var(--s)))}
.spine .label{writing-mode:vertical-rl;text-orientation:mixed;display:flex;flex-direction:column;align-items:center;gap:calc(5px * var(--s));
  padding:calc(15px * var(--s)) 0 calc(28px * var(--s));max-height:100%;overflow:hidden;line-height:1.05;position:relative;z-index:1}
.spine .ttl{font-family:var(--head,"Young Serif",Georgia,serif);font-size:calc(var(--fs) * var(--s));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-height:100%;letter-spacing:.02em;
  text-shadow:0 0 1px rgba(0,0,0,.55),0 1px 0 rgba(0,0,0,.35)}
.spine .au{font-family:var(--body,Figtree,sans-serif);font-size:calc(8.5px * var(--s));letter-spacing:.16em;text-transform:uppercase;opacity:.78;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 0 rgba(0,0,0,.35)}
/* stacked title: short horizontal lines in the upper third, like the older cloth bindings in the photos */
.spine.stack .label{writing-mode:horizontal-tb;align-items:center;justify-content:flex-start;padding:calc(16px * var(--s)) calc(2px * var(--s)) calc(28px * var(--s));gap:calc(3px * var(--s));text-align:center;width:100%}
.spine.stack .ttl{white-space:normal;text-transform:uppercase;letter-spacing:.05em;font-size:calc(var(--fs2) * var(--s));line-height:1.12;word-break:keep-all;overflow:hidden;text-overflow:clip;max-height:62%;max-width:100%}
/* long titles run to a second or third line down the spine instead of being cut short */
.spine.multi .ttl{white-space:normal;text-overflow:clip;line-height:1.08;max-width:100%}
.spine.stack .au{letter-spacing:.1em;font-size:calc(7.5px * var(--s));white-space:normal;line-height:1.2;max-height:22%}
/* label panel: a darker leather label with a fine gilt border, title inside */
.spine.panel .label{background:rgba(12,6,3,.5);border:1px solid rgba(220,191,133,.5);border-radius:calc(4px * var(--s));box-shadow:inset 0 0 0 1px rgba(0,0,0,.4);
  margin-top:calc(11% );padding:calc(11px * var(--s)) calc(1px * var(--s));max-height:76%;height:auto}
/* the little label at the foot of each spine, like a library classification sticker, in the colour of the work we did */
.spine .band{position:absolute;left:calc(4px * var(--s));right:calc(4px * var(--s));bottom:calc(12px * var(--s));height:calc(7px * var(--s));border-radius:1px;z-index:1;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.25),0 1px 1px rgba(0,0,0,.35);opacity:.92}
.band.b-recorded,.band.b-both{background:var(--rec)}
.band.b-both{background:linear-gradient(180deg,var(--rec) 55%,var(--post) 55%)}
.band.b-part{background:repeating-linear-gradient(135deg,var(--rec) 0 3px,rgba(42,26,14,.55) 3px 5px)}
.band.b-remote{background:var(--rem)}
.band.b-post{background:var(--post)}
/* ---- face-out hardbacks ---- */
/* ---- face-out hardbacks: a square audiobook cover propped face-on, flush with its neighbours ---- */
.face{width:calc(var(--h) * var(--s) * var(--kf,1));height:calc(var(--h) * var(--s) * var(--kf,1));margin:0}
.face .b3d{position:absolute;left:0;bottom:0;width:100%;height:100%;transition:transform .3s ease}
.face:hover .b3d,.face[aria-pressed="true"] .b3d{transform:translateY(calc(-3px * var(--s)))}
.face .cover{position:absolute;inset:0;background-size:cover;background-position:center;border-radius:1px 3px 3px 1px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.3),inset 5px 0 7px -5px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.12),0 10px 14px -10px rgba(0,0,0,.95),2px 0 0 -1px rgba(0,0,0,.35)}
.face .cover::before{content:"";position:absolute;top:0;bottom:0;left:4%;width:1px;background:rgba(0,0,0,.35);box-shadow:1px 0 0 rgba(255,255,255,.08)}
.face .cover::after{content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(100deg,rgba(255,240,215,.2),rgba(255,240,215,0) 32%,rgba(0,0,0,0) 62%,rgba(0,0,0,.26)),linear-gradient(180deg,rgba(255,240,215,.08),rgba(0,0,0,0) 20%,rgba(0,0,0,0) 75%,rgba(0,0,0,.3))}
.face .shadow{position:absolute;left:2%;right:2%;bottom:calc(-5px * var(--s));height:calc(12px * var(--s));background:radial-gradient(ellipse at 50% 40%,rgba(0,0,0,.7),rgba(0,0,0,0) 72%)}
/* ---- the lightbox: the card floats over the page, centred at every size; the cover stays big ---- */
.lightbox{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));
  background:rgba(10,5,2,.74);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:lb-in .18s ease-out}
.lightbox[hidden]{display:none}
@keyframes lb-in{from{opacity:0}to{opacity:1}}
.detail{position:relative;display:grid;grid-template-columns:minmax(200px,260px) minmax(0,1fr);gap:22px;width:min(100%,720px);max-height:100%;overflow:hidden;padding:22px;border-radius:14px;
  background:#24130b;color:#f4ecdb;box-shadow:0 30px 60px -20px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.06);animation:lb-card .22s ease-out;outline:none;overscroll-behavior:contain}
@keyframes lb-card{from{transform:scale(.97);opacity:0}to{transform:none;opacity:1}}
.detail img{width:100%;height:auto;aspect-ratio:1;object-fit:contain;border-radius:4px;box-shadow:0 12px 24px -10px rgba(0,0,0,.85),inset 0 0 0 1px rgba(255,255,255,.06);align-self:start}
.detail .txt{min-width:0;min-height:0;overflow:auto;overscroll-behavior:contain;max-height:100%;padding-right:4px;scrollbar-width:thin;scrollbar-color:rgba(244,236,219,.3) transparent}
.detail h3{font-family:var(--head,"Young Serif",Georgia,serif);font-weight:400;font-size:1.5rem;line-height:1.15;margin:0 36px 4px 0;text-wrap:balance}
.detail .by{margin:0 0 8px;color:#e3d4b4}
.detail .facts{margin:0 0 10px;color:#d3c19b;font-size:.92rem;display:flex;flex-wrap:wrap;gap:4px 12px}
.detail .facts .soon{color:#f1d9a0;font-weight:600}
.detail .role{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:5px 12px 5px 9px;font-size:.88rem;font-weight:600;background:rgba(244,236,219,.1);color:#f4ecdb}
.detail .role::before{content:"";width:9px;height:9px;border-radius:50%;background:currentColor;opacity:.9}
.detail .role.recorded,.detail .role.both,.detail .role.part{background:rgba(201,161,90,.2);color:#ecd09a}
.detail .role.remote{background:rgba(63,143,132,.26);color:#9fd8ce}
.detail .role.post{background:rgba(164,68,44,.3);color:#f0b39f}
.detail .line{margin:14px 0 0;font-family:var(--head,"Young Serif",Georgia,serif);font-size:1.08rem;line-height:1.4}
/* the sample player: play button, a thin brass progress line, times; the audio comes from Apple Books' preview */
.detail .player{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;margin-top:18px;padding:10px 12px;border-radius:10px;background:rgba(0,0,0,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.detail .play{width:40px;height:40px;border-radius:50%;border:0;padding:0;cursor:pointer;box-shadow:0 4px 10px -4px rgba(0,0,0,.8);
  background:#c9a15a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 2.2v11.6c0 .6.6.9 1.1.6l8.6-5.8c.4-.3.4-.9 0-1.2L5.1 1.6c-.5-.3-1.1 0-1.1.6z' fill='%2324130b'/%3E%3C/svg%3E") no-repeat 55% 50% / 16px 16px}
.detail .play[aria-pressed="true"]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='3' y='2' width='3.6' height='12' rx='.8' fill='%2324130b'/%3E%3Crect x='9.4' y='2' width='3.6' height='12' rx='.8' fill='%2324130b'/%3E%3C/svg%3E");background-position:50% 50%}
.detail .play:disabled{opacity:.45;cursor:default}
.detail .play:focus-visible{outline:2px solid #f4ecdb;outline-offset:2px}
.detail .bar{position:relative;height:22px;cursor:pointer;display:flex;align-items:center;min-width:0}
.detail .bar::before{content:"";position:absolute;left:0;right:0;height:3px;border-radius:2px;background:rgba(244,236,219,.22)}
.detail .bar i{position:absolute;left:0;height:3px;border-radius:2px;background:#dcbf85;width:var(--p,0%);pointer-events:none}
.detail .bar b{position:absolute;left:var(--p,0%);top:50%;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;background:#f4ecdb;box-shadow:0 1px 3px rgba(0,0,0,.6);pointer-events:none;opacity:0;transition:opacity .15s}
.detail .player.live .bar b{opacity:1}
.detail .time{font-variant-numeric:tabular-nums;font-size:.85rem;color:#d3c19b;white-space:nowrap}
.detail .player .src{grid-column:1 / -1;font-size:.78rem;color:#bfae8e;margin:0}
.detail .player .src a{color:inherit}
.detail .player.failed .bar,.detail .player.failed .time{display:none}
.detail .acts{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:14px;align-items:center;font-size:.92rem}
.detail .acts a{color:#dcbf85;font-weight:600;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:1px}
.detail .close{position:absolute;top:10px;right:10px;width:36px;height:36px;border-radius:50%;background:rgba(36,19,11,.8);border:1px solid rgba(244,236,219,.35);color:#f4ecdb;font:inherit;font-size:1.3rem;line-height:1;cursor:pointer;display:grid;place-items:center;z-index:1;box-shadow:0 2px 8px rgba(0,0,0,.5)}
.detail .close:hover{background:rgba(244,236,219,.2)}
.detail .close:focus-visible{outline:2px solid #dcbf85}
.detail .standin{font-size:.8rem;color:#d3c19b;margin:8px 0 0}
@media (max-width:620px){
  .lightbox{padding:max(12px,env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) max(12px,env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px))}
  .detail{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);gap:14px;padding:14px;max-height:100%;height:auto}
  .detail img{width:min(100%,48vh,48dvh);margin:0 auto}   /* the cover stays put, never cropped; the words scroll beneath it */
  .detail h3{margin-right:0;padding-right:30px}}
@media (prefers-reduced-motion:reduce){.lightbox,.detail{animation:none}.face .b3d{transition:none}}
.shelf-empty{color:#d3c19b;padding:28px 0;text-align:center}

/* ---- trusted by: client names set in the house serif, drifting slowly; each slot can take an official logo file later ---- */
.trusted{margin:44px 0 0;padding-top:22px;border-top:1px solid color-mix(in srgb,var(--mute) 35%,transparent)}
.trusted-k{margin:0 0 14px;font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--brass2);font-weight:600;text-align:center}
.marquee{display:flex;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee ul{display:flex;flex:none;gap:56px;margin:0;padding:0 28px;list-style:none;animation:drift 40s linear infinite}
.marquee:hover ul{animation-play-state:paused}
.marquee li{flex:none;font-family:var(--head,"Young Serif",Georgia,serif);font-size:1.25rem;letter-spacing:.02em;color:var(--mute);white-space:nowrap;opacity:.85}
.marquee li img{height:28px;width:auto;display:block;filter:grayscale(1) sepia(.35) brightness(.7);opacity:.8}
@keyframes drift{to{transform:translateX(-100%)}}
@media (prefers-reduced-motion:reduce){.marquee{-webkit-mask-image:none;mask-image:none}.marquee ul{animation:none;flex-wrap:wrap;justify-content:center;gap:12px 32px}.marquee ul[aria-hidden]{display:none}}
@media (max-width:560px){.marquee li{font-size:1.02rem}.marquee ul{gap:36px;padding:0 18px}}

/* honours on the card: small gilt lines above the role chip */
.detail .honours{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:4px}
.detail .honours li{position:relative;padding-left:18px;font-size:.88rem;line-height:1.35;color:#ecd09a;letter-spacing:.01em}
.detail .honours li::before{content:"";position:absolute;left:2px;top:.42em;width:8px;height:8px;transform:rotate(45deg);background:#c9a15a;border-radius:1px}
.shelf-sec{padding-top:56px}
.shelf-lede{margin:6px 0 20px}
main .shelf-sec{padding-top:40px}main .shelf-sec .shelf-wrap{margin-top:0}
main section.shelf-wrap{padding:0}

/* the last shelf, when it isn't full, sits centred between two towers from the logo's suspension bridge instead of trailing off into the dark */
.books.last{justify-content:center}
.bookend{flex:none;align-self:flex-end;width:calc(60px * var(--s));height:calc(150px * var(--s));margin:0;
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2070%20176%22%3E%20%3Cdefs%3E%3ClinearGradient%20id%3D%22s%22%20x1%3D%220%22%20x2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%235e4a33%22/%3E%3Cstop%20offset%3D%22.28%22%20stop-color%3D%22%23b9a07a%22/%3E%3Cstop%20offset%3D%22.5%22%20stop-color%3D%22%23d9c39c%22/%3E%3Cstop%20offset%3D%22.75%22%20stop-color%3D%22%23a68c66%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%234e3d2a%22/%3E%3C/linearGradient%3E%20%3ClinearGradient%20id%3D%22d%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23000%22%20stop-opacity%3D%220%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23000%22%20stop-opacity%3D%22.3%22/%3E%3C/linearGradient%3E%3C/defs%3E%20%3Cpath%20fill%3D%22url%28%23s%29%22%20fill-rule%3D%22evenodd%22%20d%3D%22M5%200H62L65%203V12H57V59L65%20123L70%20176H0L2%20123L10%2059V12H2V3Z%20M23%2017H47V43H23Z%20M27%2070A8%208%200%200%201%2043%2070V85H27Z%20M29%20103A6%206%200%200%201%2041%20103V121H29Z%22/%3E%20%3Cpath%20fill%3D%22url%28%23d%29%22%20d%3D%22M10%2012H57V59L65%20123L70%20176H0L2%20123L10%2059Z%22/%3E%20%3Cpath%20d%3D%22M5%200H62L65%203H2Z%22%20fill%3D%22%23efe0bf%22%20opacity%3D%22.6%22/%3E%20%3Cpath%20d%3D%22M10%2059H57%22%20stroke%3D%22%233e2f1f%22%20stroke-opacity%3D%22.35%22%20stroke-width%3D%221%22/%3E%20%3Cpath%20fill%3D%22%23120b06%22%20d%3D%22M23%2017H47V43H23Z%20M27%2070A8%208%200%200%201%2043%2070V85H27Z%20M29%20103A6%206%200%200%201%2041%20103V121H29Z%22/%3E%20%3C/svg%3E") center bottom / contain no-repeat;filter:drop-shadow(0 8px 6px rgba(0,0,0,.75))}

.shelf-next{margin:22px 0 0;color:var(--muted,#6a5849)}
.shelf-next a,.more-link a{color:var(--ink,#1f1511);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--brass,#c9a15a)}
.more-link{margin:14px 0 0}
.home-shelf{margin-top:12px}
.home-shelf .shelf-head{margin-bottom:12px}