/* Ebooks for the Win storefront, V4 (2026 10 24).
   Identity: a bookbinder's shelf. Warm paper, ink, one buying colour (brick red),
   and four cloth colours, one per shelf, shown as bookmark ribbons.
   System fonts only. No images in CSS, no data URIs, no inline styles (strict CSP). */

:root{
  color-scheme:light;
  --paper:#f6f1e7;
  --paper2:#eee6d6;
  --card:#fffdf8;
  --ink:#1c1a16;
  --ink2:#3a362e;
  --muted:#585247;
  --rule:#d8cfbc;
  --rule2:#85796a;
  --brand:#b1311a;
  --brand-d:#8d2513;
  --on-brand:#ffffff;
  --free:#2a6334;
  --hl:#f3cf86;
  --work:#26405f;
  --work-ink:#26405f;
  --work-t:#e4e9ef;
  --everyday:#1f5a52;
  --everyday-ink:#1f5a52;
  --everyday-t:#e0ece9;
  --well:#5e6118;
  --well-ink:#5e6118;
  --well-t:#ecebd9;
  --young:#96590b;
  --young-ink:#96590b;
  --young-t:#f4e7ce;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --gut:clamp(1rem,4vw,2.5rem);
  --max:1240px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:4.75rem}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1rem/1.6 var(--sans);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,p,ul{margin-top:0}
[hidden]{display:none!important}

.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}

:focus-visible{outline:3px solid var(--brand);outline-offset:3px}
main:focus{outline:0}
.skip{position:absolute;left:1rem;top:-6rem;z-index:50;background:var(--ink);color:#fff;padding:.7rem 1rem;font-weight:700;text-decoration:none}
.skip:focus{top:1rem}

/* ---------- header ---------- */
.top{border-bottom:1px solid var(--rule)}
.top-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:4.25rem}
.brand{display:inline-flex;align-items:center;gap:.6rem;font:700 1.35rem/1 var(--serif);letter-spacing:-.025em;text-decoration:none}
.brand em{font-style:italic;color:var(--brand)}
.mark{display:block;flex:none;width:.72rem;height:1.6rem;background:var(--brand);clip-path:polygon(0 0,100% 0,100% 100%,50% 74%,0 100%)}
.nav{display:flex;align-items:center;gap:clamp(.9rem,2.4vw,2rem);list-style:none;margin:0;padding:0}
.nav a{display:inline-block;padding:.7rem .15rem;border-bottom:2px solid transparent;font:700 .78rem/1 var(--sans);letter-spacing:.07em;text-transform:uppercase;text-decoration:none}
.nav a:hover{border-bottom-color:var(--brand)}
.nav a.navfree{border:1.5px solid var(--ink);border-radius:2px;padding:.65rem .85rem}
.nav a.navfree:hover{background:var(--ink);color:var(--paper)}

/* ---------- hero ---------- */
.hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(1.5rem,4vw,4rem);align-items:center;padding-block:clamp(2.25rem,6vw,4.75rem) clamp(1.75rem,4vw,3rem)}
.eyebrow{margin:0 0 1rem;font:700 .76rem/1.3 var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--brand)}
.hero h1{margin-bottom:0;font:700 clamp(2.7rem,6.6vw,5.5rem)/1.02 var(--serif);letter-spacing:-.032em;text-wrap:balance}
.ln{display:block}
.hl{background:linear-gradient(transparent 60%,var(--hl) 60%,var(--hl) 93%,transparent 93%);padding-inline:.06em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.lead{max-width:35rem;margin:1.4rem 0 0;font-size:clamp(1.05rem,1.5vw,1.2rem);line-height:1.55;color:var(--ink2)}
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.5rem;margin-top:1.75rem}
.textlink{font-weight:700;text-underline-offset:5px;text-decoration-thickness:2px}
.textlink:hover{color:var(--brand)}

.heroart{padding:clamp(.75rem,3%,1.5rem);background:var(--paper2);border:1px solid var(--rule);border-radius:4px}
.fan{position:relative;width:100%;max-width:520px;margin-inline:auto;aspect-ratio:1/.92}
.fan img{position:absolute;height:auto;border-radius:2px;filter:drop-shadow(0 12px 14px rgba(28,26,22,.3))}
.fan .f1{left:1%;top:10%;width:36%;transform:rotate(-6deg)}
.fan .f2{left:30%;top:1%;width:36%;transform:rotate(3deg)}
.fan .f3{left:60%;top:13%;width:36%;transform:rotate(7deg)}
.fan .f4{left:17%;top:51%;width:58%;transform:rotate(-2.5deg)}

/* ---------- doors (hero shelf links) ---------- */
.doors{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.9rem;list-style:none;margin:0 0 clamp(1.75rem,4vw,3rem);padding:0}
.door a{display:block;height:100%;padding:.95rem 1.05rem 1.05rem;background:var(--card);border:1.5px solid var(--rule2);border-top:6px solid var(--shelf);border-radius:2px;text-decoration:none;transition:background-color .15s,transform .15s}
.door a:hover{background:var(--tint)}
.door b{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem;font:700 1.15rem/1.2 var(--serif)}
.door .n{font:700 .8rem/1 var(--sans);color:var(--muted)}
.door p{margin:.4rem 0 0;font-size:.88rem;line-height:1.45;color:var(--muted)}

/* shelf colour hooks */
.s-work{--shelf:var(--work);--shelf-ink:var(--work-ink);--tint:var(--work-t)}
.s-everyday{--shelf:var(--everyday);--shelf-ink:var(--everyday-ink);--tint:var(--everyday-t)}
.s-wellbeing{--shelf:var(--well);--shelf-ink:var(--well-ink);--tint:var(--well-t)}
.s-young{--shelf:var(--young);--shelf-ink:var(--young-ink);--tint:var(--young-t)}

/* ---------- trust strip ---------- */
.trust{background:var(--paper2);border-block:1px solid var(--rule)}
.trust ul{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem 1.75rem;list-style:none;margin:0;padding:.85rem 0}
.trust li{font:700 .8rem/1.4 var(--sans);letter-spacing:.02em;color:var(--ink2)}
.trust a{text-underline-offset:3px}

/* ---------- free band ---------- */
.freeband{background:var(--ink);color:var(--paper);padding-block:clamp(2.25rem,5vw,3.75rem)}
.freeband :focus-visible{outline-color:var(--paper)}
.kicker{margin:0 0 .5rem;font:700 .76rem/1.3 var(--sans);letter-spacing:.13em;text-transform:uppercase}
.freeband .kicker{color:#f0c987}
.freehead{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:.75rem 2rem;margin-bottom:1.5rem}
.freehead h2,.cat-head h2,.faq h2{margin-bottom:0;font:700 clamp(1.9rem,4.4vw,3.2rem)/1.08 var(--serif);letter-spacing:-.03em}
.freehead p{max-width:30rem;margin:0;color:#cfc7b6}
.freegrid{display:grid;grid-template-columns:1fr;gap:1rem;list-style:none;margin:0;padding:0}
.fcard{display:grid;grid-template-columns:72px minmax(0,1fr);gap:1rem;padding:1rem;background:#26241f;border:1px solid #4a463d;border-radius:3px}
.fcover{position:relative;display:block;align-self:start;aspect-ratio:4/5;background:var(--paper2);border-radius:2px}
.fcover img{position:absolute;left:6%;top:6%;width:88%;height:88%;object-fit:contain}
.fcard h3{margin:0;font:700 1.12rem/1.2 var(--serif)}
.fcard p{margin:.3rem 0 .75rem;font-size:.88rem;line-height:1.45;color:#cfc7b6}
.fbody{display:flex;flex-direction:column;justify-content:space-between;min-width:0}
.fcard .btn{align-self:flex-start;flex:none;min-width:8.5rem}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;flex:1 1 8.5rem;min-height:46px;padding:.65rem 1.05rem;background:var(--brand);border:2px solid var(--brand);border-radius:3px;color:var(--on-brand);font:700 .95rem/1.15 var(--sans);text-align:center;text-decoration:none;transition:background-color .15s,border-color .15s,color .15s,transform .15s}
.btn:hover{background:var(--brand-d);border-color:var(--brand-d)}
.btn-lg{flex:none;min-height:54px;padding:.9rem 1.7rem;font-size:1.05rem}
.btn-free{background:transparent;border-color:var(--ink);color:var(--ink)}
.btn-free:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn-ink{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.btn-ink:hover{background:transparent;border-color:var(--paper);color:var(--paper)}
@media (prefers-reduced-motion:no-preference){
  .btn:hover,.door a:hover{transform:translateY(-1px)}
}

/* ---------- catalog ---------- */
.catalog{padding-top:clamp(2.5rem,6vw,4.5rem)}
.cat-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:.75rem 2rem;padding-bottom:1.5rem}
.cat-head p{max-width:34rem;margin:0;color:var(--muted)}

.shelfbar{position:sticky;top:0;z-index:20;background:rgba(246,241,231,.97);border-block:1px solid var(--rule2);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.shelfbar-in{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem;padding-block:.55rem}
.chips{display:flex;flex:1 1 0;min-width:0;gap:.45rem;overflow-x:auto;scrollbar-width:none;padding:.25rem}
.chips::-webkit-scrollbar{display:none}
.chips a,.searchtoggle{display:inline-flex;flex:none;align-items:center;gap:.45rem;min-height:42px;padding:.45rem .85rem;background:var(--card);border:1.5px solid var(--rule2);border-radius:2px;color:var(--ink);font:700 .86rem/1 var(--sans);white-space:nowrap;text-decoration:none;cursor:pointer}
.chips a:hover,.searchtoggle:hover{background:var(--paper2)}
.chips a:focus-visible,.searchtoggle:focus-visible{outline-offset:1px}
.chips a[aria-current="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.chips .n{font-weight:400;color:var(--muted)}
.chips a[aria-current="true"] .n{color:#d9d1c0}
.dot{display:inline-block;width:.6rem;height:.6rem;border-radius:50%;background:var(--shelf,var(--free))}
.c-all .dot{display:none}
.searchtoggle{display:none}
.search{flex:0 1 21rem}
.search input{-webkit-appearance:none;appearance:none;width:100%;min-height:42px;padding:.5rem .8rem;background:var(--card);border:1.5px solid var(--rule2);border-radius:2px;color:var(--ink);font:400 1rem/1.2 var(--sans)}
.search input::placeholder{color:var(--muted);opacity:1}
.search input:focus-visible{outline-offset:1px}

.status{min-height:1.6rem;margin:1.25rem 0 0;font-size:.9rem;color:var(--muted)}
.empty{padding:2.5rem 0;text-align:center}
.empty p{margin-bottom:1rem;font:700 1.2rem/1.3 var(--serif)}
.empty .btn{flex:none}

.shelf{padding-top:clamp(2rem,4.5vw,3.25rem)}
.shelf-head{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:1rem;margin-bottom:1.5rem;border-top:3px solid var(--shelf)}
.ribbon{grid-row:1/4;display:flex;align-items:flex-start;justify-content:center;width:2.7rem;height:3.7rem;margin-top:-3px;padding-top:.8rem;background:var(--shelf);color:#fff;font:700 .92rem/1 var(--sans);letter-spacing:.04em;clip-path:polygon(0 0,100% 0,100% 100%,50% 82%,0 100%)}
.shelf-head h2{display:flex;flex-wrap:wrap;align-items:baseline;gap:.25rem 1rem;margin:.7rem 0 0;font:700 clamp(1.75rem,3.8vw,2.7rem)/1.1 var(--serif);letter-spacing:-.028em}
.count{font:700 .8rem/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--shelf-ink)}
.shelf-blurb{margin:.45rem 0 0;max-width:42rem;color:var(--ink2)}
.shelf-note{margin:.35rem 0 .2rem;max-width:42rem;font-size:.84rem;color:var(--muted)}

.bookgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.5rem 1.25rem}

/* ---------- book card ---------- */
.book{display:grid;grid-template-rows:auto 1fr auto;min-width:0;background:var(--card);border:1px solid var(--rule);border-radius:3px;transition:border-color .15s,box-shadow .15s}
.book:hover{border-color:var(--rule2);box-shadow:0 8px 20px -14px rgba(28,26,22,.55)}
.coverbox{position:relative;display:block;aspect-ratio:4/5;background:var(--tint,var(--paper2));border-radius:2px 2px 0 0;overflow:hidden}
.coverbox img{position:absolute;left:8%;top:7%;width:84%;height:86%;object-fit:contain;filter:drop-shadow(0 8px 9px rgba(28,26,22,.3))}
.coverbox.land{aspect-ratio:16/10.5}
.coverbox.land img{left:5%;top:5%;width:90%;height:90%}
.tag{position:absolute;left:.55rem;top:.55rem;padding:.25rem .5rem;background:var(--free);border-radius:2px;color:#fff;font:700 .68rem/1 var(--sans);letter-spacing:.1em;text-transform:uppercase}
.info{min-width:0;padding:.95rem 1rem 0}
.meta{display:flex;flex-wrap:wrap;margin:0 0 .45rem;font:700 .68rem/1.5 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.meta span+span::before{content:"\00b7";margin:0 .5em}
.book h3{margin:0;font:700 1.28rem/1.2 var(--serif);letter-spacing:-.015em;overflow-wrap:break-word}
.for{margin:.5rem 0 0;font:700 .86rem/1.4 var(--sans);color:var(--shelf-ink)}
.desc{margin:.45rem 0 .2rem;font-size:.9rem;line-height:1.5;color:var(--muted)}
.buyrow{display:grid;gap:.75rem;margin-top:.75rem;padding:.85rem 1rem 1rem;border-top:1px solid var(--rule)}
.offer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem .75rem}
.offer+.offer{padding-top:.75rem;border-top:1px dashed var(--rule)}
.offer-info{display:flex;flex-direction:column;gap:.25rem;line-height:1.1}
.offer-label{font:700 .68rem/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.price{font:700 1.5rem/1 var(--serif);font-variant-numeric:lining-nums tabular-nums;white-space:nowrap}
.price .cur{margin-right:.18em;font:700 .72rem/1 var(--sans);letter-spacing:.06em;vertical-align:.5em}
.price.free{color:var(--free)}

/* ---------- FAQ ---------- */
.faq{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--gut);padding-block:clamp(3.5rem,8vw,6.5rem)}
.faq-list{border-top:2px solid var(--ink)}
.faq details{border-bottom:1px solid var(--rule2);padding:.2rem 0}
.faq summary{position:relative;padding:.95rem 2.5rem .95rem 0;font:700 1.15rem/1.3 var(--serif);cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:.25rem;top:.55rem;font:400 1.7rem/1 var(--sans);color:var(--brand);transition:transform .15s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{max-width:42rem;margin:0 0 1rem;color:var(--ink2)}
.faq details a{font-weight:700}

/* ---------- footer ---------- */
.sitefooter{background:var(--ink);color:var(--paper);padding-block:3rem 2rem}
.sitefooter :focus-visible{outline-color:var(--paper)}
.footgrid{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2rem}
.sitefooter .brand{font-size:1.9rem}
.sitefooter .brand em{color:#f0a48f}
.sitefooter .mark{background:#f0a48f}
.sitefooter p{max-width:30rem;color:#cfc7b6}
.sitefooter .kicker{color:#f0c987}
.sitefooter a{text-underline-offset:4px}
.footnote{margin-top:2.5rem;padding-top:1rem;border-top:1px solid #6b675e;font:700 .72rem/1.6 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:#d1c8ba}

/* ---------- 404 ---------- */
.nf{padding-block:clamp(3rem,10vw,7rem)}
.nf h1{margin-bottom:0;font:700 clamp(2.4rem,6vw,4.5rem)/1.05 var(--serif);letter-spacing:-.03em;text-wrap:balance}

/* ---------- breakpoints ---------- */
@media (min-width:600px){
  .freegrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:900px){
  .freegrid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:1200px){
  .freegrid{grid-template-columns:repeat(5,minmax(0,1fr))}
  .fcard{grid-template-columns:1fr;gap:.85rem}
  .fcover{width:84px}
}
@media (max-width:1199px){
  .bookgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:899px){
  .bookgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .searchtoggle{display:inline-flex}
  .search{display:none;flex:1 0 100%}
  .shelfbar.open .search{display:block}
  .doors{grid-template-columns:repeat(2,minmax(0,1fr))}
  .faq{grid-template-columns:1fr}
}
@media (max-width:759px){
  .hero{grid-template-columns:1fr}
  .heroart{display:none}
  .ln{display:inline}
  .nav .hide-sm{display:none}
  .door p{display:none}
}
@media (max-width:599px){
  .bookgrid{grid-template-columns:1fr;gap:1rem}
  .book{grid-template-columns:104px minmax(0,1fr);grid-template-rows:auto auto;grid-template-areas:"media info" "buy buy"}
  .media{grid-area:media;padding:.75rem 0 0 .75rem}
  .info{grid-area:info;padding:.75rem .9rem 0 .8rem}
  .buyrow{grid-area:buy}
  .coverbox,.coverbox.land{aspect-ratio:4/5;border-radius:2px}
  .coverbox.land img{left:4%;top:4%;width:92%;height:92%}
  .book h3{font-size:1.15rem}
  .desc{font-size:.88rem}
  .tag{left:.3rem;top:.3rem;padding:.2rem .35rem;font-size:.6rem}
  .brand{font-size:1.2rem}
  .shelf-head h2{font-size:1.7rem}
  .ribbon{width:2.3rem;height:3.3rem;font-size:.8rem}
  .footgrid{display:block}
  .footgrid>div+div{margin-top:1.75rem}
}
@media (min-width:600px){
  .media{display:contents}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  .btn:hover,.door a:hover{transform:none}
}
@media print{
  .shelfbar,.skip,.heroart,.nav{display:none}
  .freeband,.sitefooter{background:#fff;color:#000}
}