/* Sprayed Edge — night sky, jewel tones, gold foil. Long lists and forms sit on a light vellum panel.
   Tied to the real shop: the fascia's turquoise-green and the sign-writer's orange do most of the accent
   work; gold is kept for the logo, prices and spine tops. */
:root{
  color-scheme:dark;
  --night:#16112a; --night-2:#1d1636; --night-3:#0e0a1c; --ink:#efe7ff; --ink-2:#c4b9dc;
  --gold:#e2c275; --gold-2:#f3dc9a; --amethyst:#8e5bd6; --sapphire:#2f7fa8; --emerald:#5f8682; --garnet:#c2507a;
  --vellum:#efe5d1; --vellum-ink:#2a2140; --vellum-line:#d9cbb0; --vellum-muted:#6b6180;
  --display:"Cinzel Decorative",Georgia,serif; --head:"Cinzel",Georgia,serif; --body:"Karla",system-ui,sans-serif;
  --foil:linear-gradient(90deg,#d9b25f,#f3dc9a 50%,#d9b25f);
  --shop-green:#4f6b6a; --shop-green-2:#3d5554; --sign-cream:#e8dcc4; --terracotta:#b5533a;
  --teal:#4f8f8a; --teal-2:#86c5bf; --teal-deep:#1e3837; --orange:#b5533a; --orange-2:#ec8a63;
  --sign-shadow:2px 2px 0 var(--terracotta),3px 3px 0 #1a1414;
  --wood:#5a3b24; --wood-2:#4a2f1c;
  /* the shopfront homepage: daylight on Queen Street, and the shop's own fittings
     (cream slatwall with blue grooves, birch shelves) */
  --paper:#f6f1e7; --paper-2:#ece4d4; --paper-ink:#1f2b2a; --paper-muted:#5b6461; --paper-line:#d8cfbe;
  --stone:#d6cfc2; --stone-2:#bdb5a6; --slat:#f4f0e7; --slat-groove:#2e4f86; --birch:#dcc297; --birch-2:#c4a473;
}
*{box-sizing:border-box;font-variant-ligatures:none}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--night);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.55}
img{max-width:100%;display:block}
a{color:var(--gold-2)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.spine:focus-visible,.bay:focus-visible{outline:2px solid var(--gold-2);outline-offset:2px}
.wrap{max-width:72rem;margin:0 auto;padding-inline:16px}
.skip{position:absolute;left:-999px}.skip:focus{left:16px;top:8px;z-index:10;background:var(--gold-2);color:#1b1230;padding:6px 10px}

/* header / footer */
.nav{background:var(--shop-green-2);border-bottom:3px solid var(--orange)}
.nav .wrap{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding-block:14px}
.logo{font-family:var(--display);font-weight:700;color:var(--gold-2);font-size:1.25rem;line-height:1.1;margin-right:auto;text-decoration:none}
.logo small{display:block;font-family:var(--body);font-weight:400;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--sign-cream)}
.nav nav{display:flex;gap:16px;flex-wrap:wrap}
.nav nav a{color:var(--sign-cream);text-decoration:none;font-size:.9rem}
.nav nav a[aria-current]{color:#fff;text-decoration:underline;text-decoration-color:var(--orange-2);text-decoration-thickness:2px;text-underline-offset:4px}
.search{display:flex;align-items:center;gap:8px;background:#0e0a1c55;border:1px solid #e8dcc455;border-radius:999px;padding:4px 6px 4px 12px;flex:1 1 14rem;max-width:20rem;min-width:0}
.search input{flex:1;min-width:0;background:transparent;border:0;color:var(--ink);font:inherit;font-size:.88rem;padding:4px 0}
.search input::placeholder{color:#e8dcc4bb}
.search button{background:var(--orange);border:0;border-radius:999px;padding:4px 12px;font:600 .8rem var(--body);color:#fff;cursor:pointer}
.foot{background:var(--shop-green-2);border-top:3px solid var(--terracotta);font-size:.85rem;color:var(--ink-2)}
.foot .wrap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-block:20px}

/* type + buttons */
.eyebrow{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--orange-2)}
.d{font-family:var(--head);font-weight:600;letter-spacing:.01em;color:var(--ink);margin:0;text-wrap:balance;line-height:1.12}
.h{font-family:var(--head);font-weight:600;margin:0;color:var(--teal-2);font-size:1.1rem;letter-spacing:.02em}
.note{font-size:.84rem;color:var(--ink-2)}
.btn{display:inline-block;padding:10px 18px;border-radius:6px;background:var(--orange);color:#fff;font-weight:600;box-shadow:inset 0 -2px 0 #0003;font-size:.92rem;text-decoration:none;border:0;cursor:pointer;font-family:var(--body)}
.btn.ghost{background:transparent;color:var(--teal-2);border:1px solid var(--teal);box-shadow:none}
.sec{padding-block:36px;display:flex;flex-direction:column;gap:18px}
.band{background:var(--teal-deep)}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:10px;flex-wrap:wrap}
.flash{background:var(--shop-green);color:#fff;padding:10px 16px;border-radius:6px;margin-top:16px}

/* bookcase */
.bookcase{display:grid;grid-template-columns:repeat(3,1fr);border:10px solid var(--wood-2);border-radius:6px;background:#120d22}
@media (max-width:640px){.bookcase{grid-template-columns:1fr 1fr}}
.bay{display:flex;flex-direction:column;gap:8px;padding:12px 12px 0;border-right:6px solid var(--wood-2);border-bottom:10px solid var(--wood);text-decoration:none;min-width:0}
.plaque{align-self:center;font-family:var(--head);font-weight:600;font-size:.8rem;color:var(--sign-cream);background:var(--shop-green);border:1px solid var(--terracotta);text-shadow:1px 1px 0 var(--terracotta);padding:3px 10px;border-radius:3px;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.bay .row{display:flex;align-items:flex-end;gap:3px;height:96px}
.bay .row i{flex:1 1 0;min-width:6px;border-radius:2px 2px 0 0;border-top:2px solid #e2c27599;transition:transform .2s ease}
.bay:hover .row i,.bay:focus-visible .row i{transform:translateY(-6px)}
@media (prefers-reduced-motion:reduce){.bay .row i{transition:none}}

/* shelf of spines */
.shelf{display:flex;align-items:flex-end;gap:5px;padding:24px 10px 0;border-bottom:14px solid var(--wood);box-shadow:0 10px 0 -4px #3a2616;min-height:200px;overflow-x:auto}
.spine{flex:0 0 auto;width:38px;border-radius:3px 3px 0 0;border-top:3px solid var(--gold);display:flex;align-items:center;justify-content:center;transition:transform .2s ease;color:var(--gold-2);cursor:pointer;text-decoration:none}
.spine span{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--head);font-size:.68rem;letter-spacing:.06em;white-space:nowrap;overflow:hidden;max-height:92%}
.spine:hover,.spine:focus-visible{transform:translateY(-14px)}
.spine.ghost{background:transparent!important;border:1.5px dashed var(--orange-2);color:var(--orange-2);cursor:default}
@media (prefers-reduced-motion:reduce){.spine{transition:none}}
.peek{display:flex;gap:14px;align-items:center;border:1px solid var(--teal);border-left:4px solid var(--orange);border-radius:8px;padding:12px;background:var(--night-2);max-width:28rem}
.cover{flex:0 0 auto;width:64px;aspect-ratio:2/3;border-radius:3px;position:relative;overflow:hidden}
.cover::after{content:"";position:absolute;inset:auto 0 0 0;height:30%;background:linear-gradient(transparent,#0006)}
.peek b{font-family:var(--head)}
.meta{font-size:.84rem;color:var(--ink-2)}
.price{font-family:var(--head);color:var(--gold-2);font-size:1.05rem;font-variant-numeric:tabular-nums}

/* quotes, ratings, events */
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:12px}
.quotes figure{margin:0;border:1px solid #4f8f8a77;border-top:3px solid var(--teal);border-radius:8px;padding:16px;background:#ffffff05;display:flex;flex-direction:column;gap:10px;min-width:0}
.quotes blockquote{margin:0;font-style:italic;font-size:1.05rem;line-height:1.45}
.quotes blockquote::before{content:"\201C";color:var(--orange-2)}
.quotes blockquote::after{content:"\201D";color:var(--orange-2)}
.quotes figcaption{font-size:.8rem;color:var(--ink-2)}
.ratings{display:flex;gap:14px;flex-wrap:wrap}
.rating{display:flex;align-items:center;gap:12px;border:1px solid var(--teal);border-radius:8px;padding:10px 16px}
.rating b{font-family:var(--head);font-size:2rem;color:var(--gold-2)}
.rating span{font-size:.82rem;color:var(--ink-2);line-height:1.35}
.eventstrip{background:var(--orange);color:#fff}
.eventstrip .wrap{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding-block:14px;font-size:.92rem}
.eventstrip b{font-family:var(--head);color:#fff}
.eventstrip .eyebrow{color:var(--sign-cream)}
.eventstrip .btn.ghost{color:#fff;border-color:#fff}
.eventstrip .btn{margin-left:auto;padding:6px 14px}
.event{display:grid;grid-template-columns:minmax(12rem,20rem) 1fr;gap:24px;align-items:start}
.event > *{min-width:0}
.event .shot{aspect-ratio:1}
.event-body{display:flex;flex-direction:column;gap:10px}
.event-body p{margin:0}
.event-body .d{font-size:1.5rem}
@media (max-width:640px){.event{grid-template-columns:1fr}}

/* visit */
.photo{border:1.5px dashed var(--teal);border-radius:8px;background:repeating-linear-gradient(135deg,#ffffff06 0 10px,transparent 10px 20px);aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;text-align:center;padding:12px;color:var(--teal-2);font-size:.84rem}
.photo.tall{aspect-ratio:3/4}
.split{display:grid;grid-template-columns:minmax(12rem,22rem) 1fr;gap:28px;align-items:center}
.split > *{min-width:0}
@media (max-width:680px){.split{grid-template-columns:1fr}}
.hours{display:grid;grid-template-columns:auto 1fr;gap:4px 18px;margin:0;font-size:.92rem;border-block:1px solid var(--teal);padding:10px 0}
.hours dt{color:var(--ink-2)} .hours dd{margin:0}
.story{list-style:none;margin:0;padding:0 0 0 18px;border-left:2px solid var(--orange);display:flex;flex-direction:column;gap:12px}
.story li{position:relative;display:flex;flex-direction:column}
.story li::before{content:"";position:absolute;left:-25px;top:6px;width:10px;height:10px;border-radius:50%;background:var(--teal-2);box-shadow:0 0 0 3px var(--teal-deep)}
.story b{font-family:var(--head);color:var(--orange-2)}
.story span{color:var(--ink-2)}
.photos3,.info3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:720px){.photos3{grid-template-columns:1fr 1fr}.info3{grid-template-columns:1fr}}
.info3 > div{display:flex;flex-direction:column;gap:6px}
.info3 p{margin:0;font-size:.92rem;color:var(--ink-2)}

/* vellum panel */
.vellum{background:var(--vellum);color:var(--vellum-ink);color-scheme:light}
.vellum .eyebrow{color:#9c4329}
.vellum .d{color:var(--vellum-ink)}
.vellum a{color:#2b5f5b}
.vellum .btn.ghost{color:#2b5f5b;border-color:#2b5f5b}
.vellum .meta{color:var(--vellum-muted)}
.vellum .price{color:#9c4329}
.results-layout{display:grid;grid-template-columns:13rem 1fr;gap:22px}
.results-layout > *{min-width:0}
@media (max-width:760px){.results-layout{grid-template-columns:1fr}}
.filters{display:flex;flex-direction:column;gap:4px;font-size:.92rem}
.filters a{text-decoration:none}
.filters a[aria-current]{font-weight:700;text-decoration:underline}
.result{display:grid;grid-template-columns:58px 1fr auto;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--vellum-line);color:inherit;text-decoration:none}
.result > *{min-width:0}
.result .cover{width:58px}
.result b{font-family:var(--head);font-weight:600}
.tag{display:inline-block;font-size:.7rem;font-weight:600;padding:1px 8px;border-radius:999px;border:1px solid currentColor;margin-right:4px;color:#2b5f5b}
.resbar{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:.86rem;color:var(--vellum-muted);padding-bottom:6px;border-bottom:2px solid var(--shop-green)}

/* book page */
.book{display:grid;grid-template-columns:minmax(10rem,18rem) 1fr;gap:28px;align-items:start}
.book > *{min-width:0}
@media (max-width:680px){.book{grid-template-columns:1fr}}
.bigcover{aspect-ratio:2/3;border-radius:4px;position:relative;overflow:hidden;box-shadow:8px 0 0 -2px var(--garnet),8px 0 0 0 var(--gold)}
.bigcover .t{position:absolute;inset:18% 10% auto;text-align:center;font-family:var(--head);color:var(--gold-2);font-size:1.3rem;line-height:1.2}
.bigcover .a{position:absolute;inset:auto 10% 10%;text-align:center;font-family:var(--head);color:var(--ink-2);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase}
.buybox{border:1px solid var(--teal);border-top:3px solid var(--orange);border-radius:8px;padding:16px;display:flex;flex-direction:column;gap:10px;background:var(--night-2)}
.buybox .price{font-size:1.6rem}
.buybox form{margin:0}
/* the basket: books down the left, the sum and the way to pay on the right */
.basket{display:grid;grid-template-columns:1fr minmax(16rem,22rem);gap:24px;align-items:start;margin-top:18px}
.basket-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.basket-list li{display:grid;grid-template-columns:64px 1fr auto;gap:4px 14px;align-items:start;padding-bottom:12px;border-bottom:1px solid #ffffff1f}
.basket-list li form{grid-column:2/4;margin:0}
.basket-what a{color:var(--ink);text-decoration:none}
.basket-price{font-family:var(--head);color:var(--gold-2);font-size:1.1rem}
.basket-sum .facts{grid-template-columns:7rem 1fr}
.basket-sum .facts .price{font-size:1.3rem;font-family:var(--head);color:var(--gold-2)}
.linkish{background:none;border:0;padding:0;color:var(--gold-2);text-decoration:underline;cursor:pointer;font:inherit;font-size:.88rem}
@media (max-width:760px){.basket{grid-template-columns:1fr}}
.facts{display:grid;grid-template-columns:9rem 1fr;gap:6px 14px;font-size:.92rem;margin:0}
.facts dt{color:var(--ink-2)} .facts dd{margin:0}
.aside{font-size:.88rem;color:var(--ink-2);border-left:2px solid var(--orange);padding-left:12px}

/* sell */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;counter-reset:s;padding:0;margin:0;list-style:none}
@media (max-width:760px){.steps{grid-template-columns:1fr 1fr}}
.steps li{border:1px solid var(--teal);border-radius:8px;padding:14px;counter-increment:s}
.steps li::before{content:counter(s);display:inline-block;width:26px;height:26px;border-radius:50%;background:var(--orange);color:#fff;font-weight:700;text-align:center;line-height:26px;margin-bottom:8px}
.steps b{display:block;font-family:var(--head)}
.steps span{font-size:.88rem;color:var(--ink-2)}
.wantgrid{display:grid;grid-template-columns:1.4fr 1fr;gap:24px;align-items:end}
.wantgrid > *{min-width:0}
@media (max-width:760px){.wantgrid{grid-template-columns:1fr}}
.tarot{border:1px solid var(--orange);border-radius:14px;padding:20px;background:linear-gradient(180deg,#2c5f5b,#1e3837);position:relative;text-align:center;display:flex;flex-direction:column;gap:8px}
.tarot::before{content:"";position:absolute;inset:6px;border:1px solid #ec8a6366;border-radius:10px;pointer-events:none}
.tarot p{margin:0;font-size:.88rem;color:var(--ink-2)}
form.sell{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:600px){form.sell{grid-template-columns:1fr}}
form.sell label{display:flex;flex-direction:column;gap:4px;font-size:.88rem;font-weight:600}
form.sell .full{grid-column:1/-1}
form.sell input,form.sell select,form.sell textarea{font:inherit;font-weight:400;padding:9px 10px;border:1px solid #b8a98b;border-radius:6px;background:#fff;color:var(--vellum-ink)}

/* real photos */
.shot{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:8px;border:2px solid var(--teal)}
.shot.tall{aspect-ratio:3/4}

/* sign-writer headings: cream letters with a terracotta drop, like the fascia */
h1.d{color:var(--sign-cream);text-shadow:var(--sign-shadow)}
.vellum h1.d{color:var(--shop-green-2);text-shadow:1px 1px 0 #b5533a55}
.foot,.foot a{color:var(--sign-cream)}

/* homepage: the shopfront at 4 Queen Street, simplified. The sign over three display
   windows (buy, sell, about), each one link: a name board, glass with arched heads like the
   real window's arcade, and a stallriser saying what's inside. Pilasters with consoles and
   terracotta-lined panels between. On phones the windows stack. */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.home{background:var(--paper);color:var(--paper-ink);color-scheme:light}
.home .nav .logo,.home .nav .search{display:none}
.home .nav .wrap{justify-content:center;padding-block:10px}
.street{background:linear-gradient(180deg,var(--paper-2),var(--paper) 70%)}
.street > .wrap{padding-top:22px}
.storefront{display:flex;flex-direction:column}
.fascia-wrap{margin:0;line-height:0;position:relative;z-index:1}
.fascia{width:100%;height:auto;display:block;overflow:visible}
.fascia-narrow{display:none}
.fascia text{font-family:var(--head);font-weight:600}
.fascia .slab{font-family:"Alfa Slab One",var(--head);font-weight:400}
.fascia .board:not([fill]){fill:var(--shop-green)}
.fascia .board-top{fill:none;stroke:#6d8b89;stroke-width:2.5}
.fascia .cornice{fill:var(--shop-green-2)}
.fascia .cornice-shadow{fill:#2a3837}
.fascia .rule line{stroke:var(--terracotta);stroke-width:2}
.fascia .books .b{stroke:#1a1414;stroke-width:1.6;stroke-linejoin:round}
.fascia .books:not([fill]) .b{fill:var(--sign-cream)}
.fascia .books .pages{fill:none;stroke:#8a7a62;stroke-width:1}
.fascia .ink-dark{fill:#1a1414}
.fascia .ink-shadow{fill:var(--terracotta)}
.fascia .ink-face:not([fill]){fill:var(--sign-cream)}
.frontage{display:grid;grid-template-columns:28px 1fr 28px 1fr 28px 1fr 28px;align-items:stretch;background:var(--shop-green);padding-top:12px;border-bottom:10px solid var(--shop-green-2)}
.pilaster{position:relative}
.pilaster::before{content:"";position:absolute;top:-12px;left:-3px;right:-3px;height:34px;background:var(--shop-green-2);border-radius:0 0 12px 12px;box-shadow:0 3px 0 #2a3837}
.pilaster::after{content:"";position:absolute;inset:48px 7px 16px;border:2px solid var(--terracotta);border-radius:2px}
.window{display:flex;flex-direction:column;min-width:0;text-decoration:none;color:var(--sign-cream)}
.nameboard{margin:0;padding:9px 6px 8px;text-align:center;background:var(--shop-green-2);border-radius:3px 3px 0 0;
  font-family:"Alfa Slab One",var(--head);font-weight:400;font-size:clamp(.95rem,1.75vw,1.4rem);line-height:1.15;letter-spacing:.06em;text-transform:uppercase;
  color:var(--sign-cream);text-shadow:1px .6px 0 var(--terracotta),2px 1.2px 0 var(--terracotta),1px 3px 0 #1a1414}
.glass{position:relative;display:block;aspect-ratio:10/7;overflow:hidden;background:#1d2726;border:5px solid var(--shop-green-2);border-top:0}
.glass .arcade{position:absolute;top:0;left:0;width:100%;height:auto;z-index:2}
.arcade .spandrel{fill:var(--shop-green-2)}
.arcade .arch-line{fill:none;stroke:#6d8b89;stroke-width:1.2}
.glass::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(112deg,#fff0 0 36%,#ffffff1c 36% 43%,#fff0 43% 47%,#ffffff10 47% 50%,#fff0 50%);box-shadow:inset 0 16px 20px -14px #000a}
.scene{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:filter .25s ease}
.window:hover .scene{filter:brightness(1.08) saturate(1.06)}
.display{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);align-content:start;padding-top:15%;
  background:radial-gradient(ellipse at 50% -10%,#fffaf0 0,#fff0 65%),repeating-linear-gradient(180deg,var(--slat) 0 15px,var(--slat-groove) 15px 17px)}
.faceout{position:relative;display:flex;justify-content:center;border-bottom:8px solid var(--birch);box-shadow:0 5px 5px -3px #0005}
.faceout img,.jacket{width:80%;height:auto;aspect-ratio:2/3;object-fit:cover;border-radius:2px;box-shadow:0 5px 9px -3px #0008,0 0 0 1px #0002;transition:transform .25s ease}
.window:hover .faceout img,.window:hover .jacket{transform:translateY(-3px)}
.jacket{display:flex;align-items:center;justify-content:center;padding:8%;text-align:center;border-left:4px solid #0003;font-family:var(--head);font-size:.68rem;line-height:1.2;color:var(--sign-cream);overflow:hidden}
.tag{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%);background:#fffaf0;color:var(--paper-ink);border:1px solid var(--stone-2);border-radius:2px;padding:0 6px;font-size:.74rem;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.card{position:absolute;left:9%;right:9%;bottom:8%;z-index:2;background:#f8f2e4;color:var(--paper-ink);border-radius:2px;padding:7px 10px 8px;
  font-size:clamp(.72rem,1.05vw,.86rem);line-height:1.35;text-align:center;box-shadow:0 4px 12px #0007}
.card b{display:block;font-family:"Alfa Slab One",var(--head);font-weight:400;font-size:1.12em;letter-spacing:.05em;text-transform:uppercase;color:var(--shop-green-2)}
.sill{display:flex;align-items:center;justify-content:center;gap:8px;min-height:54px;margin-top:10px;padding:8px 12px;text-align:center;
  background:var(--shop-green);border-top:4px solid var(--terracotta);box-shadow:inset 0 0 0 6px var(--shop-green),inset 0 0 0 8px #b5533aaa;
  font-weight:700;font-size:clamp(.82rem,1.2vw,.98rem);color:var(--sign-cream)}
.arrow{display:inline-block;transition:transform .2s ease}
.window:hover .arrow{transform:translateX(4px)}
.window:hover .nameboard{color:#fff}
.window:focus-visible{outline:3px solid var(--orange-2);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.scene,.arrow,.faceout img,.jacket{transition:none}}
.pavement{border-top:6px solid var(--stone-2);border-bottom:8px solid #b3ab9c;background:var(--stone)}
.pavement .wrap{display:flex;flex-direction:column;align-items:center;gap:12px;padding-block:20px 24px;text-align:center}
.strap{margin:0;max-width:40rem;font-size:1.02rem}
.kerb-search{display:flex;gap:8px;width:100%;max-width:34rem}
.kerb-search input{flex:1;min-width:0;font:inherit;padding:10px 14px;border:1px solid #958d7e;border-radius:6px;background:#fff;color:var(--paper-ink)}
@media (min-width:721px) and (max-width:1023px){.card{left:5%;right:5%;bottom:6%;padding:5px 8px 6px}}
@media (max-width:720px){
  .fascia-wide{display:none}.fascia-narrow{display:block}
  .street > .wrap{padding-top:14px}
  .frontage{grid-template-columns:1fr;row-gap:14px;padding:12px 10px 10px}
  .pilaster{display:none}
  .nameboard{font-size:1.2rem}
  .card{font-size:.8rem}
  .sill{min-height:48px;margin-top:0;font-size:.92rem}
  .kerb-search .btn{padding-inline:12px}
}

/* Shopfront finish. 1 (refined): gilded letters outlined in dark, beaded and moulded
   woodwork, sunken panels, a projecting sill and warm light behind the glass. 2 (rich):
   deeper gilding, stronger glow and a warmer wall, closest to Daniel's Gemini concept. */
:root{--wood-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9 .03' numOctaves='3' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 .08 0 0 0 0 .1 0 0 0 0 .1 0 0 0 .32 -.08'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --gilt:#d9bd7d}
.fascia .bead{fill:none;stroke:var(--gilt);stroke-width:1;opacity:.5}
.fascia .cornice-hi{fill:#7f9b98}
.fascia .cornice-lo{fill:#2a3837}
.fascia .gilt-line{fill:none;stroke:var(--gilt);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.fascia .gilt-line .gem{fill:var(--gilt);stroke:none}
.fascia .ink-face[fill]{stroke:#1d1410;paint-order:stroke;stroke-linejoin:round}
.fascia .books[fill] .b{stroke:#1d1410}
.fascia .books[fill] .pages{stroke:#9a7b45}
.arcade .arch-shade,.arcade .drop{display:none}
.finish-1 .storefront{filter:drop-shadow(0 12px 14px #3a2a1622)}
.finish-1 .frontage{background:linear-gradient(180deg,#1a222166,#1a222100 14px),var(--wood-grain),var(--shop-green)}
.finish-1 .nameboard{background:linear-gradient(180deg,#4b6664,#3d5554);padding-block:10px 9px;text-shadow:none;
  box-shadow:inset 0 1px 0 #86a29f88,inset 0 -2px 0 #0003,inset 0 0 0 5px #405957,inset 0 0 0 6px #d9bd7d4d}
.finish-1 .nameboard span{display:inline-block;color:#efdcab;text-shadow:1px .6px 0 var(--terracotta),1px 2px 0 #1a1414}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .finish-1 .nameboard span{background:linear-gradient(180deg,#fbf1d6 0%,#eed8a4 45%,#dfbf7f 65%,#efdcab 100%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;
    filter:drop-shadow(.7px 0 0 #1d1410) drop-shadow(-.7px 0 0 #1d1410) drop-shadow(0 .7px 0 #1d1410) drop-shadow(0 -.7px 0 #1d1410) drop-shadow(1.4px 1px 0 var(--terracotta)) drop-shadow(.5px 1.2px 0 #1d1410)}
  .finish-2 .nameboard span{background-image:linear-gradient(180deg,#fdf2cf 0%,#f1d48b 38%,#d4a24c 62%,#f0cf83 100%);
    filter:drop-shadow(1px 0 0 #1d1410) drop-shadow(-1px 0 0 #1d1410) drop-shadow(0 1px 0 #1d1410) drop-shadow(0 -1px 0 #1d1410) drop-shadow(2px 1.4px 0 var(--terracotta)) drop-shadow(.6px 1.6px 0 #1d1410)}
}
.finish-1 .glass{border-color:#3a5250;box-shadow:0 0 0 1px #2a3837}
.finish-1 .glass::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:soft-light;
  background:radial-gradient(ellipse 75% 65% at 50% 25%,#ffc46d8c,#ffc46d00 75%)}
.finish-1 .glass::after{box-shadow:inset 0 0 0 2px #1d2726,inset 0 0 24px #1a0f0566,inset 0 16px 20px -14px #000a}
.finish-1 .scene{filter:sepia(.1) saturate(1.06)}
.finish-1 .window:hover .scene{filter:sepia(.1) saturate(1.1) brightness(1.08)}
.finish-1 .display{background:radial-gradient(ellipse at 50% -10%,#fff2d6 0,#fff0 65%),repeating-linear-gradient(180deg,#f5ecd9 0 15px,var(--slat-groove) 15px 17px)}
.finish-1 .arcade .arch-line{stroke:#8eaaa6;stroke-width:1.5}
.finish-1 .arcade .arch-shade{display:inline;fill:none;stroke:#0000005c;stroke-width:3}
.finish-1 .arcade .drop{display:inline;fill:var(--shop-green-2)}
.finish-1 .pilaster{background:linear-gradient(90deg,#3d5554,#5a7572 40%,#4f6b6a 62%,#3a5250)}
.finish-1 .pilaster::before{top:-12px;left:-3px;right:-3px;height:46px;border-radius:0;box-shadow:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 46'%3E%3Cpath d='M0,0 H34 V7 H31 C31,16 25,18 25,26 C25,36 21,44 17,44 C13,44 9,36 9,26 C9,18 3,16 3,7 H0 Z' fill='%233a5250'/%3E%3Cpath d='M0,7 H34' stroke='%2386a29f' stroke-width='1.2'/%3E%3Cpath d='M5,9 C5,17 11,19 11,27' fill='none' stroke='%23ffffff33' stroke-width='1.5'/%3E%3Cpath d='M17,12 V38' stroke='%23b5533a' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center top/100% 100% no-repeat}
.finish-1 .pilaster::after{inset:50px 6px 18px;background:linear-gradient(90deg,#45605e,#4f6b6a);box-shadow:inset 2px 2px 4px #0007,inset -1px -1px 0 #ffffff2e}
.finish-1 .sill{position:relative;margin-top:16px;border-top:0;box-shadow:none;background:var(--wood-grain),var(--shop-green)}
.finish-1 .sill::before{content:"";position:absolute;left:-7px;right:-7px;top:-16px;height:12px;border-radius:2px;border-bottom:2px solid var(--terracotta);
  background:linear-gradient(180deg,#8eaaa6 0,#5f7a77 30%,#3d5554 75%,#2a3837);box-shadow:0 4px 5px -1px #0007}
.finish-1 .sill::after{content:"";position:absolute;inset:6px;border:2px solid #b5533acc;border-radius:2px;pointer-events:none;
  box-shadow:inset 2px 2px 5px #0006,inset -1px -1px 0 #ffffff24}
.finish-1 .card{border:1px solid #cdb98f;box-shadow:0 6px 14px #0008}
.finish-2.street{background:linear-gradient(180deg,#e6cc9c,#efdcb8 75%)}
.finish-2 .storefront{filter:drop-shadow(0 14px 16px #5a3a1433)}
.finish-2 .fascia .gilt-line{stroke:#e6c77e;opacity:1}
.finish-2 .fascia .gilt-line .gem{fill:#e6c77e}
.finish-2 .fascia .bead{stroke:#e6c77e;opacity:.75}
.finish-2 .glass::before{background:radial-gradient(ellipse 80% 70% at 50% 25%,#ffb85ad9,#ffb85a00 78%),linear-gradient(#ffb85a2e,#ffb85a2e)}
.finish-2 .glass::after{box-shadow:inset 0 0 0 2px #1d2726,inset 0 0 36px #1a0f05aa,inset 0 16px 22px -12px #000b}
.finish-2 .scene{filter:sepia(.22) saturate(1.1) brightness(1.03)}
.finish-2 .display{background:radial-gradient(ellipse at 50% -10%,#ffe9bf 0,#fff0 70%),repeating-linear-gradient(180deg,#f3e4c6 0 15px,var(--slat-groove) 15px 17px)}
.finish-2 .sill::after{box-shadow:inset 0 0 0 3px var(--shop-green),inset 0 0 0 4px #d9bd7d66,inset 3px 3px 7px #0007,inset -1px -1px 0 #ffffff24}
.finish-2 .nameboard{box-shadow:inset 0 1px 0 #86a29f88,inset 0 -2px 0 #0003,inset 0 0 0 5px #405957,inset 0 0 0 6.5px #e6c77e80}

.finish-1 .fascia-wrap{margin-bottom:-1%}
.finish-2 .nameboard{border-radius:50% 50% 0 0/80% 80% 0 0;padding-block:14px 8px;
  background:radial-gradient(ellipse 70% 120% at 50% 100%,#ffe2ad,#f3c77f 55%,#d9a55e);
  box-shadow:inset 0 0 0 4px #3d5554,inset 0 0 0 5px #e6c77e99,inset 0 8px 14px #3a1f0855}
.finish-2 .nameboard span{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:#2b2116;filter:none;text-shadow:0 1px 0 #fff4d6aa}
.finish-2 .window:hover .nameboard{color:inherit}
@media (max-width:720px){.finish-1 .fascia-wrap{margin-bottom:-2.75%}}

/* the painted shopfront (SHOP_HERO = "painted"): one picture, windows as links over it */
.painted-street > .wrap{padding-top:22px}
.painted{position:relative;aspect-ratio:var(--art-ar);background:var(--art) 0 0/100% 100% no-repeat;border-radius:4px;box-shadow:0 14px 26px #3a2a1638}
.painted-sign,.pane{position:absolute;left:calc(var(--l) * 100%);top:calc(var(--t) * 100%);width:calc(var(--w) * 100%);height:calc(var(--h) * 100%);margin:0}
.pane{display:block;text-decoration:none;border-radius:8px 8px 3px 3px;transition:box-shadow .2s ease,background-color .2s ease}
.pane:hover{background:#fff2cc14;box-shadow:0 0 0 2px #f1d48bcc,0 0 26px #ffc46d73}
.pane:focus-visible{outline:3px solid var(--orange-2);outline-offset:2px}
.pane-books{position:absolute;inset:0}
.cv{position:absolute;display:block}
.cv img,.cv .jacket{width:100%;height:100%;object-fit:cover;border-radius:1px;box-shadow:0 3px 6px #2a14067a,0 0 0 1px #2a140633;filter:sepia(.18) saturate(.95) brightness(.94);transition:transform .25s ease}
.cv .jacket{padding:6%;font-size:.55rem}
.pane:hover .cv img,.pane:hover .cv .jacket{transform:translateY(-3%)}
.pane-caption{position:absolute;left:10%;right:10%;top:81%;height:16%;display:flex;align-items:center;justify-content:center;gap:6px;text-align:center;
  font-weight:700;font-size:clamp(.66rem,1.2vw,.98rem);line-height:1.15;color:#f6e6bb;text-shadow:0 1px 2px #000c}
.pane-name{position:absolute;left:4%;right:4%;display:flex;justify-content:center;pointer-events:none;
  font-family:"Alfa Slab One",var(--head);font-weight:400;font-size:clamp(.85rem,1.9vw,1.6rem);letter-spacing:.06em;text-transform:uppercase;line-height:1;white-space:nowrap}
.pane-name span{color:#f0d48b;text-shadow:0 0 1px #1d1410,1px 1px 0 #1d1410,-1px -1px 0 #1d1410,1px -1px 0 #1d1410,-1px 1px 0 #1d1410,2px 2px 0 var(--terracotta),0 2px 12px #000c}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .pane-name span{background:linear-gradient(180deg,#fdf2cf 0%,#f1d48b 40%,#d4a24c 62%,#f0cf83 100%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;
    filter:drop-shadow(1px 0 0 #1d1410) drop-shadow(-1px 0 0 #1d1410) drop-shadow(0 1px 0 #1d1410) drop-shadow(0 -1px 0 #1d1410) drop-shadow(2px 1.5px 0 var(--terracotta)) drop-shadow(0 3px 8px #000b)}
}
.pane:hover .pane-name span{filter:drop-shadow(1px 0 0 #1d1410) drop-shadow(-1px 0 0 #1d1410) drop-shadow(0 1px 0 #1d1410) drop-shadow(0 -1px 0 #1d1410) drop-shadow(2px 1.5px 0 var(--terracotta)) drop-shadow(0 0 10px #ffd27a)}
.art-note{position:absolute;right:8px;bottom:8px;background:#000a;color:#fff;font-size:.68rem;padding:2px 8px;border-radius:999px;pointer-events:none}
@media (prefers-reduced-motion:reduce){.pane,.cv img,.cv .jacket{transition:none}}
@media (max-width:720px){
  .painted{aspect-ratio:auto;background:none;box-shadow:none;display:flex;flex-direction:column;gap:12px}
  .painted-sign,.pane{position:relative;left:auto;top:auto;width:100%;height:auto;aspect-ratio:var(--ar);
    background:var(--art) var(--bx) var(--by)/var(--bs) auto no-repeat;border-radius:6px;box-shadow:0 6px 14px #3a2a1630}
  .pane-caption{font-size:.92rem}
  .pane-name{font-size:1.35rem}
  .art-note{position:static;align-self:center}
}

/* homepage below the windows: inside the shop, in daylight */
.home .band{background:var(--paper-2)}
.home .d{color:var(--shop-green-2)}
.home .h{color:var(--shop-green-2);font-size:1.25rem}
.home .eyebrow{color:#9c4329}
.home .note,.home .meta,.home .bay-count{color:var(--paper-muted)}
.home .price{color:#9c4329}
.home .bookcase{border-color:var(--birch-2);background:repeating-linear-gradient(180deg,var(--slat) 0 15px,#2e4f8655 15px 17px)}
.home .bay{border-right-color:var(--birch-2);border-bottom-color:var(--birch)}
.home .bay-count{background:#fffaf0;border-radius:2px;padding:0 6px}
.home .shelf{border-bottom-color:var(--birch);box-shadow:0 10px 0 -4px var(--birch-2)}
.home .peek{background:#fff;border-color:var(--paper-line);border-left-color:var(--terracotta)}
.home .quotes figure{background:#fff;border-color:var(--paper-line);border-top-color:var(--shop-green)}
.home .quotes figcaption{color:var(--paper-muted)}
.home .quotes blockquote::before,.home .quotes blockquote::after{color:var(--terracotta)}

/* sell pages: genre grid, wanted lists, questions */
.lead{margin:0;max-width:44rem;font-size:1.08rem;color:var(--ink-2)}
.crumbs a{color:var(--teal-2)}
.wanted-top{border:1px solid var(--teal);border-left:4px solid var(--orange);border-radius:8px;padding:14px 18px;background:#ffffff06;max-width:44rem}
.wanted-top ul{margin:8px 0 0;padding-left:1.2rem;display:grid;gap:4px}
.wanted-top li::marker{color:var(--orange-2)}
.genre-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:12px}
.genre-grid a{display:flex;flex-direction:column;gap:6px;height:100%;padding:14px 16px;border:1px solid var(--teal);border-radius:8px;text-decoration:none;color:var(--ink);background:#ffffff05}
.genre-grid a:hover{border-color:var(--orange-2)}
.genre-grid b{font-family:var(--head);font-size:1.05rem;color:var(--sign-cream)}
.genre-grid span{font-size:.88rem;color:var(--ink-2)}
.genre-grid i{font-style:normal;align-self:flex-start;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:var(--orange);color:#fff;border-radius:999px;padding:2px 9px}
.genre-grid .top a{border-top:3px solid var(--orange)}
.wanted-sec{display:flex;flex-direction:column;gap:8px}
.wanted-sec h2.d{font-size:1.25rem;color:var(--shop-green-2);text-shadow:none}
.wanted-sec p{margin:0;max-width:48rem}
.wanted-list{margin:0;padding-left:1.1rem;display:grid;gap:5px}
.wanted-list.cols{grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));column-gap:28px}
.wanted-list li::marker{color:var(--terracotta)}
.wanted-list span{color:var(--vellum-muted);font-size:.92rem}
.faq{display:grid;gap:8px;max-width:48rem}
.faq details{border:1px solid var(--teal);border-radius:8px;padding:10px 14px;background:#ffffff05}
.faq summary{cursor:pointer;font-weight:700;color:var(--sign-cream)}
.faq p{margin:8px 0 0;color:var(--ink-2)}

/* long-form text pages (privacy) */
.prose{max-width:46rem}
.prose h2.d{font-size:1.3rem;color:var(--shop-green-2);text-shadow:none;margin-top:10px}
.prose p{margin:0}
.keep{border-collapse:collapse;width:100%;font-size:.95rem}
.keep th,.keep td{text-align:left;vertical-align:top;padding:8px 10px;border-bottom:1px solid var(--vellum-line)}
.keep th{font-weight:600;width:40%}

.bay-count{align-self:center;font-size:.72rem;color:var(--ink-2);margin-top:-4px}

/* catalogue: covers without photos, search extras, book gallery, related books */
.cover.nophoto{display:flex;align-items:center;justify-content:center;padding:4px;text-align:center}
.cover.nophoto span{font-family:var(--head);font-size:.55rem;line-height:1.15;color:var(--gold-2);overflow:hidden;max-height:100%}
img.cover{object-fit:cover;background:#ddd}
.filters small{color:var(--vellum-muted);font-size:.78rem}
.filters select,.find-q input{font:inherit;padding:7px 9px;border:1px solid #b8a98b;border-radius:6px;background:#fff;color:var(--vellum-ink);width:100%}
.empty{padding:20px 0;display:grid;gap:8px}
.empty p{margin:0}
.pager{display:flex;align-items:center;justify-content:center;gap:14px;padding-top:18px;color:var(--vellum-muted)}
.gallery .main-photo img{width:100%;border-radius:6px;border:2px solid var(--teal)}
.thumbs{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.thumb{padding:0;border:2px solid transparent;border-radius:4px;background:none;cursor:pointer;width:60px}
.thumb.on{border-color:var(--orange-2)}
.thumb img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:3px}
.desc{font-size:.95rem;color:var(--ink-2);max-width:42rem}
.desc p{margin:0 0 .6em}
.more-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(9rem,1fr));gap:14px}
.more{display:flex;flex-direction:column;gap:6px;text-decoration:none;color:var(--ink);font-size:.86rem}
.more img,.more .cover{width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:4px}
.more b{font-weight:600;line-height:1.25}
.sec-head a{color:var(--teal-2)}
.filters fieldset a{display:flex;justify-content:space-between;gap:8px;padding:2px 0}
.filters fieldset{border:1px solid var(--vellum-line);border-radius:6px;padding:8px 12px}
.filters legend{padding:0 4px}

/* the books for sale (find and book pages): a white page and bigger photos, like an eBay or
   Amazon shop (Daniel, 27 Oct 2026). The header and footer keep the shop's colours. */
.store main{background:#fff;color:#1f2b2a;color-scheme:light}
.store main .vellum{background:#fff}
.store main .band{background:#f5f5f3}
.store main .d,.store main .h,.store main .eyebrow,.store .result b{color:#111;text-shadow:none}   /* clean black, no shadow (Daniel, 28 Oct) */
.store .bigcover{box-shadow:none}
.store main .meta,.store main .note,.store main .desc,.store main .facts dt,.store main .aside,.store main .resbar{color:#5b6461}
.store main a,.store main .crumbs a,.store main .sec-head a{color:#2b5f5b}
.store main .btn{color:#fff}
.store main .btn.ghost{color:#2b5f5b;border-color:#2b5f5b}
.store main .price{color:#9c4329}
.store .book h1.d,.store .result b{font-family:var(--body);font-weight:700;letter-spacing:0;line-height:1.25}
.store .book h1.d{font-size:clamp(1.35rem,2.6vw,1.75rem)!important}
.store .book{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:36px}
@media (max-width:760px){.store .book{grid-template-columns:1fr;gap:20px}}
.store .gallery .main-photo{display:block;border:1px solid #e3e3e3;border-radius:6px;padding:8px;background:#fff}
.store .gallery .main-photo img{border:0;border-radius:0;margin:0 auto;max-height:min(78vh,720px);width:auto;object-fit:contain}
.store .thumb{width:76px;border-color:#e3e3e3}
.store .thumb.on{border-color:var(--orange)}
.store .buybox{background:#fff;border:1px solid #d5d9d9;border-top:3px solid var(--orange)}
.store .buybox .price{font-size:2rem}
.store .more{color:#1f2b2a}
.store .quotes figure{background:#fff;border-color:#e3e3e3;border-top-color:var(--orange)}
.store .quotes figcaption{color:#5b6461}
.store .more img{object-fit:contain;background:#fff;border:1px solid #e6e6e6}
.store .result{grid-template-columns:120px 1fr auto;gap:18px;padding:16px 0;border-bottom-color:#e6e6e6}
.store .result .cover{width:120px}
.store .result img.cover{object-fit:contain;background:#fff;border:1px solid #eee}
.store .result b{font-size:1.05rem}
.store .result .price{font-size:1.25rem}
@media (max-width:600px){.store .result{grid-template-columns:84px 1fr auto;gap:12px}.store .result .cover{width:84px}}

/* sell pages: "Get paid quickly and safely" (_sell_trust.html) */
.promises{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:12px;padding:0;margin:0;list-style:none}
.promises li{border:1px solid var(--teal);border-top:3px solid var(--orange);border-radius:8px;padding:14px;display:flex;flex-direction:column;gap:4px}
.promises b{font-family:var(--head);color:var(--sign-cream)}
.promises span{font-size:.9rem;color:var(--ink-2)}

/* the approved landing design (SHOP_HERO = "sol", 24 Oct 2026, HERO-DESIGN.md): Sol's painted
   shopfront on a white page, the bays as links, front doors that open on hover, CSS-only creatures
   in the windows. Positions are percentages of the 1536x1024 picture; cqw sizes scale with it. */
.sol-street{background:#fff}
.sol{--s-teal:#2a9993;--s-teal-deep:#176a66;--s-teal-text:#1b6f6b;--s-orange:#e0731c;--s-orange-text:#b85a14;--s-glow:#ffd27a;
  --s-sign:"Alfa Slab One",Rockwell,"Roboto Slab",Georgia,serif;display:grid;gap:20px;padding-bottom:28px;color:#1d3536}
.sol-hero{position:relative;container-type:inline-size;border-radius:4px;overflow:hidden}
.sol-hero>img{width:100%;height:auto}
.sol-bay{position:absolute;top:27.8%;display:block;border-radius:12cqw 12cqw .4cqw .4cqw/5cqw 5cqw .4cqw .4cqw;text-decoration:none;transition:box-shadow .25s,background .25s;z-index:2}
/* arch panels: each cream panel painted over in its own colour, so the three read as buttons
   (Buy teal, Sell copper, Visit gold), with the label in Domine on top. Hover brightens the arch. */
.sol-arch{position:absolute;display:block;z-index:3;border-radius:50% 50% .3cqw .3cqw/100% 100% .3cqw .3cqw;background:var(--arch);
  box-shadow:inset 0 .35cqw .5cqw rgba(255,255,255,.22),inset 0 -.35cqw .6cqw rgba(0,0,0,.22);transition:background .25s}
.sol-b1 .sol-arch{--arch:#13615d;--arch-hi:#1a7a75}
.sol-b2 .sol-arch{--arch:#cf631b;--arch-hi:#e57a2b}
.sol-b3 .sol-arch{--arch:#e3a52a;--arch-hi:#f2bb45}
.sol-bay:hover .sol-arch,.sol-bay:focus-visible .sol-arch{background:var(--arch-hi)}
.sol-label{position:absolute;left:4%;right:4%;top:24%;bottom:2%;display:flex;align-items:center;justify-content:center;font:700 4.6cqw/1 "Domine",Georgia,serif;letter-spacing:.04em;
  color:#fbf3e4;text-shadow:max(.12cqw,1px) max(.12cqw,1px) 0 rgba(0,0,0,.38)}
.sol-b3 .sol-label{color:#123f3d;text-shadow:max(.1cqw,1px) max(.1cqw,1px) 0 rgba(255,255,255,.4)}
.sol-bay:hover,.sol-bay:focus-visible{box-shadow:inset 0 0 0 .35cqw var(--s-orange),0 0 3cqw rgba(255,190,90,.6);background:rgba(255,206,120,.14);outline:none}
.sol-b1{left:7.2%;width:25.3%;height:53.2%}.sol-b2{left:38.5%;width:24.3%;height:53.2%}.sol-b3{left:68.8%;width:24%;height:64.1%}
.sol-glass,.sol-peek{position:absolute;overflow:hidden;pointer-events:none;z-index:1}
/* fairies and sparkles */
.sol-fairy{position:absolute;width:2cqw;aspect-ratio:1;left:0;top:0;filter:drop-shadow(0 0 .45cqw var(--s-glow)) drop-shadow(0 0 .15cqw #fff)}
.sol-fairy svg{width:100%;height:100%;display:block;overflow:visible}
.sol-fairy .wings ellipse{fill:rgba(255,255,255,.75);stroke:#f2c08a;stroke-width:.6}
.sol-fairy .wings{transform-origin:12px 11px;animation:sol-flutter .14s ease-in-out infinite alternate}
.sol-fairy .body{fill:#fff4d6}
@keyframes sol-flutter{to{transform:scaleX(.35)}}
.sol-f1{animation:sol-fly1 17s ease-in-out infinite}
@keyframes sol-fly1{
  0%{transform:translate(-10cqw,9cqw) rotate(-8deg);opacity:0}
  6%{opacity:1}
  20%{transform:translate(4cqw,2.5cqw) rotate(6deg)}
  34%{transform:translate(12cqw,5cqw) rotate(-4deg)}
  42%{transform:translate(15.5cqw,2cqw) rotate(8deg)}
  52%{transform:translate(20cqw,4cqw) rotate(0deg);opacity:1}
  60%{transform:translate(28cqw,1cqw) rotate(10deg);opacity:0}
  100%{transform:translate(28cqw,1cqw);opacity:0}
}
.sol-f2{width:1.4cqw;animation:sol-fly2 11s ease-in-out infinite;animation-delay:-3s}
@keyframes sol-fly2{
  0%,100%{transform:translate(9cqw,9cqw)}
  25%{transform:translate(12cqw,6cqw)}
  50%{transform:translate(8cqw,4.5cqw)}
  75%{transform:translate(6cqw,7.5cqw)}
}
.sol-twinkle{position:absolute;width:.5cqw;aspect-ratio:1;border-radius:50%;background:#fff6dc;box-shadow:0 0 .5cqw .15cqw var(--s-glow);opacity:0;animation:sol-tw 5s ease-in-out infinite}
@keyframes sol-tw{0%,100%{opacity:0;transform:scale(.4)}12%{opacity:.9;transform:scale(1)}24%{opacity:0;transform:scale(.4)}}
/* the flying book */
.sol-book{position:absolute;width:4cqw;left:0;top:0;opacity:0;animation:sol-bookfly 23s linear infinite;animation-delay:4s;filter:drop-shadow(0 .3cqw .3cqw rgba(0,0,0,.25))}
.sol-book svg{width:100%;display:block;overflow:visible}
.sol-book .pages{fill:#fbf1dc}
.sol-book .cov path:first-child{fill:var(--s-teal)}
.sol-book .cov.r path:first-child{fill:var(--s-teal-deep)}
.sol-book .trim{stroke:var(--s-orange);stroke-width:1;fill:none}
.sol-book .cov{transform-origin:20px 17px;animation:sol-flap .45s ease-in-out infinite alternate}
.sol-book .cov.l{animation-name:sol-flapl}
@keyframes sol-flap{from{transform:scaleY(1) skewY(-6deg)}to{transform:scaleY(.35) skewY(10deg)}}
@keyframes sol-flapl{from{transform:scaleY(1) skewY(6deg)}to{transform:scaleY(.35) skewY(-10deg)}}
@keyframes sol-bookfly{
  0%{transform:translate(-4cqw,6cqw) rotate(4deg);opacity:0}
  2%{opacity:1}
  10%{transform:translate(6cqw,2.5cqw) rotate(-6deg)}
  20%{transform:translate(15cqw,4cqw) rotate(5deg)}
  30%{transform:translate(25cqw,1.5cqw) rotate(-4deg);opacity:1}
  31%,100%{transform:translate(27cqw,1.5cqw);opacity:0}
}
/* gremlins: rise from behind something, look about, blink, sink */
.sol-grem{position:absolute;left:0;right:0;bottom:0;transform:translateY(105%);animation:sol-peek 13s ease-in-out infinite}
.sol-grem svg{width:100%;display:block}
.sol-grem .ear,.sol-grem .head,.sol-grem .hand{fill:#4f7a45}
.sol-grem .head{stroke:#2f4d2a;stroke-width:.8}
.sol-grem .earin{fill:var(--s-orange)}
.sol-grem .eyes ellipse{fill:#ffcf5a}
.sol-grem .pupils{fill:#22160b;animation:sol-look 13s ease-in-out infinite}
.sol-grem .lids rect{fill:#4f7a45;animation:sol-blink 13s infinite}
@keyframes sol-peek{0%,8%{transform:translateY(105%)}13%,36%{transform:translateY(38%)}40%,100%{transform:translateY(105%)}}
@keyframes sol-look{0%,16%{transform:translateX(0)}19%,24%{transform:translateX(-1.6px)}27%,31%{transform:translateX(1.6px)}34%,100%{transform:translateX(0)}}
@keyframes sol-blink{0%,21%,23%,29.5%,31.5%,100%{height:0}22%,30.5%{height:10px}}
.sol-g2 .sol-grem,.sol-g2 .sol-grem .pupils,.sol-g2 .sol-grem .lids rect{animation-delay:-6.5s}
/* the front doors: two glazed leaves over the open doorway, swinging inward on hover */
.sol-doorway{position:absolute;perspective:60cqw;pointer-events:none;z-index:2}
.sol-leaf{position:absolute;top:0;bottom:0;width:50%;transition:transform .9s cubic-bezier(.3,.1,.2,1),filter .9s;box-shadow:inset 0 0 0 .1cqw rgba(0,0,0,.15)}
.sol-leaf.l{left:0;transform-origin:left center}
.sol-leaf.r{right:0;transform-origin:right center}
.sol-leaf i{position:absolute;inset:0;background:url(../img/door-leaf.png) 0 0/100% 100% no-repeat}
.sol-leaf.l i{transform:scaleX(-1)}
.sol-leaf i::before{content:"";position:absolute;inset:6% 22% 37% 16%;background:linear-gradient(115deg,rgba(255,255,255,.18),rgba(255,255,255,.04) 40%,rgba(255,255,255,.12) 55%,rgba(255,255,255,.03));z-index:-1}
.sol-b3:hover .sol-leaf.l,.sol-b3:focus-visible .sol-leaf.l{transform:rotateY(78deg);filter:brightness(.8)}
.sol-b3:hover .sol-leaf.r,.sol-b3:focus-visible .sol-leaf.r{transform:rotateY(-78deg);filter:brightness(.8)}
/* strapline */
/* the same three ways in, as plain text links under the picture */
.sol-links{display:flex;justify-content:center;flex-wrap:wrap;margin-top:-6px}
.sol-links a{padding:6px 16px;color:#1b6f6b;font-weight:600;font-size:1.05rem;text-underline-offset:3px}
.sol-links a+a{border-left:1px solid #b9cfcd}
.sol-links a:hover{color:#b85a14}
.sol-strap{text-align:center;font:1.15rem/1.3 var(--s-sign);color:var(--s-teal-text);margin:0;text-wrap:balance}
.sol-strap b{color:var(--s-orange-text);font-weight:400}
@media (prefers-reduced-motion:reduce){
  .sol-bay,.sol-leaf,.sol-arch{transition:none}
  .sol-glass,.sol-peek{display:none}
}

/* Sell page list: each sell page with its picture from the old homepage as a thumbnail */
.genre-grid{grid-template-columns:repeat(auto-fill,minmax(min(19rem,100%),1fr))}
.genre-grid a.thumbed{display:grid;grid-template-columns:96px 1fr;column-gap:14px;row-gap:6px;align-content:start}
.genre-grid a.thumbed img{grid-row:1 / span 3;width:96px;height:96px;object-fit:cover;border-radius:6px}
.genre-grid a.thumbed>b,.genre-grid a.thumbed>span,.genre-grid a.thumbed>i{grid-column:2}
.genre-grid a.thumbed>i{justify-self:start}
@media (max-width:400px){.genre-grid a.thumbed{grid-template-columns:72px 1fr}.genre-grid a.thumbed img{width:72px;height:72px}}
/* footer: one line of links to every sell page, on every page */
.foot-sell{flex-basis:100%;line-height:1.7}
.foot-sell b{font-weight:600;margin-right:4px}